fix(Tabs): rename tabs indicator css vars

unovue · Nov 24, 2023 · 604cd96 · 604cd96
1 parent cad2f9c
commit 604cd96
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/docs/components/demo/Tabs/css/styles.css b/docs/components/demo/Tabs/css/styles.css
@@ -30,8 +30,8 @@ input {
   left: 0;
   height: 2px;
   bottom: 0;
-  width: var(--size);
-  transform: translateX(var(--position));
+  width: var(--radix-tabs-indicator-size);
+  transform: translateX(var(--radix-tabs-indicator-position));
   border-radius: 9999px; /* rounded-full equivalent */
   transition-property: width, transform;
   transition-duration: 300ms;

diff --git a/docs/components/demo/Tabs/tailwind/index.vue b/docs/components/demo/Tabs/tailwind/index.vue
@@ -5,7 +5,7 @@ import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'rad
 <template>
   <TabsRoot class="flex flex-col w-full sm:w-[300px] shadow-[0_2px_10px] shadow-blackA4" default-value="tab1">
     <TabsList class="relative shrink-0 flex border-b border-mauve6" aria-label="Manage your account">
-      <TabsIndicator class="absolute px-8 left-0 h-[2px] bottom-0 w-[--size] translate-x-[--position] rounded-full transition-[width,transform] duration-300">
+      <TabsIndicator class="absolute px-8 left-0 h-[2px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300">
         <div class="bg-grass8 w-full h-full" />
       </TabsIndicator>
       <TabsTrigger

diff --git a/packages/radix-vue/src/Tabs/TabsIndicator.vue b/packages/radix-vue/src/Tabs/TabsIndicator.vue
@@ -42,9 +42,10 @@ watch(() => context.modelValue.value, async (n) => {
 
 <template>
   <Primitive
-    v-bind="props" :style="{
-      '--size': `${indicatorStyle.size}px`,
-      '--position': `${indicatorStyle.position}px`,
+    v-bind="props"
+    :style="{
+      '--radix-tabs-indicator-size': `${indicatorStyle.size}px`,
+      '--radix-tabs-indicator-position': `${indicatorStyle.position}px`,
     }"
   >
     <slot />

diff --git a/packages/radix-vue/src/Tabs/story/Tabs.story.vue b/packages/radix-vue/src/Tabs/story/Tabs.story.vue
@@ -13,7 +13,7 @@ import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from '../
           class="shrink-0 flex border-b border-mauve6 relative"
           aria-label="Manage your account"
         >
-          <TabsIndicator class="absolute bg-violet11 left-0 h-[2px] bottom-0 w-[--size] translate-x-[--position] rounded-full  transition-[width,transform] duration-300" />
+          <TabsIndicator class="absolute bg-violet11 left-0 h-[2px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full  transition-[width,transform] duration-300" />
           <TabsTrigger
             class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none rounded-tl-md   hover:text-violet11 focus-visible:shadow-[0_0_0_2px] data-[state=active]:text-violet11 outline-none cursor-default"
             value="tab1"

diff --git a/packages/radix-vue/src/Tabs/story/TabsVertical.story.vue b/packages/radix-vue/src/Tabs/story/TabsVertical.story.vue
@@ -14,7 +14,7 @@ import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from '../
           class="shrink-0 flex flex-col border-b border-mauve6 relative"
           aria-label="Manage your account"
         >
-          <TabsIndicator class="absolute bg-violet11 right-0 w-[2px] top-0 h-[--size] translate-y-[--position] rounded-full  transition-[width,transform] duration-300" />
+          <TabsIndicator class="absolute bg-violet11 right-0 w-[2px] top-0 h-[--radix-tabs-indicator-size] translate-y-[--radix-tabs-indicator-position] rounded-full  transition-[width,transform] duration-300" />
           <TabsTrigger
             style="writing-mode:vertical-rl;"
             class="bg-white px-5 w-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none rounded-tl-md hover:text-violet11 focus-visible:shadow-[0_0_0_2px] data-[state=active]:text-violet11 outline-none cursor-default"