yuang-framework-ui-pc 1.0.20 → 1.1.1

package/es/ele-qr-code/style/index.js

@@ -0,0 +1 @@
+

package/es/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/es/ele-qr-code/util.d.ts

@@ -0,0 +1,27 @@
+import { default as qrcodegen } from './qrcodegen';
+import { ImageSettings, Modules, Excavation } from './types';
+
+export declare const ERROR_LEVEL_MAP: {
+    L: qrcodegen.QrCode.Ecc;
+    M: qrcodegen.QrCode.Ecc;
+    Q: qrcodegen.QrCode.Ecc;
+    H: qrcodegen.QrCode.Ecc;
+};
+export declare const DEFAULT_IMG_SCALE = 0.1;
+export declare const SUPPORTS_PATH2D: boolean;
+/**
+ * 获取自定义
+ * @param imageSettings 图片参数
+ * @param size 二维码尺寸
+ * @param margin 二维码间距
+ * @param cells 二维码数据
+ */
+export declare function getImageSettings(imageSettings: ImageSettings | undefined | null, size: number, margin: number, cells: Modules): null | {
+    x: number;
+    y: number;
+    h: number;
+    w: number;
+    excavation: Excavation | null;
+};
+export declare function excavateModules(modules: Modules, excavation: Excavation): Modules;
+export declare function generatePath(modules: Modules, margin?: number): string;

package/es/ele-qr-code/util.js

@@ -0,0 +1,90 @@
+import qrcodegen from "./qrcodegen";
+const ERROR_LEVEL_MAP = {
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH
+};
+const DEFAULT_IMG_SCALE = 0.1;
+const SUPPORTS_PATH2D = function() {
+  try {
+    new Path2D().addPath(new Path2D());
+  } catch (e) {
+    return false;
+  }
+  return true;
+}();
+function getImageSettings(imageSettings, size, margin, cells) {
+  if (imageSettings == null || !imageSettings.src) {
+    return null;
+  }
+  const numCells = cells.length + margin * 2;
+  const defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
+  const scale = numCells / size;
+  const w = (imageSettings.width || defaultSize) * scale;
+  const h = (imageSettings.height || defaultSize) * scale;
+  const x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
+  const y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
+  let excavation = null;
+  if (imageSettings.excavate) {
+    const floorX = Math.floor(x);
+    const floorY = Math.floor(y);
+    const ceilW = Math.ceil(w + x - floorX);
+    const ceilH = Math.ceil(h + y - floorY);
+    excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
+  }
+  return { x, y, h, w, excavation };
+}
+function excavateModules(modules, excavation) {
+  return modules.slice().map((row, y) => {
+    if (y < excavation.y || y >= excavation.y + excavation.h) {
+      return row;
+    }
+    return row.map((cell, x) => {
+      if (x < excavation.x || x >= excavation.x + excavation.w) {
+        return cell;
+      }
+      return false;
+    });
+  });
+}
+function generatePath(modules, margin = 0) {
+  const ops = [];
+  modules.forEach(function(row, y) {
+    let start = null;
+    row.forEach(function(cell, x) {
+      if (!cell && start !== null) {
+        ops.push(
+          `M${start + margin} ${y + margin}h${x - start}v1H${start + margin}z`
+        );
+        start = null;
+        return;
+      }
+      if (x === row.length - 1) {
+        if (!cell) {
+          return;
+        }
+        if (start === null) {
+          ops.push(`M${x + margin},${y + margin} h1v1H${x + margin}z`);
+        } else {
+          ops.push(
+            `M${start + margin},${y + margin} h${x + 1 - start}v1H${start + margin}z`
+          );
+        }
+        return;
+      }
+      if (cell && start === null) {
+        start = x;
+      }
+    });
+  });
+  return ops.join("");
+}
+export {
+  DEFAULT_IMG_SCALE,
+  ERROR_LEVEL_MAP,
+  SUPPORTS_PATH2D,
+  excavateModules,
+  generatePath,
+  getImageSettings
+};

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

