feat(组件): 更新badage

docs/.vitepress/i18n/pages/component.json

@@ -8,12 +8,12 @@
           "text": "Icon图标"
         },
         {
-          "link": "/button",
-          "text": "Button按钮"
+          "link": "/badge",
+          "text": "Badge 徽章"
         },
         {
-          "link": "/audio",
-          "text": "Audio音频"
+          "link": "/button",
+          "text": "Button按钮"
         },
         {
           "link": "/input",
@@ -47,4 +47,4 @@
       ]
     }
   }
-}
+}

docs/examples/badge/basic.vue

@@ -0,0 +1,29 @@
+<template>
+  <kk-badge :value="12" class="item">
+    <kk-button>comments</kk-button>
+  </kk-badge>
+  <kk-badge :value="3" class="item">
+    <kk-button>replies</kk-button>
+  </kk-badge>
+  <kk-badge :value="1" class="item" type="primary">
+    <kk-button>comments</kk-button>
+  </kk-badge>
+  <kk-badge :value="2" class="item" type="warning">
+    <kk-button>replies</kk-button>
+  </kk-badge>
+</template>
+
+<script lang="ts" setup>
+import { KkBadge, KkButton } from 'kankan-components'
+</script>
+
+<style scoped>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+
+.el-dropdown {
+  margin-top: 1.1rem;
+}
+</style>

docs/examples/badge/customize.vue

@@ -0,0 +1,17 @@
+<template>
+  <kk-badge value="new" class="item">
+    <kk-button>comments</kk-button>
+  </kk-badge>
+  <kk-badge value="hot" class="item">
+    <kk-button>replies</kk-button>
+  </kk-badge>
+</template>
+<script lang="ts" setup>
+import { KkBadge, KkButton } from 'kankan-components'
+</script>
+<style scoped>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>

docs/examples/badge/dot.vue

@@ -0,0 +1,18 @@
+<template>
+  <kk-badge is-dot class="item">query</kk-badge>
+  <kk-badge is-dot class="item">
+    <kk-button class="share-button" :icon="Share" type="primary" />
+  </kk-badge>
+</template>
+
+<script lang="ts" setup>
+import { Share } from '@kankan-components/icons-vue'
+import { KkBadge, KkButton } from 'kankan-components'
+</script>
+
+<style scoped>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>

docs/examples/badge/max.vue

@@ -0,0 +1,17 @@
+<template>
+  <kk-badge :value="200" :max="99" class="item">
+    <kk-button>comments</kk-button>
+  </kk-badge>
+  <kk-badge :value="100" :max="10" class="item">
+    <kk-button>replies</kk-button>
+  </kk-badge>
+</template>
+<script lang="ts" setup>
+import { KkBadge, KkButton } from 'kankan-components'
+</script>
+<style scoped>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>

