design-system-next 2.9.4 → 2.9.6

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "design-system-next",
   "private": false,
-  "version": "2.9.4",
+  "version": "2.9.6",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.9.4",
+  "version": "2.9.6",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/src/App.vue

@@ -1,82 +1,3 @@
 <template>
-  <spr-select-multiple
-    id="sample-select"
-    v-model="selectModel"
-    label="Multi-Select Label"
-    placeholder="Select an option"
-    :options="options"
-  />
-  <br />
-  {{ selectModel }}
-  <br />
-  <br />
-  {{ options }}
-
-  <br />
-  <br />
-
-  <br />
-  <br />
-
-  <br />
-  <br />
-
-  <br />
-  <br />
-
-  <button @click="addMoreOptions">Add more option</button>
+  <div>Test Component Here</div>
 </template>
-
-<script setup>
-import { ref } from 'vue';
-
-import SprSelectMultiple from './components/select/select-multiple/select-multiple.vue';
-
-const selectModel = ref('');
-
-const options = ref([
-  { text: 'Apple', value: 'apple' },
-  { text: 'Banana', value: 'banana' },
-  { text: 'Cherry', value: 'cherry' },
-  { text: 'Date', value: 'date' },
-  { text: 'Elderberry', value: 'elderberry' },
-  { text: 'Fig', value: 'fig' },
-  { text: 'Grape', value: 'grape' },
-  { text: 'Nectarine', value: 'nectarine' },
-  { text: 'Orange', value: 'orange' },
-  { text: 'Papaya', value: 'papaya' },
-  { text: '89 Quince', value: '50' },
-]);
-
-let pagination = ref({
-  currentPage: 1,
-  totalPages: 0,
-});
-
-const addMoreOptions = async () => {
-  try {
-    const response = await fetch(`https://api.thedogapi.com/v1/breeds?page=${pagination.value.currentPage}&limit=10`);
-
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-
-    const optionsResponse = await response.json();
-
-    if (optionsResponse.length) {
-      options.value = [
-        ...(options.value || []),
-        ...optionsResponse.map((optionItem) => ({
-          text: optionItem.name,
-          value: optionItem.id,
-        })),
-      ];
-    }
-    // Do not clear options if no new options are fetched
-
-    pagination.value.currentPage += 1;
-  } catch (error) {
-    console.error('There was a problem with the fetch operation:', error);
-  }
-};
-</script>

package/src/components/calendar/calendar.vue

@@ -5,24 +5,28 @@
         <div :class="[getCalendarClasses.headerWrapper]">
           <div class="spr-flex spr-items-center spr-justify-center spr-gap-size-spacing-3xs">
             <div class="spr-flex">
-              <spr-button variant="tertiary" has-icon @click="prevWeek">
+              <spr-button id="calendar-prev-week" variant="tertiary" has-icon @click="prevWeek">
                 <Icon icon="ph:caret-left-fill" class="spr-text-color-success-base" />
               </spr-button>
-              <spr-button variant="tertiary" has-icon @click="nextWeek">
+              <spr-button id="calendar-next-week" variant="tertiary" has-icon @click="nextWeek">
                 <Icon icon="ph:caret-right-fill" class="spr-text-color-success-base" />
               </spr-button>
             </div>
             <div class="spr-heading-xs">{{ weekRangeDisplay }}</div>
           </div>
 
-          <spr-button variant="secondary" size="large" @click="goToToday"> Today </spr-button>
+          <spr-button id="calendar-today" variant="secondary" size="large" @click="goToToday"> Today </spr-button>
         </div>
         <!-- Filters -->
         <slot name="filter" />
 
         <div ref="tableBodyRef" class="spr-table-wrapper spr-h-[calc(100vh-12rem)] spr-w-full spr-overflow-auto">
           <div class="spr-pb-size-spacing-lg">
-            <table aria-describedby="calendar" :class="[getCalendarClasses.calendarTable, 'spr-relative']">
+            <table
+              id="table-calendar"
+              aria-describedby="calendar"
+              :class="[getCalendarClasses.calendarTable, 'spr-relative']"
+            >
               <!-- Calendar Header -->
               <thead class="spr-bg-white spr-sticky spr-top-0 spr-z-20">
                 <tr>
