@maas/vue-equipment 0.1.2 → 0.2.0

package/dist/plugins/MagicModal/src/components/MagicModal.vue

@@ -0,0 +1,254 @@
+<template>
+  <transition :duration="5000">
+    <teleport
+      v-if="wrapperActive"
+      :to="mappedOptions.teleport?.target"
+      :disabled="mappedOptions.teleport?.disabled"
+    >
+      <dialog
+        ref="modal"
+        class="magic-modal"
+        @click.self="close"
+        aria-modal="true"
+      >
+        <transition
+          v-if="mappedOptions.backdrop"
+          :name="mappedOptions.transitions?.backdrop"
+        >
+          <div
+            v-show="innerActive"
+            class="magic-modal__backdrop"
+            @click.self="close"
+          />
+        </transition>
+        <transition
+          :name="mappedOptions.transitions?.content"
+          @after-leave="onAfterLeave"
+          @after-enter="onAfterEnter"
+        >
+          <div
+            v-show="innerActive"
+            class="magic-modal__content"
+            @click.self="close"
+          >
+            <component
+              v-if="component"
+              v-bind="componentProps"
+              :is="component"
+              @close="close"
+            />
+            <slot v-else />
+          </div>
+        </transition>
+      </dialog>
+    </teleport>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useModalApi } from './../composables/useModalApi'
+import { onKeyStroke } from '@vueuse/core'
+import { defaultOptions } from './../utils/defaultOptions'
+
+import type { MaybeRef } from '@vueuse/core'
+import type { DefaultOptions } from './../types/index'
+
+interface MagicModalProps {
+  id: MaybeRef<string>
+  component?: any
+  componentProps?: Record<string, unknown>
+  options?: DefaultOptions
+}
+
+const props = withDefaults(defineProps<MagicModalProps>(), {
+  options: () => defaultOptions,
+})
+
+const modal = ref<HTMLElement | undefined>(undefined)
+const modalApi = useModalApi(props.id, { focusTarget: modal })
+
+const mappedOptions = {
+  ...defaultOptions,
+  ...props.options,
+  teleport: { ...defaultOptions.teleport, ...props.options.teleport },
+  transitions: { ...defaultOptions.transitions, ...props.options.transitions },
+}
+
+const {
+  isActive,
+  close,
+  trapFocus,
+  releaseFocus,
+  lockScroll,
+  unlockScroll,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+} = modalApi
+
+// Split isActive into two values to animate modal smoothly
+const innerActive = ref(false)
+const wrapperActive = ref(false)
+
+// Handle state
+async function onOpen() {
+  wrapperActive.value = true
+  await nextTick()
+  innerActive.value = true
+}
+
+function onClose() {
+  innerActive.value = false
+}
+
+// Transition Callbacks
+async function onAfterEnter() {
+  if (mappedOptions.scrollLock) {
+    if (mappedOptions.scrollLockPadding) {
+      addScrollLockPadding()
+    }
+
+    lockScroll()
+  }
+
+  if (mappedOptions.focusTrap) {
+    await nextTick()
+    trapFocus()
+  }
+}
+
+function onAfterLeave() {
+  if (mappedOptions.scrollLock) {
+    unlockScroll()
+    if (mappedOptions.scrollLockPadding) {
+      removeScrollLockPadding()
+    }
+  }
+
+  if (mappedOptions.focusTrap) {
+    releaseFocus()
+  }
+
+  wrapperActive.value = false
+}
+
+onKeyStroke('Escape', (e) => {
+  e.preventDefault()
+  close()
+})
+
+watch(isActive, async (value) => {
+  if (value) {
+    await onOpen()
+  } else {
+    onClose()
+  }
+})
+</script>
+
+<style lang="postcss">
+* {
+  transition-duration: 0s;
+  animation-duration: 0s;
+}
+
+.magic-modal {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border: none;
+}
+
+.magic-modal__content {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  max-height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+}
+
+.magic-modal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -1;
+}
+
+/* Content */
+.magic-modal--content-enter-active,
+.magic-modal--content-leave-active {
+  transition: all 300ms ease-out;
+}
+
+.magic-modal--content-enter-from {
+  opacity: 0;
+  transform: translateY(2rem);
+}
+
+.magic-modal--content-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.magic-modal--content-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.magic-modal--content-leave-to {
+  opacity: 0;
+  transform: scale(1.02);
+}
+
+@media (prefers-reduced-motion) {
+  .magic-modal--content-enter-active,
+  .magic-modal--content-leave-active {
+    transition: opacity 300ms ease-out;
+  }
+
+  .magic-modal--content-enter-from,
+  .magic-modal--content-enter-to,
+  .magic-modal--content-leave-from,
+  .magic-modal--content-leave-to {
+    transform: none;
+  }
+}
+
+/* Backdrop */
+.magic-modal--backdrop-enter-active,
+.magic-modal--backdrop-leave-active {
+  transition: opacity 300ms ease-out;
+}
+
+.magic-modal--backdrop-enter-from {
+  opacity: 0;
+}
+
+.magic-modal--backdrop-enter-to {
+  opacity: 1;
+}
+
+.magic-modal--backdrop-leave-from {
+  opacity: 1;
+}
+
+.magic-modal--backdrop-leave-to {
+  opacity: 0;
+}
+</style>

