Merge pull request #43 from pengYYYYY/fix/select/defaultplaceholder

fix: select defult placeholder
Tencent · Dec 21, 2021 · 21bfb2c · 21bfb2c
2 parents ac30dea + 1c38575
commit 21bfb2c
Show file tree

Hide file tree

Showing 15 changed files with 232 additions and 180 deletions.
diff --git a/examples/form/demos/validator-status.vue b/examples/form/demos/validator-status.vue
@@ -15,48 +15,48 @@
       @submit="onSubmit"
       :statusIcon="true"
     >
-      <t-form-item label="失败" help="这是校验通过后的提示信息" name='fail'>
+      <t-form-item label="失败" help="这是校验通过后的提示信息" name="fail">
         <t-input v-model="formData.fail"></t-input>
       </t-form-item>
-      <t-form-item label="警告" name='warning' successBorder>
+      <t-form-item label="警告" name="warning" successBorder>
         <t-input v-model="formData.warning"></t-input>
       </t-form-item>
-      <t-form-item label="成功" name='success'>
+      <t-form-item label="成功" name="success">
         <t-input v-model="formData.success"></t-input>
       </t-form-item>
-      <t-form-item label="失败" name='failB' :statusIcon="false">
+      <t-form-item label="失败" name="failB" :statusIcon="false">
         <t-input v-model="formData.failB" placeholder="隐藏状态图标"></t-input>
       </t-form-item>
-      <t-form-item label="警告" name='warningB'>
+      <t-form-item label="警告" name="warningB">
         <t-input v-model="formData.warningB"></t-input>
       </t-form-item>
-      <t-form-item label="加载中" name='loading'>
+      <t-form-item label="加载中" name="loading">
         <t-input v-model="formData.loading" placeholder="正在校验中，请稍等"></t-input>
         <template #statusIcon>
-          <div style="width:24px; display:flex; justify-content: center">
+          <div style="width: 24px; display: flex; justify-content: center">
             <t-loading slot="statusIcon" size="small"></t-loading>
           </div>
         </template>
       </t-form-item>
-      <t-form-item v-for="(item, index) in addlist" :key="item.id" label="新增" :name='item.name'>
+      <t-form-item v-for="(item, index) in addlist" :key="item.id" label="新增" :name="item.name">
         <t-input v-model="formData[item.name]"></t-input>
         <t-button
           v-if="item.id === 0 || item.id === lastAddItem - 1"
           @click="addItem"
           slot="statusIcon"
           variant="dashed"
         >
-          <icon name='add' size="16px" style="color: #0004"/>
+          <icon name="add" size="16px" style="color: #0004" />
         </t-button>
         <t-button v-if="item.id > 0" @click="removeItem(item, index)" slot="statusIcon" variant="dashed">
-          <icon name='remove' size="16px" style="color: #0004"/>
+          <icon name="remove" size="16px" style="color: #0004" />
         </t-button>
       </t-form-item>
-      <t-form-item label="帮助" help="自定义帮助图标" :statusIcon="getStatusIcon" name='help'>
+      <t-form-item label="帮助" help="自定义帮助图标" :statusIcon="getStatusIcon" name="help">
         <t-input v-model="formData.help"></t-input>
         <!-- <t-icon slot="statusIcon" name='help-circle' size="24px" style="color: #0006"/> -->
       </t-form-item>
-      <t-form-item :statusIcon="false"  style="padding-top: 8px">
+      <t-form-item :statusIcon="false" style="padding-top: 8px">
         <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
         <t-button theme="default" variant="base" type="reset">重置</t-button>
       </t-form-item>
@@ -85,25 +85,13 @@ export default {
     return {
       formData: { ...INITIAL_DATA },
       rules: {
-        fail: [
-          { required: true, message: '必填', type: 'error' },
-        ],
-        warning: [
-          { required: true, message: '必填', type: 'warning' },
-        ],
-        success: [
-          { validator: () => true },
-        ],
-        failB: [
-          { required: true, message: '必填', type: 'error' },
-        ],
-        warningB: [
-          { required: true, message: '必填', type: 'warning' },
-        ],
+        fail: [{ required: true, message: '必填', type: 'error' }],
+        warning: [{ required: true, message: '必填', type: 'warning' }],
+        success: [{ validator: () => true }],
+        failB: [{ required: true, message: '必填', type: 'error' }],
+        warningB: [{ required: true, message: '必填', type: 'warning' }],
       },
-      addlist: [
-        { id: 0, name: 'add0' },
-      ],
+      addlist: [{ id: 0, name: 'add0' }],
       lastAddItem: 1,
     };
   },
