yuang-framework-ui-pc 1.0.20 → 1.1.1

package/es/ele-watermark/index.js

@@ -0,0 +1,215 @@
+import { defineComponent, nextTick, ref, onMounted, watch, openBlock, createElementBlock, normalizeStyle, renderSlot, createCommentVNode } from "vue";
+import { useMutation, getFont, getPixelRatio, getGap, rotateWatermark, joinStyle } from "./util";
+import { watermarkProps } from "./props";
+const SIZE = 2;
+const _sfc_main = defineComponent({
+  name: "EleWatermark",
+  props: watermarkProps,
+  setup(props) {
+    const { observe, disconnect } = useMutation({
+      getRoot: () => rootRef.value,
+      getEl: () => imgRef.value,
+      onDeleted: () => {
+        disconnect();
+        rootKey.value = rootKey.value + 1;
+        nextTick(() => {
+          render();
+        });
+      },
+      onDalsified: () => {
+        render();
+      }
+    });
+    const rootKey = ref(1);
+    const rootRef = ref(null);
+    const imgRef = ref(null);
+    const imgStyle = ref({ display: "none" });
+    const updateStyle = (base64, size) => {
+      const position = props.fixed ? "fixed" : "absolute";
+      const width = props.fixed ? "100vw" : "100%";
+      const height = props.fixed ? "100vh" : "100%";
+      const style = {
+        position: `${position} !important`,
+        top: "0 !important",
+        left: "0 !important",
+        right: "auto !important",
+        bottom: "auto !important",
+        width: `${width} !important`,
+        height: `${height} !important`,
+        pointerEvents: "none !important",
+        backgroundRepeat: "repeat !important",
+        opacity: "1 !important",
+        transform: "none !important",
+        filter: "none !important",
+        visibility: "visible !important",
+        transition: "none !important",
+        maxWidth: "none !important",
+        maxHeight: "none !important",
+        zoom: "1 !important",
+        mask: "none !important",
+        clipPath: "none !important",
+        display: "block !important",
+        ...props.customStyle || {}
+      };
+      if (!base64) {
+        style.display = "none !important";
+      } else {
+        style.backgroundImage = `url('${base64}') !important`;
+        if (size) {
+          style.backgroundSize = `${size} !important`;
+        }
+        style.zIndex = `${props.zIndex ?? 2147483647} !important`;
+      }
+      disconnect();
+      if (imgRef.value && imgRef.value.style && imgRef.value.style.cssText) {
+        imgRef.value.style.cssText = joinStyle(style);
+        observe();
+      } else {
+        imgStyle.value = style;
+        nextTick(() => {
+          observe();
+        });
+      }
+    };
+    const getDefaultWidth = (ctx) => {
+      if (props.image || !ctx.measureText) {
+        return 120;
+      }
+      const content = props.content;
+      const contents = Array.isArray(content) ? content : [content];
+      const widths = contents.map((item) => ctx.measureText(item).width);
+      return Math.ceil(Math.max(...widths));
+    };
+    const getDefaultHeight = (ctx) => {
+      if (props.image || !ctx.measureText) {
+        return 64;
+      }
+      const lines = Array.isArray(props.content) ? props.content.length : 1;
+      const { fontSize } = getFont(props.font);
+      return fontSize * lines + (lines - 1) * props.lineGap;
+    };
+    const getMarkSize = (ctx) => {
+      const width = props.width;
+      const height = props.height;
+      return [width ?? getDefaultWidth(ctx), height ?? getDefaultHeight(ctx)];
+    };
+    const fillTexts = (ctx, drawX, drawY, drawWidth, drawHeight) => {
+      const ratio = getPixelRatio();
+      const { color, fontSize, fontStyle, fontWeight, fontFamily } = getFont(
+        props.font
+      );
+      const mergedFontSize = fontSize * ratio;
+      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
+      ctx.fillStyle = color;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      ctx.translate(drawWidth / 2, 0);
+      const content = props.content;
+      const contents = Array.isArray(content) ? content : [content];
+      contents.forEach((item, index2) => {
+        ctx.fillText(
+          item ?? "",
+          drawX,
+          drawY + index2 * (mergedFontSize + props.lineGap * ratio)
+        );
+      });
+    };
+    const render = () => {
+      if (props.disabled) {
+        disconnect();
+        imgStyle.value = { display: "none" };
+        return;
+      }
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        return;
+      }
+      const rotate = props.rotate ?? -22;
+      if (!props.image && ctx.measureText != null) {
+        const { fontSize, fontFamily } = getFont(props.font);
+        ctx.font = `${fontSize}px ${fontFamily}`;
+      }
+      const [markWidth, markHeight] = getMarkSize(ctx);
+      const ratio = getPixelRatio();
+      const [gapX, gapY] = getGap(props.gap);
+      const canvasWidth = (gapX + markWidth) * ratio;
+      const canvasHeight = (gapY + markHeight) * ratio;
+      canvas.setAttribute("width", `${canvasWidth * SIZE}px`);
+      canvas.setAttribute("height", `${canvasHeight * SIZE}px`);
+      const drawWidth = markWidth * ratio;
+      const drawHeight = markHeight * ratio;
+      const rotateX = (drawWidth + gapX * ratio) / 2;
+      const rotateY = (drawHeight + gapY * ratio) / 2;
+      ctx.save();
+      rotateWatermark(ctx, rotateX, rotateY, rotate);
+      const drawX = gapX * ratio / 2;
+      const drawY = gapY * ratio / 2;
+      const alternateDrawX = drawX + canvasWidth;
+      const alternateDrawY = drawY + canvasHeight;
+      const alternateRotateX = rotateX + canvasWidth;
+      const alternateRotateY = rotateY + canvasHeight;
+      if (props.image) {
+        const img = new Image();
+        img.onload = () => {
+          ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
+          ctx.restore();
+          rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+          ctx.drawImage(
+            img,
+            alternateDrawX,
+            alternateDrawY,
+            drawWidth,
+            drawHeight
+          );
+          updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
+        };
+        img.crossOrigin = "anonymous";
+        img.referrerPolicy = "no-referrer";
+        img.src = props.image;
+      } else {
+        fillTexts(ctx, drawX, drawY, drawWidth, drawHeight);
+        ctx.restore();
+        rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
+        fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
+        updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
+      }
+    };
+    onMounted(() => {
+      render();
+    });
+    watch(
+      () => props,
+      () => {
+        render();
+      },
+      { deep: true }
+    );
+    return { rootKey, rootRef, imgRef, imgStyle };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "rootRef",
+    key: _ctx.rootKey,
+    style: normalizeStyle(!_ctx.wrapPosition || _ctx.fixed ? void 0 : { position: "relative" })
+  }, [
+    renderSlot(_ctx.$slots, "default"),
+    !_ctx.disabled ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      ref: "imgRef",
+      style: normalizeStyle(_ctx.imgStyle)
+    }, null, 4)) : createCommentVNode("", true)
+  ], 4);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,41 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-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: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 自定义样式 */
+    customStyle: PropType<Exclude<StyleValue, string>>;
+    /** 是否使用固定定位 */
+    fixed: BooleanConstructor;
+    /** 是否为外层添加定位样式 */
+    wrapPosition: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+};
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

