From ec319a68b13e5585e8d7d8fd407f8c3dd2a4880b Mon Sep 17 00:00:00 2001
From: Simon He <57086651+Simon-He95@users.noreply.github.com>
Date: Tue, 11 Jul 2023 00:01:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8A=A8=E6=80=81=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.ts                      |  13 +-
 src/ui/antDesign/index.ts         | 156 ++++++++++++------------
 src/ui/elementUI/index.ts         | 156 ++++++++++++------------
 src/ui/elementUI/inputNumber.json | 194 ++++++++++++++++++++++++++++++
 4 files changed, 358 insertions(+), 161 deletions(-)
 create mode 100644 src/ui/elementUI/inputNumber.json

diff --git a/src/index.ts b/src/index.ts
index 44728105..392cd5be 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,7 +18,10 @@ export function activate(context: vscode.ExtensionContext) {
       title: '选择你使用的UI框架',
       canPickMany: true,
     }).then((options: any) => {
-      optionsComponents = options.map((option: string) => `${option}Components`)
+      optionsComponents = options.map((option: string) => `${option}Components`).reduce((result: any, name: string) => {
+        result.push(...(UI as any)[name]())
+        return result
+      }, [])
       UiCompletions = options.reduce((result: any, option: string) =>
         Object.assign(result, (UI as any)[option]?.())
       , {} as any)
@@ -35,12 +38,8 @@ export function activate(context: vscode.ExtensionContext) {
         : UiCompletions[name].completions
     }
     const { lineText } = getSelection()!
-    if (optionsComponents && lineText?.slice(-1)[0] !== ' ') {
-      return optionsComponents.reduce((result: any, name: string) => {
-        result.push(...(UI as any)[name])
-        return result
-      }, [])
-    }
+    if (optionsComponents && lineText?.slice(-1)[0] !== ' ')
+      return optionsComponents
   }, ['"', '\'', '-', ' ', '@']))
 }
 
diff --git a/src/ui/antDesign/index.ts b/src/ui/antDesign/index.ts
index b81b15f1..6bd976dc 100644
--- a/src/ui/antDesign/index.ts
+++ b/src/ui/antDesign/index.ts
@@ -62,80 +62,82 @@ export function antDesign() {
   }, {} as any)
 }
 
