fix: fix known issues. fixed #59,fixed #61, fixed #67, fixed #68 [deploy]

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

@@ -31,7 +31,7 @@ function handleClick(path?: string) {
       >
         <li>
           <a href="javascript:void 0" @click.stop="handleClick(item.path)">
-            <span class="flex-center h-full">
+            <span class="flex-center z-10 h-full">
               <VbenIcon
                 v-if="item.icon && showIcon"
                 :icon="item.icon"

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

@@ -11,6 +11,7 @@ import { cn } from '@vben-core/toolkit';
 interface Props {
   class?: HTMLAttributes['class'];
   horizontal?: boolean;
+  scrollBarClass?: HTMLAttributes['class'];
   shadow?: boolean;
   shadowBorder?: boolean;
 }
@@ -58,7 +59,11 @@ function handleScroll(event: Event) {
       }"
       class="scrollbar-bottom-shadow pointer-events-none absolute bottom-0 z-10 h-12 w-full opacity-0 transition-opacity duration-300 ease-in-out will-change-[opacity]"
     ></div>
-    <ScrollBar v-if="horizontal" orientation="horizontal" />
+    <ScrollBar
+      v-if="horizontal"
+      :class="scrollBarClass"
+      orientation="horizontal"
+    />
   </ScrollArea>
 </template>
 

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -71,7 +71,11 @@ function scrollIntoView() {
 
 <template>
   <div :style="style" class="tabs-chrome size-full flex-1 overflow-hidden pt-1">
-    <VbenScrollbar class="tabs-chrome__scrollbar h-full" horizontal>
+    <VbenScrollbar
+      class="tabs-chrome__scrollbar h-full"
+      horizontal
+      scroll-bar-class="z-10"
+    >
       <!-- footer -> 4px -->
       <div
         ref="contentRef"

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

@@ -72,7 +72,11 @@ function scrollIntoView() {
 
 <template>
   <div class="h-full flex-1 overflow-hidden">
-    <VbenScrollbar class="tabs-scrollbar h-full" horizontal>
+    <VbenScrollbar
+      class="tabs-scrollbar h-full"
+      horizontal
+      scroll-bar-class="z-10"
+    >
       <div
         :class="contentClass"
         class="relative !flex h-full w-max items-center"

packages/@core/ui-kit/tabs-ui/src/tabs-view.vue

@@ -45,6 +45,11 @@ async function initTabsSortable() {
 
   const el = document.querySelectorAll(`.${contentClass}`)?.[0] as HTMLElement;
 
+  const resetElState = () => {
+    el.style.cursor = 'default';
+    el.classList.remove('dragging');
+  };
+
   const { initializeSortable } = useSortable(el, {
     filter: (_evt, target: HTMLElement) => {
       const parent = findParentElement(target);
@@ -57,16 +62,20 @@ async function initTabsSortable() {
       const { srcElement } = (evt as any).originalEvent;
 
       if (!srcElement) {
+        resetElState();
         return;
       }
 
       const srcParent = findParentElement(srcElement);
 
       if (!srcParent) {
+        resetElState();
         return;
       }
 
       if (!srcParent.classList.contains('dragable')) {
+        resetElState();
+
         return;
       }
 
@@ -79,8 +88,7 @@ async function initTabsSortable() {
       ) {
         emit('sortTabs', oldIndex, newIndex);
       }
-      el.classList.remove('dragging');
-      el.style.cursor = 'default';
+      resetElState();
     },
     onMove(evt) {
       const parent = findParentElement(evt.related);