design-system-next 2.19.3 → 2.20.0

package/src/components/accordion/accordion.ts

@@ -1,43 +1,43 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-const ACCORDION_TRIGGER = ['header', 'button'] as const;
-
-export interface AccordionItem {
-  title: string;
-  subtitle?: string;
-  collapseId: string;
-}
-
-/**
- * Defines the prop types for the Accordion component.
- *
- * @property accordionItems - An array of accordion items. This property is required and defaults to an empty array.
- * @property alwaysOpen - A boolean indicating whether multiple accordion items can be open at the same time. Defaults to `false`.
- * @property isDefaultOpen - A boolean indicating whether the accordion is open by default. Defaults to `false`. Won't work if alwaysOpen is false.
- */
-export const accordionPropTypes = {
-  accordionItems: {
-    type: Array as PropType<AccordionItem[]>,
-    required: true,
-    default: () => [],
-  },
-  alwaysOpen: {
-    type: Boolean,
-    default: false,
-  },
-  isDefaultOpen: {
-    type: Boolean,
-    default: false
-  },
-  accordionTrigger: {
-    type: String,
-    validator: (value: (typeof ACCORDION_TRIGGER)[number]) => ACCORDION_TRIGGER.includes(value),
-    default: 'button'
-  },
-  bordered: {
-    type: Boolean,
-    default: true
-  }
-}
-
-export type AccordionPropTypes = ExtractPropTypes<typeof accordionPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+const ACCORDION_TRIGGER = ['header', 'button'] as const;
+
+export interface AccordionItem {
+  title: string;
+  subtitle?: string;
+  collapseId: string;
+}
+
+/**
+ * Defines the prop types for the Accordion component.
+ *
+ * @property accordionItems - An array of accordion items. This property is required and defaults to an empty array.
+ * @property alwaysOpen - A boolean indicating whether multiple accordion items can be open at the same time. Defaults to `false`.
+ * @property isDefaultOpen - A boolean indicating whether the accordion is open by default. Defaults to `false`. Won't work if alwaysOpen is false.
+ */
+export const accordionPropTypes = {
+  accordionItems: {
+    type: Array as PropType<AccordionItem[]>,
+    required: true,
+    default: () => [],
+  },
+  alwaysOpen: {
+    type: Boolean,
+    default: false,
+  },
+  isDefaultOpen: {
+    type: Boolean,
+    default: false
+  },
+  accordionTrigger: {
+    type: String,
+    validator: (value: (typeof ACCORDION_TRIGGER)[number]) => ACCORDION_TRIGGER.includes(value),
+    default: 'button'
+  },
+  bordered: {
+    type: Boolean,
+    default: true
+  }
+}
+
+export type AccordionPropTypes = ExtractPropTypes<typeof accordionPropTypes>;

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

@@ -1,43 +1,43 @@
-
-import type { AccordionPropTypes } from './accordion';
-import { toRefs, reactive, ref } from 'vue';
-
-export const useAccordion = (props: AccordionPropTypes) => {
-  const { accordionItems, isDefaultOpen, alwaysOpen } = toRefs(props);
-  const clickedIndex = ref<number>()
-
-  const collapsedState = reactive(accordionItems.value.map(() => isDefaultOpen.value && alwaysOpen.value));
-
-  const toggleCollapse = (index: number) => {
-    if (index < 0 || index >= collapsedState.length) return;
-
-    collapsedState[index] = !collapsedState[index];
-
-    if (!props.alwaysOpen) {
-      collapsedState.forEach((_, i) => {
-        if (i !== index) {
-          collapsedState[i] = false;
-        }
-      });
-    }
-  };
-
-  const setClickedIndex = (index: number) => {
-    clickedIndex.value = index
-  }
-
-  const clearIndex = () => {
-    clickedIndex.value = undefined
-  }
-
-  return {
-    accordionItems,
-    isDefaultOpen,
-    alwaysOpen,
-    collapsedState,
-    toggleCollapse,
-    setClickedIndex,
-    clearIndex,
-    clickedIndex
-  }
-};
+
+import type { AccordionPropTypes } from './accordion';
+import { toRefs, reactive, ref } from 'vue';
+
+export const useAccordion = (props: AccordionPropTypes) => {
+  const { accordionItems, isDefaultOpen, alwaysOpen } = toRefs(props);
+  const clickedIndex = ref<number>()
+
+  const collapsedState = reactive(accordionItems.value.map(() => isDefaultOpen.value && alwaysOpen.value));
+
+  const toggleCollapse = (index: number) => {
+    if (index < 0 || index >= collapsedState.length) return;
+
+    collapsedState[index] = !collapsedState[index];
+
+    if (!props.alwaysOpen) {
+      collapsedState.forEach((_, i) => {
+        if (i !== index) {
+          collapsedState[i] = false;
+        }
+      });
+    }
+  };
+
+  const setClickedIndex = (index: number) => {
+    clickedIndex.value = index
+  }
+
+  const clearIndex = () => {
+    clickedIndex.value = undefined
+  }
+
+  return {
+    accordionItems,
+    isDefaultOpen,
+    alwaysOpen,
+    collapsedState,
+    toggleCollapse,
+    setClickedIndex,
+    clearIndex,
+    clickedIndex
+  }
+};

