feat(文档更改): 文档植入demo

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

@@ -6,6 +6,19 @@
                 {
                     "link": "/button",
                     "text": "按钮"
+                },
+                {
+                    "link": "/audio",
+                    "text": "音频"
+                }
+            ]
+        },
+        "advance": {
+            "text": "高级组件",
+            "children": [
+                {
+                    "link": "/tagsEditor",
+                    "text": "tag编辑器"
                 }
             ]
         }

docs/examples/audio/basic.vue

@@ -0,0 +1,10 @@
+<template>
+    <el-row class="mb-4">
+        <UIAudio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
+    </el-row>
+</template>
+
+<script lang="ts" setup>
+import { UIAudio } from '@kankan-components/components'
+import '@kankan-components/theme-chalk/dist/index.css'
+</script>

docs/examples/tagsEditor/basic.vue

@@ -0,0 +1,10 @@
+<template>
+    <el-row class="mb-4">
+        <UIAudio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
+    </el-row>
+</template>
+
+<script lang="ts" setup>
+import { UIAudio } from '@kankan-components/components'
+import '@kankan-components/theme-chalk/dist/index.css'
+</script>

docs/zh-CN/component-bk/button.md

@@ -0,0 +1,16 @@
+---
+title: Button
+lang: zh-CN
+---
+
+# 按钮
+
+一般按钮使用如下。
+
+## 基本用法
+
+:::demo Use `type`, `plain`, `round` and `circle` to define Button's style.
+
+button/basic
+
+:::

docs/zh-CN/component/audio.md

@@ -0,0 +1,16 @@
+---
+title: Audio
+lang: zh-CN
+---
+
+# 音频
+
+一般音频使用如下。
+
+## 基本用法
+
+:::demo
+
+audio/basic
+
+:::

docs/zh-CN/component/button.md

@@ -9,7 +9,7 @@ lang: zh-CN
 
 ## 基本用法
 
-:::demo Use `type`, `plain`, `round` and `circle` to define Button's style.
+:::demo
 
 button/basic
 

docs/zh-CN/component/tagsEditor.md

@@ -0,0 +1,16 @@
+---
+title: TagsEditor
+lang: zh-CN
+---
+
+# Tags 编辑器
+
+Tags 编辑器使用如下。
+
+## 基本用法
+
+:::demo
+
+tagsEditor/basic
+
+:::

packages/components/basic/group/ui-group-option.vue

