design-system-next 2.19.3 → 2.20.0

package/src/components/date-picker/tabs/DatePickerCalendarTab.vue

@@ -22,10 +22,7 @@
             'spr-text-color-brand-base': isTodayIndicator(day) && !isSelectedDate(day),
 
             // Active Month Dates - only apply if not selected and not today
-            'spr-text-color-strong':
-              isActiveMonthDates(day) &&
-              !isSelectedDate(day) &&
-              !isTodayIndicator(day),
+            'spr-text-color-strong': isActiveMonthDates(day) && !isSelectedDate(day) && !isTodayIndicator(day),
 
             // Inactive Month Dates (Past/Future)
             'spr-text-color-disabled': isInactiveMonthDates(day),
@@ -74,17 +71,15 @@ interface Props extends TabComponentProps {
   selectedDay?: number;
 }
 
-type Emits = CalendarTabEmits;
-
 const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
+const emit = defineEmits<CalendarTabEmits>();
 
 const daysOfWeek = computed(() =>
   Array.from({ length: 7 }, (_, i) => ({
     text: dayjs().day(i).format('dd'),
     fullText: dayjs().day(i).format('dddd'),
     dayValue: i,
-  }))
+  })),
 );
 
 const currentDate = computed(() => dayjs());
@@ -154,7 +149,6 @@ const isSelectedDate = (day: { date: Date; inactive: boolean }) => {
     return day.date.getDate() === props.selectedDay && !day.inactive;
   }
 
-
   return false;
 };
 
@@ -184,10 +178,7 @@ const isUnSelectedDate = (day: { date: Date }) => {
 
   // If day and month are selected, check if this date matches
   if (props.selectedDay && props.selectedMonth !== undefined && !props.selectedYear) {
-    return !(
-      day.date.getDate() === props.selectedDay &&
-      day.date.getMonth() === props.selectedMonth
-    );
+    return !(day.date.getDate() === props.selectedDay && day.date.getMonth() === props.selectedMonth);
   }
 
   // If only day is selected, check if this date matches

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-2"
+          class="spr-overflow-y-auto spr-overflow-x-hidden spr-p-4"
           :style="{
             width: props.popperInnerWidth,
           }"

package/src/components/dropdown/fix-multi-number.ts

