vue-stack-tabs 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-stack-tabs",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vue.js component for router tab.",
   "private": false,
   "type": "module",
@@ -9,7 +9,8 @@
     "dist",
     "types"
   ],
-  "main": "dist/vue-stack-tabs.es.js",
+  "main": "dist/vue-stack-tabs.umd.js",
+  "module": "dist/vue-stack-tabs.es.js",
   "types": "types/index.d.ts",
   "repository": {
     "type": "git",
@@ -38,44 +39,45 @@
     "lz-string": "^1.5.0",
     "ulidx": "^2.3.0",
     "uuid": "^9.0.1",
-    "vue-i18n": "^9.9.1"
+    "vue-i18n": "^9.10.1",
+    "vue-loading-overlay": "^6.0.4"
   },
   "devDependencies": {
     "@mdit/plugin-tasklist": "^0.8.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@rushstack/eslint-patch": "^1.7.2",
     "@tsconfig/node21": "^21.0.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.11.25",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/runtime-core": "^3.4.19",
+    "@vue/runtime-core": "^3.4.21",
     "@vue/tsconfig": "^0.5.1",
-    "element-plus": "^2.5.6",
-    "eslint": "^8.56.0",
+    "element-plus": "^2.6.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.21.1",
+    "eslint-plugin-vue": "^9.22.0",
     "js-base64": "^3.7.7",
     "markdown-it": "^14.0.0",
     "normalize.css": "^8.0.1",
     "npm-run-all2": "^6.1.2",
-    "pinia": "^2.1.7",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
     "sass-loader": "^14.1.1",
     "typescript": "~5.3.3",
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.3",
+    "vite": "^5.1.5",
     "vite-plugin-dts": "^3.7.3",
     "vite-plugin-package-version": "^1.1.0",
+    "vite-plugin-require-transform": "^1.0.21",
     "vitepress": "1.0.0-rc.44",
-    "vue": "^3.4.19",
-    "vue-loading-overlay": "^6.0.4",
-    "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^1.8.27",
+    "vue-router": "^4.3.0",
+    "vue": "^3.4.21"
   },
   "scripts": {
     "docs:dev": "vitepress dev docs",

package/src/lib/StackTabs.vue

@@ -40,22 +40,14 @@
 
 <script lang="tsx" setup>
 import 'vue-loading-overlay/dist/css/index.css'
-import {
-  type DefineComponent,
-  onBeforeMount,
-  onUnmounted,
-  provide,
-  ref,
-  type VNode,
-  watch
-} from 'vue'
-import type { TransitionProps } from 'vue'
+import { onBeforeMount, onUnmounted, provide, ref, watch } from 'vue'
+import type { TransitionProps, DefineComponent, VNode } from 'vue'
 import { type RouteLocationNormalizedLoaded, useRouter } from 'vue-router'
-import { getMaxZIndex } from '@/lib/utils/TabScrollHelper'
-import { type ITabData, TabScrollMode } from '@/lib/model/TabModel'
-import TabHeader from '@/lib/components/TabHeader/index.vue'
-import useTabpanel from '@/lib/hooks/useTabpanel'
-import useStackTab from '@/lib/hooks/useStackTab'
+import { getMaxZIndex } from './utils/TabScrollHelper'
+import { type ITabData, TabScrollMode } from './model/TabModel'
+import TabHeader from './components/TabHeader/index.vue'
+import useTabpanel from './hooks/useTabpanel'
+import useStackTab from './hooks/useStackTab'
 const { tabs, pageShown, caches, addPage, destroy, initial } = useTabpanel()
 const emit = defineEmits(['onActive'])
 const props = withDefaults(

package/src/lib/components/ContextMenu/ContextMenuItem.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="StackTabContextMenuItem">
+<script setup lang="ts">
 defineProps<{
   icon?: string
   title: string

package/src/lib/components/ContextMenu/index.vue

@@ -61,13 +61,13 @@
   </div>
 </template>
 
-<script setup lang="ts" name="StackTabContextMenu">
+<script setup lang="ts">
 import { ref, onMounted, reactive } from 'vue'
-import type { ITabItem, IContextMenu } from '@/lib/model/TabModel'
-import localeI18n from '@/lib/i18n'
-import { getMaxZIndex } from '@/lib/utils/TabScrollHelper'
-import useTabpanel from '@/lib/hooks/useTabpanel'
-import ContextMenuItem from '@/lib/components/ContextMenu/ContextMenuItem.vue'
+import type { ITabItem, IContextMenu } from '../../model/TabModel'
+import localeI18n from '../../i18n'
+import { getMaxZIndex } from '../../utils/TabScrollHelper'
+import useTabpanel from '../../hooks/useTabpanel'
+import ContextMenuItem from './ContextMenuItem.vue'
 // const emit = defineEmits(['close', 'closeAll', 'closeLeft', 'closeRight', 'refresh', 'refreshAll'])
 const props = withDefaults(
   defineProps<{

package/src/lib/components/TabHeader/index.vue

@@ -53,15 +53,15 @@
 <script lang="ts" setup>
 import { inject, computed, ref } from 'vue'
 import type { TransitionProps, Ref } from 'vue'
-import { TabScrollMode } from '@/lib/model/TabModel'
-import type { ITabItem } from '@/lib/model/TabModel'
-import ContextMenu from '@/lib/components/ContextMenu/index.vue'
-import useContextMenu from '@/lib/hooks/useContextMenu'
-import localeI18n from '@/lib/i18n'
-import useTabpanel from '@/lib/hooks/useTabpanel'
-import TabHeaderItem from '@/lib/components/TabHeader/TabHeaderItem.vue'
-import TabHeaderScroll from '@/lib/components/TabHeader/TabHeaderScroll.vue'
-import TabHeaderButton from '@/lib/components/TabHeader/TabHeaderButton.vue'
+import { TabScrollMode } from '../../model/TabModel'
+import type { ITabItem } from '../../model/TabModel'
+import ContextMenu from './index.vue'
+import useContextMenu from '../../hooks/useContextMenu'
+import localeI18n from '../../i18n'
+import useTabpanel from '../../hooks/useTabpanel'
+import TabHeaderItem from './TabHeaderItem.vue'
+import TabHeaderScroll from './TabHeaderScroll.vue'
+import TabHeaderButton from './TabHeaderButton.vue'
 // @ts-ignore
 const { t } = localeI18n().getI18n()
 const maximum = inject<boolean>('maximum')

package/src/lib/hooks/useContextMenu.ts

@@ -1,5 +1,5 @@
 import { onUnmounted, onMounted, ref, reactive, nextTick } from 'vue'
-import type { ITabItem } from '@/lib/model/TabModel'
+import type { ITabItem } from '../model/TabModel'
 export default () => {
   const contextMenuData = reactive({
     item: {},

package/src/lib/hooks/useStackTab.ts

@@ -1,10 +1,10 @@
 import { useRouter } from 'vue-router'
-import useTabpanel from '@/lib/hooks/useTabpanel'
+import useTabpanel from '../hooks/useTabpanel'
 import { throttle } from 'lodash-es'
-import type { ITabData } from '@/lib/model/TabModel'
+import type { ITabData } from '../model/TabModel'
 import { defu } from 'defu'
-import { encodeTabInfo } from '@/lib/utils/TabIdHelper'
-import { uriDecode } from '@/lib/utils/UriHelper'
+import { encodeTabInfo } from '../utils/TabIdHelper'
+import { uriDecode } from '../utils/UriHelper'
 import { ulid } from 'ulidx'
 let iframePath: string
 export default () => {

package/src/lib/hooks/useTabpanel.tsx

@@ -1,13 +1,13 @@
-import type { ITabData, ITabItem, ITabPage } from '@/lib/model/TabModel'
+import type { ITabData, ITabItem, ITabPage } from '../model/TabModel'
 import { defineComponent, onActivated, onUnmounted, ref, unref } from 'vue'
 import type { DefineComponent, VNode } from 'vue'
 import { useRouter } from 'vue-router'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { ulid } from 'ulidx'
-import { encodeTabInfo, createPageId, decodeTabInfo } from '@/lib/utils/TabIdHelper'
+import { encodeTabInfo, createPageId, decodeTabInfo } from '../utils/TabIdHelper'
 import { defu } from 'defu'
-import { Stack } from '@/lib/model/TabModel'
-import { uriDecode } from '@/lib/utils/UriHelper'
+import { Stack } from '../model/TabModel'
+import { uriDecode } from '../utils/UriHelper'
 
 const tabs = ref<ITabItem[]>([])
 const defaultTabs: ITabItem[] = []

package/src/lib/iframe.vue

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

package/src/lib/index.ts

@@ -1,10 +1,7 @@
 import type { App } from 'vue'
 import { createI18n } from 'vue-i18n'
 import StackTab from './StackTabs.vue'
-// import VueEmttier from './hooks/useMitt'
 import tabVersion from './banner'
-// import './assets/style/index.scss'
-// import 'vue-loading-overlay/dist/css/index.css'
 import IFrame from './iframe.vue'
 import useTabLoading from './hooks/useTabLoading'
 import useTabRouter from './hooks/useTabRouter'
@@ -15,8 +12,9 @@ const i18n = createI18n({
   locale: 'zh-CN',
   fallbackLocale: 'en-US'
 })
-export { IFrame, useTabLoading, useTabRouter, useStackTab }
+
 export * from './model/TabModel'
+export { IFrame, useTabLoading, useTabRouter, useStackTab }
 export default {
   install(app: App): void {
     tabVersion(import.meta.env.PACKAGE_VERSION)

package/src/lib/utils/TabIdHelper.ts

@@ -1,11 +1,5 @@
-// 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 type { ITabBase } from '../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'
 

package/types/hooks/useStackTab.d.ts

@@ -1,4 +1,5 @@
 import { DebouncedFunc } from 'lodash-es';
+import type { ITabData } from '../model/TabModel';
 declare const _default: () => {
     openNewTab: DebouncedFunc<(tab: ITabData) => Promise<any>>;
     setIFramePath: (path: string) => void;

package/types/index.d.ts

@@ -2,8 +2,8 @@ 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';
+export { IFrame, useTabLoading, useTabRouter, useStackTab };
 declare const _default: {
     install(app: App): void;
 };

package/types/utils/TabIdHelper.d.ts

@@ -0,0 +1,10 @@
+import type { ITabBase } from '../model/TabModel';
+/**
+ * compress tab info to string
+ * format:
+ * {tab id}{current timestamp}{tab name}{tab closable}
+ * @param tabData
+ */
+export declare const encodeTabInfo: (tabData: ITabBase) => string;
+export declare const decodeTabInfo: (tab: string) => ITabBase;
+export declare const createPageId: (tabId: string, path: string, query: Object) => string;

package/types/utils/UriHelper.d.ts

@@ -0,0 +1,4 @@
+export declare const uriDecode: (uri: string) => {
+    path: string;
+    query: Record<string, string>;
+};