design-system-next 2.7.45 → 2.8.0

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

@@ -0,0 +1,165 @@
+import { ref, computed, watch } from 'vue';
+import { useDebounceFn, onClickOutside } from '@vueuse/core';
+
+import type { SelectLadderizedPropTypes } from './select-ladderized';
+
+import type { MenuListType } from '@/components/list/list';
+
+export const useSelectLadderized = (
+  props: SelectLadderizedPropTypes,
+  emit: (event: string, ...args: unknown[]) => void,
+) => {
+  const ladderizedClasses = computed(() => ({
+    baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
+    labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
+  }));
+
+  // Popper Variables
+  const ladderizedSelectPopperState = ref(false);
+  const ladderizedSelectRef = ref(null);
+  const isLadderizedSelectPopperDisabled = computed(() => props.disabled);
+
+  // Ladderized Select Model
+  const ladderizedSelectModel = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+  });
+  const ladderizedSelectMenuList = computed(() => props.menuList);
+
+  // Input Variables
+  const inputText = ref<string>('');
+  const isSearching = ref(false);
+  const wasCleared = ref(false);
+
+  const isLeafNode = (item: MenuListType): boolean => {
+    return !item.sublevel || item.sublevel.length === 0;
+  };
+
+  // Helper to find the path to a selected value in the menu tree
+  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
+    for (const item of items) {
+      const newPath = [...path, item.text];
+
+      if (item.value === value) {
+        return newPath;
+      }
+
+      if (item.sublevel) {
+        const result = findPathToValue(item.sublevel, value, newPath);
+
+        if (result) return result;
+      }
+    }
+
+    return null;
+  };
+
+  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
+    wasCleared.value = false;
+    ladderizedSelectModel.value = selectedItems;
+
+    let itemToCheck = selectedItem;
+
+    // Fallback: if selectedItem is not provided, try to find it from the value
+    if (!itemToCheck && selectedItems.length > 0) {
+      const findItemByValue = (items: MenuListType[], value: string | number): MenuListType | undefined => {
+        for (const item of items) {
+          if (item.value === value) return item;
+
+          if (item.sublevel) {
+            const found = findItemByValue(item.sublevel, value);
+
+            if (found) return found;
+          }
+        }
+
+        return undefined;
+      };
+
+      itemToCheck = findItemByValue(ladderizedSelectMenuList.value, selectedItems[selectedItems.length - 1]);
+    }
+
+    if (itemToCheck) {
+      const path = findPathToValue(ladderizedSelectMenuList.value, itemToCheck.value);
+
+      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
+
+      if (isLeafNode(itemToCheck)) {
+        ladderizedSelectPopperState.value = false;
+      }
+    } else if (selectedItems.length === 0 && !wasCleared.value) {
+      inputText.value = '';
+    }
+  };
+
+  const handleSearch = () => {
+    isSearching.value = true;
+
+    debouncedEmitSearch();
+  };
+
+  const debouncedEmitSearch = useDebounceFn(() => {
+    // Optionally emit search event here if needed
+  }, 300);
+
+  const handleClear = () => {
+    wasCleared.value = true;
+
+    inputText.value = '';
+
+    emit('update:modelValue', []);
+  };
+
+  const handleMenuToggle = () => {
+    ladderizedSelectPopperState.value = true;
+
+    isSearching.value = false;
+  };
+
+  // Watch for changes in modelValue to update inputText
+  watch(
+    () => ladderizedSelectModel.value,
+    (newVal) => {
+      if (wasCleared.value) {
+        inputText.value = '';
+        wasCleared.value = false;
+        return;
+      }
+
+      if (Array.isArray(newVal) && newVal.length > 0) {
+        // Treat the array as a single path for ladderized select
+        let currentLevel = ladderizedSelectMenuList.value;
+
+        const pathTexts: string[] = [];
+
+        for (const value of newVal) {
+          const found = currentLevel.find((item) => item.value === value);
+          if (!found) break;
+          pathTexts.push(found.text);
+          currentLevel = found.sublevel || [];
+        }
+
+        inputText.value = pathTexts.join(' > ');
+      }
+    },
+    { immediate: true },
+  );
+
+  onClickOutside(ladderizedSelectRef, () => {
+    ladderizedSelectPopperState.value = false;
+  });
+
+  return {
+    ladderizedClasses,
+    ladderizedSelectPopperState,
+    ladderizedSelectRef,
+    ladderizedSelectMenuList,
+    isLadderizedSelectPopperDisabled,
+    ladderizedSelectModel,
+    inputText,
+    handleSelectedLadderizedItem,
+    handleSearch,
+    handleClear,
+    handleMenuToggle,
+  };
+};

