@aplus-frontend/ui 0.0.1-beta.3 → 0.0.1-beta.30

package/es/src/cropper/cropper-avatar.vue2.mjs

@@ -1,4 +1,98 @@
-import f from "./cropper-avatar.vue.mjs";
+import { defineComponent as N, ref as V, computed as s, unref as t, watchEffect as $, watch as I, openBlock as u, createElementBlock as f, normalizeClass as c, normalizeStyle as n, createElementVNode as g, createVNode as h, createCommentVNode as y, createBlock as T, mergeProps as E, withCtx as P, createTextVNode as W, toDisplayString as _ } from "vue";
+import { Button as R } from "ant-design-vue";
+import "./cropper-modal.vue.mjs";
+import "../modal/index.mjs";
+import { useMessage as U } from "../hooks/useMessage.mjs";
+import "../icon/icon.vue.mjs";
+import "../config-provider/index.mjs";
+import "./style/avatar.css";
+import { useNamespace as D } from "../config-provider/hooks/use-namespace.mjs";
+import { useModal as L } from "../modal/hooks/use-modal.mjs";
+import { useLocale as j } from "../config-provider/hooks/use-locale.mjs";
+import q from "../icon/icon.vue2.mjs";
+import F from "./cropper-modal.vue2.mjs";
+const G = ["src"], re = /* @__PURE__ */ N({
+  name: "ApCropperAvatar",
+  __name: "cropper-avatar",
+  props: {
+    width: { default: "200px" },
+    value: {},
+    showBtn: { type: Boolean, default: !0 },
+    btnProps: {},
+    btnText: { default: "" },
+    uploadApi: {},
+    size: { default: 5 }
+  },
+  emits: ["update:value", "change"],
+  setup(w, { expose: b, emit: k }) {
+    const l = w, d = k, o = V(l.value || ""), { b: r } = D("cropper-avatar"), [z, { openModal: i, closeModal: C }] = L(), { createMessage: x } = U(), { t: m } = j(), B = s(() => [r()]), p = s(() => `${l.width}`.replace(/px/, "") + "px"), S = s(
+      () => parseInt(`${l.width}`.replace(/px/, "")) / 2 + "px"
+    ), A = s(() => ({ width: t(p) })), v = s(
+      () => ({
+        width: t(p),
+        height: t(p)
+      })
+    );
+    $(() => {
+      o.value = l.value || "";
+    }), I(
+      () => o.value,
+      (e) => {
+        d("update:value", e);
+      }
+    );
+    function M({
+      source: e,
+      data: a
+    }) {
+      o.value = e, d("change", { source: e, data: a }), x.success(m("ap.cropper.uploadSuccess"));
+    }
+    return b({ openModal: i.bind(null, !0), closeModal: C }), (e, a) => (u(), f("div", {
+      class: c(B.value),
+      style: n(A.value)
+    }, [
+      g("div", {
+        class: c(t(r)("image-wrapper")),
+        style: n(v.value),
+        onClick: a[0] || (a[0] = (H) => t(i)())
+      }, [
+        g("div", {
+          class: c(t(r)("image-mask")),
+          style: n(v.value)
+        }, [
+          h(q, {
+            icon: "ant-design:cloud-upload-outlined",
+            size: S.value,
+            style: n({ height: p.value }),
+            color: "#d6d6d6"
+          }, null, 8, ["size", "style"])
+        ], 6),
+        o.value ? (u(), f("img", {
+          key: 0,
+          src: o.value,
+          alt: "avatar"
+        }, null, 8, G)) : y("", !0)
+      ], 6),
+      e.showBtn ? (u(), T(t(R), E({
+        key: 0,
+        class: t(r)("upload-btn"),
+        onClick: a[1] || (a[1] = () => t(i)())
+      }, e.btnProps), {
+        default: P(() => [
+          W(_(e.btnText ? e.btnText : t(m)("ap.cropper.selectImage")), 1)
+        ]),
+        _: 1
+      }, 16, ["class"])) : y("", !0),
+      h(F, {
+        onRegister: t(z),
+        onUploadSuccess: M,
+        uploadApi: e.uploadApi,
+        src: o.value,
+        size: e.size
+      }, null, 8, ["onRegister", "uploadApi", "src", "size"])
+    ], 6));
+  }
+});
 export {
-  f as default
+  re as default
 };

