design-system-next 2.12.1 → 2.12.6

package/src/components/avatar/avatar.ts

@@ -1,64 +1,71 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-const AVATAR_SIZE = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs'] as const;
-const AVATAR_PRIMARY = ['primary', 'secondary'] as const;
-const AVATAR_STATUS = ['danger', 'disabled', 'information', 'brand'] as const;
-export const AVATAR_VARIANT = ['image', 'initial', 'client', 'user', 'user-group', 'count'] as const;
-
-export const avatarPropTypes = {
-  src: {
-    type: String,
-  },
-  alt: {
-    type: String,
-    default: 'Avatar',
-  },
-  badge: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String,
-    validator: (value: (typeof AVATAR_SIZE)[number]) => AVATAR_SIZE.includes(value),
-    default: '2xl',
-  },
-  notification: {
-    type: Boolean,
-    default: false,
-  },
-  notificationText: {
-    type: String,
-    default: '0',
-  },
-  initial: {
-    type: String,
-    default: 'Avatar',
-  },
-  color: {
-    type: String,
-    validator: (value: (typeof AVATAR_PRIMARY)[number]) => AVATAR_PRIMARY.includes(value),
-    default: 'primary',
-  },
-  status: {
-    type: String,
-    validator: (value: (typeof AVATAR_STATUS)[number]) => AVATAR_STATUS.includes(value),
-    default: 'brand',
-  },
-  count: {
-    type: Number,
-    default: 0,
-  },
-  variant: {
-    type: String,
-    validator: (value: (typeof AVATAR_VARIANT)[number]) => AVATAR_VARIANT.includes(value),
-    default: 'initial',
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export type AvatarPropTypes = ExtractPropTypes<typeof avatarPropTypes>;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const AVATAR_SIZE = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs', '2xs'] as const;
+const AVATAR_PRIMARY = ['primary', 'secondary', 'tertiary'] as const;
+const AVATAR_STATUS = ['danger', 'disabled', 'information', 'brand'] as const;
+
+export const AVATAR_VARIANT = ['image', 'initial', 'client', 'user', 'user-group', 'count'] as const;
+
+export const avatarPropTypes = {
+  src: {
+    type: String,
+  },
+  alt: {
+    type: String,
+    default: 'Avatar',
+  },
+  badge: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    validator: (value: (typeof AVATAR_SIZE)[number]) => AVATAR_SIZE.includes(value),
+    default: '2xl',
+  },
+  notification: {
+    type: Boolean,
+    default: false,
+  },
+  notificationText: {
+    type: String,
+    default: '0',
+  },
+  initial: {
+    type: String,
+    default: 'Avatar',
+  },
+  color: {
+    type: String,
+    validator: (value: (typeof AVATAR_PRIMARY)[number]) => AVATAR_PRIMARY.includes(value),
+    default: 'primary',
+  },
+  status: {
+    type: String,
+    validator: (value: (typeof AVATAR_STATUS)[number]) => AVATAR_STATUS.includes(value),
+    default: 'brand',
+  },
+  count: {
+    type: Number,
+    default: 0,
+  },
+  variant: {
+    type: String,
+    validator: (value: (typeof AVATAR_VARIANT)[number]) => AVATAR_VARIANT.includes(value),
+    default: 'initial',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const avatarEmitTypes = {
+  'image-error': (error: boolean) => typeof error === 'boolean',
+};
+
+export type AvatarEmitTypes = typeof avatarEmitTypes;
+
+export type AvatarPropTypes = ExtractPropTypes<typeof avatarPropTypes>;

package/src/components/avatar/avatar.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="spr-h-fit spr-w-fit">
-    <div v-if="!props.loading" :class="avatarClasses.baseClasses">
+    <div v-if="!props.loading && !imageError" :class="avatarClasses.baseClasses">
       <template v-if="['image', 'client', 'user', 'user-group'].includes(props.variant) || $slots.default">
         <div :class="avatarClasses.imageContainerClasses">
           <slot>
-            <img v-if="src" :src="src" :alt="alt" class="" />
+            <img v-if="src" :src="src" :alt="alt" @error="handleImageError" />
             <Icon v-else :icon="getIconVariant" />
           </slot>
         </div>
@@ -31,13 +31,18 @@
 </template>
 
 <script lang="ts" setup>
-import { avatarPropTypes } from './avatar';
-import { useAvatar } from './use-avatar';
 import { Icon } from '@iconify/vue';
 
+import { avatarPropTypes, avatarEmitTypes } from './avatar';
+import { useAvatar } from './use-avatar';
+
 import SprBadge from '@/components/badge/badge.vue';
 
 const props = defineProps(avatarPropTypes);
+const emit = defineEmits(avatarEmitTypes);
 
-const { avatarClasses, getAvatarSize, getIconVariant, getInitials } = useAvatar(props);
+const { avatarClasses, getAvatarSize, getIconVariant, getInitials, imageError, handleImageError } = useAvatar(
+  props,
+  emit,
+);
 </script>

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

@@ -1,8 +1,9 @@
-import { toRefs, computed, ComputedRef } from 'vue';
+import { toRefs, computed, ComputedRef, ref } from 'vue';
 
 import classNames from 'classnames';
 
-import type { AvatarPropTypes } from './avatar';
+import type { SetupContext } from 'vue';
+import type { AvatarPropTypes, AvatarEmitTypes } from './avatar';
 
 interface AvatarClasses {
   baseClasses: string;
@@ -12,7 +13,7 @@ interface AvatarClasses {
   onlineNotificationClasses: string;
 }
 
-export const useAvatar = (props: AvatarPropTypes) => {
+export const useAvatar = (props: AvatarPropTypes, emit: SetupContext<AvatarEmitTypes>['emit']) => {
   const { size, color, variant, initial, loading } = toRefs(props);
 
   const avatarClasses: ComputedRef<AvatarClasses> = computed(() => {
@@ -132,10 +133,20 @@ export const useAvatar = (props: AvatarPropTypes) => {
     return (firstInitial + lastInitial).slice(0, maxInitials);
   });
 
+  const imageError = ref<boolean>(false);
+
+  const handleImageError = () => {
+    imageError.value = true;
+
+    emit('image-error', true);
+  };
+
   return {
     avatarClasses,
     getAvatarSize,
     getIconVariant,
     getInitials,
+    imageError,
+    handleImageError,
   };
 };

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

@@ -82,8 +82,18 @@ export const calendarPropTypes = {
   },
 };
 
-export const calendarEmitTypes = {};
-
+export const calendarEmitTypes = [
+  'loadMore',
+  'onCellClick',
+  'update:firstLastDayOfWeek',
+  'update:sort',
+  'update:search',
+  'update:selectedCell',
+  'update:selectedCompany',
+  'update:selectedDepartment',
+  'update:selectedBranch',
+  'onClickEmptyButton',
+];
 export type CalendarEmitTypes = typeof calendarEmitTypes;
 
 export type CalendarPropTypes = ExtractPropTypes<typeof calendarPropTypes>;

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>;