package/src/components/banner/banner.ts

@@ -1,20 +1,20 @@
-import { PropType, type ExtractPropTypes } from 'vue';
-
-export const BANNER_TYPE = ['success', 'error', 'info', 'pending', 'caution'] as const;
-
-export const bannerProps = {
-  type: {
-    type: String as PropType<(typeof BANNER_TYPE)[number]>,
-    validator: (value: (typeof BANNER_TYPE)[number]) => BANNER_TYPE.includes(value),
-    default: 'success',
-  },
-  showCloseButton: {
-    type: Boolean,
-    default: false,
-  },
-  message: {
-    type: String,
-  }
-};
-
-export type BannerPropTypes = ExtractPropTypes<typeof bannerProps>;
+import { PropType, type ExtractPropTypes } from 'vue';
+
+export const BANNER_TYPE = ['success', 'error', 'info', 'pending', 'caution'] as const;
+
+export const bannerProps = {
+  type: {
+    type: String as PropType<(typeof BANNER_TYPE)[number]>,
+    validator: (value: (typeof BANNER_TYPE)[number]) => BANNER_TYPE.includes(value),
+    default: 'success',
+  },
+  showCloseButton: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+  }
+};
+
+export type BannerPropTypes = ExtractPropTypes<typeof bannerProps>;

package/src/components/button/button.ts

