vue-stack-tabs 0.1.11 → 0.1.13

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

@@ -1,191 +1,182 @@
-<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 {
-  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
-    // @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>
+<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 +1,31 @@
-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
-      }
-    }
-  }
-}
+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 +1,31 @@
-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
+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 +1,12 @@
-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 }
+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 }