refactor(组件): components 划分三大模块

packages/components/README.md

@@ -0,0 +1,12 @@
+# Components 组件库说明
+
+packages/components
+├── basic // 基础 UI 组件
+├── editor // 与编辑器相关
+├── advance // 高阶复杂
+
+
+## 文件开发目录规范
+
+
+

packages/components/basic/icon/iconfont/iconfont.json

@@ -0,0 +1,534 @@
+{
+    "id": "2930899",
+    "name": "激光编辑器",
+    "font_family": "iconfont",
+    "css_prefix_text": "icon-",
+    "description": "",
+    "glyphs": [
+        {
+            "icon_id": "26384825",
+            "name": "destination",
+            "font_class": "destination",
+            "unicode": "e678",
+            "unicode_decimal": 59000
+        },
+        {
+            "icon_id": "26384826",
+            "name": "origin",
+            "font_class": "origin",
+            "unicode": "e679",
+            "unicode_decimal": 59001
+        },
+        {
+            "icon_id": "22132762",
+            "name": "state_e",
+            "font_class": "state_e",
+            "unicode": "e624",
+            "unicode_decimal": 58916
+        },
+        {
+            "icon_id": "22132763",
+            "name": "state_f",
+            "font_class": "state_f",
+            "unicode": "e625",
+            "unicode_decimal": 58917
+        },
+        {
+            "icon_id": "22132764",
+            "name": "state_s",
+            "font_class": "state_s",
+            "unicode": "e626",
+            "unicode_decimal": 58918
+        },
+        {
+            "icon_id": "26198013",
+            "name": "clear",
+            "font_class": "clear",
+            "unicode": "e676",
+            "unicode_decimal": 58998
+        },
+        {
+            "icon_id": "26198014",
+            "name": "cut",
+            "font_class": "cut",
+            "unicode": "e677",
+            "unicode_decimal": 58999
+        },
+        {
+            "icon_id": "26189441",
+            "name": "copy",
+            "font_class": "copy",
+            "unicode": "e675",
+            "unicode_decimal": 58997
+        },
+        {
+            "icon_id": "26077357",
+            "name": "v-m",
+            "font_class": "v-m",
+            "unicode": "e674",
+            "unicode_decimal": 58996
+        },
+        {
+            "icon_id": "26077354",
+            "name": "f-m",
+            "font_class": "f-m",
+            "unicode": "e671",
+            "unicode_decimal": 58993
+        },
+        {
+            "icon_id": "26077355",
+            "name": "v-r",
+            "font_class": "v-r",
+            "unicode": "e672",
+            "unicode_decimal": 58994
+        },
+        {
+            "icon_id": "26077356",
+            "name": "f-l",
+            "font_class": "f-l",
+            "unicode": "e673",
+            "unicode_decimal": 58995
+        },
+        {
+            "icon_id": "26077350",
+            "name": "h-l",
+            "font_class": "h-l",
+            "unicode": "e66d",
+            "unicode_decimal": 58989
+        },
+        {
+            "icon_id": "26077351",
+            "name": "h-m",
+            "font_class": "h-m",
+            "unicode": "e66e",
+            "unicode_decimal": 58990
+        },
+        {
+            "icon_id": "26077352",
+            "name": "v-l",
+            "font_class": "v-l",
+            "unicode": "e66f",
+            "unicode_decimal": 58991
+        },
+        {
+            "icon_id": "26077353",
+            "name": "h-r",
+            "font_class": "h-r",
+            "unicode": "e670",
+            "unicode_decimal": 58992
+        },
+        {
+            "icon_id": "26077297",
+            "name": "share",
+            "font_class": "share",
+            "unicode": "e66c",
+            "unicode_decimal": 58988
+        },
+        {
+            "icon_id": "26077227",
+            "name": "magnify",
+            "font_class": "magnify",
+            "unicode": "e66b",
+            "unicode_decimal": 58987
+        },
+        {
+            "icon_id": "26077202",
+            "name": "2d",
+            "font_class": "a-2d",
+            "unicode": "e669",
+            "unicode_decimal": 58985
+        },
+        {
+            "icon_id": "26077203",
+            "name": "3d",
+            "font_class": "a-3d",
+            "unicode": "e66a",
+            "unicode_decimal": 58986
+        },
+        {
+            "icon_id": "26008932",
+            "name": "left",
+            "font_class": "left",
+            "unicode": "e668",
+            "unicode_decimal": 58984
+        },
+        {
+            "icon_id": "26008166",
+            "name": "video",
+            "font_class": "video",
+            "unicode": "e667",
+            "unicode_decimal": 58983
+        },
+        {
+            "icon_id": "23786363",
+            "name": "pic",
+            "font_class": "pic",
+            "unicode": "e64e",
+            "unicode_decimal": 58958
+        },
+        {
+            "icon_id": "23773141",
+            "name": "full",
+            "font_class": "full",
+            "unicode": "e638",
+            "unicode_decimal": 58936
+        },
+        {
+            "icon_id": "23773069",
+            "name": "del",
+            "font_class": "del",
+            "unicode": "e632",
+            "unicode_decimal": 58930
+        },
+        {
+            "icon_id": "22099479",
+            "name": "link",
+            "font_class": "link",
+            "unicode": "e618",
+            "unicode_decimal": 58904
+        },
+        {
+            "icon_id": "22099480",
+            "name": "uploading",
+            "font_class": "uploading",
+            "unicode": "e619",
+            "unicode_decimal": 58905
+        },
+        {
+            "icon_id": "22099484",
+            "name": "complete",
+            "font_class": "complete",
+            "unicode": "e61b",
+            "unicode_decimal": 58907
+        },
+        {
+            "icon_id": "23773072",
+            "name": "web",
+            "font_class": "web",
+            "unicode": "e635",
+            "unicode_decimal": 58933
+        },
+        {
+            "icon_id": "23773074",
+            "name": "music",
+            "font_class": "music",
+            "unicode": "e637",
+            "unicode_decimal": 58935
+        },
+        {
+            "icon_id": "25764812",
+            "name": "element",
+            "font_class": "element",
+            "unicode": "e666",
+            "unicode_decimal": 58982
+        },
+        {
+            "icon_id": "23773068",
+            "name": "add",
+            "font_class": "add",
+            "unicode": "e631",
+            "unicode_decimal": 58929
+        },
+        {
+            "icon_id": "22099525",
+            "name": "edit",
+            "font_class": "edit",
+            "unicode": "e61f",
+            "unicode_decimal": 58911
+        },
+        {
+            "icon_id": "25713499",
+            "name": "info",
+            "font_class": "info",
+            "unicode": "e65e",
+            "unicode_decimal": 58974
+        },
+        {
+            "icon_id": "25713500",
+            "name": "transmit",
+            "font_class": "transmit",
+            "unicode": "e65f",
+            "unicode_decimal": 58975
+        },
+        {
+            "icon_id": "25713501",
+            "name": "room",
+            "font_class": "room",
+            "unicode": "e660",
+            "unicode_decimal": 58976
+        },
+        {
+            "icon_id": "25713502",
+            "name": "point",
+            "font_class": "point",
+            "unicode": "e661",
+            "unicode_decimal": 58977
+        },
+        {
+            "icon_id": "25713503",
+            "name": "bulid",
+            "font_class": "bulid",
+            "unicode": "e662",
+            "unicode_decimal": 58978
+        },
+        {
+            "icon_id": "25713504",
+            "name": "floor",
+            "font_class": "floor",
+            "unicode": "e663",
+            "unicode_decimal": 58979
+        },
+        {
+            "icon_id": "25713602",
+            "name": "pull-up",
+            "font_class": "pull-up1",
+            "unicode": "e664",
+            "unicode_decimal": 58980
+        },
+        {
+            "icon_id": "25713603",
+            "name": "pull-down",
+            "font_class": "pull-down1",
+            "unicode": "e665",
+            "unicode_decimal": 58981
+        },
+        {
+            "icon_id": "25671886",
+            "name": "checkbox",
+            "font_class": "checkbox1",
+            "unicode": "e65d",
+            "unicode_decimal": 58973
+        },
+        {
+            "icon_id": "25655073",
+            "name": "minimize",
+            "font_class": "minimize",
+            "unicode": "e65c",
+            "unicode_decimal": 58972
+        },
+        {
+            "icon_id": "25654903",
+            "name": "reset",
+            "font_class": "reset",
+            "unicode": "e65a",
+            "unicode_decimal": 58970
+        },
+        {
+            "icon_id": "25654904",
+            "name": "refresh",
+            "font_class": "refresh",
+            "unicode": "e65b",
+            "unicode_decimal": 58971
+        },
+        {
+            "icon_id": "25654199",
+            "name": "checkbox",
+            "font_class": "checkbox",
+            "unicode": "e659",
+            "unicode_decimal": 58969
+        },
+        {
+            "icon_id": "22099518",
+            "name": "pull-down",
+            "font_class": "pull-down",
+            "unicode": "e61d",
+            "unicode_decimal": 58909
+        },
+        {
+            "icon_id": "22099519",
+            "name": "pull-up",
+            "font_class": "pull-up",
+            "unicode": "e61e",
+            "unicode_decimal": 58910
+        },
+        {
+            "icon_id": "25633777",
+            "name": "show_pic_s",
+            "font_class": "show_pic_s",
+            "unicode": "e658",
+            "unicode_decimal": 58968
+        },
+        {
+            "icon_id": "25633765",
+            "name": "show_pic_n",
+            "font_class": "show_pic_n",
+            "unicode": "e650",
+            "unicode_decimal": 58960
+        },
+        {
+            "icon_id": "25633715",
+            "name": "show_dot_s",
+            "font_class": "show_dot_s",
+            "unicode": "e64f",
+            "unicode_decimal": 58959
+        },
+        {
+            "icon_id": "25633717",
+            "name": "show_dot_n",
+            "font_class": "show_dot_n",
+            "unicode": "e657",
+            "unicode_decimal": 58967
+        },
+        {
+            "icon_id": "25632561",
+            "name": "share",
+            "font_class": "share1",
+            "unicode": "e656",
+            "unicode_decimal": 58966
+        },
+        {
+            "icon_id": "25631621",
+            "name": "portrait",
+            "font_class": "portrait",
+            "unicode": "e655",
+            "unicode_decimal": 58965
+        },
+        {
+            "icon_id": "25631501",
+            "name": "course",
+            "font_class": "course",
+            "unicode": "e652",
+            "unicode_decimal": 58962
+        },
+        {
+            "icon_id": "25631463",
+            "name": "self-more",
+            "font_class": "self-more",
+            "unicode": "e64b",
+            "unicode_decimal": 58955
+        },
+        {
+            "icon_id": "25631464",
+            "name": "search",
+            "font_class": "search",
+            "unicode": "e64c",
+            "unicode_decimal": 58956
+        },
+        {
+            "icon_id": "25631466",
+            "name": "pull-more",
+            "font_class": "pull-more",
+            "unicode": "e64d",
+            "unicode_decimal": 58957
+        },
+        {
+            "icon_id": "25631470",
+            "name": "switch",
+            "font_class": "switch",
+            "unicode": "e651",
+            "unicode_decimal": 58961
+        },
+        {
+            "icon_id": "25631455",
+            "name": "nav-hotspot",
+            "font_class": "nav-hotspot",
+            "unicode": "e64a",
+            "unicode_decimal": 58954
+        },
+        {
+            "icon_id": "25631400",
+            "name": "nav-measure",
+            "font_class": "nav-measure",
+            "unicode": "e649",
+            "unicode_decimal": 58953
+        },
+        {
+            "icon_id": "25631122",
+            "name": "nav-edit",
+            "font_class": "nav-edit",
+            "unicode": "e642",
+            "unicode_decimal": 58946
+        },
+        {
+            "icon_id": "25631133",
+            "name": "nav-setup",
+            "font_class": "nav-setup",
+            "unicode": "e648",
+            "unicode_decimal": 58952
+        },
+        {
+            "icon_id": "23773070",
+            "name": "close",
+            "font_class": "close",
+            "unicode": "e633",
+            "unicode_decimal": 58931
+        },
+        {
+            "icon_id": "25629542",
+            "name": "nav-browse",
+            "font_class": "nav-browse",
+            "unicode": "e63d",
+            "unicode_decimal": 58941
+        },
+        {
+            "icon_id": "25629543",
+            "name": "nav-correct",
+            "font_class": "nav-correct",
+            "unicode": "e63e",
+            "unicode_decimal": 58942
+        },
+        {
+            "icon_id": "25629544",
+            "name": "nav_data-setup",
+            "font_class": "nav_data-setup",
+            "unicode": "e63f",
+            "unicode_decimal": 58943
+        },
+        {
+            "icon_id": "25629546",
+            "name": "nav-coord",
+            "font_class": "nav-coord",
+            "unicode": "e641",
+            "unicode_decimal": 58945
+        },
+        {
+            "icon_id": "25629548",
+            "name": "nav-geography",
+            "font_class": "nav-geography",
+            "unicode": "e643",
+            "unicode_decimal": 58947
+        },
+        {
+            "icon_id": "25629549",
+            "name": "nav-space",
+            "font_class": "nav-space",
+            "unicode": "e644",
+            "unicode_decimal": 58948
+        },
+        {
+            "icon_id": "25629550",
+            "name": "nav-download",
+            "font_class": "nav-download",
+            "unicode": "e645",
+            "unicode_decimal": 58949
+        },
+        {
+            "icon_id": "25629551",
+            "name": "nav-data",
+            "font_class": "nav-data",
+            "unicode": "e646",
+            "unicode_decimal": 58950
+        },
+        {
+            "icon_id": "25629552",
+            "name": "nav-house",
+            "font_class": "nav-house",
+            "unicode": "e647",
+            "unicode_decimal": 58951
+        },
+        {
+            "icon_id": "22930372",
+            "name": "eye-s",
+            "font_class": "eye-s",
+            "unicode": "e653",
+            "unicode_decimal": 58963
+        },
+        {
+            "icon_id": "22930373",
+            "name": "eye-n",
+            "font_class": "eye-n",
+            "unicode": "e654",
+            "unicode_decimal": 58964
+        }
+    ]
+}