package/src/components/select/select-multiple/select-multiple.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 multiSelectPropTypes = {
+  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 multiSelectEmitTypes = {
+  // 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 MultiSelectPropTypes = ExtractPropTypes<typeof multiSelectPropTypes>;
+export type MultiSelectEmitTypes = typeof multiSelectEmitTypes;

package/src/components/select/select-multiple/select-multiple.vue

@@ -0,0 +1,171 @@
+<template>
+  <div :class="multiSelectClasses.baseClasses">
+    <label v-if="props.label" :for="id" :class="multiSelectClasses.labelClasses">
+      {{ props.label }}
+    </label>
+
+    <Menu
+      :shown="multiSelectPopperState"
+      aria-id="multi-select-wrapper"
+      distance="4"
+      :placement="props.placement"
+      :triggers="[]"
+      :popper-hide-triggers="[]"
+      :auto-hide="false"
+      :disabled="isMultiSelectPopperDisabled"
+      :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>
+      </div>
+
+      <div
+        :id="props.id"
+        :style="{
+          width: props.popperWidth,
+        }"
+      ></div>
+
+      <select
+        :id="`${props.id}-multiple-select`"
+        tabindex="-1"
+        aria-hidden="true"
+        data-qa="multi-select-hidden"
+        multiple
+        hidden
+      >
+        <option v-for="item in multiSelectedListItems" :key="item.value" :value="item.value" selected>
+          {{ item.text }}
+        </option>
+      </select>
+
+      <template #popper>
+        <div
+          ref="multiSelectRef"
+          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="filteredMultiSelectMenuList.length > 0">
+                <spr-list
+                  v-model="multiSelectedListItems"
+                  :menu-list="filteredMultiSelectMenuList"
+                  :group-items-by="props.groupItemsBy"
+                  :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
+                  multi-select
+                  @update:model-value="handleMultiSelectedItem"
+                />
+              </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="multiSelectMenuList.length > 0">
+                <spr-list
+                  v-model="multiSelectedListItems"
+                  :menu-list="multiSelectMenuList"
+                  :group-items-by="props.groupItemsBy"
+                  :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
+                  multi-select
+                  @update:model-value="handleMultiSelectedItem"
+                />
+              </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="multiSelectMenuList.length > 0">
+              <spr-list
+                v-model="multiSelectedListItems"
+                :menu-list="multiSelectMenuList"
+                :group-items-by="props.groupItemsBy"
+                :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
+                multi-select
+                @update:model-value="handleMultiSelectedItem"
+              />
+            </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 { multiSelectPropTypes, multiSelectEmitTypes } from './select-multiple';
+
+import { useMultiSelect } from './use-select-multiple';
+
+const props = defineProps(multiSelectPropTypes);
+const emit = defineEmits(multiSelectEmitTypes);
+
+const {
+  multiSelectClasses,
+  multiSelectPopperState,
+  multiSelectRef,
+  multiSelectModel,
+  multiSelectMenuList,
+  filteredMultiSelectMenuList,
+  multiSelectedListItems,
+  inputText,
+  isMultiSelectPopperDisabled,
+  isSearching,
+  handleMultiSelectedItem,
+  handleSearch,
+  handleClear,
+  handleMenuToggle,
+} = useMultiSelect(props, emit);
+</script>