@@ -30,6 +34,7 @@
                     <div :class="getCalendarClasses.headerContent">
                       <div>Employee Name</div>
                       <div
+                        id="calendar-sort-button"
                         :class="['spr-flex spr-cursor-pointer spr-flex-row spr-items-center spr-p-size-spacing-6xs']"
                         @click="handleSorting"
                       >
@@ -128,8 +133,8 @@
                           <spr-calendar-cell type="restday" fullwidth />
                         </div>
                         <div
-                          class="spr-flex spr-flex-col spr-items-center spr-justify-start"
                           v-else
+                          class="spr-flex spr-flex-col spr-items-center spr-justify-start"
                           @click="
                             onCellClick({
                               employeeId: employee.id,

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

@@ -25,6 +25,7 @@ export const selectLadderizedPropTypes = {
   id: {
     type: String,
     required: true,
+    default: 'select-ladderized',
   },
   modelValue: {
     type: Array as PropType<string[]>,

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

@@ -25,6 +25,7 @@
     >
       <div @click="handleOptionsToggle">
         <spr-input
+          :id="`input-${props.id}`"
           v-model="inputText"
           class="spr-cursor-pointer"
           :placeholder="props.placeholder"

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

@@ -1,164 +1,164 @@
-import { ref, toRefs, computed, watch } from 'vue';
-import { useVModel, 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 { options, disabled } = toRefs(props);
-
-  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(() => disabled.value);
-
-  // Ladderized Select Model
-  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
-  const ladderizedSelectOptions = computed(() => options.value);
-
-  // 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(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
-    }
-
-    if (itemToCheck) {
-      const path = findPathToValue(ladderizedSelectOptions.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 handleOptionsToggle = () => {
-    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 = ladderizedSelectOptions.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,
-    ladderizedSelectOptions,
-    isLadderizedSelectPopperDisabled,
-    ladderizedSelectModel,
-    inputText,
-    handleSelectedLadderizedItem,
-    handleSearch,
-    handleClear,
-    handleOptionsToggle,
-  };
-};
+import { ref, toRefs, computed, watch } from 'vue';
+import { useVModel, 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 { options, disabled } = toRefs(props);
+
+  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(() => disabled.value);
+
+  // Ladderized Select Model
+  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
+  const ladderizedSelectOptions = computed(() => options.value);
+
+  // 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(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
+    }
+
+    if (itemToCheck) {
+      const path = findPathToValue(ladderizedSelectOptions.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 handleOptionsToggle = () => {
+    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 = ladderizedSelectOptions.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,
+    ladderizedSelectOptions,
+    isLadderizedSelectPopperDisabled,
+    ladderizedSelectModel,
+    inputText,
+    handleSelectedLadderizedItem,
+    handleSearch,
+    handleClear,
+    handleOptionsToggle,
+  };
+};

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

@@ -29,6 +29,7 @@ export const multiSelectPropTypes = {
   id: {
     type: String,
     required: true,
+    default: 'multi-select',
   },
   modelValue: {
     type: Array as PropType<(string | number | Record<string, unknown>)[]>,

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

@@ -26,6 +26,7 @@
       <div ref="multiSelectRef">
         <div @click="handleOptionsToggle">
           <spr-input
+            :id="`input-${props.id}`"
             v-model="inputText"
             :class="{
               'spr-cursor-pointer': true,

package/src/components/select/select.ts

@@ -29,6 +29,7 @@ export const selectPropTypes = {
   id: {
     type: String,
     required: true,
+    default: 'select',
   },
   modelValue: {
     type: [String, Number, Object, Array] as PropType<

package/src/components/select/select.vue

@@ -26,6 +26,7 @@
       <div ref="selectRef">
         <div @click="handleOptionsToggle">
           <spr-input
+            :id="`input-${props.id}`"
             v-model="inputText"
             :class="{
               'spr-cursor-pointer': !props.searchable,