@@ -1,92 +1,92 @@
-// This file contains the fixed version of the handleSelectedItem function
-// for handling multiple primitive number values in dropdowns
-
-/**
- * Fixed version of the handleSelectedItem function that properly handles number values in multi-select mode
- * This is designed to be copied into the use-dropdown.ts file
- */
-
-// Handle selected item for simple list component
-// This function is exported to be used as a reference for implementation
-export const handleSelectedItem = (selectedItems: MenuListType[]) => {
-  if (!props.ladderized) {
-    // Determine the type of value to emit based on the original data type and multiSelect
-    if (multiSelect.value) {
-      // For multi-select, always return an array
-      const values = selectedItems.map(item => {
-        // If we stored the original object, use it
-        if ('_originalObject' in item) {
-          return item._originalObject;
-        }
-        
-        // For simple types, handle value type conversion properly
-        const val = item.value;
-        
-        // If it's already a number, keep it as a number
-        if (typeof val === 'number') {
-          return val;
-        }
-        
-        // For strings that look like numbers, convert them
-        if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
-          // Only convert if it looks like a proper number format
-          if (/^-?\d+(\.\d+)?$/.test(val)) {
-            return Number(val);
-          }
-        }
-        
-        // Return the original value for all other cases
-        return val;
-      });
-      
-      // Set the dropdown value
-      dropdownValue.value = values as (string | number | Record<string, unknown>)[];
-    } else {
-      // For single-select
-      if (selectedItems.length === 0) {
-        dropdownValue.value = props.multiSelect ? [] : '';
-        return;
-      }
-
-      const item = selectedItems[0];
-      
-      // If we stored the original object, use it
-      if ('_originalObject' in item) {
-        dropdownValue.value = item._originalObject as Record<string, unknown>;
-        return;
-      }
-      
-      // For simple types, return the value (try to convert number strings to numbers)
-      const val = item.value;
-      if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
-        dropdownValue.value = Number(val);
-      } else {
-        dropdownValue.value = val;
-      }
-    }
-  } else if (props.ladderized) {
-    if (props.searchString !== '') {
-      // generate dropdown value if ladderized with search string
-      const subvalue = selectedItems[0]?.subvalue;
-      const value = selectedItems[0]?.value;
-      if (subvalue !== undefined && value !== undefined) {
-        dropdownValue.value = [subvalue, value] as [string, string | number];
-      }
-    } else {
-      // For regular ladderized dropdown selection without search
-      if (selectedItems.length > 0) {
-        const item = selectedItems[0];
-        // Use the value directly for ladderized items
-        if (item && item.value) {
-          dropdownValue.value = item.value;
-        }
-      }
-    }
-  }
-
-  if (!multiSelect.value) {
-    setTimeout(() => {
-      dropdownPopperState.value = false;
-    }, 10);
-  }
-};
+// This file contains the fixed version of the handleSelectedItem function
+// for handling multiple primitive number values in dropdowns
+
+/**
+ * Fixed version of the handleSelectedItem function that properly handles number values in multi-select mode
+ * This is designed to be copied into the use-dropdown.ts file
+ */
+
+// Handle selected item for simple list component
+// This function is exported to be used as a reference for implementation
+export const handleSelectedItem = (selectedItems: MenuListType[]) => {
+  if (!props.ladderized) {
+    // Determine the type of value to emit based on the original data type and multiSelect
+    if (multiSelect.value) {
+      // For multi-select, always return an array
+      const values = selectedItems.map(item => {
+        // If we stored the original object, use it
+        if ('_originalObject' in item) {
+          return item._originalObject;
+        }
+        
+        // For simple types, handle value type conversion properly
+        const val = item.value;
+        
+        // If it's already a number, keep it as a number
+        if (typeof val === 'number') {
+          return val;
+        }
+        
+        // For strings that look like numbers, convert them
+        if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+          // Only convert if it looks like a proper number format
+          if (/^-?\d+(\.\d+)?$/.test(val)) {
+            return Number(val);
+          }
+        }
+        
+        // Return the original value for all other cases
+        return val;
+      });
+      
+      // Set the dropdown value
+      dropdownValue.value = values as (string | number | Record<string, unknown>)[];
+    } else {
+      // For single-select
+      if (selectedItems.length === 0) {
+        dropdownValue.value = props.multiSelect ? [] : '';
+        return;
+      }
+
+      const item = selectedItems[0];
+      
+      // If we stored the original object, use it
+      if ('_originalObject' in item) {
+        dropdownValue.value = item._originalObject as Record<string, unknown>;
+        return;
+      }
+      
+      // For simple types, return the value (try to convert number strings to numbers)
+      const val = item.value;
+      if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+        dropdownValue.value = Number(val);
+      } else {
+        dropdownValue.value = val;
+      }
+    }
+  } else if (props.ladderized) {
+    if (props.searchString !== '') {
+      // generate dropdown value if ladderized with search string
+      const subvalue = selectedItems[0]?.subvalue;
+      const value = selectedItems[0]?.value;
+      if (subvalue !== undefined && value !== undefined) {
+        dropdownValue.value = [subvalue, value] as [string, string | number];
+      }
+    } else {
+      // For regular ladderized dropdown selection without search
+      if (selectedItems.length > 0) {
+        const item = selectedItems[0];
+        // Use the value directly for ladderized items
+        if (item && item.value) {
+          dropdownValue.value = item.value;
+        }
+      }
+    }
+  }
+
+  if (!multiSelect.value) {
+    setTimeout(() => {
+      dropdownPopperState.value = false;
+    }, 10);
+  }
+};

package/src/components/empty-state/empty-state.ts

