vue-stack-tabs 0.1.12 → 0.1.13

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "vue-stack-tabs",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Vue.js component for router tab.",
   "private": false,
   "type": "module",
   "files": [
     "src/lib",
-    "dist",
-    "types"
+    "dist"
   ],
   "main": "dist/vue-stack-tabs.umd.js",
   "module": "dist/vue-stack-tabs.es.js",
-  "typings": "types/index.d.ts",
+  "typings": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jktantan/vue-stack-tabs.git"

package/src/lib/StackTabs.vue

@@ -1,126 +1,136 @@
-<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'
-import { getMaxZIndex } from './utils/TabScrollHelper'
-import { type ITabData, TabScrollMode } from './model/TabModel'
-import TabHeader from './components/TabHeader/index.vue'
-import useTabpanel from './hooks/useTabpanel'
-import useStackTab from './hooks/useStackTab'
-const { tabs, pageShown, caches, addPage, destroy, initial } = useTabpanel()
-const emit = defineEmits(['onActive'])
-const props = withDefaults(
-  defineProps<{
-    // 初始页签数据
-    defaultTabs?: ITabData[]
-    // 最大打开数量
-    max?: number
-    // 新页加入哪个位置
-    append?: string
-    // 右键菜单
-    contextmenu?: boolean | object
-    // 页面转场效果
-    pageTransition?: string
-    // 标签转场效果
-    tabTransition?: string | TransitionProps
-    // tab 滚动效果
-    tabScrollMode?: TabScrollMode
-    width?: string
-    height?: string
-    i18n?: { locale?: string; messages?: object }
-    messages?: any
-    reloadable?: boolean
-    closable?: boolean
-    space?: number
-    iframePath: string
-  }>(),
-  {
-    defaultTabs: () => [],
-    max: 20,
-    append: 'last',
-    contextmenu: true,
-    tabTransition: 'stack-tab-zoom',
-    pageTransition: 'stack-tab-swap',
-    tabScrollMode: TabScrollMode.BOTH,
-    width: '100%',
-    height: '100%',
-    i18n: () => ({ locale: 'zh-CN', messages: {} }),
-    reloadable: true,
-    closable: true,
-    space: 300
-  }
-)
-provide('locales', { ...props.i18n })
-// 最大化,并向下传递
-const maximum = ref<boolean>(false)
-provide('maximum', maximum)
-const { setIFramePath } = useStackTab()
-setIFramePath(props.iframePath)
-onBeforeMount(() => {
-  console.log('on Before mount')
-  initial(props.defaultTabs)
-})
-const tabWrapper = (route: RouteLocationNormalizedLoaded, component: VNode): DefineComponent => {
-  // return defineAsyncComponent(() => addPage(route, component))
-  return addPage(route, component)
-}
-const onTabActive = (id: string) => {
-  emit('onActive', id)
-}
-onUnmounted(() => {
-  destroy()
-})
-/**
- * 路由真正转换的时候才切换页面
- * 有keepalive或组装过Component的都会多次加载
- */
-const router = useRouter()
-watch(
-  () => router.currentRoute.value.fullPath,
-  () => {
-    pageShown.value = true
-    // routerLeaved.value = true
-    console.log('route change')
-  }
-)
-</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>
+<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'
+import { getMaxZIndex } from './utils/TabScrollHelper'
+import { type ITabData, TabScrollMode } from './model/TabModel'
+import TabHeader from './components/TabHeader/index.vue'
+import useTabpanel from './hooks/useTabpanel'
+import useStackTab from './hooks/useStackTab'
+const { tabs, pageShown, caches, addPage, destroy, initial,setMaxSize } = useTabpanel()
+const emit = defineEmits(['onActive'])
+const props = withDefaults(
+  defineProps<{
+    // 初始页签数据
+    defaultTabs?: ITabData[]
+    // 最大打开数量
+    max?: number
+    // 新页加入哪个位置
+    append?: string
+    // 右键菜单
+    contextmenu?: boolean | object
+    // 页面转场效果
+    pageTransition?: string
+    // 标签转场效果
+    tabTransition?: string | TransitionProps
+    // tab 滚动效果
+    tabScrollMode?: TabScrollMode
+    width?: string
+    height?: string
+    i18n?: { locale?: string; messages?: object }
+    messages?: any
+    reloadable?: boolean
+    closable?: boolean
+    space?: number
+    iframePath: string
+  }>(),
+  {
+    defaultTabs: () => [],
+    max: 20,
+    append: 'last',
+    contextmenu: true,
+    tabTransition: 'stack-tab-zoom',
+    pageTransition: 'stack-tab-swap',
+    tabScrollMode: TabScrollMode.BOTH,
+    width: '100%',
+    height: '100%',
+    i18n: () => ({ locale: 'zh-CN', messages: {} }),
+    reloadable: true,
+    closable: true,
+    space: 300
+  }
+)
+provide('locales', { ...props.i18n })
+// 最大化,并向下传递
+const maximum = ref<boolean>(false)
+provide('maximum', maximum)
+const { setIFramePath } = useStackTab()
+setIFramePath(props.iframePath)
+onBeforeMount(() => {
+  console.log('on Before mount')
+  initial(props.defaultTabs)
+})
+const tabWrapper = (route: RouteLocationNormalizedLoaded, component: VNode): DefineComponent => {
+  // return defineAsyncComponent(() => addPage(route, component))
+  return addPage(route, component)
+}
+const onTabActive = (id: string) => {
+  emit('onActive', id)
+}
+setMaxSize(props.max)
+onUnmounted(() => {
+  destroy()
+})
+/**
+ * 路由真正转换的时候才切换页面
+ * 有keepalive或组装过Component的都会多次加载
+ */
+const router = useRouter()
+watch(
+  () => router.currentRoute.value.fullPath,
+  () => {
+    pageShown.value = true
+    // routerLeaved.value = true
+    console.log('route change')
+  }
+)
+</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">
+            <suspense>
+              <template #default>
+                <component
+                  :is="tabWrapper(route, Component)"
+                  v-if="pageShown"
+                  :key="route.fullPath"
+                />
+              </template>
+              <template #fallback> Loading.... </template>
+            </suspense>
+          </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/assets/style/common/mixins.scss

