@elyndra/vue-bgs 1.2.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@elyndra/vue-bgs",
+  "version": "1.2.0",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Elyndra backgrounds components for Vue",
+  "keywords": [
+    "elyndra",
+    "ui",
+    "front-end",
+    "framework",
+    "scifi",
+    "sci-fi",
+    "science-fiction",
+    "vue"
+  ],
+  "homepage": "https://elyndra.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Gabox301/elyndra.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Gabox301/elyndra/issues"
+  },
+  "funding": "https://github.com/sponsors/romelperez",
+  "license": "MIT",
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "types": "./src/index.ts",
+  "module": "./src/index.ts",
+  "main": "./src/index.ts",
+  "peerDependencies": {
+    "vue": "3"
+  },
+  "dependencies": {
+    "@elyndra/animated": "^1.2.0",
+    "@elyndra/animator": "^1.2.0",
+    "@elyndra/bgs": "^1.2.0",
+    "@elyndra/tools": "^1.2.0",
+    "@elyndra/vue-animated": "^1.2.0",
+    "@elyndra/vue-animator": "^1.2.0",
+    "@elyndra/vue-tools": "^1.2.0",
+    "tslib": "2.8.1"
+  },
+  "scripts": {
+    "build": "tsc --noEmit -p tsconfig.json && vue-tsc --noEmit -p tsconfig.json"
+  }
+}

package/src/Dots/Dots.test.ts

@@ -0,0 +1,15 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { Dots } from './index.js';
+
+test('Should render canvas element with elyndra class', async () => {
+  const wrapper = mount(Dots, {
+    props: { color: 'cyan' },
+  });
+  await flushPromises();
+
+  const element = wrapper.element as HTMLElement;
+  expect(element.tagName).toBe('CANVAS');
+  expect(element.classList.contains('elyndra-bgs-dots')).toBe(true);
+  wrapper.unmount();
+});

package/src/Dots/Dots.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { createBackgroundDots } from '@elyndra/bgs';
+import { cx } from '@elyndra/tools';
+import { useAnimator } from '@elyndra/vue-animator';
+import { mergeRefs } from '@elyndra/vue-tools';
+import { watch } from 'vue';
+import { positionedStyle } from '../internal/styles.js';
+import type { DotsProps } from '../types.js';
+
+const props = withDefaults(defineProps<DotsProps>(), {
+  // Vue boolean-casts absent props with a Boolean type to `false`.
+  // `positioned` defaults to `true`, so it gets an `undefined` default
+  // which skips the cast.
+  positioned: undefined,
+});
+
+const getAnimator = useAnimator();
+const canvasBox: { current: HTMLCanvasElement | null } = { current: null };
+// The props object stays live, so the vanilla background always reads the
+// latest settings, same as the per-render ref update in React/Preact and the
+// Solid proxy.
+const settingsRef: { current: DotsProps } = { current: props };
+
+const setCanvasRef = (value: unknown): void => {
+  const element = value as HTMLCanvasElement | null;
+  canvasBox.current = element;
+  mergeRefs(props.elementRef)(element);
+};
+
+watch(
+  () => [canvasBox.current, getAnimator?.()] as const,
+  ([canvas, animator], _previous, onCleanup) => {
+    if (!canvas) {
+      return;
+    }
+
+    const background = createBackgroundDots({
+      canvas,
+      animator: animator?.node,
+      settingsRef,
+    });
+
+    onCleanup(() => background.cancel());
+  },
+  { immediate: true, flush: 'post' },
+);
+</script>
+
+<template>
+  <canvas
+    aria-hidden="true"
+    :ref="setCanvasRef"
+    :id="props.id"
+    :class="cx('elyndra-bgs-dots', props.className)"
+    :style="{ ...((props.positioned ?? true) ? positionedStyle : null), ...props.style }"
+  />
+</template>

package/src/Dots/index.ts

@@ -0,0 +1 @@
+export { default as Dots } from './Dots.vue';

package/src/GridLines/GridLines.test.ts

@@ -0,0 +1,15 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { GridLines } from './index.js';
+
+test('Should render canvas element with elyndra class', async () => {
+  const wrapper = mount(GridLines, {
+    props: { color: 'cyan' },
+  });
+  await flushPromises();
+
+  const element = wrapper.element as HTMLElement;
+  expect(element.tagName).toBe('CANVAS');
+  expect(element.classList.contains('elyndra-bgs-gridlines')).toBe(true);
+  wrapper.unmount();
+});

