design-system-next 2.23.0 → 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/date-picker/date-picker.vue

@@ -7,7 +7,7 @@
       :placement="props.placement"
       :triggers="[]"
       :popper-hide-triggers="[]"
-      :auto-hide="false"
+      :auto-hide="true"
       :disabled="isDatePickerPopperDisabled"
       :container="props.popperContainer ? props.popperContainer : `#${props.id}`"
       :strategy="
@@ -26,7 +26,7 @@
         <slot :handle-click="handleSlotClick">
           <div
             ref="datePickerRef"
-            :class="datePickerClasses.datePickerBaseInputClasses"
+            :class="[datePickerClasses.datePickerBaseInputClasses, 'spr-relative spr-z-10']"
             @click="datePopperState = true"
           >
             <div class="spr-flex spr-h-full spr-items-center spr-gap-1.5">

package/src/components/date-picker/use-date-picker.ts

@@ -494,6 +494,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleConvertMonthIfValid();
     calendarTabUpdateCalendar();
     emitDateFormats();
+    emitPartialInputValue();
 
     datePickerErrors.value = [];
 
@@ -563,6 +564,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleConvertMonthIfValid();
     calendarTabUpdateCalendar();
     emitDateFormats();
+    emitPartialInputValue();
 
     datePickerErrors.value = [];
 
@@ -696,14 +698,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     handleValidateDate();
 
-    // Do not set yearInput when typing monthInput
-    if (!monthInput.value && !dateInput.value && !yearInput.value) {
-      emit('getInputValue', null);
-    }
-
-    if (monthInput.value && dateInput.value && yearInput.value) {
-      emitInputValue();
-    }
+    // Emit the partial date value as user types
+    emitPartialInputValue();
   };
 
   const handleDateInput = () => {
@@ -717,14 +713,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     handleValidateDate();
 
-    // Do not set yearInput when typing dateInput
-    if (!monthInput.value && !dateInput.value && !yearInput.value) {
-      emit('getInputValue', null);
-    }
-
-    if (monthInput.value && dateInput.value && yearInput.value) {
-      emitInputValue();
-    }
+    // Emit the partial date value as user types
+    emitPartialInputValue();
   };
 
   const handleYearInput = () => {
@@ -736,20 +726,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
     emit('getDateErrors', datePickerErrors.value);
 
-    // Only validate year, do not set monthInput or dateInput
-    // Only emit year-related changes
-    // Only validate if yearInput is 4 digits (full year)
-    if (yearInput.value.length === 4) {
-      handleValidateDate();
-
-      if (!monthInput.value && !dateInput.value && !yearInput.value) {
-        emit('getInputValue', null);
-      }
-
-      if (monthInput.value && dateInput.value && yearInput.value) {
-        emitInputValue();
-      }
-    }
+    // Emit the partial date value as user types
+    emitPartialInputValue();
   };
 
   const handleConvertMonthIfValid = () => {
@@ -846,6 +824,36 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     }
   };
 
+  const emitPartialInputValue = () => {
+    // Convert month to numeric format if it's text
+    let emittedMonth = monthInput.value;
+
+    if (monthInput.value) {
+      const isNumeric = !isNaN(Number(monthInput.value)) && !isNaN(parseFloat(monthInput.value));
+
+      if (!isNumeric) {
+        const monthIsValid = monthsList.value.find(
+          (_month: MonthsList) => _month.text.toLowerCase() === monthInput.value.toLowerCase(),
+        );
+
+        if (monthIsValid) {
+          emittedMonth =
+            monthIsValid.monthValue < 10 ? `0${monthIsValid.monthValue + 1}` : `${monthIsValid.monthValue + 1}`;
+        }
+      }
+    }
+
+    // Build the partial date string with zeros for empty fields
+    const partialMonth = emittedMonth || '0';
+    const partialDate = dateInput.value || '0';
+    const partialYear = yearInput.value || '0';
+
+    const partialDateString = `${partialMonth}-${partialDate}-${partialYear}`;
+
+    // Emit the partial date string
+    emit('getInputValue', partialDateString);
+  };
+
   const emitDateFormats = () => {
     if (monthInput.value && dateInput.value && yearInput.value) {
       const monthIsValid = monthsList.value.find(
@@ -934,8 +942,8 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
   };
 
   const handleSlotClick = () => {
-    if(disabled.value || readonly.value) return;
-    datePopperState.value = true;    
+    if (disabled.value || readonly.value) return;
+    datePopperState.value = true;
   };
 
   watch(datePopperState, (newValue) => {
@@ -1037,6 +1045,6 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     handleTabClick,
     handleBackspace,
     clearDate,
-    handleSlotClick
+    handleSlotClick,
   };
 };

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