@@ -1,50 +1,50 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-const STATE_SIZE = ['small', 'large'] as const;
-const STATE_IMAGE = [
-  'bug',
-  'clock',
-  'dashboard',
-  'employees',
-  'government-id',
-  'integration',
-  'list',
-  'social-media-handles',
-  'work-in-progress',
-  'work-location',
-] as const;
-
-export const emptyStatePropTypes = {
-  description: {
-    type: String,
-    required: false,
-    default: 'No results found',
-  },
-  subDescription: {
-    type: String,
-    required: false,
-    default: 'Try a different search term.',
-  },
-  size: {
-    type: String as PropType<(typeof STATE_SIZE)[number]>,
-    validator: (value: (typeof STATE_SIZE)[number]) => STATE_SIZE.includes(value),
-    default: 'small',
-  },
-  image: {
-    type: String as PropType<(typeof STATE_IMAGE)[number]>,
-    default: 'list',
-    validator: (value: (typeof STATE_IMAGE)[number] | undefined) => value === undefined || STATE_IMAGE.includes(value),
-  },
-  hasButton: {
-    type: Boolean,
-    default: false,
-  },
-  emptyStateCustomClasses: {
-    type: String,
-    default: '',
-  }
-};
-
-export type EmptyStatePropTypes = ExtractPropTypes<typeof emptyStatePropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const STATE_SIZE = ['small', 'large'] as const;
+const STATE_IMAGE = [
+  'bug',
+  'clock',
+  'dashboard',
+  'employees',
+  'government-id',
+  'integration',
+  'list',
+  'social-media-handles',
+  'work-in-progress',
+  'work-location',
+] as const;
+
+export const emptyStatePropTypes = {
+  description: {
+    type: String,
+    required: false,
+    default: 'No results found',
+  },
+  subDescription: {
+    type: String,
+    required: false,
+    default: 'Try a different search term.',
+  },
+  size: {
+    type: String as PropType<(typeof STATE_SIZE)[number]>,
+    validator: (value: (typeof STATE_SIZE)[number]) => STATE_SIZE.includes(value),
+    default: 'small',
+  },
+  image: {
+    type: String as PropType<(typeof STATE_IMAGE)[number]>,
+    default: 'list',
+    validator: (value: (typeof STATE_IMAGE)[number] | undefined) => value === undefined || STATE_IMAGE.includes(value),
+  },
+  hasButton: {
+    type: Boolean,
+    default: false,
+  },
+  emptyStateCustomClasses: {
+    type: String,
+    default: '',
+  }
+};
+
+export type EmptyStatePropTypes = ExtractPropTypes<typeof emptyStatePropTypes>;

package/src/components/file-upload/file-upload.ts

@@ -1,87 +1,87 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-const FILE_UPLOAD_TYPE = ['default', 'center'] as const;
-
-const FILE_UPLOAD_DOCUMENT_TYPE = [
-  'application/pdf',
-  'application/msword',
-  'application/vnd.ms-excel',
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  'application/vnd.ms-powerpoint',
-  'text/plain',
-  'text/csv'
-];
-const FILE_UPLOAD_IMAGE_TYPE = [
-  'image/apng',
-  'image/avif',
-  'image/gif',
-  'image/jpeg',
-  'image/png',
-  'image/svg+xml',
-  'image/webp'
-];
-const FILE_UPLOAD_VALID_TYPE = [...FILE_UPLOAD_IMAGE_TYPE, ...FILE_UPLOAD_DOCUMENT_TYPE];
-
-export const fileUploadPropTypes = {
-  /**
-   * @description Media upload type
-   */
-  type: {
-    type: String as PropType<(typeof FILE_UPLOAD_TYPE)[number]>,
-    validator: (value: (typeof FILE_UPLOAD_TYPE)[number]) => FILE_UPLOAD_TYPE.includes(value),
-    default: 'default',
-  },
-  title: {
-    type: String
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: Array<File>,
-    required: true,
-    default: [],
-  },
-  maxFileSize: {
-    type: Number,
-    default: 10, // 10MB
-  },
-  fileTypes: {
-    type: Array as PropType<(typeof FILE_UPLOAD_VALID_TYPE)>,
-    validator: (fileTypes: (typeof FILE_UPLOAD_VALID_TYPE)) => fileTypes.every(fileType => FILE_UPLOAD_VALID_TYPE.includes(fileType)),
-    default: () => [...FILE_UPLOAD_VALID_TYPE], // If null, accept all file types
-  },
-  showError: {
-    type: Boolean,
-    default: false,
-  },
-  errorMessages: {
-    type: Array as PropType<string[]>,
-    default: [],
-  },
-  hideFilePreviewIcon: {
-    type: Boolean,
-    default: false,
-  },
-  hideDropzoneLabel: {
-    type: Boolean,
-    default: false,
-  },
-  supportedFileTypeLabel: {
-    type: String,
-    default: null,
-  }
-};
-
-export const fileUploadEmitTypes =  ['update:modelValue']
-
-export type FileUploadPropTypes = ExtractPropTypes<typeof fileUploadPropTypes>;
-export type FileUploadEmitTypes = typeof fileUploadEmitTypes;
-export type FileUploadType = FileUploadPropTypes['type'];
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const FILE_UPLOAD_TYPE = ['default', 'center'] as const;
+
+const FILE_UPLOAD_DOCUMENT_TYPE = [
+  'application/pdf',
+  'application/msword',
+  'application/vnd.ms-excel',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.ms-powerpoint',
+  'text/plain',
+  'text/csv'
+];
+const FILE_UPLOAD_IMAGE_TYPE = [
+  'image/apng',
+  'image/avif',
+  'image/gif',
+  'image/jpeg',
+  'image/png',
+  'image/svg+xml',
+  'image/webp'
+];
+const FILE_UPLOAD_VALID_TYPE = [...FILE_UPLOAD_IMAGE_TYPE, ...FILE_UPLOAD_DOCUMENT_TYPE];
+
+export const fileUploadPropTypes = {
+  /**
+   * @description Media upload type
+   */
+  type: {
+    type: String as PropType<(typeof FILE_UPLOAD_TYPE)[number]>,
+    validator: (value: (typeof FILE_UPLOAD_TYPE)[number]) => FILE_UPLOAD_TYPE.includes(value),
+    default: 'default',
+  },
+  title: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: Array<File>,
+    required: true,
+    default: [],
+  },
+  maxFileSize: {
+    type: Number,
+    default: 10, // 10MB
+  },
+  fileTypes: {
+    type: Array as PropType<(typeof FILE_UPLOAD_VALID_TYPE)>,
+    validator: (fileTypes: (typeof FILE_UPLOAD_VALID_TYPE)) => fileTypes.every(fileType => FILE_UPLOAD_VALID_TYPE.includes(fileType)),
+    default: () => [...FILE_UPLOAD_VALID_TYPE], // If null, accept all file types
+  },
+  showError: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessages: {
+    type: Array as PropType<string[]>,
+    default: [],
+  },
+  hideFilePreviewIcon: {
+    type: Boolean,
+    default: false,
+  },
+  hideDropzoneLabel: {
+    type: Boolean,
+    default: false,
+  },
+  supportedFileTypeLabel: {
+    type: String,
+    default: null,
+  }
+};
+
+export const fileUploadEmitTypes =  ['update:modelValue']
+
+export type FileUploadPropTypes = ExtractPropTypes<typeof fileUploadPropTypes>;
+export type FileUploadEmitTypes = typeof fileUploadEmitTypes;
+export type FileUploadType = FileUploadPropTypes['type'];

