@maas/vue-equipment 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/plugins/MagicMenu/src/composables/private/useMenuDOM.mjs

@@ -1,6 +1,10 @@
 import { ref, shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useMenuDOM() {
   const positionFixedElements = ref([]);
@@ -12,25 +16,41 @@ export function useMenuDOM() {
   }
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
-    const exclude = new RegExp(/magic-menu?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    const exclude = new RegExp(/magic-menu/);
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     lockScroll,

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

@@ -12,19 +12,19 @@ declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> &
         content?: string;
         backdrop?: string;
     };
-    backdrop: boolean;
-    tag: "dialog" | "div";
-    focusTrap: boolean | import("focus-trap").Options;
+    tag: "div" | "dialog";
     scrollLock: boolean | {
         padding: boolean;
     };
+    keyListener: {
+        close?: string[] | false;
+    };
+    backdrop: boolean;
+    focusTrap: boolean | import("focus-trap").Options;
     teleport: {
         target?: string;
         disabled?: boolean;
     };
-    keyListener: {
-        close?: string[] | false;
-    };
 };
 declare const close: () => void;
 declare const innerActive: import("vue").ShallowRef<boolean, boolean>;

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.mjs

@@ -2,7 +2,11 @@ import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
@@ -36,24 +40,40 @@ export function useModalDOM(args) {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-modal(__backdrop)?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     trapFocus,

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.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions, import("@nuxt/schema").ModuleOptions, false>;
+export default _default;

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,
+      animation: 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, animation } = 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 (animation.value) {
+      cancelAnimationFrame(animation.value);
+    }
+    const mappedDuration = duration - duration * percentage.value / 100;
+    animation.value = interpolate({
+      from: percentage.value,
+      to: mappedValue,
+      duration: mappedDuration,
+      easing,
+      callback: (value2) => {
+        percentage.value = value2;
+      },
+      animationIdCallback: (id2) => {
+        animation.value = id2;
+      }
+    });
+  }
+  function cancelInterpolatePercentage() {
+    if (animation.value) {
+      cancelAnimationFrame(animation.value);
+      animation.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;
+    animation: number | undefined;
+}
+export type PiePoint = [number, number];

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

@@ -38,31 +38,31 @@ import { MagicPlayerInstanceId } from "../symbols";
 export default /* @__PURE__ */ _defineComponent({
   __name: "MagicPlayerAudioControls",
   props: {
-    id: { type: String, required: false }
+    instanceId: { type: String, required: false }
   },
   setup(__props) {
-    const instanceId = inject(MagicPlayerInstanceId, void 0);
-    const mappedId = computed(() => __props.id ?? instanceId);
-    if (!mappedId.value) {
+    const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
+    const mappedInstanceId = computed(() => __props.instanceId ?? injectedInstanceId);
+    if (!mappedInstanceId.value) {
       throw new Error(
-        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or be passed an id as a prop."
+        "MagicAudioPlayerControls must be nested inside MagicAudioPlayer or an instanceId must be provided."
       );
     }
     const barRef = useTemplateRef("bar");
     const trackRef = useTemplateRef("track");
     const { playing, waiting } = usePlayerMediaApi({
-      id: mappedId.value
+      id: mappedInstanceId.value
     });
     const { play, pause, touched, mouseEntered } = usePlayerAudioApi({
-      id: mappedId.value
+      id: mappedInstanceId.value
     });
     usePlayerControlsApi({
-      id: mappedId.value,
+      id: mappedInstanceId.value,
       barRef,
       trackRef
     });
     const { idle } = useIdle(3e3);
-    provide(MagicPlayerInstanceId, mappedId.value);
+    provide(MagicPlayerInstanceId, mappedInstanceId.value);
     return (_ctx, _cache) => {
       const _component_magic_player_display_time = _resolveComponent("magic-player-display-time");
       const _component_magic_player_timeline = _resolveComponent("magic-player-timeline");

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

@@ -1,7 +1,7 @@
 import IconPlay from './icons/Play.vue.js';
 import IconPause from './icons/Pause.vue.js';
 interface MagicAudioPlayerControlsProps {
-    id?: string;
+    instanceId?: string;
 }
 declare const playing: import("vue").ShallowRef<boolean, boolean>, waiting: import("vue").ShallowRef<boolean, boolean>;
 declare const play: () => void, pause: () => void, touched: import("vue").ShallowRef<boolean, boolean>, mouseEntered: import("vue").ShallowRef<boolean, boolean>;

package/dist/plugins/MagicToast/src/composables/private/useToastDrag.mjs

@@ -257,10 +257,10 @@ export function useToastDrag(args) {
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
-      lockScroll();
       if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
         addScrollLockPadding();
       }
+      lockScroll();
     }
     if (dragging.value) {
       return;

package/dist/plugins/MagicToast/src/composables/private/useToastScrollLock.mjs

@@ -1,6 +1,9 @@
 import { ref, shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useToastScrollLock() {
   const positionFixedElements = ref([]);
@@ -12,25 +15,40 @@ export function useToastScrollLock() {
   }
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
-    const exclude = new RegExp(/magic-toast/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px"
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     lockScroll,

package/dist/plugins/index.d.ts

@@ -8,6 +8,7 @@ export * from './MagicMarquee/index.js';
 export * from './MagicMenu/index.js';
 export * from './MagicModal/index.js';
 export * from './MagicNoise/index.js';
+export * from './MagicPie/index.js';
 export * from './MagicPlayer/index.js';
 export * from './MagicScroll/index.js';
 export * from './MagicToast/index.js';