sprintify-ui 0.0.103 → 0.0.104

package/src/components/BaseAutocomplete.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="autocomplete">
-    <div class="relative">
+    <div class="relative z-[1]">
       <div class="relative">
         <input
           ref="inputElement"
@@ -9,7 +9,7 @@
           :placeholder="
             placeholder ? placeholder : $t('sui.autocomplete_placeholder')
           "
-          class="w-full rounded disabled:cursor-not-allowed disabled:text-slate-300"
+          class="w-full rounded pr-9 disabled:cursor-not-allowed disabled:text-slate-300"
           :class="[
             hasErrorInternal ? 'border-red-600' : 'border-slate-300',
             inputClass,
@@ -41,7 +41,7 @@
       </div>
 
       <div
-        v-if="normalizedModelValue && !disabled && modelValueShow"
+        v-if="normalizedModelValue && !disabled && showModelValue"
         class="absolute top-0 right-0 flex h-full items-center p-1"
       >
         <button
@@ -64,7 +64,7 @@
         class="w-full overflow-hidden"
         :class="[
           inline
-            ? 'relative mt-1'
+            ? 'relative'
             : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
         ]"
       >
@@ -75,7 +75,7 @@
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          :dropdown-class="inline ? '' : 'p-1'"
+          :dropdown-class="inline ? 'pt-1' : 'p-1'"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -166,7 +166,7 @@ const props = defineProps({
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,
   },
-  modelValueShow: {
+  showModelValue: {
     default: true,
     type: Boolean,
   },
@@ -174,6 +174,18 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  /** Show an 'empty option', should use with showModelValue = true for better UX  */
+  showEmptyOption: {
+    default: false,
+    type: Boolean,
+  },
+  emptyOptionLabel: {
+    default() {
+      const i18n = useI18n();
+      return i18n.t('sui.none');
+    },
+    type: String,
+  },
 });
 
 const emit = defineEmits([
@@ -216,10 +228,26 @@ const normalizedModelValue =
   hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
 
 const filteredNormalizedOptions = computed((): NormalizedOption[] => {
+  let options = normalizedOptions.value;
+
+  if (props.showEmptyOption) {
+    const emptyOption = {
+      [props.valueKey]: null,
+      [props.labelKey]: props.emptyOptionLabel,
+      option: null,
+    };
+
+    options = [
+      { value: null, label: props.emptyOptionLabel, option: emptyOption },
+      ...options,
+    ];
+  }
+
   if (shouldFilter.value === false) {
-    return normalizedOptions.value;
+    return options;
   }
-  return normalizedOptions.value.filter((option) => {
+
+  return options.filter((option) => {
     if (props.filter !== undefined) {
       return props.filter(option);
     }
@@ -235,12 +263,16 @@ watch(
   () => normalizedModelValue.value,
   () => {
     if (normalizedModelValue.value) {
-      if (props.modelValueShow) {
+      if (props.showModelValue) {
         setKeywords(normalizedModelValue.value?.label);
       }
     } else {
-      if (props.modelValueShow) {
-        setKeywords('');
+      if (props.showModelValue) {
+        if (props.showEmptyOption) {
+          setKeywords(props.emptyOptionLabel);
+        } else {
+          setKeywords('');
+        }
       }
     }
   },
@@ -268,8 +300,16 @@ function close() {
   blur();
   timerId = setTimeout(() => {
     // If no valid modelValue is set on close, set the keywords to the original value
-    if (props.modelValueShow && normalizedModelValue.value) {
-      setKeywords(normalizedModelValue.value.label);
+    if (props.showModelValue) {
+      if (normalizedModelValue.value) {
+        setKeywords(normalizedModelValue.value.label);
+      } else {
+        if (props.showEmptyOption) {
+          setKeywords(props.emptyOptionLabel);
+        } else {
+          setKeywords('');
+        }
+      }
     }
   }, 10);
   emit('close');
@@ -282,7 +322,7 @@ const onTextInput = (event: Event) => {
   emit('typing', keywords.value);
 
   // If keywords is empty, emit null
-  if (keywords.value == '') {
+  if (keywords.value == '' && !props.showEmptyOption) {
     update(null);
   }
 };
@@ -321,8 +361,18 @@ function onSelect(normalizedModelValue: Option | null | undefined) {
 function update(normalizedSelection: Option | null | undefined) {
   // Re-activate filter
   shouldFilter.value = false;
+
   // Emit update
-  const selection = normalizedSelection ? normalizedSelection.option : null;
+  let selection = normalizedSelection ? normalizedSelection.option : null;
+
+  if (
+    props.showEmptyOption &&
+    normalizedSelection &&
+    normalizedSelection.value == null
+  ) {
+    selection = null;
+  }
+
   emitUpdate(selection);
 }
 

package/src/components/BaseAutocompleteDropdown.vue

@@ -18,7 +18,7 @@
       <ul v-else :class="dropdownClass">
         <li
           v-for="(option, index) in options"
-          :key="option.value"
+          :key="option.value ? option.value : 'null'"
           :data-index="index"
           class="block"
         >
@@ -222,7 +222,7 @@ onMounted(() => {
     () => {
       emit('scrollBottom');
     },
-    { distance: 60 }
+    { distance: 100 }
   );
 });
 

package/src/components/BaseAutocompleteFetch.stories.js

@@ -58,6 +58,12 @@ Disabled.args = {
   disabled: true,
 };
 
+export const ShowEmptyOption = Template.bind({});
+ShowEmptyOption.args = {
+  showEmptyOption: true,
+  emptyOptionLabel: 'No Jedi',
+};
+
 export const Inline = Template.bind({});
 Inline.args = {
   inline: true,

package/src/components/BaseAutocompleteFetch.vue

@@ -15,9 +15,11 @@
     :size="size"
     :inline="inline"
     :dropdown-show="dropdownShow"
-    :model-value-show="modelValueShow"
+    :show-model-value="showModelValue"
     :visible-focus="visibleFocus"
-    :filter="() => true"
+    :show-empty-option="showEmptyOption"
+    :empty-option-label="emptyOptionLabel"
+    :filter="filterOptions"
     @clear="onClear"
     @open="onOpen"
     @typing="onTyping"
@@ -114,7 +116,7 @@ const props = defineProps({
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,
   },
-  modelValueShow: {
+  showModelValue: {
     default: true,
     type: Boolean,
   },
@@ -122,6 +124,14 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  showEmptyOption: {
+    default: false,
+    type: Boolean,
+  },
+  emptyOptionLabel: {
+    default: undefined,
+    type: String,
+  },
 });
 
 const emit = defineEmits([
@@ -217,6 +227,22 @@ const debouncedSearch = debounce(() => {
   search();
 }, 300);
 
+function filterOptions(option: Option): boolean {
+  // Do nothing if showEmptyOption is false
+  if (!props.showEmptyOption) {
+    return true;
+  }
+
+  // Hide the empty value on search
+  if (
+    option.value == null &&
+    !option.label.toLowerCase().includes(keywords.value.toLowerCase())
+  ) {
+    return false;
+  }
+  return true;
+}
+
 defineExpose({
   focus: () => autocomplete.value?.focus(),
   blur: () => autocomplete.value?.blur(),

package/src/components/BaseBelongsTo.stories.js

@@ -54,6 +54,12 @@ Inline.args = {
   inline: true,
 };
 
+export const ShowEmptyOption = Template.bind({});
+ShowEmptyOption.args = {
+  showEmptyOption: true,
+  emptyOptionLabel: 'No Jedi',
+};
+
 export const Sizes = (args) => ({
   components: { BaseBelongsTo },
   setup() {

package/src/components/BaseBelongsTo.vue

@@ -13,7 +13,9 @@
     :inline="inline"
     :size="size"
     :dropdown-show="dropdownShow"
-    :model-value-show="modelValueShow"
+    :show-model-value="showModelValue"
+    :show-empty-option="showEmptyOption"
+    :empty-option-label="emptyOptionLabel"
     :visible-focus="visibleFocus"
     @update:model-value="onUpdate"
   >
@@ -95,7 +97,7 @@ const props = defineProps({
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,
   },
-  modelValueShow: {
+  showModelValue: {
     default: true,
     type: Boolean,
   },
@@ -103,6 +105,14 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  showEmptyOption: {
+    default: false,
+    type: Boolean,
+  },
+  emptyOptionLabel: {
+    default: undefined,
+    type: String,
+  },
 });
 
 const http = config.http;

package/src/components/BaseButtonGroup.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-wrap" :style="{ margin: '-' + spacing }">
     <div
       v-for="option in normalizedOptions"
-      :key="option.value"
+      :key="option.value ? option.value : 'null'"
       :style="{ padding: spacing }"
     >
       <button

package/src/components/BaseColor.vue

@@ -16,14 +16,14 @@
     >
       <template #option="option">
         <div
-          :style="{ background: option.option.value }"
-          class="p-3 border-none rounded-md"
+          :style="{ backgroundColor: option.option.value + '' }"
+          class="rounded-md border-none p-3"
           :class="[
             option.selected.value ? 'text-white' : 'text-transparent',
             disabled ? ' cursor-not-allowed opacity-50' : '',
           ]"
         >
-          <BaseIcon icon="heroicons-solid:check-circle" class="w-5 h-5" />
+          <BaseIcon icon="heroicons-solid:check-circle" class="h-5 w-5" />
         </div>
       </template>
     </BaseButtonGroup>

package/src/components/BaseDropdown.stories.js

@@ -110,7 +110,7 @@ export const WithAutocomplete = (args) => ({
             :inline="true"
             :visibleFocus="false"
             dropdownShow="always"
-            :modelValueShow="false"
+            :showModelValue="false"
             @update:modelValue="onUpdate($event, close)"
           ></BaseAutocomplete>
         </div>

package/src/components/BaseDropdown.vue

@@ -15,15 +15,17 @@
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-90 opacity-0"
         >
-          <div v-show="showDropdown" class="inline-block">
-            <slot
-              name="dropdown"
-              :show-dropdown="showDropdown"
-              :close="close"
-              :open="open"
-              :toggle="toggle"
-            ></slot>
-          </div>
+          <template v-if="showDropdown || keepAlive">
+            <div v-show="showDropdown" class="inline-block">
+              <slot
+                name="dropdown"
+                :show-dropdown="showDropdown"
+                :close="close"
+                :open="open"
+                :toggle="toggle"
+              ></slot>
+            </div>
+          </template>
         </Transition>
       </div>
     </Teleport>
@@ -58,6 +60,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  keepAlive: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const buttonX = ref(0);

package/src/components/BaseDropdownAutocomplete.stories.js

@@ -0,0 +1,178 @@
+import BaseBadge from './BaseBadge.vue';
+import BaseDropdownAutocomplete from './BaseDropdownAutocomplete.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { options } from '../../.storybook/utils';
+
+export default {
+  title: 'Components/BaseDropdownAutocomplete',
+  component: BaseDropdownAutocomplete,
+  argTypes: {
+    placement: {
+      control: {
+        type: 'select',
+        options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
+      },
+    },
+  },
+  args: {
+    placement: 'bottom-start',
+    padding: 8,
+    emptyOptionLabel: 'Nothing',
+  },
+};
+
+export const Autocomplete = (args) => ({
+  components: { BaseDropdownAutocomplete, BaseBadge, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, options, value };
+  },
+  template: `
+  <BaseDropdownAutocomplete 
+    v-bind="args"
+    v-model="value"
+  >
+    <template #button="{ newValue }">
+      <BaseBadge v-if="newValue">
+        {{ newValue.label }}
+      </BaseBadge>
+      <div v-else>
+        <BaseBadge contrast="low">
+          Nothing
+        </BaseBadge>
+      </div>
+    </template>
+    <template #option="{ option }">
+      <BaseBadge :contrast="option?.value ? 'high' : 'low'">
+        {{ option.label }}
+      </BaseBadge>
+    </template>
+  </BaseDropdownAutocomplete>
+  <ShowValue :value="value" />
+  `,
+});
+
+Autocomplete.args = {
+  options: options,
+  multiple: false,
+  labelKey: 'label',
+  valueKey: 'value',
+};
+
+export const AutocompleteFetch = (args) => ({
+  components: { BaseDropdownAutocomplete, BaseBadge, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, options, value };
+  },
+  template: `
+  <BaseDropdownAutocomplete 
+    v-bind="args"
+    v-model="value"
+  >
+    <template #button="{ newValue }">
+      <BaseBadge v-if="newValue" contrast="high">
+        {{ newValue.name }}
+      </BaseBadge>
+      <div v-else>
+        <BaseBadge contrast="low">
+          Nothing
+        </BaseBadge>
+      </div>
+    </template>
+    <template #option="{ option }">
+      <BaseBadge :contrast="option?.id ? 'high' : 'low'">
+        {{ option.name }}
+      </BaseBadge>
+    </template>
+  </BaseDropdownAutocomplete>
+  <ShowValue :value="value" />
+  `,
+});
+
+AutocompleteFetch.args = {
+  valueKey: 'id',
+  labelKey: 'name',
+  url: 'https://effettandem.com/api/content/tags',
+  multiple: false,
+};
+
+export const TagAutocomplete = (args) => ({
+  components: { BaseDropdownAutocomplete, BaseBadge, ShowValue },
+  setup() {
+    const value = ref([]);
+    return { args, options, value };
+  },
+  template: `
+  <BaseDropdownAutocomplete 
+    v-bind="args"
+    v-model="value"
+  >
+    <template #button="{ newValue }">
+      <div v-if="newValue && newValue.length" class="flex flex-wrap gap-0.5">
+        <BaseBadge v-for="item in newValue" :key="item.value" contrast="high">
+          {{ item.label }}
+        </BaseBadge>
+      </div>
+      <div v-else>
+        <BaseBadge contrast="low">
+          Nothing
+        </BaseBadge>
+      </div>
+    </template>
+    <template #option="{ option }">
+      <BaseBadge contrast="high">
+        {{ option.label }}
+      </BaseBadge>
+    </template>
+  </BaseDropdownAutocomplete>
+  <ShowValue :value="value" />
+  `,
+});
+
+TagAutocomplete.args = {
+  options: options,
+  multiple: true,
+  labelKey: 'label',
+  valueKey: 'value',
+};
+
+export const TagAutocompleteFetch = (args) => ({
+  components: { BaseDropdownAutocomplete, BaseBadge, ShowValue },
+  setup() {
+    const value = ref([]);
+    return { args, options, value };
+  },
+  template: `
+  <BaseDropdownAutocomplete 
+    v-bind="args"
+    v-model="value"
+  >
+    <template #button="{ newValue }">
+      <div v-if="newValue && newValue.length" class="flex flex-wrap gap-0.5">
+        <BaseBadge v-for="item in newValue" :key="item.value" contrast="high">
+          {{ item.name }}
+        </BaseBadge>
+      </div>
+      <div v-else>
+        <BaseBadge contrast="low">
+          Nothing
+        </BaseBadge>
+      </div>
+    </template>
+    <template #option="{ option }">
+      <BaseBadge contrast="high">
+        {{ option.name }}
+      </BaseBadge>
+    </template>
+  </BaseDropdownAutocomplete>
+  <ShowValue :value="value" />
+  `,
+});
+
+TagAutocompleteFetch.args = {
+  valueKey: 'id',
+  labelKey: 'name',
+  url: 'https://effettandem.com/api/content/tags',
+  multiple: true,
+};