diff --git a/examples/sites/demos/apis/alert.js b/examples/sites/demos/apis/alert.js index 8ef9c2987b..bcc5f2d8e4 100644 --- a/examples/sites/demos/apis/alert.js +++ b/examples/sites/demos/apis/alert.js @@ -248,7 +248,7 @@ export default { type: '', defaultValue: '', desc: { - 'zh-CN': '组件默认插槽,当 size 设置为 large 后有效', + 'zh-CN': '组件默认插槽,当 size 设置为 large 时有效,显示在 description下方 ', 'en-US': 'The default slot for the component is valid when size is set to large' }, mode: ['pc', 'mobile', 'mobile-first'], @@ -261,7 +261,7 @@ export default { type: '', defaultValue: '', desc: { - 'zh-CN': '提示内容', + 'zh-CN': '提示内容插槽', 'en-US': 'Prompt Content' }, mode: ['pc', 'mobile-first'], diff --git a/examples/sites/demos/pc/app/alert/basic-usage.spec.ts b/examples/sites/demos/pc/app/alert/basic-usage.spec.ts index 851312da61..5eb3537590 100644 --- a/examples/sites/demos/pc/app/alert/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/alert/basic-usage.spec.ts @@ -7,15 +7,11 @@ test('基本用法', async ({ page }) => { const demo = page.locator('#basic-usage') const alertBox = demo.locator('.tiny-alert') - // 颜色边框正确 + // 颜色背景正确 暂时无边框 await expect(alertBox.first()).toHaveCSS('background-color', 'rgb(222, 236, 255)') - await expect(alertBox.first()).toHaveCSS('border-bottom-color', 'rgb(222, 236, 255)') await expect(alertBox.nth(1)).toHaveCSS('background-color', 'rgb(252, 227, 225)') - await expect(alertBox.nth(1)).toHaveCSS('border-bottom-color', 'rgb(252, 227, 225)') await expect(alertBox.nth(2)).toHaveCSS('background-color', 'rgb(230, 242, 213)') - await expect(alertBox.nth(2)).toHaveCSS('border-bottom-color', 'rgb(230, 242, 213)') await expect(alertBox.nth(3)).toHaveCSS('background-color', 'rgb(255, 235, 209)') - await expect(alertBox.nth(3)).toHaveCSS('border-bottom-color', 'rgb(255, 235, 209)') // 警告可见 const alertSuccess = demo.locator('.tiny-alert--success') diff --git a/examples/sites/demos/pc/app/alert/size.spec.ts b/examples/sites/demos/pc/app/alert/size.spec.ts index 5a0e23bb84..23808482ba 100644 --- a/examples/sites/demos/pc/app/alert/size.spec.ts +++ b/examples/sites/demos/pc/app/alert/size.spec.ts @@ -6,5 +6,4 @@ test('尺寸', async ({ page }) => { const largeAlert = page.locator('.tiny-alert').nth(1) await expect(largeAlert).toHaveClass(/tiny-alert--large/) - await expect(largeAlert).toHaveCSS('height', '77px') }) diff --git a/examples/sites/demos/pc/app/alert/slot-default-composition-api.vue b/examples/sites/demos/pc/app/alert/slot-default-composition-api.vue index 5cf3bb42d6..8f6debd045 100644 --- a/examples/sites/demos/pc/app/alert/slot-default-composition-api.vue +++ b/examples/sites/demos/pc/app/alert/slot-default-composition-api.vue @@ -9,14 +9,29 @@ 取消
- + 继续提交 取消操作
- +
- + 继续提交 取消操作 @@ -31,4 +46,7 @@ import { Alert as TinyAlert } from '@opentiny/vue' .demo-alert .tiny-alert__opration { margin-top: 4px; } +.demo-alert .tiny-alert__opration a { + margin-right: 16px; +} diff --git a/examples/sites/demos/pc/app/alert/slot-default.vue b/examples/sites/demos/pc/app/alert/slot-default.vue index c47157df44..61778a7eec 100644 --- a/examples/sites/demos/pc/app/alert/slot-default.vue +++ b/examples/sites/demos/pc/app/alert/slot-default.vue @@ -9,14 +9,29 @@ 取消
- + 继续提交 取消操作
- +
- + 继续提交 取消操作 @@ -37,4 +52,8 @@ export default { .demo-alert .tiny-alert__opration { margin-top: 4px; } + +.demo-alert .tiny-alert__opration a { + margin-right: 16px; +} diff --git a/examples/sites/demos/pc/app/alert/webdoc/alert.js b/examples/sites/demos/pc/app/alert/webdoc/alert.js index 7bb400b0c1..d240b13973 100644 --- a/examples/sites/demos/pc/app/alert/webdoc/alert.js +++ b/examples/sites/demos/pc/app/alert/webdoc/alert.js @@ -10,7 +10,7 @@ export default { }, desc: { 'zh-CN': - '

通过 description 属性或者 description 插槽来设置提示内容,通过 type 设置不同的类型。

', + '

通过 description 属性或者 description 插槽来设置提示内容。
通过 type 属性,设置不同的类型。

', 'en-US': '

Set the prompt content through the description attribute or description slot, and set different types through type .

' }, @@ -19,13 +19,28 @@ export default { { demoId: 'size', name: { - 'zh-CN': '尺寸', - 'en-US': 'Size' + 'zh-CN': '尺寸模式', + 'en-US': 'Size Mode' }, desc: { - 'zh-CN': '

通过 size 设置不同的尺寸,可选值: normallarge

', - 'en-US': - '

Set different sizes through size , with optional values: normal, large .

' + 'zh-CN': ` + 通过 size 设置不同的尺寸模式,可选值: normallarge
+
+

尺寸模式区别

+
    +
  • normal模式下,不会显示标题和交互操作的区域,相当于简单模式。
  • +
  • large模式下,显示全部元素,相当于完整模式。
  • +
+ `, + 'en-US': ` + Use size to set different size modes, optional values: normal, large.
+
+

Size pattern difference

+
    +
  • normal mode, the header and interactive areas are not displayed, which is equivalent to simple mode.
  • +
  • large mode, all elements are displayed, equivalent to the full mode.
  • +
+ ` }, codeFiles: ['size.vue'] }, @@ -36,21 +51,21 @@ export default { 'en-US': 'Custom Title' }, desc: { - 'zh-CN': - '

sizelarge 时,通过 title 属性 或 title 插槽自定义标题。如不设置,默认标题根据对应的 type 显示。

', + 'zh-CN': `当 sizelarge 时,通过 title 属性 或 title 插槽,可以自定义组件的标题。
+ 如果未自定义标题, 会根据对应的 type 显示相应的默认标题。`, 'en-US': - '

When size is set to large, the title is displayed. You can set title or slot to customize the title. The default title is displayed according to the set type .

' + '

When size is set to large, the title is displayed. You can set title or slot to customize the title.
The default title is displayed according to the set type .

' }, codeFiles: ['title.vue'] }, { demoId: 'center', name: { - 'zh-CN': '文字居中', - 'en-US': 'Center text' + 'zh-CN': '内容居中', + 'en-US': 'Center content' }, desc: { - 'zh-CN': '

通过 center 设置文字显示居中。

', + 'zh-CN': '

通过 center 设置内容显示居中。

', 'en-US': '

You can use the center property to center the text.

' }, codeFiles: ['center.vue'] @@ -59,13 +74,13 @@ export default { demoId: 'icon', name: { 'zh-CN': '自定义警告图标', - 'en-US': 'Customized warning icon' + 'en-US': 'Customized alert icon' }, desc: { 'zh-CN': - '

通过 icon 设置自定义图标,默认会根据不同的 type 的值自动使用对应图标。

', + '通过 icon 属性设置自定义图标,如果未自定义图标,默认会根据不同的 type 的值自动使用对应图标。', 'en-US': - '

By setting custom icons through icon , the corresponding icons will be automatically used by default based on different type values.

' + 'You can use the icon property to set a custom icon. If no custom icon is specified, the icon is automatically used according to the type value.' }, codeFiles: ['icon.vue'] }, @@ -76,9 +91,10 @@ export default { 'en-US': 'Customized Interaction' }, desc: { - 'zh-CN': '

sizelarge 时,通过默认插槽自定义交互操作。

', + 'zh-CN': + '

sizelarge 时,通过默认插槽自定义交互操作区域,显示在 description 值的下方。

', 'en-US': - '

When size is large , set the default slot custom interaction operation.

' + '

When size is large , set the default slot custom interaction operation,displayed below the description value

' }, codeFiles: ['slot-default.vue'] }, @@ -89,22 +105,36 @@ export default { 'en-US': 'Display icon' }, desc: { - 'zh-CN': '

通过 show-icon 设置左侧图标是否显示。

', - 'en-US': '

Set whether the left icon is displayed by show icon .

' + 'zh-CN': '通过 show-icon 属性,设置左侧图标是否显示。', + 'en-US': 'Use the show-icon property to set whether the icon on the left is displayed.' }, codeFiles: ['show-icon.vue'] }, { demoId: 'custom-close', name: { - 'zh-CN': '关闭按钮', + 'zh-CN': '自定义关闭按钮', 'en-US': 'custom close button' }, desc: { - 'zh-CN': - '

通过 close-text 设置关闭按钮文本,关闭告警后会触发 close 事件。
通过 closable 设置是否显示关闭按钮,没有关闭按钮,警告框将不可关闭。
通过 close 插槽自定义关闭按钮,仅当 closablefalse 时插槽有效,可自定义逻辑控制组件的显示、隐藏。

', - 'en-US': - 'Set the close button text through close text < Br/>Set whether to display the close button through close . If there is no close button, the warning box will not be able to be closed< By customizing the close button through the close slot, the slot is only valid when the close is false , and the display and hiding of logic control components can be customized.' + 'zh-CN': ` + 通过 closable 属性,启用内置的关闭图标,默认值为 true
+ 通过 close-text 设置关闭按钮显示为文本,仅当closabletrue时生效 。
+ 将 closable 设置为 false 时, 取消内置的关闭功能。此时可通过 close 插槽,完全自定义关闭按钮区域的展示。 +
+

组件关闭或隐藏时,会有渐隐动画,详见示例!

+
+ `, + 'en-US': ` + Enable the built-in close icon with the closable property, which defaults to true.
+ Set the close button text by close-text instead of the close icon, effective only if closable is true.
+ Unblock the built-in closing function when closable is set to false. At this point, you can completely customize the presentation of the close button area via the close slot. +
+

+ When the component is closed or hidden, there will be a fade animation, see the example! +

+
+ ` }, codeFiles: ['custom-close.vue'] }, diff --git a/packages/theme/src/alert/index.less b/packages/theme/src/alert/index.less index f94483e8de..592868e543 100644 --- a/packages/theme/src/alert/index.less +++ b/packages/theme/src/alert/index.less @@ -10,190 +10,119 @@ * */ -@import '../mixins/alert.less'; @import '../custom.less'; @import './vars.less'; -@import '../transition/alert-fade.less'; @alert-prefix-cls: ~'@{css-prefix}alert'; .@{alert-prefix-cls} { - .component-css-vars-alert(); + .inject-Alert-vars(); position: relative; - border: var(--ti-alert-border-weight) solid; - border-radius: var(--ti-alert-border-radius); - font-family: var(--ti-alert-font-family); - - &&--normal { - padding: var(--ti-alert-normal-padding-top) var(--ti-alert-normal-padding-right) - var(--ti-alert-normal-padding-bottom) var(--ti-alert-normal-padding-left); - margin: var(--ti-alert-normal-margin-vertical) var(--ti-alert-normal-margin-horizontal); - display: flex; - justify-content: flex-start; + display: flex; + border: none; // 规范中不要border,所以没有border的相关css变量了。 + border-radius: var(--tv-Alert-border-radius); + padding: var(--tv-Alert-padding-y) var(--tv-Alert-padding-x); + margin: var(--tv-Alert-margin-y) var(--tv-Alert-margin-x); + line-height: 1.5; + + &.is-center { + justify-content: center; align-items: center; + } - .@{alert-prefix-cls}__content { - padding: var(--ti-alert-normal-content-padding-vertical) var(--ti-alert-normal-content-padding-horizontal); - display: table-cell; - max-width: calc(100% - 30px); - } + /** alert-icon 场景 */ + .@{alert-prefix-cls}__icon { + font-size: var(--tv-Alert-icon-size); + margin-right: var(--tv-Alert-icon-margin-right); + flex-shrink: 0; } - &&--large { - padding: var(--ti-alert-large-padding-top) var(--ti-alert-large-padding-right) var(--ti-alert-large-padding-bottom) - var(--ti-alert-large-padding-left); - display: flex; - - .@{alert-prefix-cls}__content { - padding-left: var(--ti-alert-large-content-padding-left); - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: flex-start; + /** content 场景:title/description/opration */ + .@{alert-prefix-cls}__content { + .@{alert-prefix-cls}__title { + font-size: var(--tv-Alert-title-font-size); + font-weight: var(--tv-Alert-title-font-weight); + color: var(--tv-Alert-title-text-color); + margin-bottom: var(--tv-Alert-title-margin-bottom); + // 由于close-icon是abs, 需要给出安全边距防止重叠 + margin-right: calc(var(--tv-Alert-close-icon-font-size) + var(--tv-Alert-close-icon-right) + 16px); } .@{alert-prefix-cls}__description { - margin-bottom: var(--ti-alert-description-margin-bottom); - margin-top: var(--ti-alert-description-margin-top); - color: var(--ti-alert-description-text-color); - - &.is-hide { - margin: 0; - } + font-size: var(--tv-Alert-desc-font-size); + font-weight: var(--tv-Alert-desc-font-weight); + color: var(--tv-Alert-desc-text-color); } - .@{alert-prefix-cls}__icon { - font-size: var(--ti-alert-large-icon-font-size); - vertical-align: top; - flex-shrink: 0; - } - - .@{alert-prefix-cls}__close { - font-size: var(--ti-alert-large-close-font-size); - top: 12px; - right: 12px; - transform: none; - margin-top: 0; + .@{alert-prefix-cls}__opration { + // no need css } } - &&--success { - .alert-variant(var(--ti-alert-success-title-text-color); - var(--ti-alert-success-border-color); - var(--ti-alert-success-icon-color); - var(--ti-alert-success-link-text-color); - var(--ti-alert-success-bg-color); - var(--ti-alert-success-close-icon-color)); - - .@{alert-prefix-cls}__close:hover { - fill: var(--ti-alert-success-close-hover-icon-color); + /** close-icon 场景 */ + // .is-custom 仅用于close按钮处, 等效于close场景 + .@{alert-prefix-cls}__close, + .is-custom { + position: absolute; + cursor: pointer; + color: var(--tv-Alert-close-icon-color); + fill: var(--tv-Alert-close-icon-color); + top: var(--tv-Alert-close-icon-top); + right: var(--tv-Alert-close-icon-right); + + &:hover { + color: var(--tv-Alert-close-icon-color-hover); + fill: var(--tv-Alert-close-icon-color-hover); } } - &&--info { - .alert-variant(var(--ti-alert-info-title-text-color); - var(--ti-alert-info-border-color); - var(--ti-alert-info-icon-color); - var(--ti-alert-info-link-text-color); - var(--ti-alert-info-bg-color); - var(--ti-alert-info-close-icon-color)); - - .@{alert-prefix-cls}__close:hover { - fill: var(--ti-alert-info-close-hover-icon-color); - } + .@{alert-prefix-cls}__close { + font-size: var(--tv-Alert-close-icon-font-size); } - &&--warning { - .alert-variant(var(--ti-alert-warning-title-text-color); - var(--ti-alert-warning-border-color); - var(--ti-alert-warning-icon-color); - var(--ti-alert-warning-link-text-color); - var(--ti-alert-warning-bg-color); - var(--ti-alert-warning-close-icon-color)); - - .@{alert-prefix-cls}__close:hover { - fill: var(--ti-alert-warning-close-hover-icon-color); - } + .is-custom { + font-size: var(--tv-Alert-close-text-font-size); } - &&--error { - .alert-variant(var(--ti-alert-error-title-text-color); - var(--ti-alert-error-border-color); - var(--ti-alert-error-icon-color); - var(--ti-alert-error-link-text-color); - var(--ti-alert-error-bg-color); - var(--ti-alert-error-close-icon-color)); + /** Normal 场景 */ + &.@{alert-prefix-cls}--normal { + padding: var(--tv-Alert-padding-y-normal) var(--tv-Alert-padding-x-normal); + margin: var(--tv-Alert-margin-y-normal) var(--tv-Alert-margin-x-normal); - .@{alert-prefix-cls}__close:hover { - fill: var(--ti-alert-error-close-hover-icon-color); + .@{alert-prefix-cls}__icon { + font-size: var(--tv-Alert-icon-size-normal); } - } - - &&--simple { - .alert-variant(var(--ti-alert-simple-title-text-color); - var(--ti-alert-simple-border-color); - var(--ti-alert-simple-icon-color); - var(--ti-alert-simple-link-text-color); - var(--ti-alert-simple-bg-color); - var(--ti-alert-simple-close-icon-color)); - - .@{alert-prefix-cls}__close:hover { - fill: var(--ti-alert-simple-close-hover-icon-color); + .@{alert-prefix-cls}__description { + // 由于close-icon是abs, 需要给出安全边距防止重叠 + margin-right: calc(var(--tv-Alert-close-icon-font-size) + var(--tv-Alert-close-icon-right) + 16px); } } - &__icon { - font-size: var(--ti-alert-icon-font-size); - } + /** type 场景 theme */ + .color-theme-mixin(@theme) { + @bg: %('var(--tv-Alert-bg-color-%a)', @theme); + @icon: %('var(--tv-Alert-icon-color-%a)', @theme); - &.is-center { - justify-content: center; - align-items: center; - } + background-color: e(@bg); - .is-custom { - position: absolute; - font-size: var(--ti-alert-close-text-font-size); - top: var(--ti-alert-close-position-top); - right: 12px; - cursor: pointer; + .@{alert-prefix-cls}__icon:not(.@{alert-prefix-cls}__close) { + fill: e(@icon); + } } - - & &__close { - font-size: var(--ti-alert-close-font-size); - position: absolute; - top: var(--ti-alert-close-position-top); - right: 12px; - cursor: pointer; + &.@{alert-prefix-cls}--success { + .color-theme-mixin(success); } - - & &__content { - .@{alert-prefix-cls}__opration { - font-size: var(--ti-alert-opration-font-size); - color: var(--ti-alert-opration-text-color); - line-height: 1; - - a { - font-size: var(--ti-alert-opration-font-size); - color: var(--ti-alert-opration-text-color); - } - - a:not(:last-child) { - margin-right: 16px; - } - } + &.@{alert-prefix-cls}--error { + .color-theme-mixin(error); } - - & &__title { - font-size: var(--ti-alert-title-font-size); - color: var(--ti-alert-title-text-color); - font-weight: bold; - line-height: 20px; + &.@{alert-prefix-cls}--warning { + .color-theme-mixin(warning); } - - & &__description { - font-size: var(--ti-alert-description-font-size); - line-height: var(--ti-alert-description-line-height); + &.@{alert-prefix-cls}--info { + .color-theme-mixin(info); + } + &.@{alert-prefix-cls}--simple { + .color-theme-mixin(simple); } } diff --git a/packages/theme/src/alert/vars.less b/packages/theme/src/alert/vars.less index 4a7bc37908..00e60c490f 100644 --- a/packages/theme/src/alert/vars.less +++ b/packages/theme/src/alert/vars.less @@ -10,149 +10,102 @@ * */ -.component-css-vars-alert() { - // 默认字体 - --ti-alert-font-family: var( - --ti-common-font-family, - 'Helvetica', - 'Arial', - 'PingFangSC-Regular', - 'Hiragino Sans GB', - 'Microsoft YaHei', - '微软雅黑', - 'Microsoft JhengHei' - ); - // 边框厚度(new) - --ti-alert-border-weight: var(--ti-common-size-0, 0px); - // 描述字号 - --ti-alert-description-font-size: var(--ti-common-font-size-base, 14px); - // 默认关闭图标固定定位顶部距离(hide) - --ti-alert-close-position-top: var(--ti-common-space-3x, 12px); - // 默认关闭图标字号 - --ti-alert-close-font-size: var(--ti-common-font-size-2, 16px); - // 自定义关闭文字字号 - --ti-alert-close-text-font-size: var(--ti-common-font-size-base, 14px); - // 组件圆角 - --ti-alert-border-radius: var(--ti-common-border-radius-4, 8px); - // 标题文本色 - --ti-alert-title-text-color: var(--ti-common-color-text-primary, #191919); - // success类型标题文本色 - --ti-alert-success-title-text-color: var(--ti-common-color-text-primary, #191919); - // info类型标题文本色 - --ti-alert-info-title-text-color: var(--ti-common-color-text-primary, #191919); - // warning类型标题文本色 - --ti-alert-warning-title-text-color: var(--ti-common-color-text-primary, #191919); - // error类型标题文本色 - --ti-alert-error-title-text-color: var(--ti-common-color-text-primary, #191919); - // simple类型标题文本色 - --ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #191919); - // 标题字号 - --ti-alert-title-font-size: var(--ti-common-font-size-2, 16px); - // 标题图标字号 - --ti-alert-icon-font-size: var(--ti-common-font-size-2, 16px); - // 描述内容行高 - --ti-alert-description-line-height: var(--ti-common-line-height-number, 1.5); - // 描述内容顶部内边距 - --ti-alert-normal-content-padding-vertical: var(--ti-common-space-0, 0px); - // 描述内容水平内边距 - --ti-alert-normal-content-padding-horizontal: var(--ti-common-space-2x, 8px); - // 描述内容提示内容顶部外边距 - --ti-alert-description-margin-top: var(--ti-common-space-base, 4px); - // 描述内容提示内容底部外边距 - --ti-alert-description-margin-bottom: var(--ti-common-space-0, 0px); - // 描述默认文本色 - --ti-alert-description-text-color: var(--ti-common-color-text-secondary, #595959); - // 默认顶部内边距 - --ti-alert-normal-padding-top: calc(var(--ti-common-space-2x, 8px) + 1.5px); - // 默认右内边距 - --ti-alert-normal-padding-right: var(--ti-common-space-4x, 16px); - // 默认底部内边距 - --ti-alert-normal-padding-bottom: calc(var(--ti-common-space-2x, 8px) + 1.5px); - // 默认左内边距 - --ti-alert-normal-padding-left: var(--ti-common-space-4x, 16px); - // 默认垂直外边距 - --ti-alert-normal-margin-vertical: var(--ti-common-space-4x, 16px); - // 默认水平外边距 - --ti-alert-normal-margin-horizontal: var(--ti-common-space-0, 0px); - // large尺寸顶部内边距 - --ti-alert-large-padding-top: var(--ti-common-space-4x, 16px); - // large尺寸底部内边距 - --ti-alert-large-padding-bottom: var(--ti-common-space-4x, 16px); - // large尺寸左内边距 - --ti-alert-large-padding-left: var(--ti-common-space-4x, 16px); - // large尺寸右内边距 - --ti-alert-large-padding-right: var(--ti-common-space-4x, 16px); - // large尺寸操作文本色 - --ti-alert-opration-text-color: var(--ti-common-color-text-highlight, #1476ff); - // large尺寸操作字号 - --ti-alert-opration-font-size: var(--ti-common-font-size-base, 14px); - // large尺寸图标字号 - --ti-alert-large-icon-font-size: var(--ti-common-font-size-4, 20px); - // large尺寸描述内容左内边距 - --ti-alert-large-content-padding-left: var(--ti-common-space-2x, 8px); - // 大尺寸关闭图标字号 - --ti-alert-large-close-font-size: var(--ti-alert-close-font-size); - - // warning类型边框色 - --ti-alert-warning-border-color: var(--ti-common-color-warn-border, #ffebd1); - // warning类型图标色 - --ti-alert-warning-icon-color: var(--ti-common-color-warn, #ff8800); - // warning类型链接色(hide) - --ti-alert-warning-link-text-color: var(--ti-common-color-warn-text, #ff8800); - // warning类型背景色 - --ti-alert-warning-bg-color: var(--ti-common-color-warn-bg, #ffebd1); - // warning类型关闭图标色 - --ti-alert-warning-close-icon-color: var(--ti-common-color-text-weaken, #808080); - // warning类型悬浮关闭图标色 - --ti-alert-warning-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5); - // error类型边框色 - --ti-alert-error-border-color: var(--ti-common-color-error-border-secondary, #fce3e1); - // error类型图标色 - --ti-alert-error-icon-color: var(--ti-common-color-error, #f23030); - // error类型链接色(hide) - --ti-alert-error-link-text-color: var(--ti-common-color-error-text, #f23030); - // error类型背景色 - --ti-alert-error-bg-color: var(--ti-common-color-error-bg, #fce3e1); - // error类型关闭图标色 - --ti-alert-error-close-icon-color: var(--ti-common-color-text-weaken, #808080); - // error类型悬浮关闭图标色 - --ti-alert-error-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5); - // success类型边框色 - --ti-alert-success-border-color: var(--ti-common-color-success-border, #e6f2d5); - // success类型图标色 - --ti-alert-success-icon-color: var(--ti-common-color-success, #5cb300); - // success类型链接色(hide) - --ti-alert-success-link-text-color: var(--ti-common-color-text-success, #5cb300); - // success类型背景色 - --ti-alert-success-bg-color: var(--ti-common-color-success-bg, #e6f2d5); - // success类型关闭图标色 - --ti-alert-success-close-icon-color: var(--ti-common-color-text-weaken, #808080); - // success类型悬浮关闭图标色 - --ti-alert-success-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5); - - // info类型边框色 - --ti-alert-info-border-color: var(--ti-common-color-prompt-border, #deecff); - // info类型图标色 - --ti-alert-info-icon-color: var(--ti-common-color-prompt, #1476ff); - // info类型链接色(hide) - --ti-alert-info-link-text-color: var(--ti-common-color-prompt-text, #1476ff); - // info类型背景色 - --ti-alert-info-bg-color: var(--ti-common-color-prompt-bg, #deecff); - // info类型关闭图标色 - --ti-alert-info-close-icon-color: var(--ti-common-color-text-weaken, #808080); - // info类型悬浮关闭图标色 - --ti-alert-info-close-hover-icon-color: var(--ti-common-color-icon-darkbg-hover, #7693f5); - - // simple类型边框色 - --ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6); - // simple类型图标色 - --ti-alert-simple-icon-color: #808080; - // simple类型链接色(hide) - --ti-alert-simple-link-text-color: var(--ti-common-color-primary-active, #595959); - // simple类型背景色 - --ti-alert-simple-bg-color: var(--ti-common-color-bg-disabled, #f0f0f0); - // simple类型关闭图标色 - --ti-alert-simple-close-icon-color: var(--ti-alert-simple-icon-color); - // simple类型悬浮关闭图标色 - --ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color); +// 按区域划分场景: +// Large 影响内容区要显示的区域,还影响 margin, padding 和 alert-icon的大小 +// Normal尺寸时: alert-icon + content(description) + close-icon +// Large 尺寸时: alert-icon + content(title/ description /opration) + close-icon +// 所以思路: 先按Large编写各区域场景,之后用Normal去覆盖某些值。 + +// 按type(theme)划分: success/error/warn/info/simple 【叠加状态】 + +.inject-Alert-vars() { + //-------------------------------------------------------全局场景:------------------------------------------ + + // 警告的圆角 + --tv-Alert-border-radius: var(--tv-border-radius-lg); + // 警告的水平内边距 + --tv-Alert-padding-x: var(--tv-space-xl); + // 警告的垂直内边距 + --tv-Alert-padding-y: var(--tv-space-xl); + // 警告的水平外边距 + --tv-Alert-margin-x: 0; // 规范上外边距不应该设置,但由于历史原因,normal时有固定的上下外边距,保留这个特性。 + // 警告的垂直外边距 + --tv-Alert-margin-y: 0; + + //-------------------------------------------------------alert-icon 场景:----------------------------------- + + // 警告的图标大小 + --tv-Alert-icon-size: 20px; + // 警告的图标右外边距 + --tv-Alert-icon-margin-right: var(--tv-space-md); + + //-------------------------------------------------------content 场景:title/description/opration------------ + + // 警告的标题字号 + --tv-Alert-title-font-size: var(--tv-font-size-lg); + // 警告的标题字重 + --tv-Alert-title-font-weight: var(--tv-font-weight-bold); + // 警告的标题颜色 + --tv-Alert-title-text-color: var(--tv-color-text); + // 警告的标题下边距 + --tv-Alert-title-margin-bottom: var(--tv-space-sm); + + // 警告的描述字号 + --tv-Alert-desc-font-size: var(--tv-font-size-md); + // 警告的描述字重 + --tv-Alert-desc-font-weight: var(--tv-font-weight-regular); + // 警告的描述颜色 + --tv-Alert-desc-text-color: var(--tv-color-text-secondary); + + //-------------------------------------------------------close-icon 场景:---------------------------------- + + // 警告的关闭按钮的大小 + --tv-Alert-close-icon-font-size: var(--tv-icon-size); + // 警告的关闭按钮的颜色 + --tv-Alert-close-icon-color: var(--tv-color-icon); + // 警告的关闭按钮的悬浮颜色 + --tv-Alert-close-icon-color-hover: var(--tv-color-icon-hover); + // 警告的关闭按钮距上边的距离 + --tv-Alert-close-icon-top: var(--tv-space-lg); + // 警告的关闭按钮距右边的距离 + --tv-Alert-close-icon-right: var(--tv-space-lg); + + // 警告的关闭文本的大小 + --tv-Alert-close-text-font-size: var(--tv-font-size-md); + + //-------------------------------------------------------Normal 场景:--------------------------------------- + + // 警告的Normal时,图标大小 + --tv-Alert-icon-size-normal: var(--tv-icon-size); + // 警告的Normal时,水平内边距 + --tv-Alert-padding-x-normal: var(--tv-space-xl); + // 警告的Normal时,垂直内边距 + --tv-Alert-padding-y-normal: 9px; + // 警告的Normal时,水平外边距 + --tv-Alert-margin-x-normal: 0; + // 警告的Normal时,垂直外边距 + --tv-Alert-margin-y-normal: var(--tv-space-xl); + + //-------------------------------------------------------type 场景:------------------------------------------ + + // success 主题时警告背景色 + --tv-Alert-bg-color-success: var(--tv-color-success-bg-light); + // success 主题时警告图标色 + --tv-Alert-icon-color-success: var(--tv-color-success-icon); + // error 主题时警告背景色 + --tv-Alert-bg-color-error: var(--tv-color-error-bg-light); + // error 主题时警告图标色 + --tv-Alert-icon-color-error: var(--tv-color-error-icon); + // warning 主题时警告背景色 + --tv-Alert-bg-color-warning: var(--tv-color-warn-bg-light); + // warning 主题时警告图标色 + --tv-Alert-icon-color-warning: var(--tv-color-warn-icon); + // info 主题时警告背景色 + --tv-Alert-bg-color-info: var(--tv-color-info-bg-light); + // info 主题时警告图标色 + --tv-Alert-icon-color-info: var(--tv-color-info-icon); + // simple 主题时警告背景色 + --tv-Alert-bg-color-simple: var(--tv-color-bg); + // simple 主题时警告图标色 + --tv-Alert-icon-color-simple: var(--tv-color-icon); } diff --git a/packages/theme/src/base/transition.less b/packages/theme/src/base/transition.less index 0043323170..8367884ee1 100644 --- a/packages/theme/src/base/transition.less +++ b/packages/theme/src/base/transition.less @@ -232,3 +232,14 @@ vue3的动画状态类: v-enter-from v-enter-to v-leave-from v-leave-to 以 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out; } + +// alert的切换显示动画 +.tiny-transition-alert-fade-enter, +.tiny-transition-alert-fade-enter-from, +.tiny-transition-alert-fade-leave-active { + opacity: 0; +} + +.tiny-transition-alert-fade-leave-active { + transition: opacity 0.3s ease-in; +} diff --git a/packages/theme/src/mixins/alert.less b/packages/theme/src/mixins/alert.less deleted file mode 100644 index 4a902ad512..0000000000 --- a/packages/theme/src/mixins/alert.less +++ /dev/null @@ -1,35 +0,0 @@ -/** -* Copyright (c) 2022 - present TinyVue Authors. -* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. -* -* Use of this source code is governed by an MIT-style license. -* -* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, -* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR -* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. -* -*/ - -@import '../custom.less'; - -.alert-variant(@color; @border-color; @icon-color; @link-color; @bgcolor; @close-icon-color) { - background: @bgcolor; - border-color: @border-color; - color: @color; - - hr { - border-top-color: @link-color; - } - - .alert-link { - color: @link-color; - } - - .@{css-prefix}alert__icon { - fill: @icon-color; - } - - .@{css-prefix}alert__close { - fill: @close-icon-color; - } -} diff --git a/packages/theme/src/transition/alert-fade.less b/packages/theme/src/transition/alert-fade.less deleted file mode 100644 index fe7f0460bf..0000000000 --- a/packages/theme/src/transition/alert-fade.less +++ /dev/null @@ -1,23 +0,0 @@ -/** -* Copyright (c) 2022 - present TinyVue Authors. -* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. -* -* Use of this source code is governed by an MIT-style license. -* -* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, -* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR -* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. -* -*/ - -@import '../custom.less'; - -.@{css-prefix}transition-alert-fade-enter, -.@{css-prefix}transition-alert-fade-enter-from, -.@{css-prefix}transition-alert-fade-leave-active { - opacity: 0; -} - -.@{css-prefix}transition-alert-fade-leave-active { - transition: opacity 0.3s ease-in; -}