fix(admin): improve product settings form

views/js/backend/admin/src/components/pdk/PsProductSettingsFormGroup.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    v-show="element.isVisible"
+    v-test="[AdminComponent.FormGroup, element]"
+    class="row">
+    <template v-if="isInteractive">
+      <div class="col-md-6">
+        <div class="form-group">
+          <label
+            :for="id"
+            class="form-control-label">
+            <slot name="label">
+              {{ element.label }}
+            </slot>
+          </label>
+
+          <div>
+            <slot />
+          </div>
+
+          <p
+            v-if="element.props?.description && has(element.props.description)"
+            class="italic subtitle">
+            {{ translate(element.props.description) }}
+          </p>
+
+          <div
+            v-if="!element.isValid"
+            class="invalid-feedback">
+            <ul class="list-unstyled">
+              <li
+                v-for="(error, index) in element.errors"
+                :key="`error_${index}`">
+                {{ error }}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="col-12 mb-4">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {toRefs, computed} from 'vue';
+import {generateFieldId, useLanguage, type FormGroupProps, AdminComponent} from '@myparcel-pdk/admin';
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<FormGroupProps>();
+
+const propRefs = toRefs(props);
+
+const {translate, has} = useLanguage();
+
+const id = generateFieldId(propRefs.element.value);
+
+const isInteractive = computed<boolean>(() => {
+  return props.element.hasOwnProperty('ref');
+});
+</script>

views/js/backend/admin/src/components/pdk/PsTriStateInput.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    v-test="[AdminComponent.TriStateInput, element]"
+    :class="config?.cssUtilities?.displayFlex"
+    class="row">
+    <div class="col-md-6">
+      <div class="row">
+        <div class="col-4">
+          <input
+            v-model="model"
+            :name="id"
+            type="hidden" />
+
+          <PdkToggleInput
+            v-model="toggleModel"
+            :class="config?.cssUtilities?.marginYAuto"
+            :element="toggleElement" />
+        </div>
+
+        <div class="col-2">
+          <PdkButton
+            :class="config?.cssUtilities?.displayFlex"
+            :size="Size.ExtraSmall"
+            :title="inheritElement?.label"
+            class="!mypa-float-none !mypa-ml-1"
+            @click="inheritModel = !inheritModel">
+            <div>
+              <i
+                :class="config?.cssUtilities?.marginYAuto"
+                class="material-icons"
+                role="none"
+                v-text="inheritModel ? 'lock' : 'lock_open'" />
+            </div>
+
+            <PdkCheckboxInput
+              v-model="inheritModel"
+              :element="{...inheritElement, label: undefined}"
+              class="mypa-sr-only"
+              tabindex="-1" />
+          </PdkButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  useTriStateInputContext,
+  AdminComponent,
+  useAdminConfig,
+  Size,
+  type TriStateInputProps,
+  type TriStateInputEmits,
+} from '@myparcel-pdk/admin';
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<TriStateInputProps>();
+const emit = defineEmits<TriStateInputEmits>();
+
+const config = useAdminConfig();
+
+const {inheritElement, toggleElement, inheritModel, toggleModel, model, id} = useTriStateInputContext(props, emit);
+</script>

views/js/backend/admin/src/components/pdk/index.ts

@@ -8,6 +8,8 @@ export {default as PsMultiSelectInput} from './PsMultiSelectInput.vue';
 
 export {default as PsPluginSettingsWrapper} from './PsPluginSettingsWrapper.vue';
 
+export {default as PsProductSettingsFormGroup} from './PsProductSettingsFormGroup.vue';
+
 export {default as PsRow} from './PsRow.vue';
 
 export {default as PsSelectInput} from './PsSelectInput.vue';
@@ -21,3 +23,5 @@ export {default as PsTabNavButtonWrapper} from './PsTabNavButtonWrapper.vue';
 export {default as PsTextArea} from './PsTextArea.vue';
 
 export {default as PsToggleInput} from './PsToggleInput.vue';
+
+export {default as PsTriStateInput} from './PsTriStateInput.vue';

views/js/backend/admin/src/main.ts

@@ -12,7 +12,6 @@ import {
   DefaultTableCol,
   DefaultTableRow,
   DefaultTimeInput,
-  DefaultTriStateInput,
 } from '@myparcel-pdk/admin-preset-default';
 import {
   Bootstrap4Box,
@@ -31,6 +30,7 @@ import {LogLevel, createPdkAdmin, type ElementInstance} from '@myparcel-pdk/admi
 import {
   PsDropdownButton,
   PsFormGroup,
+  PsProductSettingsFormGroup,
   PsIcon,
   PsPluginSettingsWrapper,
   PsRow,
@@ -41,6 +41,7 @@ import {
   PsToggleInput,
   PsMultiSelectInput,
   PsSelectInput,
+  PsTriStateInput,
 } from './components';
 
 // eslint-disable-next-line max-lines-per-function
@@ -84,7 +85,7 @@ window.onload = () => {
       PdkTextInput: Bootstrap4TextInput,
       PdkTimeInput: DefaultTimeInput,
       PdkToggleInput: PsToggleInput,
-      PdkTriStateInput: DefaultTriStateInput,
+      PdkTriStateInput: PsTriStateInput,
     },
 
     formConfig: {
@@ -100,6 +101,9 @@ window.onload = () => {
         form: {
           tag: 'div',
         },
+        field: {
+          wrapper: PsProductSettingsFormGroup,
+        },
       },
     },