packages/components/basic/icon/src/icon.ts

@@ -0,0 +1,7 @@
+import type { ExtractPropTypes } from 'vue'
+import type Icon from './icon.vue'
+import { iconProps } from './props'
+
+export type IconProps = ExtractPropTypes<typeof iconProps>
+
+export type IconInstance = InstanceType<typeof Icon>

packages/components/basic/icon/src/props.ts

@@ -0,0 +1,23 @@
+import { buildProps, definePropType } from '@kankan/utils'
+
+export const iconProps = buildProps({
+    type: { type: String },
+    size: {
+        type: definePropType<number | string>([Number, String]),
+    },
+    color: { type: String },
+    small: { type: Boolean },
+    ctrl: { type: Boolean },
+    medium: { type: Boolean },
+    big: { type: Boolean },
+    disabled: { type: Boolean },
+    tip: { type: String },
+    tipH: {
+        type: String,
+        default: 'center',
+    },
+    tipV: {
+        type: String,
+        default: 'bottom',
+    },
+})

packages/components/basic/index.ts

@@ -0,0 +1,3 @@
+export * from './audio'
+export * from './icon'
+export * from './button'

packages/components/input/src/check-radio.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import icon from '../icon'
-import { checkboxPropsDesc } from './state'
+import { checkboxPropsDesc } from '../state'
 import { randomId } from '@kankan/utils'
 import { defineProps, defineEmits } from 'vue'
 const props = defineProps(checkboxPropsDesc)

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

