@aplus-frontend/ui 7.0.0-beta.0 → 7.0.0-beta.2

package/es/src/ap-upload/style/multiple-file.mjs

@@ -0,0 +1,93 @@
+const a = (t) => {
+  const { componentCls: l } = t, o = `${l}-multiple-file`;
+  return {
+    [o]: {
+      ".multiple-file-context": {
+        display: "flex",
+        alignItems: "center",
+        ".file-btn": {
+          display: "flex",
+          alignItems: "center",
+          padding: "7px 12px",
+          transition: "all 0.3s",
+          border: "1px solid #dee4ed",
+          borderRadius: "4px",
+          color: "#182948",
+          "&:hover": {
+            borderColor: "#0070ff",
+            color: "#0070ff"
+          }
+        },
+        ".sub-title": {
+          paddingLeft: "16px",
+          color: "#8896b0",
+          fontSize: t.fontSize
+        }
+      },
+      ".ant-upload-wrapper .ant-upload-list .ant-upload-list-item:hover": {
+        backgroundColor: "rgb(245 249 250)",
+        ".ant-upload-list-item-actions .ant-upload-list-item-action:focus": {
+          opacity: 1
+        }
+      },
+      ".ant-upload-list-item-actions": {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0
+      },
+      ".ant-upload-wrapper .ant-upload-list .ant-upload-list-item .ant-upload-list-item-actions .ant-upload-list-item-action:focus": {
+        opacity: 0
+      },
+      ".ant-upload-text-icon": {
+        color: "#abb7cc"
+      },
+      ".ant-upload-wrapper .ant-upload-list .ant-upload-list-item-error": {
+        ".ant-upload-list-item-name": {
+          color: "#ff4d4f"
+        },
+        ".ant-upload-icon .anticon": {
+          color: "#ff4d4f"
+        },
+        ".ant-upload-text-icon": {
+          color: "#ff4d4f"
+        }
+      },
+      ".ant-upload-list-item-done": {
+        color: "#0070ff"
+      },
+      ".ant-upload-list-item-undefined": {
+        color: "#0070ff"
+      }
+    },
+    [`${o}-admin`]: {
+      ".multiple-file-context": {
+        ".file-btn": {
+          border: "1px solid #d9d9d9",
+          color: "#333333",
+          "&:hover": {
+            borderColor: "#34b77c",
+            color: "#34b77c"
+          }
+        },
+        ".sub-title": {
+          color: "#999"
+        }
+      },
+      ".ant-upload-wrapper .ant-upload-list .ant-upload-list-item:hover": {
+        background: "#fafafa"
+      },
+      ".ant-upload-text-icon": {
+        color: "#bfbfbf"
+      },
+      ".ant-upload-list-item-done": {
+        color: "#1890ff"
+      },
+      ".ant-upload-list-item-undefined": {
+        color: "#1890ff"
+      }
+    }
+  };
+};
+export {
+  a as multipleFileStyle
+};

package/es/src/ap-upload/style/picture.d.ts

@@ -0,0 +1,2 @@
+import { BaseToken, GenStyleFunc } from '../../design-token/interface';
+export declare const pictureStyle: GenStyleFunc<BaseToken>;

package/es/src/ap-upload/style/picture.mjs

@@ -0,0 +1,120 @@
+const i = (e) => {
+  const { componentCls: o } = e, t = `${o}-picture`;
+  return {
+    [t]: {
+      ".picture-context": {
+        display: "grid",
+        gap: "16px",
+        gridTemplateColumns: "repeat(auto-fill, 100px)",
+        userSelect: "none",
+        ".picture-upload": {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100px",
+          overflow: "hidden",
+          transition: "all 0.2s",
+          border: "1px dashed #dee4ed",
+          borderRadius: "4px",
+          background: "#f2f6f9",
+          color: "#abb7cc",
+          fontSize: "16px",
+          cursor: "pointer",
+          aspectRatio: "1 / 1",
+          "& > * + *": { marginTop: "4px", fontSize: e.fontSize },
+          "&:hover": {
+            border: "1px dashed #0070ff"
+          }
+        },
+        ".picture-item": {
+          width: "100px",
+          padding: "8px",
+          overflow: "hidden",
+          border: "1px solid #dee4ed",
+          borderRadius: "4px",
+          background: "#fff",
+          aspectRatio: "1 / 1",
+          ".picture-item-box": {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            borderRadius: "2px",
+            "& > img": {
+              width: "100%",
+              height: "100%",
+              borderRadius: "2px",
+              objectFit: "cover"
+            },
+            "&:hover > .picture-item-shadow": {
+              display: "block !important"
+            },
+            ".picture-item-shadow": {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              borderRadius: "2px",
+              background: "rgb(0 0 0 / 50%)",
+              color: "#fff",
+              fontSize: e.fontSize,
+              ".picture-item-close": {
+                display: "flex",
+                position: "absolute",
+                top: 0,
+                right: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                width: "16px",
+                overflow: "hidden",
+                transform: "translate(30%, -30%)",
+                border: "1px solid #fff",
+                borderRadius: "50%",
+                background: "#ff4d4f",
+                color: "#fff",
+                fontSize: "10px",
+                cursor: "pointer",
+                aspectRatio: "1 / 1"
+              },
+              ".picture-item-uploading": {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                width: "84%",
+                transform: "translate(-50%, -50%)",
+                textAlign: "center"
+              }
+            }
+          }
+        }
+      },
+      ".picture-title": {
+        marginTop: "8px",
+        color: "#8896b0",
+        fontSize: "12px"
+      }
+    },
+    [`${t}-admin`]: {
+      ".picture-context": {
+        ".picture-upload": {
+          border: "1px dashed #d9d9d9",
+          background: "#fafafa",
+          color: "#bfbfbf",
+          "&:hover": {
+            border: "1px dashed #34b77c"
+          }
+        },
+        ".picture-item": {
+          border: "1px solid #d9d9d9"
+        }
+      },
+      ".picture-title": {
+        color: "#999"
+      }
+    }
+  };
+};
+export {
+  i as pictureStyle
+};

package/es/src/ap-upload/style/single-file.d.ts

@@ -0,0 +1,2 @@
+import { BaseToken, GenStyleFunc } from '../../design-token/interface';
+export declare const singleFileStyle: GenStyleFunc<BaseToken>;

package/es/src/ap-upload/style/single-file.mjs

@@ -0,0 +1,108 @@
+const n = (e) => {
+  const { componentCls: i } = e, t = `${i}-single-file`;
+  return {
+    [t]: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "200px",
+      overflow: "hidden",
+      transition: "all 0.3s",
+      border: "1px dashed #dee4ed",
+      borderRadius: "4px",
+      background: "#f2f6f9",
+      userSelect: "none",
+      "& > div": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      ".state-un": {
+        flexDirection: "column",
+        ".state-un-icon": {
+          display: "block",
+          width: "56px"
+        },
+        ".state-un-title": {
+          marginTop: "10px",
+          color: "#182948",
+          fontSize: e.fontSizeLG,
+          lineHeight: e.lineHeightLG
+        },
+        ".state-un-subtitle": {
+          marginTop: "4px",
+          color: "#abb7cc",
+          fontSize: "12px",
+          lineHeight: "18px"
+        }
+      },
+      ".state-ing": {
+        display: "flex",
+        alignItems: "center",
+        width: "min(516px, 77.24%)",
+        height: "96px",
+        padding: "0 24px",
+        borderRadius: "4px",
+        background: "#fff",
+        ".left": {
+          flexShrink: 0,
+          width: "48px",
+          marginRight: "16px",
+          img: {
+            display: "block",
+            width: "100%"
+          }
+        },
+        ".center": {
+          flex: 1,
+          ".center-title": {
+            display: "-webkit-box",
+            overflow: "hidden",
+            fontSize: "14px",
+            textAlign: "start",
+            textOverflow: "ellipsis",
+            wordWrap: "break-word",
+            wordBreak: "break-all",
+            WebkitBoxOrient: "vertical",
+            WebkitLineClamp: 2
+          },
+          ".center-progress ": {
+            ".ant-progress-line": {
+              marginRight: 0,
+              marginBottom: 0
+            }
+          }
+        },
+        ".right": {
+          flexShrink: 0,
+          marginLeft: "24px",
+          color: "#ff4d4f",
+          fontSize: "20px",
+          cursor: "pointer !important"
+        }
+      }
+    },
+    [`${t}-un`]: {
+      cursor: "pointer",
+      "&:hover": {
+        border: "1px dashed #0070ff",
+        background: "rgb(0 112 255 / 10%)"
+      }
+    },
+    [`${t}-admin`]: {
+      border: "1px dashed #D9D9D9",
+      ".state-un": {
+        ".state-un-title": {
+          color: "#333"
+        },
+        ".state-un-subtitle": {
+          color: "#BFBFBF"
+        }
+      }
+    }
+  };
+};
+export {
+  n as singleFileStyle
+};

