style(架构调整): theme-chalk 单独拆包

docs/zh-CN/component/button.md

@@ -14,152 +14,3 @@ lang: zh-CN
 button/basic
 
 :::
-
-## Disabled Button
-
-The `disabled` attribute determines if the button is disabled.
-
-:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
-
-button/disabled
-
-:::
-
-## Link Button
-
-:::warning
-
-`type="text"` has been **deprecated**, and **will be** removed in <VersionTag version="3.0.0" />, consider switching to new API.
-
-New API `link` has been added in <VersionTag version="2.2.1" />, you can use `type` API to set the theme of your link button
-
-:::
-
-:::demo
-
-button/link
-
-:::
-
-## Text Button
-
-:::tip
-
-Text button has been upgraded with a new design since <el-tag round effect="plain" size="small">2.2.0</el-tag> , if you want to use the
-previous version like button, you might want to check [Link](./link.md#basic) out.
-
-The API is also updated, because the `type` attribute also represents the button's style. So we have to make a new API
-`text: boolean` for text button.
-
-:::
-
-Buttons without border and background.
-
-:::demo
-
-button/text
-
-:::
-
-## Icon Button
-
-Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
-
-:::demo Use the `icon` attribute to add icon. You can find the icon list in Element Plus icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
-
-button/icon
-
-:::
-
-## Button Group
-
-Displayed as a button group, can be used to group a series of similar operations.
-
-:::demo Use tag `<el-button-group>` to group your buttons.
-
-button/group
-
-:::
-
-## Loading Button
-
-Click the button to load data, then the button displays a loading state.
-
-Set `loading` attribute to `true` to display loading state.
-
-:::tip
-
-You can use the `loading` slot or `loadingIcon` to customize your loading component
-
-ps: `loading` slot has higher priority than loadingIcon
-
-:::
-
-:::demo
-
-button/loading
-
-:::
-
-## Sizes
-
-Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
-
-:::demo Use attribute `size` to set additional sizes with `large`, `small`.
-
-button/size
-
-:::
-
-## Custom Color <VersionTag version="beta" />
-
-You can custom button color.
-
-We will calculate hover color & active color automatically.
-
-:::demo
-
-button/custom
-
-:::
-
-## Button Attributes
-
-| Name                                | Description                                                     | Type                  | Accepted Values                                               | Default |
-| ----------------------------------- | --------------------------------------------------------------- | --------------------- | ------------------------------------------------------------- | ------- |
-| size                                | button size                                                     | string                | large / default /small                                        | —       |
-| type                                | button type                                                     | string                | primary / success / warning / danger / info / <del>text</del> | —       |
-| plain                               | determine whether it's a plain button                           | boolean               | —                                                             | false   |
-| text <VersionTag version="2.2.0" /> | determine whether it's a text button                            | boolean               | —                                                             | false   |
-| bg <VersionTag version="2.2.0" />   | determine whether the text button background color is always on | boolean               | —                                                             | false   |
-| link <VersionTag version="2.2.1" /> | determine whether it's a link button                            | boolean               | —                                                             | false   |
-| round                               | determine whether it's a round button                           | boolean               | —                                                             | false   |
-| circle                              | determine whether it's a circle button                          | boolean               | —                                                             | false   |
-| loading                             | determine whether it's loading                                  | boolean               | —                                                             | false   |
-| loading-icon                        | customize loading icon component                                | `string \| Component` | —                                                             | Loading |
-| disabled                            | disable the button                                              | boolean               | —                                                             | false   |
-| icon                                | icon component                                                  | `string \| Component` | —                                                             | —       |
-| autofocus                           | same as native button's `autofocus`                             | boolean               | —                                                             | false   |
-| native-type                         | same as native button's `type`                                  | string                | button / submit / reset                                       | button  |
-| auto-insert-space                   | automatically insert a space between two chinese characters     | boolean               |                                                               | —       |
-
-## Button Slots
-
-| Name    | Description                 |
-| ------- | --------------------------- |
-| —       | customize default content   |
-| loading | customize loading component |
-| icon    | customize icon component    |
-
-## Button-Group Attributes
-
-| Name | Description                                      | Type   | Accepted Values                             | Default |
-| ---- | ------------------------------------------------ | ------ | ------------------------------------------- | ------- |
-| size | control the size of buttons in this button-group | string | large / default /small                      | —       |
-| type | control the type of buttons in this button-group | string | primary / success / warning / danger / info | —       |
-
-## Button-Group Slots
-
-| Name | Description                    | Subtags |
-| ---- | ------------------------------ | ------- |
-| -    | customize button group content | Button  |

internal/build-constants/src/repo.ts

@@ -1,4 +1,4 @@
-export const REPO_OWNER = 'kankan-component'
-export const REPO_NAME = 'kankan-component'
+export const REPO_OWNER = 'kankan-components'
+export const REPO_NAME = 'kankan-components'
 export const REPO_PATH = `${REPO_OWNER}/${REPO_NAME}`
 export const REPO_BRANCH = 'main'

internal/build-utils/src/paths.ts

@@ -7,7 +7,7 @@ export const themeRoot = resolve(pkgRoot, 'theme-chalk')
 export const hookRoot = resolve(pkgRoot, 'hooks')
 export const localeRoot = resolve(pkgRoot, 'locale')
 export const directiveRoot = resolve(pkgRoot, 'directives')
-export const epRoot = resolve(pkgRoot, 'element-plus')
+export const epRoot = resolve(pkgRoot, 'kankan-components')
 export const utilRoot = resolve(pkgRoot, 'utils')
 export const buildRoot = resolve(projRoot, 'internal', 'build')
 
@@ -19,7 +19,7 @@ export const vpRoot = resolve(docRoot, '.vitepress')
 /** `/dist` */
 export const buildOutput = resolve(projRoot, 'dist')
 /** `/dist/element-plus` */
-export const epOutput = resolve(buildOutput, 'element-plus')
+export const epOutput = resolve(buildOutput, 'kankan-components')
 
 export const projPackage = resolve(projRoot, 'package.json')
 export const compPackage = resolve(compRoot, 'package.json')

internal/build/src/plugins/element-plus-alias.ts

@@ -2,13 +2,13 @@ import { PKG_NAME, PKG_PREFIX } from '@kankan/build-constants'
 
 import type { Plugin } from 'rollup'
 
-export function ElementPlusAlias(): Plugin {
+export function KankanComponentsAlias(): Plugin {
     const themeChalk = 'theme-chalk'
     const sourceThemeChalk = `${PKG_PREFIX}/${themeChalk}` as const
     const bundleThemeChalk = `${PKG_NAME}/${themeChalk}` as const
 
     return {
-        name: 'element-plus-alias-plugin',
+        name: 'kankan-components-alias-plugin',
         resolveId(id) {
             if (!id.startsWith(sourceThemeChalk)) return
             return {

internal/build/src/tasks/full-bundle.ts

@@ -11,8 +11,8 @@ import glob from 'fast-glob'
 import { camelCase, upperFirst } from 'lodash'
 import { PKG_BRAND_NAME, PKG_CAMELCASE_LOCAL_NAME, PKG_CAMELCASE_NAME } from '@kankan/build-constants'
 import { epOutput, epRoot, localeRoot } from '@kankan/build-utils'
-import { version } from '../../../../packages/kankan/version'
-import { ElementPlusAlias } from '../plugins/kankan-alias'
+import { version } from '../../../../packages/kankan-components/version'
+import { KankanComponentsAlias } from '../plugins/kankan-components-alias'
 import { formatBundleFilename, generateExternal, withTaskName, writeBundles } from '../utils'
 import { target } from '../build-info'
 import type { Plugin } from 'rollup'
@@ -21,7 +21,7 @@ const banner = `/*! ${PKG_BRAND_NAME} v${version} */\n`
 
 async function buildFullEntry(minify: boolean) {
     const plugins: Plugin[] = [
-        ElementPlusAlias(),
+        KankanComponentsAlias(),
         VueMacros({
             setupComponent: false,
             setupSFC: false,

internal/build/src/tasks/modules.ts

@@ -8,7 +8,7 @@ import esbuild from 'rollup-plugin-esbuild'
 import glob from 'fast-glob'
 import { epRoot, excludeFiles, pkgRoot } from '@kankan/build-utils'
 import { generateExternal, writeBundles } from '../utils'
-import { ElementPlusAlias } from '../plugins/element-plus-alias'
+import { KankanComponentsAlias } from '../plugins/kankan-components-alias'
 import { buildConfigEntries, target } from '../build-info'
 
 import type { OutputOptions } from 'rollup'
@@ -24,7 +24,7 @@ export const buildModules = async () => {
     const bundle = await rollup({
         input,
         plugins: [
-            ElementPlusAlias(),
+            KankanComponentsAlias(),
             VueMacros({
                 setupComponent: false,
                 setupSFC: false,

package.json

@@ -8,7 +8,6 @@
     ],
     "scripts": {
         "clean": "pnpm run -r clean",
-        "build": "pnpm run -r build",
         "test": "vitest",
         "test:coverage": "vitest --coverage",
         "lint": "eslint --ext js,ts,tsx,vue . --fix",
@@ -19,6 +18,8 @@
         "play": "pnpm -C playground dev",
         "docs:dev": "pnpm run -C docs dev",
         "stub": "pnpm run -r --parallel stub",
+        "build": "pnpm run -C internal/build start",
+        "build:theme": "pnpm run -C packages/theme-chalk build",
         "prepare": "husky install",
         "postinstall": "pnpm stub && concurrently  \"pnpm run -C internal/metadata dev\""
     },
@@ -42,6 +43,7 @@
         "@pnpm/find-workspace-packages": "^4.0.16",
         "@pnpm/logger": "^4.0.0",
         "@pnpm/types": "^8.4.0",
+        "@types/gulp": "^4.0.9",
         "@types/jsdom": "^16.2.14",
         "@types/node": "*",
         "@types/sass": "^1.43.1",

packages/components/config-provider/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@kankan/utils'
+
+import ConfigProvider from './src/config-provider'
+
+export const UIConfigProvider = withInstall(ConfigProvider)
+export default UIConfigProvider
+
+export * from './src/config-provider'

packages/components/config-provider/src/config-provider.ts

@@ -0,0 +1,71 @@
+import { defineComponent, renderSlot, watch } from 'vue'
+import { buildProps, definePropType } from '@element-plus/utils'
+import { provideGlobalConfig, useSizeProp } from '@element-plus/hooks'
+
+import type { ExtractPropTypes } from 'vue'
+import type { ExperimentalFeatures } from '@element-plus/tokens'
+import type { Language } from '@element-plus/locale'
+import type { ButtonConfigContext } from '@element-plus/components/button'
+import type { MessageConfigContext } from '@element-plus/components/message'
+
+export const messageConfig: MessageConfigContext = {}
+
+export const configProviderProps = buildProps({
+    // Controlling if the users want a11y features.
+    a11y: {
+        type: Boolean,
+        default: true,
+    },
+
+    locale: {
+        type: definePropType<Language>(Object),
+    },
+
+    size: useSizeProp,
+
+    button: {
+        type: definePropType<ButtonConfigContext>(Object),
+    },
+
+    experimentalFeatures: {
+        type: definePropType<ExperimentalFeatures>(Object),
+    },
+
+    // Controls if we should handle keyboard navigation
+    keyboardNavigation: {
+        type: Boolean,
+        default: true,
+    },
+
+    message: {
+        type: definePropType<MessageConfigContext>(Object),
+    },
+
+    zIndex: Number,
+
+    namespace: {
+        type: String,
+        default: 'el',
+    },
+} as const)
+export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>
+
+const ConfigProvider = defineComponent({
+    name: 'ElConfigProvider',
+    props: configProviderProps,
+
+    setup(props, { slots }) {
+        watch(
+            () => props.message,
+            val => {
+                Object.assign(messageConfig, val ?? {})
+            },
+            { immediate: true, deep: true }
+        )
+        const config = provideGlobalConfig(props)
+        return () => renderSlot(slots, 'default', { config: config?.value })
+    },
+})
+export type ConfigProviderInstance = InstanceType<typeof ConfigProvider>
+
+export default ConfigProvider

packages/components/config-provider/style/css.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css'
+import '@element-plus/theme-chalk/el-config-provider.css'

packages/components/config-provider/style/index.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style'
+import '@element-plus/theme-chalk/src/config-provider.scss'

packages/hooks/index.ts

@@ -1 +1,2 @@
 export * from './use-z-index'
+export * from './use-global-config'

packages/hooks/use-global-config/index.ts

@@ -0,0 +1,54 @@
+import { computed, getCurrentInstance, inject, provide, ref, unref } from 'vue'
+import { configProviderContextKey } from '@kankan-components/tokens'
+import { debugWarn, keysOf } from '@kankan-components/utils'
+
+import type { MaybeRef } from '@vueuse/core'
+import type { App, Ref } from 'vue'
+import type { ConfigProviderContext } from '@kankan-components/tokens'
+
+// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale
+// into the component as default injection value.
+// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266
+const globalConfig = ref<ConfigProviderContext>()
+
+export function useGlobalConfig<K extends keyof ConfigProviderContext, D extends ConfigProviderContext[K]>(key: K, defaultValue?: D): Ref<Exclude<ConfigProviderContext[K], undefined> | D>
+export function useGlobalConfig(): Ref<ConfigProviderContext>
+export function useGlobalConfig(key?: keyof ConfigProviderContext, defaultValue = undefined) {
+    const config = getCurrentInstance() ? inject(configProviderContextKey, globalConfig) : globalConfig
+    if (key) {
+        return computed(() => config.value?.[key] ?? defaultValue)
+    } else {
+        return config
+    }
+}
+
+export const provideGlobalConfig = (config: MaybeRef<ConfigProviderContext>, app?: App, global = false) => {
+    const inSetup = !!getCurrentInstance()
+    const oldConfig = inSetup ? useGlobalConfig() : undefined
+
+    const provideFn = app?.provide ?? (inSetup ? provide : undefined)
+    if (!provideFn) {
+        debugWarn('provideGlobalConfig', 'provideGlobalConfig() can only be used inside setup().')
+        return
+    }
+
+    const context = computed(() => {
+        const cfg = unref(config)
+        if (!oldConfig?.value) return cfg
+        return mergeConfig(oldConfig.value, cfg)
+    })
+    provideFn(configProviderContextKey, context)
+    if (global || !globalConfig.value) {
+        globalConfig.value = context.value
+    }
+    return context
+}
+
+const mergeConfig = (a: ConfigProviderContext, b: ConfigProviderContext): ConfigProviderContext => {
+    const keys = [...new Set([...keysOf(a), ...keysOf(b)])]
+    const obj: Record<string, any> = {}
+    for (const key of keys) {
+        obj[key] = b[key] ?? a[key]
+    }
+    return obj
+}

packages/kankan-components/component.ts

@@ -0,0 +1,5 @@
+import { UIAudio } from '@kankan-components/components/basic/audio'
+import { UIButton } from '@kankan-components/components/basic/button'
+import type { Plugin } from 'vue'
+
+export default [UIAudio, UIButton] as Plugin[]

packages/kankan-components/defaults.ts

@@ -0,0 +1,5 @@
+import { makeInstaller } from './make-installer'
+import Components from './component'
+import Plugins from './plugin'
+
+export default makeInstaller([...Components, ...Plugins])

packages/kankan-components/index.ts

@@ -0,0 +1,13 @@
+import installer from './defaults'
+export * from '@kankan-components/components'
+// export * from '@element-plus/constants'
+// export * from '@element-plus/directives'
+export * from '@kankan-components/hooks'
+// export * from '@element-plus/tokens'
+export * from './make-installer'
+
+export const install = installer.install
+export const version = installer.version
+export default installer
+
+export { default as dayjs } from 'dayjs'

packages/kankan-components/make-installer.ts

@@ -0,0 +1,23 @@
+import { provideGlobalConfig } from '@kankan-components/hooks'
+// import { INSTALLED_KEY } from '@kankan-components/constants'
+import { version } from './version'
+import type { App, Plugin } from '@vue/runtime-core'
+import type { ConfigProviderContext } from '@kankan-components/tokens'
+
+const INSTALLED_KEY = Symbol('INSTALLED_KEY')
+
+export const makeInstaller = (components: Plugin[] = []) => {
+    const install = (app: App, options?: ConfigProviderContext) => {
+        if (app[INSTALLED_KEY]) return
+
+        app[INSTALLED_KEY] = true
+        components.forEach(c => app.use(c))
+
+        if (options) provideGlobalConfig(options, app, true)
+    }
+
+    return {
+        version,
+        install,
+    }
+}

packages/kankan-components/package.json

@@ -0,0 +1,72 @@
+{
+    "name": "kankan-components",
+    "version": "0.0.1",
+    "description": "A Component Library forkankan",
+    "license": "MIT",
+    "main": "lib/index.js",
+    "module": "es/index.mjs",
+    "types": "es/index.d.ts",
+    "exports": {
+        ".": {
+            "require": "./lib/index.js",
+            "import": "./es/index.mjs",
+            "types": "./es/index.d.ts"
+        },
+        "./es": "./es/index.mjs",
+        "./lib": "./lib/index.js",
+        "./es/*.mjs": "./es/*.mjs",
+        "./es/*": "./es/*.mjs",
+        "./lib/*.js": "./lib/*.js",
+        "./lib/*": "./lib/*.js",
+        "./*": "./*"
+    },
+    "unpkg": "dist/index.full.js",
+    "jsdelivr": "dist/index.full.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "style": "dist/index.css",
+    "sideEffects": [
+        "dist/*",
+        "theme-chalk/**/*.css",
+        "theme-chalk/src/**/*.scss",
+        "es/components/*/style/*",
+        "lib/components/*/style/*"
+    ],
+    "peerDependencies": {
+        "vue": "^3.2.0"
+    },
+    "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.0.6",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.3",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+    },
+    "devDependencies": {
+        "@types/node": "*",
+        "csstype": "^2.6.20",
+        "vue": "^3.2.37",
+        "vue-router": "^4.0.16"
+    },
+    "vetur": {
+        "tags": "tags.json",
+        "attributes": "attributes.json"
+    },
+    "web-types": "web-types.json",
+    "browserslist": [
+        "> 1%",
+        "not ie 11",
+        "not op_mini all"
+    ]
+}

packages/kankan-components/plugin.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vue'
+
+export default [] as Plugin[]

packages/kankan-components/version.ts

@@ -0,0 +1 @@
+export const version = '0.0.1'

packages/theme-chalk/.gitignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+lib
+npm-debug*

packages/theme-chalk/gulpfile.ts

@@ -0,0 +1,75 @@
+import path from 'path'
+import chalk from 'chalk'
+import { dest, parallel, series, src } from 'gulp'
+import gulpSass from 'gulp-sass'
+import dartSass from 'sass'
+import autoprefixer from 'gulp-autoprefixer'
+import cleanCSS from 'gulp-clean-css'
+import rename from 'gulp-rename'
+import consola from 'consola'
+import { epOutput } from '@kankan/build-utils'
+
+const distFolder = path.resolve(__dirname, 'dist')
+const distBundle = path.resolve(epOutput, 'theme-chalk')
+
+/**
+ * compile theme-chalk scss & minify
+ * not use sass.sync().on('error', sass.logError) to throw exception
+ * @returns
+ */
+function buildThemeChalk() {
+    const sass = gulpSass(dartSass)
+    const noElPrefixFile = /(index|base|display)/
+    return src(path.resolve(__dirname, 'src/*.scss'))
+        .pipe(sass.sync())
+        .pipe(autoprefixer({ cascade: false }))
+        .pipe(
+            cleanCSS({}, details => {
+                consola.success(`${chalk.cyan(details.name)}: ${chalk.yellow(details.stats.originalSize / 1000)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`)
+            })
+        )
+        .pipe(
+            rename(path => {
+                if (!noElPrefixFile.test(path.basename)) {
+                    path.basename = `ui-${path.basename}`
+                }
+            })
+        )
+        .pipe(dest(distFolder))
+}
+
+/**
+ * Build dark Css Vars
+ * @returns
+ */
+function buildDarkCssVars() {
+    const sass = gulpSass(dartSass)
+    return src(path.resolve(__dirname, 'src/dark/css-vars.scss'))
+        .pipe(sass.sync())
+        .pipe(autoprefixer({ cascade: false }))
+        .pipe(
+            cleanCSS({}, details => {
+                consola.success(`${chalk.cyan(details.name)}: ${chalk.yellow(details.stats.originalSize / 1000)} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`)
+            })
+        )
+        .pipe(dest(`${distFolder}/dark`))
+}
+
+/**
+ * copy from packages/theme-chalk/dist to dist/element-plus/theme-chalk
+ */
+export function copyThemeChalkBundle() {
+    return src(`${distFolder}/**`).pipe(dest(distBundle))
+}
+
+/**
+ * copy source file to packages
+ */
+
+export function copyThemeChalkSource() {
+    return src(path.resolve(__dirname, 'src/**')).pipe(dest(path.resolve(distBundle, 'src')))
+}
+// buildDarkCssVars
+export const build = parallel(copyThemeChalkSource, series(buildThemeChalk, copyThemeChalkBundle))
+
+export default build

packages/theme-chalk/package.json

@@ -2,5 +2,22 @@
     "name": "@kankan/theme-chalk",
     "version": "0.1.0",
     "description": "kankan component chalk theme.",
-    "main": "index.css"
+    "main": "index.css",
+    "style": "index.css",
+    "scripts": {
+        "clean": "rimraf dist",
+        "build": "gulp --require @esbuild-kit/cjs-loader"
+    },
+    "devDependencies": {
+        "@esbuild-kit/cjs-loader": "^2.2.1",
+        "@kankan/build": "workspace:*",
+        "@types/gulp-autoprefixer": "^0.0.33",
+        "@types/gulp-clean-css": "^4.3.0",
+        "@types/gulp-rename": "^2.0.1",
+        "@types/gulp-sass": "^5.0.0",
+        "gulp-autoprefixer": "^8.0.0",
+        "gulp-clean-css": "^4.3.0",
+        "gulp-rename": "^2.0.0",
+        "gulp-sass": "^5.1.0"
+    }
 }

packages/theme-chalk/scss/components/_toast.scss

@@ -1,3 +1,4 @@
+$img-base-path: '';
 .ui-toast {
     position: fixed;
     display: flex;
@@ -9,7 +10,7 @@
     min-width: 100px;
     height: 100px;
     overflow: hidden;
-    pointer-events:none;
+    pointer-events: none;
 }
 .ui-toast__box {
     color: #fff;
@@ -28,9 +29,9 @@
     &.fixed,
     &.success,
     &.error,
-    &.warn{
-        i{
-            display:inline-block;
+    &.warn {
+        i {
+            display: inline-block;
         }
     }
     &.success {
@@ -65,7 +66,7 @@
     //     display: none;
     // }
 
-    .icon{
+    .icon {
         margin-right: 10px;
         font-size: 0;
         width: 16px;
@@ -74,20 +75,20 @@
         background-position: center center;
         background-size: contain;
     }
-    .close{
+    .close {
         cursor: pointer;
         font-size: 14px;
         margin-left: 20px;
     }
 }
-.ui-toast__msg{
-  display: flex;
-  align-items: center;
-  img{
-    width:24px;
-    height: 24px;
-  }
+.ui-toast__msg {
+    display: flex;
+    align-items: center;
+    img {
+        width: 24px;
+        height: 24px;
+    }
 }
 body[is-mobile] .ui-toast__box {
-  max-width: 80%;
-}
+    max-width: 80%;
+}

packages/theme-chalk/src/theme-editor.scss

@@ -0,0 +1,12 @@
+@import "base";
+@import "base-vars";
+@import "components";
+
+@import "editor/layout";
+@import "editor/head";
+@import "editor/menu";
+@import "editor/main";
+@import "editor/view";
+@import "editor/toolbox";
+@import "editor/toolbar";
+

packages/utils/index.ts

@@ -3,3 +3,4 @@ export * from './dom'
 export * from './normal'
 export * from './types'
 export * from './objects'
+export * from './error'

pnpm-lock.yaml

@@ -14,6 +14,7 @@ importers:
       '@pnpm/find-workspace-packages': ^4.0.16
       '@pnpm/logger': ^4.0.0
       '@pnpm/types': ^8.4.0
+      '@types/gulp': ^4.0.9
       '@types/jsdom': ^16.2.14
       '@types/node': '*'
       '@types/sass': ^1.43.1
@@ -65,6 +66,7 @@ importers:
       '@pnpm/find-workspace-packages': 4.0.43_vp7a5l77f5ejdshrmfsgf4kfnm
       '@pnpm/logger': 4.0.0
       '@pnpm/types': 8.7.0
+      '@types/gulp': 4.0.9
       '@types/jsdom': 16.2.15
       '@types/node': 18.7.18
       '@types/sass': 1.43.1
@@ -357,8 +359,72 @@ importers:
     dependencies:
       vue: 3.2.39
 
+  packages/kankan-components:
+    specifiers:
+      '@ctrl/tinycolor': ^3.4.1
+      '@element-plus/icons-vue': ^2.0.6
+      '@floating-ui/dom': ^1.0.1
+      '@popperjs/core': npm:@sxzz/popperjs-es@^2.11.7
+      '@types/lodash': ^4.14.182
+      '@types/lodash-es': ^4.17.6
+      '@types/node': '*'
+      '@vueuse/core': ^9.1.0
+      async-validator: ^4.2.5
+      csstype: ^2.6.20
+      dayjs: ^1.11.3
+      escape-html: ^1.0.3
+      lodash: ^4.17.21
+      lodash-es: ^4.17.21
+      lodash-unified: ^1.0.2
+      memoize-one: ^6.0.0
+      normalize-wheel-es: ^1.2.0
+      vue: ^3.2.37
+      vue-router: ^4.0.16
+    dependencies:
+      '@ctrl/tinycolor': 3.4.1
+      '@element-plus/icons-vue': 2.0.10_vue@3.2.39
+      '@floating-ui/dom': 1.0.2
+      '@popperjs/core': /@sxzz/popperjs-es/2.11.7
+      '@types/lodash': 4.14.186
+      '@types/lodash-es': 4.17.6
+      '@vueuse/core': 9.3.0_vue@3.2.39
+      async-validator: 4.2.5
+      dayjs: 1.11.5
+      escape-html: 1.0.3
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.2_3ib2ivapxullxkx3xftsimdk7u
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+    devDependencies:
+      '@types/node': 18.7.18
+      csstype: 2.6.21
+      vue: 3.2.39
+      vue-router: 4.1.5_vue@3.2.39
+
   packages/theme-chalk:
-    specifiers: {}
+    specifiers:
+      '@esbuild-kit/cjs-loader': ^2.2.1
+      '@kankan/build': workspace:*
+      '@types/gulp-autoprefixer': ^0.0.33
+      '@types/gulp-clean-css': ^4.3.0
+      '@types/gulp-rename': ^2.0.1
+      '@types/gulp-sass': ^5.0.0
+      gulp-autoprefixer: ^8.0.0
+      gulp-clean-css: ^4.3.0
+      gulp-rename: ^2.0.0
+      gulp-sass: ^5.1.0
+    devDependencies:
+      '@esbuild-kit/cjs-loader': 2.4.0
+      '@kankan/build': link:../../internal/build
+      '@types/gulp-autoprefixer': 0.0.33
+      '@types/gulp-clean-css': 4.3.0
+      '@types/gulp-rename': 2.0.1
+      '@types/gulp-sass': 5.0.0
+      gulp-autoprefixer: 8.0.0
+      gulp-clean-css: 4.3.0
+      gulp-rename: 2.0.0
+      gulp-sass: 5.1.0
 
   packages/utils:
     specifiers:
@@ -547,7 +613,7 @@ packages:
       '@babel/parser': 7.19.1
       '@babel/template': 7.18.10
       '@babel/traverse': 7.19.1
-      '@babel/types': 7.19.0
+      '@babel/types': 7.19.4
       convert-source-map: 1.8.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -754,10 +820,6 @@ packages:
     dependencies:
       '@babel/types': 7.19.4
 
-  /@babel/helper-string-parser/7.18.10:
-    resolution: {integrity: sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==}
-    engines: {node: '>=6.9.0'}
-
   /@babel/helper-string-parser/7.19.4:
     resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
     engines: {node: '>=6.9.0'}
@@ -1703,7 +1765,7 @@ packages:
     resolution: {integrity: sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.18.10
+      '@babel/helper-string-parser': 7.19.4
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
@@ -4093,18 +4155,78 @@ packages:
     resolution: {integrity: sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==}
     dev: true
 
+  /@types/clean-css/4.2.6:
+    resolution: {integrity: sha512-Ze1tf+LnGPmG6hBFMi0B4TEB0mhF7EiMM5oyjLDNPE9hxrPU0W+5+bHvO+eFPA+bt0iC1zkQMoU/iGdRVjcRbw==}
+    dependencies:
+      '@types/node': 18.7.18
+      source-map: 0.6.1
+    dev: true
+
   /@types/emscripten/1.39.6:
     resolution: {integrity: sha512-H90aoynNhhkQP6DRweEjJp5vfUVdIj7tdPLsu7pq89vODD/lcugKfZOsfgwpvM6XUewEp2N5dCg1Uf3Qe55Dcg==}
 
   /@types/estree/0.0.39:
     resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
 
+  /@types/expect/1.20.4:
+    resolution: {integrity: sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==}
+    dev: true
+
+  /@types/glob-stream/6.1.1:
+    resolution: {integrity: sha512-AGOUTsTdbPkRS0qDeyeS+6KypmfVpbT5j23SN8UPG63qjKXNKjXn6V9wZUr8Fin0m9l8oGYaPK8b2WUMF8xI1A==}
+    dependencies:
+      '@types/glob': 8.0.0
+      '@types/node': 18.7.18
+    dev: true
+
+  /@types/glob/8.0.0:
+    resolution: {integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==}
+    dependencies:
+      '@types/minimatch': 5.1.2
+      '@types/node': 18.7.18
+    dev: true
+
   /@types/graceful-fs/4.1.5:
     resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==}
     dependencies:
       '@types/node': 18.7.18
     dev: true
 
+  /@types/gulp-autoprefixer/0.0.33:
+    resolution: {integrity: sha512-FgunPm1uMroC/w9FCxtQhPPskR/WvnT+sNPxnyldwNXjq8K5ktzZAOqATyrYk0jTgae793uc+k5vsGV6Q+G7xA==}
+    dependencies:
+      '@types/node': 18.7.18
+    dev: true
+
+  /@types/gulp-clean-css/4.3.0:
+    resolution: {integrity: sha512-aRV2BvZA+X/SdgONQW4OkIzInYhvSqeUCiLfwc3VCD0/pxQT9xAadwHmtYGF2kc66cD4uSPmE+s4JYFvhHLaUA==}
+    dependencies:
+      '@types/clean-css': 4.2.6
+      '@types/node': 18.7.18
+    dev: true
+
+  /@types/gulp-rename/2.0.1:
+    resolution: {integrity: sha512-9ZjeS2RHEnmBmTcyi2+oeye3BgCsWhvi4uv3qCnAg8i6plOuRdaeNxjOves0ELysEXYLBl7bCl5fbVs7AZtgTA==}
+    dependencies:
+      '@types/node': 18.7.18
+      '@types/vinyl': 2.0.6
+    dev: true
+
+  /@types/gulp-sass/5.0.0:
+    resolution: {integrity: sha512-7p7nT+IKDREyJzTH13/FC/j3fobDBZTclSJFrgAJA+qzNZgzCENAx3HeiO4N7QlraLRqx44u3OR0Aq0Jw4wz8Q==}
+    dependencies:
+      '@types/node': 18.7.18
+      '@types/node-sass': 4.11.3
+    dev: true
+
+  /@types/gulp/4.0.9:
+    resolution: {integrity: sha512-zzT+wfQ8uwoXjDhRK9Zkmmk09/fbLLmN/yDHFizJiEKIve85qutOnXcP/TM2sKPBTU+Jc16vfPbOMkORMUBN7Q==}
+    dependencies:
+      '@types/undertaker': 1.2.8
+      '@types/vinyl-fs': 2.4.12
+      chokidar: 3.5.3
+    dev: true
+
   /@types/http-cache-semantics/4.0.1:
     resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
 
@@ -4188,10 +4310,20 @@ packages:
     resolution: {integrity: sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==}
     dev: true
 
+  /@types/minimatch/5.1.2:
+    resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
+    dev: true
+
   /@types/minimist/1.2.2:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
     dev: true
 
+  /@types/node-sass/4.11.3:
+    resolution: {integrity: sha512-wXPCn3t9uu5rR4zXNSLasZHQMuRzUKBsdi4MsgT8uq4Lp1gQQo+T2G23tGj4SSgDHeNBle6vGseZtM2XV/X9bw==}
+    dependencies:
+      '@types/node': 18.7.18
+    dev: true
+
   /@types/node/12.20.55:
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
     dev: true
@@ -4263,10 +4395,37 @@ packages:
     resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
     dev: true
 
+  /@types/undertaker-registry/1.0.1:
+    resolution: {integrity: sha512-Z4TYuEKn9+RbNVk1Ll2SS4x1JeLHecolIbM/a8gveaHsW0Hr+RQMraZACwTO2VD7JvepgA6UO1A1VrbktQrIbQ==}
+    dev: true
+
+  /@types/undertaker/1.2.8:
+    resolution: {integrity: sha512-gW3PRqCHYpo45XFQHJBhch7L6hytPsIe0QeLujlnFsjHPnXLhJcPdN6a9368d7aIQgH2I/dUTPFBlGeSNA3qOg==}
+    dependencies:
+      '@types/node': 18.7.18
+      '@types/undertaker-registry': 1.0.1
+      async-done: 1.3.2
+    dev: true
+
   /@types/unist/2.0.6:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: false
 
+  /@types/vinyl-fs/2.4.12:
+    resolution: {integrity: sha512-LgBpYIWuuGsihnlF+OOWWz4ovwCYlT03gd3DuLwex50cYZLmX3yrW+sFF9ndtmh7zcZpS6Ri47PrIu+fV+sbXw==}
+    dependencies:
+      '@types/glob-stream': 6.1.1
+      '@types/node': 18.7.18
+      '@types/vinyl': 2.0.6
+    dev: true
+
+  /@types/vinyl/2.0.6:
+    resolution: {integrity: sha512-ayJ0iOCDNHnKpKTgBG6Q6JOnHTj9zFta+3j2b8Ejza0e4cvRyMn0ZoLEmbPrTHe5YYRlDYPvPWVdV4cTaRyH7g==}
+    dependencies:
+      '@types/expect': 1.20.4
+      '@types/node': 18.7.18
+    dev: true
+
   /@types/web-bluetooth/0.0.15:
     resolution: {integrity: sha512-w7hEHXnPMEZ+4nGKl/KDRVpxkwYxYExuHOYXyzIzCDzEZ9ZCGMAewulr9IqJu2LR4N37fcnb1XVeuZ09qgOxhA==}
     dev: false
@@ -4634,7 +4793,7 @@ packages:
       '@unocss/inspector': 0.33.5
       '@unocss/scope': 0.33.5
       '@unocss/transformer-directives': 0.33.5
-      magic-string: 0.26.3
+      magic-string: 0.26.7
       vite: 2.9.15
     dev: true
 
@@ -4735,7 +4894,7 @@ packages:
     dependencies:
       '@babel/types': 7.19.0
       '@vue/compiler-sfc': 3.2.40
-      magic-string: 0.26.3
+      magic-string: 0.26.7
 
   /@vue-macros/common/0.12.0:
     resolution: {integrity: sha512-KIUjO3w2RfN/cTsESEK1SqkHlwAoKT4EOFZJOPiy01NTYJxm5IuDvq0PeTI/fwwOXFMX2sPpqXvVwekMEoTF/A==}
@@ -4910,6 +5069,10 @@ packages:
       '@vue/compiler-dom': 3.2.40
       '@vue/shared': 3.2.40
 
+  /@vue/devtools-api/6.4.4:
+    resolution: {integrity: sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw==}
+    dev: true
+
   /@vue/reactivity-transform/3.2.39:
     resolution: {integrity: sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==}
     dependencies:
@@ -5319,7 +5482,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       ansi-wrap: 0.1.0
-    dev: false
 
   /ansi-colors/4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
@@ -5348,7 +5510,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       ansi-wrap: 0.1.0
-    dev: false
 
   /ansi-regex/2.1.1:
     resolution: {integrity: sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==}
@@ -5403,7 +5564,6 @@ packages:
   /ansi-wrap/0.1.0:
     resolution: {integrity: sha512-ZyznvL8k/FZeQHr2T6LzcJ/+vBApDnMNZvfVFy3At0knswWd6rJ3/0Hhmpu8oqa6C92npmozs890sX9Dl6q+Qw==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /anymatch/2.0.0:
     resolution: {integrity: sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==}
@@ -5461,7 +5621,6 @@ packages:
   /arr-diff/4.0.0:
     resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /arr-filter/1.1.2:
     resolution: {integrity: sha512-A2BETWCqhsecSvCkWAeVBFLH6sXEUGASuzkpjL3GR1SlL/PWL6M3J8EAAld2Uubmh39tvkJTqC9LeLHCUKmFXA==}
@@ -5485,7 +5644,6 @@ packages:
   /arr-union/3.1.0:
     resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /array-each/1.0.1:
     resolution: {integrity: sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==}
@@ -5581,7 +5739,6 @@ packages:
   /assign-symbols/1.0.0:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /ast-walker-scope/0.2.3:
     resolution: {integrity: sha512-9reB+iYF6jCCDqKDNNQI8iA2MJcy0jCLvEjfya72F7Zai5i2CB8hk9K/kzkZhagja9othQCFPEvQW11LhPKjmg==}
@@ -5603,7 +5760,6 @@ packages:
       once: 1.4.0
       process-nextick-args: 2.0.1
       stream-exhaust: 1.0.2
-    dev: false
 
   /async-each/1.0.3:
     resolution: {integrity: sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==}
@@ -5638,6 +5794,22 @@ packages:
     hasBin: true
     dev: false
 
+  /autoprefixer/10.4.12_postcss@8.4.16:
+    resolution: {integrity: sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.21.4
+      caniuse-lite: 1.0.30001407
+      fraction.js: 4.2.0
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.16
+      postcss-value-parser: 4.2.0
+    dev: true
+
   /aws-sign2/0.7.0:
     resolution: {integrity: sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==}
     dev: true
@@ -6243,6 +6415,13 @@ packages:
       static-extend: 0.1.2
     dev: false
 
+  /clean-css/4.2.3:
+    resolution: {integrity: sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==}
+    engines: {node: '>= 4.0'}
+    dependencies:
+      source-map: 0.6.1
+    dev: true
+
   /clean-regexp/1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -8324,7 +8503,6 @@ packages:
     dependencies:
       assign-symbols: 1.0.0
       is-extendable: 1.0.1
-    dev: false
 
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
@@ -8371,7 +8549,6 @@ packages:
       color-support: 1.1.3
       parse-node-version: 1.0.1
       time-stamp: 1.1.0
-    dev: false
 
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@@ -8659,6 +8836,10 @@ packages:
       mime-types: 2.1.35
     dev: false
 
+  /fraction.js/4.2.0:
+    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+    dev: true
+
   /fragment-cache/0.2.1:
     resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==}
     engines: {node: '>=0.10.0'}
@@ -9010,6 +9191,32 @@ packages:
   /grapheme-splitter/1.0.4:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
 
+  /gulp-autoprefixer/8.0.0:
+    resolution: {integrity: sha512-sVR++PIaXpa81p52dmmA/jt50bw0egmylK5mjagfgOJ8uLDGaF9tHyzvetkY9Uo0gBZUS5sVqN3kX/GlUKOyog==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      gulp: '>=4'
+    peerDependenciesMeta:
+      gulp:
+        optional: true
+    dependencies:
+      autoprefixer: 10.4.12_postcss@8.4.16
+      fancy-log: 1.3.3
+      plugin-error: 1.0.1
+      postcss: 8.4.16
+      through2: 4.0.2
+      vinyl-sourcemaps-apply: 0.2.1
+    dev: true
+
+  /gulp-clean-css/4.3.0:
+    resolution: {integrity: sha512-mGyeT3qqFXTy61j0zOIciS4MkYziF2U594t2Vs9rUnpkEHqfu6aDITMp8xOvZcvdX61Uz3y1mVERRYmjzQF5fg==}
+    dependencies:
+      clean-css: 4.2.3
+      plugin-error: 1.0.1
+      through2: 3.0.1
+      vinyl-sourcemaps-apply: 0.2.1
+    dev: true
+
   /gulp-cli/2.3.0:
     resolution: {integrity: sha512-zzGBl5fHo0EKSXsHzjspp3y5CONegCm8ErO5Qh0UzFzk2y4tMvzLWhoDokADbarfZRL2pGpRp7yt6gfJX4ph7A==}
     engines: {node: '>= 0.10'}
@@ -9037,6 +9244,23 @@ packages:
       - supports-color
     dev: false
 
+  /gulp-rename/2.0.0:
+    resolution: {integrity: sha512-97Vba4KBzbYmR5VBs9mWmK+HwIf5mj+/zioxfZhOKeXtx5ZjBk57KFlePf5nxq9QsTtFl0ejnHE3zTC9MHXqyQ==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /gulp-sass/5.1.0:
+    resolution: {integrity: sha512-7VT0uaF+VZCmkNBglfe1b34bxn/AfcssquLKVDYnCDJ3xNBaW7cUuI3p3BQmoKcoKFrs9jdzUxyb+u+NGfL4OQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      lodash.clonedeep: 4.5.0
+      picocolors: 1.0.0
+      plugin-error: 1.0.1
+      replace-ext: 2.0.0
+      strip-ansi: 6.0.1
+      vinyl-sourcemaps-apply: 0.2.1
+    dev: true
+
   /gulp/4.0.2:
     resolution: {integrity: sha512-dvEs27SCZt2ibF29xYgmnwwCYZxdxhQ/+LFWlbAW8y7jt68L/65402Lz3+CKy0Ov4rOs+NERmDq7YlZaDqUIfA==}
     engines: {node: '>= 0.10'}
@@ -9568,7 +9792,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-plain-object: 2.0.4
-    dev: false
 
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
@@ -9694,7 +9917,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       isobject: 3.0.1
-    dev: false
 
   /is-plain-object/5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
@@ -9821,7 +10043,6 @@ packages:
   /isobject/3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /isstream/0.1.2:
     resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==}
@@ -10854,13 +11075,13 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       sourcemap-codec: 1.4.8
+    dev: true
 
   /magic-string/0.26.7:
     resolution: {integrity: sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==}
     engines: {node: '>=12'}
     dependencies:
       sourcemap-codec: 1.4.8
-    dev: true
 
   /make-dir/3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -11477,6 +11698,11 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  /normalize-range/0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /normalize-registry-url/2.0.0:
     resolution: {integrity: sha512-3e9FwDyRAhbxXw4slm4Tjv40u78yPwMc/WZkACpqNQOs5sM7wic853AeTLkMFEVhivZkclGYlse8iYsklz0Yvg==}
 
@@ -11930,7 +12156,6 @@ packages:
   /parse-node-version/1.0.1:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
-    dev: false
 
   /parse-npm-tarball-url/3.0.0:
     resolution: {integrity: sha512-InpdgIdNe5xWMEUcrVQUniQKwnggBtJ7+SCwh7zQAZwbbIYZV9XdgJyhtmDSSvykFyQXoe4BINnzKTfCwWLs5g==}
@@ -12151,6 +12376,16 @@ packages:
       pathe: 0.3.9
     dev: true
 
+  /plugin-error/1.0.1:
+    resolution: {integrity: sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      ansi-colors: 1.1.0
+      arr-diff: 4.0.0
+      arr-union: 3.1.0
+      extend-shallow: 3.0.2
+    dev: true
+
   /pluralize/8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
@@ -12168,6 +12403,10 @@ packages:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  /postcss-value-parser/4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: true
+
   /postcss/8.4.16:
     resolution: {integrity: sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -12577,6 +12816,11 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
+  /replace-ext/2.0.0:
+    resolution: {integrity: sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==}
+    engines: {node: '>= 10'}
+    dev: true
+
   /replace-homedir/1.0.0:
     resolution: {integrity: sha512-CHPV/GAglbIB1tnQgaiysb8H2yCy8WQ7lcEwQ/eT+kLj0QHV8LnJW0zpqpE7RSkrMSRoa+EBoag86clf7WAgSg==}
     engines: {node: '>= 0.10'}
@@ -13193,7 +13437,6 @@ packages:
   /source-map/0.5.7:
     resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -13322,7 +13565,6 @@ packages:
 
   /stream-exhaust/1.0.2:
     resolution: {integrity: sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw==}
-    dev: false
 
   /stream-shift/1.0.1:
     resolution: {integrity: sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==}
@@ -13701,6 +13943,12 @@ packages:
       readable-stream: 2.3.7
       xtend: 4.0.2
 
+  /through2/3.0.1:
+    resolution: {integrity: sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==}
+    dependencies:
+      readable-stream: 3.6.0
+    dev: true
+
   /through2/4.0.2:
     resolution: {integrity: sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==}
     dependencies:
@@ -13709,7 +13957,6 @@ packages:
   /time-stamp/1.1.0:
     resolution: {integrity: sha512-gLCeArryy2yNTRzTGKbZbloctj64jkZ57hj5zdraXue6aFgd6PmvVtEyiUU+hvU0v7q08oVv8r8ev0tRo6bvgw==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /tinybench/2.1.5:
     resolution: {integrity: sha512-ak+PZZEuH3mw6CCFOgf5S90YH0MARnZNhxjhjguAmoJimEMAJuNip/rJRd6/wyylHItomVpKTzZk9zrhTrQCoQ==}
@@ -14759,6 +15006,12 @@ packages:
       vinyl: 2.2.1
     dev: false
 
+  /vinyl-sourcemaps-apply/0.2.1:
+    resolution: {integrity: sha512-+oDh3KYZBoZC8hfocrbrxbLUeaYtQK7J5WU5Br9VqWqmCll3tFJqKp97GC9GmMsVIL0qnx2DgEDVxdo5EZ5sSw==}
+    dependencies:
+      source-map: 0.5.7
+    dev: true
+
   /vinyl/2.2.1:
     resolution: {integrity: sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==}
     engines: {node: '>= 0.10'}
@@ -15017,6 +15270,15 @@ packages:
       - supports-color
     dev: false
 
+  /vue-router/4.1.5_vue@3.2.39:
+    resolution: {integrity: sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.4.4
+      vue: 3.2.39
+    dev: true
+
   /vue-template-compiler/2.7.12:
     resolution: {integrity: sha512-6rhJAuo2vRzJMs8X/pd9yqtsJmnPEnv4E0cb9KCu0sfGhoDt8roCCa/6qbrvpc1b38zYgdmY/xrk4qfNWZIjwA==}
     dependencies:

tsconfig.base.json

@@ -16,7 +16,7 @@
         "rootDir": ".",
         "types": [],
         "paths": {
-            "@kankan/*": ["packages/*"]
+            "@kankan-components/*": ["packages/*"]
         }
     }
 }