run lint

unovue · Jul 25, 2023 · c15c38e · c15c38e
1 parent e450c45
commit c15c38e
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 75 deletions.
diff --git a/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue b/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-export interface HoverCardTriggerProps extends PrimitiveProps { }
+export interface HoverCardTriggerProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
@@ -45,9 +45,16 @@ async function handleMouseleave(e: MouseEvent) {
 
 <template>
   <PopperAnchor asChild>
-    <PrimitiveButton ref="primitiveElement" :as-child="props.asChild" :aria-expanded="injectedValue?.open.value || false"
-      :data-state="injectedValue?.open.value ? 'open' : 'closed'" @mouseover="injectedValue!.isHover = true"
-      @mouseenter="handleMouseEnter" @mouseleave="handleMouseleave" style="cursor: default">
+    <PrimitiveButton
+      ref="primitiveElement"
+      :as-child="props.asChild"
+      :aria-expanded="injectedValue?.open.value || false"
+      :data-state="injectedValue?.open.value ? 'open' : 'closed'"
+      @mouseover="injectedValue!.isHover = true"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseleave"
+      style="cursor: default"
+    >
       <slot />
     </PrimitiveButton>
   </PopperAnchor>

diff --git a/packages/radix-vue/src/Popper/PopperContent.vue b/packages/radix-vue/src/Popper/PopperContent.vue
@@ -188,17 +188,17 @@ const computedMiddleware = computedEager(() => {
       alignmentAxis: props.alignOffset,
     }),
     props.avoidCollisions &&
-    shift({
-      mainAxis: true,
-      crossAxis: props.prioritizePosition ? true : false,
-      limiter: props.sticky === "partial" ? limitShift() : undefined,
-      ...detectOverflowOptions.value,
-    }),
+      shift({
+        mainAxis: true,
+        crossAxis: props.prioritizePosition ? true : false,
+        limiter: props.sticky === "partial" ? limitShift() : undefined,
+        ...detectOverflowOptions.value,
+      }),
     !props.prioritizePosition &&
-    props.avoidCollisions &&
-    flip({
-      ...detectOverflowOptions.value,
-    }),
+      props.avoidCollisions &&
+      flip({
+        ...detectOverflowOptions.value,
+      }),
     size({
       ...detectOverflowOptions,
       apply: ({ elements, rects, availableWidth, availableHeight }) => {
@@ -227,13 +227,13 @@ const computedMiddleware = computedEager(() => {
       },
     }),
     arrow.value &&
-    floatingUIarrow({ element: arrow.value, padding: props.arrowPadding }),
+      floatingUIarrow({ element: arrow.value, padding: props.arrowPadding }),
     transformOrigin({
       arrowWidth: arrowWidth.value,
       arrowHeight: arrowHeight.value,
     }),
     props.hideWhenDetached &&
-    hide({ strategy: "referenceHidden", ...detectOverflowOptions.value }),
+      hide({ strategy: "referenceHidden", ...detectOverflowOptions.value }),
   ] as Middleware[];
 });
 
@@ -293,7 +293,10 @@ provide(POPPER_CONTENT_KEY, {
 </script>
 
 <template>
-  <div ref="floatingRef" data-radix-popper-content-wrapper="" :style="{
+  <div
+    ref="floatingRef"
+    data-radix-popper-content-wrapper=""
+    :style="{
     ...floatingStyles,
     transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', // keep off the page when measuring
     minWidth: 'max-content',
@@ -302,14 +305,21 @@ provide(POPPER_CONTENT_KEY, {
       middlewareData.transformOrigin?.x,
       middlewareData.transformOrigin?.y,
     ].join(' '),
-  }">
-    <PrimitiveDiv v-bind="$attrs" :as-child="props.asChild" :data-side="placedSide" :data-align="placedAlign" :style="{
-      // if the PopperContent hasn't been placed yet (not all measurements done)
-      // we prevent animations so that users's animation don't kick in too early referring wrong sides
-      animation: !isPositioned ? 'none' : undefined,
-      // hide the content if using the hide middleware and should be hidden
-      opacity: middlewareData.hide?.referenceHidden ? 0 : undefined,
-    }">
+  }"
+  >
+    <PrimitiveDiv
+      v-bind="$attrs"
+      :as-child="props.asChild"
+      :data-side="placedSide"
+      :data-align="placedAlign"
+      :style="{
+        // if the PopperContent hasn't been placed yet (not all measurements done)
+        // we prevent animations so that users's animation don't kick in too early referring wrong sides
+        animation: !isPositioned ? 'none' : undefined,
+        // hide the content if using the hide middleware and should be hidden
+        opacity: middlewareData.hide?.referenceHidden ? 0 : undefined,
+      }"
+    >
       <slot></slot>
     </PrimitiveDiv>
   </div>

