feat: add Badge

daief · Nov 14, 2021 · d887e29 · d887e29
1 parent dabe437
commit d887e29
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 2 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,6 +9,12 @@
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/themes.css"
     />
     <!-- __GOOGLE_GA__ -->
+    <style>
+      :root {
+        background-color: hsla(var(--b1) / var(--tw-bg-opacity, 1));
+        color: hsla(var(--bc) / var(--tw-text-opacity, 1));
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>

diff --git a/docs/src/pages/components/badge.md b/docs/src/pages/components/badge.md
@@ -0,0 +1,147 @@
+# Badge
+
+## Examples
+
+badge
+
+```html :::demo
+<div
+  class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
+>
+  <dv-badge>netural</dv-badge>
+  <dv-badge type="primary">primary</dv-badge>
+  <dv-badge type="secondary">secondary</dv-badge>
+  <dv-badge type="accent">accent</dv-badge>
+  <dv-badge type="ghost">ghost</dv-badge>
+  <dv-badge type="info">info</dv-badge>
+  <dv-badge type="success">success</dv-badge>
+  <dv-badge type="warning">warning</dv-badge>
+  <dv-badge type="error">error</dv-badge>
+</div>
+```
+
+badge size
+
+```html :::demo
+<div
+  class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
+>
+  <dv-badge size="lg">987,654</dv-badge>
+  <dv-badge size="md">987,654</dv-badge>
+  <dv-badge size="sm">987,654</dv-badge>
+  <dv-badge size="xs">987,654</dv-badge>
+</div>
+```
+
+empty badge
+
+```html :::demo
+<div
+  class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
+>
+  <dv-badge size="lg" />
+  <dv-badge size="md" />
+  <dv-badge size="sm" />
+  <dv-badge size="xs" />
+</div>
+```
+
+badge variants
+
+```html :::demo
+<div
+  class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
+>
+  <dv-badge type="primary">
+    <dv-icon-close size="14px" class="mr-1" />
+    primary
+  </dv-badge>
+  <dv-badge type="info">
+    <dv-icon-close size="14px" class="mr-1" />
+    info
+  </dv-badge>
+  <dv-badge type="warning">
+    <dv-icon-close size="14px" class="mr-1" />
+    warning
+  </dv-badge>
+  <dv-badge type="error">
+    <dv-icon-close size="14px" class="mr-1" />
+    error
+  </dv-badge>
+</div>
+```
+
+badge outline
+
+```html :::demo
+<div
+  class="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row"
+>
+  <dv-badge outline>netural</dv-badge>
+  <dv-badge outline type="primary">primary</dv-badge>
+  <dv-badge outline type="secondary">secondary</dv-badge>
+  <dv-badge outline type="accent">accent</dv-badge>
+</div>
+```
+
+badge in text
+
+```html :::demo
+<div>
+  <h2 class="mb-2 text-2xl">
+    Heading
+    <dv-badge outline size="lg">New</dv-badge>
+  </h2>
+  <h2 class="mb-2 text-xl">
+    Heading
+    <dv-badge outline size="md">New</dv-badge>
+  </h2>
+  <h2 class="mb-2 text-lg">
+    Heading
+    <dv-badge outline size="md">New</dv-badge>
+  </h2>
+  <h2 class="mb-2 text-md">
+    Heading
+    <dv-badge outline size="sm">New</dv-badge>
+  </h2>
+  <h2 class="text-sm">
+    Heading
+    <dv-badge outline size="sm">New</dv-badge>
+  </h2>
+</div>
+```
+
+badge in button
+
+```html :::demo
+<div
+  class="flex flex-wrap items-start md:space-x-2 space-x-0 space-y-2 md:space-y-0 flex-col md:flex-row"
+>
+  <dv-button>
+    Version 2.7.0
+    <dv-badge class="ml-2">new</dv-badge>
+  </dv-button>
+  <dv-button type="primary">
+    Inbox
+    <dv-badge class="ml-2" outline>3</dv-badge>
+  </dv-button>
+  <dv-button type="secondary">
+    Notifications
+    <dv-badge class="ml-2" outline>+999</dv-badge>
+  </dv-button>
+  <dv-button type="accent">
+    Accent
+    <dv-badge class="ml-2" outline>new</dv-badge>
+  </dv-button>
+</div>
+```
+
+## Badge
+
+### Attributes
+
+| name    | description                              | type                                                                                   | default |
+| ------- | ---------------------------------------- | -------------------------------------------------------------------------------------- | ------- |
+| type    | color type                               | netural, primary, secondary, accent, info, success, warning, error, ghost, link, glass | netural |
+| size    | size                                     | ISize                                                                                  | md      |
+| outline | transparent badge with [colorful] border | boolean                                                                                | false   |
diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue
@@ -10,7 +10,7 @@ export default {
       <div>
         <h1 class="text-2xl">daisyui vue(WIP)</h1>
         <p class="mt-4">
-          Vue3 components base on{' '}
+          Vue3 UI components based on{' '}
           <a
             href="https://github.com/saadeghi/daisyui"
             class="text-blue-400 underline"

diff --git a/src/components/badge/index.tsx b/src/components/badge/index.tsx
@@ -0,0 +1,45 @@
+import { component } from '@/shared/styled';
+import {
+  BoolConstructorToBase,
+  IColorType,
+  ISize,
+} from '@/shared/types/common';
+import { computed } from 'vue';
+import style from './style';
+
+export interface IBadgeProps {
+  type?: IColorType | 'ghost';
+  size?: ISize;
+}
+
+const props = {
+  outline: { type: Boolean, default: void 0 },
+};
+
+export const Badge = component<
+  IBadgeProps,
+  BoolConstructorToBase<typeof props>
+>(
+  {
+    name: 'Badge',
+    props,
+    setup: (props, { attrs, slots }) => {
+      const size = computed(() => attrs.size || 'md');
+      const outline = computed(() => props.outline || false);
+
+      return () => (
+        <div
+          class={{
+            'dv-badge badge': true,
+            [`badge-${attrs.type}`]: attrs.type,
+            [`badge-${size.value}`]: size.value,
+            [`badge-outline`]: outline.value,
+          }}
+        >
+          {slots.default?.()}
+        </div>
+      );
+    },
+  },
+  style,
+);
diff --git a/src/components/badge/style/index.ts b/src/components/badge/style/index.ts
@@ -0,0 +1,8 @@
+import s1 from '@styles/components/unstyled/badge.css';
+import s2 from '@styles/components/styled/badge.css';
+import s3 from '@styles/utilities/unstyled/badge.css';
+import s4 from '@styles/utilities/styled/badge.css';
+
+import s from './style.less';
+
+export default [s1, s2, s3, s4, s];
diff --git a/src/components/badge/style/style.less b/src/components/badge/style/style.less
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -1,5 +1,6 @@
 export * from './alert';
 export * from './artboard';
+export * from './badge';
 export * from './button';
 export * from './drawer';
 export * from './menu';