sprintify-ui 0.0.109 → 0.0.111

package/dist/types/src/components/BaseField.vue.d.ts

@@ -42,9 +42,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<string | string[] | Record<string, boolean>>;
     };
 }>>, {
+    label: string;
     required: boolean;
     name: string;
-    label: string;
     errorType: "default" | "alert";
     labelClass: string | string[] | Record<string, boolean>;
 }>, {

package/dist/types/src/components/BaseFieldI18n.vue.d.ts

@@ -81,9 +81,9 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    label: string;
     required: boolean;
     name: string;
-    label: string;
     defaultValue: string | number | boolean;
     modelValue: {
         [locale: string]: string | number | boolean;

package/dist/types/src/components/BaseStatistic.vue.d.ts

@@ -48,8 +48,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | null>;
     };
 }>>, {
-    caption: string | null;
     label: string | null;
+    caption: string | null;
     secondaryValue: string | null;
     trend: "up" | "down" | null;
 }>;

package/dist/types/src/components/BaseTableColumn.vue.d.ts

@@ -152,8 +152,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    meta: Record<string, any> | unknown[];
     label: string;
+    meta: Record<string, any> | unknown[];
     toggle: boolean;
     width: number;
     field: string;

package/dist/types/src/types/index.d.ts

@@ -163,9 +163,13 @@ export interface NotificationsConfig {
     footerLabel?: string;
     footerTo?: RouteLocationRaw;
 }
+export interface SelectConfigurationOption {
+    value: OptionValue;
+    label: string;
+    [key: string]: any;
+}
 export interface SelectConfiguration {
-    options: Option[];
-    valueKey: string;
-    labelKey: string;
-    onChange: (value: OptionValue) => void;
+    option?: SelectConfigurationOption;
+    options: SelectConfigurationOption[];
+    onChange?: (option: SelectConfigurationOption | null) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.109",
+  "version": "0.0.111",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAutocomplete.stories.js

@@ -196,7 +196,7 @@ export const WithSelect = (args) => {
         labelKey: 'label',
         valueKey: 'value',
         onChange: (option) => {
-          selected.value = option;
+          selected.value = option.value;
         },
       };
 

package/src/components/BaseAutocomplete.vue

@@ -15,10 +15,10 @@
         >
           <option
             v-for="option in select.options"
-            :key="option[select.valueKey]"
-            :value="option[select.valueKey]"
+            :key="option.value + ''"
+            :value="option.value"
           >
-            {{ option[select.labelKey] }}
+            {{ option.label }}
           </option>
         </select>
         <div class="relative grow">
@@ -120,7 +120,7 @@
 <script lang="ts" setup>
 import { get } from 'lodash';
 import { PropType, Ref, ComputedRef } from 'vue';
-import { NormalizedOption, Option } from '@/types';
+import { NormalizedOption, Option, OptionValue } from '@/types';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { BaseIcon } from './index';
@@ -420,27 +420,40 @@ function highlight() {
   inputElement.value?.select();
 }
 
-const selection = ref(null) as Ref<string | null>;
+const selection = ref(null) as Ref<OptionValue>;
 
 watch(
   () => props.select,
   (select) => {
-    if (select && select.options.length > 0) {
-      selection.value = select.options[0][select.valueKey];
+    if (select) {
+      if (select.option) {
+        selection.value = select.option.value;
+      } else if (select.options.length) {
+        selection.value = select.options[0].value;
+      }
+    } else {
+      selection.value = null;
     }
   },
   { immediate: true }
 );
 
 function onSelectChange(event: Event) {
-  focus();
-  open();
-  highlight();
   const value = get(event, 'target.value', null);
+  const option = props.select?.options.find((option) => option.value == value);
+
   if (props.select && props.select.onChange) {
-    props.select.onChange(value);
+    props.select.onChange(option ?? null);
   }
+
   emit('select', value);
+
+  // Let the emitted select event propagate before opening the dropdown
+  nextTick(() => {
+    focus();
+    open();
+    highlight();
+  });
 }
 
 const slotProps = {

package/src/components/BaseAutocompleteFetch.stories.js

@@ -180,7 +180,7 @@ export const WithSelect = (args) => {
         labelKey: 'label',
         valueKey: 'value',
         onChange: (option) => {
-          selected.value = option;
+          selected.value = option.value;
         },
       };
 

package/src/components/BaseBelongsTo.stories.js

@@ -179,7 +179,7 @@ export const WithSelect = (args) => {
         labelKey: 'label',
         valueKey: 'value',
         onChange: (option) => {
-          selected.value = option;
+          selected.value = option.value;
         },
       };
 

package/src/types/index.ts

@@ -198,9 +198,14 @@ export interface NotificationsConfig {
   footerTo?: RouteLocationRaw;
 }
 
+export interface SelectConfigurationOption {
+  value: OptionValue;
+  label: string;
+  [key: string]: any;
+}
+
 export interface SelectConfiguration {
-  options: Option[];
-  valueKey: string;
-  labelKey: string;
-  onChange: (value: OptionValue) => void;
+  option?: SelectConfigurationOption;
+  options: SelectConfigurationOption[];
+  onChange?: (option: SelectConfigurationOption | null) => void;
 }