新增键盘事件，css类名规范，示例优化，弹出层有滚动条时优化宽度

examples/config-provider/demos/others.vue

@@ -1,96 +1,82 @@
 <template>
   <t-config-provider :globalConfig="globalConfig" class="tdesign-demo-item--locale-provider-base">
-
-    <t-form
-      :data="formData"
-      :rules="rules"
-    >
+    <t-form :data="formData" :rules="rules">
       <t-form-item label="User Name" name="username">
         <t-input
           v-model="formData.username"
-          style="width: 400px;"
+          style="width: 400px"
           placeholder="There is no required mark on the left of this input in Form"
         ></t-input>
       </t-form-item>
       <t-form-item label="Password" name="password" requiredMark>
         <t-input
           v-model="formData.password"
           type="password"
-          style="width: 400px;"
+          style="width: 400px"
           placeholder="There is required mark on the left of this input in Form"
         ></t-input>
       </t-form-item>
     </t-form>
-    <br><br>
+    <br /><br />
 
-    <t-transfer
-      :data="transferList"
-      v-model="transferTargetValue"
-      :checked.sync="transferChecked"
-      :search="true"
-    />
-    <br><br>
+    <t-transfer :data="transferList" v-model="transferTargetValue" :checked.sync="transferChecked" :search="true" />
+    <br /><br />
 
-    <t-select
-      :options="options1"
-      placeholder="see clear icon, it is configurable"
-      clearable
-      style="width: 400px;"
-    />
-    <br><br>
-    <t-select :options="[]" placeholder="select without data in Select" style="width: 400px;" />
-    <br><br>
-    <t-select placeholder="see loading text in Select" loading style="width: 400px;" />
-    <br><br>
+    <t-select :options="options1" placeholder="see clear icon, it is configurable" clearable style="width: 400px" />
+    <br /><br />
+    <t-select :options="[]" placeholder="select without data in Select" style="width: 400px" />
+    <br /><br />
+    <t-select placeholder="see loading text in Select" loading style="width: 400px" />
+    <br /><br />
 
     <!-- 观察 placeholder -->
-    <t-cascader :options="[]" style="width: 400px;" />
-    <br><br>
+    <t-cascader :options="[]" style="width: 400px" />
+    <br /><br />
     <!-- 观察空数据文本呈现 -->
-    <t-cascader :options="[]" placeholder="select without data in Cascader" style="width: 400px;" />
-    <br><br>
+    <t-cascader :options="[]" placeholder="select without data in Cascader" style="width: 400px" />
+    <br /><br />
     <!-- 观察加载文本 -->
     <!-- <t-cascader placeholder="see loading text in Cascader" loading style="width: 400px;" /> -->
     <!-- <br><br> -->
 
-    <t-tree-select :data="[]" placeholder="see empty data in TreeSelect" style="width: 400px;" />
-    <br><br>
-    <t-tree-select :data="[]" loading placeholder="see loading text in TreeSelect" style="width: 400px;" />
-    <br><br>
+    <t-tree-select :data="[]" placeholder="see empty data in TreeSelect" style="width: 400px" />
+    <br /><br />
+    <t-tree-select :data="[]" loading placeholder="see loading text in TreeSelect" style="width: 400px" />
+    <br /><br />
     <t-tree-select
       v-model="treeValue"
       :data="treeOptions"
       filterable
       placeholder="tree select"
-      style="width: 400px;"
+      style="width: 400px"
       clearable
     />
-    <br><br>
+    <br /><br />
 
-    <t-time-picker placeholder="select time" format="hh:mm:ss a" allowInput/>
-    <br><br><br>
+    <t-time-picker placeholder="select time" format="hh:mm:ss a" allowInput />
+    <br /><br /><br />
 
     <!-- 自定义关闭按钮示例 -->
     <t-tag theme="primary" closable>Fearure Tag</t-tag>
     <t-tag theme="success" closable>Fearure Tag</t-tag>
     <t-tag theme="warning" closable>Fearure Tag</t-tag>
     <t-tag theme="danger" closable>Fearure Tag</t-tag>
-    <br><br>
+    <br /><br />
 
     <!-- 数组件空数据 -->
-    <t-tree :data="[]"/>
-    <br><br>
+    <t-tree :data="[]" />
+    <br /><br />
     <!-- 数组件自定义层级图标 -->
     <t-tree :data="treeData" transition />
-    <br><br>
-    <br>
+    <br /><br />
+    <br />
     <t-steps :current="2" layout="vertical">
       <t-step-item title="Fisrt Step" content="You need to click the blue button"></t-step-item>
       <t-step-item title="Second Step" content="Fill your base information into the form"></t-step-item>
       <t-step-item title="Error Step" status="error" content="Something Wrong! Custom Error Icon!"></t-step-item>
       <t-step-item title="Last Step" content="You haven't finish this step."></t-step-item>
     </t-steps>
-    <br><br>
+    <br /><br />
   </t-config-provider>
 </template>
 
