vue-stack-tabs 0.1.18 → 0.1.20

package/src/lib/hooks/useTabRouter.ts

@@ -1,93 +1,93 @@
-import { defu } from 'defu'
-
-import { getCurrentInstance } from 'vue'
-import type { ComponentInternalInstance } from 'vue'
-import { type RouteLocationPathRaw, useRoute, useRouter } from 'vue-router'
-
-import useTabpanel from '@/lib/hooks/useTabpanel'
-import { uriDecode } from '@/lib/utils/UriHelper'
-export default () => {
-  const { attrs } = getCurrentInstance() as ComponentInternalInstance
-  const { pageShown, getTab, markDeletableCache, removeComponent, getComponent } = useTabpanel()
-  const route = useRoute()
-  const router = useRouter()
-  let currentId = ''
-  // const currentPageId = ''
-  let currentTab = ''
-
-  currentId = attrs.tId as string
-  // currentPageId = attrs.pId as string
-  currentTab = route.query.__tab as string
-  const forward = (to: RouteLocationPathRaw) => {
-    pageShown.value = false
-    const query = defu(
-      {
-        __tab: currentTab
-      },
-      to.query
-    )
-    router.push({
-      path: to.path,
-      query
-    })
-  }
-  /**
-   * 返回
-   * @param to url or step
-   * @param query 返回时要加截的数据
-   */
-  const backward = (to: number | string, query?: Object) => {
-    pageShown.value = false
-
-    const tab = getTab(currentId)
-    if (!tab) {
-      return
-    }
-    const tabStack = tab.pages
-    let absTo = 0
-    if (typeof to === 'number') {
-      absTo = Math.abs(to)
-    } else {
-      let index = 1
-      let hasPath = false
-      const pageItems = tabStack.list()
-      const url = uriDecode(to)
-      query = defu(url.query, query)
-      for (let i = tabStack.size() - 2; i >= 0; i--) {
-        if (pageItems[i].path === url.path) {
-          hasPath = true
-          break
-        }
-        index += 1
-      }
-      if (hasPath) {
-        absTo = index
-      }
-    }
-
-    if (absTo === 0 || tabStack!.size() <= absTo) {
-      return
-    }
-    // const removeCaches = new Set()
-    for (let i = 0; i < absTo; i++) {
-      const popRoute = tabStack.pop()
-      removeComponent(popRoute!.id)
-      markDeletableCache(popRoute!.id)
-    }
-    const pageRoute = tabStack?.peek()
-    const component = getComponent(pageRoute!.id)
-    if (component !== null && component !== undefined) {
-      const sourceComponent = component.components.DynamicComponent
-      sourceComponent.props = defu(query, sourceComponent.props)
-    }
-    router.push({
-      path: pageRoute!.path,
-      query: pageRoute!.query
-    })
-  }
-
-  return {
-    forward,
-    backward
-  }
-}
+import { defu } from 'defu'
+
+import { getCurrentInstance } from 'vue'
+import type { ComponentInternalInstance } from 'vue'
+import { type RouteLocationPathRaw, useRoute, useRouter } from 'vue-router'
+
+import useTabpanel from '@/lib/hooks/useTabpanel'
+import { uriDecode } from '@/lib/utils/UriHelper'
+export default () => {
+  const { attrs } = getCurrentInstance() as ComponentInternalInstance
+  const { pageShown, getTab, markDeletableCache, removeComponent, getComponent } = useTabpanel()
+  const route = useRoute()
+  const router = useRouter()
+  let currentId = ''
+  // const currentPageId = ''
+  let currentTab = ''
+
+  currentId = attrs.tId as string
+  // currentPageId = attrs.pId as string
+  currentTab = route.query.__tab as string
+  const forward = (to: RouteLocationPathRaw) => {
+    pageShown.value = false
+    const query = defu(
+      {
+        __tab: currentTab
+      },
+      to.query
+    )
+    router.push({
+      path: to.path,
+      query
+    })
+  }
+  /**
+   * 返回
+   * @param to url or step
+   * @param query 返回时要加截的数据
+   */
+  const backward = (to: number | string, query?: Object) => {
+    pageShown.value = false
+
+    const tab = getTab(currentId)
+    if (!tab) {
+      return
+    }
+    const tabStack = tab.pages
+    let absTo = 0
+    if (typeof to === 'number') {
+      absTo = Math.abs(to)
+    } else {
+      let index = 1
+      let hasPath = false
+      const pageItems = tabStack.list()
+      const url = uriDecode(to)
+      query = defu(url.query, query)
+      for (let i = tabStack.size() - 2; i >= 0; i--) {
+        if (pageItems[i].path === url.path) {
+          hasPath = true
+          break
+        }
+        index += 1
+      }
+      if (hasPath) {
+        absTo = index
+      }
+    }
+
+    if (absTo === 0 || tabStack!.size() <= absTo) {
+      return
+    }
+    // const removeCaches = new Set()
+    for (let i = 0; i < absTo; i++) {
+      const popRoute = tabStack.pop()
+      removeComponent(popRoute!.id)
+      markDeletableCache(popRoute!.id)
+    }
+    const pageRoute = tabStack?.peek()
+    const component = getComponent(pageRoute!.id)
+    if (component !== null && component !== undefined) {
+      const sourceComponent = component.components.DynamicComponent
+      sourceComponent.props = defu(query, sourceComponent.props)
+    }
+    router.push({
+      path: pageRoute!.path,
+      query: pageRoute!.query
+    })
+  }
+
+  return {
+    forward,
+    backward
+  }
+}

