vue-stack-tabs 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-stack-tabs",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Vue.js component for router tab.",
   "private": false,
   "type": "module",
@@ -39,8 +39,7 @@
     "lz-string": "^1.5.0",
     "ulidx": "^2.3.0",
     "uuid": "^9.0.1",
-    "vue-i18n": "^9.10.1",
-    "vue-loading-overlay": "^6.0.4"
+    "vue-i18n": "^9.10.1"
   },
   "devDependencies": {
     "@mdit/plugin-tasklist": "^0.8.0",
@@ -77,8 +76,7 @@
     "vitepress": "1.0.0-rc.44",
     "vue-tsc": "^1.8.27",
     "vue-router": "^4.3.0",
-    "vue": "^3.4.21",
-    "vue-stack-tabs": "^0.1.4"
+    "vue": "^3.4.21"
   },
   "scripts": {
     "docs:dev": "vitepress dev docs",

package/src/lib/StackTabs.vue

@@ -39,7 +39,6 @@
 </template>
 
 <script lang="tsx" setup>
-import 'vue-loading-overlay/dist/css/index.css'
 import { onBeforeMount, onUnmounted, provide, ref, watch } from 'vue'
 import type { TransitionProps, DefineComponent, VNode } from 'vue'
 import { type RouteLocationNormalizedLoaded, useRouter } from 'vue-router'

package/src/lib/assets/style/index.scss

@@ -1,3 +1,4 @@
 @import 'stackTab';
 @import 'icon';
 @import 'transition';
+@import 'overlayer';

package/src/lib/assets/style/overlayer.scss

@@ -0,0 +1,40 @@
+.vl-shown {
+  overflow: hidden;
+}
+
+.vl-overlay {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  align-items: center;
+  display: none;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 9999;
+}
+
+.vl-overlay.vl-active {
+  display: flex;
+}
+
+.vl-overlay.vl-full-page {
+  z-index: 9999;
+  position: fixed;
+}
+
+.vl-overlay .vl-background {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: #fff;
+  opacity: 0.5;
+}
+
+.vl-overlay .vl-icon,
+.vl-parent {
+  position: relative;
+}

package/src/lib/components/OverlayLoading/index.ts

@@ -0,0 +1,12 @@
+import { useLoading } from './js/api'
+import Component from './js/Component.vue'
+import type { App } from 'vue'
+
+const LoadingPlugin = (app: App, props = {}, slots = {}) => {
+  const instance = useLoading(props, slots)
+  // app.config.globalProperties.$loading = instance
+  app.provide('$loading', instance)
+}
+
+export default Component
+export { useLoading, LoadingPlugin, Component }

package/src/lib/components/OverlayLoading/js/Component.vue

@@ -0,0 +1,185 @@
+<template>
+  <transition :name="transition">
+    <div
+      tabindex="0"
+      class="vl-overlay vl-active"
+      :class="{ 'vl-full-page': isFullPage }"
+      v-show="isActive"
+      :aria-busy="isActive"
+      aria-label="Loading"
+      :style="{ zIndex }"
+      ref="overlay"
+    >
+      <div class="vl-background" @click.prevent="cancel" :style="bgStyle" />
+      <div class="vl-icon">
+        <slot name="before" />
+        <slot name="default">
+          <component :is="Loaders[loader]" :color="color" :width="width" :height="height" />
+        </slot>
+        <slot name="after" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import {
+  defineProps,
+  withDefaults,
+  render,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+  watch
+} from 'vue'
+import { removeElement } from './helpers'
+import Loaders from '../loaders'
+
+const props = withDefaults(
+  defineProps<{
+    active: boolean
+    programmatic: boolean
+    container: HTMLElement | Object | Function
+    isFullPage: boolean
+    enforceFocus: boolean
+    lockScroll: boolean
+    transition: string
+    /**
+     * Allow user to hide the loader
+     */
+    canCancel: boolean
+    /**
+     * Do something on cancel
+     */
+    onCancel: Function
+    color: string
+    backgroundColor: string
+    opacity: number
+    width: number
+    height: number
+    zIndex: number
+    loader: string
+  }>(),
+  {
+    isFullPage: true,
+    enforceFocus: true,
+    transition: 'fade',
+    onCancel: () => {},
+    loader: 'spinner'
+  }
+)
+const overlay = ref<HTMLDivElement>()
+const isActive = ref<boolean>(props.active)
+const emit = defineEmits(['hide', 'update:active'])
+/**
+ * Proxy to hide() method.
+ * Gets called by ESC button or when click outside
+ */
+const cancel = () => {
+  if (!props.canCancel || !isActive.value) return
+  hide()
+  props.onCancel.apply(null, null)
+}
+/**
+ * Hide and destroy component if it's programmatic.
+ */
+const hide = () => {
+  emit('hide')
+  emit('update:active', false)
+
+  if (props.programmatic) {
+    isActive.value = false
+
+    // Timeout for the animation complete before destroying
+    setTimeout(() => {
+      const parent = overlay.value!.parentElement
+      // unmount the component
+      render(null, parent!)
+      removeElement(parent)
+    }, 150)
+  }
+}
+const disableScroll = () => {
+  if (props.isFullPage && props.lockScroll) {
+    document.body.classList.add('vl-shown')
+  }
+}
+const enableScroll = () => {
+  if (props.isFullPage && props.lockScroll) {
+    document.body.classList.remove('vl-shown')
+  }
+}
+/**
+ * Key press event to hide on ESC.
+ */
+const keyPress = (event: KeyboardEvent) => {
+  // todo keyCode is deprecated
+  if (event.code === 'Escape') cancel()
+}
+
+const focusIn = (event: FocusEvent) => {
+  // Ignore when loading is not active
+  if (!isActive.value) return
+
+  if (
+    // Event target is the loading div element itself
+    event.target === overlay.value ||
+    // Event target is inside the loading div
+    overlay.value!.contains(event.target)
+  )
+    return
+
+  // Use container as parent when available otherwise use parent element when isFullPage is false
+  const parent = props.container
+    ? props.container
+    : props.isFullPage
+      ? null
+      : overlay.value!.parentElement
+
+  if (
+    // Always prevent when loading is full screen
+    props.isFullPage ||
+    // When a parent exist means loader is running inside a container
+    // When loading is NOT full screen and event target is inside the given container
+    (parent && parent.contains(event.target))
+  ) {
+    event.preventDefault()
+    overlay.value!.focus()
+  }
+}
+
+const bgStyle = computed(() => {
+  return {
+    background: props.backgroundColor,
+    opacity: props.opacity
+  }
+})
+watch(
+  () => props.active,
+  (value) => {
+    isActive.value = value
+  }
+)
+watch(
+  () => isActive,
+  (value) => {
+    if (value) {
+      disableScroll()
+    } else {
+      enableScroll()
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.enforceFocus) {
+    document.addEventListener('focusin', focusIn)
+  }
+  document.addEventListener('keyup', keyPress)
+})
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', keyPress)
+  document.removeEventListener('focusin', focusIn)
+})
+</script>

