sprintify-ui 0.12.1 → 0.12.2

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

@@ -142,6 +142,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<(option: RawOption) => string>;
     };
+    optionSubtitle: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
     twInput: {
         default: undefined;
         type: PropType<string | string[]>;
@@ -267,6 +271,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<(option: RawOption) => string>;
     };
+    optionSubtitle: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
     twInput: {
         default: undefined;
         type: PropType<string | string[]>;
@@ -300,6 +308,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     loadingBottom: boolean;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;
+    optionSubtitle: (option: RawOption) => string;
     dropdownShow: "always" | "focus";
     showModelValue: boolean;
     focusOnMount: boolean;

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

@@ -51,6 +51,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<(option: RawOption) => string>;
     };
+    optionSubtitle: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
     twDrawer: {
         type: StringConstructor;
         default: string;
@@ -93,6 +97,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<(option: RawOption) => string>;
     };
+    optionSubtitle: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
     twDrawer: {
         type: StringConstructor;
         default: string;
@@ -109,6 +117,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     loadingBottom: boolean;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;
+    optionSubtitle: (option: RawOption) => string;
     twDrawer: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

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

@@ -123,6 +123,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<(option: RawOption) => string>;
     };
+    optionSubtitle: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
     icon: {
         default: undefined;
         type: PropType<string>;
@@ -232,6 +236,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<(option: RawOption) => string>;
     };
+    optionSubtitle: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
     icon: {
         default: undefined;
         type: PropType<string>;
@@ -260,6 +268,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     visibleFocus: boolean;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;
+    optionSubtitle: (option: RawOption) => string;
     dropdownShow: "always" | "focus";
     showModelValue: boolean;
     focusOnMount: boolean;

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

@@ -126,6 +126,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<(option: RawOption) => string>;
     };
+    optionSubtitle: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>, {
     focus: () => void | undefined;
     blur: () => void | undefined;
@@ -227,6 +231,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: undefined;
         type: PropType<(option: RawOption) => string>;
     };
+    optionSubtitle: {
+        default: undefined;
+        type: PropType<(option: RawOption) => string>;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -245,6 +253,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     primaryKey: string;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;
+    optionSubtitle: (option: RawOption) => string;
     dropdownShow: "always" | "focus";
     showModelValue: boolean;
     focusOnMount: boolean;

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

@@ -24,6 +24,7 @@ type __VLS_Props = {
     select?: SelectConfiguration;
     optionColor?: (option: RawOption) => string;
     optionIcon?: (option: RawOption) => string;
+    optionSubtitle?: (option: RawOption) => string;
     icon?: string;
 };
 declare var __VLS_10: {
@@ -84,6 +85,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     primaryKey: string;
     optionColor: (option: RawOption) => string;
     optionIcon: (option: RawOption) => string;
+    optionSubtitle: (option: RawOption) => string;
     dropdownShow: "focus" | "always";
     showModelValue: boolean;
     focusOnMount: boolean;

package/package.json

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

package/src/components/BaseAutocomplete.stories.js

@@ -31,6 +31,11 @@ export default {
       if (option.type === "jedi") return "fa7-solid:jedi";
       if (option.type === "sith") return "fa7-brands:sith";
       return "mdi:help-circle-outline";
+    },
+    optionSubtitle: (option) => {
+      if (option.type === "jedi") return "Jedi";
+      if (option.type === "sith") return "Sith";
+      return "Unknown";
     }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],

package/src/components/BaseAutocomplete.vue

@@ -89,6 +89,7 @@
           :keywords="keywords"
           :option-color="optionColor"
           :option-icon="optionIcon"
+          :option-subtitle="optionSubtitle"
           tw-drawer="p-1"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -241,6 +242,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<(option: RawOption) => string>,
   },
+  optionSubtitle: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
   twInput: {
     default: undefined,
     type: [String, Array] as PropType<string | string[]>,

package/src/components/BaseAutocompleteDrawer.vue

@@ -48,7 +48,7 @@
               :active="focusOption && focusOption.value == option.value"
             >
               <div
-                class="flex items-center rounded px-[0.75em] py-[0.5em]"
+                class="flex items-center rounded px-[0.75em]"
                 :class="[optionClass(option), optionSizeClass]"
               >
                 <div
@@ -75,7 +75,12 @@
                   />
                 </div>
                 <div class="grow">
-                  {{ option.label }}
+                  <p class="block">
+                    {{ option.label }}
+                  </p>
+                  <small v-if="optionSubtitle" class="block text-xs text-slate-500 -mt-[0.075em]">
+                    {{ option.option ? optionSubtitle(option.option) : '' }}
+                  </small>
                 </div>
                 <div class="shrink-0">
                   <BaseIcon
@@ -188,6 +193,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<(option: RawOption) => string>,
   },
+  optionSubtitle: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
   twDrawer: {
     type: String,
     default: '',
@@ -392,13 +401,20 @@ const optionClass = (option: NormalizedOption) => {
 };
 
 const optionSizeClass = computed(() => {
+
+  let paddingClass = "py-[0.5em]";
+
+  if (props.optionSubtitle) {
+    paddingClass = "py-[0.4em]";
+  }
+
   if (props.size == 'xs') {
-    return 'text-xs';
+    return 'text-xs ' + paddingClass;
   }
   if (props.size == 'sm') {
-    return 'text-sm';
+    return 'text-sm ' + paddingClass;
   }
-  return 'text-sm';
+  return 'text-sm ' + paddingClass;
 });
 
 const optionIconClass = computed(() => {

package/src/components/BaseAutocompleteFetch.vue

@@ -25,6 +25,7 @@
     :filter="filterOptions"
     :option-color="optionColor"
     :option-icon="optionIcon"
+    :option-subtitle="optionSubtitle"
     :icon="icon"
     :tw-input="twInput"
     @clear="onClear"
@@ -179,6 +180,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<(option: RawOption) => string>,
   },
+  optionSubtitle: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
   icon: {
     default: undefined,
     type: [String] as PropType<string>,

package/src/components/BaseBelongsTo.vue

@@ -24,6 +24,7 @@
     :icon="icon"
     :option-color="optionColor"
     :option-icon="optionIcon"
+    :option-subtitle="optionSubtitle"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -148,6 +149,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<(option: RawOption) => string>,
   },
+  optionSubtitle: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseBelongsToFetch.vue

@@ -22,6 +22,7 @@
     :select="select"
     :option-color="optionColor"
     :option-icon="optionIcon"
+    :option-subtitle="optionSubtitle"
     :icon="icon"
     @update:model-value="onUpdate"
   >
@@ -79,6 +80,7 @@ const props = withDefaults(
     select?: SelectConfiguration;
     optionColor?: (option: RawOption) => string;
     optionIcon?: (option: RawOption) => string;
+    optionSubtitle?: (option: RawOption) => string;
     icon?: string;
   }>(),
   {
@@ -103,6 +105,7 @@ const props = withDefaults(
     select: undefined,
     optionColor: undefined,
     optionIcon: undefined,
+    optionSubtitle: undefined,
     icon: undefined,
   }
 );