package/src/lib/hooks/useTabpanel.tsx

@@ -19,7 +19,7 @@ const components = new Map<string, any>()
 const deletableCache = new Set<String>()
 const pageShown = ref<boolean>(true)
 const SESSION_TAB_NAME = 'stacktab-active-tab'
-
+let initialed = false
 let max = 0
 export default () => {
   const router = useRouter()
@@ -90,6 +90,7 @@ export default () => {
         tabs.value.push(temp)
       }
     }
+    initialed = true
   }
   const hasTab = (id: string) => {
     for (const tab of tabs.value) {
@@ -496,6 +497,7 @@ export default () => {
     tabs,
     caches,
     pageShown,
+    initialed,
     setMaxSize,
     canAddTab,
     initial,

package/src/lib/i18n/index.ts

@@ -1,5 +1,5 @@
-import { useI18n } from 'vue-i18n'
-import { inject } from 'vue'
+import { createI18n } from 'vue-i18n-lite'
+
 export default () => {
   // 引入lang目录下文件
   // 此处使用了 VITE 的 import.meta.globEager。非 VITE 的 可以使用 require.context
@@ -57,14 +57,24 @@ export default () => {
     getLangFiles(modules, message)
     return message
   }
-  const localeI18n = inject('locales') as { locale: string; messages: object }
-  const getI18n = () => {
-    const combinateMessage = { ...allLangs(), ...localeI18n.messages }
-    return useI18n({
-      useScope: 'local',
+  // const localeI18n = inject('locales') as { locale: string; messages: object }
+  const getI18n = (localeI18n?: any) => {
+    let combinateMessage = { ...allLangs() }
+    if (!localeI18n) {
+      combinateMessage = { ...allLangs(), ...localeI18n.messages }
+    }
+
+    return createI18n({
       locale: localeI18n.locale,
+      fallbackLocale: 'en',
       messages: combinateMessage
     })
+    // const combinateMessage = { ...allLangs(), ...localeI18n.messages }
+    // return useI18n({
+    //   useScope: 'local',
+    //   locale: localeI18n.locale,
+    //   messages: combinateMessage
+    // })
   }
   return {
     getI18n

package/src/lib/index.ts

@@ -1,33 +1,37 @@
-import type { App } from 'vue'
-import { createI18n } from 'vue-i18n'
-import StackTab from './StackTabs.vue'
-import tabVersion from './banner'
-import IFrame from './iframe.vue'
-import useTabLoading from './hooks/useTabLoading'
-import useTabRouter from './hooks/useTabRouter'
-import useStackTab from './hooks/useStackTab'
-import TabHeaderButton from '@/lib/components/TabHeader/TabHeaderButton.vue'
-import useTabMitt from '@/lib/hooks/useTabMitt'
-import './assets/style/index.scss'
-
-const i18n = createI18n({
-  legacy: false,
-  locale: 'zh-CN',
-  fallbackLocale: 'en-US'
-})
-
-export * from './model/TabModel'
-// Cutsom type
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    VueStackTabs: typeof StackTab
-  }
-}
-
-export { IFrame, useTabLoading, useTabRouter, useStackTab, TabHeaderButton, StackTab }
-export default {
-  install(Vue: App): void {
-    tabVersion(import.meta.env.PACKAGE_VERSION)
-    Vue.component('VueStackTabs', StackTab).use(useTabMitt).use(i18n)
-  }
-}
+import type { App } from 'vue'
+// import { createI18n } from 'vue-i18n'
+import i18n from './i18n'
+import StackTab from './StackTabs.vue'
+import tabVersion from './banner'
+import IFrame from './iframe.vue'
+import useTabLoading from './hooks/useTabLoading'
+import useTabRouter from './hooks/useTabRouter'
+import useStackTab from './hooks/useStackTab'
+import TabHeaderButton from '@/lib/components/TabHeader/TabHeaderButton.vue'
+import useTabMitt from '@/lib/hooks/useTabMitt'
+import './assets/style/index.scss'
+//
+// const i18n = createI18n({
+//   legacy: false,
+//   locale: 'zh-CN',
+//   fallbackLocale: 'en-US'
+// })
+
+export * from './model/TabModel'
+// Cutsom type
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    VueStackTabs: typeof StackTab
+  }
+}
+
+export { IFrame, useTabLoading, useTabRouter, useStackTab, TabHeaderButton, StackTab }
+export default {
+  install(
+    Vue: App,
+    options: { locale: string; messages: any } = { locale: 'zh-CN', messages: {} }
+  ): void {
+    tabVersion(import.meta.env.PACKAGE_VERSION)
+    Vue.component('VueStackTabs', StackTab).use(useTabMitt).use(i18n().getI18n(options))
+  }
+}

package/src/lib/model/TabModel.ts

@@ -1,178 +1,178 @@
-// Tab的滚动方式
-export enum TabScrollMode {
-  // 使用滚轮
-  WHEEL = 'wheel',
-  // 使用按钮
-  BUTTON = 'button',
-  // 两者都可以
-  BOTH = 'both'
-}
-
-// export enum EventType {
-//   I18N_LOCALES = 'I18N_LOCALES',
-//   PANEL_MAXIMUM = 'PANEL_MAXIMUM',
-//   TAB_ACTIVE = 'TAB_ACTIVE',
-//   TAB_CLOSE = 'TAB_CLOSE',
-//   TAB_CLOSE_ALL = 'TAB_CLOSE_ALL',
-//   TAB_CLOSE_RIGHT = 'TAB_CLOSE_RIGHT',
-//   TAB_CLOSE_LEFT = 'TAB_CLOSE_LEFT',
-//   TAB_REFRESH = 'TAB_REFRESH',
-//   TAB_REFRESH_ALL = 'TAB_REFRESH_ALL'
-// }
-// 拖拽数据接口
-export interface DragData {
-  thumbLeft: number
-  startScrollLeft: number
-  startThumbLeft: number
-  startPageX: number
-}
-// 滑块数据接口
-export interface ScrollData {
-  clientWidth: number
-  scrollWidth: number
-  scrollLeft: number
-}
-// 滚动条事件类型
-export type ScrollEvents = {
-  ScrollUpdate: void
-}
-
-/**
- * Tab data for open
- */
-export interface ITabData extends ITabBase {
-  // tab name
-  title: string
-  path: string
-  query?: Record<string, string>
-}
-export interface ITabBase {
-  id?: string
-  title: string
-  closable?: boolean
-  refreshable?: boolean
-  iframe?: boolean
-}
-export interface ITabItem extends ITabBase {
-  id: string
-  closable: boolean
-  refreshable: boolean
-  iframe: boolean
-  url?: string
-  active: boolean
-  pages: Stack<ITabPage>
-}
-
-export interface ITabPage {
-  id: string
-  tabId: string
-  path: string
-  query?: Record<string, string>
-}
-export interface IContextMenu {
-  icon?: string
-  title: string
-  callback(id: string): void
-  disabled: (tabData: ITabBase) => boolean
-}
-// export interface TabRouteLocationRaw {
-//   path: string
-//   query?: any
-// }
-// export interface PageRouteLocationRaw {
-//   pId: string
-//   path: string
-//   query: any
-// }
-export class Stack<T> {
-  // 存储的Map
-  private items: Map<number, T>
-
-  //
-  constructor(items?:T[]) {
-    this.items = new Map()
-    if(items) {
-      for (const item of items) {
-        this.push(item)
-      }
-    }
-  }
-
-  /**
-   * @description: 入栈
-   * @param {T} element 要入栈的元素
-   */
-  push(element: T) {
-    this.items.set(this.items.size, element)
-  }
-
-  /**
-   * @description: 出栈
-   * @return {T} 返回出栈的元素
-   */
-  pop(): T | undefined {
-    if (this.isEmpty()) {
-      return undefined
-    }
-    const result = this.items.get(this.items.size - 1)
-    this.items.delete(this.items.size - 1)
-    return result
-  }
-
-  /**
-   * @description: 返回栈顶的元素
-   * @return {T}
-   */
-  peek(): T | undefined {
-    if (this.isEmpty()) {
-      return undefined
-    }
-    return this.items.get(this.items.size - 1)
-  }
-
-  /**
-   * @description: 返回栈是否为空
-   * @return {Boolean}
-   */
-  isEmpty(): boolean {
-    return this.items.size === 0
-  }
-
-  /**
-   * @description: 返回栈里的元素个数
-   * @return {Number}
-   */
-  size(): number {
-    return this.items.size
-  }
-
-  /**
-   * @description: 清空栈
-   */
-  clear() {
-    this.items.clear()
-  }
-
-  list() {
-    return Array.from(this.items.values())
-  }
-
-  /**
-   * @description: 覆盖Object默认的toString
-   * @return {String}
-   */
-  toString(): string {
-    if (this.isEmpty()) {
-      return ''
-    }
-    let result: string = ''
-    this.items.forEach((value, key) => {
-      result = `${result}${key === 0 ? '' : ', '}${value}`
-    })
-    return result
-  }
-  toJSON() {
-    // return Object.fromEntries(this.items)
-    return Array.from(this.items.values())
-  }
-}
+// Tab的滚动方式
+export enum TabScrollMode {
+  // 使用滚轮
+  WHEEL = 'wheel',
+  // 使用按钮
+  BUTTON = 'button',
+  // 两者都可以
+  BOTH = 'both'
+}
+
+// export enum EventType {
+//   I18N_LOCALES = 'I18N_LOCALES',
+//   PANEL_MAXIMUM = 'PANEL_MAXIMUM',
+//   TAB_ACTIVE = 'TAB_ACTIVE',
+//   TAB_CLOSE = 'TAB_CLOSE',
+//   TAB_CLOSE_ALL = 'TAB_CLOSE_ALL',
+//   TAB_CLOSE_RIGHT = 'TAB_CLOSE_RIGHT',
+//   TAB_CLOSE_LEFT = 'TAB_CLOSE_LEFT',
+//   TAB_REFRESH = 'TAB_REFRESH',
+//   TAB_REFRESH_ALL = 'TAB_REFRESH_ALL'
+// }
+// 拖拽数据接口
+export interface DragData {
+  thumbLeft: number
+  startScrollLeft: number
+  startThumbLeft: number
+  startPageX: number
+}
+// 滑块数据接口
+export interface ScrollData {
+  clientWidth: number
+  scrollWidth: number
+  scrollLeft: number
+}
+// 滚动条事件类型
+export type ScrollEvents = {
+  ScrollUpdate: void
+}
+
+/**
+ * Tab data for open
+ */
+export interface ITabData extends ITabBase {
+  // tab name
+  title: string
+  path: string
+  query?: Record<string, string>
+}
+export interface ITabBase {
+  id?: string
+  title: string
+  closable?: boolean
+  refreshable?: boolean
+  iframe?: boolean
+}
+export interface ITabItem extends ITabBase {
+  id: string
+  closable: boolean
+  refreshable: boolean
+  iframe: boolean
+  url?: string
+  active: boolean
+  pages: Stack<ITabPage>
+}
+
+export interface ITabPage {
+  id: string
+  tabId: string
+  path: string
+  query?: Record<string, string>
+}
+export interface IContextMenu {
+  icon?: string
+  title: string
+  callback(id: string): void
+  disabled: (tabData: ITabBase) => boolean
+}
+// export interface TabRouteLocationRaw {
+//   path: string
+//   query?: any
+// }
+// export interface PageRouteLocationRaw {
+//   pId: string
+//   path: string
+//   query: any
+// }
+export class Stack<T> {
+  // 存储的Map
+  private items: Map<number, T>
+
+  //
+  constructor(items?: T[]) {
+    this.items = new Map()
+    if (items) {
+      for (const item of items) {
+        this.push(item)
+      }
+    }
+  }
+
+  /**
+   * @description: 入栈
+   * @param {T} element 要入栈的元素
+   */
+  push(element: T) {
+    this.items.set(this.items.size, element)
+  }
+
+  /**
+   * @description: 出栈
+   * @return {T} 返回出栈的元素
+   */
+  pop(): T | undefined {
+    if (this.isEmpty()) {
+      return undefined
+    }
+    const result = this.items.get(this.items.size - 1)
+    this.items.delete(this.items.size - 1)
+    return result
+  }
+
+  /**
+   * @description: 返回栈顶的元素
+   * @return {T}
+   */
+  peek(): T | undefined {
+    if (this.isEmpty()) {
+      return undefined
+    }
+    return this.items.get(this.items.size - 1)
+  }
+
+  /**
+   * @description: 返回栈是否为空
+   * @return {Boolean}
+   */
+  isEmpty(): boolean {
+    return this.items.size === 0
+  }
+
+  /**
+   * @description: 返回栈里的元素个数
+   * @return {Number}
+   */
+  size(): number {
+    return this.items.size
+  }
+
+  /**
+   * @description: 清空栈
+   */
+  clear() {
+    this.items.clear()
+  }
+
+  list() {
+    return Array.from(this.items.values())
+  }
+
+  /**
+   * @description: 覆盖Object默认的toString
+   * @return {String}
+   */
+  toString(): string {
+    if (this.isEmpty()) {
+      return ''
+    }
+    let result: string = ''
+    this.items.forEach((value, key) => {
+      result = `${result}${key === 0 ? '' : ', '}${value}`
+    })
+    return result
+  }
+  toJSON() {
+    // return Object.fromEntries(this.items)
+    return Array.from(this.items.values())
+  }
+}