sprintify-ui 0.0.106 → 0.0.108

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

@@ -1,5 +1,6 @@
 import { PropType, ComputedRef } from 'vue';
 import { NormalizedOption, Option } from '@/types';
+import { SelectConfiguration } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
@@ -78,13 +79,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default(): string;
         type: StringConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }, {
     focus: () => void;
     blur: () => void;
     close: () => void;
     open: () => void;
     setKeywords: (input: string) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "update:modelValue" | "close" | "scrollBottom" | "typing" | "open")[], "clear" | "update:modelValue" | "close" | "scrollBottom" | "typing" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "clear" | "update:modelValue" | "close" | "scrollBottom" | "typing" | "open")[], "select" | "clear" | "update:modelValue" | "close" | "scrollBottom" | "typing" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<Option | null | undefined>;
@@ -162,7 +167,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default(): string;
         type: StringConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }>> & {
+    onSelect?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -173,6 +183,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     filter: (option: NormalizedOption) => boolean;
     required: boolean;
     name: string;
+    select: SelectConfiguration | undefined;
     loading: boolean;
     loadingBottom: boolean;
     size: "base" | "xs" | "sm";

package/dist/types/src/components/{BaseAutocompleteDropdown.vue.d.ts → BaseAutocompleteDrawer.vue.d.ts}

@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"base" | "xs" | "sm">;
         default: string;
     };
-    dropdownClass: {
+    drawerClass: {
         type: StringConstructor;
         default: string;
     };
@@ -56,7 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<"base" | "xs" | "sm">;
         default: string;
     };
