sprintify-ui 0.10.22 → 0.10.24

package/dist/types/components/BaseHasMany.vue.d.ts

@@ -16,11 +16,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     }> & Omit<{
         readonly required: boolean;
         readonly disabled: boolean;
-        readonly modelValue: RawOption[];
+        readonly modelValue: RawOption[] | null;
         readonly hasError: boolean;
         readonly url: string;
-        readonly labelKey: string;
-        readonly valueKey: string;
+        readonly labelKey: string | ((option: RawOption) => string);
+        readonly valueKey: string | ((option: RawOption) => string);
         readonly focusOnMount: boolean;
         readonly queryKey: string;
         readonly placeholder?: string | undefined;
@@ -47,7 +47,7 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             required: true;
-            type: PropType<RawOption[]>;
+            type: PropType<RawOption[] | null>;
         };
         url: {
             required: true;
@@ -55,11 +55,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
         };
         labelKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         valueKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         placeholder: {
             default: undefined;
@@ -144,7 +144,7 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
 }> & Omit<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
-        type: PropType<RawOption[]>;
+        type: PropType<RawOption[] | null>;
     };
     url: {
         required: true;
@@ -152,11 +152,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     placeholder: {
         default: undefined;
@@ -210,7 +210,9 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
             open: () => void;
             close: () => void;
             keywords: import("vue").ComputedRef<string>;
-            option: RawOption;
+            option: RawOption | null;
+            value: import("@/types").OptionValue;
+            label: string;
             selected: boolean;
             active: boolean;
         }) => any) | undefined;
@@ -245,11 +247,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     }> & Omit<{
         readonly required: boolean;
         readonly disabled: boolean;
-        readonly modelValue: RawOption[];
+        readonly modelValue: RawOption[] | null;
         readonly hasError: boolean;
         readonly url: string;
-        readonly labelKey: string;
-        readonly valueKey: string;
+        readonly labelKey: string | ((option: RawOption) => string);
+        readonly valueKey: string | ((option: RawOption) => string);
         readonly focusOnMount: boolean;
         readonly queryKey: string;
         readonly placeholder?: string | undefined;
@@ -276,7 +278,7 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             required: true;
-            type: PropType<RawOption[]>;
+            type: PropType<RawOption[] | null>;
         };
         url: {
             required: true;
@@ -284,11 +286,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
         };
         labelKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         valueKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         placeholder: {
             default: undefined;
@@ -373,7 +375,7 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
 }> & Omit<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
-        type: PropType<RawOption[]>;
+        type: PropType<RawOption[] | null>;
     };
     url: {
         required: true;
@@ -381,11 +383,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     placeholder: {
         default: undefined;
@@ -439,7 +441,9 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
             open: () => void;
             close: () => void;
             keywords: import("vue").ComputedRef<string>;
-            option: RawOption;
+            option: RawOption | null;
+            value: import("@/types").OptionValue;
+            label: string;
             selected: boolean;
             active: boolean;
         }) => any) | undefined;
