vue-stack-tabs 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-stack-tabs",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Vue.js component for router tab.",
   "private": false,
   "type": "module",

package/src/lib/StackTabs.vue

@@ -1,44 +1,4 @@
-<template>
-  <div
-    class="stack-tab"
-    :style="{
-      width: width,
-      height: height,
-      'z-index': maximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
-    }"
-    :class="{ 'stack-tab__maximum': maximum }"
-  >
-    <tab-header :space="space" @active="onTabActive" :tab-transition="tabTransition" :max="max">
-      <template #leftButton>
-        <slot name="leftButton" />
-      </template>
-      <template #rightButton>
-        <slot name="rightButton" />
-      </template>
-    </tab-header>
-    <div class="stack-tab__container">
-      <router-view v-slot="{ Component, route }">
-        <transition :name="pageTransition" appear @after-leave="pageShown = true">
-          <keep-alive :include="caches">
-            <component :is="tabWrapper(route, Component)" v-if="pageShown" :key="route.fullPath" />
-          </keep-alive>
-        </transition>
-      </router-view>
-      <transition-group :name="pageTransition" appear>
-        <iframe
-          v-for="frame of tabs.filter((item) => item.iframe)"
-          v-show="frame.active && pageShown"
-          :key="frame.id"
-          class="stack-tab__iframe"
-          :src="/^(javascript|data):/i.test(frame.url ?? '') ? 'about:blank' : frame.url"
-          frameborder="0"
-        />
-      </transition-group>
-    </div>
-  </div>
-</template>
-
-<script lang="tsx" setup>
+<script lang="ts" setup>
 import { onBeforeMount, onUnmounted, provide, ref, watch } from 'vue'
 import type { TransitionProps, DefineComponent, VNode } from 'vue'
 import { type RouteLocationNormalizedLoaded, useRouter } from 'vue-router'
@@ -124,4 +84,43 @@ watch(
   }
 )
 </script>
+<template>
+  <div
+    class="stack-tab"
+    :style="{
+      width: width,
+      height: height,
+      'z-index': maximum ? getMaxZIndex('body *:not(.stack-tab,.stack-tab *)') : undefined
+    }"
+    :class="{ 'stack-tab__maximum': maximum }"
+  >
+    <tab-header :space="space" @active="onTabActive" :tab-transition="tabTransition" :max="max">
+      <template #leftButton>
+        <slot name="leftButton" />
+      </template>
+      <template #rightButton>
+        <slot name="rightButton" />
+      </template>
+    </tab-header>
+    <div class="stack-tab__container">
+      <router-view v-slot="{ Component, route }">
+        <transition :name="pageTransition" appear @after-leave="pageShown = true">
+          <keep-alive :include="caches">
+            <component :is="tabWrapper(route, Component)" v-if="pageShown" :key="route.fullPath" />
+          </keep-alive>
+        </transition>
+      </router-view>
+      <transition-group :name="pageTransition" appear>
+        <iframe
+          v-for="frame of tabs.filter((item) => item.iframe)"
+          v-show="frame.active && pageShown"
+          :key="frame.id"
+          class="stack-tab__iframe"
+          :src="/^(javascript|data):/i.test(frame.url ?? '') ? 'about:blank' : frame.url"
+          frameborder="0"
+        />
+      </transition-group>
+    </div>
+  </div>
+</template>
 <style scoped></style>

package/src/lib/hooks/useTabpanel.tsx

@@ -194,17 +194,18 @@ export default () => {
     let activeTabId = ''
     for (let i = tabs.value.length - 1; i >= 0; i--) {
       if (id === unref(tabs)[i].id) {
+        //if it's not closable then return
         if (!unref(tabs)[i].closable) {
-          break
+          return id
         }
         for (const item of unref(tabs)[i].pages.list()) {
           removeComponent(item.id)
           markDeletableCache(item.id)
         }
         unref(tabs)[i].pages.clear()
-        if (tabs.value.length > 1) {
+        if (tabs.value.length > 1 && unref(tabs)[i].active) {
           if (i === 0) {
-            activeTabId = unref(tabs)[1].id
+            activeTabId = unref(tabs)[i + 1].id
           } else {
             activeTabId = unref(tabs)[i - 1].id
           }
@@ -214,11 +215,11 @@ export default () => {
         break
       }
     }
-    active(activeTabId)
-    // if remove inactive tab,then we need remove the cache manually.
-    if (activeTabId !== id) {
-      removeDeletableCache()
+    if (activeTabId !== '') {
+      active(activeTabId)
     }
+    // if remove inactive tab,then we need remove the cache manually.
+    removeDeletableCache()
     return activeTabId
   }
 

package/src/lib/index.ts

@@ -16,8 +16,8 @@ const i18n = createI18n({
 export * from './model/TabModel'
 export { IFrame, useTabLoading, useTabRouter, useStackTab }
 export default {
-  install(app: App): void {
+  install(Vue: App): void {
     tabVersion(import.meta.env.PACKAGE_VERSION)
-    app.component('VueStackTabs', StackTab).use(i18n)
+    Vue.component('VueStackTabs', StackTab).use(i18n)
   }
 }

package/types/StackTabs.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/ContextMenu/ContextMenuItem.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/ContextMenu/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/TabHeader/TabHeaderButton.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/TabHeader/TabHeaderItem.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/TabHeader/TabHeaderScroll.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/components/TabHeader/index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/hooks/useContextMenu.d.ts

@@ -0,0 +1,7 @@
+import type { ITabItem } from '../model/TabModel';
+declare const _default: () => {
+    shown: any;
+    contextMenuData: any;
+    showContextMenu: (e: MouseEvent, item: ITabItem, index: number, max: number) => Promise<void>;
+};
+export default _default;

package/types/index.d.ts

@@ -6,6 +6,6 @@ import './assets/style/index.scss';
 export * from './model/TabModel';
 export { IFrame, useTabLoading, useTabRouter, useStackTab };
 declare const _default: {
-    install(app: App): void;
+    install(Vue: App): void;
 };
 export default _default;

package/types/utils/TabScrollHelper.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 滚动到指定位置
+ * @export
+ * @param {Element} wrap 滚动区域
+ * @param {number} [left=0]
+ * @param {number} [top=0]
+ */
+export declare const _scrollTo: ({ wrap, left, top, smooth }: {
+    wrap: HTMLElement | null;
+    left?: number;
+    top?: number;
+    smooth?: boolean;
+}) => void;
+/**
+ * 指定元素滚动到可视区域
+ * @export
+ * @param {Element} el 目标元素
+ * @param {Element} wrap 滚动区域
+ * @param {String} block 垂直方向的对齐，可选：'start', 'center', 'end', 或 'nearest'
+ * @param {String} inline 水平方向的对齐，可选值同上
+ */
+export declare function _scrollIntoView({ el, wrap, block, inline }: {
+    el: HTMLElement;
+    wrap: any;
+    block?: any;
+    inline?: any;
+}): void;
+export declare const getScrollbarWidth: () => number;
+/**
+ * 获取最大z-index
+ * @returns 最大z-index的值
+ */
+export declare const getMaxZIndex: (key?: string) => number;