design-system-next 2.19.0 → 2.19.4

package/src/components/date-picker/{reusable-calendar/reusable-calendar.vue → date-calendar-picker/date-calendar-picker.vue}

@@ -1,7 +1,7 @@
 <template>
   <div 
-    ref="reusableCalendarRef"
-    :class="reusableCalendarClasses"
+    ref="dateCalendarPickerRef"
+    :class="dateCalendarPickerClasses"
   >
     <div
       :class="[
@@ -132,13 +132,13 @@ import DatePickerCalendarTab from '../tabs/DatePickerCalendarTab.vue';
 import DatePickerMonthTab from '../tabs/DatePickerMonthTab.vue';
 import DatePickerYearTab from '../tabs/DatePickerYearTab.vue';
 
-import { useReusableCalendar } from './use-reusable-calendar';
-import { reusableCalendarEmitTypes, reusableCalendarPropTypes } from './reusable-calendar';
+import { useDateCalendarPicker } from './use-date-calendar-picker';
+import { dateCalendarPickerEmitTypes, dateCalendarPickerPropTypes } from './date-calendar-picker';
 
-const props = defineProps(reusableCalendarPropTypes);
-const emit = defineEmits(reusableCalendarEmitTypes);
+const props = defineProps(dateCalendarPickerPropTypes);
+const emit = defineEmits(dateCalendarPickerEmitTypes);
 
-const reusableCalendarRef = ref<HTMLElement | null>(null);
+const dateCalendarPickerRef = ref<HTMLElement | null>(null);
 
 // Use the composable for all logic
 const {
@@ -176,12 +176,12 @@ const {
   handleMonthTabMonthUpdateWrapper,
   handleYearTabYearUpdateWrapper,
   handleYearTabCurrentPageUpdateWrapper,
-} = useReusableCalendar(props, emit);
+} = useDateCalendarPicker(props, emit);
 
 // Compute CSS classes using classNames utility
