design-system-next 2.26.3 → 2.26.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.26.3",
+  "version": "2.26.7",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "types": "./dist/design-system-next.es.d.ts",
@@ -46,7 +46,6 @@
     "docs:preview": "vitepress preview docs",
     "test:ui": "npx playwright test --ui --config=playwright-ct.config.ts",
     "test:components": "npx playwright test --config=playwright-ct.config.ts --reporter=line",
-    "test:component": "npx playwright test --config=playwright-ct.config.ts --reporter=line",
     "clean": "rm -rf node_modules dist coverage package-lock.json && npm install"
   },
   "dependencies": {

package/src/components/calendar/calendar.vue

@@ -15,7 +15,10 @@
             <div class="spr-heading-xs">{{ weekRangeDisplay }}</div>
           </div>
 
-          <spr-button id="calendar-today" variant="secondary" size="large" @click="goToToday"> Today </spr-button>
+          <div class="spr-flex spr-items-center spr-justify-center spr-gap-size-spacing-3xs">
+            <spr-button id="calendar-today" variant="secondary" size="large" @click="goToToday"> Today </spr-button>
+            <slot name="headerActions" />
+          </div>
         </div>
         <!-- Filters -->
         <slot name="filter" />
@@ -159,9 +162,20 @@
                       </div>
                     </section>
 
+                    <section>
+                      <slot
+                        name="fixedCell"
+                        :details="{
+                          employeeId: employee.id,
+                          date: formatDate(date, dateFormat),
+                          shift: employee.schedule[formatDate(date, dateFormat)],
+                        }"
+                      />
+                    </section>
+
                     <section v-if="showCustomSlot(index, employee.id)">
                       <slot
-                        name="cell"
+                        name="hoverCell"
                         :details="{
                           employeeId: employee.id,
                           date: formatDate(date, dateFormat),

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

@@ -119,7 +119,10 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
 
   const showCustomSlot = (index: number, employeeId: number) => {
     return (
-      state.hoveredCell.value === index && state.isHover.value && state.employeeId.value === employeeId && slots.cell
+      state.hoveredCell.value === index &&
+      state.isHover.value &&
+      state.employeeId.value === employeeId &&
+      slots.hoverCell
     );
   };
 

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