diff --git a/packages/radix-vue/src/Tooltip/TooltipArrow.vue b/packages/radix-vue/src/Tooltip/TooltipArrow.vue
@@ -28,5 +28,9 @@ const props = withDefaults(defineProps<TooltipArrowProps>(), {
 </script>
 
 <template>
-  <PopperArrow :as-child="props.asChild" :height="props.height" :width="props.width"></PopperArrow>
+  <PopperArrow
+    :as-child="props.asChild"
+    :height="props.height"
+    :width="props.width"
+  ></PopperArrow>
 </template>
diff --git a/packages/radix-vue/src/Tooltip/TooltipContent.vue b/packages/radix-vue/src/Tooltip/TooltipContent.vue
@@ -4,19 +4,19 @@ import { onClickOutside } from "@vueuse/core";
 
 export interface TooltipContentProps
   extends PrimitiveProps,
-  Pick<
-    PopperContentProps,
-    | "side"
-    | "sideOffset"
-    | "align"
-    | "alignOffset"
-    | "avoidCollisions"
-    | "collisionBoundary"
-    | "collisionPadding"
-    | "arrowPadding"
-    | "sticky"
-    | "hideWhenDetached"
-  > {
+    Pick<
+      PopperContentProps,
+      | "side"
+      | "sideOffset"
+      | "align"
+      | "alignOffset"
+      | "avoidCollisions"
+      | "collisionBoundary"
+      | "collisionPadding"
+      | "arrowPadding"
+      | "sticky"
+      | "hideWhenDetached"
+    > {
   /**
    * By default, screenreaders will announce the content inside
    * the component. If this is not descriptive enough, or you have
@@ -87,11 +87,20 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <PopperContent v-if="injectedValue?.open.value" ref="contentElement" :as-child="props.asChild" :side="props.side"
-    :sideOffset="props.sideOffset" :align="props.align" :alignOffset="props.alignOffset"
-    :avoidCollisions="props.avoidCollisions" :collisionBoundary="props.collisionBoundary"
-    :collisionPadding="props.collisionPadding" :arrowPadding="props.arrowPadding" :sticky="props.sticky"
-    :hideWhenDetached="props.hideWhenDetached" style="
+  <PopperContent
+    v-if="injectedValue?.open.value"
+    ref="contentElement"
+    :side="props.side"
+    :sideOffset="props.sideOffset"
+    :align="props.align"
+    :alignOffset="props.alignOffset"
+    :avoidCollisions="props.avoidCollisions"
+    :collisionBoundary="props.collisionBoundary"
+    :collisionPadding="props.collisionPadding"
+    :arrowPadding="props.arrowPadding"
+    :sticky="props.sticky"
+    :hideWhenDetached="props.hideWhenDetached"
+    style="
       --radix-tooltip-content-transform-origin: var(
         --radix-popper-transform-origin
       );
@@ -103,9 +112,17 @@ const ariaLabel = computed(() => {
       );
       --radix-tooltip-trigger-width: var(--radix-popper-anchor-width);
       --radix-tooltip-trigger-height: var(--radix-popper-anchor-height);
-    " @keydown.esc="onEscapeKeyDown($event)">
-    <PrimitiveDiv :data-state="injectedValue?.dataState.value" :data-side="props.side" :data-align="props.align"
-      role="tooltip" tabindex="-1">
+    "
+    @keydown.esc="onEscapeKeyDown($event)"
+  >
+    <PrimitiveDiv
+      :data-state="injectedValue?.dataState.value"
+      :data-side="props.side"
+      :data-align="props.align"
+      :as-child="props.asChild"
+      role="tooltip"
+      tabindex="-1"
+    >
       <slot />
       <VisuallyHidden :id="injectedValue?.contentId">
         {{ ariaLabel }}

diff --git a/packages/radix-vue/src/Tooltip/TooltipTrigger.vue b/packages/radix-vue/src/Tooltip/TooltipTrigger.vue
@@ -4,7 +4,7 @@ export type TooltipTriggerDataState =
   | "delayed-open"
   | "instant-open";
 
-export interface TooltipTriggerProps extends PrimitiveProps { }
+export interface TooltipTriggerProps extends PrimitiveProps {}
 </script>
 
 <script setup lang="ts">
@@ -28,11 +28,19 @@ useHover(triggerElement, {
 </script>
 
 <template>
-  <PopperAnchor ref="triggerElement" :as-child="props.asChild">
-    <PrimitiveButton type="button" :aria-describedby="injectedValue?.open ? injectedValue.contentId : undefined
-      " :as-child="props.asChild" :data-state="injectedValue?.dataState.value"
-      :aria-expanded="injectedValue?.open.value || false" @focus="injectedValue?.showTooltip(false)"
-      @blur="injectedValue?.hideTooltip" style="cursor: default">
+  <PopperAnchor ref="triggerElement" asChild>
+    <PrimitiveButton
+      type="button"
+      :aria-describedby="
+        injectedValue?.open ? injectedValue.contentId : undefined
+      "
+      :as-child="props.asChild"
+      :data-state="injectedValue?.dataState.value"
+      :aria-expanded="injectedValue?.open.value || false"
+      @focus="injectedValue?.showTooltip(false)"
+      @blur="injectedValue?.hideTooltip"
+      style="cursor: default"
+    >
       <slot />
     </PrimitiveButton>
   </PopperAnchor>

diff --git a/packages/radix-vue/src/Tooltip/stories/Tooltip.content.story.vue b/packages/radix-vue/src/Tooltip/stories/Tooltip.content.story.vue
@@ -12,12 +12,16 @@ const lastEvent = ref("");
       <div class="grid w-full h-28 place-content-center">
         <TooltipRoot>
           <TooltipTrigger
-            class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
+            class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+          >
             <Icon icon="radix-icons:plus" />
           </TooltipTrigger>
           <Teleport to="body">
-            <TooltipContent as-child :side-offset="5"
-              class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]">
+            <TooltipContent
+              as-child
+              :side-offset="5"
+              class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+            >
               <ul>
                 <h4>Add to library</h4>
                 <p>
@@ -42,13 +46,18 @@ const lastEvent = ref("");
 
         <TooltipRoot>
           <TooltipTrigger
-            class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
+            class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+          >
             <Icon icon="radix-icons:plus" />
           </TooltipTrigger>
           <Teleport to="body">
-            <TooltipContent as-child :side-offset="5" @escape-key-down="lastEvent = '@on-escape-key-down'"
+            <TooltipContent
+              as-child
+              :side-offset="5"
+              @escape-key-down="lastEvent = '@on-escape-key-down'"
               @pointer-down-outside="lastEvent = '@pointer-down-outside'"
-              class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]">
+              class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+            >
               <ul>
                 Add to library
                 <TooltipArrow class="fill-white" />

diff --git a/packages/radix-vue/src/Tooltip/stories/Tooltip.story.vue b/packages/radix-vue/src/Tooltip/stories/Tooltip.story.vue
@@ -11,12 +11,16 @@ const toggleState = ref(false);
     <Variant title="default">
       <TooltipRoot v-model:open="toggleState">
         <TooltipTrigger
-          class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black">
+          class="text-violet11 shadow-blackA7 hover:bg-violet3 inline-flex h-[35px] w-[35px] items-center justify-center rounded-full bg-white shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+        >
           <Icon icon="radix-icons:plus" />
         </TooltipTrigger>
         <Teleport to="body">
-          <TooltipContent as-child :side-offset="5"
-            class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]">
+          <TooltipContent
+            as-child
+            :side-offset="5"
+            class="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] bg-white px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
+          >
             <ul>
               Add to library
               <TooltipArrow class="fill-white" />

diff --git a/packages/radix-vue/src/VisuallyHidden/VisuallyHidden.vue b/packages/radix-vue/src/VisuallyHidden/VisuallyHidden.vue
@@ -3,19 +3,21 @@ import { PrimitiveSpan } from "@/Primitive";
 </script>
 
 <template>
-  <PrimitiveSpan :style="{
-    // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
-    position: 'absolute',
-    border: 0,
-    width: 1,
-    height: 1,
-    padding: 0,
-    margin: -1,
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    whiteSpace: 'nowrap',
-    wordWrap: 'normal',
-  }">
+  <PrimitiveSpan
+    :style="{
+      // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
+      position: 'absolute',
+      border: 0,
+      width: 1,
+      height: 1,
+      padding: 0,
+      margin: -1,
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      wordWrap: 'normal',
+    }"
+  >
     <slot />
   </PrimitiveSpan>
 </template>