design-system-next 2.26.2 → 2.26.6

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

@@ -1,60 +1,60 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { MenuListType } from '../list';
-
-export const listItemPropTypes = {
-  item: {
-    type: Object as PropType<MenuListType>,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean,
-    required: true,
-  },
-  classes: {
-    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
-    required: true,
-  },
-  multiSelect: {
-    type: Boolean,
-    default: false,
-  },
-  lozenge: {
-    type: Boolean,
-    default: false,
-  },
-  ladderized: {
-    type: Boolean,
-    default: false,
-  },
-  noCheck: {
-    type: Boolean,
-    default: false,
-  },
-  itemIcon: {
-    type: String,
-    default: '',
-  },
-  itemIconTone: {
-    type: String,
-    default: 'plain',
-  },
-  itemIconFill: {
-    type: Boolean,
-    default: false,
-  },
-  disabledUnselectedItems: {
-    type: Boolean,
-    default: false,
-  },
-  radioList: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const listItemEmitTypes = {
-  select: () => true,
-};
-
-export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
-export type ListItemEmitTypes = typeof listItemEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list';
+
+export const listItemPropTypes = {
+  item: {
+    type: Object as PropType<MenuListType>,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    required: true,
+  },
+  classes: {
+    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
+    required: true,
+  },
+  multiSelect: {
+    type: Boolean,
+    default: false,
+  },
+  lozenge: {
+    type: Boolean,
+    default: false,
+  },
+  ladderized: {
+    type: Boolean,
+    default: false,
+  },
+  noCheck: {
+    type: Boolean,
+    default: false,
+  },
+  itemIcon: {
+    type: String,
+    default: '',
+  },
+  itemIconTone: {
+    type: String,
+    default: 'plain',
+  },
+  itemIconFill: {
+    type: Boolean,
+    default: false,
+  },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
+  radioList: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const listItemEmitTypes = {
+  select: () => true,
+};
+
+export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
+export type ListItemEmitTypes = typeof listItemEmitTypes;

package/src/components/list/list.ts

@@ -125,8 +125,12 @@ export const listPropTypes = {
   },
   allowDeselect: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
+  allowSelectAll: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 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>
 
@@ -103,6 +127,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 +144,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(() => ({
@@ -375,7 +383,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const getListItemClasses = (item: MenuListType) => ({
     [listClasses.value.listItemClasses]: !item.disabled && !(disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-background-color-single-active': isItemSelected(item) && !item.disabled && !noCheck.value,
-    'spr-cursor-not-allowed spr-flex spr-items-center spr-gap-1.5 spr-rounded-lg':
+    'spr-cursor-not-allowed spr-flex spr-items-center spr-justify-between 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,
@@ -527,13 +535,13 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
       } else {
         handleSingleSelect(item);
       }
-    }    
+    }
   };
 
   const handleDeselect = (item: MenuListType) => {
     if (selectedItems.value.length === 0 || !isItemSelected(item)) {
-      selectedItems.value = [item];  
-      emit('get-single-selected-item', item);    
+      selectedItems.value = [item];
+      emit('get-single-selected-item', item);
     } else {
       selectedItems.value = [];
       emit('get-single-deselected-item', item);
@@ -542,8 +550,8 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
   const handleSingleSelect = (item: MenuListType) => {
     selectedItems.value = [item];
-    if (item.onClickFn) item.onClickFn();   
-    emit('get-single-selected-item', item); 
+    if (item.onClickFn) item.onClickFn();
+    emit('get-single-selected-item', item);
   };
   // #endregion - Helper Methods
 
@@ -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/{radio-grouped → radio/radio-grouped}/radio-grouped.ts

@@ -1,65 +1,74 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export interface RadioOption {
-  text: string;
-  value: string | number | boolean;
-  disabled?: boolean;
-}
-
-export const radioGroupedPropTypes = {
-  id: {
-    type: String,
-    required: true,
-  },
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  options: {
-    type: Array as PropType<RadioOption[]>,
-    required: true,
-    default: () => [],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  description: {
-    type: String,
-  },
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
-  displayHelper: {
-    type: Boolean,
-    default: false,
-  },
-  helperIcon: {
-    type: String,
-    default: null,
-  },
-  helperText: {
-    type: String,
-    default: '',
-  },
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  horizontalAlign: {
-    type: String as PropType<'left' | 'center' | 'right'>,
-    default: 'left',
-  },
-};
-
-export const radioGroupedEmitTypes = ['update:modelValue'];
-
-export type RadioGroupedPropTypes = ExtractPropTypes<typeof radioGroupedPropTypes>;
-
-export type RadioGroupedEmitTypes = typeof radioGroupedEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export interface RadioOption {
+  text: string;
+  value: string | number | boolean;
+  disabled?: boolean;
+  description?: string;
+}
+
+export const radioGroupedPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  options: {
+    type: Array as PropType<RadioOption[]>,
+    required: true,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  description: {
+    type: String,
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  horizontalAlign: {
+    type: String as PropType<'left' | 'center' | 'right'>,
+    default: 'left',
+  },
+  choiceBox: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const radioGroupedEmitTypes = ['update:modelValue'];
+
+export type RadioGroupedPropTypes = ExtractPropTypes<typeof radioGroupedPropTypes>;
+
+export type RadioGroupedEmitTypes = typeof radioGroupedEmitTypes;

package/src/components/{radio-grouped → radio/radio-grouped}/radio-grouped.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['spr-relative']">
+  <div :class="['spr-relative', { 'spr-w-full': props.choiceBox || props.fullWidth }]">
     <div :class="radioGroupedClasses.containerClasses">
       <spr-radio
         v-for="(option, index) in renderOptions()"
@@ -9,6 +9,9 @@
         :name="props.name"
         :value="option.value"
         :disabled="isOptionDisabled(option)"
+        :choice-box="props.choiceBox"
+        :full-width="props.fullWidth || props.choiceBox"
+        :description="option.description"
       >
         {{ option.text }}
       </spr-radio>

package/src/components/{radio-grouped → radio/radio-grouped}/use-radio-grouped.ts

@@ -1,62 +1,63 @@
-import { toRefs, computed, ComputedRef } from 'vue';
-import { useVModel } from '@vueuse/core';
-
-import classNames from 'classnames';
-
-import type { SetupContext } from 'vue';
-import type { RadioGroupedPropTypes, RadioGroupedEmitTypes, RadioOption } from './radio-grouped';
-
-interface RadioGroupedClasses {
-  containerClasses: string;
-  helperClasses: string;
-}
-
-export const useRadioGrouped = (props: RadioGroupedPropTypes, emit: SetupContext<RadioGroupedEmitTypes>['emit']) => {
-  const { disabled, horizontalAlign, displayHelper, error } = toRefs(props);
-
-  const radioGroupedClasses: ComputedRef<RadioGroupedClasses> = computed(() => {
-    const alignmentMap = {
-      left: 'spr-justify-start',
-      center: 'spr-justify-center',
-      right: 'spr-justify-end',
-    };
-
-    const containerClasses = classNames('spr-flex spr-flex-col spr-gap-2', {
-      [alignmentMap[horizontalAlign.value as keyof typeof alignmentMap]]: true,
-    });
-
-    const helperClasses = classNames(
-      'spr-flex spr-items-center spr-gap-1 spr-mt-size-spacing-2xs spr-body-sm-regular',
-      {
-        'spr-text-mushroom-600': !error.value,
-        'spr-text-color-danger-base': error.value,
-      },
-    );
-
-    return {
-      containerClasses,
-      helperClasses,
-    };
-  });
-
-  const proxyValue = useVModel(props, 'modelValue', emit);
-
-  const renderOptions = (): RadioOption[] => {
-    return props.options || [];
-  };
-
-  const isOptionDisabled = (option: RadioOption): boolean => {
-    return disabled.value || (option.disabled ?? false);
-  };
-
-  return {
-    radioGroupedClasses,
-    proxyValue,
-    renderOptions,
-    isOptionDisabled,
-    disabled,
-    displayHelper,
-    horizontalAlign,
-    error,
-  };
-};
+import { toRefs, computed, ComputedRef } from 'vue';
+import { useVModel } from '@vueuse/core';
+
+import classNames from 'classnames';
+
+import type { SetupContext } from 'vue';
+import type { RadioGroupedPropTypes, RadioGroupedEmitTypes, RadioOption } from './radio-grouped';
+
+interface RadioGroupedClasses {
+  containerClasses: string;
+  helperClasses: string;
+}
+
+export const useRadioGrouped = (props: RadioGroupedPropTypes, emit: SetupContext<RadioGroupedEmitTypes>['emit']) => {
+  const { disabled, horizontalAlign, displayHelper, error, choiceBox } = toRefs(props);
+
+  const radioGroupedClasses: ComputedRef<RadioGroupedClasses> = computed(() => {
+    const alignmentMap = {
+      left: 'spr-justify-start',
+      center: 'spr-justify-center',
+      right: 'spr-justify-end',
+    };
+
+    const containerClasses = classNames('spr-flex spr-flex-col spr-gap-2', {
+      [alignmentMap[horizontalAlign.value as keyof typeof alignmentMap]]: true,
+    });
+
+    const helperClasses = classNames(
+      'spr-flex spr-items-center spr-gap-1 spr-mt-size-spacing-2xs spr-body-sm-regular',
+      {
+        'spr-text-mushroom-600': !error.value,
+        'spr-text-color-danger-base': error.value,
+      },
+    );
+
+    return {
+      containerClasses,
+      helperClasses,
+    };
+  });
+
+  const proxyValue = useVModel(props, 'modelValue', emit);
+
+  const renderOptions = (): RadioOption[] => {
+    return props.options || [];
+  };
+
+  const isOptionDisabled = (option: RadioOption): boolean => {
+    return disabled.value || (option.disabled ?? false);
+  };
+
+  return {
+    radioGroupedClasses,
+    proxyValue,
+    renderOptions,
+    isOptionDisabled,
+    disabled,
+    displayHelper,
+    horizontalAlign,
+    error,
+    choiceBox,
+  };
+};

package/src/components/radio/radio.ts

@@ -33,6 +33,10 @@ export const radioPropTypes = {
     type: Boolean,
     default: false,
   },
+  choiceBox: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const radioEmitTypes = ['update:modelValue'];

package/src/components/radio/radio.vue

@@ -1,5 +1,10 @@
 <template>
-  <div :class="['spr-relative', { 'spr-w-full': props.fullWidth }]">
+  <div
+    :class="radioClasses.baseClasses"
+    @click="radioRef?.click()"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
     <input
       :id="props.id"
       ref="radioRef"
@@ -8,7 +13,7 @@
       :name="props.name"
       :value="props.value"
       :disabled="props.disabled"
-      :class="radioClasses.baseClasses"
+      :class="radioClasses.baseInputClasses"
     />
     <label
       ref="radioRef"
@@ -25,8 +30,9 @@
             'spr-text-xs spr-font-normal spr-leading-4 spr-text-mushroom-600',
             { 'spr-text-color-disabled': props.disabled },
           ]"
-          >{{ props.description }}</span
         >
+          {{ props.description }}
+        </span>
       </div>
     </label>
   </div>
@@ -42,7 +48,7 @@ const props = defineProps(radioPropTypes);
 const emit = defineEmits(radioEmitTypes);
 const slots = useSlots();
 
-const { proxyValue, radioRef, radioClasses } = useRadioButton(props, emit, slots);
+const { proxyValue, radioRef, radioClasses, isHovered } = useRadioButton(props, emit, slots);
 </script>
 
 <style scoped>