feat(Badge): add new badge variant: dot

gitsindonesia · Jun 14, 2023 · bf4b46f · bf4b46f
1 parent d227bf3
commit bf4b46f
Show file tree

Hide file tree

Showing 4 changed files with 223 additions and 28 deletions.
diff --git a/packages/badge/src/VBadge.stories.ts b/packages/badge/src/VBadge.stories.ts
@@ -1,3 +1,5 @@
+import { VBtn } from '@morpheme/button';
+import { Single } from './../../menu/src/VMenu.stories';
 import VBadge from './VBadge.vue';
 import type {VBadgeProps} from './types';
 import {Story, Meta} from '@storybook/vue3';
@@ -203,6 +205,61 @@ CustomClass.parameters = {
   },
 };
 
+export const Dot: Story<VBadgeProps> = (args) => ({
+  components: {
+    VBadge,
+    VBtn
+  },
+  setup() {
+    return {args};
+  },
+  template: `
+    <h3 class="mb-2 font-semibold">Default</h3>
+    <VBtn prefix-icon="ri:notification-3-line">
+      <VBadge color="primary" dot />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" text>
+      <VBadge color="error" dot />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" icon fab>
+      <VBadge color="error" dot />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" icon fab text>
+      <VBadge color="error" dot />
+    </VBtn>
+    <h3 class="mb-2 font-semibold">Dot Size</h3>
+    <VBtn prefix-icon="ri:notification-3-line" text>
+      <VBadge color="primary" dot dot-size="sm" />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" text>
+      <VBadge color="primary" dot dot-size="md" />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" text>
+      <VBadge color="primary" dot dot-size="lg" />
+    </VBtn>
+    <h3 class="mb-2 font-semibold">With Offset</h3>
+    <VBtn prefix-icon="ri:notification-3-line" fab icon text>
+      <VBadge color="primary" dot dot-offset="1" />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" fab icon text>
+      <VBadge color="primary" dot dot-offset="2" />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" fab icon text>
+      <VBadge color="primary" dot dot-offset="3" />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" fab icon text>
+      <VBadge color="primary" dot dot-offset="4" />
+    </VBtn>
+    <h3 class="mb-2 font-semibold">Left Position</h3>
+    <VBtn prefix-icon="ri:notification-3-line" fab icon text>
+      <VBadge color="primary" dot dot-offset="1" dot-left />
+    </VBtn>
+    <VBtn prefix-icon="ri:notification-3-line" fab icon text>
+      <VBadge color="primary" dot dot-offset="1" />
+    </VBtn>
+  `,
+});
+
 export const DarkMode = () => ({
   components: {VBadge},
   setup() {

diff --git a/packages/badge/src/VBadge.vue b/packages/badge/src/VBadge.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import {computed, PropType} from 'vue';
-import Icon from '@morpheme/icon';
-import {DefaultColors, DefaultRounded} from '@morpheme/theme/defaultTheme';
+import { computed, PropType } from "vue";
+import Icon from "@morpheme/icon";
+import { DefaultColors, DefaultRounded } from "@morpheme/theme/defaultTheme";
 
 export type BadgeColors = DefaultColors | string;
 
 const props = defineProps({
   color: {
     type: String as PropType<BadgeColors>,
-    default: 'default',
+    default: "default",
   },
   rounded: {
     type: [Boolean, String] as PropType<boolean | DefaultRounded>,
@@ -27,17 +27,17 @@ const props = defineProps({
    */
   bgColor: {
     type: String,
-    default: '',
+    default: "",
   },
   /**
    * @deprecated use `color` prop instead
    */
   textColor: {
     type: String,
-    default: 'text-white',
+    default: "text-white",
   },
   /**
-   * @deprecated use `rounded="none"` instead
+   * @deprecated use `rounded="full"` instead
    */
   circle: {
     type: Boolean,
@@ -51,50 +51,69 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  dot: {
+    type: Boolean,
+    default: false,
+  },
+  dotOffset: {
+    type: [String, Number],
+    default: 0,
+  },
+  dotSize: {
+    type: String as PropType<"sm" | "md" | "lg" | string>,
+    default: "md",
+  },
+  dotLeft: {
+    type: Boolean,
+    default: false,
+  },
   closeIcon: {
     type: String,
-    default: 'ri:close-line',
+    default: "ri:close-line",
   },
   iconSize: {
     type: [String, Number],
-    default: 'xs',
+    default: "xs",
   },
 });
 
-const emit =
-  defineEmits<{
-    (e: 'dismiss'): void;
-  }>();
+const emit = defineEmits<{
+  (e: "dismiss"): void;
+}>();
 
 const onDismiss = () => {
-  emit('dismiss');
+  emit("dismiss");
 };
 
 const classes = computed(() => {
   const roundedClass =
-    typeof props.rounded === 'string'
-      ? {[`badge--rounded-${props.rounded}`]: !!props.rounded}
+    typeof props.rounded === "string"
+      ? { [`badge--rounded-${props.rounded}`]: !!props.rounded }
       : props.rounded
       ? `badge--rounded`
-      : '';
+      : "";
 
   return [
-    'badge',
+    "badge",
     `badge-${props.color}`,
     roundedClass,
     {
-      'badge--sm': props.small,
-      'badge--lg': props.large,
-      'badge--outlined': props.outlined,
-      'badge--dismissable': props.dismissable,
+      "badge--sm": props.small,
+      "badge--lg": props.large,
+      "badge--outlined": props.outlined,
+      "badge--dismissable": props.dismissable,
+      "badge--dot": props.dot,
+      "badge--dot--left": props.dotLeft,
+      [`badge--dot--offset-${props.dotOffset}`]: !!props.dotOffset,
+      [`badge--dot--${props.dotSize}`]: !!props.dotSize,
     },
   ];
 });
 </script>
 
 <template>
   <span :class="classes">
-    <slot />
+    <slot v-if="!dot" />
     <slot name="dismissable" :dismiss="onDismiss">
       <button
         v-if="dismissable"