package/src/lib/components/OverlayLoading/js/api.ts

@@ -0,0 +1,30 @@
+import { createComponent } from './helpers'
+import LoadingComponent from './Component.vue'
+
+export const useLoading = (globalProps = {}, globalSlots = {}) => {
+  return {
+    show(props = globalProps, slots = globalSlots) {
+      const forceProps = {
+        programmatic: true,
+        lockScroll: true,
+        isFullPage: false,
+        active: true
+      }
+
+      const propsData = { ...globalProps, ...props, ...forceProps }
+      let container = propsData.container
+
+      if (!propsData.container) {
+        container = document.body
+        propsData.isFullPage = true
+      }
+
+      const mergedSlots = { ...globalSlots, ...slots }
+      const instance = createComponent(LoadingComponent, propsData, container, mergedSlots)
+
+      return {
+        hide: instance.ctx.hide
+      }
+    }
+  }
+}

package/src/lib/components/OverlayLoading/js/helpers.ts

@@ -0,0 +1,26 @@
+import { h, render } from 'vue'
+
+export const removeElement = (el) => {
+  if (typeof el.remove !== 'undefined') {
+    el.remove()
+  } else {
+    el.parentNode?.removeChild(el)
+  }
+}
+
+// Taken from https://github.com/moyoujun/vue3-loading-overlay/blob/master/src/index.ts
+export function createComponent(component, props, parentContainer, slots = {}) {
+  const vNode = h(component, props, slots)
+  const container = document.createElement('div')
+  container.classList.add('vld-container')
+  parentContainer.appendChild(container)
+  render(vNode, container)
+
+  return vNode.component
+}
+
+export const hasWindow = () => {
+  return typeof window !== 'undefined'
+}
+
+export const MayBeHTMLElement = hasWindow() ? window.HTMLElement : Object

package/src/lib/components/OverlayLoading/loaders/bars.vue

