feat(v-badge): update v-badge & new outlined style

packages/badge/src/VBadge.stories.ts

@@ -1,97 +1,78 @@
-import MyBadge from './VBadge.vue';
+import VBadge from './VBadge.vue';
 import {themeColors} from '@gits-id/utils/colors';
-import type {VBadgeProps} from './VBadge';
+import type {VBadgeProps} from './types';
 import {Story, Meta} from '@storybook/vue3';
 
 export default {
   title: 'Components/Badge',
-  component: MyBadge,
+  component: VBadge,
   argTypes: {
     color: {
       control: {type: 'select', options: themeColors},
     },
   },
   args: {
-    label: 'Badge text',
+    label: '',
     dismissable: false,
     icon: false,
+    outlined: false,
   },
 } as Meta;
 
 const Template: Story<VBadgeProps> = (args) => ({
   // Components used in your story `template` are defined in the `components` object
   components: {
-    'my-component': MyBadge,
+    VBadge,
   },
   // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
-    return {args};
+    return {args, themeColors};
   },
   // And then the `args` are bound to your component with `v-bind="args"`
-  template: `<my-component v-bind="args">{{ args.label }}</my-component>`,
+  template: `
+<div class="flex flex-row flex-wrap gap-2">
+  <VBadge v-for="color in themeColors" :key="color" v-bind="args" :color="color">{{ args.label || color }}</VBadge>
+</div>
+  `,
 });
 
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  color: 'primary',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  color: 'secondary',
-};
-
-export const Info = Template.bind({});
-Info.args = {
-  color: 'info',
-};
-
-export const Warning = Template.bind({});
-Warning.args = {
-  color: 'warning',
-};
-
-export const Success = Template.bind({});
-Success.args = {
-  color: 'success',
-};
-
-export const Error = Template.bind({});
-Error.args = {
-  color: 'error',
-};
+export const Variants = Template.bind({});
+Variants.args = {};
 
 export const Rounded = Template.bind({});
 Rounded.args = {
   rounded: true,
-  color: 'success',
 };
 
 export const Circle = Template.bind({});
 Circle.args = {
   circle: true,
   label: 20,
-  color: 'error',
 };
 
 export const Large = Template.bind({});
 Large.args = {
-  color: 'success',
   large: true,
 };
 
 export const Small = Template.bind({});
 Small.args = {
-  color: 'success',
   small: true,
 };
 
-export const CustomColor = Template.bind({});
-CustomColor.args = {
-  bgColor: 'bg-white',
-  textColor: 'text-info',
-  class: 'border border-info',
+export const Dismissable = Template.bind({});
+Dismissable.args = {
+  dismissable: true,
 };
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  outlined: true,
+};
+
+// export const CustomColor = Template.bind({});
+// CustomColor.args = {
+//   bgColor: 'bg-white',
+//   textColor: 'text-info-500',
+//   class: 'border border-info-500',
+// };

packages/badge/src/VBadge.vue

@@ -5,7 +5,7 @@ import {XIcon} from '@heroicons/vue/outline';
 const props = defineProps({
   color: {
     type: String,
-    default: '',
+    default: 'default',
   },
   rounded: {
     type: Boolean,
@@ -35,6 +35,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  outlined: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const {dismissable} = toRefs(props);
@@ -46,22 +50,34 @@ const colorClass = computed(() => {
     return `${props.bgColor} ${props.textColor}`;
   }
 
-  switch (props.color) {
-    case 'primary':
-      return 'bg-primary-500 text-white';
-    case 'secondary':
-      return 'bg-secondary-500 text-white';
-    case 'error':
-      return 'bg-error-500 text-white';
-    case 'info':
-      return 'bg-info-500 text-white';
-    case 'warning':
-      return 'bg-warning-500 text-white';
-    case 'success':
-      return 'bg-success-500 text-white';
-    default:
-      return 'bg-gray-200 text-gray-900';
+  let colors: Record<string, string>;
+
+  if (props.outlined) {
+    colors = {
+      default: 'bg-transparent border border-gray-800 text-gray-800',
+      primary: 'bg-transparent border border-primary-500 text-primary-500',
+      secondary:
+        'bg-transparent border border-secondary-500 text-secondary-500',
+      info: 'bg-transparent border border-info-500 text-info-500',
+      warning: 'bg-transparent border border-warning-500 text-warning-500',
+      error: 'bg-transparent border border-error-500 text-error-500',
+      success: 'bg-transparent border border-success-500 text-success-500',
+      dark: 'bg-transparent border border-gray-900 text-gray-900',
+    };
+  } else {
+    colors = {
+      default: 'bg-gray-200 text-gray-800',
+      primary: 'bg-primary-500 text-white',
+      secondary: 'bg-secondary-500 text-white',
+      info: 'bg-info-500 text-white',
+      warning: 'bg-warning-500 text-white',
+      error: 'bg-error-500 text-white',
+      success: 'bg-success-500 text-white',
+      dark: 'bg-gray-900 text-white',
+    };
   }
+
+  return colors[props.color];
 });
 
 const sizeClass = computed(() => {
@@ -99,7 +115,7 @@ const circleClass = computed(() => {
 });
 
 const dismissableColor = computed(() => {
-  const colors = {
+  const colors: Record<string, string> = {
     default: 'hover:bg-gray-400 active:bg-gray-300 hover:text-white',
     primary: 'hover:bg-primary-400 active:bg-primary-300',
     secondary: 'hover:bg-secondary-400 active:bg-secondary-300',
@@ -109,7 +125,7 @@ const dismissableColor = computed(() => {
     error: 'hover:bg-error-400 active:bg-error-300',
   };
 
-  return colors[props.color || 'default'];
+  return colors[props.color];
 });
 
 const onDismiss = () => {

packages/badge/src/types.ts

@@ -8,4 +8,6 @@ export type VBadgeProps = {
   circle: boolean;
   label: string | number;
   class: string;
+  dismissable: boolean;
+  outlined: boolean;
 };