diff --git a/client/src/components/inputs/EnumInput.vue b/client/src/components/inputs/EnumInput.vue index c29596d..0ee8610 100644 --- a/client/src/components/inputs/EnumInput.vue +++ b/client/src/components/inputs/EnumInput.vue @@ -1,6 +1,6 @@ \ 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 @@