Merge pull request #85 from Tencent/feat/input/globalconfig

feat(input): add input config provider
Tencent · Dec 24, 2021 · 4be656a · 4be656a
2 parents d942cb3 + 60f4451
commit 4be656a
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 42 deletions.
diff --git a/examples/config-provider/config-provider.md b/examples/config-provider/config-provider.md
@@ -11,6 +11,7 @@ datePicker | Object | - | 日期选择器全局配置。TS 类型：`DatePickerC
 dialog | Object | - | 对话框全局配置。TS 类型：`DialogConfig` | N
 drawer | Object | - | 抽屉全局配置。TS 类型：`DrawerConfig` | N
 form | Object | - | 表单组件全局配置。TS 类型：`FormConfig` | N
+input | Object | - | 输入框组件全局配置。TS 类型：`InputConfig` | N
 pagination | Object | - | 分页组件全局配置。TS 类型：`PaginationConfig` | N
 popconfirm | Object | - | 气泡确认框全局配置。TS 类型：`PopconfirmConfig` | N
 select | Object | - | 选择器组件全局配置。TS 类型：`SelectConfig` | N
@@ -23,6 +24,12 @@ tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N
 treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N
 upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N
 
+### InputConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+placeholder | String | 请输入 | 占位符文本 | N
+
 ### PaginationConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传

diff --git a/examples/input/demos/base.vue b/examples/input/demos/base.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="tdesign-demo-block-column" style="max-width: 500px">
-    <t-input placeholder="请输入内容（无默认值）" />
+    <t-input />
 
-    <t-input
-      v-model="input"
-      placeholder="请输入内容（有默认值）"
-      @enter="onEnter"
-      @change="onChange"
-    />
+    <t-input v-model="input" placeholder="请输入内容（有默认值）" @enter="onEnter" @change="onChange" />
   </div>
 </template>
 <script>

diff --git a/src/config-provider/en_US_config.ts b/src/config-provider/en_US_config.ts
@@ -122,6 +122,9 @@ const GLOBAL_CONFIG_EN: GlobalConfigProvider = {
   form: {
     requiredMark: true,
   },
+  input: {
+    placeholder: '',
+  },
 };
 
 export default GLOBAL_CONFIG_EN;
diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts
@@ -2,7 +2,7 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 16:51:01
+ * updated at 2021-12-24 15:22:11
  * */
 
 import { CalendarController } from '../calendar';
@@ -34,6 +34,10 @@ export interface GlobalConfigProvider {
    * 表单组件全局配置
    */
   form?: FormConfig;
+  /**
+   * 输入框组件全局配置
+   */
+  input?: InputConfig;
   /**
    * 分页组件全局配置
    */
@@ -78,7 +82,15 @@ export interface GlobalConfigProvider {
    * 上传组件全局配置
    */
   upload?: UploadConfig;
-};
+}
+
+export interface InputConfig {
+  /**
+   * 占位符文本
+   * @default 请输入
+   */
+  placeholder?: string;
+}
 
 export interface PaginationConfig {
   /**
@@ -101,7 +113,7 @@ export interface PaginationConfig {
    * @default '共 {total} 项数据'
    */
   total?: string;
-};
+}
 
 export interface CalendarConfig {
   /**
@@ -168,7 +180,7 @@ export interface CalendarConfig {
    * @default '{year} 年'
    */
   yearSelection?: string;
-};
+}
 
 export interface CascaderConfig {
   /**
@@ -186,7 +198,7 @@ export interface CascaderConfig {
    * @default '请选择'
    */
   placeholder?: string;
-};
+}
 
 export interface TransferConfig {
   /**
@@ -204,7 +216,7 @@ export interface TransferConfig {
    * @default '{checked} / {total} 项'
    */
   title?: string;
-};
+}
 
 export interface TimePickerConfig {
   /**
@@ -232,7 +244,7 @@ export interface TimePickerConfig {
    * @default '下午'
    */
   postMeridiem?: string;
-};
+}
 
 export interface DatePickerConfig {
   /**
@@ -336,7 +348,7 @@ export interface DatePickerConfig {
    * @default '年'
    */
   yearAriaLabel?: string;
-};
+}
 
 export interface DialogConfig {
   /**
@@ -350,8 +362,8 @@ export interface DialogConfig {
   /**
    * 确认按钮主题色，即 Dialog 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }
    */
-  confirmBtnTheme?: { default: string; info: string; warning: string; danger: string; success: string; };
-};
+  confirmBtnTheme?: { default: string; info: string; warning: string; danger: string; success: string };
+}
 
 export interface DrawerConfig {
   /**
@@ -364,7 +376,7 @@ export interface DrawerConfig {
    * @default '确认'
    */
   confirm?: string | ButtonProps;
-};
+}
 
 export interface PopconfirmConfig {
   /**
@@ -380,8 +392,8 @@ export interface PopconfirmConfig {
   /**
    * 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }
    */
-  confirmBtnTheme?: { default: string; warning: string; danger: string; };
-};
+  confirmBtnTheme?: { default: string; warning: string; danger: string };
+}
 
 export interface TableConfig {
   /**
@@ -397,7 +409,7 @@ export interface TableConfig {
    * 排序图标（配置传入降序图标即可），如果没有配置，组件会内置默认图标。【注意】使用渲染函数输出图标组件
    */
   sortIcon?: TNode;
-};
+}
 
 export interface SelectConfig {
   /**
@@ -419,7 +431,7 @@ export interface SelectConfig {
    * @default '请选择'
    */
   placeholder?: string;
-};
+}
 
 export interface TreeConfig {
   /**
@@ -431,7 +443,7 @@ export interface TreeConfig {
    * 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件
    */
   folderIcon?: TNode;
-};
+}
 
 export interface TreeSelectConfig {
   /**
@@ -444,7 +456,7 @@ export interface TreeSelectConfig {
    * @default '加载中'
    */
   loadingText?: string;
-};
+}
 
 export interface UploadConfig {
   /**
@@ -457,30 +469,32 @@ export interface UploadConfig {
    * @default '文件大小不能超过 {sizeLimit}'
    */
   sizeLimitMessage?: string;
-};
+}
 
 export interface FormConfig {
   /**
    * 是否显示必填符号，默认显示
    * @default true
    */
   requiredMark?: boolean;
-};
+}
 
 export interface TagConfig {
   /**
    * 关闭图标，【注意】使用渲染函数输出图标组件
    */
   closeIcon?: TNode;
-};
+}
 
 export interface StepsConfig {
   /**
    * 错误步骤图标，【注意】使用渲染函数输出图标组件
    */
   errorIcon?: TNode;
-};
+}
 
-export interface ConfigPresetDate { [name: string]: DateConfigValue | (() => DateConfigValue) };
+export interface ConfigPresetDate {
+  [name: string]: DateConfigValue | (() => DateConfigValue);
+}
 
 export type DateConfigValue = string | Date | Array<DateConfigValue>;
diff --git a/src/config-provider/zh_CN_config.ts b/src/config-provider/zh_CN_config.ts
@@ -127,6 +127,9 @@ const GLOBAL_CONFIG_ZH: GlobalConfigProvider = {
   form: {
     requiredMark: true,
   },
+  input: {
+    placeholder: '请输入',
+  },
 };
 
 export default GLOBAL_CONFIG_ZH;
diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -1,7 +1,9 @@
-import Vue, { CreateElement, VNode, VueConstructor } from 'vue';
+import Vue, { CreateElement, VNode } from 'vue';
 import { BrowseIcon, BrowseOffIcon, CloseCircleFilledIcon as ClearIcon } from 'tdesign-icons-vue';
 import { InputValue, TdInputProps } from './type';
 import { getCharacterLength, omit } from '../utils/helper';
+import getConfigReceiverMixins, { InputConfig } from '../config-provider/config-receiver';
+import mixins from '../utils/mixins';
 
 import CLASSNAMES from '../utils/classnames';
 import { emitEvent } from '../utils/event';
@@ -24,7 +26,7 @@ interface InputInstance extends Vue {
   composing: boolean;
 }
 
-export default (Vue as VueConstructor<InputInstance>).extend({
+export default mixins(getConfigReceiverMixins<InputInstance, InputConfig>('input')).extend({
   name: 'TInput',
   inheritAttrs: false,
   props: { ...props },
@@ -45,7 +47,7 @@ export default (Vue as VueConstructor<InputInstance>).extend({
         disabled: this.disabled,
         readonly: this.readonly,
         autocomplete: this.autocomplete,
-        placeholder: this.placeholder || '请输入',
+        placeholder: this.placeholder || this.t(this.global.placeholder),
         maxlength: this.maxlength,
         name: this.name || undefined,
         type: this.renderType,

diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
@@ -59,8 +59,9 @@ export default mixins(getConfigReceiverMixins<TimePickerInstance, TimePickerConf
       return time.map((val: dayjs.Dayjs) => (val ? dayjs(val) : dayjs()));
     },
     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`;
     },
   },
