yuang-framework-ui-pc 1.0.19 → 1.1.0

package/lib/ele-count-up/index.cjs

@@ -0,0 +1,107 @@
+"use strict";
+const vue = require("vue");
+const countup_js = require("countup.js");
+const props = require("./props");
+const isFunction = (value) => typeof value === "function";
+const _sfc_main = vue.defineComponent({
+  name: "EleCountUp",
+  props: props.countUpProps,
+  emits: props.countUpEmits,
+  setup(props2, { emit }) {
+    let instance;
+    const rootRef = vue.ref(null);
+    const create = () => {
+      const elem = vue.unref(rootRef);
+      if (instance || !elem) {
+        return;
+      }
+      const ins = new countup_js.CountUp(elem, props2.endVal ?? 0, props2.options);
+      if (ins.error) {
+        console.warn(ins);
+        return;
+      }
+      instance = ins;
+    };
+    const printValue = (value) => {
+      if (instance && isFunction(instance.printValue)) {
+        return instance.printValue(value);
+      }
+    };
+    const start = (callback) => {
+      if (instance && isFunction(instance.start)) {
+        return instance.start(callback);
+      }
+    };
+    const pauseResume = () => {
+      if (instance && isFunction(instance.pauseResume)) {
+        return instance.pauseResume();
+      }
+    };
+    const reset = () => {
+      if (instance && isFunction(instance.reset)) {
+        return instance.reset();
+      }
+    };
+    const update = (newEndVal) => {
+      if (instance && isFunction(instance.update)) {
+        return instance.update(newEndVal ?? 0);
+      }
+    };
+    const destroy = () => {
+      reset();
+      instance = null;
+    };
+    vue.watch(
+      () => props2.endVal,
+      (value) => {
+        update(value);
+      }
+    );
+    vue.watch(
+      () => props2.options,
+      () => {
+        destroy();
+        create();
+        emit("ready", instance);
+      }
+    );
+    vue.onMounted(() => {
+      create();
+      if (props2.delay < 0) {
+        emit("ready", instance);
+        return;
+      }
+      setTimeout(() => {
+        if (instance && isFunction(instance.start)) {
+          instance.start(() => {
+            emit("ready", instance);
+          });
+        }
+      }, props2.delay);
+    });
+    vue.onBeforeUnmount(() => {
+      destroy();
+    });
+    return {
+      rootRef,
+      printValue,
+      start,
+      pauseResume,
+      reset,
+      update
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { ref: "rootRef" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, null, 512);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-count-up/index.d.ts

@@ -0,0 +1,37 @@
+import { CountUp } from 'countup.js';
+
+declare const _default: import('vue').DefineComponent<{
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    endVal: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    options: import('vue').PropType<import('countup.js').CountUpOptions>;
+}, {
+    rootRef: import('vue').Ref<HTMLDivElement | null>;
+    printValue: (value: number) => void;
+    start: (callback?: (args?: any) => any) => void;
+    pauseResume: () => void;
+    reset: () => void;
+    update: (newEndVal?: string | number) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    ready: (_instance?: CountUp | null) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    endVal: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    options: import('vue').PropType<import('countup.js').CountUpOptions>;
+}>> & {
+    onReady?: ((_instance?: CountUp | null | undefined) => any) | undefined;
+}, {
+    delay: number;
+}, {}>;
+export default _default;

package/lib/ele-count-up/props.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const countUpProps = {
+  /** 首次动画延迟时间 */
+  delay: {
+    type: Number,
+    default: 300
+  },
+  /** 结束值 */
+  endVal: {
+    type: Number,
+    required: true
+  },
+  /** 参数配置 */
+  options: Object
+};
+const countUpEmits = {
+  /** 渲染完成事件 */
+  ready: (_instance) => true
+};
+exports.countUpEmits = countUpEmits;
+exports.countUpProps = countUpProps;

package/lib/ele-count-up/props.d.ts

@@ -0,0 +1,28 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { CountUpOptions, CountUp } from 'countup.js';
+
+/**
+ * 属性
+ */
+export declare const countUpProps: {
+    /** 首次动画延迟时间 */
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 结束值 */
+    endVal: {
+        type: NumberConstructor;
+        required: boolean;
+    };
+    /** 参数配置 */
+    options: PropType<CountUpOptions>;
+};
+export type CountUpProps = ExtractPropTypes<typeof countUpProps>;
+/**
+ * 事件
+ */
+export declare const countUpEmits: {
+    /** 渲染完成事件 */
+    ready: (_instance?: CountUp | null) => boolean;
+};

package/lib/ele-count-up/style/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/lib/ele-cropper/components/cropper-preview.cjs

@@ -0,0 +1,73 @@
+"use strict";
+const vue = require("vue");
+const _sfc_main = vue.defineComponent({
+  name: "CropperPreview",
+  props: {
+    /** 组件宽度 */
+    previewWidth: {
+      type: Number,
+      required: true
+    },
+    /** 裁剪比例 */
+    aspectRatio: Number
+  },
+  setup() {
+    const rootRef = vue.ref(null);
+    const getPreviews = () => {
+      if (!rootRef.value) {
+        return;
+      }
+      return rootRef.value.querySelectorAll(".ele-cropper-preview");
+    };
+    return { rootRef, getPreviews };
+  }
+});
+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 vue.openBlock(), vue.createElementBlock("div", {
+    ref: "rootRef",
+    class: "ele-cropper-previews",
+    style: vue.normalizeStyle({ width: `${_ctx.previewWidth + 14}px` })
+  }, [
+    vue.createElementVNode("div", {
+      class: "ele-cropper-preview",
+      style: vue.normalizeStyle({
+        width: `${_ctx.previewWidth}px`,
+        height: `${_ctx.previewWidth / (_ctx.aspectRatio || 1)}px`,
+        marginTop: "0px"
+      })
+    }, null, 4),
+    _ctx.aspectRatio === 1 ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: "ele-cropper-preview is-circle",
+      style: vue.normalizeStyle({
+        width: `${_ctx.previewWidth}px`,
+        height: `${_ctx.previewWidth / _ctx.aspectRatio}px`
+      })
+    }, null, 4)) : _ctx.aspectRatio ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+      vue.createElementVNode("div", {
+        class: "ele-cropper-preview",
+        style: vue.normalizeStyle({
+          width: `${_ctx.previewWidth}px`,
+          height: `${(_ctx.previewWidth / 3 * 2 - 10) / _ctx.aspectRatio}px`
+        })
+      }, null, 4),
+      vue.createElementVNode("div", {
+        class: "ele-cropper-preview",
+        style: vue.normalizeStyle({
+          width: `${_ctx.previewWidth}px`,
+          height: `${_ctx.previewWidth / 3 / _ctx.aspectRatio}px`,
+          marginLeft: "10px"
+        })
+      }, null, 4)
+    ], 64)) : vue.createCommentVNode("", true)
+  ], 4);
+}
+const cropperPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = cropperPreview;

