feat(app): 8 add Badge

This pull request is intended to add the Badge component.

Closes: 8

packages/windi/src/App.vue

@@ -16,6 +16,12 @@ function handleClose() {
       <WAvatar src="https://github.cm/selemondev.png" name="Selemon" initials="SB" />
     </WAvatarGroup>
   </div>
+
+  <div class="grid place-items-center w-full min-h-screen">
+    <WBadge position="top-right" value="100" :max-value="99" variant="primary">
+      <WIcon name="ph:bell" size="3xl" />
+    </WBadge>
+  </div>
   <div class="mt-48 p-4 space-y-2">
     <WAlert :is-visible="show" icon="ph:sun" :trailing="false" variant="danger-light" transition="slideRight" title="Alert" closable @close="handleClose">
       <WAlertDescription>

packages/windi/src/Types/componentsTypes/components.ts

@@ -36,10 +36,20 @@ export interface WAvatarGroup extends WComponentRoot {
   reverse?: string
 }
 
+export interface WBadge extends WComponentRoot {
+  default?: string
+  body?: string
+  chip?: string
+  badgePosition?: string
+  square?: string
+}
+
 export type WAlertVariants = WithVariantProps<WAlert>
 
 export type WAvatarVariants = WithVariantProps<WAvatar>
 
 export type WIconVariants = WithVariantProps<WIcon>
 
 export type WAvatarGroupVariants = WithVariantProps<WAvatarGroup>
+
+export type WBadgeVariants = WithVariantProps<WBadge>

packages/windi/src/Types/enums/Components.ts

@@ -4,4 +4,5 @@ export enum Components {
   WIcon = 'WIcon',
   WAvatar = 'WAvatar',
   WAvatarGroup = 'WAvatarGroup',
+  WBadge = 'WBadge',
 }

packages/windi/src/Types/variant.ts

@@ -1,5 +1,5 @@
 import type { Components } from './enums/Components'
-import type { WAlertVariants, WAvatarGroup, WAvatarVariants, WIconVariants } from './componentsTypes/components'
+import type { WAlertVariants, WAvatarGroup, WAvatarVariants, WBadgeVariants, WIconVariants } from './componentsTypes/components'
 
 export declare interface CSSClassKeyValuePair {
   [key: string]: any
@@ -34,5 +34,6 @@ export interface WindiUIConfiguration {
   [Components.WAvatar]?: WAvatarVariants
   [Components.WIcon]?: WIconVariants
   [Components.WAvatarGroup]?: WAvatarGroup
+  [Components.WBadge]?: WBadgeVariants
 
 }

packages/windi/src/components/Badge/WBadge.vue

@@ -0,0 +1,88 @@
+<script setup lang='ts'>
+import { computed, defineComponent, useSlots } from 'vue'
+import classNames from 'classnames'
+import { Positions } from '../../Types/enums/Positions'
+import { Components } from '../../Types/enums/Components'
+import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
+import type { WBadge } from '../../Types/componentsTypes/components'
+import { useVariants } from '../../composables/useVariants'
+import windiTheme from '../../theme/windiTheme'
+
+const props = defineProps({
+  ...getVariantPropsWithClassesList<WBadge>(),
+  square: {
+    type: Boolean,
+    default: false,
+  },
+  chip: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: String,
+    default: Positions.TR,
+  },
+  maxValue: {
+    type: Number,
+    default: null,
+  },
+  value: {
+    type: [String, Number],
+    default: null,
+  },
+})
+
+const variant = useVariants<WBadge>(Components.WBadge, props)
+const slots = useSlots()
+const badgeValue = computed(() => {
+  if (props.chip || !props.value)
+    return
+
+  if (props.maxValue !== null)
+    return Number(props.value) > props.maxValue ? `${props.maxValue}+` : props.value
+
+  else
+    return props.value
+})
+
+const badgePosition = computed(() => {
+  return classNames(
+    slots.default && windiTheme.WBadge.base.badgePosition[props.position],
+  )
+})
+
+const badgeChip = computed(() => {
+  return classNames(
+    props.chip && variant.chip,
+  )
+})
+
+const badgeSquare = computed(() => {
+  return classNames(
+    props.square && variant.square,
+  )
+})
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: Components.WBadge,
+})
+</script>
+
+<template>
+  <div :class="variant.root">
+    <span :class="variant.default">
+      <slot />
+      <Transition v-bind="variant.transitions?.fade">
+        <span
+          :class="[
+            variant.body, badgePosition, badgeChip, badgeSquare,
+          ]"
+        >
+          <slot name="badgeValue">{{ badgeValue }}</slot>
+        </span>
+      </Transition>
+    </span>
+  </div>
+</template>

packages/windi/src/components/Badge/index.ts

@@ -0,0 +1,5 @@
+import Badge from './WBadge.vue'
+
+export default {
+  Badge,
+}

packages/windi/src/index.ts

@@ -6,6 +6,7 @@ import Avatar from './components/Avatar/WAvatar.vue'
 import Icon from './components/Icon/WIcon.vue'
 import type { WindiUIConfiguration } from './Types/variant'
 import AvatarGroup from './components/Avatar/WAvatarGroup.vue'
+import Badge from './components/Badge/WBadge.vue'
 import windiTheme from './theme/windiTheme'
 
 const components: Record<string, ReturnType<typeof defineComponent>> = {
@@ -14,6 +15,7 @@ const components: Record<string, ReturnType<typeof defineComponent>> = {
   Icon,
   Avatar,
   AvatarGroup,
+  Badge,
 }
 
 function install(app: App, configuration: WindiUIConfiguration) {
@@ -29,3 +31,4 @@ export { default as AlertDescription } from './components/Alert'
 export { default as Icon } from './components/Icon'
 export { default as Avatar } from './components/Avatar'
 export { default as AvatarGroup } from './components/Avatar'
+export { default as Badge } from './components/Badge'

packages/windi/src/theme/windiTheme.ts

@@ -147,6 +147,42 @@ export default {
     },
   },
 
+  WBadge: {
+    base: {
+      root: 'flex items-center',
+      default: 'relative',
+      body: 'text-xs text-white rounded-xl px-1.5 border !border-white dark:border-neutral-800 inline-block ',
+      chip: 'w-3 h-3 !p-0',
+      square: '!rounded-[5px]',
+      badgePosition: {
+        'top-left': 'absolute top-0 left-0 -translate-x-[45%] -translate-y-[45%]',
+        'top-right': 'absolute top-0 right-0 translate-x-[45%] -translate-y-[45%]',
+        'bottom-right':
+          'absolute bottom-0 right-0 translate-x-[45%] translate-y-[45%]',
+        'bottom-left':
+          'absolute bottom-0 left-0 -translate-x-[45%] translate-y-[45%]',
+      },
+    },
+
+    variants: {
+      default: {
+        body: 'bg-yellow-500',
+      },
+      primary: {
+        body: 'bg-blue-500',
+      },
+      success: {
+        body: 'bg-green-500',
+      },
+      warning: {
+        body: 'bg-orange-500',
+      },
+      danger: {
+        body: 'bg-red-500',
+      },
+    },
+  },
+
   WAvatar: {
     base: {
       'root': 'relative cursor-pointer inline-flex items-center justify-center bg-gray-100 rounded-full',