feat(组件): dailog配置

docs/.vitepress/config/plugins.ts

@@ -5,6 +5,8 @@ import mdContainer from 'markdown-it-container'
 import { docRoot } from '@kankan-components/build-utils'
 import externalLinkIcon from '../plugins/external-link-icon'
 import tableWrapper from '../plugins/table-wrapper'
+import tooltip from '../plugins/tooltip'
+import { ApiTableContainer } from '../plugins/api-table'
 import { highlight } from '../utils/highlight'
 import type Token from 'markdown-it/lib/token'
 import type Renderer from 'markdown-it/lib/renderer'
@@ -26,6 +28,7 @@ interface ContainerOpts {
 export const mdPlugin = (md: MarkdownIt) => {
   md.use(externalLinkIcon)
   md.use(tableWrapper)
+  md.use(tooltip)
   // demo apply
   md.use(mdContainer, 'demo', {
     validate(params) {
@@ -90,4 +93,6 @@ export const mdPlugin = (md: MarkdownIt) => {
       }
     },
   } as ContainerOpts)
+
+  md.use(ApiTableContainer)
 }

docs/.vitepress/plugins/api-table.ts

@@ -0,0 +1,40 @@
+import markdown from 'markdown-it'
+
+import type MarkdownIt from 'markdown-it'
+
+const ApiMd = new markdown()
+
+export const ApiTableContainer = (md: MarkdownIt) => {
+  const fence = md.renderer.rules.fence!
+
+  ApiMd.renderer.rules = md.renderer.rules
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx, ...rest] = args
+    const [options, env] = rest
+    const token = tokens[idx]
+    if (token.info === 'api') {
+      const newTokens = md.parse(token.content, env)
+
+      let result = ''
+      const { rules } = md.renderer
+      newTokens.forEach((newToken, idx) => {
+        const { type } = newToken
+        if (type === 'inline') {
+          result += md.renderer.renderInline(newToken.children!, options, env)
+        } else if (typeof rules[type] !== 'undefined') {
+          result += rules[newToken.type]!(
+            newTokens,
+            idx,
+            options,
+            env,
+            md.renderer
+          )
+        } else {
+          result += md.renderer.renderToken(newTokens, idx, options)
+        }
+      })
+      return result
+    }
+    return fence.call(md, ...args)
+  }
+}

docs/.vitepress/vitepress/components/demo/vp-example.vue

