design-system-next 2.7.29 → 2.7.31

package/src/components/list/ladderized-list/ladderized-list-back.vue

@@ -1,12 +1,10 @@
 <template>
   <div
-    class="
-    spr-py-size-spacing-2xs spr-px-size-spacing-xs 
-    spr-body-xs-regular 
-    spr-flex spr-items-center spr-gap-size-spacing-5xs
-    spr-border-solid spr-border-0 spr-border-b spr-border-color-weak 
-    spr-cursor-pointer
-    "
+    :class="[
+      'spr-flex spr-cursor-pointer spr-items-center spr-gap-size-spacing-5xs spr-px-size-spacing-xs spr-py-size-spacing-2xs',
+      'spr-body-xs-regular',
+      'spr-border-color-weak spr-border-0 spr-border-b spr-border-solid',
+    ]"
     @click="handleBackClick"
   >
     <Icon icon="ph:arrow-left" class="spr-size-4" />
@@ -20,15 +18,15 @@ import { Icon } from '@iconify/vue';
 const props = defineProps({
   label: {
     type: String,
-    default: "Back"
+    default: 'Back',
   },
 });
 
 const emit = defineEmits({
-  back: () => true
+  back: () => true,
 });
 
 const handleBackClick = () => {
-  emit("back");
+  emit('back');
 };
 </script>

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