package/lib/ele-cropper/components/cropper-preview.d.ts

@@ -0,0 +1,21 @@
+declare const _default: import('vue').DefineComponent<{
+    /** 组件宽度 */
+    previewWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 裁剪比例 */
+    aspectRatio: NumberConstructor;
+}, {
+    rootRef: import('vue').Ref<HTMLDivElement | null>;
+    getPreviews: () => NodeListOf<HTMLElement> | undefined;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 组件宽度 */
+    previewWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 裁剪比例 */
+    aspectRatio: NumberConstructor;
+}>>, {}, {}>;
+export default _default;

package/lib/ele-cropper/components/cropper-tools.cjs

@@ -0,0 +1,217 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const hook = require("../../utils/hook");
+const receiver = require("../../ele-config-provider/receiver");
+const EleTooltip = require("../../ele-tooltip/index");
+const TOOL_ICONS = {
+  zoomIn: icons.ZoomInOutlined,
+  zoomOut: icons.ZoomOutOutlined,
+  moveLeft: icons.ArrowLeftOutlined,
+  moveRight: icons.ArrowRightOutlined,
+  moveUp: icons.ArrowUpOutlined,
+  moveDown: icons.ArrowDownOutlined,
+  rotateLeft: icons.UndoOutlined,
+  rotateRight: icons.ReloadOutlined,
+  flipX: icons.SwapOutlined,
+  flipY: icons.SortOutlined,
+  reset: icons.SyncOutlined,
+  upload: icons.UploadOutlined,
+  ok: icons.CheckOutlined
+};
+const _sfc_main = vue.defineComponent({
+  name: "CropperTools",
+  components: { ElButtonGroup: elementPlus.ElButtonGroup, ElButton: elementPlus.ElButton, ElUpload: elementPlus.ElUpload, EleTooltip },
+  props: {
+    /** 操作按钮布局 */
+    tools: String,
+    /** 允许上传的图片类型 */
+    accept: String,
+    /** 是否需要提示组件 */
+    tooltip: Boolean,
+    /** 提示组件属性 */
+    tooltipProps: Object,
+    /** 上传按钮点击前的钩子 */
+    beforeUploadClick: Function,
+    /** 国际化 */
+    locale: Object
+  },
+  emits: {
+    zoomIn: () => true,
+    zoomOut: () => true,
+    moveLeft: () => true,
+    moveRight: () => true,
+    moveUp: () => true,
+    moveDown: () => true,
+    rotateLeft: () => true,
+    rotateRight: () => true,
+    flipX: () => true,
+    flipY: () => true,
+    reset: () => true,
+    upload: (_option) => true,
+    ok: () => true
+  },
+  setup(props, { emit }) {
+    const { lang } = receiver.useLocale("cropper", props);
+    const [startHideTipTimer, stopHideTipTimer] = hook.useTimer(200);
+    const tooltipRef = vue.ref(null);
+    const groups = vue.shallowRef([]);
+    const tooltipContent = vue.ref("");
+    const virtualRef = vue.ref();
+    const emitUpload = (data, type) => {
+      emit("upload", { data, type });
+    };
+    const handleUpload = (file) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        var _a;
+        const url = (_a = e.target) == null ? void 0 : _a.result;
+        if (url != null) {
+          emitUpload(url, file.type);
+        }
+      };
+      reader.readAsDataURL(file);
+      return false;
+    };
+    const hideTooltip = () => {
+      tooltipRef.value && tooltipRef.value.hide();
+    };
+    const handleItemHover = (item, e) => {
+      const title = lang.value[item.name];
+      if (props.tooltip && item.name !== "ok" && title) {
+        stopHideTipTimer();
+        virtualRef.value = e.currentTarget;
+        tooltipContent.value = title;
+      }
+    };
+    const handleClick = (name) => {
+      startHideTipTimer(() => {
+        hideTooltip();
+      });
+      emit(name);
+    };
+    const handleUploadButtonClick = (e) => {
+      startHideTipTimer(() => {
+        hideTooltip();
+      });
+      if (props.beforeUploadClick && props.beforeUploadClick(e, emitUpload) === false) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+    vue.watch(
+      () => props.tools,
+      (tools) => {
+        if (!tools) {
+          groups.value = [];
+          return;
+        }
+        const names = Object.keys(TOOL_ICONS);
+        groups.value = tools.split("|").filter((g) => !!g.trim()).map((g, i) => {
+          const items = g.split(",").filter((t) => {
+            const name = t.trim();
+            return name && names.includes(name);
+          }).map((t, j) => {
+            const name = t.trim();
+            return {
+              key: i + "-" + j + name,
+              name,
+              icon: vue.markRaw(TOOL_ICONS[name]),
+              className: `ele-cropper-${name}`
+            };
+          });
+          return { key: i + g, items };
+        });
+      },
+      { immediate: true }
+    );
+    return {
+      lang,
+      tooltipRef,
+      groups,
+      tooltipContent,
+      virtualRef,
+      handleUpload,
+      handleClick,
+      handleItemHover,
+      handleUploadButtonClick
+    };
+  }
+});
+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-cropper-tools" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = vue.resolveComponent("ElButton");
+  const _component_ElUpload = vue.resolveComponent("ElUpload");
+  const _component_ElButtonGroup = vue.resolveComponent("ElButtonGroup");
+  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.groups, (group) => {
+      return vue.openBlock(), vue.createBlock(_component_ElButtonGroup, {
+        key: group.key,
+        class: "ele-cropper-tool-item"
+      }, {
+        default: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.items, (item) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+              key: item.key
+            }, [
+              item.name === "upload" ? (vue.openBlock(), vue.createBlock(_component_ElUpload, {
+                key: 0,
+                action: "",
+                accept: _ctx.accept,
+                showFileList: false,
+                beforeUpload: _ctx.handleUpload,
+                style: { "display": "inline-block", "line-height": "0" }
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_ElButton, {
+                    type: "primary",
+                    icon: item.icon,
+                    class: vue.normalizeClass(["ele-cropper-tool", item.className]),
+                    onMouseover: (e) => _ctx.handleItemHover(item, e),
+                    onClick: _ctx.handleUploadButtonClick
+                  }, null, 8, ["icon", "class", "onMouseover", "onClick"])
+                ]),
+                _: 2
+              }, 1032, ["accept", "beforeUpload"])) : (vue.openBlock(), vue.createBlock(_component_ElButton, {
+                key: 1,
+                type: "primary",
+                icon: item.icon,
+                class: vue.normalizeClass(["ele-cropper-tool", item.className]),
+                onMouseover: (e) => _ctx.handleItemHover(item, e),
+                onClick: ($event) => _ctx.handleClick(item.name)
+              }, {
+                default: vue.withCtx(() => [
+                  item.name === "ok" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                    vue.createTextVNode(vue.toDisplayString(_ctx.lang.ok), 1)
+                  ], 64)) : vue.createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["icon", "class", "onMouseover", "onClick"]))
+            ], 64);
+          }), 128))
+        ]),
+        _: 2
+      }, 1024);
+    }), 128)),
+    vue.createVNode(_component_EleTooltip, vue.mergeProps({
+      placement: "top",
+      offset: 6
+    }, _ctx.tooltipProps || {}, {
+      content: _ctx.tooltipContent,
+      virtualRef: _ctx.virtualRef,
+      virtualTriggering: true,
+      ref: "tooltipRef"
+    }), null, 16, ["content", "virtualRef"])
+  ]);
+}
+const cropperTools = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = cropperTools;

