feat: add composable for select input context

apps/admin-components/src/components/DefaultSelectInput.vue

@@ -2,11 +2,11 @@
   <select
     :id="id"
     v-model="model"
-    :disabled="element.isDisabled || element.isSuspended">
+    :disabled="options.length === 1 || element.isDisabled || element.isSuspended">
     <option
-      v-for="(item, index) in element.props?.options ?? []"
+      v-for="(item, index) in options"
       :key="index"
-      :disabled="item.disabled || element.isDisabled || element.isSuspended"
+      :disabled="item.disabled"
       :value="item.value"
       v-text="item.label" />
   </select>
@@ -17,7 +17,7 @@
  * A select box. Renders a list of options which each have their own value.
  */
 
-import {generateFieldId, useElement} from '@myparcel-pdk/frontend-core/src';
+import {generateFieldId, useElement, useSelectInputContext} from '@myparcel-pdk/frontend-core/src';
 import {useVModel} from '@vueuse/core';
 
 // eslint-disable-next-line vue/no-unused-properties
@@ -28,4 +28,7 @@ const model = useVModel(props, undefined, emit);
 
 const element = useElement();
 const id = generateFieldId();
+
+// @ts-expect-error props are not typed
+const {options} = useSelectInputContext(model, element.props?.options ?? []);
 </script>

apps/admin-preset-bootstrap4/src/components/Bootstrap4SelectInput.vue

@@ -3,19 +3,20 @@
     :id="id"
     v-model="model"
     :class="{
-      disabled: element.props?.options?.length === 1 || element.isDisabled || element.isSuspended,
+      disabled: options.length === 1 || element.isDisabled || element.isSuspended,
     }"
     class="custom-select form-control">
     <option
-      v-for="(item, index) in element.props?.options ?? []"
+      v-for="(item, index) in options"
       :key="index"
+      :disabled="item.disabled"
       :value="item.value"
       v-text="item.label" />
   </select>
 </template>
 
 <script setup lang="ts">
-import {generateFieldId, useElement} from '@myparcel-pdk/frontend-core/src';
+import {generateFieldId, useElement, useSelectInputContext} from '@myparcel-pdk/frontend-core/src';
 import {useVModel} from '@vueuse/core';
 
 // eslint-disable-next-line vue/no-unused-properties
@@ -26,4 +27,7 @@ const model = useVModel(props, undefined, emit);
 
 const element = useElement();
 const id = generateFieldId();
+
+// @ts-expect-error props are not typed
+const {options} = useSelectInputContext(model, element.props?.options ?? []);
 </script>

apps/admin/src/common.ts

@@ -75,6 +75,7 @@ export {
   useModalStore,
   useNotificationStore,
   usePdfWindow,
+  useSelectInputContext,
   useWeekdays,
   webhooksDeleteAction,
 } from '@myparcel-pdk/frontend-core/src';

libs/frontend/core/src/composables/index.ts

@@ -12,6 +12,7 @@ export * from './useGlobalPdkAdmin';
 export * from './useLoading';
 export * from './useLogger';
 export * from './useOrderData';
+export * from './useSelectInputContext';
 export * from './useShipmentData';
 export * from './useStoreContextQuery';
 export * from './useStoreQuery';

libs/frontend/core/src/composables/useSelectInputContext.ts

@@ -0,0 +1,40 @@
+import {ComputedRef, WritableComputedRef, computed, onMounted, watch} from 'vue';
+import {SelectOption} from '@myparcel-pdk/common/src';
+import {useLanguage} from './translations';
+
+type UseSelectInputContext = (
+  model: WritableComputedRef<string | number>,
+  options: SelectOption[],
+) => {
+  options: ComputedRef<SelectOption[]>;
+};
+
+export const useSelectInputContext: UseSelectInputContext = (model, options) => {
+  const {translate} = useLanguage();
+
+  const computedOptions = computed<SelectOption[]>(() => {
+    return options
+      .map((item) => ({...item, label: translate(item.label)}))
+      .sort((itemA, itemB) => String(itemA.label).localeCompare(itemB.label));
+  });
+
+  onMounted(() => {
+    watch(
+      computedOptions,
+      (newOptions) => {
+        const hasExistingValue = model.value && newOptions.some((option) => option.value === model.value);
+
+        if (hasExistingValue || newOptions.length === 0) {
+          return;
+        }
+
+        model.value = newOptions[0].value;
+      },
+      {immediate: Number(computedOptions.value?.length) > 0},
+    );
+  });
+
+  return {
+    options: computedOptions,
+  };
+};