-const reusableCalendarClasses = computed(() => {
+const dateCalendarPickerClasses = computed(() => {
   return classNames(
-    'reusable-calendar-container spr-bg-white spr-rounded-lg spr-shadow-lg spr-border spr-border-solid spr-border-mushroom-200 min-w-[320px]',
+    'date-calendar-picker-container spr-bg-white spr-rounded-lg spr-shadow-lg spr-border spr-border-solid spr-border-mushroom-200 min-w-[320px]',
     {
       'spr-disabled': props.disabled,
       'spr-readonly': props.readonly,

package/src/components/date-picker/{reusable-calendar/use-reusable-calendar.ts → date-calendar-picker/use-date-calendar-picker.ts}

@@ -3,11 +3,11 @@ import { toRefs } from 'vue';
 import dayjs from 'dayjs';
 
 import type { SetupContext } from 'vue';
-import type { ReusableCalendarEmitTypes, ReusableCalendarPropTypes } from './reusable-calendar';
+import type { DateCalendarPickerEmitTypes, DateCalendarPickerPropTypes } from './date-calendar-picker';
 
-export const useReusableCalendar = (
-  props: ReusableCalendarPropTypes, 
-  emit: SetupContext<ReusableCalendarEmitTypes>['emit']
+export const useDateCalendarPicker = (
+  props: DateCalendarPickerPropTypes, 
+  emit: SetupContext<DateCalendarPickerEmitTypes>['emit']
 ) => {
   // Extract reactive props
   const { 

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/list/list.ts

@@ -36,6 +36,10 @@ export const listPropTypes = {
     type: String,
     default: '',
   },
+  supportingDisplayText: {
+    type: String,
+    default: '',
+  },
   menuList: {
     type: Array as PropType<MenuListType[]>,
     required: true,
@@ -99,11 +103,16 @@ export const listPropTypes = {
     type: String,
     default: '',
   },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const listEmitTypes = {
   'update:modelValue': (value: MenuListType[]) => value,
   'update:searchValue': (value: string) => typeof value === 'string',
+  'get-single-selected-item': (item: MenuListType) => item,
 };
 
 export type ListPropTypes = ExtractPropTypes<typeof listPropTypes>;

package/src/components/list/list.vue

@@ -20,8 +20,14 @@
           :placeholder="props.searchableMenuPlaceholder"
           autocomplete="off"
         />
-        <span v-if="props.displayListItemSelected" class="spr-label-sm-medium spr-text-color-base spr-block">
-          {{ selectedItems.length }} Selected
+        <span
+          v-if="props.supportingDisplayText || props.displayListItemSelected"
+          class="spr-label-sm-medium spr-text-color-base spr-block"
+        >
+          <template v-if="props.supportingDisplayText">
+            {{ props.supportingDisplayText }}
+          </template>
+          <template v-else> {{ selectedItems.length }} Selected</template>
         </span>
       </div>
     </template>
@@ -47,7 +53,11 @@
               >
                 <template v-if="props.lozenge">
                   <div class="spr-flex spr-items-center spr-gap-1">
-                    <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+                    <spr-checkbox
+                      v-if="props.multiSelect"
+                      :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
+                      :checked="isItemSelected(item)"
+                    />
                     <spr-lozenge
                       v-if="props.lozenge"
                       :label="item.text || (item.lozengeProps?.label as string)"
@@ -61,27 +71,46 @@
                 </template>
                 <template v-else>
                   <div class="spr-flex spr-items-center spr-gap-1">
-                    <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+                    <spr-checkbox
+                      v-if="props.multiSelect"
+                      :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
+                      :checked="isItemSelected(item)"
+                    />
                     <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
-                      <span v-if="props.itemIcon || item.icon" :class="[item.iconColor, 'spr-mt-[2px]']">
+                      <span
+                        v-if="props.itemIcon || item.icon"
+                        :class="[
+                          item.iconColor,
+                          'spr-mt-[2px]',
+                          {
+                            'spr-text-color-disabled':
+                              item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                          },
+                        ]"
+                      >
                         <icon :icon="(props.itemIcon || item.icon) as string" width="20px" height="20px" />
                       </span>
                       <div
                         :class="[
                           'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
-                          { 'spr-text-color-disabled': item.disabled },
+                          {
+                            'spr-text-color-disabled':
+                              item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                          },
                         ]"
                       >
-                        <span class="spr-text-left spr-text-xs" style="word-break: break-word">
+                        <span class="spr-break-words spr-text-left spr-text-xs">
                           {{ item.text }}
                         </span>
                         <span
                           v-if="item.subtext"
                           :class="[
-                            'spr-body-xs-regular spr-text-color-base spr-text-left',
-                            { 'spr-text-color-disabled': item.disabled },
+                            'spr-body-xs-regular spr-text-color-base spr-break-words spr-text-left',
+                            {
+                              'spr-text-color-disabled':
+                                item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                            },
                           ]"
-                          style="word-break: break-word"
                         >
                           {{ item.subtext }}
                         </span>
@@ -140,7 +169,11 @@
           >
             <template v-if="props.lozenge">
               <div class="spr-flex spr-items-center spr-gap-1">
-                <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+                <spr-checkbox
+                  v-if="props.multiSelect"
+                  :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
+                  :checked="isItemSelected(item)"
+                />
                 <spr-lozenge
                   v-if="props.lozenge"
                   :label="item.text || (item.lozengeProps?.label as string)"
@@ -154,27 +187,46 @@
             </template>
             <template v-else>
               <div class="spr-flex spr-items-center spr-gap-1">
-                <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
+                <spr-checkbox
+                  v-if="props.multiSelect"
+                  :disabled="item.disabled || (props.disabledUnselectedItems && !isItemSelected(item))"
+                  :checked="isItemSelected(item)"
+                />
                 <div :class="[item.textColor, 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-3xs']">
-                  <span v-if="props.itemIcon || item.icon" :class="[item.iconColor, 'spr-mt-[2px]']">
+                  <span
+                    v-if="props.itemIcon || item.icon"
+                    :class="[
+                      item.iconColor,
+                      'spr-mt-[2px]',
+                      {
+                        'spr-text-color-disabled':
+                          item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                      },
+                    ]"
+                  >
                     <icon :icon="(props.itemIcon || item.icon) as string" width="20px" height="20px" />
                   </span>
                   <div
                     :class="[
                       'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
-                      { 'spr-text-color-disabled': item.disabled },
+                      {
+                        'spr-text-color-disabled':
+                          item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                      },
                     ]"
                   >
-                    <span class="spr-text-left spr-text-xs" style="word-break: break-word">
+                    <span class="spr-break-words spr-text-left spr-text-xs">
                       {{ item.text }}
                     </span>
                     <span
                       v-if="item.subtext"
                       :class="[
-                        'spr-body-xs-regular spr-text-color-base spr-text-left',
-                        { 'spr-text-color-disabled': item.disabled },
+                        'spr-body-xs-regular spr-text-color-base spr-break-words spr-text-left',
+                        {
+                          'spr-text-color-disabled':
+                            item.disabled || (props.disabledUnselectedItems && !isItemSelected(item)),
+                        },
                       ]"
-                      style="word-break: break-word"
                     >
                       {{ item.subtext }}
                     </span>

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

@@ -14,8 +14,16 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const selectedItems = useVModel(props, 'modelValue', emit);
   const searchString = useVModel(props, 'searchValue', emit);
 
-  const { menuList, menuLevel, groupItemsBy, multiSelect, preSelectedItems, disabledLocalSearch, noCheck } =
-    toRefs(props);
+  const {
+    menuList,
+    menuLevel,
+    groupItemsBy,
+    multiSelect,
+    preSelectedItems,
+    disabledLocalSearch,
+    noCheck,
+    disabledUnselectedItems,
+  } = toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
     const listItemClasses = classNames(
@@ -161,6 +169,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
     if (previousSelected) {
       handleSelectedItem(item);
+
       return true;
     }
 
@@ -341,10 +350,10 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   };
 
   const getListItemClasses = (item: MenuListType) => ({
-    [listClasses.value.listItemClasses]: !item.disabled,
+    [listClasses.value.listItemClasses]: !item.disabled && !(disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-background-color-single-active': isItemSelected(item) && !item.disabled && !noCheck.value,
-    'hover:spr-cursor-not-allowed spr-flex spr-cursor-pointer spr-items-center spr-gap-1.5 spr-rounded-lg':
-      item.disabled,
+    'spr-cursor-not-allowed spr-flex spr-items-center spr-gap-1.5 spr-rounded-lg':
+      item.disabled || (disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-p-size-spacing-3xs': !props.lozenge,
     'spr-py-size-spacing-3xs spr-px-size-spacing-4xs': props.lozenge,
   });
@@ -420,6 +429,8 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const handleSelectedItem = (item: MenuListType) => {
     if (item.disabled) return;
 
+    if (disabledUnselectedItems.value && !isItemSelected(item)) return;
+
     if (multiSelect.value) {
       // For multi-select, check if item is already selected
       const index = selectedItems.value.findIndex((selectedItem: MenuListType) => {
@@ -488,8 +499,11 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     } else {
       // For single-select, simply replace the selection
       selectedItems.value = [item];
+
       if (item.onClickFn) item.onClickFn();
     }
+
+    emit('get-single-selected-item', item);
   };
   // #endregion - Helper Methods
 
@@ -567,6 +581,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
   onMounted(() => {
     searchString.value = searchText.value;
+
     setMenuList();
     setPreSelectedItems();
   });

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/select/select-multiple/select-multiple.ts

@@ -123,6 +123,14 @@ export const multiSelectPropTypes = {
     type: String,
     default: '',
   },
+  supportingDisplayText: {
+    type: String,
+    default: '',
+  },
+  persistentDisplayText: {
+    type: Boolean,
+    default: false,
+  },
   displaySelectedCountOnly: {
     type: Boolean,
     default: false,
@@ -183,14 +191,22 @@ export const multiSelectPropTypes = {
     type: String,
     default: '',
   },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const multiSelectEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
   'update:searchValue': (value: string) => typeof value === 'string',
+  'search-string': (value: string) => typeof value === 'string',
   'infinite-scroll-trigger': Boolean,
   'popper-state': Boolean,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'get-selected-options': (_value: unknown) => true,
+  'get-single-selected-item': (item: MenuListType) => item,
 };
 
 export type MultiSelectPropTypes = ExtractPropTypes<typeof multiSelectPropTypes>;

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

@@ -162,10 +162,13 @@
             :loading="props.loading"
             :item-icon="props.itemIcon"
             :lozenge="props.lozenge"
+            :supporting-display-text="props.supportingDisplayText"
             :display-list-item-selected="props.displayListItemSelected"
             :disabled-local-search="props.disabledLocalSearch"
+            :disabled-unselected-items="props.disabledUnselectedItems"
             multi-select
             @update:model-value="handleMultiSelectedItem"
+            @get-single-selected-item="emit('get-single-selected-item', $event)"
           />
         </div>
       </template>