package/es/ele-watermark/props.js

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,39 @@
+/**
+ * 间距
+ */
+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 MutationOption {
+  /** 获取根节点 */
+  getRoot: () => HTMLElement | null;
+  /** 获取水印节点 */
+  getEl: () => HTMLElement | null;
+  /** 水印被删除回调 */
+  onDeleted: () => void;
+  /** 水印样式被篡改回调 */
+  onDalsified: () => void;
+}

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

@@ -0,0 +1,31 @@
+import { StyleValue } from '../ele-app/types';
+import { WatermarkGap, WatermarkFont, MutationOption } from './types';
+
+/**
+ * 获取文字样式
+ */
+export declare function getFont(font?: WatermarkFont): Required<WatermarkFont>;
+/**
+ * 获取间距
+ */
+export declare function getGap(gap?: WatermarkGap): number[];
+/**
+ * 返回设备像素密度
+ */
+export declare function getPixelRatio(): number;
+/**
+ * 旋转水印
+ */
+export declare function rotateWatermark(ctx: CanvasRenderingContext2D, rotateX: number, rotateY: number, rotate: number): void;
+/**
+ * 样式对象转字符串
+ * @param style 样式
+ */
+export declare function joinStyle(style: StyleValue): string;
+/**
+ * 水印篡改观测
+ */
+export declare function useMutation(option: MutationOption): {
+    observe: () => void;
+    disconnect: () => void;
+};

package/es/ele-watermark/util.js

