diff --git a/README.md b/README.md index 96ed962275d2be38e65f853d2640edc54f524ab8..536ac5a713bdbf6fec1d5e96b8ed439a1409311e 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,16 @@ # opendesign-components #### 介绍 + The repository of OpenDesign components +# 首次发布 + +`npm publish --access=public` + #### 软件架构 -软件架构说明 +软件架构说明 #### 安装教程 @@ -26,10 +31,9 @@ The repository of OpenDesign components 3. 提交代码 4. 新建 Pull Request - #### 特技 -1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md +1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 diff --git a/packages/docs/global.md b/packages/docs/global.md index e3dd5322cb98def8a815dce591e7f82ab5e9cd69..a5cb12b338235fa6df0cc9db20281b9a8664cc3a 100644 --- a/packages/docs/global.md +++ b/packages/docs/global.md @@ -35,3 +35,9 @@ - 边框（bd） `--btn-bd: 1px solid var(--o-color-control1)` - 边框颜色（bd-color） `--btn-bd-color: var(--o-color-control1)` - 背景颜色（bg-color） `--btn-bg-color: var(--o-color-control1)` + +# polyfill + +> resize-observer-polyfill +> intersection-observer-polyfill +> 建议在项目使用时引入 diff --git a/packages/opendesign/README.md b/packages/opendesign/README.md index e47e7b781bad7f641eb2ac4510ef77f7184a2fd6..b6adf0304ef99a3e0539fa367c8cac32584a6a92 100644 --- a/packages/opendesign/README.md +++ b/packages/opendesign/README.md @@ -1,21 +1,3 @@ # opendesign components -- vue3 components - -# build - -1. generate icon component - ``` - pnpm gen:icon - ``` -2. build component - - ``` - pnpm build:component - ``` - -3. build style - - ``` - pnpm build:style - ``` +- vue3 components for opendesign diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json index b1357eb0012e792934a2f822e3023a97dd51e2c1..caae518152ab14b08f7145713256832e156b3bd0 100644 --- a/packages/opendesign/package.json +++ b/packages/opendesign/package.json @@ -1,8 +1,8 @@ { "name": "@opensig/opendesign", - "version": "0.0.2", + "version": "0.0.4", "main": "lib/index.js", - "module": "es/index.js", + "module": "es/index.mjs", "types": "es/index.d.ts", "typings": "lib/index.d.ts", "unpkg": "dist/opendesign.min.js", diff --git a/packages/opendesign/src/components/_shared/client-only.ts b/packages/opendesign/src/components/_shared/client-only.ts new file mode 100644 index 0000000000000000000000000000000000000000..04dc3d01c60aaf308cd6e7f7d3281b60ed0fa1c4 --- /dev/null +++ b/packages/opendesign/src/components/_shared/client-only.ts @@ -0,0 +1,17 @@ +import { defineComponent, onMounted, ref } from 'vue'; + +/** + * 只渲染一个子元素 + */ +export default defineComponent({ + name: 'ClientOnly', + setup(props, { slots }) { + const isMoutned = ref(false); + onMounted(() => { + isMoutned.value = true; + }); + return () => { + return isMoutned.value ? slots.default?.() : null; + }; + }, +}); diff --git a/packages/opendesign/src/components/directves/click-outside.ts b/packages/opendesign/src/components/directves/click-outside.ts index d379d17617be1dd9b1d8a6d2970e4ed8257be04b..2530a3cd35c6d3f3fc3e227e2f649eb2f9e77bbe 100644 --- a/packages/opendesign/src/components/directves/click-outside.ts +++ b/packages/opendesign/src/components/directves/click-outside.ts @@ -1,14 +1,15 @@ import { ObjectDirective, DirectiveBinding } from 'vue'; import { useOutClick } from '../hooks/use-out-click'; -const { addOutClickListener, removeOutClickListener } = useOutClick(); +let out: ReturnType | null = null; const vOutClick: ObjectDirective = { beforeMount(el: HTMLElement, binding: DirectiveBinding) { - addOutClickListener(el, binding.value); + out = useOutClick(); + out?.addOutClickListener(el, binding.value); }, unmounted(el: HTMLElement) { - removeOutClickListener(el); + out?.removeOutClickListener(el); } }; diff --git a/packages/opendesign/src/components/directves/on-intersection.ts b/packages/opendesign/src/components/directves/on-intersection.ts index 73468b4ae38fbcb14503616e17ba3a28a5bfa993..158c2cf84ac77419349a3ad3dd973a5772a1de5f 100644 --- a/packages/opendesign/src/components/directves/on-intersection.ts +++ b/packages/opendesign/src/components/directves/on-intersection.ts @@ -2,19 +2,22 @@ import { DirectiveBinding, ObjectDirective } from 'vue'; import { useIntersectionObserver, IntersectionListenerT } from '../hooks'; import { isFunction } from '../_shared/is'; -const io = useIntersectionObserver(); +let io: ReturnType | null = null; let listener: IntersectionListenerT = () => null; const vIntersection: ObjectDirective = { + beforeMount() { + io = useIntersectionObserver(); + }, mounted(el: HTMLElement, binding: DirectiveBinding) { if (isFunction(binding.value)) { listener = binding.value; - io.addIntersectionListener(el, listener); + io?.addIntersectionListener(el, listener); } }, unmounted(el: HTMLElement) { if (listener) { - io.removeIntersectionListener(el, listener); + io?.removeIntersectionListener(el, listener); } }, }; diff --git a/packages/opendesign/src/components/directves/on-resize.ts b/packages/opendesign/src/components/directves/on-resize.ts index 6348ad47672376013d515577d87d429527dd2155..7d7f9619ad0f76b2e6db159dfccd676f5066e995 100644 --- a/packages/opendesign/src/components/directves/on-resize.ts +++ b/packages/opendesign/src/components/directves/on-resize.ts @@ -2,19 +2,22 @@ import { DirectiveBinding, ObjectDirective } from 'vue'; import { useResizeObserver, ResizeListenerT } from '../hooks'; import { isFunction } from '../_shared/is'; -const ob = useResizeObserver(); let listener: ResizeListenerT = () => null; +let ro: ReturnType | null = null; const vOnResize: ObjectDirective = { + beforeMount() { + ro = useResizeObserver(); + }, mounted(el: HTMLElement, binding: DirectiveBinding) { if (isFunction(binding.value)) { listener = binding.value; - ob.addResizeListener(el, listener); + ro?.addResizeListener(el, listener); } }, unmounted(el: HTMLElement) { if (listener) { - ob.removeResizeListener(el, listener); + ro?.removeResizeListener(el, listener); } }, }; diff --git a/packages/opendesign/src/components/hooks/use-element-intersection.ts b/packages/opendesign/src/components/hooks/use-element-intersection.ts index 37943dba51744683d90692e38bbbbee44ea2e5da..30c20e713ba137099401df560ce5a78dfa459849 100644 --- a/packages/opendesign/src/components/hooks/use-element-intersection.ts +++ b/packages/opendesign/src/components/hooks/use-element-intersection.ts @@ -3,21 +3,24 @@ import { useIntersectionObserver } from './use-intersection-observer'; import type { IntersectionListenerT } from './use-intersection-observer'; import { isFunction } from '../_shared/is'; -const io = useIntersectionObserver(); +let io: ReturnType | null = null; export function useIntersectionObserverDirective({ listener, removeOnUnmounted }: { listener: IntersectionListenerT, removeOnUnmounted?: boolean }): { vIntersectionObserver: ObjectDirective } { return { vIntersectionObserver: { + beforeMount() { + io = useIntersectionObserver(); + }, mounted(el: HTMLElement) { if (isFunction(listener)) { - io.addIntersectionListener(el, listener); + io?.addIntersectionListener(el, listener); } }, unmounted(el: HTMLElement) { if (listener && removeOnUnmounted) { - io.removeIntersectionListener(el, listener); + io?.removeIntersectionListener(el, listener); } }, } diff --git a/packages/opendesign/src/components/hooks/use-element-resize.ts b/packages/opendesign/src/components/hooks/use-element-resize.ts index 72c60f4815ac64cfc5c695aeaf27306a8d10a16a..bfc633ed2fe143d2ff3619e2f35ae5413a5be61f 100644 --- a/packages/opendesign/src/components/hooks/use-element-resize.ts +++ b/packages/opendesign/src/components/hooks/use-element-resize.ts @@ -3,18 +3,21 @@ import { useResizeObserver } from './use-resize-observer'; import type { ResizeListenerT } from './use-resize-observer'; import { isFunction } from '../_shared/is'; -const ob = useResizeObserver(); +let ro: ReturnType | null = null; export function useReiszeObserverDirective(onResize: ResizeListenerT): { vResizeObserver: ObjectDirective } { return { vResizeObserver: { + beforeMount() { + ro = useResizeObserver(); + }, mounted(el: HTMLElement) { if (isFunction(onResize)) { - ob.addResizeListener(el, onResize); + ro?.addResizeListener(el, onResize); } }, unmounted(el: HTMLElement) { if (onResize) { - ob.removeResizeListener(el, onResize); + ro?.removeResizeListener(el, onResize); } }, } diff --git a/packages/opendesign/src/components/hooks/use-intersection-observer.ts b/packages/opendesign/src/components/hooks/use-intersection-observer.ts index 2a62f8c8d83f8651789c4dc22ae09a5dcab7347a..8d20223190f153ab30d14ee9ffbac0eb1d169ee1 100644 --- a/packages/opendesign/src/components/hooks/use-intersection-observer.ts +++ b/packages/opendesign/src/components/hooks/use-intersection-observer.ts @@ -1,4 +1,4 @@ -import IntersectionObserver from 'intersection-observer-polyfill'; +// import IntersectionObserver from 'intersection-observer-polyfill'; import { isFunction } from '../_shared/is'; export type IntersectionListenerT = (entry: IntersectionObserverEntry) => void; diff --git a/packages/opendesign/src/components/hooks/use-out-click.ts b/packages/opendesign/src/components/hooks/use-out-click.ts index 90f5d99129553ab0f7f5e043d5678364da718fc7..b2a8126eff7b6265c6bef6c93f7c115f719f402e 100644 --- a/packages/opendesign/src/components/hooks/use-out-click.ts +++ b/packages/opendesign/src/components/hooks/use-out-click.ts @@ -5,18 +5,6 @@ interface handlerItemT { const elList = new Map>(); -window.addEventListener('mousedown', (e) => { - elList.forEach((handlers, el) => { - if (!el.contains(e.target as HTMLElement)) { - handlers.forEach(item => { - if (!item.exception || !item.exception(e)) { - item.handler(); - } - }); - } - }); -}); - function addOutClickListener(el: HTMLElement, fn: () => void, exception?: (e: MouseEvent) => boolean) { if (!elList.has(el)) { elList.set(el, []); @@ -47,6 +35,18 @@ function removeOutClickListener(el: HTMLElement, listener?: () => void) { } export function useOutClick() { + window.addEventListener('mousedown', (e) => { + elList.forEach((handlers, el) => { + if (!el.contains(e.target as HTMLElement)) { + handlers.forEach(item => { + if (!item.exception || !item.exception(e)) { + item.handler(); + } + }); + } + }); + }); + return { addOutClickListener, removeOutClickListener, diff --git a/packages/opendesign/src/components/hooks/use-resize-observer.ts b/packages/opendesign/src/components/hooks/use-resize-observer.ts index ebacf7065ebb3535cf0c799a47ade7a2aa620855..70a5ec1b601cdae24abae32a854cf2ddb8237b1d 100644 --- a/packages/opendesign/src/components/hooks/use-resize-observer.ts +++ b/packages/opendesign/src/components/hooks/use-resize-observer.ts @@ -1,4 +1,4 @@ -import ResizeObserver from 'resize-observer-polyfill'; +// import ResizeObserver from 'resize-observer-polyfill'; import { isFunction } from '../_shared/is'; export type ResizeListenerT = (entry: ResizeObserverEntry, isFirst: boolean) => void; diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss index 1866051310bba2460ef2bef08967013189dd1e27..c7ffbf783ee7c53bca373f684232a0a8102c9913 100644 --- a/packages/opendesign/src/components/index.scss +++ b/packages/opendesign/src/components/index.scss @@ -8,6 +8,7 @@ @use './input/style//index.scss' as *; @use './input-number/style//index.scss' as *; @use './textarea/style//index.scss' as *; +@use './option/style//index.scss' as *; @use './select/style//index.scss' as *; @use './tabs/style//index.scss' as *; @use './table/style//index.scss' as *; diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts index 8ca317c60bc4bb7cbd81477fe9173089b9fff512..c3df0fb14678d87c805747a5306da60b3cad1223 100644 --- a/packages/opendesign/src/components/index.ts +++ b/packages/opendesign/src/components/index.ts @@ -10,6 +10,7 @@ export * from './popover'; export * from './input'; export * from './input-number'; export * from './textarea'; +export * from './option'; export * from './select'; export * from './tabs'; export * from './table'; diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue index c48b75d4b7927f6f6885fb998de4d78ae51eec84..7bc488124f5fe3c4e828290032304bbd55759438 100644 --- a/packages/opendesign/src/components/input/OInput.vue +++ b/packages/opendesign/src/components/input/OInput.vue @@ -9,6 +9,7 @@ import { toInputString } from './input'; import { OResizeObserver } from '../resize-observer'; import { inputProps } from './types'; import { getRoundClass } from '../_shared/style-class'; +import ClientOnly from '../_shared/client-only'; const props = defineProps(inputProps); @@ -41,7 +42,6 @@ watch( // 输入框显示的字符串 const displayValue = computed(() => { const v = isFunction(props.format) ? props.format(realValue.value) : realValue.value; - // console.log('displayValue', v, realValue.value); return v; }); @@ -53,6 +53,7 @@ const isClearable = computed(() => props.clearable && !props.disabled && !props. function updateValue(val: string) { const value = isFunction(props.parse) ? props.parse(val) : val; emits('update:modelValue', value); + realValue.value = value; if (lastValue !== value) { emits('change', value); @@ -140,7 +141,8 @@ const onMouseDown = (e: MouseEvent) => { }; const onMirrorResize = (en: ResizeObserverEntry) => { - inputWidth.value = en.target.clientWidth; + // + 1; 修复宽度为小数的情况 + inputWidth.value = en.target.clientWidth + 1; }; const round = getRoundClass(props, 'input'); @@ -200,9 +202,11 @@ const round = getRoundClass(props, 'input'); @compositionstart="onCompositionStart" @compositionend="onCompositionEnd" /> - -
{{ inputText }}
- + + +
{{ inputText }}
+ +
diff --git a/packages/opendesign/src/components/input/__demo__/InputBasic.vue b/packages/opendesign/src/components/input/__demo__/InputBasic.vue index 0bab9619230b70fbb9646cf3f3d7a7c16e2437c8..d1d9aaf79f57059a55e40d2b9d6bb24bff202386 100644 --- a/packages/opendesign/src/components/input/__demo__/InputBasic.vue +++ b/packages/opendesign/src/components/input/__demo__/InputBasic.vue @@ -19,7 +19,7 @@ setTimeout(() => {

text:

- +

password:

diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue index a4c0719accc2f5d8f7d01581e7ca14140643e0a5..8a1a4640b66b029baa575091f8624bfb7069cc86 100644 --- a/packages/opendesign/src/components/popup/OPopup.vue +++ b/packages/opendesign/src/components/popup/OPopup.vue @@ -15,6 +15,7 @@ import { OResizeObserver } from '../resize-observer'; import { useIntersectionObserver } from '../hooks'; import type { IntersectionListenerT } from '../hooks'; import { OChildOnly } from '../child-only'; +import ClientOnly from '../_shared/client-only'; // TODO 处理嵌套 @@ -52,8 +53,77 @@ const anchorStyle = reactive<{ left?: string; top?: string; right?: string; bott const toMount = ref(false); const isAnimating = ref(false); -const { addResizeListener, removeResizeListener } = useResizeObserver(); -const intersctionObserver = useIntersectionObserver(); +let ro: ReturnType | null = null; +let io: ReturnType | null = null; + +onMounted(() => { + ro = useResizeObserver(); + io = useIntersectionObserver(); + + // 在mounted事件后再显示，避免找不到wrapper + visible.value = props.visible; + + // 触发元素为dom或者选择器，处理事件触发 + nextTick(() => { + if (!wrapperEl.value) { + if (typeof props.wrapper === 'string') { + wrapperEl.value = document.querySelector(props.wrapper); + } else { + wrapperEl.value = props.wrapper; + } + } + + // 绑定触发元素事件 + if (typeof props.target === 'string') { + bindTargetEvent(document.querySelector(props.target)); + } else if (isElement(props.target)) { + bindTargetEvent(props.target as HTMLElement); + } + + // 初始为true时，更新样式 + // if (visible.value) { + // updatePopupStyle(); + // } + }); +}); + +let triggerListener: ReturnType = []; +const bindTargetEvent = (el: HTMLElement | null) => { + if (!el) { + return; + } + targetEl = el; + + // 初始化popup宽度，避免引起resize，触发重复计算 + if (props.adjustMinWidth) { + popStyle.minWidth = `${targetEl.offsetWidth}px`; + } else if (props.adjustWidth) { + popStyle.width = `${targetEl.offsetWidth}px`; + } + + triggerListener = bindTrigger(el, popupRef, triggers, { + updateFn: updateVisible, + hoverDelay: props.hoverDelay, + }); + + if (props.hideWhenTargetInvisible) { + io?.addIntersectionListener(targetEl, onTargetInterscting); + } +}; + +onUnmounted(() => { + // 移除触发事件 + triggerListener.forEach((fn) => { + fn(); + }); + // 销毁popup 的 resize监听 + if (wrapperEl.value) { + ro?.removeResizeListener(wrapperEl.value, onResize); + } + if (targetEl) { + ro?.removeResizeListener(targetEl, onResize); + } +}); // 处理popup位置 const updatePopupStyle = () => { @@ -149,7 +219,7 @@ const updateVisible = (isVisible?: boolean, delay?: number) => { toMount.value = true; if (props.hideWhenTargetInvisible && targetEl) { - intersctionObserver.addIntersectionListener(targetEl, onTargetInterscting); + io?.addIntersectionListener(targetEl, onTargetInterscting); } } }; @@ -162,30 +232,6 @@ const updateVisible = (isVisible?: boolean, delay?: number) => { } }; -let triggerListener: ReturnType = []; -const bindTargetEvent = (el: HTMLElement | null) => { - if (!el) { - return; - } - targetEl = el; - - // 初始化popup宽度，避免引起resize，触发重复计算 - if (props.adjustMinWidth) { - popStyle.minWidth = `${targetEl.offsetWidth}px`; - } else if (props.adjustWidth) { - popStyle.width = `${targetEl.offsetWidth}px`; - } - - triggerListener = bindTrigger(el, popupRef, triggers, { - updateFn: updateVisible, - hoverDelay: props.hoverDelay, - }); - - if (props.hideWhenTargetInvisible) { - intersctionObserver.addIntersectionListener(targetEl, onTargetInterscting); - } -}; - // 触发元素为组件ref，因生命周期问题，延后绑定处理事件触发 watch( () => props.target, @@ -251,7 +297,7 @@ watch(popupRef, (popEl) => { }); // 监听targetEL尺寸变化 - addResizeListener(targetEl, (en: ResizeObserverEntry, isFirst: boolean) => { + ro?.addResizeListener(targetEl, (en: ResizeObserverEntry, isFirst: boolean) => { if (props.adjustMinWidth) { popStyle.minWidth = `${targetEl?.offsetWidth}px`; } else if (props.adjustWidth) { @@ -263,7 +309,7 @@ watch(popupRef, (popEl) => { if (wrapperEl.value) { // 监听warpper尺寸变化 - addResizeListener(wrapperEl.value, onResize); + ro?.addResizeListener(wrapperEl.value, onResize); } } else { /** @@ -272,11 +318,11 @@ watch(popupRef, (popEl) => { handles.forEach((hl) => hl()); if (wrapperEl.value) { - removeResizeListener(wrapperEl.value, onResize); + ro?.removeResizeListener(wrapperEl.value, onResize); } if (targetEl) { - removeResizeListener(targetEl, onResize); - intersctionObserver.removeIntersectionListener(targetEl, onTargetInterscting); + ro?.removeResizeListener(targetEl, onResize); + io?.removeIntersectionListener(targetEl, onTargetInterscting); isTargetInViewport.value = true; } } @@ -291,82 +337,42 @@ const onPopupHoverOut = () => { updateVisible(false, props.hoverDelay); } }; - -onMounted(() => { - // 在mounted事件后再显示，避免找不到wrapper - visible.value = props.visible; - - // 触发元素为dom或者选择器，处理事件触发 - nextTick(() => { - if (!wrapperEl.value) { - if (typeof props.wrapper === 'string') { - wrapperEl.value = document.querySelector(props.wrapper); - } else { - wrapperEl.value = props.wrapper; - } - } - - // 绑定触发元素事件 - if (typeof props.target === 'string') { - bindTargetEvent(document.querySelector(props.target)); - } else if (isElement(props.target)) { - bindTargetEvent(props.target as HTMLElement); - } - - // 初始为true时，更新样式 - // if (visible.value) { - // updatePopupStyle(); - // } - }); -}); - -onUnmounted(() => { - // 移除触发事件 - triggerListener.forEach((fn) => { - fn(); - }); - // 销毁popup 的 resize监听 - if (wrapperEl.value) { - removeResizeListener(wrapperEl.value, onResize); - } - if (targetEl) { - removeResizeListener(targetEl, onResize); - } -}); diff --git a/packages/opendesign/src/components/popup/popup.ts b/packages/opendesign/src/components/popup/popup.ts index 1d55400575c2f664b27a0a4bfd6adae33ab385f4..4f0190bc0ad44fa32a5d2b3508e123d47d531c7e 100644 --- a/packages/opendesign/src/components/popup/popup.ts +++ b/packages/opendesign/src/components/popup/popup.ts @@ -5,7 +5,6 @@ import type { PopupPositionT, PopupTriggerT } from './types'; import { useOutClick } from '../hooks/use-out-click'; -const { addOutClickListener, removeOutClickListener } = useOutClick(); interface Pos { left: number, top: number @@ -404,6 +403,7 @@ export function bindTrigger( if (!el) { return []; } + const { addOutClickListener, removeOutClickListener } = useOutClick(); const listeners: Array<() => void> = []; diff --git a/packages/opendesign/src/components/popup/types.ts b/packages/opendesign/src/components/popup/types.ts index 423e2e3ae253e3cc72e849930e4b69387e9a4969..7b3552a6485f664be5fe95f5daa58e5fc5aa0df4 100644 --- a/packages/opendesign/src/components/popup/types.ts +++ b/packages/opendesign/src/components/popup/types.ts @@ -39,7 +39,7 @@ export const popupProps = { */ wrapper: { type: [String, Object] as PropType, - default: document.body, + default: 'body', }, /** * 距离target偏移量 diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue index a16c910fe629637664317c380fb088bd5d74144e..114a5de92ea864bc293611daf534fa721a033842 100644 --- a/packages/opendesign/src/components/select/OSelect.vue +++ b/packages/opendesign/src/components/select/OSelect.vue @@ -6,6 +6,7 @@ import { OPopup } from '../popup'; import { selectOptionInjectKey } from './provide'; import { SelectOptionT, selectProps } from './types'; import { getRoundClass } from '../_shared/style-class'; +import ClientOnly from '../_shared/client-only'; const props = defineProps(selectProps); const emits = defineEmits<{ @@ -69,34 +70,36 @@ provide(selectOptionInjectKey, { :style="round.style.value" > - - +
+
- +
- +
- -
- - -
-
- - -
- +
+
+ + +
+ +
+ + +
+ +
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css index 816bc980d2e47cd699c0701fdd664254b14ce774..64377f1d547e783d65c298dcf26565428ec51b18 100644 --- a/packages/opendesign/src/components/style/dark.token.css +++ b/packages/opendesign/src/components/style/dark.token.css @@ -1,5 +1,5 @@ /* theme: dark */ -:root[theme="dark"] { +[data-o-theme="dark"] { /** * @name * @type palette @@ -1196,21 +1196,21 @@ * @group radius * @description 大尺寸控件圆角 */ - --o-radius-control-l: var(--o-radius-control-l); + --o-radius-control-l: var(--o-radius-l); /** * @name 中尺寸控件圆角 * @type size * @group radius * @description 中尺寸控件圆角 */ - --o-radius-control-m: var(--o-radius-control-m); + --o-radius-control-m: var(--o-radius-m); /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角 */ - --o-radius-control-s: var(--o-radius-control-s); + --o-radius-control-s: var(--o-radius-s); /** * @name 持续时间 * @type animation diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css index 6ce10582f8efa1a1ff38ba8077c6eee303cbbb49..ab0d97593180442b352483c88908f1e8711f99f7 100644 --- a/packages/opendesign/src/components/style/default-light.token.css +++ b/packages/opendesign/src/components/style/default-light.token.css @@ -1,6 +1,6 @@ /* theme: default|light */ :root, -:root[theme="light"] { +[data-o-theme="light"] { /** * @name * @type palette @@ -1197,21 +1197,21 @@ * @group radius * @description 大尺寸控件圆角 */ - --o-radius-control-l: var(--o-radius-control-l); + --o-radius-control-l: var(--o-radius-l); /** * @name 中尺寸控件圆角 * @type size * @group radius * @description 中尺寸控件圆角 */ - --o-radius-control-m: var(--o-radius-control-m); + --o-radius-control-m: var(--o-radius-m); /** * @name 小尺寸控件圆角 * @type size * @group radius * @description 小尺寸控件圆角 */ - --o-radius-control-s: var(--o-radius-control-s); + --o-radius-control-s: var(--o-radius-s); /** * @name 持续时间 * @type animation diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue index f59f419b2661ab7b6806f849604d0b81075ed44e..60abf5db731d3415daa13b7f0ab6e5ce8b2e1b6b 100644 --- a/packages/opendesign/src/components/tabs/OTabPane.vue +++ b/packages/opendesign/src/components/tabs/OTabPane.vue @@ -8,6 +8,7 @@ import { computed, getCurrentInstance, inject, onMounted, nextTick, ref, watch } import { tabsInjectKey } from './provide'; import { tabPaneProps } from './types'; import { IconClose } from '../_shared/icons'; +import ClientOnly from '../_shared/client-only'; const props = defineProps(tabPaneProps); @@ -73,25 +74,27 @@ onMounted(() => { });