feat(组件): 整理组件与类型（1）

internal/build/src/tasks/types-definitions.ts

@@ -89,7 +89,7 @@ async function addSourceFiles(project: Project) {
     const sourceFiles: SourceFile[] = []
     await Promise.all([
         ...filePaths.map(async file => {
-            console.log('file', file)
+            consola.log('file', file)
             if (file.endsWith('.vue')) {
                 const content = await readFile(file, 'utf-8')
                 const hasTsNoCheck = content.includes('@ts-nocheck')

packages/components/basic/bubble/src/bubble.ts

@@ -0,0 +1,23 @@
+import { buildProps } from '@kankan-components/utils'
+import type { ExtractPropTypes } from 'vue'
+import type bubble from './bubble.vue'
+
+export const bubbleProps = buildProps({
+    type: {
+        type: String,
+        default: 'right',
+    },
+    show: {
+        type: Boolean,
+        default: true,
+    },
+    level: {
+        type: String,
+        default: '',
+        require: false,
+    },
+})
+
+export type BubbleProps = ExtractPropTypes<typeof bubbleProps>
+
+export type BubbleInstance = InstanceType<typeof bubble>

packages/components/basic/bubble/src/bubble.vue

@@ -10,21 +10,9 @@
 </template>
 
 <script setup lang="ts">
+import { bubbleProps } from './bubble'
 defineOptions({
     name: 'UIBubble',
 })
-defineProps({
-    type: {
-        type: String,
-        default: 'right',
-    },
-    show: {
-        type: Boolean,
-        default: true,
-    },
-    level: {
-        type: String,
-        require: false,
-    },
-})
+defineProps(bubbleProps)
 </script>

packages/components/basic/cropper/cropper.vue

@@ -130,9 +130,9 @@ const clickHandler = async status => {
 }
 </script>
 
-<script>
+<!-- <script>
 export default { name: 'UiCropper' }
-</script>
+</script> -->
 
 <style lang="scss">
 .vue-cropper {

packages/components/basic/input/src/input.ts

@@ -24,7 +24,7 @@ import number from './number/number.vue'
 import file from './file/file.vue'
 import search from './search/search.vue'
 import richtext from './richtext/richtext.vue'
-import type { ExtractPropTypes, VNode } from 'vue'
+import type { Component, ExtractPropTypes } from 'vue'
 
 export type InputType = 'checkbox' | 'text' | 'select' | 'radio' | 'range' | 'number' | 'switch' | 'textarea' | 'search' | 'richtext' | 'file'
 // import type { PropType } from 'vue'
@@ -53,7 +53,7 @@ type InputComponentsType = {
     [propsName in InputType]: InputComponentsPropType
 }
 interface InputComponentsPropType {
-    component: VNode
+    component: Component
     props: InputProps | unknown
 }
 export const InputComponents: InputComponentsType = {

packages/components/basic/input/src/input.vue

@@ -15,46 +15,13 @@
 
 <script setup lang="ts">
 import { InputComponents, inputProps } from './input'
-const props = defineProps(inputProps)
 
+defineOptions({
+    name: 'UIInput',
+})
+const props = defineProps(inputProps)
 const emit = defineEmits(['update:modelValue'])
 const handleUpdate = (newValue: string) => {
     emit('update:modelValue', newValue)
 }
-// const type = computed(() => (types[props.type] ? props.type : 'text'))
-// const childProps = computed(() => {
-//     if (props.type) {
-//         const retain = InputComponents[props.type].props
-//         console.log('retain', retain)
-//         const cProps = {}
-//         if (retain) {
-//             for (let key in props) {
-//                 console.log('key', key)
-//                 if (Object.keys(retain).includes(key)) {
-//                     cProps[key] = props[key]
-//                 }
-//             }
-//             console.log('cProps', cProps)
-//         }
-
-//         return childProps
-//     }
-//     return false
-// })
-
-// console.log('childProps', childProps)
-// const style = computed(() => {
-//     const style = {}
-//     const keys = Object.keys(childProps.value)
-
-//     if (!keys.includes('width')) {
-//         style.width = props.width
-//     }
-
-//     if (!keys.includes('height')) {
-//         style.height = props.height
-//     }
-
-//     return style
-// })
 </script>

packages/components/basic/input/src/number/number.vue

@@ -52,7 +52,7 @@ const blurHandler = () => {
     updateModelValue(props.modelValue)
 }
 
-const normValue = val => {
+const normValue = (val: number) => {
     val = Number(val)
     if (Number.isNaN(val)) {
         return props.min || 0
@@ -61,7 +61,7 @@ const normValue = val => {
     }
 }
 
-const updateModelValue = val => {
+const updateModelValue = (val: number) => {
     val = normValue(val)
     if (isNumber(props.min)) {
         const min = Number(props.min)

packages/components/basic/input/src/password.vue

@@ -1,3 +0,0 @@
-<template>
-    <div />
-</template>

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

@@ -55,6 +55,3 @@ defineExpose({
     refer,
 })
 </script>
-<!-- <script>
-export default { name: 'UiSizeAnimation' }
-</script> -->

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

@@ -1,12 +1,12 @@
 import { defineComponent, renderSlot, watch } from 'vue'
-import { buildProps, definePropType } from '@element-plus/utils'
-import { provideGlobalConfig, useSizeProp } from '@element-plus/hooks'
+import { buildProps, definePropType } from '@kankan-components/utils'
+import { provideGlobalConfig, useSizeProp } from '@kankan-components/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'
+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 = {}
 

packages/components/rollup.config.js

@@ -1,21 +0,0 @@
-import typescript from '@rollup/plugin-typescript'
-import { terser } from 'rollup-plugin-terser'
-import pkg from './package.json'
-
-export default [
-    {
-        input: 'src/index.ts',
-        external: Object.keys(pkg.dependencies),
-        plugins: [
-            typescript({
-                tsconfig: './tsconfig.build.json',
-            }),
-            terser({
-                compress: {
-                    drop_console: false,
-                },
-            }),
-        ],
-        output: [{ dir: './dist', format: 'esm', sourcemap: true }],
-    },
-]

packages/components/tsconfig.build.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../../tsconfig.build.json",
-
-  "compilerOptions": {
-    "outDir": "./dist"
-  },
-
-  "include": [
-    "src/**/*"
-  ]
-}

packages/components/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig.json"
-}

packages/utils/dom/others.ts

@@ -2,7 +2,7 @@ import { toTypeString } from '@vue/shared'
 
 export const toRawType = (value: any) => toTypeString(value).slice(8, -1)
 
-export const normalizeUnitToStyle: number = (unit: number | string) => {
+export const normalizeUnitToStyle = (unit: number | string): number | string => {
     if (unit === 0) {
         return unit
     } else if (typeof unit === 'number') {
@@ -12,7 +12,7 @@ export const normalizeUnitToStyle: number = (unit: number | string) => {
     } else if (unit.includes('%')) {
         return normalizeUnitToStyle(Number.parseFloat(unit) / 100)
     } else {
-        return unit
+        return Number(unit)
     }
 }
 

packages/utils/dom/parent.ts

@@ -55,7 +55,7 @@ export const changeWHFactory = (isShow = false, attr = 'height') => {
  * @param {*} node
  * @returns
  */
-export const getScrollParent = (node: HTMLElement): HTMLElement => {
+export const getScrollParent = (node: HTMLElement): HTMLElement | null => {
     if (node == null) {
         return null
     }
@@ -68,7 +68,7 @@ export const getScrollParent = (node: HTMLElement): HTMLElement => {
     if (node.scrollHeight > node.clientHeight || cssScrollY === 'auto' || cssScrollY === 'scroll' || cssScrollX === 'auto' || cssScrollX === 'scroll') {
         return node
     } else {
-        return getScrollParent(node.parentNode)
+        return getScrollParent(node.parentNode as HTMLElement)
     }
 }
 
@@ -77,7 +77,7 @@ export const getScrollParent = (node: HTMLElement): HTMLElement => {
  * @param {*} origin
  * @param {*} target
  */
-export const getScrollParents = (origin, target) => {
+export const getScrollParents = (origin: any, target: HTMLElement) => {
     const parents = []
     let temporary = origin
     while (temporary && temporary !== target && temporary !== document.documentElement && target.contains(temporary)) {

packages/utils/error.ts

@@ -1,21 +1,21 @@
 import { isString } from './types'
 
-class ElementPlusError extends Error {
+class KankanComponentError extends Error {
     constructor(m: string) {
         super(m)
-        this.name = 'ElementPlusError'
+        this.name = 'KankanComponentError'
     }
 }
 
 export function throwError(scope: string, m: string): never {
-    throw new ElementPlusError(`[${scope}] ${m}`)
+    throw new KankanComponentError(`[${scope}] ${m}`)
 }
 
 export function debugWarn(err: Error): void
 export function debugWarn(scope: string, message: string): void
 export function debugWarn(scope: string | Error, message?: string): void {
     if (process.env.NODE_ENV !== 'production') {
-        const error: Error = isString(scope) ? new ElementPlusError(`[${scope}] ${message}`) : scope
+        const error: Error = isString(scope) ? new KankanComponentError(`[${scope}] ${message}`) : scope
         // eslint-disable-next-line no-console
         console.warn(error)
     }

packages/utils/index.ts

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

packages/utils/typescript.ts

@@ -0,0 +1,13 @@
+export const mutable = <T extends readonly any[] | Record<string, unknown>>(val: T) => val as Mutable<typeof val>
+export type Mutable<T> = { -readonly [P in keyof T]: T[P] }
+
+export type HTMLElementCustomized<T> = HTMLElement & T
+
+/**
+ * @deprecated stop to use null
+ * @see {@link https://github.com/sindresorhus/meta/discussions/7}
+ */
+export type Nullable<T> = T | null
+
+export type Arrayable<T> = T | T[]
+export type Awaitable<T> = Promise<T> | T