feat(组件): 组件button移植并入docs demo

docs/components.d.ts

@@ -47,6 +47,8 @@ declare module '@vue/runtime-core' {
         RightLayerSvg: typeof import('./.vitepress/vitepress/components/home/svg/right-layer-svg.vue')['default']
         RightLogoSmallList: typeof import('./.vitepress/vitepress/components/sponsors/right-logo-small-list.vue')['default']
         RightRichtextList: typeof import('./.vitepress/vitepress/components/sponsors/right-richtext-list.vue')['default']
+        RouterLink: typeof import('vue-router')['RouterLink']
+        RouterView: typeof import('vue-router')['RouterView']
         ScreenSvg: typeof import('./.vitepress/vitepress/components/home/svg/screen-svg.vue')['default']
         SecondaryColors: typeof import('./.vitepress/vitepress/components/globals/secondary-colors.vue')['default']
         SketchTemplateSvg: typeof import('./.vitepress/vitepress/components/globals/resources/sketch-template-svg.vue')['default']

docs/examples/button/basic.vue

@@ -38,4 +38,5 @@
 
 <script lang="ts" setup>
 import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
+// import { UIButton } from '@kankan-components/components'
 </script>

docs/package.json

@@ -31,6 +31,7 @@
         "@kankan-components/build": "workspace:*",
         "@kankan-components/build-constants": "workspace:*",
         "@kankan-components/build-utils": "workspace:*",
+        "@kankan-components/components": "workspace:*",
         "@types/markdown-it": "^12.2.3",
         "@vitejs/plugin-vue-jsx": "^1.3.10",
         "chalk": "^4.1.2",

package.json

@@ -31,6 +31,9 @@
     "dependencies": {
         "@kankan-components/components": "workspace:*",
         "@kankan-components/hooks": "workspace:*",
+        "@kankan-components/theme-chalk": "workspace:*",
+        "@kankan-components/tokens": "workspace:*",
+        "@kankan-components/utils": "workspace:*",
         "@vueuse/core": "^9.1.0",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",

packages/components/basic/button/src/button.vue

@@ -10,36 +10,24 @@ import { computed, defineProps } from 'vue'
 import { normalizeUnitToStyle } from '@kankan-components/utils'
 // import UIIcon from '../../icon/src/icon.vue'
 import UIIcon from '@kankan-components/components/basic/icon'
+import { buttonProps } from './button'
 
 defineOptions({
-    name: 'UIMessage',
-})
-const props = defineProps({
-    type: {
-        type: String,
-        default: 'normal',
-    },
-    color: {
-        type: String,
-    },
-    width: {
-        type: [String, Number],
-    },
-    icon: {
-        type: String,
-    },
+    name: 'UIButton',
 })
+const props = defineProps(buttonProps)
 
 const custom = `customize`
 const className = computed(() => (props.color ? custom : props.type))
 
 const style = computed(() => {
     const style = {
-        width: normalizeUnitToStyle(props.width),
+        width: props.width ? normalizeUnitToStyle(props.width) : 0,
+        '--color': '',
     }
 
     if (className.value === custom) {
-        style['--color'] = props.color
+        style['--color'] = props.color || ''
     }
     return style
 })

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

@@ -1,14 +1,15 @@
 import { defineComponent, renderSlot, watch } from 'vue'
 import { buildProps, definePropType } from '@kankan-components/utils'
-import { provideGlobalConfig, useSizeProp } from '@kankan-components/hooks'
+import { provideGlobalConfig } from '@kankan-components/hooks'
 
 import type { ExtractPropTypes } from 'vue'
-import type { ExperimentalFeatures } from '@kankan-components/tokens'
-import type { Language } from '@kankan-components/locale'
-import type { ButtonConfigContext } from '@kankan-components/components/basic/button'
-import type { MessageConfigContext } from '@kankan-components/components/message'
+// import type { ExperimentalFeatures } from '@kankan-components/tokens'
+// import type { Language } from '@kankan-components/locale'
+// import type { ButtonConfigContext } from '@kankan-components/components/basic/button'
+// import type { MessageConfigContext } from '@kankan-components/components/message'
 
-export const messageConfig: MessageConfigContext = {}
+// export const messageConfig: MessageConfigContext = {}
+export const messageConfig = {}
 
 export const configProviderProps = buildProps({
     // Controlling if the users want a11y features.
@@ -17,19 +18,19 @@ export const configProviderProps = buildProps({
         default: true,
     },
 
-    locale: {
-        type: definePropType<Language>(Object),
-    },
+    // locale: {
+    //     type: definePropType<Language>(Object),
+    // },
 
-    size: useSizeProp,
+    // size: useSizeProp,
 
-    button: {
-        type: definePropType<ButtonConfigContext>(Object),
-    },
+    // button: {
+    //     type: definePropType<ButtonConfigContext>(Object),
+    // },
 
-    experimentalFeatures: {
-        type: definePropType<ExperimentalFeatures>(Object),
-    },
+    // experimentalFeatures: {
+    //     type: definePropType<ExperimentalFeatures>(Object),
+    // },
 
     // Controls if we should handle keyboard navigation
     keyboardNavigation: {
@@ -38,20 +39,20 @@ export const configProviderProps = buildProps({
     },
 
     message: {
-        type: definePropType<MessageConfigContext>(Object),
+        type: definePropType<any>(Object),
     },
 
     zIndex: Number,
 
     namespace: {
         type: String,
-        default: 'el',
+        default: 'ui',
     },
 } as const)
 export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>
 
 const ConfigProvider = defineComponent({
-    name: 'ElConfigProvider',
+    name: 'UIConfigProvider',
     props: configProviderProps,
 
     setup(props, { slots }) {

packages/components/basic/index.ts

@@ -3,3 +3,4 @@ export * from './icon'
 export * from './button'
 export * from './input'
 export * from './menu-item'
+export * from './config-provider'

packages/components/basic/size-animation/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '@kankan-components/utils'
+import SizeAnimation from './src/sizeAnimation.vue'
+
+export const UISizeAnimation = withInstall(SizeAnimation)
+
+export default UISizeAnimation

packages/components/basic/size-animation/index.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { defineExpose, defineProps, ref, watchEffect } from 'vue'
-import { changeWHFactory } from '@kankan-components/utils'
+// import { changeWHFactory } from '@kankan-components/utils'
 
 defineOptions({
     name: 'UISizeAnimation',
@@ -23,7 +23,7 @@ const props = defineProps({
     },
 })
 
-const [contentRef, changeShow, max, origin, show, ready, refer] = changeWHFactory(false, props.attr)
+// const [contentRef, changeShow, max, origin, show, ready, refer] = changeWHFactory(false, props.attr)
 
 const animation = ref(false)
 
@@ -43,12 +43,12 @@ watchEffect(() => {
 })
 
 defineExpose({
-    changeShow: (setShow, ...args) => {
-        if (show !== setShow) {
-            animation.value = true
-        }
-        return changeShow(setShow, ...args)
-    },
+    // changeShow: (setShow, ...args: any: any: any) => {
+    //     if (show !== setShow) {
+    //         animation.value = true
+    //     }
+    //     return changeShow(setShow, ...args)
+    // },
     show,
     animation,
     ready,

packages/components/basic/tree/index.vue

@@ -35,7 +35,7 @@
 <script lang="ts" setup>
 // computed
 import { defineExpose, defineProps, ref, watchEffect } from 'vue'
-import UISizeAnimation from '../size-animation'
+import UISizeAnimation from '@kankan-components/components/basic/size-animation'
 // export default { name: 'UiTree' }
 
 defineOptions({

packages/hooks/use-common-props/index.ts

@@ -0,0 +1,31 @@
+import { computed, inject, ref, unref } from 'vue'
+import { formContextKey, formItemContextKey } from '@element-plus/tokens'
+import { buildProp } from '@kankan-components/utils'
+// import { componentSizes } from '@kankan-components/constants'
+import { useProp } from '../use-prop'
+import { useGlobalConfig } from '../use-global-config'
+import type { ComponentSize } from '@element-plus/constants'
+import type { MaybeRef } from '@vueuse/core'
+
+export const useSizeProp = buildProp({
+    type: String,
+    values: componentSizes,
+    required: false,
+} as const)
+
+export const useSize = (fallback?: MaybeRef<ComponentSize | undefined>, ignore: Partial<Record<'prop' | 'form' | 'formItem' | 'global', boolean>> = {}) => {
+    const emptyRef = ref(undefined)
+
+    const size = ignore.prop ? emptyRef : useProp<ComponentSize>('size')
+    const globalConfig = ignore.global ? emptyRef : useGlobalConfig('size')
+    const form = ignore.form ? { size: undefined } : inject(formContextKey, undefined)
+    const formItem = ignore.formItem ? { size: undefined } : inject(formItemContextKey, undefined)
+
+    return computed((): ComponentSize => size.value || unref(fallback) || formItem?.size || form?.size || globalConfig.value || '')
+}
+
+export const useDisabled = (fallback?: MaybeRef<boolean | undefined>) => {
+    const disabled = useProp<boolean>('disabled')
+    const form = inject(formContextKey, undefined)
+    return computed(() => disabled.value || unref(fallback) || form?.disabled || false)
+}

packages/hooks/use-prop/index.ts

@@ -0,0 +1,7 @@
+import { computed, getCurrentInstance } from 'vue'
+import type { ComputedRef } from 'vue'
+
+export const useProp = <T>(name: string): ComputedRef<T | undefined> => {
+    const vm = getCurrentInstance()!
+    return computed(() => (vm.proxy?.$props as any)[name] ?? undefined)
+}

packages/tokens/config-provider.ts

@@ -0,0 +1,6 @@
+import type { ConfigProviderProps } from '@kankan-components/components'
+import type { InjectionKey, Ref } from 'vue'
+
+export type ConfigProviderContext = Partial<ConfigProviderProps>
+
+export const configProviderContextKey: InjectionKey<Ref<ConfigProviderContext>> = Symbol()

packages/tokens/index.ts

@@ -0,0 +1 @@
+export * from './config-provider'

packages/tokens/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "@kankan-components/tokens",
+    "version": "0.0.1",
+    "license": "MIT",
+    "main": "index.ts",
+    "module": "index.ts",
+    "unpkg": "index.js",
+    "jsdelivr": "index.js",
+    "peerDependencies": {
+        "vue": "^3.2.0"
+    },
+    "types": "index.d.js"
+}

packages/utils/README.md

@@ -1,23 +1 @@
-# @medici/core
-> The medici track system core module
-## installation
-
-> core module provide Main SDK class, All details are revived by @medici/web module
-
-```js
-import * as Medici from '@medici/web';
-const medici = Medici.init({
-    platform: 'web',
-    appId: '7b5958d5-1ae6-4ad5-8a87-5fc8a4b92999',
-    endPoint: 'http://192.168.0.186:3000/api/collect', //服务器
-    trackEndPoint: 'http://192.168.0.186:3000/api/track',
-    config: {
-        user: 'testUser',
-        version: '1',
-    },
-});
-console.log('medici', medici);
-(window as any).medici = medici;
-
-
-```
+#@kankan-components/utils

packages/utils/dom/parent.ts

@@ -4,21 +4,23 @@ import { computed, onMounted, ref } from 'vue'
  * 获取真实DOM的高度
  * @returns [heightRef, VMRef, readyRef]
  */
-export const getVMDomWH = attr => {
-    const origin = ref(0)
-    const domRef = ref(null)
+
+export const getVMDomWH = (attr: string) => {
+    const origin = ref<number>(0)
+    const domRef = ref<ElRef>(null)
     const ready = ref(false)
     const referWH = () => {
         origin.value = 0
         ready.value = false
         if (domRef.value) {
+            const offsetWidth = domRef.value.offsetWidth
+            const offsetHeight = domRef.value.offsetHeight
             setTimeout(() => {
-                origin.value = attr === 'width' ? domRef.value.offsetWidth : domRef.value.offsetHeight
+                origin.value = attr === 'width' ? offsetWidth : offsetHeight
                 setTimeout(() => (ready.value = true))
             })
         }
     }
-
     onMounted(referWH)
 
     return [origin, domRef, ready, referWH]

packages/utils/package.json

@@ -6,11 +6,6 @@
     "peerDependencies": {
         "vue": "^3.2.0"
     },
-    "typedoc": {
-        "entryPoint": "./src/index.ts",
-        "readmeFile": "./README.md",
-        "displayName": "@kankan-components/utils"
-    },
     "devDependencies": {
         "@vue/shared": "^3.2.39"
     }

playground/package.json

@@ -9,8 +9,8 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@kankan-components/components": "workspace:^1.0.0",
-        "@kankan-components/utils": "workspace:^1.0.0",
+        "@kankan-components/components": "workspace:*",
+        "@kankan-components/utils": "workspace:*",
         "vue": "^3.2.37"
     },
     "devDependencies": {

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@kankan-components/components': workspace:*
       '@kankan-components/eslint-config': workspace:*
       '@kankan-components/hooks': workspace:*
+      '@kankan-components/theme-chalk': workspace:*
+      '@kankan-components/tokens': workspace:*
+      '@kankan-components/utils': workspace:*
       '@pnpm/find-workspace-packages': ^4.0.16
       '@pnpm/logger': ^4.0.0
       '@pnpm/types': ^8.4.0
@@ -51,6 +54,9 @@ importers:
     dependencies:
       '@kankan-components/components': link:packages/components
       '@kankan-components/hooks': link:packages/hooks
+      '@kankan-components/theme-chalk': link:packages/theme-chalk
+      '@kankan-components/tokens': link:packages/tokens
+      '@kankan-components/utils': link:packages/utils
       '@vueuse/core': 9.3.0_vue@3.2.39
       lodash: 4.17.21
       lodash-es: 4.17.21
@@ -105,6 +111,7 @@ importers:
       '@kankan-components/build': workspace:*
       '@kankan-components/build-constants': workspace:*
       '@kankan-components/build-utils': workspace:*
+      '@kankan-components/components': workspace:*
       '@kankan-components/metadata': workspace:*
       '@kankan-components/utils': workspace:*
       '@types/markdown-it': ^12.2.3
@@ -157,6 +164,7 @@ importers:
       '@kankan-components/build': link:../internal/build
       '@kankan-components/build-constants': link:../internal/build-constants
       '@kankan-components/build-utils': link:../internal/build-utils
+      '@kankan-components/components': link:../packages/components
       '@types/markdown-it': 12.2.3
       '@vitejs/plugin-vue-jsx': 1.3.10
       chalk: 4.1.2
@@ -424,6 +432,12 @@ importers:
       gulp-rename: 2.0.0
       gulp-sass: 5.1.0
 
+  packages/tokens:
+    specifiers:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.39
+
   packages/utils:
     specifiers:
       '@vue/shared': ^3.2.39
@@ -435,8 +449,8 @@ importers:
 
   playground:
     specifiers:
-      '@kankan-components/components': workspace:^1.0.0
-      '@kankan-components/utils': workspace:^1.0.0
+      '@kankan-components/components': workspace:*
+      '@kankan-components/utils': workspace:*
       '@vitejs/plugin-vue': ^3.1.0
       typescript: ^4.6.4
       vite: ^3.1.0

tsconfig.vitest.json

@@ -1,11 +1,11 @@
 {
-  "extends": "./tsconfig.web.json",
-  "compilerOptions": {
-    "composite": true,
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
-    "types": ["node", "jsdom", "unplugin-vue-macros/macros-global"],
-    "skipLibCheck": true
-  },
-  "include": ["packages", "vitest.setup.ts", "typings/env.d.ts"],
-  "exclude": ["node_modules", "dist", "**/*.md"]
+    "extends": "./tsconfig.web.json",
+    "compilerOptions": {
+        "composite": true,
+        "lib": ["ES2021", "DOM", "DOM.Iterable"],
+        "types": ["node", "jsdom", "unplugin-vue-macros/macros-global"],
+        "skipLibCheck": true
+    },
+    "include": ["packages", "vitest.setup.ts", "typings/env.d.ts"],
+    "exclude": ["node_modules", "dist", "**/*.md"]
 }

tsconfig.web.json

@@ -7,7 +7,7 @@
         "types": ["unplugin-vue-macros/macros-global"],
         "skipLibCheck": true
     },
-    "include": ["packages", "typings/components.d.ts", "typings/env.d.ts"],
+    "include": ["packages", "typings/components.d.ts", "typings/env.d.ts", "typings/index.d.ts"],
     "exclude": ["node_modules", "**/dist", "**/__tests__/**/*", "**/gulpfile.ts", "**/test-helper", "packages/test-utils", "**/*.md"]
 }
 //

typings/index.d.ts

@@ -0,0 +1,28 @@
+declare interface Fn<T = any, R = T> {
+    (...arg: T[]): R
+}
+declare type Nullable<T> = T | null
+// declare type NonNullable<T> = T extends null | undefined ? never : T
+declare interface PromiseFn<T = any, R = T> {
+    (...arg: T[]): Promise<R>
+}
+
+declare type RefType<T> = T | null
+
+declare type LabelValueOptions = {
+    label: string
+    value: any
+    [key: string]: string | number | boolean
+}[]
+
+declare type EmitType = (event: string, ...args: any[]) => void
+
+declare type TargetContext = '_self' | '_blank'
+
+declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
+    $el: T
+}
+
+declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null
+
+declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>