design-system-next 2.7.45 → 2.8.1

package/src/components/select/select-multiple/use-select-multiple.ts

@@ -0,0 +1,298 @@
+import { ref, toRefs, computed, ComputedRef, onMounted, watch } from 'vue';
+import { onClickOutside, useVModel, useDebounceFn } from '@vueuse/core';
+
+import classNames from 'classnames';
+
+import type { SetupContext } from 'vue';
+import type { MultiSelectPropTypes, MultiSelectEmitTypes } from './select-multiple';
+import type { MenuListType } from '../../list/list';
+
+interface MultiSelectClasses {
+  baseClasses: string;
+  labelClasses: string;
+}
+
+export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<MultiSelectEmitTypes>['emit']) => {
+  const { displayText, menuList, disabled, textField, valueField, disabledLocalSearch } = toRefs(props);
+
+  const multiSelectClasses: ComputedRef<MultiSelectClasses> = computed(() => {
+    const baseClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
+
+    const labelClasses = classNames('spr-body-sm-regular spr-text-color-strong spr-block', {
+      'spr-text-color-on-fill-disabled': disabled.value,
+    });
+
+    return {
+      baseClasses,
+      labelClasses,
+    };
+  });
+
+  const multiSelectRef = ref<HTMLDivElement | null>(null);
+  const multiSelectPopperState = ref<boolean>(false);
+  const isMultiSelectPopperDisabled = computed(() => disabled.value);
+
+  const multiSelectModel = useVModel(props, 'modelValue', emit);
+  const multiSelectedListItems = ref<MenuListType[]>([]);
+  const multiSelectMenuList = ref<MenuListType[]>([]);
+  const hasUserSelected = ref(false);
+
+  const inputText = ref<string | number>('');
+  const inputTextBackup = ref<string | number>('');
+  const isSearching = ref<boolean>(false);
+
+  /**
+   * Opens the multi-select dropdown menu and resets the searching state.
+   */
+  const handleMenuToggle = () => {
+    multiSelectPopperState.value = true;
+    isSearching.value = false;
+  };
+
+  /**
+   * Returns the normalized value of the model as an array for internal use.
+   */
+  const normalizedValue = computed(() => {
+    if (Array.isArray(multiSelectModel.value)) {
+      return multiSelectModel.value;
+    }
+
+    if (multiSelectModel.value !== undefined && multiSelectModel.value !== null) {
+      return [multiSelectModel.value];
+    }
+
+    return [];
+  });
+
+  /**
+   * Processes the menuList prop and normalizes it into MenuListType[] for the dropdown.
+   */
+  const processMenuList = () => {
+    if (!menuList.value || !Array.isArray(menuList.value) || menuList.value.length === 0) {
+      multiSelectMenuList.value = [];
+
+      return;
+    }
+
+    const firstItem = menuList.value[0];
+
+    if (typeof firstItem === 'string') {
+      multiSelectMenuList.value = (menuList.value as string[]).map((item) => ({
+        text: item,
+        value: item,
+      }));
+
+      return;
+    }
+
+    if (typeof firstItem === 'number') {
+      multiSelectMenuList.value = (menuList.value as Array<number | string | Record<string, unknown>>)
+        .filter((item): item is number => typeof item === 'number')
+        .map((item) => ({
+          text: item.toString(),
+          value: item,
+        }));
+
+      return;
+    }
+
+    if (typeof firstItem === 'object' && firstItem !== null) {
+      if ('text' in firstItem && 'value' in firstItem) {
+        multiSelectMenuList.value = menuList.value as MenuListType[];
+
+        return;
+      }
+
+      multiSelectMenuList.value = (menuList.value as Record<string, unknown>[]).map((item) => {
+        const displayText = item[textField.value] !== undefined ? String(item[textField.value]) : 'Unnamed';
+
+        let itemValue = valueField.value && item[valueField.value] !== undefined ? item[valueField.value] : item;
+
+        if (itemValue === undefined) itemValue = '';
+
+        return {
+          text: displayText,
+          value: typeof itemValue === 'object' ? JSON.stringify(itemValue) : String(itemValue),
+          _originalObject: item,
+        };
+      });
+
+      return;
+    }
+
+    multiSelectMenuList.value = menuList.value as MenuListType[];
+  };
+
+  /**
+   * Returns the filtered menu list based on the search input, or the full list if local search is disabled.
+   */
+  const filteredMultiSelectMenuList = computed(() => {
+    if (disabledLocalSearch.value) {
+      return multiSelectMenuList.value;
+    }
+
+    const query = inputText.value.toString().toLowerCase().trim();
+
+    if (!query) return multiSelectMenuList.value;
+
+    return multiSelectMenuList.value.filter((item) => item.text?.toString().toLowerCase().includes(query));
+  });
+
+  /**
+   * Handles the search input and emits the search-string event (debounced).
+   */
+  const handleSearch = () => {
+    isSearching.value = true;
+
+    debouncedEmitSearch();
+  };
+
+  /**
+   * Debounced function to emit the search-string event for remote search.
+   */
+  const debouncedEmitSearch = useDebounceFn(() => {
+    emit('search-string', inputText.value);
+  }, 300);
+
+  /**
+   * Handles closing the dropdown when clicking outside, restoring input text if searching.
+   */
+  onClickOutside(multiSelectRef, () => {
+    multiSelectPopperState.value = false;
+    if (isSearching.value) {
+      inputText.value = inputTextBackup.value;
+    }
+    isSearching.value = false;
+  });
+
+  /**
+   * Handles selection changes from the dropdown and updates the model value.
+   * Converts stringified objects back to objects if needed.
+   */
+  const handleMultiSelectedItem = (multiSelectedItems: MenuListType[]) => {
+    const selectedValues = multiSelectedItems.map((item) => {
+      if (typeof item.value === 'string' && item.value.startsWith('{') && item.value.endsWith('}')) {
+        try {
+          return JSON.parse(item.value);
+        } catch {
+          return item.value;
+        }
+      }
+      return item.value;
+    });
+
+    hasUserSelected.value = true;
+    multiSelectModel.value = selectedValues;
+    multiSelectPopperState.value = true;
+    inputTextBackup.value = inputText.value;
+  };
+
+  /**
+   * Updates the selected items in the dropdown based on the current model value.
+   * Handles stringified objects and updates the input text accordingly.
+   */
+  const updateMultiSelectedItemsFromValue = () => {
+    if (!multiSelectMenuList.value.length) return;
+
+    const values = normalizedValue.value;
+
+    if (!values || !values.length) {
+      multiSelectedListItems.value = [];
+      inputText.value = '';
+      inputTextBackup.value = '';
+
+      return;
+    }
+
+    multiSelectedListItems.value = multiSelectMenuList.value.filter((item) => {
+      return values.some((val) => {
+        let itemVal = item.value;
+        let valToCompare = val;
+
+        if (typeof itemVal === 'string' && itemVal.startsWith('{') && itemVal.endsWith('}')) {
+          try {
+            itemVal = JSON.parse(itemVal);
+          } catch {
+            // ignore
+          }
+        }
+
+        if (typeof valToCompare === 'string' && valToCompare.startsWith('{') && valToCompare.endsWith('}')) {
+          try {
+            valToCompare = JSON.parse(valToCompare);
+          } catch {
+            // ignore
+          }
+        }
+
+        if (typeof itemVal === 'object' && typeof valToCompare === 'object') {
+          return JSON.stringify(itemVal) === JSON.stringify(valToCompare);
+        }
+
+        return itemVal == valToCompare;
+      });
+    });
+
+    if (!isSearching.value) {
+      if (multiSelectedListItems.value.length > 3) {
+        inputText.value = `${multiSelectedListItems.value.length} items selected`;
+      } else {
+        inputText.value = multiSelectedListItems.value.map((item) => item.text).join(', ');
+      }
+
+      if (displayText.value && !hasUserSelected.value && (!inputText.value || inputText.value === '')) {
+        inputText.value = displayText.value;
+        inputTextBackup.value = displayText.value;
+      } else if (hasUserSelected.value) {
+        inputTextBackup.value = inputText.value;
+      }
+    }
+  };
+
+  /**
+   * Clears the selection and input text, and closes the dropdown.
+   */
+  const handleClear = () => {
+    emit('update:modelValue', []);
+
+    inputText.value = '';
+
+    multiSelectPopperState.value = false;
+  };
+
+  watch(multiSelectModel, () => {
+    updateMultiSelectedItemsFromValue();
+  });
+
+  watch(multiSelectMenuList, () => {
+    updateMultiSelectedItemsFromValue();
+  });
+
+  onMounted(() => {
+    processMenuList();
+
+    if (normalizedValue.value.length > 0) {
+      updateMultiSelectedItemsFromValue();
+    } else if (displayText.value) {
+      inputText.value = displayText.value;
+      inputTextBackup.value = displayText.value;
+    }
+  });
+
+  return {
+    multiSelectClasses,
+    multiSelectPopperState,
+    multiSelectRef,
+    multiSelectModel,
+    multiSelectMenuList,
+    filteredMultiSelectMenuList,
+    multiSelectedListItems,
+    inputText,
+    isMultiSelectPopperDisabled,
+    isSearching,
+    handleMultiSelectedItem,
+    handleSearch,
+    handleClear,
+    handleMenuToggle,
+  };
+};

