Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(input): add input config provider #85

Merged
merged 1 commit into from
Dec 24, 2021
Merged

feat(input): add input config provider #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions examples/config-provider/config-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -23,6 +24,12 @@ tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N
treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N
upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N

### InputConfig

名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
placeholder | String | 请输入 | 占位符文本 | N

### PaginationConfig

名称 | 类型 | 默认值 | 说明 | 必传
Expand Down
9 changes: 2 additions & 7 deletions examples/input/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 3 additions & 0 deletions src/config-provider/en_US_config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,9 @@ const GLOBAL_CONFIG_EN: GlobalConfigProvider = {
form: {
requiredMark: true,
},
input: {
placeholder: '',
},
};

export default GLOBAL_CONFIG_EN;
58 changes: 36 additions & 22 deletions src/config-provider/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -34,6 +34,10 @@ export interface GlobalConfigProvider {
* 表单组件全局配置
*/
form?: FormConfig;
/**
* 输入框组件全局配置
*/
input?: InputConfig;
/**
* 分页组件全局配置
*/
Expand Down Expand Up @@ -78,7 +82,15 @@ export interface GlobalConfigProvider {
* 上传组件全局配置
*/
upload?: UploadConfig;
};
}

export interface InputConfig {
/**
* 占位符文本
* @default 请输入
*/
placeholder?: string;
}

export interface PaginationConfig {
/**
Expand All @@ -101,7 +113,7 @@ export interface PaginationConfig {
* @default '共 {total} 项数据'
*/
total?: string;
};
}

export interface CalendarConfig {
/**
Expand Down Expand Up @@ -168,7 +180,7 @@ export interface CalendarConfig {
* @default '{year} 年'
*/
yearSelection?: string;
};
}

export interface CascaderConfig {
/**
Expand All @@ -186,7 +198,7 @@ export interface CascaderConfig {
* @default '请选择'
*/
placeholder?: string;
};
}

export interface TransferConfig {
/**
Expand All @@ -204,7 +216,7 @@ export interface TransferConfig {
* @default '{checked} / {total} 项'
*/
title?: string;
};
}

export interface TimePickerConfig {
/**
Expand Down Expand Up @@ -232,7 +244,7 @@ export interface TimePickerConfig {
* @default '下午'
*/
postMeridiem?: string;
};
}

export interface DatePickerConfig {
/**
Expand Down Expand Up @@ -336,7 +348,7 @@ export interface DatePickerConfig {
* @default '年'
*/
yearAriaLabel?: string;
};
}

export interface DialogConfig {
/**
Expand All @@ -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 {
/**
Expand All @@ -364,7 +376,7 @@ export interface DrawerConfig {
* @default '确认'
*/
confirm?: string | ButtonProps;
};
}

export interface PopconfirmConfig {
/**
Expand All @@ -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 {
/**
Expand All @@ -397,7 +409,7 @@ export interface TableConfig {
* 排序图标（配置传入降序图标即可），如果没有配置，组件会内置默认图标。【注意】使用渲染函数输出图标组件
*/
sortIcon?: TNode;
};
}

export interface SelectConfig {
/**
Expand All @@ -419,7 +431,7 @@ export interface SelectConfig {
* @default '请选择'
*/
placeholder?: string;
};
}

export interface TreeConfig {
/**
Expand All @@ -431,7 +443,7 @@ export interface TreeConfig {
* 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件
*/
folderIcon?: TNode;
};
}

export interface TreeSelectConfig {
/**
Expand All @@ -444,7 +456,7 @@ export interface TreeSelectConfig {
* @default '加载中'
*/
loadingText?: string;
};
}

export interface UploadConfig {
/**
Expand All @@ -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>;
3 changes: 3 additions & 0 deletions src/config-provider/zh_CN_config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,9 @@ const GLOBAL_CONFIG_ZH: GlobalConfigProvider = {
form: {
requiredMark: true,
},
input: {
placeholder: '请输入',
},
};

export default GLOBAL_CONFIG_ZH;
8 changes: 5 additions & 3 deletions src/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 },
Expand All @@ -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,
Expand Down
13 changes: 6 additions & 7 deletions src/time-picker/time-range-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
},
},
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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}
>
Expand Down
4 changes: 2 additions & 2 deletions test/ssr/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/unit/input/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ exports[`Input base demo works fine 1`] = `
>
<input
class="t-input__inner"
placeholder="请输入内容（无默认值）"
placeholder="请输入"
type="text"
/>
</div>
Expand Down