refactor(架构调整): 新增文档中心与基本配置

docs/config.mts

@@ -0,0 +1,16 @@
+import type { UserConfig } from 'vitepress'
+export const config: UserConfig = {
+    title: 'kankan components',
+    description: '四维组件文档中心',
+    lastUpdated: true,
+    themeConfig: {
+        repo: '',
+        docsBranch: '',
+        docsDir: '',
+        editLinks: true,
+        editLinkText: '',
+        lastUpdated: 'Last Updated',
+    },
+}
+
+export default config

docs/index.md

@@ -0,0 +1,7 @@
+---
+title: '四维看看组件文档说明'
+lang: zh-CN
+page: true
+---
+
+<!-- Placeholder -->

docs/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "@kankan-components/docs",
+    "private": true,
+    "scripts": {
+        "dev": "vitepress dev --port 5000 .",
+        "build": "NODE_ENV=production && vitepress build .",
+        "serve": "NODE_ENV=production vitepress serve . --port 5001"
+    },
+    "dependencies": {
+        "@docsearch/js": "^3.1.0",
+        "@vue/shared": "^3.2.37",
+        "@vueuse/core": "^9.1.0",
+        "axios": "^0.27.2",
+        "clipboard-copy": "^4.0.1",
+        "markdown-it": "^13.0.1",
+        "normalize.css": "^8.0.1",
+        "nprogress": "^0.2.0",
+        "prism-theme-vars": "^0.2.3",
+        "vue": "^3.2.37"
+    },
+    "devDependencies": {
+        "@iconify-json/ri": "^1.1.3",
+        "@types/markdown-it": "^12.2.3",
+        "@vitejs/plugin-vue-jsx": "^1.3.10",
+        "chalk": "^4.1.2",
+        "consola": "^2.15.3",
+        "escape-html": "^1.0.3",
+        "fast-glob": "^3.2.11",
+        "markdown-it-container": "^3.0.0",
+        "octokit": "^2.0.3",
+        "prismjs": "^1.28.0",
+        "unocss": "0.33.5",
+        "unplugin-icons": "^0.14.6",
+        "unplugin-vue-components": "^0.20.1",
+        "unplugin-vue-macros": "^0.11.2",
+        "vite": "^2.9.15",
+        "vite-plugin-inspect": "^0.5.0",
+        "vite-plugin-mkcert": "^1.7.2",
+        "vite-plugin-pwa": "^0.12.0",
+        "vitepress": "^0.22.4"
+    }
+}

package.json

