feat(select-input): init select-input

examples/select-input/demos/autocomplete.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <t-select-input
+      :value="selectValue"
+      :popup-visible="popupVisible"
+      placeholder="请输入任意关键词"
+      allow-input
+      clearable
+      style="width: 300px"
+      @input-change="onInputChange"
+      @popup-visible-change="onPopupVisibleChange"
+    >
+      <template #panel>
+        <ul class="tdesign-demo__selet-input-ul-autocomplete">
+          <li v-for="item in options" :key="item" @click="() => onOptionClick(item)">
+            <img src="/favicon.ico" /> {{ item }}
+          </li>
+        </ul>
+      </template>
+      <template #suffixIcon><search-icon /></template>
+    </t-select-input>
+  </div>
+</template>
+<script>
+import { SearchIcon } from 'tdesign-icons-vue';
+
+export default {
+  components: {
+    SearchIcon,
+  },
+  data() {
+    return {
+      selectValue: '',
+      popupVisible: false,
+      options: ['Student A', 'Student B', 'Student C', 'Student D', 'Student E', 'Student F'],
+    };
+  },
+  methods: {
+    onOptionClick(item) {
+      this.selectValue = item;
+      this.popupVisible = false;
+    },
+    onInputChange(keyword) {
+      this.selectValue = keyword;
+      this.options = new Array(5).fill(null).map((t, index) => `${keyword} Student ${index}`);
+    },
+    onPopupVisibleChange(val) {
+      this.popupVisible = val;
+    },
+  },
+};
+</script>
+<style>
+.tdesign-demo__selet-input-ul-autocomplete,
+.tdesign-demo__selet-input-ul-autocomplete > li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tdesign-demo__selet-input-ul-autocomplete > li {
+  line-height: 40px;
+  min-width: 200px;
+  padding: 0 8px;
+}
+
+.tdesign-demo__selet-input-ul-autocomplete > li:hover {
+  background-color: var(--td-bg-color-container-hover);
+}
+
+.tdesign-demo__selet-input-ul-autocomplete > li > img {
+  max-width: 20px;
+  max-height: 20px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+</style>

examples/select-input/demos/borderless-multiple.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="tdesign-demo__select-input-multiple" style="width: 100%">
+    <t-select-input
+      :value="value"
+      :min-collapsed-num="1"
+      borderless
+      allow-input
+      placeholder="select frameworks"
+      clearable
+      multiple
+      @tag-change="onTagChange"
+    >
+      <template #panel>
+        <t-checkbox-group
+          :value="checkboxValue"
+          :options="options"
+          class="tdesign-demo__pannel-options-multiple-borderless"
+          @change="onCheckedChange"
+        />
+      </template>
+      <template #suffixIcon>
+        <chevron-down-icon />
+      </template>
+    </t-select-input>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style>
+.tdesign-demo__pannel-options-multiple-borderless {
+  width: 100%;
+}
+.tdesign-demo__pannel-options-multiple-borderless .t-checkbox {
+  display: block;
+  margin: 12px;
+}
+</style>

examples/select-input/demos/borderless.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <t-select-input
+      :value="selectValue"
+      :popup-visible="popupVisible"
+      :suffix-icon="suffixIconRender"
+      placeholder="Please Select"
+      borderless
+      clearable
+      @popup-visible-change="onPopupVisibleChange"
+      @clear="onClear"
+    >
+      <template #panel>
+        <ul class="tdesign-demo__selet-input-ul-borderless">
+          <li v-for="item in options" :key="item.value" @click="() => onOptionClick(item)">
+            <img src="/favicon.ico" /> {{ item.label }}
+          </li>
+        </ul>
+      </template>
+    </t-select-input>
+  </div>
+</template>
+<script lang="jsx">
+export default {};
+</script>
+<style>
+.tdesign-demo__selet-input-ul-borderless,
+.tdesign-demo__selet-input-ul-borderless > li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tdesign-demo__selet-input-ul-borderless > li {
+  line-height: 40px;
+  min-width: 200px;
+  padding: 0 8px;
+}
+
+.tdesign-demo__selet-input-ul-borderless > li:hover {
+  background-color: var(--td-bg-color-container-hover);
+}
+
+.tdesign-demo__selet-input-ul-borderless > li > img {
+  max-width: 20px;
+  max-height: 20px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+</style>

examples/select-input/demos/collapsed-items.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="tdesign-demo__select-input-multiple" style="width: 100%">
+    <br />
+    <t-select-input
+      :value="value"
+      :min-collapsed-num="1"
+      placeholder="请选择"
+      allow-input
+      clearable
+      multiple
+      @tag-change="onTagChange"
+    >
+      <template #panel>
+        <t-checkbox-group
+          :value="checkboxValue"
+          :options="options"
+          class="tdesign-demo__pannel-options-collapsed"
+          @change="onCheckedChange"
+        />
+      </template>
+    </t-select-input>
+
+    <br /><br /><br />
+
+    <!-- 第一种方式：使用渲染函数 collapsed-items 自定义折叠项 -->
+    <t-select-input
+      :value="value"
+      :min-collapsed-num="2"
+      :collapsed-items="renderCollapsedItems"
+      placeholder="请选择"
+      allow-input
+      clearable
+      multiple
+      @tag-change="onTagChange"
+    >
+      <template #panel>
+        <t-checkbox-group
+          :value="checkboxValue"
+          :options="options"
+          class="tdesign-demo__pannel-options-collapsed"
+          @change="onCheckedChange"
+        />
+      </template>
+    </t-select-input>
+
+    <br /><br /><br />
+
+    <!-- 第二种方式：使用插槽 collapsedItems 自定义折叠项 -->
+    <t-select-input
+      :value="value"
+      :min-collapsed-num="3"
+      placeholder="请选择"
+      allow-input
+      clearable
+      multiple
+      @tag-change="onTagChange"
+    >
+      <template #collapsedItems="{ collapsedTags }">
+        <t-popup>
+          <t-tag>More({{ collapsedTags.length }})</t-tag>
+          <template #content>
+            <t-tag v-for="item in collapsedTags" :key="item" style="margin: 4px 4px 4px 0">
+              {{ item }}
+            </t-tag>
+          </template>
+        </t-popup>
+      </template>
+      <template #panel>
+        <t-checkbox-group
+          :value="checkboxValue"
+          :options="options"
+          class="tdesign-demo__pannel-options-collapsed"
+          @change="onCheckedChange"
+        />
+      </template>
+    </t-select-input>
+  </div>
+</template>
+<script lang="jsx">
+export default {};
+</script>
+<style>
+.tdesign-demo__pannel-options-collapsed {
+  width: 100%;
+}
+.tdesign-demo__pannel-options-collapsed .t-checkbox {
+  display: block;
+  margin: 12px;
+}
+</style>

examples/select-input/demos/custom-tag.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="tdesign-demo-select-input-custom-tag">
+    <!-- 单选，使用 valueDisplay 插槽定义选中的某一项的内容，也可使用同名渲染函数 props.valueDisplay -->
+    <t-select-input :value="selectValue1" placeholder="Please Select" clearable @clear="onClear">
+      <template #valueDisplay>
+        <span>
+          <img src="/favicon.ico" class="tdesign-demo-select-input__img" />
+          {{ selectValue1.label }}
+        </span>
+      </template>
+      <template #panel>
+        <ul class="tdesign-demo__selet-input-ul-custom">
+          <li v-for="item in options" :key="item.value" @click="() => onOptionClick(item)">
+            <img src="/favicon.ico" /> {{ item.label }}
+          </li>
+        </ul>
+      </template>
+    </t-select-input>
+
+    <br /><br />
+
+    <!-- 多选，第一种方式：使用 tag 插槽定义选中的某一项的内容，也可使用同名渲染函数 props.tag -->
+    <t-select-input :value="selectValue2" placeholder="Please Select" multiple @tag-change="onTagChange2">
+      <template #tag="{ value }">
+        <span>
+          <img src="https://tdesign.gtimg.com/site/avatar.jpg" class="tdesign-demo-select-input__img" />
+          {{ value }}
+        </span>
+      </template>
+      <template #panel>
+        <div class="tdesign-demo__select-empty-custom">暂无示意数据</div>
+      </template>
+    </t-select-input>
+
+    <br /><br />
+
+    <!-- 多选，第二种方式：使用 valueDisplay 插槽定义全部选中项的内容，也可使用同名渲染函数 props.valueDisplay -->
+    <t-select-input :value="selectValue3" placeholder="Please Select" multiple @tag-change="onTagChange3">
+      <template #valueDisplay="{ value, onClose }">
+        <!-- <span><img src="/favicon.ico" class="tdesign-demo-select-input__img" />{{ value }}</span> -->
+        <t-tag
+          v-for="(item, index) in value"
+          :key="item"
+          closable
+          style="margin-right: 4px"
+          @close="() => onClose(index)"
+        >
+          <img src="https://tdesign.gtimg.com/site/avatar.jpg" class="tdesign-demo-select-input__img" />
+          <span>{{ item }}</span>
+        </t-tag>
+      </template>
+      <template #panel>
+        <div class="tdesign-demo__select-empty-custom">暂无示意数据</div>
+      </template>
+    </t-select-input>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style>
+.tdesign-demo__selet-input-ul-custom,
+.tdesign-demo__selet-input-ul-custom > li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.tdesign-demo__selet-input-ul-custom > li {
+  line-height: 40px;
+  min-width: 200px;
+  padding: 0 8px;
+}
+
+.tdesign-demo__selet-input-ul-custom > li:hover {
+  background-color: var(--td-bg-color-container-hover);
+}
+
+.tdesign-demo__selet-input-ul-custom > li > img {
+  max-width: 20px;
+  max-height: 20px;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+
+.tdesign-demo-select-input-custom-tag img.tdesign-demo-select-input__img {
+  max-width: 18px;
+  max-height: 18px;
+  margin: 0;
+  vertical-align: -4px;
+  margin-right: 4px;
+}
+
+.tdesign-demo__select-empty-custom {
+  text-align: center;
+  color: var(--td-text-color-disabled);
+  line-height: 32px;
+}
+</style>