package/dist/plugins/MagicModal/src/components/MagicModal.vue.d.ts

@@ -0,0 +1,43 @@
+import type { MaybeRef } from '@vueuse/core';
+import type { DefaultOptions } from './../types/index';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    id: {
+        type: import("vue").PropType<MaybeRef<string>>;
+        required: true;
+    };
+    component: {
+        type: import("vue").PropType<any>;
+    };
+    componentProps: {
+        type: import("vue").PropType<Record<string, unknown>>;
+    };
+    options: {
+        type: import("vue").PropType<DefaultOptions>;
+        default: () => DefaultOptions;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: import("vue").PropType<MaybeRef<string>>;
+        required: true;
+    };
+    component: {
+        type: import("vue").PropType<any>;
+    };
+    componentProps: {
+        type: import("vue").PropType<Record<string, unknown>>;
+    };
+    options: {
+        type: import("vue").PropType<DefaultOptions>;
+        default: () => DefaultOptions;
+    };
+}>>, {
+    options: DefaultOptions;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/plugins/MagicModal/src/composables/useModalApi.d.ts

@@ -0,0 +1,18 @@
+import type { DefaultOptions } from '../types/index.js';
+import type { MaybeElementRef, MaybeRef } from '@vueuse/core';
+export type useModalApiOptions = Pick<DefaultOptions, 'scrollLock'> & {
+    focusTarget: MaybeElementRef;
+};
+export declare function useModalApi(id?: MaybeRef<string>, options?: useModalApiOptions): {
+    id: import("vue").ComputedRef<string>;
+    isActive: import("vue").ComputedRef<boolean>;
+    open: () => void;
+    close: () => void;
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+};
+export type UseModalApiReturn = ReturnType<typeof useModalApi>;

package/dist/plugins/MagicModal/src/composables/useModalApi.mjs

@@ -0,0 +1,74 @@
+import { ref, computed } from "vue";
+import { v4 as uuidv4 } from "uuid";
+import { toValue, useScrollLock } from "@vueuse/core";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+import { useModalStore } from "./useModalStore.mjs";
+const defaultOptions = {
+  focusTarget: void 0,
+  scrollLock: true
+};
+export function useModalApi(id, options) {
+  const positionFixedElements = ref([]);
+  const mappedId = computed(() => toValue(id) || uuidv4());
+  const mappedOptions = { ...defaultOptions, ...options };
+  const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
+  const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
+  const { modalStore, addIdToStore, removeIdFromStore } = useModalStore();
+  const isActive = computed(() => modalStore.value.includes(mappedId.value));
+  function open() {
+    addIdToStore(mappedId.value);
+  }
+  function close() {
+    removeIdFromStore(mappedId.value);
+  }
+  function trapFocus() {
+    if (focusTrap) {
+      focusTrap.activate();
+    }
+  }
+  function releaseFocus() {
+    if (focusTrap) {
+      focusTrap.deactivate();
+    }
+  }
+  function lockScroll() {
+    scrollLock.value = true;
+  }
+  function unlockScroll() {
+    scrollLock.value = false;
+  }
+  function addScrollLockPadding() {
+    if (typeof window === "undefined")
+      return;
+    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
+    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
+    document.body.style.paddingRight = "var(--scrollbar-width)";
+    positionFixedElements.value = [
+      ...document.body.getElementsByTagName("*")
+    ].filter(
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed"
+    );
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+    );
+  }
+  function removeScrollLockPadding() {
+    document.body.style.paddingRight = "";
+    document.body.style.removeProperty("--scrollbar-width");
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = ""
+    );
+  }
+  return {
+    id: mappedId,
+    isActive,
+    open,
+    close,
+    trapFocus,
+    releaseFocus,
+    lockScroll,
+    unlockScroll,
+    addScrollLockPadding,
+    removeScrollLockPadding
+  };
+}

