vue-stack-tabs 0.1.0

package/src/lib/model/TabModel.ts

@@ -0,0 +1,182 @@
+// 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
+  }
+}
+// export { TabScrollMode, Stack, EventType }
+// export type {
+//   ScrollData,
+//   ScrollEvents,
+//   DragData,
+//   ITabData,
+//   ITabItem,
+//   ITabPage,
+//   ITabBase,
+//   IContextMenu,
+//   TabRouteLocationRaw,
+//   PageRouteLocationRaw
+// }

package/src/lib/utils/TabIdHelper.ts

@@ -0,0 +1,76 @@
+// import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'
+// import { blake3 } from 'hash-wasm'
+// import { compress, decompress } from 'brotli-compress'
+// import { fromUint8Array } from 'js-base64'
+// import { compress, decompress } from 'lzw-compressor'
+import type { ITabBase } from '@/lib/model/TabModel'
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'
+// import { v5 as uuidv5 } from 'uuid'
+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

@@ -0,0 +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
+}

package/src/lib/utils/UriHelper.ts

@@ -0,0 +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
+    }
+  }
+}

package/types/banner.d.ts

@@ -0,0 +1,2 @@
+declare const printVersion: (version: string) => void;
+export default printVersion;

package/types/hooks/useStackTab.d.ts

@@ -0,0 +1,8 @@
+import { DebouncedFunc } from 'lodash-es';
+declare const _default: () => {
+    openNewTab: DebouncedFunc<(tab: ITabData) => Promise<any>>;
+    setIFramePath: (path: string) => void;
+    active: any;
+    reset: any;
+};
+export default _default;

package/types/hooks/useTabLoading.d.ts

@@ -0,0 +1,5 @@
+declare const _default: () => {
+    openTabLoading: () => void;
+    closeTabLoading: () => void;
+};
+export default _default;

package/types/hooks/useTabRouter.d.ts

@@ -0,0 +1,5 @@
+declare const _default: () => {
+    forward: (to: TabRouteLocationRaw) => void;
+    backward: (to: number | string, query?: Object) => void;
+};
+export default _default;

package/types/iframe.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/types/index.d.ts

@@ -0,0 +1,10 @@
+import IFrame from './iframe.vue';
+import useTabLoading from './hooks/useTabLoading';
+import useTabRouter from './hooks/useTabRouter';
+import useStackTab from './hooks/useStackTab';
+export { IFrame, useTabLoading, useTabRouter, useStackTab };
+export * from './model/TabModel';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/types/model/TabModel.d.ts

@@ -0,0 +1,114 @@
+export declare enum TabScrollMode {
+    WHEEL = "wheel",
+    BUTTON = "button",
+    BOTH = "both"
+}
+export declare 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 {
+    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 declare class Stack<T> {
+    private items;
+    constructor();
+    /**
+     * @description: 入栈
+     * @param {T} element 要入栈的元素
+     */
+    push(element: T): void;
+    /**
+     * @description: 出栈
+     * @return {T} 返回出栈的元素
+     */
+    pop(): T | undefined;
+    /**
+     * @description: 返回栈顶的元素
+     * @return {T}
+     */
+    peek(): T | undefined;
+    /**
+     * @description: 返回栈是否为空
+     * @return {Boolean}
+     */
+    isEmpty(): boolean;
+    /**
+     * @description: 返回栈里的元素个数
+     * @return {Number}
+     */
+    size(): number;
+    /**
+     * @description: 清空栈
+     */
+    clear(): void;
+    list(): T[];
+    /**
+     * @description: 覆盖Object默认的toString
+     * @return {String}
+     */
+    toString(): string;
+}