@aplus-frontend/ui 0.0.1-beta.2 → 0.0.1-beta.21

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

@@ -1,4 +1,273 @@
-import f from "./cropper-modal.vue.mjs";
+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 "./cropper-image.vue.mjs";
+import { Upload as _, Tooltip as p, Space as O, Avatar as z } from "ant-design-vue";
+import { BaseButton as d } from "../base-button/index.mjs";
+import { BaseModal as V } from "../modal/index.mjs";
+import { dataURLtoBlob as P } from "@aplus-frontend/utils";
+import "../config-provider/index.mjs";
+import { isFunction as h } from "@fruits-chain/utils";
+import "./style/modal.css";
+import { useNamespace as D } from "../config-provider/hooks/use-namespace.mjs";
+import { useModalInner as j } from "../modal/hooks/use-modal.mjs";
+import { useLocale as q } from "../config-provider/hooks/use-locale.mjs";
+import G from "./cropper-image.vue2.mjs";
+const H = ["src", "alt"], se = /* @__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 } = D("cropper-am"), [M, { closeModal: N, setModalProps: R }] = j(), { t: r } = q();
+    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 && h(o)) {
+        const t = P(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(V), 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(G, {
+                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(_), {
+                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(O), 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"]));
+  }
+});
 export {
-  f as default
+  se as default
 };

package/es/src/cropper/index.mjs

@@ -1,8 +1,11 @@
 import { withInstall as r } from "@aplus-frontend/utils";
-import o from "./cropper-image.vue.mjs";
-import m from "./cropper-avatar.vue.mjs";
-const i = r(o), f = r(m);
+import "./cropper-image.vue.mjs";
+import "./cropper-avatar.vue.mjs";
+import "./interface.mjs";
+import o from "./cropper-image.vue2.mjs";
+import m from "./cropper-avatar.vue2.mjs";
+const s = r(o), c = r(m);
 export {
-  f as CropperAvatar,
-  i as CropperImage
+  c as CropperAvatar,
+  s as CropperImage
 };

package/es/src/cropper/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/cropper/style/avatar.css

@@ -4,7 +4,7 @@
 }
 .aplus-cropper-avatar-image-wrapper {
   overflow: hidden;
-  border: 1px solid #eee;
+  border: 1px solid #dee4ed;
   border-radius: 50%;
   background: #fff;
   cursor: pointer;

package/es/src/cropper/style/modal.css

@@ -30,7 +30,7 @@
   height: 220px;
   margin: 0 auto;
   overflow: hidden;
-  border: 1px solid #eee;
+  border: 1px solid #dee4ed;
   border-radius: 50%;
 }
 .aplus-cropper-am-preview img {
@@ -43,5 +43,5 @@
   justify-content: space-around;
   margin-top: 8px;
   padding-top: 8px;
-  border-top: 1px solid #eee;
+  border-top: 1px solid #dee4ed;
 }

package/es/src/description/description.vue.d.ts

@@ -21,7 +21,7 @@ declare const _default: DefineComponent<{
         default: boolean;
     };
     column: {
-        type: (ObjectConstructor | NumberConstructor)[];
+        type: (NumberConstructor | ObjectConstructor)[];
         default: () => {
             xxl: number;
             xl: number;
@@ -61,7 +61,7 @@ declare const _default: DefineComponent<{
         default: boolean;
     };
     column: {
-        type: (ObjectConstructor | NumberConstructor)[];
+        type: (NumberConstructor | ObjectConstructor)[];
         default: () => {
             xxl: number;
             xl: number;
@@ -85,10 +85,10 @@ declare const _default: DefineComponent<{
 }>> & {
     onRegister?: ((...args: any[]) => any) | undefined;
 }, {
-    size: string;
     title: string;
-    bordered: boolean;
+    size: string;
     column: number | Record<string, any>;
+    bordered: boolean;
     schema: DescItem[];
     useCollapse: boolean;
     collapseOptions: CollapseContainerOptions;

package/es/src/description/description.vue.mjs

@@ -1,171 +1,4 @@
-import { defineComponent as B, ref as F, computed as a, unref as e, createVNode as i, mergeProps as I, isVNode as R, toRefs as V } from "vue";
-import { CollapseContainer as $ } from "../container/index.mjs";
-import { useAttrs as k } from "@aplus-frontend/hooks";
-import { Descriptions as C } from "ant-design-vue";
-import { get as z } from "lodash-unified";
-import { isFunction as y } from "@fruits-chain/utils";
-import "../config-provider/index.mjs";
-import { useNamespace as L } from "../config-provider/hooks/use-namespace.mjs";
-function q(n) {
-  return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !R(n);
-}
-const G = {
-  useCollapse: {
-    type: Boolean,
-    default: !0
-  },
-  title: {
-    type: String,
-    default: ""
-  },
-  size: {
-    type: String,
-    validator: (n) => ["small", "default", "middle", void 0].includes(n),
-    default: "small"
-  },
-  bordered: {
-    type: Boolean,
-    default: !0
-  },
-  column: {
-    type: [Number, Object],
-    default: () => ({
-      xxl: 4,
-      xl: 3,
-      lg: 3,
-      md: 3,
-      sm: 2,
-      xs: 1
-    })
-  },
-  collapseOptions: {
-    type: Object,
-    default: null
-  },
-  schema: {
-    type: Array,
-    default: () => []
-  },
-  data: {
-    type: Object
-  }
-}, tt = /* @__PURE__ */ B({
-  name: "ApDescription",
-  props: G,
-  emits: ["register"],
-  setup(n, {
-    slots: O,
-    emit: j
-  }) {
-    const u = F(null), {
-      b: P
-    } = L("description"), v = k(), p = a(() => ({
-      ...n,
-      ...e(u)
-    })), c = a(() => ({
-      ...e(p),
-      title: void 0
-    })), D = a(() => !!e(p).title), _ = a(() => ({
-      // Cannot be expanded by default
-      canExpand: !1,
-      ...e(c).collapseOptions
-    })), N = a(() => ({
-      ...e(v),
-      ...e(c)
-    }));
-    function S(t) {
-      u.value = {
-        ...e(u),
-        ...t
-      };
-    }
-    function w({
-      label: t,
-      labelMinWidth: l,
-      labelStyle: r
-    }) {
-      if (!r && !l)
-        return t;
-      const o = {
-        ...r,
-        minWidth: `${l}px `
-      };
-      return i("div", {
-        style: o
-      }, [t]);
-    }
-    function A() {
-      const {
-        schema: t,
-        data: l
-      } = e(c);
-      return e(t).map((r) => {
-        const {
-          render: o,
-          field: f,
-          span: M,
-          show: m,
-          contentMinWidth: h
-        } = r;
-        if (m && y(m) && !m(l))
-          return null;
-        const x = () => {
-          var b;
-          const s = (b = e(c)) == null ? void 0 : b.data;
-          if (!s)
-            return null;
-          const g = z(s, f);
-          return g && !V(s).hasOwnProperty(f) ? y(o) ? o("", s) : "" : y(o) ? o(g, s) : g ?? "";
-        }, W = h;
-        return i(C.Item, {
-          label: w(r),
-          key: f,
-          span: M
-        }, {
-          default: () => {
-            if (!h)
-              return x();
-            const s = {
-              minWidth: `${W}px`
-            };
-            return i("div", {
-              style: s
-            }, [x()]);
-          }
-        });
-      }).filter((r) => !!r);
-    }
-    const d = () => {
-      let t;
-      return i(C, I({
-        class: P()
-      }, e(N)), q(t = A()) ? t : {
-        default: () => [t]
-      });
-    }, E = () => {
-      const t = n.useCollapse ? d() : i("div", null, [d()]);
-      if (!n.useCollapse)
-        return t;
-      const {
-        canExpand: l,
-        helpMessage: r
-      } = e(_), {
-        title: o
-      } = e(p);
-      return i($, {
-        title: o,
-        canExpand: l,
-        helpMessage: r
-      }, {
-        default: () => t,
-        action: O.action
-      });
-    };
-    return j("register", {
-      setDescProps: S
-    }), () => e(D) ? E() : d();
-  }
-});
+import f from "./description.vue2.mjs";
 export {
-  tt as default
+  f as default
 };

