diff --git a/packages/opendesign/src/components/badge/types.ts b/packages/opendesign/src/components/badge/types.ts index 315ef0af84f044a029049d0f17fe31c36081874e..2e14440779a5436022cd2df58e3dd10014541b33 100644 --- a/packages/opendesign/src/components/badge/types.ts +++ b/packages/opendesign/src/components/badge/types.ts @@ -6,7 +6,7 @@ export const badgeProps = { * 显示值 */ value: { - type: [String, Number] as PropType, + type: [String, Number], default: '', }, /** diff --git a/packages/opendesign/src/components/input-number/types.ts b/packages/opendesign/src/components/input-number/types.ts index 44b250ddfa504942db570f672d2ff43637d1a648..754352712398fd5efd8fbdf1804f9ae61cf8af69 100644 --- a/packages/opendesign/src/components/input-number/types.ts +++ b/packages/opendesign/src/components/input-number/types.ts @@ -7,7 +7,7 @@ export const inputNumberPorps = { * v-model */ modelValue: { - type: [String, Number] as PropType, + type: [String, Number], }, /** * 下拉框的默认值 diff --git a/packages/opendesign/src/components/input/types.ts b/packages/opendesign/src/components/input/types.ts index b37c7ccf1fcb8d7ac9d431813afabb4547845c55..adc351e1691be1faccddada272607f87c8d7b8ce 100644 --- a/packages/opendesign/src/components/input/types.ts +++ b/packages/opendesign/src/components/input/types.ts @@ -7,7 +7,7 @@ export const inputProps = { * v-model */ modelValue: { - type: [String, Number] as PropType, + type: [String, Number], }, /** * 下拉框的默认值 diff --git a/packages/opendesign/src/components/option/types.ts b/packages/opendesign/src/components/option/types.ts index b33342d45c507e6550ab5ba8b21a0d8cdfbb5579..7327a7b28f9b3ae652afcc6445e94a030d164b94 100644 --- a/packages/opendesign/src/components/option/types.ts +++ b/packages/opendesign/src/components/option/types.ts @@ -1,4 +1,4 @@ -import { ExtractPropTypes, PropType } from 'vue'; +import { ExtractPropTypes } from 'vue'; export const optionProps = { /** @@ -12,7 +12,7 @@ export const optionProps = { * 值 */ value: { - type: [String, Number] as PropType, + type: [String, Number], default: '' }, /** diff --git a/packages/opendesign/src/components/pagination/OPagination.vue b/packages/opendesign/src/components/pagination/OPagination.vue index ab015c021d4ad91dca84f1ac58eb183efa19b16d..6ebd139fcb5e8f1e313edb07ce8d090b16b52093 100644 --- a/packages/opendesign/src/components/pagination/OPagination.vue +++ b/packages/opendesign/src/components/pagination/OPagination.vue @@ -5,10 +5,14 @@ import { OPopover } from '../popover'; import { OInputNumber } from '../input-number'; import { OSelect } from '../select'; import { OOption } from '../option'; +import { IconChevronLeft, IconChevronRight, IconEllipsis } from '../icons'; import { paginationProps } from './types'; +import { getRoundClass } from '../_shared/style-class'; const props = defineProps(paginationProps); +const round = getRoundClass(props, 'pagination'); + const emits = defineEmits<{ (e: 'update:pageSize', value: number): void; (e: 'update:page', value: number): void; @@ -109,21 +113,30 @@ defineExpose<{ }); -
- > +
+
@@ -173,6 +195,7 @@ defineExpose<{ controls="none" :min="1" :max="totalPage" + :round="props.round" @change="goToChange" /> diff --git a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue index b5acdfb9f353c73e45523bb32311a72ffe90db77..d4cd6f2f4cf5bb965ec222bc5cee495d6bce3ab2 100644 --- a/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue +++ b/packages/opendesign/src/components/pagination/__demo__/PaginationBasic.vue @@ -4,9 +4,9 @@ import { OPagination } from '../index'; const currentPage = ref(5); const total = ref(100); -setTimeout(() => { - total.value = 50; -}, 2000); +// setTimeout(() => { +// total.value = 50; +// }, 2000); const pageSize = 8; const pageSizes = [8, 16, 32, 64]; @@ -15,23 +15,51 @@ const onChange = (value: { page: number; pageSize: number }) => { }; - + diff --git a/packages/opendesign/src/components/pagination/style/index.scss b/packages/opendesign/src/components/pagination/style/index.scss index dbfdfc88c435bcf4b9e1fa9300f0fd4dc0ba3696..92604c7b3a2c7105fd66f44dd6dc945181ae9877 100644 --- a/packages/opendesign/src/components/pagination/style/index.scss +++ b/packages/opendesign/src/components/pagination/style/index.scss @@ -6,7 +6,7 @@ white-space: nowrap; > *:not(:first-child) { - margin-left: 12px; + margin-left: var(--pagination-item-gap); } } .o-pagination-pager { @@ -20,12 +20,25 @@ display: inline-flex; justify-content: center; align-items: center; - border: 1px solid var(--o-color-border2); + color: var(--pagination-item-color); + border: 1px solid var(--pagination-item-bd-color); + background-color: var(--pagination-item-bg-color); cursor: pointer; user-select: none; - &.disabled { - color: var(--o-color-border2); - border: 1px solid var(--o-color-border2); + border-radius: var(--pagination-radius); + &:hover { + border-color: var(--pagination-item-bd-color-hover); + background-color: var(--pagination-item-bg-color-hover); + } + &:active { + border-color: var(--pagination-item-bd-color-active); + background-color: var(--pagination-item-bg-color-active); + } + &.is-disabled { + cursor: not-allowed; + color: var(--pagination-item-color-disabled); + border: 1px solid var(--pagination-item-bd-color-disabled); + background-color: var(--pagination-item-bg-color-disabled); } } .o-pagination-pages { @@ -41,15 +54,28 @@ justify-content: center; align-items: center; cursor: pointer; + color: var(--pagination-item-color); + border: 1px solid var(--pagination-item-bd-color); + background-color: var(--pagination-item-bg-color); + border-radius: var(--pagination-radius); + + .o-pagination-item { margin-left: 8px; } &:hover { - color: var(--o-color-primary2); + color: var(--pagination-item-color-hover); + border: 1px solid var(--pagination-item-bd-color-hover); + background-color: var(--pagination-item-bg-color-hover); + } + &:active { + color: var(--pagination-item-color-active); + border: 1px solid var(--pagination-item-bd-color-active); + background-color: var(--pagination-item-bg-color-active); } &.active { - color: var(--o-color-primary1); - border: 1px solid var(--o-color-primary1); + color: var(--pagination-item-color-current); + border: 1px solid var(--pagination-item-bd-color-current); + background-color: var(--pagination-item-bg-color-current); } } @@ -64,7 +90,7 @@ padding: 2px 16px; cursor: pointer; &:hover { - background-color: var(--o-color-bg1); + background-color: var(--pagination-more-item-bg-color-hover); } } diff --git a/packages/opendesign/src/components/pagination/style/var.scss b/packages/opendesign/src/components/pagination/style/var.scss index 69d106cbc1a1dd0f810d4af852ec5e8ca2043111..21e66eb437c9612e6010e941fa0dc76e1a91c28a 100644 --- a/packages/opendesign/src/components/pagination/style/var.scss +++ b/packages/opendesign/src/components/pagination/style/var.scss @@ -1,3 +1,35 @@ .o-pagination { - --pagination-item-size: 32px; + --pagination-item-size: var(--o-size-m); + --pagination-item-gap: 12px; + + --pagination-item-color: var(--o-color-info2); + --pagination-item-color-current: var(--o-color-primary1); + --pagination-item-color-disabled: var(--o-color-info4); + + --pagination-item-bd-color: var(--o-color-control1-light); + --pagination-item-bd-color-hover: var(--o-color-control2-light); + --pagination-item-bd-color-active: var(--o-color-control3-light); + --pagination-item-bd-color-current: var(--o-color-primary1-light); + --pagination-item-bd-color-disabled: var(--o-color-control4-light); + --pagination-radius: var(--o-radius-m); +} + +.o-pagination-solid { + --pagination-item-bd-color: transparent; + --pagination-item-bd-color-hover: var(--o-color-control2-light); + --pagination-item-bd-color-active: var(--o-color-control3-light); + --pagination-item-bd-color-current: var(--o-color-primary1-light); + --pagination-item-bd-color-disabled: var(--o-color-control4-light); + + --pagination-item-bg-color: transparent; + --pagination-item-bg-color-hover: var(--o-color-control2-light); + --pagination-item-bg-color-active: var(--o-color-control3-light); + --pagination-item-bg-color-current: var(--o-color-primary1-light); + --pagination-item-bg-color-disabled: var(--o-color-control4-light); +} +.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/components/pagination/types.ts b/packages/opendesign/src/components/pagination/types.ts index 8d7f5f185b7427c2493c49f920972fa810bdbf87..74f8ffc9aaed26e0527d7d36368acfa9a77dfe41 100644 --- a/packages/opendesign/src/components/pagination/types.ts +++ b/packages/opendesign/src/components/pagination/types.ts @@ -1,8 +1,22 @@ import { ExtractPropTypes, PropType } from 'vue'; +import { RoundT } from '../_shared/global'; const pageSizes = [6, 12, 24, 48]; export const paginationProps = { + /** + * 按钮类型:ColorT + */ + variant: { + type: String as PropType<'solid' | 'outline'>, + default: 'outline' + }, + /** + * 圆角值 + */ + round: { + type: String as PropType + }, /** * 支持选择的每页数据条数 */ diff --git a/packages/opendesign/src/components/popover/OPopover.vue b/packages/opendesign/src/components/popover/OPopover.vue index 05d911702e6573a25a51e016fba7cbe1a533ba0d..08a22ab8dbd7793304a97dfe7b1c45d3ea6fca21 100644 --- a/packages/opendesign/src/components/popover/OPopover.vue +++ b/packages/opendesign/src/components/popover/OPopover.vue @@ -29,11 +29,12 @@ const targetElRef = ref(null); :trigger="props.trigger" :target="props.target || targetElRef" :wrapper="props.wrapper" + wrap-class="o-popover-wrap" anchor-class="o-popover-anchor" :unmount-on-hide="props.unmountOnHide" @update:visible="updateVisible" > -
+
diff --git a/packages/opendesign/src/components/popover/style/index.scss b/packages/opendesign/src/components/popover/style/index.scss index 217994943a776a0f4b6be26697e83fd9d0c21984..55ed4dc351b23acdfca6321ab4074620d9c8f1d6 100644 --- a/packages/opendesign/src/components/popover/style/index.scss +++ b/packages/opendesign/src/components/popover/style/index.scss @@ -3,10 +3,12 @@ .o-popover-wrap { background-color: var(--popover-bg-color); box-shadow: var(--popover-shadow); - padding: 4px 8px; border-radius: var(--popover-radius); border: var(--popover-bd); +} +.o-popover-body { min-width: 120px; + padding: 4px 8px; } .o-popover-anchor { border: var(--popover-bd); diff --git a/packages/opendesign/src/components/popover/style/var.scss b/packages/opendesign/src/components/popover/style/var.scss index 406aacefc9f402368603e7a80160d8060338f522..fe214c2605c341b3d42649e8b3c59144519647a4 100644 --- a/packages/opendesign/src/components/popover/style/var.scss +++ b/packages/opendesign/src/components/popover/style/var.scss @@ -1,6 +1,6 @@ .o-popover { --popover-bg-color: var(--o-color-fill2); --popover-shadow: var(--o-shadow-1); - --popover-radius: var(--o-radius-s); + --popover-radius: var(--o-radius-l); --popover-bd: none; } diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue index f14b4f1c0ae075f25c2e00acedb3451d21cbc816..6a301e8c7f6b7c966ede2dd2b7debcd627dc449f 100644 --- a/packages/opendesign/src/components/popup/OPopup.vue +++ b/packages/opendesign/src/components/popup/OPopup.vue @@ -355,8 +355,10 @@ onUnmounted(() => { @before-leave="handleTransitionStart" @after-leave="handleTransitionEnd" > -
- +
+
+ +
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss index 221d58eb4c5bae771ed9ca15ccd02ed0206614f0..dcb74c0fecf53bb4c389425df02c3ef95952be6f 100644 --- a/packages/opendesign/src/components/popup/style/index.scss +++ b/packages/opendesign/src/components/popup/style/index.scss @@ -16,5 +16,9 @@ .o-popup-anchor { position: absolute; + z-index: 0; +} +.o-popup-body { + position: relative; z-index: 1; } diff --git a/packages/opendesign/src/components/select/types.ts b/packages/opendesign/src/components/select/types.ts index dc3adb8c4b6c26c79351a4fcd64f4b61c70adf0d..dd96d8612a4b716481c14532d541d59f21fc1b5b 100644 --- a/packages/opendesign/src/components/select/types.ts +++ b/packages/opendesign/src/components/select/types.ts @@ -8,7 +8,7 @@ export const selectProps = { * v-model */ modelValue: { - type: [String, Number] as PropType, + type: [String, Number], }, /** * 下拉框的默认值 diff --git a/packages/opendesign/src/components/table/OTable.vue b/packages/opendesign/src/components/table/OTable.vue index ebbacf4be04d57bcf9dfeb831d7f2923ef7e7a0c..2eb01486e7b6882bd102fca5b2a76c5cdbae2fc1 100644 --- a/packages/opendesign/src/components/table/OTable.vue +++ b/packages/opendesign/src/components/table/OTable.vue @@ -7,7 +7,7 @@ import { isString } from '../_shared/is'; const props = defineProps(tableProps); -const emits = defineEmits<{}>(); +// const emits = defineEmits<{}>(); const columnData = computed(() => getColumnData(props.columns)); @@ -28,7 +28,7 @@ const boderClass = computed(() => { class="o-table" :class="[ { - 'is-small': props.small, + 'o-table-small': props.small, }, ]" > @@ -52,8 +52,8 @@ const boderClass = computed(() => { -
- +
+
{{ emptyLabel }}
diff --git a/packages/opendesign/src/components/table/__demo__/TableBasic.vue b/packages/opendesign/src/components/table/__demo__/TableBasic.vue index ae48b371ea95740a72e1d64f0a249476aa1c2dfd..3d59812d322133f0e3aee242527c875f701825df 100644 --- a/packages/opendesign/src/components/table/__demo__/TableBasic.vue +++ b/packages/opendesign/src/components/table/__demo__/TableBasic.vue @@ -20,6 +20,11 @@ const loading = ref(true);
+

Style: Small

+
+ +
+

loading & Empty

@@ -42,11 +47,6 @@ const loading = ref(true);
Border: column-frame
- -

Style: Small

-
- -
diff --git a/packages/opendesign/src/components/tabs/provide.ts b/packages/opendesign/src/components/tabs/provide.ts index 946bfc0703a2a0b5ad8ec5c7fbdd29dd71d0cedb..83d284bf1a402b3e6177d7ca9a1602ac3400c5d1 100644 --- a/packages/opendesign/src/components/tabs/provide.ts +++ b/packages/opendesign/src/components/tabs/provide.ts @@ -14,9 +14,7 @@ export interface TabNavData { export const tabsInjectKey: InjectionKey<{ - value: Ref, lazy: boolean, addTabItem: (key: string | number, data: TabNavData) => void, - removeTabItem: (tabKey: string | number) => void, }> = Symbol('provide-tabs'); diff --git a/packages/opendesign/src/components/tabs/style/index.scss b/packages/opendesign/src/components/tabs/style/index.scss index 99011a04f477fb4631331c7d197209f5ed6c8e68..0e38b3ecc6be7f71b8fdf551a1471aa19c463052 100644 --- a/packages/opendesign/src/components/tabs/style/index.scss +++ b/packages/opendesign/src/components/tabs/style/index.scss @@ -3,16 +3,27 @@ .o-tabs-navs { display: flex; align-items: center; + position: relative; + width: 100%; } .o-tabs-head { font-size: var(--tabs-nav-text-size); line-height: var(--tabs-nav-text-height); color: var(--tabs-nav-color); + position: relative; &.with-act { display: flex; align-items: center; - justify-content: space-between; + // justify-content: space-between; + } + &.show-line::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + border-bottom: var(--tabs-nav-divider); } } .o-tab-nav { @@ -20,20 +31,25 @@ align-items: center; padding: 4px 16px; cursor: pointer; - - background-color: var(--tabs-nav-bg); - + border: 1px solid var(--tabs-nav-bd-color); + border-bottom-width: 0; + background-color: var(--tabs-nav-bg-color); + position: relative; + z-index: 1; + .o-tab-nav { margin-left: 8px; } &:hover { - color: var(--tabs-nav-color_active); - background-color: var(--tabs-nav-bg_hover); + color: var(--tabs-nav-color-hover); + border-color: var(--tabs-nav-bd-color-hover); + background-color: var(--tabs-nav-bg-color-hover); } &.active { - color: var(--tabs-nav-color_active); + color: var(--tabs-nav-color-active); + border-color: var(--tabs-nav-bd-color-active); + background-color: var(--tabs-nav-bg-color-active); } &.is-closable { @@ -42,23 +58,50 @@ } &.is-disabled { - color: var(--tabs-nav-color_disabled); - background-color: var(--tabs-nav-bg_disabled); + cursor: not-allowed; + color: var(--tabs-nav-color-disabled); + border-color: var(--tabs-nav-bd-color-disabled); + background-color: var(--tabs-nav-bg-color-disabled); } } +.o-tabs-text { + .o-tab-nav { + border: none; + } +} +.o-tabs-head-prefix { + flex-shrink: 0; +} +.o-tabs-head-suffix { + flex-shrink: 0; +} +.o-tab-nav-archor { + position: absolute; + left: 0; + bottom: 0; + width: 0; + z-index: 2; + transition: all var(--o-easing-standard-in) var(--o-duration-m1); +} +.o-tab-nav-archor-line { + width: 100%; + height: 3px; + background-color: var(--tabs-nav-archor-color); +} .o-tab-nav-close { position: absolute; right: 0; top: 0; font-size: 14px; - width: 20px; - height: 20px; + padding: 1px; display: inline-flex; align-items: center; justify-content: center; color: var(--tabs-icon-color); + border-radius: 50%; &:hover { - color: var(--tabs-icon-color_hover); + color: var(--tabs-icon-color-hover); + background-color: var(--tabs-icon-bg-color-hover); } } @@ -74,8 +117,8 @@ font-size: 14px; border-radius: 50%; &:hover { - color: var(--tabs-icon-color_hover); - background-color: var(--tabs-nav-bg_hover); + color: var(--tabs-icon-color-hover); + background-color: var(--tabs-nav-bg-color-hover); } } diff --git a/packages/opendesign/src/components/tabs/style/var.scss b/packages/opendesign/src/components/tabs/style/var.scss index 7fbc1a50f8a67e23f809af75704b4452440c5ab6..34669e6d8418880f643871b0db463a07f7b28385 100644 --- a/packages/opendesign/src/components/tabs/style/var.scss +++ b/packages/opendesign/src/components/tabs/style/var.scss @@ -2,16 +2,34 @@ --tabs-nav-text-size: var(--o-font_size-text); --tabs-nav-text-height: var(--o-line_height-text); - --tabs-nav-color: var(--o-color-text2); - --tabs-nav-color_active: var(--o-color-text1); - --tabs-nav-color_disabled: var(--o-color-text4); - --tabs-nav-bg: var(--o-color-bg1); - --tabs-nav-bg_hover: var(--o-color-bg3); - --tabs-nav-bg_disabled: var(--o-color-bg4); + --tabs-nav-color: var(--o-color-info2); + --tabs-nav-color-disabled: var(--o-color-info4); --tabs-nav-radius: 2px; - --tabs-icon-color: var(--o-color-text2); - --tabs-icon-color_hover: var(--o-color-primary1); - --tabs-icon-bg_hover: var(--o-color-bg2); + --tabs-icon-color: var(--o-color-info2); + --tabs-icon-color-hover: var(--o-color-primary1); + --tabs-icon-bg-color-hover: var(--o-color-control3-light); + + --tabs-nav-divider: 1px solid var(--o-color-control1); + --tabs-nav-archor-color: var(--o-color-primary1); +} + +.o-tabs-solid { + --tabs-nav-bd-color: var(--o-color-control1-light); + --tabs-nav-bd-color-hover: var(--o-color-control2-light); + --tabs-nav-bd-color-active: var(--o-color-control1-light); + --tabs-nav-bd-color-disabled: var(--o-color-control4-light); + + --tabs-nav-bg-color: var(--o-color-control1-light); + --tabs-nav-bg-color-hover: var(--o-color-control2-light); + --tabs-nav-bg-color-active: var(--o-color-control-light); + --tabs-nav-bg-color-disabled: var(--o-color-control4-light); +} +.o-tabs-text { + --tabs-nav-color-hover: var(--o-color-primary1); + --tabs-nav-color-active: var(--o-color-primary1); + --tabs-nav-bd-color: transparent; + --tabs-nav-bd-color-hover: transparent; + --tabs-nav-bd-color-active: var(--o-color-primary1); } diff --git a/packages/opendesign/src/components/tabs/types.ts b/packages/opendesign/src/components/tabs/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..b8c9f73f08798bd6104c86d1b3fe037b39517093 --- /dev/null +++ b/packages/opendesign/src/components/tabs/types.ts @@ -0,0 +1,101 @@ +import { ExtractPropTypes, PropType } from 'vue'; + +export const tabsProps = { + /** + * tab选中的nav值 + * v-model + */ + modelValue: { + type: [String, Number], + default: '' + }, + /** + * VariantT + */ + variant: { + type: String as PropType<'solid' | 'text'>, + default: 'text' + }, + /** + * 是否激活时再加载 + */ + lazy: { + type: Boolean, + }, + /** + * 是否可以添加页签 + */ + addable: { + type: Boolean, + }, + /** + * 是否展示nav线 + */ + line: { + type: Boolean, + default: true + }, + /** + * 是否nav的横向排列布局,支持justify-content的所有值 + */ + navJustify: { + type: String, + }, +}; + +export type TabsPropsT = ExtractPropTypes; + + +export const tabPaneProps = { + /** + * 页签项的key + */ + value: { + type: [String, Number], + default: undefined, + }, + /** + * 页签项的文本,如果不传,使用nav插槽或者value + */ + label: { + type: String, + default: undefined, + }, + /** + * 是否在隐藏时卸载页签内容 + */ + unmountOnHide: { + type: Boolean, + default: false, + }, + /** + * 页签切换时过渡动画 + */ + transition: { + type: String, + default: 'o-fade-in-enter', + }, + /** + * 是否禁用选中该页签 + */ + disabled: { + type: Boolean, + default: false, + }, + /** + * 是否可以删除该页签 + */ + closable: { + type: Boolean, + default: false, + }, + /** + * 是否页签首次激活时再加载页签内容 + */ + lazy: { + type: Boolean, + default: false, + }, +}; + +export type TabPanePropsT = ExtractPropTypes; \ No newline at end of file diff --git a/packages/opendesign/src/components/textarea/types.ts b/packages/opendesign/src/components/textarea/types.ts index ce95ceb9d3b5a6a5cb1806ffcdb6216d4e578cd5..e33b314568b18ade42f7fe97d702fd6f1dad8301 100644 --- a/packages/opendesign/src/components/textarea/types.ts +++ b/packages/opendesign/src/components/textarea/types.ts @@ -7,7 +7,7 @@ export const textareaProps = { * v-model */ modelValue: { - type: [String, Number] as PropType, + type: [String, Number], }, /** * 下拉框的默认值