fix(admin): update components

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

@@ -1,5 +1,7 @@
 <template>
-  <div class="btn-group">
+  <div
+    v-test="AdminComponent.DropdownButton"
+    class="btn-group">
     <ActionButton
       v-for="action in dropdownActions.standalone"
       :key="`dropdown_${action.id}`"
@@ -23,7 +25,6 @@
         <ActionButton
           v-for="(action, index) in dropdownActions.hidden"
           :key="`${index}_${action.id}`"
-          v-test="'HiddenDropdownAction'"
           :action="action"
           :disabled="disabled"
           :icon="action.icon"
@@ -37,15 +38,16 @@
 
 <script lang="ts" setup>
 import {type ComponentPublicInstance, onMounted, ref} from 'vue';
-import {type Size, ActionButton, type ActionDefinition, useDropdownData, useLanguage} from '@myparcel-pdk/admin';
-
-const props = defineProps<{
-  // eslint-disable-next-line vue/no-unused-properties
-  actions: ActionDefinition[];
-  disabled: boolean;
-  hideText: boolean;
-  size?: Size;
-}>();
+import {
+  ActionButton,
+  useDropdownData,
+  useLanguage,
+  type DropdownButtonProps,
+  AdminComponent,
+} from '@myparcel-pdk/admin';
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<DropdownButtonProps>();
 
 const {dropdownActions} = useDropdownData(props);
 

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

@@ -1,48 +1,95 @@
 <template>
-  <div class="form-group row">
-    <label
-      :for="id"
-      class="col-sm-4 form-control-label">
-      <span
-        v-if="!element.isOptional && undefined !== element.props.description"
-        class="text-danger"
-        >*
-      </span>
-      <slot name="label">
-        {{ element.label }}
-      </slot>
-    </label>
-
-    <div class="col-sm-8">
-      <slot />
+  <div
+    v-show="element.isVisible"
+    v-test="[AdminComponent.FormGroup, element]"
+    :class="wrapperClass"
+    class="form-group row">
+    <template v-if="isInteractive">
+      <label
+        :class="{required: !isOptional}"
+        :for="id"
+        class="form-control-label">
+        <span
+          v-if="isOptional"
+          class="text-danger"
+          >*
+        </span>
+        <slot name="label">
+          {{ element.label }}
+        </slot>
+      </label>
+
+      <div class="col-sm input-container">
+        <slot />
 
-      <small
-        v-if="element.props?.description"
-        class="form-text text-muted">
-        {{ translate(element.props.description) }}
-      </small>
-
-      <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>
+        <small
+          v-if="element.props?.description && has(element.props.description)"
+          class="form-text text-muted">
+          {{ translate(element.props.description) }}
+        </small>
+
+        <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>
+    </template>
+
+    <div
+      v-else
+      class="col-12">
+      <slot />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {type ElementInstance, generateFieldId, useLanguage} from '@myparcel-pdk/admin';
+import {toRefs, computed} from 'vue';
+import {prefixComponent} from '@myparcel-pdk/admin-common';
+import {generateFieldId, useLanguage, type FormGroupProps, AdminComponent, useAdminConfig} 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);
+
+// This is wrapped because isOptional is not present on all elements
+const isOptional = computed<boolean>(() => {
+  return Boolean(props.element.isOptional);
+});
+
+const isInteractive = computed<boolean>(() => {
+  return props.element.hasOwnProperty('ref');
+});
+
+const config = useAdminConfig();
+
+const wrapperClass = computed(() => {
+  const resolvedComponent = Object.keys(config.components).find((key) => {
+    return config.components[key] === props.element.component;
+  });
 
-const props = defineProps<{element: ElementInstance<{description: string}>}>();
+  switch (resolvedComponent) {
+    case prefixComponent(AdminComponent.ToggleInput):
+      return ['switch-widget'];
 
-const {translate} = useLanguage();
+    case prefixComponent(AdminComponent.SelectInput):
+    case prefixComponent(AdminComponent.MultiSelectInput):
+      return ['select-widget'];
 
-const id = generateFieldId(props.element);
+    default:
+      return [];
+  }
+});
 </script>

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

@@ -1,15 +1,17 @@
 <template>
   <div
+    v-test="AdminComponent.Icon"
     class="material-icons"
     v-text="materialIcon" />
 </template>
 
-<script lang="ts">
-import {type PropType, computed, defineComponent} from 'vue';
-import {AdminIcon} from '@myparcel-pdk/admin';
-import {isEnumValue} from '@myparcel/ts-utils';
+<script lang="ts" setup>
+import {computed} from 'vue';
+import {AdminIcon, AdminComponent} from '@myparcel-pdk/admin';
 