@@ -1,72 +1,72 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-const BUTTON_TONES = ['neutral', 'success', 'danger'] as const;
-const BUTTON_SIZES = ['small', 'medium', 'large'] as const;
-const BUTTON_TYPES = ['button', 'submit', 'reset'] as const;
-const BUTTON_STATES = ['base', 'hover', 'pressed', 'focus'] as const;
-const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary'] as const;
-
-export const buttonPropTypes = {
-  /**
-   * @description Button tone
-   */
-  tone: {
-    type: String as PropType<(typeof BUTTON_TONES)[number]>,
-    validator: (value: (typeof BUTTON_TONES)[number]) => BUTTON_TONES.includes(value),
-    default: 'neutral',
-  },
-  /**
-   * @description Button size
-   */
-  size: {
-    type: String as PropType<(typeof BUTTON_SIZES)[number]>,
-    validator: (value: (typeof BUTTON_SIZES)[number]) => BUTTON_SIZES.includes(value),
-    default: 'medium',
-  },
-  /**
-   * @description Native button type
-   */
-  type: {
-    type: String as PropType<(typeof BUTTON_TYPES)[number]>,
-    validator: (value: (typeof BUTTON_TYPES)[number]) => BUTTON_TYPES.includes(value),
-    default: 'button',
-  },
-  /**
-   * @description Button state
-   */
-  state: {
-    type: String as PropType<(typeof BUTTON_STATES)[number]>,
-    validator: (value: (typeof BUTTON_STATES)[number]) => BUTTON_STATES.includes(value),
-    default: 'base',
-  },
-  /**
-   * @description Button Variant
-   */
-  variant: {
-    type: String as PropType<(typeof BUTTON_VARIANTS)[number]>,
-    validator: (value: (typeof BUTTON_VARIANTS)[number]) => BUTTON_VARIANTS.includes(value),
-    default: 'primary',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  hasIcon: {
-    type: Boolean,
-    default: false,
-  },
-  fullwidth: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const buttonEmitTypes = {
-  click: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
-};
-
-export type ButtonPropTypes = ExtractPropTypes<typeof buttonPropTypes>;
-export type ButtonEmitTypes = typeof buttonEmitTypes;
-export type ButtonType = ButtonPropTypes['type'];
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const BUTTON_TONES = ['neutral', 'success', 'danger'] as const;
+const BUTTON_SIZES = ['small', 'medium', 'large'] as const;
+const BUTTON_TYPES = ['button', 'submit', 'reset'] as const;
+const BUTTON_STATES = ['base', 'hover', 'pressed', 'focus'] as const;
+const BUTTON_VARIANTS = ['primary', 'secondary', 'tertiary'] as const;
+
+export const buttonPropTypes = {
+  /**
+   * @description Button tone
+   */
+  tone: {
+    type: String as PropType<(typeof BUTTON_TONES)[number]>,
+    validator: (value: (typeof BUTTON_TONES)[number]) => BUTTON_TONES.includes(value),
+    default: 'neutral',
+  },
+  /**
+   * @description Button size
+   */
+  size: {
+    type: String as PropType<(typeof BUTTON_SIZES)[number]>,
+    validator: (value: (typeof BUTTON_SIZES)[number]) => BUTTON_SIZES.includes(value),
+    default: 'medium',
+  },
+  /**
+   * @description Native button type
+   */
+  type: {
+    type: String as PropType<(typeof BUTTON_TYPES)[number]>,
+    validator: (value: (typeof BUTTON_TYPES)[number]) => BUTTON_TYPES.includes(value),
+    default: 'button',
+  },
+  /**
+   * @description Button state
+   */
+  state: {
+    type: String as PropType<(typeof BUTTON_STATES)[number]>,
+    validator: (value: (typeof BUTTON_STATES)[number]) => BUTTON_STATES.includes(value),
+    default: 'base',
+  },
+  /**
+   * @description Button Variant
+   */
+  variant: {
+    type: String as PropType<(typeof BUTTON_VARIANTS)[number]>,
+    validator: (value: (typeof BUTTON_VARIANTS)[number]) => BUTTON_VARIANTS.includes(value),
+    default: 'primary',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  hasIcon: {
+    type: Boolean,
+    default: false,
+  },
+  fullwidth: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const buttonEmitTypes = {
+  click: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
+};
+
+export type ButtonPropTypes = ExtractPropTypes<typeof buttonPropTypes>;
+export type ButtonEmitTypes = typeof buttonEmitTypes;
+export type ButtonType = ButtonPropTypes['type'];

package/src/components/button/button.vue

@@ -1,15 +1,15 @@
-<template>
-  <button ref="buttonRef" :class="buttonClassses" v-bind="buttonProps" @click="handleClick">
-    <slot />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import { buttonEmitTypes, buttonPropTypes } from './button';
-import { useButton } from './use-button';
-
-const props = defineProps(buttonPropTypes);
-const emit = defineEmits(buttonEmitTypes);
-
-const { buttonRef, buttonClassses, buttonProps, handleClick } = useButton(props, emit);
-</script>
+<template>
+  <button ref="buttonRef" :class="buttonClassses" v-bind="buttonProps" @click="handleClick">
+    <slot />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { buttonEmitTypes, buttonPropTypes } from './button';
+import { useButton } from './use-button';
+
+const props = defineProps(buttonPropTypes);
+const emit = defineEmits(buttonEmitTypes);
+
+const { buttonRef, buttonClassses, buttonProps, handleClick } = useButton(props, emit);
+</script>

package/src/components/card/card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="cardClasses.baseClasses" :style="{ borderWidth: props.borderWidth }">
+  <div v-bind="id ? { id } : {}" :class="cardClasses.baseClasses" :style="{ borderWidth: props.borderWidth }">
     <div v-if="props.showHeader && ($slots.header || props.title)" :class="cardClasses.headerClasses">
       <div v-if="props.title" class="spr-flex spr-items-center">
         <Icon
@@ -41,5 +41,8 @@ import { useCard } from './use-card';
 const props = defineProps(cardPropTypes);
 const slots = useSlots();
 
+// Destructure id for template usage
+const { id } = props;
+
 const { cardClasses } = useCard(props, slots);
 </script>

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

@@ -50,10 +50,10 @@ export const useCard = (props: CardPropTypes, slots: Slots) => {
       'spr-border-color-danger-base': toneValue === 'danger',
 
       // Border radius
-      'spr-rounded-border-radius-2xs': borderRadiusSize.value === 'xs',
-      'spr-rounded-border-radius-xs': borderRadiusSize.value === 'sm',
-      'spr-rounded-border-radius-sm': borderRadiusSize.value === 'md',
-      'spr-rounded-border-radius-md': borderRadiusSize.value === 'xs',
+      'spr-rounded-border-radius-2xs': borderRadiusSize.value === '2xs',
+      'spr-rounded-border-radius-xs': borderRadiusSize.value === 'xs',
+      'spr-rounded-border-radius-sm': borderRadiusSize.value === 'sm',
+      'spr-rounded-border-radius-md': borderRadiusSize.value === 'md',
       'spr-rounded-border-radius-lg': borderRadiusSize.value === 'lg',
       'spr-rounded-border-radius-xl': borderRadiusSize.value === 'xl' || !borderRadiusSize.value,
 
@@ -67,10 +67,10 @@ export const useCard = (props: CardPropTypes, slots: Slots) => {
         (title.value || headerIcon.value) && (slots.content || slots.default),
       'spr-border-transparent': hasCollapsible.value && !isCollapsibleOpen.value,
       'spr-py-size-spacing-2xs spr-px-size-spacing-xs': title.value || headerIcon.value,
-      'spr-rounded-t-border-radius-2xs': borderRadiusSize.value === 'xs',
-      'spr-rounded-t-border-radius-xs': borderRadiusSize.value === 'sm',
-      'spr-rounded-t-border-radius-sm': borderRadiusSize.value === 'md',
-      'spr-rounded-t-border-radius-md': borderRadiusSize.value === 'xs',
+      'spr-rounded-t-border-radius-2xs': borderRadiusSize.value === '2xs',
+      'spr-rounded-t-border-radius-xs': borderRadiusSize.value === 'xs',
+      'spr-rounded-t-border-radius-sm': borderRadiusSize.value === 'sm',
+      'spr-rounded-t-border-radius-md': borderRadiusSize.value === 'md',
       'spr-rounded-t-border-radius-lg': borderRadiusSize.value === 'lg',
       'spr-rounded-t-border-radius-xl': borderRadiusSize.value === 'xl' || !borderRadiusSize.value,
     });
@@ -82,10 +82,10 @@ export const useCard = (props: CardPropTypes, slots: Slots) => {
     const footerClasses = classNames(
       `spr-flex spr-items-center spr-border-0 spr-border-t spr-border-solid spr-border-mushroom-200 spr-py-size-spacing-2xs spr-px-size-spacing-xs`,
       {
-        'spr-rounded-b-border-radius-2xs': borderRadiusSize.value === 'xs',
-        'spr-rounded-b-border-radius-xs': borderRadiusSize.value === 'sm',
-        'spr-rounded-b-border-radius-sm': borderRadiusSize.value === 'md',
-        'spr-rounded-b-border-radius-md': borderRadiusSize.value === 'xs',
+        'spr-rounded-b-border-radius-2xs': borderRadiusSize.value === '2xs',
+        'spr-rounded-b-border-radius-xs': borderRadiusSize.value === 'xs',
+        'spr-rounded-b-border-radius-sm': borderRadiusSize.value === 'sm',
+        'spr-rounded-b-border-radius-md': borderRadiusSize.value === 'md',
         'spr-rounded-b-border-radius-lg': borderRadiusSize.value === 'lg',
         'spr-rounded-b-border-radius-xl': borderRadiusSize.value === 'xl' || !borderRadiusSize.value,
       },

package/src/components/checkbox/checkbox.ts

@@ -1,45 +1,45 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const checkboxPropTypes = {
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  checked: {
-    type: Boolean,
-    default: false,
-  },
-  indeterminate: {
-    type: Boolean,
-    default: false,
-  },
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
-  fullWidth: {
-    type: Boolean,
-    default: false,
-  }
-};
-
-export const checkboxEmitTypes = {
-  'update:modelValue': (value: boolean) => typeof value === 'boolean',
-};
-
-export type CheckboxPropTypes = ExtractPropTypes<typeof checkboxPropTypes>;
-export type CheckboxEmitTypes = typeof checkboxEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const checkboxPropTypes = {
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  checked: {
+    type: Boolean,
+    default: false,
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  }
+};
+
+export const checkboxEmitTypes = {
+  'update:modelValue': (value: boolean) => typeof value === 'boolean',
+};
+
+export type CheckboxPropTypes = ExtractPropTypes<typeof checkboxPropTypes>;
+export type CheckboxEmitTypes = typeof checkboxEmitTypes;

package/src/components/collapsible/collapsible.ts

@@ -1,21 +1,21 @@
-import type { PropType, ExtractPropTypes } from "vue";
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const collapsiblePropTypes = {
-  modelValue: {
-    type: Boolean,
-    required: true,
-  },
-  transitionDuration: {
-    type: Number,
-    default: 150, // Default transition duration in milliseconds
-  },
-};
-
-export const collapsibleEmitTypes = {
-  'update:modelValue': (value: boolean) => typeof value === 'boolean',
-};
-
-export type CollapsibleEmitTypes = typeof collapsibleEmitTypes
-export type CollapsibleProps = ExtractPropTypes<typeof collapsiblePropTypes>;
+import type { PropType, ExtractPropTypes } from "vue";
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const collapsiblePropTypes = {
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  transitionDuration: {
+    type: Number,
+    default: 150, // Default transition duration in milliseconds
+  },
+};
+
+export const collapsibleEmitTypes = {
+  'update:modelValue': (value: boolean) => typeof value === 'boolean',
+};
+
+export type CollapsibleEmitTypes = typeof collapsibleEmitTypes
+export type CollapsibleProps = ExtractPropTypes<typeof collapsiblePropTypes>;

package/src/components/collapsible/collapsible.vue

@@ -1,27 +1,27 @@
-<template>
-  <div :class="collapsibleClasses.container">
-    <slot name="trigger" :toggle-collapsible="toggleCollapsible" />
-    <Transition
-      :css="false"
-      @before-enter="onBeforeEnter"
-      @enter="onEnter"
-      @before-leave="onBeforeLeave"
-      @leave="onLeave"
-    >
-      <div v-show="modelValue" :style="contentStyle">
-        <slot />
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { collapsiblePropTypes, collapsibleEmitTypes } from './collapsible';
-import { useCollapsible } from './use-collapsible';
-
-const props = defineProps(collapsiblePropTypes);
-const emit = defineEmits(collapsibleEmitTypes);
-
-const { collapsibleClasses, contentStyle, toggleCollapsible, onBeforeEnter, onEnter, onBeforeLeave, onLeave } =
-  useCollapsible(props, emit);
-</script>
+<template>
+  <div :class="collapsibleClasses.container">
+    <slot name="trigger" :toggle-collapsible="toggleCollapsible" />
+    <Transition
+      :css="false"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <div v-show="modelValue" :style="contentStyle">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { collapsiblePropTypes, collapsibleEmitTypes } from './collapsible';
+import { useCollapsible } from './use-collapsible';
+
+const props = defineProps(collapsiblePropTypes);
+const emit = defineEmits(collapsibleEmitTypes);
+
+const { collapsibleClasses, contentStyle, toggleCollapsible, onBeforeEnter, onEnter, onBeforeLeave, onLeave } =
+  useCollapsible(props, emit);
+</script>

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

@@ -172,9 +172,9 @@ export interface TabComponentProps {
 }
 
 export interface CalendarTabEmits {
-  'update:date': (day: { date: Date; inactive: boolean }) => void;
-  'update:month': (month: number) => void;
-  'update:year': (year: number) => void;
+  'update:date': [day: { date: Date; inactive: boolean }];
+  'update:month': [month: number];
+  'update:year': [year: number];
 }
 
 export interface MonthTabEmits {