@@ -20,7 +20,7 @@ defineOptions({
 const brotherInstances = inject(Relation)
 const instance = getCurrentInstance()
 
-if (brotherInstances.value) {
+if (brotherInstances?.value) {
     onBeforeMount(() => (brotherInstances.value = [...brotherInstances.value, instance]))
     onUnmounted(() => {
         const index = brotherInstances.value.indexOf(instance)
@@ -31,7 +31,3 @@ if (brotherInstances.value) {
     })
 }
 </script>
-
-<!-- <script>
-export default { name: 'UiGroupOption' }
-</script> -->

packages/components/basic/groupOption/constant.ts

@@ -0,0 +1 @@
+export const Relation = Symbol('group-children')

packages/components/basic/groupOption/index.ts

@@ -0,0 +1,4 @@
+import Group from './ui-group.vue'
+import GroupOption from './ui-group-option.vue'
+
+export { Group, GroupOption }

packages/components/basic/groupOption/ui-group-option.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="group-option">
+        <span v-if="props.label" class="group-option-label">
+            {{ props.label }}
+        </span>
+        <slot />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance, inject, onBeforeMount, onUnmounted } from 'vue'
+import { Relation } from './constant'
+const props = defineProps({
+    label: String,
+})
+defineOptions({
+    name: 'UIGroupOption',
+})
+
+const brotherInstances = inject(Relation)
+const instance = getCurrentInstance()
+
+if (brotherInstances.value) {
+    onBeforeMount(() => (brotherInstances.value = [...brotherInstances.value, instance]))
+    onUnmounted(() => {
+        const index = brotherInstances.value.indexOf(instance)
+        if (~index) {
+            brotherInstances.value.splice(index, 1)
+            brotherInstances.value = [...brotherInstances.value]
+        }
+    })
+}
+</script>
+
+<!-- <script>
+export default { name: 'UiGroupOption' }
+</script> -->

packages/components/basic/groupOption/ui-group.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="ui-group" :class="{ control }">
+        <template v-if="!$slots.header">
+            <h3 v-if="props.title" class="group-title" :class="!$slots.default && contentStyle">
+                {{ props.title }}
+                <span v-if="$slots.icon || control" class="group-icon" :class="animationRef && { show: animationRef.show }" @click="control && animationRef.changeShow()">
+                    <slot v-if="$slots.icon" name="icon" />
+                    <icon v-else type="pull-down" size="12px" />
+                </span>
+            </h3>
+        </template>
+        <div v-else class="group-title" :class="!$slots.default && contentStyle">
+            <slot name="header" />
+
+            <span v-if="$slots.icon || control" class="group-icon" :class="animationRef && { show: animationRef.show }" @click="control && animationRef.changeShow()">
+                <slot v-if="$slots.icon" name="icon" />
+                <icon v-else type="pull-down" size="12px" />
+            </span>
+        </div>
+
+        <template v-if="$slots.default">
+            <UISizeAnimation v-if="control" ref="animationRef" class="group-content" :class="contentStyle">
+                <slot />
+            </UISizeAnimation>
+            <div v-else class="group-content" :class="contentStyle">
+                <slot />
+            </div>
+        </template>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, ref, watch, watchEffect } from 'vue'
+import icon from '../icon'
+import UISizeAnimation from '../size-animation'
+import { Relation } from './constant'
+
+defineOptions({
+    name: 'UIGroup',
+})
+
+const animationRef = ref(null)
+const props = defineProps({
+    title: String,
+    border: Boolean,
+    borderTop: Boolean,
+    borderBottom: Boolean,
+    control: Boolean,
+    show: Boolean,
+})
+
+const contentStyle = computed(() => ({
+    'border-bottom': props.borderBottom || props.border,
+    'border-top': props.borderTop || props.border,
+}))
+
+const contentInstances = ref([])
+provide(Relation, contentInstances)
+
+watchEffect(() => {
+    if (animationRef.value) {
+        animationRef.value.changeShow(props.show)
+    }
+})
+
+watch(contentInstances, () => {
+    animationRef.value && animationRef.value.refer()
+})
+</script>
+
+<!-- <script>
+export default { name: 'UiGroup' }
+</script> -->

packages/components/basic/slide/src/slide.ts

@@ -0,0 +1,21 @@
+import { buildProps, definePropType } from '@kankan-components/utils'
+import type { ExtractPropTypes } from 'vue'
+import type Slide from './slide.vue'
+
+export const slideProps = buildProps({
+    items: {
+        type: definePropType<any[]>(Array),
+        default: [],
+    },
+    currentIndex: {
+        type: Number,
+        default: 0,
+    },
+    showCtrl: {
+        type: Boolean,
+    },
+})
+
+export type SlideProps = ExtractPropTypes<typeof slideProps>
+
+export type SlideInstance = InstanceType<typeof Slide>

packages/components/basic/slide/src/slide.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="ui-slide">
-        <Gate :index="index">
-            <GateContent v-for="(item, i) in items" :key="i">
+        <UIGate :index="index">
+            <UIgateContent v-for="(item, i) in items" :key="i">
                 <slot :raw="item" :active="items[index]" />
-            </GateContent>
-        </Gate>
+            </UIgateContent>
+        </UIGate>
         <template v-if="showCtrl">
             <span v-if="index !== 0" class="left" @click="prevHandler"><UIIcon type="left" /></span>
             <span v-if="index !== items.length - 1" class="right" @click="nextHandler"><UIIcon type="pull-more" /></span>
@@ -19,21 +19,13 @@ import UIIcon from '@kankan-components/components/basic/icon'
 // import { Gate, GateContent } from '../gate/src/src'
 import UIGate from '@kankan-components/components/basic/gate'
 import UIgateContent from '@kankan-components/components/basic/gateContent'
+import { slideProps } from './slide'
 
 defineOptions({
     name: 'UISlide',
 })
 
-const props = defineProps({
-    items: Array,
-    currentIndex: {
-        type: Number,
-        default: 0,
-    },
-    showCtrl: {
-        type: Boolean,
-    },
-})
+const props = defineProps(slideProps)
 const index = ref()
 
 watchEffect(() => (index.value = props.currentIndex))