sprintify-ui 0.10.22 → 0.10.24

package/src/components/BaseAutocomplete.vue

@@ -134,11 +134,11 @@ const props = defineProps({
   },
   labelKey: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   valueKey: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   name: {
     default: undefined,
@@ -286,14 +286,8 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   let options = normalizedOptions.value;
 
   if (props.showEmptyOption) {
-    const emptyOption = {
-      [props.valueKey]: null,
-      [props.labelKey]: props.emptyOptionLabel,
-      option: null,
-    };
-
     options = [
-      { value: null, label: props.emptyOptionLabel, option: emptyOption },
+      { value: null, label: props.emptyOptionLabel, option: null },
       ...options,
     ];
   }

package/src/components/BaseAutocompleteDrawer.vue

@@ -39,6 +39,8 @@
             <slot
               name="option"
               :option="option.option"
+              :value="option.value"
+              :label="option.label"
               :selected="isSelected(option)"
               :active="focusOption && focusOption.value == option.value"
             >

package/src/components/BaseAutocompleteFetch.stories.js

@@ -35,6 +35,13 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const LabelFunction = Template.bind({});
+LabelFunction.args = {
+  labelKey: (option) => {
+    return option.title + " - " + option.uuid;
+  }
+};
+
 export const AlwaysShowDropdown = Template.bind({});
 AlwaysShowDropdown.args = {
   inline: true,
@@ -57,7 +64,7 @@ Disabled.args = {
 export const ShowEmptyOption = Template.bind({});
 ShowEmptyOption.args = {
   showEmptyOption: true,
-  emptyOptionLabel: "No Jedi",
+  emptyOptionLabel: "No Todo",
 };
 
 export const Inline = Template.bind({});

package/src/components/BaseAutocompleteFetch.vue

@@ -98,11 +98,11 @@ const props = defineProps({
   },
   labelKey: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   valueKey: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   name: {
     default: undefined,
@@ -244,7 +244,8 @@ let requestId = '';
 async function search() {
   fetching.value = true;
   showLoading.value = true;
-  requestId = uniqueId();
+  const requestIdInternal = uniqueId();
+  requestId = requestIdInternal;
 
   config.http
     .get(props.url, {
@@ -255,7 +256,7 @@ async function search() {
     })
     .then((response: any) => {
 
-      if (requestId !== requestId) {
+      if (requestIdInternal !== requestId) {
         return;
       }
 
@@ -274,7 +275,7 @@ async function search() {
     })
     .finally(() => {
 
-      if (requestId !== requestId) {
+      if (requestIdInternal !== requestId) {
         return;
       }
 

package/src/components/BaseBelongsTo.stories.js

@@ -35,6 +35,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,

package/src/components/BaseBelongsTo.vue

@@ -66,7 +66,7 @@ const props = defineProps({
   },
   field: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   required: {
     default: false,

package/src/components/BaseBelongsToFetch.stories.js

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

package/src/components/BaseDropdownAutocomplete.stories.js

@@ -37,7 +37,7 @@ const template = `<template #button="{ newValue }">
         Select a character
       </div>
       </div>
-    </template>
+      </template>
     <template #option="{ option }">
       <div class="flex items-center gap-2 text-sm py-1 px-2">
         <div 
@@ -108,9 +108,9 @@ export const AutocompleteFetch = (args) => ({
         </BaseBadge>
       </div>
     </template>
-    <template #option="{ option }">
+    <template #option="{ label }">
       <BaseBadge :contrast="option?.id ? 'high' : 'low'">
-        {{ option.name }}
+        {{ label }}
       </BaseBadge>
     </template>
   </BaseDropdownAutocomplete>
@@ -120,8 +120,10 @@ export const AutocompleteFetch = (args) => ({
 
 AutocompleteFetch.args = {
   valueKey: "id",
-  labelKey: "name",
-  url: "https://effettandem.com/api/content/tags",
+  labelKey(option) {
+    return option.title + ' - ' + option.uuid;
+  },
+  url: "https://faker.witify.io/api/todos",
   multiple: false,
 };
 
@@ -200,7 +202,7 @@ export const TagAutocompleteFetch = (args) => ({
 
 TagAutocompleteFetch.args = {
   valueKey: "id",
-  labelKey: "name",
-  url: "https://effettandem.com/api/content/tags",
+  labelKey: "title",
+  url: "https://faker.witify.io/api/todos",
   multiple: true,
 };

package/src/components/BaseDropdownAutocomplete.vue

@@ -38,14 +38,13 @@
               <div class="flex grow items-center">
                 <slot
                   name="option"
-                  :option="optionProps.option"
-                  :active="optionProps.active"
+                  v-bind="optionProps"
                   :size="size"
                 />
               </div>
               <div class="shrink-0">
                 <BaseIcon
-                  v-if="(optionProps.selected ?? false) || (optionProps.option[valueKey] == null && newValue == null)"
+                  v-if="(optionProps.selected ?? false) || (optionProps.value == null && newValue == null)"
                   icon="mdi:check"
                   class="h-4 w-4 text-slate-500"
                 />
@@ -90,11 +89,11 @@ const props = defineProps({
   },
   labelKey: {
     default: 'name',
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   valueKey: {
     default: 'id',
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   size: {
     type: String as PropType<'xs' | 'sm' | 'base'>,
@@ -191,15 +190,11 @@ function getNewValue(value: RawOption | RawOption[] | null | undefined) {
     return value;
   }
 
-  if (value == null) {
+  if (!value) {
     return null;
   }
 
-  if (value[props.valueKey] ?? null) {
-    return value;
-  }
-
-  return null;
+  return value;
 }
 
 function update() {

package/src/components/BaseHasMany.stories.js

@@ -2,8 +2,6 @@ import BaseHasMany from "./BaseHasMany.vue";
 import ShowValue from "@/../.storybook/components/ShowValue.vue";
 import { createFieldStory, options, sizes } from "../../.storybook/utils";
 import BaseAppSnackbars from "./BaseAppSnackbars.vue";
-import QueryString from "qs";
-import { random } from "lodash";
 
 export default {
   title: "Form/BaseHasMany",
@@ -43,6 +41,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 Disabled = (args) => {
   return {
     components: { BaseHasMany, ShowValue },

package/src/components/BaseHasMany.vue

@@ -66,7 +66,7 @@ const props = defineProps({
   },
   field: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   required: {
     default: false,

package/src/components/BaseHasManyFetch.stories.js

@@ -52,6 +52,13 @@ const Template = (args) => {
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const LabelFunction = Template.bind({});
+LabelFunction.args = {
+  labelKey: (option) => {
+    return option.name + " (" + option.uuid + ")";
+  },
+};
+
 export const Disabled = (args) => {
   return {
     components: { BaseHasManyFetch, ShowValue },

package/src/components/BaseTagAutocomplete.stories.js

@@ -40,6 +40,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 Max = Template.bind({});
 Max.args = {
   max: 3,

package/src/components/BaseTagAutocomplete.vue

@@ -116,11 +116,11 @@ const props = defineProps({
   },
   labelKey: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   valueKey: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   name: {
     default: undefined,

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -41,6 +41,13 @@ const Template = (args) => {
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const LabelFunction = Template.bind({});
+LabelFunction.args = {
+  labelKey: (option) => {
+    return option.name + " (" + option.uuid + ")";
+  },
+};
+
 export const Disabled = (args) => {
   return {
     components: { BaseTagAutocompleteFetch },

package/src/components/BaseTagAutocompleteFetch.vue

@@ -74,7 +74,7 @@ import { t } from '@/i18n';
 const props = defineProps({
   modelValue: {
     required: true,
-    type: Array as PropType<RawOption[]>,
+    type: [Array, null] as PropType<RawOption[] | null>,
   },
   url: {
     required: true,
@@ -82,11 +82,11 @@ const props = defineProps({
   },
   labelKey: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   valueKey: {
     required: true,
-    type: String,
+    type: [String, Function] as PropType<string | ((option: RawOption) => string)>,
   },
   placeholder: {
     default: undefined,
@@ -183,7 +183,8 @@ const search = () => {
   showLoading.value = true;
   firstSearch.value = true;
 
-  requestId = uniqueId();
+  const requestIdInternal = uniqueId();
+  requestId = requestIdInternal;
 
   http
     .get(props.url, {
@@ -194,7 +195,7 @@ const search = () => {
     })
     .then((response: any) => {
 
-      if (requestId != requestId) {
+      if (requestIdInternal !== requestId) {
         return;
       }
 
@@ -213,7 +214,7 @@ const search = () => {
     })
     .finally(() => {
 
-      if (requestId != requestId) {
+      if (requestIdInternal !== requestId) {
         return;
       }
 

package/src/composables/hasOptions.ts

@@ -1,12 +1,12 @@
 import { Ref } from 'vue';
 import { NormalizedOption, RawOption } from '@/types';
-import { get, isArray, isObject } from 'lodash';
+import { get, isArray, isFunction, isObject, isString } from 'lodash';
 
 export function useHasOptions(
   modelValue: Ref<RawOption[] | RawOption | null | undefined>,
   options: Ref<RawOption[]>,
-  labelKey: Ref<string>,
-  valueKey: Ref<string>,
+  labelKey: Ref<string | ((option: RawOption) => string)>,
+  valueKey: Ref<string | ((option: RawOption) => string | number)>,
   multiple: Ref<boolean> = ref(false)
 ) {
   const normalizedModelValue = computed(
@@ -15,10 +15,10 @@ export function useHasOptions(
         if (!isArray(modelValue.value)) {
           return [];
         }
-        return modelValue.value.map((option) => {
+        return modelValue.value.map((option: RawOption) => {
           return {
-            label: get(option, labelKey.value) as string,
-            value: get(option, valueKey.value) as string | number,
+            label: getLabel(option),
+            value: getValue(option),
             option: option,
           } as NormalizedOption;
         });
@@ -28,8 +28,8 @@ export function useHasOptions(
         }
 
         return {
-          label: get(modelValue.value, labelKey.value as never, '') as string,
-          value: get(modelValue.value, valueKey.value as never) as string | number,
+          label: getLabel(modelValue.value),
+          value: getValue(modelValue.value),
           option: modelValue.value,
         } as NormalizedOption;
       }
@@ -39,8 +39,8 @@ export function useHasOptions(
   const normalizedOptions = computed((): NormalizedOption[] => {
     return options.value.map((option) => {
       return {
-        label: get(option, labelKey.value, '') as string,
-        value: get(option, valueKey.value) as string | number,
+        label: getLabel(option),
+        value: getValue(option),
         option: option,
       } as NormalizedOption;
     });
@@ -60,6 +60,24 @@ export function useHasOptions(
     return false;
   }
 
+  function getLabel(option: RawOption): string {
+    if (isFunction(labelKey.value)) {
+      return labelKey.value(option);
+    } else if (isString(labelKey.value)) {
+      return get(option, labelKey.value, '') as string;
+    }
+    return '';
+  }
+
+  function getValue(option: RawOption): string | number {
+    if (isFunction(valueKey.value)) {
+      return valueKey.value(option);
+    } else if (isString(valueKey.value)) {
+      return get(option, valueKey.value) as string | number;
+    }
+    return '';
+  }
+
   return {
     normalizedOptions,
     normalizedModelValue,

package/src/types/index.ts

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