sprintify-ui 0.11.22 → 0.11.23

package/dist/sprintify-ui.es.js

@@ -22422,6 +22422,14 @@ const GA = /* @__PURE__ */ zu(YA), JA = { class: "text-xs text-slate-600" }, Y0
     focusOnMount: {
       default: !1,
       type: Boolean
+    },
+    optionColor: {
+      default: void 0,
+      type: Function
+    },
+    optionIcon: {
+      default: void 0,
+      type: Function
     }
   },
   emits: ["update:modelValue", "typing", "focus", "scrollBottom"],
@@ -22496,6 +22504,8 @@ const GA = /* @__PURE__ */ zu(YA), JA = { class: "text-xs text-slate-600" }, Y0
       max: n.max,
       filter: () => !0,
       "focus-on-mount": n.focusOnMount,
+      "option-color": n.optionColor,
+      "option-icon": n.optionIcon,
       onOpen: m,
       onTyping: h,
       onScrollBottom: g(v),
@@ -22516,7 +22526,7 @@ const GA = /* @__PURE__ */ zu(YA), JA = { class: "text-xs text-slate-600" }, Y0
         ])
       ]),
       _: 3
-    }, 8, ["loading", "loading-bottom", "model-value", "disabled", "placeholder", "options", "value-key", "label-key", "has-error", "max", "focus-on-mount", "onScrollBottom"]));
+    }, 8, ["loading", "loading-bottom", "model-value", "disabled", "placeholder", "options", "value-key", "label-key", "has-error", "max", "focus-on-mount", "option-color", "option-icon", "onScrollBottom"]));
   }
 }), oI = { class: "inline-block w-[320px] input-rounded bg-white shadow-2xl" }, iI = { class: "flex grow items-center" }, sI = { class: "shrink-0" }, lI = /* @__PURE__ */ te({
   __name: "BaseDropdownAutocomplete",

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

@@ -84,6 +84,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: boolean;
         type: BooleanConstructor;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>, {
     focus: () => void | undefined;
     blur: () => void | undefined;
@@ -140,6 +148,14 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: boolean;
         type: BooleanConstructor;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>> & Readonly<{
     onFocus?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -151,6 +167,8 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     disabled: boolean;
     hasError: boolean;
     max: number;
+    optionColor: (option: RawOption) => string;
+    optionIcon: (option: RawOption) => string;
     focusOnMount: boolean;
     queryKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.22",
+  "version": "0.11.23",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -47,6 +47,30 @@ const Template = (args) => {
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const OptionColor = Template.bind({});
+OptionColor.args = {};
+
+export const OptionIcon = Template.bind({});
+OptionIcon.args = {
+  optionColor: undefined,
+  optionIcon: (option) => {
+    if (option.type === "work") return "heroicons:briefcase";
+    if (option.type === "personal") return "heroicons:user";
+    if (option.type === "family") return "heroicons:home";
+    return "heroicons:tag";
+  },
+};
+
+export const OptionIconWithColor = Template.bind({});
+OptionIconWithColor.args = {
+  optionIcon: (option) => {
+    if (option.type === "work") return "heroicons:briefcase";
+    if (option.type === "personal") return "heroicons:user";
+    if (option.type === "family") return "heroicons:home";
+    return "heroicons:tag";
+  },
+};
+
 export const LabelFunction = Template.bind({});
 LabelFunction.args = {
   labelKey: (option) => {

package/src/components/BaseTagAutocompleteFetch.vue

@@ -13,6 +13,8 @@
     :max="max"
     :filter="() => true"
     :focus-on-mount="focusOnMount"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
     @open="onOpen"
     @typing="onTyping"
     @scroll-bottom="scrollBottom"
@@ -116,6 +118,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>,
+  },
 });
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);