package/src/GridLines/GridLines.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { createBackgroundGridLines } from '@elyndra/bgs';
+import { cx } from '@elyndra/tools';
+import { useAnimator } from '@elyndra/vue-animator';
+import { mergeRefs } from '@elyndra/vue-tools';
+import { watch } from 'vue';
+import { positionedStyle } from '../internal/styles.js';
+import type { GridLinesProps } from '../types.js';
+
+const props = withDefaults(defineProps<GridLinesProps>(), {
+  // Vue boolean-casts absent props with a Boolean type to `false`.
+  // `positioned` defaults to `true`, so it gets an `undefined` default
+  // which skips the cast.
+  positioned: undefined,
+});
+
+const getAnimator = useAnimator();
+const canvasBox: { current: HTMLCanvasElement | null } = { current: null };
+// The props object stays live, so the vanilla background always reads the
+// latest settings, same as the per-render ref update in React/Preact and the
+// Solid proxy.
+const settingsRef: { current: GridLinesProps } = { current: props };
+
+const setCanvasRef = (value: unknown): void => {
+  const element = value as HTMLCanvasElement | null;
+  canvasBox.current = element;
+  mergeRefs(props.elementRef)(element);
+};
+
+watch(
+  () => [canvasBox.current, getAnimator?.()] as const,
+  ([canvas, animator], _previous, onCleanup) => {
+    if (!canvas) {
+      return;
+    }
+
+    const background = createBackgroundGridLines({
+      canvas,
+      animator: animator?.node,
+      settingsRef,
+    });
+
+    onCleanup(() => background.cancel());
+  },
+  { immediate: true, flush: 'post' },
+);
+</script>
+
+<template>
+  <canvas
+    aria-hidden="true"
+    :ref="setCanvasRef"
+    :id="props.id"
+    :class="cx('elyndra-bgs-gridlines', props.className)"
+    :style="{ ...((props.positioned ?? true) ? positionedStyle : null), ...props.style }"
+  />
+</template>

package/src/GridLines/index.ts

@@ -0,0 +1 @@
+export { default as GridLines } from './GridLines.vue';

package/src/MovingLines/MovingLines.test.ts

@@ -0,0 +1,15 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { MovingLines } from './index.js';
+
+test('Should render canvas element with elyndra class', async () => {
+  const wrapper = mount(MovingLines, {
+    props: { color: 'cyan' },
+  });
+  await flushPromises();
+
+  const element = wrapper.element as HTMLElement;
+  expect(element.tagName).toBe('CANVAS');
+  expect(element.classList.contains('elyndra-bgs-movinglines')).toBe(true);
+  wrapper.unmount();
+});

package/src/MovingLines/MovingLines.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { createBackgroundMovingLines } from '@elyndra/bgs';
+import { cx } from '@elyndra/tools';
+import { useAnimator } from '@elyndra/vue-animator';
+import { mergeRefs } from '@elyndra/vue-tools';
+import { watch } from 'vue';
+import { positionedStyle } from '../internal/styles.js';
+import type { MovingLinesProps } from '../types.js';
+
+const props = withDefaults(defineProps<MovingLinesProps>(), {
+  // Vue boolean-casts absent props with a Boolean type to `false`.
+  // `positioned` defaults to `true`, so it gets an `undefined` default
+  // which skips the cast.
+  positioned: undefined,
+});
+
+const getAnimator = useAnimator();
+const canvasBox: { current: HTMLCanvasElement | null } = { current: null };
+// The props object stays live, so the vanilla background always reads the
+// latest settings, same as the per-render ref update in React/Preact and the
+// Solid proxy.
+const settingsRef: { current: MovingLinesProps } = { current: props };
+
+const setCanvasRef = (value: unknown): void => {
+  const element = value as HTMLCanvasElement | null;
+  canvasBox.current = element;
+  mergeRefs(props.elementRef)(element);
+};
+
+watch(
+  () => [canvasBox.current, getAnimator?.()] as const,
+  ([canvas, animator], _previous, onCleanup) => {
+    if (!canvas) {
+      return;
+    }
+
+    const background = createBackgroundMovingLines({
+      canvas,
+      animator: animator?.node,
+      settingsRef,
+    });
+
+    onCleanup(() => background.cancel());
+  },
+  { immediate: true, flush: 'post' },
+);
+</script>
+
+<template>
+  <canvas
+    aria-hidden="true"
+    :ref="setCanvasRef"
+    :id="props.id"
+    :class="cx('elyndra-bgs-movinglines', props.className)"
+    :style="{ ...((props.positioned ?? true) ? positionedStyle : null), ...props.style }"
+  />
+</template>

package/src/MovingLines/index.ts

