vue-stack-tabs 0.1.9 → 0.1.10

package/src/lib/utils/TabIdHelper.ts

@@ -1,70 +1,70 @@
-import type { ITabBase } from '../model/TabModel'
-import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'
-import Hex from 'hex-encoding'
-import { blake3 } from '@noble/hashes/blake3'
-
-/**
- * compress tab info to string
- * format:
- * {tab id}{current timestamp}{tab name}{tab closable}
- * @param tabData
- */
-export const encodeTabInfo = (tabData: ITabBase): string => {
-  // const info: ITabBase = {
-  //   id: tabData.id,
-  //   title: tabData.title,
-  //   iframe: tabData.iframe,
-  //   closable: tabData.closable,
-  //   refreshable: tabData.refreshable
-  // }
-  const info = `${tabData.id}|${tabData.title}|${tabData.iframe ? 'Y' : 'N'}|${tabData.closable ? 'Y' : 'N'}|${tabData.refreshable ? 'Y' : 'N'}`
-  return compressToEncodedURIComponent(info)
-  // const compressed = await compress(new TextEncoder().encode(info))
-  // return fromUint8Array(compressed, true)
-  // return compressToEncodedURIComponent(
-  //   `${tabData.id}|${tabData.title}|${tabData.iframe ? 'Y' : 'N'}|${tabData.closable ? 'Y' : 'N'}|${tabData.refreshable ? 'Y' : 'N'}`
-  // )
-}
-
-export const decodeTabInfo = (tab: string): ITabBase => {
-  // const decompressed = await decompress(toUint8Array(tab))
-  const tabString = decompressFromEncodedURIComponent(tab)
-  // const tabString = new TextDecoder().decode(decompressed)
-  // return JSON.parse(new TextDecoder().decode(decompressed))
-  // const tabString = decompressFromEncodedURIComponent(tab)
-  const tabValues: string[] = tabString.split('|')
-  return {
-    id: tabValues[0],
-    title: tabValues[1],
-    iframe: tabValues[2] === 'Y',
-    closable: tabValues[3] === 'Y',
-    refreshable: tabValues[4] === 'Y'
-  }
-}
-
-export const createPageId = (tabId: string, path: string, query: Object): string => {
-  const queryArray = []
-  console.log(query)
-  type ObjectKey = keyof typeof query
-  for (const key in query) {
-    if (!key.startsWith('__')) {
-      queryArray.push({
-        key,
-        value: query[key as ObjectKey]
-      })
-    }
-  }
-  queryArray.sort((a, b) => {
-    let result = 0
-    if (a.key > b.key) {
-      result = 1
-    } else if (a.key < b.key) {
-      result = -1
-    }
-    return result
-  })
-  const hash = blake3(`${tabId}|${path}|${JSON.stringify(queryArray)}`)
-  return Hex.encode(hash)
-  // return uuidv5(`${tabId}|${path}|${JSON.stringify(queryArray)}`, uuidv5.URL).replaceAll('-', '')
-  // return await blake3(`${tabId}|${path}|${JSON.stringify(queryArray)}`)
-}
+import type { ITabBase } from '../model/TabModel'
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'
+import Hex from 'hex-encoding'
+import { blake3 } from '@noble/hashes/blake3'
+
+/**
+ * compress tab info to string
+ * format:
+ * {tab id}{current timestamp}{tab name}{tab closable}
+ * @param tabData
+ */
+export const encodeTabInfo = (tabData: ITabBase): string => {
+  // const info: ITabBase = {
+  //   id: tabData.id,
+  //   title: tabData.title,
+  //   iframe: tabData.iframe,
+  //   closable: tabData.closable,
+  //   refreshable: tabData.refreshable
+  // }
+  const info = `${tabData.id}|${tabData.title}|${tabData.iframe ? 'Y' : 'N'}|${tabData.closable ? 'Y' : 'N'}|${tabData.refreshable ? 'Y' : 'N'}`
+  return compressToEncodedURIComponent(info)
+  // const compressed = await compress(new TextEncoder().encode(info))
+  // return fromUint8Array(compressed, true)
+  // return compressToEncodedURIComponent(
+  //   `${tabData.id}|${tabData.title}|${tabData.iframe ? 'Y' : 'N'}|${tabData.closable ? 'Y' : 'N'}|${tabData.refreshable ? 'Y' : 'N'}`
+  // )
+}
+
+export const decodeTabInfo = (tab: string): ITabBase => {
+  // const decompressed = await decompress(toUint8Array(tab))
+  const tabString = decompressFromEncodedURIComponent(tab)
+  // const tabString = new TextDecoder().decode(decompressed)
+  // return JSON.parse(new TextDecoder().decode(decompressed))
+  // const tabString = decompressFromEncodedURIComponent(tab)
+  const tabValues: string[] = tabString.split('|')
+  return {
+    id: tabValues[0],
+    title: tabValues[1],
+    iframe: tabValues[2] === 'Y',
+    closable: tabValues[3] === 'Y',
+    refreshable: tabValues[4] === 'Y'
+  }
+}
+
+export const createPageId = (tabId: string, path: string, query: Object): string => {
+  const queryArray = []
+  console.log(query)
+  type ObjectKey = keyof typeof query
+  for (const key in query) {
+    if (!key.startsWith('__')) {
+      queryArray.push({
+        key,
+        value: query[key as ObjectKey]
+      })
+    }
+  }
+  queryArray.sort((a, b) => {
+    let result = 0
+    if (a.key > b.key) {
+      result = 1
+    } else if (a.key < b.key) {
+      result = -1
+    }
+    return result
+  })
+  const hash = blake3(`${tabId}|${path}|${JSON.stringify(queryArray)}`)
+  return Hex.encode(hash)
+  // return uuidv5(`${tabId}|${path}|${JSON.stringify(queryArray)}`, uuidv5.URL).replaceAll('-', '')
+  // return await blake3(`${tabId}|${path}|${JSON.stringify(queryArray)}`)
+}

