vue-stack-tabs 0.1.37 → 0.1.39

package/src/lib/StackTabs.vue

@@ -1,135 +1,135 @@
-<script lang="ts" setup>
-import { onBeforeMount, onBeforeUnmount, provide, ref } from 'vue'
-import type { TransitionProps, DefineComponent, VNode } from 'vue'
-import { type RouteLocationNormalizedLoaded } 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'
-import { useI18n } from 'vue-i18n-lite'
-import { useEmitter } from '@/lib/hooks/useTabMitt'
-const { tabs, pageShown, caches, destroy, addPage, initial, setMaxSize, setGlobalScroll } =
-  useTabpanel()
-const emit = defineEmits(['onActive', 'onPageLoaded'])
-const props = withDefaults(
-  defineProps<{
-    // 初始页签数据
-    defaultTabs?: ITabData[]
-    // 最大打开数量
-    max?: number
-    // 新页加入哪个位置
-    append?: string
-    // 右键菜单
-    contextmenu?: boolean | object
-    // 页面转场效果
-    pageTransition?: string
-    pageTransitionBack?: string
-    // 标签转场效果
-    tabTransition?: string | TransitionProps
-    // tab 滚动效果
-    tabScrollMode?: TabScrollMode
-    width?: string
-    height?: string
-    i18n?: string
-    space?: number
-    globalScroll: boolean
-    iframePath: string
-  }>(),
-  {
-    defaultTabs: () => [],
-    max: 20,
-    append: 'last',
-    contextmenu: true,
-    tabTransition: 'stack-tab-zoom',
-    pageTransition: 'stack-tab-swap',
-    pageTransitionBack: 'stack-tab-swap-back',
-    tabScrollMode: TabScrollMode.BOTH,
-    width: '100%',
-    height: '100%',
-    i18n: 'zh-CN',
-    space: 300,
-    globalScroll: false
-  }
-)
-// provide('locales', { ...props.i18n })
-// 最大化,并向下传递
-const { changeLocale } = useI18n()
-const maximum = ref<boolean>(false)
-provide('maximum', maximum)
-const { setIFramePath } = useStackTab()
-setIFramePath(props.iframePath)
-setGlobalScroll(props.globalScroll)
-changeLocale(props.i18n)
-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)
-onBeforeUnmount(() => {
-  destroy()
-})
-const onComponentLoaded = () => {
-  emit('onPageLoaded')
-}
-const pageSwitch = ref<string>(props.pageTransition)
-const emitter = useEmitter()
-emitter.on('FORWARD', () => {
-  pageSwitch.value = props.pageTransition
-})
-emitter.on('BACKWARD', () => {
-  pageSwitch.value = props.pageTransitionBack
-})
-</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="pageSwitch" appear mode="out-in">
-          <keep-alive :include="caches">
-            <component
-              :is="tabWrapper(route, Component)"
-              v-if="pageShown"
-              :key="route.fullPath"
-              @on-loaded="onComponentLoaded"
-            />
-          </keep-alive>
-        </transition>
-      </router-view>
-      <transition-group :name="pageTransition" appear>
-        <iframe
-          v-for="frame of tabs.filter((item) => item.iframe)"
-          v-show="frame.active"
-          :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, onBeforeUnmount, provide, ref } from 'vue'
+import type { TransitionProps, DefineComponent, VNode } from 'vue'
+import { type RouteLocationNormalizedLoaded } 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'
+import { useI18n } from 'vue-i18n-lite'
+import { useEmitter } from '@/lib/hooks/useTabMitt'
+const { tabs, pageShown, caches, destroy, addPage, initial, setMaxSize, setGlobalScroll } =
+  useTabpanel()
+const emit = defineEmits(['onActive', 'onPageLoaded'])
+const props = withDefaults(
+  defineProps<{
+    // 初始页签数据
+    defaultTabs?: ITabData[]
+    // 最大打开数量
+    max?: number
+    // 新页加入哪个位置
+    append?: string
+    // 右键菜单
+    contextmenu?: boolean | object
+    // 页面转场效果
+    pageTransition?: string
+    pageTransitionBack?: string
+    // 标签转场效果
+    tabTransition?: string | TransitionProps
+    // tab 滚动效果
+    tabScrollMode?: TabScrollMode
+    width?: string
+    height?: string
+    i18n?: string
+    space?: number
+    globalScroll: boolean
+    iframePath: string
+  }>(),
+  {
+    defaultTabs: () => [],
+    max: 20,
+    append: 'last',
+    contextmenu: true,
+    tabTransition: 'stack-tab-zoom',
+    pageTransition: 'stack-tab-swap',
+    pageTransitionBack: 'stack-tab-swap-back',
+    tabScrollMode: TabScrollMode.BOTH,
+    width: '100%',
+    height: '100%',
+    i18n: 'zh-CN',
+    space: 300,
+    globalScroll: false
+  }
+)
+// provide('locales', { ...props.i18n })
+// 最大化,并向下传递
+const { changeLocale } = useI18n()
+const maximum = ref<boolean>(false)
+provide('maximum', maximum)
+const { setIFramePath } = useStackTab()
+setIFramePath(props.iframePath)
+setGlobalScroll(props.globalScroll)
+changeLocale(props.i18n)
+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)
+onBeforeUnmount(() => {
+  destroy()
+})
+const onComponentLoaded = () => {
+  emit('onPageLoaded')
+}
+const pageSwitch = ref<string>(props.pageTransition)
+const emitter = useEmitter()
+emitter.on('FORWARD', () => {
+  pageSwitch.value = props.pageTransition
+})
+emitter.on('BACKWARD', () => {
+  pageSwitch.value = props.pageTransitionBack
+})
+</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="pageSwitch" appear mode="out-in">
+          <keep-alive :include="caches">
+            <component
+              :is="tabWrapper(route, Component)"
+              v-if="pageShown"
+              :key="route.fullPath"
+              @on-loaded="onComponentLoaded"
+            />
+          </keep-alive>
+        </transition>
+      </router-view>
+      <transition-group :name="pageTransition" appear>
+        <iframe
+          v-for="frame of tabs.filter((item) => item.iframe)"
+          v-show="frame.active"
+          :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,4 +1,4 @@
-@import 'var';
+@use 'var' as *;
 /*
 icon按钮特效
  */
