refactor(架构调整): 去掉过往示例

docs/.vitepress/config.mts

@@ -58,10 +58,10 @@ export const config: UserConfig = {
         logoSmall: '/images/kankan_icon.ico',
         sidebars,
         nav,
-        agolia: {
-            apiKey: '377f2b647a96d9b1d62e4780f2344da2',
-            appId: 'BH4D9OD16A',
-        },
+        // agolia: {
+        //     apiKey: '377f2b647a96d9b1d62e4780f2344da2',
+        //     appId: 'BH4D9OD16A',
+        // },
         features,
         langs: languages,
     },

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

@@ -26,324 +26,5 @@
                 }
             ]
         }
-    },
-    "en-US": {
-        "basic": {
-            "text": "Basic",
-            "children": [
-                {
-                    "link": "/button",
-                    "text": "Button"
-                },
-                {
-                    "link": "/border",
-                    "text": "Border"
-                },
-                {
-                    "link": "/color",
-                    "text": "Color"
-                },
-                {
-                    "link": "/container",
-                    "text": "Layout Container"
-                },
-                {
-                    "link": "/icon",
-                    "text": "Icon"
-                },
-                {
-                    "link": "/layout",
-                    "text": "Layout"
-                },
-                {
-                    "link": "/link",
-                    "text": "Link"
-                },
-                {
-                    "link": "/scrollbar",
-                    "text": "Scrollbar"
-                },
-                {
-                    "link": "/space",
-                    "text": "Space"
-                },
-                {
-                    "link": "/typography",
-                    "text": "Typography"
-                }
-            ]
-        },
-        "configuration": {
-            "text": "Configuration",
-            "children": [
-                {
-                    "link": "/config-provider",
-                    "text": "Config Provider"
-                }
-            ]
-        },
-        "form": {
-            "text": "Form",
-            "children": [
-                {
-                    "link": "/autocomplete",
-                    "text": "Autocomplete"
-                },
-                {
-                    "link": "/cascader",
-                    "text": "Cascader"
-                },
-                {
-                    "link": "/checkbox",
-                    "text": "Checkbox"
-                },
-                {
-                    "link": "/color-picker",
-                    "text": "Color Picker"
-                },
-                {
-                    "link": "/date-picker",
-                    "text": "Date Picker"
-                },
-                {
-                    "link": "/datetime-picker",
-                    "text": "DateTime Picker"
-                },
-                {
-                    "link": "/form",
-                    "text": "Form"
-                },
-                {
-                    "link": "/input",
-                    "text": "Input"
-                },
-                {
-                    "link": "/input-number",
-                    "text": "Input Number"
-                },
-                {
-                    "link": "/radio",
-                    "text": "Radio"
-                },
-                {
-                    "link": "/rate",
-                    "text": "Rate"
-                },
-                {
-                    "link": "/select",
-                    "text": "Select"
-                },
-                {
-                    "link": "/select-v2",
-                    "text": "Virtualized Select"
-                },
-                {
-                    "link": "/slider",
-                    "text": "Slider"
-                },
-                {
-                    "link": "/switch",
-                    "text": "Switch"
-                },
-                {
-                    "link": "/time-picker",
-                    "text": "Time Picker"
-                },
-                {
-                    "link": "/time-select",
-                    "text": "Time Select"
-                },
-                {
-                    "link": "/transfer",
-                    "text": "Transfer"
-                },
-                {
-                    "link": "/upload",
-                    "text": "Upload"
-                }
-            ]
-        },
-        "data": {
-            "text": "Data",
-            "children": [
-                {
-                    "link": "/avatar",
-                    "text": "Avatar"
-                },
-                {
-                    "link": "/badge",
-                    "text": "Badge"
-                },
-                {
-                    "link": "/calendar",
-                    "text": "Calendar"
-                },
-                {
-                    "link": "/card",
-                    "text": "Card"
-                },
-                {
-                    "link": "/carousel",
-                    "text": "Carousel"
-                },
-                {
-                    "link": "/collapse",
-                    "text": "Collapse"
-                },
-                {
-                    "link": "/descriptions",
-                    "text": "Descriptions"
-                },
-                {
-                    "link": "/empty",
-                    "text": "Empty"
-                },
-                {
-                    "link": "/image",
-                    "text": "Image"
-                },
-                {
-                    "link": "/infinite-scroll",
-                    "text": "Infinite Scroll"
-                },
-                {
-                    "link": "/pagination",
-                    "text": "Pagination"
-                },
-                {
-                    "link": "/progress",
-                    "text": "Progress"
-                },
-                {
-                    "link": "/result",
-                    "text": "Result"
-                },
-                {
-                    "link": "/skeleton",
-                    "text": "Skeleton"
-                },
-                {
-                    "link": "/table",
-                    "text": "Table"
-                },
-                {
-                    "link": "/table-v2",
-                    "text": "Virtualized Table",
-                    "promotion": "2.2.0"
-                },
-                {
-                    "link": "/tag",
-                    "text": "Tag"
-                },
-                {
-                    "link": "/timeline",
-                    "text": "Timeline"
-                },
-                {
-                    "link": "/tree",
-                    "text": "Tree"
-                },
-                {
-                    "link": "/tree-select",
-                    "text": "TreeSelect",
-                    "promotion": "2.1.8"
-                },
-                {
-                    "link": "/tree-v2",
-                    "text": "Virtualized Tree"
-                }
-            ]
-        },
-        "navigation": {
-            "text": "Navigation",
-            "children": [
-                {
-                    "link": "/affix",
-                    "text": "Affix"
-                },
-                {
-                    "link": "/backtop",
-                    "text": "Backtop"
-                },
-                {
-                    "link": "/breadcrumb",
-                    "text": "Breadcrumb"
-                },
-                {
-                    "link": "/dropdown",
-                    "text": "Dropdown"
-                },
-                {
-                    "link": "/menu",
-                    "text": "Menu"
-                },
-                {
-                    "link": "/page-header",
-                    "text": "Page Header"
-                },
-                {
-                    "link": "/steps",
-                    "text": "Steps"
-                },
-                {
-                    "link": "/tabs",
-                    "text": "Tabs"
-                }
-            ]
-        },
-        "feedback": {
-            "text": "Feedback",
-            "children": [
-                {
-                    "link": "/alert",
-                    "text": "Alert"
-                },
-                {
-                    "link": "/dialog",
-                    "text": "Dialog"
-                },
-                {
-                    "link": "/drawer",
-                    "text": "Drawer"
-                },
-                {
-                    "link": "/loading",
-                    "text": "Loading"
-                },
-                {
-                    "link": "/message",
-                    "text": "Message"
-                },
-                {
-                    "link": "/message-box",
-                    "text": "Message Box"
-                },
-                {
-                    "link": "/notification",
-                    "text": "Notification"
-                },
-                {
-                    "link": "/popconfirm",
-                    "text": "Popconfirm"
-                },
-                {
-                    "link": "/popover",
-                    "text": "Popover"
-                },
-                {
-                    "link": "/tooltip",
-                    "text": "Tooltip"
-                }
-            ]
-        },
-        "others": {
-            "text": "Others",
-            "children": [
-                {
-                    "link": "/divider",
-                    "text": "Divider"
-                }
-            ]
-        }
     }
 }

docs/.vitepress/i18n/pages/not-found.json

@@ -1,8 +1,8 @@
 {
     "zh-CN": {
-        "title": "Resource not found",
-        "button-title": "Back to Home",
-        "desc": "The page you requested does not exist"
+        "title": "资源未找到",
+        "button-title": "回到首页",
+        "desc": "你访问页面不存在"
     },
     "en-US": {
         "title": "Resource not found",

docs/.vitepress/lang.js

@@ -9,7 +9,7 @@
         fr: 'fr-FR',
         es: 'es-ES',
     }
-    let userPreferredLang = localStorage.getItem(cacheKey) || navigator.language
+    let userPreferredLang = localStorage.getItem(cacheKey) || navigator?.language
     const language = langAlias[userPreferredLang] || (supportedLangs.includes(userPreferredLang) ? userPreferredLang : defaultLang)
     localStorage.setItem(cacheKey, language)
     userPreferredLang = language

docs/.vitepress/sw.ts

@@ -7,10 +7,10 @@ declare let self: ServiceWorkerGlobalScope & {
 const manifest = self.__WB_MANIFEST
 const cacheName = cacheNames.runtime
 const defaultLang = manifest.some(item => {
-    return item.url.includes(navigator.language)
+    return item.url.includes(navigator?.language)
 })
-    ? navigator.language
-    : 'en-US'
+    ? navigator?.language
+    : 'zh-CN'
 
 let userPreferredLang = ''
 let cacheEntries: RequestInfo[] = []

docs/.vitepress/vitepress/components/demo/dept.js

@@ -0,0 +1,61 @@
+// import { getCurrentInstance } from 'vue'
+let installed = false
+await loadStyle()
+await loadKanKanThemeChalkStyle()
+await loadSDKDep()
+await loadSDK()
+
+export function setupDept() {
+    if (installed) return
+    // const instance = getCurrentInstance()
+
+    // const __sdk = (window.__sdk = new window.KanKan({
+    //   num: 'KJ-t-wOXfx2SDFy',
+    //   // server: 'https://test.4dkankan.com',
+    //   server: '/demoServer',
+    // }))
+    // instance.appContext.app.provide('__sdk', __sdk)
+    // instance.appContext.app.use(ElementPlus)
+    installed = true
+}
+
+export function loadStyle() {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link')
+        link.rel = 'stylesheet'
+        link.href = '#STYLE#'
+        link.addEventListener('load', resolve)
+        link.addEventListener('error', reject)
+        document.body.append(link)
+    })
+}
+export function loadSDKDep() {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script')
+        script.src = '//4dkk.4dage.com/v4-test/www/sdk/kankan-sdk-deps.js?v=4.6.0-alpha.10'
+        script.addEventListener('load', resolve)
+        script.addEventListener('error', reject)
+        document.body.append(script)
+    })
+}
+
+export function loadSDK() {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script')
+        script.src = '//4dkk.4dage.com/v4-test/www/sdk/kankan-sdk.js?v=4.6.0-alpha.10'
+        script.addEventListener('load', resolve)
+        script.addEventListener('error', reject)
+        document.body.append(script)
+    })
+}
+
+export function loadKanKanThemeChalkStyle() {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link')
+        link.rel = 'stylesheet'
+        link.href = 'https://4dkk.4dage.com/npm_test/kankan-components/theme-chalk/index.css'
+        link.addEventListener('load', resolve)
+        link.addEventListener('error', reject)
+        document.body.append(link)
+    })
+}

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

@@ -2,8 +2,8 @@
 import { computed, unref, watchEffect } from 'vue'
 import { File, Repl, ReplStore } from '@vue/repl'
 import mainCode from './main.vue?raw'
-import deptCode from './dept?raw'
-import { loadKanKanThemeChalkStyle } from './dept'
+import deptCode from './dept.js?raw'
+import { loadKanKanThemeChalkStyle } from './dept-home'
 import type { SFCOptions } from '@vue/repl'
 
 const sfcOptions: SFCOptions = {

docs/.vitepress/vitepress/composables/translation.ts

@@ -38,7 +38,7 @@ export const useTranslation = () => {
         return currentLang === 'zh-CN' ? langsCopy : ['zh-CN'].concat(langsCopy)
     })
 
