From c69bd935bab84582728b42ad8073b3c56377551f Mon Sep 17 00:00:00 2001 From: YeSuX <351490949@qq.com> Date: Mon, 1 May 2023 12:25:19 +0800 Subject: [PATCH 1/4] fix: add label name --- packages/components/label/src/label.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/label/src/label.ts b/packages/components/label/src/label.ts index 533f88ffb..55e4f08d2 100644 --- a/packages/components/label/src/label.ts +++ b/packages/components/label/src/label.ts @@ -7,7 +7,10 @@ type PrimitiveLabelProps = ComponentPropsWithoutRef interface LabelProps extends PrimitiveLabelProps { } type LabelElement = ElementRef +const NAME = 'Label' + const label = defineComponent({ + name: NAME, inheritAttrs: false, setup(props, { attrs, slots, emit }) { const forwardedRef = ref() From e952c4d7de4044fab0f1e1bfe380d66b929f6fed Mon Sep 17 00:00:00 2001 From: productdevbook Date: Mon, 1 May 2023 07:51:00 +0300 Subject: [PATCH 2/4] Update chromatic.yml --- .github/workflows/chromatic.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index f089531cf..cdc3a59e5 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -52,7 +52,7 @@ jobs: uses: chromaui/action@v1 with: token: ${{ secrets.GITHUB_TOKEN }} - projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + projectToken: a6e45b3693a3 buildScriptName: build:storybook exitOnceUploaded: true exitZeroOnChanges: true \ No newline at end of file From 14fc69fd4b97a64a33ee858f6a0ccf498ca280b2 Mon Sep 17 00:00:00 2001 From: YeSuX <351490949@qq.com> Date: Tue, 2 May 2023 16:51:31 +0800 Subject: [PATCH 3/4] fix: change ratio type to number --- packages/components/aspect-ratio/src/aspect-ratio.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/aspect-ratio/src/aspect-ratio.ts b/packages/components/aspect-ratio/src/aspect-ratio.ts index d7cf7856d..fcbc66333 100644 --- a/packages/components/aspect-ratio/src/aspect-ratio.ts +++ b/packages/components/aspect-ratio/src/aspect-ratio.ts @@ -6,7 +6,7 @@ type PrimitiveAspectRatioProps = ComponentPropsWithoutRef type AspectRatioElement = ElementRef interface AspectRatioProps extends PrimitiveAspectRatioProps { - ratio?: string + ratio?: number } const NAME = 'AspectRatio' @@ -18,7 +18,7 @@ const AspectRatio = defineComponent({ const { ratio = 1 / 1, style, ...aspectRatioProps } = attrs as any const forwardedRef = ref() return () => h( - Primitive.div, { + 'div', { 'style': { position: 'relative', width: '100%', From d004e5c015177598c752eb0036e3d87bba36ccb5 Mon Sep 17 00:00:00 2001 From: YeSuX <351490949@qq.com> Date: Thu, 4 May 2023 14:29:21 +0800 Subject: [PATCH 4/4] fix: optimize the usage of ref --- .../components/aspect-ratio/src/aspect-ratio.ts | 14 +++++++++----- packages/components/avatar/src/avatar.ts | 14 +++++++++++--- packages/components/label/src/label.ts | 13 ++++++++----- packages/core/primitive/src/primitive.ts | 11 ++++++++--- 4 files changed, 36 insertions(+), 16 deletions(-) diff --git a/packages/components/aspect-ratio/src/aspect-ratio.ts b/packages/components/aspect-ratio/src/aspect-ratio.ts index 46fc1f3a3..266c46cc4 100644 --- a/packages/components/aspect-ratio/src/aspect-ratio.ts +++ b/packages/components/aspect-ratio/src/aspect-ratio.ts @@ -1,9 +1,9 @@ -import { defineComponent, h, ref } from 'vue' +import { defineComponent, h, onMounted, ref } from 'vue' import type { ComponentPropsWithoutRef, ElementRef } from '@oku-ui/primitive' import { Primitive } from '@oku-ui/primitive' type PrimitiveAspectRatioProps = ComponentPropsWithoutRef -type AspectRatioElement = ElementRef +type AspectRatioElement = ElementRef & { innerRef: AspectRatioElement } interface AspectRatioProps extends PrimitiveAspectRatioProps { ratio?: number @@ -16,10 +16,14 @@ const AspectRatio = defineComponent({ setup(props, { attrs, slots, expose }) { // TODO: as any how to fix? const { ratio = 1 / 1, style, ...aspectRatioProps } = attrs as any - const inferRef = ref() + const innerRef = ref() + + onMounted(() => { + innerRef.value = innerRef.value?.innerRef + }) expose({ - inferRef, + innerRef, }) return () => h( @@ -36,7 +40,7 @@ const AspectRatio = defineComponent({ Primitive.div, { ...aspectRatioProps, - ref: inferRef, + ref: innerRef, style: { ...style, position: 'absolute', diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts index 7dec806f3..017668864 100644 --- a/packages/components/avatar/src/avatar.ts +++ b/packages/components/avatar/src/avatar.ts @@ -54,7 +54,7 @@ type AvatarProvideValue = { const [AvatarProvider, useAvatarInject] = createAvatarProvide(AVATAR_NAME) -type AvatarElement = ComponentPropsWithoutRef +type AvatarElement = ComponentPropsWithoutRef & { innerRef: AvatarElement } type PrimitiveSpanProps = ComponentPropsWithoutRef interface AvatarProps extends PrimitiveSpanProps {} @@ -74,6 +74,10 @@ const Avatar = defineComponent>({ }, }) + onMounted(() => { + innerRef.value = innerRef.value?.innerRef + }) + expose({ innerRef, }) @@ -94,7 +98,7 @@ const Avatar = defineComponent>({ const IMAGE_NAME = 'AvatarImage' -type AvatarImageElement = ComponentPropsWithoutRef +type AvatarImageElement = ComponentPropsWithoutRef & { innerRef: AvatarImageElement } type PrimitiveImgProps = ComponentPropsWithoutRef interface AvatarImageProps extends PrimitiveImgProps { onLoadingStatusChange?: (status: ImageLoadingStatus) => void @@ -115,6 +119,8 @@ const AvatarImage = defineComponent>({ }) onMounted(() => { + innerRef.value = innerRef.value?.innerRef + if (imageLoadingStatus.value !== 'idle') handleLoadingStatusChange(imageLoadingStatus.value) }) @@ -148,7 +154,7 @@ const AvatarImage = defineComponent>({ const FALLBACK_NAME = 'AvatarFallback' type PrimitiveAvatarFallbackProps = ComponentPropsWithoutRef -type PrimitiveSpanElement = ComponentPropsWithoutRef +type PrimitiveSpanElement = ComponentPropsWithoutRef & { innerRef: PrimitiveSpanElement } interface AvatarFallbackProps extends PrimitiveAvatarFallbackProps, PrimitiveSpanProps { delayms?: number } @@ -163,6 +169,8 @@ const AvatarFallback = defineComponent>({ const innerRef = ref() onMounted(() => { + innerRef.value = innerRef.value?.innerRef + if (delayms === undefined) canRender.value = true else diff --git a/packages/components/label/src/label.ts b/packages/components/label/src/label.ts index 23d8e37f3..018e9d11b 100644 --- a/packages/components/label/src/label.ts +++ b/packages/components/label/src/label.ts @@ -1,11 +1,11 @@ -import { defineComponent, h, ref } from 'vue' +import { defineComponent, h, onMounted, ref } from 'vue' import type { ComponentPropsWithoutRef, ElementRef } from '@oku-ui/primitive' import { Primitive } from '@oku-ui/primitive' type PrimitiveLabelProps = ComponentPropsWithoutRef interface LabelProps extends PrimitiveLabelProps { } -type LabelElement = ElementRef +type LabelElement = ElementRef & { innerRef: LabelElement } const NAME = 'Label' @@ -13,15 +13,18 @@ const label = defineComponent({ name: NAME, inheritAttrs: false, setup(props, { attrs, slots, expose }) { - const inferRef = ref() + const innerRef = ref() + onMounted(() => { + innerRef.value = innerRef.value?.innerRef + }) expose({ - inferRef, + innerRef, }) return () => h(Primitive.label, { ...attrs, - ref: inferRef, + ref: innerRef, onMousedown: (event: MouseEvent) => { props.onMousedown?.(event) // prevent text selection when double clicking label diff --git a/packages/core/primitive/src/primitive.ts b/packages/core/primitive/src/primitive.ts index c7db053a3..54daf3f86 100644 --- a/packages/core/primitive/src/primitive.ts +++ b/packages/core/primitive/src/primitive.ts @@ -1,5 +1,5 @@ import type { DefineComponent, FunctionalComponent, IntrinsicElementAttributes, VNodeRef } from 'vue' -import { defineComponent, h, onMounted } from 'vue' +import { defineComponent, h, onMounted, ref } from 'vue' /* ------------------------------------------------------------------------------------------------- * Primitive @@ -80,16 +80,21 @@ type ElementRef> interface PrimitiveDefineComponent extends DefineComponent> {} const Primitive = NODES.reduce((primitive, node) => { + const innerRef = ref() const Node = defineComponent>({ name: `Primitive${node}`, inheritAttrs: false, - setup(props, { attrs, slots }) { + setup(props, { attrs, slots, expose }) { + expose({ + innerRef, + }) + onMounted(() => { (window as any)[Symbol.for('okui-vue')] = true }) const Tag: any = props.asChild ? 'slot' : node - return () => h(Tag, attrs, slots.default && slots.default()) + return () => h(Tag, { ...attrs, ref: innerRef }, slots.default && slots.default()) }, }) return { ...primitive, [node]: Node }