package/src/lib/utils/TabScrollHelper.ts

@@ -1,104 +1,104 @@
-/**
- * 滚动到指定位置
- * @export
- * @param {Element} wrap 滚动区域
- * @param {number} [left=0]
- * @param {number} [top=0]
- */
-export const _scrollTo = ({
-  wrap,
-  left = 0,
-  top = 0,
-  smooth = true
-}: {
-  wrap: HTMLElement | null
-  left?: number
-  top?: number
-  smooth?: boolean
-}) => {
-  if (!wrap) return
-
-  if (wrap.scrollTo) {
-    wrap.scrollTo({
-      left,
-      top,
-      behavior: smooth ? 'smooth' : 'auto'
-    })
-  } else {
-    wrap.scrollLeft = left
-    wrap.scrollTop = top
-  }
-}
-
-/**
- * 指定元素滚动到可视区域
- * @export
- * @param {Element} el 目标元素
- * @param {Element} wrap 滚动区域
- * @param {String} block 垂直方向的对齐，可选：'start', 'center', 'end', 或 'nearest'
- * @param {String} inline 水平方向的对齐，可选值同上
- */
-export function _scrollIntoView({
-  el,
-  wrap,
-  block = 'start',
-  inline = 'nearest'
-}: {
-  el: HTMLElement
-  wrap: any
-  block?: any
-  inline?: any
-}) {
-  if (!el || !wrap) return
-
-  if (el.scrollIntoView) {
-    el.scrollIntoView({ behavior: 'smooth', block, inline })
-  } else {
-    const { offsetLeft, offsetTop } = el
-    let left, top
-
-    if (block === 'center') {
-      top = offsetTop + (el.clientHeight - wrap.clientHeight) / 2
-    } else {
-      top = offsetTop
-    }
-
-    if (inline === 'center') {
-      left = offsetLeft + (el.clientWidth - wrap.clientWidth) / 2
-    } else {
-      left = offsetLeft
-    }
-
-    _scrollTo({ wrap, left, top })
-  }
-}
-
-// 获取滚动条宽度
-export const getScrollbarWidth = (function () {
-  let width: number | null = null
-
-  return function () {
-    if (width !== null) return width
-
-    const div = document.createElement('div')
-
-    div.style.cssText = 'width: 100px; height: 100px;overflow-y: scroll'
-    document.body.appendChild(div)
-    width = div.offsetWidth - div.clientWidth
-    div.parentElement?.removeChild(div)
-
-    return width
-  }
-})()
-
-/**
- * 获取最大z-index
- * @returns 最大z-index的值
- */
-export const getMaxZIndex = (key = '.stack-tab__container *'): number => {
-  const allZIndex = Array.from(document.querySelectorAll(key)).map(
-    (e) => +window.getComputedStyle(e).zIndex || 0
-  )
-  // 特殊处理，不高于90000的才行
-  return allZIndex.length ? Math.max(...allZIndex.filter((item) => item < 90000)) + 1 : 1
-}
+/**
+ * 滚动到指定位置
+ * @export
+ * @param {Element} wrap 滚动区域
+ * @param {number} [left=0]
+ * @param {number} [top=0]
+ */
+export const _scrollTo = ({
+  wrap,
+  left = 0,
+  top = 0,
+  smooth = true
+}: {
+  wrap: HTMLElement | null
+  left?: number
+  top?: number
+  smooth?: boolean
+}) => {
+  if (!wrap) return
+
+  if (wrap.scrollTo) {
+    wrap.scrollTo({
+      left,
+      top,
+      behavior: smooth ? 'smooth' : 'auto'
+    })
+  } else {
+    wrap.scrollLeft = left
+    wrap.scrollTop = top
+  }
+}
+
+/**
+ * 指定元素滚动到可视区域
+ * @export
+ * @param {Element} el 目标元素
+ * @param {Element} wrap 滚动区域
+ * @param {String} block 垂直方向的对齐，可选：'start', 'center', 'end', 或 'nearest'
+ * @param {String} inline 水平方向的对齐，可选值同上
+ */
+export function _scrollIntoView({
+  el,
+  wrap,
+  block = 'start',
+  inline = 'nearest'
+}: {
+  el: HTMLElement
+  wrap: any
+  block?: any
+  inline?: any
+}) {
+  if (!el || !wrap) return
+
+  if (el.scrollIntoView) {
+    el.scrollIntoView({ behavior: 'smooth', block, inline })
+  } else {
+    const { offsetLeft, offsetTop } = el
+    let left, top
+
+    if (block === 'center') {
+      top = offsetTop + (el.clientHeight - wrap.clientHeight) / 2
+    } else {
+      top = offsetTop
+    }
+
+    if (inline === 'center') {
+      left = offsetLeft + (el.clientWidth - wrap.clientWidth) / 2
+    } else {
+      left = offsetLeft
+    }
+
+    _scrollTo({ wrap, left, top })
+  }
+}
+
+// 获取滚动条宽度
+export const getScrollbarWidth = (function () {
+  let width: number | null = null
+
+  return function () {
+    if (width !== null) return width
+
+    const div = document.createElement('div')
+
+    div.style.cssText = 'width: 100px; height: 100px;overflow-y: scroll'
+    document.body.appendChild(div)
+    width = div.offsetWidth - div.clientWidth
+    div.parentElement?.removeChild(div)
+
+    return width
+  }
+})()
+
+/**
+ * 获取最大z-index
+ * @returns 最大z-index的值
+ */
+export const getMaxZIndex = (key = '.stack-tab__container *'): number => {
+  const allZIndex = Array.from(document.querySelectorAll(key)).map(
+    (e) => +window.getComputedStyle(e).zIndex || 0
+  )
+  // 特殊处理，不高于90000的才行
+  return allZIndex.length ? Math.max(...allZIndex.filter((item) => item < 90000)) + 1 : 1
+}