@@ -181,10 +182,7 @@ export default mixins(getConfigReceiverMixins<TimePickerInstance, TimePickerConf
         this.time[1] = setTime;
         shouldUpdatePanel = true;
       } else if (index === 1 && !this.time[0]) {
-        this.time[0] = dayjs()
-          .hour(0)
-          .minute(0)
-          .second(0);
+        this.time[0] = dayjs().hour(0).minute(0).second(0);
         shouldUpdatePanel = true;
       }
       this.updateInputTime();
@@ -238,7 +236,7 @@ export default mixins(getConfigReceiverMixins<TimePickerInstance, TimePickerConf
       this.triggerUpdateValue();
     },
     // 清除选中
-    clear(context: {e: MouseEvent}) {
+    clear(context: { e: MouseEvent }) {
       const { e } = context;
       this.time = TIME_PICKER_EMPTY;
       this.updateInputTime();
@@ -268,6 +266,7 @@ export default mixins(getConfigReceiverMixins<TimePickerInstance, TimePickerConf
             size={this.size}
             onClear={this.clear}
             clearable={this.clearable}
+            placeholder=" "
             readonly
             value={!isEqual(this.time, TIME_PICKER_EMPTY) ? ' ' : undefined}
           >

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -4955,7 +4955,7 @@ exports[`ssr snapshot test renders ./examples/input/demos/addon.vue correctly 1`
 
 exports[`ssr snapshot test renders ./examples/input/demos/base.vue correctly 1`] = `
 <div class="tdesign-demo-block-column" style="max-width:500px;">
-  <div class="t-input t-size-m"><input placeholder="请输入内容（无默认值）" type="text" class="t-input__inner"></div>
+  <div class="t-input t-size-m"><input placeholder="请输入" type="text" class="t-input__inner"></div>
   <div class="t-input t-size-m"><input placeholder="请输入内容（有默认值）" type="text" value="有默认值" class="t-input__inner"></div>
 </div>
 `;
@@ -13195,7 +13195,7 @@ exports[`ssr snapshot test renders ./examples/time-picker/demos/range.vue correc
   <div class="demos t-popup__reference t-time-picker t-size-m">
     <div name="t-popup--animation" appear="true"></div>
     <div class="t-time-picker__group">
-      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder="请输入" type="text" value=" " class="t-input__inner"><span class="t-input__suffix"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
+      <div class="t-input t-size-m t-input--suffix"><input readonly="readonly" placeholder=" " type="text" value=" " class="t-input__inner"><span class="t-input__suffix"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-time"><path fill="currentColor" d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z" fill-opacity="0.9"></path><path fill="currentColor" d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z" fill-opacity="0.9"></path></svg></span></div>
       <div size="medium" class="t-time-picker__input"><span class="t-time-picker__input-item"><input value="00" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="00" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="00" class="t-time-picker__input-item-input"></span>-<span class="t-time-picker__input-item"><input value="23" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="59" class="t-time-picker__input-item-input"></span><span class="t-time-picker__input-item">:<input value="59" class="t-time-picker__input-item-input"></span></div>
     </div>
   </div>

diff --git a/test/unit/input/__snapshots__/demo.test.js.snap b/test/unit/input/__snapshots__/demo.test.js.snap
@@ -79,7 +79,7 @@ exports[`Input base demo works fine 1`] = `
   >
     <input
       class="t-input__inner"
-      placeholder="请输入内容（无默认值）"
+      placeholder="请输入"
       type="text"
     />
   </div>