package/dist/plugins/MagicModal/src/composables/useModalStore.d.ts

@@ -0,0 +1,5 @@
+export declare function useModalStore(): {
+    modalStore: import("vue").Ref<string[]>;
+    addIdToStore: (id: string) => void;
+    removeIdFromStore: (id: string) => void;
+};

package/dist/plugins/MagicModal/src/composables/useModalStore.mjs

@@ -0,0 +1,15 @@
+import { ref } from "vue";
+let modalStore = ref([]);
+export function useModalStore() {
+  function addIdToStore(id) {
+    modalStore.value.push(id);
+  }
+  function removeIdFromStore(id) {
+    modalStore.value = modalStore.value.filter((x) => x !== id);
+  }
+  return {
+    modalStore,
+    addIdToStore,
+    removeIdFromStore
+  };
+}

package/dist/plugins/MagicModal/src/store/modals.d.ts

@@ -0,0 +1,4 @@
+declare let modalsStore: import("vue").ShallowReactive<string[]>;
+declare function addIdToStore(id: string): void;
+declare function removeIdFromStore(id: string): void;
+export { modalsStore, addIdToStore, removeIdFromStore };

package/dist/plugins/MagicModal/src/store/modals.mjs

@@ -0,0 +1,9 @@
+import { shallowReactive } from "vue";
+let modalsStore = shallowReactive([]);
+function addIdToStore(id) {
+  modalsStore.push(id);
+}
+function removeIdFromStore(id) {
+  modalsStore = modalsStore.filter((x) => x !== id);
+}
+export { modalsStore, addIdToStore, removeIdFromStore };

package/dist/plugins/MagicModal/src/types/index.d.ts

@@ -0,0 +1,15 @@
+type DefaultOptions = {
+    backdrop?: boolean;
+    focusTrap?: boolean;
+    scrollLock?: boolean;
+    scrollLockPadding?: boolean;
+    teleport?: {
+        target: string;
+        disabled?: boolean;
+    };
+    transitions?: {
+        content?: string;
+        backdrop?: string;
+    };
+};
+export type { DefaultOptions };

package/dist/plugins/MagicModal/src/utils/defaultOptions.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultOptions } from '../types/index.js';
+declare const defaultOptions: DefaultOptions;
+export { defaultOptions };

package/dist/plugins/MagicModal/src/utils/defaultOptions.mjs

@@ -0,0 +1,15 @@
+const defaultOptions = {
+  backdrop: true,
+  focusTrap: true,
+  scrollLock: true,
+  scrollLockPadding: true,
+  teleport: {
+    target: "body",
+    disabled: false
+  },
+  transitions: {
+    content: "magic-modal--content",
+    backdrop: "magic-modal--backdrop"
+  }
+};
+export { defaultOptions };

package/dist/plugins/MagicPlayer/index.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from 'vue';
+import { useMediaApi } from './src/composables/useMediaApi.js';
+import { usePlayerApi } from './src/composables/usePlayerApi.js';
+import { useRuntimeSourceProvider } from './src/composables/useRuntimeSourceProvider.js';
+export type * from './src/types';
+declare const MagicPlayer: Plugin;
+export { MagicPlayer, useMediaApi, usePlayerApi, useRuntimeSourceProvider };

package/dist/plugins/MagicPlayer/index.mjs

@@ -0,0 +1,15 @@
+import MagicPlayerComponent from "./src/components/MagicPlayer.vue";
+import MagicPlayerControlsComponent from "./src/components/MagicPlayerControls.vue";
+import MagicPlayerTimelineComponent from "./src/components/MagicPlayerTimeline.vue";
+import MagicPlayerMuxPopoverComponent from "./src/components/MagicPlayerMuxPopover.vue";
+import { useMediaApi } from "./src/composables/useMediaApi.mjs";
+import { usePlayerApi } from "./src/composables/usePlayerApi.mjs";
+import { useRuntimeSourceProvider } from "./src/composables/useRuntimeSourceProvider.mjs";
+const MagicPlayer = {
+  install: (app) => {
+    app.component("MagicPlayer", MagicPlayerComponent);
+    app.component("MagicPlayerControls", MagicPlayerControlsComponent);
+    app.component("MagicPlayerTimeline", MagicPlayerTimelineComponent), app.component("MagicPlayerMuxPopover", MagicPlayerMuxPopoverComponent);
+  }
+};
+export { MagicPlayer, useMediaApi, usePlayerApi, useRuntimeSourceProvider };

