From 170a653733703b45f8eaa868360488dca6e4d092 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 14 Sep 2023 18:10:22 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=B0=81=E8=A3=85option=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E5=AE=B9=E5=99=A8OOptionList=E7=BB=84=E4=BB=B6=EF=BC=8C?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=B8=8B=E6=8B=89=E9=80=89=E9=A1=B9=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../opendesign/src/option/OOptionList.vue | 16 +++++++++++ packages/opendesign/src/option/index.ts | 5 ++-- packages/opendesign/src/option/style/index.ts | 1 + .../opendesign/src/option/style/style.scss | 10 +++++++ packages/opendesign/src/option/style/var.scss | 11 ++++++++ .../opendesign/src/pagination/OPagination.vue | 16 ++++++++--- .../pagination/__demo__/PaginationBasic.vue | 27 ++++++++++--------- .../src/pagination/style/style.scss | 7 +---- .../opendesign/src/pagination/style/var.scss | 3 --- .../opendesign/src/scroller/style/index.scss | 1 + packages/opendesign/src/select/OSelect.vue | 2 +- .../opendesign/src/select/SelectOption.vue | 13 ++++----- packages/opendesign/src/select/style/var.scss | 6 ----- 13 files changed, 74 insertions(+), 44 deletions(-) create mode 100644 packages/opendesign/src/option/OOptionList.vue diff --git a/packages/opendesign/src/option/OOptionList.vue b/packages/opendesign/src/option/OOptionList.vue new file mode 100644 index 000000000..bffdf5bd6 --- /dev/null +++ b/packages/opendesign/src/option/OOptionList.vue @@ -0,0 +1,16 @@ + + diff --git a/packages/opendesign/src/option/index.ts b/packages/opendesign/src/option/index.ts index 45c30c0fb..fe2527d04 100644 --- a/packages/opendesign/src/option/index.ts +++ b/packages/opendesign/src/option/index.ts @@ -1,4 +1,5 @@ import _OOption from './OOption.vue'; +import OOptionList from './OOptionList.vue'; import type { App } from 'vue'; const OOption = Object.assign(_OOption, { @@ -7,6 +8,4 @@ const OOption = Object.assign(_OOption, { }, }); -export { - OOption, -}; +export { OOption, OOptionList }; diff --git a/packages/opendesign/src/option/style/index.ts b/packages/opendesign/src/option/style/index.ts index 98ff894a0..76f1d2a85 100644 --- a/packages/opendesign/src/option/style/index.ts +++ b/packages/opendesign/src/option/style/index.ts @@ -1,3 +1,4 @@ import '../../_styles'; import '../../checkbox/style'; +import '../../scroller/style'; import './index.scss'; diff --git a/packages/opendesign/src/option/style/style.scss b/packages/opendesign/src/option/style/style.scss index 963760e61..954f2a050 100644 --- a/packages/opendesign/src/option/style/style.scss +++ b/packages/opendesign/src/option/style/style.scss @@ -40,3 +40,13 @@ background-color: var(--option-bg-color-disabled); } } +// 列表容器 +.o-options-scroller { + max-height: var(--option-list-max-height); + --scroller-padding: 4px; +} +.o-options-container { + padding: 4px; + max-height: var(--option-list-max-height); + overflow: auto; +} diff --git a/packages/opendesign/src/option/style/var.scss b/packages/opendesign/src/option/style/var.scss index e69e39895..b14d4cd53 100644 --- a/packages/opendesign/src/option/style/var.scss +++ b/packages/opendesign/src/option/style/var.scss @@ -19,3 +19,14 @@ .o-option-multiple { --option-bg-color-active: transparent; } + +.o-options-popup { + --popup-shadow: var(--o-shadow-2); + --popup-bg-color: var(--o-color-control-light); + --popup-radius: var(--o-radius_control-m); + --popup-bd: none; + --popup-padding: 0; +} +.o-option-list { + --option-list-max-height: 200px; +} diff --git a/packages/opendesign/src/pagination/OPagination.vue b/packages/opendesign/src/pagination/OPagination.vue index 65af0d5eb..6e10892c8 100644 --- a/packages/opendesign/src/pagination/OPagination.vue +++ b/packages/opendesign/src/pagination/OPagination.vue @@ -9,6 +9,7 @@ import { IconChevronLeft, IconChevronRight, IconEllipsis } from '../_utils/icons import { paginationProps } from './types'; import { getRoundClass } from '../_utils/style-class'; import { OIcon } from '../icon'; +import { OOptionList } from '../option'; const props = defineProps(paginationProps); @@ -199,10 +200,17 @@ defineExpose({ > {{ item.value }} diff --git a/packages/opendesign/src/pagination/style/style.scss b/packages/opendesign/src/pagination/style/style.scss index 2008a89eb..e7efefce5 100644 --- a/packages/opendesign/src/pagination/style/style.scss +++ b/packages/opendesign/src/pagination/style/style.scss @@ -91,17 +91,12 @@ .o-pagination-more-popup { min-width: 64px; - text-align: center; max-height: 200px; overflow: auto; - padding: 4px 0; } .o-pagination-more-item { - padding: 2px 16px; cursor: pointer; - @include hover { - background-color: var(--pagination-more-item-bg-color-hover); - } + justify-content: center; } .o-pagination-input { diff --git a/packages/opendesign/src/pagination/style/var.scss b/packages/opendesign/src/pagination/style/var.scss index 56a3c81fd..c7e48de54 100644 --- a/packages/opendesign/src/pagination/style/var.scss +++ b/packages/opendesign/src/pagination/style/var.scss @@ -44,6 +44,3 @@ .o-pagination-round-pill { --pagination-radius: var(--pagination-item-size); } -.o-pagination-more-popup { - --pagination-more-item-bg-color-hover: var(--o-color-primary1-light); -} diff --git a/packages/opendesign/src/scroller/style/index.scss b/packages/opendesign/src/scroller/style/index.scss index 861f728b0..84836ae45 100644 --- a/packages/opendesign/src/scroller/style/index.scss +++ b/packages/opendesign/src/scroller/style/index.scss @@ -53,6 +53,7 @@ flex: 1; // 撑满父容器 overflow: auto; scrollbar-width: none; + padding: var(--scroller-padding); &::-webkit-scrollbar { display: none; diff --git a/packages/opendesign/src/select/OSelect.vue b/packages/opendesign/src/select/OSelect.vue index 712b2f5ce..08fc2f4ad 100644 --- a/packages/opendesign/src/select/OSelect.vue +++ b/packages/opendesign/src/select/OSelect.vue @@ -366,7 +366,7 @@ const selectDlgAction: DialogActionT[] = [ import { defaultSize } from '../_utils/global'; import { IconLoading } from '../_utils/icons'; -import { OScroller } from '../scroller'; +import { OOptionList } from '../option'; import type { SizeT } from '../_utils/types'; interface OptionPropT { @@ -27,15 +27,12 @@ const props = defineProps(); }, ]" > - +
- -
-
- -
-
+ + +
diff --git a/packages/opendesign/src/select/style/var.scss b/packages/opendesign/src/select/style/var.scss index 748528cc8..795123bfa 100644 --- a/packages/opendesign/src/select/style/var.scss +++ b/packages/opendesign/src/select/style/var.scss @@ -182,12 +182,6 @@ --select-options-max-height: 302px; } -.o-select-popup { - --popup-shadow: var(--o-shadow-2); - --popup-bg-color: var(--o-color-control-light); - --popup-radius: var(--o-radius_control-m); - --popup-bd: none; -} .o-select-dlg { --dlg-radius: var(--o-radius_control-s); --dlg-body-padding: 16px 24px; -- Gitee From 11bd6eabd32684f54f69667121a9aceaecf2ed28 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 14 Sep 2023 19:22:08 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=80=89=E9=A1=B9?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E6=9C=80=E5=B0=8F=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../opendesign/src/option/style/style.scss | 8 +++-- packages/opendesign/src/option/style/var.scss | 1 + .../pagination/__demo__/PaginationBasic.vue | 30 ++++++++----------- .../src/popover/__demo__/PopoverPosition.vue | 1 - .../opendesign/src/popup/style/index.scss | 4 +-- 5 files changed, 21 insertions(+), 23 deletions(-) diff --git a/packages/opendesign/src/option/style/style.scss b/packages/opendesign/src/option/style/style.scss index 954f2a050..4cd098a2b 100644 --- a/packages/opendesign/src/option/style/style.scss +++ b/packages/opendesign/src/option/style/style.scss @@ -24,9 +24,11 @@ } } &.active { - font-weight: 500; - color: var(--option-color-active); - background-color: var(--option-bg-color-active); + @include me-hover { + font-weight: 500; + color: var(--option-color-active); + background-color: var(--option-bg-color-active); + } } } diff --git a/packages/opendesign/src/option/style/var.scss b/packages/opendesign/src/option/style/var.scss index b14d4cd53..089faaeba 100644 --- a/packages/opendesign/src/option/style/var.scss +++ b/packages/opendesign/src/option/style/var.scss @@ -26,6 +26,7 @@ --popup-radius: var(--o-radius_control-m); --popup-bd: none; --popup-padding: 0; + --popup-min-width: 64px; } .o-option-list { --option-list-max-height: 200px; diff --git a/packages/opendesign/src/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/pagination/__demo__/PaginationBasic.vue index 3261f3dd5..3d55c5d17 100644 --- a/packages/opendesign/src/pagination/__demo__/PaginationBasic.vue +++ b/packages/opendesign/src/pagination/__demo__/PaginationBasic.vue @@ -2,10 +2,7 @@ import { ref } from 'vue'; import { OPagination } from '../index'; const currentPage = ref(5); -const total = ref(0); -setTimeout(() => { - total.value = 400; -}, 1000); +const total = ref(400); const pageSize = 8; const pageSizes = [8, 16, 32, 64]; @@ -23,7 +20,7 @@ const onChange = (value: { page: number; pageSize: number }) => {

- -

Simple

-
-
当前页：{{ currentPage }}
-
- -
- -
- -
-
+

Simple

+
+
当前页：{{ currentPage }}
+
+ +
+ +
+ +
+
diff --git a/packages/opendesign/src/popover/__demo__/PopoverPosition.vue b/packages/opendesign/src/popover/__demo__/PopoverPosition.vue index 8ccf242ce..0fc2e1619 100644 --- a/packages/opendesign/src/popover/__demo__/PopoverPosition.vue +++ b/packages/opendesign/src/popover/__demo__/PopoverPosition.vue @@ -92,7 +92,6 @@ const btn12 = ref(null); border: 1px solid #333; } .box { - padding: 12px; height: 60px; display: flex; align-items: center; diff --git a/packages/opendesign/src/popup/style/index.scss b/packages/opendesign/src/popup/style/index.scss index d48743cd6..16ede1cb0 100644 --- a/packages/opendesign/src/popup/style/index.scss +++ b/packages/opendesign/src/popup/style/index.scss @@ -23,12 +23,12 @@ } .o-popup-wrap { box-shadow: var(--popup-shadow); + background-color: var(--popup-bg-color); + border-radius: var(--popup-radius); } .o-popup-body { position: relative; z-index: 1; - background-color: var(--popup-bg-color); - border-radius: var(--popup-radius); border: var(--popup-bd); min-width: var(--popup-min-width); padding: var(--popup-padding); -- Gitee From cc7689137d131a9a246752c1ef0d5c985304db97 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 14 Sep 2023 19:32:31 +0800 Subject: [PATCH 3/3] fix --- packages/opendesign/src/switch/style/var.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/opendesign/src/switch/style/var.scss b/packages/opendesign/src/switch/style/var.scss index baece9157..fc3270314 100644 --- a/packages/opendesign/src/switch/style/var.scss +++ b/packages/opendesign/src/switch/style/var.scss @@ -14,8 +14,8 @@ --switch-bg-color-checked-disabled: var(--o-color-primary4); --switch-handler-bg-color: var(--o-color-white); - --switch-handler-bg-color-disabled: rgb(var(--o-color-white), 0.6); - --switch-handler-bg-color-checked-disabled: rgb(var(--o-color-white), 0.4); + --switch-handler-bg-color-disabled: rgb(var(--o-white), 0.6); + --switch-handler-bg-color-checked-disabled: rgb(var(--o-white), 0.4); --switch-icon-loading-color: var(--o-color-info1); } -- Gitee