From 9ad8b2edd8193f975c3f4b994a2816821c7f57cd Mon Sep 17 00:00:00 2001 From: 2113ic Date: Fri, 22 Mar 2024 21:36:51 +0800 Subject: [PATCH 01/18] fix(button): simplify class names --- .../components/button/src/button.vue | 48 ++--- .../components/button/src/utils.ts | 16 -- .../components/button/style/css.ts | 2 - .../components/button/style/index.less | 196 ++++++++---------- .../components/button/style/index.ts | 1 + .../components/button/style/variables.less | 54 ++++- 6 files changed, 158 insertions(+), 159 deletions(-) delete mode 100644 packages/yike-design-ui/components/button/src/utils.ts delete mode 100644 packages/yike-design-ui/components/button/style/css.ts diff --git a/packages/yike-design-ui/components/button/src/button.vue b/packages/yike-design-ui/components/button/src/button.vue index f9483e02..24490f87 100644 --- a/packages/yike-design-ui/components/button/src/button.vue +++ b/packages/yike-design-ui/components/button/src/button.vue @@ -1,16 +1,10 @@ diff --git a/packages/yike-design-ui/components/button/src/utils.ts b/packages/yike-design-ui/components/button/src/utils.ts deleted file mode 100644 index 3cab95d0..00000000 --- a/packages/yike-design-ui/components/button/src/utils.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Size } from '../../utils'; - -export const getSize = (size: Size): number => { - switch (size) { - case 's': - return 12; - case 'm': - return 14; - case 'l': - return 14; - case 'xl': - return 16; - default: - return 16; - } -}; diff --git a/packages/yike-design-ui/components/button/style/css.ts b/packages/yike-design-ui/components/button/style/css.ts deleted file mode 100644 index a91762c3..00000000 --- a/packages/yike-design-ui/components/button/style/css.ts +++ /dev/null @@ -1,2 +0,0 @@ -// TODO: 待打包工具完善后 -// 这里需要引入打包后 CSS diff --git a/packages/yike-design-ui/components/button/style/index.less b/packages/yike-design-ui/components/button/style/index.less index 97344000..e09016cc 100644 --- a/packages/yike-design-ui/components/button/style/index.less +++ b/packages/yike-design-ui/components/button/style/index.less @@ -1,135 +1,45 @@ @import '../../styles/mixin.less'; @import './variables.less'; -@import '../../spinner/style/index.less'; -/* stylelint-disable */ -.yk-button--loading { - opacity: 0.7 !important; - .yk-spinner { - margin-right: 4px; - } - - circle { - stroke: #fff !important; - } -} .yk-button { display: inline-flex; justify-content: center; align-items: center; - padding: 6px 16px; + border: 1px solid; white-space: nowrap; - // 默认按钮状态 - color: @btn-primary-color-text; - color: @btn-primary-color-text; - background-color: @btn-primary-color-bg; outline: none; transition: all @animatb; box-sizing: border-box; - border-width: 1px; - border-style: solid; cursor: pointer; user-select: none; - circle { - stroke: @btn-primary-color-text !important; - } + + .btn-type(); + .btn-size(); &__icon { margin-right: @space-ss; } - .btn-type(@type) { - .normal() { - color: ~'@{btn-@{type}-color-text}'; - circle { - stroke: ~'@{btn-@{type}-color-text}' !important; - } - background-color: ~'@{btn-@{type}-color-bg}'; - border-color: ~'@{btn-@{type}-color-border}'; - &:not(:disabled):hover { - background-color: ~'@{btn-@{type}-color-hover}'; - } - &:not(:disabled):active { - background-color: ~'@{btn-@{type}-color-active}'; - } - } - &--@{type} { - .normal(); - } - } + &--loading { + opacity: 0.7 !important; - .btn-status(@type: primary, @status: primary) { - .normal() { - color: ~'@{btn-@{type}-color-text_@{status}}'; - circle { - stroke: ~'@{btn-@{type}-color-text_@{status}}' !important; - } - background-color: ~'@{btn-@{type}-color-bg_@{status}}'; - border-color: ~'@{btn-@{type}-color-border_@{status}}'; - &:not(:disabled):hover { - background-color: ~'@{btn-@{type}-color-hover_@{status}}'; - } - &:not(:disabled):active { - background-color: ~'@{btn-@{type}-color-active_@{status}}'; - } + .yk-spinner { + margin-right: 4px; } - &.yk-button--@{type}.yk-button--@{status} { - .normal(); + + circle { + stroke: #fff !important; } } - .btn-type(primary); - .btn-type(secondary); - .btn-type(outline); - - .btn-status(primary); - .btn-status(primary, success); - .btn-status(primary, warning); - .btn-status(primary, danger); - - .btn-status(secondary); - .btn-status(secondary, success); - .btn-status(secondary, warning); - .btn-status(secondary, danger); - - .btn-status(outline); - .btn-status(outline, success); - .btn-status(outline, warning); - .btn-status(outline, danger); - - // 尺寸 size - &--s { - padding: 0px @space-s; - min-width: 24px; - height: 24px; - font-size: @size-ss; - border-radius: @radius-s; - } - &--m { - padding: 0px @space-l; - min-width: 32px; - height: 32px; - border-radius: @radius-s; - } - &--l { - padding: 0px @space-l; - min-width: 36px; - height: 36px; - border-radius: @radius-m; - } - &--xl { - padding: 0px @space-xl; - min-width: 48px; - height: 48px; - font-size: @size-m; - border-radius: @radius-m; - } + .genTypeAndStatus(); + .gen-size(); + &--long { display: block; width: 100%; } - // 圆角样式 &--round { border-radius: @radius-r; } @@ -137,13 +47,87 @@ padding: 0; border-radius: @radius-r; } - &--square { padding: 0; } - // 禁用 &--disabled { .disabled(); } } + +.genTypeAndStatus() { + @typeList: secondary, outline; + + each(@typeList, { + &--@{value} { + .btn-type(@value); + } + .gen-status(@value); + }); +} + +.gen-status(@type) { + @statusList: primary, success, warning, danger; + + each(@statusList, { + &--@{type}.yk-button--@{value} { + .btn-status(@type, @value); + } + &--@{value} { + .btn-status(primary, @value); + } + }); +} + +.gen-size() { + @sizeList: s, m, xl; + + each(@sizeList, { + &--@{value} { + .btn-size(@value); + } + }); +} + +.btn-type(@type: primary) { + color: ~'@{btn-@{type}-color-text}'; + background-color: ~'@{btn-@{type}-color-bg}'; + border-color: ~'@{btn-@{type}-color-border}'; + + &:not(:disabled):hover { + background-color: ~'@{btn-@{type}-color-hover}'; + } + &:not(:disabled):active { + background-color: ~'@{btn-@{type}-color-active}'; + } + + circle { + stroke: ~'@{btn-@{type}-color-text}' !important; + } +} + +.btn-status(@type, @status: primary) { + color: ~'@{btn-@{type}-color-text_@{status}}'; + background-color: ~'@{btn-@{type}-color-bg_@{status}}'; + border-color: ~'@{btn-@{type}-color-border_@{status}}'; + + &:not(:disabled):hover { + background-color: ~'@{btn-@{type}-color-hover_@{status}}'; + } + &:not(:disabled):active { + background-color: ~'@{btn-@{type}-color-active_@{status}}'; + } + + circle { + stroke: ~'@{btn-@{type}-color-text_@{status}}' !important; + } +} + +.btn-size(@size: l) { + padding: ~'@{btn-size-padding_@{size}}'; + min-width: ~'@{btn-size-minWidth_@{size}}'; + height: ~'@{btn-size-height_@{size}}'; + font-size: ~'@{btn-size-fontSize_@{size}}'; + border-radius: ~'@{btn-size-borderRadius_@{size}}'; +} diff --git a/packages/yike-design-ui/components/button/style/index.ts b/packages/yike-design-ui/components/button/style/index.ts index d74e52ee..8479bad7 100644 --- a/packages/yike-design-ui/components/button/style/index.ts +++ b/packages/yike-design-ui/components/button/style/index.ts @@ -1 +1,2 @@ import './index.less'; +import '../../spinner/style'; diff --git a/packages/yike-design-ui/components/button/style/variables.less b/packages/yike-design-ui/components/button/style/variables.less index 50c370c6..7ffbcec4 100644 --- a/packages/yike-design-ui/components/button/style/variables.less +++ b/packages/yike-design-ui/components/button/style/variables.less @@ -1,51 +1,57 @@ @import '../../styles/color/colors.less'; +// Primary +// btn-[type]-color-text_[status] @btn-primary-color-text: #fff; @btn-primary-color-text_primary: #fff; @btn-primary-color-text_success: #fff; @btn-primary-color-text_warning: #fff; @btn-primary-color-text_danger: #fff; + @btn-primary-color-bg: @pcolor; @btn-primary-color-bg_primary: @pcolor; @btn-primary-color-bg_success: @scolor; @btn-primary-color-bg_warning: @wcolor; @btn-primary-color-bg_danger: @ecolor; + @btn-primary-color-hover: @pcolor-6; -@btn-primary-color-active: @pcolor-8; -@btn-primary-color-border_primary: @pcolor; -@btn-primary-color-border_success: @scolor; -@btn-primary-color-border_warning: @wcolor; -@btn-primary-color-border_danger: @ecolor; @btn-primary-color-hover_primary: @pcolor-6; @btn-primary-color-hover_success: @scolor-6; @btn-primary-color-hover_warning: @wcolor-6; @btn-primary-color-hover_danger: @ecolor-6; + +@btn-primary-color-active: @pcolor-8; @btn-primary-color-active_primary: @pcolor-8; @btn-primary-color-active_success: @scolor-8; @btn-primary-color-active_warning: @wcolor-8; @btn-primary-color-active_danger: @ecolor-8; + @btn-primary-color-border: transparent; @btn-primary-color-border_primary: transparent; @btn-primary-color-border_success: transparent; @btn-primary-color-border_warning: transparent; @btn-primary-color-border_danger: transparent; +// Secondary @btn-secondary-color-text: @font-color-l; @btn-secondary-color-text_primary: @pcolor; @btn-secondary-color-text_success: @scolor; @btn-secondary-color-text_warning: @wcolor; @btn-secondary-color-text_danger: @ecolor; + @btn-secondary-color-bg: @gray-1; -@btn-secondary-color-hover: @gray-2; -@btn-secondary-color-active: @gray-3; @btn-secondary-color-bg_primary: @pcolor-1; @btn-secondary-color-bg_success: @scolor-1; @btn-secondary-color-bg_warning: @wcolor-1; @btn-secondary-color-bg_danger: @ecolor-1; + +@btn-secondary-color-hover: @gray-2; @btn-secondary-color-hover_primary: @pcolor-2; @btn-secondary-color-hover_success: @scolor-2; @btn-secondary-color-hover_warning: @wcolor-2; @btn-secondary-color-hover_danger: @ecolor-2; + +@btn-secondary-color-active: @gray-3; @btn-secondary-color-active_primary: @pcolor-3; @btn-secondary-color-active_success: @scolor-3; @btn-secondary-color-active_warning: @wcolor-3; @@ -57,28 +63,58 @@ @btn-secondary-color-border_warning: transparent; @btn-secondary-color-border_danger: transparent; +// Outline @btn-outline-color-text: @font-color-l; @btn-outline-color-text_primary: @pcolor; @btn-outline-color-text_success: @scolor; @btn-outline-color-text_warning: @wcolor; @btn-outline-color-text_danger: @ecolor; + @btn-outline-color-bg: transparent; -@btn-outline-color-hover: @gray-1; -@btn-outline-color-active: @gray-2; @btn-outline-color-bg_primary: transparent; @btn-outline-color-bg_success: transparent; @btn-outline-color-bg_warning: transparent; @btn-outline-color-bg_danger: transparent; + @btn-outline-color-border: @gray-3; @btn-outline-color-border_primary: @pcolor-3; @btn-outline-color-border_success: @scolor-3; @btn-outline-color-border_warning: @wcolor-3; @btn-outline-color-border_danger: @ecolor-3; + +@btn-outline-color-hover: @gray-1; @btn-outline-color-hover_primary: @pcolor-1; @btn-outline-color-hover_success: @scolor-1; @btn-outline-color-hover_warning: @wcolor-1; @btn-outline-color-hover_danger: @ecolor-1; + +@btn-outline-color-active: @gray-2; @btn-outline-color-active_primary: @pcolor-2; @btn-outline-color-active_success: @scolor-2; @btn-outline-color-active_warning: @wcolor-2; @btn-outline-color-active_danger: @ecolor-2; + +// Size +@btn-size-padding_s: 0px @space-s; +@btn-size-minWidth_s: 24px; +@btn-size-height_s: 24px; +@btn-size-fontSize_s: @size-ss; +@btn-size-borderRadius_s: @radius-s; + +@btn-size-padding_m: 0px @space-l; +@btn-size-minWidth_m: 32px; +@btn-size-height_m: 32px; +@btn-size-fontSize_m: inherit; +@btn-size-borderRadius_m: @radius-s; + +@btn-size-padding_l: 0px @space-l; +@btn-size-minWidth_l: 36px; +@btn-size-height_l: 36px; +@btn-size-fontSize_l: inherit; +@btn-size-borderRadius_l: @radius-m; + +@btn-size-padding_xl: 0px @space-xl; +@btn-size-minWidth_xl: 48px; +@btn-size-height_xl: 48px; +@btn-size-fontSize_xl: @size-m; +@btn-size-borderRadius_xl: @radius-m; From 743931f0a451104853b482f00e9aeca3f9ec03a0 Mon Sep 17 00:00:00 2001 From: rickon_DAFEI <51977404+Rickon-DAFEI@users.noreply.github.com> Date: Fri, 22 Mar 2024 23:03:33 +0800 Subject: [PATCH 02/18] fix(space): fix space undifined (#337) --- packages/yike-design-demo/src/components/Snippet.vue | 7 ++----- .../yike-design-ui/components/radio/src/radio-group.vue | 2 +- packages/yike-design-ui/components/space/src/space.vue | 6 ++++-- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/yike-design-demo/src/components/Snippet.vue b/packages/yike-design-demo/src/components/Snippet.vue index 45214859..cd8f4a37 100644 --- a/packages/yike-design-demo/src/components/Snippet.vue +++ b/packages/yike-design-demo/src/components/Snippet.vue @@ -56,7 +56,7 @@ function onCopy() {
- +
(), { size: 'l', + align: 'start', + justify: 'start', dir: 'horizontal', overflow: 'visible', wrap: false, @@ -60,8 +62,8 @@ const classList = computed(() => { classes.push(`overflow-${overflow.value}`) } - classes.push(`align-${align?.value}`) - classes.push(`justify-${justify?.value}`) + classes.push(`align-${align.value}`) + classes.push(`justify-${justify.value}`) return classes }) From f70340e78aae096b273aef74866166caa31c154b Mon Sep 17 00:00:00 2001 From: 2113ic Date: Fri, 22 Mar 2024 23:08:31 +0800 Subject: [PATCH 03/18] fix(button): fix status style repeat --- .../components/button/style/index.less | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/yike-design-ui/components/button/style/index.less b/packages/yike-design-ui/components/button/style/index.less index e09016cc..bcf59c1e 100644 --- a/packages/yike-design-ui/components/button/style/index.less +++ b/packages/yike-design-ui/components/button/style/index.less @@ -1,6 +1,10 @@ @import '../../styles/mixin.less'; @import './variables.less'; +@typeList: secondary, outline; +@statusList: primary, success, warning, danger; +@sizeList: s, m, xl; + .yk-button { display: inline-flex; justify-content: center; @@ -12,7 +16,6 @@ box-sizing: border-box; cursor: pointer; user-select: none; - .btn-type(); .btn-size(); @@ -32,6 +35,13 @@ } } + // yk-button--[status] + each(@statusList, { + &--@{value} { + .btn-status(primary, @value); + } + }); + .genTypeAndStatus(); .gen-size(); @@ -57,8 +67,6 @@ } .genTypeAndStatus() { - @typeList: secondary, outline; - each(@typeList, { &--@{value} { .btn-type(@value); @@ -74,15 +82,10 @@ &--@{type}.yk-button--@{value} { .btn-status(@type, @value); } - &--@{value} { - .btn-status(primary, @value); - } }); } .gen-size() { - @sizeList: s, m, xl; - each(@sizeList, { &--@{value} { .btn-size(@value); From 43e237e00b917fafdeeb4c3f34fd05f7b2d4c96b Mon Sep 17 00:00:00 2001 From: rickon_DAFEI <1016831404@qq.com> Date: Fri, 22 Mar 2024 23:33:17 +0800 Subject: [PATCH 04/18] feat(test): remove doc default button style --- packages/demo-test/src/style.css | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/packages/demo-test/src/style.css b/packages/demo-test/src/style.css index cec67f5d..d2e9756a 100644 --- a/packages/demo-test/src/style.css +++ b/packages/demo-test/src/style.css @@ -35,25 +35,6 @@ h1 { line-height: 1.1; } -button { - padding: 0.6em 1.2em; - font-size: 1em; - font-family: inherit; - font-weight: 500; - border: 1px solid transparent; - border-radius: 8px; - background-color: #1a1a1a; - transition: border-color 0.25s; - cursor: pointer; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - .card { padding: 2em; } From e1a8480519ba90bafd09046786c08a2e44982d01 Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sat, 23 Mar 2024 00:01:16 +0800 Subject: [PATCH 05/18] =?UTF-8?q?fix:=20table=E7=BB=84=E4=BB=B6=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../yike-design-demo/src/style/markdown.less | 8 +++--- .../components/table/style/index.less | 27 ++++++++++++------- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/packages/yike-design-demo/src/style/markdown.less b/packages/yike-design-demo/src/style/markdown.less index c6dd9c91..213eb827 100644 --- a/packages/yike-design-demo/src/style/markdown.less +++ b/packages/yike-design-demo/src/style/markdown.less @@ -112,17 +112,17 @@ } th { - padding-left: @space-m; + padding: 0 @space-xl; font-size: @size-s; font-weight: 600; text-align: left; - background-color: @bg-color-m; + background-color: @bg-color-s; transition: background-color @animats; - line-height: 44px; + line-height: 56px; } td { - padding: 10px @space-m; + padding: @space-l @space-xl; max-width: 240px; border-top: 1px solid @line-color-s; text-align: left; diff --git a/packages/yike-design-ui/components/table/style/index.less b/packages/yike-design-ui/components/table/style/index.less index 9dd46784..554731dc 100644 --- a/packages/yike-design-ui/components/table/style/index.less +++ b/packages/yike-design-ui/components/table/style/index.less @@ -9,25 +9,35 @@ height: fit-content; box-sizing: border-box; border-spacing: 0; + .td { + padding: @space-m @space-xl; + } } th { + padding: 0 @space-xl; background-color: @bg-color-s; + .cell { + font-weight: 600; + } } - &__cell { position: relative; z-index: 1; - padding: 18px 0px; + padding: @space-s 0; min-width: 0; - font-size: 14px; + max-width: 240px; + height: 56px; + border-bottom: 1px solid @line-color-s; text-align: left; text-overflow: ellipsis; box-sizing: border-box; vertical-align: middle; + .font-s(); .cell { + display: flex; + align-items: center; overflow: hidden; - padding: 0 20px; text-overflow: ellipsis; white-space: normal; box-sizing: border-box; @@ -36,14 +46,13 @@ } } - &__cell { - border-bottom: 1px solid #1e202514; - } - &__row { background-color: @bg-color-l; &:hover { - background-color: @bg-color-s; + background-color: @bg-color-m; + } + .yk-table__cell { + padding: 0 @space-xl; } } From 0648ff4ef4ebb215084eb8dda15f2f0906e31889 Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sat, 23 Mar 2024 10:28:46 +0800 Subject: [PATCH 06/18] =?UTF-8?q?fix:=20table=E7=BB=84=E4=BB=B6=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/yike-design-ui/components/table/style/index.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/yike-design-ui/components/table/style/index.less b/packages/yike-design-ui/components/table/style/index.less index 554731dc..7abe98af 100644 --- a/packages/yike-design-ui/components/table/style/index.less +++ b/packages/yike-design-ui/components/table/style/index.less @@ -1,10 +1,11 @@ @import '../../styles/color/colors.less'; .yk-table { + overflow-x: auto; > table { position: relative; overflow: hidden; - width: 100%; + // width: 100%; max-width: 100%; height: fit-content; box-sizing: border-box; @@ -24,7 +25,6 @@ &__cell { position: relative; z-index: 1; - padding: @space-s 0; min-width: 0; max-width: 240px; height: 56px; From b55c32dc7e4ce3323774e1a4c44330993a73ea07 Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sat, 23 Mar 2024 10:50:07 +0800 Subject: [PATCH 07/18] =?UTF-8?q?docs:=20Modal=E7=BB=84=E4=BB=B6=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/yike-design-demo/src/examples/modal/modal-base.vue | 2 +- packages/yike-design-demo/src/examples/modal/modal-close.vue | 2 +- .../yike-design-demo/src/examples/modal/modal-footer-show.vue | 2 +- packages/yike-design-demo/src/examples/modal/modal-footer.vue | 2 +- packages/yike-design-demo/src/examples/modal/modal-header.vue | 2 +- packages/yike-design-demo/src/examples/modal/modal-small.vue | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/yike-design-demo/src/examples/modal/modal-base.vue b/packages/yike-design-demo/src/examples/modal/modal-base.vue index c4b20bbb..b8377784 100644 --- a/packages/yike-design-demo/src/examples/modal/modal-base.vue +++ b/packages/yike-design-demo/src/examples/modal/modal-base.vue @@ -11,4 +11,4 @@ const showModal = () => { visible.value = true } - + diff --git a/packages/yike-design-demo/src/examples/modal/modal-close.vue b/packages/yike-design-demo/src/examples/modal/modal-close.vue index 89507d74..fb349174 100644 --- a/packages/yike-design-demo/src/examples/modal/modal-close.vue +++ b/packages/yike-design-demo/src/examples/modal/modal-close.vue @@ -15,4 +15,4 @@ const closeModal = () => { proxy.$message({ type: 'success', message: '这里是对话框关闭的回调函数' }) } - + diff --git a/packages/yike-design-demo/src/examples/modal/modal-footer-show.vue b/packages/yike-design-demo/src/examples/modal/modal-footer-show.vue index b9965ca9..2cc9c591 100644 --- a/packages/yike-design-demo/src/examples/modal/modal-footer-show.vue +++ b/packages/yike-design-demo/src/examples/modal/modal-footer-show.vue @@ -11,4 +11,4 @@ const showModal = () => { visible.value = true } - + diff --git a/packages/yike-design-demo/src/examples/modal/modal-footer.vue b/packages/yike-design-demo/src/examples/modal/modal-footer.vue index 20cb708e..b83aec7b 100644 --- a/packages/yike-design-demo/src/examples/modal/modal-footer.vue +++ b/packages/yike-design-demo/src/examples/modal/modal-footer.vue @@ -12,4 +12,4 @@ const showModal = () => { visible.value = true } - + diff --git a/packages/yike-design-demo/src/examples/modal/modal-header.vue b/packages/yike-design-demo/src/examples/modal/modal-header.vue index 1b08b31d..246a2582 100644 --- a/packages/yike-design-demo/src/examples/modal/modal-header.vue +++ b/packages/yike-design-demo/src/examples/modal/modal-header.vue @@ -12,4 +12,4 @@ const showModal = () => { visible.value = true } - + diff --git a/packages/yike-design-demo/src/examples/modal/modal-small.vue b/packages/yike-design-demo/src/examples/modal/modal-small.vue index dc0078ce..4291f2b6 100644 --- a/packages/yike-design-demo/src/examples/modal/modal-small.vue +++ b/packages/yike-design-demo/src/examples/modal/modal-small.vue @@ -11,4 +11,4 @@ const showModal = () => { visible.value = true } - + From ba18e91e120192c164482c80ed2733f6504157ff Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sat, 23 Mar 2024 12:12:04 +0800 Subject: [PATCH 08/18] =?UTF-8?q?fix:=20modal=E7=BB=84=E4=BB=B6=E6=96=B0?= =?UTF-8?q?=E5=A2=9Econtent-hight=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/examples/modal/doc.md | 21 ++++++++++--------- .../components/modal/src/modal.ts | 1 + .../components/modal/src/modal.vue | 9 +++++--- 3 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/yike-design-demo/src/examples/modal/doc.md b/packages/yike-design-demo/src/examples/modal/doc.md index 368059cd..5e9b6851 100644 --- a/packages/yike-design-demo/src/examples/modal/doc.md +++ b/packages/yike-design-demo/src/examples/modal/doc.md @@ -38,16 +38,17 @@ ### API -| 参数 | 描述 | 类型 | 默认值 | -| ------------- | ----------------------------- | ---------------- | ------- | -| `size` | 尺寸 | `small \| large` | `large` | -| `show-footer` | 底部区域展示 | `boolean` | `true` | -| `title` | modal 标题 | `string` | `''` | -| `to` | modal 默认展开的 dom 选择器 | `string` | `body` | -| `scrollable` | 页面可否滚动 | `boolean` | `false` | -| `closeable` | 点击遮罩层是否关闭 modal | `boolean` | `false` | -| `showMask` | 是否展示遮罩层 | `boolean` | `true` | -| `escapable` | 是否可以点击 esc 键关闭 modal | `boolean` | `true` | +| 参数 | 描述 | 类型 | 默认值 | +| ---------------- | ----------------------------- | --------------------- | ------- | +| `size` | 尺寸 | `small \| large` | `large` | +| `show-footer` | 底部区域展示 | `boolean` | `true` | +| `title` | modal 标题 | `string` | `-` | +| `to` | modal 默认展开的 dom 选择器 | `string` | `body` | +| `scrollable` | 页面可否滚动 | `boolean` | `false` | +| `closeable` | 点击遮罩层是否关闭 modal | `boolean` | `false` | +| `showMask` | 是否展示遮罩层 | `boolean` | `true` | +| `escapable` | 是否可以点击 esc 键关闭 modal | `boolean` | `true` | +| `content-height` | 使内容在固定高度内滚动 | `string \| number` | `-` | ### Methods diff --git a/packages/yike-design-ui/components/modal/src/modal.ts b/packages/yike-design-ui/components/modal/src/modal.ts index 20020142..66eef7c3 100644 --- a/packages/yike-design-ui/components/modal/src/modal.ts +++ b/packages/yike-design-ui/components/modal/src/modal.ts @@ -8,4 +8,5 @@ export type modalBaseProps = { showMask?: boolean; escapable?: boolean; showFooter?: boolean; + contentHeight?: string | number; }; diff --git a/packages/yike-design-ui/components/modal/src/modal.vue b/packages/yike-design-ui/components/modal/src/modal.vue index 025d937f..95bb91a6 100644 --- a/packages/yike-design-ui/components/modal/src/modal.vue +++ b/packages/yike-design-ui/components/modal/src/modal.vue @@ -37,9 +37,11 @@
-
- -
+ +
+ +
+
@@ -66,6 +68,7 @@ import { modalBaseProps } from './modal' import { IconCloseOutline } from '../../svg-icon' import YkButton from '../../button' import YkSpace from '../../space' +import YkScrollbar from '../../scrollbar' import '../style' defineOptions({ From 91998a35b4d9fd8151e6559e0bfc32ab7e8028b0 Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sat, 23 Mar 2024 15:07:30 +0800 Subject: [PATCH 09/18] =?UTF-8?q?docs:=20modal=E7=BB=84=E4=BB=B6=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/yike-design-demo/src/examples/modal/doc.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/yike-design-demo/src/examples/modal/doc.md b/packages/yike-design-demo/src/examples/modal/doc.md index 5e9b6851..159b7bce 100644 --- a/packages/yike-design-demo/src/examples/modal/doc.md +++ b/packages/yike-design-demo/src/examples/modal/doc.md @@ -52,9 +52,10 @@ ### Methods -| 方法 | 描述 | 入参类型 | 默认值 | -| -------------- | ---------------------- | ---------- | -------- | -| `onCloseModal` | 对话框关闭时的回调函数 | `Function` | `()=>{}` | +| 方法 | 描述 | 入参类型 | 默认值 | +| -------------- | ------------------------ | ---------- | -------- | +| `onCloseModal` | 对话框关闭时的回调函数 | `Function` | `()=>{}` | +| `onSubmit` | 对话点击确定时的回调函数 | `Function` | `()=>{}` | ### 插槽 From 4392dc8c19964311eacd54f6b2e3bfb18904ceb0 Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sun, 24 Mar 2024 12:03:51 +0800 Subject: [PATCH 10/18] =?UTF-8?q?fix(styles):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E6=B7=B7=E5=90=88=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/alert/style/variables.less | 2 +- .../components/anchor/style/index.less | 2 +- .../components/avatar/style/index.less | 2 +- .../components/back-top/style/index.less | 2 +- .../components/badge/style/index.less | 2 +- .../components/button/style/variables.less | 2 +- .../components/calendar/style/index.less | 4 +- .../components/checkbox/style/checkbox.less | 3 +- .../components/checkbox/style/index.less | 1 - .../components/collapse/style/index.less | 2 +- .../components/divider/style/index.less | 2 +- .../components/drawer/style/index.less | 2 +- .../components/dropdown/style/index.less | 2 +- .../components/empty/style/index.less | 2 +- .../components/form/style/index.less | 2 +- .../yike-design-ui/components/icon/index.ts | 5 - .../components/icon/src/icon.vue | 39 ---- .../components/icon/style/index.less | 0 .../components/icon/style/index.ts | 1 - .../components/image/style/index.less | 2 +- .../components/input-search/style/index.less | 2 +- .../components/input-tag/style/index.less | 2 +- .../components/input/style/index.less | 2 +- .../components/link/style/index.less | 2 + .../components/message/style/index.less | 3 +- .../components/modal/style/index.less | 2 +- .../components/notification/style/index.less | 2 +- .../components/pagination/style/index.less | 2 +- .../components/popover/style/index.less | 2 +- .../components/progress/style/index.less | 2 +- .../components/radio/style/button-shape.less | 2 +- .../components/radio/style/radio-group.less | 2 +- .../components/radio/style/radio-shape.less | 3 +- .../components/rate/style/index.less | 3 +- .../components/scrollbar/style/index.less | 3 +- .../components/skeleton/style/index.less | 2 + .../components/slider/style/variables.less | 3 +- .../components/space/style/index.less | 5 +- .../components/styles/basis.less | 167 +++++++++++++++++ .../components/styles/color/color.js | 23 --- .../components/styles/color/colors.less | 168 ------------------ .../components/styles/index.less | 2 +- .../components/styles/normalize.less | 2 +- .../components/styles/theme.less | 132 +++++++++++--- .../components/switch/style/index.less | 2 +- .../components/table/style/index.less | 2 +- .../components/tabs/style/index.less | 2 + .../components/tag/style/index.less | 2 +- .../components/text-area/style/index.less | 2 + .../timeline/style/timeline-item.less | 3 +- .../components/tooltip/style/index.less | 2 +- .../components/tree-select/style/index.less | 3 +- .../tree-select/style/select-view.less | 3 +- .../tree-select/style/tree-view.less | 2 +- .../components/tree/style/tree-node.less | 2 +- .../components/typography/style/index.less | 2 +- .../components/upload/style/crop.less | 2 +- .../components/upload/style/draggle.less | 3 +- .../components/upload/style/file-list.less | 3 +- .../components/upload/style/index.less | 2 +- .../components/upload/style/picture-list.less | 3 +- packages/yike-design-ui/index.less | 1 - packages/yike-design-ui/index.ts | 3 - 63 files changed, 349 insertions(+), 312 deletions(-) delete mode 100644 packages/yike-design-ui/components/icon/index.ts delete mode 100644 packages/yike-design-ui/components/icon/src/icon.vue delete mode 100644 packages/yike-design-ui/components/icon/style/index.less delete mode 100644 packages/yike-design-ui/components/icon/style/index.ts create mode 100644 packages/yike-design-ui/components/styles/basis.less delete mode 100644 packages/yike-design-ui/components/styles/color/color.js delete mode 100644 packages/yike-design-ui/components/styles/color/colors.less diff --git a/packages/yike-design-ui/components/alert/style/variables.less b/packages/yike-design-ui/components/alert/style/variables.less index cbf6e216..95d48187 100644 --- a/packages/yike-design-ui/components/alert/style/variables.less +++ b/packages/yike-design-ui/components/alert/style/variables.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @alert-info-color: @pcolor; @alert-success-color: @scolor; @alert-warning-color: @wcolor; diff --git a/packages/yike-design-ui/components/anchor/style/index.less b/packages/yike-design-ui/components/anchor/style/index.less index 2073477d..e55571d7 100644 --- a/packages/yike-design-ui/components/anchor/style/index.less +++ b/packages/yike-design-ui/components/anchor/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../scrollbar/style/index.less'; .yk-anchor { position: relative; diff --git a/packages/yike-design-ui/components/avatar/style/index.less b/packages/yike-design-ui/components/avatar/style/index.less index ba0fdbfd..6a4de5a3 100644 --- a/packages/yike-design-ui/components/avatar/style/index.less +++ b/packages/yike-design-ui/components/avatar/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-avatar { display: inline-flex; justify-content: center; diff --git a/packages/yike-design-ui/components/back-top/style/index.less b/packages/yike-design-ui/components/back-top/style/index.less index 9acbd379..e4233c84 100644 --- a/packages/yike-design-ui/components/back-top/style/index.less +++ b/packages/yike-design-ui/components/back-top/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-backtop { position: fixed; z-index: 999; diff --git a/packages/yike-design-ui/components/badge/style/index.less b/packages/yike-design-ui/components/badge/style/index.less index 76f2c09b..69757b30 100644 --- a/packages/yike-design-ui/components/badge/style/index.less +++ b/packages/yike-design-ui/components/badge/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .modal { &-enter { &-from { diff --git a/packages/yike-design-ui/components/button/style/variables.less b/packages/yike-design-ui/components/button/style/variables.less index 7ffbcec4..ad5346ff 100644 --- a/packages/yike-design-ui/components/button/style/variables.less +++ b/packages/yike-design-ui/components/button/style/variables.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; // Primary // btn-[type]-color-text_[status] diff --git a/packages/yike-design-ui/components/calendar/style/index.less b/packages/yike-design-ui/components/calendar/style/index.less index a09bc442..650bbca0 100644 --- a/packages/yike-design-ui/components/calendar/style/index.less +++ b/packages/yike-design-ui/components/calendar/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-calendar { color: var(--pcolor); @@ -32,7 +32,7 @@ box-sizing: border-box; &.is-selected { border-bottom-width: 3px; - border-bottom-color: @scolor-7; + border-bottom-color: @scolor; } } td.prev, diff --git a/packages/yike-design-ui/components/checkbox/style/checkbox.less b/packages/yike-design-ui/components/checkbox/style/checkbox.less index 4c98d77f..9791c665 100644 --- a/packages/yike-design-ui/components/checkbox/style/checkbox.less +++ b/packages/yike-design-ui/components/checkbox/style/checkbox.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + .yk-checkbox { position: relative; display: inline-flex; diff --git a/packages/yike-design-ui/components/checkbox/style/index.less b/packages/yike-design-ui/components/checkbox/style/index.less index 67a1535c..ef968746 100644 --- a/packages/yike-design-ui/components/checkbox/style/index.less +++ b/packages/yike-design-ui/components/checkbox/style/index.less @@ -1,3 +1,2 @@ -@import '../../styles/color/colors.less'; @import './checkbox.less'; @import './checkbox-group.less'; diff --git a/packages/yike-design-ui/components/collapse/style/index.less b/packages/yike-design-ui/components/collapse/style/index.less index 932fc4c4..08ff6439 100644 --- a/packages/yike-design-ui/components/collapse/style/index.less +++ b/packages/yike-design-ui/components/collapse/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../styles/mixin.less'; .yk-collapse-group { diff --git a/packages/yike-design-ui/components/divider/style/index.less b/packages/yike-design-ui/components/divider/style/index.less index 5809f81a..6f43bc0e 100644 --- a/packages/yike-design-ui/components/divider/style/index.less +++ b/packages/yike-design-ui/components/divider/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/index.less'; +@import '../../styles/basis.less'; .yk-divider { --border-color: @line-color-m; --border-style: solid; diff --git a/packages/yike-design-ui/components/drawer/style/index.less b/packages/yike-design-ui/components/drawer/style/index.less index 6183b2b2..9d1bc88a 100644 --- a/packages/yike-design-ui/components/drawer/style/index.less +++ b/packages/yike-design-ui/components/drawer/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../styles/icon.less'; .yk-drawer { diff --git a/packages/yike-design-ui/components/dropdown/style/index.less b/packages/yike-design-ui/components/dropdown/style/index.less index 7580afb2..35382f46 100644 --- a/packages/yike-design-ui/components/dropdown/style/index.less +++ b/packages/yike-design-ui/components/dropdown/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../styles//mixin.less'; @import '../../tooltip/style/index.less'; .yk-dropdown { diff --git a/packages/yike-design-ui/components/empty/style/index.less b/packages/yike-design-ui/components/empty/style/index.less index 745ae052..5a63d441 100644 --- a/packages/yike-design-ui/components/empty/style/index.less +++ b/packages/yike-design-ui/components/empty/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-empty { display: flex; justify-content: center; diff --git a/packages/yike-design-ui/components/form/style/index.less b/packages/yike-design-ui/components/form/style/index.less index 65c1be93..be9b5af5 100644 --- a/packages/yike-design-ui/components/form/style/index.less +++ b/packages/yike-design-ui/components/form/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-form { display: flex; diff --git a/packages/yike-design-ui/components/icon/index.ts b/packages/yike-design-ui/components/icon/index.ts deleted file mode 100644 index 469e8599..00000000 --- a/packages/yike-design-ui/components/icon/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Icon from './src/icon.vue'; -import { withInstall } from '../utils'; - -export const YkIcon = withInstall(Icon); -export default YkIcon; diff --git a/packages/yike-design-ui/components/icon/src/icon.vue b/packages/yike-design-ui/components/icon/src/icon.vue deleted file mode 100644 index f598850e..00000000 --- a/packages/yike-design-ui/components/icon/src/icon.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - diff --git a/packages/yike-design-ui/components/icon/style/index.less b/packages/yike-design-ui/components/icon/style/index.less deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/yike-design-ui/components/icon/style/index.ts b/packages/yike-design-ui/components/icon/style/index.ts deleted file mode 100644 index d74e52ee..00000000 --- a/packages/yike-design-ui/components/icon/style/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './index.less'; diff --git a/packages/yike-design-ui/components/image/style/index.less b/packages/yike-design-ui/components/image/style/index.less index f85ccde3..97731969 100644 --- a/packages/yike-design-ui/components/image/style/index.less +++ b/packages/yike-design-ui/components/image/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../styles/mixin.less'; .yk-image { diff --git a/packages/yike-design-ui/components/input-search/style/index.less b/packages/yike-design-ui/components/input-search/style/index.less index 3b338542..eb76d07c 100644 --- a/packages/yike-design-ui/components/input-search/style/index.less +++ b/packages/yike-design-ui/components/input-search/style/index.less @@ -1,2 +1,2 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../input/style/index.less'; diff --git a/packages/yike-design-ui/components/input-tag/style/index.less b/packages/yike-design-ui/components/input-tag/style/index.less index d5708d93..d33ec423 100644 --- a/packages/yike-design-ui/components/input-tag/style/index.less +++ b/packages/yike-design-ui/components/input-tag/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../input/style/index.less'; @import '../../tag/style/index.less'; diff --git a/packages/yike-design-ui/components/input/style/index.less b/packages/yike-design-ui/components/input/style/index.less index d0c31878..d3f442bd 100644 --- a/packages/yike-design-ui/components/input/style/index.less +++ b/packages/yike-design-ui/components/input/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import './functions.less'; @import '../../spinner/style/index.less'; .yk-input { diff --git a/packages/yike-design-ui/components/link/style/index.less b/packages/yike-design-ui/components/link/style/index.less index 9f36ce95..298ca5b4 100644 --- a/packages/yike-design-ui/components/link/style/index.less +++ b/packages/yike-design-ui/components/link/style/index.less @@ -1,3 +1,5 @@ +@import '../../styles/basis.less'; + .yk-link { border-radius: @radius-s; text-decoration: underline; diff --git a/packages/yike-design-ui/components/message/style/index.less b/packages/yike-design-ui/components/message/style/index.less index bce034de..24e2188c 100644 --- a/packages/yike-design-ui/components/message/style/index.less +++ b/packages/yike-design-ui/components/message/style/index.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + .yk-message-container { position: fixed; top: @space-xl; diff --git a/packages/yike-design-ui/components/modal/style/index.less b/packages/yike-design-ui/components/modal/style/index.less index 987c0705..ffffe8f0 100644 --- a/packages/yike-design-ui/components/modal/style/index.less +++ b/packages/yike-design-ui/components/modal/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../styles/icon.less'; .yk-modal__mask { diff --git a/packages/yike-design-ui/components/notification/style/index.less b/packages/yike-design-ui/components/notification/style/index.less index fe3b24c6..41fecfb6 100644 --- a/packages/yike-design-ui/components/notification/style/index.less +++ b/packages/yike-design-ui/components/notification/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../styles/icon.less'; .yk-notification-container { position: fixed; diff --git a/packages/yike-design-ui/components/pagination/style/index.less b/packages/yike-design-ui/components/pagination/style/index.less index bd81ca79..d749d481 100644 --- a/packages/yike-design-ui/components/pagination/style/index.less +++ b/packages/yike-design-ui/components/pagination/style/index.less @@ -1,5 +1,5 @@ +@import '../../styles/basis.less'; @import './variables.less'; -@import '../../styles/color/colors.less'; .pagination-disabled() { cursor: not-allowed; diff --git a/packages/yike-design-ui/components/popover/style/index.less b/packages/yike-design-ui/components/popover/style/index.less index 56b2b849..29eb66c2 100644 --- a/packages/yike-design-ui/components/popover/style/index.less +++ b/packages/yike-design-ui/components/popover/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../tooltip/style/index.less'; .yk-popover { diff --git a/packages/yike-design-ui/components/progress/style/index.less b/packages/yike-design-ui/components/progress/style/index.less index a80de504..ce5d76c1 100644 --- a/packages/yike-design-ui/components/progress/style/index.less +++ b/packages/yike-design-ui/components/progress/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-progress { &-line-wrapper { display: flex; diff --git a/packages/yike-design-ui/components/radio/style/button-shape.less b/packages/yike-design-ui/components/radio/style/button-shape.less index ddd2b426..0cb20054 100644 --- a/packages/yike-design-ui/components/radio/style/button-shape.less +++ b/packages/yike-design-ui/components/radio/style/button-shape.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-radio--button { cursor: pointer; input { diff --git a/packages/yike-design-ui/components/radio/style/radio-group.less b/packages/yike-design-ui/components/radio/style/radio-group.less index ce6fd76d..cef2fbb4 100644 --- a/packages/yike-design-ui/components/radio/style/radio-group.less +++ b/packages/yike-design-ui/components/radio/style/radio-group.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-radio-group { display: flex; flex-direction: row; diff --git a/packages/yike-design-ui/components/radio/style/radio-shape.less b/packages/yike-design-ui/components/radio/style/radio-shape.less index c06e3e41..6813eb88 100644 --- a/packages/yike-design-ui/components/radio/style/radio-shape.less +++ b/packages/yike-design-ui/components/radio/style/radio-shape.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + .yk-radio--radio { position: relative; display: flex; diff --git a/packages/yike-design-ui/components/rate/style/index.less b/packages/yike-design-ui/components/rate/style/index.less index e22c24a8..1fe09f25 100644 --- a/packages/yike-design-ui/components/rate/style/index.less +++ b/packages/yike-design-ui/components/rate/style/index.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + @sizes: { s: 14px; m: 18px; diff --git a/packages/yike-design-ui/components/scrollbar/style/index.less b/packages/yike-design-ui/components/scrollbar/style/index.less index 485e4b30..ce78e077 100644 --- a/packages/yike-design-ui/components/scrollbar/style/index.less +++ b/packages/yike-design-ui/components/scrollbar/style/index.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + .yk-scrollbar { position: relative; overflow: hidden; diff --git a/packages/yike-design-ui/components/skeleton/style/index.less b/packages/yike-design-ui/components/skeleton/style/index.less index 7646fd3c..053b22f6 100644 --- a/packages/yike-design-ui/components/skeleton/style/index.less +++ b/packages/yike-design-ui/components/skeleton/style/index.less @@ -1,3 +1,5 @@ +@import '../../styles/basis.less'; + .yk-skeleton { position: relative; display: inline-block; diff --git a/packages/yike-design-ui/components/slider/style/variables.less b/packages/yike-design-ui/components/slider/style/variables.less index 1b65e72b..c01a568b 100644 --- a/packages/yike-design-ui/components/slider/style/variables.less +++ b/packages/yike-design-ui/components/slider/style/variables.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; +@import '../../styles/colors.less'; @btn-primary-color-text: #fff; @btn-primary-color-text_primary: #fff; diff --git a/packages/yike-design-ui/components/space/style/index.less b/packages/yike-design-ui/components/space/style/index.less index 4b78b1de..469b1b89 100644 --- a/packages/yike-design-ui/components/space/style/index.less +++ b/packages/yike-design-ui/components/space/style/index.less @@ -1,9 +1,10 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-space { display: flex; - gap: @space-l; + width: 100%; transition: all @animatb ease-in-out; + gap: @space-l; &.inline { display: inline-flex; diff --git a/packages/yike-design-ui/components/styles/basis.less b/packages/yike-design-ui/components/styles/basis.less new file mode 100644 index 00000000..dfc23fc6 --- /dev/null +++ b/packages/yike-design-ui/components/styles/basis.less @@ -0,0 +1,167 @@ +//基础颜色 +// -------- Functional color light ----------- +@pcolor-light: #2b5aed; // 全局主色 +@lcolor-light: #1890ff; // 链接色 +@scolor-light: #1fb4a2; // 成功色 +@wcolor-light: #ffaa1a; // 警告色 +@ecolor-light: #fa5247; // 错误色 + +// -------- Functional color dark ----------- +@pcolor-dark: #3575f6; // 全局主色 +@lcolor-dark: #308ce1; // 链接色 +@scolor-dark: #19ad78; // 成功色 +@wcolor-dark: #f6a224; // 警告色 +@ecolor-dark: #df4d43; // 错误色 + +//----中性色---- +@gray: #1e2025; +@white: #ffffff; + +//function-color +@pcolor: var(--pcolor); // 全局主色 +@lcolor: var(--lcolor); // 链接色 +@scolor: var(--scolor); // 成功色 +@wcolor: var(--wcolor); // 警告色 +@ecolor: var(--ecolor); // 错误色 + +//bg-color +@bg-color-l: var(--bgColor1); +@bg-color-m: var(--bgColor2); +@bg-color-s: var(--bgColor3); +@bg-color-ss: var(--bgColor4); + +//font-color +@font-color-l: @gray-10; +@font-color-m: @gray-8; +@font-color-s: @gray-6; +@font-color-ss: @gray-5; + +//line-color +@line-color-s: @gray-1; +@line-color-m: @gray-3; +@line-color-l: @gray-4; + +//special color +@light: var(--bgColor5); +@dark: var(--bgColor6); + +// Animation +@animats: 0.3s; // Modal +@animatb: 0.2s; +@animatf: 0.1s; // Tooltip + +//radius +@radius-xl: 16px; +@radius-l: 12px; +@radius-m: 8px; +@radius-s: 4px; +@radius-r: 800px; + +//背景投影 +@shadow-s: 0 6px 6px -2px rgba(0, 0, 0, 0.12); +@shadow-m: 0 4px 16px 0 rgba(0, 0, 0, 0.16); +@shadow-l: 0 4px 48px 0 rgba(0, 0, 0, 0.12); + +//间距space +@space-ss: 4px; +@space-s: 8px; +@space-m: 12px; +@space-l: 16px; +@space-xl: 24px; + +//font-size +@size-ss: 12px; // 小号 +@size-s: 14px; // 主字号 +@size-m: 16px; // 大一号 +@size-l: 18px; // 大二号 +@size-xl: 24px; // 特大号 + +.font-ss() { + font-size: @size-ss; + line-height: 1.66; +} +.font-s() { + font-size: @size-s; + line-height: 1.57; +} +.font-m() { + font-size: @size-m; + line-height: 1.5; +} +.font-l() { + font-size: @size-l; + line-height: 1.4; +} +.font-xl() { + font-size: @size-xl; + line-height: 1.34; +} +.font-32() { + font-size: 32px; + line-height: 1.28; +} +.font-40() { + font-size: 40px; + line-height: 1.24; +} + +//mix-color +//主色渐变 +@pcolor-1: var(--pcolor1); +@pcolor-2: var(--pcolor2); +@pcolor-3: var(--pcolor3); +@pcolor-4: var(--pcolor4); +@pcolor-5: var(--pcolor5); +@pcolor-6: var(--pcolor6); +@pcolor-7: @pcolor; +@pcolor-8: var(--pcolor8); +@pcolor-9: var(--pcolor9); +@pcolor-10: var(--pcolor10); + +//成功色渐变 +@scolor-1: var(--scolor1); +@scolor-2: var(--scolor2); +@scolor-3: var(--scolor3); +@scolor-4: var(--scolor4); +@scolor-5: var(--scolor5); +@scolor-6: var(--scolor6); +@scolor-7: @scolor; +@scolor-8: var(--scolor8); +@scolor-9: var(--scolor9); +@scolor-10: var(--scolor10); + +//警告色渐变 +@wcolor-1: var(--wcolor1); +@wcolor-2: var(--wcolor2); +@wcolor-3: var(--wcolor3); +@wcolor-4: var(--wcolor4); +@wcolor-5: var(--wcolor5); +@wcolor-6: var(--wcolor6); +@wcolor-7: @wcolor; +@wcolor-8: var(--wcolor8); +@wcolor-9: var(--wcolor9); +@wcolor-10: var(--wcolor10); + +//错误色渐变 +@ecolor-1: var(--ecolor1); +@ecolor-2: var(--ecolor2); +@ecolor-3: var(--ecolor3); +@ecolor-4: var(--ecolor4); +@ecolor-5: var(--ecolor5); +@ecolor-6: var(--ecolor6); +@ecolor-7: @ecolor; +@ecolor-8: var(--ecolor8); +@ecolor-9: var(--ecolor9); +@ecolor-10: var(--ecolor10); + +// //中性色 +@gray-1: var(--gray1); +@gray-2: var(--gray2); +@gray-3: var(--gray3); +@gray-4: var(--gray4); +@gray-5: var(--gray5); +@gray-6: var(--gray6); +@gray-7: var(--gray7); +@gray-8: var(--gray8); +@gray-9: var(--gray9); +@gray-10: var(--gray); diff --git a/packages/yike-design-ui/components/styles/color/color.js b/packages/yike-design-ui/components/styles/color/color.js deleted file mode 100644 index 26ec0a5a..00000000 --- a/packages/yike-design-ui/components/styles/color/color.js +++ /dev/null @@ -1,23 +0,0 @@ -module.exports = { - install: function (_, __, functions) { - functions.add('palette', (hex) => { - let result - if (hex.value.length === 4) { - result = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(hex.value) - // 将分解出的分量转换为十进制数，并将它们扩展为 6 位十六进制字符串 - let r = parseInt(result[1] + result[1], 16) - let g = parseInt(result[2] + result[2], 16) - let b = parseInt(result[3] + result[3], 16) - // return "rgba(" + r + ", " + g + ", " + b + ", e)"; - return `${r},${g},${b}` - } else { - result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.value) - // 将分解出的分量转换为十进制数 - let r = parseInt(result[1], 16) - let g = parseInt(result[2], 16) - let b = parseInt(result[3], 16) - return `${r},${g},${b}` - } - }) - }, -} diff --git a/packages/yike-design-ui/components/styles/color/colors.less b/packages/yike-design-ui/components/styles/color/colors.less deleted file mode 100644 index e900d89d..00000000 --- a/packages/yike-design-ui/components/styles/color/colors.less +++ /dev/null @@ -1,168 +0,0 @@ -@plugin './color.js'; - -//基础颜色 -// -------- Functional color light ----------- -@pcolor-light: #2b5aed; // 全局主色 -@lcolor-light: #1890ff; // 链接色 -@scolor-light: #1fb4a2; // 成功色 -@wcolor-light: #ffaa1a; // 警告色 -@ecolor-light: #fa5247; // 错误色 - -// -------- Functional color dark ----------- -@pcolor-dark: #3575f6; // 全局主色 -@lcolor-dark: #308ce1; // 链接色 -@scolor-dark: #19ad78; // 成功色 -@wcolor-dark: #f6a224; // 警告色 -@ecolor-dark: #df4d43; // 错误色 - -//----中性色---- -@gray: #1e2025; -@white: #ffffff; - -//主色渐变 -@pcolor-1: rgba(var(--pcolor), 0.08); -@pcolor-2: rgba(var(--pcolor), 0.12); -@pcolor-3: rgba(var(--pcolor), 0.16); -@pcolor-4: rgba(var(--pcolor), 0.24); -@pcolor-5: rgba(var(--pcolor), 0.32); -@pcolor-6: color-mix(in srgb, @pcolor, #fff 12%); -@pcolor-7: @pcolor; -@pcolor-8: color-mix(in srgb, @pcolor, #000 8%); -@pcolor-9: color-mix(in srgb, @pcolor, #000 16%); -@pcolor-10: color-mix(in srgb, @pcolor, #000 32%); - -// //成功色 -@scolor-1: rgba(var(--scolor), 0.08); -@scolor-2: rgba(var(--scolor), 0.12); -@scolor-3: rgba(var(--scolor), 0.16); -@scolor-4: rgba(var(--scolor), 0.24); -@scolor-5: rgba(var(--scolor), 0.32); -@scolor-6: color-mix(in srgb, @scolor, #fff 12%); -@scolor-7: @scolor; -@scolor-8: color-mix(in srgb, @scolor, #000 8%); -@scolor-9: color-mix(in srgb, @scolor, #000 16%); -@scolor-10: color-mix(in srgb, @scolor, #000 32%); - -// //警告色 -@wcolor-1: rgba(var(--wcolor), 0.08); -@wcolor-2: rgba(var(--wcolor), 0.12); -@wcolor-3: rgba(var(--wcolor), 0.16); -@wcolor-4: rgba(var(--wcolor), 0.24); -@wcolor-5: rgba(var(--wcolor), 0.32); -@wcolor-6: color-mix(in srgb, @wcolor, #fff 12%); -@wcolor-7: @wcolor; -@wcolor-8: color-mix(in srgb, @wcolor, #000 8%); -@wcolor-9: color-mix(in srgb, @wcolor, #000 16%); -@wcolor-10: color-mix(in srgb, @wcolor, #000 32%); - -// //错误色 -@ecolor-1: rgba(var(--ecolor), 0.08); -@ecolor-2: rgba(var(--ecolor), 0.12); -@ecolor-3: rgba(var(--ecolor), 0.16); -@ecolor-4: rgba(var(--ecolor), 0.24); -@ecolor-5: rgba(var(--ecolor), 0.32); -@ecolor-6: color-mix(in srgb, @ecolor, #fff 12%); -@ecolor-7: @ecolor; -@ecolor-8: color-mix(in srgb, @ecolor, #000 8%); -@ecolor-9: color-mix(in srgb, @ecolor, #000 16%); -@ecolor-10: color-mix(in srgb, @ecolor, #000 32%); - -// //中性色 -@gray-1: rgba(var(--gray), 0.08); -@gray-2: rgba(var(--gray), 0.12); -@gray-3: rgba(var(--gray), 0.16); -@gray-4: rgba(var(--gray), 0.24); -@gray-5: rgba(var(--gray), 0.32); -@gray-6: rgba(var(--gray), 0.48); -@gray-7: rgba(var(--gray), 0.64); -@gray-8: rgba(var(--gray), 0.72); -@gray-9: rgba(var(--gray), 0.88); -@gray-10: rgb(var(--gray)); - -//function-color -@pcolor: rgb(var(--pcolor)); // 全局主色 -@lcolor: rgb(var(--lcolor)); // 链接色 -@scolor: rgb(var(--scolor)); // 成功色 -@wcolor: rgb(var(--wcolor)); // 警告色 -@ecolor: rgb(var(--ecolor)); // 错误色 - -//font-color -@font-color-l: @gray-10; -@font-color-m: @gray-8; -@font-color-s: @gray-6; -@font-color-ss: @gray-5; - -//bg-color -@bg-color-l: var(--bgColor1); -@bg-color-m: var(--bgColor2); -@bg-color-s: var(--bgColor3); -@bg-color-ss: var(--bgColor4); - -//line-color -@line-color-s: @gray-1; -@line-color-m: @gray-3; -@line-color-l: @gray-4; - -//special color -@light: var(--bgColor5); -@dark: var(--bgColor6); - -// Animation -@animats: 0.3s; // Modal -@animatb: 0.2s; -@animatf: 0.1s; // Tooltip - -//radius -@radius-xl: 16px; -@radius-l: 12px; -@radius-m: 8px; -@radius-s: 4px; -@radius-r: 800px; - -//背景投影 -@shadow-s: 0 6px 6px -2px rgba(0, 0, 0, 0.12); -@shadow-m: 0 4px 16px 0 rgba(0, 0, 0, 0.16); -@shadow-l: 0 4px 48px 0 rgba(0, 0, 0, 0.12); - -//间距space -@space-ss: 4px; -@space-s: 8px; -@space-m: 12px; -@space-l: 16px; -@space-xl: 24px; - -//font-size -@size-ss: 12px; // 小号 -@size-s: 14px; // 主字号 -@size-m: 16px; // 大一号 -@size-l: 18px; // 大二号 -@size-xl: 24px; // 特大号 - -.font-ss() { - font-size: @size-ss; - line-height: 1.66; -} -.font-s() { - font-size: @size-s; - line-height: 1.57; -} -.font-m() { - font-size: @size-m; - line-height: 1.5; -} -.font-l() { - font-size: @size-l; - line-height: 1.4; -} -.font-xl() { - font-size: @size-xl; - line-height: 1.34; -} -.font-32() { - font-size: 32px; - line-height: 1.28; -} -.font-40() { - font-size: 40px; - line-height: 1.24; -} diff --git a/packages/yike-design-ui/components/styles/index.less b/packages/yike-design-ui/components/styles/index.less index 1df40731..d58de774 100644 --- a/packages/yike-design-ui/components/styles/index.less +++ b/packages/yike-design-ui/components/styles/index.less @@ -1,4 +1,4 @@ -@import './color/colors.less'; +@import './basis.less'; @import './mixin.less'; @import './theme.less'; @import './animate.less'; diff --git a/packages/yike-design-ui/components/styles/normalize.less b/packages/yike-design-ui/components/styles/normalize.less index 7b5c7be2..54125588 100644 --- a/packages/yike-design-ui/components/styles/normalize.less +++ b/packages/yike-design-ui/components/styles/normalize.less @@ -1,4 +1,4 @@ -@import './color/colors.less'; +@import './basis.less'; *, *::before, diff --git a/packages/yike-design-ui/components/styles/theme.less b/packages/yike-design-ui/components/styles/theme.less index 57220f44..fae3e598 100644 --- a/packages/yike-design-ui/components/styles/theme.less +++ b/packages/yike-design-ui/components/styles/theme.less @@ -1,24 +1,69 @@ -@import './color/colors.less'; +@import './basis.less'; //混合出背景色 @bg-dark-color-1: @gray; -@bg-dark-color-2: color-mix(in srgb, @gray, #fff 3.2%); -@bg-dark-color-3: color-mix(in srgb, @gray, #fff 6.4%); -@bg-dark-color-4: color-mix(in srgb, @gray, #fff 8.8%); -@bg-light-color-1: #fff; -@bg-light-color-2: color-mix(in srgb, #fff, @gray 3.6%); -@bg-light-color-3: color-mix(in srgb, #fff, @gray 6.8%); -@bg-light-color-4: color-mix(in srgb, #fff, @gray 9.4%); +@bg-dark-color-2: mix(@gray, #ffffff, 96.8%); +@bg-dark-color-3: mix(@gray, #ffffff, 93.6%); +@bg-dark-color-4: mix(@gray, #ffffff, 91.2%); +@bg-light-color-1: @white; +@bg-light-color-2: mix(@white, #000000, 96.4%); +@bg-light-color-3: mix(@white, #000000, 93.6%); +@bg-light-color-4: mix(@white, #000000, 91.8%); //默认 :root { // -------- Functional color light ----------- - --pcolor: palette(@pcolor-light); // 全局主色 - --lcolor: palette(@lcolor-light); // 链接色 - --scolor: palette(@scolor-light); // 成功色 - --wcolor: palette(@wcolor-light); // 警告色 - --ecolor: palette(@ecolor-light); // 错误色 - --gray: palette(@gray); //中性色 + --pcolor: @pcolor-light; // 全局主色 + --pcolor1: rgba(@pcolor-light, 0.08); + --pcolor2: rgba(@pcolor-light, 0.12); + --pcolor3: rgba(@pcolor-light, 0.16); + --pcolor4: rgba(@pcolor-light, 0.24); + --pcolor5: rgba(@pcolor-light, 0.32); + --pcolor6: mix(@pcolor-light, #ffffff, 88%); + --pcolor8: mix(@pcolor-light, #000000, 92%); + --pcolor9: mix(@pcolor-light, #000000, 84%); + --pcolor10: mix(@pcolor-light, #000000, 68%); + --scolor: @scolor-light; // 成功色 + --scolor1: rgba(@scolor-light, 0.08); + --scolor2: rgba(@scolor-light, 0.12); + --scolor3: rgba(@scolor-light, 0.16); + --scolor4: rgba(@scolor-light, 0.24); + --scolor5: rgba(@scolor-light, 0.32); + --scolor6: mix(@scolor-light, #ffffff, 88%); + --scolor8: mix(@scolor-light, #000000, 92%); + --scolor9: mix(@scolor-light, #000000, 84%); + --scolor10: mix(@scolor-light, #000000, 68%); + --wcolor: @wcolor-light; // 警告色 + --wcolor1: rgba(@wcolor-light, 0.08); + --wcolor2: rgba(@wcolor-light, 0.12); + --wcolor3: rgba(@wcolor-light, 0.16); + --wcolor4: rgba(@wcolor-light, 0.24); + --wcolor5: rgba(@wcolor-light, 0.32); + --wcolor6: mix(@wcolor-light, #ffffff, 88%); + --wcolor8: mix(@wcolor-light, #000000, 92%); + --wcolor9: mix(@wcolor-light, #000000, 84%); + --wcolor10: mix(@wcolor-light, #000000, 68%); + --ecolor: @ecolor-light; // 错误色 + --ecolor1: rgba(@ecolor-light, 0.08); + --ecolor2: rgba(@ecolor-light, 0.12); + --ecolor3: rgba(@ecolor-light, 0.16); + --ecolor4: rgba(@ecolor-light, 0.24); + --ecolor5: rgba(@ecolor-light, 0.32); + --ecolor6: mix(@ecolor-light, #ffffff, 88%); + --ecolor8: mix(@ecolor-light, #000000, 92%); + --ecolor9: mix(@ecolor-light, #000000, 84%); + --ecolor10: mix(@ecolor-light, #000000, 68%); + --lcolor: @lcolor-light; // 链接色 + --gray: @gray; //中性色 + --gray1: rgba(@gray, 0.08); + --gray2: rgba(@gray, 0.12); + --gray3: rgba(@gray, 0.16); + --gray4: rgba(@gray, 0.24); + --gray5: rgba(@gray, 0.32); + --gray6: rgba(@gray, 0.48); + --gray7: rgba(@gray, 0.64); + --gray8: rgba(@gray, 0.72); + --gray9: rgba(@gray, 0.88); //----背景色---- --bgColor1: @bg-light-color-1; @@ -31,13 +76,58 @@ // 暗色主题 [data-theme='dark'] { - // -------- Functional color light ----------- - --pcolor: palette(@pcolor-dark); // 全局主色 - --lcolor: palette(@lcolor-dark); // 链接色 - --scolor: palette(@scolor-dark); // 成功色 - --wcolor: palette(@wcolor-dark); // 警告色 - --ecolor: palette(@ecolor-dark); // 错误色 - --gray: palette(@white); //中性色 + // -------- Functional color dark ----------- + --pcolor: @pcolor-dark; // 全局主色 + --pcolor1: rgba(@pcolor-dark, 0.08); + --pcolor2: rgba(@pcolor-dark, 0.12); + --pcolor3: rgba(@pcolor-dark, 0.16); + --pcolor4: rgba(@pcolor-dark, 0.24); + --pcolor5: rgba(@pcolor-dark, 0.32); + --pcolor6: mix(@pcolor-dark, #ffffff, 88%); + --pcolor8: mix(@pcolor-dark, #000000, 92%); + --pcolor9: mix(@pcolor-dark, #000000, 84%); + --pcolor10: mix(@pcolor-dark, #000000, 68%); + --scolor: @scolor-dark; // 成功色 + --scolor1: rgba(@scolor-dark, 0.08); + --scolor2: rgba(@scolor-dark, 0.12); + --scolor3: rgba(@scolor-dark, 0.16); + --scolor4: rgba(@scolor-dark, 0.24); + --scolor5: rgba(@scolor-dark, 0.32); + --scolor6: mix(@scolor-dark, #ffffff, 88%); + --scolor8: mix(@scolor-dark, #000000, 92%); + --scolor9: mix(@scolor-dark, #000000, 84%); + --scolor10: mix(@scolor-dark, #000000, 68%); + --wcolor: @wcolor-dark; // 警告色 + --wcolor1: rgba(@wcolor-dark, 0.08); + --wcolor2: rgba(@wcolor-dark, 0.12); + --wcolor3: rgba(@wcolor-dark, 0.16); + --wcolor4: rgba(@wcolor-dark, 0.24); + --wcolor5: rgba(@wcolor-dark, 0.32); + --wcolor6: mix(@wcolor-dark, #ffffff, 88%); + --wcolor8: mix(@wcolor-dark, #000000, 92%); + --wcolor9: mix(@wcolor-dark, #000000, 84%); + --wcolor10: mix(@wcolor-dark, #000000, 68%); + --ecolor: @ecolor-dark; // 错误色 + --ecolor1: rgba(@ecolor-dark, 0.08); + --ecolor2: rgba(@ecolor-dark, 0.12); + --ecolor3: rgba(@ecolor-dark, 0.16); + --ecolor4: rgba(@ecolor-dark, 0.24); + --ecolor5: rgba(@ecolor-dark, 0.32); + --ecolor6: mix(@ecolor-dark, #ffffff, 88%); + --ecolor8: mix(@ecolor-dark, #000000, 92%); + --ecolor9: mix(@ecolor-dark, #000000, 84%); + --ecolor10: mix(@ecolor-dark, #000000, 68%); + --lcolor: @lcolor-dark; // 链接色 + --gray: @white; //中性色 + --gray1: rgba(@white, 0.08); + --gray2: rgba(@white, 0.12); + --gray3: rgba(@white, 0.16); + --gray4: rgba(@white, 0.24); + --gray5: rgba(@white, 0.32); + --gray6: rgba(@white, 0.48); + --gray7: rgba(@white, 0.64); + --gray8: rgba(@white, 0.72); + --gray9: rgba(@white, 0.88); //----背景色---- --bgColor1: @bg-dark-color-1; diff --git a/packages/yike-design-ui/components/switch/style/index.less b/packages/yike-design-ui/components/switch/style/index.less index eb88905d..9fe5acea 100644 --- a/packages/yike-design-ui/components/switch/style/index.less +++ b/packages/yike-design-ui/components/switch/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-switch { position: relative; overflow: hidden; diff --git a/packages/yike-design-ui/components/table/style/index.less b/packages/yike-design-ui/components/table/style/index.less index 7abe98af..bdbf4d25 100644 --- a/packages/yike-design-ui/components/table/style/index.less +++ b/packages/yike-design-ui/components/table/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-table { overflow-x: auto; diff --git a/packages/yike-design-ui/components/tabs/style/index.less b/packages/yike-design-ui/components/tabs/style/index.less index f4267874..0e69c2cb 100644 --- a/packages/yike-design-ui/components/tabs/style/index.less +++ b/packages/yike-design-ui/components/tabs/style/index.less @@ -1,3 +1,5 @@ +@import '../../styles/basis.less'; + .yk-tabs { @base-height: 40px; overflow: hidden; diff --git a/packages/yike-design-ui/components/tag/style/index.less b/packages/yike-design-ui/components/tag/style/index.less index 8c6c34c5..ef42b6d1 100644 --- a/packages/yike-design-ui/components/tag/style/index.less +++ b/packages/yike-design-ui/components/tag/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-tag { @padding-h-small: 1px; diff --git a/packages/yike-design-ui/components/text-area/style/index.less b/packages/yike-design-ui/components/text-area/style/index.less index 9e9fd4e0..e196fbee 100644 --- a/packages/yike-design-ui/components/text-area/style/index.less +++ b/packages/yike-design-ui/components/text-area/style/index.less @@ -1,3 +1,5 @@ +@import '../../styles/basis.less'; + .yk-text-area { position: relative; width: 100%; diff --git a/packages/yike-design-ui/components/timeline/style/timeline-item.less b/packages/yike-design-ui/components/timeline/style/timeline-item.less index 9cd2df0b..46354c97 100644 --- a/packages/yike-design-ui/components/timeline/style/timeline-item.less +++ b/packages/yike-design-ui/components/timeline/style/timeline-item.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + // 默认状态TimelineItem样式 .yk-timeline__item { // 设置排布相关 diff --git a/packages/yike-design-ui/components/tooltip/style/index.less b/packages/yike-design-ui/components/tooltip/style/index.less index a0267fb1..2a4812b4 100644 --- a/packages/yike-design-ui/components/tooltip/style/index.less +++ b/packages/yike-design-ui/components/tooltip/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-tooltip { --tooltip-theme-bg-color: @dark; diff --git a/packages/yike-design-ui/components/tree-select/style/index.less b/packages/yike-design-ui/components/tree-select/style/index.less index 207d40cb..b22e35f4 100644 --- a/packages/yike-design-ui/components/tree-select/style/index.less +++ b/packages/yike-design-ui/components/tree-select/style/index.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + .yk-tree-select__main-container { position: relative; .yk-tree-select__container-box { diff --git a/packages/yike-design-ui/components/tree-select/style/select-view.less b/packages/yike-design-ui/components/tree-select/style/select-view.less index 620c0745..c56fb7a3 100644 --- a/packages/yike-design-ui/components/tree-select/style/select-view.less +++ b/packages/yike-design-ui/components/tree-select/style/select-view.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; +@import '../../styles/colors.less'; .yk-select-view { position: relative; diff --git a/packages/yike-design-ui/components/tree-select/style/tree-view.less b/packages/yike-design-ui/components/tree-select/style/tree-view.less index fbf0042d..36367a72 100644 --- a/packages/yike-design-ui/components/tree-select/style/tree-view.less +++ b/packages/yike-design-ui/components/tree-select/style/tree-view.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-tree-container { // height: 100%; diff --git a/packages/yike-design-ui/components/tree/style/tree-node.less b/packages/yike-design-ui/components/tree/style/tree-node.less index 5284cfd0..e3ff0620 100644 --- a/packages/yike-design-ui/components/tree/style/tree-node.less +++ b/packages/yike-design-ui/components/tree/style/tree-node.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-tree-node { display: flex; diff --git a/packages/yike-design-ui/components/typography/style/index.less b/packages/yike-design-ui/components/typography/style/index.less index 843fe6e9..2ad5f812 100644 --- a/packages/yike-design-ui/components/typography/style/index.less +++ b/packages/yike-design-ui/components/typography/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; .yk-title, .yk-text { diff --git a/packages/yike-design-ui/components/upload/style/crop.less b/packages/yike-design-ui/components/upload/style/crop.less index f519b446..f372cfd8 100644 --- a/packages/yike-design-ui/components/upload/style/crop.less +++ b/packages/yike-design-ui/components/upload/style/crop.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import '../../slider/style/index.less'; .yk-image-crop { display: flex; diff --git a/packages/yike-design-ui/components/upload/style/draggle.less b/packages/yike-design-ui/components/upload/style/draggle.less index 944c2053..7fcca6a1 100644 --- a/packages/yike-design-ui/components/upload/style/draggle.less +++ b/packages/yike-design-ui/components/upload/style/draggle.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + .yk-upload-draggle { display: flex; justify-content: flex-start; diff --git a/packages/yike-design-ui/components/upload/style/file-list.less b/packages/yike-design-ui/components/upload/style/file-list.less index b0d3de27..be5682b9 100644 --- a/packages/yike-design-ui/components/upload/style/file-list.less +++ b/packages/yike-design-ui/components/upload/style/file-list.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + .yk-upload-file { display: flex; justify-content: space-between; diff --git a/packages/yike-design-ui/components/upload/style/index.less b/packages/yike-design-ui/components/upload/style/index.less index c04e7da1..0e821d26 100644 --- a/packages/yike-design-ui/components/upload/style/index.less +++ b/packages/yike-design-ui/components/upload/style/index.less @@ -1,4 +1,4 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; @import './draggle.less'; @import './file-list.less'; @import './picture-list.less'; diff --git a/packages/yike-design-ui/components/upload/style/picture-list.less b/packages/yike-design-ui/components/upload/style/picture-list.less index 53d3f4f9..d2bd4282 100644 --- a/packages/yike-design-ui/components/upload/style/picture-list.less +++ b/packages/yike-design-ui/components/upload/style/picture-list.less @@ -1,4 +1,5 @@ -@import '../../styles/color/colors.less'; +@import '../../styles/basis.less'; + .yk-upload-picture { overflow: hidden; width: 80px; diff --git a/packages/yike-design-ui/index.less b/packages/yike-design-ui/index.less index 1ecec981..dbcdd109 100644 --- a/packages/yike-design-ui/index.less +++ b/packages/yike-design-ui/index.less @@ -14,7 +14,6 @@ @import 'components/dropdown/style/index.less'; @import 'components/empty/style/index.less'; @import 'components/form/style/index.less'; -@import 'components/icon/style/index.less'; @import 'components/image/style/index.less'; @import 'components/input/style/index.less'; @import 'components/input-number/style/index.less'; diff --git a/packages/yike-design-ui/index.ts b/packages/yike-design-ui/index.ts index 3be928b7..e2c19095 100644 --- a/packages/yike-design-ui/index.ts +++ b/packages/yike-design-ui/index.ts @@ -33,7 +33,6 @@ import YkLink from './components/link'; import YkAlert from './components/alert'; import YkButton from './components/button'; import YkTheme from './components/theme'; -import YkIcon from './components/icon'; import { YkAvatar, YkAvatarGroup } from './components/avatar'; import YkSpace from './components/space'; import { YkTimeline, YkTimelineItem } from './components/timeline'; @@ -98,7 +97,6 @@ const components: { YkAlert, YkButton, YkTheme, - YkIcon, YkAvatar, YkAvatarGroup, YkSpace, @@ -160,7 +158,6 @@ export { YkAlert, YkButton, YkTheme, - YkIcon, YkParagraph, YkAvatar, YkAvatarGroup, From 111b9624a2b2fc3f11c4db53e27bbb7083ca8c9c Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sun, 24 Mar 2024 15:49:00 +0800 Subject: [PATCH 11/18] =?UTF-8?q?fix(styles):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E6=B7=B7=E5=90=88=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/yike-design-ui/components/space/style/index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/yike-design-ui/components/space/style/index.less b/packages/yike-design-ui/components/space/style/index.less index 469b1b89..b8711326 100644 --- a/packages/yike-design-ui/components/space/style/index.less +++ b/packages/yike-design-ui/components/space/style/index.less @@ -2,7 +2,6 @@ .yk-space { display: flex; - width: 100%; transition: all @animatb ease-in-out; gap: @space-l; From 02bca5e8b30bf72638698c59851ec1539e314ae6 Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sun, 24 Mar 2024 16:58:03 +0800 Subject: [PATCH 12/18] =?UTF-8?q?fix(table):=20=E4=BC=98=E5=8C=96=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/yike-design-ui/components/table/style/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/yike-design-ui/components/table/style/index.less b/packages/yike-design-ui/components/table/style/index.less index bdbf4d25..66039fed 100644 --- a/packages/yike-design-ui/components/table/style/index.less +++ b/packages/yike-design-ui/components/table/style/index.less @@ -5,7 +5,7 @@ > table { position: relative; overflow: hidden; - // width: 100%; + width: 100%; max-width: 100%; height: fit-content; box-sizing: border-box; From 9722a20ae3f64b9880858d63c9c40f45320e983f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=96=E8=BF=B9?= Date: Sun, 24 Mar 2024 20:51:23 +0800 Subject: [PATCH 13/18] docs(started): modify start code style --- packages/yike-design-demo/src/views/develop/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/yike-design-demo/src/views/develop/getting-started.md b/packages/yike-design-demo/src/views/develop/getting-started.md index 95c7b626..779beb95 100644 --- a/packages/yike-design-demo/src/views/develop/getting-started.md +++ b/packages/yike-design-demo/src/views/develop/getting-started.md @@ -2,7 +2,7 @@ ### 安装方式 -``` +```ts npm install --save-dev @yike-design/ui ``` From a880f3da423e91771153349f9666f70dd8bcd342 Mon Sep 17 00:00:00 2001 From: yike <1334785356@qq.com> Date: Sun, 24 Mar 2024 23:41:24 +0800 Subject: [PATCH 14/18] =?UTF-8?q?fix(table):=20=E7=AE=80=E5=8D=95=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=86=85=E5=AE=B9=E6=8F=92=E6=A7=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/examples/table/doc.md | 9 +++- .../src/examples/table/table-tbody.vue | 43 +++++++++++++++++++ .../components/table/src/column.ts | 2 +- .../components/table/src/table.vue | 3 +- .../components/table/style/index.less | 10 ++++- 5 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 packages/yike-design-demo/src/examples/table/table-tbody.vue diff --git a/packages/yike-design-demo/src/examples/table/doc.md b/packages/yike-design-demo/src/examples/table/doc.md index 5eb7a346..76e26c7f 100644 --- a/packages/yike-design-demo/src/examples/table/doc.md +++ b/packages/yike-design-demo/src/examples/table/doc.md @@ -24,6 +24,12 @@ ::: +:::snippet +自定义内容 +通过设置 slot 来自定义内容。 + +::: + ### API #### Table 属性 @@ -50,9 +56,10 @@ | formatter | 用来格式化内容 | function(row, column, cellValue, index) | — | | align | 对齐方式 | left / center / right | left | -#### Table-column 插槽 +#### Table 插槽 | 参数 | 描述 | | ------- | -------------------------------------------------- | | default | 自定义列的内容 作用域参数为 { row, column, index } | | header | 自定义表头的内容， 作用域参数为 { column, index } | +| tbody | 自定义表的内容 | diff --git a/packages/yike-design-demo/src/examples/table/table-tbody.vue b/packages/yike-design-demo/src/examples/table/table-tbody.vue new file mode 100644 index 00000000..c6be672a --- /dev/null +++ b/packages/yike-design-demo/src/examples/table/table-tbody.vue @@ -0,0 +1,43 @@ + + diff --git a/packages/yike-design-ui/components/table/src/column.ts b/packages/yike-design-ui/components/table/src/column.ts index c209d2b1..baa35c93 100644 --- a/packages/yike-design-ui/components/table/src/column.ts +++ b/packages/yike-design-ui/components/table/src/column.ts @@ -96,7 +96,7 @@ export default defineComponent({ } else { children = column.label; } - return h('div', { class: 'cell' }, [ + return h('div', { class: 'cell text-' + props.align }, [ renderHeader ? renderHeader({ column, index }) : children, ]); }, diff --git a/packages/yike-design-ui/components/table/src/table.vue b/packages/yike-design-ui/components/table/src/table.vue index a12771a2..8741956f 100644 --- a/packages/yike-design-ui/components/table/src/table.vue +++ b/packages/yike-design-ui/components/table/src/table.vue @@ -2,7 +2,8 @@
- + +
diff --git a/packages/yike-design-ui/components/table/style/index.less b/packages/yike-design-ui/components/table/style/index.less index 66039fed..1e9837f7 100644 --- a/packages/yike-design-ui/components/table/style/index.less +++ b/packages/yike-design-ui/components/table/style/index.less @@ -2,6 +2,7 @@ .yk-table { overflow-x: auto; + > table { position: relative; overflow: hidden; @@ -10,6 +11,7 @@ height: fit-content; box-sizing: border-box; border-spacing: 0; + .td { padding: @space-m @space-xl; } @@ -18,10 +20,12 @@ th { padding: 0 @space-xl; background-color: @bg-color-s; + .cell { font-weight: 600; } } + &__cell { position: relative; z-index: 1; @@ -34,9 +38,8 @@ box-sizing: border-box; vertical-align: middle; .font-s(); + .cell { - display: flex; - align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: normal; @@ -48,9 +51,11 @@ &__row { background-color: @bg-color-l; + &:hover { background-color: @bg-color-m; } + .yk-table__cell { padding: 0 @space-xl; } @@ -59,6 +64,7 @@ .text-center { text-align: center; } + .text-right { text-align: right; } From 96a3d276711c38b72a172405cab544f50e5cf425 Mon Sep 17 00:00:00 2001 From: rickon_DAFEI <1016831404@qq.com> Date: Mon, 25 Mar 2024 02:51:34 +0800 Subject: [PATCH 15/18] fix(input): remove multiple bem --- .../components/input/src/input.vue | 28 +++++++------ .../components/input/style/functions.less | 6 +-- .../components/input/style/index.less | 40 ++++++++++--------- 3 files changed, 40 insertions(+), 34 deletions(-) diff --git a/packages/yike-design-ui/components/input/src/input.vue b/packages/yike-design-ui/components/input/src/input.vue index e4f52449..a72d8a70 100644 --- a/packages/yike-design-ui/components/input/src/input.vue +++ b/packages/yike-design-ui/components/input/src/input.vue @@ -11,19 +11,21 @@
diff --git a/packages/yike-design-ui/components/input/style/functions.less b/packages/yike-design-ui/components/input/style/functions.less index 9fde3ee7..cc5f9fd8 100644 --- a/packages/yike-design-ui/components/input/style/functions.less +++ b/packages/yike-design-ui/components/input/style/functions.less @@ -25,10 +25,10 @@ border-radius: @br; } - &.yk-input--@{size} { + &.yk-input__inner--@{size} { .inner(); } - &.yk-input--@{size} input { + &.yk-input__inner--@{size} input { .widget(); } } @@ -48,7 +48,7 @@ background-color: @fsbgcolor !important; } } - &.yk-input--@{status} { + &.yk-input__inner--@{status} { .bow(); } } diff --git a/packages/yike-design-ui/components/input/style/index.less b/packages/yike-design-ui/components/input/style/index.less index d3f442bd..c087edc4 100644 --- a/packages/yike-design-ui/components/input/style/index.less +++ b/packages/yike-design-ui/components/input/style/index.less @@ -5,6 +5,23 @@ display: inline-flex; align-items: center; transition: all @animatb ease-in-out; + &__inner { + display: inline-flex; + align-items: center; + transition: all @animatb ease-in-out; + .input-size(s, 22px, @space-s, @size-ss, @radius-s); + .input-size(m, 30px, @space-m, @size-s, @radius-s); + .input-size(l, 34px, @space-m, @size-s, @radius-m); + .input-size(xl, 46px, @space-l, @size-m, @radius-m); + + .input-status(primary, @bg-color-s, @bg-color-s, @pcolor, @bg-color-m, @pcolor, @bg-color-l); + .input-status(danger, transparent, @ecolor-2, @ecolor, @ecolor-1, @ecolor, @bg-color-l); + .input-status(success, transparent, @scolor-2, @scolor, @scolor-1, @scolor, @bg-color-l); + .input-status(warning, transparent, @wcolor-2, @wcolor, @wcolor-1, @wcolor, @bg-color-l); + .input-status(error, transparent, @ecolor-2, @ecolor, @ecolor-1, @ecolor, @bg-color-l); + .input-status(disabled, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m); + .input-status(readonly, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s); + } } .yk-input__spinner { @@ -13,18 +30,18 @@ margin-right: 6px; } -.yk-input--disabled input { +.yk-input__inner--disabled input { cursor: not-allowed; color: @font-color-s !important; } -.yk-input--leftbr0, -.yk-input--leftbr0 input { +.yk-input__inner--leftbr0, +.yk-input__inner--leftbr0 input { .left-no-border-radius(); } -.yk-input--rightbr0, -.yk-input--rightbr0 input { +.yk-input__inner--rightbr0, +.yk-input__inner--rightbr0 input { .right-no-border-radius(); } @@ -110,16 +127,3 @@ .yk-input--error { .input-status(warning, transparent, @wcolor-2, @wcolor, @wcolor-1, @wcolor, @bg-color-l); } - -.input-size(s, 22px, @space-s, @size-ss, @radius-s); -.input-size(m, 30px, @space-m, @size-s, @radius-s); -.input-size(l, 34px, @space-m, @size-s, @radius-m); -.input-size(xl, 46px, @space-l, @size-m, @radius-m); - -.input-status(primary, @bg-color-s, @bg-color-s, @pcolor, @bg-color-m, @pcolor, @bg-color-l); -.input-status(danger, transparent, @ecolor-2, @ecolor, @ecolor-1, @ecolor, @bg-color-l); -.input-status(success, transparent, @scolor-2, @scolor, @scolor-1, @scolor, @bg-color-l); -.input-status(warning, transparent, @wcolor-2, @wcolor, @wcolor-1, @wcolor, @bg-color-l); -.input-status(error, transparent, @ecolor-2, @ecolor, @ecolor-1, @ecolor, @bg-color-l); -.input-status(disabled, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m, @bg-color-m); -.input-status(readonly, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s, @bg-color-s); From 975464e94a1d25b8ec77e6ebbbf6eca9601f8336 Mon Sep 17 00:00:00 2001 From: rickon_DAFEI <51977404+Rickon-DAFEI@users.noreply.github.com> Date: Tue, 26 Mar 2024 03:47:30 +0800 Subject: [PATCH 16/18] table add row index (#342) * feat(table): add default scope docs * feat(table): use setup * docs(table): update table doc --- .../src/examples/table/doc.md | 10 +-- .../src/examples/table/table-custom.vue | 68 ++++++++++++++++--- .../src/examples/table/table-tbody.vue | 2 +- .../components/table/src/body.ts | 4 +- .../components/table/src/table.ts | 2 +- .../components/table/src/table.vue | 47 ++++++------- 6 files changed, 86 insertions(+), 47 deletions(-) diff --git a/packages/yike-design-demo/src/examples/table/doc.md b/packages/yike-design-demo/src/examples/table/doc.md index 76e26c7f..1507f20d 100644 --- a/packages/yike-design-demo/src/examples/table/doc.md +++ b/packages/yike-design-demo/src/examples/table/doc.md @@ -58,8 +58,8 @@ #### Table 插槽 -| 参数 | 描述 | -| ------- | -------------------------------------------------- | -| default | 自定义列的内容 作用域参数为 { row, column, index } | -| header | 自定义表头的内容， 作用域参数为 { column, index } | -| tbody | 自定义表的内容 | +| 参数 | 描述 | +| ------- | ------------------------------------------------------------------------------ | +| default | 自定义列的内容 作用域参数为 { row, column, index } 其中 index 为所在行的索引值 | +| header | 自定义表头的内容， 作用域参数为 { column, index } | +| tbody | 自定义表的内容 | diff --git a/packages/yike-design-demo/src/examples/table/table-custom.vue b/packages/yike-design-demo/src/examples/table/table-custom.vue index 45c34b58..92249710 100644 --- a/packages/yike-design-demo/src/examples/table/table-custom.vue +++ b/packages/yike-design-demo/src/examples/table/table-custom.vue @@ -1,27 +1,75 @@ diff --git a/packages/yike-design-demo/src/examples/table/table-tbody.vue b/packages/yike-design-demo/src/examples/table/table-tbody.vue index c6be672a..840cae10 100644 --- a/packages/yike-design-demo/src/examples/table/table-tbody.vue +++ b/packages/yike-design-demo/src/examples/table/table-tbody.vue @@ -1,5 +1,5 @@ - From 79236c3a8af981109605206a205055e4113e89d8 Mon Sep 17 00:00:00 2001 From: rickon_DAFEI <1016831404@qq.com> Date: Tue, 26 Mar 2024 03:48:07 +0800 Subject: [PATCH 17/18] chore(release): 0.0.13 --- packages/yike-design-ui/CHANGELOG.md | 29 ++++++++++++++++++++++++++++ packages/yike-design-ui/package.json | 2 +- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/yike-design-ui/CHANGELOG.md b/packages/yike-design-ui/CHANGELOG.md index f043fdba..affff16a 100644 --- a/packages/yike-design-ui/CHANGELOG.md +++ b/packages/yike-design-ui/CHANGELOG.md @@ -1,6 +1,35 @@ # 更新日志 +### [0.0.13](https://github.com/ecaps1038/yike-design-dev/compare/v0.0.12...v0.0.13) (2024-03-25) + + +### ✨ Features | 新功能 + +* **test:** remove doc default button style ([43e237e](https://github.com/ecaps1038/yike-design-dev/commit/43e237e00b917fafdeeb4c3f34fd05f7b2d4c96b)) + + +### ✏️ Documentation | 文档 + +* Modal组件文档优化 ([b55c32d](https://github.com/ecaps1038/yike-design-dev/commit/b55c32dc7e4ce3323774e1a4c44330993a73ea07)) +* modal组件文档修改 ([91998a3](https://github.com/ecaps1038/yike-design-dev/commit/91998a35b4d9fd8151e6559e0bfc32ab7e8028b0)) +* **started:** modify start code style ([9722a20](https://github.com/ecaps1038/yike-design-dev/commit/9722a20ae3f64b9880858d63c9c40f45320e983f)) + + +### 🐛 Bug Fixes | Bug 修复 + +* **button:** fix status style repeat ([f70340e](https://github.com/ecaps1038/yike-design-dev/commit/f70340e78aae096b273aef74866166caa31c154b)) +* **button:** simplify class names ([9ad8b2e](https://github.com/ecaps1038/yike-design-dev/commit/9ad8b2edd8193f975c3f4b994a2816821c7f57cd)) +* **input:** remove multiple bem ([96a3d27](https://github.com/ecaps1038/yike-design-dev/commit/96a3d276711c38b72a172405cab544f50e5cf425)) +* modal组件新增content-hight属性 ([ba18e91](https://github.com/ecaps1038/yike-design-dev/commit/ba18e91e120192c164482c80ed2733f6504157ff)) +* **space:** fix space undifined ([#337](https://github.com/ecaps1038/yike-design-dev/issues/337)) ([743931f](https://github.com/ecaps1038/yike-design-dev/commit/743931f0a451104853b482f00e9aeca3f9ec03a0)) +* **styles:** 优化颜色混合模式 ([111b962](https://github.com/ecaps1038/yike-design-dev/commit/111b9624a2b2fc3f11c4db53e27bbb7083ca8c9c)) +* **styles:** 优化颜色混合模式 ([4392dc8](https://github.com/ecaps1038/yike-design-dev/commit/4392dc8c19964311eacd54f6b2e3bfb18904ceb0)) +* **table:** 优化样式 ([02bca5e](https://github.com/ecaps1038/yike-design-dev/commit/02bca5e8b30bf72638698c59851ec1539e314ae6)) +* **table:** 简单增加内容插槽 ([a880f3d](https://github.com/ecaps1038/yike-design-dev/commit/a880f3da423e91771153349f9666f70dd8bcd342)) +* table组件样式调整 ([0648ff4](https://github.com/ecaps1038/yike-design-dev/commit/0648ff4ef4ebb215084eb8dda15f2f0906e31889)) +* table组件样式调整 ([e1a8480](https://github.com/ecaps1038/yike-design-dev/commit/e1a8480519ba90bafd09046786c08a2e44982d01)) + ### [0.0.12](https://github.com/ecaps1038/yike-design-dev/compare/v0.0.11...v0.0.12) (2024-03-20) diff --git a/packages/yike-design-ui/package.json b/packages/yike-design-ui/package.json index 811e8018..152eb047 100644 --- a/packages/yike-design-ui/package.json +++ b/packages/yike-design-ui/package.json @@ -1,6 +1,6 @@ { "name": "@yike-design/ui", - "version": "0.0.12", + "version": "0.0.13", "type": "module", "description": "yike-design-ui", "author": "ecaps1038 https://github.com/ecaps1038", From 4051dcbbcb72672a2c380adb4b0271d8d44e0041 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=98=E5=B0=8F=E8=A8=80?= <69682691+2113ic@users.noreply.github.com> Date: Tue, 26 Mar 2024 03:52:55 +0800 Subject: [PATCH 18/18] feat(base): add sub-path support (#338) --- packages/yike-design-ui/package.json | 10 +++++++++- packages/yike-design-ui/tsconfig.json | 12 ++++++++++-- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/yike-design-ui/package.json b/packages/yike-design-ui/package.json index 152eb047..31fde48f 100644 --- a/packages/yike-design-ui/package.json +++ b/packages/yike-design-ui/package.json @@ -23,6 +23,14 @@ "main": "lib/index.js", "module": "es/index.js", "types": "es/index.d.ts", + "imports": { + "#comps": "./components", + "#utils": "./components/utils", + "#styles": "./components/styles", + "#comps/*": "./components/*", + "#utils/*": "./components/utils/*", + "#styles/*": "./components/styles/*" + }, "files": [ "es", "lib", @@ -54,4 +62,4 @@ "@yike-design/build": "workspace:*", "standard-version": "^9.5.0" } -} +} \ No newline at end of file diff --git a/packages/yike-design-ui/tsconfig.json b/packages/yike-design-ui/tsconfig.json index 8cbbcb2d..5e90ea88 100644 --- a/packages/yike-design-ui/tsconfig.json +++ b/packages/yike-design-ui/tsconfig.json @@ -4,7 +4,7 @@ "jsx": "preserve", "target": "ESNext", "module": "ESNext", - "moduleResolution": "node", + "moduleResolution": "Bundler", "lib": ["DOM", "ESNext"], "declaration": true, "skipLibCheck": true, @@ -15,7 +15,15 @@ "emitDeclarationOnly": true, "useDefineForClassFields": true, "allowSyntheticDefaultImports": true, - "forceConsistentCasingInFileNames": true + "forceConsistentCasingInFileNames": true, + "paths": { + "#comps": ["./components"], + "#utils": ["./components/utils"], + "#styles": ["./components/styles"], + "#comps/*": ["./components/*"], + "#utils/*": ["./components/utils/*"], + "#styles/*": ["./components/styles/*"] + } }, "exclude": ["dist", "es", "lib"] }