design-system-next 2.23.1 → 2.24.2

package/src/App.vue

@@ -1,3 +1,91 @@
 <template>
-  <div>Test Component Here</div>
+  <div class="spr-h-[600px] spr-w-[75%]">
+    <spr-table
+      action
+      :headers="headers"
+      :data-table="data" 
+      is-multi-select 
+      :selected-key-id="'name'" 
+      show-header-filter
+      @on-apply-filter="(filters) => console.log(filters)"
+    />
+  </div>
 </template>
+
+<script setup lang="ts">
+import SprTable from './components/table/table.vue';
+import { ref } from 'vue';
+import { Header } from './components/table/table';
+
+const headers = ref<Header[]>([
+  { field: 'name', name: 'Role Name', sort: false, hasAvatar: true, hasSubtext: true, width: '250px', 
+    filterList: [
+      { text: 'Role 11', value: 'role11' },
+      { text: 'Role 12', value: 'role12' },
+      { text: 'Role 13', value: 'role13' },
+      { text: 'Role 14', value: 'role14' },
+      { text: 'Role 15', value: 'role15' }
+    ] 
+  },
+  { field: 'firstUpdate', name: 'Date', sort: false, hasAvatar: false, hasSubtext: false, width: '150px',
+    filterList: [
+      { text: 'Jan 10, 2025', value: 'jan10' },
+      { text: 'Jan 11, 2025', value: 'jan11' },
+      { text: 'Jan 12, 2025', value: 'jan12' },
+      { text: 'Jan 13, 2025', value: 'jan13' },
+      { text: 'Jan 14, 2025', value: 'jan14' }
+    ]
+  },
+  { field: 'lastUpdate', name: 'Date', sort: false, hasAvatar: false, hasSubtext: false, width: '150px',
+    filterList: [
+      { text: 'Dec 10, 2025', value: 'dec10' },
+      { text: 'Dec 11, 2025', value: 'dec11' },
+      { text: 'Dec 12, 2025', value: 'dec12' },
+      { text: 'Dec 13, 2025', value: 'dec13' },
+      { text: 'Dec 14, 2025', value: 'dec14' }
+    ]
+  },
+  { field: 'note', name: 'Note', sort: false, hasAvatar: false, hasSubtext: true, width: '300px',
+    filterList: [
+      { text: 'Note 11', value: 'note11' },
+      { text: 'Note 12', value: 'note12' },
+      { text: 'Note 13', value: 'note13' },
+      { text: 'Note 14', value: 'note14' },
+      { text: 'Note 15', value: 'note15' }
+    ]
+  },
+  { field: 'status', name: 'Status', sort: false, hasAvatar: false, hasSubtext: true, width: '200px',
+    filterList: [
+      { text: 'Success', value: 'success' },
+      { text: 'Pending', value: 'pending' },
+      { text: 'Error', value: 'error' }
+    ]
+  },
+]);
+
+const data = ref([
+  // 40 more elements
+  ...Array.from({ length: 50 }, (_, i) => ({
+    name: {
+      title: `Role ${i + 11}`,
+      subtext: `Subtext for role ${i + 11}`,
+    },
+    firstUpdate: {
+      title: `Jan ${10 + i}, 2025`,
+      subtext: `Subtext for date ${10 + i}`,
+    },
+    lastUpdate: {
+      title: `Dec ${10 + i}, 2025`,
+      subtext: `Subtext for date ${10 + i}`,
+    },
+    note: {
+      title: `Note  ${i + 11}`,
+      subtext: `Subtext for role ${i + 11}`,
+    },
+    status: {
+      title: ['Success', 'Pending', 'Error'][(i + 1) % 3],
+      subtext: `Status subtext ${i + 11}`,
+    },
+  })),
+]);
+</script>

package/src/components/dropdown/dropdown.ts

@@ -141,13 +141,17 @@ export const dropdownPropTypes = {
     type: Boolean,
     default: false,
   },
+  noPadding: {
+    type: Boolean,
+    default: false,
+  }
 };
 
 export const dropdownEmitTypes = {
-  'infinite-scroll-trigger': Boolean,
+  'infinite-scroll-trigger': (value: boolean) => typeof value === 'boolean',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true, // Accept any type of value
-  'popper-state': Boolean,
+  'popper-state': (state: boolean) => typeof state === 'boolean',
 };
 
 export type DropdownPropTypes = ExtractPropTypes<typeof dropdownPropTypes>;

package/src/components/dropdown/dropdown.vue

@@ -32,7 +32,7 @@
     <template #popper>
       <template v-if="$slots.popper">
         <div
-          class="spr-overflow-y-auto spr-overflow-x-hidden spr-p-4"
+          :class="['spr-overflow-y-auto spr-overflow-x-hidden', !props.noPadding && 'spr-p-4']"
           :style="{
             width: props.popperInnerWidth,
           }"
@@ -111,5 +111,12 @@ const {
   dropdownValue,
   removeCurrentLevelInBackLabel,
   isLadderizedSearch,
+  showDropdown,
+  hideDropdown,
 } = useDropdown(props, emit);
+
+defineExpose({
+  showDropdown,
+  hideDropdown,
+});
 </script>

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

@@ -82,6 +82,17 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
   const dropdownPopperState = ref<boolean>(false);
   const isDropdownPopperDisabled = computed(() => disabled.value);
 