package/src/lib/utils/UriHelper.ts

@@ -1,22 +1,22 @@
-export const uriDecode = (uri: string) => {
-  const uris = uri.split('?')
-  if (uris.length <= 1) {
-    return {
-      path: uris[0],
-      query: {}
-    }
-  } else {
-    const arr = uris[1].split('&')
-    const query: Record<string, string> = {}
-    for (const item of arr) {
-      const kv = item.split('=')
-      if (kv[1] !== null && kv[1] !== undefined && kv[1] !== '') {
-        query[kv[0]] = kv[1]
-      }
-    }
-    return {
-      path: uris[0],
-      query
-    }
-  }
-}
+export const uriDecode = (uri: string) => {
+  const uris = uri.split('?')
+  if (uris.length <= 1) {
+    return {
+      path: uris[0],
+      query: {}
+    }
+  } else {
+    const arr = uris[1].split('&')
+    const query: Record<string, string> = {}
+    for (const item of arr) {
+      const kv = item.split('=')
+      if (kv[1] !== null && kv[1] !== undefined && kv[1] !== '') {
+        query[kv[0]] = kv[1]
+      }
+    }
+    return {
+      path: uris[0],
+      query
+    }
+  }
+}

package/types/index.d.ts

@@ -1,11 +1,3 @@
-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';
-export * from './model/TabModel';
-export { IFrame, useTabLoading, useTabRouter, useStackTab };
-declare const _default: {
-    install(Vue: App): void;
-};
-export default _default;
+export * from './src/lib/index'
+import VueStackTabs from './src/lib/index'
+export default VueStackTabs