package/src/components/select/select.ts

@@ -0,0 +1,135 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list/list';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A'] as const;
+
+const PLACEMENTS_TYPES = [
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+] as const;
+
+const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+
+export const selectPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Object, Array] as PropType<
+      string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
+    >,
+    default: () => [],
+  },
+  menuList: {
+    type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
+    required: true,
+    default: [],
+  },
+  groupItemsBy: {
+    type: String as PropType<(typeof GROUPED_ITEMS_BY_TYPES)[number]>,
+    validator: (value: (typeof GROUPED_ITEMS_BY_TYPES)[number] | undefined) => {
+      return value === undefined || GROUPED_ITEMS_BY_TYPES.includes(value);
+    },
+  },
+  textField: {
+    type: String,
+    default: 'text',
+    description: 'Field name to use for display text when using dynamic object arrays',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+    description: 'Field name to use for value when using dynamic object arrays',
+  },
+  placeholder: {
+    type: String,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placement: {
+    type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
+    validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
+    default: 'bottom',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  popperWidth: {
+    type: String,
+    default: '100%',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  displayText: {
+    type: String,
+    default: '',
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  searchable: {
+    type: Boolean,
+    default: false,
+  },
+  disabledLocalSearch: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const selectEmitTypes = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'update:modelValue': (_value: unknown) => true,
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'infinite-scroll-trigger': (_triggered: boolean) => true,
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'search-string': (_search: string | number) => true,
+};
+
+export type SelectPropTypes = ExtractPropTypes<typeof selectPropTypes>;
+export type SelectEmitTypes = typeof selectEmitTypes;

package/src/components/select/select.vue

@@ -0,0 +1,168 @@
+<template>
+  <div :class="selectClasses.baseClasses">
+    <label v-if="props.label" :for="id" :class="selectClasses.labelClasses">
+      {{ props.label }}
+    </label>
+
+    <Menu
+      :shown="selectPopperState"
+      aria-id="select-wrapper"
+      distance="4"
+      :placement="props.placement"
+      :triggers="[]"
+      :popper-hide-triggers="[]"
+      :auto-hide="false"
+      :disabled="isSelectPopperDisabled"
+      :container="`#${props.id}`"
+      :strategy="
+        props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+      "
+      :delay="0"
+      :style="{
+        position: props.wrapperPosition,
+        width: props.width,
+      }"
+    >
+      <div @click="handleMenuToggle">
+        <spr-input
+          v-model="inputText"
+          :class="{
+            'spr-cursor-pointer': !props.searchable,
+          }"
+          :placeholder="props.placeholder"
+          :readonly="!props.searchable"
+          :disabled="props.disabled"
+          autocomplete="off"
+          :helper-text="props.helperText"
+          :helper-icon="props.helperIcon"
+          :display-helper="props.displayHelper"
+          @keyup="handleSearch"
+        >
+          <template #icon>
+            <div class="spr-flex spr-items-center spr-gap-1">
+              <Icon
+                v-if="props.clearable && inputText"
+                class="spr-cursor-pointer"
+                icon="ph:x"
+                @click.stop="handleClear"
+              />
+              <Icon icon="ph:caret-down" />
+            </div>
+          </template>
+        </spr-input>
+
+        <select
+          v-if="selectMenuList && selectMenuList.length"
+          :value="Array.isArray(selectModel) ? selectModel[0] : selectModel"
+          data-testid="qa-hidden-select"
+          tabindex="-1"
+          aria-hidden="true"
+          hidden
+        >
+          <option v-for="item in selectMenuList" :key="item.value" :value="item.value">
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+
+      <div
+        :id="props.id"
+        :style="{
+          width: props.popperWidth,
+        }"
+      ></div>
+
+      <template #popper>
+        <div
+          ref="selectRef"
+          class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
+        >
+          <template v-if="isSearching">
+            <template v-if="!props.disabledLocalSearch">
+              <template v-if="filteredSelectMenuList.length > 0">
+                <spr-list
+                  v-model="selectedListItems"
+                  :menu-list="filteredSelectMenuList"
+                  :group-items-by="props.groupItemsBy"
+                  :pre-selected-items="Array.isArray(selectModel) ? selectModel.flat() : [selectModel]"
+                  @update:model-value="handleSelectedItem"
+                />
+              </template>
+              <template v-else>
+                <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+                  <span class="spr-body-sm-regular spr-m-0">No results found</span>
+                </div>
+              </template>
+            </template>
+            <template v-else>
+              <template v-if="selectMenuList.length > 0">
+                <spr-list
+                  v-model="selectedListItems"
+                  :menu-list="selectMenuList"
+                  :group-items-by="props.groupItemsBy"
+                  :pre-selected-items="Array.isArray(selectModel) ? selectModel.flat() : [selectModel]"
+                  @update:model-value="handleSelectedItem"
+                />
+              </template>
+              <template v-else>
+                <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+                  <span class="spr-body-sm-regular spr-m-0">No results found</span>
+                </div>
+              </template>
+            </template>
+          </template>
+          <template v-else>
+            <template v-if="selectMenuList.length > 0">
+              <spr-list
+                v-model="selectedListItems"
+                :menu-list="selectMenuList"
+                :group-items-by="props.groupItemsBy"
+                :pre-selected-items="Array.isArray(selectModel) ? selectModel.flat() : [selectModel]"
+                @update:model-value="handleSelectedItem"
+              />
+            </template>
+            <template v-else>
+              <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+                <span class="spr-body-sm-regular spr-m-0">No results found</span>
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+    </Menu>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Menu } from 'floating-vue';
+import { Icon } from '@iconify/vue';
+
+import 'floating-vue/dist/style.css';
+
+import SprInput from '../input/input.vue';
+import SprList from '../list/list.vue';
+
+import { selectPropTypes, selectEmitTypes } from './select';
+
+import { useSelect } from './use-select';
+
+const props = defineProps(selectPropTypes);
+const emit = defineEmits(selectEmitTypes);
+
+const {
+  selectClasses,
+  selectPopperState,
+  selectRef,
+  selectModel,
+  selectMenuList,
+  filteredSelectMenuList,
+  selectedListItems,
+  inputText,
+  isSelectPopperDisabled,
+  isSearching,
+  handleSelectedItem,
+  handleSearch,
+  handleClear,
+  handleMenuToggle,
+} = useSelect(props, emit);
+</script>