-const materialIconMap: Record<AdminIcon, string> = {
+const props = defineProps<{icon: AdminIcon}>();
+
+const materialIconMap = {
   [AdminIcon.Add]: 'add',
   [AdminIcon.ArrowDown]: 'south',
   [AdminIcon.ArrowUp]: 'north',
@@ -27,22 +29,7 @@ const materialIconMap: Record<AdminIcon, string> = {
   [AdminIcon.Shipment]: 'local_shipping',
   [AdminIcon.Spinner]: 'loop',
   [AdminIcon.Yes]: 'check',
-};
-
-export default defineComponent({
-  name: 'PsIcon',
-  props: {
-    icon: {
-      type: String as PropType<AdminIcon>,
-      default: null,
-      validator: (value: string) => isEnumValue(value, AdminIcon),
-    },
-  },
+} satisfies Record<AdminIcon, string>;
 
-  setup: (props) => {
-    return {
-      materialIcon: computed(() => materialIconMap[props.icon]),
-    };
-  },
-});
+const materialIcon = computed(() => materialIconMap[props.icon]);
 </script>

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

@@ -0,0 +1,24 @@
+<template>
+  <PdkSelectInput
+    :id="id"
+    v-model="model"
+    v-test="[AdminComponent.MultiSelectInput, element]"
+    :element="element"
+    multiple="true" />
+</template>
+
+<script generic="T extends MultiSelectInputModelValue" lang="ts" setup>
+import {
+  type MultiSelectInputProps,
+  type MultiSelectInputEmits,
+  type MultiSelectInputModelValue,
+  AdminComponent,
+  useElementContext,
+} from '@myparcel-pdk/admin';
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<MultiSelectInputProps<T>>();
+const emit = defineEmits<MultiSelectInputEmits<T>>();
+
+const {id, model} = useElementContext(props, emit);
+</script>

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

@@ -1,18 +1,13 @@
 <template>
-  <div class="card row">
+  <div
+    v-test="AdminComponent.PluginSettingsWrapper"
+    class="card row">
     <div class="card-body col-sm-12 pdk-plugin-settings-wrapper">
       <slot />
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
-/**
- * A table component that can be used to render data via slots.
- */
-export default defineComponent({
-  name: 'PsPluginSettingsWrapper',
-});
+<script lang="ts" setup>
+import {AdminComponent} from '@myparcel-pdk/admin';
 </script>

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-test="AdminComponent.Row"
     :class="{
       'mypa-gap-4': !collapseGutters,
     }"
@@ -9,13 +10,10 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  collapseGutters: {
-    type: Boolean,
-  },
-  columns: {
-    type: [Number, String],
-    default: null,
-  },
-});
+import {AdminComponent} from '@myparcel-pdk/admin';
+
+defineProps<{
+  collapseGutters: boolean;
+  columns?: number | string;
+}>();
 </script>

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

@@ -0,0 +1,31 @@
+<template>
+  <select
+    :id="id"
+    v-model="model"
+    v-test="[AdminComponent.SelectInput, element]"
+    :name="id"
+    class="custom-select form-control">
+    <option
+      v-for="option in options"
+      :key="option.value"
+      :value="option.value">
+      {{ option.label }}
+    </option>
+  </select>
+</template>
+
+<script generic="T extends SelectInputModelValue" lang="ts" setup>
+import {
+  type SelectInputProps,
+  type SelectInputEmits,
+  type SelectInputModelValue,
+  AdminComponent,
+  useSelectInputContext,
+} from '@myparcel-pdk/admin';
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<SelectInputProps<T>>();
+const emit = defineEmits<SelectInputEmits<T>>();
+
+const {id, model, options} = useSelectInputContext(props, emit);
+</script>

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

@@ -0,0 +1,24 @@
+<template>
+  <div v-test="AdminComponent.SettingsDivider">
+    <PdkHeading
+      v-if="element.props.heading"
+      :level="element.props.level"
+      class="bg-transparent card-header mt-3 mx-0">
+      {{ translate(element.props.heading) }}
+    </PdkHeading>
+
+    <p
+      v-if="element.props.content && has(element.props.content)"
+      class="card-text"
+      v-text="translate(element.props.content)" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {AdminComponent, useLanguage, type SettingsDividerProps} from '@myparcel-pdk/admin';
+
+// eslint-disable-next-line vue/no-unused-properties
+defineProps<SettingsDividerProps>();
+
+const {translate, has} = useLanguage();
+</script>

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

@@ -1,7 +1,11 @@
 <template>
-  <ul class="nav nav-pills">
+  <ul
+    v-test="AdminComponent.TabNavButtonWrapper"
+    class="nav nav-pills">
     <slot />
   </ul>
 </template>
 
-<script lang="ts" setup />
+<script lang="ts" setup>
+import {AdminComponent} from '@myparcel-pdk/admin';
+</script>

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

@@ -2,6 +2,7 @@
   <textarea
     :id="id"
     v-model.trim="model"
+    v-test="AdminComponent.TextArea"
     :class="{
       'form-required': !element.isValid,
     }"
@@ -10,15 +11,11 @@
 </template>
 
 <script lang="ts" setup>
-import {useVModel} from '@vueuse/core';
-import {type ElementInstance, generateFieldId} from '@myparcel-pdk/admin';
-import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
+import {AdminComponent, type TextAreaProps, type TextAreaEmits, useElementContext} from '@myparcel-pdk/admin';
 
 // eslint-disable-next-line vue/no-unused-properties
-const props = defineProps<{modelValue: string | number; element: InteractiveElementInstance}>();
-const emit = defineEmits<(e: 'update:modelValue', value: string | number) => void>();
+const props = defineProps<TextAreaProps>();
+const emit = defineEmits<TextAreaEmits>();
 
-const model = useVModel(props, undefined, emit);
-
-const id = generateFieldId(props.element as ElementInstance);
+const {id, model} = useElementContext(props, emit);
 </script>