| N onClosed | Function | | Typescript：`(context: { e: TransitionEvent }) => void`
| N diff --git a/src/alert/alert.md b/src/alert/alert.md index 4f448c7e8..bd5424ce9 100644 --- a/src/alert/alert.md +++ b/src/alert/alert.md @@ -1,11 +1,13 @@ :: BASE_DOC :: ## API + ### Alert Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -close | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +close | String / Boolean / Slot / Function | false | 即将废弃，请使用 closeBtn 属性。关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +closeBtn | String / Boolean / Slot / Function | false | 关闭按钮。值为 true 则显示默认关闭按钮；值为 false 则不显示按钮；值类型为 string 则直接显示；值类型为 Function 则可以自定关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 内容，同 message。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N maxLine | Number | 0 | 内容显示最大行数，超出的内容会折叠收起，用户点击后再展开。值为 0 表示不折叠 | N diff --git a/src/alert/alert.tsx b/src/alert/alert.tsx index a450c507d..cfa4de219 100644 --- a/src/alert/alert.tsx +++ b/src/alert/alert.tsx @@ -7,6 +7,7 @@ import { CloseIcon as TdCloseIcon, } from 'tdesign-icons-vue'; +import log from '../_common/js/log/log'; import { on, off, addClass } from '../utils/dom'; import props from './props'; import { renderTNodeJSX } from '../utils/render-tnode'; @@ -74,14 +75,23 @@ export default mixins(getConfigReceiverMixins
setVisible(!this.visible)}>
+
@@ -32695,7 +32701,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/swatch-color.v
@@ -33074,7 +33080,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/swatch-color.v
@@ -37695,7 +37701,6 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/pagination.
{renderTNodeJSXDefault(
this,
'default',
diff --git a/src/color-picker/panel/header.tsx b/src/color-picker/panel/header.tsx
index fdcfce13a..47e8a96f1 100644
--- a/src/color-picker/panel/header.tsx
+++ b/src/color-picker/panel/header.tsx
@@ -1,12 +1,12 @@
import {
defineComponent, PropType, ref, watch,
} from 'vue';
-import props from '../props';
import { COLOR_MODES } from '../../_common/js/color-picker/constants';
-import { RadioGroup as TRadioGroup, RadioButton as TRadioButton } from '../../radio';
-import { TdColorHandler, TdColorModes } from '../interfaces';
-import { useBaseClassName } from '../hooks';
import { useConfig } from '../../hooks';
+import { RadioButton as TRadioButton, RadioGroup as TRadioGroup } from '../../radio';
+import { useBaseClassName } from '../hooks';
+import type { TdColorHandler, TdColorModes } from '../interfaces';
+import props from '../props';
export default defineComponent({
name: 'PanelHeader',
@@ -20,9 +20,6 @@ export default defineComponent({
type: String as PropType,
default: 'color',
},
- togglePopup: {
- type: Function as PropType,
- },
handleModeChange: {
type: Function as PropType,
default: () => () => {},
diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx
index 6482f9a51..dd8f6d071 100644
--- a/src/color-picker/panel/index.tsx
+++ b/src/color-picker/panel/index.tsx
@@ -1,32 +1,32 @@
import {
computed, defineComponent, ref, toRefs, watch,
} from 'vue';
-import { useConfig } from '../../hooks/useConfig';
import useCommonClassName from '../../hooks/useCommonClassName';
+import { useConfig } from '../../hooks/useConfig';
+import useDefaultValue from '../../hooks/useDefaultValue';
+import useVModel from '../../hooks/useVModel';
+import { useBaseClassName } from '../hooks';
+import type { TdColorModes } from '../interfaces';
import props from '../props';
-import PanelHeader from './header';
-import LinearGradient from './linear-gradient';
-import SaturationPanel from './saturation';
-import HueSlider from './hue';
-import AlphaSlider from './alpha';
-import FormatPanel from './format';
-import SwatchesPanel from './swatches';
+import type { ColorPickerChangeTrigger } from '../type';
import {
Color,
DEFAULT_COLOR,
DEFAULT_LINEAR_GRADIENT,
DEFAULT_SYSTEM_SWATCH_COLORS,
- TD_COLOR_USED_COLORS_MAX_SIZE,
getColorObject,
GradientColorPoint,
initColorFormat,
+ TD_COLOR_USED_COLORS_MAX_SIZE,
type ColorFormat,
} from '../utils';
-import type { ColorPickerChangeTrigger } from '../type';
-import { TdColorModes } from '../interfaces';
-import { useBaseClassName } from '../hooks';
-import useVModel from '../../hooks/useVModel';
-import useDefaultValue from '../../hooks/useDefaultValue';
+import AlphaSlider from './alpha';
+import FormatPanel from './format';
+import PanelHeader from './header';
+import HueSlider from './hue';
+import LinearGradient from './linear-gradient';
+import SaturationPanel from './saturation';
+import SwatchesPanel from './swatches';
export default defineComponent({
name: 'ColorPanel',
@@ -41,9 +41,6 @@ export default defineComponent({
},
props: {
...props,
- togglePopup: {
- type: Function,
- },
},
setup(props) {
const baseClassName = useBaseClassName();
@@ -123,7 +120,10 @@ export default defineComponent({
const newMode = getModeByColor(newColor);
mode.value = newMode;
color.value.isGradient = newMode === 'linear-gradient';
- color.value.update(newColor);
+ const currentColor = color.value.getFormattedColor(formatModel.value, props.enableAlpha);
+ if (currentColor !== newColor) {
+ color.value.update(newColor);
+ }
},
);
@@ -287,7 +287,7 @@ export default defineComponent({
systemColors = [...DEFAULT_SYSTEM_SWATCH_COLORS];
}
if (onlySupportGradient) {
- systemColors = systemColors.filter((color) => Color.isGradientColor(color));
+ systemColors = systemColors?.filter((color) => Color.isGradientColor(color));
}
const showSystemColors = Array.isArray(systemColors) && systemColors.length > 0;
diff --git a/src/color-picker/panel/slider.tsx b/src/color-picker/panel/slider.tsx
index 9b60ec0bb..cddf14c54 100644
--- a/src/color-picker/panel/slider.tsx
+++ b/src/color-picker/panel/slider.tsx
@@ -49,9 +49,10 @@ export default defineComponent({
return;
}
const left = Math.round((props.value / props.maxValue) * 100);
+ const color = props.type === 'hue' ? `hsl(${props.color.hue}, 100%, 50%)` : props.color.rgba;
return {
left: `${left}%`,
- color: props.color.rgb,
+ color,
};
});
diff --git a/src/components.ts b/src/components.ts
index ca2ae4b83..6856a4da2 100644
--- a/src/components.ts
+++ b/src/components.ts
@@ -67,6 +67,7 @@ export * from './watermark';
export * from './collapse';
export * from './rate';
export * from './timeline';
+export * from './qrcode';
// 消息提醒
diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md
index 6d879e10a..4dd5a2e8c 100644
--- a/src/config-provider/config-provider.en-US.md
+++ b/src/config-provider/config-provider.en-US.md
@@ -69,7 +69,7 @@ name | type | default | description | required
alert | Object | - | Alert global configs。Typescript：`AlertConfig` | N
anchor | Object | - | Anchor global configs。Typescript：`AnchorConfig` | N
animation | Object | - | Typescript：`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
-attach | String / Object / Function | - | Typescript：`AttachNode \| { popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+attach | String / Object / Function | - | Typescript：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
autoComplete | Object | - | AutoComplete global configs。Typescript：`AutoCompleteConfig` | N
calendar | Object | - | Calendar global configs。Typescript：`CalendarConfig` | N
cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` | N
@@ -90,6 +90,7 @@ list | Object | - | List global configs。Typescript：`ListConfig` | N
message | Object | - | Message Component global configs。Typescript：`MessageConfig` | N
pagination | Object | - | Pagination global configs。Typescript：`PaginationConfig` | N
popconfirm | Object | - | Popconfirm global configs。Typescript：`PopconfirmConfig` | N
+qrcode | Object | - | QRCode global configs。Typescript：`QRCodeConfig` | N
rate | Object | - | Rate global configs。Typescript：`RateConfig` | N
select | Object | - | Select global configs。Typescript：`SelectConfig` | N
steps | Object | - | Steps global configs。Typescript：`StepsConfig` | N
@@ -99,23 +100,28 @@ timePicker | Object | - | TimePicker global configs。Typescript：`TimePickerCo
transfer | Object | - | Transfer global configs。Typescript：`TransferConfig` | N
tree | Object | - | Tree global configs。Typescript：`TreeConfig` | N
treeSelect | Object | - | TreeSelect global configs。Typescript：`TreeSelectConfig` | N
+typography | Object | - | Typography global configs。Typescript：`TypographyConfig` | N
upload | Object | - | Upload global configs。Typescript：`UploadConfig` | N
-### InputConfig
+### AlertConfig
name | type | default | description | required
-- | -- | -- | -- | --
-autocomplete | String | - | \- | N
-placeholder | String | - | \- | N
+collapseText | String | - | \- | N
+expandText | String | - | \- | N
-### PaginationConfig
+### AnchorConfig
name | type | default | description | required
-- | -- | -- | -- | --
-itemsPerPage | String | - | \- | N
-jumpTo | String | - | \- | N
-page | String | - | \- | N
-total | String | - | \- | N
+copySuccessText | String | - | \- | N
+copyText | String | - | \- | N
+
+### AutoCompleteConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+empty | String | - | \- | N
### CalendarConfig
@@ -127,7 +133,7 @@ fillWithZero | Boolean | true | \- | N
firstDayOfWeek | Number | 1 | options: 1/2/3/4/5/6/7 | N
hideWeekend | String | - | \- | N
monthRadio | String | - | \- | N
-monthSelection | String | - | \- | N
+monthSelection | String / Function | - | Typescript：`string \| (( data: { month: number })=>string)` | N
showWeekend | String | - | \- | N
thisMonth | String | - | \- | N
today | String | - | \- | N
@@ -151,24 +157,6 @@ clearConfirmText | String | - | \- | N
recentColorTitle | String | - | \- | N
swatchColorTitle | String | - | \- | N
-### TransferConfig
-
-name | type | default | description | required
--- | -- | -- | -- | --
-empty | String | - | \- | N
-placeholder | String | - | \- | N
-title | String | - | \- | N
-
-### TimePickerConfig
-
-name | type | default | description | required
--- | -- | -- | -- | --
-anteMeridiem | String | - | \- | N
-confirm | String | - | \- | N
-now | String | - | \- | N
-placeholder | String | - | placeholder text | N
-postMeridiem | String | - | \- | N
-
### DatePickerConfig
name | type | default | description | required
@@ -195,9 +183,15 @@ rangeSeparator | String | - | range separator text | N
selectDate | String | - | select date text | N
selectTime | String | - | select time text | N
weekAbbreviation | String | - | week text | N
-weekdays | Object | - | Typescript：`string[]` | N
+weekdays | Array | - | Typescript：`string[]` | N
yearAriaLabel | String | - | year text | N
+### DescriptionsConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+colonText | String | - | colon on the right of label, ":" | N
+
### DialogConfig
name | type | default | description | required
@@ -218,64 +212,54 @@ closeOnOverlayClick | Boolean | true | \- | N
confirm | String | - | Typescript：`string \| ButtonProps` | N
size | String | 'small' | \- | N
-### PopconfirmConfig
+### EmptyConfig
name | type | default | description | required
-- | -- | -- | -- | --
-cancel | String / Object | - | Typescript：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
-confirm | String / Object | - | Typescript：`string \| ButtonProps` | N
-confirmBtnTheme | Object | - | Typescript：`{ default: string; warning: string; danger: string; }` | N
+image | Object | - | Typescript：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+titleText | Object | - | Typescript：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N
-### TableConfig
+### FormConfig
name | type | default | description | required
-- | -- | -- | -- | --
-cancelText | String | - | \- | N
-clearFilterResultButtonText | String | - | \- | N
-columnConfigButtonText | String | - | \- | N
-columnConfigDescriptionText | String | - | \- | N
-columnConfigTitleText | String | - | \- | N
-confirmText | String | - | \- | N
-empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-expandIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-filterIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-hideSortTips | Boolean | false | hide sort tips | N
-loadingMoreText | String | - | \- | N
-loadingText | String | - | \- | N
-resetText | String | - | \- | N
-searchResultText | String | - | \- | N
-selectAllText | String | - | \- | N
-size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-sortAscendingOperationText | String | - | \- | N
-sortCancelOperationText | String | - | \- | N
-sortDescendingOperationText | String | - | \- | N
-sortIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-treeExpandAndFoldIcon | Function | undefined | Typescript：`TNode<{ type: 'expand' \| 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+colonText | String | - | colon on the right of label ":" | N
+errorMessage | Object | - | Typescript：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
+requiredMark | Boolean | true | \- | N
+requiredMarkPosition | String | left | Display position of required symbols。options: left/right | N
-### SelectConfig
+### GuideConfig
name | type | default | description | required
-- | -- | -- | -- | --
-clearIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-empty | String | - | \- | N
-filterable | Boolean | false | \- | N
-loadingText | String | - | \- | N
-placeholder | String | - | placeholder text | N
+finishButtonProps | Object | - | finish button in last step. `{ content: 'Finish', theme: 'primary' }`。Typescript：`ButtonProps` | N
+nextButtonProps | Object | - | next step button. `{ content: 'Next Button', theme: 'primary' }`。Typescript：`ButtonProps` | N
+prevButtonProps | Object | - | previous step button. `{ content: 'Previous Step', theme: 'default' }`。Typescript：`ButtonProps` | N
+skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default' }`。Typescript：`ButtonProps` | N
-### TreeConfig
+### ImageConfig
name | type | default | description | required
-- | -- | -- | -- | --
-empty | String | - | \- | N
-folderIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+errorText | String | - | loading text, default value is "Error" | N
+loadingText | String | - | loading text, default value is "loading" | N
+replaceImageSrc | Function | - | replace all `src` attribute of images。Typescript：`(params: ImageProps) => string`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
-### TreeSelectConfig
+### ImageViewerConfig
name | type | default | description | required
-- | -- | -- | -- | --
-empty | String | - | \- | N
-loadingText | String | - | \- | N
-placeholder | String | - | placeholder text | N
+errorText | String | - | \- | N
+mirrorTipText | String | - | mirror operation text | N
+originalSizeTipText | String | - | original size tips | N
+rotateTipText | String | - | rotate operation text | N
+
+### InputConfig
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+autocomplete | String | - | \- | N
+placeholder | String | - | \- | N
### ListConfig
@@ -284,57 +268,57 @@ name | type | default | description | required
loadingMoreText | String | - | \- | N
loadingText | String | - | \- | N
-### UploadConfig
+### MessageConfig
name | type | default | description | required
-- | -- | -- | -- | --
-cancelUploadText | String | - | \- | N
-dragger | Object | - | Typescript：`UploadConfigDragger` | N
-file | Object | - | Typescript：`UploadConfigFileList` | N
-progress | Object | - | Typescript：`UploadConfigProgress` | N
-sizeLimitMessage | String | - | \- | N
-triggerUploadText | Object | - | Typescript：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
+`MessageOptions` | \- | - | extends `MessageOptions` | N
-### UploadConfigProgress
+### PaginationConfig
name | type | default | description | required
-- | -- | -- | -- | --
-failText | String | - | \- | N
-successText | String | - | \- | N
-uploadingText | String | - | \- | N
-waitingText | String | - | \- | N
+itemsPerPage | String | - | \- | N
+jumpTo | String | - | \- | N
+page | String | - | \- | N
+total | String | - | \- | N
+### PaginationConfig
-### UploadConfigDragger
+name | params | return | description
+-- | -- | -- | --
+jumper | `(jumperProps: JumperProps)` | `TNode` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts)。
`interface JumperProps { current: number; pageCount: number; onChange: (current: number) => void; }`
+ +### PopconfirmConfig name | type | default | description | required -- | -- | -- | -- | -- -clickAndDragText | String | - | \- | N -dragDropText | String | - | \- | N -draggingText | String | - | \- | N +cancel | String / Object | - | Typescript：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +confirm | String / Object | - | Typescript：`string \| ButtonProps` | N +confirmBtnTheme | Object | - | Typescript：`{ default: string; warning: string; danger: string; }` | N -### UploadConfigFileList +### QRCodeConfig name | type | default | description | required -- | -- | -- | -- | -- -fileNameText | String | - | \- | N -fileOperationDateText | String | - | \- | N -fileOperationText | String | - | \- | N -fileSizeText | String | - | \- | N -fileStatusText | String | - | \- | N +expiredText | String | - | Language configuration, "QR code expired" description text | N +refreshText | String | - | Language configuration, "QR code refresh" description text | N +scannedText | String | - | Language configuration, "QR code scanned" description text | N -### FormConfig +### RateConfig name | type | default | description | required -- | -- | -- | -- | -- -colonText | String | - | colon on the right of label ":" | N -errorMessage | Object | - | Typescript：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -requiredMark | Boolean | true | \- | N +rateText | Array | - | Typescript：`string[]` | N -### TagConfig +### SelectConfig name | type | default | description | required -- | -- | -- | -- | -- -closeIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +clearIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +empty | String | - | \- | N +filterable | Boolean | false | \- | N +loadingText | String | - | \- | N +placeholder | String | - | placeholder text | N ### StepsConfig @@ -343,73 +327,113 @@ name | type | default | description | required checkIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N errorIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### AlertConfig +### TableConfig name | type | default | description | required -- | -- | -- | -- | -- -collapseText | String | - | \- | N -expandText | String | - | \- | N +cancelText | String | - | \- | N +clearFilterResultButtonText | String | - | \- | N +columnConfigButtonText | String | - | \- | N +columnConfigDescriptionText | String | - | \- | N +columnConfigTitleText | String | - | \- | N +confirmText | String | - | \- | N +empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +expandIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +hideSortTips | Boolean | false | hide sort tips | N +loadingMoreText | String | - | \- | N +loadingText | String | - | \- | N +resetText | String | - | \- | N +searchResultText | String | - | \- | N +selectAllText | String | - | \- | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +sortAscendingOperationText | String | - | \- | N +sortCancelOperationText | String | - | \- | N +sortDescendingOperationText | String | - | \- | N +sortIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +treeExpandAndFoldIcon | Function | undefined | Typescript：`TNode<{ type: 'expand' \| 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### DescriptionsConfig +### TagConfig name | type | default | description | required -- | -- | -- | -- | -- -colonText | String | - | colon on the right of label, ":" | N +closeIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### AnchorConfig +### TimePickerConfig name | type | default | description | required -- | -- | -- | -- | -- -copySuccessText | String | - | \- | N -copyText | String | - | \- | N +anteMeridiem | String | - | \- | N +confirm | String | - | \- | N +now | String | - | \- | N +placeholder | String | - | placeholder text | N +postMeridiem | String | - | \- | N -### MessageConfig +### TransferConfig name | type | default | description | required -- | -- | -- | -- | -- -`MessageOptions` | \- | - | extends `MessageOptions` | N +empty | String | - | \- | N +placeholder | String | - | \- | N +title | String | - | \- | N -### ImageConfig +### TreeConfig name | type | default | description | required -- | -- | -- | -- | -- -errorText | String | - | loading text, default value is "Error" | N -loadingText | String | - | loading text, default value is "loading" | N -replaceImageSrc | Function | - | replace all `src` attribute of images。Typescript：`(params: ImageProps) => string`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +empty | String | - | \- | N +folderIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### ImageViewerConfig +### TreeSelectConfig name | type | default | description | required -- | -- | -- | -- | -- -errorText | String | - | \- | N -mirrorTipText | String | - | mirror operation text | N -originalSizeTipText | String | - | original size tips | N -rotateTipText | String | - | rotate operation text | N +empty | String | - | \- | N +loadingText | String | - | \- | N +placeholder | String | - | placeholder text | N -### GuideConfig +### TypographyConfig name | type | default | description | required -- | -- | -- | -- | -- -finishButtonProps | Object | - | finish button in last step. `{ content: 'Finish', theme: 'primary' }`。Typescript：`ButtonProps` | N -nextButtonProps | Object | - | next step button. `{ content: 'Next Button', theme: 'primary' }`。Typescript：`ButtonProps` | N -prevButtonProps | Object | - | previous step button. `{ content: 'Previous Step', theme: 'default' }`。Typescript：`ButtonProps` | N -skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default' }`。Typescript：`ButtonProps` | N +collapseText | String | - | collapse text | N +copiedText | String | - | copied text | N +expandText | String | - | expand text | N -### RateConfig +### UploadConfig name | type | default | description | required -- | -- | -- | -- | -- -rateText | Array | - | Typescript：`string[]` | N +cancelUploadText | String | - | \- | N +dragger | Object | - | Typescript：`UploadConfigDragger` | N +file | Object | - | Typescript：`UploadConfigFileList` | N +progress | Object | - | Typescript：`UploadConfigProgress` | N +sizeLimitMessage | String | - | \- | N +triggerUploadText | Object | - | Typescript：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -### EmptyConfig +### UploadConfigDragger name | type | default | description | required -- | -- | -- | -- | -- -image | Object | - | Typescript：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -titleText | Object | - | Typescript：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N +clickAndDragText | String | - | \- | N +dragDropText | String | - | \- | N +draggingText | String | - | \- | N -### AutoCompleteConfig +### UploadConfigFileList name | type | default | description | required -- | -- | -- | -- | -- -empty | String | - | \- | N +fileNameText | String | - | \- | N +fileOperationDateText | String | - | \- | N +fileOperationText | String | - | \- | N +fileSizeText | String | - | \- | N +fileStatusText | String | - | \- | N + +### UploadConfigProgress + +name | type | default | description | required +-- | -- | -- | -- | -- +failText | String | - | \- | N +successText | String | - | \- | N +uploadingText | String | - | \- | N +waitingText | String | - | \- | N diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md index 59e988600..f82a5b0ed 100644 --- a/src/config-provider/config-provider.md +++ b/src/config-provider/config-provider.md @@ -70,7 +70,7 @@ globalConfig | Object | - | 全局配置。TS 类型：`GlobalConfigProvider` | alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N animation | Object | - | 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型：`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
-attach | String / Object / Function | - | TS 类型：`AttachNode \| { popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+attach | String / Object / Function | - | TS 类型：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
autoComplete | Object | - | 自动填充组件全局配置。TS 类型：`AutoCompleteConfig` | N
calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N
cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N
@@ -91,6 +91,7 @@ list | Object | - | 列表组件全局配置。TS 类型：`ListConfig` | N
message | Object | - | 消息组件全局配置。TS 类型：`MessageConfig` | N
pagination | Object | - | 分页组件全局配置。TS 类型：`PaginationConfig` | N
popconfirm | Object | - | 气泡确认框全局配置。TS 类型：`PopconfirmConfig` | N
+qrcode | Object | - | 二维码全局配置。TS 类型：`QRCodeConfig` | N
rate | Object | - | 评分全局配置。TS 类型：`RateConfig` | N
select | Object | - | 选择器组件全局配置。TS 类型：`SelectConfig` | N
steps | Object | - | 步骤条组件全局配置。TS 类型：`StepsConfig` | N
@@ -100,23 +101,28 @@ timePicker | Object | - | 时间选择器全局配置。TS 类型：`TimePickerC
transfer | Object | - | 穿梭框全局配置。TS 类型：`TransferConfig` | N
tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N
treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N
+typography | Object | - | 排版组件全局配置。TS 类型：`TypographyConfig` | N
upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N
-### InputConfig
+### AlertConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-autocomplete | String | - | 是否开启自动填充功能 | N
-placeholder | String | - | 语言配置，“请输入”占位符描述文本 | N
+collapseText | String | - | 语言配置，“收起”描述文本 | N
+expandText | String | - | 语言配置，“展开更多”描述文本 | N
-### PaginationConfig
+### AnchorConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-itemsPerPage | String | - | 语言配置，每页条数文本，示例：`'{size} 条/页'` | N
-jumpTo | String | - | 语言配置，页码跳转文本，示例：'跳至' | N
-page | String | - | 语言配置，“页”描述文本 | N
-total | String | - | 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` | N
+copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N
+copyText | String | - | 语言配置，“复制链接” 描述文本 | N
+
+### AutoCompleteConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+empty | String | - | 语言配置，“暂无数据”描述文本 | N
### CalendarConfig
@@ -128,7 +134,7 @@ fillWithZero | Boolean | true | 当日期数字小于 10 时，是否使用 '0'
firstDayOfWeek | Number | 1 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
hideWeekend | String | - | 语言配置，“隐藏周末”描述文本 | N
monthRadio | String | - | 语言配置，模式切换时的“月”描述文本 | N
-monthSelection | String | - | 语言配置，\"月\"选择描述文本。示例：`'{month} 月'` | N
+monthSelection | String / Function | - | 语言配置，“月”选择描述文本。示例：`'{month} 月'`。TS 类型：`string \| (( data: { month: number })=>string)` | N
showWeekend | String | - | 语言配置，“显示周末”描述文本 | N
thisMonth | String | - | 语言配置，“本月”描述文本 | N
today | String | - | 语言配置，“今天”描述文本 | N
@@ -150,25 +156,7 @@ placeholder | String | - | 语言配置，“请选择”占位描述文本 | N
-- | -- | -- | -- | --
clearConfirmText | String | - | 语言配置，“确定清空最近使用的颜色吗？”清空颜色确认文案 | N
recentColorTitle | String | - | 语言配置，“最近使用颜色” 区域标题文本 | N
-swatchColorTitle | String | - | 语言配置，\"系统预设颜色\" 区域标题文本 | N
-
-### TransferConfig
-
-名称 | 类型 | 默认值 | 描述 | 必传
--- | -- | -- | -- | --
-empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N
-placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N
-title | String | - | 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” | N
-
-### TimePickerConfig
-
-名称 | 类型 | 默认值 | 描述 | 必传
--- | -- | -- | -- | --
-anteMeridiem | String | - | 语言配置，“上午”描述文本 | N
-confirm | String | - | 语言配置，“确定”描述文本 | N
-now | String | - | 语言配置，“此刻”描述文本 | N
-placeholder | String | - | 语言配置，\"请选择时间\"占位符描述文本 | N
-postMeridiem | String | - | 语言配置，“下午”描述文本 | N
+swatchColorTitle | String | - | 语言配置，“系统预设颜色” 区域标题文本 | N
### DatePickerConfig
@@ -181,7 +169,7 @@ direction | String | 'ltr' | 日期方向，'ltr' 表示从左往右 | N
firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
format | String | 'YYYY-MM-DD' | 日期格式化规则 | N
monthAriaLabel | String | - | 语言配置，“月” 描述文本 | N
-months | Array | - | 星期文本描述，默认值：['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']。TS 类型：`string[]` | N
+months | Array | - | 月文本描述，默认值：['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']。TS 类型：`string[]` | N
nextDecade | String | - | 语言配置，“下个十年” 描述文本 | N
nextMonth | String | - | 语言配置，“下个月” 描述文本 | N
nextYear | String | - | 语言配置，“下一年” 描述文本 | N
@@ -196,9 +184,15 @@ rangeSeparator | String | - | 语言配置，“ 至 ” 范围分隔符描述
selectDate | String | - | 语言配置，“选择日期” 描述文本 | N
selectTime | String | - | 语言配置，“选择时间” 描述文本 | N
weekAbbreviation | String | - | 语言配置，“周” 描述文本 | N
-weekdays | Object | - | 星期文本描述，默认值：['日', '一', '二', '三', '四', '五', '六']。TS 类型：`string[]` | N
+weekdays | Array | - | 星期文本描述，默认值：['日', '一', '二', '三', '四', '五', '六']。TS 类型：`string[]` | N
yearAriaLabel | String | - | 语言配置，“年” 描述文本 | N
+### DescriptionsConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+colonText | String | - | 字段旁边的冒号，中文为“：” | N
+
### DialogConfig
名称 | 类型 | 默认值 | 描述 | 必传
@@ -219,64 +213,54 @@ closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发关闭事件 |
confirm | String | - | 语言配置，“确认”描述文本。TS 类型：`string \| ButtonProps` | N
size | String | 'small' | 尺寸配置，配置Drawer尺寸 | N
-### PopconfirmConfig
+### EmptyConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-cancel | String / Object | - | 语言配置，“取消”描述文本。TS 类型：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
-confirm | String / Object | - | 语言配置，“确定”描述文本。TS 类型：`string \| ButtonProps` | N
-confirmBtnTheme | Object | - | 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; warning: string; danger: string; }` | N
+image | Object | - | 空状态组件各类型的图片配置。TS 类型：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类型：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N
-### TableConfig
+### FormConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-cancelText | String | - | 语言配置，“取消” 描述文本 | N
-clearFilterResultButtonText | String | - | 语言配置，过滤功能中，“清空筛选” 描述文本 | N
-columnConfigButtonText | String | - | 语言配置，列配置功能中，“列配置” 按钮描述文本 | N
-columnConfigDescriptionText | String | - | 语言配置，“请选择需要在表格中显示的数据列” 描述文本，列配置功能中弹框顶部描述 | N
-columnConfigTitleText | String | - | 语言配置，“表格列配置” 描述文本，列配置功能中弹框的标题 | N
-confirmText | String | - | 语言配置，“确认” 描述文本 | N
-empty | String / Slot / Function | - | 语言配置，“暂无数据” 描述文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-expandIcon | Slot / Function | undefined | 展开和收起图标（配置传入收起图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-filterIcon | Slot / Function | undefined | 过滤图标，如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-hideSortTips | Boolean | false | 隐藏排序文本提示 | N
-loadingMoreText | String | - | 语言配置，“点击加载更多” 描述文本 | N
-loadingText | String | - | 语言配置，“正在加载中，请稍后” 描述文本 | N
-resetText | String | - | 语言配置，“重置” 描述文本 | N
-searchResultText | String | - | 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果' | N
-selectAllText | String | - | 语言配置，'全选' 描述文本 | N
-size | String | medium | 全局表格尺寸配置。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-sortAscendingOperationText | String | - | 语言配置，'点击升序' 描述文本 | N
-sortCancelOperationText | String | - | 语言配置，'点击取消排序' 描述文本 | N
-sortDescendingOperationText | String | - | 语言配置，'点击降序' 描述文本 | N
-sortIcon | Slot / Function | undefined | 排序图标（配置传入降序图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-treeExpandAndFoldIcon | Function | undefined | 树形结构，展开和折叠图标。如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode<{ type: 'expand' \| 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+colonText | String | - | 字段旁边的冒号，中文为“：” | N
+errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
+requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N
+requiredMarkPosition | String | left | 表单必填符号（*）显示位置。可选项：left/right | N
-### SelectConfig
+### GuideConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-clearIcon | Function | - | 清除图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-empty | String | - | 语言配置，“暂无数据”描述文本 | N
-filterable | Boolean | false | 全局配置是否可筛选 | N
-loadingText | String | - | 语言配置，“加载中”描述文本 | N
-placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N
+finishButtonProps | Object | - | 最后一步中的完成按钮，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
+nextButtonProps | Object | - | 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`。TS 类型：`ButtonProps` | N
+prevButtonProps | Object | - | 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`。TS 类型：`ButtonProps` | N
+skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`。TS 类型：`ButtonProps` | N
-### TreeConfig
+### ImageConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-empty | String | - | 语言配置，“暂无数据”描述文本 | N
-folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+errorText | String | - | 图片加载失败显示的文本，中文默认为“图片无法显示” | N
+loadingText | String | - | 图片加载中显示的文本，中文默认为“图片加载中” | N
+replaceImageSrc | Function | - | 统一替换图片 `src` 地址，参数为组件的全部属性，返回值为新的图片地址。TS 类型：`(params: ImageProps) => string`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
-### TreeSelectConfig
+### ImageViewerConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-empty | String | - | 语言配置，“暂无数据”描述文本 | N
-loadingText | String | - | 语言配置，“加载中”描述文本 | N
-placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N
+errorText | String | - | 全局语言配置，默认为 “图片加载失败，可尝试重新加载” | N
+mirrorTipText | String | - | 全局语言配置，默认为 “镜像” | N
+originalSizeTipText | String | - | 全局语言配置，默认为 “原始大小” | N
+rotateTipText | String | - | 全局语言配置，默认为 “旋转” | N
+
+### InputConfig
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+autocomplete | String | - | 是否开启自动填充功能 | N
+placeholder | String | - | 语言配置，“请输入”占位符描述文本 | N
### ListConfig
@@ -285,57 +269,57 @@ placeholder | String | - | 语言配置，“请选择”占位符描述文本 |
loadingMoreText | String | - | 语言配置，'点击加载更多' 描述文本 | N
loadingText | String | - | 语言配置，'正在加载中，请稍后' 描述文本 | N
-### UploadConfig
+### MessageConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-cancelUploadText | String | - | 语言配置，“取消上传” 描述文本 | N
-dragger | Object | - | 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' }。TS 类型：`UploadConfigDragger` | N
-file | Object | - | 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }。TS 类型：`UploadConfigFileList` | N
-progress | Object | - | 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }。TS 类型：`UploadConfigProgress` | N
-sizeLimitMessage | String | - | 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'` | N
-triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件', reupload: '重新上传', delete: '删除', continueUpload?: '继续选择' }。TS 类型：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N
+`MessageOptions` | \- | - | 继承 `MessageOptions` 中的全部属性 | N
-### UploadConfigProgress
+### PaginationConfig
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-failText | String | - | 语言配置，“上传失败”文本描述 | N
-successText | String | - | 语言配置，“上传成功”文本描述 | N
-uploadingText | String | - | 语言配置，“上传中”文本描述 | N
-waitingText | String | - | 语言配置，“待上传”文本描述 | N
+itemsPerPage | String | - | 语言配置，每页条数文本，示例：`'{size} 条/页'` | N
+jumpTo | String | - | 语言配置，页码跳转文本，示例：'跳至' | N
+page | String | - | 语言配置，“页”描述文本 | N
+total | String | - | 语言配置，数据总条数文本，示例：`'共 {total} 项数据'` | N
+### PaginationConfig
-### UploadConfigDragger
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+jumper | `(jumperProps: JumperProps)` | `TNode` | 自定义跳转组件。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts)。
`interface JumperProps { current: number; pageCount: number; onChange: (current: number) => void; }`
+ +### PopconfirmConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -clickAndDragText | String | - | 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本 | N -dragDropText | String | - | 语言配置，“释放图标” 描述文本 | N -draggingText | String | - | 语言配置，'拖拽到此区域' 描述文本 | N +cancel | String / Object | - | 语言配置，“取消”描述文本。TS 类型：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +confirm | String / Object | - | 语言配置，“确定”描述文本。TS 类型：`string \| ButtonProps` | N +confirmBtnTheme | Object | - | 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; warning: string; danger: string; }` | N -### UploadConfigFileList +### QRCodeConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -fileNameText | String | - | 语言配置，“文件名” 描述文本 | N -fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N -fileOperationText | String | - | 语言配置，“操作” 描述文本 | N -fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N -fileStatusText | String | - | 语言配置，“状态” 描述文本 | N +expiredText | String | - | 语言配置，“二维码过期”描述文本 | N +refreshText | String | - | 语言配置，“点击刷新”描述文本 | N +scannedText | String | - | 语言配置，“已扫描”描述文本 | N -### FormConfig +### RateConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -colonText | String | - | 字段旁边的冒号，中文为“：” | N -errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N +rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`string[]` | N -### TagConfig +### SelectConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +clearIcon | Function | - | 清除图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +filterable | Boolean | false | 全局配置是否可筛选 | N +loadingText | String | - | 语言配置，“加载中”描述文本 | N +placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N ### StepsConfig @@ -344,73 +328,113 @@ closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出 checkIcon | Slot / Function | - | 已完成步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### AlertConfig +### TableConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -collapseText | String | - | 语言配置，“收起”描述文本 | N -expandText | String | - | 语言配置，“展开更多”描述文本 | N +cancelText | String | - | 语言配置，“取消” 描述文本 | N +clearFilterResultButtonText | String | - | 语言配置，过滤功能中，“清空筛选” 描述文本 | N +columnConfigButtonText | String | - | 语言配置，列配置功能中，“列配置” 按钮描述文本 | N +columnConfigDescriptionText | String | - | 语言配置，“请选择需要在表格中显示的数据列” 描述文本，列配置功能中弹框顶部描述 | N +columnConfigTitleText | String | - | 语言配置，“表格列配置” 描述文本，列配置功能中弹框的标题 | N +confirmText | String | - | 语言配置，“确认” 描述文本 | N +empty | String / Slot / Function | - | 语言配置，“暂无数据” 描述文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +expandIcon | Slot / Function | undefined | 展开和收起图标（配置传入收起图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterIcon | Slot / Function | undefined | 过滤图标，如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +hideSortTips | Boolean | false | 隐藏排序文本提示 | N +loadingMoreText | String | - | 语言配置，“点击加载更多” 描述文本 | N +loadingText | String | - | 语言配置，“正在加载中，请稍后” 描述文本 | N +resetText | String | - | 语言配置，“重置” 描述文本 | N +searchResultText | String | - | 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果' | N +selectAllText | String | - | 语言配置，'全选' 描述文本 | N +size | String | medium | 全局表格尺寸配置。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +sortAscendingOperationText | String | - | 语言配置，'点击升序' 描述文本 | N +sortCancelOperationText | String | - | 语言配置，'点击取消排序' 描述文本 | N +sortDescendingOperationText | String | - | 语言配置，'点击降序' 描述文本 | N +sortIcon | Slot / Function | undefined | 排序图标（配置传入降序图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +treeExpandAndFoldIcon | Function | undefined | 树形结构，展开和折叠图标。如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode<{ type: 'expand' \| 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### DescriptionsConfig +### TagConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -colonText | String | - | 字段旁边的冒号，中文为“：” | N +closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### AnchorConfig +### TimePickerConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N -copyText | String | - | 语言配置，“复制链接” 描述文本 | N +anteMeridiem | String | - | 语言配置，“上午”描述文本 | N +confirm | String | - | 语言配置，“确定”描述文本 | N +now | String | - | 语言配置，“此刻”描述文本 | N +placeholder | String | - | 语言配置，\"请选择时间\"占位符描述文本 | N +postMeridiem | String | - | 语言配置，“下午”描述文本 | N -### MessageConfig +### TransferConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -`MessageOptions` | \- | - | 继承 `MessageOptions` 中的全部属性 | N +empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N +placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N +title | String | - | 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” | N -### ImageConfig +### TreeConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -errorText | String | - | 图片加载失败显示的文本，中文默认为“图片无法显示” | N -loadingText | String | - | 图片加载中显示的文本，中文默认为“图片加载中” | N -replaceImageSrc | Function | - | 统一替换图片 `src` 地址，参数为组件的全部属性，返回值为新的图片地址。TS 类型：`(params: ImageProps) => string`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### ImageViewerConfig +### TreeSelectConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -errorText | String | - | 全局语言配置，默认为 “图片加载失败，可尝试重新加载” | N -mirrorTipText | String | - | 全局语言配置，默认为 “镜像” | N -originalSizeTipText | String | - | 全局语言配置，默认为 “原始大小” | N -rotateTipText | String | - | 全局语言配置，默认为 “旋转” | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +loadingText | String | - | 语言配置，“加载中”描述文本 | N +placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N -### GuideConfig +### TypographyConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -finishButtonProps | Object | - | 最后一步中的完成按钮，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N -nextButtonProps | Object | - | 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`。TS 类型：`ButtonProps` | N -prevButtonProps | Object | - | 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`。TS 类型：`ButtonProps` | N -skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`。TS 类型：`ButtonProps` | N +collapseText | String | - | 语言配置，“收起”描述文本 | N +copiedText | String | - | 语言配置，“复制成功”描述文本 | N +expandText | String | - | 语言配置，“展开”描述文本 | N -### RateConfig +### UploadConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`string[]` | N +cancelUploadText | String | - | 语言配置，“取消上传” 描述文本 | N +dragger | Object | - | 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' }。TS 类型：`UploadConfigDragger` | N +file | Object | - | 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }。TS 类型：`UploadConfigFileList` | N +progress | Object | - | 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }。TS 类型：`UploadConfigProgress` | N +sizeLimitMessage | String | - | 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'` | N +triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件', reupload: '重新上传', delete: '删除', continueUpload?: '继续选择' }。TS 类型：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -### EmptyConfig +### UploadConfigDragger 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -image | Object | - | 空状态组件各类型的图片配置。TS 类型：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类型：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N +clickAndDragText | String | - | 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本 | N +dragDropText | String | - | 语言配置，“释放图标” 描述文本 | N +draggingText | String | - | 语言配置，'拖拽到此区域' 描述文本 | N -### AutoCompleteConfig +### UploadConfigFileList 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -empty | String | - | 语言配置，“暂无数据”描述文本 | N +fileNameText | String | - | 语言配置，“文件名” 描述文本 | N +fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N +fileOperationText | String | - | 语言配置，“操作” 描述文本 | N +fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N +fileStatusText | String | - | 语言配置，“状态” 描述文本 | N + +### UploadConfigProgress + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +failText | String | - | 语言配置，“上传失败”文本描述 | N +successText | String | - | 语言配置，“上传成功”文本描述 | N +uploadingText | String | - | 语言配置，“上传中”文本描述 | N +waitingText | String | - | 语言配置，“待上传”文本描述 | N diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index c1269eeaa..712cc3f27 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -8,10 +8,11 @@ import { GlobalIconConfig } from 'tdesign-icons-vue'; import { CalendarController } from '../calendar'; import { ButtonProps } from '../button'; import { FormErrorMessage } from '../form'; -import { MessageOptions } from '../message'; import { ImageProps } from '../image'; +import { MessageOptions } from '../message'; import { TNode, SizeEnum, AttachNode } from '../common'; export type AttachNodeComponent = 'imageViewer' | 'drawer' | 'dialog' | 'popup'; + export interface TdConfigProviderProps { /** * 全局配置 @@ -33,10 +34,9 @@ export interface GlobalConfigProvider { */ animation?: Partial>>;
/**
- * 组件挂载节点
- * @default document.body
+ * null
*/
- attach?: AttachNode | { [key in AttachNodeComponent]?: AttachNode };
+ attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode };
/**
* 自动填充组件全局配置
*/
@@ -118,6 +118,10 @@ export interface GlobalConfigProvider {
* 气泡确认框全局配置
*/
popconfirm?: PopconfirmConfig;
+ /**
+ * 二维码全局配置
+ */
+ qrcode?: QRCodeConfig;
/**
* 评分全局配置
*/
@@ -154,46 +158,48 @@ export interface GlobalConfigProvider {
* 树选择器组件全局配置
*/
treeSelect?: TreeSelectConfig;
+ /**
+ * 排版组件全局配置
+ */
+ typography?: TypographyConfig;
/**
* 上传组件全局配置
*/
upload?: UploadConfig;
}
-export interface InputConfig {
+export interface AlertConfig {
/**
- * 是否开启自动填充功能
+ * 语言配置，“收起”描述文本
* @default ''
*/
- autocomplete?: string;
+ collapseText?: string;
/**
- * 语言配置，“请输入”占位符描述文本
+ * 语言配置，“展开更多”描述文本
* @default ''
*/
- placeholder?: string;
+ expandText?: string;
}
-export interface PaginationConfig {
- /**
- * 语言配置，每页条数文本，示例：`'{size} 条/页'`
- * @default ''
- */
- itemsPerPage?: string;
+export interface AnchorConfig {
/**
- * 语言配置，页码跳转文本，示例：'跳至'
+ * 语言配置，“链接复制成功”描述文本
* @default ''
*/
- jumpTo?: string;
+ copySuccessText?: string;
/**
- * 语言配置，“页”描述文本
+ * 语言配置，“复制链接” 描述文本
* @default ''
*/
- page?: string;
+ copyText?: string;
+}
+
+export interface AutoCompleteConfig {
/**
- * 语言配置，数据总条数文本，示例：`'共 {total} 项数据'`
+ * 语言配置，“暂无数据”描述文本
* @default ''
*/
- total?: string;
+ empty?: string;
}
export interface CalendarConfig {
@@ -227,10 +233,9 @@ export interface CalendarConfig {
*/
monthRadio?: string;
/**
- * 语言配置，\"月\"选择描述文本。示例：`'{month} 月'`
- * @default ''
+ * 语言配置，“月”选择描述文本。示例：`'{month} 月'`
*/
- monthSelection?: string;
+ monthSelection?: string | ((data: { month: number }) => string);
/**
* 语言配置，“显示周末”描述文本
* @default ''
@@ -293,58 +298,12 @@ export interface ColorPickerConfig {
*/
recentColorTitle?: string;
/**
- * 语言配置，\"系统预设颜色\" 区域标题文本
+ * 语言配置，“系统预设颜色” 区域标题文本
* @default ''
*/
swatchColorTitle?: string;
}
-export interface TransferConfig {
- /**
- * 语言配置，“暂无数据”空数据描述文本
- * @default ''
- */
- empty?: string;
- /**
- * 语言配置，“请输入关键词搜索”占位符描述文本
- * @default ''
- */
- placeholder?: string;
- /**
- * 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项”
- * @default ''
- */
- title?: string;
-}
-
-export interface TimePickerConfig {
- /**
- * 语言配置，“上午”描述文本
- * @default ''
- */
- anteMeridiem?: string;
- /**
- * 语言配置，“确定”描述文本
- * @default ''
- */
- confirm?: string;
- /**
- * 语言配置，“此刻”描述文本
- * @default ''
- */
- now?: string;
- /**
- * 语言配置，\"请选择时间\"占位符描述文本
- * @default ''
- */
- placeholder?: string;
- /**
- * 语言配置，“下午”描述文本
- * @default ''
- */
- postMeridiem?: string;
-}
-
export interface DatePickerConfig {
/**
* 语言配置，“确定” 描述文本
@@ -382,7 +341,7 @@ export interface DatePickerConfig {
*/
monthAriaLabel?: string;
/**
- * 星期文本描述，默认值：['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']
+ * 月文本描述，默认值：['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']
*/
months?: string[];
/**
@@ -463,6 +422,14 @@ export interface DatePickerConfig {
yearAriaLabel?: string;
}
+export interface DescriptionsConfig {
+ /**
+ * 字段旁边的冒号，中文为“：”
+ * @default ''
+ */
+ colonText?: string;
+}
+
export interface DialogConfig {
/**
* 取消按钮风格
@@ -516,307 +483,332 @@ export interface DrawerConfig {
size?: string;
}
-export interface PopconfirmConfig {
- /**
- * 语言配置，“取消”描述文本
- */
- cancel?: string | ButtonProps;
+export interface EmptyConfig {
/**
- * 语言配置，“确定”描述文本
+ * 空状态组件各类型的图片配置
*/
- confirm?: string | ButtonProps;
+ image?: { maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode };
/**
- * 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }
+ * 空状态组件各类型的标题文本配置
*/
- confirmBtnTheme?: { default: string; warning: string; danger: string };
+ titleText?: { maintenance: string; success: string; fail: string; empty: string; networkError: string };
}
-export interface TableConfig {
- /**
- * 语言配置，“取消” 描述文本
- * @default ''
- */
- cancelText?: string;
- /**
- * 语言配置，过滤功能中，“清空筛选” 描述文本
- * @default ''
- */
- clearFilterResultButtonText?: string;
+export interface FormConfig {
/**
- * 语言配置，列配置功能中，“列配置” 按钮描述文本
+ * 字段旁边的冒号，中文为“：”
* @default ''
*/
- columnConfigButtonText?: string;
+ colonText?: string;
/**
- * 语言配置，“请选择需要在表格中显示的数据列” 描述文本，列配置功能中弹框顶部描述
- * @default ''
+ * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`
*/
- columnConfigDescriptionText?: string;
+ errorMessage?: FormErrorMessage;
/**
- * 语言配置，“表格列配置” 描述文本，列配置功能中弹框的标题
- * @default ''
+ * 是否显示必填符号（*），默认显示
+ * @default true
*/
- columnConfigTitleText?: string;
+ requiredMark?: boolean;
/**
- * 语言配置，“确认” 描述文本
- * @default ''
+ * 表单必填符号（*）显示位置
+ * @default left
*/
- confirmText?: string;
+ requiredMarkPosition?: 'left' | 'right';
+}
+
+export interface GuideConfig {
/**
- * 语言配置，“暂无数据” 描述文本
+ * 最后一步中的完成按钮，示例：`{ content: '完成', theme: 'primary' }`
*/
- empty?: string | TNode;
+ finishButtonProps?: ButtonProps;
/**
- * 展开和收起图标（配置传入收起图标即可），如果没有配置，会使用组件内置的默认图标
+ * 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`
*/
- expandIcon?: TNode;
+ nextButtonProps?: ButtonProps;
/**
- * 过滤图标，如果没有配置，会使用组件内置的默认图标
+ * 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`
*/
- filterIcon?: TNode;
+ prevButtonProps?: ButtonProps;
/**
- * 隐藏排序文本提示
- * @default false
+ * 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`
*/
- hideSortTips?: boolean;
+ skipButtonProps?: ButtonProps;
+}
+
+export interface ImageConfig {
/**
- * 语言配置，“点击加载更多” 描述文本
+ * 图片加载失败显示的文本，中文默认为“图片无法显示”
* @default ''
*/
- loadingMoreText?: string;
+ errorText?: string;
/**
- * 语言配置，“正在加载中，请稍后” 描述文本
+ * 图片加载中显示的文本，中文默认为“图片加载中”
* @default ''
*/
loadingText?: string;
/**
- * 语言配置，“重置” 描述文本
- * @default ''
+ * 统一替换图片 `src` 地址，参数为组件的全部属性，返回值为新的图片地址
*/
- resetText?: string;
+ replaceImageSrc?: (params: ImageProps) => string;
+}
+
+export interface ImageViewerConfig {
/**
- * 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果'
+ * 全局语言配置，默认为 “图片加载失败，可尝试重新加载”
* @default ''
*/
- searchResultText?: string;
+ errorText?: string;
/**
- * 语言配置，'全选' 描述文本
+ * 全局语言配置，默认为 “镜像”
* @default ''
*/
- selectAllText?: string;
- /**
- * 全局表格尺寸配置
- * @default medium
- */
- size?: SizeEnum;
+ mirrorTipText?: string;
/**
- * 语言配置，'点击升序' 描述文本
+ * 全局语言配置，默认为 “原始大小”
* @default ''
*/
- sortAscendingOperationText?: string;
+ originalSizeTipText?: string;
/**
- * 语言配置，'点击取消排序' 描述文本
+ * 全局语言配置，默认为 “旋转”
* @default ''
*/
- sortCancelOperationText?: string;
+ rotateTipText?: string;
+}
+
+export interface InputConfig {
/**
- * 语言配置，'点击降序' 描述文本
+ * 是否开启自动填充功能
* @default ''
*/
- sortDescendingOperationText?: string;
- /**
- * 排序图标（配置传入降序图标即可），如果没有配置，会使用组件内置的默认图标
- */
- sortIcon?: TNode;
+ autocomplete?: string;
/**
- * 树形结构，展开和折叠图标。如果没有配置，会使用组件内置的默认图标
+ * 语言配置，“请输入”占位符描述文本
+ * @default ''
*/
- treeExpandAndFoldIcon?: TNode<{ type: 'expand' | 'fold' }>;
+ placeholder?: string;
}
-export interface SelectConfig {
+export interface ListConfig {
/**
- * 清除图标，【注意】使用渲染函数输出图标组件
+ * 语言配置，'点击加载更多' 描述文本
+ * @default ''
*/
- clearIcon?: TNode;
+ loadingMoreText?: string;
/**
- * 语言配置，“暂无数据”描述文本
+ * 语言配置，'正在加载中，请稍后' 描述文本
* @default ''
*/
- empty?: string;
+ loadingText?: string;
+}
+
+export interface MessageConfig extends MessageOptions {}
+
+export interface PaginationConfig {
/**
- * 全局配置是否可筛选
- * @default false
+ * 语言配置，每页条数文本，示例：`'{size} 条/页'`
+ * @default ''
*/
- filterable?: boolean;
+ itemsPerPage?: string;
/**
- * 语言配置，“加载中”描述文本
+ * 语言配置，页码跳转文本，示例：'跳至'
* @default ''
*/
- loadingText?: string;
+ jumpTo?: string;
/**
- * 语言配置，“请选择”占位符描述文本
+ * 语言配置，“页”描述文本
* @default ''
*/
- placeholder?: string;
-}
-
-export interface TreeConfig {
+ page?: string;
/**
- * 语言配置，“暂无数据”描述文本
+ * 语言配置，数据总条数文本，示例：`'共 {total} 项数据'`
* @default ''
*/
- empty?: string;
+ total?: string;
/**
- * 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件
+ * 自定义跳转组件
*/
- folderIcon?: TNode;
+ jumper?: (jumperProps: JumperProps) => TNode;
}
-export interface TreeSelectConfig {
+export interface PopconfirmConfig {
/**
- * 语言配置，“暂无数据”描述文本
- * @default ''
+ * 语言配置，“取消”描述文本
*/
- empty?: string;
+ cancel?: string | ButtonProps;
/**
- * 语言配置，“加载中”描述文本
- * @default ''
+ * 语言配置，“确定”描述文本
*/
- loadingText?: string;
+ confirm?: string | ButtonProps;
/**
- * 语言配置，“请选择”占位符描述文本
- * @default ''
+ * 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }
*/
- placeholder?: string;
+ confirmBtnTheme?: { default: string; warning: string; danger: string };
}
-export interface ListConfig {
+export interface QRCodeConfig {
/**
- * 语言配置，'点击加载更多' 描述文本
+ * 语言配置，“二维码过期”描述文本
* @default ''
*/
- loadingMoreText?: string;
+ expiredText?: string;
/**
- * 语言配置，'正在加载中，请稍后' 描述文本
+ * 语言配置，“点击刷新”描述文本
* @default ''
*/
- loadingText?: string;
+ refreshText?: string;
+ /**
+ * 语言配置，“已扫描”描述文本
+ * @default ''
+ */
+ scannedText?: string;
}
-export interface UploadConfig {
+export interface RateConfig {
/**
- * 语言配置，“取消上传” 描述文本
- * @default ''
+ * 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']
*/
- cancelUploadText?: string;
+ rateText?: string[];
+}
+
+export interface SelectConfig {
/**
- * 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' }
+ * 清除图标，【注意】使用渲染函数输出图标组件
*/
- dragger?: UploadConfigDragger;
+ clearIcon?: TNode;
/**
- * 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }
+ * 语言配置，“暂无数据”描述文本
+ * @default ''
*/
- file?: UploadConfigFileList;
+ empty?: string;
/**
- * 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }
+ * 全局配置是否可筛选
+ * @default false
*/
- progress?: UploadConfigProgress;
+ filterable?: boolean;
/**
- * 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'`
+ * 语言配置，“加载中”描述文本
* @default ''
*/
- sizeLimitMessage?: string;
+ loadingText?: string;
/**
- * 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件', reupload: '重新上传', delete: '删除', continueUpload?: '继续选择' }
+ * 语言配置，“请选择”占位符描述文本
+ * @default ''
*/
- triggerUploadText?: UploadTriggerUploadText;
+ placeholder?: string;
}
-export interface UploadConfigProgress {
+export interface StepsConfig {
/**
- * 语言配置，“上传失败”文本描述
+ * 已完成步骤图标，【注意】使用渲染函数输出图标组件
+ */
+ checkIcon?: TNode;
+ /**
+ * 错误步骤图标，【注意】使用渲染函数输出图标组件
+ */
+ errorIcon?: TNode;
+}
+
+export interface TableConfig {
+ /**
+ * 语言配置，“取消” 描述文本
* @default ''
*/
- failText?: string;
+ cancelText?: string;
/**
- * 语言配置，“上传成功”文本描述
+ * 语言配置，过滤功能中，“清空筛选” 描述文本
* @default ''
*/
- successText?: string;
+ clearFilterResultButtonText?: string;
/**
- * 语言配置，“上传中”文本描述
+ * 语言配置，列配置功能中，“列配置” 按钮描述文本
* @default ''
*/
- uploadingText?: string;
+ columnConfigButtonText?: string;
/**
- * 语言配置，“待上传”文本描述
+ * 语言配置，“请选择需要在表格中显示的数据列” 描述文本，列配置功能中弹框顶部描述
* @default ''
*/
- waitingText?: string;
-}
-
-export interface UploadConfigDragger {
+ columnConfigDescriptionText?: string;
/**
- * 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本
+ * 语言配置，“表格列配置” 描述文本，列配置功能中弹框的标题
* @default ''
*/
- clickAndDragText?: string;
+ columnConfigTitleText?: string;
/**
- * 语言配置，“释放图标” 描述文本
+ * 语言配置，“确认” 描述文本
* @default ''
*/
- dragDropText?: string;
+ confirmText?: string;
/**
- * 语言配置，'拖拽到此区域' 描述文本
+ * 语言配置，“暂无数据” 描述文本
+ */
+ empty?: string | TNode;
+ /**
+ * 展开和收起图标（配置传入收起图标即可），如果没有配置，会使用组件内置的默认图标
+ */
+ expandIcon?: TNode;
+ /**
+ * 过滤图标，如果没有配置，会使用组件内置的默认图标
+ */
+ filterIcon?: TNode;
+ /**
+ * 隐藏排序文本提示
+ * @default false
+ */
+ hideSortTips?: boolean;
+ /**
+ * 语言配置，“点击加载更多” 描述文本
* @default ''
*/
- draggingText?: string;
-}
-
-export interface UploadConfigFileList {
+ loadingMoreText?: string;
/**
- * 语言配置，“文件名” 描述文本
+ * 语言配置，“正在加载中，请稍后” 描述文本
* @default ''
*/
- fileNameText?: string;
+ loadingText?: string;
/**
- * 语言配置，“上传日期” 描述文本
+ * 语言配置，“重置” 描述文本
* @default ''
*/
- fileOperationDateText?: string;
+ resetText?: string;
/**
- * 语言配置，“操作” 描述文本
+ * 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果'
* @default ''
*/
- fileOperationText?: string;
+ searchResultText?: string;
/**
- * 语言配置，“文件尺寸” 描述文本
+ * 语言配置，'全选' 描述文本
* @default ''
*/
- fileSizeText?: string;
+ selectAllText?: string;
/**
- * 语言配置，“状态” 描述文本
+ * 全局表格尺寸配置
+ * @default medium
+ */
+ size?: SizeEnum;
+ /**
+ * 语言配置，'点击升序' 描述文本
* @default ''
*/
- fileStatusText?: string;
-}
-
-export interface FormConfig {
+ sortAscendingOperationText?: string;
/**
- * 字段旁边的冒号，中文为“：”
+ * 语言配置，'点击取消排序' 描述文本
* @default ''
*/
- colonText?: string;
+ sortCancelOperationText?: string;
/**
- * 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`
+ * 语言配置，'点击降序' 描述文本
+ * @default ''
*/
- errorMessage?: FormErrorMessage;
+ sortDescendingOperationText?: string;
/**
- * 是否显示必填符号（*），默认显示
- * @default true
+ * 排序图标（配置传入降序图标即可），如果没有配置，会使用组件内置的默认图标
*/
- requiredMark?: boolean;
+ sortIcon?: TNode;
+ /**
+ * 树形结构，展开和折叠图标。如果没有配置，会使用组件内置的默认图标
+ */
+ treeExpandAndFoldIcon?: TNode<{ type: 'expand' | 'fold' }>;
}
export interface TagConfig {
@@ -826,136 +818,196 @@ export interface TagConfig {
closeIcon?: TNode;
}
-export interface StepsConfig {
+export interface TimePickerConfig {
/**
- * 已完成步骤图标，【注意】使用渲染函数输出图标组件
+ * 语言配置，“上午”描述文本
+ * @default ''
*/
- checkIcon?: TNode;
+ anteMeridiem?: string;
/**
- * 错误步骤图标，【注意】使用渲染函数输出图标组件
+ * 语言配置，“确定”描述文本
+ * @default ''
*/
- errorIcon?: TNode;
-}
-
-export interface AlertConfig {
+ confirm?: string;
/**
- * 语言配置，“收起”描述文本
+ * 语言配置，“此刻”描述文本
* @default ''
*/
- collapseText?: string;
+ now?: string;
/**
- * 语言配置，“展开更多”描述文本
+ * 语言配置，\"请选择时间\"占位符描述文本
* @default ''
*/
- expandText?: string;
-}
-
-export interface DescriptionsConfig {
+ placeholder?: string;
/**
- * 字段旁边的冒号，中文为“：”
+ * 语言配置，“下午”描述文本
* @default ''
*/
- colonText?: string;
+ postMeridiem?: string;
}
-export interface AnchorConfig {
+export interface TransferConfig {
/**
- * 语言配置，“链接复制成功”描述文本
+ * 语言配置，“暂无数据”空数据描述文本
* @default ''
*/
- copySuccessText?: string;
+ empty?: string;
/**
- * 语言配置，“复制链接” 描述文本
+ * 语言配置，“请输入关键词搜索”占位符描述文本
* @default ''
*/
- copyText?: string;
+ placeholder?: string;
+ /**
+ * 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项”
+ * @default ''
+ */
+ title?: string;
}
-export interface MessageConfig extends MessageOptions {}
+export interface TreeConfig {
+ /**
+ * 语言配置，“暂无数据”描述文本
+ * @default ''
+ */
+ empty?: string;
+ /**
+ * 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件
+ */
+ folderIcon?: TNode;
+}
-export interface ImageConfig {
+export interface TreeSelectConfig {
/**
- * 图片加载失败显示的文本，中文默认为“图片无法显示”
+ * 语言配置，“暂无数据”描述文本
* @default ''
*/
- errorText?: string;
+ empty?: string;
/**
- * 图片加载中显示的文本，中文默认为“图片加载中”
+ * 语言配置，“加载中”描述文本
* @default ''
*/
loadingText?: string;
/**
- * 统一替换图片 `src` 地址，参数为组件的全部属性，返回值为新的图片地址
+ * 语言配置，“请选择”占位符描述文本
+ * @default ''
*/
- replaceImageSrc?: (params: ImageProps) => string;
+ placeholder?: string;
}
-export interface ImageViewerConfig {
+export interface TypographyConfig {
/**
- * 全局语言配置，默认为 “图片加载失败，可尝试重新加载”
+ * 语言配置，“收起”描述文本
* @default ''
*/
- errorText?: string;
+ collapseText?: string;
/**
- * 全局语言配置，默认为 “镜像”
+ * 语言配置，“复制成功”描述文本
* @default ''
*/
- mirrorTipText?: string;
+ copiedText?: string;
/**
- * 全局语言配置，默认为 “原始大小”
+ * 语言配置，“展开”描述文本
* @default ''
*/
- originalSizeTipText?: string;
+ expandText?: string;
+}
+
+export interface UploadConfig {
/**
- * 全局语言配置，默认为 “旋转”
+ * 语言配置，“取消上传” 描述文本
* @default ''
*/
- rotateTipText?: string;
-}
-
-export interface GuideConfig {
+ cancelUploadText?: string;
/**
- * 最后一步中的完成按钮，示例：`{ content: '完成', theme: 'primary' }`
+ * 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' }
*/
- finishButtonProps?: ButtonProps;
+ dragger?: UploadConfigDragger;
/**
- * 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`
+ * 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }
*/
- nextButtonProps?: ButtonProps;
+ file?: UploadConfigFileList;
/**
- * 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`
+ * 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }
*/
- prevButtonProps?: ButtonProps;
+ progress?: UploadConfigProgress;
/**
- * 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`
+ * 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'`
+ * @default ''
*/
- skipButtonProps?: ButtonProps;
+ sizeLimitMessage?: string;
+ /**
+ * 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件', reupload: '重新上传', delete: '删除', continueUpload?: '继续选择' }
+ */
+ triggerUploadText?: UploadTriggerUploadText;
}
-export interface RateConfig {
+export interface UploadConfigDragger {
/**
- * 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']
+ * 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本
+ * @default ''
*/
- rateText?: string[];
+ clickAndDragText?: string;
+ /**
+ * 语言配置，“释放图标” 描述文本
+ * @default ''
+ */
+ dragDropText?: string;
+ /**
+ * 语言配置，'拖拽到此区域' 描述文本
+ * @default ''
+ */
+ draggingText?: string;
}
-export interface EmptyConfig {
+export interface UploadConfigFileList {
/**
- * 空状态组件各类型的图片配置
+ * 语言配置，“文件名” 描述文本
+ * @default ''
*/
- image?: { maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode };
+ fileNameText?: string;
/**
- * 空状态组件各类型的标题文本配置
+ * 语言配置，“上传日期” 描述文本
+ * @default ''
*/
- titleText?: { maintenance: string; success: string; fail: string; empty: string; networkError: string };
+ fileOperationDateText?: string;
+ /**
+ * 语言配置，“操作” 描述文本
+ * @default ''
+ */
+ fileOperationText?: string;
+ /**
+ * 语言配置，“文件尺寸” 描述文本
+ * @default ''
+ */
+ fileSizeText?: string;
+ /**
+ * 语言配置，“状态” 描述文本
+ * @default ''
+ */
+ fileStatusText?: string;
}
-export interface AutoCompleteConfig {
+export interface UploadConfigProgress {
/**
- * 语言配置，“暂无数据”描述文本
+ * 语言配置，“上传失败”文本描述
* @default ''
*/
- empty?: string;
+ failText?: string;
+ /**
+ * 语言配置，“上传成功”文本描述
+ * @default ''
+ */
+ successText?: string;
+ /**
+ * 语言配置，“上传中”文本描述
+ * @default ''
+ */
+ uploadingText?: string;
+ /**
+ * 语言配置，“待上传”文本描述
+ * @default ''
+ */
+ waitingText?: string;
}
export type AnimationType = 'ripple' | 'expand' | 'fade';
@@ -968,6 +1020,12 @@ export interface ConfigPresetDate {
export type DateConfigValue = string | Date | Array;
+export interface JumperProps {
+ current: number;
+ pageCount: number;
+ onChange: (current: number) => void;
+}
+
export interface UploadTriggerUploadText {
image?: string;
normal?: string;
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
index 37af7cf35..f22865245 100644
--- a/src/date-picker/DatePicker.tsx
+++ b/src/date-picker/DatePicker.tsx
@@ -249,25 +249,37 @@ export default defineComponent({
}
function processDate(date: Date) {
- const val = value.value as DateMultipleValue;
- const isSameDate = val.some((val) => isSame(dayjs(val).toDate(), date));
+ let isSameDate: boolean;
+ const currentValue = (value.value || []) as DateMultipleValue;
+ const { dayjsLocale } = global.value;
+
let currentDate: DateMultipleValue;
+ if (props.mode !== 'week') isSameDate = currentValue.some((val) => isSame(parseToDayjs(val, formatRef.value.format).toDate(), date, props.mode, dayjsLocale));
+ else {
+ isSameDate = currentValue.some((val) => val === dayjs(date).locale(dayjsLocale).format(formatRef.value.format));
+ }
if (!isSameDate) {
- currentDate = val.concat(
+ currentDate = currentValue.concat(
formatDate(date, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }),
);
} else {
- currentDate = val.filter(
+ currentDate = currentValue.filter(
(val) => formatDate(val, { format: formatRef.value.format, targetFormat: formatRef.value.valueType })
!== formatDate(date, { format: formatRef.value.format, targetFormat: formatRef.value.valueType }),
);
}
-
- return currentDate.sort((a, b) => dayjs(a).valueOf() - dayjs(b).valueOf());
+ return currentDate;
}
const onTagRemoveClick = (ctx: TagInputRemoveContext) => {
+ if (['week', 'quarter'].includes(props.mode)) {
+ onChange?.(ctx.value, {
+ trigger: 'tag-remove',
+ });
+ return;
+ }
+
const removeDate = dayjs(ctx.item).toDate();
const newDate = processDate(removeDate);
onChange?.(newDate, {
diff --git a/src/date-picker/_example-composition/multiple.vue b/src/date-picker/_example-composition/multiple.vue
index 598c50ba8..786102504 100644
--- a/src/date-picker/_example-composition/multiple.vue
+++ b/src/date-picker/_example-composition/multiple.vue
@@ -1,6 +1,15 @@
-
@@ -8,9 +17,9 @@
import { ref } from 'vue';
const date = ref(['2000-01-04', '2000-01-03', '2000-01-05']);
+const week = ref([]);
+const quarter = ref([]);
const handleChange = (value, context) => {
console.log('onChange:', value, context);
- console.log('timestamp:', context.dayjsValue.valueOf());
- console.log('YYYYMMDD:', context.dayjsValue.format('YYYYMMDD'));
};
diff --git a/src/date-picker/_example/multiple.vue b/src/date-picker/_example/multiple.vue
index eef058a89..1dd616306 100644
--- a/src/date-picker/_example/multiple.vue
+++ b/src/date-picker/_example/multiple.vue
@@ -1,6 +1,15 @@
@@ -9,13 +18,13 @@ export default {
data() {
return {
date: ['2024-01-04'],
+ week: [],
+ quarter: [],
};
},
methods: {
handleChange(value, context) {
console.log('onChange:', value, context);
- console.log('timestamp:', context.dayjsValue.valueOf());
- console.log('YYYYMMDD:', context.dayjsValue.format('YYYYMMDD'));
},
},
};
diff --git a/src/date-picker/base/Table.tsx b/src/date-picker/base/Table.tsx
index d4c6d16e1..23776c098 100644
--- a/src/date-picker/base/Table.tsx
+++ b/src/date-picker/base/Table.tsx
@@ -1,7 +1,8 @@
import { defineComponent, PropType, computed } from 'vue';
+import { isArray } from 'lodash-es';
import TDatePickerCell from './Cell';
import { useConfig, usePrefixClass } from '../../hooks/useConfig';
-import type { TdDatePickerProps } from '../type';
+import type { TdDatePickerProps, DateMultipleValue } from '../type';
import { parseToDayjs } from '../../_common/js/date-picker/format';
export default defineComponent({
@@ -12,6 +13,7 @@ export default defineComponent({
default: 'date',
},
firstDayOfWeek: Number,
+ multiple: Boolean,
data: Array,
time: String,
value: [String, Number, Array, Date],
@@ -42,18 +44,18 @@ export default defineComponent({
const showThead = computed(() => props.mode === 'date' || props.mode === 'week');
// 高亮周区间
- const weekRowClass = (value: any, format: string, targetValue: Date) => {
+ const weekRowClass = (value: any, targetValue: Date) => {
if (props.mode !== 'week' || !value) return {};
- if (Array.isArray(value)) {
+ if (isArray(value)) {
if (!value.length) return {};
- const [startObj, endObj] = value.map((v) => v && parseToDayjs(v, format));
+ const [startObj, endObj] = value.map((v) => v && parseToDayjs(v, props.format));
const startYear = startObj && startObj.year();
const startWeek = startObj?.locale?.(dayjsLocale)?.week?.();
const endYear = endObj && endObj.year();
const endWeek = endObj?.locale?.(dayjsLocale)?.week?.();
- const targetObj = parseToDayjs(targetValue, format);
+ const targetObj = parseToDayjs(targetValue, props.format);
const targetYear = targetObj.year();
const targetWeek = targetObj.week();
const isActive = (targetYear === startYear && targetWeek === startWeek) || (targetYear === endYear && targetWeek === endWeek);
@@ -67,21 +69,34 @@ export default defineComponent({
return {
[`${COMPONENT_NAME.value}-${props.mode}-row--active`]:
- parseToDayjs(value, format).locale(dayjsLocale).week()
- === parseToDayjs(targetValue, format).locale(dayjsLocale).week(),
+ parseToDayjs(value, props.format).locale(dayjsLocale).week()
+ === parseToDayjs(targetValue, props.format).locale(dayjsLocale).week(),
};
};
+ const multipleWeekRowClass = (value: DateMultipleValue, targetValue: Date) => {
+ const targetDayjs = parseToDayjs(targetValue, props.format);
+ if (props.mode !== 'week' || (Array.isArray(value) && !value.length)) return {};
+ const isSomeYearWeek = value
+ .map?.((v) => parseToDayjs(v, props.format))
+ .some((item) => item.week() === targetDayjs.week() && item.year() === targetDayjs.year());
+ return {
+ [`${COMPONENT_NAME.value}-${props.mode}-row--active`]: isSomeYearWeek,
+ };
+ };
+
+ const activeRowCss = props.multiple ? multipleWeekRowClass : weekRowClass;
+
return {
COMPONENT_NAME,
weekArr,
showThead,
- weekRowClass,
+ activeRowCss,
};
},
render() {
const {
- COMPONENT_NAME, weekArr, showThead, weekRowClass,
+ COMPONENT_NAME, weekArr, showThead, activeRowCss,
} = this;
return (
@@ -102,7 +117,7 @@ export default defineComponent({
key={i}
class={{
[`${COMPONENT_NAME}-${this.mode}-row`]: true,
- ...weekRowClass(this.value, this.format, row[0].value),
+ ...activeRowCss(this.value as any | DateMultipleValue[], row[0].value),
}}
>
{row.map((col: any, j: number) => (
diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
index 1d66bbc58..6c6a1d1a2 100644
--- a/src/date-picker/date-picker.en-US.md
+++ b/src/date-picker/date-picker.en-US.md
@@ -36,7 +36,8 @@ defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typ
valueType | String | - | Typescript：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
cancelRangeSelectLimit | Boolean | false | Explanation: The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N
onBlur | Function | | Typescript：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
| N -onChange | Function | | Typescript：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
| N +onChange | Function | | Typescript：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear' \| 'tag-remove'`
| N +onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
Triggered when the clear button is clicked | N onConfirm | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| N onFocus | Function | | Typescript：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
| N onPick | Function | | Typescript：`(value: DateValue) => void`
| N @@ -47,7 +48,8 @@ onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: M name | params | description -- | -- | -- blur | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | \- -change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
+change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear' \| 'tag-remove'`
+clear | `(context: { e: MouseEvent })` | Triggered when the clear button is clicked confirm | `(context: { date: Date, e: MouseEvent })` | \- focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | \- pick | `(value: DateValue)` | \- diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index 7e69a54d7..0093d1f57 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -36,7 +36,8 @@ defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性 valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`。TS 类型：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N cancelRangeSelectLimit | Boolean | false | 说明：默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N onBlur | Function | | TS 类型：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
当输入框失去焦点时触发 | N -onChange | Function | | TS 类型：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
| N +onChange | Function | | TS 类型：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear' \| 'tag-remove'`
| N +onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
清空按钮点击时触发 | N onConfirm | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`
如果存在“确定”按钮，则点击“确定”按钮时触发 | N onFocus | Function | | TS 类型：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onPick | Function | | TS 类型：`(value: DateValue) => void`
面板选中值后触发 | N @@ -47,7 +48,8 @@ onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: Mo 名称 | 参数 | 描述 -- | -- | -- blur | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | 当输入框失去焦点时触发 -change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
+change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear' \| 'tag-remove'`
+clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 confirm | `(context: { date: Date, e: MouseEvent })` | 如果存在“确定”按钮，则点击“确定”按钮时触发 focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | 输入框获得焦点时触发 pick | `(value: DateValue)` | 面板选中值后触发 diff --git a/src/date-picker/panel/PanelContent.tsx b/src/date-picker/panel/PanelContent.tsx index 58441736f..9d455ad97 100644 --- a/src/date-picker/panel/PanelContent.tsx +++ b/src/date-picker/panel/PanelContent.tsx @@ -22,6 +22,7 @@ export default defineComponent({ month: Number, tableData: Array, time: String, + multiple: Boolean, popupVisible: Boolean, firstDayOfWeek: Number, partial: String, @@ -71,6 +72,7 @@ export default defineComponent({ time: this.time, value: this.value, format: this.format, + multiple: this.multiple, firstDayOfWeek: this.firstDayOfWeek, onCellClick: (date: Date, { e }: { e: MouseEvent }) => this.onCellClick?.(date, { e, partial: this.partial }), onCellMouseEnter: (date: Date) => this.onCellMouseEnter?.(date, { partial: this.partial }), diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 711109c24..d07ba66ae 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -12,3 +12,5 @@ export * from './useResizeObserver'; export * from './useVirtualScrollNew'; export * from './useVModel'; export * from './useImagePreviewUrl'; +export * from './useMutationObservable'; +export * from './useVariables'; diff --git a/src/hooks/useMutationObservable.ts b/src/hooks/useMutationObservable.ts new file mode 100644 index 000000000..f0146e50f --- /dev/null +++ b/src/hooks/useMutationObservable.ts @@ -0,0 +1,67 @@ +import { + onBeforeUnmount, onMounted, ref, watch, +} from 'vue'; +import { debounce, isEqual } from 'lodash-es'; + +export interface MutationCallback { + (mutations: MutationRecord[]): void; +} + +interface Options { + debounceTime?: number; + config?: MutationObserverInit; +} + +const DEFAULT_OPTIONS: Options = { + debounceTime: 0, + config: { + attributes: true, + childList: true, + characterData: true, + subtree: true, + }, +}; + +/** + * useMutationObservable + * @param targetEl 监听对象 + * @param callback 回调方法 + * @param options 配置项 + */ +export function useMutationObservable( + targetEl: HTMLElement | null, + callback: MutationCallback, + options: Options = DEFAULT_OPTIONS, +) { + const mergedOptions = ref({ ...DEFAULT_OPTIONS, ...options });
+ let observer: MutationObserver | null = null;
+
+ const initObserver = () => {
+ if (!targetEl) return;
+
+ const { debounceTime = 0, config = DEFAULT_OPTIONS.config } = mergedOptions.value;
+ const handler: MutationCallback = (...args) => {
+ callback?.(...args);
+ };
+
+ observer?.disconnect();
+ observer = new MutationObserver(debounceTime > 0 ? debounce(handler, debounceTime) : handler);
+ observer.observe(targetEl, config);
+ };
+
+ watch(
+ () => options,
+ (newOptions) => {
+ if (!isEqual(newOptions, mergedOptions.value)) {
+ mergedOptions.value = { ...DEFAULT_OPTIONS, ...newOptions };
+ initObserver();
+ }
+ },
+ { deep: true },
+ );
+
+ onMounted(initObserver);
+ onBeforeUnmount(() => observer?.disconnect());
+}
+
+export default useMutationObservable;
diff --git a/src/hooks/useVariables.ts b/src/hooks/useVariables.ts
new file mode 100644
index 000000000..b0e501ba0
--- /dev/null
+++ b/src/hooks/useVariables.ts
@@ -0,0 +1,51 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { isString } from 'lodash-es';
+import { getColorTokenColor } from '../_common/js/utils/getColorTokenColor';
+import { THEME_MODE } from '../_common/js/common';
+import useMutationObservable from './useMutationObservable';
+
+/**
+ * useVariables
+ * @param variable CSS 变量名
+ * @example
+ * const { textColor, brandColor } = useVariables({
+ * textColor: '--td-color-primary',
+ * brandColor: '--td-brand-color',
+ * });
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function useVariables>(variables: T): Record> {
+ const values = {} as Record>;
+ let varsArray: string[] = [];
+
+ varsArray = Object.values(variables);
+ Object.entries(variables).forEach(([key, varName]) => {
+ values[key as keyof T] = ref(getColorTokenColor(varName));
+ });
+
+ varsArray.forEach((varName) => {
+ values[varName as keyof T] = ref(getColorTokenColor(varName));
+ });
+
+ const targetElement = document?.documentElement;
+ useMutationObservable(targetElement, (mutationsList) => {
+ mutationsList.some((mutation) => {
+ if (mutation.type === 'attributes' && mutation.attributeName === THEME_MODE) {
+ if (isString(variables) || Array.isArray(variables)) {
+ varsArray.forEach((varName) => {
+ values[varName].value = getColorTokenColor(varName);
+ });
+ } else {
+ Object.entries(variables).forEach(([key, varName]) => {
+ values[key].value = getColorTokenColor(varName);
+ });
+ }
+ return true;
+ }
+ return false;
+ });
+ });
+
+ return values;
+}
diff --git a/src/hooks/useVirtualScroll.ts b/src/hooks/useVirtualScroll.ts
index fb8a32eda..607f7ead7 100644
--- a/src/hooks/useVirtualScroll.ts
+++ b/src/hooks/useVirtualScroll.ts
@@ -1,11 +1,13 @@
-/* eslint-disable */
+/* eslint-disable no-param-reassign */
/**
* 当前虚拟滚动存在的问题
* 1. 反复拖动滚动条，底部会出现奇怪的高度
* 2. 表格高度发生变化时，底部也会出现奇怪的高度
* 3. 无法直接定位滚动到某个元素，进而无法实现 Select 组件直接滚动到选中项
*/
-import { ref, toRefs, reactive, onMounted, computed, watch, nextTick } from 'vue';
+import {
+ ref, toRefs, reactive, onMounted, computed, watch, nextTick,
+} from 'vue';
// 虚拟滚动Hooks的完整实现，只所以封装成hooks，主要是为了方便跟其他组件搭配使用，比如说表格或者下拉框
const useVirtualScroll = ({
@@ -75,7 +77,7 @@ const useVirtualScroll = ({
const firstRow = visibleData[0];
if (firstRow) {
// 修复只有一个元素时存在偏移的问题
- return visibleData.length === 1 ? 0 : state.cachedScrollY[firstRow.$index];
+ return visibleData.length === 1 ? 0 : state.cachedScrollY[firstRow.$index] ?? 0;
}
return 0;
});
@@ -194,7 +196,7 @@ const useVirtualScroll = ({
state.cachedHeight[lastIndex] = lineHeight;
}
distance -= state.cachedHeight[lastIndex];
- lastIndex++;
+ lastIndex += 1;
}
if (lastIndex >= data.value.length) {
index = data.value.length - 1;
@@ -219,7 +221,7 @@ const useVirtualScroll = ({
} else {
// 向上滚动
while (distance < 0) {
- lastIndex--;
+ lastIndex -= 1;
if (!state.cachedHeight[lastIndex]) {
state.cachedHeight[lastIndex] = lineHeight;
}
@@ -244,7 +246,7 @@ const useVirtualScroll = ({
!fixedHeight && watch(updateId, calculateScrollY, { flush: 'post' });
const handleRowMounted = () => {
if (!isVirtual.value) return;
- updateId.value++;
+ updateId.value += 1;
};
watch(data, () => {
reset();
diff --git a/src/image-viewer/_example-composition/multiple.vue b/src/image-viewer/_example-composition/multiple.vue
index 377c1352e..6ffae64df 100644
--- a/src/image-viewer/_example-composition/multiple.vue
+++ b/src/image-viewer/_example-composition/multiple.vue
@@ -4,7 +4,7 @@
![test]()
-
![test]()
-
| N -onDownload | Function | | Typescript：`(url: string) => void`
| N +onDownload | Function | | Typescript：`(url: string \| File) => void`
| N onIndexChange | Function | | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`
| N ### ImageViewer Events diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md index c12486895..cedd057ce 100644 --- a/src/image-viewer/image-viewer.md +++ b/src/image-viewer/image-viewer.md @@ -1,10 +1,12 @@ :: BASE_DOC :: ## API + ### ImageViewer Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +attach | String / Function | 'body' | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N @@ -18,13 +20,13 @@ mode | String | modal | 模态预览（modal）和非模态预览（modeless)。 navigationArrow | Boolean / Slot / Function | true | 切换预览图片的左图标，可自定义。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N showOverlay | Boolean | undefined | 是否显示遮罩层。`mode=modal` 时，默认显示；`mode=modeless` 时，默认不显示 | N title | String / Slot / Function | - | 预览标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: () => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N viewerScale | Object | - | 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效。TS 类型：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` | N defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N zIndex | Number | - | 层级，默认为 2000 | N onClose | Function | | TS 类型：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`
关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键 | N -onDownload | Function | | TS 类型：`(url: string) => void`
自定义预览图片下载操作，url为图片链接 | N +onDownload | Function | | TS 类型：`(url: string \| File) => void`
自定义预览图片下载操作，url为图片链接 | N onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`
预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N ### ImageViewer Events diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx index e539c80fd..a962fd489 100644 --- a/src/image-viewer/image-viewer.tsx +++ b/src/image-viewer/image-viewer.tsx @@ -2,6 +2,7 @@ import { computed, defineComponent, ref, toRefs, watch, } from 'vue'; import { ChevronLeftIcon, ChevronDownIcon, CloseIcon } from 'tdesign-icons-vue'; +import { isNumber } from 'lodash-es'; import props from './props'; import Container from './base/Container'; import TImageViewerIcon from './base/ImageModalIcon'; @@ -104,7 +105,10 @@ export default defineComponent({ downloadFile(url); }; - const openHandler = () => { + const openHandler = (index: number) => { + if (isNumber(index)) { + onImgClick(index); + } setVisibleValue(true); }; diff --git a/src/image/image.tsx b/src/image/image.tsx index 9743382ab..cc66686a6 100644 --- a/src/image/image.tsx +++ b/src/image/image.tsx @@ -112,7 +112,7 @@ export default defineComponent({ }); onUnmounted(() => { - imageRef.value && io && (io as IntersectionObserver).unobserve(imageRef.value as Element); + imageRef.value && io.value && (io.value as IntersectionObserver).unobserve(imageRef.value as Element); }); return { diff --git a/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap b/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap index a20e52de3..e8ce67676 100644 --- a/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap +++ b/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap @@ -3,14 +3,22 @@ exports[`Submenu > props > :disabled 1`] = ` +> + + `; exports[`Submenu > props > :name 1`] = ` +> + + `; exports[`Submenu > slot > 1`] = `
@@ -50,6 +58,11 @@ exports[`Submenu > slot > 1`] = `
+
`;
@@ -73,6 +86,9 @@ exports[`Submenu > slot > 1`] = `
style="--padding-left: 44px; display: none;"
/>
+
`;
@@ -97,5 +113,8 @@ exports[`Submenu > slot > 1`] = `
style="--padding-left: 44px; display: none;"
/>
</transition-stub>
+ <div
+ style="display: none;"
+ />
</li>
`;
diff --git a/src/menu/menu-item.tsx b/src/menu/menu-item.tsx
index 9b607ee8c..fb2757bcf 100644
--- a/src/menu/menu-item.tsx
+++ b/src/menu/menu-item.tsx
@@ -73,7 +73,10 @@ export default defineComponent({
vnode: ctx.slots.default && ctx.slots.default(),
});
});
-
+ const activeValues = menu.activeValues.value;
+ if (activeValues.includes(props.value) && !activeValues.includes(submenu?.value)) {
+ activeValues.push(submenu?.value);
+ }
return {
menu,
active,
diff --git a/src/menu/submenu.tsx b/src/menu/submenu.tsx
index 4be009440..bf90ee7a0 100644
--- a/src/menu/submenu.tsx
+++ b/src/menu/submenu.tsx
@@ -51,6 +51,7 @@ export default defineComponent({
const isActive = computed(() => activeValues.value.indexOf(props.value) > -1);
const popupVisible = ref(false);
const isCursorInPopup = ref(false);
+
const rippleColor = computed(() => (theme.value === 'light' ? '#E7E7E7' : '#383838'));
const isOpen = computed(() => {
if (mode.value === 'popup') {
@@ -244,6 +245,7 @@ export default defineComponent({
handleMouseLeavePopup,
handleSubmenuItemClick,
classPrefix,
+ activeValues,
};
},
methods: {
@@ -367,6 +369,9 @@ export default defineComponent({
render() {
let child = null;
let events = {};
+ let virtualChild;
+ // popup模式下且存在多层的特殊封装场景中，需要将子节点挂载进行计算高亮
+ if (this.activeValues.length < 2) virtualChild = <div style="display:none">{renderContent(this, 'default', 'content')}</div>;
if (this.mode === 'popup') {
events = {
@@ -380,6 +385,7 @@ export default defineComponent({
return (
<li class={this.classes} {...{ on: events }}>
{child}
+ {virtualChild}
</li>
);
},
diff --git a/src/pagination/pagination.tsx b/src/pagination/pagination.tsx
index 1b9b514ea..520920c05 100644
--- a/src/pagination/pagination.tsx
+++ b/src/pagination/pagination.tsx
@@ -351,15 +351,13 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
) : null}
{/* 首页按钮 */}
{this.showFirstAndLastPageBtn ? (
- // @ts-ignore
- <div class={this.preBtnClass} onClick={() => this.toPage(1)} disabled={this.disabled || this.current === min}>
+ <div class={this.preBtnClass} onClick={() => this.toPage(1)}>
<PageFirstIcon />
</div>
) : null}
{/* 向前按钮 */}
{this.showPreviousAndNextBtn ? (
- // @ts-ignore
- <div class={this.preBtnClass} onClick={this.prevPage} disabled={this.disabled || this.current === min}>
+ <div class={this.preBtnClass} onClick={this.prevPage}>
<ChevronLeftIcon />
</div>
) : null}
@@ -407,23 +405,13 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
{this.theme === 'simple' && Jumper}
{/* 向后按钮 */}
{this.showPreviousAndNextBtn ? (
- <div
- class={this.nextBtnClass}
- onClick={this.nextPage}
- // @ts-ignore
- disabled={this.disabled || this.current === this.pageCount}
- >
+ <div class={this.nextBtnClass} onClick={this.nextPage}>
<ChevronRightIcon />
</div>
) : null}
{/* 尾页按钮 */}
{this.showFirstAndLastPageBtn ? (
- <div
- class={this.nextBtnClass}
- onClick={() => this.toPage(this.pageCount)}
- // @ts-ignore
- disabled={this.disabled || this.current === this.pageCount}
- >
+ <div class={this.nextBtnClass} onClick={() => this.toPage(this.pageCount)}>
<PageLastIcon />
</div>
) : null}
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index 150c874bb..7e5ef5ee7 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -170,6 +170,14 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend(
};
updateTrigger();
this.$watch('trigger', updateTrigger);
+
+ // 当初始 visible 为 true 时，添加 document 事件监听
+ if (this.visible) {
+ if (!this.hasDocumentEvent) {
+ on(document, 'mousedown', this.handleDocumentClick, true);
+ this.hasDocumentEvent = true;
+ }
+ }
},
updated() {
(this.$refs.container as any)?.updateContent();
@@ -310,6 +318,8 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend(
// ignore document event if popper panel clicked
const popperEl = this.$refs.popper as HTMLDivElement;
if (popperEl?.contains(ev.target as Node)) return;
+
+ // 确保点击外部区域能正确关闭
this.visibleState = 0;
this.emitPopVisible(false, { trigger: 'document', e: ev });
});
diff --git a/src/qrcode/__tests__/index.test.jsx b/src/qrcode/__tests__/index.test.jsx
new file mode 100644
index 000000000..3a80be4b3
--- /dev/null
+++ b/src/qrcode/__tests__/index.test.jsx
@@ -0,0 +1,115 @@
+import { mount } from '@vue/test-utils';
+import { QRCode } from '../index';
+
+describe('QRCode', () => {
+ describe('props', () => {
+ // 因单测环境下无法获取主题色，若未定义颜色，组件将由默认颜色兜底。所以单测的颜色要为默认颜色。
+ // 颜色优先级如下：
+ // bgColor：自定义颜色 > 主题色适配 > 透明[transparent]
+ // color[fgColor]：自定义颜色 > 主题色适配 > 默认颜色[#000000]
+ const defaultBgColor = 'transparent'; // 实际使用时为 rgb(255, 255, 255)
+
+ it(':bgColor[string]', async () => {
+ const bgColor = 'rgb(7, 193, 96)';
+ const wrapper = mount({
+ render() {
+ return <QRCode bgColor={bgColor} value="https://tdesign.tencent.com/"></QRCode>;
+ },
+ });
+ expect(wrapper.find('.t-qrcode').attributes('style')).eq(
+ `background-color: ${bgColor}; width: 160px; height: 160px;`,
+ );
+ });
+
+ it(':borderless[boolean]', async () => {
+ const wrapper = mount({
+ render() {
+ return <QRCode borderless={true} value="https://tdesign.tencent.com/"></QRCode>;
+ },
+ });
+ expect(wrapper.find('.t-qrcode').classes('t-borderless')).eq(true);
+ });
+
+ // color只能测试svg模式下
+ it(':color[string]', async () => {
+ const color = 'rgb(7, 193, 96)';
+ const wrapper = mount({
+ render() {
+ return <QRCode type="svg" color={color} value="https://tdesign.tencent.com/"></QRCode>;
+ },
+ });
+ // [0] 是背景
+ expect(wrapper.find('.t-qrcode').findAll('path').at(1).attributes('fill')).eq(color);
+ });
+
+ it(':icon[string]-canvas', async () => {
+ const iconSrc = 'https://tdesign.gtimg.com/site/tdesign-logo.png';
+ const wrapper = mount({
+ render() {
+ return <QRCode icon={iconSrc} value="https://tdesign.tencent.com/"></QRCode>;
+ },
+ });
+ expect(wrapper.find('.t-qrcode').find('img').attributes('src')).eq(iconSrc);
+ });
+
+ it(':icon[string]-svg', async () => {
+ const iconSrc = 'https://tdesign.gtimg.com/site/tdesign-logo.png';
+ const wrapper = mount({
+ render() {
+ return <QRCode type="svg" icon={iconSrc} value="https://tdesign.tencent.com/"></QRCode>;
+ },
+ });
+ expect(wrapper.find('.t-qrcode').find('image').attributes('href')).eq(iconSrc);
+ });
+
+ // it(':iconSize[number|object]-svg', async () => {});
+
+ // const level = ['L', 'M', 'Q', 'H'];
+ // level.forEach((item) => {
+ // it(`:level[string]-[${item}]`, async () => {
+ // const wrapper = mount({
+ // render() {
+ // return <QRCode level={item} value="https://tdesign.tencent.com/"></QRCode>;
+ // },
+ // });
+ // expect(wrapper.find('.t-qrcode').attributes('level')).eq(item);
+ // });
+ // });
+
+ it(':size[number]', async () => {
+ const size = 380;
+ const wrapper = mount({
+ render() {
+ return <QRCode size={size} value="https://tdesign.tencent.com/"></QRCode>;
+ },
+ });
+ expect(wrapper.find('.t-qrcode').attributes('style')).eq(
+ `background-color: ${defaultBgColor}; width: ${size}px; height: ${size}px;`,
+ );
+ });
+
+ const status = ['expired', 'loading', 'scanned'];
+ status.forEach((item) => {
+ it(`:status[string]-[${item}]`, async () => {
+ const wrapper = mount({
+ render() {
+ return <QRCode status={item} value="https://tdesign.tencent.com/"></QRCode>;
+ },
+ });
+ expect(wrapper.find('.t-qrcode').find('.t-mask').exists()).eq(true);
+ expect(wrapper.find('.t-qrcode').find(`.t-${item}`).exists()).eq(true);
+ });
+ });
+
+ it(':statusRender[Function]', async () => {
+ const statusRender = vi.fn();
+ const wrapper = mount({
+ render() {
+ return <QRCode status="expired" value="https://tdesign.tencent.com/" statusRender={statusRender}></QRCode>;
+ },
+ });
+ await wrapper.setProps({ status: 'expired', statusRender });
+ expect(statusRender).toBeCalled();
+ });
+ });
+});
diff --git a/src/qrcode/_example-composition/base.vue b/src/qrcode/_example-composition/base.vue
new file mode 100644
index 000000000..0ab2984fe
--- /dev/null
+++ b/src/qrcode/_example-composition/base.vue
@@ -0,0 +1,14 @@
+<template>
+ <div style="width: 100%">
+ <t-space direction="vertical" align="center">
+ <t-qrcode :value="text || '-'" />
+ <t-input v-model="text" placeholder="-" />
+ </t-space>
+ </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const text = ref('https://tdesign.tencent.com/');
+</script>
diff --git a/src/qrcode/_example-composition/customColor.vue b/src/qrcode/_example-composition/customColor.vue
new file mode 100644
index 000000000..e640babb7
--- /dev/null
+++ b/src/qrcode/_example-composition/customColor.vue
@@ -0,0 +1,6 @@
+<template>
+ <t-space>
+ <t-qrcode value="https://tdesign.tencent.com/" color="#0052D9" bg-color="#fff" />
+ <t-qrcode value="https://tdesign.tencent.com/" color="#0052D9" bg-color="#D9E1FF" />
+ </t-space>
+</template>
diff --git a/src/qrcode/_example-composition/customSize.vue b/src/qrcode/_example-composition/customSize.vue
new file mode 100644
index 000000000..46863b430
--- /dev/null
+++ b/src/qrcode/_example-composition/customSize.vue
@@ -0,0 +1,35 @@
+<template>
+ <t-space direction="vertical">
+ <t-space>
+ <t-button :disabled="size <= minSize" @click="size -= 10">
+ <template #icon>
+ <MinusIcon />
+ </template>
+ Smaller
+ </t-button>
+ <t-button :disabled="size >= maxSize" @click="size += 10">
+ <template #icon>
+ <AddIcon />
+ </template>
+ Larger
+ </t-button>
+ </t-space>
+ <t-qrcode
+ level="H"
+ :size="size"
+ :icon-size="size / 4"
+ value="https://tdesign.tencent.com/"
+ icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+ />
+ </t-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { MinusIcon, AddIcon } from 'tdesign-icons-vue';
+
+const minSize = 40;
+const maxSize = 300;
+
+const size = ref(160);
+</script>
diff --git a/src/qrcode/_example-composition/customStatusRender.vue b/src/qrcode/_example-composition/customStatusRender.vue
new file mode 100644
index 000000000..7a996532e
--- /dev/null
+++ b/src/qrcode/_example-composition/customStatusRender.vue
@@ -0,0 +1,65 @@
+<template>
+ <t-space>
+ <!-- 自定义状态-使用Function -->
+ <t-qrcode value="https://tdesign.tencent.com/" status="loading" :status-render="renderStatus" />
+ <!-- 自定义状态-使用插槽 -->
+ <t-qrcode value="https://tdesign.tencent.com/" status="expired">
+ <template #status-render="{ status }">
+ <div v-if="status === 'expired'" class="tdesign-demo-qrcode__status-render">
+ <p class="tdesign-demo-qrcode__status-render-title">
+ <CloseCircleFilledIcon size="16" />
+ <span>二维码过期</span>
+ </p>
+ <p class="tdesign-demo-qrcode__status-render-action" @click="handleRefresh">
+ <RefreshIcon size="16" />
+ <span>点击刷新</span>
+ </p>
+ </div>
+ </template>
+ </t-qrcode>
+ <!-- 默认状态 -->
+ <t-qrcode value="https://tdesign.tencent.com/" status="scanned" />
+ </t-space>
+</template>
+
+<script lang="jsx" setup>
+import { CloseCircleFilledIcon, RefreshIcon } from 'tdesign-icons-vue';
+
+const renderStatus = (_h, { status }) => status === 'loading' && (
+ <t-space direction="vertical" size="4px">
+ <t-loading size="32px" />
+ <p>加载中...</p>
+ </t-space>
+);
+
+const handleRefresh = () => {
+ console.log('Click Refresh');
+};
+</script>
+
+<style>
+.tdesign-demo-qrcode__status-render {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+.tdesign-demo-qrcode__status-render-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.tdesign-demo-qrcode__status-render-title .t-icon {
+ color: var(--td-error-color);
+}
+
+.tdesign-demo-qrcode__status-render-action {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--td-brand-color);
+ cursor: pointer;
+ line-height: 32px;
+}
+</style>
diff --git a/src/qrcode/_example-composition/download.vue b/src/qrcode/_example-composition/download.vue
new file mode 100644
index 000000000..93acfda36
--- /dev/null
+++ b/src/qrcode/_example-composition/download.vue
@@ -0,0 +1,57 @@
+<template>
+ <t-space direction="vertical">
+ <t-radio-group v-model="type" variant="default-filled">
+ <t-radio-button value="canvas">canvas</t-radio-button>
+ <t-radio-button value="svg">svg</t-radio-button>
+ </t-radio-group>
+ <t-qrcode
+ id="QRCode"
+ :type="type"
+ value="https://tdesign.tencent.com/"
+ icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+ />
+ <t-button @click="handleDownload">Download</t-button>
+ </t-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const type = ref('canvas');
+
+function downloadFile(url, fileName) {
+ const a = document.createElement('a');
+ a.download = fileName;
+ a.href = url;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+}
+
+const downloadCanvas = () => {
+ const canvas = document.getElementById('QRCode').querySelector('canvas');
+ if (canvas) {
+ const url = canvas.toDataURL();
+ console.log(url);
+ downloadFile(url, 'TDesign-QRCode.png');
+ }
+};
+
+const downloadSvg = () => {
+ const svg = document.getElementById('QRCode').querySelector('svg');
+ const svgData = new XMLSerializer().serializeToString(svg);
+ const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+ const url = URL.createObjectURL(blob);
+ console.log(url);
+ downloadFile(url, 'TDesign-QRCode.svg');
+};
+
+const handleDownload = () => {
+ if (type.value === 'canvas') {
+ downloadCanvas();
+ }
+ if (type.value === 'svg') {
+ downloadSvg();
+ }
+};
+</script>
diff --git a/src/qrcode/_example-composition/icon.vue b/src/qrcode/_example-composition/icon.vue
new file mode 100644
index 000000000..92ed88e72
--- /dev/null
+++ b/src/qrcode/_example-composition/icon.vue
@@ -0,0 +1,5 @@
+<template>
+ <div style="width: 100%">
+ <t-qrcode value="https://tdesign.tencent.com/" icon="https://tdesign.gtimg.com/site/tdesign-logo.png" />
+ </div>
+</template>
diff --git a/src/qrcode/_example-composition/level.vue b/src/qrcode/_example-composition/level.vue
new file mode 100644
index 000000000..8653bab2f
--- /dev/null
+++ b/src/qrcode/_example-composition/level.vue
@@ -0,0 +1,17 @@
+<template>
+ <t-space direction="vertical">
+ <t-radio-group v-model="level" variant="default-filled">
+ <t-radio-button value="L">L</t-radio-button>
+ <t-radio-button value="M">M</t-radio-button>
+ <t-radio-button value="Q">Q</t-radio-button>
+ <t-radio-button value="H">H</t-radio-button>
+ </t-radio-group>
+ <t-qrcode :level="level" value="https://tdesign.gtimg.com/site/tdesign-logo.png" />
+ </t-space>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const level = ref('M');
+</script>
diff --git a/src/qrcode/_example-composition/popover.vue b/src/qrcode/_example-composition/popover.vue
new file mode 100644
index 000000000..6902a2a1c
--- /dev/null
+++ b/src/qrcode/_example-composition/popover.vue
@@ -0,0 +1,10 @@
+<template>
+ <div style="width: 100%">
+ <t-popup trigger="hover">
+ <t-button>Hover me</t-button>
+ <template #content>
+ <t-qrcode value="https://tdesign.tencent.com/" :size="136" borderless />
+ </template>
+ </t-popup>
+ </div>
+</template>
diff --git a/src/qrcode/_example-composition/status.vue b/src/qrcode/_example-composition/status.vue
new file mode 100644
index 000000000..f75c435a3
--- /dev/null
+++ b/src/qrcode/_example-composition/status.vue
@@ -0,0 +1,7 @@
+<template>
+ <t-space>
+ <t-qrcode value="https://tdesign.tencent.com/" status="loading" />
+ <t-qrcode value="https://tdesign.tencent.com/" status="expired" :on-refresh="() => console.log('Click Refresh')" />
+ <t-qrcode value="https://tdesign.tencent.com/" status="scanned" />
+ </t-space>
+</template>
diff --git a/src/qrcode/_example-composition/type.vue b/src/qrcode/_example-composition/type.vue
new file mode 100644
index 000000000..aa637e5de
--- /dev/null
+++ b/src/qrcode/_example-composition/type.vue
@@ -0,0 +1,6 @@
+<template>
+ <t-space>
+ <t-qrcode value="https://tdesign.tencent.com/" type="canvas" />
+ <t-qrcode value="https://tdesign.tencent.com/" type="svg" />
+ </t-space>
+</template>
diff --git a/src/qrcode/_example/base.vue b/src/qrcode/_example/base.vue
new file mode 100644
index 000000000..7d83c1058
--- /dev/null
+++ b/src/qrcode/_example/base.vue
@@ -0,0 +1,18 @@
+<template>
+ <div style="width: 100%">
+ <t-space direction="vertical" align="center">
+ <t-qrcode :value="text || '-'" />
+ <t-input v-model="text" placeholder="-" />
+ </t-space>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ text: 'https://tdesign.tencent.com/',
+ };
+ },
+};
+</script>
diff --git a/src/qrcode/_example/customColor.vue b/src/qrcode/_example/customColor.vue
new file mode 100644
index 000000000..e640babb7
--- /dev/null
+++ b/src/qrcode/_example/customColor.vue
@@ -0,0 +1,6 @@
+<template>
+ <t-space>
+ <t-qrcode value="https://tdesign.tencent.com/" color="#0052D9" bg-color="#fff" />
+ <t-qrcode value="https://tdesign.tencent.com/" color="#0052D9" bg-color="#D9E1FF" />
+ </t-space>
+</template>
diff --git a/src/qrcode/_example/customSize.vue b/src/qrcode/_example/customSize.vue
new file mode 100644
index 000000000..b842ff567
--- /dev/null
+++ b/src/qrcode/_example/customSize.vue
@@ -0,0 +1,43 @@
+<template>
+ <t-space direction="vertical">
+ <t-space>
+ <t-button :disabled="size <= minSize" @click="size -= 10">
+ <template #icon>
+ <minus-icon />
+ </template>
+ Smaller
+ </t-button>
+ <t-button :disabled="size >= maxSize" @click="size += 10">
+ <template #icon>
+ <add-icon />
+ </template>
+ Larger
+ </t-button>
+ </t-space>
+ <t-qrcode
+ level="H"
+ :size="size"
+ :icon-size="size / 4"
+ value="https://tdesign.tencent.com/"
+ icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+ />
+ </t-space>
+</template>
+
+<script>
+import { MinusIcon, AddIcon } from 'tdesign-icons-vue';
+
+export default {
+ components: {
+ MinusIcon,
+ AddIcon,
+ },
+ data() {
+ return {
+ minSize: 40,
+ maxSize: 300,
+ size: 160,
+ };
+ },
+};
+</script>
diff --git a/src/qrcode/_example/customStatusRender.vue b/src/qrcode/_example/customStatusRender.vue
new file mode 100644
index 000000000..f07b43aec
--- /dev/null
+++ b/src/qrcode/_example/customStatusRender.vue
@@ -0,0 +1,84 @@
+<template>
+ <t-space>
+ <!-- 自定义状态-使用Function -->
+ <t-qrcode value="https://tdesign.tencent.com/" status="loading" :status-render="renderStatus" />
+ <!-- 自定义状态-使用插槽 -->
+ <t-qrcode value="https://tdesign.tencent.com/" status="expired">
+ <template #status-render="{ status }">
+ <div v-if="status === 'expired'" class="tdesign-demo-qrcode__status-render">
+ <p class="tdesign-demo-qrcode__status-render-title">
+ <close-circle-filled-icon size="16" />
+ <span>二维码过期</span>
+ </p>
+ <p class="tdesign-demo-qrcode__status-render-action" @click="handleRefresh">
+ <refresh-icon size="16" />
+ <span>点击刷新</span>
+ </p>
+ </div>
+ </template>
+ </t-qrcode>
+ <!-- 默认状态 -->
+ <t-qrcode value="https://tdesign.tencent.com/" status="scanned" />
+ </t-space>
+</template>
+
+<script lang="jsx">
+import { CloseCircleFilledIcon, RefreshIcon } from 'tdesign-icons-vue';
+
+export default {
+ components: {
+ CloseCircleFilledIcon,
+ RefreshIcon,
+ },
+ data() {
+ return {
+ minSize: 40,
+ maxSize: 300,
+ size: 'https://tdesign.tencent.com/',
+ };
+ },
+ methods: {
+ renderStatus(_h, { status }) {
+ return (
+ status === 'loading' && (
+ <t-space direction="vertical" size="4px">
+ <t-loading size="32px" />
+ <p>加载中...</p>
+ </t-space>
+ )
+ );
+ },
+
+ handleRefresh() {
+ console.log('Click Refresh');
+ },
+ },
+};
+</script>
+
+<style>
+.tdesign-demo-qrcode__status-render {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+.tdesign-demo-qrcode__status-render-title {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.tdesign-demo-qrcode__status-render-title .t-icon {
+ color: var(--td-error-color);
+}
+
+.tdesign-demo-qrcode__status-render-action {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: var(--td-brand-color);
+ cursor: pointer;
+ line-height: 32px;
+}
+</style>
diff --git a/src/qrcode/_example/download.vue b/src/qrcode/_example/download.vue
new file mode 100644
index 000000000..4038fe9db
--- /dev/null
+++ b/src/qrcode/_example/download.vue
@@ -0,0 +1,74 @@
+<template>
+ <t-space direction="vertical">
+ <t-radio-group v-model="type" variant="default-filled">
+ <t-radio-button value="canvas">canvas</t-radio-button>
+ <t-radio-button value="svg">svg</t-radio-button>
+ </t-radio-group>
+ <t-qrcode
+ id="QRCode"
+ :type="type"
+ value="https://tdesign.tencent.com/"
+ icon="https://tdesign.gtimg.com/site/tdesign-logo.png"
+ />
+ <t-button @click="handleDownload">Download</t-button>
+ </t-space>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ type: 'canvas',
+ };
+ },
+ methods: {
+ downloadFile(url, fileName) {
+ const a = document.createElement('a');
+ a.download = fileName;
+ a.href = url;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ },
+
+ downloadCanvas() {
+ const canvas = document.getElementById('QRCode').querySelector('canvas');
+ if (canvas) {
+ const url = canvas.toDataURL();
+ console.log(url);
+ this.downloadFile(url, 'TDesign-QRCode.png');
+ }
+ },
+
+ getCanvas() {
+ while (true) {
+ const canvas = document.querySelectorAll('canvas');
+ for (let i = 0; i < canvas.length; i++) {
+ const data = canvas?.toDataURL();
+ if (data) {
+ console.log(data);
+ }
+ }
+ }
+ },
+
+ downloadSvg() {
+ const svg = document.getElementById('QRCode').querySelector('svg');
+ const svgData = new XMLSerializer().serializeToString(svg);
+ const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+ const url = URL.createObjectURL(blob);
+ console.log(url);
+ this.downloadFile(url, 'TDesign-QRCode.svg');
+ },
+
+ handleDownload() {
+ if (this.type === 'canvas') {
+ this.downloadCanvas();
+ }
+ if (this.type === 'svg') {
+ this.downloadSvg();
+ }
+ },
+ },
+};
+</script>
diff --git a/src/qrcode/_example/icon.vue b/src/qrcode/_example/icon.vue
new file mode 100644
index 000000000..ecdf48cf2
--- /dev/null
+++ b/src/qrcode/_example/icon.vue
@@ -0,0 +1,5 @@
+<template>
+ <div style="width: 100%">
+ <t-qrcode type="svg" value="https://tdesign.tencent.com/" icon="https://tdesign.gtimg.com/site/tdesign-logo.png" />
+ </div>
+</template>
diff --git a/src/qrcode/_example/level.vue b/src/qrcode/_example/level.vue
new file mode 100644
index 000000000..63423aeda
--- /dev/null
+++ b/src/qrcode/_example/level.vue
@@ -0,0 +1,21 @@
+<template>
+ <t-space direction="vertical">
+ <t-radio-group v-model="level" variant="default-filled">
+ <t-radio-button value="L">L</t-radio-button>
+ <t-radio-button value="M">M</t-radio-button>
+ <t-radio-button value="Q">Q</t-radio-button>
+ <t-radio-button value="H">H</t-radio-button>
+ </t-radio-group>
+ <t-qrcode :level="level" value="https://tdesign.gtimg.com/site/tdesign-logo.png" />
+ </t-space>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ level: 'M',
+ };
+ },
+};
+</script>
diff --git a/src/qrcode/_example/popover.vue b/src/qrcode/_example/popover.vue
new file mode 100644
index 000000000..6902a2a1c
--- /dev/null
+++ b/src/qrcode/_example/popover.vue
@@ -0,0 +1,10 @@
+<template>
+ <div style="width: 100%">
+ <t-popup trigger="hover">
+ <t-button>Hover me</t-button>
+ <template #content>
+ <t-qrcode value="https://tdesign.tencent.com/" :size="136" borderless />
+ </template>
+ </t-popup>
+ </div>
+</template>
diff --git a/src/qrcode/_example/status.vue b/src/qrcode/_example/status.vue
new file mode 100644
index 000000000..965dd70fb
--- /dev/null
+++ b/src/qrcode/_example/status.vue
@@ -0,0 +1,17 @@
+<template>
+ <t-space>
+ <t-qrcode value="https://tdesign.tencent.com/" status="loading" />
+ <t-qrcode value="https://tdesign.tencent.com/" status="expired" :onRefresh="handleRefresh" />
+ <t-qrcode value="https://tdesign.tencent.com/" status="scanned" />
+ </t-space>
+</template>
+
+<script>
+export default {
+ methods: {
+ handleRefresh() {
+ console.log('Click Refresh');
+ },
+ },
+};
+</script>
diff --git a/src/qrcode/_example/type.vue b/src/qrcode/_example/type.vue
new file mode 100644
index 000000000..aa637e5de
--- /dev/null
+++ b/src/qrcode/_example/type.vue
@@ -0,0 +1,6 @@
+<template>
+ <t-space>
+ <t-qrcode value="https://tdesign.tencent.com/" type="canvas" />
+ <t-qrcode value="https://tdesign.tencent.com/" type="svg" />
+ </t-space>
+</template>
diff --git a/src/qrcode/_usage/index.vue b/src/qrcode/_usage/index.vue
new file mode 100644
index 000000000..56e2d8d52
--- /dev/null
+++ b/src/qrcode/_usage/index.vue
@@ -0,0 +1,30 @@
+<!-- 该脚本为自动生成，如有需要请在 /script/generate-usage/index.js 中调整 -->
+<template>
+ <base-usage :code="usageCode" :config-list="configList" :panel-list="panelList" @panel-change="onPanelChange">
+ <template #qrcode="{ configProps }">
+ <t-qrcode value="https://tdesign.gtimg.com/site/tdesign-logo.png" v-bind="configProps" />
+ </template>
+ </base-usage>
+</template>
+
+<script setup lang="jsx">
+/* eslint-disable */
+import { ref, onMounted } from '@vue/composition-api';
+import configJson from './props.json';
+
+const configList = ref(configJson);
+const panelList = [{ label: 'QRCode', value: 'qrcode' }];
+
+const usageCodeMap = {
+ qrcode: '<t-qrcode value="https://tdesign.gtimg.com/site/tdesign-logo.png" v-bind="configProps"/>',
+};
+const usageCode = ref(`<template>${usageCodeMap[panelList[0].value].trim()}</template>`);
+
+function onPanelChange(panel) {
+ usageCode.value = `<template>${usageCodeMap[panel].trim()}</template>`;
+}
+
+onMounted(() => {
+ console.log();
+});
+</script>
diff --git a/src/qrcode/_usage/props.json b/src/qrcode/_usage/props.json
new file mode 100644
index 000000000..a407f360a
--- /dev/null
+++ b/src/qrcode/_usage/props.json
@@ -0,0 +1,69 @@
+[
+ {
+ "name": "borderless",
+ "type": "Boolean",
+ "defaultValue": false,
+ "options": []
+ },
+ {
+ "name": "level",
+ "type": "enum",
+ "defaultValue": "M",
+ "options": [
+ {
+ "label": "L",
+ "value": "L"
+ },
+ {
+ "label": "M",
+ "value": "M"
+ },
+ {
+ "label": "Q",
+ "value": "Q"
+ },
+ {
+ "label": "H",
+ "value": "H"
+ }
+ ]
+ },
+ {
+ "name": "status",
+ "type": "enum",
+ "defaultValue": "active",
+ "options": [
+ {
+ "label": "active",
+ "value": "active"
+ },
+ {
+ "label": "expired",
+ "value": "expired"
+ },
+ {
+ "label": "loading",
+ "value": "loading"
+ },
+ {
+ "label": "scanned",
+ "value": "scanned"
+ }
+ ]
+ },
+ {
+ "name": "type",
+ "type": "enum",
+ "defaultValue": "canvas",
+ "options": [
+ {
+ "label": "canvas",
+ "value": "canvas"
+ },
+ {
+ "label": "svg",
+ "value": "svg"
+ }
+ ]
+ }
+]
\ No newline at end of file
diff --git a/src/qrcode/components/props.ts b/src/qrcode/components/props.ts
new file mode 100644
index 000000000..d4b317405
--- /dev/null
+++ b/src/qrcode/components/props.ts
@@ -0,0 +1,117 @@
+import { PropType } from 'vue';
+import { QRCodeSubComponent, QRCodeStatus } from './type';
+
+export const QRCodeSubComponentProps = {
+ /**
+ * The value to encode into the QR Code. An array of strings can be passed in
+ * to represent multiple segments to further optimize the QR Code.
+ */
+ value: {
+ type: String,
+ default: '',
+ },
+ /**
+ * The size, in pixels, to render the QR Code.
+ * @defaultValue 128
+ */
+ size: {
+ type: Number,
+ default: 128,
+ },
+ /**
+ * The Error Correction Level to use.
+ * @see https://www.qrcode.com/en/about/error_correction.html
+ * @defaultValue L
+ */
+ level: {
+ type: String as PropType<QRCodeSubComponent['level']>,
+ default: 'L',
+ },
+ /**
+ * The background color used to render the QR Code.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+ * @defaultValue #FFFFFF
+ */
+ bgColor: {
+ type: String,
+ default: '#FFFFFF',
+ },
+ /**
+ * The foregtound color used to render the QR Code.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+ * @defaultValue #000000
+ */
+ fgColor: {
+ type: String,
+ default: '#000000',
+ },
+ /**
+ * The style to apply to the QR Code.
+ */
+ // style: {
+ // type: Object as PropType<QRCodeSubComponent['style']>,
+ // default: () => ({} as QRCodeSubComponent['style']),
+ // },
+ /**
+ * Whether or not a margin of 4 modules should be rendered as a part of the
+ * QR Code.
+ * @deprecated Use `marginSize` instead.
+ * @defaultValue false
+ */
+ includeMargin: {
+ type: Boolean,
+ default: false,
+ },
+ /**
+ * The number of _modules_ to use for margin. The QR Code specification
+ * requires `4`, however you can specify any number. Values will be turned to
+ * integers with `Math.floor`. Overrides `includeMargin` when both are specified.
+ * @defaultValue 0
+ */
+ marginSize: {
+ type: Number,
+ default: 0,
+ },
+ /**
+ * The settings for the embedded image.
+ */
+ imageSettings: {
+ type: Object as PropType<QRCodeSubComponent['imageSettings']>,
+ default: () => ({}),
+ },
+ /**
+ * The title to assign to the QR Code. Used for accessibility reasons.
+ */
+ title: {
+ type: String,
+ default: '',
+ },
+ /**
+ * The minimum version used when encoding the QR Code. Valid values are 1-40
+ * with higher values resulting in more complex QR Codes. The optimal
+ * (lowest) version is determined for the `value` provided, using `minVersion`
+ * as the lower bound.
+ * @defaultValue 1
+ */
+ minVersion: {
+ type: Number,
+ default: 1,
+ },
+};
+
+export const QRCodeStatusProps = {
+ locale: {
+ type: Object as PropType<QRCodeStatus['locale']>,
+ default: () => ({} as QRCodeStatus['locale']),
+ },
+ refresh: {
+ type: Function as PropType<QRCodeStatus['onRefresh']>,
+ },
+ statusRender: {
+ type: Function,
+ },
+ status: {
+ type: String as PropType<QRCodeStatus['status']>,
+ default: 'active' as QRCodeStatus['status'],
+ },
+};
diff --git a/src/qrcode/components/qrcode-canvas.tsx b/src/qrcode/components/qrcode-canvas.tsx
new file mode 100644
index 000000000..ad73e8a87
--- /dev/null
+++ b/src/qrcode/components/qrcode-canvas.tsx
@@ -0,0 +1,142 @@
+import { computed, defineComponent, ref } from 'vue';
+import { QRCodeSubComponentProps } from './props';
+import {
+ DEFAULT_NEED_MARGIN,
+ DEFAULT_MINVERSION,
+ isSupportPath2d,
+ excavateModules,
+ generatePath,
+} from '../../_common/js/qrcode/utils';
+import { useQRCode } from '../hooks/useQRCode';
+
+export default defineComponent({
+ name: 'QRCodeCanvas',
+ props: QRCodeSubComponentProps,
+ setup(props) {
+ const imgSrc = computed(() => props.imageSettings?.src);
+ const imgCrossOrigin = ref('');
+
+ return {
+ imgSrc,
+ imgCrossOrigin,
+ };
+ },
+ methods: {
+ renderQRCode() {
+ const {
+ margin, cells, numCells, calculatedImageSettings,
+ } = useQRCode({
+ value: this.value,
+ level: this.level,
+ minVersion: DEFAULT_MINVERSION,
+ includeMargin: DEFAULT_NEED_MARGIN,
+ marginSize: this.marginSize,
+ imageSettings: this.imageSettings,
+ size: this.size,
+ });
+
+ if (!this.$refs.canvasRef) {
+ return;
+ }
+
+ const canvas = (this.$refs.canvasRef as HTMLCanvasElement) ?? null;
+ const ctx = canvas?.getContext('2d');
+
+ if (!ctx) {
+ return;
+ }
+
+ this.imgCrossOrigin = calculatedImageSettings.value?.crossOrigin;
+
+ let cellsToDraw = cells;
+ const image = (this.$refs.imageRef as HTMLImageElement) ?? null;
+
+ if (image) {
+ image.crossOrigin = calculatedImageSettings.value.crossOrigin;
+ }
+
+ const haveImageToRender = calculatedImageSettings.value
+ && image !== null
+ && image.complete
+ && image.naturalHeight !== 0
+ && image.naturalWidth !== 0;
+
+ if (haveImageToRender && calculatedImageSettings.value.excavation != null) {
+ cellsToDraw = computed(() => excavateModules(cells.value, calculatedImageSettings.value.excavation));
+ }
+
+ const pixelRatio = window.devicePixelRatio || 1;
+ canvas.height = this.size * pixelRatio;
+ canvas.width = this.size * pixelRatio;
+ const scale = (this.size / numCells.value) * pixelRatio;
+ ctx.scale(scale, scale);
+
+ ctx.fillStyle = this.bgColor;
+ ctx.fillRect(0, 0, numCells.value, numCells.value);
+
+ ctx.fillStyle = this.fgColor;
+ if (isSupportPath2d) {
+ ctx.fill(new Path2D(generatePath(cellsToDraw.value, margin.value)));
+ } else {
+ cells.value.forEach((row, rdx) => {
+ row.forEach((cell, cdx) => {
+ if (cell) {
+ ctx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
+ }
+ });
+ });
+ }
+
+ if (calculatedImageSettings.value) {
+ ctx.globalAlpha = calculatedImageSettings.value.opacity;
+ }
+
+ if (haveImageToRender) {
+ ctx.globalAlpha = calculatedImageSettings.value.opacity;
+ ctx.drawImage(
+ image,
+ calculatedImageSettings.value.x + margin.value,
+ calculatedImageSettings.value.y + margin.value,
+ calculatedImageSettings.value.w,
+ calculatedImageSettings.value.h,
+ );
+ }
+ },
+ },
+ mounted() {
+ this.renderQRCode();
+ },
+ watch: {
+ value() {
+ this.renderQRCode();
+ },
+ size() {
+ this.renderQRCode();
+ },
+ level() {
+ this.renderQRCode();
+ },
+ bgColor() {
+ this.renderQRCode();
+ },
+ fgColor() {
+ this.renderQRCode();
+ },
+ },
+ render() {
+ const styles = {
+ display: 'flex',
+ alignSelf: 'stretch',
+ flex: 'auto',
+ minWidth: '0',
+ };
+ return (
+ <div style={styles}>
+ <canvas ref="canvasRef" style={styles} role="img" />
+ {this.imgSrc != null ? (
+ <img ref="imageRef" onLoad={this.renderQRCode} style={{ display: 'none' }} src={this.imgSrc} />
+ ) : null}
+ </div>
+ );
+ },
+});
diff --git a/src/qrcode/components/qrcode-status.tsx b/src/qrcode/components/qrcode-status.tsx
new file mode 100644
index 000000000..7cf505966
--- /dev/null
+++ b/src/qrcode/components/qrcode-status.tsx
@@ -0,0 +1,59 @@
+import { defineComponent } from 'vue';
+import { CheckCircleFilledIcon, RefreshIcon } from 'tdesign-icons-vue';
+import Loading from '../../loading';
+import { usePrefixClass } from '../../hooks';
+import type { StatusRenderInfo } from '../type';
+import { QRCodeStatusProps } from './props';
+
+export default defineComponent({
+ name: 'QRCodeStatus',
+ props: QRCodeStatusProps,
+ setup() {
+ const classPrefix = usePrefixClass();
+
+ return {
+ classPrefix,
+ };
+ },
+ methods: {
+ renderStatus(info: StatusRenderInfo) {
+ const defaultSpin = <Loading size="32px" />;
+ const defaultExpiredNode = (
+ <div>
+ <p class={`${this.classPrefix}-expired__text`}>{this.locale?.expiredText}</p>
+ {this?.refresh && (
+ <p class={`${this.classPrefix}-expired__button`} onClick={this?.refresh}>
+ <RefreshIcon size="16" />
+ {this.locale?.refreshText}
+ </p>
+ )}
+ </div>
+ );
+ const defaultScannedNode = (
+ <p class={`${this.classPrefix}-scanned`}>
+ <CheckCircleFilledIcon size="16" class={`${this.classPrefix}-scanned__icon`} />
+ {this.locale?.scannedText}
+ </p>
+ );
+
+ const defaultNodes = {
+ expired: defaultExpiredNode,
+ loading: defaultSpin,
+ scanned: defaultScannedNode,
+ active: null as any,
+ };
+ return defaultNodes[info.status];
+ },
+ },
+ render() {
+ return (
+ <div>
+ {this?.statusRender?.()
+ || this.renderStatus({
+ status: this.status,
+ onRefresh: this.refresh,
+ })}
+ </div>
+ );
+ },
+});
diff --git a/src/qrcode/components/qrcode-svg.tsx b/src/qrcode/components/qrcode-svg.tsx
new file mode 100644
index 000000000..20f85a3ff
--- /dev/null
+++ b/src/qrcode/components/qrcode-svg.tsx
@@ -0,0 +1,65 @@
+import { computed, defineComponent } from 'vue';
+import { QRCodeSubComponentProps } from './props';
+import {
+ DEFAULT_NEED_MARGIN, DEFAULT_MINVERSION, excavateModules, generatePath,
+} from '../../_common/js/qrcode/utils';
+import { useQRCode } from '../hooks/useQRCode';
+
+export default defineComponent({
+ name: 'QRCodeSVG',
+ props: QRCodeSubComponentProps,
+ setup(props) {
+ const {
+ margin, cells, numCells, calculatedImageSettings,
+ } = useQRCode({
+ value: props.value,
+ level: props.level,
+ minVersion: DEFAULT_MINVERSION,
+ includeMargin: DEFAULT_NEED_MARGIN,
+ marginSize: props.marginSize,
+ imageSettings: props.imageSettings,
+ size: props.size,
+ });
+
+ const cellsToDraw = computed(() => {
+ if (props.imageSettings && calculatedImageSettings.value?.excavation != null) {
+ return excavateModules(cells.value, calculatedImageSettings.value.excavation);
+ }
+ return cells.value;
+ });
+
+ return {
+ cellsToDraw,
+ calculatedImageSettings,
+ margin,
+ numCells,
+ };
+ },
+ render() {
+ const fgPath = generatePath(this.cellsToDraw, this.margin);
+
+ const imageNode = () => {
+ if (!this.imageSettings || !this.calculatedImageSettings) return null;
+
+ return (
+ <image
+ href={this.imageSettings.src}
+ height={this.calculatedImageSettings.h}
+ width={this.calculatedImageSettings.w}
+ x={this.calculatedImageSettings.x + this.margin}
+ y={this.calculatedImageSettings.y + this.margin}
+ cross-origin={this.calculatedImageSettings.crossOrigin}
+ />
+ );
+ };
+
+ return (
+ <svg height={this.size} width={this.size} viewBox={`0 0 ${this.numCells} ${this.numCells}`} role="img">
+ {!!this.title && <title>{this.title} }
+ ;
+ margin: ComputedRef;
+ numCells: ComputedRef;
+ calculatedImageSettings: ComputedRef<{
+ x: number;
+ y: number;
+ h: number;
+ w: number;
+ excavation: Excavation | null;
+ opacity: number;
+ crossOrigin: CrossOrigin;
+ }>;
+ qrcode: ComputedRef;
+}
+
+export const useQRCode = (opt: Options): QRCodeResult => {
+ const {
+ value, level, minVersion, includeMargin, marginSize, imageSettings, size,
+ } = opt;
+
+ const memoizedQrcode = computed(() => {
+ const segments = QrSegment.makeSegments(value);
+ return QrCode.encodeSegments(segments, ERROR_LEVEL_MAP[level], minVersion);
+ });
+
+ const cs = computed(() => memoizedQrcode.value.getModules());
+ const mg = computed(() => getMarginSize(includeMargin, marginSize));
+ const cis = computed(() => getImageSettings(cs.value, size, mg.value, imageSettings));
+
+ return {
+ cells: cs,
+ margin: mg,
+ numCells: computed(() => cs.value.length + mg.value * 2),
+ calculatedImageSettings: cis,
+ qrcode: memoizedQrcode,
+ };
+};
+
+export default useQRCode;
diff --git a/src/qrcode/index.ts b/src/qrcode/index.ts
new file mode 100644
index 000000000..387fe22fc
--- /dev/null
+++ b/src/qrcode/index.ts
@@ -0,0 +1,12 @@
+import _QRCode from './qrcode';
+import withInstall from '../utils/withInstall';
+import { TdQRCodeProps } from './type';
+
+import './style';
+
+export type QRCodeProps = TdQRCodeProps;
+export * from './type';
+
+export const QRCode = withInstall(_QRCode, null, null, 'TQrcode');
+
+export default QRCode;
diff --git a/src/qrcode/props.ts b/src/qrcode/props.ts
new file mode 100644
index 000000000..6f78252d5
--- /dev/null
+++ b/src/qrcode/props.ts
@@ -0,0 +1,76 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdQRCodeProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+ /** 二维码背景颜色 */
+ bgColor: {
+ type: String,
+ default: '',
+ },
+ /** 是否有边框 */
+ borderless: Boolean,
+ /** 二维码颜色 */
+ color: {
+ type: String,
+ default: '',
+ },
+ /** 二维码中图片的地址 */
+ icon: {
+ type: String,
+ default: '',
+ },
+ /** 二维码中图片的大小 */
+ iconSize: {
+ type: [Number, Object] as PropType,
+ default: 40,
+ },
+ /** 二维码纠错等级 */
+ level: {
+ type: String as PropType,
+ default: 'M' as TdQRCodeProps['level'],
+ validator(val: TdQRCodeProps['level']): boolean {
+ if (!val) return true;
+ return ['L', 'M', 'Q', 'H'].includes(val);
+ },
+ },
+ /** 二维码大小 */
+ size: {
+ type: Number,
+ default: 160,
+ },
+ /** 二维码状态 */
+ status: {
+ type: String as PropType,
+ default: 'active' as TdQRCodeProps['status'],
+ validator(val: TdQRCodeProps['status']): boolean {
+ if (!val) return true;
+ return ['active', 'expired', 'loading', 'scanned'].includes(val);
+ },
+ },
+ /** 自定义状态渲染器 */
+ statusRender: {
+ type: Function as PropType,
+ },
+ /** 渲染类型 */
+ type: {
+ type: String as PropType,
+ default: 'canvas' as TdQRCodeProps['type'],
+ validator(val: TdQRCodeProps['type']): boolean {
+ if (!val) return true;
+ return ['canvas', 'svg'].includes(val);
+ },
+ },
+ /** 扫描后的文本 */
+ value: {
+ type: String,
+ default: '',
+ },
+ /** 点击"点击刷新"的回调 */
+ onRefresh: Function as PropType,
+};
diff --git a/src/qrcode/qrcode.en-US.md b/src/qrcode/qrcode.en-US.md
new file mode 100644
index 000000000..1a8465be4
--- /dev/null
+++ b/src/qrcode/qrcode.en-US.md
@@ -0,0 +1,27 @@
+:: BASE_DOC ::
+
+## API
+
+
+### QRCode Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bgColor | String | - | QR code background color | N
+borderless | Boolean | false | Is there a border | N
+color | String | - | QR code color | N
+icon | String | - | The address of the picture in the QR code | N
+iconSize | Number / Object | 40 | The size of the picture in the QR code。Typescript：`number \| { width: number; height: number }` | N
+level | String | M | QR code error correction level。options: L/M/Q/H | N
+size | Number | 160 | QR code size | N
+status | String | active | QR code status。options: active/expired/loading/scanned。Typescript：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/qrcode/type.ts) | N
+statusRender | Slot / Function | - | Custom state renderer。Typescript：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;onRefresh?: () => void;}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/qrcode/type.ts) | N
+type | String | canvas | render type。options: canvas/svg | N
+value | String | - | scanned text | N
+onRefresh | Function | | Typescript：`() => void`
Click the "Click to refresh" callback | N + +### QRCode Events + +name | params | description +-- | -- | -- +refresh | \- | Click the "Click to refresh" callback diff --git a/src/qrcode/qrcode.md b/src/qrcode/qrcode.md new file mode 100644 index 000000000..89eaf85be --- /dev/null +++ b/src/qrcode/qrcode.md @@ -0,0 +1,27 @@ +:: BASE_DOC :: + +## API + + +### QRCode Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +bgColor | String | - | 二维码背景颜色 | N +borderless | Boolean | false | 是否有边框 | N +color | String | - | 二维码颜色 | N +icon | String | - | 二维码中图片的地址 | N +iconSize | Number / Object | 40 | 二维码中图片的大小。TS 类型：`number \| { width: number; height: number }` | N +level | String | M | 二维码纠错等级。可选项：L/M/Q/H | N +size | Number | 160 | 二维码大小 | N +status | String | active | 二维码状态。可选项：active/expired/loading/scanned。TS 类型：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/qrcode/type.ts) | N +statusRender | Slot / Function | - | 自定义状态渲染器。TS 类型：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;onRefresh?: () => void;}`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/qrcode/type.ts) | N +type | String | canvas | 渲染类型。可选项：canvas/svg | N +value | String | - | 扫描后的文本 | N +onRefresh | Function | | TS 类型：`() => void`
点击"点击刷新"的回调 | N + +### QRCode Events + +名称 | 参数 | 描述 +-- | -- | -- +refresh | \- | 点击"点击刷新"的回调 diff --git a/src/qrcode/qrcode.tsx b/src/qrcode/qrcode.tsx new file mode 100644 index 000000000..351e6c101 --- /dev/null +++ b/src/qrcode/qrcode.tsx @@ -0,0 +1,112 @@ +import { computed, defineComponent } from 'vue'; +import { isNumber } from 'lodash-es'; +import { usePrefixClass, useConfig, useVariables } from '../hooks'; +import { renderTNodeJSX } from '../utils/render-tnode'; +import { DEFAULT_FRONT_COLOR } from '../_common/js/qrcode/utils'; +import props from './props'; + +import QRCodeCanvas from './components/qrcode-canvas'; +import QRCodeSVG from './components/qrcode-svg'; +import QRcodeStatus from './components/qrcode-status'; + +import type { ImageSettings } from '../_common/js/qrcode/types'; + +export default defineComponent({ + name: 'TQRCode', + props, + setup(props) { + const classPrefix = usePrefixClass(); + const { globalConfig } = useConfig('qrcode'); + + const { themeFgColor, themeBgColor } = useVariables({ + themeFgColor: '--td-text-color-primary', + themeBgColor: '--td-bg-color-specialcomponent', + }); + + // bgColor：自定义颜色 > 主题色适配 > 透明[transparent] + const finalBgColor = computed(() => props.bgColor || themeBgColor.value || 'transparent'); + // color[fgColor]：自定义颜色 > 主题色适配 > 默认颜色[#000000] + const finalFgColor = computed(() => props.color || themeFgColor.value || DEFAULT_FRONT_COLOR); + + if (!props.value) { + return null; + } + + const imageSettings = computed(() => ({
+ src: props.icon,
+ x: undefined,
+ y: undefined,
+ height: isNumber(props.iconSize) ? props.iconSize : props.iconSize?.height ?? 40,
+ width: isNumber(props.iconSize) ? props.iconSize : props.iconSize?.width ?? 40,
+ excavate: true,
+ crossOrigin: 'anonymous',
+ }));
+
+ const classes = computed(() => [
+ `${classPrefix.value}-qrcode`,
+ {
+ [`${classPrefix.value}-borderless`]: props.borderless,
+ [`${classPrefix.value}-qrcode-svg`]: props.type === 'svg',
+ },
+ ]);
+
+ const mergedStyle = computed(() => ({
+ backgroundColor: finalBgColor.value,
+ width: `${props.size}px`,
+ height: `${props.size}px`,
+ }));
+
+ return {
+ classes,
+ mergedStyle,
+ globalConfig,
+ finalBgColor,
+ finalFgColor,
+ classPrefix,
+ imageSettings,
+ };
+ },
+ render() {
+ return (
+ ,
- validator(val: TdStatisticProps['color']): boolean {
- if (!val) return true;
- return ['black', 'blue', 'red', 'orange', 'green'].includes(val);
- },
+ type: String,
+ default: '',
},
/** 小数保留位数 */
decimalPlaces: {
@@ -40,7 +37,7 @@ export default {
prefix: {
type: [String, Function] as PropType,
},
- /** 默认展示进位分隔符，可以自定义为其他内容，`separator = ''` 设置为空字符串/null/undefined 时隐藏分隔符 */
+ /** 默认展示千位分隔符，可以自定义为其他内容，`separator = ''` 设置为空字符串/null/undefined 时展示默认分隔符 */
separator: {
type: String,
default: ',',
diff --git a/src/statistic/statistic.en-US.md b/src/statistic/statistic.en-US.md
index 17649bfbe..5aff808d9 100644
--- a/src/statistic/statistic.en-US.md
+++ b/src/statistic/statistic.en-US.md
@@ -1,22 +1,29 @@
:: BASE_DOC ::
## API
+
### Statistic Props
name | type | default | description | required
-- | -- | -- | -- | --
animation | Object | - | Animation effect control, `duration` refers to the transition time of the animation `unit: millisecond`, `valueFrom` refers to the initial value of the animation. `{ duration, valueFrom }`。Typescript：`animation` `interface animation { duration: number; valueFrom: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/statistic/type.ts) | N
animationStart | Boolean | false | Whether to start animation | N
-color | String | - | Color style, followed by TDesign style black, blue, red, orange, green.Can also be any RGB equivalent supported by [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)。options：black/blue/red/orange/green | N
+color | String | - | The color style can support TDesign's light and dark modes with the following options: black, blue, red, orange, and green. Alternatively, it can be any [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) value, but in this case, TDesign's light and dark modes will not be supported. | N
decimalPlaces | Number | - | Decimal places | N
extra | String / Slot / Function | - | Additional display content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
format | Function | - | Format numeric display value。Typescript：`(value: number) => number` | N
loading | Boolean | false | Loading | N
prefix | String / Slot / Function | - | Prefix content, display priority is higher than trend。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-separator | String | , | The carry separator is displayed by default, and can be customized to other content. When `separator = ''` is set to an empty string/null/undefined, the separator is hidden | N
+separator | String | , | Thousands separator is displayed by default, and can be customized to other content, and the default separator is displayed when `separator = ''` is set to an empty string/null/undefined | N
suffix | String / Slot / Function | - | Suffix content, display priority is higher than trend。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
title | String / Slot / Function | - | The title of Statistic。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-trend | String | - | trend。options：increase/decrease | N
-trendPlacement | String | left | Position of trending placements。options：left/right | N
+trend | String | - | trend。options: increase/decrease | N
+trendPlacement | String | left | Position of trending placements。options: left/right | N
unit | String / Slot / Function | - | Unit content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
value | Number | - | The value of Statistic | N
+
+### StatisticInstanceFunctions 组件实例方法
+
+name | params | return | description
+-- | -- | -- | --
+start | \- | \- | required。start animation
diff --git a/src/statistic/statistic.md b/src/statistic/statistic.md
index b8bc87063..2be74ce0d 100644
--- a/src/statistic/statistic.md
+++ b/src/statistic/statistic.md
@@ -1,22 +1,29 @@
:: BASE_DOC ::
## API
+
### Statistic Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
animation | Object | - | 动画效果控制，`duration` 指动画的过渡时间`单位：毫秒`，`valueFrom` 指动画的起始数值。`{ duration, valueFrom }`。TS 类型：`animation` `interface animation { duration: number; valueFrom: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/statistic/type.ts) | N
animationStart | Boolean | false | 是否开始动画 | N
-color | String | - | 颜色风格，依次为 TDesign 风格的黑色、蓝色、红色、橙色、绿色。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持的 RGB 等值。可选项：black/blue/red/orange/green | N
+color | String | - | 颜色风格，预设五个 TDesign 颜色风格：黑色（black）、蓝色（blue）、红色（red）、橙色（orange）、绿色（green）支持深浅色模式切换。也可以自定义任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持颜色值，深浅色模式切换需自行适配 | N
decimalPlaces | Number | - | 小数保留位数 | N
extra | String / Slot / Function | - | 额外的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
format | Function | - | 格式化数值显示值。TS 类型：`(value: number) => number` | N
loading | Boolean | false | 是否加载中 | N
prefix | String / Slot / Function | - | 前缀内容，展示优先级高于 trend。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-separator | String | , | 默认展示进位分隔符，可以自定义为其他内容，`separator = ''` 设置为空字符串/null/undefined 时隐藏分隔符 | N
+separator | String | , | 默认展示千位分隔符，可以自定义为其他内容，`separator = ''` 设置为空字符串/null/undefined 时展示默认分隔符 | N
suffix | String / Slot / Function | - | 后缀内容，展示优先级高于 trend。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
title | String / Slot / Function | - | 数值显示的标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
trend | String | - | 趋势。可选项：increase/decrease | N
trendPlacement | String | left | 趋势展示位置。可选项：left/right | N
unit | String / Slot / Function | - | 单位内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
value | Number | - | 数值显示的值 | N
+
+### StatisticInstanceFunctions 组件实例方法
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+start | \- | \- | 必需。开始动画
diff --git a/src/statistic/statistic.tsx b/src/statistic/statistic.tsx
index 6d6f594c8..7478e02e5 100644
--- a/src/statistic/statistic.tsx
+++ b/src/statistic/statistic.tsx
@@ -30,7 +30,7 @@ export default defineComponent({
const tween = ref(null);
const numberValue = computed(() => (isNumber(props.value) ? props.value : 0));
- const valueStyle = computed(() => ({ color: COLOR_MAP[color.value] || color.value }));
+ const valueStyle = computed(() => ({ color: COLOR_MAP[color.value as keyof typeof COLOR_MAP] || color.value }));
const innerDecimalPlaces = computed(
() => decimalPlaces.value ?? numberValue.value.toString().split('.')[1]?.length ?? 0,
);
diff --git a/src/statistic/type.ts b/src/statistic/type.ts
index 06d43d29f..e12180efe 100644
--- a/src/statistic/type.ts
+++ b/src/statistic/type.ts
@@ -17,9 +17,10 @@ export interface TdStatisticProps {
*/
animationStart?: boolean;
/**
- * 颜色风格，依次为 TDesign 风格的黑色、蓝色、红色、橙色、绿色。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持的 RGB 等值
+ * 颜色风格，预设五个 TDesign 颜色风格：黑色（black）、蓝色（blue）、红色（red）、橙色（orange）、绿色（green）支持深浅色模式切换。也可以自定义任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持颜色值，深浅色模式切换需自行适配
+ * @default ''
*/
- color?: 'black' | 'blue' | 'red' | 'orange' | 'green';
+ color?: string;
/**
* 小数保留位数
*/
@@ -42,7 +43,7 @@ export interface TdStatisticProps {
*/
prefix?: string | TNode;
/**
- * 默认展示进位分隔符，可以自定义为其他内容，`separator = ''` 设置为空字符串/null/undefined 时隐藏分隔符
+ * 默认展示千位分隔符，可以自定义为其他内容，`separator = ''` 设置为空字符串/null/undefined 时展示默认分隔符
* @default ,
*/
separator?: string;
@@ -73,6 +74,14 @@ export interface TdStatisticProps {
value?: number;
}
+/** 组件实例方法 */
+export interface StatisticInstanceFunctions {
+ /**
+ * 开始动画
+ */
+ start: () => void;
+}
+
export interface animation {
duration: number;
valueFrom: number;
diff --git a/src/switch/switch.tsx b/src/switch/switch.tsx
index 2eb1e257c..a513188a1 100755
--- a/src/switch/switch.tsx
+++ b/src/switch/switch.tsx
@@ -130,7 +130,7 @@ export default mixins(classPrefixMixins).extend({
},
render(): VNode {
const {
- loading, disabled, content, nodeClasses, classes, toggle, contentClasses,
+ loading, content, nodeClasses, classes, toggle, contentClasses,
} = this;
let switchContent: TNodeReturnValue;
@@ -143,8 +143,7 @@ export default mixins(classPrefixMixins).extend({
}
return (
- // @ts-ignore
-
@@ -28970,7 +28976,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/panel.vue 1`]
class="t-space-item"
>
`interface JumperProps { current: number; pageCount: number; onChange: (current: number) => void; }`
+ +### PopconfirmConfig name | type | default | description | required -- | -- | -- | -- | -- -clickAndDragText | String | - | \- | N -dragDropText | String | - | \- | N -draggingText | String | - | \- | N +cancel | String / Object | - | Typescript：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +confirm | String / Object | - | Typescript：`string \| ButtonProps` | N +confirmBtnTheme | Object | - | Typescript：`{ default: string; warning: string; danger: string; }` | N -### UploadConfigFileList +### QRCodeConfig name | type | default | description | required -- | -- | -- | -- | -- -fileNameText | String | - | \- | N -fileOperationDateText | String | - | \- | N -fileOperationText | String | - | \- | N -fileSizeText | String | - | \- | N -fileStatusText | String | - | \- | N +expiredText | String | - | Language configuration, "QR code expired" description text | N +refreshText | String | - | Language configuration, "QR code refresh" description text | N +scannedText | String | - | Language configuration, "QR code scanned" description text | N -### FormConfig +### RateConfig name | type | default | description | required -- | -- | -- | -- | -- -colonText | String | - | colon on the right of label ":" | N -errorMessage | Object | - | Typescript：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -requiredMark | Boolean | true | \- | N +rateText | Array | - | Typescript：`string[]` | N -### TagConfig +### SelectConfig name | type | default | description | required -- | -- | -- | -- | -- -closeIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +clearIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +empty | String | - | \- | N +filterable | Boolean | false | \- | N +loadingText | String | - | \- | N +placeholder | String | - | placeholder text | N ### StepsConfig @@ -343,73 +327,113 @@ name | type | default | description | required checkIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N errorIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### AlertConfig +### TableConfig name | type | default | description | required -- | -- | -- | -- | -- -collapseText | String | - | \- | N -expandText | String | - | \- | N +cancelText | String | - | \- | N +clearFilterResultButtonText | String | - | \- | N +columnConfigButtonText | String | - | \- | N +columnConfigDescriptionText | String | - | \- | N +columnConfigTitleText | String | - | \- | N +confirmText | String | - | \- | N +empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +expandIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +hideSortTips | Boolean | false | hide sort tips | N +loadingMoreText | String | - | \- | N +loadingText | String | - | \- | N +resetText | String | - | \- | N +searchResultText | String | - | \- | N +selectAllText | String | - | \- | N +size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +sortAscendingOperationText | String | - | \- | N +sortCancelOperationText | String | - | \- | N +sortDescendingOperationText | String | - | \- | N +sortIcon | Slot / Function | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +treeExpandAndFoldIcon | Function | undefined | Typescript：`TNode<{ type: 'expand' \| 'fold' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### DescriptionsConfig +### TagConfig name | type | default | description | required -- | -- | -- | -- | -- -colonText | String | - | colon on the right of label, ":" | N +closeIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### AnchorConfig +### TimePickerConfig name | type | default | description | required -- | -- | -- | -- | -- -copySuccessText | String | - | \- | N -copyText | String | - | \- | N +anteMeridiem | String | - | \- | N +confirm | String | - | \- | N +now | String | - | \- | N +placeholder | String | - | placeholder text | N +postMeridiem | String | - | \- | N -### MessageConfig +### TransferConfig name | type | default | description | required -- | -- | -- | -- | -- -`MessageOptions` | \- | - | extends `MessageOptions` | N +empty | String | - | \- | N +placeholder | String | - | \- | N +title | String | - | \- | N -### ImageConfig +### TreeConfig name | type | default | description | required -- | -- | -- | -- | -- -errorText | String | - | loading text, default value is "Error" | N -loadingText | String | - | loading text, default value is "loading" | N -replaceImageSrc | Function | - | replace all `src` attribute of images。Typescript：`(params: ImageProps) => string`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +empty | String | - | \- | N +folderIcon | Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### ImageViewerConfig +### TreeSelectConfig name | type | default | description | required -- | -- | -- | -- | -- -errorText | String | - | \- | N -mirrorTipText | String | - | mirror operation text | N -originalSizeTipText | String | - | original size tips | N -rotateTipText | String | - | rotate operation text | N +empty | String | - | \- | N +loadingText | String | - | \- | N +placeholder | String | - | placeholder text | N -### GuideConfig +### TypographyConfig name | type | default | description | required -- | -- | -- | -- | -- -finishButtonProps | Object | - | finish button in last step. `{ content: 'Finish', theme: 'primary' }`。Typescript：`ButtonProps` | N -nextButtonProps | Object | - | next step button. `{ content: 'Next Button', theme: 'primary' }`。Typescript：`ButtonProps` | N -prevButtonProps | Object | - | previous step button. `{ content: 'Previous Step', theme: 'default' }`。Typescript：`ButtonProps` | N -skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default' }`。Typescript：`ButtonProps` | N +collapseText | String | - | collapse text | N +copiedText | String | - | copied text | N +expandText | String | - | expand text | N -### RateConfig +### UploadConfig name | type | default | description | required -- | -- | -- | -- | -- -rateText | Array | - | Typescript：`string[]` | N +cancelUploadText | String | - | \- | N +dragger | Object | - | Typescript：`UploadConfigDragger` | N +file | Object | - | Typescript：`UploadConfigFileList` | N +progress | Object | - | Typescript：`UploadConfigProgress` | N +sizeLimitMessage | String | - | \- | N +triggerUploadText | Object | - | Typescript：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -### EmptyConfig +### UploadConfigDragger name | type | default | description | required -- | -- | -- | -- | -- -image | Object | - | Typescript：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -titleText | Object | - | Typescript：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N +clickAndDragText | String | - | \- | N +dragDropText | String | - | \- | N +draggingText | String | - | \- | N -### AutoCompleteConfig +### UploadConfigFileList name | type | default | description | required -- | -- | -- | -- | -- -empty | String | - | \- | N +fileNameText | String | - | \- | N +fileOperationDateText | String | - | \- | N +fileOperationText | String | - | \- | N +fileSizeText | String | - | \- | N +fileStatusText | String | - | \- | N + +### UploadConfigProgress + +name | type | default | description | required +-- | -- | -- | -- | -- +failText | String | - | \- | N +successText | String | - | \- | N +uploadingText | String | - | \- | N +waitingText | String | - | \- | N diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md index 59e988600..f82a5b0ed 100644 --- a/src/config-provider/config-provider.md +++ b/src/config-provider/config-provider.md @@ -70,7 +70,7 @@ globalConfig | Object | - | 全局配置。TS 类型：`GlobalConfigProvider` | alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N animation | Object | - | 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型：`Partial
`interface JumperProps { current: number; pageCount: number; onChange: (current: number) => void; }`
+ +### PopconfirmConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -clickAndDragText | String | - | 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本 | N -dragDropText | String | - | 语言配置，“释放图标” 描述文本 | N -draggingText | String | - | 语言配置，'拖拽到此区域' 描述文本 | N +cancel | String / Object | - | 语言配置，“取消”描述文本。TS 类型：`string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +confirm | String / Object | - | 语言配置，“确定”描述文本。TS 类型：`string \| ButtonProps` | N +confirmBtnTheme | Object | - | 确认按钮主题色，即 Popconfirm 的 `theme` 和 确认按钮的 `theme` 映射关系。示例：{ danger: 'danger' }。TS 类型：`{ default: string; warning: string; danger: string; }` | N -### UploadConfigFileList +### QRCodeConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -fileNameText | String | - | 语言配置，“文件名” 描述文本 | N -fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N -fileOperationText | String | - | 语言配置，“操作” 描述文本 | N -fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N -fileStatusText | String | - | 语言配置，“状态” 描述文本 | N +expiredText | String | - | 语言配置，“二维码过期”描述文本 | N +refreshText | String | - | 语言配置，“点击刷新”描述文本 | N +scannedText | String | - | 语言配置，“已扫描”描述文本 | N -### FormConfig +### RateConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -colonText | String | - | 字段旁边的冒号，中文为“：” | N -errorMessage | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N +rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`string[]` | N -### TagConfig +### SelectConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +clearIcon | Function | - | 清除图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +filterable | Boolean | false | 全局配置是否可筛选 | N +loadingText | String | - | 语言配置，“加载中”描述文本 | N +placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N ### StepsConfig @@ -344,73 +328,113 @@ closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出 checkIcon | Slot / Function | - | 已完成步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N errorIcon | Slot / Function | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### AlertConfig +### TableConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -collapseText | String | - | 语言配置，“收起”描述文本 | N -expandText | String | - | 语言配置，“展开更多”描述文本 | N +cancelText | String | - | 语言配置，“取消” 描述文本 | N +clearFilterResultButtonText | String | - | 语言配置，过滤功能中，“清空筛选” 描述文本 | N +columnConfigButtonText | String | - | 语言配置，列配置功能中，“列配置” 按钮描述文本 | N +columnConfigDescriptionText | String | - | 语言配置，“请选择需要在表格中显示的数据列” 描述文本，列配置功能中弹框顶部描述 | N +columnConfigTitleText | String | - | 语言配置，“表格列配置” 描述文本，列配置功能中弹框的标题 | N +confirmText | String | - | 语言配置，“确认” 描述文本 | N +empty | String / Slot / Function | - | 语言配置，“暂无数据” 描述文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +expandIcon | Slot / Function | undefined | 展开和收起图标（配置传入收起图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +filterIcon | Slot / Function | undefined | 过滤图标，如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +hideSortTips | Boolean | false | 隐藏排序文本提示 | N +loadingMoreText | String | - | 语言配置，“点击加载更多” 描述文本 | N +loadingText | String | - | 语言配置，“正在加载中，请稍后” 描述文本 | N +resetText | String | - | 语言配置，“重置” 描述文本 | N +searchResultText | String | - | 语言配置，过滤功能中，过滤条件和结果描述文本，示例：'搜索“{result}”，找到 {count} 条结果' | N +selectAllText | String | - | 语言配置，'全选' 描述文本 | N +size | String | medium | 全局表格尺寸配置。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +sortAscendingOperationText | String | - | 语言配置，'点击升序' 描述文本 | N +sortCancelOperationText | String | - | 语言配置，'点击取消排序' 描述文本 | N +sortDescendingOperationText | String | - | 语言配置，'点击降序' 描述文本 | N +sortIcon | Slot / Function | undefined | 排序图标（配置传入降序图标即可），如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +treeExpandAndFoldIcon | Function | undefined | 树形结构，展开和折叠图标。如果没有配置，会使用组件内置的默认图标。TS 类型：`TNode<{ type: 'expand' \| 'fold' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### DescriptionsConfig +### TagConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -colonText | String | - | 字段旁边的冒号，中文为“：” | N +closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### AnchorConfig +### TimePickerConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -copySuccessText | String | - | 语言配置，“链接复制成功”描述文本 | N -copyText | String | - | 语言配置，“复制链接” 描述文本 | N +anteMeridiem | String | - | 语言配置，“上午”描述文本 | N +confirm | String | - | 语言配置，“确定”描述文本 | N +now | String | - | 语言配置，“此刻”描述文本 | N +placeholder | String | - | 语言配置，\"请选择时间\"占位符描述文本 | N +postMeridiem | String | - | 语言配置，“下午”描述文本 | N -### MessageConfig +### TransferConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -`MessageOptions` | \- | - | 继承 `MessageOptions` 中的全部属性 | N +empty | String | - | 语言配置，“暂无数据”空数据描述文本 | N +placeholder | String | - | 语言配置，“请输入关键词搜索”占位符描述文本 | N +title | String | - | 语言配置，穿梭框标题描述文本，示例：“{checked} / {total} 项” | N -### ImageConfig +### TreeConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -errorText | String | - | 图片加载失败显示的文本，中文默认为“图片无法显示” | N -loadingText | String | - | 图片加载中显示的文本，中文默认为“图片加载中” | N -replaceImageSrc | Function | - | 统一替换图片 `src` 地址，参数为组件的全部属性，返回值为新的图片地址。TS 类型：`(params: ImageProps) => string`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +folderIcon | Function | - | 目录层级图标，传入收起状态图标即可。【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -### ImageViewerConfig +### TreeSelectConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -errorText | String | - | 全局语言配置，默认为 “图片加载失败，可尝试重新加载” | N -mirrorTipText | String | - | 全局语言配置，默认为 “镜像” | N -originalSizeTipText | String | - | 全局语言配置，默认为 “原始大小” | N -rotateTipText | String | - | 全局语言配置，默认为 “旋转” | N +empty | String | - | 语言配置，“暂无数据”描述文本 | N +loadingText | String | - | 语言配置，“加载中”描述文本 | N +placeholder | String | - | 语言配置，“请选择”占位符描述文本 | N -### GuideConfig +### TypographyConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -finishButtonProps | Object | - | 最后一步中的完成按钮，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N -nextButtonProps | Object | - | 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`。TS 类型：`ButtonProps` | N -prevButtonProps | Object | - | 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`。TS 类型：`ButtonProps` | N -skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`。TS 类型：`ButtonProps` | N +collapseText | String | - | 语言配置，“收起”描述文本 | N +copiedText | String | - | 语言配置，“复制成功”描述文本 | N +expandText | String | - | 语言配置，“展开”描述文本 | N -### RateConfig +### UploadConfig 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`string[]` | N +cancelUploadText | String | - | 语言配置，“取消上传” 描述文本 | N +dragger | Object | - | 语言配置，拖拽相关。示例：{ dragDropText: '释放图标', draggingText: '拖拽到此区域', clickAndDragText: '点击上方“选择文件”或将文件拖到此区域' }。TS 类型：`UploadConfigDragger` | N +file | Object | - | 语言配置，文件信息相关。示例：{ fileNameText: '文件名', fileSizeText: '文件尺寸', fileStatusText: '状态', fileOperationText: '操作', fileOperationDateText: '上传日期' }。TS 类型：`UploadConfigFileList` | N +progress | Object | - | 语言配置，上传进度相关。示例：{ uploadText: '上传中', waitingText: '待上传', 'failText': '上传失败', successText: '上传成功' }。TS 类型：`UploadConfigProgress` | N +sizeLimitMessage | String | - | 语言配置，文件大小超出限制时提醒文本。示例：`'文件大小不能超过 {sizeLimit}'` | N +triggerUploadText | Object | - | 语言配置，上传功能触发文案。示例：{ image: '点击上传图片', normal: '点击上传', fileInput: '选择文件', reupload: '重新上传', delete: '删除', continueUpload?: '继续选择' }。TS 类型：`UploadTriggerUploadText` `interface UploadTriggerUploadText { image?: string, normal?: string, fileInput?: string, reupload?: string, continueUpload?: string, delete?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N -### EmptyConfig +### UploadConfigDragger 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -image | Object | - | 空状态组件各类型的图片配置。TS 类型：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类型：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N +clickAndDragText | String | - | 语言配置，“ 点击上方“选择文件”或将文件拖到此区域 ” 描述文本 | N +dragDropText | String | - | 语言配置，“释放图标” 描述文本 | N +draggingText | String | - | 语言配置，'拖拽到此区域' 描述文本 | N -### AutoCompleteConfig +### UploadConfigFileList 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -empty | String | - | 语言配置，“暂无数据”描述文本 | N +fileNameText | String | - | 语言配置，“文件名” 描述文本 | N +fileOperationDateText | String | - | 语言配置，“上传日期” 描述文本 | N +fileOperationText | String | - | 语言配置，“操作” 描述文本 | N +fileSizeText | String | - | 语言配置，“文件尺寸” 描述文本 | N +fileStatusText | String | - | 语言配置，“状态” 描述文本 | N + +### UploadConfigProgress + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +failText | String | - | 语言配置，“上传失败”文本描述 | N +successText | String | - | 语言配置，“上传成功”文本描述 | N +uploadingText | String | - | 语言配置，“上传中”文本描述 | N +waitingText | String | - | 语言配置，“待上传”文本描述 | N diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index c1269eeaa..712cc3f27 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -8,10 +8,11 @@ import { GlobalIconConfig } from 'tdesign-icons-vue'; import { CalendarController } from '../calendar'; import { ButtonProps } from '../button'; import { FormErrorMessage } from '../form'; -import { MessageOptions } from '../message'; import { ImageProps } from '../image'; +import { MessageOptions } from '../message'; import { TNode, SizeEnum, AttachNode } from '../common'; export type AttachNodeComponent = 'imageViewer' | 'drawer' | 'dialog' | 'popup'; + export interface TdConfigProviderProps { /** * 全局配置 @@ -33,10 +34,9 @@ export interface GlobalConfigProvider { */ animation?: Partial
| N -onChange | Function | | Typescript：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
| N +onChange | Function | | Typescript：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear' \| 'tag-remove'`
| N +onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
Triggered when the clear button is clicked | N onConfirm | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| N onFocus | Function | | Typescript：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
| N onPick | Function | | Typescript：`(value: DateValue) => void`
| N @@ -47,7 +48,8 @@ onPresetClick | Function | | Typescript：`(context: { preset: PresetDate, e: M name | params | description -- | -- | -- blur | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | \- -change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
+change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear' \| 'tag-remove'`
+clear | `(context: { e: MouseEvent })` | Triggered when the clear button is clicked confirm | `(context: { date: Date, e: MouseEvent })` | \- focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | \- pick | `(value: DateValue)` | \- diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index 7e69a54d7..0093d1f57 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -36,7 +36,8 @@ defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性 valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`。TS 类型：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N cancelRangeSelectLimit | Boolean | false | 说明：默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N onBlur | Function | | TS 类型：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
当输入框失去焦点时触发 | N -onChange | Function | | TS 类型：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
| N +onChange | Function | | TS 类型：`(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear' \| 'tag-remove'`
| N +onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
清空按钮点击时触发 | N onConfirm | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`
如果存在“确定”按钮，则点击“确定”按钮时触发 | N onFocus | Function | | TS 类型：`(context: { value: DateValue \| DateMultipleValue; e: FocusEvent }) => void`
输入框获得焦点时触发 | N onPick | Function | | TS 类型：`(value: DateValue) => void`
面板选中值后触发 | N @@ -47,7 +48,8 @@ onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: Mo 名称 | 参数 | 描述 -- | -- | -- blur | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | 当输入框失去焦点时触发 -change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
+change | `(value: DateValue\| DateMultipleValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`
`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear' \| 'tag-remove'`
+clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 confirm | `(context: { date: Date, e: MouseEvent })` | 如果存在“确定”按钮，则点击“确定”按钮时触发 focus | `(context: { value: DateValue \| DateMultipleValue; e: FocusEvent })` | 输入框获得焦点时触发 pick | `(value: DateValue)` | 面板选中值后触发 diff --git a/src/date-picker/panel/PanelContent.tsx b/src/date-picker/panel/PanelContent.tsx index 58441736f..9d455ad97 100644 --- a/src/date-picker/panel/PanelContent.tsx +++ b/src/date-picker/panel/PanelContent.tsx @@ -22,6 +22,7 @@ export default defineComponent({ month: Number, tableData: Array, time: String, + multiple: Boolean, popupVisible: Boolean, firstDayOfWeek: Number, partial: String, @@ -71,6 +72,7 @@ export default defineComponent({ time: this.time, value: this.value, format: this.format, + multiple: this.multiple, firstDayOfWeek: this.firstDayOfWeek, onCellClick: (date: Date, { e }: { e: MouseEvent }) => this.onCellClick?.(date, { e, partial: this.partial }), onCellMouseEnter: (date: Date) => this.onCellMouseEnter?.(date, { partial: this.partial }), diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 711109c24..d07ba66ae 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -12,3 +12,5 @@ export * from './useResizeObserver'; export * from './useVirtualScrollNew'; export * from './useVModel'; export * from './useImagePreviewUrl'; +export * from './useMutationObservable'; +export * from './useVariables'; diff --git a/src/hooks/useMutationObservable.ts b/src/hooks/useMutationObservable.ts new file mode 100644 index 000000000..f0146e50f --- /dev/null +++ b/src/hooks/useMutationObservable.ts @@ -0,0 +1,67 @@ +import { + onBeforeUnmount, onMounted, ref, watch, +} from 'vue'; +import { debounce, isEqual } from 'lodash-es'; + +export interface MutationCallback { + (mutations: MutationRecord[]): void; +} + +interface Options { + debounceTime?: number; + config?: MutationObserverInit; +} + +const DEFAULT_OPTIONS: Options = { + debounceTime: 0, + config: { + attributes: true, + childList: true, + characterData: true, + subtree: true, + }, +}; + +/** + * useMutationObservable + * @param targetEl 监听对象 + * @param callback 回调方法 + * @param options 配置项 + */ +export function useMutationObservable( + targetEl: HTMLElement | null, + callback: MutationCallback, + options: Options = DEFAULT_OPTIONS, +) { + const mergedOptions = ref
+
diff --git a/src/image-viewer/_example/multiple.vue b/src/image-viewer/_example/multiple.vue
index 88ef67c18..70e710c82 100644
--- a/src/image-viewer/_example/multiple.vue
+++ b/src/image-viewer/_example/multiple.vue
@@ -4,7 +4,7 @@
+
diff --git a/src/image-viewer/image-viewer.en-US.md b/src/image-viewer/image-viewer.en-US.md
index d49121e7f..9c7bdb880 100644
--- a/src/image-viewer/image-viewer.en-US.md
+++ b/src/image-viewer/image-viewer.en-US.md
@@ -6,6 +6,7 @@
name | type | default | description | required
-- | -- | -- | -- | --
+attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
closeOnOverlay | Boolean | - | \- | N
@@ -19,13 +20,13 @@ mode | String | modal | options: modal/modeless | N
navigationArrow | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
showOverlay | Boolean | undefined | \- | N
title | String / Slot / Function | - | preview title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-trigger | String / Slot / Function | - | trigger element。Typescript：`TNode \| TNode<{ open: () => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+trigger | String / Slot / Function | - | trigger element。Typescript：`TNode \| TNode<{ open: (index?: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
viewerScale | Object | - | Typescript：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
visible | Boolean | false | hide or show image viewer。`v-model` is supported | N
defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
zIndex | Number | - | \- | N
onClose | Function | | Typescript：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`| N -onDownload | Function | | Typescript：`(url: string) => void`
| N +onDownload | Function | | Typescript：`(url: string \| File) => void`
| N onIndexChange | Function | | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`
| N ### ImageViewer Events diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md index c12486895..cedd057ce 100644 --- a/src/image-viewer/image-viewer.md +++ b/src/image-viewer/image-viewer.md @@ -1,10 +1,12 @@ :: BASE_DOC :: ## API + ### ImageViewer Props 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- +attach | String / Function | 'body' | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N @@ -18,13 +20,13 @@ mode | String | modal | 模态预览（modal）和非模态预览（modeless)。 navigationArrow | Boolean / Slot / Function | true | 切换预览图片的左图标，可自定义。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N showOverlay | Boolean | undefined | 是否显示遮罩层。`mode=modal` 时，默认显示；`mode=modeless` 时，默认不显示 | N title | String / Slot / Function | - | 预览标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: () => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: (index?: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N viewerScale | Object | - | 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效。TS 类型：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` | N defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N zIndex | Number | - | 层级，默认为 2000 | N onClose | Function | | TS 类型：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`
关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键 | N -onDownload | Function | | TS 类型：`(url: string) => void`
自定义预览图片下载操作，url为图片链接 | N +onDownload | Function | | TS 类型：`(url: string \| File) => void`
自定义预览图片下载操作，url为图片链接 | N onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`
预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N ### ImageViewer Events diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx index e539c80fd..a962fd489 100644 --- a/src/image-viewer/image-viewer.tsx +++ b/src/image-viewer/image-viewer.tsx @@ -2,6 +2,7 @@ import { computed, defineComponent, ref, toRefs, watch, } from 'vue'; import { ChevronLeftIcon, ChevronDownIcon, CloseIcon } from 'tdesign-icons-vue'; +import { isNumber } from 'lodash-es'; import props from './props'; import Container from './base/Container'; import TImageViewerIcon from './base/ImageModalIcon'; @@ -104,7 +105,10 @@ export default defineComponent({ downloadFile(url); }; - const openHandler = () => { + const openHandler = (index: number) => { + if (isNumber(index)) { + onImgClick(index); + } setVisibleValue(true); }; diff --git a/src/image/image.tsx b/src/image/image.tsx index 9743382ab..cc66686a6 100644 --- a/src/image/image.tsx +++ b/src/image/image.tsx @@ -112,7 +112,7 @@ export default defineComponent({ }); onUnmounted(() => { - imageRef.value && io && (io as IntersectionObserver).unobserve(imageRef.value as Element); + imageRef.value && io.value && (io.value as IntersectionObserver).unobserve(imageRef.value as Element); }); return { diff --git a/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap b/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap index a20e52de3..e8ce67676 100644 --- a/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap +++ b/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap @@ -3,14 +3,22 @@ exports[`Submenu > props > :disabled 1`] = ` +> + + `; exports[`Submenu > props > :name 1`] = ` +> + + `; exports[`Submenu > slot >
Click the "Click to refresh" callback | N + +### QRCode Events + +name | params | description +-- | -- | -- +refresh | \- | Click the "Click to refresh" callback diff --git a/src/qrcode/qrcode.md b/src/qrcode/qrcode.md new file mode 100644 index 000000000..89eaf85be --- /dev/null +++ b/src/qrcode/qrcode.md @@ -0,0 +1,27 @@ +:: BASE_DOC :: + +## API + + +### QRCode Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +bgColor | String | - | 二维码背景颜色 | N +borderless | Boolean | false | 是否有边框 | N +color | String | - | 二维码颜色 | N +icon | String | - | 二维码中图片的地址 | N +iconSize | Number / Object | 40 | 二维码中图片的大小。TS 类型：`number \| { width: number; height: number }` | N +level | String | M | 二维码纠错等级。可选项：L/M/Q/H | N +size | Number | 160 | 二维码大小 | N +status | String | active | 二维码状态。可选项：active/expired/loading/scanned。TS 类型：`QRStatus` `type QRStatus = "active" \| "expired" \| "loading" \| "scanned"`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/qrcode/type.ts) | N +statusRender | Slot / Function | - | 自定义状态渲染器。TS 类型：`(info:StatusRenderInfo) => TNode` `type StatusRenderInfo = {status:QRStatus;onRefresh?: () => void;}`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/qrcode/type.ts) | N +type | String | canvas | 渲染类型。可选项：canvas/svg | N +value | String | - | 扫描后的文本 | N +onRefresh | Function | | TS 类型：`() => void`
点击"点击刷新"的回调 | N + +### QRCode Events + +名称 | 参数 | 描述 +-- | -- | -- +refresh | \- | 点击"点击刷新"的回调 diff --git a/src/qrcode/qrcode.tsx b/src/qrcode/qrcode.tsx new file mode 100644 index 000000000..351e6c101 --- /dev/null +++ b/src/qrcode/qrcode.tsx @@ -0,0 +1,112 @@ +import { computed, defineComponent } from 'vue'; +import { isNumber } from 'lodash-es'; +import { usePrefixClass, useConfig, useVariables } from '../hooks'; +import { renderTNodeJSX } from '../utils/render-tnode'; +import { DEFAULT_FRONT_COLOR } from '../_common/js/qrcode/utils'; +import props from './props'; + +import QRCodeCanvas from './components/qrcode-canvas'; +import QRCodeSVG from './components/qrcode-svg'; +import QRcodeStatus from './components/qrcode-status'; + +import type { ImageSettings } from '../_common/js/qrcode/types'; + +export default defineComponent({ + name: 'TQRCode', + props, + setup(props) { + const classPrefix = usePrefixClass(); + const { globalConfig } = useConfig('qrcode'); + + const { themeFgColor, themeBgColor } = useVariables({ + themeFgColor: '--td-text-color-primary', + themeBgColor: '--td-bg-color-specialcomponent', + }); + + // bgColor：自定义颜色 > 主题色适配 > 透明[transparent] + const finalBgColor = computed(() => props.bgColor || themeBgColor.value || 'transparent'); + // color[fgColor]：自定义颜色 > 主题色适配 > 默认颜色[#000000] + const finalFgColor = computed(() => props.color || themeFgColor.value || DEFAULT_FRONT_COLOR); + + if (!props.value) { + return null; + } + + const imageSettings = computed
+ {this.status !== 'active' && (
+
+ );
+ },
+});
diff --git a/src/qrcode/style/css.js b/src/qrcode/style/css.js
new file mode 100644
index 000000000..6a9a4b132
--- /dev/null
+++ b/src/qrcode/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/qrcode/style/index.js b/src/qrcode/style/index.js
new file mode 100644
index 000000000..6714f08d3
--- /dev/null
+++ b/src/qrcode/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/web/components/qrcode/_index.less';
diff --git a/src/qrcode/type.ts b/src/qrcode/type.ts
new file mode 100644
index 000000000..e2e200fd9
--- /dev/null
+++ b/src/qrcode/type.ts
@@ -0,0 +1,72 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TNode } from '../common';
+
+export interface TdQRCodeProps {
+ /**
+ * 二维码背景颜色
+ * @default ''
+ */
+ bgColor?: string;
+ /**
+ * 是否有边框
+ * @default false
+ */
+ borderless?: boolean;
+ /**
+ * 二维码颜色
+ * @default ''
+ */
+ color?: string;
+ /**
+ * 二维码中图片的地址
+ * @default ''
+ */
+ icon?: string;
+ /**
+ * 二维码中图片的大小
+ * @default 40
+ */
+ iconSize?: number | { width: number; height: number };
+ /**
+ * 二维码纠错等级
+ * @default M
+ */
+ level?: 'L' | 'M' | 'Q' | 'H';
+ /**
+ * 二维码大小
+ * @default 160
+ */
+ size?: number;
+ /**
+ * 二维码状态
+ * @default active
+ */
+ status?: QRStatus;
+ /**
+ * 自定义状态渲染器
+ */
+ statusRender?: (info: StatusRenderInfo) => TNode;
+ /**
+ * 渲染类型
+ * @default canvas
+ */
+ type?: 'canvas' | 'svg';
+ /**
+ * 扫描后的文本
+ * @default ''
+ */
+ value?: string;
+ /**
+ * 点击"点击刷新"的回调
+ */
+ onRefresh?: () => void;
+}
+
+export type QRStatus = 'active' | 'expired' | 'loading' | 'scanned';
+
+export type StatusRenderInfo = { status: QRStatus; onRefresh?: () => void };
diff --git a/src/statistic/__tests__/index.test.jsx b/src/statistic/__tests__/index.test.jsx
index 6e57dfceb..c646cf3fd 100644
--- a/src/statistic/__tests__/index.test.jsx
+++ b/src/statistic/__tests__/index.test.jsx
@@ -1,5 +1,6 @@
import { mount } from '@vue/test-utils';
import Statistic from '@/src/statistic/index.ts';
+import { COLOR_MAP } from '../../_common/js/statistic/utils';
describe('Statistic', () => {
describe(':props', () => {
@@ -110,5 +111,48 @@ describe('Statistic', () => {
expect(trendIconElement.exists()).toBe(true);
expect(trendIconElement.is('svg')).toBe(true);
});
+
+ it('color:#ff0000', () => {
+ const wrapper = mount(Statistic, {
+ propsData: {
+ title: 'Total Sales',
+ value: 1000,
+ color: '#ff0000',
+ },
+ });
+
+ const contentElement = wrapper.find('.t-statistic-content');
+ expect(contentElement.exists()).toBe(true);
+ expect(contentElement.attributes('style')).toContain('color: rgb(255, 0, 0)');
+ });
+
+ it('color:yellow', () => {
+ const wrapper = mount(Statistic, {
+ propsData: {
+ title: 'Total Sales',
+ value: 1000,
+ color: 'yellow',
+ },
+ });
+
+ const contentElement = wrapper.find('.t-statistic-content');
+ expect(contentElement.exists()).toBe(true);
+ expect(contentElement.attributes('style')).toContain('color: yellow');
+ });
+
+ it('colors: colorKeys', async () => {
+ Object.keys(COLOR_MAP).forEach((color) => {
+ const wrapper = mount(Statistic, {
+ propsData: {
+ value: 1000,
+ color,
+ },
+ });
+
+ const contentElement = wrapper.find('.t-statistic-content');
+ expect(contentElement.exists()).toBe(true);
+ expect(contentElement.attributes('style')).toContain(`color: ${COLOR_MAP[color]}`);
+ });
+ });
});
});
diff --git a/src/statistic/props.ts b/src/statistic/props.ts
index d70a7d031..478db159d 100644
--- a/src/statistic/props.ts
+++ b/src/statistic/props.ts
@@ -14,13 +14,10 @@ export default {
},
/** 是否开始动画 */
animationStart: Boolean,
- /** 颜色风格，依次为 TDesign 风格的黑色、蓝色、红色、橙色、绿色。也可以为任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持的 RGB 等值 */
+ /** 颜色风格，预设五个 TDesign 颜色风格：黑色（black）、蓝色（blue）、红色（red）、橙色（orange）、绿色（green）支持深浅色模式切换。也可以自定义任何 [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 支持颜色值，深浅色模式切换需自行适配 */
color: {
- type: String as PropType
+ renderTNodeJSX(this, 'statusRender', {
+ params: {
+ status: this.status,
+ onRefresh: this.onRefresh,
+ },
+ })
+ }
+ refresh={this.onRefresh}
+ />
+
+ )}
+ {this.type === 'canvas' ? (
+
+ (comp: T, dep?: PluginObject, directive?: { name: string; comp: unknown }) {
+export function withInstall(
+ comp: T,
+ dep?: PluginObject,
+ directive?: { name: string; comp: unknown },
+ alias?: string,
+) {
const c = comp as any;
const name = c?.options?.name || c.name;
@@ -11,8 +16,9 @@ export function withInstall(comp: T, dep?: PluginObject, directive?: { n
const installConfig = { ...defaults, ...config };
/// 为保证组件名称简洁，前缀保持为一个单词，首字母大写
const defaultPrefix = capitalize(defaults.prefix);
+ const compName = alias || name;
// mapprops component is original component
- let componentName = name.replace(defaultPrefix, '').replace('-mapprops', '');
+ let componentName = compName.replace(defaultPrefix, '').replace('-mapprops', '');
componentName = capitalize(installConfig.prefix) + componentName;
Vue.component(componentName, comp);
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index 794688313..24796bd77 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -394,7 +394,13 @@ exports[`csr snapshot test > csr test ./src/alert/_example/close.vue 1`] = `
{loadingContent}
diff --git a/src/tree/hooks/useRenderLabel.tsx b/src/tree/hooks/useRenderLabel.tsx
index d48a36b58..910b69f67 100644
--- a/src/tree/hooks/useRenderLabel.tsx
+++ b/src/tree/hooks/useRenderLabel.tsx
@@ -74,6 +74,7 @@ export default function useRenderLabel(state: TypeTreeItemState) {
stopLabelTrigger={shouldStopLabelTrigger.value}
ignore={treeProps.expandOnClickNode ? 'active' : 'expand,active'}
props={itemCheckProps}
+ title={node.label}
>
{labelNode}
diff --git a/src/upload/themes/dragger-file.tsx b/src/upload/themes/dragger-file.tsx
index 7056a8b81..a9f25d418 100644
--- a/src/upload/themes/dragger-file.tsx
+++ b/src/upload/themes/dragger-file.tsx
@@ -74,6 +74,13 @@ export default defineComponent({
};
},
+ computed: {
+ hasActiveFile() {
+ const file = this.displayFiles[0];
+ return file && (['progress', 'success', 'fail', 'waiting'].includes(file.status) || !file.status);
+ },
+ },
+
methods: {
renderImage() {
if (!this.displayFiles.length) return;
@@ -208,16 +215,20 @@ export default defineComponent({
},
getContent() {
- const file = this.displayFiles[0];
- if (file && (['progress', 'success', 'fail', 'waiting'].includes(file.status) || !file.status)) {
+ if (this.hasActiveFile) {
return this.renderMainPreview();
}
return (
- {switchContent}
+
diff --git a/src/utils/withInstall.ts b/src/utils/withInstall.ts
index 2adaf6985..52d924c6e 100644
--- a/src/utils/withInstall.ts
+++ b/src/utils/withInstall.ts
@@ -1,7 +1,12 @@
import Vue, { VueConstructor, PluginObject } from 'vue';
import { capitalize } from 'lodash-es';
-export function withInstall
{this.$scopedSlots.default?.(null) || this.renderDefaultDragElement()}
);
},
+ handleDraggerClick(e: MouseEvent) {
+ if (!this.hasActiveFile) {
+ this.triggerUpload?.(e);
+ }
+ },
},
render() {
@@ -229,6 +240,7 @@ export default defineComponent({
onDragenter={this.drag.handleDragenter}
onDragover={this.drag.handleDragover}
onDragleave={this.drag.handleDragleave}
+ onClick={this.handleDraggerClick}
>
{this.trigger?.(h, { files: this.displayFiles, dragActive: this.dragActive }) || this.getContent()}
- Slot Close
+
+
+ 关闭
+
+
csr test ./src/color-picker/_example/panel.vue 1`]
@@ -29706,7 +29712,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/panel.vue 1`]
class="t-space-item"
>
csr test ./src/color-picker/_example/panel.vue 1`]
@@ -31884,7 +31890,7 @@ exports[`csr snapshot test > csr test ./src/color-picker/_example/status-readonl
+
+
+
+
+
+
+
+
`;
@@ -68585,6 +68694,37 @@ exports[`csr snapshot test > csr test ./src/menu/_example/closable-side.vue 1`]
/>
+
+
+
+
+
+ csr test ./src/menu/_example/double.vue 1`] = `
+
csr test ./src/menu/_example/double.vue 1`] = `
+
csr test ./src/menu/_example/multi-head.vue 1`] = `
csr test ./src/menu/_example/multi-head.vue 1`] = `
csr test ./src/menu/_example/multi-head.vue 1`] = `
-
-
-
-
-
-
csr test ./src/menu/_example/group-side.vue 1`] = `
+
csr test ./src/menu/_example/head-menu-tile.vue 1`]
+
@@ -69960,6 +70310,40 @@ exports[`csr snapshot test > csr test ./src/menu/_example/head-menu-tile.vue 1`]
+
@@ -70012,6 +70396,40 @@ exports[`csr snapshot test > csr test ./src/menu/_example/head-menu-tile.vue 1`]
+
@@ -70199,27 +70617,17 @@ exports[`csr snapshot test > csr test ./src/menu/_example/multi-head.vue 1`] = `
-
-
-
+
-
+
+
+
+
+
+
+
+
+
-
+
+
- 
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
csr test ./src/menu/_example/multi-head.vue 1`] = `
+
csr test ./src/menu/_example/multi-head.vue 1`] = `
+
-
+
+
+
+
+
+
+
+ csr test ./src/menu/_example/multi-side.vue 1`] = `
+
csr test ./src/menu/_example/multi-side.vue 1`] = `
+
csr test ./src/menu/_example/multi-side.vue 1`] = `
+
csr test ./src/menu/_example/multi-side.vue 1`] = `
+
csr test ./src/menu/_example/multi-side.vue 1`] = `
+
csr test ./src/menu/_example/multi-side.vue 1`] = `
+
csr test ./src/menu/_example/multi-side.vue 1`] = `
+
csr test ./src/menu/_example/multiple.vue 1`] = `
/>
-
-
+
-
+
-
+
+
+
-
-
+
-
@@ -72175,6 +74661,37 @@ exports[`csr snapshot test > csr test ./src/menu/_example/popup-side.vue 1`] = `
+
csr test ./src/menu/_example/popup-side.vue 1`] = `
+
csr test ./src/pagination/_example/customizable.vue
-
-
-
-
-
-
-