@@ -0,0 +1 @@
+export { default as MovingLines } from './MovingLines.vue';

package/src/Puffs/Puffs.test.ts

@@ -0,0 +1,15 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { Puffs } from './index.js';
+
+test('Should render canvas element with elyndra class', async () => {
+  const wrapper = mount(Puffs, {
+    props: { color: 'cyan', quantity: 10 },
+  });
+  await flushPromises();
+
+  const element = wrapper.element as HTMLElement;
+  expect(element.tagName).toBe('CANVAS');
+  expect(element.classList.contains('elyndra-bgs-puffs')).toBe(true);
+  wrapper.unmount();
+});

package/src/Puffs/Puffs.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { createBackgroundPuffs } from '@elyndra/bgs';
+import { cx } from '@elyndra/tools';
+import { useAnimator } from '@elyndra/vue-animator';
+import { mergeRefs } from '@elyndra/vue-tools';
+import { watch } from 'vue';
+import { positionedStyle } from '../internal/styles.js';
+import type { PuffsProps } from '../types.js';
+
+const props = withDefaults(defineProps<PuffsProps>(), {
+  // Vue boolean-casts absent props with a Boolean type to `false`.
+  // `positioned` defaults to `true`, so it gets an `undefined` default
+  // which skips the cast.
+  positioned: undefined,
+});
+
+const getAnimator = useAnimator();
+const canvasBox: { current: HTMLCanvasElement | null } = { current: null };
+// The props object stays live, so the vanilla background always reads the
+// latest settings, same as the per-render ref update in React/Preact and the
+// Solid proxy.
+const settingsRef: { current: PuffsProps } = { current: props };
+
+const setCanvasRef = (value: unknown): void => {
+  const element = value as HTMLCanvasElement | null;
+  canvasBox.current = element;
+  mergeRefs(props.elementRef)(element);
+};
+
+watch(
+  () => [canvasBox.current, getAnimator?.()] as const,
+  ([canvas, animator], _previous, onCleanup) => {
+    if (!canvas) {
+      return;
+    }
+
+    const background = createBackgroundPuffs({
+      canvas,
+      animator: animator?.node,
+      settingsRef,
+    });
+
+    onCleanup(() => background.cancel());
+  },
+  { immediate: true, flush: 'post' },
+);
+</script>
+
+<template>
+  <canvas
+    aria-hidden="true"
+    :ref="setCanvasRef"
+    :id="props.id"
+    :class="cx('elyndra-bgs-puffs', props.className)"
+    :style="{ ...((props.positioned ?? true) ? positionedStyle : null), ...props.style }"
+  />
+</template>

package/src/Puffs/index.ts

@@ -0,0 +1 @@
+export { default as Puffs } from './Puffs.vue';

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './Dots/index.js';
+export * from './GridLines/index.js';
+export * from './MovingLines/index.js';
+export * from './Puffs/index.js';
+export type * from './types.js';

package/src/internal/styles.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'vue';
+
+export const positionedStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  display: 'block',
+  border: 0,
+  margin: 0,
+  padding: 0,
+  width: '100%',
+  height: '100%',
+};

package/src/types.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties } from 'vue';
+import type {
+  CreateBackgroundDotsSettings,
+  CreateBackgroundGridLinesSettings,
+  CreateBackgroundMovingLinesSettings,
+  CreateBackgroundPuffsSettings,
+} from '@elyndra/bgs';
+import type { ElementRef } from '@elyndra/vue-tools';
+
+interface DotsProps extends CreateBackgroundDotsSettings {
+  elementRef?: ElementRef<HTMLCanvasElement>;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  positioned?: boolean;
+}
+
+interface GridLinesProps extends CreateBackgroundGridLinesSettings {
+  elementRef?: ElementRef<HTMLCanvasElement>;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  positioned?: boolean;
+}
+
+interface MovingLinesProps extends CreateBackgroundMovingLinesSettings {
+  elementRef?: ElementRef<HTMLCanvasElement>;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  positioned?: boolean;
+}
+
+interface PuffsProps extends CreateBackgroundPuffsSettings {
+  elementRef?: ElementRef<HTMLCanvasElement>;
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  positioned?: boolean;
+}
+
+export type { DotsProps, ElementRef, GridLinesProps, MovingLinesProps, PuffsProps };

package/src/vue.d.ts

@@ -0,0 +1,8 @@
+// In-repo ambient types for `.vue` imports (tests only). The published
+// package ships the `.vue` sources and consumers get full prop inference
+// from their own Vue setup.
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const Component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default Component;
+}