vault66-crt-effect/dist/vue.js

A customizable CRT (retro monitor) visual effect for React, Vue, and Web Components

import { defineComponent as p, h as t } from "vue";
import { computeCrt as f } from "./core.js";
const c = p({
  name: "CRTEffect",
  props: {
    preset: { type: String, default: void 0 },
    enabled: { type: Boolean, default: void 0 },
    fill: { type: Boolean, default: void 0 },
    theme: {
      type: String,
      default: void 0
    },
    sweepDuration: { type: Number, default: void 0 },
    sweepThickness: { type: Number, default: void 0 },
    sweepStyle: {
      type: String,
      default: void 0
    },
    scanlineOpacity: { type: Number, default: void 0 },
    scanlineColor: { type: String, default: void 0 },
    scanlineThickness: { type: Number, default: void 0 },
    scanlineGap: { type: Number, default: void 0 },
    scanlineOrientation: {
      type: String,
      default: void 0
    },
    enableScanlines: { type: Boolean, default: void 0 },
    enableSweep: { type: Boolean, default: void 0 },
    enableGlow: { type: Boolean, default: void 0 },
    glowColor: { type: String, default: void 0 },
    enableEdgeGlow: { type: Boolean, default: void 0 },
    edgeGlowColor: { type: String, default: void 0 },
    edgeGlowSize: { type: Number, default: void 0 },
    enableFlicker: { type: Boolean, default: void 0 },
    flickerIntensity: {
      type: [String, Number],
      default: void 0
    },
    flickerSpeed: {
      type: [String, Number],
      default: void 0
    },
    enableGlitch: { type: Boolean, default: void 0 },
    glitchIntensity: {
      type: [String, Number],
      default: void 0
    },
    glitchSpeed: {
      type: [String, Number],
      default: void 0
    },
    glitchChromatic: { type: Boolean, default: void 0 },
    enableVignette: { type: Boolean, default: void 0 },
    vignetteIntensity: { type: Number, default: void 0 },
    enableCurvature: { type: Boolean, default: void 0 },
    curvatureIntensity: { type: Number, default: void 0 },
    enableGlare: { type: Boolean, default: void 0 },
    glareIntensity: { type: Number, default: void 0 },
    enableNoise: { type: Boolean, default: void 0 },
    noiseOpacity: { type: Number, default: void 0 },
    tintText: { type: Boolean, default: void 0 },
    textColor: { type: String, default: void 0 },
    sweepColor: { type: String, default: void 0 }
  },
  setup(o, { slots: e }) {
    return () => {
      var i, d;
      const { enabled: n, wrapper: l, inner: a, overlays: u } = f(
        o
      );
      return n ? t("div", { class: l.className, style: l.style }, [
        t("div", { class: a.className, style: a.style }, (d = e.default) == null ? void 0 : d.call(e)),
        ...u.map((r) => t("div", { class: r }))
      ]) : (i = e.default) == null ? void 0 : i.call(e);
    };
  }
});
export {
  c as CRTEffect,
  c as default
};