@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -1,8 +1,8 @@
-import { type Options } from 'focus-trap';
+import { type Options as FocusTrapOptions } from 'focus-trap';
 export interface MagicModalOptions {
     backdrop?: boolean;
     tag?: 'dialog' | 'div';
-    focusTrap?: boolean | Options;
+    focusTrap?: boolean | FocusTrapOptions;
     scrollLock?: boolean | {
         padding: boolean;
     };

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

@@ -12,8 +12,8 @@ const defaultOptions = {
     disabled: false
   },
   transition: {
-    content: "magic-modal--content",
-    backdrop: "magic-modal--backdrop"
+    content: "magic-modal-content",
+    backdrop: "magic-modal-backdrop"
   },
   keyListener: {
     close: ["Escape"]

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

@@ -1,4 +1,6 @@
-import type { Plugin } from 'vue';
 import MagicNoise from './src/components/MagicNoise.vue.js';
+import type { Plugin } from 'vue';
+import type { MagicNoiseOptions } from './src/types/index.js';
 declare const MagicNoisePlugin: Plugin;
 export { MagicNoisePlugin, MagicNoise };
+export type { MagicNoiseOptions };

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

@@ -1,72 +1,129 @@
-<template>
-  <div class="magic-noise" :class="{ '-loading': !isReady }">
-    <div :class="{ '-loading': !isReady }" class="magic-noise__inner">
-      <canvas ref="canvasRef" class="magic-noise__canvas" />
-      <canvas ref="offCanvasRef" class="magic-noise__off-canvas" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, watch, shallowRef } from 'vue'
-import { useResizeObserver, useDebounceFn } from '@vueuse/core'
-import { useNoiseApi } from '../composables/private/useNoiseApi'
-import type { MagicNoiseOptions } from '../types'
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["data-loading"];
+const _hoisted_2 = { class: "magic-noise__inner" };
+const _hoisted_3 = {
+  ref: "canvas",
+  class: "magic-noise__canvas"
+};
+const _hoisted_4 = {
+  ref: "offCanvas",
+  class: "magic-noise__off-canvas"
+};
+import { onMounted, onUnmounted, watch, useTemplateRef } from "vue";
+import { useResizeObserver, useDebounceFn } from "@vueuse/core";
+import { useNoiseApi } from "../composables/private/useNoiseApi";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicNoise",
+  props: {
+    options: { type: Object, required: false },
+    pause: { type: Boolean, required: false, default: false }
+  },
+  setup(__props) {
+    const canvasRef = useTemplateRef("canvas");
+    const offCanvasRef = useTemplateRef("offCanvas");
+    const noiseApi = useNoiseApi({
+      canvasRef,
+      offCanvasRef,
+      options: __props.options
+    });
+    const {
+      initialize,
+      drawControls,
+      transferControls,
+      throttledDraw,
+      throttledRotateAndTransfer,
+      isReady
+    } = noiseApi;
+    useResizeObserver(canvasRef, useDebounceFn(initialize, 100));
+    watch(
+      () => __props.pause,
+      (pause) => {
+        if (pause) {
+          drawControls.value?.pause();
+          transferControls.value?.pause();
+        } else {
+          drawControls.value?.resume();
+          transferControls.value?.resume();
+        }
+      }
+    );
+    onMounted(() => {
+      throttledDraw();
+      throttledRotateAndTransfer();
+    });
+    onUnmounted(() => {
+      isReady.value = false;
+      transferControls.value?.pause();
+      drawControls.value?.pause();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        class: "magic-noise",
+        "data-loading": !_unref(isReady)
+      }, [
+        _createElementVNode("div", _hoisted_2, [
+          _createElementVNode(
+            "canvas",
+            _hoisted_3,
+            null,
+            512
+            /* NEED_PATCH */
+          ),
+          _createElementVNode(
+            "canvas",
+            _hoisted_4,
+            null,
+            512
+            /* NEED_PATCH */
+          )
+        ])
+      ], 8, _hoisted_1);
+    };
+  }
+});
+</script>
 
