+
\ No newline at end of file
diff --git a/client/src/components/inputs/NicerForm.vue b/client/src/components/inputs/NicerForm.vue
index f346410..b381439 100644
--- a/client/src/components/inputs/NicerForm.vue
+++ b/client/src/components/inputs/NicerForm.vue
@@ -50,21 +50,12 @@ watch($$(modelValue), (val) => {
-
-
diff --git a/client/src/definitions.ts b/client/src/definitions.ts
index 0881399..f64be00 100644
--- a/client/src/definitions.ts
+++ b/client/src/definitions.ts
@@ -49,7 +49,7 @@ const GetAddresses: SearchProvider = async (o) => {
};
const GetServices: SearchProvider = async (o) => {
- let res = await apiCall('Object.services.list', {});
+ let res = await apiCall('object.services.list', {});
if (res.Error === null) {
console.debug('services', res.Data);
let obj = {} as Options;
diff --git a/client/src/global-styles/components.css b/client/src/global-styles/components.css
index 55760c7..10be728 100644
--- a/client/src/global-styles/components.css
+++ b/client/src/global-styles/components.css
@@ -25,19 +25,32 @@ input {
padding: 0.25rem;
}
-form, .form {
+/* Universal Form Style-Component */
+:is(form, .form) {
display: grid;
grid-template-columns: auto 1fr;
padding: 0.5rem;
gap: 0.5rem;
}
-:is(form, .form) > :is(button, .button, h1) {
- grid-column: 1 / 3;
+:is(form, .form) :is(form, .form) { /* Subform and EnumInput */
+ grid-column: 1 / 3; /* Maintenance: This column-end must match the column count of the host form, +1 */
+ grid-template-columns: subgrid; /* All descendants of a form align to that same form */
+ padding: 0px; /* To keep alignment, no padding is needed for those descendants */
+}
+:is(form, .form) :is(form, .form) > .inner-form { /* Soft-Nesting for Subform and EnumInput */
+ border-left: 1px solid var(--cl-fg);
+ padding-left: 0.5rem;
+}
+:is(form, .form) > :is(button, .button, h1, h2, h3, h4, h5, h6) {
+ grid-column: 1 / 3; /* Full-Span children */
}
:is(form, .form) > label {
- grid-column: 1;
+ grid-column: 1; /* Re-align unbalanced grid => allows the last column(s) to be optional */
padding: 0.25rem;
}
+:is(form, .form) > label::after {
+ content: ":";
+}
table {
width: 100%;
diff --git a/client/src/main.ts b/client/src/main.ts
index c1e721b..0ecfb97 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -5,6 +5,7 @@ import './global-styles/mlfe.css';
import './global-styles/transitions.css';
import 'vue-toast-notification/dist/theme-default.css';
+import NicerForm from './components/inputs/NicerForm.vue';
import PillBar from './components/inputs/PillBar.vue';
import TextBox from './components/inputs/TextBox.vue';
import EnumInput from './components/inputs/EnumInput.vue';
@@ -34,6 +35,7 @@ app.use(head);
app.use(ToastPlugin);
// Global Components
+app.component('NicerForm', NicerForm);
app.component('PillBar', PillBar);
app.component('TextBox', TextBox);
app.component('NumberBox', NumberBox);
diff --git a/client/src/pages/test.vue b/client/src/pages/test.vue
index 05421ba..ceef4a9 100644
--- a/client/src/pages/test.vue
+++ b/client/src/pages/test.vue
@@ -1,10 +1,5 @@