Merge branch 'fork/zouawen/main'

packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue

@@ -6,6 +6,7 @@ import { computed } from 'vue';
 import { TabsTrigger } from 'reka-ui';
 
 import { Tabs, TabsContent, TabsList } from '../../ui';
+import { VbenTooltip } from '../tooltip';
 import TabsIndicator from './tabs-indicator.vue';
 
 interface Props {
@@ -45,16 +46,23 @@ function activeClass(tab: string): string[] {
   <Tabs v-model="activeTab" :default-value="getDefaultValue">
     <TabsList
       :style="tabsStyle"
-      class="bg-accent outline-heavy! relative grid w-full outline-2!"
+      class="bg-accent outline-heavy! relative grid outline!"
     >
       <TabsIndicator :style="tabsIndicatorStyle" />
       <template v-for="tab in tabs" :key="tab.value">
         <TabsTrigger
           :value="tab.value"
           :class="activeClass(tab.value)"
-          class="hover:text-primary z-20 inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50"
+          class="hover:text-primary z-20 size-full inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50"
         >
-          {{ tab.label }}
+          <VbenTooltip :delay-duration="300" side="bottom">
+            <template #trigger>
+              <div class="whitespace-nowrap overflow-hidden text-ellipsis px-1">
+                {{ tab.label }}
+              </div>
+            </template>
+            {{ tab.label }}
+          </VbenTooltip>
         </TabsTrigger>
       </template>
     </TabsList>

packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue

@@ -23,13 +23,13 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-(--reka-tabs-indicator-position) rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
+        'absolute bottom-0 left-0 z-10 size-full translate-x-(--reka-tabs-indicator-position) rounded-full py-1 transition-[width,transform] duration-300',
         props.class,
       )
     "
   >
     <div
-      class="bg-background text-foreground inline-flex h-full w-full items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+      class="bg-background text-foreground inline-flex size-full items-center justify-center rounded-md text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
     >
       <slot></slot>
     </div>

packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue

@@ -21,7 +21,7 @@ const delegatedProps = reactiveOmit(props, 'class');
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1 -mx-1',
         props.class,
       )
     "

packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue

@@ -5,7 +5,12 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,
@@ -38,12 +43,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       data-slot="tooltip-content"
       :class="
         cn(
-          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-popup w-fit origin-(--reka-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-popup w-fit origin-(--reka-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance border border-border',
           props.class,
         )
       "
     >
       <slot></slot>
+      <TooltipArrow class="fill-accent stroke-gray-200" />
     </TooltipContent>
   </TooltipPortal>
 </template>

packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue

@@ -36,7 +36,7 @@ function handleClick() {
 
       <VbenTooltip v-if="slots.tip || tip" side="bottom">
         <template #trigger>
-          <CircleHelp class="ml-1 size-3 cursor-help" />
+          <CircleHelp class="ml-1 size-3 cursor-help pointer-events-auto" />
         </template>
         <slot name="tip">
           <template v-if="tip">