-    const language = useStorage(PREFERRED_LANG_KEY, 'en-US')
+    const language = useStorage(PREFERRED_LANG_KEY, 'en-CN')
 
     const switchLang = (targetLang: string) => {
         if (lang.value === targetLang) return

docs/.vitepress/vitepress/constant.ts

@@ -1,4 +1,4 @@
-export const defaultLang = 'en-US'
+export const defaultLang = 'zh-CN'
 
 export const PREFERRED_LANG_KEY = 'preferred_lang'
 

docs/examples-bk/.eslintrc.json

@@ -1,7 +0,0 @@
-{
-    "rules": {
-        "no-console": "off",
-        "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": "off"
-    }
-}

docs/examples-bk/affix/basic.vue

@@ -1,5 +0,0 @@
-<template>
-    <el-affix :offset="120">
-        <el-button type="primary">Offset top 120px</el-button>
-    </el-affix>
-</template>

docs/examples-bk/affix/fixed.vue

@@ -1,5 +0,0 @@
-<template>
-    <el-affix position="bottom" :offset="20">
-        <el-button type="primary">Offset bottom 20px</el-button>
-    </el-affix>
-</template>

docs/examples-bk/affix/target.vue

@@ -1,15 +0,0 @@
-<template>
-    <div class="affix-container">
-        <el-affix target=".affix-container" :offset="80">
-            <el-button type="primary">Target container</el-button>
-        </el-affix>
-    </div>
-</template>
-<style scoped>
-.affix-container {
-    text-align: center;
-    height: 400px;
-    border-radius: 4px;
-    background: var(--el-color-primary-light-9);
-}
-</style>

docs/examples-bk/alert/basic.vue

@@ -1,15 +0,0 @@
-<template>
-    <el-alert title="success alert" type="success" />
-    <el-alert title="info alert" type="info" />
-    <el-alert title="warning alert" type="warning" />
-    <el-alert title="error alert" type="error" />
-</template>
-
-<style scoped>
-.el-alert {
-    margin: 20px 0 0;
-}
-.el-alert:first-child {
-    margin: 0;
-}
-</style>

docs/examples-bk/alert/center.vue

@@ -1,14 +0,0 @@
-<template>
-    <el-alert title="success alert" type="success" center show-icon />
-    <el-alert title="info alert" type="info" center show-icon />
-    <el-alert title="warning alert" type="warning" center show-icon />
-    <el-alert title="error alert" type="error" center show-icon />
-</template>
-<style scoped>
-.el-alert {
-    margin: 20px 0 0;
-}
-.el-alert:first-child {
-    margin: 0;
-}
-</style>

docs/examples-bk/alert/close-button.vue

@@ -1,20 +0,0 @@
-<template>
-    <el-alert title="unclosable alert" type="success" :closable="false" />
-    <el-alert title="customized close-text" type="info" close-text="Gotcha" />
-    <el-alert title="alert with callback" type="warning" @close="hello" />
-</template>
-
-<script lang="ts" setup>
-const hello = () => {
-    // eslint-disable-next-line no-alert
-    alert('Hello World!')
-}
-</script>
-<style scoped>
-.el-alert {
-    margin: 20px 0 0;
-}
-.el-alert:first-child {
-    margin: 0;
-}
-</style>

docs/examples-bk/alert/description.vue

@@ -1,3 +0,0 @@
-<template>
-    <el-alert title="with description" type="success" description="This is a description." />
-</template>

docs/examples-bk/alert/icon-description.vue

@@ -1,14 +0,0 @@
-<template>
-    <el-alert title="success alert" type="success" description="more text description" show-icon />
-    <el-alert title="info alert" type="info" description="more text description" show-icon />
-    <el-alert title="warning alert" type="warning" description="more text description" show-icon />
-    <el-alert title="error alert" type="error" description="more text description" show-icon />
-</template>
-<style scoped>
-.el-alert {
-    margin: 20px 0 0;
-}
-.el-alert:first-child {
-    margin: 0;
-}
-</style>

docs/examples-bk/alert/icon.vue

@@ -1,14 +0,0 @@
-<template>
-    <el-alert title="success alert" type="success" show-icon />
-    <el-alert title="info alert" type="info" show-icon />
-    <el-alert title="warning alert" type="warning" show-icon />
-    <el-alert title="error alert" type="error" show-icon />
-</template>
-<style scoped>
-.el-alert {
-    margin: 20px 0 0;
-}
-.el-alert:first-child {
-    margin: 0;
-}
-</style>

docs/examples-bk/alert/theme.vue

@@ -1,14 +0,0 @@
-<template>
-    <el-alert title="success alert" type="success" effect="dark" />
-    <el-alert title="info alert" type="info" effect="dark" />
-    <el-alert title="warning alert" type="warning" effect="dark" />
-    <el-alert title="error alert" type="error" effect="dark" />
-</template>
-<style scoped>
-.el-alert {
-    margin: 20px 0 0;
-}
-.el-alert:first-child {
-    margin: 0;
-}
-</style>

docs/examples-bk/autocomplete/autocomplete-template.vue

@@ -1,77 +0,0 @@
-<template>
-    <el-autocomplete v-model="state" :fetch-suggestions="querySearch" popper-class="my-autocomplete" placeholder="Please input" @select="handleSelect">
-        <template #suffix>
-            <el-icon class="el-input__icon" @click="handleIconClick">
-                <edit />
-            </el-icon>
-        </template>
-        <template #default="{ item }">
-            <div class="value">{{ item.value }}</div>
-            <span class="link">{{ item.link }}</span>
-        </template>
-    </el-autocomplete>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import { Edit } from '@element-plus/icons-vue'
-
-interface LinkItem {
-    value: string
-    link: string
-}
-
-const state = ref('')
-const links = ref<LinkItem[]>([])
-
-const querySearch = (queryString: string, cb) => {
-    const results = queryString ? links.value.filter(createFilter(queryString)) : links.value
-    // call callback function to return suggestion objects
-    cb(results)
-}
-const createFilter = queryString => {
-    return restaurant => {
-        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    }
-}
-const loadAll = () => {
-    return [
-        { value: 'vue', link: 'https://github.com/vuejs/vue' },
-        { value: 'element', link: 'https://github.com/ElemeFE/element' },
-        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-        { value: 'babel', link: 'https://github.com/babel/babel' },
-    ]
-}
-const handleSelect = (item: LinkItem) => {
-    console.log(item)
-}
-
-const handleIconClick = (ev: Event) => {
-    console.log(ev)
-}
-
-onMounted(() => {
-    links.value = loadAll()
-})
-</script>
-
-<style>
-.my-autocomplete li {
-    line-height: normal;
-    padding: 7px;
-}
-.my-autocomplete li .name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-.my-autocomplete li .addr {
-    font-size: 12px;
-    color: #b4b4b4;
-}
-.my-autocomplete li .highlighted .addr {
-    color: #ddd;
-}
-</style>

docs/examples-bk/autocomplete/autocomplete.vue

@@ -1,55 +0,0 @@
-<template>
-    <el-row class="demo-autocomplete text-center">
-        <el-col :span="12">
-            <div class="sub-title my-2 text-sm text-gray-600">list suggestions when activated</div>
-            <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="Please Input" @select="handleSelect" />
-        </el-col>
-        <el-col :span="12">
-            <div class="sub-title my-2 text-sm text-gray-600">list suggestions on input</div>
-            <el-autocomplete v-model="state2" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable class="inline-input w-50" placeholder="Please Input" @select="handleSelect" />
-        </el-col>
-    </el-row>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-
-interface RestaurantItem {
-    value: string
-    link: string
-}
-
-const state1 = ref('')
-const state2 = ref('')
-
-const restaurants = ref<RestaurantItem[]>([])
-const querySearch = (queryString: string, cb: any) => {
-    const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
-    // call callback function to return suggestions
-    cb(results)
-}
-const createFilter = (queryString: string) => {
-    return (restaurant: RestaurantItem) => {
-        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    }
-}
-const loadAll = () => {
-    return [
-        { value: 'vue', link: 'https://github.com/vuejs/vue' },
-        { value: 'element', link: 'https://github.com/ElemeFE/element' },
-        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-        { value: 'babel', link: 'https://github.com/babel/babel' },
-    ]
-}
-
-const handleSelect = (item: RestaurantItem) => {
-    console.log(item)
-}
-
-onMounted(() => {
-    restaurants.value = loadAll()
-})
-</script>

docs/examples-bk/autocomplete/remote-search.vue

@@ -1,51 +0,0 @@
-<template>
-    <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="Please input" @select="handleSelect" />
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-
-const state = ref('')
-
-interface LinkItem {
-    value: string
-    link: string
-}
-
-const links = ref<LinkItem[]>([])
-
-const loadAll = () => {
-    return [
-        { value: 'vue', link: 'https://github.com/vuejs/vue' },
-        { value: 'element', link: 'https://github.com/ElemeFE/element' },
-        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-        { value: 'babel', link: 'https://github.com/babel/babel' },
-    ]
-}
-
-let timeout: NodeJS.Timeout
-const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
-    const results = queryString ? links.value.filter(createFilter(queryString)) : links.value
-
-    clearTimeout(timeout)
-    timeout = setTimeout(() => {
-        cb(results)
-    }, 3000 * Math.random())
-}
-const createFilter = (queryString: string) => {
-    return (restaurant: LinkItem) => {
-        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-    }
-}
-
-const handleSelect = (item: LinkItem) => {
-    console.log(item)
-}
-
-onMounted(() => {
-    links.value = loadAll()
-})
-</script>

docs/examples-bk/avatar/basic.vue

@@ -1,63 +0,0 @@
-<template>
-    <el-row class="demo-avatar demo-basic">
-        <el-col :span="12">
-            <div class="sub-title">circle</div>
-            <div class="demo-basic--circle">
-                <div class="block">
-                    <el-avatar :size="50" :src="circleUrl" />
-                </div>
-                <div v-for="size in sizeList" :key="size" class="block">
-                    <el-avatar :size="size" :src="circleUrl" />
-                </div>
-            </div>
-        </el-col>
-        <el-col :span="12">
-            <div class="sub-title">square</div>
-            <div class="demo-basic--circle">
-                <div class="block">
-                    <el-avatar shape="square" :size="50" :src="squareUrl" />
-                </div>
-                <div v-for="size in sizeList" :key="size" class="block">
-                    <el-avatar shape="square" :size="size" :src="squareUrl" />
-                </div>
-            </div>
-        </el-col>
-    </el-row>
-</template>
-<script lang="ts" setup>
-import { reactive, toRefs } from 'vue'
-
-const state = reactive({
-    circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-    squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
-    sizeList: ['small', '', 'large'] as const,
-})
-
-const { circleUrl, squareUrl, sizeList } = toRefs(state)
-</script>
-
-<style scoped>
-.demo-basic {
-    text-align: center;
-}
-.demo-basic .sub-title {
-    margin-bottom: 10px;
-    font-size: 14px;
-    color: var(--el-text-color-secondary);
-}
-.demo-basic .demo-basic--circle,
-.demo-basic .demo-basic--square {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.demo-basic .block:not(:last-child) {
-    border-right: 1px solid var(--el-border-color);
-}
-.demo-basic .block {
-    flex: 1;
-}
-.demo-basic .el-col:not(:last-child) {
-    border-right: 1px solid var(--el-border-color);
-}
-</style>

docs/examples-bk/avatar/fallback.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="demo-type">
-        <el-avatar :size="60" src="https://empty" @error="errorHandler">
-            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
-        </el-avatar>
-    </div>
-</template>
-
-<script lang="ts" setup>
-const errorHandler = () => true
-</script>

docs/examples-bk/avatar/fit.vue

@@ -1,38 +0,0 @@
-<template>
-    <div class="demo-fit">
-        <div v-for="fit in fits" :key="fit" class="block">
-            <span class="title">{{ fit }}</span>
-            <el-avatar shape="square" :size="100" :fit="fit" :src="url" />
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-import { reactive, toRefs } from 'vue'
-
-const state = reactive({
-    fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
-    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-})
-
-const { fits, url } = toRefs(state)
-</script>
-
-<style scoped>
-.demo-fit {
-    display: flex;
-    text-align: center;
-    justify-content: space-between;
-}
-.demo-fit .block {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 0;
-}
-
-.demo-fit .title {
-    margin-bottom: 10px;
-    font-size: 14px;
-    color: var(--el-text-color-secondary);
-}
-</style>

docs/examples-bk/avatar/types.vue

@@ -1,31 +0,0 @@
-<template>
-    <div class="demo-type">
-        <div>
-            <el-avatar :icon="UserFilled" />
-        </div>
-        <div>
-            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
-        </div>
-        <div>
-            <el-avatar> user </el-avatar>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { UserFilled } from '@element-plus/icons-vue'
-</script>
-
-<style scoped>
-.demo-type {
-    display: flex;
-}
-.demo-type > div {
-    flex: 1;
-    text-align: center;
-}
-
-.demo-type > div:not(:last-child) {
-    border-right: 1px solid var(--el-border-color);
-}
-</style>

docs/examples-bk/backtop/basic.vue

@@ -1,4 +0,0 @@
-<template>
-    Scroll down to see the bottom-right button.
-    <el-backtop :right="100" :bottom="100" />
-</template>

docs/examples-bk/backtop/custom.vue

@@ -1,6 +0,0 @@
-<template>
-    Scroll down to see the bottom-right button.
-    <el-backtop :bottom="100">
-        <div style="height: 100%; width: 100%; background-color: var(--el-bg-color-overlay); box-shadow: var(--el-box-shadow-lighter); text-align: center; line-height: 40px; color: #1989fa">UP</div>
-    </el-backtop>
-</template>

docs/examples-bk/badge/basic.vue

@@ -1,47 +0,0 @@
-<template>
-    <el-badge :value="12" class="item">
-        <el-button>comments</el-button>
-    </el-badge>
-    <el-badge :value="3" class="item">
-        <el-button>replies</el-button>
-    </el-badge>
-    <el-badge :value="1" class="item" type="primary">
-        <el-button>comments</el-button>
-    </el-badge>
-    <el-badge :value="2" class="item" type="warning">
-        <el-button>replies</el-button>
-    </el-badge>
-
-    <el-dropdown trigger="click">
-        <span class="el-dropdown-link">
-            Click Me
-            <el-icon class="el-icon--right"><caret-bottom /></el-icon>
-        </span>
-        <template #dropdown>
-            <el-dropdown-menu>
-                <el-dropdown-item class="clearfix">
-                    comments
-                    <el-badge class="mark" :value="12" />
-                </el-dropdown-item>
-                <el-dropdown-item class="clearfix">
-                    replies
-                    <el-badge class="mark" :value="3" />
-                </el-dropdown-item>
-            </el-dropdown-menu>
-        </template>
-    </el-dropdown>
-</template>
-
-<script lang="ts" setup>
-import { CaretBottom } from '@element-plus/icons-vue'
-</script>
-
-<style scoped>
-.item {
-    margin-top: 10px;
-    margin-right: 40px;
-}
-.el-dropdown {
-    margin-top: 1.1rem;
-}
-</style>

docs/examples-bk/badge/customize.vue

@@ -1,15 +0,0 @@
-<template>
-    <el-badge value="new" class="item">
-        <el-button>comments</el-button>
-    </el-badge>
-    <el-badge value="hot" class="item">
-        <el-button>replies</el-button>
-    </el-badge>
-</template>
-
-<style scoped>
-.item {
-    margin-top: 10px;
-    margin-right: 40px;
-}
-</style>

docs/examples-bk/badge/dot.vue

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

docs/examples-bk/badge/max.vue

@@ -1,15 +0,0 @@
-<template>
-    <el-badge :value="200" :max="99" class="item">
-        <el-button>comments</el-button>
-    </el-badge>
-    <el-badge :value="100" :max="10" class="item">
-        <el-button>replies</el-button>
-    </el-badge>
-</template>
-
-<style scoped>
-.item {
-    margin-top: 10px;
-    margin-right: 40px;
-}
-</style>

docs/examples-bk/border/border.vue

@@ -1,41 +0,0 @@
-<template>
-    <table class="demo-border">
-        <tbody>
-            <tr>
-                <td class="text">Name</td>
-                <td class="text">Thickness</td>
-                <td class="line">Demo</td>
-            </tr>
-            <tr>
-                <td class="text">Solid</td>
-                <td class="text">1px</td>
-                <td class="line">
-                    <div />
-                </td>
-            </tr>
-            <tr>
-                <td class="text">Dashed</td>
-                <td class="text">2px</td>
-                <td class="line">
-                    <div class="dashed" />
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</template>
-<style scoped>
-.demo-border .text {
-    width: 15%;
-}
-.demo-border .line {
-    width: 70%;
-}
-.demo-border .line div {
-    width: 100%;
-    height: 0;
-    border-top: 1px solid var(--el-border-color);
-}
-.demo-border .line .dashed {
-    border-top: 2px dashed var(--el-border-color);
-}
-</style>

docs/examples-bk/border/radius.vue

@@ -1,63 +0,0 @@
-<template>
-    <el-row :gutter="12" class="demo-radius">
-        <el-col v-for="(radius, i) in radiusGroup" :key="i" :span="6" :xs="{ span: 12 }">
-            <div class="title">{{ radius.name }}</div>
-            <div class="value">
-                <code>border-radius: {{ getValue(radius.type) || '0px' }}</code>
-            </div>
-            <div
-                class="radius"
-                :style="{
-                    borderRadius: radius.type ? `var(--el-border-radius-${radius.type})` : '',
-                }"
-            />
-        </el-col>
-    </el-row>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const radiusGroup = ref([
-    {
-        name: 'No Radius',
-        type: '',
-    },
-    {
-        name: 'Small Radius',
-        type: 'small',
-    },
-    {
-        name: 'Large Radius',
-        type: 'base',
-    },
-    {
-        name: 'Round Radius',
-        type: 'round',
-    },
-])
-
-const getValue = (type: string) => {
-    const getCssVarValue = (prefix, type) => getComputedStyle(document.documentElement).getPropertyValue(`--el-${prefix}-${type}`)
-    return getCssVarValue('border-radius', type)
-}
-</script>
-<style scoped>
-.demo-radius .title {
-    color: var(--el-text-color-regular);
-    font-size: 18px;
-    margin: 10px 0;
-}
-.demo-radius .value {
-    color: var(--el-text-color-primary);
-    font-size: 16px;
-    margin: 10px 0;
-}
-.demo-radius .radius {
-    height: 40px;
-    width: 70%;
-    border: 1px solid var(--el-border-color);
-    border-radius: 0;
-    margin-top: 20px;
-}
-</style>