@@ -1,45 +1,45 @@
-@import 'var';
-/*
-icon按钮特效
- */
-@mixin icon_rotate($icon-size, $icon-margin, $icon-url) {
-  width: $icon-size;
-  height: $icon-size;
-  margin-left: $icon-margin;
-  background-color: $--stack-tab-text-color;
-  mask: url($icon-url) no-repeat center center;
-  mask-size: contain;
-
-  &:hover {
-    cursor: pointer;
-    background-color: $--stack-tab-color-primary;
-    animation: rotate-center 0.3s ease-in-out both;
-    mask:
-      url($icon-url),
-      url('./image/mask.svg') no-repeat center center;
-    mask-size: contain;
-    mask-composite: xor;
-  }
-
-  &:active {
-    /*
-    cursor: pointer;
-     */
-    background-color: $--stack-tab-color-primary-activate;
-    mask:
-      url($icon-url),
-      url('./image/mask.svg') no-repeat center center;
-    mask-size: contain;
-    mask-composite: xor;
-  }
-}
-
-@mixin insetShadow() {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-}
+@import 'var';
+/*
+icon按钮特效
+ */
+@mixin icon_rotate($icon-size, $icon-margin, $icon-url) {
+  width: $icon-size;
+  height: $icon-size;
+  margin-left: $icon-margin;
+  background-color: $--stack-tab-text-color;
+  mask: url($icon-url) no-repeat center center;
+  mask-size: contain;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $--stack-tab-color-primary;
+    animation: rotate-center 0.3s ease-in-out both;
+    mask:
+      url($icon-url),
+      url('./image/mask.svg') no-repeat center center;
+    mask-size: contain;
+    mask-composite: xor;
+  }
+
+  &:active {
+    /*
+    cursor: pointer;
+     */
+    background-color: $--stack-tab-color-primary-activate;
+    mask:
+      url($icon-url),
+      url('./image/mask.svg') no-repeat center center;
+    mask-size: contain;
+    mask-composite: xor;
+  }
+}
+
+@mixin insetShadow() {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+}

package/src/lib/assets/style/common/var.scss