package/src/components/floating-action/floating-action.ts

@@ -1,12 +1,12 @@
-import { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const floatingActionPropTypes = {
-  show: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export type FloatingActionProps = ExtractPropTypes<typeof floatingActionPropTypes>;
+import { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const floatingActionPropTypes = {
+  show: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type FloatingActionProps = ExtractPropTypes<typeof floatingActionPropTypes>;

package/src/components/input/input-email/input-email.vue

@@ -1,17 +1,17 @@
-<template>
-  <spr-input v-bind="$attrs">
-    <template v-for="(_, slotName) in $slots" #[slotName]>
-      <slot :name="slotName" />
-    </template>
-
-    <template #prefix>
-      <Icon icon="ph:envelope" />
-    </template>
-  </spr-input>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
-import SprInput from '@/components/input/input.vue';
-</script>
+<template>
+  <spr-input v-bind="$attrs">
+    <template v-for="(_, slotName) in $slots" #[slotName]>
+      <slot :name="slotName" />
+    </template>
+
+    <template #prefix>
+      <Icon icon="ph:envelope" />
+    </template>
+  </spr-input>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+import SprInput from '@/components/input/input.vue';
+</script>

package/src/components/input/input-password/input-password.vue

@@ -1,5 +1,5 @@
 <template>
-  <spr-input v-bind="$attrs" :type="evaluatePasswordInputType">
+  <spr-input v-bind="props" :type="evaluatePasswordInputType" @update:model-value="emit('update:modelValue', $event)">
     <template v-for="(_, slotName) in $slots" #[slotName]>
       <slot :name="slotName" />
     </template>
@@ -18,8 +18,12 @@
 import { Icon } from '@iconify/vue';
 
 import SprInput from '@/components/input/input.vue';
+import { inputPropTypes, inputEmitTypes } from '@/components/input/input';
 
 import { useInputPassword } from './use-input-password';
 
+const emit = defineEmits(inputEmitTypes);
+const props = defineProps(inputPropTypes);
+
 const { showPassword, evaluateEyeIcon, evaluatePasswordInputType } = useInputPassword();
 </script>

package/src/components/input/input-search/input-search.vue

@@ -1,13 +1,13 @@
-<template>
-  <spr-input v-bind="$attrs">
-    <template #icon>
-      <Icon icon="ph:magnifying-glass" />
-    </template>
-  </spr-input>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-
-import SprInput from '@/components/input/input.vue';
-</script>
+<template>
+  <spr-input v-bind="$attrs">
+    <template #icon>
+      <Icon icon="ph:magnifying-glass" />
+    </template>
+  </spr-input>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+import SprInput from '@/components/input/input.vue';
+</script>