-export const antDesignComponents = [
-  ['Row', '布局'],
-  ['Col', '布局'],
-  ['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
-  ['Header', '顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。'],
-  ['Sider', '侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。'],
-  ['Layout', '布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。'],
-  ['Footer', '底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。'],
-  ['Button', '按钮'],
-  ['Space', '间距'],
-  ['Anchor', '锚点'],
-  ['radio', '单选框'],
-  ['radio-group', '单选框组'],
-  ['radio-button', '按钮样式的单选组合'],
-  ['checkbox', '多选框'],
-  ['checkbox-group', '多选框组'],
-  ['checkbox-button', '按钮样式的多选组合'],
-  ['input', '输入框'],
-  ['input-number', '计数器'],
-  ['select', '选择器'],
-  ['option', '基础多选'],
-  ['option-group', '备选项进行分组展示'],
-  ['cascader', '级联选择器'],
-  ['switch', '开关'],
-  ['slider', '滑块'],
-  ['time-select', '时间选择器'],
-  ['date-picker', '日期选择器/日期时间选择器'],
-  ['upload', '上传'],
-  ['rate', '评分'],
-  ['color-picker', '颜色选择器'],
-  ['transfer', '穿梭框'],
-  ['form', '表单'],
-  ['form-item', '表单项'],
-  ['table', '表格'],
-  ['table-column', '表格项'],
-  ['tag', '标签'],
-  ['progress', '进度条'],
-  ['tree', '树形控件'],
-  ['pagination', '分页'],
-  ['badge', '标记'],
-  ['avatar', '头像'],
-  ['skeleton', '骨架屏'],
-  ['empty', '空状态'],
-  ['descriptions', '描述列表'],
-  ['descriptions-item', '描述列表项'],
-  ['result', '结果'],
-  ['statistic', '统计数值'],
-  ['alert', '警告'],
-  ['menu', '导航菜单'],
-  ['submenu', '导航子菜单'],
-  ['menu-item', '导航菜单项'],
-  ['tabs', '标签页'],
-  ['tab-pane', '标签项'],
-  ['breadcrumb', '面包屑'],
-  ['breadcrumb-item', '面包屑项'],
-  ['page-header', '页头'],
-  ['dropdown', '下拉菜单'],
-  ['dropdown-menu', '下拉菜单列表'],
-  ['dropdown-item', '下拉菜单列表项'],
-  ['steps', '步骤条'],
-  ['dialog', '对话框'],
-  ['tooltip', '文字提示'],
-  ['popover', '弹出框'],
-  ['popconfirm', '气泡确认框'],
-  ['card', '卡片'],
-  ['carousel', '走马灯'],
-  ['carousel-item', '走马灯项'],
-  ['collapse', '折叠面板'],
-  ['collapse-item', '折叠面板项'],
-  ['timeline', '时间线'],
-  ['timeline-item', '时间线项'],
-  ['divider', '分割线'],
-  ['calendar', '日历'],
-  ['image', '图片'],
-  ['backtop', '回到顶部'],
-  ['drawer', '抽屉'],
-].map(([content, detail]) => createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, detail, type: vscode.CompletionItemKind.TypeParameter }))
+export function antDesignComponents() {
+  return [
+    ['Row', '布局'],
+    ['Col', '布局'],
+    ['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
+    ['Header', '顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。'],
+    ['Sider', '侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。'],
+    ['Layout', '布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。'],
+    ['Footer', '底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。'],
+    ['Button', '按钮'],
+    ['Space', '间距'],
+    ['Anchor', '锚点'],
+    ['radio', '单选框'],
+    ['radio-group', '单选框组'],
+    ['radio-button', '按钮样式的单选组合'],
+    ['checkbox', '多选框'],
+    ['checkbox-group', '多选框组'],
+    ['checkbox-button', '按钮样式的多选组合'],
+    ['input', '输入框'],
+    ['input-number', '计数器'],
+    ['select', '选择器'],
+    ['option', '基础多选'],
+    ['option-group', '备选项进行分组展示'],
+    ['cascader', '级联选择器'],
+    ['switch', '开关'],
+    ['slider', '滑块'],
+    ['time-select', '时间选择器'],
+    ['date-picker', '日期选择器/日期时间选择器'],
+    ['upload', '上传'],
+    ['rate', '评分'],
+    ['color-picker', '颜色选择器'],
+    ['transfer', '穿梭框'],
+    ['form', '表单'],
+    ['form-item', '表单项'],
+    ['table', '表格'],
+    ['table-column', '表格项'],
+    ['tag', '标签'],
+    ['progress', '进度条'],
+    ['tree', '树形控件'],
+    ['pagination', '分页'],
+    ['badge', '标记'],
+    ['avatar', '头像'],
+    ['skeleton', '骨架屏'],
+    ['empty', '空状态'],
+    ['descriptions', '描述列表'],
+    ['descriptions-item', '描述列表项'],
+    ['result', '结果'],
+    ['statistic', '统计数值'],
+    ['alert', '警告'],
+    ['menu', '导航菜单'],
+    ['submenu', '导航子菜单'],
+    ['menu-item', '导航菜单项'],
+    ['tabs', '标签页'],
+    ['tab-pane', '标签项'],
+    ['breadcrumb', '面包屑'],
+    ['breadcrumb-item', '面包屑项'],
+    ['page-header', '页头'],
+    ['dropdown', '下拉菜单'],
+    ['dropdown-menu', '下拉菜单列表'],
+    ['dropdown-item', '下拉菜单列表项'],
+    ['steps', '步骤条'],
+    ['dialog', '对话框'],
+    ['tooltip', '文字提示'],
+    ['popover', '弹出框'],
+    ['popconfirm', '气泡确认框'],
+    ['card', '卡片'],
+    ['carousel', '走马灯'],
+    ['carousel-item', '走马灯项'],
+    ['collapse', '折叠面板'],
+    ['collapse-item', '折叠面板项'],
+    ['timeline', '时间线'],
+    ['timeline-item', '时间线项'],
+    ['divider', '分割线'],
+    ['calendar', '日历'],
+    ['image', '图片'],
+    ['backtop', '回到顶部'],
+    ['drawer', '抽屉'],
+  ].map(([content, detail]) => createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, detail, type: vscode.CompletionItemKind.TypeParameter }))
+}
diff --git a/src/ui/elementUI/index.ts b/src/ui/elementUI/index.ts
index fc995bbd..2080c442 100644
--- a/src/ui/elementUI/index.ts
+++ b/src/ui/elementUI/index.ts
@@ -88,80 +88,82 @@ export function elementUI() {
   }, {} as any)
 }
 