@@ -1,65 +1,65 @@
-/*
-主色调
- */
-$--stack-tab-color-primary: #409eff !default;
-$--stack-tab-color-primary-invert: #ffac30 !default;
-/*
-大红色
- */
-$--stack-tab-color-danger: #ef4f4f !default;
-/*
-白色
- */
-$--stack-tab-color-white: #fff !default;
-/*
-黑色
- */
-$--stack-tab-color-black: #000 !default;
-$--stack-tab-color-grey: #4d4d4d !default;
-$--stack-tab-color-disabled: #aaa !default;
-/*
-ICON点击颜色
- */
-$--stack-tab-color-primary-activate: mix($--stack-tab-color-primary, #000, 80%) !default;
-/*
-背景颜色
- */
-$--stack-tab-background-color-base: #fff !default;
-$--stack-tab-background-color-inactive: #fafafa !default;
-/*
-tab边框颜色
- */
-$--stack-tab-border-color: #f0f0f0;
-$--stack-tab-border: 1px solid $--stack-tab-border-color;
-/*
-tab文本颜色
- */
-$--stack-tab-text-color: $--stack-tab-color-grey;
-/*
-tab文本大小
- */
-$--stack-tab-font-size: 14px;
-
-$--stack-tab-padding: 24px;
-$--stack-tab-icon-margin: 4px;
-$--stack-tab-icon-size: 14px;
-
-$--stack-tab-button-size: 20px;
-/*
-tab头高度
- */
-$--stack-tab-head-height: 40px;
-$--stack-tab-head-invalid-height: $--stack-tab-head-height -3px;
-
-$--stack-tab-scroll-height: 6px;
-$--stack-tab-scroll-border-radius: $--stack-tab-scroll-height;
-$--stack-tab__trans: all 0.15s ease-in-out;
-
-/*
-阴影
- */
-$--stack-tab-shadow-left: -5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$--stack-tab-shadow-right: 5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$--stack-tab-shadow-right-inset: inset -5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$--stack-tab-shadow-left-inset: inset 5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
-$--stack-tab-shadow-context-menu: 5px 5px 5px rgb(0 0 0 / 10%);
+/*
+主色调
+ */
+$--stack-tab-color-primary: #409eff !default;
+$--stack-tab-color-primary-invert: #ffac30 !default;
+/*
+大红色
+ */
+$--stack-tab-color-danger: #ef4f4f !default;
+/*
+白色
+ */
+$--stack-tab-color-white: #fff !default;
+/*
+黑色
+ */
+$--stack-tab-color-black: #000 !default;
+$--stack-tab-color-grey: #4d4d4d !default;
+$--stack-tab-color-disabled: #aaa !default;
+/*
+ICON点击颜色
+ */
+$--stack-tab-color-primary-activate: mix($--stack-tab-color-primary, #000, 80%) !default;
+/*
+背景颜色
+ */
+$--stack-tab-background-color-base: #fff !default;
+$--stack-tab-background-color-inactive: #fafafa !default;
+/*
+tab边框颜色
+ */
+$--stack-tab-border-color: #f0f0f0;
+$--stack-tab-border: 1px solid $--stack-tab-border-color;
+/*
+tab文本颜色
+ */
+$--stack-tab-text-color: $--stack-tab-color-grey;
+/*
+tab文本大小
+ */
+$--stack-tab-font-size: 14px;
+
+$--stack-tab-padding: 24px;
+$--stack-tab-icon-margin: 4px;
+$--stack-tab-icon-size: 14px;
+
+$--stack-tab-button-size: 20px;
+/*
+tab头高度
+ */
+$--stack-tab-head-height: 40px;
+$--stack-tab-head-invalid-height: $--stack-tab-head-height -3px;
+
+$--stack-tab-scroll-height: 6px;
+$--stack-tab-scroll-border-radius: $--stack-tab-scroll-height;
+$--stack-tab__trans: all 0.15s ease-in-out;
+
+/*
+阴影
+ */
+$--stack-tab-shadow-left: -5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
+$--stack-tab-shadow-right: 5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
+$--stack-tab-shadow-right-inset: inset -5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
+$--stack-tab-shadow-left-inset: inset 5px 0 5px -5px rgb(0 0 0 / 60%); //#ccc;
+$--stack-tab-shadow-context-menu: 5px 5px 5px rgb(0 0 0 / 10%);