package/es/src/description/description.vue2.mjs

@@ -1,4 +1,171 @@
-import f from "./description.vue.mjs";
+import { isVNode as B, defineComponent as F, ref as I, computed as a, unref as e, createVNode as i, toRefs as R, mergeProps as V } from "vue";
+import { CollapseContainer as $ } from "../container/index.mjs";
+import { useAttrs as k } from "@aplus-frontend/hooks";
+import { Descriptions as C } from "ant-design-vue";
+import { get as z } from "lodash-unified";
+import { isFunction as y } from "@fruits-chain/utils";
+import "../config-provider/index.mjs";
+import { useNamespace as L } from "../config-provider/hooks/use-namespace.mjs";
+function q(n) {
+  return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !B(n);
+}
+const G = {
+  useCollapse: {
+    type: Boolean,
+    default: !0
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: String,
+    validator: (n) => ["small", "default", "middle", void 0].includes(n),
+    default: "small"
+  },
+  bordered: {
+    type: Boolean,
+    default: !0
+  },
+  column: {
+    type: [Number, Object],
+    default: () => ({
+      xxl: 4,
+      xl: 3,
+      lg: 3,
+      md: 3,
+      sm: 2,
+      xs: 1
+    })
+  },
+  collapseOptions: {
+    type: Object,
+    default: null
+  },
+  schema: {
+    type: Array,
+    default: () => []
+  },
+  data: {
+    type: Object
+  }
+}, tt = /* @__PURE__ */ F({
+  name: "ApDescription",
+  props: G,
+  emits: ["register"],
+  setup(n, {
+    slots: O,
+    emit: j
+  }) {
+    const u = I(null), {
+      b: P
+    } = L("description"), v = k(), p = a(() => ({
+      ...n,
+      ...e(u)
+    })), c = a(() => ({
+      ...e(p),
+      title: void 0
+    })), D = a(() => !!e(p).title), _ = a(() => ({
+      // Cannot be expanded by default
+      canExpand: !1,
+      ...e(c).collapseOptions
+    })), N = a(() => ({
+      ...e(v),
+      ...e(c)
+    }));
+    function S(t) {
+      u.value = {
+        ...e(u),
+        ...t
+      };
+    }
+    function w({
+      label: t,
+      labelMinWidth: l,
+      labelStyle: r
+    }) {
+      if (!r && !l)
+        return t;
+      const o = {
+        ...r,
+        minWidth: `${l}px `
+      };
+      return i("div", {
+        style: o
+      }, [t]);
+    }
+    function A() {
+      const {
+        schema: t,
+        data: l
+      } = e(c);
+      return e(t).map((r) => {
+        const {
+          render: o,
+          field: f,
+          span: M,
+          show: m,
+          contentMinWidth: h
+        } = r;
+        if (m && y(m) && !m(l))
+          return null;
+        const x = () => {
+          var b;
+          const s = (b = e(c)) == null ? void 0 : b.data;
+          if (!s)
+            return null;
+          const g = z(s, f);
+          return g && !R(s).hasOwnProperty(f) ? y(o) ? o("", s) : "" : y(o) ? o(g, s) : g ?? "";
+        }, W = h;
+        return i(C.Item, {
+          label: w(r),
+          key: f,
+          span: M
+        }, {
+          default: () => {
+            if (!h)
+              return x();
+            const s = {
+              minWidth: `${W}px`
+            };
+            return i("div", {
+              style: s
+            }, [x()]);
+          }
+        });
+      }).filter((r) => !!r);
+    }
+    const d = () => {
+      let t;
+      return i(C, V({
+        class: P()
+      }, e(N)), q(t = A()) ? t : {
+        default: () => [t]
+      });
+    }, E = () => {
+      const t = n.useCollapse ? d() : i("div", null, [d()]);
+      if (!n.useCollapse)
+        return t;
+      const {
+        canExpand: l,
+        helpMessage: r
+      } = e(_), {
+        title: o
+      } = e(p);
+      return i($, {
+        title: o,
+        canExpand: l,
+        helpMessage: r
+      }, {
+        default: () => t,
+        action: O.action
+      });
+    };
+    return j("register", {
+      setDescProps: S
+    }), () => e(D) ? E() : d();
+  }
+});
 export {
-  f as default
+  tt as default
 };