-export const elementUIComponents = [
-  ['el-row', '布局'],
-  ['el-col', '布局'],
-  ['el-container', '布局容器'],
-  ['el-header', '顶栏容器'],
-  ['el-aside', '侧边栏容器'],
-  ['el-main', '主要区域容器'],
-  ['el-footer', '底栏容器'],
-  ['el-button', '按钮'],
-  ['el-link', '文字链接'],
-  ['el-radio', '单选框'],
-  ['el-radio-group', '单选框组'],
-  ['el-radio-button', '按钮样式的单选组合'],
-  ['el-checkbox', '多选框'],
-  ['el-checkbox-group', '多选框组'],
-  ['el-checkbox-button', '按钮样式的多选组合'],
-  ['el-input', '输入框'],
-  ['el-input-number', '计数器'],
-  ['el-select', '选择器'],
-  ['el-option', '基础多选'],
-  ['el-option-group', '备选项进行分组展示'],
-  ['el-cascader', '级联选择器'],
-  ['el-switch', '开关'],
-  ['el-slider', '滑块'],
-  ['el-time-select', '时间选择器'],
-  ['el-date-picker', '日期选择器/日期时间选择器'],
-  ['el-upload', '上传'],
-  ['el-rate', '评分'],
-  ['el-color-picker', '颜色选择器'],
-  ['el-transfer', '穿梭框'],
-  ['el-form', '表单'],
-  ['el-form-item', '表单项'],
-  ['el-table', '表格'],
-  ['el-table-column', '表格项'],
-  ['el-tag', '标签'],
-  ['el-progress', '进度条'],
-  ['el-tree', '树形控件'],
-  ['el-pagination', '分页'],
-  ['el-badge', '标记'],
-  ['el-avatar', '头像'],
-  ['el-skeleton', '骨架屏'],
-  ['el-empty', '空状态'],
-  ['el-descriptions', '描述列表'],
-  ['el-descriptions-item', '描述列表项'],
-  ['el-result', '结果'],
-  ['el-statistic', '统计数值'],
-  ['el-alert', '警告'],
-  ['el-menu', '导航菜单'],
-  ['el-submenu', '导航子菜单'],
-  ['el-menu-item', '导航菜单项'],
-  ['el-tabs', '标签页'],
-  ['el-tab-pane', '标签项'],
-  ['el-breadcrumb', '面包屑'],
-  ['el-breadcrumb-item', '面包屑项'],
-  ['el-page-header', '页头'],
-  ['el-dropdown', '下拉菜单'],
-  ['el-dropdown-menu', '下拉菜单列表'],
-  ['el-dropdown-item', '下拉菜单列表项'],
-  ['el-steps', '步骤条'],
-  ['el-dialog', '对话框'],
-  ['el-tooltip', '文字提示'],
-  ['el-popover', '弹出框'],
-  ['el-popconfirm', '气泡确认框'],
-  ['el-card', '卡片'],
-  ['el-carousel', '走马灯'],
-  ['el-carousel-item', '走马灯项'],
-  ['el-collapse', '折叠面板'],
-  ['el-collapse-item', '折叠面板项'],
-  ['el-timeline', '时间线'],
-  ['el-timeline-item', '时间线项'],
-  ['el-divider', '分割线'],
-  ['el-calendar', '日历'],
-  ['el-image', '图片'],
-  ['el-backtop', '回到顶部'],
-  ['el-drawer', '抽屉'],
-  ['el-autocomplete', '远程搜索'],
-].map(([content, detail]) => createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, detail, type: vscode.CompletionItemKind.TypeParameter }))
+export function elementUIComponents() {
+  return [
+    ['el-row', '布局'],
+    ['el-col', '布局'],
+    ['el-container', '布局容器'],
+    ['el-header', '顶栏容器'],
+    ['el-aside', '侧边栏容器'],
+    ['el-main', '主要区域容器'],
+    ['el-footer', '底栏容器'],
+    ['el-button', '按钮'],
+    ['el-link', '文字链接'],
+    ['el-radio', '单选框'],
+    ['el-radio-group', '单选框组'],
+    ['el-radio-button', '按钮样式的单选组合'],
+    ['el-checkbox', '多选框'],
+    ['el-checkbox-group', '多选框组'],
+    ['el-checkbox-button', '按钮样式的多选组合'],
+    ['el-input', '输入框'],
+    ['el-input-number', '计数器'],
+    ['el-select', '选择器'],
+    ['el-option', '基础多选'],
+    ['el-option-group', '备选项进行分组展示'],
+    ['el-cascader', '级联选择器'],
+    ['el-switch', '开关'],
+    ['el-slider', '滑块'],
+    ['el-time-select', '时间选择器'],
+    ['el-date-picker', '日期选择器/日期时间选择器'],
+    ['el-upload', '上传'],
+    ['el-rate', '评分'],
+    ['el-color-picker', '颜色选择器'],
+    ['el-transfer', '穿梭框'],
+    ['el-form', '表单'],
+    ['el-form-item', '表单项'],
+    ['el-table', '表格'],
+    ['el-table-column', '表格项'],
+    ['el-tag', '标签'],
+    ['el-progress', '进度条'],
+    ['el-tree', '树形控件'],
+    ['el-pagination', '分页'],
+    ['el-badge', '标记'],
+    ['el-avatar', '头像'],
+    ['el-skeleton', '骨架屏'],
+    ['el-empty', '空状态'],
+    ['el-descriptions', '描述列表'],
+    ['el-descriptions-item', '描述列表项'],
+    ['el-result', '结果'],
+    ['el-statistic', '统计数值'],
+    ['el-alert', '警告'],
+    ['el-menu', '导航菜单'],
+    ['el-submenu', '导航子菜单'],
+    ['el-menu-item', '导航菜单项'],
+    ['el-tabs', '标签页'],
+    ['el-tab-pane', '标签项'],
+    ['el-breadcrumb', '面包屑'],
+    ['el-breadcrumb-item', '面包屑项'],
+    ['el-page-header', '页头'],
+    ['el-dropdown', '下拉菜单'],
+    ['el-dropdown-menu', '下拉菜单列表'],
+    ['el-dropdown-item', '下拉菜单列表项'],
+    ['el-steps', '步骤条'],
+    ['el-dialog', '对话框'],
+    ['el-tooltip', '文字提示'],
+    ['el-popover', '弹出框'],
+    ['el-popconfirm', '气泡确认框'],
+    ['el-card', '卡片'],
+    ['el-carousel', '走马灯'],
+    ['el-carousel-item', '走马灯项'],
+    ['el-collapse', '折叠面板'],
+    ['el-collapse-item', '折叠面板项'],
+    ['el-timeline', '时间线'],
+    ['el-timeline-item', '时间线项'],
+    ['el-divider', '分割线'],
+    ['el-calendar', '日历'],
+    ['el-image', '图片'],
+    ['el-backtop', '回到顶部'],
+    ['el-drawer', '抽屉'],
+    ['el-autocomplete', '远程搜索'],
+  ].map(([content, detail]) => createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, detail, type: vscode.CompletionItemKind.TypeParameter }))
+}
diff --git a/src/ui/elementUI/inputNumber.json b/src/ui/elementUI/inputNumber.json
new file mode 100644
index 00000000..9b66b7bd
--- /dev/null
+++ b/src/ui/elementUI/inputNumber.json
@@ -0,0 +1,194 @@
+{
+  "name": "ElInput",
+  "props": {
+    "type": {
+      "value": ["text", "textarea"],
+      "description": "类型",
+      "default": "text",
+      "type": "string"
+    },
+    "value": {
+      "value": "",
+      "description": "绑定值",
+      "default": "绑定值",
+      "type": "string / number"
+    },
+    "v-model": {
+      "value": "",
+      "description": "绑定值",
+      "default": "绑定值",
+      "type": "string / number"
+    },
+    "maxlength": {
+      "value": "",
+      "description": "原生属性，最大输入长度",
+      "default": "",
+      "type": "number"
+    },
+    "minlength": {
+      "value": "",
+      "description": "原生属性，最小输入长度",
+      "default": "",
+      "type": "number"
+    },
+    "show-word-limit": {
+      "value": "",
+      "description": "是否显示输入字数统计，只在 type = \"text\" 或 type = \"textarea\" 时有效",
+      "default": "false",
+      "type": "boolean"
+    },
+    "placeholder": {
+      "value": "",
+      "description": "输入框占位文本",
+      "default": "",
+      "type": "string"
+    },
+    "clearable": {
+      "value": "",
+      "description": "是否可清空",
+      "default": "false",
+      "type": "boolean"
+    },
+    "show-password": {
+      "value": "",
+      "description": "是否显示切换密码图标",
+      "default": "false",
+      "type": "boolean"
+    },
+    "disabled": {
+      "value": "",
+      "description": "禁用",
+      "default": "false",
+      "type": "boolean"
+    },
+    "size": {
+      "value": ["medium", "small", "mini"],
+      "description": "输入框头部图标",
+      "default": "",
+      "type": "string"
+    },
+    "prefix-icon": {
+      "value": "",
+      "description": "输入框头部图标",
+      "default": "",
+      "type": "string"
+    },
+    "suffix-icon": {
+      "value": "",
+      "description": "输入框尾部图标",
+      "default": "",
+      "type": "string"
+    },
+    "rows": {
+      "value": "",
+      "description": "输入框行数，只对 type=\"textarea\" 有效",
+      "default": "2",
+      "type": "number"
+    },
+    "autosize": {
+      "value": "",
+      "description": "自适应内容高度，只对 type=\"textarea\" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }",
+      "default": "false",
+      "type": "boolean / object"
+    },
+    "autocomplete": {
+      "value": ["on", "off"],
+      "description": "原生属性，自动补全",
+      "default": "off",
+      "type": "string"
+    },
+    "name": {
+      "value": "",
+      "description": "原生属性",
+      "default": "",
+      "type": "string"
+    },
+    "readonly": {
+      "value": "",
+      "description": "原生属性，是否只读",
+      "default": "false",
+      "type": "boolean"
+    },
+    "max": {
+      "value": "",
+      "description": "原生属性，设置最大值",
+      "default": "",
+      "type": "string"
+    },
+    "min": {
+      "value": "",
+      "description": "原生属性，设置最小值",
+      "default": "",
+      "type": "string"
+    },
+    "step": {
+      "value": "",
+      "description": "原生属性，设置输入字段的合法数字间隔",
+      "default": "",
+      "type": "string"
+    },
+    "resize": {
+      "value": ["none", "both", "horizontal", "vertical"],
+      "description": "控制是否能被用户缩放",
+      "default": "",
+      "type": "string"
+    },
+    "autofocus": {
+      "value": "",
+      "description": "原生属性，自动获取焦点",
+      "default": "false",
+      "type": "boolean"
+    },
+    "form": {
+      "value": "",
+      "description": "原生属性",
+      "default": "",
+      "type": "string"
+    },
+    "label": {
+      "value": "",
+      "description": "输入框关联的label文字",
+      "default": "",
+      "type": "string"
+    },
+    "tabindex": {
+      "value": ["medium", "small", "mini"],
+      "description": "输入框尺寸，只在 type!=\"textarea\" 时有效",
+      "default": "",
+      "type": "string"
+    },
+    "validate-event": {
+      "value": "",
+      "description": "输入时是否触发表单的校验",
+      "default": "true",
+      "type": "boolean"
+    }
+  },
+  "events": [
+    {
+      "name": "blur",
+      "description": "在 Input 失去焦点时触发",
+      "params": "(event: Event)"
+    },
+    {
+      "name": "focus",
+      "description": "在 Input 获得焦点时触发",
+      "params": "(event: Event)"
+    },
+    {
+      "name": "change",
+      "description": "仅在输入框失去焦点或用户按下回车时触发",
+      "params": "(value: string | number)"
+    },
+    {
+      "name": "input",
+      "description": "在 Input 值改变时触发",
+      "params": "(value: string | number)"
+    },
+    {
+      "name": "clear",
+      "description": "在点击由 clearable 属性生成的清空按钮时触发",
+      "params": ""
+    }
+  ]
+}