@@ -1,6 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import type { MenuListType } from '../list';
-
 export const listItemPropTypes = {
   item: {
     type: Object as PropType<MenuListType>,
@@ -50,6 +49,14 @@ export const listItemPropTypes = {
     type: Boolean,
     default: false,
   },
+  avatarVariant: {
+    type: String,
+    default: '',
+  },
+  avatarSource: {
+    type: String,
+    default: '',
+  },
 };
 
 export const listItemEmitTypes = {

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

@@ -46,6 +46,16 @@
           >
             <Icon class="spr-text-xl" :icon="iconName" />
           </span>
+
+          <span v-if="hasAvatar">
+            <spr-avatar
+              size="sm"
+              :initial="props.avatarSource || listItem.text"
+              :variant="props.avatarVariant"
+              :src="props.avatarSource"
+            />
+          </span>
+
           <div
             :class="[
               'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
@@ -106,6 +116,7 @@ import { Icon } from '@iconify/vue';
 import SprCheckbox from '@/components/checkbox/checkbox.vue';
 import SprRadio from '@/components/radio/radio.vue';
 import SprLozenge from '@/components/lozenge/lozenge.vue';
+import SprAvatar from '@/components/avatar/avatar.vue';
 
 import { LOZENGE_TONE } from '@/components/lozenge/lozenge';
 
@@ -115,5 +126,5 @@ import { useListItem } from './use-list-item';
 const props = defineProps(listItemPropTypes);
 const emit = defineEmits(listItemEmitTypes);
 
-const { listItem, hasIcon, iconName, iconClasses, hasSublevels, showLozengeMode } = useListItem(props, emit);
+const { listItem, hasIcon, iconName, iconClasses, hasSublevels, showLozengeMode, hasAvatar } = useListItem(props, emit);
 </script>

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

@@ -14,13 +14,16 @@ export function useListItem(
   iconClasses: ComputedRef<string>;
   hasSublevels: ComputedRef<boolean>;
   showLozengeMode: ComputedRef<boolean>;
+  hasAvatar: ComputedRef<boolean>;
 } {
-  const { item, itemIcon, itemIconTone, itemIconFill, lozenge } = toRefs(props);
+  const { item, itemIcon, itemIconTone, itemIconFill, lozenge, avatarVariant } = toRefs(props);
 
   const listItem = computed(() => item?.value);
 
   const hasIcon = computed(() => !!(itemIcon.value || item?.value!.icon));
 
+  const hasAvatar = computed(() => !!(avatarVariant.value && !hasIcon.value));
+
   const iconName = computed(() => itemIcon.value || item?.value!.icon || '');
 
   const iconClasses = computed(() => {
@@ -64,6 +67,7 @@ export function useListItem(
   return {
     listItem,
     hasIcon,
+    hasAvatar,
     iconName,
     iconClasses,
     hasSublevels,

package/src/components/list/list.ts

@@ -125,8 +125,20 @@ export const listPropTypes = {
   },
   allowDeselect: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
+  allowSelectAll: {
+    type: Boolean,
+    default: false,
+  },
+  avatarVariant: {
+    type: String,
+    default: '',
+  },
+  avatarSource: {
+    type: String,
+    default: '',
+  },
 };
 
 export const listEmitTypes = {

package/src/components/list/list.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="spr-font-main">
     <!-- Header Section -->
-    <template v-if="props.searchableMenu || props.displayListItemSelected">
+    <template
+      v-if="props.searchableMenu || props.displayListItemSelected || (props.multiSelect && props.allowSelectAll)"
+    >
       <div :class="listClasses.headerClasses" :style="stickyOffsetStyle">
         <spr-input-search
           v-if="props.searchableMenu"
@@ -10,12 +12,34 @@
           autocomplete="off"
           @keyup="handleSearchKeyup"
         />
-        <span
-          v-if="props.supportingDisplayText || props.displayListItemSelected"
-          class="spr-label-sm-medium spr-text-color-base spr-block"
-        >
-          {{ props.supportingDisplayText || `${selectedItems.length} Selected` }}
-        </span>
+        <slot name="list-controls">
+          <div
+            v-if="
+              props.supportingDisplayText ||
+              props.displayListItemSelected ||
+              (props.multiSelect && props.allowSelectAll)
+            "
+            :class="listClasses.listControlsClasses"
+          >
+            <span
+              v-if="props.supportingDisplayText || props.displayListItemSelected"
+              class="spr-label-sm-medium spr-text-color-base spr-block"
+            >
+              {{ props.supportingDisplayText || `${selectedItems.length} Selected` }}
+            </span>
+
+            <spr-button
+              v-if="props.multiSelect && props.allowSelectAll"
+              id="select-all-button"
+              :class="{ 'spr-ml-auto': true }"
+              variant="secondary"
+              size="small"
+              @click="handleSelectAll"
+            >
+              {{ hasSelectedItems ? 'Unselect All' : 'Select All' }}
+            </spr-button>
+          </div>
+        </slot>
       </div>
     </template>
 
@@ -46,6 +70,8 @@
                 :item-icon-fill="props.itemIconFill"
                 :disabled-unselected-items="props.disabledUnselectedItems"
                 :radio-list="props.radioList"
+                :avatar-variant="props.avatarVariant"
+                :avatar-source="props.avatarSource"
                 @select="handleSelectedItem(item)"
               />
               <div v-if="props.infiniteScrollLoader" class="spr-flex spr-items-center spr-justify-center spr-p-2">
@@ -74,6 +100,8 @@
             :item-icon-fill="props.itemIconFill"
             :disabled-unselected-items="props.disabledUnselectedItems"
             :radio-list="props.radioList"
+            :avatar-variant="props.avatarVariant"
+            :avatar-source="props.avatarSource"
             @select="handleSelectedItem(item)"
           />
           <div v-if="props.infiniteScrollLoader" class="spr-flex spr-items-center spr-justify-center spr-p-2">
@@ -103,6 +131,7 @@
 import { Icon } from '@iconify/vue';
 
 import SprInputSearch from '@/components/input/input-search/input-search.vue';
+import SprButton from '@/components/button/button.vue';
 import ListItem from './list-item/list-item.vue';
 
 import { listPropTypes, listEmitTypes } from './list';
@@ -119,9 +148,11 @@ const {
   localizedMenuList,
   groupedMenuList,
   hasGroupedItems,
+  hasSelectedItems,
   isItemSelected,
   getListItemClasses,
   handleSelectedItem,
+  handleSelectAll,
   handleSearchKeyup,
 } = useList(props, emit);
 </script>

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

@@ -9,6 +9,8 @@ import type { ListPropTypes, ListEmitTypes, MenuListType, GroupedMenuListType }
 interface ListClasses {
   headerClasses: string;
   listItemClasses: string;
+  borderClasses: string;
+  listControlsClasses: string;
 }
 
 export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>['emit']) => {
@@ -23,13 +25,17 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     disabledUnselectedItems,
     stickySearchOffset,
     allowDeselect,
+    allowSelectAll,
   } = toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
+    const borderClasses = classNames('spr-border-color-weak spr-border spr-border-solid');
+
     const headerClasses = classNames(
       'spr-sticky spr-z-20',
       'spr-grid spr-gap-3 spr-bg-white-50 spr-px-size-spacing-3xs spr-py-size-spacing-2xs',
-      'spr-border-color-weak spr-border spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid',
+      borderClasses,
+      'spr-border-x-0 spr-border-b spr-border-t-0',
     );
 
     const listItemClasses = classNames(
@@ -39,7 +45,9 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
       'active:spr-background-color-single-active active:spr-scale-[.98]',
     );
 
-    return { headerClasses, listItemClasses };
+    const listControlsClasses = classNames('spr-flex spr-w-full spr-items-center');
+
+    return { headerClasses, listItemClasses, borderClasses, listControlsClasses };
   });
 
   const stickyOffsetStyle = computed(() => ({
@@ -640,6 +648,36 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     event.preventDefault();
   };
 
+  // Computed property to check if any items are selected
+  const hasSelectedItems = computed(() => {
+    if (!multiSelect.value || !allowSelectAll.value) return false;
+    return selectedItems.value.length > 0;
+  });
+
+  // Function to handle select/unselect all items
+  const handleSelectAll = () => {
+    if (!multiSelect.value || !allowSelectAll.value) return;
+
+    const currentItems = hasGroupedItems.value
+      ? groupedMenuList.value.flatMap((group) => group.items)
+      : localizedMenuList.value;
+
+    // Filter out disabled items
+    const enabledItems = currentItems.filter((item) => !item.disabled);
+
+    if (hasSelectedItems.value) {
+      // If any items are selected, unselect all items completely
+      selectedItems.value = [];
+      // Also clear any preserved or API selected items
+      apiSelectedList.value = [];
+      emit('update:modelValue', []);
+    } else {
+      // If no items are selected, select all enabled items
+      selectedItems.value = [...enabledItems];
+      emit('update:modelValue', [...enabledItems]);
+    }
+  };
+
   return {
     listClasses,
     stickyOffsetStyle,
@@ -650,10 +688,12 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     apiSelectedList,
     isParentMenu,
     hasGroupedItems,
+    hasSelectedItems,
     isItemSelected,
     getListItemClasses,
     handleSearch,
     handleSelectedItem,
+    handleSelectAll,
     trackNewlySelectedItems,
     handleSearchKeyup,
   };

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

@@ -209,6 +209,18 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
+  allowSelectAll: {
+    type: Boolean,
+    default: false,
+  },
+  avatarVariant: {
+    type: String,
+    default: '',
+  },
+  avatarSource: {
+    type: String,
+    default: '',
+  },
 };
 
 export const multiSelectEmitTypes = {

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

@@ -165,6 +165,9 @@
             :display-list-item-selected="props.displayListItemSelected"
             :disabled-local-search="props.disabledLocalSearch"
             :disabled-unselected-items="props.disabledUnselectedItems"
+            :allow-select-all="props.allowSelectAll"
+            :avatar-variant="props.avatarVariant"
+            :avatar-source="props.avatarSource"
             multi-select
             @update:model-value="handleMultiSelectedItem"
             @get-single-selected-item="emit('get-single-selected-item', $event)"

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

@@ -268,8 +268,9 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     }
 
     // Always keep multiSelectedListItems in sync with selected values
+    const seenValues = new Set<string>();
     multiSelectedListItems.value = multiSelectOptions.value.filter((item) => {
-      return values.some((val) => {
+      const isMatch = values.some((val) => {
         let itemVal = item.value;
         let valToCompare = val;
 
@@ -292,6 +293,16 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
         }
         return itemVal == valToCompare;
       });
+
+      if (isMatch) {
+        const itemKey = typeof item.value === 'object' ? JSON.stringify(item.value) : String(item.value);
+        if (seenValues.has(itemKey)) {
+          return false; // Skip duplicates
+        }
+        seenValues.add(itemKey);
+      }
+
+      return isMatch;
     });
 
     // Determine input text based on whether count-only mode is enabled