@@ -0,0 +1,70 @@
+import { onBeforeMount } from "vue";
+function getFont(font) {
+  const style = {
+    color: "rgba(122, 122, 122, .35)",
+    fontSize: 16,
+    fontWeight: "normal",
+    fontFamily: "sans-serif",
+    fontStyle: "normal"
+  };
+  return Object.assign(style, font);
+}
+function getGap(gap) {
+  const [gapX, gapY] = gap ?? [];
+  return [gapX ?? 100, gapY ?? 100];
+}
+function getPixelRatio() {
+  return window.devicePixelRatio || 1;
+}
+function rotateWatermark(ctx, rotateX, rotateY, rotate) {
+  ctx.translate(rotateX, rotateY);
+  ctx.rotate(Math.PI / 180 * Number(rotate));
+  ctx.translate(-rotateX, -rotateY);
+}
+function joinStyle(style) {
+  const result = Object.keys(style).map((key) => {
+    const name = key.replace(/([A-Z])/g, " $1").trim().split(" ").join("-").toLowerCase();
+    return `${name}:${style[key]}`;
+  });
+  return result.join(";");
+}
+function useMutation(option) {
+  const { getRoot, getEl, onDeleted, onDalsified } = option;
+  const deletedObserver = new MutationObserver((mutations) => {
+    const el = getEl();
+    mutations.forEach((mutation) => {
+      if (mutation.type === "childList" && Array.from(mutation.removedNodes).some((n) => n === el)) {
+        onDeleted();
+      }
+    });
+  });
+  const falsifiedObserver = new MutationObserver(() => {
+    onDalsified();
+  });
+  const observe = () => {
+    const el = getEl();
+    if (el) {
+      falsifiedObserver.observe(el, { attributes: true });
+    }
+    const root = getRoot();
+    if (root) {
+      deletedObserver.observe(root, { childList: true });
+    }
+  };
+  const disconnect = () => {
+    falsifiedObserver.disconnect();
+    deletedObserver.disconnect();
+  };
+  onBeforeMount(() => {
+    disconnect();
+  });
+  return { observe, disconnect };
+}
+export {
+  getFont,
+  getGap,
+  getPixelRatio,
+  joinStyle,
+  rotateWatermark,
+  useMutation
+};

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

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

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

@@ -0,0 +1,62 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch, openBlock, createElementBlock } from "vue";
+import Player from "xgplayer";
+const _sfc_main = defineComponent({
+  name: "EleXgPlayer",
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    player: (_player) => true
+  },
+  setup(props, { emit }) {
+    let player = null;
+    const rootRef = ref(null);
+    const init = () => {
+      var _a;
+      destroy();
+      if (rootRef.value && ((_a = props.config) == null ? void 0 : _a.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();
+      }
+    );
+    return { rootRef, player };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { ref: "rootRef" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, null, 512);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1 @@
+

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

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

package/es/icons/AnalysisOutlined.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/icons/AnalysisOutlined.js

@@ -0,0 +1,35 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode } from "vue";
+const _sfc_main = defineComponent({
+  name: "AnalysisOutlined"
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linejoin": "round"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", { d: "M0.3 7H47.7M6 7V34H42V7M19 34 12 45M29 34 36 45" }, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("path", { d: "M16 22V27" }, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", { d: "M24 18V27" }, null, -1);
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("path", { d: "M32 14V27" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_2,
+  _hoisted_3,
+  _hoisted_4,
+  _hoisted_5
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_6);
+}
+const AnalysisOutlined = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  AnalysisOutlined as default
+};

package/es/icons/ApplicationOutlined.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/icons/ApplicationOutlined.js

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createElementBlock, createStaticVNode } from "vue";
+const _sfc_main = defineComponent({
+  name: "ApplicationOutlined"
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  viewBox: "0 0 48 48",
+  fill: "currentColor"
+};
+const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<circle cx="9" cy="9" r="4"></circle><circle cx="9" cy="24" r="4"></circle><circle cx="9" cy="39" r="4"></circle><circle cx="24" cy="9" r="4"></circle><circle cx="24" cy="24" r="4"></circle><circle cx="24" cy="39" r="4"></circle><circle cx="39" cy="9" r="4"></circle><circle cx="39" cy="24" r="4"></circle><circle cx="39" cy="39" r="4"></circle>', 9);
+const _hoisted_11 = [
+  _hoisted_2
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_11);
+}
+const ApplicationOutlined = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  ApplicationOutlined as default
+};

package/es/icons/AppstoreAddOutlined.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/icons/AppstoreAddOutlined.js

@@ -0,0 +1,35 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode } from "vue";
+const _sfc_main = defineComponent({
+  name: "AppstoreAddOutlined"
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "round"
+};
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", { d: "M18 6H8C7 6 6 7 6 8V18C6 19 7 20 8 20H18C19 20 20 19 20 18V8C20 7 19 6 18 6Z" }, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("path", { d: "M40 6H30C29 6 28 7 28 8V18C28 19 29 20 30 20H40C41 20 42 19 42 18V8C42 7 41 6 40 6Z" }, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", { d: "M40 28H30C29 28 28 29 28 30V40C28 41 29 42 30 42H40C41 42 42 41 42 40V30C42 29 41 28 40 28Z" }, null, -1);
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("path", { d: "M12 27V45M3 36H21" }, null, -1);
+const _hoisted_6 = [
+  _hoisted_2,
+  _hoisted_3,
+  _hoisted_4,
+  _hoisted_5
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_6);
+}
+const AppstoreAddOutlined = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  AppstoreAddOutlined as default
+};

package/es/icons/AppstoreOutlined.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>;
+export default _default;