@@ -474,7 +478,9 @@ declare var __VLS_10: {
     open: () => void;
     close: () => void;
     keywords: import("vue").ComputedRef<string>;
-    option: RawOption;
+    option: RawOption | null;
+    value: import("@/types").OptionValue;
+    label: string;
     selected: boolean;
     active: boolean;
 }, __VLS_14: {
@@ -515,7 +521,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     field: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     required: {
         default: boolean;
@@ -567,7 +573,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     field: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     required: {
         default: boolean;
@@ -625,7 +631,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     field: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     required: {
         default: boolean;
@@ -678,7 +684,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     field: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     required: {
         default: boolean;

package/dist/types/components/BaseHasManyFetch.vue.d.ts

@@ -15,11 +15,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     }> & Omit<{
         readonly required: boolean;
         readonly disabled: boolean;
-        readonly modelValue: RawOption[];
+        readonly modelValue: RawOption[] | null;
         readonly hasError: boolean;
         readonly url: string;
-        readonly labelKey: string;
-        readonly valueKey: string;
+        readonly labelKey: string | ((option: RawOption) => string);
+        readonly valueKey: string | ((option: RawOption) => string);
         readonly focusOnMount: boolean;
         readonly queryKey: string;
         readonly placeholder?: string | undefined;
@@ -46,7 +46,7 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             required: true;
-            type: PropType<RawOption[]>;
+            type: PropType<RawOption[] | null>;
         };
         url: {
             required: true;
@@ -54,11 +54,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
         };
         labelKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         valueKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         placeholder: {
             default: undefined;
@@ -143,7 +143,7 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
 }> & Omit<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
-        type: PropType<RawOption[]>;
+        type: PropType<RawOption[] | null>;
     };
     url: {
         required: true;
@@ -151,11 +151,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     placeholder: {
         default: undefined;
@@ -209,7 +209,9 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
             open: () => void;
             close: () => void;
             keywords: import("vue").ComputedRef<string>;
-            option: RawOption;
+            option: RawOption | null;
+            value: import("@/types").OptionValue;
+            label: string;
             selected: boolean;
             active: boolean;
         }) => any) | undefined;
@@ -244,11 +246,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     }> & Omit<{
         readonly required: boolean;
         readonly disabled: boolean;
-        readonly modelValue: RawOption[];
+        readonly modelValue: RawOption[] | null;
         readonly hasError: boolean;
         readonly url: string;
-        readonly labelKey: string;
-        readonly valueKey: string;
+        readonly labelKey: string | ((option: RawOption) => string);
+        readonly valueKey: string | ((option: RawOption) => string);
         readonly focusOnMount: boolean;
         readonly queryKey: string;
         readonly placeholder?: string | undefined;
@@ -275,7 +277,7 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             required: true;
-            type: PropType<RawOption[]>;
+            type: PropType<RawOption[] | null>;
         };
         url: {
             required: true;
@@ -283,11 +285,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
         };
         labelKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         valueKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         placeholder: {
             default: undefined;
@@ -372,7 +374,7 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
 }> & Omit<Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
-        type: PropType<RawOption[]>;
+        type: PropType<RawOption[] | null>;
     };
     url: {
         required: true;
@@ -380,11 +382,11 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     placeholder: {
         default: undefined;
@@ -438,7 +440,9 @@ declare const tagAutocompleteFetch: import("vue").Ref<({
             open: () => void;
             close: () => void;
             keywords: import("vue").ComputedRef<string>;
-            option: RawOption;
+            option: RawOption | null;
+            value: import("@/types").OptionValue;
+            label: string;
             selected: boolean;
             active: boolean;
         }) => any) | undefined;
@@ -473,7 +477,9 @@ declare var __VLS_10: {
     open: () => void;
     close: () => void;
     keywords: import("vue").ComputedRef<string>;
-    option: RawOption;
+    option: RawOption | null;
+    value: import("@/types").OptionValue;
+    label: string;
     selected: boolean;
     active: boolean;
 }, __VLS_14: {

package/dist/types/components/BaseTagAutocomplete.vue.d.ts

@@ -151,7 +151,9 @@ declare const drawer: import("vue").Ref<({
     $slots: {
         empty?: ((props: {}) => any) | undefined;
         option?: ((props: {
-            option: RawOption;
+            option: RawOption | null;
+            value: import("@/types").OptionValue;
+            label: string;
             selected: boolean;
             active: boolean;
         }) => any) | undefined;
@@ -306,7 +308,9 @@ declare const drawer: import("vue").Ref<({
     $slots: {
         empty?: ((props: {}) => any) | undefined;
         option?: ((props: {
-            option: RawOption;
+            option: RawOption | null;
+            value: import("@/types").OptionValue;
+            label: string;
             selected: boolean;
             active: boolean;
         }) => any) | undefined;
@@ -358,7 +362,9 @@ declare var __VLS_1: {
     open: typeof open;
     close: typeof close;
     keywords: ComputedRef<string>;
-    option: RawOption;
+    option: RawOption | null;
+    value: import("@/types").OptionValue;
+    label: string;
     selected: boolean;
     active: boolean;
 }, __VLS_17: {
@@ -389,11 +395,11 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     name: {
         default: undefined;
@@ -493,11 +499,11 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     name: {
         default: undefined;
@@ -593,11 +599,11 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     name: {
         default: undefined;
@@ -682,11 +688,11 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     name: {
         default: undefined;

package/dist/types/components/BaseTagAutocompleteFetch.vue.d.ts

@@ -28,8 +28,8 @@ declare const tagAutocomplete: import("vue").Ref<({
         readonly modelValue: RawOption[] | null;
         readonly hasError: boolean;
         readonly visibleFocus: boolean;
-        readonly labelKey: string;
-        readonly valueKey: string;
+        readonly labelKey: string | ((option: RawOption) => string);
+        readonly valueKey: string | ((option: RawOption) => string);
         readonly loading: boolean;
         readonly loadingBottom: boolean;
         readonly dropdownShow: "always" | "focus";
@@ -72,11 +72,11 @@ declare const tagAutocomplete: import("vue").Ref<({
         };
         labelKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         valueKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         name: {
             default: undefined;
@@ -219,11 +219,11 @@ declare const tagAutocomplete: import("vue").Ref<({
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     name: {
         default: undefined;
@@ -317,7 +317,9 @@ declare const tagAutocomplete: import("vue").Ref<({
             open: () => void;
             close: () => void;
             keywords: import("vue").ComputedRef<string>;
-            option: RawOption;
+            option: RawOption | null;
+            value: import("@/types").OptionValue;
+            label: string;
             selected: boolean;
             active: boolean;
         }) => any) | undefined;
@@ -356,8 +358,8 @@ declare const tagAutocomplete: import("vue").Ref<({
         readonly modelValue: RawOption[] | null;
         readonly hasError: boolean;
         readonly visibleFocus: boolean;
-        readonly labelKey: string;
-        readonly valueKey: string;
+        readonly labelKey: string | ((option: RawOption) => string);
+        readonly valueKey: string | ((option: RawOption) => string);
         readonly loading: boolean;
         readonly loadingBottom: boolean;
         readonly dropdownShow: "always" | "focus";
@@ -400,11 +402,11 @@ declare const tagAutocomplete: import("vue").Ref<({
         };
         labelKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         valueKey: {
             required: true;
-            type: StringConstructor;
+            type: PropType<string | ((option: RawOption) => string)>;
         };
         name: {
             default: undefined;
@@ -547,11 +549,11 @@ declare const tagAutocomplete: import("vue").Ref<({
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     name: {
         default: undefined;
@@ -645,7 +647,9 @@ declare const tagAutocomplete: import("vue").Ref<({
             open: () => void;
             close: () => void;
             keywords: import("vue").ComputedRef<string>;
-            option: RawOption;
+            option: RawOption | null;
+            value: import("@/types").OptionValue;
+            label: string;
             selected: boolean;
             active: boolean;
         }) => any) | undefined;
@@ -678,7 +682,9 @@ declare var __VLS_13: {
     open: () => void;
     close: () => void;
     keywords: import("vue").ComputedRef<string>;
-    option: RawOption;
+    option: RawOption | null;
+    value: import("@/types").OptionValue;
+    label: string;
     selected: boolean;
     active: boolean;
 }, __VLS_17: {
@@ -708,7 +714,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
 declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
-        type: PropType<RawOption[]>;
+        type: PropType<RawOption[] | null>;
     };
     url: {
         required: true;
@@ -716,11 +722,11 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     placeholder: {
         default: undefined;
@@ -770,7 +776,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
-        type: PropType<RawOption[]>;
+        type: PropType<RawOption[] | null>;
     };
     url: {
         required: true;
@@ -778,11 +784,11 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     placeholder: {
         default: undefined;
@@ -829,7 +835,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
 declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
-        type: PropType<RawOption[]>;
+        type: PropType<RawOption[] | null>;
     };
     url: {
         required: true;
@@ -837,11 +843,11 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     placeholder: {
         default: undefined;
@@ -885,7 +891,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
-        type: PropType<RawOption[]>;
+        type: PropType<RawOption[] | null>;
     };
     url: {
         required: true;
@@ -893,11 +899,11 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     labelKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     valueKey: {
         required: true;
-        type: StringConstructor;
+        type: PropType<string | ((option: RawOption) => string)>;
     };
     placeholder: {
         default: undefined;

package/dist/types/composables/hasOptions.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import { NormalizedOption, RawOption } from '@/types';
-export declare function useHasOptions(modelValue: Ref<RawOption[] | RawOption | null | undefined>, options: Ref<RawOption[]>, labelKey: Ref<string>, valueKey: Ref<string>, multiple?: Ref<boolean>): {
+export declare function useHasOptions(modelValue: Ref<RawOption[] | RawOption | null | undefined>, options: Ref<RawOption[]>, labelKey: Ref<string | ((option: RawOption) => string)>, valueKey: Ref<string | ((option: RawOption) => string | number)>, multiple?: Ref<boolean>): {
     normalizedOptions: import("vue").ComputedRef<NormalizedOption[]>;
     normalizedModelValue: import("vue").ComputedRef<NormalizedOption | NormalizedOption[] | null>;
     isSelected: (option: NormalizedOption) => boolean;

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

@@ -32,7 +32,7 @@ export interface DataTableQuery extends Record<string, any> {
 export type OptionValue = string | number | null;
 export type RawOption = Record<string, any>;
 export type NormalizedOption = {
-    option: RawOption;
+    option: RawOption | null;
     value: OptionValue;
     label: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.22",
+  "version": "0.10.24",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseAutocomplete.stories.js

@@ -39,6 +39,13 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const LabelFunction = Template.bind({});
+LabelFunction.args = {
+  labelKey: (option) => {
+    return option.label + " (" + option.size + ")";
+  }
+};
+
 export const AlwaysShowDropdown = Template.bind({});
 AlwaysShowDropdown.args = {
   inline: true,