docs/examples-bk/border/shadow.vue

@@ -1,48 +0,0 @@
-<template>
-    <div class="flex justify-between items-center flex-wrap">
-        <div v-for="(shadow, i) in shadowGroup" :key="i" class="flex flex-col justify-center items-center" m="auto" w="46">
-            <div
-                class="inline-flex"
-                h="30"
-                w="30"
-                m="2"
-                :style="{
-                    boxShadow: `var(${getCssVarName(shadow.type)})`,
-                }"
-            />
-            <span p="y-4" class="demo-shadow-text" text="sm">
-                {{ shadow.name }}
-            </span>
-            <code text="xs">
-                {{ getCssVarName(shadow.type) }}
-            </code>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const shadowGroup = ref([
-    {
-        name: 'Basic Shadow',
-        type: '',
-    },
-    {
-        name: 'Light Shadow',
-        type: 'light',
-    },
-    {
-        name: 'Lighter Shadow',
-        type: 'lighter',
-    },
-    {
-        name: 'Dark Shadow',
-        type: 'dark',
-    },
-])
-
-const getCssVarName = (type: string) => {
-    return `--el-box-shadow${type ? '-' : ''}${type}`
-}
-</script>

docs/examples-bk/breadcrumb/basic.vue

@@ -1,8 +0,0 @@
-<template>
-    <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-        <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
-        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
-        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
-    </el-breadcrumb>
-</template>

docs/examples-bk/breadcrumb/icon.vue

@@ -1,12 +0,0 @@
-<template>
-    <el-breadcrumb :separator-icon="ArrowRight">
-        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
-        <el-breadcrumb-item>promotion management</el-breadcrumb-item>
-        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
-        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
-    </el-breadcrumb>
-</template>
-
-<script lang="ts" setup>
-import { ArrowRight } from '@element-plus/icons-vue'
-</script>

docs/examples-bk/button/basic.vue

@@ -1,19 +0,0 @@
-<template>
-    <el-row class="mb-4">
-        <!-- <el-button>Default</el-button>
-        <el-button type="primary">Primary</el-button>
-        <el-button type="success">Success</el-button>
-        <el-button type="info">Info</el-button>
-        <el-button type="warning">Warning</el-button>
-        <el-button type="danger">Danger</el-button> -->
-
-        <UIButton>button1 </UIButton>
-        <UIButton :width="100">button2</UIButton>
-    </el-row>
-</template>
-
-<script lang="ts" setup>
-// import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
-import { UIButton } from '@kankan-components/components'
-import '@kankan-components/theme-chalk/dist/index.css'
-</script>

docs/examples-bk/button/custom.vue

@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-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>
-
-        <el-button color="#626aef" :dark="isDark" disabled>Disabled</el-button>
-        <el-button color="#626aef" :dark="isDark" disabled plain>Disabled Plain</el-button>
-    </div>
-</template>

docs/examples-bk/button/disabled.vue

@@ -1,19 +0,0 @@
-<template>
-    <el-row class="mb-4">
-        <el-button disabled>Default</el-button>
-        <el-button type="primary" disabled>Primary</el-button>
-        <el-button type="success" disabled>Success</el-button>
-        <el-button type="info" disabled>Info</el-button>
-        <el-button type="warning" disabled>Warning</el-button>
-        <el-button type="danger" disabled>Danger</el-button>
-    </el-row>
-
-    <el-row>
-        <el-button plain disabled>Plain</el-button>
-        <el-button type="primary" plain disabled>Primary</el-button>
-        <el-button type="success" plain disabled>Success</el-button>
-        <el-button type="info" plain disabled>Info</el-button>
-        <el-button type="warning" plain disabled>Warning</el-button>
-        <el-button type="danger" plain disabled>Danger</el-button>
-    </el-row>
-</template>

docs/examples-bk/button/group.vue

@@ -1,18 +0,0 @@
-<template>
-    <el-button-group>
-        <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
-        <el-button type="primary">
-            Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
-        </el-button>
-    </el-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>
-</template>
-
-<script setup lang="ts">
-import { ArrowLeft, ArrowRight, Delete, Edit, Share } from '@element-plus/icons-vue'
-</script>

docs/examples-bk/button/icon.vue

@@ -1,14 +0,0 @@
-<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">
-            Upload<el-icon class="el-icon--right"><Upload /></el-icon>
-        </el-button>
-    </div>
-</template>
-<script setup lang="ts">
-import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
-</script>

docs/examples-bk/button/link.vue

@@ -1,22 +0,0 @@
-<template>
-    <p>Basic link button</p>
-    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
-        <el-button v-for="button in buttons" :key="button.text" :type="button.type" link>{{ button.text }}</el-button>
-    </div>
-
-    <p>Disabled link button</p>
-    <div class="flex justify-space-between flex-wrap gap-4">
-        <el-button v-for="button in buttons" :key="button.text" :type="button.type" link disabled>{{ button.text }}</el-button>
-    </div>
-</template>
-
-<script setup lang="ts">
-const buttons = [
-    { type: '', text: 'plain' },
-    { type: 'primary', text: 'primary' },
-    { type: 'success', text: 'success' },
-    { type: 'info', text: 'info' },
-    { type: 'warning', text: 'warning' },
-    { type: 'danger', text: 'danger' },
-] as const
-</script>

docs/examples-bk/button/loading.vue

@@ -1,46 +0,0 @@
-<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>
-        <template #loading>
-            <div class="custom-loading">
-                <svg class="circular" viewBox="-10, -10, 50, 50">
-                    <path
-                        class="path"
-                        d="
-            M 30 15
-            L 28 17
-            M 25.61 25.61
-            A 15 15, 0, 0, 1, 15 30
-            A 15 15, 0, 1, 1, 27.99 7.5
-            L 15 15
-          "
-                        style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
-                    />
-                </svg>
-            </div>
-        </template>
-        Loading
-    </el-button>
-</template>
-
-<script lang="ts" setup>
-import { Eleme } from '@element-plus/icons-vue'
-</script>
-
-<style scoped>
-.el-button .custom-loading .circular {
-    margin-right: 6px;
-    width: 18px;
-    height: 18px;
-    animation: loading-rotate 2s linear infinite;
-}
-.el-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-linecap: round;
-}
-</style>

docs/examples-bk/button/size.vue

@@ -1,27 +0,0 @@
-<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>
-    </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>
-    </el-row>
-    <el-row>
-        <el-button :icon="Search" size="large" circle />
-        <el-button :icon="Search" circle />
-        <el-button :icon="Search" size="small" circle />
-    </el-row>
-</template>
-
-<script setup lang="ts">
-import { Search } from '@element-plus/icons-vue'
-</script>

docs/examples-bk/button/text.vue

@@ -1,27 +0,0 @@
-<template>
-    <p>Basic text button</p>
-    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
-        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text>{{ button.text }}</el-button>
-    </div>
-
-    <p>Background color always on</p>
-    <div class="flex justify-space-between mb-4 flex-wrap gap-4">
-        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text bg>{{ button.text }}</el-button>
-    </div>
-
-    <p>Disabled text button</p>
-    <div class="flex justify-space-between flex-wrap gap-4">
-        <el-button v-for="button in buttons" :key="button.text" :type="button.type" text disabled>{{ button.text }}</el-button>
-    </div>
-</template>
-
-<script setup lang="ts">
-const buttons = [
-    { type: '', text: 'plain' },
-    { type: 'primary', text: 'primary' },
-    { type: 'success', text: 'success' },
-    { type: 'info', text: 'info' },
-    { type: 'warning', text: 'warning' },
-    { type: 'danger', text: 'danger' },
-] as const
-</script>

docs/examples-bk/calendar/basic.vue

@@ -1,8 +0,0 @@
-<template>
-    <el-calendar v-model="value" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-const value = ref(new Date())
-</script>

docs/examples-bk/calendar/customize.vue

@@ -1,16 +0,0 @@
-<template>
-    <el-calendar>
-        <template #date-cell="{ data }">
-            <p :class="data.isSelected ? 'is-selected' : ''">
-                {{ data.day.split('-').slice(1).join('-') }}
-                {{ data.isSelected ? '✔️' : '' }}
-            </p>
-        </template>
-    </el-calendar>
-</template>
-
-<style>
-.is-selected {
-    color: #1989fa;
-}
-</style>

docs/examples-bk/calendar/header.vue

@@ -1,24 +0,0 @@
-<template>
-    <el-calendar ref="calendar">
-        <template #header="{ date }">
-            <span>Custom header content</span>
-            <span>{{ date }}</span>
-            <el-button-group>
-                <el-button size="small" @click="selectDate('prev-year')"> Previous Year </el-button>
-                <el-button size="small" @click="selectDate('prev-month')"> Previous Month </el-button>
-                <el-button size="small" @click="selectDate('today')">Today</el-button>
-                <el-button size="small" @click="selectDate('next-month')"> Next Month </el-button>
-                <el-button size="small" @click="selectDate('next-year')"> Next Year </el-button>
-            </el-button-group>
-        </template>
-    </el-calendar>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const calendar = ref()
-const selectDate = (val: string) => {
-    calendar.value.selectDate(val)
-}
-</script>

docs/examples-bk/calendar/range.vue

@@ -1,3 +0,0 @@
-<template>
-    <el-calendar :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" />
-</template>

docs/examples-bk/card/basic.vue

@@ -1,31 +0,0 @@
-<template>
-    <el-card class="box-card">
-        <template #header>
-            <div class="card-header">
-                <span>Card name</span>
-                <el-button class="button" text>Operation button</el-button>
-            </div>
-        </template>
-        <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
-    </el-card>
-</template>
-
-<style>
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.text {
-    font-size: 14px;
-}
-
-.item {
-    margin-bottom: 18px;
-}
-
-.box-card {
-    width: 480px;
-}
-</style>

docs/examples-bk/card/shadow.vue

@@ -1,13 +0,0 @@
-<template>
-    <el-row :gutter="12">
-        <el-col :span="8">
-            <el-card shadow="always"> Always </el-card>
-        </el-col>
-        <el-col :span="8">
-            <el-card shadow="hover"> Hover </el-card>
-        </el-col>
-        <el-col :span="8">
-            <el-card shadow="never"> Never </el-card>
-        </el-col>
-    </el-row>
-</template>

docs/examples-bk/card/simple.vue

@@ -1,18 +0,0 @@
-<template>
-    <el-card class="box-card">
-        <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
-    </el-card>
-</template>
-<style scoped>
-.text {
-    font-size: 14px;
-}
-
-.item {
-    padding: 18px 0;
-}
-
-.box-card {
-    width: 480px;
-}
-</style>

docs/examples-bk/card/with-images.vue

