vue-stack-tabs 0.1.14 → 0.1.16

package/src/lib/index.ts

@@ -7,6 +7,7 @@ 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({
@@ -27,6 +28,6 @@ export { IFrame, useTabLoading, useTabRouter, useStackTab, TabHeaderButton, Stac
 export default {
   install(Vue: App): void {
     tabVersion(import.meta.env.PACKAGE_VERSION)
-    Vue.component('VueStackTabs', StackTab).use(i18n)
+    Vue.component('VueStackTabs', StackTab).use(useTabMitt).use(i18n)
   }
 }

package/dist/src/lib/components/OverlayLoading/Component.vue.d.ts

@@ -1,100 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    active: boolean;
-    programmatic: boolean;
-    container: Object | Function | HTMLElement;
-    isFullPage: boolean;
-    enforceFocus?: boolean | undefined;
-    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: boolean;
-    enforceFocus: boolean;
-    transition: string;
-    onCancel: () => void;
-    loader: string;
-}>, {
-    hide: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    hide: (...args: any[]) => void;
-    "update:active": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    active: boolean;
-    programmatic: boolean;
-    container: Object | Function | HTMLElement;
-    isFullPage: boolean;
-    enforceFocus?: boolean | undefined;
-    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: boolean;
-    enforceFocus: boolean;
-    transition: string;
-    onCancel: () => void;
-    loader: string;
-}>>> & {
-    onHide?: ((...args: any[]) => any) | undefined;
-    "onUpdate:active"?: ((...args: any[]) => any) | undefined;
-}, {
-    transition: string;
-    onCancel: Function;
-    isFullPage: boolean;
-    enforceFocus: boolean;
-    loader: string;
-}, {}>, {
-    before?(_: {}): any;
-    default?(_: {}): any;
-    after?(_: {}): 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/dist/src/lib/components/OverlayLoading/api.d.ts

@@ -1,5 +0,0 @@
-export declare const useLoading: (globalProps?: {}, globalSlots?: {}) => {
-    show(props?: {}, slots?: {}): {
-        hide: any;
-    };
-};

package/dist/src/lib/components/OverlayLoading/helpers.d.ts

@@ -1,7 +0,0 @@
-export declare const removeElement: (el: HTMLElement) => void;
-export declare function createComponent(component: any, props: any, parentContainer: HTMLElement, slots?: {}): import("vue").ComponentInternalInstance | null;
-export declare const hasWindow: () => boolean;
-export declare const MayBeHTMLElement: ObjectConstructor | {
-    new (): HTMLElement;
-    prototype: HTMLElement;
-};

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

@@ -1,6 +0,0 @@
-import { useLoading } from './api';
-import Component from './Component.vue';
-import type { App } from 'vue';
-declare const LoadingPlugin: (app: App, props?: {}, slots?: {}) => void;
-export default Component;
-export { useLoading, LoadingPlugin, Component };

package/dist/src/lib/components/OverlayLoading/loaders/bars.vue.d.ts

@@ -1,39 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    color?: string | undefined;
-    height?: number | undefined;
-    width?: number | undefined;
-}>, {
-    color: string;
-    height: number;
-    width: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    color?: string | undefined;
-    height?: number | undefined;
-    width?: number | undefined;
-}>, {
-    color: string;
-    height: number;
-    width: number;
-}>>>, {
-    width: number;
-    height: number;
-    color: 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;
-    };
-};
-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];
-} & {};

package/dist/src/lib/components/OverlayLoading/loaders/dots.vue.d.ts

@@ -1,39 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    color?: string | undefined;
-    height?: number | undefined;
-    width?: number | undefined;
-}>, {
-    color: string;
-    height: number;
-    width: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    color?: string | undefined;
-    height?: number | undefined;
-    width?: number | undefined;
-}>, {
-    color: string;
-    height: number;
-    width: number;
-}>>>, {
-    width: number;
-    height: number;
-    color: 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;
-    };
-};
-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];
-} & {};

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

@@ -1,96 +0,0 @@
-declare const _default: {
-    spinner: import("vue").DefineComponent<{
-        width: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        height: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        color: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        width: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        height: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        color: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-    }>>, {
-        width: number;
-        height: number;
-        color: string;
-    }, {}>;
-    dots: import("vue").DefineComponent<{
-        width: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        height: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        color: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        width: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        height: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        color: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-    }>>, {
-        width: number;
-        height: number;
-        color: string;
-    }, {}>;
-    bars: import("vue").DefineComponent<{
-        width: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        height: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        color: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-    }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        width: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        height: {
-            type: import("vue").PropType<number>;
-            default: number;
-        };
-        color: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-    }>>, {
-        width: number;
-        height: number;
-        color: string;
-    }, {}>;
-};
-export default _default;

package/dist/src/lib/components/OverlayLoading/loaders/spinner.vue.d.ts

@@ -1,39 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    color?: string | undefined;
-    height?: number | undefined;
-    width?: number | undefined;
-}>, {
-    color: string;
-    height: number;
-    width: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    color?: string | undefined;
-    height?: number | undefined;
-    width?: number | undefined;
-}>, {
-    color: string;
-    height: number;
-    width: number;
-}>>>, {
-    width: number;
-    height: number;
-    color: 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;
-    };
-};
-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];
-} & {};

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

@@ -1,182 +0,0 @@
-<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>
-// @ts-nocheck
-import { 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
-    // @ts-ignore
-    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
-    // @ts-ignore
-    (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)
-})
-defineExpose({
-  hide
-})
-</script>

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

@@ -1,31 +0,0 @@
-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 }
-      // @ts-ignore
-      let container = propsData.container
-      // @ts-ignore
-      if (!propsData.container) {
-        container = document.body
-        propsData.isFullPage = true
-      }
-
-      const mergedSlots = { ...globalSlots, ...slots }
-      const instance = createComponent(LoadingComponent, propsData, container, mergedSlots)
-
-      return {
-        hide: instance!.exposed!.hide
-      }
-    }
-  }
-}

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

@@ -1,31 +0,0 @@
-import { h, render } from 'vue'
-
-export const removeElement = (el: HTMLElement) => {
-  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: any,
-  props: any,
-  parentContainer: HTMLElement,
-  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/index.ts

@@ -1,12 +0,0 @@
-import { useLoading } from './api'
-import Component from './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/loaders/bars.vue

@@ -1,79 +0,0 @@
-<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 { withDefaults } from 'vue'
-withDefaults(
-  defineProps<{
-    color?: string
-    height?: number
-    width?: number
-  }>(),
-  {
-    color: '#000',
-    height: 40,
-    width: 40
-  }
-)
-</script>