-interface MagicNoiseProps {
-  options?: MagicNoiseOptions
-  pause?: boolean
+<style>
+:root {
+  --magic-noise-loading-transition: color 300ms ease, opacity 300ms ease;
 }
 
-const props = withDefaults(defineProps<MagicNoiseProps>(), {
-  pause: false,
-})
-
-const canvasRef = shallowRef<HTMLCanvasElement | undefined>(undefined)
-const offCanvasRef = shallowRef<HTMLCanvasElement | undefined>(undefined)
-
-const noiseApi = useNoiseApi({
-  canvasRef,
-  offCanvasRef,
-  options: props.options,
-})
-
-const {
-  initialize,
-  drawControls,
-  transferControls,
-  throttledDraw,
-  throttledRotateAndTransfer,
-  isReady,
-} = noiseApi
-
-useResizeObserver(canvasRef, useDebounceFn(initialize, 100))
-
-watch(
-  () => props.pause,
-  (pause) => {
-    if (pause) {
-      drawControls.value?.pause()
-      transferControls.value?.pause()
-    } else {
-      drawControls.value?.resume()
-      transferControls.value?.resume()
+.magic-noise {
+  position: relative;
+  user-select: none;
+  transition: var(--magic-noise-loading-transition);
+  background: var(--magic-noise-background, #000);
+  &[data-loading='true'] {
+    background: var(--magic-noise-loading-background, #000);
+    & > .magic-noise__inner {
+      opacity: 0;
     }
   }
-)
+}
 
-onMounted(() => {
-  throttledDraw()
-  throttledRotateAndTransfer()
-})
+.magic-noise__inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: var(--magic-noise-loading-transition);
+}
 
-onUnmounted(() => {
-  isReady.value = false
-  transferControls.value?.pause()
-  drawControls.value?.pause()
-})
-</script>
+.magic-noise__canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  object-fit: cover;
+}
 
-<style>
-:root{--magic-noise-loading-transition:color 300ms ease,opacity 300ms ease}.magic-noise{background:var(--magic-noise-background,transparent);position:relative;transition:var(--magic-noise-loading-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-noise.-loading{background:var(--magic-noise-loading-background,#000)}.magic-noise__inner{height:100%;position:relative;transition:var(--magic-noise-loading-transition);width:100%}.magic-noise__inner.-loading{opacity:0}.magic-noise__canvas{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.magic-noise__off-canvas{left:0;pointer-events:none;position:absolute;top:0;visibility:hidden}
+.magic-noise__off-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
 </style>

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

@@ -1,9 +1,7 @@
-import type { MagicNoiseOptions } from '../types';
+import type { MagicNoiseOptions } from '../types/index.js';
 interface MagicNoiseProps {
     options?: MagicNoiseOptions;
     pause?: boolean;
 }
-declare const _default: import("vue").DefineComponent<MagicNoiseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicNoiseProps> & Readonly<{}>, {
-    pause: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: import("vue").DefineComponent<MagicNoiseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicNoiseProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.d.ts

@@ -1,8 +1,8 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { MagicNoiseOptions, RafControls } from '../../types/index.js';
 type UseNoiseApiArgs = {
-    canvasRef: Ref<HTMLCanvasElement | undefined>;
-    offCanvasRef: Ref<HTMLCanvasElement | undefined>;
+    canvasRef: Ref<HTMLCanvasElement | null>;
+    offCanvasRef: Ref<HTMLCanvasElement | null>;
     options?: MaybeRef<MagicNoiseOptions>;
 };
 export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNoiseApiArgs): {
@@ -11,7 +11,7 @@ export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNo
     rotateAndTransfer: () => void;
     throttledDraw: () => void;
     throttledRotateAndTransfer: () => void;
-    isReady: Ref<boolean, boolean>;
+    isReady: import("vue").ShallowRef<boolean, boolean>;
     drawControls: import("vue").ShallowRef<RafControls | undefined, RafControls | undefined>;
     transferControls: import("vue").ShallowRef<RafControls | undefined, RafControls | undefined>;
 };

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.mjs

@@ -1,4 +1,4 @@
-import { shallowRef, ref, reactive } from "vue";
+import { shallowRef, reactive } from "vue";
 import { defu } from "defu";
 import {
   useElementSize,
@@ -14,9 +14,9 @@ export function useNoiseApi({
 }) {
   const tiles = shallowRef([]);
   const pixels = shallowRef([]);
-  const isReady = ref(false);
-  let context = shallowRef(null);
-  let offContext = shallowRef(null);
+  const isReady = shallowRef(false);
+  const context = shallowRef(null);
+  const offContext = shallowRef(null);
   const { width, height } = useElementSize(canvasRef);
   const { pixelRatio } = useDevicePixelRatio();
   const drawControls = shallowRef(void 0);

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

@@ -0,0 +1,7 @@
+import MagicPie from './src/components/MagicPie.vue.js';
+import { useMagicPie } from './src/composables/useMagicPie.js';
+import type { Plugin } from 'vue';
+import type { MagicPieOptions } from './src/types/index.js';
+declare const MagicPiePlugin: Plugin;
+export { MagicPiePlugin, MagicPie, useMagicPie };
+export type { MagicPieOptions };

package/dist/plugins/MagicPie/index.mjs

@@ -0,0 +1,8 @@
+import MagicPie from "./src/components/MagicPie.vue";
+import { useMagicPie } from "./src/composables/useMagicPie.mjs";
+const MagicPiePlugin = {
+  install: (app) => {
+    app.component("MagicPie", MagicPie);
+  }
+};
+export { MagicPiePlugin, MagicPie, useMagicPie };

package/dist/plugins/MagicPie/nuxt.mjs

@@ -0,0 +1,23 @@
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponent,
+  addImports
+} from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicPie"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponent({
+      filePath: resolver.resolve("src/components/MagicPie.vue"),
+      name: "MagicPie",
+      global: true
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicPie",
+      name: "useMagicPie"
+    });
+  }
+});

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

@@ -0,0 +1,202 @@
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+const _hoisted_1 = ["data-flip", "data-id"];
+const _hoisted_2 = {
+  id: "magic-pie__svg",
+  viewBox: "0 0 100 100",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_3 = { mask: "url(#magic-pie__mask)" };
+const _hoisted_4 = ["d"];
+import { computed, toRefs, onBeforeUnmount } from "vue";
+import { usePieState } from "../composables/private/usePieState";
+export default /* @__PURE__ */ _defineComponent({
+  __name: "MagicPie",
+  props: {
+    id: { type: String, required: true },
+    options: { type: Object, required: false }
+  },
+  setup(__props) {
+    const { initializeState, deleteState } = usePieState(__props.id);
+    const state = initializeState();
+    const { percentage } = toRefs(state);
+    function generatePath(points) {
+      if (points.length < 2) {
+        throw new Error("At least two points are required to generate a path.");
+      }
+      let path2 = `M ${points[0][0]} ${points[0][1]}`;
+      for (let i = 1; i < points.length; i++) {
+        path2 += ` L ${points[i][0]} ${points[i][1]}`;
+      }
+      return path2;
+    }
+    function generatePie(percentage2, flip) {
+      if (percentage2 < 0 || percentage2 > 100) {
+        throw new Error("percentage needs to be between 0 and 100");
+      }
+      const size = 100;
+      const points = [
+        [size / 2, size / 2],
+        [size / 2, 0]
+      ];
+      function getEndpoint(percentage3, size2) {
+        const circumference = size2 * 4;
+        const distance = percentage3 / 100 * circumference;
+        if (distance === 0) {
+          return [size2 / 2, 0];
+        }
+        const position = Math.floor(distance / (size2 / 2)) % 8;
+        const remainingDistance = distance % (size2 / 2);
+        let x = 0;
+        let y = 0;
+        switch (position) {
+          case 0:
+            x = size2 / 2 + remainingDistance;
+            y = 0;
+            break;
+          case 1:
+            x = size2;
+            y = remainingDistance;
+            break;
+          case 2:
+            x = size2;
+            y = size2 / 2 + remainingDistance;
+            break;
+          case 3:
+            x = size2 - remainingDistance;
+            y = size2;
+            break;
+          case 4:
+            x = size2 / 2 - remainingDistance;
+            y = size2;
+            break;
+          case 5:
+            x = 0;
+            y = size2 - remainingDistance;
+            break;
+          case 6:
+            x = 0;
+            y = size2 / 2 - remainingDistance;
+            break;
+          case 7:
+            x = remainingDistance;
+            y = 0;
+        }
+        return [x, y];
+      }
+      if (flip) {
+        if (100 - percentage2 >= 12.5) {
+          points.push([0, 0]);
+        }
+        if (100 - percentage2 >= 25) {
+          points.push([0, size / 2]);
+        }
+        if (100 - percentage2 >= 37.5) {
+          points.push([0, size]);
+        }
+        if (100 - percentage2 >= 50) {
+          points.push([size / 2, size]);
+        }
+        if (100 - percentage2 >= 62.5) {
+          points.push([size, size]);
+        }
+        if (100 - percentage2 >= 75) {
+          points.push([size, size / 2]);
+        }
+        if (100 - percentage2 >= 87.5) {
+          points.push([size, 0]);
+        }
+      } else {
+        if (percentage2 >= 12.5) {
+          points.push([size, 0]);
+        }
+        if (percentage2 >= 25) {
+          points.push([size, size / 2]);
+        }
+        if (percentage2 >= 37.5) {
+          points.push([size, size]);
+        }
+        if (percentage2 >= 50) {
+          points.push([size / 2, size]);
+        }
+        if (percentage2 >= 62.5) {
+          points.push([0, size]);
+        }
+        if (percentage2 >= 75) {
+          points.push([0, size / 2]);
+        }
+        if (percentage2 >= 87.5) {
+          points.push([0, 0]);
+        }
+      }
+      points.push(getEndpoint(percentage2, size));
+      return generatePath(points);
+    }
+    const path = computed(() => {
+      return generatePie(percentage.value, __props.options?.flip);
+    });
+    onBeforeUnmount(() => {
+      deleteState();
+    });
+    return (_ctx, _cache) => {
+      return _openBlock(), _createElementBlock("div", {
+        class: "magic-pie",
+        "data-flip": _ctx.options?.flip,
+        "data-id": _ctx.id
+      }, [
+        (_openBlock(), _createElementBlock("svg", _hoisted_2, [
+          _cache[1] || (_cache[1] = _createElementVNode(
+            "mask",
+            { id: "magic-pie__mask" },
+            [
+              _createElementVNode("circle", {
+                cx: "50",
+                cy: "50",
+                r: "50",
+                fill: "white"
+              })
+            ],
+            -1
+            /* HOISTED */
+          )),
+          _createElementVNode("g", _hoisted_3, [
+            _cache[0] || (_cache[0] = _createElementVNode(
+              "rect",
+              {
+                width: "100",
+                height: "100"
+              },
+              null,
+              -1
+              /* HOISTED */
+            )),
+            _createElementVNode("path", { d: path.value }, null, 8, _hoisted_4)
+          ])
+        ]))
+      ], 8, _hoisted_1);
+    };
+  }
+});
+</script>
+
+<style>
+.magic-pie {
+  position: relative;
+
+  & path {
+    fill: var(--magic-pie-foreground, currentColor);
+  }
+
+  & rect {
+    fill: var(--magic-pie-background, transparent);
+  }
+}
+
+#magic-pie__svg {
+  width: 100%;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>

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

@@ -0,0 +1,7 @@
+import type { MagicPieOptions } from '../types/index.js';
+interface MagicPieProps {
+    id: string;
+    options?: MagicPieOptions;
+}
+declare const _default: import("vue").DefineComponent<MagicPieProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicPieProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/plugins/MagicPie/src/composables/private/usePieState.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+import type { PieState } from '../../types/index.js';
+export declare function usePieState(id: MaybeRef<string>): {
+    initializeState: () => PieState;
+    deleteState: () => void;
+};

package/dist/plugins/MagicPie/src/composables/private/usePieState.mjs

@@ -0,0 +1,33 @@
+import { ref, reactive, toValue } from "vue";
+const pieStateStore = ref([]);
+export function usePieState(id) {
+  function createState(id2) {
+    const state = {
+      id: id2,
+      percentage: 0,
+      interpolationId: void 0
+    };
+    return reactive(state);
+  }
+  function addState(id2) {
+    const state = createState(id2);
+    pieStateStore.value = [...pieStateStore.value, state];
+    return state;
+  }
+  function initializeState() {
+    let state = pieStateStore.value.find((entry) => {
+      return entry.id === id;
+    });
+    if (!state) state = addState(toValue(id));
+    return state;
+  }
+  function deleteState() {
+    pieStateStore.value = pieStateStore.value.filter(
+      (x) => x.id !== id
+    );
+  }
+  return {
+    initializeState,
+    deleteState
+  };
+}

package/dist/plugins/MagicPie/src/composables/useMagicPie.d.ts

@@ -0,0 +1,13 @@
+import { type MaybeRef } from 'vue';
+interface InterpolatePercentageArgs {
+    value: number;
+    duration: number;
+    easing?: (t: number) => number;
+}
+export declare function useMagicPie(id: MaybeRef<string>): {
+    percentage: import("vue").Ref<number, number>;
+    setPercentage: (value: number) => void;
+    interpolatePercentage: (args: InterpolatePercentageArgs) => void;
+    cancelInterpolatePercentage: () => void;
+};
+export {};

package/dist/plugins/MagicPie/src/composables/useMagicPie.mjs

@@ -0,0 +1,43 @@
+import { toValue, toRefs } from "vue";
+import { interpolate, linear } from "@maas/vue-equipment/utils";
+import { usePieState } from "./private/usePieState.mjs";
+export function useMagicPie(id) {
+  const { initializeState } = usePieState(toValue(id));
+  const state = initializeState();
+  const { percentage, interpolationId } = toRefs(state);
+  function setPercentage(value) {
+    percentage.value = Math.min(Math.max(0, value), 100);
+  }
+  function interpolatePercentage(args) {
+    const { value, duration = 1e3, easing = linear } = args;
+    const mappedValue = Math.min(Math.max(0, value), 100);
+    if (interpolationId.value) {
+      cancelAnimationFrame(interpolationId.value);
+    }
+    const mappedDuration = duration - duration * percentage.value / 100;
+    interpolationId.value = interpolate({
+      from: percentage.value,
+      to: mappedValue,
+      duration: mappedDuration,
+      easing,
+      callback: (value2) => {
+        percentage.value = value2;
+      },
+      interpolationIdCallback: (id2) => {
+        interpolationId.value = id2;
+      }
+    });
+  }
+  function cancelInterpolatePercentage() {
+    if (interpolationId.value) {
+      cancelAnimationFrame(interpolationId.value);
+      interpolationId.value = void 0;
+    }
+  }
+  return {
+    percentage,
+    setPercentage,
+    interpolatePercentage,
+    cancelInterpolatePercentage
+  };
+}

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

@@ -0,0 +1,9 @@
+export interface MagicPieOptions {
+    flip?: boolean;
+}
+export interface PieState {
+    id: string;
+    percentage: number;
+    interpolationId: number | undefined;
+}
+export type PiePoint = [number, number];

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

@@ -1,11 +1,6 @@
-import type { Plugin } from 'vue';
-import MagicPlayer from './src/components/MagicPlayer.vue.js';
-import MagicPlayerControls from './src/components/MagicPlayerControls.vue.js';
-import MagicPlayerDisplayTime from './src/components/MagicPlayerDisplayTime.vue.js';
-import MagicPlayerMuxPopover from './src/components/MagicPlayerMuxPopover.vue.js';
-import MagicPlayerOverlay from './src/components/MagicPlayerOverlay.vue.js';
-import MagicPlayerPoster from './src/components/MagicPlayerPoster.vue.js';
-import MagicPlayerTimeline from './src/components/MagicPlayerTimeline.vue.js';
 import { useMagicPlayer } from './src/composables/useMagicPlayer.js';
+import type { Plugin } from 'vue';
+import type { MagicPlayerOptions } from './src/types/index.js';
 declare const MagicPlayerPlugin: Plugin;
-export { MagicPlayerPlugin, MagicPlayer, MagicPlayerControls, MagicPlayerDisplayTime, MagicPlayerMuxPopover, MagicPlayerPoster, MagicPlayerOverlay, MagicPlayerTimeline, useMagicPlayer, };
+export { MagicPlayerPlugin, useMagicPlayer };
+export type { MagicPlayerOptions };