package/lib/ele-cropper/components/cropper-tools.d.ts

@@ -0,0 +1,72 @@
+import { PropType } from 'vue';
+import { EleTooltipProps, EleTooltipInstance } from '../../ele-app/plus';
+import { UploadOption, ToolName, ToolGroup, ToolItem, BeforeUploadClick, CropperLocale } from '../types';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 操作按钮布局 */
+    tools: StringConstructor;
+    /** 允许上传的图片类型 */
+    accept: StringConstructor;
+    /** 是否需要提示组件 */
+    tooltip: BooleanConstructor;
+    /** 提示组件属性 */
+    tooltipProps: PropType<EleTooltipProps>;
+    /** 上传按钮点击前的钩子 */
+    beforeUploadClick: PropType<BeforeUploadClick>;
+    /** 国际化 */
+    locale: PropType<Partial<CropperLocale>>;
+}, {
+    lang: import('vue').ComputedRef<CropperLocale>;
+    tooltipRef: import('vue').Ref<EleTooltipInstance>;
+    groups: import('vue').ShallowRef<ToolGroup[]>;
+    tooltipContent: import('vue').Ref<string>;
+    virtualRef: import('vue').Ref<any>;
+    handleUpload: (file: File) => boolean;
+    handleClick: (name: Omit<ToolName, "upload">) => void;
+    handleItemHover: (item: ToolItem, e: MouseEvent) => void;
+    handleUploadButtonClick: (e: MouseEvent) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    zoomIn: () => true;
+    zoomOut: () => true;
+    moveLeft: () => true;
+    moveRight: () => true;
+    moveUp: () => true;
+    moveDown: () => true;
+    rotateLeft: () => true;
+    rotateRight: () => true;
+    flipX: () => true;
+    flipY: () => true;
+    reset: () => true;
+    upload: (_option?: UploadOption) => true;
+    ok: () => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 操作按钮布局 */
+    tools: StringConstructor;
+    /** 允许上传的图片类型 */
+    accept: StringConstructor;
+    /** 是否需要提示组件 */
+    tooltip: BooleanConstructor;
+    /** 提示组件属性 */
+    tooltipProps: PropType<EleTooltipProps>;
+    /** 上传按钮点击前的钩子 */
+    beforeUploadClick: PropType<BeforeUploadClick>;
+    /** 国际化 */
+    locale: PropType<Partial<CropperLocale>>;
+}>> & {
+    onReset?: (() => any) | undefined;
+    onUpload?: ((_option?: UploadOption | undefined) => any) | undefined;
+    onZoomIn?: (() => any) | undefined;
+    onZoomOut?: (() => any) | undefined;
+    onMoveLeft?: (() => any) | undefined;
+    onMoveRight?: (() => any) | undefined;
+    onMoveUp?: (() => any) | undefined;
+    onMoveDown?: (() => any) | undefined;
+    onRotateLeft?: (() => any) | undefined;
+    onRotateRight?: (() => any) | undefined;
+    onFlipX?: (() => any) | undefined;
+    onFlipY?: (() => any) | undefined;
+    onOk?: (() => any) | undefined;
+}, {
+    tooltip: boolean;
+}, {}>;
+export default _default;