sprintify-ui 0.10.87 → 0.10.88

package/src/components/BaseBelongsToFetch.vue

@@ -20,6 +20,8 @@
     :visible-focus="visibleFocus"
     :focus-on-mount="focusOnMount"
     :select="select"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -74,6 +76,8 @@ const props = withDefaults(
     showRemoveButton?: boolean;
     emptyOptionLabel?: string;
     select?: SelectConfiguration;
+    optionColor?: (option: RawOption) => string;
+    optionIcon?: (option: RawOption) => string;
   }>(),
   {
     modelValue: undefined,
@@ -95,6 +99,8 @@ const props = withDefaults(
     showRemoveButton: true,
     emptyOptionLabel: undefined,
     select: undefined,
+    optionColor: undefined,
+    optionIcon: undefined,
   }
 );
 

package/src/components/BaseHasMany.stories.js

@@ -16,6 +16,11 @@ export default {
     options: options,
     field: "label",
     primaryKey: "value",
+    optionColor: (option) => {
+      if (option.type === "jedi") return "blue";
+      if (option.type === "sith") return "black";
+      return "gray";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseHasMany.vue

@@ -12,6 +12,8 @@
     :size="size"
     :has-error="hasError"
     :max="max"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
     @update:model-value="onUpdate"
   >
     <template #items="itemProps">
@@ -96,6 +98,14 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseHasManyFetch.stories.js

@@ -22,6 +22,18 @@ export default {
       const params = QueryString.stringify({ filter: { id: ids } });
       return `https://faker.witify.io/api/todos?${params}`;
     },
+    optionColor: (option) => {
+      if (option.type === "work") return "green";
+      if (option.type === "personal") return "blue";
+      if (option.type === "family") return "purple";
+      return "gray";
+    },
+    optionIcon: (option) => {
+      if (option.type === "work") return "heroicons-solid:briefcase";
+      if (option.type === "personal") return "heroicons-solid:user-circle";
+      if (option.type === "family") return "heroicons-solid:home";
+      return "heroicons-solid:tag";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseTagAutocomplete.stories.js

@@ -22,6 +22,11 @@ export default {
     labelKey: "label",
     valueKey: "value",
     options: options,
+    optionColor: (option) => {
+      if (option.type === "jedi") return "blue";
+      if (option.type === "sith") return "black";
+      return "gray";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseTagAutocomplete.vue

@@ -17,8 +17,30 @@
         >
           <div
             :title="selection.label"
-            class="truncate"
+            class="truncate flex gap-2 items-center"
           >
+            <div
+              v-if="optionIcon && selection.option"
+              class="shrink-0"
+            >
+              <BaseIcon
+                :icon="optionIcon(selection.option)"
+                class="shrink-0"
+                :color="optionColor ? optionColor(selection.option) : 'gray'"
+              />
+            </div>
+            <div
+              v-else-if="optionColor && selection.option"
+              class="shrink-0"
+            >
+              <div
+                class="shrink-0 rounded-full h-2.5 w-2.5"
+                :style="{
+                  backgroundColor: optionColor(selection.option),
+                }"
+              />
+            </div>
+
             {{ selection.label }}
           </div>
 
@@ -70,6 +92,8 @@
           :loading="loading"
           :loading-bottom="loadingBottom"
           tw-drawer="p-1"
+          :option-color="optionColor"
+          :option-icon="optionIcon"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -112,6 +136,7 @@ import { t } from '@/i18n';
 import { Size, sizes } from '@/utils/sizes';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
 import { useElementBounding } from '@vueuse/core';
+import { BaseIcon } from '.';
 
 const snackbars = useSnackbarsStore();
 
@@ -193,6 +218,14 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
 });
 
 const emit = defineEmits([

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -16,6 +16,12 @@ export default {
     url: "https://faker.witify.io/api/todos",
     labelKey: "name",
     valueKey: "id",
+    optionColor: (option) => {
+      if (option.type === "work") return "green";
+      if (option.type === "personal") return "blue";
+      if (option.type === "family") return "purple";
+      return "gray";
+    },
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };