@aplus-frontend/ui 0.0.1-beta.6 → 0.0.1-beta.8

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.d.ts

@@ -4,14 +4,14 @@ import { ButtonProps } from '..';
 export * from './interface';
 export declare const CropperImage: {
     new (...args: any[]): CreateComponentPublicInstance<Readonly< ExtractPropTypes<{
-        options: {
-            type: PropType<CropperOptions>;
-            default: () => {};
-        };
         height: {
             type: PropType<string | number>;
             default: string;
         };
+        options: {
+            type: PropType<CropperOptions>;
+            default: () => {};
+        };
         imageStyle: {
             type: PropType<CSSProperties>;
             default: () => {};
@@ -44,14 +44,14 @@ export declare const CropperImage: {
         ready: (...args: any[]) => void;
         cropendError: (...args: any[]) => void;
     }, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly< ExtractPropTypes<{
-        options: {
-            type: PropType<CropperOptions>;
-            default: () => {};
-        };
         height: {
             type: PropType<string | number>;
             default: string;
         };
+        options: {
+            type: PropType<CropperOptions>;
+            default: () => {};
+        };
         imageStyle: {
             type: PropType<CSSProperties>;
             default: () => {};
@@ -80,8 +80,8 @@ export declare const CropperImage: {
         onReady?: ((...args: any[]) => any) | undefined;
         onCropendError?: ((...args: any[]) => any) | undefined;
     }, {
-        options: CropperOptions;
         height: string | number;
+        options: CropperOptions;
         imageStyle: CSSProperties;
         circled: boolean;
         realTimePreview: boolean;
@@ -94,14 +94,14 @@ export declare const CropperImage: {
         M: {};
         Defaults: {};
     }, Readonly< ExtractPropTypes<{
-        options: {
-            type: PropType<CropperOptions>;
-            default: () => {};
-        };
         height: {
             type: PropType<string | number>;
             default: string;
         };
+        options: {
+            type: PropType<CropperOptions>;
+            default: () => {};
+        };
         imageStyle: {
             type: PropType<CSSProperties>;
             default: () => {};
@@ -130,8 +130,8 @@ export declare const CropperImage: {
         onReady?: ((...args: any[]) => any) | undefined;
         onCropendError?: ((...args: any[]) => any) | undefined;
     }, {}, {}, {}, {}, {
-        options: CropperOptions;
         height: string | number;
+        options: CropperOptions;
         imageStyle: CSSProperties;
         circled: boolean;
         realTimePreview: boolean;
@@ -141,14 +141,14 @@ export declare const CropperImage: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & ComponentOptionsBase<Readonly< ExtractPropTypes<{
-    options: {
-        type: PropType<CropperOptions>;
-        default: () => {};
-    };
     height: {
         type: PropType<string | number>;
         default: string;
     };
+    options: {
+        type: PropType<CropperOptions>;
+        default: () => {};
+    };
     imageStyle: {
         type: PropType<CSSProperties>;
         default: () => {};
@@ -181,8 +181,8 @@ export declare const CropperImage: {
     ready: (...args: any[]) => void;
     cropendError: (...args: any[]) => void;
 }, string, {
-    options: CropperOptions;
     height: string | number;
+    options: CropperOptions;
     imageStyle: CSSProperties;
     circled: boolean;
     realTimePreview: boolean;
@@ -194,16 +194,16 @@ export declare const CropperImage: {
 });
 export declare const CropperAvatar: {
     new (...args: any[]): CreateComponentPublicInstance<Readonly< ExtractPropTypes<{
-        value: {
-            type: PropType<string>;
+        width: {
+            type: PropType<string | number>;
+            default: string;
         };
         size: {
             type: PropType<number>;
             default: number;
         };
-        width: {
-            type: PropType<string | number>;
-            default: string;
+        value: {
+            type: PropType<string>;
         };
         uploadApi: {
             type: PropType<({ file, name }: {
@@ -232,16 +232,16 @@ export declare const CropperAvatar: {
         change: (...args: any[]) => void;
         "update:value": (...args: any[]) => void;
     }, VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly< ExtractPropTypes<{
-        value: {
-            type: PropType<string>;
+        width: {
+            type: PropType<string | number>;
+            default: string;
         };
         size: {
             type: PropType<number>;
             default: number;
         };
-        width: {
-            type: PropType<string | number>;
-            default: string;
+        value: {
+            type: PropType<string>;
         };
         uploadApi: {
             type: PropType<({ file, name }: {
@@ -264,8 +264,8 @@ export declare const CropperAvatar: {
         onChange?: ((...args: any[]) => any) | undefined;
         "onUpdate:value"?: ((...args: any[]) => any) | undefined;
     }, {
-        size: number;
         width: string | number;
+        size: number;
         showBtn: boolean;
         btnText: string;
     }, true, {}, {}, {
@@ -276,16 +276,16 @@ export declare const CropperAvatar: {
         M: {};
         Defaults: {};
     }, Readonly< ExtractPropTypes<{
-        value: {
-            type: PropType<string>;
+        width: {
+            type: PropType<string | number>;
+            default: string;
         };
         size: {
             type: PropType<number>;
             default: number;
         };
-        width: {
-            type: PropType<string | number>;
-            default: string;
+        value: {
+            type: PropType<string>;
         };
         uploadApi: {
             type: PropType<({ file, name }: {
@@ -311,8 +311,8 @@ export declare const CropperAvatar: {
         openModal: (data?: unknown, openOnSet?: boolean | undefined) => void;
         closeModal: () => void;
     }, {}, {}, {}, {
-        size: number;
         width: string | number;
+        size: number;
         showBtn: boolean;
         btnText: string;
     }>;
@@ -320,16 +320,16 @@ export declare const CropperAvatar: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & ComponentOptionsBase<Readonly< ExtractPropTypes<{
-    value: {
-        type: PropType<string>;
+    width: {
+        type: PropType<string | number>;
+        default: string;
     };
     size: {
         type: PropType<number>;
         default: number;
     };
-    width: {
-        type: PropType<string | number>;
-        default: string;
+    value: {
+        type: PropType<string>;
     };
     uploadApi: {
         type: PropType<({ file, name }: {
@@ -358,8 +358,8 @@ export declare const CropperAvatar: {
     change: (...args: any[]) => void;
     "update:value": (...args: any[]) => void;
 }, string, {
-    size: number;
     width: string | number;
+    size: number;
     showBtn: boolean;
     btnText: string;
 }, {}, string, {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps & Plugin<any[]> & (new (...args: any[]) => {

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/description/description.vue.d.ts

@@ -85,9 +85,9 @@ declare const _default: DefineComponent<{
 }>> & {
     onRegister?: ((...args: any[]) => any) | undefined;
 }, {
+    title: string;
     size: string;
     bordered: boolean;
-    title: string;
     column: number | Record<string, any>;
     schema: DescItem[];
     useCollapse: boolean;

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
 };