yuang-framework-ui-pc 1.1.44 → 1.1.46

package/lib/ele-qr-code/index.d.ts

@@ -0,0 +1,201 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: StringConstructor;
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    level: {
+        type: import('vue').PropType<import('./types').Level>;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imageSettings: import('vue').PropType<import('./types').ImageSettings>;
+    customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    tag: import('vue').PropType<import('./types').QrCodeTag>;
+}>, {
+    handleDone: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    done: () => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: StringConstructor;
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    level: {
+        type: import('vue').PropType<import('./types').Level>;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imageSettings: import('vue').PropType<import('./types').ImageSettings>;
+    customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    tag: import('vue').PropType<import('./types').QrCodeTag>;
+}>> & Readonly<{
+    onDone?: (() => any) | undefined;
+}>, {
+    margin: number;
+    size: number;
+    level: import('./types').Level;
+    bgColor: string;
+    fgColor: string;
+}, {}, {
+    EleQrCodeSvg: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        value: StringConstructor;
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+        level: {
+            type: import('vue').PropType<import('./types').Level>;
+            default: string;
+        };
+        bgColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        fgColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        margin: {
+            type: NumberConstructor;
+            default: number;
+        };
+        imageSettings: import('vue').PropType<import('./types').ImageSettings>;
+        customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+        tag: import('vue').PropType<import('./types').QrCodeTag>;
+    }>, {
+        viewBox: import('vue').Ref<string, string>;
+        path: import('vue').Ref<string, string>;
+        fgPath: import('vue').Ref<string, string>;
+        imageHeight: import('vue').Ref<number, number>;
+        imageWidth: import('vue').Ref<number, number>;
+        imageX: import('vue').Ref<number, number>;
+        imageY: import('vue').Ref<number, number>;
+        render: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        done: () => boolean;
+    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        value: StringConstructor;
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+        level: {
+            type: import('vue').PropType<import('./types').Level>;
+            default: string;
+        };
+        bgColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        fgColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        margin: {
+            type: NumberConstructor;
+            default: number;
+        };
+        imageSettings: import('vue').PropType<import('./types').ImageSettings>;
+        customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+        tag: import('vue').PropType<import('./types').QrCodeTag>;
+    }>> & Readonly<{
+        onDone?: (() => any) | undefined;
+    }>, {
+        margin: number;
+        size: number;
+        level: import('./types').Level;
+        bgColor: string;
+        fgColor: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    CanvasRender: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        value: StringConstructor;
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+        level: {
+            type: import('vue').PropType<import('./types').Level>;
+            default: string;
+        };
+        bgColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        fgColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        margin: {
+            type: NumberConstructor;
+            default: number;
+        };
+        imageSettings: import('vue').PropType<import('./types').ImageSettings>;
+        customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+        tag: import('vue').PropType<import('./types').QrCodeTag>;
+    }>, {
+        imgData: import('vue').Ref<string, string>;
+        canvasRef: import('vue').Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
+        imageRef: import('vue').Ref<HTMLImageElement | null, HTMLImageElement | null>;
+        render: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        done: () => boolean;
+    }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        value: StringConstructor;
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+        level: {
+            type: import('vue').PropType<import('./types').Level>;
+            default: string;
+        };
+        bgColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        fgColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        margin: {
+            type: NumberConstructor;
+            default: number;
+        };
+        imageSettings: import('vue').PropType<import('./types').ImageSettings>;
+        customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+        tag: import('vue').PropType<import('./types').QrCodeTag>;
+    }>> & Readonly<{
+        onDone?: (() => any) | undefined;
+    }>, {
+        margin: number;
+        size: number;
+        level: import('./types').Level;
+        bgColor: string;
+        fgColor: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-qr-code/props.d.ts

@@ -0,0 +1,50 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { Level, ImageSettings, QrCodeTag } from './types';
+
+/**
+ * 属性
+ */
+export declare const qrCodeProps: {
+    /** 绑定值 */
+    value: StringConstructor;
+    /** 尺寸 */
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 容错等级 */
+    level: {
+        type: PropType<Level>;
+        default: string;
+    };
+    /** 背景色 */
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 颜色 */
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 外间距 */
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 自定义图片 */
+    imageSettings: PropType<ImageSettings>;
+    /** 自定义样式 */
+    customStyle: PropType<StyleValue>;
+    /** 渲染标签 */
+    tag: PropType<QrCodeTag>;
+};
+export type QrCodeProps = ExtractPropTypes<typeof qrCodeProps>;
+/**
+ * 事件
+ */
+export declare const qrCodeEmits: {
+    /** 渲染完成事件 */
+    done: () => boolean;
+};

package/lib/ele-qr-code/types.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 容错等级
+ */
+export type Level = 'L' | 'M' | 'Q' | 'H';
+
+/**
+ * 自定义图片参数
+ */
+export interface ImageSettings {
+  /** 地址 */
+  src?: string;
+  /** 高度 */
+  height?: number;
+  /** 宽度 */
+  width?: number;
+  /** x坐标 */
+  x?: number;
+  /** y坐标 */
+  y?: number;
+  /** 是否擦除图片区域二维码 */
+  excavate?: boolean;
+}
+
+/**
+ * 渲染标签
+ */
+export type QrCodeTag = 'img' | 'canvas' | 'svg';
+
+/**
+ * 二维码数据
+ */
+export type Modules = boolean[][];
+
+/**
+ * 擦除区域
+ */
+export interface Excavation {
+  /** x坐标 */
+  x: number;
+  /** y坐标 */
+  y: number;
+  /** 宽度 */
+  w: number;
+  /** 高度 */
+  h: number;
+}

package/lib/ele-qr-code-svg/index.cjs

@@ -0,0 +1,126 @@
+"use strict";
+const vue = require("vue");
+const qrcodegen = require("../ele-qr-code/qrcodegen");
+const util = require("../ele-qr-code/util");
+const props = require("../ele-qr-code/props");
+const _sfc_main = vue.defineComponent({
+  name: "EleQrCodeSvg",
+  props: props.qrCodeProps,
+  emits: props.qrCodeEmits,
+  setup(props2, { emit }) {
+    const viewBox = vue.ref("");
+    const path = vue.ref("");
+    const fgPath = vue.ref("");
+    const imageHeight = vue.ref(0);
+    const imageWidth = vue.ref(0);
+    const imageX = vue.ref(0);
+    const imageY = vue.ref(0);
+    const render = () => {
+      const { value, size, level, margin, imageSettings } = props2;
+      if (!value) {
+        viewBox.value = "";
+        return;
+      }
+      let cells = qrcodegen.QrCode.encodeText(
+        value,
+        util.ERROR_LEVEL_MAP[level]
+      ).getModules();
+      const numCells = cells.length + margin * 2;
+      const calculatedImageSettings = util.getImageSettings(
+        imageSettings,
+        size,
+        margin,
+        cells
+      );
+      if (imageSettings != null && calculatedImageSettings != null) {
+        if (calculatedImageSettings.excavation != null) {
+          cells = util.excavateModules(cells, calculatedImageSettings.excavation);
+        }
+        imageHeight.value = calculatedImageSettings.h;
+        imageWidth.value = calculatedImageSettings.w;
+        imageX.value = calculatedImageSettings.x + margin;
+        imageY.value = calculatedImageSettings.y + margin;
+      }
+      viewBox.value = `0 0 ${numCells} ${numCells}`;
+      path.value = `M0,0 h${numCells}v${numCells}H0z`;
+      fgPath.value = util.generatePath(cells, margin);
+      emit("done");
+    };
+    vue.watch(
+      [
+        () => props2.value,
+        () => props2.size,
+        () => props2.level,
+        () => props2.margin
+      ],
+      () => {
+        render();
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      () => props2.imageSettings,
+      () => {
+        render();
+      },
+      { deep: true }
+    );
+    return {
+      viewBox,
+      path,
+      fgPath,
+      imageHeight,
+      imageWidth,
+      imageX,
+      imageY,
+      render
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  class: "ele-qr-code",
+  style: { display: "inline-flex" }
+};
+const _hoisted_2 = ["height", "width", "viewBox"];
+const _hoisted_3 = ["fill", "d"];
+const _hoisted_4 = ["fill", "d"];
+const _hoisted_5 = ["xlink:href", "height", "width", "x", "y"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    _ctx.viewBox ? (vue.openBlock(), vue.createElementBlock("svg", {
+      key: 0,
+      shapeRendering: "crispEdges",
+      height: _ctx.size,
+      width: _ctx.size,
+      viewBox: _ctx.viewBox,
+      style: vue.normalizeStyle(_ctx.customStyle)
+    }, [
+      vue.createElementVNode("path", {
+        fill: _ctx.bgColor,
+        d: _ctx.path
+      }, null, 8, _hoisted_3),
+      vue.createElementVNode("path", {
+        fill: _ctx.fgColor,
+        d: _ctx.fgPath
+      }, null, 8, _hoisted_4),
+      _ctx.imageSettings && _ctx.imageSettings.src ? (vue.openBlock(), vue.createElementBlock("image", {
+        key: 0,
+        "xlink:href": _ctx.imageSettings.src,
+        height: _ctx.imageHeight,
+        width: _ctx.imageWidth,
+        x: _ctx.imageX,
+        y: _ctx.imageY,
+        preserveAspectRatio: "none"
+      }, null, 8, _hoisted_5)) : vue.createCommentVNode("", true)
+    ], 12, _hoisted_2)) : vue.createCommentVNode("", true)
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-qr-code-svg/index.d.ts

@@ -0,0 +1,71 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: StringConstructor;
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    level: {
+        type: import('vue').PropType<import('../ele-qr-code/types').Level>;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imageSettings: import('vue').PropType<import('../ele-qr-code/types').ImageSettings>;
+    customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    tag: import('vue').PropType<import('../ele-qr-code/types').QrCodeTag>;
+}>, {
+    viewBox: import('vue').Ref<string, string>;
+    path: import('vue').Ref<string, string>;
+    fgPath: import('vue').Ref<string, string>;
+    imageHeight: import('vue').Ref<number, number>;
+    imageWidth: import('vue').Ref<number, number>;
+    imageX: import('vue').Ref<number, number>;
+    imageY: import('vue').Ref<number, number>;
+    render: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    done: () => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: StringConstructor;
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    level: {
+        type: import('vue').PropType<import('../ele-qr-code/types').Level>;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    fgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    imageSettings: import('vue').PropType<import('../ele-qr-code/types').ImageSettings>;
+    customStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    tag: import('vue').PropType<import('../ele-qr-code/types').QrCodeTag>;
+}>> & Readonly<{
+    onDone?: (() => any) | undefined;
+}>, {
+    margin: number;
+    size: number;
+    level: import('../ele-qr-code/types').Level;
+    bgColor: string;
+    fgColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-segmented/index.cjs

@@ -0,0 +1,107 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const util = require("../ele-basic-select/util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleSegmented",
+  components: { ElIcon: elementPlus.ElIcon, ElTabs: elementPlus.ElTabs, ElTabPane: elementPlus.ElTabPane },
+  props: props.segmentedProps,
+  emits: props.segmentedEmits,
+  setup(props2, { emit }) {
+    const { validateChange } = util.useFormValidate();
+    const tabRef = vue.ref(null);
+    const isEmptyActive = vue.computed(() => {
+      return props2.modelValue == null || !props2.items || !props2.items.some((d) => d.value === props2.modelValue);
+    });
+    const handleUpdateModelValue = (value) => {
+      if (props2.modelValue !== value) {
+        emit("update:modelValue", value);
+        validateChange();
+        emit("change", value);
+      }
+    };
+    const getWrapEl = () => {
+      const tabEl = tabRef.value ? tabRef.value.$el : void 0;
+      const headerEl = tabEl ? tabEl.querySelector(".el-tabs__header") : void 0;
+      return headerEl ? headerEl.querySelector(".el-tabs__nav") : void 0;
+    };
+    const updateActiveBar = () => {
+      const el = getWrapEl();
+      if (el) {
+        const bar = el.querySelector(".el-tabs__active-bar");
+        if (bar) {
+          bar.style.width = "0px";
+        }
+      }
+    };
+    return {
+      tabRef,
+      isEmptyActive,
+      handleUpdateModelValue,
+      updateActiveBar
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 1,
+  class: "ele-segmented-item-label"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ElTabPane = vue.resolveComponent("ElTabPane");
+  const _component_ElTabs = vue.resolveComponent("ElTabs");
+  return vue.openBlock(), vue.createBlock(_component_ElTabs, {
+    ref: "tabRef",
+    modelValue: _ctx.modelValue,
+    stretch: _ctx.block,
+    class: vue.normalizeClass([
+      "ele-segmented",
+      { "is-block": _ctx.block },
+      { "is-large": _ctx.size === "large" },
+      { "is-small": _ctx.size === "small" },
+      { "is-disabled": _ctx.disabled },
+      { "is-single": _ctx.items && _ctx.items.length === 1 },
+      { "is-empty": _ctx.isEmptyActive }
+    ]),
+    "onUpdate:modelValue": _ctx.handleUpdateModelValue
+  }, {
+    default: vue.withCtx(() => [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index2) => {
+        return vue.openBlock(), vue.createBlock(_component_ElTabPane, {
+          key: index2 + "-" + item.value + "-" + item.label,
+          name: item.value,
+          disabled: _ctx.disabled || item.disabled
+        }, {
+          label: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "label", { item }, () => [
+              item.icon ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.mergeProps({
+                key: 0,
+                ref_for: true
+              }, item.iconProps || {}, { class: "ele-segmented-item-icon" }), {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), {
+                    style: vue.normalizeStyle(item.iconStyle)
+                  }, null, 8, ["style"]))
+                ]),
+                _: 2
+              }, 1040)) : vue.createCommentVNode("", true),
+              item.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(item.label), 1)) : vue.createCommentVNode("", true)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["name", "disabled"]);
+      }), 128))
+    ]),
+    _: 3
+  }, 8, ["modelValue", "stretch", "class", "onUpdate:modelValue"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-segmented/props.d.ts

@@ -0,0 +1,31 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { SegmentedSize, SegmentedItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const segmentedProps: {
+    /** 选中的值 */
+    modelValue: (NumberConstructor | StringConstructor)[];
+    /** 将宽度调整为父元素宽度 */
+    block: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
+    /** 数据 */
+    items: {
+        type: PropType<SegmentedItem[]>;
+        required: boolean;
+    };
+    /** 尺寸 */
+    size: PropType<SegmentedSize>;
+};
+export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>;
+/**
+ * 事件
+ */
+export declare const segmentedEmits: {
+    /** 更新绑定值 */
+    'update:modelValue': (_value: string | number) => boolean;
+    /** 选中改变的事件 */
+    change: (_active: string | number) => boolean;
+};

package/lib/ele-segmented/style/css-var.scss

@@ -0,0 +1,16 @@
+@use '../../style/util.scss' as *;
+
+/* 分段器主题变量 */
+@mixin set-segmented-var($var) {
+  .ele-segmented {
+    @include set-ele-var('segmented', $var);
+  }
+
+  .ele-segmented.is-large {
+    @include set-ele-var('segmented-large', $var);
+  }
+
+  .ele-segmented.is-small {
+    @include set-ele-var('segmented-small', $var);
+  }
+}