package/es/src/cropper/cropper-image.vue.d.ts

@@ -24,8 +24,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
     onReady?: ((...args: any[]) => any) | undefined;
     onCropendError?: ((...args: any[]) => any) | undefined;
 }, {
-    options: CropperOptions;
     height: string | number;
+    options: CropperOptions;
     imageStyle: CSSProperties;
     circled: boolean;
     realTimePreview: boolean;

package/es/src/cropper/cropper-image.vue.mjs

@@ -1,131 +1,4 @@
-import { defineComponent as O, ref as l, computed as u, onMounted as S, onUnmounted as D, unref as _, openBlock as I, createElementBlock as M, normalizeClass as T, normalizeStyle as h, withDirectives as P, createElementVNode as A, vShow as W } from "vue";
-import F from "cropperjs";
-import "cropperjs/dist/cropper.css";
-import { useDebounceFn as N } from "@vueuse/core";
-import { useAttrs as U } from "@aplus-frontend/hooks";
-import "../config-provider/index.mjs";
-import "./style/image.css";
-import { useNamespace as $ } from "../config-provider/hooks/use-namespace.mjs";
-const L = ["src", "alt", "crossorigin"], X = /* @__PURE__ */ O({
-  name: "ApCropperImage",
-  __name: "cropper-image",
-  props: {
-    src: {},
-    alt: {},
-    circled: { type: Boolean, default: !1 },
-    realTimePreview: { type: Boolean, default: !0 },
-    height: { default: "360px" },
-    crossorigin: { default: void 0 },
-    imageStyle: { default: () => ({}) },
-    options: { default: () => ({}) }
-  },
-  emits: ["cropend", "ready", "cropendError"],
-  setup(f, { emit: v }) {
-    const C = {
-      aspectRatio: 1,
-      zoomable: !0,
-      zoomOnTouch: !0,
-      zoomOnWheel: !0,
-      cropBoxMovable: !0,
-      cropBoxResizable: !0,
-      toggleDragModeOnDblclick: !0,
-      autoCrop: !0,
-      background: !0,
-      highlight: !0,
-      center: !0,
-      responsive: !0,
-      restore: !0,
-      checkCrossOrigin: !0,
-      checkOrientation: !0,
-      scalable: !0,
-      modal: !0,
-      guides: !0,
-      movable: !0,
-      rotatable: !0
-    }, o = f, s = v, y = U(), p = l(), a = l(), m = l(!1), { b, m: w } = $("cropper-image"), c = N(d, 80), R = u(() => ({
-      height: o.height,
-      maxWidth: "100%",
-      ...o.imageStyle
-    })), E = u(() => [
-      b(),
-      y.class,
-      {
-        [`${w("circled")}`]: o.circled
-      }
-    ]), B = u(() => ({ height: `${o.height}`.replace(/px/, "") + "px" }));
-    S(k), D(() => {
-      var e;
-      (e = a.value) == null || e.destroy();
-    });
-    async function k() {
-      const e = _(p);
-      e && (a.value = new F(e, {
-        ...C,
-        ready: () => {
-          m.value = !0, d(), s("ready", a.value);
-        },
-        crop() {
-          c();
-        },
-        zoom() {
-          c();
-        },
-        cropmove() {
-          c();
-        },
-        ...o.options
-      }));
-    }
-    function d() {
-      o.realTimePreview && x();
-    }
-    function x() {
-      if (!a.value)
-        return;
-      let e = a.value.getData();
-      (o.circled ? z() : a.value.getCroppedCanvas()).toBlob((t) => {
-        if (!t)
-          return;
-        let r = new FileReader();
-        r.readAsDataURL(t), r.onloadend = (i) => {
-          var g;
-          s("cropend", {
-            imgBase64: ((g = i.target) == null ? void 0 : g.result) ?? "",
-            imgInfo: e
-          });
-        }, r.onerror = () => {
-          s("cropendError");
-        };
-      }, "image/png");
-    }
-    function z() {
-      const e = a.value.getCroppedCanvas(), n = document.createElement("canvas"), t = n.getContext("2d"), r = e.width, i = e.height;
-      return n.width = r, n.height = i, t.imageSmoothingEnabled = !0, t.drawImage(e, 0, 0, r, i), t.globalCompositeOperation = "destination-in", t.beginPath(), t.arc(
-        r / 2,
-        i / 2,
-        Math.min(r, i) / 2,
-        0,
-        2 * Math.PI,
-        !0
-      ), t.fill(), n;
-    }
-    return (e, n) => (I(), M("div", {
-      class: T(E.value),
-      style: h(B.value)
-    }, [
-      P(A("img", {
-        ref_key: "imgElRef",
-        ref: p,
-        src: e.src,
-        alt: e.alt,
-        crossorigin: e.crossorigin,
-        style: h(R.value)
-      }, null, 12, L), [
-        [W, m.value]
-      ])
-    ], 6));
-  }
-});
+import f from "./cropper-image.vue2.mjs";
 export {
-  X as default
+  f as default
 };

package/es/src/cropper/cropper-image.vue2.mjs

@@ -1,4 +1,131 @@
-import f from "./cropper-image.vue.mjs";
+import { defineComponent as O, ref as l, computed as u, onMounted as S, onUnmounted as D, unref as _, openBlock as I, createElementBlock as M, normalizeClass as T, normalizeStyle as h, withDirectives as P, createElementVNode as A, vShow as W } from "vue";
+import F from "cropperjs";
+import "cropperjs/dist/cropper.css";
+import { useDebounceFn as N } from "@vueuse/core";
+import { useAttrs as U } from "@aplus-frontend/hooks";
+import "../config-provider/index.mjs";
+import "./style/image.css";
+import { useNamespace as $ } from "../config-provider/hooks/use-namespace.mjs";
+const L = ["src", "alt", "crossorigin"], X = /* @__PURE__ */ O({
+  name: "ApCropperImage",
+  __name: "cropper-image",
+  props: {
+    src: {},
+    alt: {},
+    circled: { type: Boolean, default: !1 },
+    realTimePreview: { type: Boolean, default: !0 },
+    height: { default: "360px" },
+    crossorigin: { default: void 0 },
+    imageStyle: { default: () => ({}) },
+    options: { default: () => ({}) }
+  },
+  emits: ["cropend", "ready", "cropendError"],
+  setup(f, { emit: v }) {
+    const C = {
+      aspectRatio: 1,
+      zoomable: !0,
+      zoomOnTouch: !0,
+      zoomOnWheel: !0,
+      cropBoxMovable: !0,
+      cropBoxResizable: !0,
+      toggleDragModeOnDblclick: !0,
+      autoCrop: !0,
+      background: !0,
+      highlight: !0,
+      center: !0,
+      responsive: !0,
+      restore: !0,
+      checkCrossOrigin: !0,
+      checkOrientation: !0,
+      scalable: !0,
+      modal: !0,
+      guides: !0,
+      movable: !0,
+      rotatable: !0
+    }, o = f, s = v, y = U(), p = l(), a = l(), m = l(!1), { b, m: w } = $("cropper-image"), c = N(d, 80), R = u(() => ({
+      height: o.height,
+      maxWidth: "100%",
+      ...o.imageStyle
+    })), E = u(() => [
+      b(),
+      y.class,
+      {
+        [`${w("circled")}`]: o.circled
+      }
+    ]), B = u(() => ({ height: `${o.height}`.replace(/px/, "") + "px" }));
+    S(k), D(() => {
+      var e;
+      (e = a.value) == null || e.destroy();
+    });
+    async function k() {
+      const e = _(p);
+      e && (a.value = new F(e, {
+        ...C,
+        ready: () => {
+          m.value = !0, d(), s("ready", a.value);
+        },
+        crop() {
+          c();
+        },
+        zoom() {
+          c();
+        },
+        cropmove() {
+          c();
+        },
+        ...o.options
+      }));
+    }
+    function d() {
+      o.realTimePreview && x();
+    }
+    function x() {
+      if (!a.value)
+        return;
+      let e = a.value.getData();
+      (o.circled ? z() : a.value.getCroppedCanvas()).toBlob((t) => {
+        if (!t)
+          return;
+        let r = new FileReader();
+        r.readAsDataURL(t), r.onloadend = (i) => {
+          var g;
+          s("cropend", {
+            imgBase64: ((g = i.target) == null ? void 0 : g.result) ?? "",
+            imgInfo: e
+          });
+        }, r.onerror = () => {
+          s("cropendError");
+        };
+      }, "image/png");
+    }
+    function z() {
+      const e = a.value.getCroppedCanvas(), n = document.createElement("canvas"), t = n.getContext("2d"), r = e.width, i = e.height;
+      return n.width = r, n.height = i, t.imageSmoothingEnabled = !0, t.drawImage(e, 0, 0, r, i), t.globalCompositeOperation = "destination-in", t.beginPath(), t.arc(
+        r / 2,
+        i / 2,
+        Math.min(r, i) / 2,
+        0,
+        2 * Math.PI,
+        !0
+      ), t.fill(), n;
+    }
+    return (e, n) => (I(), M("div", {
+      class: T(E.value),
+      style: h(B.value)
+    }, [
+      P(A("img", {
+        ref_key: "imgElRef",
+        ref: p,
+        src: e.src,
+        alt: e.alt,
+        crossorigin: e.crossorigin,
+        style: h(R.value)
+      }, null, 12, L), [
+        [W, m.value]
+      ])
+    ], 6));
+  }
+});
 export {
-  f as default
+  X as default
 };

package/es/src/cropper/cropper-modal.vue.mjs

@@ -1,272 +1,4 @@
-import { defineComponent as X, ref as k, openBlock as g, createBlock as T, unref as e, mergeProps as Y, withCtx as s, createElementVNode as f, normalizeClass as m, createCommentVNode as C, createVNode as l, createElementBlock as L } from "vue";
-import _ from "./cropper-image.vue.mjs";
-import { Upload as O, Tooltip as p, Space as V, Avatar as z } from "ant-design-vue";
-import { BaseButton as d } from "../base-button/index.mjs";
-import { BaseModal as P } from "../modal/index.mjs";
-import { dataURLtoBlob as h } from "@aplus-frontend/utils";
-import "../config-provider/index.mjs";
-import { isFunction as D } from "@fruits-chain/utils";
-import "./style/modal.css";
-import { useModalInner as j } from "../modal/hooks/use-modal.mjs";
-import { useNamespace as q } from "../config-provider/hooks/use-namespace.mjs";
-import { useLocale as G } from "../config-provider/hooks/use-locale.mjs";
-const H = ["src", "alt"], ne = /* @__PURE__ */ X({
-  name: "CropperModal",
-  __name: "cropper-modal",
-  props: {
-    circled: { type: Boolean, default: !0 },
-    uploadApi: {
-      type: Function
-    },
-    src: { type: String },
-    size: { type: Number }
-  },
-  emits: ["uploadSuccess", "uploadError", "register"],
-  setup(I, { emit: A }) {
-    const b = I, B = A;
-    let w = "";
-    const i = k(b.src || ""), n = k(""), y = k();
-    let $ = 1, x = 1;
-    const { b: u } = q("cropper-am"), [M, { closeModal: N, setModalProps: R }] = j(), { t: r } = G();
-    function S(o) {
-      if (b.size && o.size > 1024 * 1024 * b.size)
-        return B("uploadError", { msg: r("ap.cropper.imageTooBig") }), !1;
-      const t = new FileReader();
-      return t.readAsDataURL(o), i.value = "", n.value = "", t.onload = function(a) {
-        var v;
-        i.value = ((v = a.target) == null ? void 0 : v.result) ?? "", w = o.name;
-      }, !1;
-    }
-    function U({ imgBase64: o }) {
-      n.value = o;
-    }
-    function E(o) {
-      y.value = o;
-    }
-    function c(o, t) {
-      var a, v;
-      o === "scaleX" && ($ = t = $ === -1 ? 1 : -1), o === "scaleY" && (x = t = x === -1 ? 1 : -1), (v = (a = y == null ? void 0 : y.value) == null ? void 0 : a[o]) == null || v.call(a, t);
-    }
-    async function F() {
-      const o = b.uploadApi;
-      if (o && D(o)) {
-        const t = h(n.value);
-        try {
-          R({ confirmLoading: !0 });
-          const a = await o({ name: "file", file: t, filename: w });
-          B("uploadSuccess", {
-            source: n.value,
-            data: a.url
-          }), N();
-        } finally {
-          R({ confirmLoading: !1 });
-        }
-      }
-    }
-    return (o, t) => (g(), T(e(P), Y(o.$attrs, {
-      onRegister: e(M),
-      title: e(r)("ap.cropper.modalTitle"),
-      width: "800px",
-      canFullscreen: !1,
-      onOk: F,
-      okText: e(r)("ap.cropper.okText")
-    }), {
-      default: s(() => [
-        f("div", {
-          class: m(e(u)())
-        }, [
-          f("div", {
-            class: m(e(u)("left"))
-          }, [
-            f("div", {
-              class: m(e(u)("cropper"))
-            }, [
-              i.value ? (g(), T(_, {
-                key: 0,
-                src: i.value,
-                height: "300px",
-                circled: I.circled,
-                onCropend: U,
-                onReady: E
-              }, null, 8, ["src", "circled"])) : C("", !0)
-            ], 2),
-            f("div", {
-              class: m(e(u)("toolbar"))
-            }, [
-              l(e(O), {
-                fileList: [],
-                accept: "image/*",
-                beforeUpload: S
-              }, {
-                default: s(() => [
-                  l(e(p), {
-                    title: e(r)("ap.cropper.selectImage"),
-                    placement: "bottom"
-                  }, {
-                    default: s(() => [
-                      l(e(d), {
-                        size: "small",
-                        preIcon: "ant-design:upload-outlined",
-                        type: "primary"
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["title"])
-                ]),
-                _: 1
-              }),
-              l(e(V), null, {
-                default: s(() => [
-                  l(e(p), {
-                    title: e(r)("ap.common.resetText"),
-                    placement: "bottom"
-                  }, {
-                    default: s(() => [
-                      l(e(d), {
-                        type: "primary",
-                        preIcon: "ant-design:reload-outlined",
-                        size: "small",
-                        disabled: !i.value,
-                        onClick: t[0] || (t[0] = (a) => c("reset"))
-                      }, null, 8, ["disabled"])
-                    ]),
-                    _: 1
-                  }, 8, ["title"]),
-                  l(e(p), {
-                    title: e(r)("ap.cropper.rotateLeft"),
-                    placement: "bottom"
-                  }, {
-                    default: s(() => [
-                      l(e(d), {
-                        type: "primary",
-                        preIcon: "ant-design:rotate-left-outlined",
-                        size: "small",
-                        disabled: !i.value,
-                        onClick: t[1] || (t[1] = (a) => c("rotate", -45))
-                      }, null, 8, ["disabled"])
-                    ]),
-                    _: 1
-                  }, 8, ["title"]),
-                  l(e(p), {
-                    title: e(r)("ap.cropper.rotateRight"),
-                    placement: "bottom"
-                  }, {
-                    default: s(() => [
-                      l(e(d), {
-                        type: "primary",
-                        preIcon: "ant-design:rotate-right-outlined",
-                        size: "small",
-                        disabled: !i.value,
-                        onClick: t[2] || (t[2] = (a) => c("rotate", 45))
-                      }, null, 8, ["disabled"])
-                    ]),
-                    _: 1
-                  }, 8, ["title"]),
-                  l(e(p), {
-                    title: e(r)("ap.cropper.scaleX"),
-                    placement: "bottom"
-                  }, {
-                    default: s(() => [
-                      l(e(d), {
-                        type: "primary",
-                        preIcon: "vaadin:arrows-long-h",
-                        size: "small",
-                        disabled: !i.value,
-                        onClick: t[3] || (t[3] = (a) => c("scaleX"))
-                      }, null, 8, ["disabled"])
-                    ]),
-                    _: 1
-                  }, 8, ["title"]),
-                  l(e(p), {
-                    title: e(r)("ap.cropper.scaleY"),
-                    placement: "bottom"
-                  }, {
-                    default: s(() => [
-                      l(e(d), {
-                        type: "primary",
-                        preIcon: "vaadin:arrows-long-v",
-                        size: "small",
-                        disabled: !i.value,
-                        onClick: t[4] || (t[4] = (a) => c("scaleY"))
-                      }, null, 8, ["disabled"])
-                    ]),
-                    _: 1
-                  }, 8, ["title"]),
-                  l(e(p), {
-                    title: e(r)("ap.cropper.zoomIn"),
-                    placement: "bottom"
-                  }, {
-                    default: s(() => [
-                      l(e(d), {
-                        type: "primary",
-                        preIcon: "ant-design:zoom-in-outlined",
-                        size: "small",
-                        disabled: !i.value,
-                        onClick: t[5] || (t[5] = (a) => c("zoom", 0.1))
-                      }, null, 8, ["disabled"])
-                    ]),
-                    _: 1
-                  }, 8, ["title"]),
-                  l(e(p), {
-                    title: e(r)("ap.cropper.zoomOut"),
-                    placement: "bottom"
-                  }, {
-                    default: s(() => [
-                      l(e(d), {
-                        type: "primary",
-                        preIcon: "ant-design:zoom-out-outlined",
-                        size: "small",
-                        disabled: !i.value,
-                        onClick: t[6] || (t[6] = (a) => c("zoom", -0.1))
-                      }, null, 8, ["disabled"])
-                    ]),
-                    _: 1
-                  }, 8, ["title"])
-                ]),
-                _: 1
-              })
-            ], 2)
-          ], 2),
-          f("div", {
-            class: m(e(u)("right"))
-          }, [
-            f("div", {
-              class: m(e(u)("preview"))
-            }, [
-              n.value ? (g(), L("img", {
-                key: 0,
-                src: n.value,
-                alt: e(r)("ap.cropper.preview")
-              }, null, 8, H)) : C("", !0)
-            ], 2),
-            n.value ? (g(), L("div", {
-              key: 0,
-              class: m(e(u)("group"))
-            }, [
-              l(e(z), {
-                src: n.value,
-                size: "large"
-              }, null, 8, ["src"]),
-              l(e(z), {
-                src: n.value,
-                size: 48
-              }, null, 8, ["src"]),
-              l(e(z), {
-                src: n.value,
-                size: 64
-              }, null, 8, ["src"]),
-              l(e(z), {
-                src: n.value,
-                size: 80
-              }, null, 8, ["src"])
-            ], 2)) : C("", !0)
-          ], 2)
-        ], 2)
-      ]),
-      _: 1
-    }, 16, ["onRegister", "title", "okText"]));
-  }
-});
+import f from "./cropper-modal.vue2.mjs";
 export {
-  ne as default
+  f as default
 };