package/es/src/business/ag-grid-modal/modal-layout/index.vue2.mjs

@@ -1,11 +1,12 @@
-import { defineComponent as N, computed as I, createElementBlock as p, renderSlot as a, openBlock as n, normalizeStyle as g, normalizeClass as o, unref as e, createElementVNode as i, createBlock as v, createCommentVNode as h, withCtx as s, resolveDynamicComponent as M, h as O, Fragment as b, createVNode as m, createTextVNode as S, toDisplayString as T, renderList as V } from "vue";
+import { defineComponent as I, computed as M, createElementBlock as m, renderSlot as a, openBlock as n, normalizeStyle as g, normalizeClass as o, unref as e, createElementVNode as s, createBlock as v, createCommentVNode as h, withCtx as i, resolveDynamicComponent as O, h as V, Fragment as b, createVNode as p, createTextVNode as S, toDisplayString as T, renderList as w } from "vue";
 import "../../../config-provider/index.mjs";
 import { ApTitle as k } from "../../ap-title/index.mjs";
-import { Button as w, Empty as C } from "@aplus-frontend/antdv";
-import { useAgGridModalInject as L } from "../hooks/use-ag-grid-instance.mjs";
-import { useLocale as j } from "../../../config-provider/hooks/use-locale.mjs";
-import { useNamespace as x } from "../../../config-provider/hooks/use-namespace.mjs";
-const H = /* @__PURE__ */ N({
+import { Button as L, Empty as C } from "@aplus-frontend/antdv";
+import { useAgGridModalInject as j } from "../hooks/use-ag-grid-instance.mjs";
+import x from "../style/index.mjs";
+import { useLocale as D } from "../../../config-provider/hooks/use-locale.mjs";
+import { useNamespace as z } from "../../../config-provider/hooks/use-namespace.mjs";
+const Q = /* @__PURE__ */ I({
   __name: "index",
   props: {
     leftTitle: { type: [String, Object, Number, Boolean, null, Array], default: "" },
@@ -15,7 +16,7 @@ const H = /* @__PURE__ */ N({
     layoutType: { default: void 0 }
   },
   setup(B) {
-    const { t: f } = j(), d = L(), r = I(() => d?.selectedRows?.value || []), y = B, E = () => {
+    const { t: f } = D(), d = j(), r = M(() => d?.selectedRows?.value || []), y = B, E = () => {
       if (y.dividerOffset != null)
         return {
           "--ag-grid-modal-layout-divider-offset": `${y.dividerOffset}px`
@@ -24,49 +25,49 @@ const H = /* @__PURE__ */ N({
       d?.clearAllSelected();
     }, u = (t) => {
       d?.removeSelected(t);
-    }, { e: A, m: l } = x("ag-grid-modal");
-    return (t, D) => t.layoutType === "two-column" ? (n(), p("div", {
+    }, { e: A, m: l } = z("ag-grid-modal"), N = x("ag-grid-modal");
+    return (t, G) => t.layoutType === "two-column" ? (n(), m("div", {
       key: 0,
-      class: o([e(l)("table-layout"), t.bordered ? e(l)("bordered") : ""]),
+      class: o([e(l)("table-layout"), t.bordered ? e(l)("bordered") : "", e(N)]),
       style: g(E())
     }, [
-      i("div", {
+      s("div", {
         class: o(e(l)("table-layout-left"))
       }, [
         t.leftTitle ? (n(), v(e(k), {
           key: 0,
           style: { "margin-bottom": "16px" }
         }, {
-          prefix: s(() => [
-            (n(), v(M(O(b, [t.leftTitle]))))
+          prefix: i(() => [
+            (n(), v(O(V(b, [t.leftTitle]))))
           ]),
           _: 1
         })) : h("", !0),
-        i("div", {
+        s("div", {
           class: o(e(l)("table-layout-left-content"))
         }, [
           a(t.$slots, "default")
         ], 2)
       ], 2),
-      i("div", {
+      s("div", {
         class: o(e(l)("table-layout-right")),
         style: g(t.rightContentStyle)
       }, [
-        m(e(k), null, {
-          prefix: s(() => [
+        p(e(k), null, {
+          prefix: i(() => [
             a(t.$slots, "rightTitle", {
               count: r.value.length
             }, () => [
               S(T(`${e(f)("ap.apTableModal.selected")} (${r.value.length})`), 1)
             ])
           ]),
-          suffix: s(() => [
-            m(e(w), {
+          suffix: i(() => [
+            p(e(L), {
               type: "link",
               style: { padding: "0px", height: "22px", "border-width": "0px" },
               onClick: $
             }, {
-              default: s(() => [
+              default: i(() => [
                 S(T(e(f)("ap.apTableModal.clear")), 1)
               ]),
               _: 1
@@ -74,24 +75,24 @@ const H = /* @__PURE__ */ N({
           ]),
           _: 3
         }),
-        i("div", {
+        s("div", {
           class: o(e(l)("table-layout-right-content"))
         }, [
-          (n(!0), p(b, null, V(r.value, (c) => a(t.$slots, "renderSelectedItem", {
+          (n(!0), m(b, null, w(r.value, (c) => a(t.$slots, "renderSelectedItem", {
             key: c,
             record: c,
             actions: { deleteItem: u, deleteCurrent: () => u(c) }
           })), 128)),
-          r.value.length === 0 ? (n(), p("div", {
+          r.value.length === 0 ? (n(), m("div", {
             key: 0,
             class: o(e(A)("empty"))
           }, [
-            m(e(C), {
+            p(e(C), {
               image: e(C).PRESENTED_IMAGE_SIMPLE
             }, null, 8, ["image"])
           ], 2)) : h("", !0)
         ], 2),
-        i("div", null, [
+        s("div", null, [
           a(t.$slots, "rightBottom", {
             records: r.value,
             actions: { deleteItem: u }
@@ -102,5 +103,5 @@ const H = /* @__PURE__ */ N({
   }
 });
 export {
-  H as default
+  Q as default
 };

package/es/src/business/ag-grid-modal/selected-items/default.vue2.mjs

@@ -1,33 +1,34 @@
-import { defineComponent as c, createElementBlock as i, openBlock as m, normalizeClass as l, unref as e, normalizeStyle as p, createElementVNode as n, renderSlot as d, createVNode as f } from "vue";
-import { IconApAdLineCloseDrawer as u } from "@aplus-frontend/icon";
+import { defineComponent as m, createElementBlock as p, openBlock as d, normalizeClass as l, unref as e, normalizeStyle as f, createElementVNode as s, renderSlot as u, createVNode as y } from "vue";
+import { IconApAdLineCloseDrawer as k } from "@aplus-frontend/icon";
 import "../../../config-provider/index.mjs";
-import { useNamespace as k } from "../../../config-provider/hooks/use-namespace.mjs";
-const N = /* @__PURE__ */ c({
+import _ from "../style/selected-items.mjs";
+import { useNamespace as C } from "../../../config-provider/hooks/use-namespace.mjs";
+const v = /* @__PURE__ */ m({
   __name: "default",
   props: {
     style: { type: [Boolean, null, String, Object, Array] }
   },
   emits: ["clickDel"],
-  setup(y, { emit: s }) {
-    const { e: t } = k("ap-selected-items"), r = s, a = () => r("clickDel");
-    return (o, _) => (m(), i("div", {
-      style: p(o.style),
-      class: l(e(t)("default"))
+  setup(h, { emit: n }) {
+    const { e: t, b: r } = C("ap-selected-items"), a = _("ap-selected-items"), c = n, i = () => c("clickDel");
+    return (o, S) => (d(), p("div", {
+      style: f(o.style),
+      class: l([e(r)(), e(t)("default"), e(a)])
     }, [
-      n("div", {
+      s("div", {
         class: l(e(t)("default-content"))
       }, [
-        d(o.$slots, "default")
+        u(o.$slots, "default")
       ], 2),
-      n("span", {
+      s("span", {
         class: l(e(t)("del-icon")),
-        onClick: a
+        onClick: i
       }, [
-        f(e(u))
+        y(e(k))
       ], 2)
     ], 6));
   }
 });
 export {
-  N as default
+  v as default
 };

package/es/src/business/ag-grid-modal/style/index.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ag-grid-modal/style/index.mjs

@@ -0,0 +1,61 @@
+import { genComponentStyleHook as i } from "../../../utils/cssinjs/index.mjs";
+const l = (o) => {
+  const { componentCls: t } = o, e = `${t}--table-layout`;
+  return {
+    [`${t}--bordered`]: {
+      border: `1px solid ${o.colorBg1}`,
+      padding: "16px",
+      borderRadius: o.borderRadius,
+      "--ag-grid-modal-layout-divider-offset": "32px"
+    },
+    [e]: {
+      boxSizing: "border-box",
+      display: "flex",
+      flex: 1,
+      justifyContent: "space-between",
+      height: "100%",
+      [`${e}-left`]: {
+        flex: 1,
+        minWidth: 0,
+        paddingInlineEnd: "20px",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        "&-content": {
+          flex: 1
+        }
+      },
+      [`${e}-right`]: {
+        maxHeight: "100%",
+        width: "410px",
+        paddingInlineStart: "20px",
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        "&-content": {
+          flexGrow: 1,
+          height: 0,
+          overflowY: "hidden",
+          paddingTop: "8px",
+          "&:hover": {
+            overflowY: "auto"
+          }
+        },
+        "&::before": {
+          content: '""',
+          height: "calc(100% + var(--ag-grid-modal-layout-divider-offset,16px))",
+          width: "1px",
+          backgroundColor: o.colorBg1,
+          position: "absolute",
+          left: 0,
+          top: "-16px"
+        }
+      }
+    }
+  };
+}, n = i("ApTableModal", (o) => [
+  l(o)
+]);
+export {
+  n as default
+};

package/es/src/business/ag-grid-modal/style/selected-items.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/es/src/business/ag-grid-modal/style/selected-items.mjs

@@ -0,0 +1,39 @@
+import { genComponentStyleHook as n } from "../../../utils/cssinjs/index.mjs";
+const r = (e) => {
+  const { componentCls: o } = e, t = `${o}__del-icon`;
+  return {
+    [o]: {
+      "&__default": {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "8px",
+        gap: "16px",
+        borderRadius: "4px",
+        "&:hover": {
+          backgroundColor: e.colorBg2,
+          [t]: {
+            opacity: 1
+          }
+        },
+        [`${o}__default-content`]: {
+          width: 0,
+          flexGrow: 1
+        }
+      },
+      [`${o}__del-icon`]: {
+        fontSize: e.fontSizeLG,
+        cursor: "pointer",
+        opacity: 0,
+        "&:hover": {
+          color: e.colorError
+        }
+      }
+    }
+  };
+}, c = n("ApSelectedItems", (e) => [
+  r(e)
+]);
+export {
+  c as default
+};