feat(tag-input): tag-input component

examples/sites/demos/apis/tag-input.js

@@ -0,0 +1,182 @@
+export default {
+  mode: ['pc', 'mobile-first'],
+  apis: [
+    {
+      name: 'tag-input',
+      type: 'component',
+      props: [
+        {
+          name: 'model-value / v-model',
+          type: 'array',
+          defaultValue: '[]',
+          desc: {
+            'zh-CN': '绑定值',
+            'en-US': '‌Binding Value'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'tag-group-size',
+          mfDemo: 'tag-group-size'
+        },
+        {
+          name: 'size',
+          type: "'medium' | 'small'",
+          defaultValue: "'medium'",
+          desc: {
+            'zh-CN': '尺寸',
+            'en-US': 'Size '
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'tag-group-size',
+          mfDemo: 'tag-group-size'
+        },
+        {
+          name: 'tag-type',
+          typeAnchorName: 'IType',
+          type: 'IType',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '显示类型',
+            'en-US': 'Display type'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'tag-effect',
+          typeAnchorName: 'IEffect',
+          type: 'IEffect',
+          defaultValue: "'light'",
+          desc: {
+            'zh-CN': '主题',
+            'en-US': 'Theme Color'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'effect',
+          mfDemo: ''
+        },
+        {
+          name: 'clearable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否可清空',
+            'en-US': 'Whether it can be cleared'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'disabled',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否禁用标签输入框',
+            'en-US': 'Whether the tag input box is disabled'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'max',
+          type: 'number',
+          defaultValue: 'Infinity',
+          desc: {
+            'zh-CN': '最大允许输入的标签数量',
+            'en-US': 'Maximum number of tags allowed to be input'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'placeholder',
+          type: 'string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '占位符',
+            'en-US': 'Placeholder'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'readonly',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否只读',
+            'en-US': 'Whether it is read-only'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'draggable',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否可拖拽',
+            'en-US': 'Whether it is draggable'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'minCollapsedNum',
+          type: 'number',
+          defaultValue: 'Infinity',
+          desc: {
+            'zh-CN': '最小折叠数量',
+            'en-US': 'Minimum collapsed number'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        },
+        {
+          name: 'separator',
+          type: 'string',
+          defaultValue: ',',
+          desc: {
+            'zh-CN': '批量输入时标签分隔符',
+            'en-US': 'Tag separator for batch input'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage',
+          mfDemo: ''
+        }
+      ],
+      events: [],
+      methods: [],
+      slots: [
+        {
+          name: 'prefix',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框前缀内容的插槽',
+            'en-US': 'Input prefix slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        },
+        {
+          name: 'suffix',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '输入框后缀内容的插槽',
+            'en-US': 'Input suffix slot'
+          },
+          mode: ['pc'],
+          pcDemo: 'basic-usage'
+        }
+      ]
+    }
+  ],
+  types: []
+}

examples/sites/demos/pc/app/tag-input/basic-usage-composition-api.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder"></tiny-tag-input>
+    <tiny-tag-input v-model="data1" :placeholder="placeholder" tag-type="info" tag-effect="light"></tiny-tag-input>
+    <tiny-tag-input v-model="data2" :placeholder="placeholder" tag-type="success" tag-effect="plain"></tiny-tag-input>
+  </div>
+</template>
+
+<script setup>
+import { TinyTagInput } from '@opentiny/vue'
+import { reactive, ref } from 'vue'
+
+const data = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const data1 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const data2 = reactive(['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'])
+const placeholder = ref('please enter a tag')
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

examples/sites/demos/pc/app/tag-input/basic-usage.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="tiny-tag-input-demo">
+    <tiny-tag-input v-model="data" :placeholder="placeholder"></tiny-tag-input>
+    <tiny-tag-input v-model="data1" :placeholder="placeholder" tag-type="info" tag-effect="light"></tiny-tag-input>
+    <tiny-tag-input v-model="data2" :placeholder="placeholder" tag-type="success" tag-effect="plain"></tiny-tag-input>
+  </div>
+</template>
+
+<script>
+import { TinyTagInput } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTagInput
+  },
+  data() {
+    return {
+      data: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      data1: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      data2: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6'],
+      maxTagCount: 3,
+      placeholder: 'please enter a tag'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tiny-tag-input-demo .tiny-tag-input {
+  margin-bottom: 20px;
+}
+</style>

examples/sites/demos/pc/app/tag-input/webdoc/tag-input.cn.md

@@ -0,0 +1,7 @@
+---
+title: TagInput 标签输入框
+---
+
+# TagInput 标签输入框
+
+<div>用于输入标签。</div>

examples/sites/demos/pc/app/tag-input/webdoc/tag-input.en.md

@@ -0,0 +1,7 @@
+---
+title: TagInput
+---
+
+# TagInput
+
+<div>Used to enter the label.</div>

examples/sites/demos/pc/app/tag-input/webdoc/tag-input.js

@@ -0,0 +1,23 @@
+export default {
+  column: '2',
+  owner: '',
+  meta: {
+    experimental: '3.29.0'
+  },
+  show: true,
+  cloud: true,
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'basic usage'
+      },
+      desc: {
+        'zh-CN': `按enter回车键添加标签，按backspace删除最后一个标签。<br>`,
+        'en-US': `Press Enter to add a tag, and press Backspace to delete the last one. <br>`
+      },
+      codeFiles: ['basic-usage.vue']
+    }
+  ]
+}

examples/sites/demos/pc/menus.js

@@ -175,6 +175,7 @@ export const cmpMenus = [
       { 'nameCn': '输入框', 'name': 'Input', 'key': 'input' },
       { 'nameCn': ' IP地址输入框', 'name': 'IpAddress', 'key': 'ip-address' },
       { 'nameCn': '数字输入框', 'name': 'Numeric', 'key': 'numeric' },
+      { 'nameCn': '标签输入框', 'name': 'TagInput', 'key': 'tag-input', 'meta': { 'experimental': '3.29.0' } },
       { 'nameCn': '弹出编辑', 'name': 'PopEditor', 'key': 'popeditor' },
       { 'nameCn': '弹出上传', 'name': 'PopUpload', 'key': 'pop-upload' },
       { 'nameCn': '单选框', 'name': 'Radio', 'key': 'radio' },

packages/modules.json

@@ -2194,6 +2194,25 @@
     "type": "template",
     "exclude": false
   },
+  "TagInput": {
+    "path": "vue/src/tag-input/index.ts",
+    "type": "component",
+    "exclude": false,
+    "mode": [
+      "mobile-first",
+      "pc"
+    ]
+  },
+  "TagInputPc": {
+    "path": "vue/src/tag-input/src/pc.vue",
+    "type": "template",
+    "exclude": false
+  },
+  "TagInputMobileFirst": {
+    "path": "vue/src/tag-input/src/mobile-first.vue",
+    "type": "template",
+    "exclude": false
+  },
   "TextPopup": {
     "path": "vue/src/text-popup/index.ts",
     "type": "component",