design-system-next 2.17.8 → 2.19.3

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

@@ -1,8 +1,6 @@
 import { onBeforeMount, ref, toRefs, watch } from 'vue';
-import { useVModel } from '@vueuse/core';
-
+import { useVModel, watchDeep } from '@vueuse/core';
 import { LadderizedListPropTypes, LadderizedListEmitTypes } from './ladderized-list';
-
 import type { SetupContext } from 'vue';
 import type { MenuListType } from '../list';
 
@@ -21,6 +19,8 @@ export const useLadderizedList = (
   const activeList = ref<MenuListType[]>(menuList.value); // List of items to display in the active level
   const searchText = ref('');
 
+  const modelValueIsCustom = ref(false);
+
   // Recursive filter function for ladderized options
   const filterOptionsRecursive = (items: MenuListType[], search: string): MenuListType[] => {
     if (!search) return items;
@@ -86,6 +86,12 @@ export const useLadderizedList = (
   const handleSelectedListItem = (item: MenuListType) => {
     transitionName.value = 'slide-left';
 
+    if (modelValueIsCustom.value) {
+      console.log("Custom");
+      ladderizedListOutput.value.shift();
+      modelValueIsCustom.value = false;
+    };
+
     // If searching, reconstruct full path as array of option objects
     if (searchText.value) {
       const path = findOptionPath(menuList.value, String(item.value));
@@ -111,7 +117,7 @@ export const useLadderizedList = (
       replaceItemInOutput(item);
     }
 
-    if (item.sublevel && item.sublevel.length > 0) updateLevel(item);
+    if (item.sublevel && item.sublevel.length > 0) updateLevel(item); // FIXME: This causes activeLevel one less than expected. Currently not critical since most forms are 2 levels deep.
     emit('update:modelValue', ladderizedListOutput.value);
   };
 
@@ -224,9 +230,14 @@ export const useLadderizedList = (
 
           prevList.value = activeList.value;
           activeList.value = item.sublevel ?? prevList.value;
-          activeLevel.value += item.sublevel ? 1 : 0;
+          activeLevel.value += item.sublevel ? 1 : 0; // FIXME: This causes activeLevel one less than expected. Currently not critical since most forms are 2 levels deep.
         } else {
-          // If no item found, skip the for loop
+          // If no item found, rest the values to initial state
+          selectedListItem.value = [];
+          prevList.value = [];
+          activeList.value = menuList.value;
+          activeLevel.value = 0;
+          modelValueIsCustom.value = true;
           return;
         }
       });
@@ -241,8 +252,8 @@ export const useLadderizedList = (
   };
 
   // Watch for modelValue changes and reset selectedListItem if cleared
-  watch(
-    () => props.modelValue,
+  watchDeep(
+    ladderizedListOutput,
     (newVal) => {
       if (!newVal || (Array.isArray(newVal) && newVal.length === 0)) {
         selectedListItem.value = [];

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

@@ -32,54 +32,86 @@ export const useLozenge = (props: LozengePropTypes) => {
         'spr-border': !fill.value,
         'spr-cursor-pointer': isInteractive.value,
         // #region - Styles for hollow lozenge
+
         // Pending
-        'spr-text-mango-800 spr-background-color-pending-weak spr-border-mango-800': tone.value === 'pending' && !fill.value,
-        'hover:spr-bg-[#FFF89E] active:spr-bg-[#FFF56B]': tone.value === 'pending' && !fill.value && isInteractive.value,
+        'spr-text-color-pending-base spr-background-color-pending-weak spr-border-color-pending-base':
+          tone.value === 'pending' && !fill.value,
+        'hover:spr-background-color-pending-weak-hover active:spr-background-color-pending-weak-pressed':
+          tone.value === 'pending' && !fill.value && isInteractive.value,
+
         // Information
-        'spr-text-blueberry-800 spr-background-color-information-weak spr-border-blueberry-800': tone.value === 'information' && !fill.value,
-        'hover:spr-bg-[#ADD6FF] active:spr-bg-[#7ABDFF]': tone.value === 'information' && !fill.value && isInteractive.value,
+        'spr-text-color-information-base spr-background-color-information-weak spr-border-color-information-base':
+          tone.value === 'information' && !fill.value,
+        'hover:spr-background-color-information-weak-hover active:spr-background-color-information-weak-pressed':
+          tone.value === 'information' && !fill.value && isInteractive.value,
+
         // Success
-        'spr-text-kangkong-800 spr-background-color-success-weak spr-border-kangkong-800': tone.value === 'success' && !fill.value,
-        'hover:spr-bg-[#AFF8C6] active:spr-bg-[#80F4A4]': tone.value === 'success' && !fill.value && isInteractive.value,
+        'spr-text-color-success-base spr-background-color-success-weak spr-border-color-success-base':
+          tone.value === 'success' && !fill.value,
+        'hover:spr-background-color-success-weak-hover active:spr-background-color-success-weak-pressed':
+          tone.value === 'success' && !fill.value && isInteractive.value,
+
         // Neutral
-        'spr-text-mushroom-800 spr-background-color-base spr-border-mushroom-800': tone.value === 'neutral' && !fill.value,
-        'hover:spr-bg-[#D3D9D9] active:spr-bg-[#B8C1C1]': tone.value === 'neutral' && !fill.value && isInteractive.value,
+        'spr-text-color-base spr-background-color-surface-adaptive spr-border-color-base':
+          tone.value === 'neutral' && !fill.value,
+
         // Danger
-        'spr-text-tomato-800 spr-background-color-danger-weak spr-border-tomato-800': tone.value === 'danger' && !fill.value,
-        'hover:spr-bg-[#FCB0B3] active:spr-bg-[#FB7F83]': tone.value === 'danger' && !fill.value && isInteractive.value,
+        'spr-text-color-danger-base spr-background-color-danger-weak spr-border-color-danger-base':
+          tone.value === 'danger' && !fill.value,
+        'hover:spr-background-color-danger-weak-hover active:spr-background-color-danger-weak-pressed':
+          tone.value === 'danger' && !fill.value && isInteractive.value,
+
         // Caution
-        'spr-text-carrot-800 spr-background-color-caution-weak spr-border-carrot-800': tone.value === 'caution' && !fill.value,
-        'hover:spr-bg-[#FFE79E] active:spr-bg-[#FFDA6B]': tone.value === 'caution' && !fill.value && isInteractive.value,
+        'spr-text-color-caution-base spr-background-color-caution-weak spr-border-color-caution-base':
+          tone.value === 'caution' && !fill.value,
+        'hover:spr-background-color-caution-weak-hover active:spr-background-color-caution-weak-pressed':
+          tone.value === 'caution' && !fill.value && isInteractive.value,
+
         // Plain
         'spr-text-color-strong spr-border-color-base spr-background-color': tone.value === 'plain' && !fill.value,
-        'hover:spr-bg-[#E6E6E6] active:spr-bg-[#CCCCCC]': tone.value === 'plain' && !fill.value && isInteractive.value,
+
+        // Shared hover/active for neutral and plain
+        'hover:spr-background-color-hover active:spr-background-color-pressed':
+          (tone.value === 'neutral' || tone.value === 'plain') && !fill.value && isInteractive.value,
+
         // #endregion - Styles for hollow (!fill) lozenge
 
         // #region - Styles for filled lozenge
         'spr-border-0': fill.value,
-        'spr-text-color-strong': fill.value && (tone.value === 'pending' || tone.value === 'neutral' || tone.value === 'caution' || tone.value === 'plain'),
-        'spr-text-color-inverted-strong': fill.value && (tone.value === 'information' || tone.value === 'success' || tone.value === 'danger'),
+        'spr-text-color-strong':
+          fill.value &&
+          (tone.value === 'pending' || tone.value === 'neutral' || tone.value === 'caution' || tone.value === 'plain'),
+        'spr-text-color-inverted-strong':
+          fill.value && (tone.value === 'information' || tone.value === 'success' || tone.value === 'danger'),
         // Pending
         'spr-background-color-pending-base': tone.value === 'pending' && fill.value,
-        'hover:spr-background-color-pending-hover active:spr-background-color-pending-pressed': tone.value === 'pending' && fill.value && isInteractive.value,
+        'hover:spr-background-color-pending-hover active:spr-background-color-pending-pressed':
+          tone.value === 'pending' && fill.value && isInteractive.value,
         // Information
         'spr-background-color-information-base': tone.value === 'information' && fill.value,
-        'hover:spr-background-color-information-hover active:spr-background-color-information-pressed': tone.value === 'information' && fill.value && isInteractive.value,
+        'hover:spr-background-color-information-hover active:spr-background-color-information-pressed':
+          tone.value === 'information' && fill.value && isInteractive.value,
         // Success
         'spr-background-color-success-base': tone.value === 'success' && fill.value,
-        'hover:spr-background-color-success-hover active:spr-background-color-success-pressed': tone.value === 'success' && fill.value && isInteractive.value,
+        'hover:spr-background-color-success-hover active:spr-background-color-success-pressed':
+          tone.value === 'success' && fill.value && isInteractive.value,
         // Neutral
-        'spr-background-color-base': tone.value === 'neutral' && fill.value,
-        'hover:spr-background-color-surface active:spr-background-color-pressed': tone.value === 'neutral' && fill.value && isInteractive.value,
+        'spr-background-color-surface-adaptive': tone.value === 'neutral' && fill.value,
         // Danger
         'spr-background-color-danger-base': tone.value === 'danger' && fill.value,
-        'hover:spr-background-color-danger-hover active:spr-background-color-danger-pressed': tone.value === 'danger' && fill.value && isInteractive.value,
+        'hover:spr-background-color-danger-hover active:spr-background-color-danger-pressed':
+          tone.value === 'danger' && fill.value && isInteractive.value,
         // Caution
         'spr-background-color-caution-base': tone.value === 'caution' && fill.value,
-        'hover:spr-background-color-caution-hover active:spr-background-color-caution-pressed': tone.value === 'caution' && fill.value && isInteractive.value,
+        'hover:spr-background-color-caution-hover active:spr-background-color-caution-pressed':
+          tone.value === 'caution' && fill.value && isInteractive.value,
+
         // Plain
         'spr-background-color': tone.value === 'plain' && fill.value,
-        'hover:spr-background-color-hover active:spr-background-color-pressed': tone.value === 'plain' && fill.value && isInteractive.value,
+
+        // Shared hover/active for neutral and plain (filled)
+        'hover:spr-background-color-surface active:spr-background-color-pressed':
+          (tone.value === 'neutral' || tone.value === 'plain') && fill.value && isInteractive.value,
         // #endregion - Styles for filled lozenge
       },
     );

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

@@ -144,12 +144,16 @@ export const selectLadderizedPropTypes = {
     type: Boolean,
     default: false,
   },
+  writableInputText: {
+    type: Boolean,
+    default: false,
+  }
 };
 
 export const selectLadderizedEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
-  'popper-state': Boolean,
+  'popper-state': () => true,
 };
 
 export type SelectLadderizedEmitFn = (event: string, ...args: unknown[]) => void;

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

@@ -37,10 +37,11 @@
             :helper-text="props.helperText"
             :helper-icon="props.helperIcon"
             :display-helper="props.displayHelper"
-            readonly
+            :readonly="!props.writableInputText"
             :active="props.active"
             :disabled="props.disabled"
             :error="props.error"
+            @blur="handleInputChange"
           >
             <template #icon>
               <div
@@ -121,5 +122,6 @@ const {
   inputText,
   handleSelectedLadderizedItem,
   handleClear,
+  handleInputChange,
 } = useSelectLadderized(props, emit as SelectLadderizedEmitFn);
 </script>

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

@@ -1,5 +1,5 @@
 import { ref, toRefs, computed, watch } from 'vue';
-import { useVModel, onClickOutside } from '@vueuse/core';
+import { useVModel, onClickOutside, watchDeep } from '@vueuse/core';
 
 import type { SelectLadderizedPropTypes } from './select-ladderized';
 
@@ -17,6 +17,7 @@ export const useSelectLadderized = (
     supportingLabelClasses: 'spr-body-sm-regular spr-text-color-supporting',
   }));
 
+  // Wrapper for input field
   const ladderizedSelectState = ref<HTMLDivElement | null>(null);
 
   // Popper Variables
@@ -31,6 +32,7 @@ export const useSelectLadderized = (
   // Input Variables
   const inputText = ref<string>('');
   const wasCleared = ref<boolean>(false);
+  const isCustomInput = ref<boolean>(false);
 
   const isLeafNode = (item: MenuListType): boolean => {
     return !item.sublevel || item.sublevel.length === 0;
@@ -57,6 +59,7 @@ export const useSelectLadderized = (
 
   const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
     wasCleared.value = false;
+    isCustomInput.value = false;
 
     // If the selectedItems is a single value (leaf from search), reconstruct the full path
     let fullPath: string[] | null = null;
@@ -157,15 +160,17 @@ export const useSelectLadderized = (
   };
 
   // Watch for changes in modelValue to update inputText
-  watch(
-    () => ladderizedSelectModel.value,
+  watchDeep(
+    ladderizedSelectModel,
     (newVal) => {
+      if (isCustomInput.value) return;
+
       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
@@ -194,6 +199,13 @@ export const useSelectLadderized = (
     emit('popper-state', newState);
   });
 
+  const handleInputChange = () => {
+    if (!props.writableInputText) return;
+    wasCleared.value = false;
+    isCustomInput.value = true;
+    ladderizedSelectModel.value = [inputText.value];
+  };
+
   // Close only when clicking completely outside both the popper and the trigger wrapper.
   onClickOutside(ladderizedSelectPopperRef, (event) => {
     const triggerWrapper = ladderizedSelectState.value;
@@ -216,5 +228,6 @@ export const useSelectLadderized = (
     inputText,
     handleSelectedLadderizedItem,
     handleClear,
+    handleInputChange,
   };
 };

package/src/components/table/table.vue

@@ -18,11 +18,11 @@
     </div>
     <div :class="getTableClasses.tableBackgroundClasses">
       <table
+        :key="tableKey"
         aria-describedby="describe"
         class="spr-h-full spr-w-full spr-table-fixed"
         cellspacing="0"
         cellpadding="0"
-        :key="tableKey"
       >
         <thead>
           <tr v-if="!(props.removeHeaderOnEmpty && tableData.length <= 0)">
@@ -240,7 +240,6 @@ const {
   dragOptions,
   tableKey,
   isDragging,
-  
 
   isRowSelected,
   sortData,
@@ -251,13 +250,13 @@ const {
   sortedDataItem,
   getSortIcon,
   getRowKey,
-  clearSelectedData
+  clearSelectedData,
 } = useTable(props, emit, slots);
 
 const { reinitializeSortable } = useDraggableTableRows(sortableTBody, dragOptions);
 
 defineExpose({
-  clearSelectedData
+  clearSelectedData,
 });
 
 watch(tableKey, () => {