design-system-next 2.7.44 → 2.8.0

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

@@ -0,0 +1,108 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '@/components/list/list';
+
+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 selectLadderizedPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  menuList: {
+    type: Array as PropType<MenuListType[]>,
+    required: true,
+    default: () => [],
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  searchableMenu: {
+    type: Boolean,
+    default: false,
+  },
+  searchableMenuPlaceholder: {
+    type: String,
+    default: 'Search...',
+  },
+  placement: {
+    type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
+    validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
+    default: 'bottom',
+  },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  popperWidth: {
+    type: String,
+    default: '100%',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  removeCurrentLevelInBackLabel: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const selectLadderizedEmitTypes = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'update:modelValue': (_value: unknown) => true,
+};
+
+export type SelectLadderizedPropTypes = ExtractPropTypes<typeof selectLadderizedPropTypes>;
+export type SelectLadderizedEmitTypes = typeof selectLadderizedEmitTypes;

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

@@ -0,0 +1,111 @@
+<template>
+  <div :class="ladderizedClasses.baseClasses">
+    <label v-if="props.label" :for="props.id" :class="ladderizedClasses.labelClasses">
+      {{ props.label }}
+    </label>
+
+    <Menu
+      :shown="ladderizedSelectPopperState"
+      aria-id="ladderized-select-wrapper"
+      distance="4"
+      :placement="props.placement"
+      :triggers="[]"
+      :popper-hide-triggers="[]"
+      :auto-hide="false"
+      :disabled="isLadderizedSelectPopperDisabled"
+      :container="'#ladderized-select-wrapper'"
+      :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"
+          :placeholder="props.placeholder"
+          autocomplete="off"
+          :helper-text="props.helperText"
+          :helper-icon="props.helperIcon"
+          :display-helper="props.displayHelper"
+          readonly
+          :disabled="props.disabled"
+          @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="ladderized-select-wrapper" :style="{ width: props.popperWidth }"></div>
+
+      <template #popper>
+        <div
+          ref="ladderizedSelectRef"
+          class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden"
+        >
+          <template v-if="ladderizedSelectMenuList.length > 0">
+            <spr-ladderized-list
+              v-model="ladderizedSelectModel"
+              :ladderized="true"
+              :menu-list="ladderizedSelectMenuList"
+              :menu-level="ladderizedSelectModel.length"
+              :remove-current-level-in-back-label="props.removeCurrentLevelInBackLabel"
+              :searchable-menu="props.searchableMenu"
+              :searchable-menu-placeholder="props.searchableMenuPlaceholder"
+              @update:model-value="handleSelectedLadderizedItem"
+            />
+          </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>
+        </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 '@/components/input/input.vue';
+import SprLadderizedList from '@/components/list/ladderized-list/ladderized-list.vue';
+
+import { selectLadderizedPropTypes, selectLadderizedEmitTypes } from './select-ladderized';
+import { useSelectLadderized } from './use-select-ladderized';
+
+const props = defineProps(selectLadderizedPropTypes);
+const emit = defineEmits(selectLadderizedEmitTypes);
+
+const {
+  ladderizedClasses,
+  ladderizedSelectPopperState,
+  ladderizedSelectRef,
+  ladderizedSelectMenuList,
+  isLadderizedSelectPopperDisabled,
+  ladderizedSelectModel,
+  inputText,
+  handleSelectedLadderizedItem,
+  handleSearch,
+  handleClear,
+  handleMenuToggle,
+} = useSelectLadderized(props, emit);
+</script>

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

@@ -1,122 +1,135 @@
-// import type { PropType, ExtractPropTypes } from 'vue';
-// import type { MenuListType } from '../list/list';
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../../list/list';
 
-// export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 
-// const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A'] as const;
+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 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;
+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: [],
-//   },
-//   multiSelect: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   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,
-//   },
-//   searchString: {
-//     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',
-//   },
-//   disabled: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   readonly: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   ladderized: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   removeCurrentLevelInBackLabel: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   disabled: {
-//     type: Boolean,
-//     default: false,
-//   },
-// };
+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 selectEmitTypes = {
-//   'infinite-scroll-trigger': Boolean,
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//   'update:modelValue': (_value: unknown) => true, // Accept any type of value
-// };
+export const multiSelectEmitTypes = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'update:modelValue': (_value: unknown) => true,
 
-// export type SelectPropTypes = ExtractPropTypes<typeof selectPropTypes>;
-// export type SelectEmitTypes = typeof selectEmitTypes;
+  // 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;