sprintify-ui 0.10.35 → 0.10.37

package/dist/sprintify-ui.es.js

@@ -10701,7 +10701,7 @@ const Dc = /* @__PURE__ */ Uo(Gv, [["render", Zv]]), Qv = { class: "relative w-f
       return o.showEmptyOption && (M = [
         { value: null, label: o.emptyOptionLabel, option: null },
         ...M
-      ]), C.value === !1 ? M : M.filter((R) => o.filter !== void 0 ? o.filter(R) : R.label ? R.label.toLowerCase().includes(g.value.toLowerCase()) : !1);
+      ]), C.value === !1 ? M : M.filter((R) => o.filter !== void 0 ? o.filter(R, g.value + "") : R.label ? R.label.toLowerCase().includes(g.value.toLowerCase()) : !1);
     });
     Ye(
       () => O.value,
@@ -11448,6 +11448,10 @@ const c0 = {
       default: void 0,
       type: String
     },
+    filter: {
+      default: void 0,
+      type: Function
+    },
     dropdownShow: {
       default: "focus",
       type: String
@@ -11522,6 +11526,7 @@ const c0 = {
       "has-error": t.hasError,
       inline: t.inline,
       size: t.size,
+      filter: t.filter,
       "dropdown-show": t.dropdownShow,
       "show-model-value": t.showModelValue,
       "show-empty-option": t.showEmptyOption,
@@ -11542,7 +11547,7 @@ const c0 = {
         ue(u.$slots, "footer", ft(pt(p)))
       ]),
       _: 3
-    }, 8, ["model-value", "options", "disabled", "name", "placeholder", "required", "value-key", "label-key", "has-error", "inline", "size", "dropdown-show", "show-model-value", "show-empty-option", "show-remove-button", "empty-option-label", "visible-focus", "focus-on-mount", "select"]));
+    }, 8, ["model-value", "options", "disabled", "name", "placeholder", "required", "value-key", "label-key", "has-error", "inline", "size", "filter", "dropdown-show", "show-model-value", "show-empty-option", "show-remove-button", "empty-option-label", "visible-focus", "focus-on-mount", "select"]));
   }
 }), x0 = /* @__PURE__ */ Q({
   __name: "BaseBelongsToFetch",
@@ -17435,8 +17440,12 @@ const _b = ["align", "colspan"], Ib = ["innerHTML"], cd = /* @__PURE__ */ Q({
   key: 0,
   class: "flex h-5 w-5 shrink-0 grow-0"
 }, zb = ["checked", "disabled"], Ob = ["onClick"], Rb = ["innerHTML"], Lb = {
-  viewBox: "0 0 20 20",
-  class: "h-5 w-5"
+  width: "11",
+  height: "11",
+  viewBox: "0 0 11 11",
+  fill: "none",
+  class: "block",
+  xmlns: "http://www.w3.org/2000/svg"
 }, Fb = ["opacity"], Pb = ["opacity"], Nb = ["onClick"], Vb = ["onClick"], jb = ["disabled", "checked"], js = "disabled:bg-slate-100 group-hover:shadow-md  disabled:border-slate-300 disabled:cursor-not-allowed duration-300 cursor-pointer focus:ring-blue-300 border border-slate-300 shadow h-[18px] w-[18px] rounded", Hb = /* @__PURE__ */ Q({
   name: "BaseDataTableTemplate",
   inheritAttrs: !1,
@@ -17779,13 +17788,13 @@ const _b = ["align", "colspan"], Ib = ["innerHTML"], cd = /* @__PURE__ */ Q({
                           ], 64)) : Z("", !0),
                           E("button", {
                             type: "button",
-                            class: j(["flex gap-1 w-full items-center bg-transparent text-left text-sm font-medium leading-tight text-slate-900", [
+                            class: j(["flex gap-2 w-full items-start bg-transparent text-left text-sm font-medium leading-tight text-slate-900", [
                               Ee.sortable ? "cursor-pointer" : "",
-                              Ee.align == "right" ? "justify-start flex-row-reverse" : ""
+                              Ee.align == "right" ? "justify-start flex-row-reverse text-right" : ""
                             ]]),
                             onClick: (M) => y(Ee, void 0, M)
                           }, [
-                            E("span", {
+                            E("div", {
                               class: j(["whitespace-nowrap text-slate-600", {
                                 "text-[12px]": t.size == "sm",
                                 "text-xs": t.size == "md"
@@ -17794,20 +17803,20 @@ const _b = ["align", "colspan"], Ib = ["innerHTML"], cd = /* @__PURE__ */ Q({
                             }, null, 10, Rb),
                             Ee.sortable ? (b(), z("div", {
                               key: 0,
-                              class: j([
+                              class: j(["h-4 relative top-0.5", [
                                 u.value === Ee ? "" : "opacity-0 duration-200 group-hover:opacity-100"
-                              ])
+                              ]])
                             }, [
                               (b(), z("svg", Lb, [
                                 E("path", {
                                   opacity: d.value ? "1" : "0.5",
-                                  fill: "currentColor",
-                                  d: "M9.116 4.823a1.25 1.25 0 0 1 1.768 0l2.646 2.647a.75.75 0 0 1-1.06 1.06l-2.47-2.47-2.47 2.47a.75.75 0 1 1-1.06-1.06l2.646-2.647Z"
+                                  d: "M4.88471 0.366233C5.00079 0.250125 5.1386 0.158021 5.29028 0.0951819C5.44196 0.0323429 5.60453 0 5.76871 0C5.93289 0 6.09546 0.0323429 6.24714 0.0951819C6.39882 0.158021 6.53663 0.250125 6.65271 0.366233L9.29871 3.01323C9.43119 3.15541 9.50331 3.34345 9.49988 3.53776C9.49646 3.73206 9.41774 3.91744 9.28033 4.05485C9.14292 4.19227 8.95753 4.27098 8.76323 4.27441C8.56893 4.27784 8.38088 4.20571 8.23871 4.07323L5.76871 1.60323L3.29871 4.07323C3.23005 4.14692 3.14725 4.20602 3.05525 4.24701C2.96325 4.28801 2.86393 4.31005 2.76323 4.31182C2.66253 4.3136 2.5625 4.29508 2.46911 4.25736C2.37572 4.21963 2.29089 4.16349 2.21967 4.09227C2.14845 4.02105 2.09231 3.93622 2.05459 3.84283C2.01686 3.74944 1.99834 3.64941 2.00012 3.54871C2.00189 3.44801 2.02394 3.34869 2.06493 3.25669C2.10592 3.1647 2.16502 3.08189 2.23871 3.01323L4.88471 0.366233Z",
+                                  fill: "black"
                                 }, null, 8, Fb),
                                 E("path", {
                                   opacity: d.value ? "0.5" : "1",
-                                  fill: "currentColor",
-                                  d: "M9.116 15.177a1.25 1.25 0 0 0 1.768 0l2.646-2.647a.75.75 0 0 0-1.06-1.06l-2.47 2.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l2.646 2.647Z"
+                                  d: "M4.84729 10.6083C4.96337 10.7244 5.10118 10.8165 5.25286 10.8793C5.40454 10.9422 5.56711 10.9745 5.73129 10.9745C5.89547 10.9745 6.05804 10.9422 6.20972 10.8793C6.3614 10.8165 6.49921 10.7244 6.61529 10.6083L9.26129 7.96129C9.39377 7.81912 9.4659 7.63107 9.46247 7.43677C9.45904 7.24247 9.38033 7.05708 9.24291 6.91967C9.1055 6.78226 8.92011 6.70354 8.72581 6.70012C8.53151 6.69669 8.34347 6.76881 8.20129 6.90129L5.73129 9.37129L3.26129 6.90129C3.11912 6.76881 2.93107 6.69669 2.73677 6.70012C2.54247 6.70354 2.35708 6.78226 2.21967 6.91967C2.08226 7.05708 2.00355 7.24247 2.00012 7.43677C1.99669 7.63107 2.06881 7.81912 2.20129 7.96129L4.84729 10.6083Z",
+                                  fill: "black"
                                 }, null, 8, Pb)
                               ]))
                             ], 2)) : Z("", !0)

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

@@ -449,7 +449,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     filter: {
         default: undefined;
-        type: PropType<(option: NormalizedOption) => boolean>;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
     };
     hasError: {
         default: boolean;
@@ -589,7 +589,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     };
     filter: {
         default: undefined;
-        type: PropType<(option: NormalizedOption) => boolean>;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
     };
     hasError: {
         default: boolean;
@@ -650,7 +650,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     onScrollBottom?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
 }>, {
-    filter: (option: NormalizedOption) => boolean;
+    filter: (option: NormalizedOption, keywords: string) => boolean;
     select: SelectConfiguration | undefined;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
@@ -719,7 +719,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     filter: {
         default: undefined;
-        type: PropType<(option: NormalizedOption) => boolean>;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
     };
     hasError: {
         default: boolean;
@@ -832,7 +832,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     };
     filter: {
         default: undefined;
-        type: PropType<(option: NormalizedOption) => boolean>;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
     };
     hasError: {
         default: boolean;
@@ -893,7 +893,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     onScrollBottom?: ((...args: any[]) => any) | undefined;
     onTyping?: ((...args: any[]) => any) | undefined;
 }>, {
-    filter: (option: NormalizedOption) => boolean;
+    filter: (option: NormalizedOption, keywords: string) => boolean;
     select: SelectConfiguration | undefined;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;

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

@@ -12,7 +12,7 @@ declare const autocomplete: import("vue").Ref<({
     $: import("vue").ComponentInternalInstance;
     $data: {};
     $props: Partial<{
-        filter: (option: import("@/types").NormalizedOption) => boolean;
+        filter: (option: import("@/types").NormalizedOption, keywords: string) => boolean;
         select: SelectConfiguration | undefined;
         size: "xs" | "sm" | "md" | "lg" | "xl";
         required: boolean;
@@ -49,7 +49,7 @@ declare const autocomplete: import("vue").Ref<({
         readonly showEmptyOption: boolean;
         readonly showRemoveButton: boolean;
         readonly emptyOptionLabel: string;
-        readonly filter?: ((option: import("@/types").NormalizedOption) => boolean) | undefined;
+        readonly filter?: ((option: import("@/types").NormalizedOption, keywords: string) => boolean) | undefined;
         readonly select?: SelectConfiguration | undefined;
         readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         readonly required?: boolean | undefined;
@@ -127,7 +127,7 @@ declare const autocomplete: import("vue").Ref<({
         };
         filter: {
             default: undefined;
-            type: PropType<(option: import("@/types").NormalizedOption) => boolean>;
+            type: PropType<(option: import("@/types").NormalizedOption, keywords: string) => boolean>;
         };
         hasError: {
             default: boolean;
@@ -200,7 +200,7 @@ declare const autocomplete: import("vue").Ref<({
         scrollBottom: (...args: any[]) => void;
         typing: (...args: any[]) => void;
     }, string, {
-        filter: (option: import("@/types").NormalizedOption) => boolean;
+        filter: (option: import("@/types").NormalizedOption, keywords: string) => boolean;
         select: SelectConfiguration | undefined;
         size: "xs" | "sm" | "md" | "lg" | "xl";
         required: boolean;
@@ -242,7 +242,7 @@ declare const autocomplete: import("vue").Ref<({
     $nextTick: typeof import("vue").nextTick;
     $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
-    filter: (option: import("@/types").NormalizedOption) => boolean;
+    filter: (option: import("@/types").NormalizedOption, keywords: string) => boolean;
     select: SelectConfiguration | undefined;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
@@ -310,7 +310,7 @@ declare const autocomplete: import("vue").Ref<({
     };
     filter: {
         default: undefined;
-        type: PropType<(option: import("@/types").NormalizedOption) => boolean>;
+        type: PropType<(option: import("@/types").NormalizedOption, keywords: string) => boolean>;
     };
     hasError: {
         default: boolean;
@@ -408,7 +408,7 @@ declare const autocomplete: import("vue").Ref<({
     $: import("vue").ComponentInternalInstance;
     $data: {};
     $props: Partial<{
-        filter: (option: import("@/types").NormalizedOption) => boolean;
+        filter: (option: import("@/types").NormalizedOption, keywords: string) => boolean;
         select: SelectConfiguration | undefined;
         size: "xs" | "sm" | "md" | "lg" | "xl";
         required: boolean;
@@ -445,7 +445,7 @@ declare const autocomplete: import("vue").Ref<({
         readonly showEmptyOption: boolean;
         readonly showRemoveButton: boolean;
         readonly emptyOptionLabel: string;
-        readonly filter?: ((option: import("@/types").NormalizedOption) => boolean) | undefined;
+        readonly filter?: ((option: import("@/types").NormalizedOption, keywords: string) => boolean) | undefined;
         readonly select?: SelectConfiguration | undefined;
         readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         readonly required?: boolean | undefined;
@@ -523,7 +523,7 @@ declare const autocomplete: import("vue").Ref<({
         };
         filter: {
             default: undefined;
-            type: PropType<(option: import("@/types").NormalizedOption) => boolean>;
+            type: PropType<(option: import("@/types").NormalizedOption, keywords: string) => boolean>;
         };
         hasError: {
             default: boolean;
@@ -596,7 +596,7 @@ declare const autocomplete: import("vue").Ref<({
         scrollBottom: (...args: any[]) => void;
         typing: (...args: any[]) => void;
     }, string, {
-        filter: (option: import("@/types").NormalizedOption) => boolean;
+        filter: (option: import("@/types").NormalizedOption, keywords: string) => boolean;
         select: SelectConfiguration | undefined;
         size: "xs" | "sm" | "md" | "lg" | "xl";
         required: boolean;
@@ -638,7 +638,7 @@ declare const autocomplete: import("vue").Ref<({
     $nextTick: typeof import("vue").nextTick;
     $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
-    filter: (option: import("@/types").NormalizedOption) => boolean;
+    filter: (option: import("@/types").NormalizedOption, keywords: string) => boolean;
     select: SelectConfiguration | undefined;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
@@ -706,7 +706,7 @@ declare const autocomplete: import("vue").Ref<({
     };
     filter: {
         default: undefined;
-        type: PropType<(option: import("@/types").NormalizedOption) => boolean>;
+        type: PropType<(option: import("@/types").NormalizedOption, keywords: string) => boolean>;
     };
     hasError: {
         default: boolean;

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

@@ -1,12 +1,12 @@
 import { PropType } from 'vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
-import { RawOption, SelectConfiguration } from '@/types';
+import { NormalizedOption, RawOption, SelectConfiguration } from '@/types';
 import { Size } from '@/utils/sizes';
 declare const autocomplete: import("vue").Ref<({
     $: import("vue").ComponentInternalInstance;
     $data: {};
     $props: Partial<{
-        filter: (option: import("@/types").NormalizedOption) => boolean;
+        filter: (option: NormalizedOption, keywords: string) => boolean;
         select: SelectConfiguration | undefined;
         size: "xs" | "sm" | "md" | "lg" | "xl";
         required: boolean;
@@ -43,7 +43,7 @@ declare const autocomplete: import("vue").Ref<({
         readonly showEmptyOption: boolean;
         readonly showRemoveButton: boolean;
         readonly emptyOptionLabel: string;
-        readonly filter?: ((option: import("@/types").NormalizedOption) => boolean) | undefined;
+        readonly filter?: ((option: NormalizedOption, keywords: string) => boolean) | undefined;
         readonly select?: SelectConfiguration | undefined;
         readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         readonly required?: boolean | undefined;
@@ -121,7 +121,7 @@ declare const autocomplete: import("vue").Ref<({
         };
         filter: {
             default: undefined;
-            type: PropType<(option: import("@/types").NormalizedOption) => boolean>;
+            type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
         };
         hasError: {
             default: boolean;
@@ -194,7 +194,7 @@ declare const autocomplete: import("vue").Ref<({
         scrollBottom: (...args: any[]) => void;
         typing: (...args: any[]) => void;
     }, string, {
-        filter: (option: import("@/types").NormalizedOption) => boolean;
+        filter: (option: NormalizedOption, keywords: string) => boolean;
         select: SelectConfiguration | undefined;
         size: "xs" | "sm" | "md" | "lg" | "xl";
         required: boolean;
@@ -236,7 +236,7 @@ declare const autocomplete: import("vue").Ref<({
     $nextTick: typeof import("vue").nextTick;
     $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
-    filter: (option: import("@/types").NormalizedOption) => boolean;
+    filter: (option: NormalizedOption, keywords: string) => boolean;
     select: SelectConfiguration | undefined;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
@@ -304,7 +304,7 @@ declare const autocomplete: import("vue").Ref<({
     };
     filter: {
         default: undefined;
-        type: PropType<(option: import("@/types").NormalizedOption) => boolean>;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
     };
     hasError: {
         default: boolean;
@@ -395,14 +395,14 @@ declare const autocomplete: import("vue").Ref<({
             open: () => void;
             close: () => void;
             keywords: import("vue").ComputedRef<string>;
-            options: import("@/types").NormalizedOption[];
+            options: NormalizedOption[];
         }) => any) | undefined;
     };
 }) | null, ({
     $: import("vue").ComponentInternalInstance;
     $data: {};
     $props: Partial<{
-        filter: (option: import("@/types").NormalizedOption) => boolean;
+        filter: (option: NormalizedOption, keywords: string) => boolean;
         select: SelectConfiguration | undefined;
         size: "xs" | "sm" | "md" | "lg" | "xl";
         required: boolean;
@@ -439,7 +439,7 @@ declare const autocomplete: import("vue").Ref<({
         readonly showEmptyOption: boolean;
         readonly showRemoveButton: boolean;
         readonly emptyOptionLabel: string;
-        readonly filter?: ((option: import("@/types").NormalizedOption) => boolean) | undefined;
+        readonly filter?: ((option: NormalizedOption, keywords: string) => boolean) | undefined;
         readonly select?: SelectConfiguration | undefined;
         readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
         readonly required?: boolean | undefined;
@@ -517,7 +517,7 @@ declare const autocomplete: import("vue").Ref<({
         };
         filter: {
             default: undefined;
-            type: PropType<(option: import("@/types").NormalizedOption) => boolean>;
+            type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
         };
         hasError: {
             default: boolean;
@@ -590,7 +590,7 @@ declare const autocomplete: import("vue").Ref<({
         scrollBottom: (...args: any[]) => void;
         typing: (...args: any[]) => void;
     }, string, {
-        filter: (option: import("@/types").NormalizedOption) => boolean;
+        filter: (option: NormalizedOption, keywords: string) => boolean;
         select: SelectConfiguration | undefined;
         size: "xs" | "sm" | "md" | "lg" | "xl";
         required: boolean;
@@ -632,7 +632,7 @@ declare const autocomplete: import("vue").Ref<({
     $nextTick: typeof import("vue").nextTick;
     $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
 } & Readonly<{
-    filter: (option: import("@/types").NormalizedOption) => boolean;
+    filter: (option: NormalizedOption, keywords: string) => boolean;
     select: SelectConfiguration | undefined;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
@@ -700,7 +700,7 @@ declare const autocomplete: import("vue").Ref<({
     };
     filter: {
         default: undefined;
-        type: PropType<(option: import("@/types").NormalizedOption) => boolean>;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
     };
     hasError: {
         default: boolean;
@@ -791,7 +791,7 @@ declare const autocomplete: import("vue").Ref<({
             open: () => void;
             close: () => void;
             keywords: import("vue").ComputedRef<string>;
-            options: import("@/types").NormalizedOption[];
+            options: NormalizedOption[];
         }) => any) | undefined;
     };
 }) | null>;
@@ -821,7 +821,7 @@ declare var __VLS_10: {
     open: () => void;
     close: () => void;
     keywords: import("vue").ComputedRef<string>;
-    options: import("@/types").NormalizedOption[];
+    options: NormalizedOption[];
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     option?: (props: typeof __VLS_10) => any;
@@ -875,6 +875,10 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
         type: PropType<Size>;
     };
+    filter: {
+        default: undefined;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
+    };
     dropdownShow: {
         default: string;
         type: PropType<"focus" | "always">;
@@ -959,6 +963,10 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
         type: PropType<Size>;
     };
+    filter: {
+        default: undefined;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
+    };
     dropdownShow: {
         default: string;
         type: PropType<"focus" | "always">;
@@ -994,6 +1002,7 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    filter: (option: NormalizedOption, keywords: string) => boolean;
     select: SelectConfiguration | undefined;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
@@ -1057,6 +1066,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<Size>;
     };
+    filter: {
+        default: undefined;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
+    };
     dropdownShow: {
         default: string;
         type: PropType<"focus" | "always">;
@@ -1142,6 +1155,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<Size>;
     };
+    filter: {
+        default: undefined;
+        type: PropType<(option: NormalizedOption, keywords: string) => boolean>;
+    };
     dropdownShow: {
         default: string;
         type: PropType<"focus" | "always">;
@@ -1177,6 +1194,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    filter: (option: NormalizedOption, keywords: string) => boolean;
     select: SelectConfiguration | undefined;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;

package/package.json

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

package/src/components/BaseAutocomplete.vue

@@ -179,7 +179,7 @@ const props = defineProps({
   },
   filter: {
     default: undefined,
-    type: Function as PropType<(option: NormalizedOption) => boolean>,
+    type: Function as PropType<(option: NormalizedOption, keywords: string) => boolean>,
   },
   hasError: {
     default: false,
@@ -308,7 +308,7 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
 
   return options.filter((option) => {
     if (props.filter !== undefined) {
-      return props.filter(option);
+      return props.filter(option, keywords.value + '');
     }
     if (!option.label) {
       return false;

package/src/components/BaseBelongsTo.vue

@@ -12,6 +12,7 @@
     :has-error="hasError"
     :inline="inline"
     :size="size"
+    :filter="filter"
     :dropdown-show="dropdownShow"
     :show-model-value="showModelValue"
     :show-empty-option="showEmptyOption"
@@ -46,7 +47,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
-import { RawOption, SelectConfiguration } from '@/types';
+import { NormalizedOption, RawOption, SelectConfiguration } from '@/types';
 import { Size } from '@/utils/sizes';
 
 const props = defineProps({
@@ -96,6 +97,10 @@ const props = defineProps({
     default: undefined,
     type: String as PropType<Size>,
   },
+  filter: {
+    default: undefined,
+    type: Function as PropType<(option: NormalizedOption, keywords: string) => boolean>,
+  },
   dropdownShow: {
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,

package/src/components/BaseDataTableTemplate.vue

@@ -55,14 +55,14 @@
 
               <button
                 type="button"
-                class="flex gap-1 w-full items-center bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
+                class="flex gap-2 w-full items-start bg-transparent text-left text-sm font-medium leading-tight text-slate-900"
                 :class="[
                   column.sortable ? 'cursor-pointer' : '',
-                  column.align == 'right' ? 'justify-start flex-row-reverse' : ''
+                  column.align == 'right' ? 'justify-start flex-row-reverse text-right' : ''
                 ]"
                 @click="sort(column, undefined, $event as any)"
               >
-                <span
+                <div
                   class="whitespace-nowrap text-slate-600"
                   :class="{
                     'text-[12px]': size == 'sm',
@@ -70,8 +70,10 @@
                   }"
                   v-html="column.label"
                 />
+                <!-- h-4 is used to make sure the tooltip icon is always smaller than label and avoid alignment issues when icon is not present -->
                 <div
                   v-if="column.sortable"
+                  class="h-4 relative top-0.5"
                   :class="[
                     currentSortColumn === column
                       ? ''
@@ -79,18 +81,23 @@
                   ]"
                 >
                   <svg
-                    viewBox="0 0 20 20"
-                    class="h-5 w-5"
+                    width="11"
+                    height="11"
+                    viewBox="0 0 11 11"
+                    fill="none"
+                    class="block"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       :opacity="!isAsc ? '0.5' : '1'"
-                      fill="currentColor"
-                      d="M9.116 4.823a1.25 1.25 0 0 1 1.768 0l2.646 2.647a.75.75 0 0 1-1.06 1.06l-2.47-2.47-2.47 2.47a.75.75 0 1 1-1.06-1.06l2.646-2.647Z"
+                      d="M4.88471 0.366233C5.00079 0.250125 5.1386 0.158021 5.29028 0.0951819C5.44196 0.0323429 5.60453 0 5.76871 0C5.93289 0 6.09546 0.0323429 6.24714 0.0951819C6.39882 0.158021 6.53663 0.250125 6.65271 0.366233L9.29871 3.01323C9.43119 3.15541 9.50331 3.34345 9.49988 3.53776C9.49646 3.73206 9.41774 3.91744 9.28033 4.05485C9.14292 4.19227 8.95753 4.27098 8.76323 4.27441C8.56893 4.27784 8.38088 4.20571 8.23871 4.07323L5.76871 1.60323L3.29871 4.07323C3.23005 4.14692 3.14725 4.20602 3.05525 4.24701C2.96325 4.28801 2.86393 4.31005 2.76323 4.31182C2.66253 4.3136 2.5625 4.29508 2.46911 4.25736C2.37572 4.21963 2.29089 4.16349 2.21967 4.09227C2.14845 4.02105 2.09231 3.93622 2.05459 3.84283C2.01686 3.74944 1.99834 3.64941 2.00012 3.54871C2.00189 3.44801 2.02394 3.34869 2.06493 3.25669C2.10592 3.1647 2.16502 3.08189 2.23871 3.01323L4.88471 0.366233Z"
+                      fill="black"
                     ></path>
                     <path
                       :opacity="isAsc ? '0.5' : '1'"
-                      fill="currentColor"
-                      d="M9.116 15.177a1.25 1.25 0 0 0 1.768 0l2.646-2.647a.75.75 0 0 0-1.06-1.06l-2.47 2.47-2.47-2.47a.75.75 0 0 0-1.06 1.06l2.646 2.647Z"
+
+                      d="M4.84729 10.6083C4.96337 10.7244 5.10118 10.8165 5.25286 10.8793C5.40454 10.9422 5.56711 10.9745 5.73129 10.9745C5.89547 10.9745 6.05804 10.9422 6.20972 10.8793C6.3614 10.8165 6.49921 10.7244 6.61529 10.6083L9.26129 7.96129C9.39377 7.81912 9.4659 7.63107 9.46247 7.43677C9.45904 7.24247 9.38033 7.05708 9.24291 6.91967C9.1055 6.78226 8.92011 6.70354 8.72581 6.70012C8.53151 6.69669 8.34347 6.76881 8.20129 6.90129L5.73129 9.37129L3.26129 6.90129C3.11912 6.76881 2.93107 6.69669 2.73677 6.70012C2.54247 6.70354 2.35708 6.78226 2.21967 6.91967C2.08226 7.05708 2.00355 7.24247 2.00012 7.43677C1.99669 7.63107 2.06881 7.81912 2.20129 7.96129L4.84729 10.6083Z"
+                      fill="black"
                     ></path>
                   </svg>
                 </div>