@5even7/dlc-ui 0.2.18 → 0.2.20

package/dist/chunks/size-Bztk2ryJ.mjs

@@ -0,0 +1,22 @@
+const UNIT_PATTERN = /^[\d.]+(?:px|%|vw|vh|vmin|vmax|em|rem)$/;
+
+/**
+ * Normalize a size option to a CSS length string.
+ * Accepts numbers (treated as px) or strings with px/%, vw/vh/vmin/vmax, em/rem.
+ */
+function parseSize(value) {
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value) || value < 0) throw new Error(`Invalid size: ${value}`);
+    return `${value}px`;
+  }
+  if (typeof value !== 'string') throw new Error(`Invalid size: ${String(value)}`);
+  const trimmed = value.trim();
+  if (!trimmed) throw new Error('Invalid size: empty string');
+  if (/^\d+(?:\.\d+)?$/.test(trimmed)) return `${trimmed}px`;
+  if (!UNIT_PATTERN.test(trimmed)) {
+    throw new Error(`Invalid size or unsupported unit: "${value}" (use px, %, vw, vh, vmin, vmax, em, rem)`);
+  }
+  return trimmed;
+}
+
+export { parseSize as p };

package/dist/chunks/wrapper-DXhy1E7Z.mjs

@@ -0,0 +1,514 @@
+/**
+ * Shared Options-API wrapper factory. The only framework difference is the
+ * render function: Vue2 passes `h` as an argument, Vue3 needs the imported
+ * `h` (see vue2.js / vue3.js). Lifecycle options cover both.
+ */
+
+const CAPSULE_EVENTS = [
+  'ready', 'error', 'click', 'pointerdown', 'pointerup', 'dblclick',
+  'pointerenter', 'pointerleave', 'presetchange', 'contextlost', 'contextrestored'
+];
+const PROGRESS_EVENTS = [
+  'ready', 'error', 'change', 'input', 'update:modelValue',
+  'dragstart', 'dragend', 'presetchange', 'contextlost', 'contextrestored'
+];
+const COLOR_EVENTS = ['ready', 'error', 'presetchange', 'contextlost', 'contextrestored'];
+const EMO_EVENTS = ['ready', 'error', 'complete', 'loopComplete', 'segmentStart', 'namechange', 'typechange'];
+const AVATAR_EVENTS = ['ready', 'change', 'warning', 'error'];
+
+function hookEvents(controller, events, emit) {
+  for (const event of events) {
+    if (event === 'input' || event === 'update:modelValue') continue;
+    controller.on(event, (payload) => {
+      emit(event, payload);
+      if (event === 'change' && payload && (payload.source === 'drag' || payload.source === 'keyboard')) {
+        if (events.indexOf('input') !== -1) emit('input', payload.value);
+        if (events.indexOf('update:modelValue') !== -1) emit('update:modelValue', payload.value);
+      }
+    });
+  }
+}
+
+function makeWrapper({ name, props, events, create, render, methods, watch }) {
+  const internalMethods = {
+    mountController(extraState = {}) {
+      this.controller = create(this.$el, { ...this.$props, ...extraState });
+      hookEvents(this.controller, events, (event, payload) => this.$emit(event, payload));
+      this.moveSlots();
+      this.applyAttrs();
+    },
+    recreate() {
+      const extraState = this.runtimeState();
+      if (this.controller) this.controller.dispose();
+      this.mountController(extraState);
+      // 结构属性连续变化时，插槽内容可能在重建后才被 Vue 写入容器，
+      // 补一次搬运确保不丢。
+      this.$nextTick(() => this.moveSlots());
+    },
+    scheduleRecreate() {
+      if (this._recreateQueued) return;
+      this._recreateQueued = true;
+      this.$nextTick(() => {
+        this._recreateQueued = false;
+        this.recreate();
+      });
+    },
+    moveSlots() {
+      if (!this.controller || !this.controller.element || !this.$el) return;
+      const root = this.controller.element;
+      const textLayer = root.querySelector('.hj-capsule-text, .hj-progress-text');
+      const visualLayer = root.querySelector('.hj-capsule-visual, .hj-progress-visual');
+      const move = (wrapper, layer) => {
+        if (!wrapper || !layer) return;
+        for (const node of Array.from(wrapper.childNodes)) layer.appendChild(node);
+      };
+      const refs = this.$refs || {};
+      move(refs.slotText, textLayer);
+      move(refs.slotColor, visualLayer);
+    },
+    applyAttrs() {
+      if (!this.controller || !this.controller.element || !this.$attrs) return;
+      const root = this.controller.element;
+      for (const key of Object.keys(this.$attrs)) {
+        if (key === 'class' || key === 'style') continue;
+        const value = this.$attrs[key];
+        if (value == null || value === false) root.removeAttribute(key);
+        else root.setAttribute(key, String(value));
+      }
+    },
+    runtimeState() {
+      const controller = this.controller;
+      if (!controller || !controller.dirty) return {};
+      const dirty = controller.dirty;
+      const state = {};
+      if (dirty.preset && controller.preset) state.preset = controller.preset.name;
+      if (dirty.seed && controller.preset && controller.preset.seed !== undefined) state.seed = controller.preset.seed;
+      if (dirty.speed && controller.preset && controller.preset.speed !== undefined) state.speed = controller.preset.speed;
+      if (dirty.colors && controller.preset && Array.isArray(controller.preset.colors)) {
+        state.colors = [...controller.preset.colors];
+      }
+      if (dirty.textRatio && controller.textRatio !== undefined) state.textRatio = controller.textRatio;
+      if (dirty.cssVars && controller.cssVars) state.cssVars = { ...controller.cssVars };
+      if (dirty.value && typeof controller.getValue === 'function') state.value = controller.getValue();
+      if (dirty.edgeStyle && controller.preset) state.edgeStyle = controller.preset.edgeStyle;
+      if (dirty.opacity) state.opacity = controller.opacity;
+      if (dirty.fallbackColor) state.fallbackColor = controller.fallbackColor;
+      if (dirty.mouseColor) state.mouseColor = controller.mouseColor;
+      if (dirty.quality) state.quality = controller.quality;
+      if (dirty.renderScale) state.renderScale = controller.renderScale;
+      if (dirty.paused) state.paused = controller.paused;
+      if (dirty.static) state.static = controller.static;
+      if (dirty.fps) state.fps = controller.fps;
+      if (dirty.step) state.step = controller.step;
+      if (dirty.precision) state.precision = controller.precision;
+      if (dirty.formatValue) state.formatValue = controller.formatValue;
+      if (dirty.direction) state.direction = controller.direction;
+      if (dirty.showValue) state.showValue = controller.showValue;
+      if (dirty.valueSuffix) state.valueSuffix = controller.valueSuffix;
+      return state;
+    }
+  };
+
+  return {
+    name,
+    props,
+    emits: events,
+    render,
+    inheritAttrs: false,
+    mounted() {
+      this.mountController();
+    },
+    beforeUnmount() {
+      if (this.controller) this.controller.dispose();
+    },
+    beforeDestroy() {
+      if (this.controller) this.controller.dispose();
+    },
+    updated() {
+      this.moveSlots();
+      this.applyAttrs();
+    },
+    watch: {
+      preset(value) { if (value && this.controller) this.controller.setPreset(value); },
+      colors(value) { if (value && this.controller) this.controller.setColors(value); },
+      width(value) { if (value !== undefined && this.controller) this.controller.setSize(value); },
+      height(value) { if (value !== undefined && this.controller) this.controller.setSize(undefined, value); },
+      quality(value) { if (value && this.controller) this.controller.setQuality(value); },
+      ...(watch || {})
+    },
+    methods: { ...internalMethods, ...(methods || {}) }
+  };
+}
+
+function makeCapsuleWrapper(createCapsule, render) {
+  return makeWrapper({
+    name: 'dlc-capsule',
+    props: [
+      'preset', 'width', 'height', 'colors', 'seed', 'speed',
+      'textRatio', 'label', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'cssVars',
+      'paused', 'static', 'fps', 'renderScale', 'powerPreference'
+    ],
+    events: CAPSULE_EVENTS,
+    create: createCapsule,
+    render,
+    watch: {
+      seed(value) {
+        const seed = Number(value);
+        if (this.controller && Number.isFinite(seed)) {
+          this.controller.setSeed(seed);
+        }
+      },
+      speed(value) {
+        const speed = Number(value);
+        if (this.controller && Number.isFinite(speed)) {
+          this.controller.setSpeed(speed);
+        }
+      },
+      textRatio(value) {
+        if (value !== undefined && this.controller) this.controller.setTextRatio(Number(value));
+      },
+      cssVars(value) {
+        if (value && this.controller) this.controller.setCssVars(value);
+      },
+      label(value) {
+        if (this.controller) this.controller.setLabel(value);
+      },
+      mouseColor(value) {
+        if (this.controller) this.controller.setMouseColor(value);
+      },
+      paused(value) {
+        if (this.controller) this.controller.setPaused(value);
+      },
+      static(value) {
+        if (this.controller) this.controller.setStatic(value);
+      },
+      fps(value) {
+        if (value !== undefined && this.controller) this.controller.setFps(value);
+      },
+      renderScale(value) {
+        if (value !== undefined && this.controller) this.controller.setRenderScale(value);
+      },
+      renderer() {
+        this.scheduleRecreate();
+      },
+      powerPreference() {
+        this.scheduleRecreate();
+      },
+      respectReducedMotion() {
+        this.scheduleRecreate();
+      }
+    },
+    methods: {
+      randomize() { return this.controller && this.controller.randomize(); },
+      pause() { return this.controller && this.controller.pause(); },
+      resume() { return this.controller && this.controller.resume(); },
+      setPreset(preset) { return this.controller && this.controller.setPreset(preset); },
+      setSize(width, height) { return this.controller && this.controller.setSize(width, height); },
+      setColors(colors) { return this.controller && this.controller.setColors(colors); },
+      setText(content) { return this.controller && this.controller.setText(content); },
+      setColorContent(content) { return this.controller && this.controller.setColorContent(content); },
+      setTextRatio(ratio) { return this.controller && this.controller.setTextRatio(ratio); },
+      setCssVars(vars) { return this.controller && this.controller.setCssVars(vars); },
+      setLabel(label) { return this.controller && this.controller.setLabel(label); },
+      setSeed(seed) { return this.controller && this.controller.setSeed(seed); },
+      setSpeed(speed) { return this.controller && this.controller.setSpeed(speed); },
+      setMouseColor(value) { return this.controller && this.controller.setMouseColor(value); },
+      setQuality(quality) { return this.controller && this.controller.setQuality(quality); },
+      setRenderScale(value) { return this.controller && this.controller.setRenderScale(value); },
+      setPaused(value) { return this.controller && this.controller.setPaused(value); },
+      setStatic(value) { return this.controller && this.controller.setStatic(value); },
+      setFps(value) { return this.controller && this.controller.setFps(value); },
+      getController() { return this.controller; }
+    }
+  });
+}
+
+function makeProgressWrapper(createProgressCapsule, render) {
+  return makeWrapper({
+    name: 'dlc-progress',
+    props: [
+      'preset', 'width', 'height', 'value', 'modelValue', 'min', 'max', 'step',
+      'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
+      'keyboard', 'direction', 'precision', 'formatValue',
+      'quality', 'renderer', 'respectReducedMotion', 'cssVars',
+      'paused', 'static', 'fps', 'renderScale', 'powerPreference'
+    ],
+    events: PROGRESS_EVENTS,
+    create: createProgressCapsule,
+    render,
+    watch: {
+      value(value) {
+        if (value !== undefined && this.modelValue === undefined && this.controller) this.controller.setValue(value);
+      },
+      modelValue(value) {
+        if (value !== undefined && this.controller) this.controller.setValue(value);
+      },
+      min(value) {
+        if (value !== undefined && this.controller) this.controller.setRange(value, this.controller.max);
+      },
+      max(value) {
+        if (value !== undefined && this.controller) this.controller.setRange(this.controller.min, value);
+      },
+      step(value) {
+        if (value !== undefined && this.controller) this.controller.setStep(value);
+      },
+      edgeStyle(value) {
+        if (value && this.controller) this.controller.setEdgeStyle(value);
+      },
+      textRatio(value) {
+        if (value !== undefined && this.controller) this.controller.setTextRatio(Number(value));
+      },
+      cssVars(value) {
+        if (value && this.controller) this.controller.setCssVars(value);
+      },
+      label(value) {
+        if (this.controller) this.controller.setLabel(value);
+      },
+      valueSuffix(value) {
+        if (value !== undefined && this.controller) this.controller.setValueSuffix(value);
+      },
+      showValue(value) {
+        if (this.controller) this.controller.setShowValue(value);
+      },
+      direction(value) {
+        if (value && this.controller) this.controller.setDirection(value);
+      },
+      precision(value) {
+        if (value !== undefined && this.controller) this.controller.setPrecision(value);
+      },
+      formatValue(value) {
+        if (this.controller) this.controller.setFormatValue(value);
+      },
+      paused(value) {
+        if (this.controller) this.controller.setPaused(value);
+      },
+      static(value) {
+        if (this.controller) this.controller.setStatic(value);
+      },
+      fps(value) {
+        if (value !== undefined && this.controller) this.controller.setFps(value);
+      },
+      renderScale(value) {
+        if (value !== undefined && this.controller) this.controller.setRenderScale(value);
+      },
+      disabled() {
+        this.scheduleRecreate();
+      },
+      readonly() {
+        this.scheduleRecreate();
+      },
+      draggable() {
+        this.scheduleRecreate();
+      },
+      renderer() {
+        this.scheduleRecreate();
+      },
+      keyboard() {
+        this.scheduleRecreate();
+      },
+      powerPreference() {
+        this.scheduleRecreate();
+      },
+      respectReducedMotion() {
+        this.scheduleRecreate();
+      }
+    },
+    methods: {
+      setValue(value) { return this.controller && this.controller.setValue(value); },
+      getValue() { return this.controller ? this.controller.getValue() : undefined; },
+      setRange(min, max) { return this.controller && this.controller.setRange(min, max); },
+      setStep(step) { return this.controller && this.controller.setStep(step); },
+      randomize() { return this.controller && this.controller.randomize(); },
+      pause() { return this.controller && this.controller.pause(); },
+      resume() { return this.controller && this.controller.resume(); },
+      setPreset(preset) { return this.controller && this.controller.setPreset(preset); },
+      setSize(width, height) { return this.controller && this.controller.setSize(width, height); },
+      setColors(colors) { return this.controller && this.controller.setColors(colors); },
+      setText(content) { return this.controller && this.controller.setText(content); },
+      setColorContent(content) { return this.controller && this.controller.setColorContent(content); },
+      setTextRatio(ratio) { return this.controller && this.controller.setTextRatio(ratio); },
+      setCssVars(vars) { return this.controller && this.controller.setCssVars(vars); },
+      setLabel(label) { return this.controller && this.controller.setLabel(label); },
+      setValueSuffix(suffix) { return this.controller && this.controller.setValueSuffix(suffix); },
+      setShowValue(show) { return this.controller && this.controller.setShowValue(show); },
+      setDirection(direction) { return this.controller && this.controller.setDirection(direction); },
+      setEdgeStyle(edgeStyle) { return this.controller && this.controller.setEdgeStyle(edgeStyle); },
+      setPrecision(precision) { return this.controller && this.controller.setPrecision(precision); },
+      setFormatValue(formatter) { return this.controller && this.controller.setFormatValue(formatter); },
+      setQuality(quality) { return this.controller && this.controller.setQuality(quality); },
+      setRenderScale(value) { return this.controller && this.controller.setRenderScale(value); },
+      setPaused(value) { return this.controller && this.controller.setPaused(value); },
+      setStatic(value) { return this.controller && this.controller.setStatic(value); },
+      setFps(value) { return this.controller && this.controller.setFps(value); },
+      getController() { return this.controller; }
+    }
+  });
+}
+
+function makeColorWrapper(createColorBackground, render) {
+  return makeWrapper({
+    name: 'dlc-color',
+    props: [
+      'preset', 'colors', 'seed', 'speed', 'quality', 'renderer',
+      'mouseColor', 'respectReducedMotion', 'opacity', 'fallbackColor',
+      'paused', 'static', 'fps', 'renderScale', 'powerPreference'
+    ],
+    events: COLOR_EVENTS,
+    create: createColorBackground,
+    render,
+    watch: {
+      seed(value) {
+        const seed = Number(value);
+        if (this.controller && Number.isFinite(seed)) this.controller.setSeed(seed);
+      },
+      speed(value) {
+        const speed = Number(value);
+        if (this.controller && Number.isFinite(speed)) this.controller.setSpeed(speed);
+      },
+      opacity(value) {
+        if (value !== undefined && this.controller) this.controller.setOpacity(Number(value));
+      },
+      fallbackColor(value) {
+        if (this.controller) this.controller.setFallbackColor(value);
+      },
+      mouseColor(value) {
+        if (this.controller) this.controller.setMouseColor(value);
+      },
+      paused(value) {
+        if (this.controller) this.controller.setPaused(value);
+      },
+      static(value) {
+        if (this.controller) this.controller.setStatic(value);
+      },
+      fps(value) {
+        if (value !== undefined && this.controller) this.controller.setFps(value);
+      },
+      renderScale(value) {
+        if (value !== undefined && this.controller) this.controller.setRenderScale(value);
+      },
+      renderer() {
+        this.scheduleRecreate();
+      },
+      respectReducedMotion() {
+        this.scheduleRecreate();
+      },
+      powerPreference() {
+        this.scheduleRecreate();
+      }
+    },
+    methods: {
+      setPreset(preset) { return this.controller && this.controller.setPreset(preset); },
+      setColors(colors) { return this.controller && this.controller.setColors(colors); },
+      setSeed(seed) { return this.controller && this.controller.setSeed(seed); },
+      setSpeed(speed) { return this.controller && this.controller.setSpeed(speed); },
+      setQuality(quality) { return this.controller && this.controller.setQuality(quality); },
+      setRenderScale(value) { return this.controller && this.controller.setRenderScale(value); },
+      setOpacity(value) { return this.controller && this.controller.setOpacity(value); },
+      setFallbackColor(value) { return this.controller && this.controller.setFallbackColor(value); },
+      setMouseColor(value) { return this.controller && this.controller.setMouseColor(value); },
+      randomize() { return this.controller && this.controller.randomize(); },
+      pause() { return this.controller && this.controller.pause(); },
+      resume() { return this.controller && this.controller.resume(); },
+      setPaused(value) { return this.controller && this.controller.setPaused(value); },
+      setStatic(value) { return this.controller && this.controller.setStatic(value); },
+      setFps(value) { return this.controller && this.controller.setFps(value); },
+      getController() { return this.controller; }
+    }
+  });
+}
+
+function makeEmoWrapper(createEmo, render) {
+  return makeWrapper({
+    name: 'dlc-emo',
+    props: [
+      'type', 'name', 'width', 'height', 'partColors',
+      'speed', 'loop', 'autoplay', 'direction', 'opacity', 'fit',
+      'renderer', 'paused', 'segment', 'background', 'label', 'instanceName', 'respectReducedMotion',
+      'shape', 'interactive'
+    ],
+    events: EMO_EVENTS,
+    create: createEmo,
+    render,
+    watch: {
+      type(value) { if (value && this.controller) this.controller.setType(value); },
+      name(value) { if (value && this.controller) this.controller.setName(value); },
+      partColors(value) { if (this.controller) this.controller.setPartColors(value); },
+      speed(value) { if (value !== undefined && this.controller) this.controller.setSpeed(value); },
+      loop(value) { if (this.controller) this.controller.setLoop(value); },
+      autoplay(value) { if (this.controller) this.controller.setAutoplay(value); },
+      direction(value) { if (value !== undefined && this.controller) this.controller.setDirection(value); },
+      opacity(value) { if (value !== undefined && this.controller) this.controller.setOpacity(value); },
+      fit(value) { if (value && this.controller) this.controller.setFit(value); },
+      renderer(value) { if (value && this.controller) this.controller.setRenderer(value); },
+      paused(value) { if (this.controller) this.controller.setPaused(value); },
+      segment(value) { if (this.controller) this.controller.setSegment(value); },
+      background(value) { if (this.controller) this.controller.setBackground(value); },
+      label(value) { if (this.controller) this.controller.setLabel(value); },
+      shape(value) { if (value && this.controller) this.controller.setShape(value); },
+      interactive(value) { if (this.controller) this.controller.setInteractive(value); },
+      instanceName() { this.scheduleRecreate(); },
+      respectReducedMotion() { this.scheduleRecreate(); }
+    },
+    methods: {
+      play() { return this.controller && this.controller.play(); },
+      pause() { return this.controller && this.controller.pause(); },
+      stop() { return this.controller && this.controller.stop(); },
+      setPaused(value) { return this.controller && this.controller.setPaused(value); },
+      setSpeed(value) { return this.controller && this.controller.setSpeed(value); },
+      setDirection(value) { return this.controller && this.controller.setDirection(value); },
+      setSegment(value) { return this.controller && this.controller.setSegment(value); },
+      setName(value) { return this.controller && this.controller.setName(value); },
+      setType(value) { return this.controller && this.controller.setType(value); },
+      setPartColors(value) { return this.controller && this.controller.setPartColors(value); },
+      setOpacity(value) { return this.controller && this.controller.setOpacity(value); },
+      setBackground(value) { return this.controller && this.controller.setBackground(value); },
+      setSize(width, height) { return this.controller && this.controller.setSize(width, height); },
+      setFit(value) { return this.controller && this.controller.setFit(value); },
+      setRenderer(value) { return this.controller && this.controller.setRenderer(value); },
+      setLoop(value) { return this.controller && this.controller.setLoop(value); },
+      setAutoplay(value) { return this.controller && this.controller.setAutoplay(value); },
+      setShape(value) { return this.controller && this.controller.setShape(value); },
+      setInteractive(value) { return this.controller && this.controller.setInteractive(value); },
+      setLabel(value) { return this.controller && this.controller.setLabel(value); },
+      getController() { return this.controller; }
+    }
+  });
+}
+
+function makeAvatarWrapper(createAvatarCreator, render) {
+  return makeWrapper({
+    name: 'dlc-avatar-creator',
+    props: ['provider', 'avatarStyle', 'seed', 'size', 'background', 'providerOptions', 'strict'],
+    events: AVATAR_EVENTS,
+    create: (el, opts) => createAvatarCreator(el, {
+      ...opts,
+      style: opts.avatarStyle
+    }),
+    render,
+    watch: {
+      provider(value) { if (value && this.controller) this.controller.setProvider(value); },
+      avatarStyle(value) { if (value && this.controller) this.controller.setStyle(value); },
+      seed(value) { if (value !== undefined && this.controller) this.controller.setSeed(value); },
+      size(value) { if (value !== undefined && this.controller) this.controller.setSize(value); },
+      background(value) { if (this.controller) this.controller.setBackground(value); },
+      providerOptions(value) { if (value && this.controller) this.controller.setProviderOptions(value); }
+    },
+    methods: {
+      // avatar 无运行时状态（dirty/preset 等字段不存在），recreate 不适用；
+      // 覆盖共享 runtimeState，避免继承引用不存在字段的实现。
+      runtimeState() { return {}; },
+      setProvider(provider) { return this.controller && this.controller.setProvider(provider); },
+      setStyle(style) { return this.controller && this.controller.setStyle(style); },
+      setSeed(seed) { return this.controller && this.controller.setSeed(seed); },
+      setSize(size) { return this.controller && this.controller.setSize(size); },
+      setBackground(background) { return this.controller && this.controller.setBackground(background); },
+      setProviderOptions(options) { return this.controller && this.controller.setProviderOptions(options); },
+      getSvg() { return this.controller ? this.controller.getSvg() : ''; },
+      toDataUri() { return this.controller ? this.controller.toDataUri() : ''; },
+      randomize() { return this.controller && this.controller.randomize(); },
+      getController() { return this.controller; }
+    }
+  });
+}
+
+export { makeProgressWrapper as a, makeColorWrapper as b, makeEmoWrapper as c, makeAvatarWrapper as d, makeCapsuleWrapper as m };