@@ -132,9 +120,8 @@ export default {
         this.$message.warning(firstError);
       }
     },
-    getStatusIcon(h) {
-      console.log(h);
-      return <Icon name='help-circle' size="24px" style="color: #0006"/>;
+    getStatusIcon() {
+      return <Icon name="help-circle" size="16px" style="color: #0006" />;
     },
   },
 };

diff --git a/site/src/App.vue b/site/src/App.vue
@@ -1,24 +1,3 @@
 <template>
   <router-view />
 </template>
-
-<style lang="less">
-.action-online {
-  width: 32px;
-  height: 32px;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  transition: all 0.2s linear;
-  cursor: pointer;
-  border-radius: 3px;
-  color: var(--text-secondary);
-
-  &:hover {
-    color: var(--text-primary);
-    background-color: var(--bg-color-demo-hover, rgb(243, 243, 243));
-  }
-}
-</style>
diff --git a/site/src/components/codesandbox/index.vue b/site/src/components/codesandbox/index.vue
@@ -23,7 +23,29 @@
 import pkg from '@/package.json';
 import packageJSON from './package.json';
 import mainJsContent from './main.js?raw';
-import styleContent from './index.css?raw';
+
+const styleContent = `
+/* 竖排展示 demo 行间距 16px */
+.tdesign-demo-block-column {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+}
+
+/* 竖排展示 demo 行间距 32px */
+.tdesign-demo-block-column-large {
+  display: flex;
+  flex-direction: column;
+  row-gap: 32px;
+}
+
+/* 横排排展示 demo 列间距 16px */
+.tdesign-demo-block-row {
+  display: flex;
+  column-gap: 16px;
+  align-items: center;
+}
+`;
 
 packageJSON.dependencies['tdesign-vue'] = pkg.version;
 packageJSON.dependencies['tdesign-icons-vue'] = pkg.dependencies['tdesign-icons-vue'];