@@ -0,0 +1,79 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 30 30"
+    :height="height"
+    :width="width"
+    :fill="color"
+  >
+    <rect x="0" y="13" width="4" height="5">
+      <animate
+        attributeName="height"
+        attributeType="XML"
+        values="5;21;5"
+        begin="0s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        attributeType="XML"
+        values="13; 5; 13"
+        begin="0s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <rect x="10" y="13" width="4" height="5">
+      <animate
+        attributeName="height"
+        attributeType="XML"
+        values="5;21;5"
+        begin="0.15s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        attributeType="XML"
+        values="13; 5; 13"
+        begin="0.15s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <rect x="20" y="13" width="4" height="5">
+      <animate
+        attributeName="height"
+        attributeType="XML"
+        values="5;21;5"
+        begin="0.3s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        attributeType="XML"
+        values="13; 5; 13"
+        begin="0.3s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+    </rect>
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue'
+withDefaults(
+  defineProps<{
+    color?: string
+    height?: number
+    width?: number
+  }>(),
+  {
+    color: '#000',
+    height: 40,
+    width: 40
+  }
+)
+</script>

package/src/lib/components/OverlayLoading/loaders/dots.vue

@@ -0,0 +1,92 @@
+<template>
+  <svg
+    viewBox="0 0 120 30"
+    xmlns="http://www.w3.org/2000/svg"
+    :fill="color"
+    :width="width"
+    :height="height"
+  >
+    <circle cx="15" cy="15" r="15">
+      <animate
+        attributeName="r"
+        from="15"
+        to="15"
+        begin="0s"
+        dur="0.8s"
+        values="15;9;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from="1"
+        to="1"
+        begin="0s"
+        dur="0.8s"
+        values="1;.5;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
+      <animate
+        attributeName="r"
+        from="9"
+        to="9"
+        begin="0s"
+        dur="0.8s"
+        values="9;15;9"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from="0.5"
+        to="0.5"
+        begin="0s"
+        dur="0.8s"
+        values=".5;1;.5"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="105" cy="15" r="15">
+      <animate
+        attributeName="r"
+        from="15"
+        to="15"
+        begin="0s"
+        dur="0.8s"
+        values="15;9;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from="1"
+        to="1"
+        begin="0s"
+        dur="0.8s"
+        values="1;.5;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue'
+withDefaults(
+  defineProps<{
+    color?: string
+    height?: number
+    width?: number
+  }>(),
+  {
+    color: '#000',
+    height: 240,
+    width: 60
+  }
+)
+</script>

package/src/lib/components/OverlayLoading/loaders/index.ts

@@ -0,0 +1,9 @@
+import Spinner from './spinner.vue'
+import Dots from './dots.vue'
+import Bars from './bars.vue'
+
+export default {
+  spinner: Spinner,
+  dots: Dots,
+  bars: Bars
+}

package/src/lib/components/OverlayLoading/loaders/spinner.vue

@@ -0,0 +1,41 @@
+<template>
+  <svg
+    viewBox="0 0 38 38"
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    :stroke="color"
+  >
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(1 1)" stroke-width="2">
+        <circle stroke-opacity=".25" cx="18" cy="18" r="18" />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="0.8s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue'
+withDefaults(
+  defineProps<{
+    color?: string
+    height?: number
+    width?: number
+  }>(),
+  {
+    color: '#000',
+    height: 64,
+    width: 64
+  }
+)
+</script>

package/src/lib/hooks/useStackTab.ts

@@ -32,7 +32,7 @@ export default () => {
     if (!tabInfo.id) {
       tabInfo.id = ulid()
     }
-    const __tab = await encodeTabInfo(tabInfo)
+    const __tab = encodeTabInfo(tabInfo)
     let query = defu(
       {
         __tab

package/src/lib/hooks/useTabLoading.ts

@@ -1,4 +1,4 @@
-import { useLoading } from 'vue-loading-overlay'
+import { useLoading } from '../components/OverlayLoading'
 import type { ActiveLoader } from 'vue-loading-overlay'
 import { type ComponentInternalInstance, getCurrentInstance, onUnmounted } from 'vue'
 
@@ -11,19 +11,6 @@ export default () => {
   })
   const openTabLoading = () => {
     const container = document.querySelector(`#${attrs.tId}`)
-    // const wrappers = document.getElementsByClassName('cache-page-wrapper')
-    // for(const wrapper of wrappers){
-    //   const childs = wrapper.children
-    //   for(const child of childs){
-    //     if(child.getAttribute("tId")===attrs.tId){
-    //       container=wrapper
-    //       break;
-    //     }
-    //   }
-    //   if(container!==null){
-    //     break;
-    //   }
-    // }
     if (loadingInstance === null) {
       loadingInstance = $loading.show({
         canCancel: false,