-    dropdownClass: {
+    drawerClass: {
         type: StringConstructor;
         default: string;
     };
@@ -70,7 +70,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     loading: boolean;
     loadingBottom: boolean;
     size: "base" | "xs" | "sm";
-    dropdownClass: string;
+    drawerClass: string;
 }>, {
     empty: (_: {}) => any;
     option: (_: {

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Option } from '@/types';
+import { Option, SelectConfiguration } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
@@ -69,6 +69,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }, {
     focus: () => void | undefined;
     blur: () => void | undefined;
@@ -144,6 +148,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }>> & {
     onFocus?: ((...args: any[]) => any) | undefined;
     onScrollBottom?: ((...args: any[]) => any) | undefined;
@@ -153,6 +161,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
+    select: SelectConfiguration | undefined;
     size: "base" | "xs" | "sm";
     disabled: boolean;
     placeholder: string;

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Option } from '@/types';
+import { Option, SelectConfiguration } from '@/types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
@@ -73,6 +73,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }, {
     focus: () => void | undefined;
     blur: () => void | undefined;
@@ -152,11 +156,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: StringConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
     name: string;
+    select: SelectConfiguration | undefined;
     size: "base" | "xs" | "sm";
     disabled: boolean;
     placeholder: string;

package/dist/types/src/types/index.d.ts

@@ -163,3 +163,9 @@ export interface NotificationsConfig {
     footerLabel?: string;
     footerTo?: RouteLocationRaw;
 }
+export interface SelectConfiguration {
+    options: Option[];
+    valueKey: string;
+    labelKey: string;
+    onChange: (value: OptionValue) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.106",
+  "version": "0.0.108",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAutocomplete.stories.js

@@ -1,6 +1,7 @@
 import { createFieldStory, options } from '../../.storybook/utils';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { computed } from 'vue';
 
 const sizes = ['xs', 'sm', 'base'];
 
@@ -179,6 +180,55 @@ export const SlotEmpty = (args) => {
   };
 };
 
+export const WithSelect = (args) => {
+  return {
+    components: { BaseAutocomplete, ShowValue },
+    setup() {
+      const value = ref(options[0]);
+      const selected = ref(null);
+
+      const select = {
+        options: [
+          { label: 'All', value: 'all' },
+          { label: 'Jedi', value: 'jedi' },
+          { label: 'Sith', value: 'sith' },
+        ],
+        labelKey: 'label',
+        valueKey: 'value',
+        onChange: (option) => {
+          selected.value = option;
+        },
+      };
+
+      const options2 = computed(() => {
+        if (selected.value == 'all' || !selected.value) {
+          return options;
+        }
+        return options.filter((option) => option.type === selected.value);
+      });
+
+      return { args, value, options2, selected, select };
+    },
+    template: `
+  <BaseAutocomplete
+    v-model="value"
+    v-bind="args"
+    :options="options2"
+    :select="select"
+  >
+  </BaseAutocomplete>
+
+  <div class="mb-2"></div>
+
+  <p class="text-xs mb-0">Selection</p>
+  <ShowValue class="mt-0 mb-2" :value="selected" />
+  
+  <p class="text-xs mb-0">Model Value</p>
+  <ShowValue class="mt-0" :value="value" />
+`,
+  };
+};
+
 export const Field = createFieldStory({
   component: BaseAutocomplete,
   componentName: 'BaseAutocomplete',

package/src/components/BaseAutocomplete.vue

@@ -1,42 +1,64 @@
 <template>
   <div ref="autocomplete">
     <div class="relative z-[1]">
-      <div class="relative">
-        <input
-          ref="inputElement"
-          :value="keywords"
-          type="text"
-          :placeholder="
-            placeholder ? placeholder : $t('sui.autocomplete_placeholder')
-          "
-          class="w-full rounded pr-9 disabled:cursor-not-allowed disabled:text-slate-300"
+      <div class="flex">
+        <select
+          v-if="select"
+          v-model="selection"
+          :disabled="disabled"
+          class="rounded-l border-r-transparent focus:z-[1] focus:border-r-blue-500 disabled:cursor-not-allowed disabled:text-slate-300 disabled:opacity-100"
           :class="[
             hasErrorInternal ? 'border-red-600' : 'border-slate-300',
-            inputClass,
-            !visibleFocus
-              ? [
-                  'focus:ring-0',
-                  hasErrorInternal
-                    ? 'focus:border-red-600'
-                    : 'focus:border-slate-300',
-                ]
-              : '',
+            inputSelectClass,
           ]"
-          autocomplete="off"
-          :disabled="disabled"
-          @click="open"
-          @input="onTextInput"
-          @keydown="onTextKeydown"
-        />
-        <div
-          class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center"
-          :class="[iconWrapClass]"
+          @change="onSelectChange"
         >
-          <BaseIcon
-            class="text-slate-400"
-            :class="[iconClass]"
-            icon="heroicons:magnifying-glass-solid"
+          <option
+            v-for="option in select.options"
+            :key="option[select.valueKey]"
+            :value="option[select.valueKey]"
+          >
+            {{ option[select.labelKey] }}
+          </option>
+        </select>
+        <div class="relative grow">
+          <input
+            ref="inputElement"
+            :value="keywords"
+            type="text"
+            :placeholder="
+              placeholder ? placeholder : $t('sui.autocomplete_placeholder')
+            "
+            class="relative w-full pr-9 disabled:cursor-not-allowed disabled:text-slate-300"
+            :class="[
+              select ? '-left-px rounded-r' : 'rounded',
+              hasErrorInternal ? 'border-red-600' : 'border-slate-300',
+              inputSizeClass,
+              !visibleFocus
+                ? [
+                    'focus:ring-0',
+                    hasErrorInternal
+                      ? 'focus:border-red-600'
+                      : 'focus:border-slate-300',
+                  ]
+                : '',
+            ]"
+            autocomplete="off"
+            :disabled="disabled"
+            @click="open"
+            @input="onTextInput"
+            @keydown="onTextKeydown"
           />
+          <div
+            class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center"
+            :class="[iconWrapClass]"
+          >
+            <BaseIcon
+              class="text-slate-400"
+              :class="[iconClass]"
+              icon="heroicons:magnifying-glass-solid"
+            />
+          </div>
         </div>
       </div>
 
@@ -68,14 +90,14 @@
             : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
         ]"
       >
-        <BaseAutocompleteDropdown
-          ref="dropdown"
+        <BaseAutocompleteDrawer
+          ref="drawer"
           :selected="normalizedModelValue"
           :options="filteredNormalizedOptions"
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          :dropdown-class="inline ? 'pt-1' : 'p-1'"
+          :drawer-class="inline ? 'pt-1' : 'p-1'"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -89,7 +111,7 @@
           <template #footer="footerProps">
             <slot name="footer" v-bind="{ ...footerProps, ...slotProps }" />
           </template>