@@ -36,7 +58,7 @@ function getDemoContent(demoContent) {
 }
 
 export default {
-  name: "code-sandbox",
+  name: 'code-sandbox',
   props: {
     code: String,
     demoName: String,
@@ -90,3 +112,24 @@ export default {
   },
 };
 </script>
+
+<style lang="less">
+.action-online {
+  width: 32px;
+  height: 32px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  transition: all 0.2s linear;
+  cursor: pointer;
+  border-radius: 3px;
+  color: var(--text-secondary);
+
+  &:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-color-demo-hover, rgb(243, 243, 243));
+  }
+}
+</style>
diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -45,7 +45,7 @@ export default (Vue as VueConstructor<InputInstance>).extend({
         disabled: this.disabled,
         readonly: this.readonly,
         autocomplete: this.autocomplete,
-        placeholder: this.placeholder || undefined,
+        placeholder: this.placeholder || '请输入',
         maxlength: this.maxlength,
         name: this.name || undefined,
         type: this.renderType,
@@ -76,7 +76,7 @@ export default (Vue as VueConstructor<InputInstance>).extend({
       keypress: this.handleKeypress,
       // input的change事件是失去焦点或者keydown的时候执行。这与api定义的change不符，所以不做任何变化。
       // eslint-disable-next-line @typescript-eslint/no-empty-function
-      change: () => { },
+      change: () => {},
     });
 
     const wrapperAttrs = omit(this.$attrs, Object.keys(this.inputAttrs));
@@ -111,8 +111,8 @@ export default (Vue as VueConstructor<InputInstance>).extend({
     return (
       <div
         class={classes}
-        onMouseenter={() => this.mouseEvent(true) }
-        onMouseleave={() => this.mouseEvent(false) }
+        onMouseenter={() => this.mouseEvent(true)}
+        onMouseleave={() => this.mouseEvent(false)}
         {...{ attrs: wrapperAttrs, on: wrapperEvents }}
       >
         {prefixIcon ? <span class={`${name}__prefix`}>{prefixIcon}</span> : null}
@@ -124,23 +124,17 @@ export default (Vue as VueConstructor<InputInstance>).extend({
           onInput={this.handleInput}
           onCompositionend={this.onCompositionend}
         />
-        {
-          suffixIcon
-            ? <span class={[`${name}__suffix`, { [`${name}__clear`]: this.showClear }]}>{suffixIcon}</span>
-            : null
-        }
+        {suffixIcon ? (
+          <span class={[`${name}__suffix`, { [`${name}__clear`]: this.showClear }]}>{suffixIcon}</span>
+        ) : null}
       </div>
     );
   },
   methods: {
     mouseEvent(v: boolean) {
       this.isHover = v;
     },
-    renderIcon(
-      h: CreateElement,
-      icon: string | Function | undefined,
-      iconType: 'prefix-icon' | 'suffix-icon',
-    ) {
+    renderIcon(h: CreateElement, icon: string | Function | undefined, iconType: 'prefix-icon' | 'suffix-icon') {
       if (typeof icon === 'function') {
         return icon(h);
       }

diff --git a/src/steps/props.ts b/src/steps/props.ts
@@ -20,7 +20,6 @@ export default {
   /** 已废弃。步骤条方向，有两种：横向和纵向 */
   direction: {
     type: String as PropType<TdStepsProps['direction']>,
-    default: 'horizontal' as TdStepsProps['direction'],
     validator(val: TdStepsProps['direction']): boolean {
       return ['horizontal', 'vertical'].includes(val);
     },

diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx
@@ -6,7 +6,12 @@ import { TimeIcon as TIconTime } from 'tdesign-icons-vue';
 import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { TimePickerConfig } from '../config-provider/config-receiver';
 import {
-  TimePickerInstance, TimePickerPanelInstance, TimeInputEvent, InputTime, TimeInputType, EPickerCols,
+  TimePickerInstance,
+  TimePickerPanelInstance,
+  TimeInputEvent,
+  InputTime,
+  TimeInputType,
+  EPickerCols,
 } from './interface';
 import TPopup, { PopupVisibleChangeContext } from '../popup';
 import { prefix } from '../config';
@@ -68,13 +73,16 @@ export default mixins(getConfigReceiverMixins<TimePickerInstance, TimePickerConf
       } = this;
       if (time) {
         return [dayjs(time, this.format)];
-      } if (this.steps.filter((step) => step !== 1).length < 1) {
+      }
+      if (this.steps.filter((step) => step !== 1).length < 1) {
         return [dayjs()];
-      } return [dayjs().hour(0).minute(0).second(0)];
+      }
+      return [dayjs().hour(0).minute(0).second(0)];
     },
     textClassName(): string {
-      const isDefault = (this.inputTime as any)
-        .some((item: InputTime) => !!item.hour && !!item.minute && !!item.second);
+      const isDefault = (this.inputTime as any).some(
+        (item: InputTime) => !!item.hour && !!item.minute && !!item.second,
+      );
       return isDefault ? '' : `${name}__group-text`;
     },
   },
@@ -131,13 +139,19 @@ export default mixins(getConfigReceiverMixins<TimePickerInstance, TimePickerConf
     // @blur
     onBlurDefault(e: Event, trigger: TimeInputType, index: number, input: number) {
       this.$emit('blur', {
-        trigger, input, value: this.time.format(this.format), e,
+        trigger,
+        input,
+        value: this.time.format(this.format),
+        e,
       });
     },
     // @focus
     onFocusDefault(e: Event, trigger: TimeInputType, index: number, input: number) {
       this.$emit('focus', {
-        trigger, input, value: this.time.format(this.format), e,
+        trigger,
+        input,
+        value: this.time.format(this.format),
+        e,
       });
     },
     // 面板展示隐藏
@@ -275,7 +289,7 @@ export default mixins(getConfigReceiverMixins<TimePickerInstance, TimePickerConf
       };
     },
     // 清除选中
-    clear(context: {e: MouseEvent}) {
+    clear(context: { e: MouseEvent }) {
       const { e } = context;
       this.time = undefined;
       this.needClear = true;
@@ -298,6 +312,7 @@ export default mixins(getConfigReceiverMixins<TimePickerInstance, TimePickerConf
             onClear={this.clear}
             clearable={this.clearable}
             readonly
+            placeholder=" "
             value={this.time ? ' ' : undefined}
             class={this.isShowPanel ? `${prefix}-is-focused` : ''}
           >