@maas/vue-equipment 1.1.0 → 1.3.0

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -32,8 +32,9 @@ const functions$1 = [
 	{
 		name: "MagicDotMatrix",
 		"package": "plugins",
-		lastUpdated: 0,
-		internal: true
+		lastUpdated: 1793291276000,
+		docs: "https://vue.equipment/plugins/MagicDotMatrix",
+		description: "MagicDotMatrix is a dot matrix display for playing frame based animations on a grid of dots"
 	},
 	{
 		name: "MagicDraggable",
@@ -122,7 +123,7 @@ const functions$1 = [
 	{
 		name: "MagicTray",
 		"package": "plugins",
-		lastUpdated: 1792675743000,
+		lastUpdated: 1793032883000,
 		docs: "https://vue.equipment/plugins/MagicTray",
 		description: "MagicTray is a flexible"
 	},

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

@@ -2,7 +2,7 @@ import { easeOutQuad } from "@maas/vue-equipment/utils";
 const defaultOptions = {
   loop: false,
   threshold: {
-    lock: 10
+    lock: 8
   },
   animation: {
     snap: {

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

@@ -0,0 +1,14 @@
+import MagicDotMatrix from './src/components/MagicDotMatrix.vue.js';
+import { useMagicDotMatrix } from './src/composables/useMagicDotMatrix.js';
+import { useMagicDotMatrixEmoji } from './src/composables/useMagicDotMatrixEmoji.js';
+import type { Plugin } from 'vue';
+import type { DotMatrixEmojiMotion, DotMatrixEvents, DotMatrixFrame, DotMatrixGrid, DotMatrixLayeredFrame, DotMatrixSequence, MagicDotMatrixEmojiOptions, MagicDotMatrixOptions } from './src/types/index.js';
+declare const MagicDotMatrixPlugin: Plugin;
+export * from './src/utils/presets/index.js';
+export { equalizerFrame } from './src/utils/sequence/equalizerFrame.js';
+export { getRings } from './src/utils/sequence/getRings.js';
+export { ringPath } from './src/utils/sequence/ringPath.js';
+export { toIndex } from './src/utils/sequence/toIndex.js';
+export { withTrail } from './src/utils/sequence/withTrail.js';
+export { MagicDotMatrixPlugin, MagicDotMatrix, useMagicDotMatrix, useMagicDotMatrixEmoji, };
+export type { DotMatrixEmojiMotion, DotMatrixEvents, DotMatrixFrame, DotMatrixGrid, DotMatrixLayeredFrame, DotMatrixSequence, MagicDotMatrixEmojiOptions, MagicDotMatrixOptions, };

package/dist/plugins/MagicDotMatrix/index.mjs

@@ -0,0 +1,20 @@
+import MagicDotMatrix from "./src/components/MagicDotMatrix.vue";
+import { useMagicDotMatrix } from "./src/composables/useMagicDotMatrix.mjs";
+import { useMagicDotMatrixEmoji } from "./src/composables/useMagicDotMatrixEmoji.mjs";
+const MagicDotMatrixPlugin = {
+  install: (app) => {
+    app.component("MagicDotMatrix", MagicDotMatrix);
+  }
+};
+export * from "./src/utils/presets/index.mjs";
+export { equalizerFrame } from "./src/utils/sequence/equalizerFrame.mjs";
+export { getRings } from "./src/utils/sequence/getRings.mjs";
+export { ringPath } from "./src/utils/sequence/ringPath.mjs";
+export { toIndex } from "./src/utils/sequence/toIndex.mjs";
+export { withTrail } from "./src/utils/sequence/withTrail.mjs";
+export {
+  MagicDotMatrixPlugin,
+  MagicDotMatrix,
+  useMagicDotMatrix,
+  useMagicDotMatrixEmoji
+};

package/dist/plugins/MagicDotMatrix/nuxt.mjs

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

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

@@ -0,0 +1,10 @@
+import type { MaybeRef } from 'vue';
+import type { DotMatrixSequence, MagicDotMatrixOptions } from '../types/index.js';
+interface MagicDotMatrixProps {
+    id: MaybeRef<string>;
+    sequence: DotMatrixSequence;
+    options?: MagicDotMatrixOptions;
+}
+declare const __VLS_export: import("vue").DefineComponent<MagicDotMatrixProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDotMatrixProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,103 @@
+<template>
+  <div
+    class="magic-dot-matrix"
+    :data-id="toValue(id)"
+    :data-playing="state.playing"
+    :style="{ '--mdm-cols': mappedCols, '--mdm-rows': mappedRows }"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg">
+      <rect
+        v-for="dot in dots"
+        :key="dot"
+        class="magic-dot-matrix__dot"
+        :data-active="tones.has(dot) || null"
+        :style="dotStyle(dot)"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, toValue, watch } from "vue";
+import { useDotMatrixState } from "../composables/private/useDotMatrixState";
+import { useDotMatrixApi } from "../composables/private/useDotMatrixApi";
+import { defaultOptions } from "../utils/defaultOptions";
+const { id, sequence, options } = defineProps({
+  id: { type: null, required: true },
+  sequence: { type: Array, required: true },
+  options: { type: Object, required: false }
+});
+const { initializeState } = useDotMatrixState(id);
+const state = initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
+const { tones, initialize } = useDotMatrixApi({
+  instanceId: id,
+  sequence: () => sequence
+});
+const mappedCols = computed(() => state.options.cols ?? defaultOptions.cols);
+const mappedRows = computed(() => state.options.rows ?? defaultOptions.rows);
+const dots = computed(
+  () => Array.from(
+    { length: mappedCols.value * mappedRows.value },
+    (_, index) => index
+  )
+);
+function dotStyle(index) {
+  const tone = tones.value.get(index);
+  return {
+    "--mdm-col": index % mappedCols.value,
+    "--mdm-row": Math.floor(index / mappedCols.value),
+    "--mdm-tone-color": tone ? `var(--magic-dot-matrix-color-${tone})` : void 0
+  };
+}
+onMounted(() => {
+  initialize();
+});
+</script>
+
+<style>
+.magic-dot-matrix {
+  display: block;
+  container-type: inline-size;
+}
+
+.magic-dot-matrix svg {
+  --mdm-gap: var(
+    --magic-dot-matrix-gap,
+    calc(100cqi / (4 * var(--mdm-cols) - 1))
+  );
+  --mdm-dot-size: calc(
+    (100cqi - (var(--mdm-cols) - 1) * var(--mdm-gap)) / var(--mdm-cols)
+  );
+  display: block;
+  width: 100cqi;
+  height: calc(
+    var(--mdm-rows) * var(--mdm-dot-size) + (var(--mdm-rows) - 1) *
+      var(--mdm-gap)
+  );
+  background: var(--magic-dot-matrix-background, transparent);
+}
+
+.magic-dot-matrix__dot {
+  x: calc(var(--mdm-col) * (var(--mdm-dot-size) + var(--mdm-gap)));
+  y: calc(var(--mdm-row) * (var(--mdm-dot-size) + var(--mdm-gap)));
+  width: var(--mdm-dot-size);
+  height: var(--mdm-dot-size);
+  rx: calc(var(--magic-dot-matrix-radius, 0.33) * var(--mdm-dot-size));
+  fill: var(
+    --magic-dot-matrix-inactive-color,
+    color-mix(in srgb, currentColor 15%, transparent)
+  );
+  transition: var(--magic-dot-matrix-transition, none);
+}
+
+.magic-dot-matrix__dot[data-active='true'] {
+  fill: var(--mdm-tone-color, var(--magic-dot-matrix-color, currentColor));
+}
+</style>

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

@@ -0,0 +1,10 @@
+import type { MaybeRef } from 'vue';
+import type { DotMatrixSequence, MagicDotMatrixOptions } from '../types/index.js';
+interface MagicDotMatrixProps {
+    id: MaybeRef<string>;
+    sequence: DotMatrixSequence;
+    options?: MagicDotMatrixOptions;
+}
+declare const __VLS_export: import("vue").DefineComponent<MagicDotMatrixProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDotMatrixProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/plugins/MagicDotMatrix/src/composables/private/useDotMatrixApi.d.ts

@@ -0,0 +1,10 @@
+import type { MaybeRef, MaybeRefOrGetter } from 'vue';
+import type { DotMatrixSequence } from '../../types/index.js';
+export type UseDotMatrixApiParams = {
+    instanceId: MaybeRef<string>;
+    sequence: MaybeRefOrGetter<DotMatrixSequence>;
+};
+export declare function useDotMatrixApi({ instanceId, sequence, }: UseDotMatrixApiParams): {
+    tones: import("vue").ComputedRef<Map<number, number>>;
+    initialize: () => void;
+};

package/dist/plugins/MagicDotMatrix/src/composables/private/useDotMatrixApi.mjs

@@ -0,0 +1,82 @@
+import { computed, toValue, watch } from "vue";
+import { useIntervalFn } from "@vueuse/core";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useDotMatrixState } from "./useDotMatrixState.mjs";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
+export function useDotMatrixApi({
+  instanceId,
+  sequence
+}) {
+  const { initializeState } = useDotMatrixState(instanceId);
+  const state = initializeState();
+  const emitter = useMagicEmitter();
+  const maxLoops = computed(() => {
+    switch (state.options.loop) {
+      case true:
+      case void 0:
+        return Infinity;
+      case false:
+        return 1;
+      default:
+        return Math.max(1, state.options.loop);
+    }
+  });
+  const tones = computed(() => {
+    const frame = toValue(sequence)[state.frame] ?? [];
+    const layers = isLayered(frame) ? frame : [frame];
+    const mapped = /* @__PURE__ */ new Map();
+    layers.forEach((layer, index) => {
+      layer.forEach((dot) => mapped.set(dot, index + 1));
+    });
+    return mapped;
+  });
+  function isLayered(frame) {
+    return frame.some((entry) => Array.isArray(entry));
+  }
+  function advance() {
+    const length = toValue(sequence).length;
+    if (length === 0) {
+      return;
+    }
+    const next = (state.frame + 1) % length;
+    if (next === 0) {
+      state.loops++;
+      if (state.loops >= maxLoops.value) {
+        state.playing = false;
+        emitter.emit("finish", { id: toValue(instanceId) });
+        return;
+      }
+    }
+    state.frame = next;
+  }
+  const { pause, resume } = useIntervalFn(
+    advance,
+    () => state.options.interval ?? defaultOptions.interval,
+    { immediate: false }
+  );
+  function sync() {
+    pause();
+    if (state.playing && toValue(sequence).length > 0) {
+      resume();
+    }
+  }
+  function initialize() {
+    if (!(state.options.autoplay ?? defaultOptions.autoplay)) {
+      state.playing = false;
+    }
+    sync();
+  }
+  watch(
+    () => toValue(sequence),
+    () => {
+      state.frame = 0;
+      state.loops = 0;
+      sync();
+    }
+  );
+  watch(() => state.playing, sync);
+  return {
+    tones,
+    initialize
+  };
+}

package/dist/plugins/MagicDotMatrix/src/composables/private/useDotMatrixState.d.ts

@@ -0,0 +1,6 @@
+import type { MaybeRef } from 'vue';
+import type { MagicDotMatrixOptions } from '../../types/index.js';
+export declare function useDotMatrixState(instanceId: MaybeRef<string>): {
+    initializeState: (options?: MagicDotMatrixOptions) => any;
+    dotMatrixStateStore: any;
+};

package/dist/plugins/MagicDotMatrix/src/composables/private/useDotMatrixState.mjs

@@ -0,0 +1,71 @@
+import { reactive, toValue, onScopeDispose } from "vue";
+import { defu } from "defu";
+import { createStateStore } from "@maas/vue-equipment/utils";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
+const getDotMatrixStateStore = createStateStore(
+  "MagicDotMatrix",
+  () => []
+);
+export function useDotMatrixState(instanceId) {
+  const dotMatrixStateStore = getDotMatrixStateStore();
+  let scopeCounted = false;
+  function createState(id) {
+    const state = {
+      id,
+      refCount: 0,
+      options: { ...defaultOptions },
+      playing: true,
+      frame: 0,
+      loops: 0
+    };
+    return reactive(state);
+  }
+  function addState(id) {
+    const state = createState(id);
+    dotMatrixStateStore.value = [...dotMatrixStateStore.value, state];
+    return state;
+  }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    dotMatrixStateStore.value = dotMatrixStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
+  function initializeState(options) {
+    const currentId = toValue(instanceId);
+    let state = dotMatrixStateStore.value.find(
+      (entry) => entry.id === currentId
+    );
+    if (!state) {
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
+    }
+    if (options) {
+      const mappedOptions = defu(options, defaultOptions);
+      state.options = mappedOptions;
+    }
+    return state;
+  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = dotMatrixStateStore.value.find(
+      (entry) => entry.id === currentId
+    );
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  }, true);
+  return {
+    initializeState,
+    dotMatrixStateStore
+  };
+}

package/dist/plugins/MagicDotMatrix/src/composables/useMagicDotMatrix.d.ts

@@ -0,0 +1,10 @@
+import type { MaybeRef } from 'vue';
+export declare function useMagicDotMatrix(id: MaybeRef<string>): {
+    state: any;
+    isPlaying: import("vue").ComputedRef<any>;
+    currentFrame: import("vue").ComputedRef<any>;
+    play: () => void;
+    pause: () => void;
+    restart: () => void;
+};
+export type UseMagicDotMatrixReturn = ReturnType<typeof useMagicDotMatrix>;

package/dist/plugins/MagicDotMatrix/src/composables/useMagicDotMatrix.mjs

@@ -0,0 +1,27 @@
+import { computed } from "vue";
+import { useDotMatrixState } from "./private/useDotMatrixState.mjs";
+export function useMagicDotMatrix(id) {
+  const { initializeState } = useDotMatrixState(id);
+  const state = initializeState();
+  const isPlaying = computed(() => state.playing);
+  const currentFrame = computed(() => state.frame);
+  function play() {
+    state.playing = true;
+  }
+  function pause() {
+    state.playing = false;
+  }
+  function restart() {
+    state.frame = 0;
+    state.loops = 0;
+    state.playing = true;
+  }
+  return {
+    state,
+    isPlaying,
+    currentFrame,
+    play,
+    pause,
+    restart
+  };
+}

package/dist/plugins/MagicDotMatrix/src/composables/useMagicDotMatrixEmoji.d.ts

@@ -0,0 +1,19 @@
+import type { MaybeRefOrGetter } from 'vue';
+import type { MagicDotMatrixEmojiOptions } from '../types/index.js';
+/**
+ * @experimental Options, return values and motions may change, and the
+ * composable may be removed again in a future release.
+ */
+export declare function useMagicDotMatrixEmoji(emoji: MaybeRefOrGetter<string>, options?: MaybeRefOrGetter<MagicDotMatrixEmojiOptions>): {
+    sequence: import("vue").ComputedRef<import("../types/index.js").DotMatrixLayeredFrame[]>;
+    options: import("vue").ComputedRef<{
+        cols: number;
+        rows: number;
+        interval: number;
+    }>;
+    style: import("vue").ComputedRef<{
+        '--magic-dot-matrix-inactive-color'?: string | undefined;
+    }>;
+    motion: import("vue").ComputedRef<import("../types/index.js").DotMatrixEmojiMotion>;
+};
+export type UseMagicDotMatrixEmojiReturn = ReturnType<typeof useMagicDotMatrixEmoji>;

package/dist/plugins/MagicDotMatrix/src/composables/useMagicDotMatrixEmoji.mjs

@@ -0,0 +1,50 @@
+import { computed, shallowRef, toValue, watch } from "vue";
+import { tryOnMounted } from "@vueuse/core";
+import { defu } from "defu";
+import { animateEmoji } from "../utils/emoji/animateEmoji.mjs";
+import { motions } from "../utils/emoji/motions.mjs";
+import { pickMotion } from "../utils/emoji/pickMotion.mjs";
+import { defaultEmojiOptions } from "../utils/defaultOptions.mjs";
+export function useMagicDotMatrixEmoji(emoji, options) {
+  const mappedOptions = computed(
+    () => defu(toValue(options) ?? {}, defaultEmojiOptions)
+  );
+  const animation = shallowRef({ sequence: [], colors: [] });
+  const motion = computed(() => pickMotion(toValue(emoji)).name);
+  const sequence = computed(() => animation.value.sequence);
+  const matrixOptions = computed(() => ({
+    cols: mappedOptions.value.cols,
+    rows: mappedOptions.value.rows,
+    interval: motions[motion.value].interval
+  }));
+  const style = computed(() => {
+    const { colors } = animation.value;
+    return {
+      ...Object.fromEntries(
+        colors.map((color, index) => [
+          `--magic-dot-matrix-color-${index + 1}`,
+          color
+        ])
+      ),
+      ...colors[0] && {
+        "--magic-dot-matrix-inactive-color": `color-mix(in srgb, ${colors[0]} 15%, transparent)`
+      }
+    };
+  });
+  function update() {
+    const { sequence: sequence2, colors } = animateEmoji({
+      emoji: toValue(emoji),
+      ...mappedOptions.value
+    });
+    animation.value = { sequence: sequence2, colors };
+  }
+  tryOnMounted(() => {
+    watch([() => toValue(emoji), mappedOptions], update, { immediate: true });
+  });
+  return {
+    sequence,
+    options: matrixOptions,
+    style,
+    motion
+  };
+}

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

@@ -0,0 +1,40 @@
+export type DotMatrixFrame = Array<number>;
+export type DotMatrixLayeredFrame = Array<DotMatrixFrame>;
+export type DotMatrixSequence = Array<DotMatrixFrame | DotMatrixLayeredFrame>;
+export interface DotMatrixGrid {
+    cols: number;
+    rows: number;
+}
+export interface MagicDotMatrixOptions {
+    cols?: number;
+    rows?: number;
+    interval?: number;
+    loop?: boolean | number;
+    autoplay?: boolean;
+}
+export interface DotMatrixState {
+    id: string;
+    refCount: number;
+    options: MagicDotMatrixOptions;
+    playing: boolean;
+    frame: number;
+    loops: number;
+}
+export interface DotMatrixEvents {
+    finish: {
+        id: string;
+    };
+}
+export type DotMatrixEmojiMotion = 'beat' | 'flicker' | 'swing' | 'wave' | 'fly' | 'drive' | 'bounce' | 'hop' | 'spin' | 'flip' | 'float' | 'twinkle' | 'shake' | 'rain' | 'snow' | 'sleep' | 'rock' | 'burst' | 'stamp' | 'gleam' | 'flag' | 'sway' | 'love' | 'steam' | 'look' | 'nod' | 'tilt' | 'swim' | 'flap' | 'clap' | 'bob' | 'pop';
+export interface MagicDotMatrixEmojiOptions {
+    cols?: number;
+    rows?: number;
+    colors?: number;
+    threshold?: number;
+}
+export interface DotMatrixEmojiAnimation {
+    motion: DotMatrixEmojiMotion;
+    interval: number;
+    sequence: Array<DotMatrixLayeredFrame>;
+    colors: Array<string>;
+}

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

@@ -0,0 +1,4 @@
+import type { MagicDotMatrixEmojiOptions, MagicDotMatrixOptions } from '../types/index.js';
+declare const defaultOptions: Required<MagicDotMatrixOptions>;
+declare const defaultEmojiOptions: Required<MagicDotMatrixEmojiOptions>;
+export { defaultOptions, defaultEmojiOptions };

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

@@ -0,0 +1,14 @@
+const defaultOptions = {
+  cols: 7,
+  rows: 7,
+  interval: 100,
+  loop: true,
+  autoplay: true
+};
+const defaultEmojiOptions = {
+  cols: 10,
+  rows: 10,
+  colors: 6,
+  threshold: 0.38
+};
+export { defaultOptions, defaultEmojiOptions };

package/dist/plugins/MagicDotMatrix/src/utils/emoji/animateEmoji.d.ts

@@ -0,0 +1,5 @@
+import type { DotMatrixEmojiAnimation, MagicDotMatrixEmojiOptions } from '../../types/index.js';
+export type AnimateEmojiArgs = Required<MagicDotMatrixEmojiOptions> & {
+    emoji: string;
+};
+export declare function animateEmoji({ emoji, cols, rows, colors: colorCount, threshold, }: AnimateEmojiArgs): DotMatrixEmojiAnimation;