vue-stack-tabs 0.1.17 → 0.1.19

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,34 @@
-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())
+  }
+}