@@ -58,7 +58,7 @@ const store = new ReplStore({
 
 watchEffect(async () => {
   if (!unref(props.isRepl)) {
-    await loadKanKanThemeChalkStyle()
+    // await loadKanKanThemeChalkStyle()
   } else {
     if (unref(props.raw)) {
       store.setImportMap({

docs/examples/audio/basic.vue

@@ -1,11 +1,11 @@
 <template>
   <div m4>
-    <UIAudio
+    <kk-audio
       src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { UIAudio } from 'kankan-components'
+import { KkAudio } from 'kankan-components'
 </script>

docs/examples/button/custom.vue

@@ -1,15 +1,16 @@
 <script lang="ts" setup>
+import { KkButton } from 'kankan-components'
 import { isDark } from '~/composables/dark'
 </script>
 
 <template>
   <div class="flex">
-    <el-button color="#626aef" :dark="isDark">Default</el-button>
-    <el-button color="#626aef" :dark="isDark" plain>Plain</el-button>
+    <kk-button color="#626aef" :dark="isDark">Default</kk-button>
+    <kk-button color="#626aef" :dark="isDark" plain>Plain</kk-button>
 
-    <el-button color="#626aef" :dark="isDark" disabled>Disabled</el-button>
-    <el-button color="#626aef" :dark="isDark" disabled plain
-      >Disabled Plain</el-button
+    <kk-button color="#626aef" :dark="isDark" disabled>Disabled</kk-button>
+    <kk-button color="#626aef" :dark="isDark" disabled plain
+      >Disabled Plain</kk-button
     >
   </div>
 </template>

docs/examples/button/group.vue

@@ -1,19 +1,20 @@
 <template>
-  <el-button-group>
-    <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
-    <el-button type="primary">
+  <kk-button-group mb4>
+    <kk-button type="primary" :icon="ArrowLeft">Previous Page</kk-button>
+    <kk-button type="primary">
       Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
-    </el-button>
-  </el-button-group>
+    </kk-button>
+  </kk-button-group>
 
-  <el-button-group class="ml-4">
-    <el-button type="primary" :icon="Edit" />
-    <el-button type="primary" :icon="Share" />
-    <el-button type="primary" :icon="Delete" />
-  </el-button-group>
+  <kk-button-group ml4>
+    <kk-button type="primary" :icon="Edit" />
+    <kk-button type="primary" :icon="Share" />
+    <kk-button type="primary" :icon="Delete" />
+  </kk-button-group>
 </template>
 
 <script setup lang="ts">
+import { KkButton, KkButtonGroup } from 'kankan-components'
 import {
   ArrowLeft,
   ArrowRight,

docs/examples/button/icon.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="flex">
-    <el-button type="primary" :icon="Edit" />
-    <el-button type="primary" :icon="Share" />
-    <el-button type="primary" :icon="Delete" />
-    <el-button type="primary" :icon="Search">Search</el-button>
-    <el-button type="primary">
+    <kk-button type="primary" :icon="Edit" />
+    <kk-button type="primary" :icon="Share" />
+    <kk-button type="primary" :icon="Delete" />
+    <kk-button type="primary" :icon="Search">Search</kk-button>
+    <kk-button type="primary">
       Upload<el-icon class="el-icon--right"><Upload /></el-icon>
-    </el-button>
+    </kk-button>
   </div>
 </template>
 <script setup lang="ts">
+import { KkButton } from 'kankan-components'
 import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
 </script>

docs/examples/button/link.vue

@@ -1,29 +1,30 @@
 <template>
   <p>Basic link button</p>
   <div class="flex justify-space-between mb-4 flex-wrap gap-4">
-    <el-button
+    <kk-button
       v-for="button in buttons"
       :key="button.text"
       :type="button.type"
       link
-      >{{ button.text }}</el-button
+      >{{ button.text }}</kk-button
     >
   </div>
 
   <p>Disabled link button</p>
   <div class="flex justify-space-between flex-wrap gap-4">
-    <el-button
+    <kk-button
       v-for="button in buttons"
       :key="button.text"
       :type="button.type"
       link
       disabled
-      >{{ button.text }}</el-button
+      >{{ button.text }}</kk-button
     >
   </div>
 </template>
 
 <script setup lang="ts">
+import { KkButton } from 'kankan-components'
 const buttons = [
   { type: '', text: 'plain' },
   { type: 'primary', text: 'primary' },

docs/examples/button/loading.vue

@@ -1,7 +1,7 @@
 <template>
-  <el-button type="primary" loading>Loading</el-button>
-  <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>
-  <el-button type="primary" loading>
+  <kk-button type="primary" loading>Loading</kk-button>
+  <kk-button type="primary" :loading-icon="Eleme" loading>Loading</kk-button>
+  <kk-button type="primary" loading>
     <template #loading>
       <div class="custom-loading">
         <svg class="circular" viewBox="-10, -10, 50, 50">
@@ -21,26 +21,27 @@
       </div>
     </template>
     Loading
-  </el-button>
+  </kk-button>
 </template>
 
 <script lang="ts" setup>
+import { KkButton } from 'kankan-components'
 import { Eleme } from '@element-plus/icons-vue'
 </script>
 
 <style scoped>
-.el-button .custom-loading .circular {
+.kk-button .custom-loading .circular {
   margin-right: 6px;
   width: 18px;
   height: 18px;
   animation: loading-rotate 2s linear infinite;
 }
-.el-button .custom-loading .circular .path {
+.kk-button .custom-loading .circular .path {
   animation: loading-dash 1.5s ease-in-out infinite;
   stroke-dasharray: 90, 150;
   stroke-dashoffset: 0;
   stroke-width: 2;
-  stroke: var(--el-button-text-color);
+  stroke: var(--kk-button-text-color);
   stroke-linecap: round;
 }
 </style>

docs/examples/button/size.vue

@@ -1,27 +1,28 @@
 <template>
   <el-row>
-    <el-button size="large">Large</el-button>
-    <el-button>Default</el-button>
-    <el-button size="small">Small</el-button>
-    <el-button size="large" :icon="Search">Search</el-button>
-    <el-button :icon="Search">Search</el-button>
-    <el-button size="small" :icon="Search">Search</el-button>
+    <kk-button size="large">Large</kk-button>
+    <kk-button>Default</kk-button>
+    <kk-button size="small">Small</kk-button>
+    <kk-button size="large" :icon="Search">Search</kk-button>
+    <kk-button :icon="Search">Search</kk-button>
+    <kk-button size="small" :icon="Search">Search</kk-button>
   </el-row>
   <el-row class="my-4">
-    <el-button size="large" round>Large</el-button>
-    <el-button round>Default</el-button>
-    <el-button size="small" round>Small</el-button>
-    <el-button size="large" :icon="Search" round>Search</el-button>
-    <el-button :icon="Search" round>Search</el-button>
-    <el-button size="small" :icon="Search" round>Search</el-button>
+    <kk-button size="large" round>Large</kk-button>
+    <kk-button round>Default</kk-button>
+    <kk-button size="small" round>Small</kk-button>
+    <kk-button size="large" :icon="Search" round>Search</kk-button>
+    <kk-button :icon="Search" round>Search</kk-button>
+    <kk-button size="small" :icon="Search" round>Search</kk-button>
   </el-row>
   <el-row>
-    <el-button :icon="Search" size="large" circle />
-    <el-button :icon="Search" circle />
-    <el-button :icon="Search" size="small" circle />
+    <kk-button :icon="Search" size="large" circle />
+    <kk-button :icon="Search" circle />
+    <kk-button :icon="Search" size="small" circle />
   </el-row>
 </template>
 
 <script setup lang="ts">
+import { KkButton } from 'kankan-components'
 import { Search } from '@element-plus/icons-vue'
 </script>

docs/examples/button/text.vue

@@ -1,41 +1,42 @@
 <template>
   <p>Basic text button</p>
   <div class="flex justify-space-between mb-4 flex-wrap gap-4">
-    <el-button
+    <kk-button
       v-for="button in buttons"
       :key="button.text"
       :type="button.type"
       text
-      >{{ button.text }}</el-button
+      >{{ button.text }}</kk-button
     >
   </div>
 
   <p>Background color always on</p>
   <div class="flex justify-space-between mb-4 flex-wrap gap-4">
-    <el-button
+    <kk-button
       v-for="button in buttons"
       :key="button.text"
       :type="button.type"
       text
       bg
-      >{{ button.text }}</el-button
+      >{{ button.text }}</kk-button
     >
   </div>
 
   <p>Disabled text button</p>
   <div class="flex justify-space-between flex-wrap gap-4">
-    <el-button
+    <kk-button
       v-for="button in buttons"
       :key="button.text"
       :type="button.type"
       text
       disabled
-      >{{ button.text }}</el-button
+      >{{ button.text }}</kk-button
     >
   </div>
 </template>
 
 <script setup lang="ts">
+import { KkButton } from 'kankan-components'
 const buttons = [
   { type: '', text: 'plain' },
   { type: 'primary', text: 'primary' },

docs/examples/dialog/align-center.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-button text @click="centerDialogVisible = true">
+  <kk-button text @click="centerDialogVisible = true">
     Click to open the Dialog
-  </el-button>
+  </kk-button>
 
-  <el-dialog
+  <kk-dialog
     v-model="centerDialogVisible"
     title="Warning"
     width="30%"
@@ -12,17 +12,17 @@
     <span>Open the dialog from the center from the screen</span>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="centerDialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="centerDialogVisible = false">
+        <kk-button @click="centerDialogVisible = false">Cancel</kk-button>
+        <kk-button type="primary" @click="centerDialogVisible = false">
           Confirm
-        </el-button>
+        </kk-button>
       </span>
     </template>
-  </el-dialog>
+  </kk-dialog>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
-
+import { KkButton, KkDialog } from 'kankan-components'
 const centerDialogVisible = ref(false)
 </script>
 <style scoped>

docs/examples/dialog/basic-usage.vue

@@ -3,7 +3,7 @@
     打开对话框
   </kk-button>
 
-  <ui-dialog
+  <kk-dialog
     v-model="dialogVisible"
     title="Tips"
     width="30%"
@@ -12,29 +12,23 @@
     <span>This is a message</span>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
+        <kk-button @click="dialogVisible = false">Cancel</kk-button>
+        <kk-button type="primary" @click="dialogVisible = false">
           Confirm
-        </el-button>
+        </kk-button>
       </span>
     </template>
-  </ui-dialog>
+  </kk-dialog>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { KkButton, UiDialog } from 'kankan-components'
+import { KkButton, KkDialog } from 'kankan-components'
 
 const dialogVisible = ref(false)
 
 const handleClose = (done: () => void) => {
-  // ElMessageBox.confirm('Are you sure to close this dialog?')
-  //   .then(() => {
-  //     done()
-  //   })
-  //   .catch(() => {
-  //     // catch error
-  //   })
+  done()
 }
 </script>
 <style scoped>

docs/examples/dialog/centered-content.vue

@@ -1,25 +1,26 @@
 <template>
-  <el-button text @click="centerDialogVisible = true">
+  <kk-button text @click="centerDialogVisible = true">
     Click to open the Dialog
-  </el-button>
+  </kk-button>
 
-  <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
+  <kk-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
     <span>
       It should be noted that the content will not be aligned in center by
       default
     </span>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="centerDialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="centerDialogVisible = false">
+        <kk-button @click="centerDialogVisible = false">Cancel</kk-button>
+        <kk-button type="primary" @click="centerDialogVisible = false">
           Confirm
-        </el-button>
+        </kk-button>
       </span>
     </template>
-  </el-dialog>
+  </kk-dialog>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { KkButton, KkDialog } from 'kankan-components'
 
 const centerDialogVisible = ref(false)
 </script>

docs/examples/dialog/customization-content.vue

@@ -1,22 +1,22 @@
 <template>
-  <el-button text @click="dialogTableVisible = true">
+  <kk-button text @click="dialogTableVisible = true">
     open a Table nested Dialog
-  </el-button>
+  </kk-button>
 
-  <el-dialog v-model="dialogTableVisible" title="Shipping address">
+  <kk-dialog v-model="dialogTableVisible" title="Shipping address">
     <el-table :data="gridData">
       <el-table-column property="date" label="Date" width="150" />
       <el-table-column property="name" label="Name" width="200" />
       <el-table-column property="address" label="Address" />
     </el-table>
-  </el-dialog>
+  </kk-dialog>
 
   <!-- Form -->
-  <el-button text @click="dialogFormVisible = true">
+  <kk-button text @click="dialogFormVisible = true">
     open a Form nested Dialog
-  </el-button>
+  </kk-button>
 
-  <el-dialog v-model="dialogFormVisible" title="Shipping address">
+  <kk-dialog v-model="dialogFormVisible" title="Shipping address">
     <el-form :model="form">
       <el-form-item label="Promotion name" :label-width="formLabelWidth">
         <el-input v-model="form.name" autocomplete="off" />
@@ -30,17 +30,18 @@
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogFormVisible = false">
+        <kk-button @click="dialogFormVisible = false">Cancel</kk-button>
+        <kk-button type="primary" @click="dialogFormVisible = false">
           Confirm
-        </el-button>
+        </kk-button>
       </span>
     </template>
-  </el-dialog>
+  </kk-dialog>
 </template>
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
+import { KkButton, KkDialog } from 'kankan-components'
 
 const dialogTableVisible = ref(false)
 const dialogFormVisible = ref(false)
@@ -81,7 +82,7 @@ const gridData = [
 ]
 </script>
 <style scoped>
-.el-button--text {
+.kk-button--text {
   margin-right: 15px;
 }
 .el-select {

docs/examples/dialog/customization-header.vue

@@ -1,24 +1,24 @@
 <template>
-  <el-button @click="visible = true">
+  <kk-button @click="visible = true">
     Open Dialog with customized header
-  </el-button>
-  <el-dialog v-model="visible" :show-close="false">
+  </kk-button>
+  <kk-dialog v-model="visible" :show-close="false">
     <template #header="{ close, titleId, titleClass }">
       <div class="my-header">
         <h4 :id="titleId" :class="titleClass">This is a custom header!</h4>
-        <el-button type="danger" @click="close">
+        <kk-button type="danger" @click="close">
           <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
           Close
-        </el-button>
+        </kk-button>
       </div>
     </template>
     This is dialog content.
-  </el-dialog>
+  </kk-dialog>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { ElButton, ElDialog } from 'element-plus'
+import { KkButton, KkDialog } from 'kankan-components'
 import { CircleCloseFilled } from '@element-plus/icons-vue'
 
 const visible = ref(false)

docs/examples/dialog/destroy-on-close.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-button text @click="centerDialogVisible = true">
+  <kk-button text @click="centerDialogVisible = true">
     Click to open Dialog
-  </el-button>
+  </kk-button>
 
-  <el-dialog
+  <kk-dialog
     v-model="centerDialogVisible"
     title="Notice"
     width="30%"
@@ -19,18 +19,18 @@
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="centerDialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="centerDialogVisible = false">
+        <kk-button @click="centerDialogVisible = false">Cancel</kk-button>
+        <kk-button type="primary" @click="centerDialogVisible = false">
           Confirm
-        </el-button>
+        </kk-button>
       </span>
     </template>
-  </el-dialog>
+  </kk-dialog>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-
+import { KkButton, KkDialog } from 'kankan-components'
 const centerDialogVisible = ref(false)
 </script>
 <style scoped>

docs/examples/dialog/draggable-dialog.vue

@@ -1,23 +1,23 @@
 <template>
-  <el-button text @click="dialogVisible = true">
+  <kk-button text @click="dialogVisible = true">
     Click to open Dialog
-  </el-button>
+  </kk-button>
 
-  <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
+  <kk-dialog v-model="dialogVisible" title="Tips" width="30%" draggable>
     <span>It's a draggable Dialog</span>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
+        <kk-button @click="dialogVisible = false">Cancel</kk-button>
+        <kk-button type="primary" @click="dialogVisible = false">
           Confirm
-        </el-button>
+        </kk-button>
       </span>
     </template>
-  </el-dialog>
+  </kk-dialog>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-
+import { KkButton, KkDialog } from 'kankan-components'
 const dialogVisible = ref(false)
 </script>

docs/examples/dialog/focus-trapping.vue

@@ -1,14 +1,14 @@
 <template>
-  <el-button text @click="dialogVisible = true">
+  <kk-button text @click="dialogVisible = true">
     click to open the Dialog
-  </el-button>
+  </kk-button>
 
   <div>
     <p>Close dialog and the input will be focused</p>
     <el-input ref="inputRef" placeholder="Please input" />
   </div>
 
-  <el-dialog
+  <kk-dialog
     v-model="dialogVisible"
     destroy-on-close
     title="Tips"
@@ -20,17 +20,18 @@
     <el-input placeholder="Initially focused" />
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="dialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="dialogVisible = false">
+        <kk-button @click="dialogVisible = false">Cancel</kk-button>
+        <kk-button type="primary" @click="dialogVisible = false">
           Confirm
-        </el-button>
+        </kk-button>
       </span>
     </template>
-  </el-dialog>
+  </kk-dialog>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { KkButton, KkDialog } from 'kankan-components'
 import type { ElInput } from 'element-plus'
 
 const dialogVisible = ref(false)

docs/examples/dialog/nested-dialog.vue

@@ -1,11 +1,11 @@
 <template>
-  <el-button text @click="outerVisible = true">
+  <kk-button text @click="outerVisible = true">
     open the outer Dialog
-  </el-button>
+  </kk-button>
 
-  <el-dialog v-model="outerVisible" title="Outer Dialog">
+  <kk-dialog v-model="outerVisible" title="Outer Dialog">
     <template #default>
-      <el-dialog
+      <kk-dialog
         v-model="innerVisible"
         width="30%"
         title="Inner Dialog"
@@ -14,18 +14,18 @@
     </template>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="outerVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="innerVisible = true">
+        <kk-button @click="outerVisible = false">Cancel</kk-button>
+        <kk-button type="primary" @click="innerVisible = true">
           open the inner Dialog
-        </el-button>
+        </kk-button>
       </div>
     </template>
-  </el-dialog>
+  </kk-dialog>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-
+import { KkButton, KkDialog } from 'kankan-components'
 const outerVisible = ref(false)
 const innerVisible = ref(false)
 </script>

docs/examples/tag/basic.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, provide, ref } from 'vue'
-import { UITag } from 'kankan-components'
+import { KkTag } from 'kankan-components'
 
 const tags = ref<any>([])
 
@@ -34,7 +34,7 @@ const handleTagview = ({ id }) => {
   <div id="scene" class="scene">
     <Teleport v-if="tags.length > 0" to=".kankan-plugins">
       <div xui_tags_view>
-        <UITag
+        <kk-tag
           v-for="(item, index) in tags"
           :key="index"
           :tag="item"

docs/examples/tag/custom.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, provide, ref, unref } from 'vue'
-import { UITag } from 'kankan-components'
+import { onMounted, onUnmounted, provide, ref } from 'vue'
+import { KkTag } from 'kankan-components'
 
 const tags = ref<any>([])
 
 onMounted(() => {
-  console.warn('onMounted')
   const __win = window as any
   if (!__win.__sdk) {
     const __sdk = (__win.__sdk = new __win.KanKan({
@@ -35,7 +34,12 @@ const handleTagview = ({ id }) => {
   <div id="scene1" class="scene">
     <Teleport v-if="tags.length > 0" to=".kankan-plugins">
       <div xui_tags_view>
-        <UITag v-for="(item, index) in tags" :key="index" :tag="item">
+        <kk-tag
+          v-for="(item, index) in tags"
+          :key="index"
+          :tag="item"
+          @click="handleTagview"
+        >
           <template #content="{ data, id, isClick, isShow, x, y }">
             <div>id:{{ id }}</div>
             <div>content:{{ data.content }}</div>
@@ -44,7 +48,7 @@ const handleTagview = ({ id }) => {
             <div>x:{{ x }}</div>
             <div>y:{{ y }}</div>
           </template>
-        </UITag>
+        </kk-tag>
       </div>
     </Teleport>
   </div>

docs/zh-CN/component/button.md

@@ -78,21 +78,21 @@ button/loading
 
 :::
 
-## Sizes
+## 调整尺寸
 
-Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
+除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
 
-:::demo Use attribute `size` to set additional sizes with `large`, `small`.
+:::demo 使用 `size` 属性额外配置尺寸，可使用 `large`和`small`两种值。
 
 button/size
 
 :::
 
-## Custom Color<VersionTag version="beta" />
+## 自定义颜色 <VersionTag version="beta" />
 
-You can custom button color.
+您可以自定义按钮颜色。
 
-We will calculate hover color & active color automatically.
+我们将自动计算 hover 和 active 颜色。
 
 :::demo
 
@@ -104,55 +104,55 @@ button/custom
 
 ### Button 属性
 
-| 属性名                             | 说明                                                                    | 类型                                                                            | 默认值  |
-| ---------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------- |
-| size                               | button size                                                             | ^[enum]`'large'\| 'default'\| 'small'`                                          | —       |
-| type                               | button type                                                             | ^[enum]`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'\| 'text'(delete)` | —       |
-| plain                              | determine whether it's a plain button                                   | ^[boolean]                                                                      | false   |
-| text<VersionTag version="2.2.0" /> | determine whether it's a text button                                    | ^[boolean]                                                                      | false   |
-| bg<VersionTag version="2.2.0" />   | determine whether the text button background color is always on         | ^[boolean]                                                                      | false   |
-| link<VersionTag version="2.2.1" /> | determine whether it's a link button                                    | ^[boolean]                                                                      | false   |
-| round                              | determine whether it's a round button                                   | ^[boolean]                                                                      | false   |
-| circle                             | determine whether it's a circle button                                  | ^[boolean]                                                                      | false   |
-| loading                            | determine whether it's loading                                          | ^[boolean]                                                                      | false   |
-| loading-icon                       | customize loading icon component                                        | ^[string] / ^[Component]                                                        | Loading |
-| disabled                           | disable the button                                                      | ^[boolean]                                                                      | false   |
-| icon                               | icon component                                                          | ^[string] / ^[Component]                                                        | —       |
-| autofocus                          | same as native button's `autofocus`                                     | ^[boolean]                                                                      | false   |
-| native-type                        | same as native button's `type`                                          | ^[enum]`'button'\| 'submit'\| 'reset'`                                          | button  |
-| auto-insert-space                  | automatically insert a space between two chinese characters             | ^[boolean]                                                                      | —       |
-| color                              | custom button color, automatically calculate `hover` and `active` color | ^[string]                                                                       | —       |
-| dark                               | dark mode, which automatically converts `color` to dark mode colors     | ^[boolean]                                                                      | false   |
-
-### Button Slots
-
-| Name    | Description                 |
-| ------- | --------------------------- |
-| default | customize default content   |
-| loading | customize loading component |
-| icon    | customize icon component    |
-
-### Button Exposes
-
-| Name           | Description          | Type                                                                                                           |
-| -------------- | -------------------- | -------------------------------------------------------------------------------------------------------------- |
-| ref            | button html element  | ^[object]`Ref<HTMLButtonElement>`                                                                              |
-| size           | button size          | ^[object]`ComputedRef<'' \| 'small' \| 'default' \| 'large'>`                                                  |
-| type           | button type          | ^[object]`ComputedRef<'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'>` |
-| disabled       | button disabled      | ^[object]`ComputedRef<boolean>`                                                                                |
-| shouldAddSpace | whether adding space | ^[object]`ComputedRef<boolean>`                                                                                |
+| 属性名            | 说明                                                        | 类型                                                                            | 默认值  |
+| ----------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------- | ------- |
+| size              | 尺寸                                                        | ^[enum]`'large'\| 'default'\| 'small'`                                          | —       |
+| type              | 类型                                                        | ^[enum]`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'\| 'text'(delete)` | —       |
+| plain             | 是否为朴素按钮                                              | ^[boolean]                                                                      | false   |
+| text<             | 是否为文字按钮                                              | ^[boolean]                                                                      | false   |
+| bg                | 是否显示文字按钮背景颜色                                    | ^[boolean]                                                                      | false   |
+| link              | 是否为链接按钮                                              | ^[boolean]                                                                      | false   |
+| round             | 是否为圆角按钮                                              | ^[boolean]                                                                      | false   |
+| circle            | 是否为圆形按钮                                              | ^[boolean]                                                                      | false   |
+| loading           | 是否为加载中状态                                            | ^[boolean]                                                                      | false   |
+| loading-icon      | 自定义加载中状态图标组件                                    | ^[string] / ^[Component]                                                        | Loading |
+| disabled          | 按钮是否为禁用状态                                          | ^[boolean]                                                                      | false   |
+| icon              | 图标组件                                                    | ^[string] / ^[Component]                                                        | —       |
+| autofocus         | 原生 `autofocus` 属性                                       | ^[boolean]                                                                      | false   |
+| native-type       | 原生 `type` 属性                                            | ^[enum]`'button'\| 'submit'\| 'reset'`                                          | button  |
+| auto-insert-space | 自动在两个中文字符之间插入空格                              | ^[boolean]                                                                      | —       |
+| color             | 自定义按钮颜色, 并自动计算 `hover` 和 `active` 触发后的颜色 | ^[string]                                                                       | —       |
+| dark              | dark 模式, 意味着自动设置 color 为 dark 模式的颜色          | ^[boolean]                                                                      | false   |
+
+### Button 插槽
+
+| 插槽名  | 说明             |
+| ------- | ---------------- |
+| default | 自定义默认内容   |
+| loading | 自定义加载中组件 |
+| icon    | 自定义图标组件   |
+
+### Button 对外暴露的方法
+
+| 属性名         | 说明                       | 类型                                                                                                           |
+| -------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| ref            | 按钮 html 元素             | ^[object]`Ref<HTMLButtonElement>`                                                                              |
+| size           | 按钮尺寸                   | ^[object]`ComputedRef<'' \| 'small' \| 'default' \| 'large'>`                                                  |
+| type           | 按钮类型                   | ^[object]`ComputedRef<'' \| 'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'>` |
+| disabled       | 按钮已禁用                 | ^[object]`ComputedRef<boolean>`                                                                                |
+| shouldAddSpace | 是否在两个字符之间插入空格 | ^[object]`ComputedRef<boolean>`                                                                                |
 
 ## ButtonGroup API
 
-### ButtonGroup Attributes
+### Button Group 属性
 
-| Name | Description                                      | Type                                                           | Default |
-| ---- | ------------------------------------------------ | -------------------------------------------------------------- | ------- |
-| size | control the size of buttons in this button-group | ^[enum]`'large'\| 'default'\| 'small'`                         | —       |
-| type | control the type of buttons in this button-group | ^[enum]`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'` | —       |
+| 插槽名 | 说明                         | 默认值                                                         | x 默认值 |
+| ------ | ---------------------------- | -------------------------------------------------------------- | -------- |
+| size   | 用于控制该按钮组内按钮的大小 | ^[enum]`'large'\| 'default'\| 'small'`                         | —        |
+| type   | 用于控制该按钮组内按钮的类型 | ^[enum]`'primary'\| 'success'\| 'warning'\| 'danger'\| 'info'` | —        |
 
-### ButtonGroup Slots
+### ButtonGroup 插槽
 
-| Name    | Description                    | Subtags |
-| ------- | ------------------------------ | ------- |
-| default | customize button group content | Button  |
+| 插槽名  | 说明             | 子标签 |
+| ------- | ---------------- | ------ |
+| default | 自定义按钮组内容 | Button |

docs/zh-CN/component/dialog.md

@@ -15,13 +15,13 @@ dialog/basic-usage
 
 :::tip
 
-`before-close` only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the `footer` named slot, you can add what you would do with `before-close` in the buttons' click event handler.
+`before-close` 只会在用户点击关闭按钮或者对话框的遮罩区域时被调用。 如果你在 `footer` 具名 `slot` 里添加了用于关闭 `Dialog` 的按钮，那么可以在按钮的点击回调函数里加入 `before-close` 的相关逻辑。
 
 :::
 
-## Customized Content
+## 自定义内容
 
-The content of Dialog can be anything, even a table or a form. This example shows how to use Element Plus Table and Form with Dialog.
+对话框的内容可以是任何东西，甚至是一个表格或表单。 此示例显示如何在 Dialog 中使用本库的表格和表单。
 
 :::demo
 
@@ -29,9 +29,9 @@ dialog/customization-content
 
 :::
 
-## Customized Header
+## 自定义头部
 
-The `header` slot can be used to customize the area where the title is displayed. In order to maintain accessibility, use the `title` attribute in addition to using this slot, or use the `titleId` slot property to specify which element should be read out as the dialog title.
+`header` 可用于自定义显示标题的区域。 为了保持可用性，除了使用此插槽外，使用 `title` 属性，或使用 `titleId` 插槽属性来指定哪些元素应该读取为对话框标题。
 
 :::demo
 
@@ -39,21 +39,21 @@ dialog/customization-header
 
 :::
 
-## Nested Dialog
+## 嵌套的对话框
 
-If a Dialog is nested in another Dialog, `append-to-body` is required.
+如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。
 
-:::demo Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set `append-to-body` of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.
+:::demo
 
 dialog/nested-dialog
 
 :::
 
-## Centered content
+## 内容居中
 
-Dialog's content can be centered.
+对话框的内容可以居中。
 
-:::demo Setting `center` to `true` will center dialog's header and footer horizontally. `center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.
+:::demo 将`center`设置为`true`即可使标题和底部居中。 `center`仅影响标题和底部区域。 `Dialog` 的内容是任意的，在一些情况下，内容并不适合居中布局。 如果需要内容也水平居中，请自行为其添加 CSS 样式。
 
 dialog/centered-content
 
@@ -61,35 +61,35 @@ dialog/centered-content
 
 :::tip
 
-The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using `ref`, do it in the `open` event callback.
+Dialog 的内容是懒渲染的——在被第一次打开之前，传入的默认 slot 不会被立即渲染到 DOM 上。 因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
 
 :::
 
-## Align Center dialog
+## 居中对话框
 
-Open dialog from the center of the screen.
+从屏幕中心打开对话框。
 
-:::demo Setting `align-center` to `true` will center the dialog both horizontally and vertically. The prop `top` will not work at the same time because the dialog is vertically centered in a flexbox.
+:::demo 设置 align-center 为 true 使对话框水平垂直居中。 由于对话框垂直居中在弹性盒子中，所以 top 属性将不起作用。
 
 dialog/align-center
 
 :::
 
-## Destroy on Close
+## 关闭时销毁
 
-When this is feature is enabled, the content under default slot will be destroyed with a `v-if` directive. Enable this when you have perf concerns.
+启用此功能时，默认栏位下的内容将使用 v-if 指令销毁。 当出现性能问题时，可以启用此功能。
 
-:::demo Note that by enabling this feature, the content will not be rendered before `transition.beforeEnter` dispatched, there will only be `overlay` `header(if any)` `footer(if any)`.
+:::demo 需要注意的是，当这个属性被启用时，在 transition.beforeEnter 事件卸载前，除了 overlay、header (可选)与 footer(可选) ，Dialog 内不会有其它任何其它的 DOM 节点存在。
 
 dialog/destroy-on-close
 
 :::
 
-## Draggable Dialog
+## 可拖拽对话框
 
-Try to drag the `header` part.
+试着拖动一下`header`部分
 
-:::demo Set `draggable` to `true` to drag.
+:::demo 设置 draggable 属性为 true 以做到拖拽
 
 dialog/draggable-dialog
 
@@ -97,70 +97,50 @@ dialog/draggable-dialog
 
 :::tip
 
-When using `modal` = false, please make sure that `append-to-body` was set to **true**, because `Dialog` was positioned by `position: relative`, when `modal` gets removed, `Dialog` will position itself based on the current position in the DOM, instead of `Document.Body`, thus the style will be messed up.
-
-:::
-
-## Attributes
-
-| Name                          | Description                                                                                       | Type                                              | Accepted Values | Default |
-| ----------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------- | --------------- | ------- |
-| model-value / v-model         | visibility of Dialog                                                                              | boolean                                           | —               | —       |
-| title                         | title of Dialog. Can also be passed with a named slot (see the following table)                   | string                                            | —               | —       |
-| width                         | width of Dialog                                                                                   | string / number                                   | —               | 50%     |
-| fullscreen                    | whether the Dialog takes up full screen                                                           | boolean                                           | —               | false   |
-| top                           | value for `margin-top` of Dialog CSS                                                              | string                                            | —               | 15vh    |
-| modal                         | whether a mask is displayed                                                                       | boolean                                           | —               | true    |
-| append-to-body                | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean                                           | —               | false   |
-| lock-scroll                   | whether scroll of body is disabled while Dialog is displayed                                      | boolean                                           | —               | true    |
-| custom-class<DeprecatedTag /> | custom class names for Dialog                                                                     | string                                            | —               | —       |
-| open-delay                    | Time(milliseconds) before open                                                                    | number                                            | —               | 0       |
-| close-delay                   | Time(milliseconds) before close                                                                   | number                                            | —               | 0       |
-| close-on-click-modal          | whether the Dialog can be closed by clicking the mask                                             | boolean                                           | —               | true    |
-| close-on-press-escape         | whether the Dialog can be closed by pressing ESC                                                  | boolean                                           | —               | true    |
-| show-close                    | whether to show a close button                                                                    | boolean                                           | —               | true    |
-| before-close                  | callback before Dialog closes, and it will prevent Dialog from closing                            | Function(done) (done is used to close the Dialog) | —               | —       |
-| draggable                     | enable dragging feature for Dialog                                                                | boolean                                           | —               | false   |
-| center                        | whether to align the header and footer in center                                                  | boolean                                           | —               | false   |
-| align-center                  | whether to align the dialog both horizontally and vertically                                      | boolean                                           | —               | false   |
-| destroy-on-close              | Destroy elements in Dialog when closed                                                            | boolean                                           | —               | false   |
-
-:::warning
-
-`custom-class` has been **deprecated**, and **will be** removed in<VersionTag version="2.3.0" />, please use `class`.
+当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 **true**，由于 Dialog 使用 position: relative 定位，当外层的遮罩层被移除时，Dialog 则会根据当前 DOM 上的祖先节点来定位，因此可能造成定位问题。
 
 :::
 
-## Slots
-
-| Name                   | Description                                                                                           |
-| ---------------------- | ----------------------------------------------------------------------------------------------------- |
-| —                      | content of Dialog                                                                                     |
-| header                 | content of the Dialog header; Replacing this removes the title, but does not remove the close button. |
-| title<DeprecatedTag /> | Works the same as the header slot. Use that instead.                                                  |
-| footer                 | content of the Dialog footer                                                                          |
-
-## Events
-
-| Name             | Description                                      | Parameters |
-| ---------------- | ------------------------------------------------ | ---------- |
-| open             | triggers when the Dialog opens                   | —          |
-| opened           | triggers when the Dialog opening animation ends  | —          |
-| close            | triggers when the Dialog closes                  | —          |
-| closed           | triggers when the Dialog closing animation ends  | —          |
-| open-auto-focus  | triggers after Dialog opens and content focused  | —          |
-| close-auto-focus | triggers after Dialog closed and content focused | —          |
-
-## FAQ
-
-#### Using dialog in SFC, the scope style does not take effect.
-
-Typical issue: [#10515](https://github.com/element-plus/element-plus/issues/10515)
-
-PS: Since the dialog is rendered using `Teleport`, the style of the root node is recommended to be written globally.
-
-#### When the dialog is displayed and hidden, there is a situation where the page elements are displaced back and forth.
-
-Typical issue: [#10481](https://github.com/element-plus/element-plus/issues/10481)
-
-PS: It is recommended to place the scroll area inside a vue mounted node, e.g. `<div id="app" />`, and use the `overflow: hidden` style for the body.
+## 属性
+
+| 属性名                        | 说明                                                                                            | 类型                                              | 可选值 | 默认值 |
+| ----------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------ | ------ |
+| model-value / v-model         | 是否显示 Dialog                                                                                 | boolean                                           | —      | —      |
+| title                         | Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入                                  | string                                            | —      | —      |
+| width                         | Dialog 的宽度                                                                                   | string / number                                   | —      | 50%    |
+| fullscreen                    | 是否为全屏 Dialog                                                                               | boolean                                           | —      | false  |
+| top                           | Dialog CSS 中的 margin-top 值                                                                   | string                                            | —      | 15vh   |
+| modal                         | 是否需要遮罩层 displayed                                                                        | boolean                                           | —      | true   |
+| append-to-body                | wDialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 `true`                | boolean                                           | —      | false  |
+| lock-scroll                   | 是否在 Dialog 出现时将 body 滚动锁定                                                            | boolean                                           | —      | true   |
+| custom-class<DeprecatedTag /> | Dialog 的自定义类名                                                                             | string                                            | —      | —      |
+| open-delay                    | Dialog 打开的延时时间，单位毫秒 open                                                            | number                                            | —      | 0      |
+| close-delay                   | Dialog 关闭的延时时间，单位毫秒                                                                 | number                                            | —      | 0      |
+| close-on-click-modal          | 是否可以通过点击 modal 关闭 Dialog                                                              | boolean                                           | —      | true   |
+| close-on-press-escape         | 是否可以通过按下 ESC 关闭 Dialog                                                                | boolean                                           | —      | true   |
+| show-close                    | 是否显示关闭按钮 button                                                                         | boolean                                           | —      | true   |
+| before-close                  | 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. | Function(done) (done is used to close the Dialog) | —      | —      |
+| draggable                     | 为 Dialog 启用可拖拽功能                                                                        | boolean                                           | —      | false  |
+| center                        | 是否让 Dialog 的 header 和 footer 部分居中排列                                                  | boolean                                           | —      | false  |
+| align-center                  | 是否水平垂直对齐对话框                                                                          | boolean                                           | —      | false  |
+| destroy-on-close              | 当关闭 Dialog 时，销毁其中的元素 closed                                                         | boolean                                           | —      | false  |
+
+## 插槽
+
+| 插槽名                 | 说明                                                   |
+| ---------------------- | ------------------------------------------------------ |
+| —                      | Dialog 的内容                                          |
+| header                 | 对话框标题的内容；会替换标题部分，但不会移除关闭按钮。 |
+| title<DeprecatedTag /> | 与 header 作用相同 请使用 header                       |
+| footer                 | Dialog 按钮操作区的内容                                |
+
+## 事件
+
+| 事件名           | 说明                               | 参数 |
+| ---------------- | ---------------------------------- | ---- |
+| open             | Dialog 打开的回调                  | —    |
+| opened           | Dialog 打开动画结束时的回调        | —    |
+| close            | Dialog 关闭的回调                  | —    |
+| closed           | Dialog 关闭动画结束时的回调        | —    |
+| open-auto-focus  | 输入焦点聚焦在 Dialog 内容时的回调 | —    |
+| close-auto-focus | 输入焦点从 Dialog 内容失焦时的回调 | —    |

packages/components/advance/tag/index.ts

@@ -1,8 +1,8 @@
 import { withInstall } from '@kankan-components/utils'
 import tags from './src/tag.vue'
 
-export const UITag = withInstall(tags)
+export const KkTag = withInstall(tags)
 
-export default UITag
+export default KkTag
 export * from './src/tag'
 export * from './src/tagItem'

packages/components/advance/tag/src/tag.vue

@@ -3,6 +3,10 @@ import { ref, useSlots } from 'vue'
 import ShowTag from './showTag.vue'
 import { tagProps } from './tag'
 
+defineOptions({
+  name: 'KkTag',
+})
+
 const props = defineProps(tagProps)
 const slots = useSlots()
 
@@ -87,87 +91,3 @@ const handleTagClick = (tagId: string) => {
     </template>
   </div>
 </template>
-
-<!-- <style>
-[xui_tags_view] {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-[xui_tags_view] > div {
-    pointer-events: all;
-    display: none;
-    position: absolute;
-    width: 48px;
-    height: 48px;
-    margin-left: -24px;
-    margin-top: -24px;
-    z-index: 1;
-}
-
-[xui_tags_view] > div.focus {
-    z-index: 2;
-}
-[xui_tags_view] > div.fixed {
-    z-index: 3;
-}
-[xui_tags_view] > div.active {
-    z-index: 4;
-}
-
-[xui_tags_view] .tag-icon {
-    display: block;
-    width: 48px;
-    height: 48px;
-    background-size: cover;
-    cursor: pointer;
-}
-
-[xui_tags_view] .tag-icon.animate {
-    animation: tag-animate-zoom 3s -1s linear infinite;
-}
-
-@keyframes tag-animate-zoom {
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(0.7);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
-[xui_tags_view] .content .trans {
-    padding: 0 40px 0 0;
-    position: absolute;
-    right: 35px;
-    top: 50%;
-    min-width: 420px;
-    min-height: 60px;
-    z-index: 1000;
-    transform: translateY(-50%) scale(0);
-    transform-origin: center right;
-    transition: all 0.3s cubic-bezier(0.35, 0.32, 0.65, 0.63);
-    pointer-events: none;
-    /* background-color: rgba(0, 0, 0, 0.8); */
-}
-
-[xui_tags_view] .content .trans .arrow {
-    pointer-events: auto;
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: 0;
-    width: 0;
-    height: 0;
-    border-top: 15px solid transparent;
-    border-bottom: 15px solid transparent;
-    border-left: 40px solid rgba(27, 27, 28, 0.8);
-    transform: translateY(-50%);
-}
-[xui_tags_view] .content .trans.active {
-    transform: translateY(-50%) scale(1);
-}
-</style> -->

packages/components/basic/audio/index.ts

@@ -1,8 +1,8 @@
 import { withInstall } from '@kankan-components/utils'
 import Audio from './src/audio.vue'
 
-export const UIAudio = withInstall(Audio)
+export const KkAudio = withInstall(Audio)
 
-export default UIAudio
+export default KkAudio
 
 export * from './src/audio'

packages/components/basic/audio/src/audio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ui-audio" @click="clickHandler">
+  <div :class="[ns.b()]" @click="clickHandler">
     <audio ref="audio" autoplay loop @play="rotation">
       <source :src="src" />
     </audio>
@@ -13,13 +13,14 @@
 
 <script lang="ts" setup>
 import { defineProps, ref, watchEffect } from 'vue'
+import { useNamespace } from '@kankan-components/hooks'
 import { audioProps } from './audio'
 
 defineOptions({
-  name: 'UIAudio',
+  name: 'KkAudio',
 })
 defineProps(audioProps)
-
+const ns = useNamespace('audio')
 const audio = ref()
 const randoms = ref([1, 0.5, 1, 0.5])
 const playIng = ref(false)

packages/components/basic/dialog/index.ts

@@ -1,8 +1,8 @@
 import { withInstall } from '@kankan-components/utils'
 import Dialog from './src/dialog.vue'
 
-export const UiDialog = withInstall(Dialog)
-export default UiDialog
+export const KkDialog = withInstall(Dialog)
+export default KkDialog
 
 export * from './src/use-dialog'
 export * from './src/dialog'

packages/kankan-components/component.ts

@@ -1,10 +1,10 @@
 import { KkIcon } from '@kankan-components/components/basic/icon'
 import { KkButton } from '@kankan-components/components/basic/button'
-import { UIAudio } from '@kankan-components/components/basic/audio'
-import { UiDialog } from '@kankan-components/components/basic/dialog'
+import { KkAudio } from '@kankan-components/components/basic/audio'
+import { KkDialog } from '@kankan-components/components/basic/dialog'
 
-import { UITag } from '@kankan-components/components/advance/tag'
+import { KkTag } from '@kankan-components/components/advance/tag'
 
 import type { Plugin } from 'vue'
 
-export default [KkIcon, KkButton, UIAudio, UiDialog, UITag] as Plugin[]
+export default [KkIcon, KkButton, KkAudio, KkDialog, KkTag] as Plugin[]

packages/theme-chalk/src/audio.scss

@@ -1,21 +1,31 @@
-.ui-audio {
-    display: inline-block;
-    cursor: pointer;
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/utils' as *;
+@use 'mixins/var' as *;
 
-    > span {
-        --height: 18px;
-        width: 3px;
-        height: calc(var(--height) * var(--percent));
-        background: var(--colors-primary-base);
-        display: inline-block;
-        transition: height 0.2s linear;
+@include b(audio) {
+  @include set-component-css-var('audio', $audio);
+}
 
-        &:not(:last-child) {
-            margin-right: 2px;
-        }
-    }
+@include b(audio) {
+  display: inline-block;
+  cursor: pointer;
 
-    audio {
-        display: none;
+  > span {
+    --height: 18px;
+    width: 3px;
+    height: calc(var(--height) * var(--percent));
+    // background: var(--colors-primary-base);
+    background: getCssVar('audio', 'bg-color');
+    display: inline-block;
+    transition: height 0.2s linear;
+
+    &:not(:last-child) {
+      margin-right: 2px;
     }
+  }
+
+  audio {
+    display: none;
+  }
 }

packages/theme-chalk/src/common/var.scss

@@ -1417,3 +1417,13 @@ $breakpoints-spec: (
   'lg-and-down': '(max-width: #{$xl - 1})',
   'xl-only': '(min-width: #{$xl})',
 ) !default;
+
+// audio
+// css3 var in packages/theme-chalk/src/audio.scss
+$audio: () !default;
+$audio: map.merge(
+  (
+    'bg-color': getCssVar('color-primary'),
+  ),
+  $audio
+);

packages/theme-chalk/src/dialog.scss

@@ -0,0 +1,185 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/utils' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use 'common/popup' as *;
+
+@include b(dialog) {
+  @include set-component-css-var('dialog', $dialog);
+
+  position: relative;
+  margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
+  background: getCssVar('dialog', 'bg-color');
+  border-radius: getCssVar('dialog', 'border-radius');
+  box-shadow: getCssVar('dialog', 'box-shadow');
+  box-sizing: border-box;
+  width: var(#{getCssVarName('dialog-width')}, 50%);
+
+  &:focus {
+    outline: none !important;
+  }
+
+  @include when(align-center) {
+    margin: auto;
+  }
+
+  @include when(fullscreen) {
+    @include set-css-var-value('dialog-width', 100%);
+    @include set-css-var-value('dialog-margin-top', 0);
+
+    margin-bottom: 0;
+    height: 100%;
+    overflow: auto;
+  }
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+  }
+
+  @include when(draggable) {
+    @include e(header) {
+      cursor: move;
+      user-select: none;
+    }
+  }
+
+  @include e(header) {
+    padding: getCssVar('dialog', 'padding-primary');
+    padding-bottom: 10px;
+    margin-right: 16px;
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: 6px;
+    right: 0;
+    padding: 0;
+    width: 54px;
+    height: 54px;
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: var(
+      #{getCssVarName('message-close-size')},
+      map.get($message, 'close-size')
+    );
+
+    .#{$namespace}-dialog__close {
+      color: getCssVar('color', 'info');
+      font-size: inherit;
+    }
+
+    &:focus,
+    &:hover {
+      .#{$namespace}-dialog__close {
+        color: getCssVar('color', 'primary');
+      }
+    }
+  }
+
+  @include e(title) {
+    line-height: getCssVar('dialog-font-line-height');
+    font-size: getCssVar('dialog-title-font-size');
+    color: getCssVar('text-color', 'primary');
+  }
+
+  @include e(body) {
+    padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
+      getCssVar('dialog-padding-primary');
+    color: getCssVar('text-color', 'regular');
+    font-size: getCssVar('dialog-content-font-size');
+  }
+
+  @include e(footer) {
+    padding: getCssVar('dialog-padding-primary');
+    padding-top: 10px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  // 内容居中布局
+  @include m(center) {
+    text-align: center;
+
+    @include e(body) {
+      text-align: initial;
+      padding: 25px calc(#{getCssVar('dialog-padding-primary')} + 5px) 30px;
+    }
+
+    @include e(footer) {
+      text-align: inherit;
+    }
+  }
+}
+
+.#{$namespace}-overlay-dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+}
+
+.dialog-fade-enter-active {
+  animation: modal-fade-in getCssVar('transition-duration');
+  .#{$namespace}-overlay-dialog {
+    animation: dialog-fade-in getCssVar('transition-duration');
+  }
+}
+
+.dialog-fade-leave-active {
+  animation: modal-fade-out getCssVar('transition-duration');
+  .#{$namespace}-overlay-dialog {
+    animation: dialog-fade-out getCssVar('transition-duration');
+  }
+}
+
+@keyframes dialog-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes modal-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

packages/theme-chalk/src/index.scss

@@ -3,5 +3,7 @@
 @use './icon.scss';
 @use './button.scss';
 @use './audio.scss';
+@use './overlay.scss';
+@use './dialog.scss';
 // component adv styles
 @use './tag.scss';

packages/theme-chalk/src/mixins/_button.scss

@@ -14,7 +14,7 @@
       'bg-color': (
         'color',
         $type,
-        'light-9',
+        'light-1',
       ),
       'border-color': (
         'color',
@@ -25,11 +25,12 @@
     'hover': (
       'text-color': (
         'color',
-        'white',
+        $type,
       ),
       'bg-color': (
         'color',
         $type,
+        'light-8',
       ),
       'border-color': (
         'color',

packages/theme-chalk/src/overlay.scss

@@ -0,0 +1,17 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(overlay) {
+  #{& + '-root'} {
+    height: 0;
+  }
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  height: 100%;
+  background-color: getCssVar('overlay-color', 'lighter');
+  overflow: auto;
+}

playground/src/components/advance/tag/index.ts

@@ -1,6 +1,6 @@
 import { withInstall } from '@kankan-components/utils'
 import tags from './src/Tags.vue'
 
-export const UITag = withInstall(tags)
+export const KkTag = withInstall(tags)
 
 export default UITag

playground/src/pages/tag.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, inject, ref } from 'vue'
-import { UITag } from '@kankan-components/components'
+import { KkTag } from '@kankan-components/components'
 import '@kankan-components/theme-chalk/src/tag.scss'
 const __sdk: any = inject('__sdk')
 
@@ -22,7 +22,7 @@ const handleTagview = (data: any) => {
   <div id="scene">
     <Teleport v-if="tags.length" to=".kankan-plugins">
       <div xui_tags_view>
-        <UITag
+        <KkTag
           v-for="(item, index) in tags"
           :key="index"
           :tag="item"
@@ -35,7 +35,7 @@ const handleTagview = (data: any) => {
             <div>x:{{ x }}</div>
             <div>y:{{ y }}</div>
           </template>
-        </UITag>
+        </KkTag>
       </div>
     </Teleport>
   </div>