vue-stack-tabs 0.1.19 → 0.1.21

package/src/lib/StackTabs.vue

@@ -1,124 +1,129 @@
-<script lang="ts" setup>
-import { onBeforeMount, onUnmounted, 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'
-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()
-})
-
-</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" @after-leave="pageShown=true" mode="out-in">
-          <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>
+<script lang="ts" setup>
+import { onBeforeMount, onUnmounted, 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'
+const { tabs, pageShown, caches, addPage, destroy, initial, setMaxSize, setGlobalScroll } =
+  useTabpanel()
+const emit = defineEmits(['onActive', 'onPageLoaded'])
+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?: string
+    space?: number
+    globalScroll: boolean
+    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: '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)
+onUnmounted(() => {
+  destroy()
+})
+const onComponentLoaded = () => {
+  emit('onPageLoaded')
+}
+</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" @after-leave="pageShown = true" mode="out-in">
+          <keep-alive :include="caches">
+            <suspense>
+              <template #default>
+                <component
+                  :is="tabWrapper(route, Component)"
+                  v-if="pageShown"
+                  :key="route.fullPath"
+                  @on-loaded="onComponentLoaded"
+                />
+              </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/transition.scss

@@ -1,40 +1,40 @@
-/*
-transition 过渡样式
- */
-.stack-tab-zoom {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: scale(0);
-    opacity: 0;
-  }
-}
-
-/*
-页面交换
- */
-.stack-tab-swap {
-  $trans: 30px;
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-from {
-    transform: translateX(-$trans);
-  }
-
-  &-leave-to {
-    transform: translateX($trans);
-  }
-}
+/*
+transition 过渡样式
+ */
+.stack-tab-zoom {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+/*
+页面交换
+ */
+.stack-tab-swap {
+  $trans: 30px;
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-from {
+    transform: translateX(-$trans);
+  }
+
+  &-leave-to {
+    transform: translateX($trans);
+  }
+}

package/src/lib/components/ContextMenu/index.vue

@@ -26,13 +26,13 @@
     />
     <context-menu-item
       icon="stack-tab__icon-close-lefts svg-mask"
-      :title="t('VueStackTab.closeLefts')"
+      :title="t('VueStackTab.closeLeft')"
       :disabled="index <= 0 ? 'disabled' : null"
       @click="removeLeftTabs(tabItem.id)"
     />
     <context-menu-item
       icon="stack-tab__icon-close-rights svg-mask"
-      :title="t('VueStackTab.closeRights')"
+      :title="t('VueStackTab.closeRight')"
       :disabled="index >= max - 1 ? 'disabled' : null"
       @click="removeRightTabs(tabItem.id)"
     />

package/src/lib/components/PageLoading.vue

@@ -1,20 +1,20 @@
-<template>
-  <div v-if="loading" class="stack-tab-loading-mask">
-    <div class="stack-tab-loading--spin turn" />
-  </div>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import { MittType, useEmitter } from '../hooks/useTabMitt'
-const props = defineProps<{
-  tId: string
-}>()
-const emitter = useEmitter()
-const loading = ref<boolean>(false)
-emitter.on(MittType.PAGE_LOADING, ({ tId, value }: any) => {
-  if (tId === props.tId) {
-    loading.value = value
-  }
-})
-</script>
-<style scoped></style>
+<template>
+  <div v-if="loading" class="stack-tab-loading-mask">
+    <div class="stack-tab-loading--spin turn" />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MittType, useEmitter } from '../hooks/useTabMitt'
+const props = defineProps<{
+  tId: string
+}>()
+const emitter = useEmitter()
+const loading = ref<boolean>(false)
+emitter.on(MittType.PAGE_LOADING, ({ tId, value }: any) => {
+  if (tId === props.tId) {
+    loading.value = value
+  }
+})
+</script>
+<style scoped></style>

package/src/lib/components/TabHeader/TabHeaderItem.vue

@@ -1,69 +1,69 @@
-<template>
-  <li
-    ref="curtab"
-    class="stack-tab__item"
-    :class="{
-      'is-active': item.active,
-      'is-icon': item.closable
-    }"
-    @click="activeTab(true)"
-  >
-    <!--    <div v-if="!!icon" class="stack-tab__item-icon" :class="icon"></div>-->
-    <div class="stack-tab__item-title">
-      <div class="stack-tab__item-title-content" :title="title">
-        {{ title }}
-      </div>
-    </div>
-    <div
-      v-if="item.closable"
-      class="stack-tab__icon-close-fill stack-tab__item-button"
-      :title="t('VueStackTab.close')"
-      @click.stop="closeTab"
-    />
-  </li>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import type { ITabItem } from '@/lib/model/TabModel'
-import { MittType, useEmitter } from '../../hooks/useTabMitt'
-import { useI18n } from 'vue-i18n-lite'
-// 消息
-const emit = defineEmits(['close', 'active'])
-const emitter = useEmitter()
-const { t } = useI18n()
-const curtab = ref<HTMLElement>()
-const props = defineProps<{
-  item: ITabItem
-}>()
-/**
- * 如果Active为true，就看看
- */
-// watch(
-//   () => props.item.active,
-//   (val) => {
-//     if (val) {
-//       activeTab()
-//     }
-//   }
-// )
-emitter.on(MittType.TAB_ACTIVE, ({ id, isRoute }: any) => {
-  if (props.item.id === id) {
-    activeTab(isRoute)
-  }
-})
-const title = computed<string>(() => {
-  return props.item.title || t('undefined')
-})
-
-const closeTab = () => {
-  emit('close', props.item)
-}
-const activeTab = (isRoute: boolean = true) => {
-  // if (!props.active) {
-  emit('active', props.item, curtab, isRoute)
-  // }
-}
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <li
+    ref="curtab"
+    class="stack-tab__item"
+    :class="{
+      'is-active': item.active,
+      'is-icon': item.closable
+    }"
+    @click="activeTab(true)"
+  >
+    <!--    <div v-if="!!icon" class="stack-tab__item-icon" :class="icon"></div>-->
+    <div class="stack-tab__item-title">
+      <div class="stack-tab__item-title-content" :title="title">
+        {{ title }}
+      </div>
+    </div>
+    <div
+      v-if="item.closable"
+      class="stack-tab__icon-close-fill stack-tab__item-button"
+      :title="t('VueStackTab.close')"
+      @click.stop="closeTab"
+    />
+  </li>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { ITabItem } from '@/lib/model/TabModel'
+import { MittType, useEmitter } from '../../hooks/useTabMitt'
+import { useI18n } from 'vue-i18n-lite'
+// 消息
+const emit = defineEmits(['close', 'active'])
+const emitter = useEmitter()
+const { t } = useI18n()
+const curtab = ref<HTMLElement>()
+const props = defineProps<{
+  item: ITabItem
+}>()
+/**
+ * 如果Active为true，就看看
+ */
+// watch(
+//   () => props.item.active,
+//   (val) => {
+//     if (val) {
+//       activeTab()
+//     }
+//   }
+// )
+emitter.on(MittType.TAB_ACTIVE, ({ id, isRoute }: any) => {
+  if (props.item.id === id) {
+    activeTab(isRoute)
+  }
+})
+const title = computed<string>(() => {
+  return props.item.title || t('undefined')
+})
+
+const closeTab = () => {
+  emit('close', props.item)
+}
+const activeTab = (isRoute: boolean = true) => {
+  // if (!props.active) {
+  emit('active', props.item, curtab, isRoute)
+  // }
+}
+</script>
+
+<style lang="scss" scoped></style>