@@ -0,0 +1,49 @@
+import { buildProps, definePropType, ExtractPropType } from '@kankan/utils'
+
+export const CheckboxInputProps = buildProps({
+    type: {
+        type: String,
+    },
+    name: {
+        type: String,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    modelValue: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: '请输入',
+    },
+    maxlength: {
+        type: definePropType<number | string>([Number, String]),
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    other: {
+        type: Object,
+        default: () => ({}),
+    },
+    right: {
+        type: Boolean,
+    },
+    width: {
+        type: definePropType<number | string>([Number, String]),
+        default: '',
+    },
+    height: {
+        type: definePropType<number | string>([Number, String]),
+        default: '',
+    },
+    label: {
+        type: String,
+    },
+})
+
+export type CheckboxInputProps = ExtractPropType<typeof CheckboxInputProps>

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

@@ -0,0 +1,23 @@
+<template>
+    <div class="input checkbox" :style="{ width: props.width, height: props.width }" :class="{ disabled }">
+        <input :disabled="disabled" :id="id" type="checkbox" class="replace-input" :checked="props.modelValue" @input="(ev:InputEvent) => emit('update:modelValue', ev.target.checked)" />
+        <span class="replace">
+            <UIIcon :type="props.modelValue ? 'checkbox' : 'nor'" :size="props.width > props.height ? props.height : props.width" />
+        </span>
+    </div>
+    <label class="label" v-if="props.label" :for="id">
+        {{ props.label }}
+    </label>
+</template>
+
+<script setup lang="ts">
+import UIIcon from '../../../icon/src/icon.vue'
+import { CheckboxInputProps } from './checkbox'
+import { randomId } from '@kankan/utils'
+import { defineProps, defineEmits } from 'vue'
+const props = defineProps(CheckboxInputProps)
+const emit = defineEmits(['update:modelValue'])
+const id = randomId(4)
+
+const
+</script>

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

@@ -0,0 +1,256 @@
+// import { buildProps, definePropType } from '@kankan/utils'
+
+// export const InputProps = buildProps({
+//     name: {
+//         type: String,
+//     },
+//     disabled: {
+//         type: Boolean,
+//         default: false,
+//     },
+//     modelValue: {
+//         required: false,
+//         default: '',
+//     },
+//     placeholder: {
+//         require: false,
+//         default: '请输入',
+//     },
+// })
+
+// export const colorPropsDesc = {
+//     ...InputProps,
+//     width: {
+//         type: String,
+//         default: '100px',
+//     },
+//     height: {
+//         type: String,
+//         default: '34px',
+//     },
+// }
+
+// export const filePropsDesc = {
+//     ...instalcePublic,
+//     placeholder: {
+//         require: false,
+//         default: '请选择',
+//     },
+//     othPlaceholder: {
+//         require: false,
+//         default: '',
+//     },
+//     accept: {
+//         type: String,
+//     },
+//     scale: {
+//         type: String,
+//     },
+//     multiple: {
+//         type: Boolean,
+//     },
+//     preview: {
+//         type: Boolean,
+//     },
+//     maxSize: {
+//         type: Number,
+//     },
+//     maxLen: {
+//         type: Number,
+//     },
+// }
+
+// export const switchPropsDesc = {
+//     ...instalcePublic,
+//     width: {
+//         type: [Number, String],
+//     },
+//     height: {
+//         type: [Number, String],
+//     },
+// }
+
+// export const checkboxPropsDesc = {
+//     ...switchPropsDesc,
+//     label: {
+//         type: String,
+//         required: false,
+//     },
+// }
+
+// export const radioPropsDesc = {
+//     ...checkboxPropsDesc,
+//     icon: {
+//         type: String,
+//     },
+//     tip: {
+//         type: String,
+//     },
+// }
+
+// export const textPropsDesc = {
+//     ...instalcePublic,
+//     maxlength: {
+//         type: [String, Number],
+//     },
+//     placeholder: {
+//         type: String,
+//         default: '请输入',
+//     },
+//     readonly: {
+//         type: Boolean,
+//         default: false,
+//     },
+//     other: {
+//         type: Object,
+//         default: () => ({}),
+//     },
+//     right: {
+//         type: Boolean,
+//     },
+// }
+
+// export const textEmitsDesc = ['update:modelValue', 'focus', 'blur', 'click', 'keydown']
+
+// export const textareaPropsDesc = {
+//     ...textPropsDesc,
+//     rich: {
+//         type: Boolean,
+//     },
+// }
+
+// export const richtextPropsDesc = {
+//     ...textareaPropsDesc,
+//     onUpdatePos: Function,
+// }
+
+// export const selectPropsDesc = {
+//     ...textPropsDesc,
+//     stopEl: {
+//         type: String,
+//         require: false,
+//     },
+//     floatingClass: {
+//         type: String,
+//         require: false,
+//     },
+//     showOptions: {
+//         type: Boolean,
+//         require: false,
+//     },
+//     placeholder: { ...textPropsDesc.placeholder, default: '请选择' },
+//     unplaceholder: { ...textPropsDesc.placeholder, default: '暂无选项' },
+//     hideScroll: {
+//         type: Boolean,
+//         default: false,
+//     },
+//     options: {
+//         type: Array,
+//         default: () => [],
+//     },
+//     dire: {
+//         type: String,
+//         default: 'bottom',
+//     },
+// }
+
+// export const searchPropsDesc = {
+//     ...selectPropsDesc,
+//     unplaceholder: { ...textPropsDesc.placeholder, default: '无搜索结果' },
+// }
+
+// export const numberPropsDesc = {
+//     ...textPropsDesc,
+//     inInput: {
+//         type: Boolean,
+//         default: true,
+//     },
+//     ctrl: {
+//         type: Boolean,
+//         default: true,
+//     },
+//     step: {
+//         type: Number,
+//         require: true,
+//         default: 1,
+//     },
+//     min: {
+//         type: [Number, String],
+//         require: false,
+//     },
+//     max: {
+//         type: [Number, String],
+//         require: false,
+//     },
+//     limit: {
+//         type: Number,
+//         default: 0,
+//     },
+//     inch: {
+//         type: [Boolean, String],
+//         default: false,
+//     },
+//     rangeInput: {
+//         type: Boolean,
+//         default: true,
+//     },
+//     rangeTips: {
+//         type: Boolean,
+//         default: false,
+//     },
+// }
+
+// export const rangePropsDesc = {
+//     ...numberPropsDesc,
+//     min: { ...numberPropsDesc.min, require: true },
+//     min: { ...numberPropsDesc.min, require: true },
+// }
+
+// const summary = {
+//     ...checkboxPropsDesc,
+//     ...radioPropsDesc,
+//     ...selectPropsDesc,
+//     ...textPropsDesc,
+//     ...rangePropsDesc,
+//     ...numberPropsDesc,
+//     ...switchPropsDesc,
+//     ...textareaPropsDesc,
+//     ...filePropsDesc,
+//     ...searchPropsDesc,
+//     ...richtextPropsDesc,
+//     ...colorPropsDesc,
+// }
+// for (const key in summary) {
+//     summary[key] = {
+//         ...summary[key],
+//         default: undefined,
+//     }
+// }
+
+// export const inputEmitDesc = {
+//     text: textEmitsDesc,
+// }
+
+// export const inputPropsDesc = {
+//     ...summary,
+//     type: {
+//         type: String,
+//         required: true,
+//         default: 'text',
+//     },
+//     width: {
+//         type: [Number, String],
+//     },
+//     height: {
+//         type: [Number, String],
+//     },
+//     require: {
+//         type: Boolean,
+//     },
+//     error: {
+//         type: String,
+//     },
+//     disabled: {
+//         type: Boolean,
+//     },
+// }

packages/components/input/src/search.vue

@@ -1,5 +1,5 @@
 <template>
-    <UISelect ref="selectVM" className="search" v-bind="props" :readonly="false" @update:modelValue="update" :labelValue="labelValue" :options="options">
+    <UISelect ref="selectVM" className="search" v-bind="props" :readonly="false" @update:model-value="update" :labelValue="labelValue" :options="options">
         <template v-for="(slot, name) in $slots" #[name]="raw">
             <slot :name="name" v-bind="raw"></slot>
         </template>

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

@@ -0,0 +1,39 @@
+import { buildProps, definePropType, ExtractPropType } from '@kankan/utils'
+
+export const TextInputProps = buildProps({
+    type: {
+        type: String,
+    },
+    name: {
+        type: String,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    modelValue: {
+        type: String,
+        required: false,
+        default: '',
+    },
+    placeholder: {
+        type: String,
+        default: '请输入',
+    },
+    maxlength: {
+        type: definePropType<number | string>([Number, String]),
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    other: {
+        type: Object,
+        default: () => ({}),
+    },
+    right: {
+        type: Boolean,
+    },
+})
+
+export type TextInputProps = ExtractPropType<typeof TextInputProps>

packages/components/input/src/text.vue

@@ -13,7 +13,7 @@
         <input
             class="ui-text"
             :class="{ icon: $slots.icon }"
-            :type="type"
+            :type="props.type"
             :value="modelValue"
             autocomplete="off"
             @input="inputHandler"
@@ -28,7 +28,7 @@
         <span v-if="$slots.icon || props.maxlength" class="retouch">
             <slot name="icon"></slot>
             <span v-if="props.maxlength" class="len">
-                <span>{{ modelValue.length }}</span> / {{ maxlength }}
+                <span>{{ modelValue?.length }}</span> / {{ maxlength }}
             </span>
         </span>
         <slot></slot>
@@ -36,15 +36,9 @@
 </template>
 
 <script setup lang="ts">
-import { textPropsDesc } from './state'
+import { TextInputProps } from './text'
 import { defineProps, defineEmits, defineExpose, nextTick, ref } from 'vue'
-const props = defineProps({
-    type: {
-        type: String,
-        default: 'text',
-    },
-    ...textPropsDesc,
-})
+const props = defineProps(TextInputProps)
 const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click'])
 // const test = () => {
 //   emit('focus');
@@ -52,7 +46,7 @@ const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'click'])
 const textRef = ref(null)
 const inputRef = ref(null)
 
-const inputHandler = ev => {
+const inputHandler = (ev: any) => {
     emit('update:modelValue', ev.target.value)
     nextTick(() => {
         if (ev.target.value !== props.modelValue.toString()) {

packages/components/icon/iconfont/iconfont.json

@@ -1,534 +0,0 @@
-{
-  "id": "2930899",
-  "name": "激光编辑器",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "26384825",
-      "name": "destination",
-      "font_class": "destination",
-      "unicode": "e678",
-      "unicode_decimal": 59000
-    },
-    {
-      "icon_id": "26384826",
-      "name": "origin",
-      "font_class": "origin",
-      "unicode": "e679",
-      "unicode_decimal": 59001
-    },
-    {
-      "icon_id": "22132762",
-      "name": "state_e",
-      "font_class": "state_e",
-      "unicode": "e624",
-      "unicode_decimal": 58916
-    },
-    {
-      "icon_id": "22132763",
-      "name": "state_f",
-      "font_class": "state_f",
-      "unicode": "e625",
-      "unicode_decimal": 58917
-    },
-    {
-      "icon_id": "22132764",
-      "name": "state_s",
-      "font_class": "state_s",
-      "unicode": "e626",
-      "unicode_decimal": 58918
-    },
-    {
-      "icon_id": "26198013",
-      "name": "clear",
-      "font_class": "clear",
-      "unicode": "e676",
-      "unicode_decimal": 58998
-    },
-    {
-      "icon_id": "26198014",
-      "name": "cut",
-      "font_class": "cut",
-      "unicode": "e677",
-      "unicode_decimal": 58999
-    },
-    {
-      "icon_id": "26189441",
-      "name": "copy",
-      "font_class": "copy",
-      "unicode": "e675",
-      "unicode_decimal": 58997
-    },
-    {
-      "icon_id": "26077357",
-      "name": "v-m",
-      "font_class": "v-m",
-      "unicode": "e674",
-      "unicode_decimal": 58996
-    },
-    {
-      "icon_id": "26077354",
-      "name": "f-m",
-      "font_class": "f-m",
-      "unicode": "e671",
-      "unicode_decimal": 58993
-    },
-    {
-      "icon_id": "26077355",
-      "name": "v-r",
-      "font_class": "v-r",
-      "unicode": "e672",
-      "unicode_decimal": 58994
-    },
-    {
-      "icon_id": "26077356",
-      "name": "f-l",
-      "font_class": "f-l",
-      "unicode": "e673",
-      "unicode_decimal": 58995
-    },
-    {
-      "icon_id": "26077350",
-      "name": "h-l",
-      "font_class": "h-l",
-      "unicode": "e66d",
-      "unicode_decimal": 58989
-    },
-    {
-      "icon_id": "26077351",
-      "name": "h-m",
-      "font_class": "h-m",
-      "unicode": "e66e",
-      "unicode_decimal": 58990
-    },
-    {
-      "icon_id": "26077352",
-      "name": "v-l",
-      "font_class": "v-l",
-      "unicode": "e66f",
-      "unicode_decimal": 58991
-    },
-    {
-      "icon_id": "26077353",
-      "name": "h-r",
-      "font_class": "h-r",
-      "unicode": "e670",
-      "unicode_decimal": 58992
-    },
-    {
-      "icon_id": "26077297",
-      "name": "share",
-      "font_class": "share",
-      "unicode": "e66c",
-      "unicode_decimal": 58988
-    },
-    {
-      "icon_id": "26077227",
-      "name": "magnify",
-      "font_class": "magnify",
-      "unicode": "e66b",
-      "unicode_decimal": 58987
-    },
-    {
-      "icon_id": "26077202",
-      "name": "2d",
-      "font_class": "a-2d",
-      "unicode": "e669",
-      "unicode_decimal": 58985
-    },
-    {
-      "icon_id": "26077203",
-      "name": "3d",
-      "font_class": "a-3d",
-      "unicode": "e66a",
-      "unicode_decimal": 58986
-    },
-    {
-      "icon_id": "26008932",
-      "name": "left",
-      "font_class": "left",
-      "unicode": "e668",
-      "unicode_decimal": 58984
-    },
-    {
-      "icon_id": "26008166",
-      "name": "video",
-      "font_class": "video",
-      "unicode": "e667",
-      "unicode_decimal": 58983
-    },
-    {
-      "icon_id": "23786363",
-      "name": "pic",
-      "font_class": "pic",
-      "unicode": "e64e",
-      "unicode_decimal": 58958
-    },
-    {
-      "icon_id": "23773141",
-      "name": "full",
-      "font_class": "full",
-      "unicode": "e638",
-      "unicode_decimal": 58936
-    },
-    {
-      "icon_id": "23773069",
-      "name": "del",
-      "font_class": "del",
-      "unicode": "e632",
-      "unicode_decimal": 58930
-    },
-    {
-      "icon_id": "22099479",
-      "name": "link",
-      "font_class": "link",
-      "unicode": "e618",
-      "unicode_decimal": 58904
-    },
-    {
-      "icon_id": "22099480",
-      "name": "uploading",
-      "font_class": "uploading",
-      "unicode": "e619",
-      "unicode_decimal": 58905
-    },
-    {
-      "icon_id": "22099484",
-      "name": "complete",
-      "font_class": "complete",
-      "unicode": "e61b",
-      "unicode_decimal": 58907
-    },
-    {
-      "icon_id": "23773072",
-      "name": "web",
-      "font_class": "web",
-      "unicode": "e635",
-      "unicode_decimal": 58933
-    },
-    {
-      "icon_id": "23773074",
-      "name": "music",
-      "font_class": "music",
-      "unicode": "e637",
-      "unicode_decimal": 58935
-    },
-    {
-      "icon_id": "25764812",
-      "name": "element",
-      "font_class": "element",
-      "unicode": "e666",
-      "unicode_decimal": 58982
-    },
-    {
-      "icon_id": "23773068",
-      "name": "add",
-      "font_class": "add",
-      "unicode": "e631",
-      "unicode_decimal": 58929
-    },
-    {
-      "icon_id": "22099525",
-      "name": "edit",
-      "font_class": "edit",
-      "unicode": "e61f",
-      "unicode_decimal": 58911
-    },
-    {
-      "icon_id": "25713499",
-      "name": "info",
-      "font_class": "info",
-      "unicode": "e65e",
-      "unicode_decimal": 58974
-    },
-    {
-      "icon_id": "25713500",
-      "name": "transmit",
-      "font_class": "transmit",
-      "unicode": "e65f",
-      "unicode_decimal": 58975
-    },
-    {
-      "icon_id": "25713501",
-      "name": "room",
-      "font_class": "room",
-      "unicode": "e660",
-      "unicode_decimal": 58976
-    },
-    {
-      "icon_id": "25713502",
-      "name": "point",
-      "font_class": "point",
-      "unicode": "e661",
-      "unicode_decimal": 58977
-    },
-    {
-      "icon_id": "25713503",
-      "name": "bulid",
-      "font_class": "bulid",
-      "unicode": "e662",
-      "unicode_decimal": 58978
-    },
-    {
-      "icon_id": "25713504",
-      "name": "floor",
-      "font_class": "floor",
-      "unicode": "e663",
-      "unicode_decimal": 58979
-    },
-    {
-      "icon_id": "25713602",
-      "name": "pull-up",
-      "font_class": "pull-up1",
-      "unicode": "e664",
-      "unicode_decimal": 58980
-    },
-    {
-      "icon_id": "25713603",
-      "name": "pull-down",
-      "font_class": "pull-down1",
-      "unicode": "e665",
-      "unicode_decimal": 58981
-    },
-    {
-      "icon_id": "25671886",
-      "name": "checkbox",
-      "font_class": "checkbox1",
-      "unicode": "e65d",
-      "unicode_decimal": 58973
-    },
-    {
-      "icon_id": "25655073",
-      "name": "minimize",
-      "font_class": "minimize",
-      "unicode": "e65c",
-      "unicode_decimal": 58972
-    },
-    {
-      "icon_id": "25654903",
-      "name": "reset",
-      "font_class": "reset",
-      "unicode": "e65a",
-      "unicode_decimal": 58970
-    },
-    {
-      "icon_id": "25654904",
-      "name": "refresh",
-      "font_class": "refresh",
-      "unicode": "e65b",
-      "unicode_decimal": 58971
-    },
-    {
-      "icon_id": "25654199",
-      "name": "checkbox",
-      "font_class": "checkbox",
-      "unicode": "e659",
-      "unicode_decimal": 58969
-    },
-    {
-      "icon_id": "22099518",
-      "name": "pull-down",
-      "font_class": "pull-down",
-      "unicode": "e61d",
-      "unicode_decimal": 58909
-    },
-    {
-      "icon_id": "22099519",
-      "name": "pull-up",
-      "font_class": "pull-up",
-      "unicode": "e61e",
-      "unicode_decimal": 58910
-    },
-    {
-      "icon_id": "25633777",
-      "name": "show_pic_s",
-      "font_class": "show_pic_s",
-      "unicode": "e658",
-      "unicode_decimal": 58968
-    },
-    {
-      "icon_id": "25633765",
-      "name": "show_pic_n",
-      "font_class": "show_pic_n",
-      "unicode": "e650",
-      "unicode_decimal": 58960
-    },
-    {
-      "icon_id": "25633715",
-      "name": "show_dot_s",
-      "font_class": "show_dot_s",
-      "unicode": "e64f",
-      "unicode_decimal": 58959
-    },
-    {
-      "icon_id": "25633717",
-      "name": "show_dot_n",
-      "font_class": "show_dot_n",
-      "unicode": "e657",
-      "unicode_decimal": 58967
-    },
-    {
-      "icon_id": "25632561",
-      "name": "share",
-      "font_class": "share1",
-      "unicode": "e656",
-      "unicode_decimal": 58966
-    },
-    {
-      "icon_id": "25631621",
-      "name": "portrait",
-      "font_class": "portrait",
-      "unicode": "e655",
-      "unicode_decimal": 58965
-    },
-    {
-      "icon_id": "25631501",
-      "name": "course",
-      "font_class": "course",
-      "unicode": "e652",
-      "unicode_decimal": 58962
-    },
-    {
-      "icon_id": "25631463",
-      "name": "self-more",
-      "font_class": "self-more",
-      "unicode": "e64b",
-      "unicode_decimal": 58955
-    },
-    {
-      "icon_id": "25631464",
-      "name": "search",
-      "font_class": "search",
-      "unicode": "e64c",
-      "unicode_decimal": 58956
-    },
-    {
-      "icon_id": "25631466",
-      "name": "pull-more",
-      "font_class": "pull-more",
-      "unicode": "e64d",
-      "unicode_decimal": 58957
-    },
-    {
-      "icon_id": "25631470",
-      "name": "switch",
-      "font_class": "switch",
-      "unicode": "e651",
-      "unicode_decimal": 58961
-    },
-    {
-      "icon_id": "25631455",
-      "name": "nav-hotspot",
-      "font_class": "nav-hotspot",
-      "unicode": "e64a",
-      "unicode_decimal": 58954
-    },
-    {
-      "icon_id": "25631400",
-      "name": "nav-measure",
-      "font_class": "nav-measure",
-      "unicode": "e649",
-      "unicode_decimal": 58953
-    },
-    {
-      "icon_id": "25631122",
-      "name": "nav-edit",
-      "font_class": "nav-edit",
-      "unicode": "e642",
-      "unicode_decimal": 58946
-    },
-    {
-      "icon_id": "25631133",
-      "name": "nav-setup",
-      "font_class": "nav-setup",
-      "unicode": "e648",
-      "unicode_decimal": 58952
-    },
-    {
-      "icon_id": "23773070",
-      "name": "close",
-      "font_class": "close",
-      "unicode": "e633",
-      "unicode_decimal": 58931
-    },
-    {
-      "icon_id": "25629542",
-      "name": "nav-browse",
-      "font_class": "nav-browse",
-      "unicode": "e63d",
-      "unicode_decimal": 58941
-    },
-    {
-      "icon_id": "25629543",
-      "name": "nav-correct",
-      "font_class": "nav-correct",
-      "unicode": "e63e",
-      "unicode_decimal": 58942
-    },
-    {
-      "icon_id": "25629544",
-      "name": "nav_data-setup",
-      "font_class": "nav_data-setup",
-      "unicode": "e63f",
-      "unicode_decimal": 58943
-    },
-    {
-      "icon_id": "25629546",
-      "name": "nav-coord",
-      "font_class": "nav-coord",
-      "unicode": "e641",
-      "unicode_decimal": 58945
-    },
-    {
-      "icon_id": "25629548",
-      "name": "nav-geography",
-      "font_class": "nav-geography",
-      "unicode": "e643",
-      "unicode_decimal": 58947
-    },
-    {
-      "icon_id": "25629549",
-      "name": "nav-space",
-      "font_class": "nav-space",
-      "unicode": "e644",
-      "unicode_decimal": 58948
-    },
-    {
-      "icon_id": "25629550",
-      "name": "nav-download",
-      "font_class": "nav-download",
-      "unicode": "e645",
-      "unicode_decimal": 58949
-    },
-    {
-      "icon_id": "25629551",
-      "name": "nav-data",
-      "font_class": "nav-data",
-      "unicode": "e646",
-      "unicode_decimal": 58950
-    },
-    {
-      "icon_id": "25629552",
-      "name": "nav-house",
-      "font_class": "nav-house",
-      "unicode": "e647",
-      "unicode_decimal": 58951
-    },
-    {
-      "icon_id": "22930372",
-      "name": "eye-s",
-      "font_class": "eye-s",
-      "unicode": "e653",
-      "unicode_decimal": 58963
-    },
-    {
-      "icon_id": "22930373",
-      "name": "eye-n",
-      "font_class": "eye-n",
-      "unicode": "e654",
-      "unicode_decimal": 58964
-    }
-  ]
-}

packages/components/index.ts

@@ -1,3 +1 @@
-export * from './audio'
-export * from './icon'
-export * from './button'
+export * from './basic'

packages/components/input/src/checkbox.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="input checkbox" :style="{ width, height }" :class="{ disabled }">
-        <input :disabled="disabled" :id="id" type="checkbox" class="replace-input" :checked="props.modelValue" @input="ev => emit('update:modelValue', ev.target.checked)" />
-        <span class="replace">
-            <icon :type="props.modelValue ? 'checkbox' : 'nor'" :size="width > height ? height : width" />
-        </span>
-    </div>
-    <label class="label" v-if="props.label" :for="id">
-        {{ props.label }}
-    </label>
-</template>
-
-<script setup lang="ts">
-import icon from '../icon'
-import { checkboxPropsDesc } from './state'
-import { randomId } from '../../utils'
-import { defineProps, defineEmits } from 'vue'
-const props = defineProps(checkboxPropsDesc)
-const emit = defineEmits(['update:modelValue'])
-const id = randomId(4)
-</script>

playground/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, VNode } from 'vue'
-import { UIAudio, UIIcon } from '@kankan/components'
+import { UIAudio, UIIcon, UIButton } from '@kankan/components'
 // import { buildProps } from '@kankan/utils';
 // import { h } from 'vue';
 // import * as KanKanSDK from '@kankan/sdk';
@@ -50,7 +50,9 @@ onMounted(async () => {
 
 <template>
     <div id="scene">
-        <KKAudio src="http://samplelib.com/lib/preview/mp3/sample-3s.mp3" />
+        <UIAudio src="http://samplelib.com/lib/preview/mp3/sample-3s.mp3" />
+        <UIButton>djdjddd</UIButton>
+        <UIIcon type="checkbox" :size="129" />
     </div>
 </template>