@@ -6,13 +6,13 @@ icon按钮特效
   width: $icon-size;
   height: $icon-size;
   margin-left: $icon-margin;
-  background-color: $--stack-tab-text-color;
+  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;
+    background-color: $stack-tab-color-primary;
     animation: rotate-center 0.3s ease-in-out both;
     mask:
       url($icon-url),
@@ -25,7 +25,7 @@ icon按钮特效
     /*
     cursor: pointer;
      */
-    background-color: $--stack-tab-color-primary-activate;
+    background-color: $stack-tab-color-primary-activate;
     mask:
       url($icon-url),
       url('./image/mask.svg') no-repeat center center;

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

@@ -1,65 +1,66 @@
+@use "sass:color";
 /*
 主色调
  */
-$--stack-tab-color-primary: #409eff !default;
-$--stack-tab-color-primary-invert: #ffac30 !default;
+$stack-tab-color-primary: #409eff !default;
+$stack-tab-color-primary-invert: #ffac30 !default;
 /*
 大红色
  */
-$--stack-tab-color-danger: #ef4f4f !default;
+$stack-tab-color-danger: #ef4f4f !default;
 /*
 白色
  */
-$--stack-tab-color-white: #fff !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;
+$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-color-primary-activate: color.mix($stack-tab-color-primary, #000, 80%) !default;
 /*
 背景颜色
  */
-$--stack-tab-background-color-base: #fff !default;
-$--stack-tab-background-color-inactive: #fafafa !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;
+$stack-tab-border-color: #f0f0f0;
+$stack-tab-border: 1px solid $stack-tab-border-color;
 /*
 tab文本颜色
  */
-$--stack-tab-text-color: $--stack-tab-color-grey;
+$stack-tab-text-color: $stack-tab-color-grey;
 /*
 tab文本大小
  */
-$--stack-tab-font-size: 14px;
+$stack-tab-font-size: 14px;
 
-$--stack-tab-padding: 24px;
-$--stack-tab-icon-margin: 4px;
-$--stack-tab-icon-size: 14px;
+$stack-tab-padding: 24px;
+$stack-tab-icon-margin: 4px;
+$stack-tab-icon-size: 14px;
 
-$--stack-tab-button-size: 20px;
+$stack-tab-button-size: 20px;
 /*
 tab头高度
  */
-$--stack-tab-head-height: 40px;
-$--stack-tab-head-invalid-height: $--stack-tab-head-height -3px;
+$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-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-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%);

package/src/lib/assets/style/icon.scss

@@ -1,4 +1,4 @@
-@import './common/var';
+@use 'common/var' as *;
 
 // 全屏
 .stack-tab__icon-fullscreen {

package/src/lib/assets/style/index.scss

@@ -1,4 +1,4 @@
-@import 'stackTab';
-@import 'icon';
-@import 'transition';
-@import 'overlayer';
+@use 'stackTab.scss';
+@use 'icon.scss';
+@use 'transition.scss';
+@use 'overlayer.scss';