design-system-next 2.11.20 → 2.12.1

package/src/components/badge/badge.ts

@@ -1,43 +1,43 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-const BADGE_VARIANT = ['danger', 'disabled', 'information', 'brand'] as const;
-const BADGE_SIZE = ['small', 'big', 'tiny'] as const;
-const BADGE_POSITION = ['top', 'bottom', 'default'] as const;
-
-export const badgePropTypes = {
-  /**
-   * @description Badge Label
-   */
-  text: {
-    type: String,
-    default: '0',
-  },
-  /**
-   * @description Badge variant
-   */
-  variant: {
-    type: String,
-    validator: (value: (typeof BADGE_VARIANT)[number]) => BADGE_VARIANT.includes(value),
-    default: 'brand',
-  },
-  /**
-   * @description Badge size
-   */
-  size: {
-    type: String,
-    validator: (value: (typeof BADGE_SIZE)[number]) => BADGE_SIZE.includes(value),
-    default: 'small',
-  },
-  /**
-   * @description Badge position (top, bottom, default)
-   */
-  position: {
-    type: String,
-    validator: (value: (typeof BADGE_POSITION)[number]) => BADGE_POSITION.includes(value),
-    default: 'default',
-  },
-};
-
-export type BadgePropTypes = ExtractPropTypes<typeof badgePropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const BADGE_VARIANT = ['danger', 'disabled', 'information', 'brand'] as const;
+const BADGE_SIZE = ['small', 'big', 'tiny'] as const;
+const BADGE_POSITION = ['top', 'bottom', 'default'] as const;
+
+export const badgePropTypes = {
+  /**
+   * @description Badge Label
+   */
+  text: {
+    type: String,
+    default: '0',
+  },
+  /**
+   * @description Badge variant
+   */
+  variant: {
+    type: String,
+    validator: (value: (typeof BADGE_VARIANT)[number]) => BADGE_VARIANT.includes(value),
+    default: 'brand',
+  },
+  /**
+   * @description Badge size
+   */
+  size: {
+    type: String,
+    validator: (value: (typeof BADGE_SIZE)[number]) => BADGE_SIZE.includes(value),
+    default: 'small',
+  },
+  /**
+   * @description Badge position (top, bottom, default)
+   */
+  position: {
+    type: String,
+    validator: (value: (typeof BADGE_POSITION)[number]) => BADGE_POSITION.includes(value),
+    default: 'default',
+  },
+};
+
+export type BadgePropTypes = ExtractPropTypes<typeof badgePropTypes>;

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.ts

@@ -1,52 +1,52 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-const BORDER_RADIUS_SIZE = ['xl', 'lg', 'md', 'sm', 'xs', '2xs'] as const;
-
-export const cardPropTypes = {
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-  headerIcon: {
-    type: String,
-    default: '',
-  },
-  showHeader: {
-    type: Boolean,
-    default: true,
-  },
-  showFooter: {
-    type: Boolean,
-    default: true,
-  },
-  borderRadiusSize: {
-    type: String,
-    validator: (value: (typeof BORDER_RADIUS_SIZE)[number]) => BORDER_RADIUS_SIZE.includes(value),
-    default: 'xl',
-  },
-  hasCollapsible: {
-    type: Boolean,
-    default: false,
-  },
-  isCollapsibleOpen: {
-    type: Boolean,
-    default: false,
-  },
-  hasContentPadding: {
-    type: Boolean,
-    default: true,
-  },
-
-  flexbox: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export type CardPropTypes = ExtractPropTypes<typeof cardPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const BORDER_RADIUS_SIZE = ['xl', 'lg', 'md', 'sm', 'xs', '2xs'] as const;
+
+export const cardPropTypes = {
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  headerIcon: {
+    type: String,
+    default: '',
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  showFooter: {
+    type: Boolean,
+    default: true,
+  },
+  borderRadiusSize: {
+    type: String,
+    validator: (value: (typeof BORDER_RADIUS_SIZE)[number]) => BORDER_RADIUS_SIZE.includes(value),
+    default: 'xl',
+  },
+  hasCollapsible: {
+    type: Boolean,
+    default: false,
+  },
+  isCollapsibleOpen: {
+    type: Boolean,
+    default: false,
+  },
+  hasContentPadding: {
+    type: Boolean,
+    default: true,
+  },
+
+  flexbox: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type CardPropTypes = ExtractPropTypes<typeof cardPropTypes>;

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;