@@ -1,47 +0,0 @@
-<template>
-    <el-row>
-        <el-col v-for="(o, index) in 2" :key="o" :span="8" :offset="index > 0 ? 2 : 0">
-            <el-card :body-style="{ padding: '0px' }">
-                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" />
-                <div style="padding: 14px">
-                    <span>Yummy hamburger</span>
-                    <div class="bottom">
-                        <time class="time">{{ currentDate }}</time>
-                        <el-button text class="button">Operating</el-button>
-                    </div>
-                </div>
-            </el-card>
-        </el-col>
-    </el-row>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const currentDate = ref(new Date())
-</script>
-
-<style>
-.time {
-    font-size: 12px;
-    color: #999;
-}
-
-.bottom {
-    margin-top: 13px;
-    line-height: 12px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.button {
-    padding: 0;
-    min-height: auto;
-}
-
-.image {
-    width: 100%;
-    display: block;
-}
-</style>

docs/examples-bk/carousel/arrows.vue

@@ -1,25 +0,0 @@
-<template>
-    <el-carousel :interval="5000" arrow="always">
-        <el-carousel-item v-for="item in 4" :key="item">
-            <h3 text="2xl" justify="center">{{ item }}</h3>
-        </el-carousel-item>
-    </el-carousel>
-</template>
-
-<style scoped>
-.el-carousel__item h3 {
-    color: #475669;
-    opacity: 0.75;
-    line-height: 300px;
-    margin: 0;
-    text-align: center;
-}
-
-.el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-    background-color: #d3dce6;
-}
-</style>

docs/examples-bk/carousel/basic.vue

@@ -1,40 +0,0 @@
-<template>
-    <div class="block text-center">
-        <span class="demonstration">Switch when indicator is hovered (default)</span>
-        <el-carousel height="150px">
-            <el-carousel-item v-for="item in 4" :key="item">
-                <h3 class="small justify-center" text="2xl">{{ item }}</h3>
-            </el-carousel-item>
-        </el-carousel>
-    </div>
-    <div class="block text-center" m="t-4">
-        <span class="demonstration">Switch when indicator is clicked</span>
-        <el-carousel trigger="click" height="150px">
-            <el-carousel-item v-for="item in 4" :key="item">
-                <h3 class="small justify-center" text="2xl">{{ item }}</h3>
-            </el-carousel-item>
-        </el-carousel>
-    </div>
-</template>
-
-<style scoped>
-.demonstration {
-    color: var(--el-text-color-secondary);
-}
-
-.el-carousel__item h3 {
-    color: #475669;
-    opacity: 0.75;
-    line-height: 150px;
-    margin: 0;
-    text-align: center;
-}
-
-.el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-    background-color: #d3dce6;
-}
-</style>

docs/examples-bk/carousel/card.vue

@@ -1,25 +0,0 @@
-<template>
-    <el-carousel :interval="4000" type="card" height="200px">
-        <el-carousel-item v-for="item in 6" :key="item">
-            <h3 text="2xl" justify="center">{{ item }}</h3>
-        </el-carousel-item>
-    </el-carousel>
-</template>
-
-<style scoped>
-.el-carousel__item h3 {
-    color: #475669;
-    opacity: 0.75;
-    line-height: 200px;
-    margin: 0;
-    text-align: center;
-}
-
-.el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-    background-color: #d3dce6;
-}
-</style>

docs/examples-bk/carousel/indicator.vue

@@ -1,25 +0,0 @@
-<template>
-    <el-carousel indicator-position="outside">
-        <el-carousel-item v-for="item in 4" :key="item">
-            <h3 text="2xl" justify="center">{{ item }}</h3>
-        </el-carousel-item>
-    </el-carousel>
-</template>
-
-<style scoped>
-.el-carousel__item h3 {
-    display: flex;
-    color: #475669;
-    opacity: 0.75;
-    line-height: 300px;
-    margin: 0;
-}
-
-.el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-    background-color: #d3dce6;
-}
-</style>

docs/examples-bk/carousel/vertical.vue

@@ -1,25 +0,0 @@
-<template>
-    <el-carousel height="200px" direction="vertical" :autoplay="false">
-        <el-carousel-item v-for="item in 4" :key="item">
-            <h3 text="2xl" justify="center">{{ item }}</h3>
-        </el-carousel-item>
-    </el-carousel>
-</template>
-
-<style scoped>
-.el-carousel__item h3 {
-    color: #475669;
-    opacity: 0.75;
-    line-height: 200px;
-    margin: 0;
-    text-align: center;
-}
-
-.el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-    background-color: #d3dce6;
-}
-</style>

docs/examples-bk/cascader/any-level.vue