package/types/src/lib/StackTabs.vue.d.ts

@@ -0,0 +1,122 @@
+import type { TransitionProps, DefineComponent } from 'vue';
+import { type ITabData, TabScrollMode } from './model/TabModel';
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    defaultTabs?: ITabData[] | undefined;
+    max?: number | undefined;
+    append?: string | undefined;
+    contextmenu?: boolean | object | undefined;
+    pageTransition?: string | undefined;
+    tabTransition?: string | TransitionProps | undefined;
+    tabScrollMode?: TabScrollMode | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    i18n?: {
+        locale?: string | undefined;
+        messages?: object | undefined;
+    } | undefined;
+    messages?: any;
+    reloadable?: boolean | undefined;
+    closable?: boolean | undefined;
+    space?: number | undefined;
+    iframePath: string;
+}>, {
+    defaultTabs: () => never[];
+    max: number;
+    append: string;
+    contextmenu: boolean;
+    tabTransition: string;
+    pageTransition: string;
+    tabScrollMode: TabScrollMode;
+    width: string;
+    height: string;
+    i18n: () => {
+        locale: string;
+        messages: {};
+    };
+    reloadable: boolean;
+    closable: boolean;
+    space: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onActive: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    defaultTabs?: ITabData[] | undefined;
+    max?: number | undefined;
+    append?: string | undefined;
+    contextmenu?: boolean | object | undefined;
+    pageTransition?: string | undefined;
+    tabTransition?: string | TransitionProps | undefined;
+    tabScrollMode?: TabScrollMode | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    i18n?: {
+        locale?: string | undefined;
+        messages?: object | undefined;
+    } | undefined;
+    messages?: any;
+    reloadable?: boolean | undefined;
+    closable?: boolean | undefined;
+    space?: number | undefined;
+    iframePath: string;
+}>, {
+    defaultTabs: () => never[];
+    max: number;
+    append: string;
+    contextmenu: boolean;
+    tabTransition: string;
+    pageTransition: string;
+    tabScrollMode: TabScrollMode;
+    width: string;
+    height: string;
+    i18n: () => {
+        locale: string;
+        messages: {};
+    };
+    reloadable: boolean;
+    closable: boolean;
+    space: number;
+}>>> & {
+    onOnActive?: ((...args: any[]) => any) | undefined;
+}, {
+    closable: boolean;
+    i18n: {
+        locale?: string | undefined;
+        messages?: object | undefined;
+    };
+    contextmenu: boolean | object;
+    max: number;
+    space: number;
+    width: string;
+    tabScrollMode: TabScrollMode;
+    tabTransition: string | TransitionProps;
+    defaultTabs: ITabData[];
+    append: string;
+    pageTransition: string;
+    height: string;
+    reloadable: boolean;
+}, {}>, {
+    leftButton?(_: {}): any;
+    rightButton?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/src/lib/components/ContextMenu/ContextMenuItem.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    icon?: string | undefined;
+    title: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    icon?: string | undefined;
+    title: string;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/types/src/lib/components/ContextMenu/index.vue.d.ts

@@ -0,0 +1,45 @@
+import type { ITabItem, IContextMenu } from '../../model/TabModel';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    index: number;
+    left: number;
+    top: number;
+    contextMenu?: IContextMenu[] | undefined;
+    tabItem: ITabItem;
+    max: number;
+}>, {
+    left: number;
+    top: number;
+    contextMen: never[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    index: number;
+    left: number;
+    top: number;
+    contextMenu?: IContextMenu[] | undefined;
+    tabItem: ITabItem;
+    max: number;
+}>, {
+    left: number;
+    top: number;
+    contextMen: never[];
+}>>>, {
+    left: number;
+    top: number;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};