docs/examples/message-box/alert.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 import { KkButton, KkMessageBox } from 'kankan-components'
-import type { Action } from 'element-plus'
+import type { Action } from 'kankan-components'
 
 const open = () => {
   KkMessageBox.alert('This is a message', 'Title', {

docs/examples/message-box/confirm.vue

@@ -1,12 +1,11 @@
 <template>
-  <el-button text @click="open">Click to open the Message Box</el-button>
+  <kk-button text @click="open">Click to open the Message Box</kk-button>
 </template>
 
 <script lang="ts" setup>
-import { ElMessage, ElMessageBox } from 'element-plus'
-
+import { KkButton, KkMessage, KkMessageBox } from 'kankan-components'
 const open = () => {
-  ElMessageBox.confirm(
+  KkMessageBox.confirm(
     'proxy will permanently delete the file. Continue?',
     'Warning',
     {
@@ -16,13 +15,13 @@ const open = () => {
     }
   )
     .then(() => {
-      ElMessage({
+      KkMessage({
         type: 'success',
         message: 'Delete completed',
       })
     })
     .catch(() => {
-      ElMessage({
+      KkMessage({
         type: 'info',
         message: 'Delete canceled',
       })

docs/examples/message-box/prompt.vue

@@ -1,12 +1,11 @@
 <template>
-  <el-button text @click="open">Click to open Message Box</el-button>
+  <kk-button text @click="open">Click to open Message Box</kk-button>
 </template>
 
 <script lang="ts" setup>
-import { ElMessage, ElMessageBox } from 'element-plus'
-
+import { KkButton, KkMessage, KkMessageBox } from 'kankan-components'
 const open = () => {
-  ElMessageBox.prompt('Please input your e-mail', 'Tip', {
+  KkMessageBox.prompt('Please input your e-mail', 'Tip', {
     confirmButtonText: 'OK',
     cancelButtonText: 'Cancel',
     inputPattern:
@@ -14,13 +13,13 @@ const open = () => {
     inputErrorMessage: 'Invalid Email',
   })
     .then(({ value }) => {
-      ElMessage({
+      KkMessage({
         type: 'success',
         message: `Your email is:${value}`,
       })
     })
     .catch(() => {
-      ElMessage({
+      KkMessage({
         type: 'info',
         message: 'Input canceled',
       })

docs/examples/minmap/custom.vue

@@ -33,22 +33,8 @@ onUnmounted(() => {
 <template>
   <div id="scene" class="scene">
     <div class="test-control">
-      <kk-button
-        @click="
-          () => {
-            mapShow = true
-          }
-        "
-        >打开小地图</kk-button
-      >
-      <kk-button
-        type="primary"
-        mr4
-        @click="
-          () => {
-            mapShow = false
-          }
-        "
+      <kk-button @click="mapShow = true">打开小地图</kk-button>
+      <kk-button type="primary" mr4 @click="() => (mapShow = false)"
         >关闭小地图</kk-button
       >
     </div>

docs/zh-CN/component/badge.md

@@ -0,0 +1,66 @@
+---
+title: 徽章
+lang: zh-CN
+---
+
+# Badge 徽章
+
+按钮和图标上的数字或状态标记。
+
+## 基础用法
+
+可以用来展示新消息的数量。
+
+:::demo 数量值可接受 Number 或 String。
+
+badge/basic
+
+:::
+
+## 最大值
+
+你还可以自定义最大值
+
+:::demo T 由 max 属性定义，接受 Number 值。 请注意，仅在值也是 Number 时起作用。
+
+badge/max
+
+:::
+
+## 自定义显示内容
+
+你也可以展示除数字以外你想要展示的任何值。
+
+:::demo 当 value 是 String 时，可以显示自定义文字。
+
+badge/customize
+
+:::
+
+## 小红点
+
+通过一个小红点标记来告知用户有新内容。
+
+:::demo 使用 is-dot 属性。 是个布尔值。
+
+badge/dot
+
+:::
+
+## API
+
+### Attributes
+
+| 属性名 | 说明                                                                  | 类型                                                               | 默认值 |
+| ------ | --------------------------------------------------------------------- | ------------------------------------------------------------------ | ------ |
+| value  | 显示值                                                                | ^[string] / ^[number]                                              | ''     |
+| max    | 最大值，超过最大值会显示 `{max}+`。 只有当 value 是数字类型时起作用。 | ^[number]                                                          | 99     |
+| is-dot | 是否显示小圆点。                                                      | ^[boolean]                                                         | false  |
+| hidden | 是否隐藏 Badge。                                                      | ^[boolean]                                                         | false  |
+| type   | badge type.                                                           | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
+
+### Slots
+
+| 插槽名  | 说明           |
+| ------- | -------------- |
+| default | 自定义默认内容 |

docs/zh-CN/component/message-box.md

@@ -7,6 +7,7 @@ lang: en-US
 
 模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
 
+:::demo
 message-box/alert
 
 :::

package.json

@@ -61,7 +61,6 @@
     "@types/gulp": "^4.0.13",
     "@types/jsdom": "^16.2.15",
     "@types/node": "^18.17.5",
-    "@types/sass": "^1.45.0",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
     "@vue/test-utils": "^2.4.1",
@@ -78,6 +77,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "resize-observer-polyfill": "^1.5.1",
+    "rimraf": "^3.0.2",
     "sass": "^1.66.0",
     "typescript": "^4.9.5",
     "unplugin-vue-components": "^0.20.1",

packages/components/basic/badge/index.ts

@@ -2,8 +2,8 @@ import { withInstall } from '@kankan-components/utils'
 
 import Badge from './src/badge.vue'
 
-export const ElBadge = withInstall(Badge)
-export default ElBadge
+export const KkBadge = withInstall(Badge)
+export default KkBadge
 
 export * from './src/badge'
 export type { BadgeInstance } from './src/instance'

packages/components/basic/index.ts

@@ -9,3 +9,4 @@ export * from './focus-trap'
 export * from './message-box'
 export * from './message'
 export * from './form'
+export * from './badge'

packages/components/basic/message-box/src/messageBox.ts

@@ -48,7 +48,7 @@ const getAppendToElement = (props: any): HTMLElement => {
     // should fallback to default value with a warning
     if (!isElement(appendTo)) {
       debugWarn(
-        'ElMessageBox',
+        'KkMessageBox',
         'the appendTo option is not an HTMLElement. Falling back to document.body.'
       )
       appendTo = document.body

packages/components/basic/overlay/__tests__/overlay.test.tsx

@@ -1,45 +0,0 @@
-import { nextTick, ref } from 'vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import Overlay from '../src/overlay'
-
-const AXIOM = 'Rem is the best girl'
-
-describe('Overlay.vue', () => {
-  test('render test', async () => {
-    const wrapper = mount(() => <Overlay>{AXIOM}</Overlay>)
-    expect(wrapper.text()).toEqual(AXIOM)
-    const testClass = 'test-class'
-    await wrapper.setProps({
-      overlayClass: testClass,
-    })
-
-    expect(wrapper.find(`.${testClass}`)).toBeTruthy()
-  })
-
-  test('should emit click event', async () => {
-    const wrapper = mount(() => <Overlay>{AXIOM}</Overlay>)
-    await wrapper.find('.el-overlay').trigger('click')
-    expect(wrapper.emitted()).toBeTruthy()
-  })
-
-  test('no mask', async () => {
-    const mask = ref(true)
-    const wrapper = mount(() => <Overlay mask={mask.value}>{AXIOM}</Overlay>)
-
-    const selector = '.el-overlay'
-    expect(wrapper.find(selector).exists()).toBe(true)
-
-    mask.value = false
-
-    await nextTick()
-
-    expect(wrapper.find(selector).exists()).toBe(false)
-
-    mask.value = true
-
-    await nextTick()
-
-    expect(wrapper.find(selector).exists()).toBe(true)
-  })
-})

packages/hooks/use-namespace/index.ts

@@ -2,7 +2,7 @@ import { computed, getCurrentInstance, inject, ref, unref } from 'vue'
 
 import type { InjectionKey, Ref } from 'vue'
 
-export const defaultNamespace = 'el'
+export const defaultNamespace = 'kk'
 const statePrefix = 'is-'
 
 const _bem = (

packages/kankan-components/component.ts

@@ -3,6 +3,7 @@ import { KkButton } from '@kankan-components/components/basic/button'
 import { KkAudio } from '@kankan-components/components/basic/audio'
 import { KkDialog } from '@kankan-components/components/basic/dialog'
 import { KkInput } from '@kankan-components/components/basic/input'
+import { KkBadge } from '@kankan-components/components/basic/badge'
 
 import { KkTag } from '@kankan-components/components/advance/tag'
 import { KkDaikan } from '@kankan-components/components/advance/daikan'
@@ -15,6 +16,7 @@ export default [
   KkAudio,
   KkDialog,
   KkInput,
+  KkBadge,
   KkTag,
   KkDaikan,
   KkMinmap,

packages/theme-chalk/src/badge.scss

@@ -0,0 +1,54 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(badge) {
+  @include set-component-css-var('badge', $badge);
+
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+  width: fit-content;
+
+  @include e(content) {
+    background-color: getCssVar('badge', 'bg-color');
+    border-radius: getCssVar('badge', 'radius');
+    color: getCssVar('color', 'white');
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: getCssVar('badge', 'font-size');
+    height: getCssVar('badge', 'size');
+    padding: 0 getCssVar('badge', 'padding');
+    white-space: nowrap;
+    border: 1px solid getCssVar('bg-color');
+
+    @include when(fixed) {
+      position: absolute;
+      top: 0;
+      right: calc(1px + #{getCssVar('badge', 'size')} / 2);
+      transform: translateY(-50%) translateX(100%);
+      z-index: getCssVar('index', 'normal');
+
+      @include when(dot) {
+        right: 5px;
+      }
+    }
+
+    @include when(dot) {
+      height: 8px;
+      width: 8px;
+      padding: 0;
+      right: 0;
+      border-radius: 50%;
+    }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        background-color: getCssVar('color', $type);
+      }
+    }
+  }
+}

packages/theme-chalk/src/index.scss

@@ -2,6 +2,7 @@
 // component styles
 @use './icon.scss';
 @use './button.scss';
+@use './badge.scss';
 
 @use './audio.scss';
 @use './overlay.scss';

pnpm-lock.yaml

@@ -84,9 +84,6 @@ importers:
       '@types/node':
         specifier: ^18.17.5
         version: 18.17.5
-      '@types/sass':
-        specifier: ^1.45.0
-        version: 1.45.0
       '@vitejs/plugin-vue':
         specifier: ^3.2.0
         version: 3.2.0(vite@3.2.7)(vue@3.3.4)
@@ -135,6 +132,9 @@ importers:
       resize-observer-polyfill:
         specifier: ^1.5.1
         version: 1.5.1
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
       sass:
         specifier: ^1.66.0
         version: 1.66.0
@@ -4982,13 +4982,6 @@ packages:
     dependencies:
       '@types/node': 20.5.0
 
-  /@types/sass@1.45.0:
-    resolution: {integrity: sha512-jn7qwGFmJHwUSphV8zZneO3GmtlgLsmhs/LQyVvQbIIa+fzGMUiHI4HXJZL3FT8MJmgXWbLGiVVY7ElvHq6vDA==}
-    deprecated: This is a stub types definition. sass provides its own type definitions, so you do not need this installed.
-    dependencies:
-      sass: 1.66.0
-    dev: true
-
   /@types/semver@6.2.3:
     resolution: {integrity: sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==}