@@ -0,0 +1,71 @@
+declare const _default: import('vue').DefineComponent<{
+    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>;
+    path: import('vue').Ref<string>;
+    fgPath: import('vue').Ref<string>;
+    imageHeight: import('vue').Ref<number>;
+    imageWidth: import('vue').Ref<number>;
+    imageX: import('vue').Ref<number>;
+    imageY: import('vue').Ref<number>;
+    render: () => void;
+}, unknown, {}, {}, 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>;
+}>> & {
+    onDone?: (() => any) | undefined;
+}, {
+    margin: number;
+    size: number;
+    level: import('../ele-qr-code/types').Level;
+    bgColor: string;
+    fgColor: string;
+}, {}>;
+export default _default;

package/es/ele-qr-code-svg/index.js

@@ -0,0 +1,127 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode } from "vue";
+import qrcodegen from "../ele-qr-code/qrcodegen";
+import { ERROR_LEVEL_MAP, getImageSettings, excavateModules, generatePath } from "../ele-qr-code/util";
+import { qrCodeProps, qrCodeEmits } from "../ele-qr-code/props";
+const _sfc_main = defineComponent({
+  name: "EleQrCodeSvg",
+  props: qrCodeProps,
+  emits: qrCodeEmits,
+  setup(props, { emit }) {
+    const viewBox = ref("");
+    const path = ref("");
+    const fgPath = ref("");
+    const imageHeight = ref(0);
+    const imageWidth = ref(0);
+    const imageX = ref(0);
+    const imageY = ref(0);
+    const render = () => {
+      const { value, size, level, margin, imageSettings } = props;
+      if (!value) {
+        viewBox.value = "";
+        return;
+      }
+      let cells = qrcodegen.QrCode.encodeText(
+        value,
+        ERROR_LEVEL_MAP[level]
+      ).getModules();
+      const numCells = cells.length + margin * 2;
+      const calculatedImageSettings = getImageSettings(
+        imageSettings,
+        size,
+        margin,
+        cells
+      );
+      if (imageSettings != null && calculatedImageSettings != null) {
+        if (calculatedImageSettings.excavation != null) {
+          cells = 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 = generatePath(cells, margin);
+      emit("done");
+    };
+    watch(
+      [
+        () => props.value,
+        () => props.size,
+        () => props.level,
+        () => props.margin
+      ],
+      () => {
+        render();
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props.imageSettings,
+      () => {
+        render();
+      },
+      { deep: true }
+    );
+    return {
+      viewBox,
+      path,
+      fgPath,
+      imageHeight,
+      imageWidth,
+      imageX,
+      imageY,
+      render
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    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 openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.viewBox ? (openBlock(), createElementBlock("svg", {
+      key: 0,
+      shapeRendering: "crispEdges",
+      height: _ctx.size,
+      width: _ctx.size,
+      viewBox: _ctx.viewBox,
+      style: normalizeStyle(_ctx.customStyle)
+    }, [
+      createElementVNode("path", {
+        fill: _ctx.bgColor,
+        d: _ctx.path
+      }, null, 8, _hoisted_3),
+      createElementVNode("path", {
+        fill: _ctx.fgColor,
+        d: _ctx.fgPath
+      }, null, 8, _hoisted_4),
+      _ctx.imageSettings && _ctx.imageSettings.src ? (openBlock(), 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)) : createCommentVNode("", true)
+    ], 12, _hoisted_2)) : createCommentVNode("", true)
+  ]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-qr-code-svg/style/index.js

@@ -0,0 +1 @@
+

package/es/ele-segmented/index.d.ts

@@ -0,0 +1,36 @@
+import { ElTabsInstance } from '../ele-app/el';
+
+declare const _default: import('vue').DefineComponent<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    block: BooleanConstructor;
+    disabled: BooleanConstructor;
+    items: {
+        type: import('vue').PropType<import('./types').SegmentedItem[]>;
+        required: boolean;
+    };
+    size: import('vue').PropType<import('./types').SegmentedSize>;
+}, {
+    tabRef: import('vue').Ref<ElTabsInstance>;
+    isEmptyActive: import('vue').ComputedRef<boolean>;
+    handleUpdateModelValue: (value: string | number) => void;
+    updateActiveBar: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (_value: string | number) => boolean;
+    change: (_active: string | number) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: (StringConstructor | NumberConstructor)[];
+    block: BooleanConstructor;
+    disabled: BooleanConstructor;
+    items: {
+        type: import('vue').PropType<import('./types').SegmentedItem[]>;
+        required: boolean;
+    };
+    size: import('vue').PropType<import('./types').SegmentedSize>;
+}>> & {
+    "onUpdate:modelValue"?: ((_value: string | number) => any) | undefined;
+    onChange?: ((_active: string | number) => any) | undefined;
+}, {
+    disabled: boolean;
+    block: boolean;
+}, {}>;
+export default _default;

package/es/ele-segmented/index.js

@@ -0,0 +1,108 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, Fragment, renderList, renderSlot, mergeProps, resolveDynamicComponent, normalizeStyle, createCommentVNode, toDisplayString } from "vue";
+import { ElIcon, ElTabs, ElTabPane } from "element-plus";
+import { useFormValidate } from "../ele-basic-select/util";
+import { segmentedProps, segmentedEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleSegmented",
+  components: { ElIcon, ElTabs, ElTabPane },
+  props: segmentedProps,
+  emits: segmentedEmits,
+  setup(props, { emit }) {
+    const { validateChange } = useFormValidate();
+    const tabRef = ref(null);
+    const isEmptyActive = computed(() => {
+      return props.modelValue == null || !props.items || !props.items.some((d) => d.value === props.modelValue);
+    });
+    const handleUpdateModelValue = (value) => {
+      if (props.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, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    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 = resolveComponent("ElIcon");
+  const _component_ElTabPane = resolveComponent("ElTabPane");
+  const _component_ElTabs = resolveComponent("ElTabs");
+  return openBlock(), createBlock(_component_ElTabs, {
+    ref: "tabRef",
+    modelValue: _ctx.modelValue,
+    stretch: _ctx.block,
+    class: 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: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index2) => {
+        return openBlock(), createBlock(_component_ElTabPane, {
+          key: index2 + "-" + item.value + "-" + item.label,
+          name: item.value,
+          disabled: _ctx.disabled || item.disabled
+        }, {
+          label: withCtx(() => [
+            renderSlot(_ctx.$slots, "label", { item }, () => [
+              item.icon ? (openBlock(), createBlock(_component_ElIcon, mergeProps({
+                key: 0,
+                ref_for: true
+              }, item.iconProps || {}, { class: "ele-segmented-item-icon" }), {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(item.icon), {
+                    style: normalizeStyle(item.iconStyle)
+                  }, null, 8, ["style"]))
+                ]),
+                _: 2
+              }, 1040)) : createCommentVNode("", true),
+              item.label ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(item.label), 1)) : createCommentVNode("", true)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["name", "disabled"]);
+      }), 128))
+    ]),
+    _: 3
+  }, 8, ["modelValue", "stretch", "class", "onUpdate:modelValue"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,31 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { SegmentedSize, SegmentedItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const segmentedProps: {
+    /** 选中的值 */
+    modelValue: (StringConstructor | NumberConstructor)[];
+    /** 将宽度调整为父元素宽度 */
+    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/es/ele-segmented/props.js

@@ -0,0 +1,25 @@
+const segmentedProps = {
+  /** 选中的值 */
+  modelValue: [String, Number],
+  /** 将宽度调整为父元素宽度 */
+  block: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
+  /** 数据 */
+  items: {
+    type: Array,
+    required: true
+  },
+  /** 尺寸 */
+  size: String
+};
+const segmentedEmits = {
+  /** 更新绑定值 */
+  "update:modelValue": (_value) => true,
+  /** 选中改变的事件 */
+  change: (_active) => true
+};
+export {
+  segmentedEmits,
+  segmentedProps
+};

package/es/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);
+  }
+}

package/es/ele-segmented/style/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,4 @@
+import "element-plus/es/components/tabs/style/index";
+import "element-plus/es/components/tab-pane/style/index";
+import "element-plus/es/components/icon/style/index";
+import "./index.scss";