@@ -160,7 +146,7 @@ export default {
         },
         tree: {
           empty: 'Tree Empty Data',
-          folderIcon: (h) => h && <ChevronRightIcon size='18px' />,
+          folderIcon: (h) => h && <ChevronRightIcon size="18px" />,
         },
         select: {
           empty: 'Empty Data',

examples/select/demos/base.vue

@@ -58,7 +58,7 @@ export default {
   display: flex;
 }
 
-.tdesign-demo-select-base .t-select-wrap + .t-select-wrap {
+.tdesign-demo-select-base .t-select__wrap + .t-select__wrap {
   margin-left: 36px;
 }
 </style>

examples/select/demos/custom-selected.vue

@@ -46,10 +46,10 @@ export default {
         { label: '选项三', value: '3' },
         { label: '选项四', value: '4' },
         { label: '选项五', value: '5' },
-        { label: '选项六', value: '10' },
-        { label: '选项七', value: '6' },
-        { label: '选项八', value: '7' },
-        { label: '选项九', value: '8' },
+        { label: '选项六', value: '6' },
+        { label: '选项七', value: '7' },
+        { label: '选项八', value: '8' },
+        { label: '选项九', value: '9' },
       ],
     };
   },

examples/select/demos/filterable.vue

@@ -8,6 +8,7 @@
       filterable
       @blur="handleBlur"
       @focus="handleFocus"
+      @enter="handleEnter"
     />
     <t-select
       v-model="value2"
@@ -46,6 +47,9 @@ export default {
     handleFocus({ value, e }) {
       console.log('handleFocus: ', value, e);
     },
+    handleEnter({ value, e, inputValue }) {
+      console.log('handleEnter: ', value, e, inputValue);
+    },
   },
 };
 </script>

examples/select/demos/group.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="tdesign-demo-select-base">
     <!-- 方式一：直接传 options 数据，比插槽的方式更简单 -->
-    <t-select v-model="value1" :options="options" placeholder="请选择城市" />
+    <t-select v-model="value1" :options="options" placeholder="请选择" />
 
     <!-- 方式二：使用插槽节点 -->
-    <t-select v-model="value2" placeholder="请选择城市">
+    <t-select v-model="value2" placeholder="请选择">
       <t-option-group
         v-for="(list, index) in options"
         :key="index"
@@ -67,7 +67,7 @@ export default {
   display: flex;
 }
 