@@ -1,299 +0,0 @@
-<template>
-    <div class="example-block">
-        <span class="example-demonstration">Select any level of options (Single selection)</span>
-        <el-cascader :options="options" :props="props1" clearable />
-    </div>
-    <div class="example-block">
-        <span class="example-demonstration">Select any level of options (Multiple selection)</span>
-        <el-cascader :options="options" :props="props2" clearable />
-    </div>
-</template>
-
-<script lang="ts" setup>
-const props1 = {
-    checkStrictly: true,
-}
-
-const props2 = {
-    multiple: true,
-    checkStrictly: true,
-}
-
-const options = [
-    {
-        value: 'guide',
-        label: 'Guide',
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                    {
-                        value: 'feedback',
-                        label: 'Feedback',
-                    },
-                    {
-                        value: 'efficiency',
-                        label: 'Efficiency',
-                    },
-                    {
-                        value: 'controllability',
-                        label: 'Controllability',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                    {
-                        value: 'top nav',
-                        label: 'Top Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'component',
-        label: 'Component',
-        children: [
-            {
-                value: 'basic',
-                label: 'Basic',
-                children: [
-                    {
-                        value: 'layout',
-                        label: 'Layout',
-                    },
-                    {
-                        value: 'color',
-                        label: 'Color',
-                    },
-                    {
-                        value: 'typography',
-                        label: 'Typography',
-                    },
-                    {
-                        value: 'icon',
-                        label: 'Icon',
-                    },
-                    {
-                        value: 'button',
-                        label: 'Button',
-                    },
-                ],
-            },
-            {
-                value: 'form',
-                label: 'Form',
-                children: [
-                    {
-                        value: 'radio',
-                        label: 'Radio',
-                    },
-                    {
-                        value: 'checkbox',
-                        label: 'Checkbox',
-                    },
-                    {
-                        value: 'input',
-                        label: 'Input',
-                    },
-                    {
-                        value: 'input-number',
-                        label: 'InputNumber',
-                    },
-                    {
-                        value: 'select',
-                        label: 'Select',
-                    },
-                    {
-                        value: 'cascader',
-                        label: 'Cascader',
-                    },
-                    {
-                        value: 'switch',
-                        label: 'Switch',
-                    },
-                    {
-                        value: 'slider',
-                        label: 'Slider',
-                    },
-                    {
-                        value: 'time-picker',
-                        label: 'TimePicker',
-                    },
-                    {
-                        value: 'date-picker',
-                        label: 'DatePicker',
-                    },
-                    {
-                        value: 'datetime-picker',
-                        label: 'DateTimePicker',
-                    },
-                    {
-                        value: 'upload',
-                        label: 'Upload',
-                    },
-                    {
-                        value: 'rate',
-                        label: 'Rate',
-                    },
-                    {
-                        value: 'form',
-                        label: 'Form',
-                    },
-                ],
-            },
-            {
-                value: 'data',
-                label: 'Data',
-                children: [
-                    {
-                        value: 'table',
-                        label: 'Table',
-                    },
-                    {
-                        value: 'tag',
-                        label: 'Tag',
-                    },
-                    {
-                        value: 'progress',
-                        label: 'Progress',
-                    },
-                    {
-                        value: 'tree',
-                        label: 'Tree',
-                    },
-                    {
-                        value: 'pagination',
-                        label: 'Pagination',
-                    },
-                    {
-                        value: 'badge',
-                        label: 'Badge',
-                    },
-                ],
-            },
-            {
-                value: 'notice',
-                label: 'Notice',
-                children: [
-                    {
-                        value: 'alert',
-                        label: 'Alert',
-                    },
-                    {
-                        value: 'loading',
-                        label: 'Loading',
-                    },
-                    {
-                        value: 'message',
-                        label: 'Message',
-                    },
-                    {
-                        value: 'message-box',
-                        label: 'MessageBox',
-                    },
-                    {
-                        value: 'notification',
-                        label: 'Notification',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'menu',
-                        label: 'Menu',
-                    },
-                    {
-                        value: 'tabs',
-                        label: 'Tabs',
-                    },
-                    {
-                        value: 'breadcrumb',
-                        label: 'Breadcrumb',
-                    },
-                    {
-                        value: 'dropdown',
-                        label: 'Dropdown',
-                    },
-                    {
-                        value: 'steps',
-                        label: 'Steps',
-                    },
-                ],
-            },
-            {
-                value: 'others',
-                label: 'Others',
-                children: [
-                    {
-                        value: 'dialog',
-                        label: 'Dialog',
-                    },
-                    {
-                        value: 'tooltip',
-                        label: 'Tooltip',
-                    },
-                    {
-                        value: 'popover',
-                        label: 'Popover',
-                    },
-                    {
-                        value: 'card',
-                        label: 'Card',
-                    },
-                    {
-                        value: 'carousel',
-                        label: 'Carousel',
-                    },
-                    {
-                        value: 'collapse',
-                        label: 'Collapse',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-            {
-                value: 'sketch',
-                label: 'Sketch Templates',
-            },
-            {
-                value: 'docs',
-                label: 'Design Documentation',
-            },
-        ],
-    },
-]
-</script>
-
-<style scoped>
-.example-block {
-    margin: 1rem;
-}
-.example-demonstration {
-    margin: 1rem;
-}
-</style>

docs/examples-bk/cascader/basic.vue

@@ -1,302 +0,0 @@
-<template>
-    <div class="example-block">
-        <span class="example-demonstration">Child options expand when clicked (default)</span>
-        <el-cascader v-model="value" :options="options" @change="handleChange" />
-    </div>
-    <div class="example-block">
-        <span class="example-demonstration">Child options expand when hovered</span>
-        <el-cascader v-model="value" :options="options" :props="props" @change="handleChange" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const value = ref([])
-
-const props = {
-    expandTrigger: 'hover',
-}
-
-const handleChange = value => {
-    console.log(value)
-}
-
-const options = [
-    {
-        value: 'guide',
-        label: 'Guide',
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                    {
-                        value: 'feedback',
-                        label: 'Feedback',
-                    },
-                    {
-                        value: 'efficiency',
-                        label: 'Efficiency',
-                    },
-                    {
-                        value: 'controllability',
-                        label: 'Controllability',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                    {
-                        value: 'top nav',
-                        label: 'Top Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'component',
-        label: 'Component',
-        children: [
-            {
-                value: 'basic',
-                label: 'Basic',
-                children: [
-                    {
-                        value: 'layout',
-                        label: 'Layout',
-                    },
-                    {
-                        value: 'color',
-                        label: 'Color',
-                    },
-                    {
-                        value: 'typography',
-                        label: 'Typography',
-                    },
-                    {
-                        value: 'icon',
-                        label: 'Icon',
-                    },
-                    {
-                        value: 'button',
-                        label: 'Button',
-                    },
-                ],
-            },
-            {
-                value: 'form',
-                label: 'Form',
-                children: [
-                    {
-                        value: 'radio',
-                        label: 'Radio',
-                    },
-                    {
-                        value: 'checkbox',
-                        label: 'Checkbox',
-                    },
-                    {
-                        value: 'input',
-                        label: 'Input',
-                    },
-                    {
-                        value: 'input-number',
-                        label: 'InputNumber',
-                    },
-                    {
-                        value: 'select',
-                        label: 'Select',
-                    },
-                    {
-                        value: 'cascader',
-                        label: 'Cascader',
-                    },
-                    {
-                        value: 'switch',
-                        label: 'Switch',
-                    },
-                    {
-                        value: 'slider',
-                        label: 'Slider',
-                    },
-                    {
-                        value: 'time-picker',
-                        label: 'TimePicker',
-                    },
-                    {
-                        value: 'date-picker',
-                        label: 'DatePicker',
-                    },
-                    {
-                        value: 'datetime-picker',
-                        label: 'DateTimePicker',
-                    },
-                    {
-                        value: 'upload',
-                        label: 'Upload',
-                    },
-                    {
-                        value: 'rate',
-                        label: 'Rate',
-                    },
-                    {
-                        value: 'form',
-                        label: 'Form',
-                    },
-                ],
-            },
-            {
-                value: 'data',
-                label: 'Data',
-                children: [
-                    {
-                        value: 'table',
-                        label: 'Table',
-                    },
-                    {
-                        value: 'tag',
-                        label: 'Tag',
-                    },
-                    {
-                        value: 'progress',
-                        label: 'Progress',
-                    },
-                    {
-                        value: 'tree',
-                        label: 'Tree',
-                    },
-                    {
-                        value: 'pagination',
-                        label: 'Pagination',
-                    },
-                    {
-                        value: 'badge',
-                        label: 'Badge',
-                    },
-                ],
-            },
-            {
-                value: 'notice',
-                label: 'Notice',
-                children: [
-                    {
-                        value: 'alert',
-                        label: 'Alert',
-                    },
-                    {
-                        value: 'loading',
-                        label: 'Loading',
-                    },
-                    {
-                        value: 'message',
-                        label: 'Message',
-                    },
-                    {
-                        value: 'message-box',
-                        label: 'MessageBox',
-                    },
-                    {
-                        value: 'notification',
-                        label: 'Notification',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'menu',
-                        label: 'Menu',
-                    },
-                    {
-                        value: 'tabs',
-                        label: 'Tabs',
-                    },
-                    {
-                        value: 'breadcrumb',
-                        label: 'Breadcrumb',
-                    },
-                    {
-                        value: 'dropdown',
-                        label: 'Dropdown',
-                    },
-                    {
-                        value: 'steps',
-                        label: 'Steps',
-                    },
-                ],
-            },
-            {
-                value: 'others',
-                label: 'Others',
-                children: [
-                    {
-                        value: 'dialog',
-                        label: 'Dialog',
-                    },
-                    {
-                        value: 'tooltip',
-                        label: 'Tooltip',
-                    },
-                    {
-                        value: 'popover',
-                        label: 'Popover',
-                    },
-                    {
-                        value: 'card',
-                        label: 'Card',
-                    },
-                    {
-                        value: 'carousel',
-                        label: 'Carousel',
-                    },
-                    {
-                        value: 'collapse',
-                        label: 'Collapse',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-            {
-                value: 'sketch',
-                label: 'Sketch Templates',
-            },
-            {
-                value: 'docs',
-                label: 'Design Documentation',
-            },
-        ],
-    },
-]
-</script>
-
-<style scoped>
-.example-block {
-    margin: 1rem;
-}
-.example-demonstration {
-    margin: 1rem;
-}
-</style>

docs/examples-bk/cascader/clearable.vue

@@ -1,273 +0,0 @@
-<template>
-    <el-cascader :options="options" clearable />
-</template>
-<script lang="ts" setup>
-const options = [
-    {
-        value: 'guide',
-        label: 'Guide',
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                    {
-                        value: 'feedback',
-                        label: 'Feedback',
-                    },
-                    {
-                        value: 'efficiency',
-                        label: 'Efficiency',
-                    },
-                    {
-                        value: 'controllability',
-                        label: 'Controllability',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                    {
-                        value: 'top nav',
-                        label: 'Top Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'component',
-        label: 'Component',
-        children: [
-            {
-                value: 'basic',
-                label: 'Basic',
-                children: [
-                    {
-                        value: 'layout',
-                        label: 'Layout',
-                    },
-                    {
-                        value: 'color',
-                        label: 'Color',
-                    },
-                    {
-                        value: 'typography',
-                        label: 'Typography',
-                    },
-                    {
-                        value: 'icon',
-                        label: 'Icon',
-                    },
-                    {
-                        value: 'button',
-                        label: 'Button',
-                    },
-                ],
-            },
-            {
-                value: 'form',
-                label: 'Form',
-                children: [
-                    {
-                        value: 'radio',
-                        label: 'Radio',
-                    },
-                    {
-                        value: 'checkbox',
-                        label: 'Checkbox',
-                    },
-                    {
-                        value: 'input',
-                        label: 'Input',
-                    },
-                    {
-                        value: 'input-number',
-                        label: 'InputNumber',
-                    },
-                    {
-                        value: 'select',
-                        label: 'Select',
-                    },
-                    {
-                        value: 'cascader',
-                        label: 'Cascader',
-                    },
-                    {
-                        value: 'switch',
-                        label: 'Switch',
-                    },
-                    {
-                        value: 'slider',
-                        label: 'Slider',
-                    },
-                    {
-                        value: 'time-picker',
-                        label: 'TimePicker',
-                    },
-                    {
-                        value: 'date-picker',
-                        label: 'DatePicker',
-                    },
-                    {
-                        value: 'datetime-picker',
-                        label: 'DateTimePicker',
-                    },
-                    {
-                        value: 'upload',
-                        label: 'Upload',
-                    },
-                    {
-                        value: 'rate',
-                        label: 'Rate',
-                    },
-                    {
-                        value: 'form',
-                        label: 'Form',
-                    },
-                ],
-            },
-            {
-                value: 'data',
-                label: 'Data',
-                children: [
-                    {
-                        value: 'table',
-                        label: 'Table',
-                    },
-                    {
-                        value: 'tag',
-                        label: 'Tag',
-                    },
-                    {
-                        value: 'progress',
-                        label: 'Progress',
-                    },
-                    {
-                        value: 'tree',
-                        label: 'Tree',
-                    },
-                    {
-                        value: 'pagination',
-                        label: 'Pagination',
-                    },
-                    {
-                        value: 'badge',
-                        label: 'Badge',
-                    },
-                ],
-            },
-            {
-                value: 'notice',
-                label: 'Notice',
-                children: [
-                    {
-                        value: 'alert',
-                        label: 'Alert',
-                    },
-                    {
-                        value: 'loading',
-                        label: 'Loading',
-                    },
-                    {
-                        value: 'message',
-                        label: 'Message',
-                    },
-                    {
-                        value: 'message-box',
-                        label: 'MessageBox',
-                    },
-                    {
-                        value: 'notification',
-                        label: 'Notification',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'menu',
-                        label: 'Menu',
-                    },
-                    {
-                        value: 'tabs',
-                        label: 'Tabs',
-                    },
-                    {
-                        value: 'breadcrumb',
-                        label: 'Breadcrumb',
-                    },
-                    {
-                        value: 'dropdown',
-                        label: 'Dropdown',
-                    },
-                    {
-                        value: 'steps',
-                        label: 'Steps',
-                    },
-                ],
-            },
-            {
-                value: 'others',
-                label: 'Others',
-                children: [
-                    {
-                        value: 'dialog',
-                        label: 'Dialog',
-                    },
-                    {
-                        value: 'tooltip',
-                        label: 'Tooltip',
-                    },
-                    {
-                        value: 'popover',
-                        label: 'Popover',
-                    },
-                    {
-                        value: 'card',
-                        label: 'Card',
-                    },
-                    {
-                        value: 'carousel',
-                        label: 'Carousel',
-                    },
-                    {
-                        value: 'collapse',
-                        label: 'Collapse',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-            {
-                value: 'sketch',
-                label: 'Sketch Templates',
-            },
-            {
-                value: 'docs',
-                label: 'Design Documentation',
-            },
-        ],
-    },
-]
-</script>

docs/examples-bk/cascader/custom-content.vue

@@ -1,279 +0,0 @@
-<template>
-    <el-cascader :options="options">
-        <template #default="{ node, data }">
-            <span>{{ data.label }}</span>
-            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-        </template>
-    </el-cascader>
-</template>
-
-<script lang="ts" setup>
-const options = [
-    {
-        value: 'guide',
-        label: 'Guide',
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                    {
-                        value: 'feedback',
-                        label: 'Feedback',
-                    },
-                    {
-                        value: 'efficiency',
-                        label: 'Efficiency',
-                    },
-                    {
-                        value: 'controllability',
-                        label: 'Controllability',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                    {
-                        value: 'top nav',
-                        label: 'Top Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'component',
-        label: 'Component',
-        children: [
-            {
-                value: 'basic',
-                label: 'Basic',
-                children: [
-                    {
-                        value: 'layout',
-                        label: 'Layout',
-                    },
-                    {
-                        value: 'color',
-                        label: 'Color',
-                    },
-                    {
-                        value: 'typography',
-                        label: 'Typography',
-                    },
-                    {
-                        value: 'icon',
-                        label: 'Icon',
-                    },
-                    {
-                        value: 'button',
-                        label: 'Button',
-                    },
-                ],
-            },
-            {
-                value: 'form',
-                label: 'Form',
-                children: [
-                    {
-                        value: 'radio',
-                        label: 'Radio',
-                    },
-                    {
-                        value: 'checkbox',
-                        label: 'Checkbox',
-                    },
-                    {
-                        value: 'input',
-                        label: 'Input',
-                    },
-                    {
-                        value: 'input-number',
-                        label: 'InputNumber',
-                    },
-                    {
-                        value: 'select',
-                        label: 'Select',
-                    },
-                    {
-                        value: 'cascader',
-                        label: 'Cascader',
-                    },
-                    {
-                        value: 'switch',
-                        label: 'Switch',
-                    },
-                    {
-                        value: 'slider',
-                        label: 'Slider',
-                    },
-                    {
-                        value: 'time-picker',
-                        label: 'TimePicker',
-                    },
-                    {
-                        value: 'date-picker',
-                        label: 'DatePicker',
-                    },
-                    {
-                        value: 'datetime-picker',
-                        label: 'DateTimePicker',
-                    },
-                    {
-                        value: 'upload',
-                        label: 'Upload',
-                    },
-                    {
-                        value: 'rate',
-                        label: 'Rate',
-                    },
-                    {
-                        value: 'form',
-                        label: 'Form',
-                    },
-                ],
-            },
-            {
-                value: 'data',
-                label: 'Data',
-                children: [
-                    {
-                        value: 'table',
-                        label: 'Table',
-                    },
-                    {
-                        value: 'tag',
-                        label: 'Tag',
-                    },
-                    {
-                        value: 'progress',
-                        label: 'Progress',
-                    },
-                    {
-                        value: 'tree',
-                        label: 'Tree',
-                    },
-                    {
-                        value: 'pagination',
-                        label: 'Pagination',
-                    },
-                    {
-                        value: 'badge',
-                        label: 'Badge',
-                    },
-                ],
-            },
-            {
-                value: 'notice',
-                label: 'Notice',
-                children: [
-                    {
-                        value: 'alert',
-                        label: 'Alert',
-                    },
-                    {
-                        value: 'loading',
-                        label: 'Loading',
-                    },
-                    {
-                        value: 'message',
-                        label: 'Message',
-                    },
-                    {
-                        value: 'message-box',
-                        label: 'MessageBox',
-                    },
-                    {
-                        value: 'notification',
-                        label: 'Notification',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'menu',
-                        label: 'Menu',
-                    },
-                    {
-                        value: 'tabs',
-                        label: 'Tabs',
-                    },
-                    {
-                        value: 'breadcrumb',
-                        label: 'Breadcrumb',
-                    },
-                    {
-                        value: 'dropdown',
-                        label: 'Dropdown',
-                    },
-                    {
-                        value: 'steps',
-                        label: 'Steps',
-                    },
-                ],
-            },
-            {
-                value: 'others',
-                label: 'Others',
-                children: [
-                    {
-                        value: 'dialog',
-                        label: 'Dialog',
-                    },
-                    {
-                        value: 'tooltip',
-                        label: 'Tooltip',
-                    },
-                    {
-                        value: 'popover',
-                        label: 'Popover',
-                    },
-                    {
-                        value: 'card',
-                        label: 'Card',
-                    },
-                    {
-                        value: 'carousel',
-                        label: 'Carousel',
-                    },
-                    {
-                        value: 'collapse',
-                        label: 'Collapse',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-            {
-                value: 'sketch',
-                label: 'Sketch Templates',
-            },
-            {
-                value: 'docs',
-                label: 'Design Documentation',
-            },
-        ],
-    },
-]
-</script>

docs/examples-bk/cascader/dynamic-loading.vue

@@ -1,22 +0,0 @@
-<template>
-    <el-cascader :props="props" />
-</template>
-
-<script lang="ts" setup>
-let id = 0
-const props = {
-    lazy: true,
-    lazyLoad(node, resolve) {
-        const { level } = node
-        setTimeout(() => {
-            const nodes = Array.from({ length: level + 1 }).map(item => ({
-                value: ++id,
-                label: `Option - ${id}`,
-                leaf: level >= 2,
-            }))
-            // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
-            resolve(nodes)
-        }, 1000)
-    },
-}
-</script>

docs/examples-bk/cascader/filterable.vue

@@ -1,294 +0,0 @@
-<template>
-    <div class="example-block">
-        <span class="example-demonstration">Filterable (Single selection)</span>
-        <el-cascader placeholder="Try searchingL Guide" :options="options" filterable />
-    </div>
-    <div class="example-block">
-        <span class="example-demonstration">Filterable (Multiple selection)</span>
-        <el-cascader placeholder="Try searchingL Guide" :options="options" :props="props" filterable />
-    </div>
-</template>
-
-<script lang="ts" setup>
-const props = {
-    multiple: true,
-}
-
-const options = [
-    {
-        value: 'guide',
-        label: 'Guide',
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                    {
-                        value: 'feedback',
-                        label: 'Feedback',
-                    },
-                    {
-                        value: 'efficiency',
-                        label: 'Efficiency',
-                    },
-                    {
-                        value: 'controllability',
-                        label: 'Controllability',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                    {
-                        value: 'top nav',
-                        label: 'Top Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'component',
-        label: 'Component',
-        children: [
-            {
-                value: 'basic',
-                label: 'Basic',
-                children: [
-                    {
-                        value: 'layout',
-                        label: 'Layout',
-                    },
-                    {
-                        value: 'color',
-                        label: 'Color',
-                    },
-                    {
-                        value: 'typography',
-                        label: 'Typography',
-                    },
-                    {
-                        value: 'icon',
-                        label: 'Icon',
-                    },
-                    {
-                        value: 'button',
-                        label: 'Button',
-                    },
-                ],
-            },
-            {
-                value: 'form',
-                label: 'Form',
-                children: [
-                    {
-                        value: 'radio',
-                        label: 'Radio',
-                    },
-                    {
-                        value: 'checkbox',
-                        label: 'Checkbox',
-                    },
-                    {
-                        value: 'input',
-                        label: 'Input',
-                    },
-                    {
-                        value: 'input-number',
-                        label: 'InputNumber',
-                    },
-                    {
-                        value: 'select',
-                        label: 'Select',
-                    },
-                    {
-                        value: 'cascader',
-                        label: 'Cascader',
-                    },
-                    {
-                        value: 'switch',
-                        label: 'Switch',
-                    },
-                    {
-                        value: 'slider',
-                        label: 'Slider',
-                    },
-                    {
-                        value: 'time-picker',
-                        label: 'TimePicker',
-                    },
-                    {
-                        value: 'date-picker',
-                        label: 'DatePicker',
-                    },
-                    {
-                        value: 'datetime-picker',
-                        label: 'DateTimePicker',
-                    },
-                    {
-                        value: 'upload',
-                        label: 'Upload',
-                    },
-                    {
-                        value: 'rate',
-                        label: 'Rate',
-                    },
-                    {
-                        value: 'form',
-                        label: 'Form',
-                    },
-                ],
-            },
-            {
-                value: 'data',
-                label: 'Data',
-                children: [
-                    {
-                        value: 'table',
-                        label: 'Table',
-                    },
-                    {
-                        value: 'tag',
-                        label: 'Tag',
-                    },
-                    {
-                        value: 'progress',
-                        label: 'Progress',
-                    },
-                    {
-                        value: 'tree',
-                        label: 'Tree',
-                    },
-                    {
-                        value: 'pagination',
-                        label: 'Pagination',
-                    },
-                    {
-                        value: 'badge',
-                        label: 'Badge',
-                    },
-                ],
-            },
-            {
-                value: 'notice',
-                label: 'Notice',
-                children: [
-                    {
-                        value: 'alert',
-                        label: 'Alert',
-                    },
-                    {
-                        value: 'loading',
-                        label: 'Loading',
-                    },
-                    {
-                        value: 'message',
-                        label: 'Message',
-                    },
-                    {
-                        value: 'message-box',
-                        label: 'MessageBox',
-                    },
-                    {
-                        value: 'notification',
-                        label: 'Notification',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'menu',
-                        label: 'Menu',
-                    },
-                    {
-                        value: 'tabs',
-                        label: 'Tabs',
-                    },
-                    {
-                        value: 'breadcrumb',
-                        label: 'Breadcrumb',
-                    },
-                    {
-                        value: 'dropdown',
-                        label: 'Dropdown',
-                    },
-                    {
-                        value: 'steps',
-                        label: 'Steps',
-                    },
-                ],
-            },
-            {
-                value: 'others',
-                label: 'Others',
-                children: [
-                    {
-                        value: 'dialog',
-                        label: 'Dialog',
-                    },
-                    {
-                        value: 'tooltip',
-                        label: 'Tooltip',
-                    },
-                    {
-                        value: 'popover',
-                        label: 'Popover',
-                    },
-                    {
-                        value: 'card',
-                        label: 'Card',
-                    },
-                    {
-                        value: 'carousel',
-                        label: 'Carousel',
-                    },
-                    {
-                        value: 'collapse',
-                        label: 'Collapse',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-            {
-                value: 'sketch',
-                label: 'Sketch Templates',
-            },
-            {
-                value: 'docs',
-                label: 'Design Documentation',
-            },
-        ],
-    },
-]
-</script>
-
-<style scoped>
-.example-block {
-    margin: 1rem;
-}
-.example-demonstration {
-    margin: 1rem;
-}
-</style>

docs/examples-bk/cascader/last-level.vue

@@ -1,274 +0,0 @@
-<template>
-    <el-cascader :options="options" :show-all-levels="false" />
-</template>
-
-<script lang="ts" setup>
-const options = [
-    {
-        value: 'guide',
-        label: 'Guide',
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                    {
-                        value: 'feedback',
-                        label: 'Feedback',
-                    },
-                    {
-                        value: 'efficiency',
-                        label: 'Efficiency',
-                    },
-                    {
-                        value: 'controllability',
-                        label: 'Controllability',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                    {
-                        value: 'top nav',
-                        label: 'Top Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'component',
-        label: 'Component',
-        children: [
-            {
-                value: 'basic',
-                label: 'Basic',
-                children: [
-                    {
-                        value: 'layout',
-                        label: 'Layout',
-                    },
-                    {
-                        value: 'color',
-                        label: 'Color',
-                    },
-                    {
-                        value: 'typography',
-                        label: 'Typography',
-                    },
-                    {
-                        value: 'icon',
-                        label: 'Icon',
-                    },
-                    {
-                        value: 'button',
-                        label: 'Button',
-                    },
-                ],
-            },
-            {
-                value: 'form',
-                label: 'Form',
-                children: [
-                    {
-                        value: 'radio',
-                        label: 'Radio',
-                    },
-                    {
-                        value: 'checkbox',
-                        label: 'Checkbox',
-                    },
-                    {
-                        value: 'input',
-                        label: 'Input',
-                    },
-                    {
-                        value: 'input-number',
-                        label: 'InputNumber',
-                    },
-                    {
-                        value: 'select',
-                        label: 'Select',
-                    },
-                    {
-                        value: 'cascader',
-                        label: 'Cascader',
-                    },
-                    {
-                        value: 'switch',
-                        label: 'Switch',
-                    },
-                    {
-                        value: 'slider',
-                        label: 'Slider',
-                    },
-                    {
-                        value: 'time-picker',
-                        label: 'TimePicker',
-                    },
-                    {
-                        value: 'date-picker',
-                        label: 'DatePicker',
-                    },
-                    {
-                        value: 'datetime-picker',
-                        label: 'DateTimePicker',
-                    },
-                    {
-                        value: 'upload',
-                        label: 'Upload',
-                    },
-                    {
-                        value: 'rate',
-                        label: 'Rate',
-                    },
-                    {
-                        value: 'form',
-                        label: 'Form',
-                    },
-                ],
-            },
-            {
-                value: 'data',
-                label: 'Data',
-                children: [
-                    {
-                        value: 'table',
-                        label: 'Table',
-                    },
-                    {
-                        value: 'tag',
-                        label: 'Tag',
-                    },
-                    {
-                        value: 'progress',
-                        label: 'Progress',
-                    },
-                    {
-                        value: 'tree',
-                        label: 'Tree',
-                    },
-                    {
-                        value: 'pagination',
-                        label: 'Pagination',
-                    },
-                    {
-                        value: 'badge',
-                        label: 'Badge',
-                    },
-                ],
-            },
-            {
-                value: 'notice',
-                label: 'Notice',
-                children: [
-                    {
-                        value: 'alert',
-                        label: 'Alert',
-                    },
-                    {
-                        value: 'loading',
-                        label: 'Loading',
-                    },
-                    {
-                        value: 'message',
-                        label: 'Message',
-                    },
-                    {
-                        value: 'message-box',
-                        label: 'MessageBox',
-                    },
-                    {
-                        value: 'notification',
-                        label: 'Notification',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'menu',
-                        label: 'Menu',
-                    },
-                    {
-                        value: 'tabs',
-                        label: 'Tabs',
-                    },
-                    {
-                        value: 'breadcrumb',
-                        label: 'Breadcrumb',
-                    },
-                    {
-                        value: 'dropdown',
-                        label: 'Dropdown',
-                    },
-                    {
-                        value: 'steps',
-                        label: 'Steps',
-                    },
-                ],
-            },
-            {
-                value: 'others',
-                label: 'Others',
-                children: [
-                    {
-                        value: 'dialog',
-                        label: 'Dialog',
-                    },
-                    {
-                        value: 'tooltip',
-                        label: 'Tooltip',
-                    },
-                    {
-                        value: 'popover',
-                        label: 'Popover',
-                    },
-                    {
-                        value: 'card',
-                        label: 'Card',
-                    },
-                    {
-                        value: 'carousel',
-                        label: 'Carousel',
-                    },
-                    {
-                        value: 'collapse',
-                        label: 'Collapse',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-            {
-                value: 'sketch',
-                label: 'Sketch Templates',
-            },
-            {
-                value: 'docs',
-                label: 'Design Documentation',
-            },
-        ],
-    },
-]
-</script>

docs/examples-bk/cascader/multiple-selection.vue

@@ -1,111 +0,0 @@
-<template>
-    <div class="example-block">
-        <span class="example-demonstration">Display all tags (default)</span>
-        <el-cascader :options="options" :props="props" clearable />
-    </div>
-    <div class="example-block">
-        <span class="example-demonstration">Collapse tags</span>
-        <el-cascader :options="options" :props="props" collapse-tags clearable />
-    </div>
-    <div class="example-block">
-        <span class="example-demonstration">Collapse tags tooltip</span>
-        <el-cascader :options="options" :props="props" collapse-tags collapse-tags-tooltip clearable />
-    </div>
-</template>
-
-<script lang="ts" setup>
-const props = { multiple: true }
-
-const options = [
-    {
-        value: 1,
-        label: 'Asia',
-        children: [
-            {
-                value: 2,
-                label: 'China',
-                children: [
-                    { value: 3, label: 'Beijing' },
-                    { value: 4, label: 'Shanghai' },
-                    { value: 5, label: 'Hangzhou' },
-                ],
-            },
-            {
-                value: 6,
-                label: 'Japan',
-                children: [
-                    { value: 7, label: 'Tokyo' },
-                    { value: 8, label: 'Osaka' },
-                    { value: 9, label: 'Kyoto' },
-                ],
-            },
-            {
-                value: 10,
-                label: 'Korea',
-                children: [
-                    { value: 11, label: 'Seoul' },
-                    { value: 12, label: 'Busan' },
-                    { value: 13, label: 'Taegu' },
-                ],
-            },
-        ],
-    },
-    {
-        value: 14,
-        label: 'Europe',
-        children: [
-            {
-                value: 15,
-                label: 'France',
-                children: [
-                    { value: 16, label: 'Paris' },
-                    { value: 17, label: 'Marseille' },
-                    { value: 18, label: 'Lyon' },
-                ],
-            },
-            {
-                value: 19,
-                label: 'UK',
-                children: [
-                    { value: 20, label: 'London' },
-                    { value: 21, label: 'Birmingham' },
-                    { value: 22, label: 'Manchester' },
-                ],
-            },
-        ],
-    },
-    {
-        value: 23,
-        label: 'North America',
-        children: [
-            {
-                value: 24,
-                label: 'US',
-                children: [
-                    { value: 25, label: 'New York' },
-                    { value: 26, label: 'Los Angeles' },
-                    { value: 27, label: 'Washington' },
-                ],
-            },
-            {
-                value: 28,
-                label: 'Canada',
-                children: [
-                    { value: 29, label: 'Toronto' },
-                    { value: 30, label: 'Montreal' },
-                    { value: 31, label: 'Ottawa' },
-                ],
-            },
-        ],
-    },
-]
-</script>
-
-<style scoped>
-.example-block {
-    margin: 1rem;
-}
-.example-demonstration {
-    margin: 1rem;
-}
-</style>

docs/examples-bk/cascader/option-disabling.vue

@@ -1,275 +0,0 @@
-<template>
-    <el-cascader :options="options" />
-</template>
-
-<script lang="ts" setup>
-const options = [
-    {
-        value: 'guide',
-        label: 'Guide',
-        disabled: true,
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                    {
-                        value: 'feedback',
-                        label: 'Feedback',
-                    },
-                    {
-                        value: 'efficiency',
-                        label: 'Efficiency',
-                    },
-                    {
-                        value: 'controllability',
-                        label: 'Controllability',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                    {
-                        value: 'top nav',
-                        label: 'Top Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'component',
-        label: 'Component',
-        children: [
-            {
-                value: 'basic',
-                label: 'Basic',
-                children: [
-                    {
-                        value: 'layout',
-                        label: 'Layout',
-                    },
-                    {
-                        value: 'color',
-                        label: 'Color',
-                    },
-                    {
-                        value: 'typography',
-                        label: 'Typography',
-                    },
-                    {
-                        value: 'icon',
-                        label: 'Icon',
-                    },
-                    {
-                        value: 'button',
-                        label: 'Button',
-                    },
-                ],
-            },
-            {
-                value: 'form',
-                label: 'Form',
-                children: [
-                    {
-                        value: 'radio',
-                        label: 'Radio',
-                    },
-                    {
-                        value: 'checkbox',
-                        label: 'Checkbox',
-                    },
-                    {
-                        value: 'input',
-                        label: 'Input',
-                    },
-                    {
-                        value: 'input-number',
-                        label: 'InputNumber',
-                    },
-                    {
-                        value: 'select',
-                        label: 'Select',
-                    },
-                    {
-                        value: 'cascader',
-                        label: 'Cascader',
-                    },
-                    {
-                        value: 'switch',
-                        label: 'Switch',
-                    },
-                    {
-                        value: 'slider',
-                        label: 'Slider',
-                    },
-                    {
-                        value: 'time-picker',
-                        label: 'TimePicker',
-                    },
-                    {
-                        value: 'date-picker',
-                        label: 'DatePicker',
-                    },
-                    {
-                        value: 'datetime-picker',
-                        label: 'DateTimePicker',
-                    },
-                    {
-                        value: 'upload',
-                        label: 'Upload',
-                    },
-                    {
-                        value: 'rate',
-                        label: 'Rate',
-                    },
-                    {
-                        value: 'form',
-                        label: 'Form',
-                    },
-                ],
-            },
-            {
-                value: 'data',
-                label: 'Data',
-                children: [
-                    {
-                        value: 'table',
-                        label: 'Table',
-                    },
-                    {
-                        value: 'tag',
-                        label: 'Tag',
-                    },
-                    {
-                        value: 'progress',
-                        label: 'Progress',
-                    },
-                    {
-                        value: 'tree',
-                        label: 'Tree',
-                    },
-                    {
-                        value: 'pagination',
-                        label: 'Pagination',
-                    },
-                    {
-                        value: 'badge',
-                        label: 'Badge',
-                    },
-                ],
-            },
-            {
-                value: 'notice',
-                label: 'Notice',
-                children: [
-                    {
-                        value: 'alert',
-                        label: 'Alert',
-                    },
-                    {
-                        value: 'loading',
-                        label: 'Loading',
-                    },
-                    {
-                        value: 'message',
-                        label: 'Message',
-                    },
-                    {
-                        value: 'message-box',
-                        label: 'MessageBox',
-                    },
-                    {
-                        value: 'notification',
-                        label: 'Notification',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'menu',
-                        label: 'Menu',
-                    },
-                    {
-                        value: 'tabs',
-                        label: 'Tabs',
-                    },
-                    {
-                        value: 'breadcrumb',
-                        label: 'Breadcrumb',
-                    },
-                    {
-                        value: 'dropdown',
-                        label: 'Dropdown',
-                    },
-                    {
-                        value: 'steps',
-                        label: 'Steps',
-                    },
-                ],
-            },
-            {
-                value: 'others',
-                label: 'Others',
-                children: [
-                    {
-                        value: 'dialog',
-                        label: 'Dialog',
-                    },
-                    {
-                        value: 'tooltip',
-                        label: 'Tooltip',
-                    },
-                    {
-                        value: 'popover',
-                        label: 'Popover',
-                    },
-                    {
-                        value: 'card',
-                        label: 'Card',
-                    },
-                    {
-                        value: 'carousel',
-                        label: 'Carousel',
-                    },
-                    {
-                        value: 'collapse',
-                        label: 'Collapse',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-            {
-                value: 'sketch',
-                label: 'Sketch Templates',
-            },
-            {
-                value: 'docs',
-                label: 'Design Documentation',
-            },
-        ],
-    },
-]
-</script>

docs/examples-bk/cascader/panel.vue

@@ -1,274 +0,0 @@
-<template>
-    <el-cascader-panel :options="options" />
-</template>
-
-<script lang="ts" setup>
-const options = [
-    {
-        value: 'guide',
-        label: 'Guide',
-        children: [
-            {
-                value: 'disciplines',
-                label: 'Disciplines',
-                children: [
-                    {
-                        value: 'consistency',
-                        label: 'Consistency',
-                    },
-                    {
-                        value: 'feedback',
-                        label: 'Feedback',
-                    },
-                    {
-                        value: 'efficiency',
-                        label: 'Efficiency',
-                    },
-                    {
-                        value: 'controllability',
-                        label: 'Controllability',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'side nav',
-                        label: 'Side Navigation',
-                    },
-                    {
-                        value: 'top nav',
-                        label: 'Top Navigation',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'component',
-        label: 'Component',
-        children: [
-            {
-                value: 'basic',
-                label: 'Basic',
-                children: [
-                    {
-                        value: 'layout',
-                        label: 'Layout',
-                    },
-                    {
-                        value: 'color',
-                        label: 'Color',
-                    },
-                    {
-                        value: 'typography',
-                        label: 'Typography',
-                    },
-                    {
-                        value: 'icon',
-                        label: 'Icon',
-                    },
-                    {
-                        value: 'button',
-                        label: 'Button',
-                    },
-                ],
-            },
-            {
-                value: 'form',
-                label: 'Form',
-                children: [
-                    {
-                        value: 'radio',
-                        label: 'Radio',
-                    },
-                    {
-                        value: 'checkbox',
-                        label: 'Checkbox',
-                    },
-                    {
-                        value: 'input',
-                        label: 'Input',
-                    },
-                    {
-                        value: 'input-number',
-                        label: 'InputNumber',
-                    },
-                    {
-                        value: 'select',
-                        label: 'Select',
-                    },
-                    {
-                        value: 'cascader',
-                        label: 'Cascader',
-                    },
-                    {
-                        value: 'switch',
-                        label: 'Switch',
-                    },
-                    {
-                        value: 'slider',
-                        label: 'Slider',
-                    },
-                    {
-                        value: 'time-picker',
-                        label: 'TimePicker',
-                    },
-                    {
-                        value: 'date-picker',
-                        label: 'DatePicker',
-                    },
-                    {
-                        value: 'datetime-picker',
-                        label: 'DateTimePicker',
-                    },
-                    {
-                        value: 'upload',
-                        label: 'Upload',
-                    },
-                    {
-                        value: 'rate',
-                        label: 'Rate',
-                    },
-                    {
-                        value: 'form',
-                        label: 'Form',
-                    },
-                ],
-            },
-            {
-                value: 'data',
-                label: 'Data',
-                children: [
-                    {
-                        value: 'table',
-                        label: 'Table',
-                    },
-                    {
-                        value: 'tag',
-                        label: 'Tag',
-                    },
-                    {
-                        value: 'progress',
-                        label: 'Progress',
-                    },
-                    {
-                        value: 'tree',
-                        label: 'Tree',
-                    },
-                    {
-                        value: 'pagination',
-                        label: 'Pagination',
-                    },
-                    {
-                        value: 'badge',
-                        label: 'Badge',
-                    },
-                ],
-            },
-            {
-                value: 'notice',
-                label: 'Notice',
-                children: [
-                    {
-                        value: 'alert',
-                        label: 'Alert',
-                    },
-                    {
-                        value: 'loading',
-                        label: 'Loading',
-                    },
-                    {
-                        value: 'message',
-                        label: 'Message',
-                    },
-                    {
-                        value: 'message-box',
-                        label: 'MessageBox',
-                    },
-                    {
-                        value: 'notification',
-                        label: 'Notification',
-                    },
-                ],
-            },
-            {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [
-                    {
-                        value: 'menu',
-                        label: 'Menu',
-                    },
-                    {
-                        value: 'tabs',
-                        label: 'Tabs',
-                    },
-                    {
-                        value: 'breadcrumb',
-                        label: 'Breadcrumb',
-                    },
-                    {
-                        value: 'dropdown',
-                        label: 'Dropdown',
-                    },
-                    {
-                        value: 'steps',
-                        label: 'Steps',
-                    },
-                ],
-            },
-            {
-                value: 'others',
-                label: 'Others',
-                children: [
-                    {
-                        value: 'dialog',
-                        label: 'Dialog',
-                    },
-                    {
-                        value: 'tooltip',
-                        label: 'Tooltip',
-                    },
-                    {
-                        value: 'popover',
-                        label: 'Popover',
-                    },
-                    {
-                        value: 'card',
-                        label: 'Card',
-                    },
-                    {
-                        value: 'carousel',
-                        label: 'Carousel',
-                    },
-                    {
-                        value: 'collapse',
-                        label: 'Collapse',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        value: 'resource',
-        label: 'Resource',
-        children: [
-            {
-                value: 'axure',
-                label: 'Axure Components',
-            },
-            {
-                value: 'sketch',
-                label: 'Sketch Templates',
-            },
-            {
-                value: 'docs',
-                label: 'Design Documentation',
-            },
-        ],
-    },
-]
-</script>

docs/examples-bk/checkbox/basic.vue

@@ -1,29 +0,0 @@
-<template>
-    <div>
-        <el-checkbox v-model="checked1" label="Option 1" size="large" />
-        <el-checkbox v-model="checked2" label="Option 2" size="large" />
-    </div>
-    <div>
-        <el-checkbox v-model="checked3" label="Option 1" />
-        <el-checkbox v-model="checked4" label="Option 2" />
-    </div>
-    <div>
-        <el-checkbox v-model="checked5" label="Option 1" size="small" />
-        <el-checkbox v-model="checked6" label="Option 2" size="small" />
-    </div>
-    <div>
-        <el-checkbox v-model="checked5" label="Option 1" size="small" disabled />
-        <el-checkbox v-model="checked6" label="Option 2" size="small" disabled />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checked1 = ref(true)
-const checked2 = ref(false)
-const checked3 = ref(false)
-const checked4 = ref(false)
-const checked5 = ref(false)
-const checked6 = ref(false)
-</script>

docs/examples-bk/checkbox/button-style.vue

@@ -1,39 +0,0 @@
-<template>
-    <div>
-        <el-checkbox-group v-model="checkboxGroup1" size="large">
-            <el-checkbox-button v-for="city in cities" :key="city" :label="city">
-                {{ city }}
-            </el-checkbox-button>
-        </el-checkbox-group>
-    </div>
-    <div class="demo-button-style">
-        <el-checkbox-group v-model="checkboxGroup2">
-            <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
-        </el-checkbox-group>
-    </div>
-    <div class="demo-button-style">
-        <el-checkbox-group v-model="checkboxGroup3" size="small">
-            <el-checkbox-button v-for="city in cities" :key="city" :label="city" :disabled="city === 'Beijing'">{{ city }}</el-checkbox-button>
-        </el-checkbox-group>
-    </div>
-    <div class="demo-button-style">
-        <el-checkbox-group v-model="checkboxGroup4" size="small" disabled>
-            <el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
-        </el-checkbox-group>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-const checkboxGroup1 = ref(['Shanghai'])
-const checkboxGroup2 = ref(['Shanghai'])
-const checkboxGroup3 = ref(['Shanghai'])
-const checkboxGroup4 = ref(['Shanghai'])
-const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
-</script>
-
-<style scoped>
-.demo-button-style {
-    margin-top: 24px;
-}
-</style>

docs/examples-bk/checkbox/disabled.vue

@@ -1,10 +0,0 @@
-<template>
-    <el-checkbox v-model="checked1" disabled>Disabled</el-checkbox>
-    <el-checkbox v-model="checked2">Not disabled</el-checkbox>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-const checked1 = ref(false)
-const checked2 = ref(true)
-</script>

docs/examples-bk/checkbox/grouping.vue

@@ -1,15 +0,0 @@
-<template>
-    <el-checkbox-group v-model="checkList">
-        <el-checkbox label="Option A" />
-        <el-checkbox label="Option B" />
-        <el-checkbox label="Option C" />
-        <el-checkbox label="disabled" disabled />
-        <el-checkbox label="selected and disabled" disabled />
-    </el-checkbox-group>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checkList = ref(['selected and disabled', 'Option A'])
-</script>

docs/examples-bk/checkbox/intermediate.vue

@@ -1,25 +0,0 @@
-<template>
-    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>
-    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-        <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
-    </el-checkbox-group>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checkAll = ref(false)
-const isIndeterminate = ref(true)
-const checkedCities = ref(['Shanghai', 'Beijing'])
-const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
-
-const handleCheckAllChange = (val: boolean) => {
-    checkedCities.value = val ? cities : []
-    isIndeterminate.value = false
-}
-const handleCheckedCitiesChange = (value: string[]) => {
-    const checkedCount = value.length
-    checkAll.value = checkedCount === cities.length
-    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
-}
-</script>

docs/examples-bk/checkbox/limitation.vue

@@ -1,12 +0,0 @@
-<template>
-    <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
-        <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
-    </el-checkbox-group>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checkedCities = ref(['Shanghai', 'Beijing'])
-const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
-</script>

docs/examples-bk/checkbox/with-border.vue

@@ -1,32 +0,0 @@
-<template>
-    <div>
-        <el-checkbox v-model="checked1" label="Option1" size="large" border />
-        <el-checkbox v-model="checked2" label="Option2" size="large" border />
-    </div>
-    <div class="mt-4">
-        <el-checkbox v-model="checked3" label="Option1" border />
-        <el-checkbox v-model="checked4" label="Option2" border />
-    </div>
-    <div class="mt-4">
-        <el-checkbox-group v-model="checkboxGroup1" size="small">
-            <el-checkbox label="Option1" border />
-            <el-checkbox label="Option2" border />
-        </el-checkbox-group>
-    </div>
-    <div class="mt-4">
-        <el-checkbox-group v-model="checkboxGroup1" size="small">
-            <el-checkbox label="Option1" border disabled />
-            <el-checkbox label="Option2" border disabled />
-        </el-checkbox-group>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const checked1 = ref(true)
-const checked2 = ref(false)
-const checked3 = ref(false)
-const checked4 = ref(true)
-const checkboxGroup1 = ref(['Option1'])
-</script>

docs/examples-bk/collapse/accordion.vue

@@ -1,29 +0,0 @@
-<template>
-    <div class="demo-collapse">
-        <el-collapse v-model="activeName" accordion>
-            <el-collapse-item title="Consistency" name="1">
-                <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
-                <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Feedback" name="2">
-                <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
-                <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Efficiency" name="3">
-                <div>Simplify the process: keep operating process simple and intuitive;</div>
-                <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
-                <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Controllability" name="4">
-                <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
-                <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
-            </el-collapse-item>
-        </el-collapse>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const activeName = ref('1')
-</script>

docs/examples-bk/collapse/basic.vue

@@ -1,32 +0,0 @@
-<template>
-    <div class="demo-collapse">
-        <el-collapse v-model="activeNames" @change="handleChange">
-            <el-collapse-item title="Consistency" name="1">
-                <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
-                <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Feedback" name="2">
-                <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
-                <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Efficiency" name="3">
-                <div>Simplify the process: keep operating process simple and intuitive;</div>
-                <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
-                <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Controllability" name="4">
-                <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
-                <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
-            </el-collapse-item>
-        </el-collapse>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const activeNames = ref(['1'])
-const handleChange = (val: string[]) => {
-    console.log(val)
-}
-</script>

docs/examples-bk/collapse/customization.vue

@@ -1,32 +0,0 @@
-<template>
-    <div class="demo-collapse">
-        <el-collapse accordion>
-            <el-collapse-item name="1">
-                <template #title>
-                    Consistency<el-icon class="header-icon">
-                        <info-filled />
-                    </el-icon>
-                </template>
-                <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
-                <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Feedback" name="2">
-                <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
-                <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Efficiency" name="3">
-                <div>Simplify the process: keep operating process simple and intuitive;</div>
-                <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
-                <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
-            </el-collapse-item>
-            <el-collapse-item title="Controllability" name="4">
-                <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
-                <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
-            </el-collapse-item>
-        </el-collapse>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { InfoFilled } from '@element-plus/icons-vue'
-</script>

docs/examples-bk/color-picker/alpha.vue

@@ -1,9 +0,0 @@
-<template>
-    <el-color-picker v-model="color" show-alpha />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const color = ref('rgba(19, 206, 102, 0.8)')
-</script>

docs/examples-bk/color-picker/basic.vue

@@ -1,28 +0,0 @@
-<template>
-    <div class="demo-color-block">
-        <span class="demonstration">With default value</span>
-        <el-color-picker v-model="color1" />
-    </div>
-    <div class="demo-color-block">
-        <span class="demonstration">With no default value</span>
-        <el-color-picker v-model="color2" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const color1 = ref('#409EFF')
-const color2 = ref()
-</script>
-
-<style>
-.demo-color-block {
-    display: flex;
-    align-items: center;
-    margin-bottom: 16px;
-}
-.demo-color-block .demonstration {
-    margin-right: 16px;
-}
-</style>

docs/examples-bk/color-picker/predefined-color.vue

@@ -1,25 +0,0 @@
-<template>
-    <el-color-picker v-model="color" show-alpha :predefine="predefineColors" />
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const color = ref('rgba(255, 69, 0, 0.68)')
-const predefineColors = ref([
-    '#ff4500',
-    '#ff8c00',
-    '#ffd700',
-    '#90ee90',
-    '#00ced1',
-    '#1e90ff',
-    '#c71585',
-    'rgba(255, 69, 0, 0.68)',
-    'rgb(255, 120, 0)',
-    'hsv(51, 100, 98)',
-    'hsva(120, 40, 94, 0.5)',
-    'hsl(181, 100%, 37%)',
-    'hsla(209, 100%, 56%, 0.73)',
-    '#c7158577',
-])
-</script>

docs/examples-bk/color-picker/sizes.vue

@@ -1,19 +0,0 @@
-<template>
-    <div class="demo-color-sizes">
-        <el-color-picker v-model="color" size="large" />
-        <el-color-picker v-model="color" />
-        <el-color-picker v-model="color" size="small" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const color = ref('409EFF')
-</script>
-
-<style>
-.demo-color-sizes .el-color-picker:not(:last-child) {
-    margin-right: 16px;
-}
-</style>

docs/examples-bk/config-provider/button.vue

@@ -1,19 +0,0 @@
-<template>
-    <div>
-        <div m="b-2">
-            <el-checkbox v-model="config.autoInsertSpace">autoInsertSpace</el-checkbox>
-        </div>
-
-        <el-config-provider :button="config">
-            <el-button>中文</el-button>
-        </el-config-provider>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue'
-
-const config = reactive({
-    autoInsertSpace: true,
-})
-</script>

docs/examples-bk/config-provider/message.vue

@@ -1,18 +0,0 @@
-<template>
-    <div>
-        <el-config-provider :message="config">
-            <el-button @click="open">OPEN</el-button>
-        </el-config-provider>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue'
-import { ElMessage } from 'element-plus'
-const config = reactive({
-    max: 3,
-})
-const open = () => {
-    ElMessage('This is a message.')
-}
-</script>

docs/examples-bk/config-provider/usage.vue

@@ -1,24 +0,0 @@
-<template>
-    <div>
-        <el-button mb-2 @click="toggle">Switch Language</el-button>
-        <br />
-
-        <el-config-provider :locale="locale">
-            <el-table mb-1 :data="[]" />
-            <el-pagination :total="100" />
-        </el-config-provider>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import en from 'element-plus/dist/locale/en.mjs'
-
-const language = ref('zh-cn')
-const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
-
-const toggle = () => {
-    language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
-}
-</script>

docs/examples-bk/container/common-layout.scss

@@ -1,31 +0,0 @@
-.common-layout {
-  .el-header,
-  .el-footer,
-  .el-main,
-  .el-aside {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .el-header,
-  .el-footer {
-    background-color: var(--el-color-primary-light-7);
-    color: var(--el-text-color-primary);
-    text-align: center;
-  }
-
-  .el-aside {
-    background-color: var(--el-color-primary-light-8);
-    color: var(--el-text-color-primary);
-    text-align: center;
-  }
-
-  .el-main {
-    background-color: var(--el-color-primary-light-9);
-    color: var(--el-text-color-primary);
-    text-align: center;
-
-    height: 150px;
-  }
-}

docs/examples-bk/container/example.vue

@@ -1,126 +0,0 @@
-<template>
-    <el-container class="layout-container-demo" style="height: 500px">
-        <el-aside width="200px">
-            <el-scrollbar>
-                <el-menu :default-openeds="['1', '3']">
-                    <el-sub-menu index="1">
-                        <template #title>
-                            <el-icon><message /></el-icon>Navigator One
-                        </template>
-                        <el-menu-item-group>
-                            <template #title>Group 1</template>
-                            <el-menu-item index="1-1">Option 1</el-menu-item>
-                            <el-menu-item index="1-2">Option 2</el-menu-item>
-                        </el-menu-item-group>
-                        <el-menu-item-group title="Group 2">
-                            <el-menu-item index="1-3">Option 3</el-menu-item>
-                        </el-menu-item-group>
-                        <el-sub-menu index="1-4">
-                            <template #title>Option4</template>
-                            <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
-                        </el-sub-menu>
-                    </el-sub-menu>
-                    <el-sub-menu index="2">
-                        <template #title>
-                            <el-icon><icon-menu /></el-icon>Navigator Two
-                        </template>
-                        <el-menu-item-group>
-                            <template #title>Group 1</template>
-                            <el-menu-item index="2-1">Option 1</el-menu-item>
-                            <el-menu-item index="2-2">Option 2</el-menu-item>
-                        </el-menu-item-group>
-                        <el-menu-item-group title="Group 2">
-                            <el-menu-item index="2-3">Option 3</el-menu-item>
-                        </el-menu-item-group>
-                        <el-sub-menu index="2-4">
-                            <template #title>Option 4</template>
-                            <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
-                        </el-sub-menu>
-                    </el-sub-menu>
-                    <el-sub-menu index="3">
-                        <template #title>
-                            <el-icon><setting /></el-icon>Navigator Three
-                        </template>
-                        <el-menu-item-group>
-                            <template #title>Group 1</template>
-                            <el-menu-item index="3-1">Option 1</el-menu-item>
-                            <el-menu-item index="3-2">Option 2</el-menu-item>
-                        </el-menu-item-group>
-                        <el-menu-item-group title="Group 2">
-                            <el-menu-item index="3-3">Option 3</el-menu-item>
-                        </el-menu-item-group>
-                        <el-sub-menu index="3-4">
-                            <template #title>Option 4</template>
-                            <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
-                        </el-sub-menu>
-                    </el-sub-menu>
-                </el-menu>
-            </el-scrollbar>
-        </el-aside>
-
-        <el-container>
-            <el-header style="text-align: right; font-size: 12px">
-                <div class="toolbar">
-                    <el-dropdown>
-                        <el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon>
-                        <template #dropdown>
-                            <el-dropdown-menu>
-                                <el-dropdown-item>View</el-dropdown-item>
-                                <el-dropdown-item>Add</el-dropdown-item>
-                                <el-dropdown-item>Delete</el-dropdown-item>
-                            </el-dropdown-menu>
-                        </template>
-                    </el-dropdown>
-                    <span>Tom</span>
-                </div>
-            </el-header>
-
-            <el-main>
-                <el-scrollbar>
-                    <el-table :data="tableData">
-                        <el-table-column prop="date" label="Date" width="140" />
-                        <el-table-column prop="name" label="Name" width="120" />
-                        <el-table-column prop="address" label="Address" />
-                    </el-table>
-                </el-scrollbar>
-            </el-main>
-        </el-container>
-    </el-container>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
-
-const item = {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-}
-const tableData = ref(Array.from({ length: 20 }).fill(item))
-</script>
-
-<style scoped>
-.layout-container-demo .el-header {
-    position: relative;
-    background-color: var(--el-color-primary-light-7);
-    color: var(--el-text-color-primary);
-}
-.layout-container-demo .el-aside {
-    color: var(--el-text-color-primary);
-    background: var(--el-color-primary-light-8);
-}
-.layout-container-demo .el-menu {
-    border-right: none;
-}
-.layout-container-demo .el-main {
-    padding: 0;
-}
-.layout-container-demo .toolbar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    right: 20px;
-}
-</style>

docs/examples-bk/container/layout-ahm.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="common-layout">
-        <el-container>
-            <el-aside width="200px">Aside</el-aside>
-            <el-container>
-                <el-header>Header</el-header>
-                <el-main>Main</el-main>
-            </el-container>
-        </el-container>
-    </div>
-</template>

docs/examples-bk/container/layout-ahmf.vue

@@ -1,12 +0,0 @@
-<template>
-    <div class="common-layout">
-        <el-container>
-            <el-aside width="200px">Aside</el-aside>
-            <el-container>
-                <el-header>Header</el-header>
-                <el-main>Main</el-main>
-                <el-footer>Footer</el-footer>
-            </el-container>
-        </el-container>
-    </div>
-</template>

docs/examples-bk/container/layout-am.vue

@@ -1,8 +0,0 @@
-<template>
-    <div class="common-layout">
-        <el-container>
-            <el-aside width="200px">Aside</el-aside>
-            <el-main>Main</el-main>
-        </el-container>
-    </div>
-</template>

docs/examples-bk/container/layout-ham.vue

@@ -1,11 +0,0 @@
-<template>
-    <div class="common-layout">
-        <el-container>
-            <el-header>Header</el-header>
-            <el-container>
-                <el-aside width="200px">Aside</el-aside>
-                <el-main>Main</el-main>
-            </el-container>
-        </el-container>
-    </div>
-</template>

docs/examples-bk/container/layout-hamf.vue

@@ -1,14 +0,0 @@
-<template>
-    <div class="common-layout">
-        <el-container>
-            <el-header>Header</el-header>
-            <el-container>
-                <el-aside width="200px">Aside</el-aside>
-                <el-container>
-                    <el-main>Main</el-main>
-                    <el-footer>Footer</el-footer>
-                </el-container>
-            </el-container>
-        </el-container>
-    </div>
-</template>

docs/examples-bk/container/layout-hm.vue

@@ -1,8 +0,0 @@
-<template>
-    <div class="common-layout">
-        <el-container>
-            <el-header>Header</el-header>
-            <el-main>Main</el-main>
-        </el-container>
-    </div>
-</template>

docs/examples-bk/container/layout-hmf.vue

@@ -1,9 +0,0 @@
-<template>
-    <div class="common-layout">
-        <el-container>
-            <el-header>Header</el-header>
-            <el-main>Main</el-main>
-            <el-footer>Footer</el-footer>
-        </el-container>
-    </div>
-</template>

docs/examples-bk/date-picker/custom-content.vue

@@ -1,56 +0,0 @@
-<template>
-    <div class="demo-date-picker">
-        <el-date-picker v-model="value" type="date" placeholder="Pick a day" format="YYYY/MM/DD" value-format="YYYY-MM-DD">
-            <template #default="cell">
-                <div class="cell" :class="{ current: cell.isCurrent }">
-                    <span class="text">{{ cell.text }}</span>
-                    <span v-if="isHoliday(cell)" class="holiday" />
-                </div>
-            </template>
-        </el-date-picker>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const value = ref('2021-10-29')
-const holidays = ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07']
-
-const isHoliday = ({ dayjs }) => {
-    return holidays.includes(dayjs.format('YYYY-MM-DD'))
-}
-</script>
-
-<style scoped>
-.cell {
-    height: 30px;
-    padding: 3px 0;
-    box-sizing: border-box;
-}
-.cell .text {
-    width: 24px;
-    height: 24px;
-    display: block;
-    margin: 0 auto;
-    line-height: 24px;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    border-radius: 50%;
-}
-.cell.current .text {
-    background: #626aef;
-    color: #fff;
-}
-.cell .holiday {
-    position: absolute;
-    width: 6px;
-    height: 6px;
-    background: var(--el-color-danger);
-    border-radius: 50%;
-    bottom: 0px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-</style>

docs/examples-bk/date-picker/custom-prefix-icon.vue

@@ -1,43 +0,0 @@
-<template>
-    <div class="demo-date-picker">
-        <div class="block">
-            <span class="demonstration">set prefix-icon</span>
-            <el-date-picker v-model="value1" type="date" placeholder="Pick a day" :prefix-icon="customPrefix" />
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { h, ref, shallowRef } from 'vue'
-
-const value1 = ref('')
-
-const customPrefix = shallowRef({
-    render() {
-        return h('p', 'pre')
-    },
-})
-</script>
-<style scoped>
-.demo-date-picker {
-    display: flex;
-    width: 100%;
-    padding: 0;
-    flex-wrap: wrap;
-}
-.demo-date-picker .block {
-    padding: 30px 0;
-    text-align: center;
-    border-right: solid 1px var(--el-border-color);
-    flex: 1;
-}
-.demo-date-picker .block:last-child {
-    border-right: none;
-}
-.demo-date-picker .demonstration {
-    display: block;
-    color: var(--el-text-color-secondary);
-    font-size: 14px;
-    margin-bottom: 20px;
-}
-</style>