vue-stack-tabs 0.1.11 → 0.1.13

package/src/lib/i18n/index.ts

@@ -1,72 +1,72 @@
-import { useI18n } from 'vue-i18n'
-import { inject } from 'vue'
-export default () => {
-  // 引入lang目录下文件
-  // 此处使用了 VITE 的 import.meta.globEager。非 VITE 的 可以使用 require.context
-  const modules = import.meta.glob('./lang/*', { eager: true })
-
-  /**
-   * 获取所有语言文件
-   * @param {Object} mList
-   */
-  function getLangFiles(mList: any, msg: any) {
-    for (const path in mList) {
-      if (mList[path].default) {
-        //  获取文件名
-        const pathName = path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('.'))
-
-        if (msg[pathName]) {
-          msg[pathName] = {
-            ...mList[pathName],
-            ...mList[path].default
-          }
-        } else {
-          msg[pathName] = mList[path].default
-        }
-      }
-    }
-  }
-
-  /**
-   * 注册i18n实例并引入语言文件
-   */
-  // const i18n = createI18n({
-  //   fallbackLocale: 'zh-CN',
-  //   // 定义默认语言为中文
-  //   locale: 'zh-CN',
-  //   legacy: false,
-  //   // 挂载到全局，不然会报错
-  //   // globalInjection: true,
-  //   messages: getAllLang(),
-  // })
-  /**
-   * 局部使用i18n
-   */
-  // const i18n = useI18n({
-  //   useScope: 'local',
-  //   locale: 'zh-CN',
-  //   messages: getAllLang(),
-  // })
-
-  // 假设你还有其他目录下的语言文件 它的路径是 src/views/home/locales/en-US.ts
-  // 那么你就可以 使用 :lower:（小写） :upper:（大写） 来引入文件
-  // const viewModules = import.meta.globEager('../views/**/locales/[[:lower:]][[:lower:]]-[[:upper:]][[:upper:]].ts')
-
-  const allLangs: any = () => {
-    const message: any = {}
-    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',
-      locale: localeI18n.locale,
-      messages: combinateMessage
-    })
-  }
-  return {
-    getI18n
-  }
-}
+import { useI18n } from 'vue-i18n'
+import { inject } from 'vue'
+export default () => {
+  // 引入lang目录下文件
+  // 此处使用了 VITE 的 import.meta.globEager。非 VITE 的 可以使用 require.context
+  const modules = import.meta.glob('./lang/*', { eager: true })
+
+  /**
+   * 获取所有语言文件
+   * @param {Object} mList
+   */
+  function getLangFiles(mList: any, msg: any) {
+    for (const path in mList) {
+      if (mList[path].default) {
+        //  获取文件名
+        const pathName = path.substring(path.lastIndexOf('/') + 1, path.lastIndexOf('.'))
+
+        if (msg[pathName]) {
+          msg[pathName] = {
+            ...mList[pathName],
+            ...mList[path].default
+          }
+        } else {
+          msg[pathName] = mList[path].default
+        }
+      }
+    }
+  }
+
+  /**
+   * 注册i18n实例并引入语言文件
+   */
+  // const i18n = createI18n({
+  //   fallbackLocale: 'zh-CN',
+  //   // 定义默认语言为中文
+  //   locale: 'zh-CN',
+  //   legacy: false,
+  //   // 挂载到全局，不然会报错
+  //   // globalInjection: true,
+  //   messages: getAllLang(),
+  // })
+  /**
+   * 局部使用i18n
+   */
+  // const i18n = useI18n({
+  //   useScope: 'local',
+  //   locale: 'zh-CN',
+  //   messages: getAllLang(),
+  // })
+
+  // 假设你还有其他目录下的语言文件 它的路径是 src/views/home/locales/en-US.ts
+  // 那么你就可以 使用 :lower:（小写） :upper:（大写） 来引入文件
+  // const viewModules = import.meta.globEager('../views/**/locales/[[:lower:]][[:lower:]]-[[:upper:]][[:upper:]].ts')
+
+  const allLangs: any = () => {
+    const message: any = {}
+    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',
+      locale: localeI18n.locale,
+      messages: combinateMessage
+    })
+  }
+  return {
+    getI18n
+  }
+}

package/src/lib/i18n/lang/en.ts

@@ -1,15 +1,15 @@
-export default {
-  VueStackTab: {
-    close: 'close',
-    closeLefts: 'close lefts',
-    closeRights: 'close rights',
-    closeOthers: 'close others',
-    closeAll: 'close all',
-    reload: 'reload',
-    reloadAll: 'reload all',
-    maximum: 'maximum',
-    restore: 'restore',
-    undefined: 'undefined',
-    loading: 'loading'
-  }
-}
+export default {
+  VueStackTab: {
+    close: 'close',
+    closeLefts: 'close lefts',
+    closeRights: 'close rights',
+    closeOthers: 'close others',
+    closeAll: 'close all',
+    reload: 'reload',
+    reloadAll: 'reload all',
+    maximum: 'maximum',
+    restore: 'restore',
+    undefined: 'undefined',
+    loading: 'loading'
+  }
+}

package/src/lib/i18n/lang/zh-CN.ts

@@ -1,15 +1,15 @@
-export default {
-  VueStackTab: {
-    close: '关闭',
-    closeLefts: '关闭左侧',
-    closeRights: '关闭右侧',
-    closeOthers: '关闭其他',
-    closeAll: '关闭所有',
-    reload: '刷新',
-    reloadAll: '刷新所有',
-    maximum: '最大化',
-    restore: '还原',
-    undefined: '未命名',
-    loading: '加载中'
-  }
-}
+export default {
+  VueStackTab: {
+    close: '关闭',
+    closeLefts: '关闭左侧',
+    closeRights: '关闭右侧',
+    closeOthers: '关闭其他',
+    closeAll: '关闭所有',
+    reload: '刷新',
+    reloadAll: '刷新所有',
+    maximum: '最大化',
+    restore: '还原',
+    undefined: '未命名',
+    loading: '加载中'
+  }
+}

package/src/lib/iframe.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-import useTabRouter from './hooks/useTabRouter'
-useTabRouter()
-</script>
-<template>
-  <div></div>
-</template>
+<script setup lang="ts">
+import useTabRouter from './hooks/useTabRouter'
+useTabRouter()
+</script>
+<template>
+  <div></div>
+</template>

package/src/lib/index.ts

@@ -1,23 +1,32 @@
-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 './assets/style/index.scss'
-const i18n = createI18n({
-  legacy: false,
-  locale: 'zh-CN',
-  fallbackLocale: 'en-US'
-})
-
-export * from './model/TabModel'
-export { IFrame, useTabLoading, useTabRouter, useStackTab,StackTab }
-export default {
-  install(Vue: App): void {
-    tabVersion(import.meta.env.PACKAGE_VERSION)
-    Vue.component('VueStackTabs', StackTab).use(i18n)
-  }
-}
+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 './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(i18n)
+  }
+}

package/src/lib/model/TabModel.ts

@@ -1,169 +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() {
-    this.items = new Map()
-  }
-
-  /**
-   * @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
-  }
-}
+// 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())
+  }
+}