-.tdesign-demo-select-base .t-select-wrap + .t-select-wrap {
+.tdesign-demo-select-base .t-select__wrap + .t-select__wrap {
   margin-left: 36px;
 }
 </style>

examples/select/demos/status.vue

@@ -37,7 +37,7 @@ export default {
   display: flex;
 }
 
-.tdesign-demo-select-base .t-select-wrap + .t-select-wrap {
+.tdesign-demo-select-base .t-select__wrap + .t-select__wrap {
   margin-left: 36px;
 }
 </style>

src/popup/popup.tsx

@@ -80,10 +80,13 @@ export default Vue.extend({
       return base.concat(this.overlayClassName);
     },
     hasTrigger(): Record<typeof triggers[number], boolean> {
-      return triggers.reduce((map, trigger) => ({
-        ...map,
-        [trigger]: this.trigger.includes(trigger),
-      }), {} as any);
+      return triggers.reduce(
+        (map, trigger) => ({
+          ...map,
+          [trigger]: this.trigger.includes(trigger),
+        }),
+        {} as any,
+      );
     },
   },
   watch: {
@@ -146,16 +149,23 @@ export default Vue.extend({
       offEvents.push(on(reference, 'mouseenter', () => this.handleOpen({ trigger: 'trigger-element-hover' })));
       offEvents.push(on(reference, 'mouseleave', () => this.handleClose({ trigger: 'trigger-element-hover' })));
       offEvents.push(on(popperElm, 'mouseenter', () => this.handleOpen({ trigger: 'trigger-element-hover' }, true)));
-      offEvents.push(on(popperElm, 'mouseleave', (ev: MouseEvent) => {
-        const parent = (this as any).popup;
-        let closeParent: boolean;
-        if (parent?.visible) {
-          const parentRect = parent.$refs.popper.getBoundingClientRect();
-          // close parent if mouse isn't inside
-          closeParent = !(ev.x > parentRect.left && ev.x < parentRect.right && ev.y > parentRect.top && ev.y < parentRect.bottom);
-        }
-        this.handleClose({ trigger: 'trigger-element-hover' }, closeParent);
-      }));
+      offEvents.push(
+        on(popperElm, 'mouseleave', (ev: MouseEvent) => {
+          const parent = (this as any).popup;
+          let closeParent: boolean;
+          if (parent?.visible) {
+            const parentRect = parent.$refs.popper.getBoundingClientRect();
+            // close parent if mouse isn't inside
+            closeParent = !(
+              ev.x > parentRect.left
+              && ev.x < parentRect.right
+              && ev.y > parentRect.top
+              && ev.y < parentRect.bottom
+            );
+          }
+          this.handleClose({ trigger: 'trigger-element-hover' }, closeParent);
+        }),
+      );
     }
     if (this.hasTrigger.focus) {
       if (reference.querySelector('input,textarea')) {
@@ -299,8 +309,7 @@ export default Vue.extend({
     },
     handleDocumentClick(e: Event) {
       const popperElm = this.$refs.popper as HTMLElement;
-      if (!this.$el || this.$el.contains(e.target as Element)
-        || !popperElm || popperElm.contains(e.target as Node)) return;
+      if (!this.$el || this.$el.contains(e.target as Element) || !popperElm || popperElm.contains(e.target as Node)) return;
       this.emitPopVisible(false, { trigger: 'document' });
     },
     emitPopVisible(val: boolean, context: PopupVisibleChangeContext) {

src/select/option-group-props.ts

@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-23 10:46:16
+ * updated at 2021-12-18 19:38:26
  * */
 
 export default {

src/select/option-props.ts

@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-23 10:46:16
+ * updated at 2021-12-18 19:38:26
  * */
 
 import { TdOptionProps } from '../select/type';

src/select/option.tsx

@@ -2,6 +2,7 @@ import Vue, { VNode, VueConstructor } from 'vue';
 import { ScopedSlotReturnValue } from 'vue/types/vnode';
 import get from 'lodash/get';
 import { renderContent } from '../utils/render-tnode';
+import { scrollSelectedIntoView } from '../utils/dom';
 import { prefix } from '../config';
 import CLASSNAMES from '../utils/classnames';
 import ripple from '../utils/ripple';
@@ -40,8 +41,23 @@ export default (Vue as VueConstructor<OptionInstance>).extend({
     label() {
       this.tSelect && this.tSelect.getOptions(this);
     },
+    hovering() {
+      if (this.hovering) {
+        const timer = setTimeout(() => {
+          scrollSelectedIntoView(this.tSelect.getOverlayElm(), this.$el as HTMLElement);
+          clearTimeout(timer);
+        }, this.tSelect.popupOpenTime); // 待popup弹出后再滚动到对应位置
+      }
+    },
   },
   computed: {
+    // 键盘上下按键选中hover样式的选项
+    hovering(): boolean {
+      return this.tSelect
+        && this.tSelect.visible
+        && this.tSelect.hoverOptions[this.tSelect.hoverIndex]
+        && this.tSelect.hoverOptions[this.tSelect.hoverIndex][this.tSelect.realValue] === this.value;
+    },
     multiLimitDisabled(): boolean {
       if (this.tSelect && this.tSelect.multiple && this.tSelect.max) {
         if (
@@ -60,8 +76,8 @@ export default (Vue as VueConstructor<OptionInstance>).extend({
         {
           [CLASSNAMES.STATUS.disabled]: this.disabled || this.multiLimitDisabled,
           [CLASSNAMES.STATUS.selected]: this.selected,
-          [`${CLASSNAMES.STATUS.selected}-multiple`]: this.tSelect && this.tSelect.multiple,
           [CLASSNAMES.SIZE[this.tSelect && this.tSelect.size]]: this.tSelect && this.tSelect.size,
+          [`${prefix}-select-option__hover`]: this.hovering,
         },
       ];
     },
@@ -102,14 +118,14 @@ export default (Vue as VueConstructor<OptionInstance>).extend({
     },
   },
   methods: {
-    select(e: MouseEvent) {
+    select(e: MouseEvent | KeyboardEvent) {
       e.stopPropagation();
       if (this.disabled || this.multiLimitDisabled) {
         return false;
       }
       const parent = this.$el.parentNode as HTMLElement;
-      if (parent && parent.className.indexOf(`${selectName}-create-option`) !== -1) {
-        this.tSelect && this.tSelect.createOption(this.value);
+      if (parent && parent.className.indexOf(`${selectName}__create-option`) !== -1) {
+        this.tSelect && this.tSelect.createOption(this.value.toString());
       }
       this.tSelect && this.tSelect.onOptionClick(this.value, e);
     },
@@ -120,9 +136,9 @@ export default (Vue as VueConstructor<OptionInstance>).extend({
   mounted() {
     this.tSelect && this.tSelect.getOptions(this);
   },
-  // destroyed() {
-  //   this.tSelect && this.tSelect.destroyOptions(this);
-  // },
+  beforeDestroy() {
+    this.tSelect && this.tSelect.hasOptions && this.tSelect.destroyOptions(this);
+  },
   render(): VNode {
     const {
       classes, labelText, selected, disabled, multiLimitDisabled, show,

src/select/optionGroup.tsx

@@ -6,7 +6,7 @@ import CLASSNAMES from '../utils/classnames';
 import props from './option-group-props';
 import { ClassName } from '../common';
 
-const name = `${prefix}-option-group`;
+const name = `${prefix}-select-option-group`;
 
 export interface Select extends Vue {
   tSelect: {
@@ -37,7 +37,7 @@ export default (Vue as VueConstructor<Select>).extend({
     const children: ScopedSlotReturnValue = renderTNodeJSX(this, 'default');
     return (
       <li class={this.classes}>
-        <div class={`${name}-header`}>{ this.label }</div>
+        <div class={`${name}__header`}>{ this.label }</div>
         <ul>{children}</ul>
       </li>
     );

src/select/props.ts

@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 16:59:59
+ * updated at 2021-12-18 19:38:26
  * */
 
 import { TdSelectProps } from './type';