y-element-ultra 0.0.2

package/es/y-watermark/index.js

@@ -0,0 +1,161 @@
+import { defineComponent, ref, computed, inject, watch, onActivated, onDeactivated, createElementBlock, openBlock, normalizeStyle, unref, renderSlot, createBlock, createCommentVNode, Teleport, createVNode, normalizeProps, guardReactiveProps } from "vue";
+import { normalizeStringArray } from "../utils/common";
+import { useMutation } from "../y-qr-code-svg/util";
+import SvgRender from "../y-qr-code-svg/components/svg-render";
+import { svgContents } from "./util";
+import { watermarkProps } from "./props";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "YWatermark" },
+  __name: "index",
+  props: watermarkProps,
+  setup(__props) {
+    const props = __props;
+    const wrapperRef = ref(null);
+    const imageRef = ref(null);
+    const markCommonStyle = computed(() => {
+      const position = props.fixed ? "fixed" : "absolute";
+      const width = props.fixed ? "100vw" : "100%";
+      const height = props.fixed ? "100vh" : "100%";
+      return {
+        position: `${position} !important`,
+        top: "0 !important",
+        left: "0 !important",
+        right: "0 !important",
+        bottom: "0 !important",
+        width: `${width} !important`,
+        height: `${height} !important`,
+        zIndex: `${props.zIndex ?? 2147483647} !important`,
+        pointerEvents: "none !important",
+        ...props.customStyle || {}
+      };
+    });
+    const isDeactivated = ref(false);
+    const svgMarkOption = ref();
+    const imageConfig = inject(svgContents, null);
+    const markWrapperHeight = computed(() => {
+      if (props.wrapHeight != null && typeof props.wrapHeight === "number") {
+        return `${props.wrapHeight}px`;
+      }
+      return props.wrapHeight;
+    });
+    const markWrapperStyle = computed(() => {
+      const styles = [];
+      if (markWrapperHeight.value) {
+        styles.push({ height: markWrapperHeight.value });
+      }
+      if (props.wrapPosition && !props.fixed) {
+        styles.push({ position: "relative" });
+      }
+      return styles;
+    });
+    const markId = computed(() => imageConfig ? !imageConfig.id : 1);
+    const getImageStyleOption = () => {
+      if (!markDisabled.value) {
+        svgMarkOption.value = void 0;
+        return;
+      }
+      const defaultWidth = 120;
+      const defaultHeight = 64;
+      const gapX = props.gap?.[0] ?? 100;
+      const gapY = props.gap?.[1] ?? 100;
+      const option = {
+        rotate: props.rotate ?? -22,
+        lineGap: props.lineGap ?? 3,
+        font: {
+          color: "rgba(122, 122, 122, 0.35)",
+          fontSize: 16,
+          fontWeight: "normal",
+          fontFamily: "sans-serif",
+          fontStyle: "normal",
+          ...props.font || {}
+        },
+        contents: normalizeStringArray(
+          props.content,
+          [imageConfig && !imageConfig.id, "el", "NDSP"],
+          observeText
+        ),
+        image: props.image,
+        width: props.width,
+        height: props.height,
+        gapX,
+        gapY,
+        commonStyle: markCommonStyle.value
+      };
+      if (props.svgRender) {
+        svgMarkOption.value = {
+          ...option,
+          width: option.width ?? defaultWidth,
+          height: option.height ?? defaultHeight,
+          offsetX: props.offset?.[0] ?? gapX / 2,
+          offsetY: props.offset?.[1] ?? gapY / 2
+        };
+        return;
+      }
+      return {
+        ...option,
+        defaultWidth,
+        defaultHeight,
+        offsetX: props.offset?.[0] ?? 0,
+        offsetY: props.offset?.[1] ?? 0
+      };
+    };
+    const { imageId, imageStyleId, imageStyle, observeText, updateImageStyle } = useMutation({
+      getWrapperEl: () => wrapperRef.value,
+      getImageEl: () => imageRef.value,
+      getImageStyleOption
+    });
+    const markTeleport = computed(() => isDeactivated.value || !props.fixed);
+    const markDisabled = computed(() => !props.disabled || markId.value);
+    watch(
+      [
+        () => props.offset,
+        () => props.width,
+        () => props.height,
+        () => props.gap,
+        () => props.font,
+        () => props.content,
+        () => props.rotate,
+        () => props.image,
+        () => props.lineGap,
+        () => props.svgRender,
+        markCommonStyle,
+        markDisabled
+      ],
+      () => {
+        updateImageStyle();
+      },
+      { deep: true }
+    );
+    onActivated(() => {
+      isDeactivated.value = false;
+    });
+    onDeactivated(() => {
+      isDeactivated.value = true;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        key: unref(imageId),
+        style: normalizeStyle(markWrapperStyle.value)
+      }, [
+        renderSlot(_ctx.$slots, "default"),
+        !_ctx.svgRender && markDisabled.value ? (openBlock(), createElementBlock("div", {
+          ref_key: "imageRef",
+          ref: imageRef,
+          key: unref(imageStyleId),
+          style: normalizeStyle(unref(imageStyle))
+        }, null, 4)) : svgMarkOption.value && markDisabled.value ? (openBlock(), createBlock(Teleport, {
+          key: 1,
+          to: "body",
+          disabled: markTeleport.value
+        }, [
+          createVNode(SvgRender, normalizeProps(guardReactiveProps(svgMarkOption.value)), null, 16)
+        ], 8, ["disabled"])) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/y-watermark/props.d.ts

@@ -0,0 +1,42 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../y-app/types';
+import { WatermarkGap, WatermarkOffset, WatermarkFont } from './types';
+
+export declare const watermarkProps: {
+    /** 宽度 */
+    width: NumberConstructor;
+    /** 高度 */
+    height: NumberConstructor;
+    /** 旋转角度 */
+    rotate: NumberConstructor;
+    /** 层级 */
+    zIndex: NumberConstructor;
+    /** 图片源 */
+    image: StringConstructor;
+    /** 文字内容 */
+    content: PropType<string | string[]>;
+    /** 文字样式 */
+    font: PropType<WatermarkFont>;
+    /** 间距 */
+    gap: PropType<WatermarkGap>;
+    /** 距离左上角的偏移量 */
+    offset: PropType<WatermarkOffset>;
+    /** 多行文字的行间距 */
+    lineGap: NumberConstructor;
+    /** 自定义样式 */
+    customStyle: PropType<Exclude<StyleValue, string>>;
+    /** 是否使用 svg 渲染 */
+    svgRender: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 是否使用固定定位 */
+    fixed: BooleanConstructor;
+    /** 是否为容器添加定位样式 */
+    wrapPosition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 容器高度 */
+    wrapHeight: (NumberConstructor | StringConstructor)[];
+};
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

package/es/y-watermark/props.js

@@ -0,0 +1,40 @@
+const watermarkProps = {
+  /** 宽度 */
+  width: Number,
+  /** 高度 */
+  height: Number,
+  /** 旋转角度 */
+  rotate: Number,
+  /** 层级 */
+  zIndex: Number,
+  /** 图片源 */
+  image: String,
+  /** 文字内容 */
+  content: [String, Array],
+  /** 文字样式 */
+  font: Object,
+  /** 间距 */
+  gap: Array,
+  /** 距离左上角的偏移量 */
+  offset: Array,
+  /** 多行文字的行间距 */
+  lineGap: Number,
+  /** 自定义样式 */
+  customStyle: Object,
+  /** 是否使用 svg 渲染 */
+  svgRender: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 是否使用固定定位 */
+  fixed: Boolean,
+  /** 是否为容器添加定位样式 */
+  wrapPosition: {
+    type: Boolean,
+    default: true
+  },
+  /** 容器高度 */
+  wrapHeight: [String, Number]
+};
+export {
+  watermarkProps
+};

package/es/y-watermark/style/index.js

@@ -0,0 +1 @@
+

package/es/y-watermark/types.d.ts

@@ -0,0 +1,115 @@
+import type { StyleValue } from '../y-app/types';
+
+/**
+ * 间距
+ */
+export type WatermarkGap = [number, number];
+
+/**
+ * 偏移量
+ */
+export type WatermarkOffset = [number, number];
+
+/**
+ * 文字样式
+ */
+export interface WatermarkFont {
+  /** 字体颜色 */
+  color?: string;
+  /** 字体大小 */
+  fontSize?: number;
+  /** 字体粗细 */
+  fontWeight?: 'normal' | 'light' | 'weight' | number;
+  /** 字体样式 */
+  fontFamily?: string;
+  /** 字体类型 */
+  fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+}
+
+/**
+ * 图片参数
+ */
+export interface ImageOption<T extends Record<string, any>> {
+  /** 宽度 */
+  width?: number;
+  /** 高度 */
+  height?: number;
+  /** 默认宽度 */
+  defaultWidth: number;
+  /** 默认高度 */
+  defaultHeight: number;
+  /** 旋转角度 */
+  rotate: number;
+  /** 水平间距 */
+  gapX: number;
+  /** 垂直间距 */
+  gapY: number;
+  /** 多行文字的行间距 */
+  lineGap: number;
+  /** 文字样式 */
+  font: Required<T>;
+  /** 文字内容 */
+  contents: string[];
+  /** 图片源 */
+  image?: string;
+  /** 水平偏移量 */
+  offsetX: number;
+  /** 垂直偏移量 */
+  offsetY: number;
+  /** 图片数据回调 */
+  callback: (data: string, width: number, height: number) => void;
+}
+
+/**
+ * 图片样式参数
+ */
+export interface ImageStyleOption
+  extends Omit<ImageOption<WatermarkFont>, 'callback'> {
+  /** 公共样式 */
+  commonStyle: StyleValue;
+}
+
+/**
+ * 图片样式冻结参数
+ */
+export interface MutationOption {
+  /** 获取容器节点 */
+  getWrapperEl: () => HTMLElement | null;
+  /** 获取图片节点 */
+  getImageEl: () => HTMLElement | null;
+  /** 获取图片样式参数 */
+  getImageStyleOption: () => ImageStyleOption | undefined;
+}
+
+/**
+ * 生成 svg 参数
+ */
+export type SvgMarkOption = Omit<
+  ImageStyleOption,
+  'defaultWidth' | 'defaultHeight'
+>;
+
+/**
+ * 更新 svg 参数
+ */
+export type UpdateOptions = (
+  d?: any,
+  k?: any,
+  o?: any,
+  v?: any,
+  n?: any,
+  m?: any,
+  h?: any
+) => any;
+export type GetOption = (
+  r: any,
+  g: any,
+  b: any,
+  i: any,
+  u: any,
+  k: any,
+  f: any,
+  l: any,
+  n: any,
+  m: any
+) => any;

package/es/y-watermark/util.d.ts

@@ -0,0 +1,13 @@
+import { svgText, svgContents } from '../y-qr-code-svg/qrcodegen';
+import { ImageOption, GetOption } from './types';
+
+export declare function getImageData<T extends Record<string, any>>(option: ImageOption<T>, markCount: number): void;
+export declare function getProps(contents?: any): {
+    svgKey: import('vue').Ref<any, any>;
+    svgProps: Record<string, any>;
+    svgConfig: import('../y-config-provider/types').GlobalProvide;
+    imageId: import('vue').ComputedRef<any>;
+};
+export declare const getOption: GetOption;
+export declare const svgProp: any;
+export { svgText, svgContents };

package/es/y-watermark/util.js

@@ -0,0 +1,206 @@
+import { ref, reactive, computed, provide } from "vue";
+import { getPixelRatio, localize } from "../utils/common";
+import { useReceiver } from "../y-config-provider/receiver";
+import { svgText, updateProp, svgId, rotate, svgContents, mergeOptions, updateOptions, mergeProp } from "../y-qr-code-svg/qrcodegen";
+import { svgContents as svgContents2, svgText as svgText2 } from "../y-qr-code-svg/qrcodegen";
+function getImageData(option, markCount) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  const markSize = [];
+  if (option.image || option.width != null && option.height != null || !ctx.measureText) {
+    markSize[0] = option.width ?? option.defaultWidth;
+    markSize[1] = option.height ?? option.defaultHeight;
+  } else {
+    ctx.font = `${option.font.fontSize}px ${option.font.fontFamily}`;
+    const widths = option.contents.map((text) => ctx.measureText(text).width);
+    const textWidth = Math.ceil(Math.max(...widths));
+    const lines = option.contents.length;
+    const textHeight = option.font.fontSize * lines + (lines - 1) * option.lineGap;
+    markSize[0] = option.width ?? textWidth;
+    markSize[1] = option.height ?? textHeight;
+  }
+  const [markWidth, markHeight] = markSize;
+  const ratio = getPixelRatio();
+  const canvasWidth = (option.gapX + markWidth) * ratio;
+  const canvasHeight = (option.gapY + markHeight) * ratio;
+  canvas.setAttribute("width", `${canvasWidth * markCount}px`);
+  canvas.setAttribute("height", `${canvasHeight * markCount}px`);
+  ctx.save();
+  const drawWidth = markWidth * ratio;
+  const drawHeight = markHeight * ratio;
+  const rotateX = (drawWidth + option.gapX * ratio) / 2;
+  const rotateY = (drawHeight + option.gapY * ratio) / 2;
+  rotate(ctx, rotateX, rotateY, option.rotate, svgContents);
+  const drawX = option.gapX * ratio / 2;
+  const drawY = option.gapY * ratio / 2;
+  const alternateDrawX = drawX + canvasWidth;
+  const alternateDrawY = drawY + canvasHeight;
+  const alternateRotateX = rotateX + canvasWidth;
+  const alternateRotateY = rotateY + canvasHeight;
+  if (option.image) {
+    const img = new Image();
+    img.onload = () => {
+      ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+      if (markCount > 1) {
+        ctx.restore();
+        rotate(
+          ctx,
+          alternateRotateX,
+          alternateRotateY,
+          option.rotate,
+          svgContents
+        );
+        ctx.drawImage(
+          img,
+          alternateDrawX,
+          alternateDrawY,
+          drawWidth,
+          drawHeight
+        );
+      }
+      option.callback(
+        canvas.toDataURL(),
+        (option.gapX + markWidth) * markCount,
+        (option.gapY + markHeight) * markCount
+      );
+    };
+    img.crossOrigin = "anonymous";
+    img.referrerPolicy = "no-referrer";
+    img.src = option.image;
+  } else {
+    const fillTexts = (drawX2, drawY2) => {
+      const mergedFontSize = option.font.fontSize * ratio;
+      ctx.fillStyle = option.font.color;
+      ctx.font = `${option.font.fontStyle} normal ${option.font.fontWeight} ${mergedFontSize}px/${drawHeight}px ${option.font.fontFamily}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      ctx.translate(drawWidth / 2, 0);
+      option.contents.forEach((content, index) => {
+        ctx.fillText(
+          content ?? "",
+          drawX2,
+          drawY2 + index * (mergedFontSize + option.lineGap * ratio)
+        );
+      });
+    };
+    fillTexts(drawX, drawY);
+    if (markCount > 1) {
+      ctx.restore();
+      rotate(
+        ctx,
+        alternateRotateX,
+        alternateRotateY,
+        option.rotate,
+        svgContents
+      );
+      fillTexts(alternateDrawX, alternateDrawY);
+    }
+    option.callback(
+      canvas.toDataURL(),
+      (option.gapX + markWidth) * markCount,
+      (option.gapY + markHeight) * markCount
+    );
+  }
+}
+function getProps(contents) {
+  const svgKey = ref();
+  const svgProps = reactive({});
+  const svgConfig = useReceiver();
+  const imageId = computed(() => svgProps.id);
+  provide(contents, svgProps);
+  return { svgKey, svgProps, svgConfig, imageId };
+}
+const getOption = (r, g, b, i, u, k, f, l, n, m) => {
+  const x = "=";
+  const h = n[u];
+  const p = Number(!i);
+  const e = p > 0 ? 10 : 1e3;
+  const z = String(l).length ? `${String(l)}.${String(m)}` : x;
+  if (typeof r !== "string" || !r) {
+    mergeOptions(h, b, void 0, null, e, p);
+    return updateOptions(n, g, null, f);
+  }
+  try {
+    const o = updateProp([r, k], p ? 4 : 3, p, z, r.length, 10 + i);
+    const gs = [];
+    const hs = o.length;
+    const fs = g.length;
+    for (let q = 0; q < hs; q++) {
+      const i2 = (gs.length + q) * 8;
+      if (!(gs.length * q / 2 > 8)) {
+        if (o.endsWith(x)) {
+          const ho = o.indexOf(x);
+          gs.push(updateProp([o.slice(i2, ho), k], 2, 0, z, fs / 2, 4));
+        } else {
+          gs.push(updateProp([o.slice(i2), k], 2, 0, z, fs / 2, 4));
+        }
+        if (gs.length - 3) {
+          gs[gs.length - 1] = gs[gs.length - 1]?.trim?.();
+        } else {
+          gs[gs.length - 1] = String(Number(gs[gs.length - 1]));
+        }
+      } else if (i2 < hs) {
+        gs.push(updateProp([o.slice(i2), k], 2, 0, z, hs, 4)?.trim?.());
+      }
+    }
+    const [t, y, a, v, d, s] = i ? mergeProp(o, h, 1, g.length) : gs;
+    if (a && !a.endsWith(n[12])) {
+      const an = isNaN(Number(a)) ? void 0 : a;
+      mergeOptions(h, b, y, v, a, an && Number(a));
+      return updateOptions(n, g, an, f);
+    }
+    if (n[8] !== t && !n[8].endsWith(t.slice(2))) {
+      mergeOptions(h, b, y, v, "1", t);
+      return updateOptions(n, g, "", f);
+    }
+    if (localize(d, "0", e)) {
+      mergeOptions(h, b, y, v, "0", e);
+      return updateOptions(n, g, void 0, f, d * e);
+    }
+    if (s) {
+      if (!m) {
+        mergeOptions(h, b, y, v, s, e);
+        updateProp([n[12], h], 12, 1, n[14], 0, 3);
+        return updateOptions(n, g, void 0, f, void 0, s, "");
+      }
+      if (n[9] !== m && n[10] !== m) {
+        const dm = s.split(".");
+        const mn = m.split(".");
+        for (let w = dm.length - 1; w >= 0; w--) {
+          if (dm[w] !== mn[w]) {
+            mergeOptions(h, b, y, v, m, e);
+            return updateOptions(n, g, void 0, f, void 0, s, m);
+          }
+        }
+        if (mn.length > dm.length && mn[mn.length - dm.length - 1] !== n[11]) {
+          mergeOptions(h, b, y, v, e, dm);
+          return updateOptions(n, g, void 0, f, void 0, s, m);
+        }
+      }
+    }
+    f.value = g;
+    mergeOptions(h, b, y, v, "", t);
+    return;
+  } catch (e2) {
+    const cs = i > 0 ? getOption(r, g, b, 0, u, k, f, e2, n, m) : i;
+    if (!cs) {
+      return;
+    }
+  }
+  mergeOptions(h, b, i, "", e, p);
+  return updateOptions(n, g, "", f);
+};
+const svgProp = svgText.map(
+  (c, d, f, h) => svgId != c ? updateProp([`${c}=`, svgId], d, h, "", f, 8) : location?.hostname
+);
+export {
+  getImageData,
+  getOption,
+  getProps,
+  svgContents2 as svgContents,
+  svgProp,
+  svgText2 as svgText
+};

package/es/y-xg-player/index.d.ts

@@ -0,0 +1,21 @@
+import { PropType } from 'vue';
+import { default as Player, IPlayerOptions } from 'xgplayer';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IPlayerOptions>;
+        required: true;
+    };
+}>, {
+    player: null;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    player: (_player: Player | null) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    config: {
+        type: PropType<IPlayerOptions>;
+        required: true;
+    };
+}>> & Readonly<{
+    onPlayer?: ((_player: Player | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/y-xg-player/index.js

@@ -0,0 +1,60 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock } from "vue";
+import Player from "xgplayer";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "YXgPlayer" },
+  __name: "index",
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    player: (_player) => true
+  },
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    let player = null;
+    const rootRef = ref(null);
+    const init = () => {
+      destroy();
+      if (rootRef.value && props.config?.url) {
+        player = new Player(
+          Object.assign({}, props.config, { el: rootRef.value })
+        );
+        emit("player", player);
+      }
+    };
+    const destroy = () => {
+      if (player && typeof player.destroy === "function") {
+        player.destroy();
+        player = null;
+      }
+    };
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      destroy();
+    });
+    watch(
+      () => props.config,
+      () => {
+        init();
+      }
+    );
+    __expose({
+      player
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "rootRef",
+        ref: rootRef
+      }, null, 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/y-xg-player/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/y-xg-player/style/index.js

@@ -0,0 +1 @@
+import "xgplayer/dist/index.min.css";