From 60dd725ca92e86f979a86177e2cb7c8798fa6ced Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= Date: Fri, 24 Mar 2023 16:51:55 +0800 Subject: [PATCH 001/100] feat(tatistic): Add statistic component style --- docs/web/api/statistic.md | 38 ++++++++++++++++ style/web/components/statistic/_index.less | 50 ++++++++++++++++++++++ style/web/components/statistic/_var.less | 30 +++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 docs/web/api/statistic.md create mode 100644 style/web/components/statistic/_index.less create mode 100644 style/web/components/statistic/_var.less diff --git a/docs/web/api/statistic.md b/docs/web/api/statistic.md new file mode 100644 index 0000000000..2e64a4b432 --- /dev/null +++ b/docs/web/api/statistic.md @@ -0,0 +1,38 @@ +--- +title: Statistic 数值显示 +description: 突出展示某个或某组数字、带描述的统计类数据。 +isComponent: true +usage: { title: '', description: '' } +spline: data +--- + +### 基础用法 + +当需要突出某个或某组数字或展示带描述的统计类数据时使用。 + +{{ base }} + +### 前缀后缀/自定义 + +通过 prefix 和 suffix 插槽可以添加前后缀。通过 styleValue 可以自定义数值显示的样式。 + +{{ slot }} + +### 数值动画 + +通过 `animatio` 可以开启数值动画。使用 `start`属性可以控制动画开始时刻。 +如果有特殊需求时也可以通过ref获取实例，调用`startUp`进行控制。 + +{{ animation }} + +### 加载中 + +通过 `loading` 可以控制数值的加载状态。 + +{{ loading }} + +### 计时组件 + +倒计时组件。可以通过 `now` 来传入 `Date.now()`，用于修复初始值显示的小误差问题。 + +{{ countdown }} diff --git a/style/web/components/statistic/_index.less b/style/web/components/statistic/_index.less new file mode 100644 index 0000000000..b51be29b8e --- /dev/null +++ b/style/web/components/statistic/_index.less @@ -0,0 +1,50 @@ +// 组件允许单个组件打包，因此默认引入公共基础样式 + +@import "../../base.less"; + +@import "./_var.less"; + +.@{statistic-cls} { + display: inline-block; + line-height: @text-line-height-xl; + color: @statistic-text-color; + + &-title { + font-size: @statistic-title-font-size; + margin-bottom: @statistic-title-margin-bottom; + color: @statistic-title-text-color; + } + + &-content { + .@{statistic-cls}-value { + white-space: nowrap; + font-size: @statistic-integer-font-size; + font-weight: @statistic-value-font-weight; + color: @statistic-value-text-color; + + &-integer { + white-space: nowrap; + } + + &-decimal { + font-size: @statistic-decimal-font-size; + display: inline-block; + } + + &-suffix { + font-size: @statistic-suffix-font-size; + margin-left: @statistic-suffix-margin-left; + } + + &-prefix { + font-size: @statistic-value-icon-size; + margin-right: @statistic-prefix-margin-right; + } + } + } + + &-extra { + margin-top: @statistic-extra-margin-top; + color: @statistic-extra-text-color; + } +} \ No newline at end of file diff --git a/style/web/components/statistic/_var.less b/style/web/components/statistic/_var.less new file mode 100644 index 0000000000..d8defcb3ca --- /dev/null +++ b/style/web/components/statistic/_var.less @@ -0,0 +1,30 @@ +// 组件变量 +// 名称可按如下规则定义： +// -[type]-[attrtype]--[status] + +// component:组件名，如button， +// type: 组件类型，如 button 的次要按钮（line） +// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等 +// attr: 属性名称，如color、height、radius等 +// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等 + +// 如：@button-line-bg-color-hover +// 如：@button-line-height-s +@import "../../base.less"; + +@statistic-cls: ~"@{prefix}-statistic"; + +@statistic-title-font-size: @font-title-medium; +@statistic-title-margin-bottom: @spacer-1; +@statistic-extra-margin-top: @spacer-1; +@statistic-integer-font-size: 26px; +@statistic-decimal-font-size: @statistic-integer-font-size; +@statistic-value-font-weight: 500; +@statistic-value-text-color: @text-color-primary; +@statistic-text-color: @text-color-secondary; +@statistic-title-text-color: @text-color-secondary; +@statistic-extra-text-color: @text-color-secondary; +@statistic-value-icon-size: 14px; +@statistic-suffix-font-size: 14px; +@statistic-prefix-margin-right: @spacer-s; +@statistic-suffix-margin-left: @spacer-s; From f271550911b4947588a1238f94e7bec9ecc12577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= Date: Mon, 27 Mar 2023 10:32:37 +0800 Subject: [PATCH 002/100] fix: lint fix --- style/web/components/statistic/_index.less | 80 +++++++++++----------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/style/web/components/statistic/_index.less b/style/web/components/statistic/_index.less index b51be29b8e..d3d461c4f2 100644 --- a/style/web/components/statistic/_index.less +++ b/style/web/components/statistic/_index.less @@ -5,46 +5,46 @@ @import "./_var.less"; .@{statistic-cls} { - display: inline-block; - line-height: @text-line-height-xl; - color: @statistic-text-color; - - &-title { - font-size: @statistic-title-font-size; - margin-bottom: @statistic-title-margin-bottom; - color: @statistic-title-text-color; - } - - &-content { - .@{statistic-cls}-value { + display: inline-block; + line-height: @text-line-height-xl; + color: @statistic-text-color; + + &-title { + font-size: @statistic-title-font-size; + margin-bottom: @statistic-title-margin-bottom; + color: @statistic-title-text-color; + } + + &-content { + .@{statistic-cls}-value { + white-space: nowrap; + font-size: @statistic-integer-font-size; + font-weight: @statistic-value-font-weight; + color: @statistic-value-text-color; + + &-integer { white-space: nowrap; - font-size: @statistic-integer-font-size; - font-weight: @statistic-value-font-weight; - color: @statistic-value-text-color; - - &-integer { - white-space: nowrap; - } - - &-decimal { - font-size: @statistic-decimal-font-size; - display: inline-block; - } - - &-suffix { - font-size: @statistic-suffix-font-size; - margin-left: @statistic-suffix-margin-left; - } - - &-prefix { - font-size: @statistic-value-icon-size; - margin-right: @statistic-prefix-margin-right; - } + } + + &-decimal { + font-size: @statistic-decimal-font-size; + display: inline-block; + } + + &-suffix { + font-size: @statistic-suffix-font-size; + margin-left: @statistic-suffix-margin-left; + } + + &-prefix { + font-size: @statistic-value-icon-size; + margin-right: @statistic-prefix-margin-right; } } - - &-extra { - margin-top: @statistic-extra-margin-top; - color: @statistic-extra-text-color; - } -} \ No newline at end of file + } + + &-extra { + margin-top: @statistic-extra-margin-top; + color: @statistic-extra-text-color; + } +} From 8e5393fd486d914596da7e71e06f0b29731978e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= Date: Mon, 27 Mar 2023 15:06:44 +0800 Subject: [PATCH 003/100] fix: Use the canonical font token --- style/web/components/statistic/_var.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style/web/components/statistic/_var.less b/style/web/components/statistic/_var.less index d8defcb3ca..1e7e74d7bb 100644 --- a/style/web/components/statistic/_var.less +++ b/style/web/components/statistic/_var.less @@ -24,7 +24,7 @@ @statistic-text-color: @text-color-secondary; @statistic-title-text-color: @text-color-secondary; @statistic-extra-text-color: @text-color-secondary; -@statistic-value-icon-size: 14px; -@statistic-suffix-font-size: 14px; +@statistic-value-icon-size: @font-size-base; +@statistic-suffix-font-size: @font-size-base; @statistic-prefix-margin-right: @spacer-s; @statistic-suffix-margin-left: @spacer-s; From 63b46f763032af801c6d2b0f989d116f69c0eafc Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 16 Mar 2023 16:55:10 +0800 Subject: [PATCH 004/100] feat(radio): update the radio style on mobile (#1204) * feat(radio): update the radio style on mobile * fix: resolve lint errors * fix: resolve lint errors * fix: resolve lint errors * fix: update stylelint config * fix: update style * fix: resolve lint errors * docs: update api * fix: using correct token --- .stylelintrc | 3 +- docs/mobile/api_v2/radio.md | 28 ++- style/mobile/base.less | 8 + style/mobile/components/radio/v2/_index.less | 174 +++++++++++++++++++ style/mobile/components/radio/v2/_var.less | 15 ++ style/mobile/index.less | 8 - style/mobile/mixins/_index.less | 6 + 7 files changed, 228 insertions(+), 14 deletions(-) create mode 100644 style/mobile/components/radio/v2/_index.less create mode 100644 style/mobile/components/radio/v2/_var.less diff --git a/.stylelintrc b/.stylelintrc index b04f6ee2e0..3fbeb5629e 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -27,7 +27,8 @@ "no-descending-specificity": null, "selector-type-no-unknown": null, "color-function-notation": "legacy", - "value-keyword-case": null + "value-keyword-case": null, + "property-no-unknown": [true, { "checkPrefixed": true }] }, "overrides": [ { "files": ["**/*.less"], "customSyntax": "postcss-less" }, diff --git a/docs/mobile/api_v2/radio.md b/docs/mobile/api_v2/radio.md index 643e9f40be..8e2fc1e4db 100644 --- a/docs/mobile/api_v2/radio.md +++ b/docs/mobile/api_v2/radio.md @@ -6,12 +6,30 @@ isComponent: true toc: false --- -### 基础单选框 - -使用场景：基本文本框 +### 纵向单选框 {{ base }} -### 单选项组 +### 横向单选框 + +{{ horizontal }} + +### 单选框状态 + +{{ status }} + +### 勾选样式 + +{{ icon }} + +### 勾选显示位置 + +{{ placement }} + +### 非通栏单选框 + +{{ card }} + +### 特殊样式 -{{ group }} +{{ custom }} \ No newline at end of file diff --git a/style/mobile/base.less b/style/mobile/base.less index 87949697ac..d0eb387136 100644 --- a/style/mobile/base.less +++ b/style/mobile/base.less @@ -1,3 +1,11 @@ // 变量 @import "./_variables.less"; + +// mixins + +@import "./mixins/_index.less"; + +// 工具类 + +@import "./utilities/_index.less"; diff --git a/style/mobile/components/radio/v2/_index.less b/style/mobile/components/radio/v2/_index.less new file mode 100644 index 0000000000..64f49134e6 --- /dev/null +++ b/style/mobile/components/radio/v2/_index.less @@ -0,0 +1,174 @@ +@import "../../../base.less"; + +@import "./_var.less"; + +.@{prefix}-radio { + position: relative; + display: inline-flex; + vertical-align: middle; + font-size: @radio-font-size; + background: @radio-bg-color; + + &:focus { + outline: 0; + } + + &--block { + display: flex; + padding: @radio-vertical-padding; + } + + &--right { + flex-direction: row-reverse; + } + + &__icon { + position: relative; + width: @radio-icon-size; + height: @radio-icon-size; + font-size: @radio-icon-size; + color: @radio-icon-color; + overflow: hidden; + + &:empty { + display: none; + } + + &--left { + margin-right: 8px; + } + + &--checked { + color: @radio-icon-checked-color; + } + + &--disabled { + cursor: not-allowed; + color: @radio-icon-disabled-color; + } + + &-circle { + width: 42px; + height: 42px; + border: 3px solid @radio-icon-color; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + + &--disabled { + background: @radio-icon-disabled-bg-color; + } + } + + &-dot { + width: 42px; + height: 42px; + border: 3px solid @radio-icon-checked-color; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + + &::after { + content: ""; + display: block; + width: 24px; + height: 24px; + background: @radio-icon-checked-color; + border-radius: 50%; + } + + &--disabled { + border-color: @radio-icon-disabled-color; + + &::after { + background: @radio-icon-disabled-color; + } + } + } + } + + &__image { + line-height: @radio-icon-size; + } + + &-icon__image { + height: @radio-icon-size; + width: @radio-icon-size; + vertical-align: sub; + } + + &__content { + flex: 1; + + &:empty { + display: none; + } + } + + &__title { + .limit-title-row(); + + color: @radio-label-color; + line-height: @radio-label-line-height; + + &--disabled { + cursor: not-allowed; + color: @radio-label-disabled-color; + } + } + + &__description { + .limit-title-row(); + + color: @radio-content-color; + font-size: 14px; + line-height: @radio-content-line-height; + + &--disabled { + cursor: not-allowed; + color: @radio-content-disabled-color; + } + + &:empty { + display: none; + } + } + + &__title + &__description { + margin-top: 4px; + } + + &__border { + position: absolute; + bottom: 0; + height: 1px; + background: @radio-border-color; + left: 48px; + right: 0; + transform: scaleY(.5); + + &--right { + left: 16px; + } + } + + // mobile vue + &__original { + opacity: 0; + width: 0; + height: 0; + } + + &__icon-wrap { + display: block; + } +} diff --git a/style/mobile/components/radio/v2/_var.less b/style/mobile/components/radio/v2/_var.less new file mode 100644 index 0000000000..d0dd6129ff --- /dev/null +++ b/style/mobile/components/radio/v2/_var.less @@ -0,0 +1,15 @@ +@radio-icon-size: var(--td-radio-icon-size, 24px); +@radio-font-size: var(--td-radio-font-size, 16px); +@radio-label-line-height: var(--td-radio-label-line-height, 24px); +@radio-content-line-height: var(--td-radio-content-line-height, 22px); +@radio-vertical-padding: var(--td-radio-vertical-padding, 16px); +@radio-bg-color: var(--td-radio-bg-color, @bg-color-container); +@radio-border-color: var(--td-radio-border-color, @component-stroke); +@radio-label-color: var(--td-radio-label-color, @font-gray-1); +@radio-label-disabled-color: var(--td-radio-label-disabled-color, @text-color-disabled); +@radio-content-color: var(--td-radio-content-color, @font-gray-2); +@radio-content-disabled-color: var(--td-radio-content-disabled-color, @text-color-disabled); +@radio-icon-color: var(--td-radio-icon-color, @component-border); +@radio-icon-disabled-color: var(--td-radio-icon-disabled-color, @brand-color-disabled); +@radio-icon-disabled-bg-color: var(--td-radio-icon-disabled-bg-color, @bg-color-component-disabled); +@radio-icon-checked-color: var(--td-radio-icon-checked-color, @brand-color); diff --git a/style/mobile/index.less b/style/mobile/index.less index 883e225d82..60dda73b44 100644 --- a/style/mobile/index.less +++ b/style/mobile/index.less @@ -6,14 +6,6 @@ @import "./theme/_index.less"; -// mixins - -@import "./mixins/_index.less"; - -// 工具类 - -@import "./utilities/_index.less"; - // components @import "./components/_index.less"; diff --git a/style/mobile/mixins/_index.less b/style/mobile/mixins/_index.less index a1ec3edc46..a1afe3972f 100644 --- a/style/mobile/mixins/_index.less +++ b/style/mobile/mixins/_index.less @@ -1,3 +1,9 @@ @import "./_clearfix.less"; @import "./_hairline.less"; + +.limit-title-row() { + display: box; + -webkit-box-orient: vertical; + overflow: hidden; +} From 52a43d33570e092bf294d8428c59dad6eee73d7e Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Fri, 17 Mar 2023 11:34:26 +0800 Subject: [PATCH 005/100] feat(switch): update style for mobile (#1206) * feat(switch): update style for mobile * fix: resolve lint errors --- docs/mobile/api_v2/switch.md | 10 ++- style/mobile/components/switch/v2/_index.less | 66 +++++++++---------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/docs/mobile/api_v2/switch.md b/docs/mobile/api_v2/switch.md index adc38318d6..f2afd3507c 100644 --- a/docs/mobile/api_v2/switch.md +++ b/docs/mobile/api_v2/switch.md @@ -16,8 +16,12 @@ toc: false 使用场景：需要通过描述解释、提示结果时，可用带描述开关 -{{ desc }} +{{ label }} -### 禁用状态 +### 组件状态 -{{ disabled }} +{{ status }} + +### 开关尺寸 + +{{ size }} \ No newline at end of file diff --git a/style/mobile/components/switch/v2/_index.less b/style/mobile/components/switch/v2/_index.less index f6953a8b51..201368ee26 100644 --- a/style/mobile/components/switch/v2/_index.less +++ b/style/mobile/components/switch/v2/_index.less @@ -5,8 +5,39 @@ .@{prefix}-switch { display: flex; align-items: center; + vertical-align: middle; + width: @switch-width; + height: @switch-height; + border-radius: @switch-radius; + background-color: @switch-unchecked-color; + position: relative; + transition: all .3s ease; overflow: hidden; + &--checked { + background-color: @switch-checked-color; + } + + &--disabled { + background-color: @switch-unchecked-disabled-color; + } + + &--checked&--disabled { + background-color: @switch-checked-disabled-color; + } + + &--large { + width: @switch-large-width; + height: @switch-large-height; + border-radius: @switch-large-radius; + } + + &--small { + width: @switch-small-width; + height: @switch-small-height; + border-radius: @switch-small-radius; + } + &__label { position: absolute; top: 0; @@ -62,41 +93,6 @@ color: @switch-label-checked-color; } - &__body { - vertical-align: middle; - width: @switch-width; - height: @switch-height; - border-radius: @switch-radius; - background-color: @switch-unchecked-color; - position: relative; - transition: all .3s ease; - overflow: hidden; - - &--checked { - background-color: @switch-checked-color; - } - - &--disabled { - background-color: @switch-unchecked-disabled-color; - } - - &--checked&--disabled { - background-color: @switch-checked-disabled-color; - } - - &--large { - width: @switch-large-width; - height: @switch-large-height; - border-radius: @switch-large-radius; - } - - &--small { - width: @switch-small-width; - height: @switch-small-height; - border-radius: @switch-small-radius; - } - } - &__dot { position: absolute; left: @switch-dot-horizontal-margin; From 65c46ff3911fdd7b1d6c12e8a75ecfef7dec8ba2 Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 20 Mar 2023 12:38:37 +0800 Subject: [PATCH 006/100] fix: resolve the file path error (#1208) --- style/mobile/components/empty/_index.less | 2 +- style/mobile/components/footer/_index.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/style/mobile/components/empty/_index.less b/style/mobile/components/empty/_index.less index e8af390fb8..a519540a0a 100644 --- a/style/mobile/components/empty/_index.less +++ b/style/mobile/components/empty/_index.less @@ -1,4 +1,4 @@ -@import "../../../base.less"; +@import "../../base.less"; @import "./_var.less"; diff --git a/style/mobile/components/footer/_index.less b/style/mobile/components/footer/_index.less index 88db393a68..09e39bdd20 100644 --- a/style/mobile/components/footer/_index.less +++ b/style/mobile/components/footer/_index.less @@ -1,4 +1,4 @@ -@import "../../../base.less"; +@import "../../base.less"; @import "./_var.less"; From e9764172b520fd40a0baa1f85c76af0b2f79715e Mon Sep 17 00:00:00 2001 From: WenKang Date: Mon, 20 Mar 2023 12:39:21 +0800 Subject: [PATCH 007/100] feat:add color token (#1207) Co-authored-by: kadenzhong --- style/web/_variables.less | 4 ++++ style/web/theme/_dark.less | 4 ++++ style/web/theme/_light.less | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/style/web/_variables.less b/style/web/_variables.less index 5a86d5e768..6bb5cef5c4 100644 --- a/style/web/_variables.less +++ b/style/web/_variables.less @@ -85,6 +85,7 @@ @brand-color-active: var(--td-brand-color-active); // 点击态 @brand-color-disabled: var(--td-brand-color-disabled); // 禁用态 @brand-color-light: var(--td-brand-color-light); // 浅色的选中态 +@brand-color-light-hover: var(--td-brand-color-light-hover); // 警告色扩展 @warning-color-hover: var(--td-warning-color-hover); @@ -92,6 +93,7 @@ @warning-color-active: var(--td-warning-color-active); @warning-color-disabled: var(--td-warning-color-disabled); @warning-color-light: var(--td-warning-color-light); +@warning-color-light-hover: var(--td-warning-color-light-hover); // 失败/错误色扩展 @error-color-hover: var(--td-error-color-hover); @@ -99,6 +101,7 @@ @error-color-active: var(--td-error-color-active); @error-color-disabled: var(--td-error-color-disabled); @error-color-light: var(--td-error-color-light); +@error-color-light-hover: var(--td-error-color-light-hover); // 成功色扩展 @success-color-hover: var(--td-success-color-hover); @@ -106,6 +109,7 @@ @success-color-active: var(--td-success-color-active); @success-color-disabled: var(--td-success-color-disabled); @success-color-light: var(--td-success-color-light); +@success-color-light-hover: var(--td-success-color-light-hover); // 遮罩 @mask-active: var(--td-mask-active); // 遮罩-弹出 diff --git a/style/web/theme/_dark.less b/style/web/theme/_dark.less index 2ba24dd6aa..a4d7130fe0 100644 --- a/style/web/theme/_dark.less +++ b/style/web/theme/_dark.less @@ -76,6 +76,7 @@ --td-brand-color-active: var(--td-brand-color-9); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 + --td-brand-color-light-hover: var(--td-brand-color-2); // 警告色扩展 --td-warning-color-hover: var(--td-warning-color-4); @@ -83,6 +84,7 @@ --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); + --td-warning-color-light-hover: var(--td-warning-color-2); // 失败/错误色扩展 --td-error-color-hover: var(--td-error-color-5); @@ -90,6 +92,7 @@ --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); + --td-error-color-light-hover: var(--td-error-color-2); // 成功色扩展 --td-success-color-hover: var(--td-success-color-4); @@ -97,6 +100,7 @@ --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); + --td-success-color-light-hover: var(--td-success-color-2); // 遮罩 --td-mask-active: rgba(0, 0, 0, 40%); // 遮罩-弹出 diff --git a/style/web/theme/_light.less b/style/web/theme/_light.less index 68b9d653f9..2752fc9c74 100644 --- a/style/web/theme/_light.less +++ b/style/web/theme/_light.less @@ -77,6 +77,7 @@ --td-brand-color-active: var(--td-brand-color-8); // 点击态 --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态 --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态 + --td-brand-color-light-hover: var(--td-brand-color-2); // 警告色扩展 --td-warning-color-hover: var(--td-warning-color-4); @@ -84,6 +85,7 @@ --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); + --td-warning-color-light-hover: var(--td-warning-color-2); // 失败/错误色扩展 --td-error-color-hover: var(--td-error-color-5); @@ -91,6 +93,7 @@ --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); + --td-error-color-light-hover: var(--td-error-color-2); // 成功色扩展 --td-success-color-hover: var(--td-success-color-4); @@ -98,6 +101,7 @@ --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); + --td-success-color-light-hover: var(--td-success-color-2); // 遮罩 --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出 From fce93266fec6aa21ef776ed61850b355d01c1e52 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 21 Mar 2023 17:32:44 +0800 Subject: [PATCH 008/100] docs(Textarea): update docs (#1209) --- docs/mobile/api_v2/textarea.md | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/docs/mobile/api_v2/textarea.md b/docs/mobile/api_v2/textarea.md index 91c753da90..215f1b4d88 100644 --- a/docs/mobile/api_v2/textarea.md +++ b/docs/mobile/api_v2/textarea.md @@ -1,37 +1,43 @@ --- title: Textarea 多行文本框 description: 用于多行文本信息输入。 -spline: base +spline: form isComponent: true toc: false --- -### 基础多行文本框 +## 代码演示 -使用场景：最常规的文字填写，且需填写的文字字数较少时可以使用 +### 组件类型 + +基础多行文本框 {{ base }} -### 带标题多行文本框 +带标题多行文本框 {{ label }} -### 自动增高多行文本框 +自动增高多行文本框 {{ autosize }} -### 禁用多行文本框 - -{{ status }} - -### 设置最大字符个数 +设置最大字符个数 {{ maxlength }} -### 设置最大字符个数，一个汉字表示两个字符 +设置最大字符个数，一个汉字表示两个字符 {{ maxcharacter }} -### 带事件文本框 +### 组件状态 + +禁用多行文本框 + +{{ disabled }} + +### 自定义组件样式 + +标签外置输入框 -{{ events }} +{{ custom }} \ No newline at end of file From 51d676b1d8700e09665614a75c2edbd828eed650 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Tue, 21 Mar 2023 17:47:17 +0800 Subject: [PATCH 009/100] feat(loading): using new style (#1211) * feat(loading): using new style * fix: resolve lint errors --- docs/mobile/api_v2/loading.md | 22 +--- style/mobile/components/loading/_index.less | 123 +++++++------------- style/mobile/components/loading/_var.less | 44 ++----- 3 files changed, 53 insertions(+), 136 deletions(-) diff --git a/docs/mobile/api_v2/loading.md b/docs/mobile/api_v2/loading.md index e0402657d8..2135cb1ba8 100644 --- a/docs/mobile/api_v2/loading.md +++ b/docs/mobile/api_v2/loading.md @@ -6,17 +6,17 @@ isComponent: true toc: false --- -### 类型 +### 组件类型 -#### 纯icon +#### 纯图标 {{ base }} -#### icon加文字横向 +#### 图标加文字横向 {{ horz }} -#### icon加文字竖向 +#### 图标加文字竖向 {{ vert }} @@ -24,20 +24,10 @@ toc: false {{ pure-text }} -#### 页面进度条加载 - -{{ bar }} - -#### 延迟加载 - -{{ delay }} +### 组件尺寸 +{{ size }} ### 加载速度 {{ speed }} -### 规格 - -{{ size }} - - diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less index ab4eb4dfb9..9921dc699b 100644 --- a/style/mobile/components/loading/_index.less +++ b/style/mobile/components/loading/_index.less @@ -4,26 +4,23 @@ @import "../../mixins/_index.less"; -.@{prefix}-loading { +.@{loading} { + display: flex; + align-items: center; position: relative; color: @loading-color; - font-size: @loading-text-size; - .@{prefix}-icon-loading { - font-size: @loading-icon-size; - } + font-size: @loading-size; &--inherit-color { color: inherit; } &--vertical { - display: flex; flex-direction: column; - align-items: center; .@{prefix}-loading__text { margin-left: 0; - margin-top: 6px; + margin-top: 8px; } } @@ -31,31 +28,11 @@ pointer-events: none; } - &.@{prefix}-size-s { - font-size: @loading-text-size-small; - .@{prefix}-icon-loading { - font-size: @loading-icon-size-small; - } - } - - &.@{prefix}-size-l { - font-size: @loading-text-size-large; - .@{prefix}-icon-loading { - font-size: @loading-icon-size-large; - } - } - &__text { color: @loading-text-color; - width: auto; - display: inline-block; - vertical-align: middle; - line-height: @loading-text-line-height; - margin-left: @loading-text-margin-left; - - &--error { - color: rgba(0, 0, 0, 40%); - } + line-height: 20px; + margin-left: 6px; + font-size: @loading-text-font-size; &--only { margin-left: 0; @@ -63,7 +40,7 @@ } &__gradient { - display: inline-flex; + display: flex; justify-content: center; align-items: center; vertical-align: middle; @@ -112,41 +89,27 @@ } } - &__dots { - background-color: @dot-bg-color; - border-radius: @dot-radius; - color: @dot-color; - height: @dot-height; - width: @dotWidth; - position: relative; - left: @dot-left-pos; - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-color, - @dot-x3 0 0 0 @dot-after-color; - animation: t-dot-typing 1.5s infinite linear; - } + &__dot { + width: @loading-dot-size; + height: @loading-dot-size; + border-radius: 50%; + background-color: currentColor; + animation-duration: 1.8s; + animation-name: dotting; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-fill-mode: both; - &__bar { - background: @loading-color; - position: fixed; - z-index: 1031; - top: 0; - left: 0; - width: 100%; - height: 2px; - transition: all 200ms ease 0s; - } + &--paused { + animation-play-state: paused; + } - &__shadow { - display: block; - position: absolute; - right: 0; - width: 100px; - height: 100%; - box-shadow: 0 0 10px #29d, 0 0 5px #29d; - opacity: 1; - transform: rotate(3deg) translate(0, -4px); + &s { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 8px; + animation: none; + } } } @@ -169,32 +132,24 @@ } } -@keyframes t-dot-typing { +@keyframes dotting { 0% { - box-shadow: - @dot-x1 0 0 0 @dot-color, - @dot-x2 0 0 0 @dot-before-color, - @dot-x3 0 0 0 @dot-after-color; + opacity: .15; + } + + 1% { + opacity: .8; } - 33.3333% { - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-color, - @dot-x3 0 0 0 @dot-after-color; + 33% { + opacity: .8; } - 66.6667% { - box-shadow: - @dot-x1 0 0 0 @dot-before-color, - @dot-x2 0 0 0 @dot-after-color, - @dot-x3 0 0 0 @dot-color; + 34% { + opacity: .15; } 100% { - box-shadow: - @dot-x1 0 0 0 @dot-color, - @dot-x2 0 0 0 @dot-before-color, - @dot-x3 0 0 0 @dot-after-color; + opacity: .15; } } diff --git a/style/mobile/components/loading/_var.less b/style/mobile/components/loading/_var.less index c5ecf765fd..1ea28a7e0d 100644 --- a/style/mobile/components/loading/_var.less +++ b/style/mobile/components/loading/_var.less @@ -1,36 +1,8 @@ -//颜色 -@loading-color: @brand-color-8; - -// 字体 -@loading-text-line-height: @text-line-height; -@loading-text-color: @text-color-primary; - -@loading-text-size: @font-size-base; -@loading-text-size-small: @font-size-s; -@loading-text-size-large: @font-size-l; - -// icon -@loading-icon-size: 28px; -@loading-icon-size-small: 24px; -@loading-icon-size-large: 32px; - -// 间距 -@loading-text-margin-left: 5px; - -// dots -@dotWidth: 8px; -@dot-height: 8px; -@dot-radius: calc(@dotWidth / 2); - -@dot-color: @brand-color-8; -@dot-bg-color: @dot-color; -@dot-before-color: rgba(@brand-color-8, .15); -@dot-after-color: rgba(@brand-color-8, .15); - -@dot-spacing: calc(@dotWidth * 2); - -@dot-left-pos: -9999px; - -@dot-x1: calc(0px - @dot-left-pos - @dot-spacing); -@dot-x2: -@dot-left-pos; -@dot-x3: calc(0px - @dot-left-pos + @dot-spacing); +@loading: ~"@{prefix}-loading"; + +@loading-color: var(--td-loading-color, @brand-color); +@loading-size: var(--td-loading-size, 20px); +@loading-text-color: var(--td-loading-text-color, @text-color-primary); +@loading-text-font-size: var(--td-loading-text-font-size, 12px); +@loading-text-line-height: var(--td-loading-text-line-height, 20px); +@loading-dot-size: var(--td-loading-dot-size, 8px); From 7b47a64f47c69bc7476bcf9bf3e5b1678ee431cf Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 21 Mar 2023 19:32:32 +0800 Subject: [PATCH 010/100] fix(tree): fix empty node (#1213) --- js/tree/tree-node.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/tree/tree-node.ts b/js/tree/tree-node.ts index ece288a342..1d999946c8 100644 --- a/js/tree/tree-node.ts +++ b/js/tree/tree-node.ts @@ -844,7 +844,7 @@ export class TreeNode { } prevKeys.forEach((value) => { const node = tree.getNode(value); - node.update(); + node?.update(); }); map.set(this.value, true); } else { From 8cfbaad409dcd1151734d199070cfde5086915e9 Mon Sep 17 00:00:00 2001 From: mickey Date: Wed, 22 Mar 2023 09:33:08 +0800 Subject: [PATCH 011/100] feat: update backTop style and doc (#1214) --- docs/web/api/back-top.md | 18 +++++++++++------- style/web/components/back-top/_index.less | 8 +++++++- style/web/components/back-top/_var.less | 12 ++++++------ 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/docs/web/api/back-top.md b/docs/web/api/back-top.md index 239d87c899..5f7ed5af65 100644 --- a/docs/web/api/back-top.md +++ b/docs/web/api/back-top.md @@ -2,30 +2,34 @@ title: BackTop 返回顶部 description: 用于返回页面顶部 isComponent: true -usage: { title: '', description: '' } +usage: { title: 'BackTop 返回顶部', description: '用于返回页面顶部' } spline: data --- -### 基础使用 +### 基础型组件（默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms） -{{ base }} +{{ baseList }} -### 不同尺寸 +### 紧凑型组件 (滚动动画时长500ms) + +{{ baseListSmall }} + +### 组件尺寸 提供标准（默认）、小两种尺寸。 {{ size }} -### 不同形状 +### 组件形状 提供圆形和方形两种不同形状。 {{ shape }} -### 不同主题 +### 组件主题 {{ theme }} ### 自定义内容 -{{ custom }} +{{ custom }} \ No newline at end of file diff --git a/style/web/components/back-top/_index.less b/style/web/components/back-top/_index.less index ed795f0668..8f219a0a48 100644 --- a/style/web/components/back-top/_index.less +++ b/style/web/components/back-top/_index.less @@ -42,6 +42,12 @@ &__icon { font-size: @font-headline-small; } + + &.t-size-m { + .@{prefix-block}__icon { + margin-top: 2px; + } + } } .@{prefix-block}--show { @@ -62,7 +68,7 @@ each(@themes, { @sizes: s, m; each(@sizes, { - .@{prefix}-size-@{value} { + .@{prefix-block}.@{prefix}-size-@{value} { .back-top-size(@@value) } }); diff --git a/style/web/components/back-top/_var.less b/style/web/components/back-top/_var.less index ddc1b16e5b..80a0939854 100644 --- a/style/web/components/back-top/_var.less +++ b/style/web/components/back-top/_var.less @@ -23,20 +23,20 @@ @back-top-height-medium: @comp-size-xxxxl; @back-top-text-color-light: @text-color-secondary; -@back-top-text-color-primary: @font-white-1; -@back-top-text-color-dark: @font-white-1; +@back-top-text-color-primary: @text-color-anti; +@back-top-text-color-dark: @text-color-anti; @back-top-icon-color-light: @text-color-primary; -@back-top-icon-color-primary: @font-white-1; -@back-top-icon-color-dark: @font-white-1; +@back-top-icon-color-primary: @text-color-anti; +@back-top-icon-color-dark: @text-color-anti; @back-top-bg-color-light: @bg-color-container; @back-top-bg-color-primary: @brand-color; -@back-top-bg-color-dark: @gray-color-14; +@back-top-bg-color-dark: rgba(0, 0, 0, .9); @back-top-bg-color-light-hover: @bg-color-container-hover; @back-top-bg-color-primary-hover: @brand-color-hover; -@back-top-bg-color-dark-hover: @gray-color-9; +@back-top-bg-color-dark-hover: rgba(0, 0, 0, .6); @back-top-border-color-light: @component-border; @back-top-border-color-primary: @back-top-bg-color-primary; From 2a3bd0224eeb6d9beba4a31ca0f578938e78d1d0 Mon Sep 17 00:00:00 2001 From: Wang Date: Wed, 22 Mar 2023 14:45:05 +0800 Subject: [PATCH 012/100] feat(checkbox): update new style and doc (#1212) * feat(checkbox): update new style and doc * fix: add stylelint for webkit-box --- docs/mobile/api_v2/checkbox.md | 40 ++++++++++++------- .../mobile/components/checkbox/v2/_index.less | 7 +++- .../mobile/components/progress/v2/_index.less | 3 +- style/mobile/components/toast/v2/_index.less | 3 +- style/mobile/mixins/_index.less | 3 +- 5 files changed, 38 insertions(+), 18 deletions(-) diff --git a/docs/mobile/api_v2/checkbox.md b/docs/mobile/api_v2/checkbox.md index e3c5df83b9..f653663f20 100644 --- a/docs/mobile/api_v2/checkbox.md +++ b/docs/mobile/api_v2/checkbox.md @@ -1,35 +1,47 @@ --- -title: Checkbox 复选框 +title: Checkbox 多选框 description: 用于预设的一组选项中执行多项选择，并呈现选择结果。 spline: base isComponent: true toc: false --- -### 基础多选框 +### 组件类型 + +纵向多选框 {{ base }} -### 右侧多选框 +横向多选框 -{{ right }} +{{ horizontal }} + +带全选多选框 + +{{ all }} -### 带全选多选框 +### 组件状态 -{{ group }} +多选框状态 -### 限制最多可选数量 +{{ status }} -{{ max }} +### 组件样式 -### 状态 +勾选样式 + +{{ type }} + +勾选显示位置 + +{{ right }} -{{ disable }} +非通栏多选样式 -### 特殊类型 +{{ card }} -{{ icon }} +### 组件规格 -### 规格 +多选框尺寸规格 -{{ size }} +{{ special }} \ No newline at end of file diff --git a/style/mobile/components/checkbox/v2/_index.less b/style/mobile/components/checkbox/v2/_index.less index 6be07cede6..613ae62ead 100644 --- a/style/mobile/components/checkbox/v2/_index.less +++ b/style/mobile/components/checkbox/v2/_index.less @@ -23,7 +23,8 @@ } .limit-title-row { - display: box; + /* stylelint-disable-next-line */ + display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } @@ -34,6 +35,10 @@ transform: translateY(-50%); } + &__icon-wrapper { + display: block; + } + &__icon-left { margin-right: 20px; width: 20px; diff --git a/style/mobile/components/progress/v2/_index.less b/style/mobile/components/progress/v2/_index.less index 20749232cf..f97035d8b0 100644 --- a/style/mobile/components/progress/v2/_index.less +++ b/style/mobile/components/progress/v2/_index.less @@ -101,7 +101,8 @@ line-height: @progress-circle-label-line-height; overflow: hidden; text-overflow: ellipsis; - display: box; + /* stylelint-disable-next-line */ + display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } diff --git a/style/mobile/components/toast/v2/_index.less b/style/mobile/components/toast/v2/_index.less index ee2f3a1042..49a111e85e 100644 --- a/style/mobile/components/toast/v2/_index.less +++ b/style/mobile/components/toast/v2/_index.less @@ -68,7 +68,8 @@ overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; - display: box; + /* stylelint-disable-next-line */ + display: -webkit-box; -webkit-box-orient: vertical; white-space: pre-line; diff --git a/style/mobile/mixins/_index.less b/style/mobile/mixins/_index.less index a1afe3972f..5dafcdd6a7 100644 --- a/style/mobile/mixins/_index.less +++ b/style/mobile/mixins/_index.less @@ -3,7 +3,8 @@ @import "./_hairline.less"; .limit-title-row() { - display: box; + /* stylelint-disable-next-line */ + display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } From d9427d514b78ee3b820a2b6bbf5bcae14f3bd254 Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Thu, 23 Mar 2023 13:22:44 +0800 Subject: [PATCH 013/100] feat(cell-group): add style for v2 (#1215) * feat(cell-group): add style for v2 * fix: resolve lint errors --- style/mobile/components/cell/v2/_index.less | 34 +++++++++++++++++++++ style/mobile/components/cell/v2/_var.less | 8 +++++ 2 files changed, 42 insertions(+) diff --git a/style/mobile/components/cell/v2/_index.less b/style/mobile/components/cell/v2/_index.less index dffd84afeb..fd85ea5779 100644 --- a/style/mobile/components/cell/v2/_index.less +++ b/style/mobile/components/cell/v2/_index.less @@ -110,3 +110,37 @@ align-items: flex-end; } } + +.@{prefix}-cell-group { + position: relative; + + &__title { + font-family: PingFangSC-Regular; + font-size: @cell-group-title-font-size; + color: @cell-group-title-color; + text-align: left; + line-height: @cell-group-title-line-height; + background-color: @cell-group-title-bg-color; + padding-left: @cell-group-title-padding-left; + } + + &--bordered { + &::before { + .hairline-top(@cell-group-border-color); + + z-index: 1; + } + + &::after { + .hairline-bottom(@cell-group-border-color); + + z-index: 1; + } + } + + &--card { + margin: 0 16px; + border-radius: @radius-large; + overflow: hidden; + } +} diff --git a/style/mobile/components/cell/v2/_var.less b/style/mobile/components/cell/v2/_var.less index daafd50cea..a44c940ee8 100644 --- a/style/mobile/components/cell/v2/_var.less +++ b/style/mobile/components/cell/v2/_var.less @@ -22,3 +22,11 @@ @cell-required-font-size: var(--td-cell-required-font-size, @font-size-m); @cell-image-width: var(--td-cell-image-width, 48px); @cell-image-height: var(--td-cell-image-height, 48px); + +// cell group +@cell-group-title-font-size: var(--td-cell-group-title-font-size, 14px); +@cell-group-title-line-height: var(--td-cell-group-title-line-height, 45px); +@cell-group-title-padding-left: var(--td-cell-group-title-padding-left, 16px); +@cell-group-title-bg-color: var(--td-cell-group-title-bg-color, @bg-color-secondarycontainer); +@cell-group-title-color: var(--td-cell-group-title-color, @font-gray-3); +@cell-group-border-color: var(--td-cell-group-border-color, @border-color); From bad0d0909d8dafea3a31f09f870d1cef7644e2fd Mon Sep 17 00:00:00 2001 From: Y Date: Fri, 24 Mar 2023 14:30:44 +0800 Subject: [PATCH 014/100] fix(Textarea): update class name (#1216) --- style/mobile/components/textarea/v2/_index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/mobile/components/textarea/v2/_index.less b/style/mobile/components/textarea/v2/_index.less index da3396cdfe..5a7076a9c1 100644 --- a/style/mobile/components/textarea/v2/_index.less +++ b/style/mobile/components/textarea/v2/_index.less @@ -64,7 +64,7 @@ border: @textarea-border-width solid @textarea-border-color; } - .@{prefix}-is-disabled { + &--disabled { color: @textarea-disabled-text-color; } } From f68299d113d1310c445af3c793616845c4f3e205 Mon Sep 17 00:00:00 2001 From: sheepluo Date: Mon, 27 Mar 2023 11:02:06 +0800 Subject: [PATCH 015/100] feat(web): update table documents (#1219) Co-authored-by: sheepluo --- docs/web/api/table.md | 4 +- js/table/recalculate-column-width.ts | 217 --------------------------- js/table/set-column-width-by-drag.ts | 121 --------------- 3 files changed, 2 insertions(+), 340 deletions(-) delete mode 100644 js/table/recalculate-column-width.ts delete mode 100644 js/table/set-column-width-by-drag.ts diff --git a/docs/web/api/table.md b/docs/web/api/table.md index eb6c6f9e39..08e135fecc 100644 --- a/docs/web/api/table.md +++ b/docs/web/api/table.md @@ -239,8 +239,8 @@ spline: data - 列配置 `filter.component` 用于自定义筛选器，只要保证自定义筛选器包含 `value` 属性 和 `change` 事件，即可像内置筛选器一样正常使用。 - 列配置 `filter.showConfirmAndReset` 用于控制是否显示“确认”“重置”按钮. - 列配置 `filter.resetValue` 用于设置点击“重置”按钮时的重置值，并非每个场景都会重置为 `''` 或 `[]` `null`，默认重置为 `''`。 -- 表格属性 `filterRow` 可完全自定义过滤结果行显示内容，设置 `filterRow={() => null}` 隐藏过滤行。 -- 更多接口请查看 API 文档中的 `TableColumnFilter` +- 表格属性 `filterRow` 可完全自定义过滤结果行显示内容，设置 `filterRow=null` 隐藏过滤行。 +- 更多功能属性请查看 API 文档中的 `TableColumnFilter` {{ filter-controlled }} diff --git a/js/table/recalculate-column-width.ts b/js/table/recalculate-column-width.ts deleted file mode 100644 index 1aef995e2b..0000000000 --- a/js/table/recalculate-column-width.ts +++ /dev/null @@ -1,217 +0,0 @@ -import { BaseTableCol, ThMap } from './types'; -import { getColWidthAttr } from './utils'; - -/** - * 填充未设置width属性的列 - * @param columns 当前表格所有列 - * @param missingWidthCols 未设置width属性的列 - * @param thWidthList 列宽记录字典 - * @param tableLayout 表格布局 - * @param actualWidth 各列实际总列宽 - * @param tableWidth 表格总宽度 - */ -const setMissingColumnWidth = >( - columns: T[], - missingWidthCols: T[], - thWidthList: ThMap, - tableLayout: string, - actualWidth: number, - tableWidth: number -) : void => { - const thMap = thWidthList; - // 当前列宽总宽度小于表宽，将剩余宽度平均分配给未指定宽度的列 - if (actualWidth < tableWidth) { - let widthDiff = tableWidth - actualWidth; - const remainCols: T[] = []; - // 优先保证设置了minWidth的列满足最小宽度 - missingWidthCols.forEach((col) => { - const minWidth = getColWidthAttr(col, 'minWidth'); - if (minWidth) { - thMap[col.colKey] = minWidth; - widthDiff -= minWidth; - } else { - remainCols.push(col); - } - }); - - // 如果剩余宽度 > 0 - if (widthDiff > 0) { - // 如果存在未设置minWidth的列，这些列均分剩余宽度 - if (remainCols.length) { - const avgWidth = widthDiff / remainCols.length; - remainCols.forEach((col) => { - thMap[col.colKey] = avgWidth; - }); - } else { - // 否则所有列均分剩余宽度 - const avgWidth = widthDiff / missingWidthCols.length; - missingWidthCols.forEach((col) => { - thMap[col.colKey] += avgWidth; - }); - } - } else { - // 剩余宽度 <= 0, 所有剩余列默认填充100px - remainCols.forEach((col) => { - thMap[col.colKey] = 100; - }); - } - } else if (tableLayout === 'fixed') { - // 当前列表总宽度大于等于表宽，且当前排版模式为fixed，默认填充minWidth || 100px - missingWidthCols.forEach((col) => { - thMap[col.colKey] = getColWidthAttr(col, 'minWidth') || 100; - }); - } else { - // 当前列表总宽度大于等于表宽，且当前排版模式为aut - // 默认填充minWidth || 100px，然后按比例重新分配各列宽度 - let extraWidth = 0; - missingWidthCols.forEach((col) => { - extraWidth += getColWidthAttr(col, 'minWidth') || 100; - }); - const totalWidth = extraWidth + actualWidth; - columns.forEach((col) => { - if (!thMap[col.colKey]) { - const colWidth = getColWidthAttr(col, 'minWidth') || 100; - thMap[col.colKey] = (colWidth / totalWidth) * tableWidth; - } else { - thMap[col.colKey] = (thMap[col.colKey] / totalWidth) * tableWidth; - } - }); - } -}; - -/** - * 设置所有列的宽度 - * @param columns 当前表格所有列 - * @param thWidthList 列宽记录字典 - * @param actualWidth 各列实际总列宽 - * @param tableWidth 表格总宽度 - * @param notCalculateWidthCols 不需要参与计算的列id - */ -const setNormalColumnWidth = >( - columns: T[], - thWidthList: ThMap, - actualWidth: number, - tableWidth: number, - notCalculateWidthCols: string[] -) : void => { - const thMap = thWidthList; - columns.forEach((col) => { - if (notCalculateWidthCols.includes(col.colKey)) return; - thMap[col.colKey] = (thMap[col.colKey] / actualWidth) * tableWidth; - }); -}; - -/** - * 表格未初始化时默认填充各列宽度 - * @param missingWidthCols 未设置width属性的列 - * @param thWidthList 列宽记录字典 - */ -const setInitialColumnWidth = >( - missingWidthCols: T[], - thWidthList: { [colKey: string]: number }, -) : void => { - const thMap = thWidthList; - // 表格宽度未初始化，默认填充minWidth || 100px - missingWidthCols.forEach((col) => { - thMap[col.colKey] = getColWidthAttr(col, 'minWidth') || 100; - }); -}; - -/** - * 重新按规则分配各列宽度 - * @param columns 当前表格所有列 - * @param thWidthList 列宽记录字典 - * @param tableLayout 表格布局 - * @param tableElmWidth 表格宽度 - * @param notCalculateWidthCols 不需要参与计算的列 - * @param callback 回调函数 - */ -export default function recalculateColumnWidth>( - columns: T[], - thWidthList: ThMap, - tableLayout: string, - tableElmWidth: number, - notCalculateWidthCols: string[], - callback: (widthMap: { [colKey: string]: number }) => void -): void { - let actualWidth = 0; - const missingWidthCols: T[] = []; - const thMap: ThMap = {}; - - // 计算现有列的列宽总和 - columns.forEach((col) => { - if (!thWidthList[col.colKey]) { - thMap[col.colKey] = getColWidthAttr(col, 'width'); - } else { - thMap[col.colKey] = thWidthList[col.colKey]; - } - const originWidth = thMap[col.colKey]; - if (originWidth) { - actualWidth += originWidth; - } else { - missingWidthCols.push(col); - } - }); - - let tableWidth = tableElmWidth; - let needUpdate = false; - // 表宽没有初始化时，默认给没有指定列宽的列指定宽度为100px - if (tableWidth > 0) { - // 存在没有指定列宽的列 - if (missingWidthCols.length) { - setMissingColumnWidth( - columns, - missingWidthCols, - thMap, - tableLayout, - actualWidth, - tableWidth - ); - needUpdate = true; - } else { - // 所有列都已经指定宽度 - if (notCalculateWidthCols.length) { - // 存在不允许重新计算宽度的列（一般是resize后的两列），这些列不参与后续计算 - let sum = 0; - notCalculateWidthCols.forEach((colKey) => { - sum += thMap[colKey]; - }); - actualWidth -= sum; - tableWidth -= sum; - } - // 重新计算其他列的宽度，按表格剩余宽度进行按比例分配 - if (actualWidth !== tableWidth || notCalculateWidthCols.length) { - setNormalColumnWidth( - columns, - thMap, - actualWidth, - tableWidth, - notCalculateWidthCols - ); - needUpdate = true; - } - } - } else { - setInitialColumnWidth(missingWidthCols, thMap); - needUpdate = true; - } - - // 列宽转为整数 - if (needUpdate) { - let addon = 0; - Object.keys(thMap).forEach((key) => { - const width = thMap[key]; - addon += width - Math.floor(width); - thMap[key] = Math.floor(width) + (addon > 1 ? 1 : 0); - if (addon > 1) { - addon -= 1; - } - }); - if (addon > 0.5) { - thMap[columns[0].colKey] += 1; - } - } - - // 回调处理 - callback(thMap); -} diff --git a/js/table/set-column-width-by-drag.ts b/js/table/set-column-width-by-drag.ts deleted file mode 100644 index dd7e74b61a..0000000000 --- a/js/table/set-column-width-by-drag.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { BaseTableCol, ThMap } from './types'; -import { getColWidthAttr } from './utils'; - -/** - * 获取某一列的所有子列 - * @param col 表格某一列 - * @returns 当前列的所有子列 - */ -const findAllChildren = >(col: T): T[] => { - const loopQue: T[] = []; - const result: T[] = []; - if (col.children) { - col.children.forEach((child: T) => loopQue.push(child)); - while (loopQue.length) { - const child = loopQue.shift(); - if (!child.children || !child.children.length) { - result.push(child); - } else { - child.children.forEach((child: T) => loopQue.push(child)); - } - } - } - return result; -}; - -/** - * 更新拖动后的列宽记录 - * @param dragCol 被拖动的列 - * @param dragWidth 拖动大小 - * @param effectCol 受影响的列 - * @param options 配置参数 - * @param callback 回调函数 - */ -export default function setThWidthListByColumnDrag>( - dragCol: T, - dragWidth: number, - effectCol: T, - options: { - getThWidthList: () => ThMap, - DEFAULT_MIN_WIDTH: number - }, - callback: (widthMap: ThMap, colKeys: string[]) => void -): void { - const { getThWidthList, DEFAULT_MIN_WIDTH } = options; - const thWidthList = getThWidthList(); - - // 检测是否有多级表头 - const dragChildrenCols = findAllChildren(dragCol); - const effectChildrenCols = findAllChildren(effectCol); - - // 若有 - if (dragChildrenCols.length || effectChildrenCols.length) { - let oldWidth = 0; - let oldEffectWidth = 0; - const notCalculateCols: string[] = []; - let effectColsMinWidth = 0; - const updateMap: { [key: string]: number } = {}; - - // 将没有多级表头的列添加到列表中方便后续计算 - if (!dragChildrenCols.length) { - dragChildrenCols.push(dragCol); - } - - if (!effectChildrenCols.length) { - effectChildrenCols.push(effectCol); - } - - // 根据多级表头的叶节点计算实际宽度（拖动列） - dragChildrenCols.forEach((child) => { - oldWidth += thWidthList[child.colKey] || getColWidthAttr(child, 'width'); - notCalculateCols.push(child.colKey); - }); - - // 根据多级表头的叶节点计算实际宽度（受影响的列） - effectChildrenCols.forEach((child) => { - oldEffectWidth += thWidthList[child.colKey] || getColWidthAttr(child, 'width'); - notCalculateCols.push(child.colKey); - effectColsMinWidth += Math.max( - child.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(child, 'minWidth') || DEFAULT_MIN_WIDTH - ); - }); - - // 按比例划分新宽度（拖动列） - dragChildrenCols.forEach((child) => { - updateMap[child.colKey] = (thWidthList[child.colKey] / oldWidth) * dragWidth; - }); - - // 按比例划分新宽度（受影响的列） - const remainWidth = Math.max( - effectColsMinWidth, - oldWidth + oldEffectWidth - dragWidth, - Math.max( - getColWidthAttr(effectCol, 'minWidth') || DEFAULT_MIN_WIDTH, - effectCol.resize?.minWidth || DEFAULT_MIN_WIDTH - ), - ); - effectChildrenCols.forEach((child) => { - updateMap[child.colKey] = Math.max( - child.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(child, 'minWidth') || DEFAULT_MIN_WIDTH, - (thWidthList[child.colKey] / oldEffectWidth) * remainWidth, - ); - }); - - // 更新各列宽度 - callback(updateMap, notCalculateCols); - } else { - const oldWidth = thWidthList[dragCol.colKey] || getColWidthAttr(dragCol, 'width'); - const oldEffectWidth = thWidthList[effectCol.colKey] || getColWidthAttr(effectCol, 'width'); - - callback({ - [dragCol.colKey]: dragWidth, - [effectCol.colKey]: Math.max( - effectCol.resize?.minWidth || DEFAULT_MIN_WIDTH, - getColWidthAttr(effectCol, 'minWidth') || DEFAULT_MIN_WIDTH, - oldWidth + oldEffectWidth - dragWidth, - ), - }, [dragCol.colKey, effectCol.colKey]); - } -} From 36c6921385bd472f2cfcb566c3f949148add87cd Mon Sep 17 00:00:00 2001 From: ZekunWu <44672491+ZekunWu@users.noreply.github.com> Date: Tue, 28 Mar 2023 11:34:26 +0800 Subject: [PATCH 016/100] Feature/web/sticky tool (#1221) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 部分样式 * feat: 尝试百分比尺寸 * feat: 完善css * feat: 样式调整 * fix: 删除wxss文件 * fix: lint * fix: 改用全局变量 * feat: 修改布局方式 * feat: 暂存尝试联动backtop * feat: 初始化sticky-tool demo文档 * chore: update description --------- Co-authored-by: yiranwu Co-authored-by: yuyang --- docs/web/api/sticky-tool.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 docs/web/api/sticky-tool.md diff --git a/docs/web/api/sticky-tool.md b/docs/web/api/sticky-tool.md new file mode 100644 index 0000000000..a8f75a6aa5 --- /dev/null +++ b/docs/web/api/sticky-tool.md @@ -0,0 +1,20 @@ +--- +title: StickyTool 侧边栏 +description: 侧边栏组件用于常驻页面侧边的信息、操作展示。 +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### 基础侧边栏 + +{{ base }} + +#### 紧凑侧边栏 + +{{ compact }} + +#### 组件形状 +提供圆形和方形两种不同形状。 + +{{ shape }} From 385496688c128a8040a22dfa2c958aaecac8b48e Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 28 Mar 2023 15:43:49 +0800 Subject: [PATCH 017/100] chore: update backtop docs (#1222) --- docs/web/api/back-top.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/web/api/back-top.md b/docs/web/api/back-top.md index 5f7ed5af65..cd9e9f1394 100644 --- a/docs/web/api/back-top.md +++ b/docs/web/api/back-top.md @@ -6,30 +6,33 @@ usage: { title: 'BackTop 返回顶部', description: '用于返回页面顶部' spline: data --- -### 基础型组件（默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms） +### 基础的回到顶部 + +默认距离页面右侧24px，距离页面底部80px，滚动动画时长200ms {{ baseList }} -### 紧凑型组件 (滚动动画时长500ms) +### 可设置不同耗时的回到顶部 {{ baseListSmall }} -### 组件尺寸 +### 不同组件尺寸的回到顶部 提供标准（默认）、小两种尺寸。 {{ size }} -### 组件形状 +### 不同组件形状的回到顶部 提供圆形和方形两种不同形状。 {{ shape }} -### 组件主题 +### 不同组件主题的回到顶部 + {{ theme }} -### 自定义内容 +### 可自定义内容的回到顶部 {{ custom }} \ No newline at end of file From 322716962982286342c51bbde874ff81ad9a3068 Mon Sep 17 00:00:00 2001 From: yuyang Date: Tue, 28 Mar 2023 16:26:34 +0800 Subject: [PATCH 018/100] chore: fix title (#1223) --- docs/web/api/sticky-tool.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/web/api/sticky-tool.md b/docs/web/api/sticky-tool.md index a8f75a6aa5..33bfa64508 100644 --- a/docs/web/api/sticky-tool.md +++ b/docs/web/api/sticky-tool.md @@ -10,11 +10,11 @@ spline: navigation {{ base }} -#### 紧凑侧边栏 +### 紧凑侧边栏 {{ compact }} -#### 组件形状 +### 组件形状 提供圆形和方形两种不同形状。 {{ shape }} From 019f4505022bbd215a77bfff6ca67c8bebd6164c Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Wed, 29 Mar 2023 10:18:14 +0800 Subject: [PATCH 019/100] fix: update picker style (#1224) --- .../components/picker-item/v2/_index.less | 35 ------------------- .../components/picker-item/v2/_var.less | 6 ---- style/mobile/components/picker/v2/_index.less | 30 +++++++++++++++- style/mobile/components/picker/v2/_var.less | 6 ++++ 4 files changed, 35 insertions(+), 42 deletions(-) delete mode 100644 style/mobile/components/picker-item/v2/_index.less delete mode 100644 style/mobile/components/picker-item/v2/_var.less diff --git a/style/mobile/components/picker-item/v2/_index.less b/style/mobile/components/picker-item/v2/_index.less deleted file mode 100644 index 831f6e64bc..0000000000 --- a/style/mobile/components/picker-item/v2/_index.less +++ /dev/null @@ -1,35 +0,0 @@ -@import "../../../base.less"; - -@import "./_var.less"; - -:host { - display: flex; -} - -.@{item} { - &__group { - height: @picker-group-height; - overflow: hidden; - flex: 1; - z-index: 1; - } - - &__wrapper { - padding: 72px 0; - } - - &__item { - text-align: center; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - height: @picker-item-height; - line-height: @picker-item-height; - color: @picker-item-color; - - &--active { - color: @picker-item-active-color; - font-weight: 600; - } - } -} diff --git a/style/mobile/components/picker-item/v2/_var.less b/style/mobile/components/picker-item/v2/_var.less deleted file mode 100644 index 0c146df3f2..0000000000 --- a/style/mobile/components/picker-item/v2/_var.less +++ /dev/null @@ -1,6 +0,0 @@ -@picker: ~"@{prefix}-picker"; -@item: ~"@{picker}-item"; -@picker-group-height: var(--td-picker-group-height, 200px); -@picker-item-height: var(--td-picker-item-height, 40px); -@picker-item-color: var(--td-picker-item-color, @font-gray-2); -@picker-item-active-color: var(--td-picker-item-active-color, @font-gray-1); diff --git a/style/mobile/components/picker/v2/_index.less b/style/mobile/components/picker/v2/_index.less index d78ac7c570..08982dab87 100644 --- a/style/mobile/components/picker/v2/_index.less +++ b/style/mobile/components/picker/v2/_index.less @@ -81,9 +81,37 @@ position: absolute; left: 16px; right: 16px; - top: 72px; + top: 80px; pointer-events: none; background-color: @picker-indicator-bg-color; border-radius: @picker-indicator-border-radius; } } + +.@{item} { + // display: flex; + + &__group { + // padding: 72px 0; + box-sizing: border-box; + height: @picker-group-height; + overflow: hidden; + flex: 1; + z-index: 1; + } + + &__item { + text-align: center; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + height: @picker-item-height; + line-height: @picker-item-height; + color: @picker-item-color; + + &--active { + color: @picker-item-active-color; + font-weight: 600; + } + } +} diff --git a/style/mobile/components/picker/v2/_var.less b/style/mobile/components/picker/v2/_var.less index d3e8382422..d2a98bad10 100644 --- a/style/mobile/components/picker/v2/_var.less +++ b/style/mobile/components/picker/v2/_var.less @@ -1,4 +1,5 @@ @picker: ~"@{prefix}-picker"; +@item: ~"@{picker}-item"; @picker-border-radius: var(--td-picker-border-radius, 12px); @picker-toolbar-height: var(--td-picker-toolbar-height, 58px); @@ -19,3 +20,8 @@ @picker-indicator-bg-color: var(--td-picker-indicator-bg-color, @bg-color-secondarycontainer); @picker-indicator-border-radius: var(--td-picker-indicator-border-radius, 6px); + +@picker-group-height: var(--td-picker-group-height, 200px); +@picker-item-height: var(--td-picker-item-height, 40px); +@picker-item-color: var(--td-picker-item-color, @font-gray-2); +@picker-item-active-color: var(--td-picker-item-active-color, @font-gray-1); From adafacd7d858b15bdc41b6f09a76bd5d4a65b35a Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 29 Mar 2023 15:43:40 +0800 Subject: [PATCH 020/100] fix: format time with format (#1227) --- js/date-picker/format.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index 994ce78b35..ee6a01ad7d 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -193,7 +193,7 @@ export function calcFormatTime(time: string, timeFormat: string) { } // 格式化时间 -export function formatTime(value: DateValue | DateValue[], timeFormat: string, defaultTime: string | string[]) { +export function formatTime(value: DateValue | DateValue[], format:string, timeFormat: string, defaultTime: string | string[]) { let result; if (Array.isArray(value)) { @@ -202,9 +202,8 @@ export function formatTime(value: DateValue | DateValue[], timeFormat: string, d result = value.map((v, i) => (v ? dayjs(v).format(timeFormat) : calcFormatTime(defaultTime[i], timeFormat))); result = result.length ? result : defaultTime.map((t) => calcFormatTime(t, timeFormat)); } else { - result = value ? dayjs(value).format(timeFormat) : calcFormatTime(defaultTime as string, timeFormat); + result = value ? dayjs(value, format).format(timeFormat) : calcFormatTime(defaultTime as string, timeFormat); } - return result; } From b43a14c2537f5b7b255e6a53990888504f0ee7b0 Mon Sep 17 00:00:00 2001 From: yuyang Date: Wed, 29 Mar 2023 15:48:11 +0800 Subject: [PATCH 021/100] fix: format time for range (#1228) --- js/date-picker/format.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/date-picker/format.ts b/js/date-picker/format.ts index ee6a01ad7d..29ac4551f7 100644 --- a/js/date-picker/format.ts +++ b/js/date-picker/format.ts @@ -199,7 +199,7 @@ export function formatTime(value: DateValue | DateValue[], format:string, timeFo if (Array.isArray(value)) { // eslint-disable-next-line no-param-reassign if (!Array.isArray(defaultTime)) defaultTime = [defaultTime, defaultTime]; - result = value.map((v, i) => (v ? dayjs(v).format(timeFormat) : calcFormatTime(defaultTime[i], timeFormat))); + result = value.map((v, i) => (v ? dayjs(v, format).format(timeFormat) : calcFormatTime(defaultTime[i], timeFormat))); result = result.length ? result : defaultTime.map((t) => calcFormatTime(t, timeFormat)); } else { result = value ? dayjs(value, format).format(timeFormat) : calcFormatTime(defaultTime as string, timeFormat); From b48946401bfb36e05f625ba349f879ec18c72d4e Mon Sep 17 00:00:00 2001 From: WenKang Date: Wed, 29 Mar 2023 18:07:28 +0800 Subject: [PATCH 022/100] fix: alert icon and close padding style bug (#1229) * fix: alert icon and close padding style bug * chore: fix lint --------- Co-authored-by: kadenzhong Co-authored-by: yuyang --- style/web/components/alert/_index.less | 16 ++++++++++++---- style/web/components/alert/_var.less | 11 ++++++----- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/style/web/components/alert/_index.less b/style/web/components/alert/_index.less index 65cc328dfc..a9528f4382 100644 --- a/style/web/components/alert/_index.less +++ b/style/web/components/alert/_index.less @@ -94,7 +94,6 @@ } .@{prefix}-alert__icon { - padding: @alert-icon-padding; font-size: @alert-icon-size; display: inherit; } @@ -107,7 +106,8 @@ .@{prefix}-alert__content { flex: 1 1 0; - font: @alert-font-size; + font-size: @alert-font-size; + line-height: @alert-line-height; overflow: hidden; } @@ -162,8 +162,16 @@ display: inline-flex; align-items: center; margin-left: @alert-close-margin-left; - font-size: @alert-close-size; color: @alert-close-color; - padding: @alert-close-padding; cursor: pointer; + transition: color @anim-duration-base; + + &:hover { + color: @alert-close-color-hover; + } + + > .t-icon { + font-size: @alert-close-size; + padding: @alert-close-padding; + } } diff --git a/style/web/components/alert/_var.less b/style/web/components/alert/_var.less index 3cec7e8591..7071ab500a 100644 --- a/style/web/components/alert/_var.less +++ b/style/web/components/alert/_var.less @@ -25,6 +25,7 @@ @alert-error-icon-color: @error-color; @alert-close-color: @text-color-secondary; +@alert-close-color-hover: @text-color-primary; @alert-success-trigger-color: @success-color-focus; @alert-info-trigger-color: @brand-color; @@ -37,16 +38,16 @@ @alert-error-trigger-active-color: @error-color; // size -@alert-font-size: @font-body-medium; -@alert-icon-size: calc(@font-size-base + 6px); -@alert-close-size: calc(@font-size-base + 2px); +@alert-font-size: @font-size-base; +@alert-line-height: @text-line-height-base; +@alert-icon-size: @alert-line-height; +@alert-close-size: calc(@alert-line-height - 2px); // 间距 @alert-padding: @comp-paddingTB-l @comp-paddingLR-xl; @alert-operation-padding: 0 @comp-paddingLR-s; @alert-margin-left: @comp-margin-s; @alert-close-margin-left: @comp-margin-l; -@alert-icon-padding: calc((@text-line-height-base - @alert-icon-size) / 2 ) 0; -@alert-close-padding: calc((@text-line-height-base - @alert-close-size) / 2 ) 0; +@alert-close-padding: calc((@alert-line-height - @alert-close-size) / 2 ) 0; @alert-description-margin-top: @comp-margin-s; @alert-collapse-margin-top: @comp-margin-s; From 2213c506da2380649b68613da9a6d5c6388cc9b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=81=AB=E9=BE=99=E6=9E=9C?= Date: Wed, 29 Mar 2023 21:46:57 +0800 Subject: [PATCH 023/100] =?UTF-8?q?fix(image-viewer):=20esm=E4=B8=8Bless?= =?UTF-8?q?=E4=BC=9A=E7=BC=96=E8=AF=91=E5=A4=B1=E8=B4=A5=EF=BC=8C=E9=9C=80?= =?UTF-8?q?=E8=A6=81=E8=BD=AC=E4=B9=89less=E6=96=87=E4=BB=B6=E4=B8=ADmin?= =?UTF-8?q?=E5=87=BD=E6=95=B0=20(#1225)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: gomezshui --- style/web/components/image-viewer/_index.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/style/web/components/image-viewer/_index.less b/style/web/components/image-viewer/_index.less index 7554a6bb81..54e6695cdc 100644 --- a/style/web/components/image-viewer/_index.less +++ b/style/web/components/image-viewer/_index.less @@ -135,8 +135,8 @@ .@{prefix}-image-viewer__modal-image { display: block; - max-width: min(90vw, 1000px); - max-height: min(90vh, 800px); + max-width: ~"min(90vw, 1000px)"; + max-height: ~"min(90vh, 800px)"; transition: all @anim-duration-base @anim-time-fn-easing; transform: rotate(0deg); object-fit: contain; @@ -419,8 +419,8 @@ } .@{prefix}-image-viewer-mini__content { - max-width: min(90vw, 1000px); - max-height: min(90vh, 800px); + max-width: ~"min(90vw, 1000px)"; + max-height: ~"min(90vh, 800px)"; .@{prefix}-image-viewer__modal-pic { @@ -443,8 +443,8 @@ .@{prefix}-image-viewer__modal-image { display: block; - max-width: min(80vw, 800px); - max-height: min(80vh, 600px); + max-width: ~"min(80vw, 800px)"; + max-height: ~"min(80vh, 600px)"; transition: all @anim-duration-base ease; transform: rotate(0deg); object-fit: contain; From 70459bf8d8d4cad0d8a830c69bc6dfc46560180d Mon Sep 17 00:00:00 2001 From: yuyang Date: Thu, 30 Mar 2023 09:57:12 +0800 Subject: [PATCH 024/100] chore: loading conic background backup (#1230) --- style/web/components/loading/_index.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style/web/components/loading/_index.less b/style/web/components/loading/_index.less index 2d8066bfa3..16d4368291 100644 --- a/style/web/components/loading/_index.less +++ b/style/web/components/loading/_index.less @@ -101,6 +101,8 @@ width: 100%; height: 100%; border-radius: @border-radius-circle; + /* stylelint-disable-next-line color-no-hex */ + background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% ~"-" .5px), #fff 50%); From 97c500b5e0855c444d7decee23daf452994bc98d Mon Sep 17 00:00:00 2001 From: Y Date: Thu, 30 Mar 2023 14:08:56 +0800 Subject: [PATCH 025/100] feat: add empty docs (#1231) --- docs/mobile/api_v2/empty.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 docs/mobile/api_v2/empty.md diff --git a/docs/mobile/api_v2/empty.md b/docs/mobile/api_v2/empty.md new file mode 100644 index 0000000000..6a8b4c3f6a --- /dev/null +++ b/docs/mobile/api_v2/empty.md @@ -0,0 +1,23 @@ +--- +title: Empty 空状态 +description: 用于空状态时的占位提示。 +spline: data +isComponent: true +toc: false +--- + +## 代码演示 + +### 类型 + +图标空状态 + +{{ base }} + +自定义图片空状态 + +{{ imageEmpty }} + +带操作空状态 + +{{ buttonEmpty }} From 5334804ff2f8faeb3978c2c5a7f6eff5cd3c280e Mon Sep 17 00:00:00 2001 From: GolderBrother <1204788939@qq.com> Date: Fri, 31 Mar 2023 10:20:39 +0800 Subject: [PATCH 026/100] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20breadcrumb?= =?UTF-8?q?=E3=80=81dropdown=E3=80=81menu=E3=80=81pagination=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84api=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3=20(#1?= =?UTF-8?q?232)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 增加 breadcrumb、dropdown、menu、pagination 组件的api英文文档 * docs: menu 组件英文文档翻译内容调整 --------- Co-authored-by: James --- docs/web/api/breadcrumb.en-US.md | 36 ++++++++++++++++ docs/web/api/dropdown.en-US.md | 61 ++++++++++++++++++++++++++++ docs/web/api/menu.en-US.md | 70 ++++++++++++++++++++++++++++++++ docs/web/api/pagination.en-US.md | 54 ++++++++++++++++++++++++ 4 files changed, 221 insertions(+) create mode 100644 docs/web/api/breadcrumb.en-US.md create mode 100644 docs/web/api/dropdown.en-US.md create mode 100644 docs/web/api/menu.en-US.md create mode 100644 docs/web/api/pagination.en-US.md diff --git a/docs/web/api/breadcrumb.en-US.md b/docs/web/api/breadcrumb.en-US.md new file mode 100644 index 0000000000..68dfa68b66 --- /dev/null +++ b/docs/web/api/breadcrumb.en-US.md @@ -0,0 +1,36 @@ +--- +title: Breadcrumb +description:Displays the position of the current page in the system hierarchy, and can return to any previous page level. +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### Basic breadcrumb + +Suitable for a wide range of basic uses, the system has more than two levels of hierarchy for switching up any level of content. + +{{ base }} + +### Breadcrumbs with icons + +Can customize each content, unified icon plus text, icon placed in front of the text. + +{{ icon }} + +### Custom separator breadcrumbs + +Customize`separator`the separator character through the separator property, and it is recommended to use an icon instead of a text symbol. + +{{ custom }} + + + +### Using Options to Configure Breadcrumbs + +Use the `options` property to configure the content of the breadcrumbs. + +{{ options }} diff --git a/docs/web/api/dropdown.en-US.md b/docs/web/api/dropdown.en-US.md new file mode 100644 index 0000000000..08f1ffe379 --- /dev/null +++ b/docs/web/api/dropdown.en-US.md @@ -0,0 +1,61 @@ +--- +title: Dropdown +description:It is used to carry too many operation sets and accept more operations through drop-down expansion. +isComponent: true +usage: { title: "", description: "" } +spline: navigation +--- + +### Text drop-down menu + +The text button triggers a drop-down menu. It is commonly used in storage operation scenarios where space is extremely limited, and is generally used to store detailed operations in the form. + +{{ base }} + +### Button drop-down menu + +A normal button triggers a drop-down menu. It is often used to operate storage scenes. + +{{ button }} + +### With Split Line drop-down menu + +The different pull-down menu operations are distinguished by dividing lines. It is often used in scenarios where the results of different operations need to be distinguished. + +{{ split }} + +### Multi-level drop-down menu + +Action drop-down menu with logical hierarchy. It is often used in operational scenarios where multiple layers of logic need to be accommodated. + +{{ multiple }} + +### Drop-down menu with disabled action items + +The operation items of the drop-down menu can be set to be disabled. This is often used to disable some of the action items. + +{{ disabled }} + +### Customize drop-down menus for additional properties + +The drop-down menu depends on the`Popup`component and can pass through`Popup`the properties of the custom Popup component. + +{{ custom }} + +### Drop-down menu to define maximum height + +The drop-down menu supports defining the maximum height. + +{{ long }} + +### Custom theme drop-down menu + +The menu items of the drop-down menu support custom themes, which are used according to specific scenarios. + +{{ theme }} + +### Drop-down menu expanded to the left + +The drop-down menu supports expansion to the left. + +{{ left }} diff --git a/docs/web/api/menu.en-US.md b/docs/web/api/menu.en-US.md new file mode 100644 index 0000000000..e68339ad6f --- /dev/null +++ b/docs/web/api/menu.en-US.md @@ -0,0 +1,70 @@ +--- +title: Menu +description:Used to host the architecture of the site and provide a menu list to jump to. +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### Top Navigation + +#### Single-layer navigation + +There is only a single-layer structure of the top navigation, click to jump. It can be used on simple hierarchical websites that host a single product or a single line of business. + +{{ single }} + +#### Two-layer navigation + +The top navigation may host 2 levels of page navigation. It is often used to focus on secondary page navigation under a single business line. + +{{ double }} + +#### Multi-layer storage navigation + +The top navigation drop-down menu contains 2-3 levels of page navigation, which can be expanded to group display and is often used for fast switching navigation under multiple businesses. + +{{ multiple }} + +#### Customizable top navigation + +Custom functions can be added to the original navigation. It is used in business scenarios with complex logic or specific requirements. + +{{ custom-header }} + +### Side navigation + +#### Single-layer navigation + +There is only a single-layer structure of the side navigation, click to jump. It is generally combined with the single-layer top navigation as the side navigation of the secondary page. + +{{ single-side }} + +#### Tiled Side Navigation + +The side navigation can carry 1-3 levels of page navigation and be displayed tiled. It is suitable for deeper level websites. + +{{ multi-side }} + + + +#### Groupable Side Navigation + +Grouping large numbers of pages for display to facilitate user understanding and searching. Generally used on websites with a large number of businesses or pages to display. +{{ group-side }} + + + +#### Collapsible Side Navigation + +A collapse button is provided on the side navigation, which can minimize the sidebar when clicked. Commonly used in side navigation with icons. + +{{ closable-side }} diff --git a/docs/web/api/pagination.en-US.md b/docs/web/api/pagination.en-US.md new file mode 100644 index 0000000000..17baf9afac --- /dev/null +++ b/docs/web/api/pagination.en-US.md @@ -0,0 +1,54 @@ +--- +title: Pagination +description:Controls for switching content within a module. +isComponent: true +usage: { title: '', description: '' } +spline: navigation +--- + +### Base paging + +#### Small number of pages +The most basic paging control, only show the page number. It is recommended to use lightweight pagination scenarios with less than 10 pages of content. + +{{ base }} + +#### More pages +With a large amount of data to display, paging allows users to quickly locate the current page number. It is recommended to use pagination scenarios with more than 10 pages of content. + +{{ more }} + +### Pagination with total data display +The data in the associated module is displayed, so that the user can quickly understand the data level without browsing all of them. Often used for statistics in tables. + +{{ total }} + +### Pagination with page display quantity selection +The number of items displayed on each page can be adjusted according to user requirements. + +{{ page-num }} + +### Pagination with quick jump +When the data needs to be quickly located, select to display the quick jump page. + +{{ jump }} + +### Minimalist pagination +Extremely simple page control, only show the current page, the total number of pages and page up and down. There is less horizontal space within the module and no need to pinpoint the scene of a specific page. + +{{ simple }} + +### Mini Pagination +Remove the border of the pagination control while retaining its main function. This is suitable for scenarios where space is limited within the module and lightweight pagination is needed to increase page utilization. + +{{ mini }} + +### Minimalist mini version pagination +Smaller size of the mini-style paging control, suitable for embedded in other components in the paging navigation. + +{{ simple-mini }} + +### PaginationMini Subassembly +The smallest unit paging control, suitable for embedded in other components with smaller space. + +{{ pagination-mini }} From 84240784c0e0922fd5e48f7f591ffd9c8831d8f4 Mon Sep 17 00:00:00 2001 From: GolderBrother <1204788939@qq.com> Date: Mon, 3 Apr 2023 10:54:54 +0800 Subject: [PATCH 027/100] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20drawer?= =?UTF-8?q?=E3=80=81message=E3=80=81notification=E3=80=81popu=E7=AD=89?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3=20(#1235?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: James --- docs/web/api/drawer.en-US.md | 69 ++++++++++++++++++++++++++++++ docs/web/api/message.en-US.md | 16 +++++++ docs/web/api/notification.en-US.md | 36 ++++++++++++++++ docs/web/api/popconfirm.en-US.md | 36 ++++++++++++++++ docs/web/api/popup.en-US.md | 64 +++++++++++++++++++++++++++ 5 files changed, 221 insertions(+) create mode 100644 docs/web/api/drawer.en-US.md create mode 100644 docs/web/api/message.en-US.md create mode 100644 docs/web/api/notification.en-US.md create mode 100644 docs/web/api/popconfirm.en-US.md create mode 100644 docs/web/api/popup.en-US.md diff --git a/docs/web/api/drawer.en-US.md b/docs/web/api/drawer.en-US.md new file mode 100644 index 0000000000..4ade1d9699 --- /dev/null +++ b/docs/web/api/drawer.en-US.md @@ -0,0 +1,69 @@ +--- + +title: Drawer +description:Drawers are often opened by clicking on adjacent button controls, floating panels that slide in from the edge of the screen, also known as half-screen pop-ups. +isComponent: true +usage: { title: '', description: '' } +spline: message + +--- + +### Visible Drawers + +Carrying the informational content of the presentation. Drawers can be used to increase page scalability when page space is limited. + +{{ base }} + +### Operable Drawer + +The operation drawer carries the forms to be edited or operated in the drawer, and can be used when the user needs to operate. + +{{ operation }} + +### Drawers with no hidden layer + +By setting `showOverlay`, you can control whether to display the drawer overlay. + +{{ no-mask }} + +### Drawers in Different Positions + +With `placement`, the drawer can be displayed in different positions. + +{{ placement }} + +### Drawers of different size + +The width of the drawer display is controlled by the `size` attribute. + +{{ size }} + +### Customizing the Top and Bottom Drawers + +You can adjust the contents at the top and bottom of the drawer by using `header` and `footer`. + +{{ custom }} + +### Eject Mode Drawer + +Drawers can be displayed by covering or pushing the content area. For the `push` mode of the entire page,`attach` needs to be set to body. (The drawer component is mounted by default to the location of the element itself). + +{{ popup }} + +### Rendering and rendering in the drawer of the current parent element + +The `showInAttachedElement` attribute is used to specify the parent container element of the drawer. The parent element must have a positioning attribute, for example:position: relative。 + +{{ attach-parent }} + +### Destroy drawer when closing + +You can use `destroyOnClose` to destroy a drawer from a page node when closing it. + +{{ destroy }} + +### Draggable Drawers + +With `sizeDraggable`, you can drag and drop the edge of the drawer to change the size of the drawer. + +{{ size-draggable }} diff --git a/docs/web/api/message.en-US.md b/docs/web/api/message.en-US.md new file mode 100644 index 0000000000..ba2e705e8b --- /dev/null +++ b/docs/web/api/message.en-US.md @@ -0,0 +1,16 @@ +--- +title: Message global prompt description:Provide lightweight global feedback on user actions. +isComponent: true +usage: { title: '', description: '' } +spline: message +--- + +### General Global Prompt + +Use concise text to describe the action feedback. General global prompts include: general information, success information, warning information, error information, help information, and loading. + +{{ base }} + +### Prompt for Loading Information + +{{ loading }} diff --git a/docs/web/api/notification.en-US.md b/docs/web/api/notification.en-US.md new file mode 100644 index 0000000000..ac9293fdd5 --- /dev/null +++ b/docs/web/api/notification.en-US.md @@ -0,0 +1,36 @@ +--- +title: Notification Message Notification description:A lightweight global message prompt and confirmation mechanism that requires slow animation when appearing and disappearing. +isComponent: true +usage: { title: '', description: '' } +spline: message +--- + +### Basic Message Notification + +Basic message notification, which can be manually closed or automatically exited. + +{{ base }} + +### Message Notification with Icon + +Message notifications with icons provide two scenarios:General and important message notifications (e.g.:system error, etc.). + +{{ icon }} + +### Message Notification with Operation + +Message notifications with actions provide the user with a next action point for brief and quick interaction in a message prompt box. + +{{ operation }} + +### Position Control + +The global prompt display position can be controlled.`placement` is used to control the approximate position, and `offset` is used to set the offset from the position of `placement`. + +{{ placement }} + +### Disabling Prompt + +You can also use the close function if you do not want to close by timing, or if the user clicks a button. + +{{ toggle }} diff --git a/docs/web/api/popconfirm.en-US.md b/docs/web/api/popconfirm.en-US.md new file mode 100644 index 0000000000..81e4c69ac1 --- /dev/null +++ b/docs/web/api/popconfirm.en-US.md @@ -0,0 +1,36 @@ +--- +title: Popconfirm Bubble confirmation box description:The bubble confirmation box is usually used for secondary confirmation scenarios that do not cause serious consequences. It will pop up a floating layer on the clicked element to prompt confirmation. The bubble confirmation box has no mask. Click the area outside the confirmation box to close it. +isComponent: true +usage: { title: '', description: '' } +spline: message +--- + +### Basic Bubble Confirmation Box + +Use the instruction text and operation buttons to confirm the simpler operation twice. + +{{ base }} + +### Bubble confirmation boxes for different icons + +Add icons before the description text, such as normal, warning and alarm icons, to enhance the expression to better attract the attention of users. + +{{ icon }} + +### Bubble confirmation box with description + +In addition to the main description text, the detailed description related to the operation is added to describe the more complicated and confusing operation in detail. + +{{ describe }} + +### Customize confirmation and cancel buttons + +with `confirmBtn` and `cancelBtn` attributes. You can pass Button component attributes or use slot method. + +{{ button }} + +### To control the position of the bubble confirmation box + +`popupProps` can be used to transparently transfer all the supported properties of the Popup component that the pop-up window depends on, such as controlling the position where the pop-up window appears. + +{{ inherit }} diff --git a/docs/web/api/popup.en-US.md b/docs/web/api/popup.en-US.md new file mode 100644 index 0000000000..e5d728930c --- /dev/null +++ b/docs/web/api/popup.en-US.md @@ -0,0 +1,64 @@ +--- +title: Popup description:The pop-up layer component is the basis for the implementation of other pop-up window components such as the bubble confirmation box. When the capabilities provided by these components cannot meet the customization requirements, they can be encapsulated on the basis of the pop-up layer component. +isComponent: true +usage: { title: '', description: '' } +spline: message +--- + +### Basic pop-up layer + +It consists of a floating layer content and a trigger element, both of which can be customized. Use `content` to customize the floating layer content. + +{{ base }} + +### Trigger Element + +You can use `triggerElement` to customize the trigger element. + +{{ trigger-element }} + +### Popup Layer with Different Trigger Methods + +Trigger when floating (default), trigger when clicking, trigger when getting focus, trigger when right-clicking, etc. + +{{ trigger }} + +### Location Direction + +Use `placement` to control the direction of the floating layer. If you need a floating layer arrow, set `showArrow=true`. + +{{ placement }} + +### Floating Layer Style + +The floating layer style can be controlled using overlayClassName, overlayStyle, overlayInnerStyle. + +- `overlayClassName` is used to define the floating layer style class name. +- `overlayStyle` is used to define the floating layer style, such as the floating layer width. The width of the floating layer is rendered according to the content width by default, and the width and maximum width can be freely set. +- `overlayInnerStyle` is used to define the style of the floating layer content, such as the maximum height of the content and whether to display a scroll bar. When the value is of type function, the width of the floating layer content can be the same as that of the trigger element. + +{{ style }} + +### Pop-up layer that can be displayed + +You can freely control the display or hiding of the pop-up layer by using `visible`. + +{{ visible }} + +### Mounting Parent Node + +The default parent node of the floating layer is `body`. You can freely adjust the parent node element mounted by `attach`. + +{{ container }} + +### Destroy pop-up layer when it can be hidden + +`destroyOnClose` is used to control whether to destroy the floating layer content when the floating layer is hidden. + +{{ destroy }} + +### Disable pop-up layer + +When the component is turned off, the pop-up layer is no longer displayed. + +{{ disabled }} From b2e10eb5623b940f8937946fd8e3aed21e629385 Mon Sep 17 00:00:00 2001 From: ZekunWu <44672491+ZekunWu@users.noreply.github.com> Date: Mon, 3 Apr 2023 14:09:25 +0800 Subject: [PATCH 028/100] Feature/web/sticky tool (#1241) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 部分样式 * feat: 尝试百分比尺寸 * feat: 完善css * feat: 样式调整 * fix: 删除wxss文件 * fix: lint * fix: 改用全局变量 * feat: 修改布局方式 * feat: 暂存尝试联动backtop * feat: 初始化sticky-tool demo文档 * chore: update description * fix: lint:fix * fix: lint:fix * fix: 颜色修复 --------- Co-authored-by: yiranwu Co-authored-by: yuyang --- style/web/components/sticky-tool/_index.less | 6 ++++++ style/web/components/sticky-tool/_mixin.less | 3 +++ style/web/components/sticky-tool/_var.less | 6 ++++++ 3 files changed, 15 insertions(+) diff --git a/style/web/components/sticky-tool/_index.less b/style/web/components/sticky-tool/_index.less index c983d4f934..8f52b3badc 100644 --- a/style/web/components/sticky-tool/_index.less +++ b/style/web/components/sticky-tool/_index.less @@ -14,6 +14,12 @@ border: @sticky-tool-border; box-shadow: @sticky-tool-shadow; + &-popup-content { + box-shadow: @sticky-tool-popup-shadow; + font-size: @sticky-tool-popup-font-size; + color: @sticky-tool-popup-color; + } + .sticky-item-basic(); &--square { diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less index be7bf59420..0c36ffc9c7 100644 --- a/style/web/components/sticky-tool/_mixin.less +++ b/style/web/components/sticky-tool/_mixin.less @@ -5,6 +5,7 @@ margin: @sticky-item-margin; text-align: center; font-size: @sticky-item-font-size; + color: @sticky-item-text-color; &:hover { cursor: pointer; @@ -19,6 +20,7 @@ width: @sticky-item-icon-size; height: @sticky-item-icon-size; margin: @sticky-item-icon-margin-normal; + color: @sticky-item-icon-color; } } @@ -30,6 +32,7 @@ width: @sticky-item-icon-size; height: @sticky-item-icon-size; margin: @sticky-item-icon-margin-compact; + color: @sticky-item-icon-color; } } diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less index 2d859b501f..0ed96c434f 100644 --- a/style/web/components/sticky-tool/_var.less +++ b/style/web/components/sticky-tool/_var.less @@ -15,6 +15,9 @@ @sticky-tool-background: @bg-color-container; @sticky-tool-border: @component-border; @sticky-tool-shadow: @shadow-3; +@sticky-tool-popup-shadow: @shadow-3; +@sticky-tool-popup-font-size: @font-size-s; +@sticky-tool-popup-color: @text-color-secondary; // sticky-tool shape=square @sticky-tool-border-radius-square: @border-radius-medium; @@ -30,7 +33,10 @@ @sticky-item-label-height: @comp-size-xxs; @sticky-item-label-margin-top: @comp-margin-xxs; @sticky-item-font-size: @font-size-s; +@sticky-item-text-color: @text-color-secondary; @sticky-item-icon-size: @icon-l; +@sticky-item-icon-color: @text-color-primary; + // sticky-tool type=normal @sticky-item-size-normal: @comp-size-xxxl; @sticky-item-icon-margin-normal: @comp-margin-s @comp-margin-l 0 @comp-margin-l; From c18de95bfca23dc6cf6bc7d640f327560f47928f Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 3 Apr 2023 15:07:42 +0800 Subject: [PATCH 029/100] docs(Search): update docs (#1226) --- docs/mobile/api_v2/search.md | 24 +++++++-- style/mobile/components/search/v2/_index.less | 16 ++++++ style/mobile/utilities/_index.less | 50 +++++++++++++++++++ 3 files changed, 85 insertions(+), 5 deletions(-) diff --git a/docs/mobile/api_v2/search.md b/docs/mobile/api_v2/search.md index 6beeb5248e..ab7e412897 100644 --- a/docs/mobile/api_v2/search.md +++ b/docs/mobile/api_v2/search.md @@ -1,17 +1,31 @@ --- title: Search 搜索框 -description: 用于用户输入搜索信息，并进行页面内容搜索 +description: 用于用户输入搜索信息，并进行页面内容搜索。 spline: base isComponent: true toc: false --- -### 基础搜索框 +## 代码演示 -使用场景：常用于全局内容搜索，位于搜索内容上方 +### 01 组件类型 + +基础搜索框 {{ base }} -### 不同输入状态 +获取焦点后显示取消按钮 + +{{ action }} + +### 02 组件样式 + +搜索框形状 + +{{ shape }} + +### 03 组件状态 + +默认状态其他对齐方式 -{{ status }} +{{ other }} diff --git a/style/mobile/components/search/v2/_index.less b/style/mobile/components/search/v2/_index.less index 23a52aa2ae..a71e695c2c 100644 --- a/style/mobile/components/search/v2/_index.less +++ b/style/mobile/components/search/v2/_index.less @@ -44,6 +44,8 @@ color: @search-text-color; font-size: @search-font-size; padding-left: 5px; + border: 0; + background: 0; } .@{prefix}-icon { @@ -71,4 +73,18 @@ text-align: center; } } + + // mobile vue + /* stylelint-disable-next-line */ + input::-webkit-input-placeholder, + input::placeholder { + color: @search-placeholder-color; + } + + input::-webkit-search-decoration, + input::-webkit-search-cancel-button, + input::-webkit-search-results-button, + input::-webkit-search-results-decoration { + display: none; + } } diff --git a/style/mobile/utilities/_index.less b/style/mobile/utilities/_index.less index f8770df6d0..36d1fc70dd 100644 --- a/style/mobile/utilities/_index.less +++ b/style/mobile/utilities/_index.less @@ -5,3 +5,53 @@ .@{prefix}-overflow-hidden { overflow: hidden; } + +.hotspot-expanded { + &.relative { + position: relative; + } + + &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + transform: scale(1.5); + } +} + +.border(@position: bottom, @border-color: @component-border) { + position: relative; + + &::after { + content: ""; + display: block; + position: absolute; + top: if(@position = top, 0, unset); + bottom: if(@position = bottom, 0, unset); + left: if(@position = left, 0, unset); + right: if(@position = right, 0, unset); + background-color: @border-color; + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) { + &::after { + height: 1px; + left: 0; + right: 0; + transform: scaleY(.5); + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) { + &::after { + width: 1px; + top: 0; + bottom: 0; + transform: scaleX(.5); + } +} From 4d32de0b8d9016646de72cd4a62bb281b402f59e Mon Sep 17 00:00:00 2001 From: ZekunWu <44672491+ZekunWu@users.noreply.github.com> Date: Tue, 4 Apr 2023 10:38:40 +0800 Subject: [PATCH 030/100] Feature/web/sticky tool (#1244) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 部分样式 * feat: 尝试百分比尺寸 * feat: 完善css * feat: 样式调整 * fix: 删除wxss文件 * fix: lint * fix: 改用全局变量 * feat: 修改布局方式 * feat: 暂存尝试联动backtop * feat: 初始化sticky-tool demo文档 * chore: update description * fix: lint:fix * fix: lint:fix * fix: 颜色修复 * feat: 添加hover动画 * feat: 完善动画 --------- Co-authored-by: yiranwu Co-authored-by: yuyang --- style/web/components/sticky-tool/_mixin.less | 1 + style/web/components/sticky-tool/_var.less | 1 + 2 files changed, 2 insertions(+) diff --git a/style/web/components/sticky-tool/_mixin.less b/style/web/components/sticky-tool/_mixin.less index 0c36ffc9c7..2a151a7f0b 100644 --- a/style/web/components/sticky-tool/_mixin.less +++ b/style/web/components/sticky-tool/_mixin.less @@ -6,6 +6,7 @@ text-align: center; font-size: @sticky-item-font-size; color: @sticky-item-text-color; + transition: @sticky-item-bg-color-transition; &:hover { cursor: pointer; diff --git a/style/web/components/sticky-tool/_var.less b/style/web/components/sticky-tool/_var.less index 0ed96c434f..d4f220bd9f 100644 --- a/style/web/components/sticky-tool/_var.less +++ b/style/web/components/sticky-tool/_var.less @@ -36,6 +36,7 @@ @sticky-item-text-color: @text-color-secondary; @sticky-item-icon-size: @icon-l; @sticky-item-icon-color: @text-color-primary; +@sticky-item-bg-color-transition: background-color @anim-duration-base linear; // sticky-tool type=normal @sticky-item-size-normal: @comp-size-xxxl; From 27b90dc9a12d44e4028541029865d6e9968d67ea Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 4 Apr 2023 12:11:01 +0800 Subject: [PATCH 031/100] docs(Cascader): update docs (#1220) --- docs/mobile/api_v2/cascader.md | 22 ++++++++++++++----- .../mobile/components/cascader/v2/_index.less | 1 + 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/mobile/api_v2/cascader.md b/docs/mobile/api_v2/cascader.md index 7abdbf6754..911e4d4e90 100644 --- a/docs/mobile/api_v2/cascader.md +++ b/docs/mobile/api_v2/cascader.md @@ -6,14 +6,26 @@ isComponent: true toc: false --- -### 基础 +## 代码演示 -#### 基本用法 +### 基础用法 {{ base }} -### 状态 +### 选项卡风格 -#### 禁用可选项 +{{ theme-tab }} -{{ status }} +### 进阶 + +#### 带初始值 + +{{ with-value }} + +#### 自定义 keys + +{{ keys }} + +#### 使用次级标题 + +{{ with-title }} diff --git a/style/mobile/components/cascader/v2/_index.less b/style/mobile/components/cascader/v2/_index.less index 2710d87f77..cd82d09bad 100644 --- a/style/mobile/components/cascader/v2/_index.less +++ b/style/mobile/components/cascader/v2/_index.less @@ -56,6 +56,7 @@ &-container { display: flex; transition: all ease .3s; + overflow-y: scroll; } } From 4b2ea7797759e128fcfe6f87d2f1862876b0fd92 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 4 Apr 2023 12:30:35 +0800 Subject: [PATCH 032/100] style(Search): update style (#1245) --- style/mobile/components/search/v2/_index.less | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/style/mobile/components/search/v2/_index.less b/style/mobile/components/search/v2/_index.less index a71e695c2c..64d4af6d45 100644 --- a/style/mobile/components/search/v2/_index.less +++ b/style/mobile/components/search/v2/_index.less @@ -12,6 +12,10 @@ color: @search-label-color; } + &--center { + text-align: center; + } + &__input-box { flex: 1; box-sizing: border-box; @@ -34,10 +38,6 @@ border-radius: @search-square-radius; } - &--center { - text-align: center; - } - .@{prefix}-input__keyword { display: inline-block; flex: 1; @@ -68,10 +68,6 @@ &__placeholder { color: @search-placeholder-color; - - &--center { - text-align: center; - } } // mobile vue From da1d337f06f359139556ba3cb0a06981a65a54bc Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 4 Apr 2023 12:30:54 +0800 Subject: [PATCH 033/100] docs(Sticky): update docs (#1242) --- docs/mobile/api_v2/sticky.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/mobile/api_v2/sticky.md b/docs/mobile/api_v2/sticky.md index f0dc61ad20..c3a1c18f21 100644 --- a/docs/mobile/api_v2/sticky.md +++ b/docs/mobile/api_v2/sticky.md @@ -6,15 +6,18 @@ isComponent: true toc: false --- -### 基础吸顶 +## 代码演示 将内容包裹在 `Sticky` 组件内 +### 基础吸顶 + {{ base }} + ### 吸顶距离 -{{ offsetTop }} +{{ offset }} ### 指定容器 From 507ed5c5d130c3ce519068542a2f512b1e9a471a Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 4 Apr 2023 14:43:03 +0800 Subject: [PATCH 034/100] docs(Skeleton): update docs (#1243) --- docs/mobile/api_v2/skeleton.md | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/docs/mobile/api_v2/skeleton.md b/docs/mobile/api_v2/skeleton.md index 1c38203921..7cc98c08df 100644 --- a/docs/mobile/api_v2/skeleton.md +++ b/docs/mobile/api_v2/skeleton.md @@ -6,26 +6,27 @@ isComponent: true toc: false --- -### 基础骨架屏 +## 代码演示 -基础 +### 骨架屏类型 -{{ base }} +基础骨架屏 -头像组合 +{{ theme }} -{{ avatar-text }} +单元格骨架屏 -图片组合 +{{ cell-group }} -{{ pic-text }} -### 动画 +宫格骨架屏 -渐变加载动画 +{{ grid }} -{{ gradient }} +图文组合骨架屏 -### 闪烁加载动画 +{{ image-group }} -{{ flashed }} +### 组件动效 + +{{ animation }} \ No newline at end of file From e805555ea1a5b148e778c4a1b8cc97b8deea7da4 Mon Sep 17 00:00:00 2001 From: ccccpj Date: Tue, 4 Apr 2023 14:43:42 +0800 Subject: [PATCH 035/100] feat: input v2 & border (#1217) * feat: input v2 & border * fix: lint * fix: lint empty line --- style/mobile/components/input/v2/_index.less | 2 + style/mobile/utilities/_index.less | 52 +++++++++++++++++++- 2 files changed, 52 insertions(+), 2 deletions(-) diff --git a/style/mobile/components/input/v2/_index.less b/style/mobile/components/input/v2/_index.less index dab8741224..4eabbd0df6 100644 --- a/style/mobile/components/input/v2/_index.less +++ b/style/mobile/components/input/v2/_index.less @@ -99,6 +99,8 @@ &__wrap--clearable-icon, &__wrap--suffix-icon, &__wrap--suffix { + display: flex; + &:empty { display: none; } diff --git a/style/mobile/utilities/_index.less b/style/mobile/utilities/_index.less index 36d1fc70dd..d1c0e81559 100644 --- a/style/mobile/utilities/_index.less +++ b/style/mobile/utilities/_index.less @@ -2,8 +2,56 @@ @import "./_animation.less"; -.@{prefix}-overflow-hidden { - overflow: hidden; +@import "../_variables.less"; + +.hotspot-expanded { + &.relative { + position: relative; + } + + &::after { + content: ""; + display: block; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + transform: scale(1.5); + } +} + +.border(@position: bottom, @border-color: @component-border) { + position: relative; + + &::after { + content: ""; + display: block; + position: absolute; + top: if(@position = top, 0, unset); + bottom: if(@position = bottom, 0, unset); + left: if(@position = left, 0, unset); + right: if(@position = right, 0, unset); + background-color: @border-color; + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) { + &::after { + height: 1px; + left: 0; + right: 0; + transform: scaleY(.5); + } +} + +.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) { + &::after { + width: 1px; + top: 0; + bottom: 0; + transform: scaleX(.5); + } } .hotspot-expanded { From acdf7d8cea46dfdfe741a265d601ad8184043c0e Mon Sep 17 00:00:00 2001 From: Shine <791405318@qq.com> Date: Tue, 4 Apr 2023 14:44:19 +0800 Subject: [PATCH 036/100] docs(image): update image demo (#995) * docs: update image demo * docs: update image demo docs * docs(image): update image docs --- docs/mobile/api/image.md | 42 +++++++++++++--------------------------- 1 file changed, 13 insertions(+), 29 deletions(-) diff --git a/docs/mobile/api/image.md b/docs/mobile/api/image.md index a26b3bc5bf..110eb7a187 100644 --- a/docs/mobile/api/image.md +++ b/docs/mobile/api/image.md @@ -6,46 +6,30 @@ isComponent: true toc: false --- -### 基础用法 +### 基础类型 -基础用法和原生 img 标签一样，可以设置 `src`、`alt`、`class` 等原生属性 +图片样式可为圆形、圆角方形、方形 -{{ base }} +#### 裁切样式 -### 图片形状 +{{ crop }} -通过 `shape` 属性可以设置图片形状，可选项有 `circle` | `round` | `square`，分别代表圆形、圆角方形、方形 +#### 圆角样式 -当图片长宽不相等时，无法使用 `circle` 展示一个完整圆形 +{{ rounded }} -{{ shape }} +### 状态 -#### 填充模式 +#### 加载中提示 -通过 `fit` 属性可以设置图片填充模式，可选项有 `contain` | `cover` | `fill` | `none` | `scale-down`，效果与原生的 `object-fit` 属性一致 +{{ loading-tip }} -{{ fit }} +#### 加载失败提醒 -#### 图片位置 +{{ loading-error }} -通过 `position` 属性可以设置图片位置，效果与原生的 `object-position` 属性一致 +### 规格 -{{ position }} -#### 图片懒加载 +{{ size }} -通过lazy属性来开启图片懒加载 - -{{ lazy }} - -### 加载中提示 - -Image 组件提供了默认的加载中提示，也支持通过 `loading` 插槽自定义提示内容 - -{{ loading }} - -### 加载失败提示 - -Image 组件提供了默认的加载失败提示，也支持通过 `error` 插槽自定义提示内容 - -{{ error }} From d79db485804f2522b02fc8a7369a93e257f54158 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 4 Apr 2023 16:07:03 +0800 Subject: [PATCH 037/100] chore(deps-dev): bump lint-staged from 13.1.4 to 13.2.0 (#1236) Bumps [lint-staged](https://github.com/okonet/lint-staged) from 13.1.4 to 13.2.0. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/commits/v13.2.0) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b278cb0d5d..4ebcbc1fea 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "jest": "^27.5.1", "jest-html-reporter": "^3.1.3", "jest-watch-typeahead": "^2.2.0", - "lint-staged": "~13.1.0", + "lint-staged": "~13.2.0", "min-indent": "^1.0.1", "postcss-less": "^5.0.0", "stylelint": "~14.16.1", From e9458e6392acf8227c51c510dbc3e6c892f5f31b Mon Sep 17 00:00:00 2001 From: leejimqiu Date: Tue, 4 Apr 2023 17:23:47 +0800 Subject: [PATCH 038/100] fix: update loading style and image docs (#1248) --- docs/mobile/api_v2/image.md | 30 ++------------------ style/mobile/components/image/v2/_index.less | 30 ++++++++++---------- style/mobile/components/loading/_index.less | 10 +++---- 3 files changed, 22 insertions(+), 48 deletions(-) diff --git a/docs/mobile/api_v2/image.md b/docs/mobile/api_v2/image.md index a26b3bc5bf..1f5a94bab9 100644 --- a/docs/mobile/api_v2/image.md +++ b/docs/mobile/api_v2/image.md @@ -20,32 +20,6 @@ toc: false {{ shape }} -#### 填充模式 +### 组件状态 -通过 `fit` 属性可以设置图片填充模式，可选项有 `contain` | `cover` | `fill` | `none` | `scale-down`，效果与原生的 `object-fit` 属性一致 - -{{ fit }} - -#### 图片位置 - -通过 `position` 属性可以设置图片位置，效果与原生的 `object-position` 属性一致 - -{{ position }} - -#### 图片懒加载 - -通过lazy属性来开启图片懒加载 - -{{ lazy }} - -### 加载中提示 - -Image 组件提供了默认的加载中提示，也支持通过 `loading` 插槽自定义提示内容 - -{{ loading }} - -### 加载失败提示 - -Image 组件提供了默认的加载失败提示，也支持通过 `error` 插槽自定义提示内容 - -{{ error }} +{{ status }} diff --git a/style/mobile/components/image/v2/_index.less b/style/mobile/components/image/v2/_index.less index 6b3e7c9cba..3dc51c1053 100644 --- a/style/mobile/components/image/v2/_index.less +++ b/style/mobile/components/image/v2/_index.less @@ -12,6 +12,8 @@ justify-content: center; background-color: @image-loading-bg-color; color: @image-loading-color; + width: 100%; + height: 100%; } &--loading-text { @@ -24,20 +26,18 @@ height: 100%; } - &--shape { - &-circle { - border-radius: 50%; - overflow: hidden; - } - - &-round { - border-radius: @image-round-radius; - overflow: hidden; - } - - &-square { - border-radius: 0; - overflow: hidden; - } + &--circle { + border-radius: 50%; + overflow: hidden; + } + + &--round { + border-radius: @image-round-radius; + overflow: hidden; + } + + &--square { + border-radius: 0; + overflow: hidden; } } diff --git a/style/mobile/components/loading/_index.less b/style/mobile/components/loading/_index.less index 9921dc699b..9c21f0529d 100644 --- a/style/mobile/components/loading/_index.less +++ b/style/mobile/components/loading/_index.less @@ -90,8 +90,8 @@ } &__dot { - width: @loading-dot-size; - height: @loading-dot-size; + width: 20%; + height: 20%; border-radius: 50%; background-color: currentColor; animation-duration: 1.8s; @@ -105,9 +105,9 @@ } &s { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 8px; + display: flex; + justify-content: space-between; + align-items: center; animation: none; } } From 3e4abc7e2f3312e7b93ade6da96e12ed11b4f2cc Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Thu, 6 Apr 2023 10:34:10 +0800 Subject: [PATCH 039/100] fix(InputNumber): float add integer error (#1251) --- js/input-number/number.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/input-number/number.ts b/js/input-number/number.ts index a355f35609..1695342b85 100644 --- a/js/input-number/number.ts +++ b/js/input-number/number.ts @@ -110,7 +110,7 @@ export function positiveAdd(num1: number, num2: number): number { const r1 = num1.toString().split('.')[1]?.length || 0; const r2 = num2.toString().split('.')[1]?.length || 0; // 整数不存在精度问题，直接返回 - if (!r1 || !r2) return num1 + num2; + if (!r1 && !r2) return num1 + num2; let newNumber1 = num1; let newNumber2 = num2; const diff = Math.abs(r1 - r2); From 237862cde59466c0858e9df97fee10e81ab00f8d Mon Sep 17 00:00:00 2001 From: azhe Date: Thu, 6 Apr 2023 15:18:02 +0800 Subject: [PATCH 040/100] docs: fix md format problem (#1253) Co-authored-by: sunzhe --- docs/web/api/breadcrumb.en-US.md | 2 +- docs/web/api/drawer.en-US.md | 2 +- docs/web/api/dropdown.en-US.md | 2 +- docs/web/api/menu.en-US.md | 2 +- docs/web/api/message.en-US.md | 3 ++- docs/web/api/notification.en-US.md | 3 ++- docs/web/api/pagination.en-US.md | 2 +- docs/web/api/popconfirm.en-US.md | 3 ++- docs/web/api/popup.en-US.md | 3 ++- 9 files changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/web/api/breadcrumb.en-US.md b/docs/web/api/breadcrumb.en-US.md index 68dfa68b66..c9b38a74df 100644 --- a/docs/web/api/breadcrumb.en-US.md +++ b/docs/web/api/breadcrumb.en-US.md @@ -1,6 +1,6 @@ --- title: Breadcrumb -description:Displays the position of the current page in the system hierarchy, and can return to any previous page level. +description: Displays the position of the current page in the system hierarchy, and can return to any previous page level. isComponent: true usage: { title: '', description: '' } spline: navigation diff --git a/docs/web/api/drawer.en-US.md b/docs/web/api/drawer.en-US.md index 4ade1d9699..543af32033 100644 --- a/docs/web/api/drawer.en-US.md +++ b/docs/web/api/drawer.en-US.md @@ -1,7 +1,7 @@ --- title: Drawer -description:Drawers are often opened by clicking on adjacent button controls, floating panels that slide in from the edge of the screen, also known as half-screen pop-ups. +description: Drawers are often opened by clicking on adjacent button controls, floating panels that slide in from the edge of the screen, also known as half-screen pop-ups. isComponent: true usage: { title: '', description: '' } spline: message diff --git a/docs/web/api/dropdown.en-US.md b/docs/web/api/dropdown.en-US.md index 08f1ffe379..bd70ffc859 100644 --- a/docs/web/api/dropdown.en-US.md +++ b/docs/web/api/dropdown.en-US.md @@ -1,6 +1,6 @@ --- title: Dropdown -description:It is used to carry too many operation sets and accept more operations through drop-down expansion. +description: It is used to carry too many operation sets and accept more operations through drop-down expansion. isComponent: true usage: { title: "", description: "" } spline: navigation diff --git a/docs/web/api/menu.en-US.md b/docs/web/api/menu.en-US.md index e68339ad6f..b555506c0c 100644 --- a/docs/web/api/menu.en-US.md +++ b/docs/web/api/menu.en-US.md @@ -1,6 +1,6 @@ --- title: Menu -description:Used to host the architecture of the site and provide a menu list to jump to. +description: Used to host the architecture of the site and provide a menu list to jump to. isComponent: true usage: { title: '', description: '' } spline: navigation diff --git a/docs/web/api/message.en-US.md b/docs/web/api/message.en-US.md index ba2e705e8b..ac401500c4 100644 --- a/docs/web/api/message.en-US.md +++ b/docs/web/api/message.en-US.md @@ -1,5 +1,6 @@ --- -title: Message global prompt description:Provide lightweight global feedback on user actions. +title: Message +description: Provide lightweight global feedback on user actions. isComponent: true usage: { title: '', description: '' } spline: message diff --git a/docs/web/api/notification.en-US.md b/docs/web/api/notification.en-US.md index ac9293fdd5..0125ede4f2 100644 --- a/docs/web/api/notification.en-US.md +++ b/docs/web/api/notification.en-US.md @@ -1,5 +1,6 @@ --- -title: Notification Message Notification description:A lightweight global message prompt and confirmation mechanism that requires slow animation when appearing and disappearing. +title: Notification +description: A lightweight global message prompt and confirmation mechanism that requires slow animation when appearing and disappearing. isComponent: true usage: { title: '', description: '' } spline: message diff --git a/docs/web/api/pagination.en-US.md b/docs/web/api/pagination.en-US.md index 17baf9afac..ea8a7bd983 100644 --- a/docs/web/api/pagination.en-US.md +++ b/docs/web/api/pagination.en-US.md @@ -1,6 +1,6 @@ --- title: Pagination -description:Controls for switching content within a module. +description: Controls for switching content within a module. isComponent: true usage: { title: '', description: '' } spline: navigation diff --git a/docs/web/api/popconfirm.en-US.md b/docs/web/api/popconfirm.en-US.md index 81e4c69ac1..bb7a5dfabb 100644 --- a/docs/web/api/popconfirm.en-US.md +++ b/docs/web/api/popconfirm.en-US.md @@ -1,5 +1,6 @@ --- -title: Popconfirm Bubble confirmation box description:The bubble confirmation box is usually used for secondary confirmation scenarios that do not cause serious consequences. It will pop up a floating layer on the clicked element to prompt confirmation. The bubble confirmation box has no mask. Click the area outside the confirmation box to close it. +title: Popconfirm +description: The bubble confirmation box is usually used for secondary confirmation scenarios that do not cause serious consequences. It will pop up a floating layer on the clicked element to prompt confirmation. The bubble confirmation box has no mask. Click the area outside the confirmation box to close it. isComponent: true usage: { title: '', description: '' } spline: message diff --git a/docs/web/api/popup.en-US.md b/docs/web/api/popup.en-US.md index e5d728930c..4da67d45a6 100644 --- a/docs/web/api/popup.en-US.md +++ b/docs/web/api/popup.en-US.md @@ -1,5 +1,6 @@ --- -title: Popup description:The pop-up layer component is the basis for the implementation of other pop-up window components such as the bubble confirmation box. When the capabilities provided by these components cannot meet the customization requirements, they can be encapsulated on the basis of the pop-up layer component. +title: Popup +description: The pop-up layer component is the basis for the implementation of other pop-up window components such as the bubble confirmation box. When the capabilities provided by these components cannot meet the customization requirements, they can be encapsulated on the basis of the pop-up layer component. isComponent: true usage: { title: '', description: '' } spline: message From f9114f2b1b585369660cc5964e55cbcb87134624 Mon Sep 17 00:00:00 2001 From: GolderBrother <1204788939@qq.com> Date: Thu, 6 Apr 2023 17:31:54 +0800 Subject: [PATCH 041/100] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=20cascader?= =?UTF-8?q?=E3=80=81checkbox=E3=80=81date-picker=E7=AD=89=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E7=BB=84=E4=BB=B6=E7=9A=84=E8=8B=B1=E6=96=87=E6=96=87?= =?UTF-8?q?=E6=A1=A3=20(#1249)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: 增加 cascader、checkbox、date-picker等输入组件的英文文档 * docs: md 文档开头的格式规范，description字段前面添加换行，后面添加空格 --------- Co-authored-by: James --- docs/web/api/cascader.en-US.md | 103 +++++++++++++++++++++++ docs/web/api/checkbox.en-US.md | 31 +++++++ docs/web/api/color-picker.en-US.md | 51 ++++++++++++ docs/web/api/date-picker.en-US.md | 97 ++++++++++++++++++++++ docs/web/api/form.en-US.md | 97 ++++++++++++++++++++++ docs/web/api/input-number.en-US.md | 61 ++++++++++++++ docs/web/api/select-input.en-US.md | 88 ++++++++++++++++++++ docs/web/api/select.en-US.md | 128 +++++++++++++++++++++++++++++ docs/web/api/slider.en-US.md | 59 +++++++++++++ docs/web/api/switch.en-US.md | 31 +++++++ docs/web/api/tag-input.en-US.md | 60 ++++++++++++++ docs/web/api/textarea.en-US.md | 31 +++++++ docs/web/api/time-picker.en-US.md | 61 ++++++++++++++ docs/web/api/transfer.en-US.md | 42 ++++++++++ docs/web/api/tree-select.en-US.md | 54 ++++++++++++ docs/web/api/upload.en-US.md | 101 +++++++++++++++++++++++ 16 files changed, 1095 insertions(+) create mode 100644 docs/web/api/cascader.en-US.md create mode 100644 docs/web/api/checkbox.en-US.md create mode 100644 docs/web/api/color-picker.en-US.md create mode 100644 docs/web/api/date-picker.en-US.md create mode 100644 docs/web/api/form.en-US.md create mode 100644 docs/web/api/input-number.en-US.md create mode 100644 docs/web/api/select-input.en-US.md create mode 100644 docs/web/api/select.en-US.md create mode 100644 docs/web/api/slider.en-US.md create mode 100644 docs/web/api/switch.en-US.md create mode 100644 docs/web/api/tag-input.en-US.md create mode 100644 docs/web/api/textarea.en-US.md create mode 100644 docs/web/api/time-picker.en-US.md create mode 100644 docs/web/api/transfer.en-US.md create mode 100644 docs/web/api/tree-select.en-US.md create mode 100644 docs/web/api/upload.en-US.md diff --git a/docs/web/api/cascader.en-US.md b/docs/web/api/cascader.en-US.md new file mode 100644 index 0000000000..665c40aab8 --- /dev/null +++ b/docs/web/api/cascader.en-US.md @@ -0,0 +1,103 @@ +--- +title: Cascader +description: Cascading selectors are useful for data sets that have a clear hierarchical structure that the user can view and select through. in general, a cascade selector include:Selectors and cascades. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Single Cascaded Selector + +Provide a single cascade selector, after the selection of each level to display the selected content. + +{{ base }} + +### Multi-selection cascade selector + +Provide multi-choice cascading selector, display multi-choice content through label. + +{{ multiple }} + +### Collapsible Options Multi-selector + +In the case of multiple selections, the selected items are collapsed, and the selected items exceeding the value are collapsed. + +{{ collapsed }} + +### Cascade selectors of different size + +Provide large, medium and small three different height, width selector to adapt to different size layout. + +{{ size }} + +### Filterable Cascade Selector + +Enter the Filter option. It is used in business scenarios with specific requirements. Filter text by default. + +{{ filterable }} + +### Disabling Cascading Selectors + +Cascaded selectors that provide a disabled state. + +{{ disabled }} + +### Display only the last cascade selector + +You can display only the label of the last level of the selected item in the input box, rather than the full path of the selected item. + +{{ show-all-levels }} + +### Cascading selector for selecting any item + +When enabled, you can select any level of options. + +{{ check-strictly }} + +### Cascaded selector in full path mode + +The default input/output value type is the value of the leaf node. The full path value is used when `value-type="full"` + +{{ value-type }} + +### Customize Selected Value Mode + +Only valid for multiple-choice conditions.` onlyLeaft`indicates that only leaf nodes are selected in any case;`parentFirst`indicates that only parent nodes are selected when all child nodes are selected;`all`indicates that both parent nodes and child nodes are selected. + +{{ value-mode }} + +### Different Trigger Methods + +Submenus can be loaded by different triggering methods. + +{{ trigger }} + +### Display when the text is too long + +When the data text is too long, use the browser `title` to display the long text. + +{{ ellipsis }} + +### Limit the number of options + +Limits the maximum number of selections for a multi-choice selector. This is typically used when you need to limit the number of multi-choice options. + +{{ max }} + +### Customizing Data Field Aliases + +When using `options` to configure drop-down options, if the data fields are not `label` and `value`, you can use `keys` to define aliases. + +{{ keys }} + +### Dynamic Loading + +The selector contents can be customized according to requirements. It is used in business scenarios with complex logic or specific requirements. + +{{ load }} + +### Cascading Panels + +Cascading panel used alone for combination with other triggers + +{{ panel }} diff --git a/docs/web/api/checkbox.en-US.md b/docs/web/api/checkbox.en-US.md new file mode 100644 index 0000000000..9e52e71b78 --- /dev/null +++ b/docs/web/api/checkbox.en-US.md @@ -0,0 +1,31 @@ +--- +title: Checkbox +description: A check box is a selection control that allows the user to toggle between checked and unchecked with a single click. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Basic multi-selection box + +The simplest form of multi-selection box, often used for multi-selection of data in the form. + +{{ base }} + +### Linked Multi-check Box + +Linked check boxes are check boxes used in conjunction with other components. + +{{ link }} + +### Grouped Multi-check Box Groups + +A group of check boxes that are combined according to certain attributes. + +{{ group }} + +### Controlled Class Checkbox + +The checkbox supports v-model, controlled and uncontrolled usage. + +{{ controlled }} diff --git a/docs/web/api/color-picker.en-US.md b/docs/web/api/color-picker.en-US.md new file mode 100644 index 0000000000..5512b08338 --- /dev/null +++ b/docs/web/api/color-picker.en-US.md @@ -0,0 +1,51 @@ +--- +title: ColorPicker +description: Used for color selection, supports multiple formats. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Panel Color Selector + +There is no trigger and the color picker panel is displayed directly. + +{{ panel }} + +### Color Picker with Trigger Element + +Trigger the display selector panel through the trigger, and transparently transfer all attributes to the panel selector component. + +{{ trigger }} + +### Color selector for different color modes + +Support monochrome mode, linear gradient two color mode selection, can be used in a single mode, can also switch between two modes at the same time. Use `colorMode` to configure. + +{{ color-mode }} + +### Color picker with transparency adjustment + +Set `enableAlpha=true` to enable the transparency of the selector. + +{{ enable-alpha }} + +### Color Selector with Configurable System Color + +You can configure the system preset colors through `swatchColors`. If the value is null or [], the system colors will not be displayed. + +{{ swatch-color }} + +### Configurable Color Selector for Recently Used Color + +The most recently used color can be configured through `recentColors`. A value of [] indicates that the "Most Recently Used Color" in the component is used as the standard. If the value length is greater than 0, the "Most Recently Used Color" is displayed based on this value. A value of null does not display Recent Colors at all. + +{{ recent-color }} + +### Disabling Color Selector + +{{ status-disabled }} + +### Read-only Color Selector + +{{ status-readonly }} diff --git a/docs/web/api/date-picker.en-US.md b/docs/web/api/date-picker.en-US.md new file mode 100644 index 0000000000..f01ca0defa --- /dev/null +++ b/docs/web/api/date-picker.en-US.md @@ -0,0 +1,97 @@ +--- +title: DatePicker +description: Use to select a specific date or a range of dates. +isComponent: true +usage: { title: '', description: '' } +spline: form +--- + +### Year Selector + +Used for year selection. It is used when the user only needs to enter the year information, and is often used in query scenarios where data is recorded by year, such as annual bills. + +{{ year }} + +### Month Selector + +Used for month selection. Use only when the user needs to enter month information. + +{{ month }} + +### Quarter Selector + +Used for quarterly selection. Use only when the user needs to enter quarterly information. + +{{ quarter }} + +### Week Selector + +Used for week selection. Used when the user only needs to enter year + week information. + +{{ week }} + +### Date Picker + +For selection of specific dates. Use only when the user needs to enter very specific date information. + +{{ base }} + +### Date Time Selector + +For date and time associated selections. Used when the user needs to enter a date including a time. + +{{ date-time }} + +### Date Range Selector + +Used for selection of a certain period of time. Used when the user needs to enter a date range. + +{{ date-range }} + +### Date picker with shortcut label + +with a time stamp that can be set in advance. When the date information is regular and needs to be clicked for quick input. + +{{ date-presets-alt }} + +### Date selector can be disabled + +The date that does not support user selection can be disabled from clicking. + +{{ disable-date }} + +### Selector for specifying the start of the week + +You can specify the day of the week from which a week starts through the `firstDayOfWeek` attribute. This is only valid when a date is selected (`mode = date`). The default value is 1, that is, it starts from Monday. You can set it to start from Sunday as follows. + +{{ first-day-of-week }} + +### Custom Icon Selector + +Prefix and suffix icons can be customized through `prefixIcon` and `suffixIcon`. + +{{ custom-icon }} + +### Date Selection Panel Used Alone + +You can use `DatePickerPanel` and `DateRangePickerPanel` separately. You can assemble your own date picker. + +{{ panel }} + +## FAQ + +### The backend data format is special. How can I format the date quickly? + +The `onChange` callback event will return the currently selected date object wrapped in `dayjs`. You can format it with the help of a third-party library or use the provided `dayjs` object for custom conversion. + +```js + { + const data = dayjsValue.format('YYYYMMDD'); + ... +}}> + + { + const data = dayjsValue.map(d => d.format('YYYYMMDD')); + ... +}}> +``` diff --git a/docs/web/api/form.en-US.md b/docs/web/api/form.en-US.md new file mode 100644 index 0000000000..29c71abb28 --- /dev/null +++ b/docs/web/api/form.en-US.md @@ -0,0 +1,97 @@ +--- +title: Form +description: Used to collect, verify and submit data, generally composed of input box, radio box, check box, selector and other controls. +isComponent: true +usage: { title: "", description: "" } +spline: form +--- + +### Typical Form + +A typical form component contains a variety of form items, such as input boxes, selectors, radio boxes, multicheck boxes, switches, text input, and so on. + +- If there is a submit button `