sprintify-ui 0.10.86 → 0.10.88

package/src/components/BaseBelongsToFetch.stories.js

@@ -18,6 +18,12 @@ export default {
     showRouteUrl(id) {
       return `https://faker.witify.io/api/todos/${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/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/BaseInput.vue

@@ -181,6 +181,9 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click', 'keydown', 'keyup']);
+
+
 const input = ref<HTMLInputElement | null>(null);
 const focus = ref(false);
 
@@ -222,6 +225,11 @@ const bindings = computed<any>(() => {
       if (event.code == 'Enter' && props.preventSubmit) {
         event.preventDefault();
       }
+
+      emit('keydown', event);
+    },
+    onKeyup(event: KeyboardEvent) {
+      emit('keyup', event);
     },
     onFocus: (e: Event) => {
       emit('focus', e);
@@ -254,7 +262,6 @@ const maskInternal = computed(() => {
   return props.mask;
 });
 
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click', 'keydown']);
 
 const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
   useField({
@@ -277,10 +284,6 @@ function onClick(event: MouseEvent) {
   emit('click', event);
 }
 
-function onKeydown(event: KeyboardEvent) {
-  emit('keydown', event);
-}
-
 const classes = computed(() => {
   const base = `inline-flex bg-white input-rounded border transition-colors duration-200`;
   const border = hasErrorInternal.value ? 'border-red-500' : 'border-slate-300';

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>' })],
 };

package/src/components/BaseTextarea.vue

@@ -10,6 +10,9 @@
     :rows="rows"
     :autocomplete="autocomplete ? 'on' : 'off'"
     :class="classes"
+    @click="$emit('click', $event)"
+    @keydown="$emit('keydown', $event)"
+    @keyup="$emit('keyup', $event)"
     @input="emitUpdate(transformInputValue($event))"
     @blur="$emit('blur')"
     @focus="$emit('focus')"
@@ -78,7 +81,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'blur', 'focus']);
+const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'click', 'keydown', 'keyup']);
 
 const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
   useField({