feat: 新增 input-adornment 组件 (#962)

* feat: 新增 input-adornment 组件 * feat: update common
Tencent · Jun 10, 2022 · 8330d9b · 8330d9b
1 parent ab7380d
commit 8330d9b
Show file tree

Hide file tree

Showing 24 changed files with 365 additions and 155 deletions.
diff --git a/examples/input-adornment/demos/select.vue b/examples/input-adornment/demos/select.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="tdesign-demo-block-column" style="max-width: 500px">
+    <t-input-adornment :prepend="protocolSelect">
+      <t-input placeholder="请输入内容" />
+    </t-input-adornment>
+
+    <t-input-adornment :append="tldSelect">
+      <t-tag-input placeholder="请输入内容" />
+    </t-input-adornment>
+
+    <t-input-adornment :prepend="protocolSelect" :append="tldSelect">
+      <t-select
+        :options="['tencent', 'qq', 'cloud.tencent'].map((value) => ({ label: value, value }))"
+        defaultValue="tencent"
+      />
+    </t-input-adornment>
+  </div>
+</template>
+
+<script lang="jsx">
+export default {
+  data() {
+    return {
+      protocolSelect: () => (
+        <t-select
+          bordered={false}
+          autoWidth
+          options={['http://', 'https://'].map((value) => ({ label: value, value }))}
+          defaultValue="http://"
+        />
+      ),
+      tldSelect: () => (
+        <t-select
+          bordered={false}
+          autoWidth
+          options={['.com', '.cn', '.net', '.org'].map((value) => ({ label: value, value }))}
+          defaultValue=".cn"
+        />
+      ),
+    };
+  },
+};
+</script>
diff --git a/examples/input-adornment/demos/text.vue b/examples/input-adornment/demos/text.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="tdesign-demo-block-column" style="max-width: 500px">
+    <t-input-adornment prepend="http://">
+      <t-input placeholder="请输入内容" />
+    </t-input-adornment>
+
+    <t-input-adornment append=".com">
+      <t-tag-input placeholder="请输入内容" />
+    </t-input-adornment>
+
+    <t-input-adornment prepend="http://" append=".com">
+      <t-input placeholder="请输入内容" />
+    </t-input-adornment>
+  </div>
+</template>
diff --git a/examples/input-adornment/input-adornment.en-US.md b/examples/input-adornment/input-adornment.en-US.md
@@ -0,0 +1,10 @@
+:: BASE_DOC ::
+
+## API
+
+### InputAdornment Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+append | String / Slot / Function | - | The suffix decoration。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+prepend | String / Slot / Function | - | The prefix decoration。Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
diff --git a/examples/input-adornment/input-adornment.md b/examples/input-adornment/input-adornment.md
@@ -0,0 +1,10 @@
+:: BASE_DOC ::
+
+## API
+
+### InputAdornment Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+append | String / Slot / Function | - | 后缀装饰。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+prepend | String / Slot / Function | - | 前缀装饰。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
diff --git a/examples/input/demos/addon.vue b/examples/input/demos/addon.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="tdesign-demo-block-column" style="max-width: 500px">
-    <t-addon prepend="http://">
+    <t-input-adornment prepend="http://">
       <t-input placeholder="请输入内容" />
-    </t-addon>
+    </t-input-adornment>
 
-    <t-addon append=".com">
+    <t-input-adornment append=".com">
       <t-input placeholder="请输入内容" />
-    </t-addon>
+    </t-input-adornment>
 
-    <t-addon prepend="http://" append=".com">
+    <t-input-adornment prepend="http://" append=".com">
       <t-input placeholder="请输入内容" />
-    </t-addon>
+    </t-input-adornment>
   </div>
 </template>
diff --git a/examples/tree/demos/controlled.vue b/examples/tree/demos/controlled.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="tdesign-demo-block-column-large">
     <div class="tdesign-demo-block-column">
-      <t-addon prepend="checked:">
-        <t-input :value="allChecked"/>
-      </t-addon>
-      <t-addon prepend="expanded:">
-        <t-input :value="allExpanded"/>
-      </t-addon>
-      <t-addon prepend="actived:">
-        <t-input :value="allActived"/>
-      </t-addon>
+      <t-input-adornment prepend="checked:">
+        <t-input :value="allChecked" />
+      </t-input-adornment>
+      <t-input-adornment prepend="expanded:">
+        <t-input :value="allExpanded" />
+      </t-input-adornment>
+      <t-input-adornment prepend="actived:">
+        <t-input :value="allActived" />
+      </t-input-adornment>
     </div>
 
     <t-tree
@@ -38,72 +38,99 @@ export default {
       checked: ['1.1.1.1', '1.1.1.2'],
       expanded: ['1', '1.1', '1.1.1', '2'],
       actived: ['2'],
-      items: [{
-        value: '1',
-        label: '1',
-        children: [{
-          value: '1.1',
-          label: '1.1',
-          children: [{
-            value: '1.1.1',
-            label: '1.1.1',
-            children: [{
-              value: '1.1.1.1',
-              label: '1.1.1.1',
-            }, {
-              value: '1.1.1.2',
-              label: '1.1.1.2',
-            }],
-          }, {
-            value: '1.1.2',
-            label: '1.1.2',
-            children: [{
-              value: '1.1.2.1',
-              label: '1.1.2.1',
-            }, {
-              value: '1.1.2.2',
-              label: '1.1.2.2',
-            }],
-          }],
-        }, {
-          value: '1.2',
-          label: '1.2',
-          children: [{
-            value: '1.2.1',
-            label: '1.2.1',
-            children: [{
-              value: '1.2.1.1',
-              label: '1.2.1.1',
-            }, {
-              value: '1.2.1.2',
-              label: '1.2.1.2',
-            }],
-          }, {
-            value: '1.2.2',
-            label: '1.2.2',
-            children: [{
-              value: '1.2.2.1',
-              label: '1.2.2.1',
-            }, {
-              value: '1.2.2.2',
-              label: '1.2.2.2',
-            }],
-          }],
-        }],
-      }, {
-        value: '2',
-        label: '2 这个节点不允许展开, 不允许激活',
-        checkable: false,
-        children: [{
-          value: '2.1',
-          label: '2.1 这个节点不允许选中',
+      items: [
+        {
+          value: '1',
+          label: '1',
+          children: [
+            {
+              value: '1.1',
+              label: '1.1',
+              children: [
+                {
+                  value: '1.1.1',
+                  label: '1.1.1',
+                  children: [
+                    {
+                      value: '1.1.1.1',
+                      label: '1.1.1.1',
+                    },
+                    {
+                      value: '1.1.1.2',
+                      label: '1.1.1.2',
+                    },
+                  ],
+                },
+                {
+                  value: '1.1.2',
+                  label: '1.1.2',
+                  children: [
+                    {
+                      value: '1.1.2.1',
+                      label: '1.1.2.1',
+                    },
+                    {
+                      value: '1.1.2.2',
+                      label: '1.1.2.2',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              value: '1.2',
+              label: '1.2',
+              children: [
+                {
+                  value: '1.2.1',
+                  label: '1.2.1',
+                  children: [
+                    {
+                      value: '1.2.1.1',
+                      label: '1.2.1.1',
+                    },
+                    {
+                      value: '1.2.1.2',
+                      label: '1.2.1.2',
+                    },
+                  ],
+                },
+                {
+                  value: '1.2.2',
+                  label: '1.2.2',
+                  children: [
+                    {
+                      value: '1.2.2.1',
+                      label: '1.2.2.1',
+                    },
+                    {
+                      value: '1.2.2.2',
+                      label: '1.2.2.2',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: '2',
+          label: '2 这个节点不允许展开, 不允许激活',
           checkable: false,
-        }, {
-          value: '2.2',
-          label: '2.2',
-          checkable: false,
-        }],
-      }],
+          children: [
+            {
+              value: '2.1',
+              label: '2.1 这个节点不允许选中',
+              checkable: false,
+            },
+            {
+              value: '2.2',
+              label: '2.2',
+              checkable: false,
+            },
+          ],
+        },
+      ],
     };
   },
   computed: {
@@ -135,19 +162,19 @@ export default {
     },
     onChange(vals, context) {
       console.info('onChange:', vals, context);
-      const checked = vals.filter((val) => (val !== '2.1'));
+      const checked = vals.filter((val) => val !== '2.1');
       console.info('节点 2.1 不允许选中');
       this.checked = checked;
     },
     onExpand(vals, context) {
       console.info('onExpand:', vals, context);
-      const expanded = vals.filter((val) => (val !== '2'));
+      const expanded = vals.filter((val) => val !== '2');
       console.info('节点 2 不允许展开');
       this.expanded = expanded;
     },
     onActive(vals, context) {
       console.info('onActive:', vals, context);
-      const actived = vals.filter((val) => (val !== '2'));
+      const actived = vals.filter((val) => val !== '2');
       console.info('节点 2 不允许激活');
       this.actived = actived;
     },

diff --git a/examples/tree/demos/filter.vue b/examples/tree/demos/filter.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="tdesign-demo-block-column-large">
-    <t-addon prepend="filter:">
+    <t-input-adornment prepend="filter:">
       <t-input v-model="filterText" @change="onInput" />
-    </t-addon>
+    </t-input-adornment>
 
     <t-tree :data="items" expand-on-click-node :default-expanded="expanded" :filter="filterByText" hover line />
   </div>

diff --git a/examples/tree/demos/operations.vue b/examples/tree/demos/operations.vue
@@ -14,9 +14,9 @@
       </t-form>
     </div>
     <div class="operations">
-      <t-addon prepend="filter:">
+      <t-input-adornment prepend="filter:">
         <t-input v-model="filterText" @change="onInputChange" />
-      </t-addon>
+      </t-input-adornment>
     </div>
     <t-tree
       :data="items"

diff --git a/examples/tree/demos/performance.vue b/examples/tree/demos/performance.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="tdesign-tree-demo tdesign-demo-performance">
     <div class="operations">
-      <t-addon prepend="插入节点数量:">
+      <t-input-adornment prepend="插入节点数量:">
         <t-input v-model="insertCount" />
-      </t-addon>
+      </t-input-adornment>
     </div>
     <div class="operations">
       <t-button @click="append()">插入根节点</t-button>

diff --git a/examples/tree/demos/sync.vue b/examples/tree/demos/sync.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="tdesign-demo-block-column-large">
     <div class="tdesign-demo-block-column">
-      <t-addon prepend="checked:">
+      <t-input-adornment prepend="checked:">
         <t-input :value="allChecked" @change="onAllCheckedInput" />
-      </t-addon>
-      <t-addon prepend="expanded:">
+      </t-input-adornment>
+      <t-input-adornment prepend="expanded:">
         <t-input :value="allExpanded" @change="onAllExpandedInput" />
-      </t-addon>
-      <t-addon prepend="actived:">
+      </t-input-adornment>
+      <t-input-adornment prepend="actived:">
         <t-input :value="allActived" @change="onAllActivedInput" />
-      </t-addon>
+      </t-input-adornment>
     </div>
     <t-tree
       :data="items"

diff --git a/examples/tree/demos/vscroll.vue b/examples/tree/demos/vscroll.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="tdesign-tree-demo tdesign-demo-vscroll">
     <div class="operations">
-      <t-addon prepend="插入节点数量:">
+      <t-input-adornment prepend="插入节点数量:">
         <t-input v-model="insertCount" />
-      </t-addon>
+      </t-input-adornment>
     </div>
     <div class="operations">
       <t-button @click="append()">插入根节点</t-button>