sprintify-ui 0.10.86 → 0.10.88

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

@@ -3,6 +3,7 @@ import { NormalizedOption, RawOption } from '@/types';
 import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 import { t } from '@/i18n';
 import { Size } from '@/utils/sizes';
+import { BaseIcon } from '.';
 declare const emit: (event: "close" | "open" | "update:modelValue" | "scrollBottom" | "typing", ...args: any[]) => void;
 declare const inputRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
 declare const dropdownRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
@@ -16,6 +17,8 @@ declare const drawer: import("vue").Ref<({
         selected: NormalizedOption | NormalizedOption[] | null | undefined;
         keywords: string;
         loadingBottom: boolean;
+        optionColor: (option: RawOption) => string;
+        optionIcon: (option: RawOption) => string;
         twDrawer: string;
     }> & Omit<{
         readonly size: "xs" | "sm" | "md" | "lg" | "xl";
@@ -25,9 +28,11 @@ declare const drawer: import("vue").Ref<({
         readonly loadingBottom: boolean;
         readonly twDrawer: string;
         readonly selected?: NormalizedOption | NormalizedOption[] | null | undefined;
+        readonly optionColor?: ((option: RawOption) => string) | undefined;
+        readonly optionIcon?: ((option: RawOption) => string) | undefined;
         readonly onSelect?: ((...args: any[]) => any) | undefined;
         readonly onScrollBottom?: ((...args: any[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "size" | "options" | "loading" | "selected" | "keywords" | "loadingBottom" | "twDrawer">;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "size" | "options" | "loading" | "selected" | "keywords" | "loadingBottom" | "optionColor" | "optionIcon" | "twDrawer">;
     $attrs: {
         [x: string]: unknown;
     };
@@ -67,6 +72,14 @@ declare const drawer: import("vue").Ref<({
             type: PropType<Size>;
             default: string;
         };
+        optionColor: {
+            default: undefined;
+            type: PropType<(option: RawOption) => string>;
+        };
+        optionIcon: {
+            default: undefined;
+            type: PropType<(option: RawOption) => string>;
+        };
         twDrawer: {
             type: StringConstructor;
             default: string;
@@ -86,6 +99,8 @@ declare const drawer: import("vue").Ref<({
         selected: NormalizedOption | NormalizedOption[] | null | undefined;
         keywords: string;
         loadingBottom: boolean;
+        optionColor: (option: RawOption) => string;
+        optionIcon: (option: RawOption) => string;
         twDrawer: string;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
         beforeCreate?: (() => void) | (() => void)[];
@@ -114,6 +129,8 @@ declare const drawer: import("vue").Ref<({
     selected: NormalizedOption | NormalizedOption[] | null | undefined;
     keywords: string;
     loadingBottom: boolean;
+    optionColor: (option: RawOption) => string;
+    optionIcon: (option: RawOption) => string;
     twDrawer: string;
 }> & Omit<Readonly<import("vue").ExtractPropTypes<{
     selected: {
@@ -140,6 +157,14 @@ declare const drawer: import("vue").Ref<({
         type: PropType<Size>;
         default: string;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
     twDrawer: {
         type: StringConstructor;
         default: string;
@@ -147,7 +172,7 @@ declare const drawer: import("vue").Ref<({
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
-}>, "onKeydown" | ("size" | "options" | "loading" | "selected" | "keywords" | "loadingBottom" | "twDrawer")> & import("vue").ShallowUnwrapRef<{
+}>, "onKeydown" | ("size" | "options" | "loading" | "selected" | "keywords" | "loadingBottom" | "optionColor" | "optionIcon" | "twDrawer")> & import("vue").ShallowUnwrapRef<{
     onKeydown: (event: KeyboardEvent) => void;
 }> & {} & import("vue").ComponentCustomProperties & {} & {
     $slots: {
@@ -173,6 +198,8 @@ declare const drawer: import("vue").Ref<({
         selected: NormalizedOption | NormalizedOption[] | null | undefined;
         keywords: string;
         loadingBottom: boolean;
+        optionColor: (option: RawOption) => string;
+        optionIcon: (option: RawOption) => string;
         twDrawer: string;
     }> & Omit<{
         readonly size: "xs" | "sm" | "md" | "lg" | "xl";
@@ -182,9 +209,11 @@ declare const drawer: import("vue").Ref<({
         readonly loadingBottom: boolean;
         readonly twDrawer: string;
         readonly selected?: NormalizedOption | NormalizedOption[] | null | undefined;
+        readonly optionColor?: ((option: RawOption) => string) | undefined;
+        readonly optionIcon?: ((option: RawOption) => string) | undefined;
         readonly onSelect?: ((...args: any[]) => any) | undefined;
         readonly onScrollBottom?: ((...args: any[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "size" | "options" | "loading" | "selected" | "keywords" | "loadingBottom" | "twDrawer">;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "size" | "options" | "loading" | "selected" | "keywords" | "loadingBottom" | "optionColor" | "optionIcon" | "twDrawer">;
     $attrs: {
         [x: string]: unknown;
     };
@@ -224,6 +253,14 @@ declare const drawer: import("vue").Ref<({
             type: PropType<Size>;
             default: string;
         };
+        optionColor: {
+            default: undefined;
+            type: PropType<(option: RawOption) => string>;
+        };
+        optionIcon: {
+            default: undefined;
+            type: PropType<(option: RawOption) => string>;
+        };
         twDrawer: {
             type: StringConstructor;
             default: string;
@@ -243,6 +280,8 @@ declare const drawer: import("vue").Ref<({
         selected: NormalizedOption | NormalizedOption[] | null | undefined;
         keywords: string;
         loadingBottom: boolean;
+        optionColor: (option: RawOption) => string;
+        optionIcon: (option: RawOption) => string;
         twDrawer: string;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
         beforeCreate?: (() => void) | (() => void)[];
@@ -271,6 +310,8 @@ declare const drawer: import("vue").Ref<({
     selected: NormalizedOption | NormalizedOption[] | null | undefined;
     keywords: string;
     loadingBottom: boolean;
+    optionColor: (option: RawOption) => string;
+    optionIcon: (option: RawOption) => string;
     twDrawer: string;
 }> & Omit<Readonly<import("vue").ExtractPropTypes<{
     selected: {
@@ -297,6 +338,14 @@ declare const drawer: import("vue").Ref<({
         type: PropType<Size>;
         default: string;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
     twDrawer: {
         type: StringConstructor;
         default: string;
@@ -304,7 +353,7 @@ declare const drawer: import("vue").Ref<({
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
-}>, "onKeydown" | ("size" | "options" | "loading" | "selected" | "keywords" | "loadingBottom" | "twDrawer")> & import("vue").ShallowUnwrapRef<{
+}>, "onKeydown" | ("size" | "options" | "loading" | "selected" | "keywords" | "loadingBottom" | "optionColor" | "optionIcon" | "twDrawer")> & import("vue").ShallowUnwrapRef<{
     onKeydown: (event: KeyboardEvent) => void;
 }> & {} & import("vue").ComponentCustomProperties & {} & {
     $slots: {
@@ -366,13 +415,13 @@ declare var __VLS_1: {
     items: NormalizedOption[];
     removeOption: (option: NormalizedOption) => void;
     disabled: boolean;
-}, __VLS_17: {
+}, __VLS_21: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
     close: typeof close;
     keywords: ComputedRef<string>;
-}, __VLS_19: {
+}, __VLS_23: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
@@ -383,7 +432,7 @@ declare var __VLS_1: {
     label: string;
     selected: boolean;
     active: boolean;
-}, __VLS_21: {
+}, __VLS_25: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
@@ -394,11 +443,11 @@ declare var __VLS_1: {
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     items?: (props: typeof __VLS_1) => any;
 } & {
-    empty?: (props: typeof __VLS_17) => any;
+    empty?: (props: typeof __VLS_21) => any;
 } & {
-    option?: (props: typeof __VLS_19) => any;
+    option?: (props: typeof __VLS_23) => any;
 } & {
-    footer?: (props: typeof __VLS_21) => any;
+    footer?: (props: typeof __VLS_25) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -477,9 +526,18 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
         type: BooleanConstructor;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>, {
     BaseAutocompleteDrawer: typeof BaseAutocompleteDrawer;
     t: typeof t;
+    BaseIcon: typeof BaseIcon;
     emit: typeof emit;
     inputRef: typeof inputRef;
     dropdownRef: typeof dropdownRef;
@@ -585,6 +643,14 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
         type: BooleanConstructor;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
@@ -604,6 +670,8 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     visibleFocus: boolean;
     loading: boolean;
     loadingBottom: boolean;
+    optionColor: (option: RawOption) => string;
+    optionIcon: (option: RawOption) => string;
     dropdownShow: "always" | "focus";
     focusOnMount: boolean;
     twContainer: string | string[];
@@ -685,6 +753,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: typeof focus;
     blur: typeof blur;
@@ -774,6 +850,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<{
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
@@ -793,6 +877,8 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     visibleFocus: boolean;
     loading: boolean;
     loadingBottom: boolean;
+    optionColor: (option: RawOption) => string;
+    optionIcon: (option: RawOption) => string;
     dropdownShow: "always" | "focus";
     focusOnMount: boolean;
     twContainer: string | string[];

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

@@ -18,6 +18,8 @@ declare const tagAutocomplete: import("vue").Ref<({
         visibleFocus: boolean;
         loading: boolean;
         loadingBottom: boolean;
+        optionColor: (option: RawOption) => string;
+        optionIcon: (option: RawOption) => string;
         dropdownShow: "always" | "focus";
         focusOnMount: boolean;
         twContainer: string | string[];
@@ -41,12 +43,14 @@ declare const tagAutocomplete: import("vue").Ref<({
         readonly name?: string | undefined;
         readonly placeholder?: string | undefined;
         readonly max?: number | undefined;
+        readonly optionColor?: ((option: RawOption) => string) | undefined;
+        readonly optionIcon?: ((option: RawOption) => string) | undefined;
         readonly onClose?: ((...args: any[]) => any) | undefined;
         readonly onOpen?: ((...args: any[]) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         readonly onScrollBottom?: ((...args: any[]) => any) | undefined;
         readonly onTyping?: ((...args: any[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "focusOnMount" | "twContainer">;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "optionColor" | "optionIcon" | "dropdownShow" | "focusOnMount" | "twContainer">;
     $attrs: {
         [x: string]: unknown;
     };
@@ -138,6 +142,14 @@ declare const tagAutocomplete: import("vue").Ref<({
             default: boolean;
             type: BooleanConstructor;
         };
+        optionColor: {
+            default: undefined;
+            type: PropType<(option: RawOption) => string>;
+        };
+        optionIcon: {
+            default: undefined;
+            type: PropType<(option: RawOption) => string>;
+        };
     }>> & Readonly<{
         onClose?: ((...args: any[]) => any) | undefined;
         onOpen?: ((...args: any[]) => any) | undefined;
@@ -169,6 +181,8 @@ declare const tagAutocomplete: import("vue").Ref<({
         visibleFocus: boolean;
         loading: boolean;
         loadingBottom: boolean;
+        optionColor: (option: RawOption) => string;
+        optionIcon: (option: RawOption) => string;
         dropdownShow: "always" | "focus";
         focusOnMount: boolean;
         twContainer: string | string[];
@@ -205,6 +219,8 @@ declare const tagAutocomplete: import("vue").Ref<({
     visibleFocus: boolean;
     loading: boolean;
     loadingBottom: boolean;
+    optionColor: (option: RawOption) => string;
+    optionIcon: (option: RawOption) => string;
     dropdownShow: "always" | "focus";
     focusOnMount: boolean;
     twContainer: string | string[];
@@ -285,13 +301,21 @@ declare const tagAutocomplete: import("vue").Ref<({
         default: boolean;
         type: BooleanConstructor;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
-}>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "focusOnMount" | "twContainer")> & import("vue").ShallowUnwrapRef<{
+}>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "optionColor" | "optionIcon" | "dropdownShow" | "focusOnMount" | "twContainer")> & import("vue").ShallowUnwrapRef<{
     focus: () => void;
     blur: () => void;
     close: () => void;
@@ -348,6 +372,8 @@ declare const tagAutocomplete: import("vue").Ref<({
         visibleFocus: boolean;
         loading: boolean;
         loadingBottom: boolean;
+        optionColor: (option: RawOption) => string;
+        optionIcon: (option: RawOption) => string;
         dropdownShow: "always" | "focus";
         focusOnMount: boolean;
         twContainer: string | string[];
@@ -371,12 +397,14 @@ declare const tagAutocomplete: import("vue").Ref<({
         readonly name?: string | undefined;
         readonly placeholder?: string | undefined;
         readonly max?: number | undefined;
+        readonly optionColor?: ((option: RawOption) => string) | undefined;
+        readonly optionIcon?: ((option: RawOption) => string) | undefined;
         readonly onClose?: ((...args: any[]) => any) | undefined;
         readonly onOpen?: ((...args: any[]) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         readonly onScrollBottom?: ((...args: any[]) => any) | undefined;
         readonly onTyping?: ((...args: any[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "focusOnMount" | "twContainer">;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "optionColor" | "optionIcon" | "dropdownShow" | "focusOnMount" | "twContainer">;
     $attrs: {
         [x: string]: unknown;
     };
@@ -468,6 +496,14 @@ declare const tagAutocomplete: import("vue").Ref<({
             default: boolean;
             type: BooleanConstructor;
         };
+        optionColor: {
+            default: undefined;
+            type: PropType<(option: RawOption) => string>;
+        };
+        optionIcon: {
+            default: undefined;
+            type: PropType<(option: RawOption) => string>;
+        };
     }>> & Readonly<{
         onClose?: ((...args: any[]) => any) | undefined;
         onOpen?: ((...args: any[]) => any) | undefined;
@@ -499,6 +535,8 @@ declare const tagAutocomplete: import("vue").Ref<({
         visibleFocus: boolean;
         loading: boolean;
         loadingBottom: boolean;
+        optionColor: (option: RawOption) => string;
+        optionIcon: (option: RawOption) => string;
         dropdownShow: "always" | "focus";
         focusOnMount: boolean;
         twContainer: string | string[];
@@ -535,6 +573,8 @@ declare const tagAutocomplete: import("vue").Ref<({
     visibleFocus: boolean;
     loading: boolean;
     loadingBottom: boolean;
+    optionColor: (option: RawOption) => string;
+    optionIcon: (option: RawOption) => string;
     dropdownShow: "always" | "focus";
     focusOnMount: boolean;
     twContainer: string | string[];
@@ -615,13 +655,21 @@ declare const tagAutocomplete: import("vue").Ref<({
         default: boolean;
         type: BooleanConstructor;
     };
+    optionColor: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
+    optionIcon: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
-}>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "dropdownShow" | "focusOnMount" | "twContainer")> & import("vue").ShallowUnwrapRef<{
+}>, "blur" | "close" | "focus" | "open" | "setKeywords" | ("filter" | "size" | "required" | "inline" | "disabled" | "name" | "placeholder" | "hasError" | "max" | "visibleFocus" | "loading" | "loadingBottom" | "optionColor" | "optionIcon" | "dropdownShow" | "focusOnMount" | "twContainer")> & import("vue").ShallowUnwrapRef<{
     focus: () => void;
     blur: () => void;
     close: () => void;

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

@@ -56,7 +56,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     blur: typeof blur;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     blur: (...args: any[]) => void;
+    click: (...args: any[]) => void;
     focus: (...args: any[]) => void;
+    keydown: (...args: any[]) => void;
+    keyup: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -109,7 +112,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{
     onBlur?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    onKeyup?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     class: string | string[];

package/package.json

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

package/src/components/BaseAutocomplete.stories.js

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

package/src/components/BaseAutocomplete.vue

@@ -86,8 +86,10 @@
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          tw-drawer="p-1"
           :keywords="keywords"
+          :option-color="optionColor"
+          :option-icon="optionIcon"
+          tw-drawer="p-1"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
         >
@@ -231,6 +233,14 @@ const props = defineProps({
     },
     type: [String] as PropType<string>,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
   twInput: {
     default: undefined,
     type: [String, Array] as PropType<string | string[]>,

package/src/components/BaseAutocompleteDrawer.vue

@@ -51,6 +51,29 @@
                 class="flex items-center rounded px-[0.75em] py-[0.5em]"
                 :class="[optionClass(option), optionSizeClass]"
               >
+                <div
+                  v-if="optionIcon"
+                  class="shrink-0"
+                >
+                  <BaseIcon
+                    :icon="option.option ? optionIcon(option.option) : ''"
+                    class="flex-shrink-0"
+                    :class="optionIconSizeClass"
+                    :color="option.option && optionColor ? optionColor(option.option) : 'gray'"
+                  />
+                </div>
+                <div
+                  v-else-if="optionColor"
+                  class="shrink-0"
+                >
+                  <div
+                    class="flex-shrink-0 rounded-full"
+                    :class="optionColorSizeClass"
+                    :style="{
+                      backgroundColor: option.option ? optionColor(option.option) : 'gray',
+                    }"
+                  />
+                </div>
                 <div class="grow">
                   {{ option.label }}
                 </div>
@@ -120,7 +143,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { useInfiniteScroll } from '@vueuse/core';
-import { NormalizedOption } from '@/types';
+import { NormalizedOption, RawOption } from '@/types';
 import { isArray, isObject, throttle } from 'lodash';
 import BaseSkeleton from './BaseSkeleton.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
@@ -157,6 +180,14 @@ const props = defineProps({
     type: String as PropType<Size>,
     default: 'md',
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
   twDrawer: {
     type: String,
     default: '',
@@ -380,6 +411,26 @@ const optionIconClass = computed(() => {
   return 'w-5 h-5';
 });
 
+const optionColorSizeClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'mr-2 -ml-px h-3 w-3';
+  }
+  if (props.size == 'sm') {
+    return 'mr-2 -ml-px h-2.5 w-2.5';
+  }
+  return 'mr-2 -ml-px h-2.5 w-2.5';
+});
+
+const optionIconSizeClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'mr-2 -ml-px h-3 w-3';
+  }
+  if (props.size == 'sm') {
+    return 'mr-2 -ml-0.5 h-4 w-4';
+  }
+  return 'mr-2 -ml-0.5 h-4 w-4';
+});
+
 defineExpose({
   onKeydown,
 });

package/src/components/BaseAutocompleteFetch.stories.js

@@ -16,6 +16,12 @@ export default {
     url: "https://faker.witify.io/api/todos",
     labelKey: "title",
     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>' })],
 };

package/src/components/BaseAutocompleteFetch.vue

@@ -23,6 +23,8 @@
     :show-remove-button="showRemoveButton"
     :select="select"
     :filter="filterOptions"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
     :tw-input="twInput"
     @clear="onClear"
     @open="onOpen"
@@ -168,6 +170,14 @@ const props = defineProps({
     default: undefined,
     type: Object as PropType<SelectConfiguration | undefined>,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
   twInput: {
     default: undefined,
     type: [String, Array] as PropType<string | string[]>,

package/src/components/BaseBelongsTo.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/BaseBelongsTo.vue

@@ -22,6 +22,8 @@
     :focus-on-mount="focusOnMount"
     :select="select"
     :icon="icon"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -138,6 +140,14 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  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']);