+  // Exposed methods to show/hide dropdown. This is for custom trigger handling for custom dropdown.
+  // To use these methods, set :triggers="[]" on the SprDropdown component to disable default triggers. (reference: https://floating-vue.starpad.dev/api/#shown)
+  /* #region - Exposed Methods */
+  const showDropdown = () => {
+    dropdownPopperState.value = true;
+  };
+  const hideDropdown = () => {
+    dropdownPopperState.value = false;
+  };
+  /* #endregion - Exposed Methods */
+
   const isLadderizedSearch = computed(
     () => ladderized.value && searchString.value !== '' && normalizedValue.value.length === 0,
   );
@@ -503,5 +514,7 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
     dropdownValue: compatPreSelectedItems, // Use compatible format for lists
     removeCurrentLevelInBackLabel,
     isLadderizedSearch,
+    showDropdown,
+    hideDropdown,
   };
 };

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/radio-grouped/radio-grouped.ts

@@ -1,65 +1,65 @@
-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;
+}
+
+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;

package/src/components/radio-grouped/use-radio-grouped.ts

@@ -1,62 +1,62 @@
-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 } = 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,
+  };
+};

package/src/components/sidepanel/sidepanel.ts

@@ -104,6 +104,10 @@ export const sidepanelPropTypes = {
   isActivePanel: {
     type: Boolean,
     default: false
+  },
+  footerNoTopBorder: {
+    type: Boolean,
+    default: false,
   }
 };
 

package/src/components/sidepanel/sidepanel.vue

@@ -17,6 +17,7 @@
       aria-labelledby="sidepanel-title"
       aria-describedby="sidepanel-content"
       :class="sidepanelClasses.sidepanelBaseClasses"
+      data-testid="sidepanel-dialog"
       :style="{ height: typeof height === 'number' ? `${height}px` : height }"
     >
       <template v-if="!props.hideHeader">
@@ -29,9 +30,10 @@
               v-if="props.isExpandable"
               :class="sidepanelClasses.sidepanelHeaderIconClasses"
               :icon="isExpanded ? 'ph:arrows-in-simple' : 'ph:arrows-out-simple'"
+              data-testid="expand-icon"
               @click="handlePanelExpansion"
             />
-            <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" @click="handleClose" />
+            <Icon :class="sidepanelClasses.sidepanelHeaderIconClasses" icon="ph:x" data-testid="x-icon" @click="handleClose" />
           </div>
         </div>
         <div v-else>

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

@@ -19,7 +19,7 @@ interface SidepanelClasses {
 }
 
 export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
-  const { size, position, isStacking, footerNoPadding, isExpanded, isActivePanel } = toRefs(props);
+  const { size, position, isStacking, footerNoPadding, isExpanded, isActivePanel, footerNoTopBorder } = toRefs(props);
 
   const sidepanelClasses: ComputedRef<SidepanelClasses> = computed(() => {
     const sidepanelBaseClasses = classNames(
@@ -48,9 +48,10 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
     const sidepanelContentClasses = classNames('spr-h-full spr-overflow-y-auto');
 
     const sidepanelFooterClasses = classNames(
-      'spr-bottom-0 spr-left-0 spr-w-full spr-rounded-b-border-radius-xl spr-border-0 spr-border-t spr-border-solid spr-border-mushroom-200 spr-bg-white-50 ',
+      'spr-bottom-0 spr-left-0 spr-w-full spr-rounded-b-border-radius-xl spr-border-0 spr-border-solid spr-border-mushroom-200 spr-bg-white-50 ',
       {
         'spr-py-3': !footerNoPadding.value,
+        'spr-border-t': !footerNoTopBorder.value
       },
     );
 

package/src/components/table/table-header-dropdown/table-header-dropdown.ts

@@ -0,0 +1,48 @@
+import type { MenuListType } from '@/components/list/list';
+import { type PropType, type ExtractPropTypes, ref } from 'vue';
+import type { Header } from '../table';
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const defaultSortOptions = ref([
+  { text: 'Sort Ascending', value: 'asc', icon: 'ph:sort-ascending', iconColor: 'spr-text-color-supporting' },
+  { text: 'Sort Descending', value: 'desc', icon: 'ph:sort-descending', iconColor: 'spr-text-color-supporting' },
+]);
+
+export const tableHeaderDropdownPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  header: {
+    type: Object as PropType<Header>,
+    default: () => ({}),
+  },
+  isSortable: {
+    type: Boolean,
+    default: true,
+  },
+  headerClasses: {
+    type: String,
+    default: '',
+  },
+  sortOptions: {
+    type: Array as PropType<MenuListType[]>,
+    default: () => defaultSortOptions.value,
+  },
+};
+
+export interface TableHeaderFilterType {
+  headerField: string;
+  sortBy: 'asc' | 'desc' | null;
+  appliedFilters: Record<string, string>;
+};
+
+export const tableHeaderDropdownEmitTypes = {
+  onApplyFilter: (filter: TableHeaderFilterType) => !!filter,
+  onSelectAll: () => true,
+  'update:selectedSort': (selectedSort: MenuListType[]) => Array.isArray(selectedSort),
+  'update:selectedFilters': (selectedFilters: MenuListType[]) => Array.isArray(selectedFilters),
+};
+
+export type TableHeaderDropdownPropTypes = ExtractPropTypes<typeof tableHeaderDropdownPropTypes>;
+export type TableHeaderDropdownEmitTypes = typeof tableHeaderDropdownEmitTypes;