@@ -7,7 +7,6 @@
         "apps/*"
     ],
     "scripts": {
-        "docs": "doctoc --title '**Table of content**' README.md",
         "clean": "pnpm run -r clean",
         "build": "pnpm run -r build",
         "test": "vitest",
@@ -18,7 +17,8 @@
         "postinstall": "husky install",
         "changeset": "changeset",
         "version-packages": "changeset version",
-        "dev": "pnpm -C playground dev"
+        "play": "pnpm -C playground dev",
+        "doc:dev": "pnpm -C docs dev"
     },
     "peerDependencies": {
         "vue": "^3.2.0"
@@ -43,7 +43,6 @@
         "commitizen": "^4.2.5",
         "commitlint-config-cz": "^0.13.3",
         "cz-customizable": "^7.0.0",
-        "doctoc": "~2.2.0",
         "eslint": "~8.23.1",
         "eslint-config-prettier": "^8.5.0",
         "eslint-define-config": "^1.7.0",
@@ -57,11 +56,12 @@
         "lint-staged": "^13.0.3",
         "resize-observer-polyfill": "^1.5.1",
         "typescript": "~4.7.4",
+        "unplugin-vue-components": "^0.20.1",
         "unplugin-vue-macros": "^0.11.2",
         "vitest": "^0.23.4"
     },
     "lint-staged": {
-        "*.{vue,js,ts,jsx,tsx,json}": [
+        "*.{vue,js,ts,jsx,tsx,mts,json}": [
             "eslint --fix"
         ]
     },

packages/components/basic/bubble/index.ts

@@ -0,0 +1,9 @@
+import { withInstall } from '@kankan/utils'
+
+import Bubble from './src/bubble.vue'
+
+export const UIBubble = withInstall(Bubble)
+
+export default UIBubble
+
+export * from './src/bubble'

packages/components/basic/bubble/index.vue

@@ -9,7 +9,7 @@
     </transition>
 </template>
 
-<script setup>
+<script setup lang="ts">
 defineProps({
     type: {
         type: String,
@@ -26,6 +26,6 @@ defineProps({
 })
 </script>
 
-<script>
+<script lang="ts">
 export default { name: 'UiBubble' }
 </script>

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

@@ -11,11 +11,15 @@
 </template>
 
 <script setup lang="ts">
-import icon from '../../../icon/src/icon.vue'
+import icon from '@kankan/components/basic/icon'
 import { checkRadioProps } from './checkRadio'
 import { randomId } from '@kankan/utils'
 import { defineProps, defineEmits } from 'vue'
 const props = defineProps(checkRadioProps)
 const emit = defineEmits(['update:modelValue'])
 const id = randomId(4)
+
+defineOptions({
+    name: 'UIRadio',
+})
 </script>

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

@@ -17,7 +17,7 @@
     </label>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UIIcon from '../../../icon/src/icon.vue'
 import { checkboxInputProps } from './checkbox'
 import { randomId } from '@kankan/utils'
@@ -25,4 +25,8 @@ import { defineProps, defineEmits } from 'vue'
 const props = defineProps(checkboxInputProps)
 const emit = defineEmits(['update:modelValue'])
 const id = randomId(4)
+
+defineOptions({
+    name: 'UICheckbox',
+})
 </script>

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

@@ -27,6 +27,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 { PropType } from 'vue'
 
 export const inputProps = buildProps({
     ...checkboxInputProps,
@@ -48,14 +49,14 @@ export const inputProps = buildProps({
 
 export type InputProps = ExtractPropTypes<typeof inputProps>
 
-type ComponentsType = {
-    [propsName in InputType]: ComponentsPropType
+type InputComponentsType = {
+    [propsName in InputType]: InputComponentsPropType
 }
-interface ComponentsPropType {
+interface InputComponentsPropType {
     component: VNode
     props: InputProps | unknown
 }
-export const InputComponents: ComponentsType = {
+export const InputComponents: InputComponentsType = {
     radio: {
         props: radioProps,
         component: radio,

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

@@ -1,7 +1,7 @@
 <template>
     <div class="ui-input">
         <template v-if="type">
-            <component :is="InputComponents[type].component" v-bind="childProps" :modelValue="props.modelValue" @update:model-value="newValue => emit('update:modelValue', newValue)">
+            <component :is="InputComponents[type].component" v-bind="$attrs" :modelValue="props.modelValue" @update:model-value="handleUpdate">
                 <template v-for="(slot, name) in $slots" #[name]="raw">
                     <slot :name="name" v-bind="raw"></slot>
                 </template>
@@ -14,32 +14,35 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import { inputProps, InputComponents } from './input'
 const props = defineProps(inputProps)
-console.log('props', props)
 
-// const emit = defineEmits(['update:modelValue'])
+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) {
-        console.log('props--type', InputComponents[props.type])
-        return InputComponents[props.type].props
-    }
-    // const retain = Object.keys(types[type.value].propsDesc)
-    // const childProps = {}
-    // for (let key in props) {
-    //     if (retain.includes(key)) {
-    //         childProps[key] = props[key]
-    //     }
-    // }
-    // if (!types[props.type]) {
-    //     childProps.type = props.type
-    // }
-    // return childProps
-    return false
-})
+// 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)

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

@@ -10,11 +10,15 @@
 </template>
 
 <script setup lang="ts">
-import UIIcon from '../../../icon/src/icon.vue'
+import UIIcon from '@kankan/components/basic/icon'
 import { radioProps } from './radio'
 import { randomId } from '@kankan/utils'
 import { defineProps, defineEmits } from 'vue'
 const props = defineProps(radioProps)
 const emit = defineEmits(['update:modelValue'])
 const id = randomId(4)
+
+defineOptions({
+    name: 'UIRadio',
+})
 </script>

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

@@ -13,13 +13,13 @@
         <input
             class="ui-text"
             :class="{ icon: $slots.icon }"
-            :type="props.type"
+            :type="type"
             :value="modelValue"
             autocomplete="off"
             @input="inputHandler"
-            :placeholder="props.placeholder"
+            :placeholder="placeholder"
             :readonly="readonly"
-            :maxlength="props.maxlength"
+            :maxlength="maxlength"
             @focus="emit('focus')"
             @blur="emit('blur')"
             ref="inputRef"
@@ -37,7 +37,7 @@
 
 <script setup lang="ts">
 import { textInputProps } from './text'
-import { defineProps, defineEmits, defineExpose, nextTick, ref } from 'vue'
+import { defineProps, defineEmits, defineExpose, ref } from 'vue'
 const props = defineProps(textInputProps)
 const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click'])
 // const test = () => {
@@ -47,12 +47,13 @@ const textRef = ref(null)
 const inputRef = ref(null)
 
 const inputHandler = (ev: any) => {
+    // debugger;
     emit('update:modelValue', ev.target.value)
-    nextTick(() => {
-        if (ev.target.value !== props.modelValue.toString()) {
-            ev.target.value = props.modelValue.toString()
-        }
-    })
+    // nextTick(() => {
+    //     if (ev.target.value !== props.modelValue.toString()) {
+    //         ev.target.value = props.modelValue.toString()
+    //     }
+    // })
 }
 
 defineExpose({

playground/package.json

@@ -17,6 +17,6 @@
         "@vitejs/plugin-vue": "^3.1.0",
         "typescript": "^4.6.4",
         "vite": "^3.1.0",
-        "vue-tsc": "^0.40.4"
+        "vue-tsc": "^1.0.5"
     }
 }

playground/src/App.vue

@@ -53,7 +53,7 @@ onMounted(async () => {
         <UIAudio src="http://samplelib.com/lib/preview/mp3/sample-3s.mp3" />
         <UIButton>djdjddd</UIButton>
         <UIIcon type="checkbox" :size="129" />
-        <UIInput type="text" />
+        <UIInput type="radio" />
     </div>
 </template>
 

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
-  - 'packages/**'
-  - 'playground'
+  - packages/*
+  - docs
+  - play

tsconfig.web.json

@@ -1,20 +1,12 @@
 {
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "composite": true,
-    "jsx": "preserve",
-    "lib": ["ES2018", "DOM", "DOM.Iterable"],
-    "types": ["unplugin-vue-macros/macros-global"],
-    "skipLibCheck": true
-  },
-  "include": ["packages", "typings/components.d.ts", "typings/env.d.ts"],
-  "exclude": [
-    "node_modules",
-    "**/dist",
-    "**/__tests__/**/*",
-    "**/gulpfile.ts",
-    "**/test-helper",
-    "packages/test-utils",
-    "**/*.md"
-  ]
+    "extends": "./tsconfig.base.json",
+    "compilerOptions": {
+        "composite": true,
+        "jsx": "preserve",
+        "lib": ["ES2018", "DOM", "DOM.Iterable"],
+        "types": ["unplugin-vue-macros/macros-global"],
+        "skipLibCheck": true
+    },
+    "include": ["packages", "typings/components.d.ts", "typings/env.d.ts"],
+    "exclude": ["node_modules", "**/dist", "**/__tests__/**/*", "**/gulpfile.ts", "**/test-helper", "packages/test-utils", "**/*.md"]
 }

typings/env.d.ts

@@ -0,0 +1,32 @@
+import type { vShow } from 'vue'
+const INSTALLED_KEY = Symbol('INSTALLED_KEY')
+declare global {
+    const process: {
+        env: {
+            NODE_ENV: string
+        }
+    }
+
+    namespace JSX {
+        interface IntrinsicAttributes {
+            class?: any
+            style?: any
+        }
+    }
+}
+
+declare module '@vue/runtime-core' {
+    export interface App {
+        [INSTALLED_KEY]?: boolean
+    }
+
+    export interface GlobalComponents {
+        Component: (props: { is: Component | string }) => void
+    }
+
+    export interface ComponentCustomProperties {
+        vShow: typeof vShow
+    }
+}
+
+export {}