refactor(架构调整): input组件，动态调整(1).

packages/components/basic/index.ts

@@ -1,4 +1,4 @@
 export * from './audio'
 export * from './icon'
 export * from './button'
-// export * from './input'
+export * from './input'

packages/components/basic/input/index.ts

@@ -1,5 +1,5 @@
 import { withInstall } from '@kankan/utils'
-import Input from './src/index.vue'
+import Input from './src/input.vue'
 
 export const UIInput = withInstall(Input)
 

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

@@ -1,7 +1,7 @@
 import { buildProps, definePropType } from '@kankan/utils'
 import type { ExtractPropTypes } from 'vue'
 
-export const CheckboxInputProps = buildProps({
+export const checkboxInputProps = buildProps({
     type: {
         type: String,
     },
@@ -47,4 +47,4 @@ export const CheckboxInputProps = buildProps({
     },
 })
 
-export type CheckboxInputProps = ExtractPropTypes<typeof CheckboxInputProps>
+export type CheckboxInputProps = ExtractPropTypes<typeof checkboxInputProps>

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

@@ -1,121 +0,0 @@
-<template>
-    <div class="ui-input" v-if="types[type]" :style="style" :class="{ require: props.require, error: props.error }">
-        <component :is="types[type].component" v-bind="childProps" :modelValue="props.modelValue" @update:model-value="newValue => emit('update:modelValue', newValue)">
-            <template v-for="(slot, name) in $slots" #[name]="raw">
-                <slot :name="name" v-bind="raw"></slot>
-            </template>
-        </component>
-        <slot></slot>
-
-        <p class="error-msg" v-if="error">{{ error }}</p>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import radio from './radio.vue'
-import checkbox from './checkbox.vue'
-import text from './text.vue'
-import select from './select.vue'
-import range from './range.vue'
-import textarea from './textarea.vue'
-import number from './number.vue'
-import uiSwitch from './switch.vue'
-import file from './file.vue'
-import search from './search.vue'
-import richtext from './richtext.vue'
-import {
-    inputPropsDesc,
-    textPropsDesc,
-    selectPropsDesc,
-    checkboxPropsDesc,
-    radioPropsDesc,
-    rangePropsDesc,
-    numberPropsDesc,
-    switchPropsDesc,
-    textareaPropsDesc,
-    filePropsDesc,
-    searchPropsDesc,
-    richtextPropsDesc,
-} from './state.js.bk'
-
-const types = {
-    checkbox: {
-        component: checkbox,
-        propsDesc: checkboxPropsDesc,
-    },
-    text: {
-        component: text,
-        propsDesc: textPropsDesc,
-    },
-    select: {
-        component: select,
-        propsDesc: selectPropsDesc,
-    },
-    radio: {
-        component: radio,
-        propsDesc: radioPropsDesc,
-    },
-    range: {
-        component: range,
-        propsDesc: rangePropsDesc,
-    },
-    number: {
-        component: number,
-        propsDesc: numberPropsDesc,
-    },
-    switch: {
-        component: uiSwitch,
-        propsDesc: switchPropsDesc,
-    },
-    textarea: {
-        component: textarea,
-        propsDesc: textareaPropsDesc,
-    },
-    file: {
-        component: file,
-        propsDesc: filePropsDesc,
-    },
-    search: {
-        component: search,
-        propsDesc: searchPropsDesc,
-    },
-    richtext: {
-        component: richtext,
-        propsDesc: richtextPropsDesc,
-    },
-}
-
-const props = defineProps(inputPropsDesc)
-
-const emit = defineEmits(['update:modelValue'])
-const type = computed(() => (types[props.type] ? props.type : 'text'))
-const childProps = computed(() => {
-    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
-})
-
-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/input.ts

@@ -0,0 +1,27 @@
+import { buildProps, definePropType } from '@kankan/utils'
+import type { ExtractPropTypes } from 'vue'
+
+export type InputType = 'checkbox' | 'text' | 'select' | 'radio' | 'range' | 'number' | 'switch' | 'textarea' | 'search' | 'richtext'
+
+import { checkboxInputProps } from './checkbox/checkbox'
+import { checkRadioProps } from './checkRadio/checkRadio'
+import { fileProps } from './file/file'
+import { radioProps } from './radio/radio'
+
+export const inputProps = buildProps({
+    ...checkboxInputProps,
+    ...checkRadioProps,
+    ...radioProps,
+    ...fileProps,
+    type: {
+        type: definePropType<InputType>(String),
+    },
+})
+
+export type RichTextProps = ExtractPropTypes<typeof inputProps>
+
+// export type
+export * from './checkbox/checkbox'
+export * from './checkRadio/checkRadio'
+export * from './file/file'
+export * from './radio/radio'

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

@@ -0,0 +1,64 @@
+<template>
+    <div class="ui-input">
+        <!-- <component :is="types[type].component" v-bind="childProps" :modelValue="props.modelValue" @update:model-value="newValue => emit('update:modelValue', newValue)">
+            <template v-for="(slot, name) in $slots" #[name]="raw">
+                <slot :name="name" v-bind="raw"></slot>
+            </template>
+        </component> -->
+        <slot></slot>
+
+        <!-- <p class="error-msg" v-if="error">{{ error }}</p> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { inputProps } from './input'
+import radio from './radio/radio.vue'
+// import checkbox from './checkbox.vue'
+// import text from './text.vue'
+// import select from './select.vue'
+// import range from './range.vue'
+// import textarea from './textarea.vue'
+// import number from './number.vue'
+// import uiSwitch from './switch.vue'
+// import file from './file.vue'
+// import search from './search.vue'
+// import richtext from './richtext.vue'
+
+const props = defineProps(inputProps)
+console.log('props', props)
+
+// const emit = defineEmits(['update:modelValue'])
+// const type = computed(() => (types[props.type] ? props.type : 'text'))
+const childProps = computed(() => {
+    // 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 {}
+})
+console.log('childProps', childProps, radio)
+
+// 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>

playground/src/App.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { onMounted, VNode } from 'vue'
-import { UIAudio, UIIcon, UIButton } from '@kankan/components'
+import { UIAudio, UIIcon, UIButton, UIInput } from '@kankan/components'
 // import { buildProps } from '@kankan/utils';
 // import { h } from 'vue';
 // import * as KanKanSDK from '@kankan/sdk';
-console.log('UI', UIAudio, UIIcon)
+// console.log('UI', UIAudio, UIIcon)
 
 onMounted(async () => {
     const KanKan = (window as any).KanKan
@@ -53,6 +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" />
     </div>
 </template>