-        </BaseAutocompleteDropdown>
+        </BaseAutocompleteDrawer>
       </div>
     </div>
   </div>
@@ -103,7 +125,8 @@ import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { BaseIcon } from './index';
 import { useClickOutside } from '@/composables/clickOutside';
-import BaseAutocompleteDropdown from './BaseAutocompleteDropdown.vue';
+import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
+import { SelectConfiguration } from '@/types';
 
 const props = defineProps({
   modelValue: {
@@ -186,6 +209,10 @@ const props = defineProps({
     },
     type: String,
   },
+  select: {
+    default: undefined,
+    type: Object as PropType<SelectConfiguration | undefined>,
+  },
 });
 
 const emit = defineEmits([
@@ -195,6 +222,7 @@ const emit = defineEmits([
   'open',
   'close',
   'scrollBottom',
+  'select',
 ]);
 
 const { hasErrorInternal, emitUpdate } = useField({
@@ -212,8 +240,8 @@ const hasOptions = useHasOptions(
   computed(() => false)
 );
 
-const dropdown = ref(null) as Ref<InstanceType<
-  typeof BaseAutocompleteDropdown
+const drawer = ref(null) as Ref<InstanceType<
+  typeof BaseAutocompleteDrawer
 > | null>;
 
 let timerId = 0;
@@ -330,7 +358,7 @@ const onTextInput = (event: Event) => {
 const onTextKeydown = (event: KeyboardEvent) => {
   const key = event.key;
 
-  dropdown.value?.onKeydown(event);
+  drawer.value?.onKeydown(event);
 
   // Prevent default behavior for up/down arrows
 
@@ -388,6 +416,33 @@ function blur() {
   inputElement.value?.blur();
 }
 
+function highlight() {
+  inputElement.value?.select();
+}
+
+const selection = ref(null) as Ref<string | null>;
+
+watch(
+  () => props.select,
+  (select) => {
+    if (select && select.options.length > 0) {
+      selection.value = select.options[0][select.valueKey];
+    }
+  },
+  { immediate: true }
+);
+
+function onSelectChange(event: Event) {
+  focus();
+  open();
+  highlight();
+  const value = get(event, 'target.value', null);
+  if (props.select && props.select.onChange) {
+    props.select.onChange(value);
+  }
+  emit('select', value);
+}
+
 const slotProps = {
   focus,
   blur,
@@ -398,7 +453,7 @@ const slotProps = {
 
 // Element Classes
 
-const inputClass = computed(() => {
+const inputSizeClass = computed(() => {
   if (props.size == 'xs') {
     return 'xs:text-xs xs:pl-7 text-base pl-9';
   }
@@ -408,6 +463,16 @@ const inputClass = computed(() => {
   return 'text-base pl-9';
 });
 
+const inputSelectClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'xs:text-xs text-base';
+  }
+  if (props.size == 'sm') {
+    return 'xs:text-sm text-base';
+  }
+  return 'text-base';
+});
+
 const iconClass = computed(() => {
   if (props.size == 'xs') {
     return 'xs:h-4 xs:w-4 h-5 w-5';

package/src/components/{BaseAutocompleteDropdown.vue → BaseAutocompleteDrawer.vue}

@@ -1,7 +1,7 @@
 <template>
   <div class="relative w-full overflow-hidden">
     <div
-      ref="dropdown"
+      ref="drawer"
       data-scroll-lock-scrollable
       class="max-h-[214px] w-full overflow-y-auto"
     >
@@ -15,7 +15,7 @@
       </slot>
 
       <!-- Option list -->
-      <ul v-else :class="dropdownClass">
+      <ul v-else :class="drawerClass">
         <li
           v-for="(option, index) in options"
           :key="option.value ? option.value : 'null'"
@@ -132,7 +132,7 @@ const props = defineProps({
     type: String as PropType<'xs' | 'sm' | 'base'>,
     default: 'base',
   },
-  dropdownClass: {
+  drawerClass: {
     type: String,
     default: '',
   },
@@ -140,7 +140,7 @@ const props = defineProps({
 
 const emit = defineEmits(['scrollBottom', 'select']);
 
-const dropdown = ref(null) as Ref<HTMLDivElement | null>;
+const drawer = ref(null) as Ref<HTMLDivElement | null>;
 
 let mouseIsMoving = false;
 
@@ -218,7 +218,7 @@ function onKeydown(event: KeyboardEvent) {
 
 onMounted(() => {
   useInfiniteScroll(
-    dropdown.value,
+    drawer.value,
     () => {
       emit('scrollBottom');
     },
@@ -227,11 +227,11 @@ onMounted(() => {
 });
 
 function scrollToFocus() {
-  if (!dropdown.value) {
+  if (!drawer.value) {
     return;
   }
 
-  const option = dropdown.value.querySelector(
+  const option = drawer.value.querySelector(
     `[data-index="${focusIndex.value}"]`
   ) as HTMLElement | null;
 
@@ -239,11 +239,11 @@ function scrollToFocus() {
     return;
   }
 
-  const dropdownHeight = dropdown.value.clientHeight;
+  const dropdownHeight = drawer.value.clientHeight;
   const offsetTop = option.offsetTop;
   const optionHeight = option.clientHeight;
 
-  dropdown.value.scrollTop = offsetTop - dropdownHeight / 2 + optionHeight / 2;
+  drawer.value.scrollTop = offsetTop - dropdownHeight / 2 + optionHeight / 2;
 }
 
 // Validate focus index
@@ -290,8 +290,8 @@ watch(
 watch(
   () => props.keywords,
   () => {
-    if (dropdown.value) {
-      dropdown.value.scrollTop = 0;
+    if (drawer.value) {
+      drawer.value.scrollTop = 0;
     }
     // Reset the focusIndex
     updateFocusIndex(0);

package/src/components/BaseAutocompleteFetch.stories.js

@@ -164,6 +164,59 @@ export const SlotEmpty = (args) => {
   };
 };
 
+export const WithSelect = (args) => {
+  return {
+    components: { BaseAutocompleteFetch, ShowValue },
+    setup() {
+      const value = ref(options[0]);
+      const selected = ref(null);
+
+      const select = {
+        options: [
+          { label: 'All', value: 'all' },
+          { label: 'Video', value: 'video' },
+          { label: 'Article', value: 'article' },
+        ],
+        labelKey: 'label',
+        valueKey: 'value',
+        onChange: (option) => {
+          selected.value = option;
+        },
+      };
+
+      const url = computed(() => {
+        if (selected.value == 'all' || !selected.value) {
+          return 'https://effettandem.com/api/content/articles';
+        }
+        return (
+          'https://effettandem.com/api/content/articles' +
+          '?type=' +
+          selected.value
+        );
+      });
+
+      return { args, value, url, selected, select };
+    },
+    template: `
+  <BaseAutocompleteFetch
+    v-model="value"
+    v-bind="args"
+    :url="url"
+    :select="select"
+  >
+  </BaseAutocompleteFetch>
+
+  <div class="mb-2"></div>
+
+  <p class="text-xs mb-0">Selection</p>
+  <ShowValue class="mt-0 mb-2" :value="selected" />
+  
+  <p class="text-xs mb-0">Model Value</p>
+  <ShowValue class="mt-0" :value="value" />
+`,
+  };
+};
+
 export const Field = createFieldStory({
   component: BaseAutocompleteFetch,
   componentName: 'BaseAutocompleteFetch',

package/src/components/BaseAutocompleteFetch.vue

@@ -19,6 +19,7 @@
     :visible-focus="visibleFocus"
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
+    :select="select"
     :filter="filterOptions"
     @clear="onClear"
     @open="onOpen"
@@ -51,7 +52,7 @@
 import { config } from '@/index';
 import { debounce, throttle } from 'lodash';
 import { PropType, Ref } from 'vue';
-import { Option } from '@/types';
+import { Option, SelectConfiguration } from '@/types';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 
 /**
@@ -132,6 +133,10 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  select: {
+    default: undefined,
+    type: Object as PropType<SelectConfiguration | undefined>,
+  },
 });
 
 const emit = defineEmits([
@@ -187,6 +192,15 @@ const scrollBottom = throttle(() => {
   }
 }, 500);
 
+watch(
+  () => props.url,
+  () => {
+    page.value = 1;
+    reachedEnd.value = false;
+    search();
+  }
+);
+
 function search() {
   if (fetching.value) {
     return;