package/dist/plugins/MagicPlayer/nuxt.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>>;
+export default _default;

package/dist/plugins/MagicPlayer/nuxt.mjs

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { MagicPlayer } from "./index.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(MagicPlayer);
+});

package/dist/plugins/MagicPlayer/src/components/MagicPlayer.vue

@@ -0,0 +1,103 @@
+<template>
+  <div ref="playerRef" class="magic-player" :style="computedStyle">
+    <video
+      ref="videoRef"
+      class="magic-player-video"
+      preload="auto"
+      playsinline
+    />
+    <div v-show="!loaded || !touched" class="magic-player-poster">
+      <slot name="poster" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useIntersectionObserver } from '@vueuse/core'
+
+import type { SourceType } from './../types'
+import { useProvidePlayer } from '../composables/usePlayer'
+
+export type MagicPlayerProps = {
+  srcType?: SourceType
+  src: string
+  ratio?: string
+  fill?: boolean
+}
+
+const props = withDefaults(defineProps<MagicPlayerProps>(), {
+  srcType: 'native',
+  src: '',
+  ratio: '16:9',
+  fill: false,
+})
+
+const playerRef = ref<HTMLDivElement | undefined>(undefined)
+const videoRef = ref<HTMLVideoElement | undefined>(undefined)
+
+const { mediaApi, playerApi, runtimeProvider } = useProvidePlayer({
+  playerRef: playerRef,
+  videoRef: videoRef,
+  src: props.src,
+  srcType: props.srcType,
+})
+const { playing } = mediaApi
+const { touched, pause } = playerApi
+const { loaded } = runtimeProvider
+
+useIntersectionObserver(playerRef, ([{ isIntersecting }]) => {
+  if (!isIntersecting && playing.value) {
+    pause()
+  }
+})
+
+const computedRatio = computed(() => {
+  if (props.ratio) {
+    return props.ratio.split(':')
+  } else {
+    return undefined
+  }
+})
+
+const computedStyle = computed(() => {
+  return {
+    height: props.fill ? '100%' : undefined,
+    'aspect-ratio':
+      computedRatio.value && !props.fill
+        ? `${computedRatio.value[0]}/${computedRatio.value[1]}`
+        : undefined,
+  }
+})
+
+defineExpose({
+  playerApi,
+  mediaApi,
+  runtimeProvider,
+})
+</script>
+
+<style lang="postcss">
+.magic-player {
+  --aspect-ratio: 16 / 9;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: var(--aspect-ratio);
+}
+
+.magic-player-video {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  object-fit: cover;
+}
+
+.magic-player-poster {
+  position: absolute;
+  inset: 0;
+}
+</style>

package/dist/plugins/MagicPlayer/src/components/MagicPlayer.vue.d.ts

@@ -0,0 +1,86 @@
+import type { SourceType } from './../types';
+export type MagicPlayerProps = {
+    srcType?: SourceType;
+    src: string;
+    ratio?: string;
+    fill?: boolean;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    fill: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    srcType: {
+        type: import("vue").PropType<SourceType>;
+        default: string;
+    };
+    src: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    ratio: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}, {
+    playerApi: {
+        isFullscreen: import("vue").Ref<boolean>;
+        touched: import("vue").Ref<boolean>;
+        play: () => void;
+        pause: () => void;
+        togglePlay: () => void;
+        seek: (time: number) => void;
+        mute: () => void;
+        unmute: () => void;
+        enterFullscreen: () => Promise<void>;
+        exitFullscreen: () => Promise<void>;
+        toggleFullscreen: () => Promise<void>;
+    };
+    mediaApi: {
+        currentTime: import("vue").Ref<number>;
+        duration: import("vue").Ref<number>;
+        waiting: import("vue").Ref<boolean>;
+        seeking: import("vue").Ref<boolean>;
+        ended: import("vue").Ref<boolean>;
+        stalled: import("vue").Ref<boolean>;
+        buffered: import("vue").Ref<[number, number][]>;
+        playing: import("vue").Ref<boolean>;
+        rate: import("vue").Ref<number>;
+        volume: import("vue").Ref<number>;
+        muted: import("vue").Ref<boolean>;
+    };
+    runtimeProvider: import("../composables/useRuntimeSourceProvider").UseRuntimeSourceProviderReturn;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    fill: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    srcType: {
+        type: import("vue").PropType<SourceType>;
+        default: string;
+    };
+    src: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    ratio: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>>, {
+    fill: boolean;
+    srcType: SourceType;
+    src: string;
+    ratio: string;
+}, {}>, {
+    poster?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};