sprintify-ui 0.0.107 → 0.0.109

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/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/components/BaseDropdownAutocomplete.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: {
         type: PropType<Option | Option[] | null | undefined>;
@@ -45,6 +45,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:model-value")[], "close" | "update:model-value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<Option | Option[] | null | undefined>;
@@ -90,11 +94,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
+    select: {
+        default: undefined;
+        type: PropType<SelectConfiguration | undefined>;
+    };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
+    select: SelectConfiguration | undefined;
     options: Option[] | undefined;
     size: "base" | "xs" | "sm";
     multiple: boolean;

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.107",
+  "version": "0.0.109",
   "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>
 
@@ -104,6 +126,7 @@ import { useField } from '@/composables/field';
 import { BaseIcon } from './index';
 import { useClickOutside } from '@/composables/clickOutside';
 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({
@@ -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/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;

package/src/components/BaseBelongsTo.stories.js

@@ -163,6 +163,59 @@ export const SlotEmpty = (args) => {
   };
 };
 
+export const WithSelect = (args) => {
+  return {
+    components: { BaseBelongsTo, 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: `
+  <BaseBelongsTo
+    v-model="value"
+    v-bind="args"
+    :url="url"
+    :select="select"
+  >
+  </BaseBelongsTo>
+
+  <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: BaseBelongsTo,
   componentName: 'BaseBelongsTo',

package/src/components/BaseBelongsTo.vue

@@ -17,6 +17,7 @@
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
     :visible-focus="visibleFocus"
+    :select="select"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -36,7 +37,7 @@ import { PropType, Ref } from 'vue';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
-import { Option } from '@/types';
+import { Option, SelectConfiguration } from '@/types';
 
 const props = defineProps({
   modelValue: {
@@ -113,6 +114,10 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  select: {
+    default: undefined,
+    type: Object as PropType<SelectConfiguration | undefined>,
+  },
 });
 
 const http = config.http;

package/src/components/BaseDropdown.stories.js

@@ -9,7 +9,7 @@ const items = [];
 
 for (let i = 0; i < 100; i++) {
   items.push({
-    label: `Item ${i + 1}`,
+    label: `Item number #${i + 1}`,
   });
 }