@@ -16,7 +16,7 @@ export const ladderizedListPropTypes = {
   removeCurrentLevelInBackLabel: {
     type: Boolean,
     default: false,
-  }
+  },
 };
 
 export const ladderizedListEmitTypes = {

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

@@ -3,12 +3,26 @@
     <transition :name="transitionName" mode="out-in">
       <div v-if="activeLevel % 2 === 0">
         <spr-ladderized-list-back v-if="activeLevel > 0" :label="backLabel ?? 'Back'" @back="handleBackClick" />
-        <spr-list v-model="selectedListItem" class="spr-p-size-spacing-3xs" :menu-list="activeList" :multi-select="false" :ladderized="true" @update:model-value="(value) => handleSelectedListItem(value[0])" />
+        <spr-list
+          v-model="selectedListItem"
+          class="spr-p-size-spacing-3xs"
+          :menu-list="activeList"
+          :multi-select="false"
+          :ladderized="true"
+          @update:model-value="(value) => handleSelectedListItem(value[0])"
+        />
       </div>
-      
+
       <div v-else>
         <spr-ladderized-list-back v-if="activeLevel > 0" :label="backLabel ?? 'Back'" @back="handleBackClick" />
-        <spr-list v-model="selectedListItem" class="spr-p-size-spacing-3xs" :menu-list="activeList" :multi-select="false" :ladderized="true" @update:model-value="(value) => handleSelectedListItem(value[0])" />
+        <spr-list
+          v-model="selectedListItem"
+          class="spr-p-size-spacing-3xs"
+          :menu-list="activeList"
+          :multi-select="false"
+          :ladderized="true"
+          @update:model-value="(value) => handleSelectedListItem(value[0])"
+        />
       </div>
     </transition>
   </div>
@@ -16,6 +30,7 @@
 
 <script setup lang="ts">
 import SprList from '@/components/list/list.vue';
+
 import { ladderizedListPropTypes, ladderizedListEmitTypes } from './ladderized-list';
 import { useLadderizedList } from './use-ladderized-list';
 import SprLadderizedListBack from './ladderized-list-back.vue';
@@ -23,8 +38,15 @@ import SprLadderizedListBack from './ladderized-list-back.vue';
 const props = defineProps(ladderizedListPropTypes);
 const emit = defineEmits(ladderizedListEmitTypes);
 
-const { activeLevel, selectedListItem, handleSelectedListItem, activeList, handleBackClick, transitionName, backLabel } = useLadderizedList(props, emit);
-
+const {
+  activeLevel,
+  selectedListItem,
+  handleSelectedListItem,
+  activeList,
+  handleBackClick,
+  transitionName,
+  backLabel,
+} = useLadderizedList(props, emit);
 </script>
 
 <style scoped>
@@ -32,7 +54,7 @@ const { activeLevel, selectedListItem, handleSelectedListItem, activeList, handl
 .slide-left-leave-active,
 .slide-right-enter-active,
 .slide-right-leave-active {
-  transition: all 0.25s ease-out;
+  transition: all 150ms ease-out;
 }
 
 .slide-left-enter-from,

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

@@ -1,27 +1,32 @@
 import { computed, onBeforeMount, ref, toRefs } from 'vue';
+import { useVModel } from '@vueuse/core';
+
+import { LadderizedListPropTypes, LadderizedListEmitTypes } from './ladderized-list';
+
 import type { SetupContext } from 'vue';
 import type { MenuListType } from '../list';
-import { LadderizedListPropTypes, LadderizedListEmitTypes } from './ladderized-list';
-import { useVModel } from '@vueuse/core'
 
-export const useLadderizedList = (props: LadderizedListPropTypes, emit: SetupContext<LadderizedListEmitTypes>['emit']) => {
+export const useLadderizedList = (
+  props: LadderizedListPropTypes,
+  emit: SetupContext<LadderizedListEmitTypes>['emit'],
+) => {
   const ladderizedListOutput = useVModel(props, 'modelValue', emit); // List of items for v-model
   const { menuList, removeCurrentLevelInBackLabel } = toRefs(props);
-  const transitionName = ref("slide-left");
-  const backLabel = ref("");
-  
+  const transitionName = ref('slide-left');
+  const backLabel = ref('');
+
   // Variables used for internal logic
   const selectedListItem = ref<MenuListType[]>([]); // List of items for recording the selected item
   const activeLevel = ref(0);
-  const activeList =  ref<MenuListType[]>(menuList.value);  // List of items to display in the active level
+  const activeList = ref<MenuListType[]>(menuList.value); // List of items to display in the active level
   const prevList = ref<MenuListType[]>([]);
 
   const handleSelectedListItem = (item: MenuListType) => {
-    transitionName.value = "slide-left";
+    transitionName.value = 'slide-left';
     // Update UI for selectedListItem
     updateSelectedListItem(item);
 
-    const isSameLevel = computed(() => prevList.value.some(listItem => listItem.value === item.value));
+    const isSameLevel = computed(() => prevList.value.some((listItem) => listItem.value === item.value));
 
     // Update the activeList and activeLevel
     if (!isSameLevel.value) {
@@ -29,27 +34,27 @@ export const useLadderizedList = (props: LadderizedListPropTypes, emit: SetupCon
     } else {
       replaceItemInOutput(item);
     }
-    
+
     if (item.sublevel && item.sublevel.length > 0) updateLevel(item);
     // Update output value
-    emit("update:modelValue", ladderizedListOutput.value);
+    emit('update:modelValue', ladderizedListOutput.value);
   };
 
   // Update UI display for selectedListItem
   const updateSelectedListItem = (item: MenuListType) => {
-    if(selectedListItem.value[activeLevel.value]) {
+    if (selectedListItem.value[activeLevel.value]) {
       selectedListItem.value[activeLevel.value] = item;
     } else {
       selectedListItem.value.push(item);
     }
-  }
+  };
 
   // Update the activeList, prevList and activeLevel
   const updateLevel = (item: MenuListType) => {
     activeLevel.value += 1;
     prevList.value = activeList.value;
     activeList.value = item.sublevel ?? activeList.value;
-  }
+  };
 
   // Append the new item to the output
   const appendItemToOutput = (item: MenuListType) => {
@@ -57,41 +62,41 @@ export const useLadderizedList = (props: LadderizedListPropTypes, emit: SetupCon
     if (ladderizedListOutput.value[ladderizedListOutput.value.length - 1] === item.value) return;
 
     // Update back label text
-    if (backLabel.value !== "") {
-      const textArray = backLabel.value.split(", ");
+    if (backLabel.value !== '') {
+      const textArray = backLabel.value.split(', ');
       textArray?.push(item.text);
-      backLabel.value = textArray?.join(", ") ?? "";
+      backLabel.value = textArray?.join(', ') ?? '';
     } else {
       backLabel.value = item.text;
     }
 
     // Update output value
     ladderizedListOutput.value.push(item.value.toString());
-  }
+  };
 
   // Replace the last item in the output with the new item
   const replaceItemInOutput = (item: MenuListType) => {
     // Update back label text
-    const textArray = backLabel.value.trim().split(",");
+    const textArray = backLabel.value.trim().split(',');
     textArray?.pop();
     textArray?.push(item.text);
-    backLabel.value = textArray?.join(", ") ?? "";
+    backLabel.value = textArray?.join(', ') ?? '';
 
     // Update output value
     const valueArray = ladderizedListOutput.value;
     valueArray?.pop();
     valueArray?.push(item.value);
     ladderizedListOutput.value = valueArray ?? [];
-  }
+  };
 
   const handleBackClick = () => {
-    transitionName.value = "slide-right";
+    transitionName.value = 'slide-right';
     activeLevel.value -= 1;
     if (activeLevel.value > 0) {
       // Update back label text
-      const textArray = backLabel.value.trim().split(",");
+      const textArray = backLabel.value.trim().split(',');
       textArray?.pop();
-      backLabel.value = textArray?.join(", ") ?? "";
+      backLabel.value = textArray?.join(', ') ?? '';
       // Update output value
       const valueArray = ladderizedListOutput.value;
       valueArray?.pop();
@@ -99,13 +104,13 @@ export const useLadderizedList = (props: LadderizedListPropTypes, emit: SetupCon
 
       // Get previous activeList from menuList
       for (let i = 0; i < activeLevel.value; i++) {
-        activeList.value = props.menuList.find(item => item.value === ladderizedListOutput.value[i])?.sublevel ?? [];
+        activeList.value = props.menuList.find((item) => item.value === ladderizedListOutput.value[i])?.sublevel ?? [];
       }
     } else {
       // Reset values
       activeList.value = props.menuList;
       ladderizedListOutput.value = [];
-      backLabel.value = "";
+      backLabel.value = '';
       activeLevel.value = 0;
     }
   };
@@ -118,9 +123,7 @@ export const useLadderizedList = (props: LadderizedListPropTypes, emit: SetupCon
 
       // On initialize, traverse through the activeList based from ladderizedListOutput
       ladderizedListOutput.value.forEach((preSelectedItem: string) => {
-        const item = activeList.value.find(
-          (menuItem) => String(menuItem.value) === String(preSelectedItem),
-        );
+        const item = activeList.value.find((menuItem) => String(menuItem.value) === String(preSelectedItem));
 
         if (item) {
           updateSelectedListItem(item);
@@ -134,12 +137,12 @@ export const useLadderizedList = (props: LadderizedListPropTypes, emit: SetupCon
         }
       });
 
-      if(removeCurrentLevelInBackLabel.value && tempBackLabel.length > 0) {
+      if (removeCurrentLevelInBackLabel.value && tempBackLabel.length > 0) {
         tempBackLabel.pop();
       }
 
       // Update back label text
-      backLabel.value = tempBackLabel.length > 0 ? tempBackLabel.join(", ") : "Back";
+      backLabel.value = tempBackLabel.length > 0 ? tempBackLabel.join(', ') : 'Back';
     }
   };
 
@@ -148,12 +151,12 @@ export const useLadderizedList = (props: LadderizedListPropTypes, emit: SetupCon
     initializeMenuList();
   });
 
-  return { 
-    activeLevel, 
-    activeList, 
-    handleSelectedListItem, 
-    handleBackClick, 
-    selectedListItem, 
+  return {
+    activeLevel,
+    activeList,
+    handleSelectedListItem,
+    handleBackClick,
+    selectedListItem,
     transitionName,
     backLabel,
   };

package/src/components/list/use-list.ts

@@ -1,8 +1,10 @@
 import { ref, toRefs, computed, ComputedRef, watch, onMounted } from 'vue';
+import { useVModel } from '@vueuse/core';
+
 import classNames from 'classnames';
+
 import type { SetupContext } from 'vue';
 import type { ListPropTypes, ListEmitTypes, MenuListType, GroupedMenuListType } from './list';
-import { useVModel } from '@vueuse/core';
 
 interface ListClasses {
   listItemClasses: string;
@@ -91,20 +93,25 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   };
 
   const setPreSelectedItems = () => {
-    if (preSelectedItems.value && preSelectedItems.value.length > 0) {
-      preSelectedItems.value.forEach((preSelectedItem: string) => {
-        const alreadySelected = selectedItems.value.some(
-          (selectedItem) => String(selectedItem.value) === String(preSelectedItem),
-        );
+    if (!preSelectedItems.value?.length) return;
 
-        if (alreadySelected) return;
+    const selected = preSelectedItems.value
+      .map((preSelectedItem: string) =>
+        localizedMenuList.value.find((menuItem) => String(menuItem.value) === String(preSelectedItem)),
+      )
+      .filter(Boolean) as MenuListType[];
 
-        const item = localizedMenuList.value.find((menuItem) => String(menuItem.value) === String(preSelectedItem));
+    if (multiSelect.value) {
+      selectedItems.value = selected;
+    } else {
+      const firstItem = selected[0];
 
-        if (item) {
-          selectedItems.value = [...selectedItems.value, item];
-        }
-      });
+      if (
+        firstItem &&
+        !selectedItems.value.some((selectedItem) => String(selectedItem.value) === String(firstItem.value))
+      ) {
+        selectedItems.value = [firstItem];
+      }
     }
   };
 
@@ -114,9 +121,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   });
 
   const handleSelectedItem = (item: MenuListType) => {
-    if (!multiSelect.value) {
-      selectedItems.value = [item];
-    } else {
+    if (multiSelect.value) {
       const index = selectedItems.value.findIndex((selectedItem: MenuListType) => selectedItem.value === item.value);
 
       if (index === -1) {
@@ -127,6 +132,8 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
         updatedItems.splice(index, 1);
         selectedItems.value = updatedItems;
       }
+    } else {
+      selectedItems.value = [item];
     }
   };
   // #endregion - Helper Methods

package/src/components/switch/switch.vue

@@ -13,10 +13,10 @@
       }"
     >
       <input
+        :id="defaultId"
         ref="switchRef"
         v-model="proxyValue"
         type="checkbox"
-        :id="defaultId"
         name="checkbox"
         :class="[
           'input spr-absolute spr-left-0 spr-top-0 spr-z-10 spr-m-0 spr-h-6 spr-w-12 spr-opacity-0',
@@ -46,12 +46,22 @@ import { useSwitch } from './use-switch';
 const props = defineProps(switchPropTypes);
 const emit = defineEmits(switchEmitTypes);
 
-const defaultId = props.id ? props.id + '_' + Math.random().toString(36).substring(2, 8) : 'switch_input_' + Math.random().toString(36).substring(2, 8);
+const defaultId = props.id
+  ? props.id + '_' + Math.random().toString(36).substring(2, 8)
+  : 'switch_input_' + Math.random().toString(36).substring(2, 8);
 
 const proxyValue = useVModel(props, 'modelValue', emit);
 
-const { switchWrapperRef, switchRef, switchProps, switchMarkClass, switchTextClass, switchInputClass, isLeftTextLabel, isRightTextLabel } =
-  useSwitch(props);
+const {
+  switchWrapperRef,
+  switchRef,
+  switchProps,
+  switchMarkClass,
+  switchTextClass,
+  switchInputClass,
+  isLeftTextLabel,
+  isRightTextLabel,
+} = useSwitch(props);
 </script>
 
 <style lang="scss" scoped>