@aplus-frontend/ui 7.6.0 → 7.7.0

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

@@ -1,17 +1,17 @@
-const t = (e) => {
-  const { componentCls: i } = e, r = `${i}-single-file`;
+const l = (i) => {
+  const { componentCls: r } = i, e = `${r}-single-file`;
   return {
-    [r]: {
+    [e]: {
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       width: "100%",
-      height: "200px",
+      height: i.apUploadSingleFileContainerHeight,
       overflow: "hidden",
-      transition: "all 0.3s",
-      border: `1px dashed ${e.borderColorBase}`,
-      borderRadius: "4px",
-      background: "#f2f6f9",
+      transition: `all ${i.motionDurationSlow}`,
+      border: `${i.lineWidth} dashed ${i.borderColorBase}`,
+      borderRadius: i.borderRadius,
+      background: i.colorBgLayout,
       userSelect: "none",
       "& > div": {
         display: "flex",
@@ -22,19 +22,19 @@ const t = (e) => {
         flexDirection: "column",
         ".state-un-icon": {
           display: "block",
-          width: "56px"
+          width: i.apUploadSingleFileIconHeight
         },
         ".state-un-title": {
-          marginTop: "10px",
-          color: e.textColor1,
-          fontSize: e.fontSizeLG,
-          lineHeight: e.lineHeightLG
+          marginTop: i.spaceMD,
+          color: i.textColor1,
+          fontSize: i.fontSizeLG,
+          lineHeight: i.lineHeightLG
         },
         ".state-un-subtitle": {
-          marginTop: "4px",
-          color: e.textColor4,
-          fontSize: "12px",
-          lineHeight: "18px"
+          marginTop: i.spaceXS,
+          color: i.textColor4,
+          fontSize: i.fontSize,
+          lineHeight: i.lineHeight
         }
       },
       ".state-ing": {
@@ -42,13 +42,14 @@ const t = (e) => {
         alignItems: "center",
         width: "min(516px, 77.24%)",
         height: "96px",
-        padding: "0 24px",
-        borderRadius: "4px",
+        paddingBlock: 0,
+        paddingInline: i.spaceXXL,
+        borderRadius: i.borderRadius,
         background: "#fff",
         ".left": {
           flexShrink: 0,
           width: "48px",
-          marginRight: "16px",
+          marginRight: i.spaceXL,
           img: {
             display: "block",
             width: "100%"
@@ -59,13 +60,13 @@ const t = (e) => {
           ".center-title": {
             display: "-webkit-box",
             overflow: "hidden",
-            fontSize: "14px",
+            fontSize: i.fontSizeLG,
             textAlign: "start",
             textOverflow: "ellipsis",
             wordWrap: "break-word",
             wordBreak: "break-all",
             WebkitBoxOrient: "vertical",
-            WebkitLineClamp: 2
+            WebkitLineClamp: i.lineClamp
           },
           ".center-progress ": {
             ".ant-progress-line": {
@@ -76,22 +77,22 @@ const t = (e) => {
         },
         ".right": {
           flexShrink: 0,
-          marginLeft: "24px",
-          color: e.colorError,
-          fontSize: "20px",
+          marginLeft: i.spaceXXL,
+          color: i.colorError,
+          fontSize: i.fontSizeXXL,
           cursor: "pointer !important"
         }
       }
     },
-    [`${r}-un`]: {
+    [`${e}-un`]: {
       cursor: "pointer",
       "&:hover": {
-        border: `1px dashed ${e.colorPrimary}`,
-        background: `color-mix(in srgb, ${e.colorPrimary} 10%, transparent)`
+        border: `${i.lineWidth} dashed ${i.colorPrimary}`,
+        background: `color-mix(in srgb, ${i.colorPrimary} 10%, transparent)`
       }
     }
   };
 };
 export {
-  t as singleFileStyle
+  l as singleFileStyle
 };

package/es/src/business/ap-upload/style/token.d.ts

@@ -0,0 +1,19 @@
+export type ApUploadToken = {
+    /**
+     * 单选上传组件外部容器高度
+     */
+    apUploadSingleFileContainerHeight: number;
+    /**
+     * 单选上传组件上传图标的高度
+     */
+    apUploadSingleFileIconHeight: number;
+    /**
+     * 卡片上传组件项宽度
+     */
+    apUploadPictureItemWidth: number;
+    /**
+     * 卡片上传组件项删除按钮宽度
+     */
+    apUploadPictureCloseIconWidth: number;
+};
+export declare const defaultValue: ApUploadToken;

package/es/src/business/ap-upload/style/token.mjs

@@ -0,0 +1,9 @@
+const e = {
+  apUploadSingleFileContainerHeight: 200,
+  apUploadSingleFileIconHeight: 56,
+  apUploadPictureItemWidth: 100,
+  apUploadPictureCloseIconWidth: 16
+};
+export {
+  e as defaultValue
+};

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

@@ -1,5 +1,27 @@
-import { BaseToken, GenStyleFunc } from '../../../../design-token/interface';
+import { GenStyleFunc } from '../../../../design-token/interface';
 import { ComputedRef } from 'vue';
-export declare const genProCardStyle: GenStyleFunc<BaseToken>;
+export type ApUploadSingleToken = {
+    /**
+     * 单文件上传容器高度
+     */
+    apUploadSingleContainerHeight: number;
+    /**
+     * 单文件上传文件卡片高度
+     */
+    apUploadSingleItemHeight: number;
+    /**
+     * 单文件上传容器文件图标尺寸
+     */
+    apUploadSingleContainerFileIconSize: number;
+    /**
+     * 单文件上传卡片左侧文件图标尺寸
+     */
+    apUploadSingleItemFileIconSize: number;
+    /**
+     * 单文件上传卡片删除按钮尺寸
+     */
+    apUploadSingleItemDeleteIconSize: number;
+};
+export declare const genProCardStyle: GenStyleFunc<ApUploadSingleToken>;
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

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

@@ -1,16 +1,16 @@
-import { genComponentStyleHook as t } from "../../../../utils/cssinjs/index.mjs";
-const n = (o) => {
-  const { componentCls: e } = o;
+import { genComponentStyleHook as o } from "../../../../utils/cssinjs/index.mjs";
+const a = (e) => {
+  const { componentCls: r } = e;
   return {
-    [e]: {
+    [r]: {
       userSelect: "none",
       ".ant-upload-drag": {
-        background: "#F2F6F9",
-        border: "1px dashed var(--ap-border-color-base)",
-        height: "200px",
+        background: e.colorBgLayout,
+        border: `${e.lineWidth} dashed var(--ap-border-color-base)`,
+        height: e.apUploadSingleContainerHeight,
         "&:not(.ant-upload-disabled):hover": {
-          background: "rgba(0, 112, 255, 0.1)",
-          borderColor: "#0070ff"
+          background: `color-mix(in srgb, ${e.colorPrimary} 10%, transparent)`,
+          borderColor: e.colorPrimary
         },
         ".ant-upload-btn": {
           padding: 0
@@ -19,25 +19,26 @@ const n = (o) => {
           cursor: "default"
         }
       },
-      [`${e}__content`]: {
+      [`${r}__content`]: {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
         height: "100%"
       },
-      [`${e}__content-file`]: {
+      [`${r}__content-file`]: {
         width: "min(516px, 77.24%)",
-        height: "96px",
-        background: "#FFFFFF",
-        borderRadius: "4px",
+        height: e.apUploadSingleItemHeight,
+        background: "#fff",
+        borderRadius: e.borderRadius,
         display: "flex",
         alignItems: "center",
-        padding: "0 24px",
+        paddingInline: e.spaceXXL,
+        paddingBlock: 0,
         "&-icon": {
           flexShrink: 0,
-          marginRight: "16px",
+          marginRight: e.spaceXL,
           svg: {
-            width: "48px"
+            width: e.apUploadSingleItemFileIconSize
           }
         },
         "&-name": {
@@ -51,16 +52,16 @@ const n = (o) => {
         },
         "&-delete": {
           flexShrink: 0,
-          marginLeft: "24px",
+          marginLeft: e.spaceXXL,
           svg: {
-            width: "20px",
-            color: "#FF4D4F",
-            fontSize: "20px",
+            width: e.apUploadSingleItemDeleteIconSize,
+            color: e.colorError,
+            fontSize: e.fontSizeXXL,
             cursor: "pointer"
           }
         }
       },
-      [`${e}__content-ing`]: {
+      [`${r}__content-ing`]: {
         "&-name": {
           "--name-color": "var(--ap-text-color-2)",
           ".ant-progress-line": {
@@ -69,53 +70,61 @@ const n = (o) => {
           }
         }
       },
-      [`${e}__content-error`]: {
+      [`${r}__content-error`]: {
         "&-name": {
-          "--name-color": "#FF4D4F"
+          "--name-color": e.colorError
         }
       },
-      [`${e}__content-done`]: {
+      [`${r}__content-done`]: {
         "&-name": {
-          "--name-color": "#0070ff"
+          "--name-color": e.colorPrimary
         }
       },
-      [`${e}__content-empty`]: {
+      [`${r}__content-empty`]: {
         cursor: "pointer",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
         "&-icon": {
           svg: {
-            width: "56px"
+            width: e.apUploadSingleContainerFileIconSize
           }
         },
         "&-title": {
-          marginTop: "10px",
+          marginTop: e.spaceMD,
           color: "var(--ap-text-color-2)",
-          fontSize: "16px",
-          lineHeight: "22px"
+          fontSize: e.fontSizeXL,
+          lineHeight: e.lineHeightLG
         },
         "&-sub-title": {
-          marginTop: 4,
+          marginTop: e.spaceXS,
           color: "var(--ap-text-color-3)",
-          fontSize: "12px",
-          lineHeight: "18px"
+          fontSize: e.fontSize,
+          lineHeight: e.lineHeight
         }
       }
     },
-    [`${e}-affix-wrapper-status-error`]: {
+    [`${r}-affix-wrapper-status-error`]: {
       ".ant-upload-drag:not(.ant-upload-disabled)": {
-        borderColor: "#ff4d4f",
+        borderColor: e.colorError,
         "&:hover": {
-          borderColor: "#FF4D4F80"
+          borderColor: `color-mix(in srgb, ${e.colorPrimary} 80%, transparent)`
         }
       }
     }
   };
-}, a = t("ApUploadSingle", (o) => [
-  n(o)
-]);
+}, n = o(
+  "ApUploadSingle",
+  (e) => [a(e)],
+  {
+    apUploadSingleContainerHeight: 200,
+    apUploadSingleItemHeight: 96,
+    apUploadSingleItemFileIconSize: 48,
+    apUploadSingleItemDeleteIconSize: 20,
+    apUploadSingleContainerFileIconSize: 56
+  }
+);
 export {
-  a as default,
-  n as genProCardStyle
+  n as default,
+  a as genProCardStyle
 };

package/es/src/business/ap-value-select-card/style/index.mjs

@@ -1,55 +1,57 @@
 import { genComponentStyleHook as e } from "../../../utils/cssinjs/index.mjs";
-const l = (o) => {
-  const { componentCls: r } = o;
+const l = (r) => {
+  const { componentCls: o } = r;
   return {
-    [r]: {
+    [o]: {
       position: "relative",
-      marginBlockStart: "8px",
+      marginBlockStart: r.space,
       ".ant-popover": {
         width: "100%"
       },
-      [`${r}-list`]: {
+      [`${o}-list`]: {
         display: "grid",
         gridTemplateColumns: "repeat(var(--ap-value-select-card-column-count, 5), minmax(var(--ap-value-select-card-max-width, 150px), 1fr))",
         gridAutoRows: "1fr",
-        gap: "12px",
+        gap: r.spaceLG,
         "&-item": {
           position: "relative",
           boxSizing: "border-box",
-          padding: "8px 16px",
-          color: o.textColor2,
-          border: `1px solid ${o.borderColorBase}`,
-          borderRadius: o.borderRadius,
+          paddingInline: r.spaceXL,
+          paddingBlock: r.space,
+          color: r.textColor2,
+          border: `${r.lineWidth} ${r.lineType} ${r.borderColorBase}`,
+          borderRadius: r.borderRadius,
           cursor: "pointer",
           "&-close": {
             position: "absolute",
-            top: "8px",
-            right: "10px",
+            top: r.space,
+            lineHeight: r.lineHeight,
+            right: r.spaceMD,
             zIndex: 1,
-            color: o.textColor3,
-            fontSize: o.fontSizeLG,
+            color: r.textColor3,
+            fontSize: r.fontSizeLG,
             cursor: "pointer",
             "&:hover": {
-              color: o.colorError
+              color: r.colorError
             }
           },
           ".label": {
-            marginBlockEnd: "4px",
-            fontSize: o.fontSize,
-            lineHeight: o.lineHeight
+            marginBlockEnd: r.spaceXS,
+            fontSize: r.fontSize,
+            lineHeight: r.lineHeight
           },
           ".value": {
             overflow: "hidden",
             fontWeight: "bold",
-            fontSize: o.fontSizeXL,
+            fontSize: r.fontSizeXL,
             whiteSpace: "nowrap",
             textOverflow: "ellipsis"
           },
           "&:hover:not(.select)": {
-            border: `1px solid ${o.colorPrimary}`
+            border: `${r.lineWidth} ${r.lineType} ${r.colorPrimary}`
           },
           "&.select": {
-            color: o.textColor1,
+            color: r.textColor1,
             borderColor: "transparent",
             boxShadow: "3px 10px 30px -2px rgba(123, 121, 140, 0.15)",
             background: "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--ap-value-select-card-bg-color, #f5f9ff) 92%)",
@@ -58,22 +60,22 @@ const l = (o) => {
             }
           },
           "&.all": {
-            color: o.textColor2,
+            color: r.textColor2,
             background: "#fff",
-            border: `1px solid ${o.borderColorBase}`,
+            border: `${r.lineWidth} ${r.lineType} ${r.borderColorBase}`,
             boxShadow: "none",
             "&:hover:not(.disabled)": {
-              borderColor: o.colorPrimary
+              borderColor: r.colorPrimary
             },
             "&.disabled": {
-              color: o.textColor3,
-              background: "#f9f9fa",
+              color: r.textColor3,
+              background: r.colorBg2,
               cursor: "not-allowed",
-              border: `1px solid ${o.borderColorBase}`
+              border: `${r.lineWidth} ${r.lineType} ${r.borderColorBase}`
             },
             "&.select": {
-              backgroundColor: o.colorBgControl,
-              borderColor: o.colorPrimary,
+              backgroundColor: r.colorBgControl,
+              borderColor: r.colorPrimary,
               cursor: "pointer"
             }
           },
@@ -82,34 +84,34 @@ const l = (o) => {
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
-            color: o.colorPrimary,
+            color: r.colorPrimary,
             background: "#fff",
-            border: "1px dashed #d1d7df",
+            border: `${r.lineWidth} dashed #d1d7df`,
             boxShadow: "none",
             ".text": {
-              fontSize: o.fontSize,
-              marginInlineStart: "4px"
+              fontSize: r.fontSize,
+              marginInlineStart: r.spaceXS
             }
           }
         }
       },
-      [`${r}-title`]: {
+      [`${o}-title`]: {
         display: "flex",
         alignItems: "center",
-        marginBlockEnd: "12px",
-        color: o.textColor2,
-        fontSize: o.fontSize,
+        marginBlockEnd: r.spaceLG,
+        color: r.textColor2,
+        fontSize: r.fontSize,
         "&-icon": {
-          marginRight: "4px",
-          color: o.textColor4,
-          fontSize: o.fontSizeLG
+          marginRight: r.spaceXS,
+          color: r.textColor4,
+          fontSize: r.fontSizeLG
         }
       }
     }
   };
-}, i = e("ApValueSelectCard", (o) => [
-  l(o)
+}, a = e("ApValueSelectCard", (r) => [
+  l(r)
 ]);
 export {
-  i as default
+  a as default
 };

package/es/src/business/ap-view/components/main-button-content.vue2.mjs

@@ -20,7 +20,7 @@ const ce = /* @__PURE__ */ T({
     maxViewNum: {}
   },
   setup(N) {
-    const f = N, { t: o } = G(), { b: n } = H("ap-view"), m = P("ap-view"), V = z(), { tableKey: F, popoverOpen: p, viewList: c, saveDataSource: h, viewListCRUD: b } = O(), _ = $({
+    const f = N, { t: o } = G(), { b: i } = H("ap-view"), m = P("ap-view"), V = z(), { tableKey: F, popoverOpen: p, viewList: c, saveDataSource: h, viewListCRUD: b } = O(), _ = $({
       get: () => p.value && c.value.length < f.maxViewNum + 1,
       set: (l) => {
         c.value.length < f.maxViewNum + 1 && (p.value = l);
@@ -29,12 +29,12 @@ const ce = /* @__PURE__ */ T({
     L(p, (l) => {
       l && (V.value?.resetFields(), setTimeout(() => {
         V.value?.setFieldsValue({
-          isDefault: !c.value.some((i) => i.isDefault)
+          isDefault: !c.value.some((n) => n.isDefault)
         });
       }));
     });
     const D = async (l) => {
-      const { viewName: i, isDefault: v } = l, S = A(), k = g(
+      const { viewName: n, isDefault: v } = l, S = A(), k = g(
         h?.getSearchFormValues?.(
           !!h?.searchFormTransform
         )
@@ -45,14 +45,14 @@ const ce = /* @__PURE__ */ T({
       await b.addView?.({
         tableKey: F,
         viewKey: S,
-        viewName: i,
+        viewName: n,
         isDefault: v,
         viewConfig: I
       }), p.value = !1;
     };
-    return (l, i) => (E(), Y(e(R), {
+    return (l, n) => (E(), Y(e(R), {
       open: _.value,
-      "onUpdate:open": i[1] || (i[1] = (v) => _.value = v),
+      "onUpdate:open": n[1] || (n[1] = (v) => _.value = v),
       placement: "bottom",
       trigger: "click",
       arrow: !1,
@@ -62,7 +62,7 @@ const ce = /* @__PURE__ */ T({
     }, {
       content: t(() => [
         u("div", {
-          class: r([e(n)("main-content-popover"), e(m)])
+          class: r([e(i)(), e(i)("main-content-popover"), e(m)])
         }, [
           a(w, {
             ref_key: "formRef",
@@ -75,10 +75,10 @@ const ce = /* @__PURE__ */ T({
           }, {
             default: t(() => [
               u("div", {
-                class: r([e(n)("main-content-popover-title-content"), e(m)])
+                class: r([e(i)("main-content-popover-title-content"), e(m)])
               }, [
                 u("div", {
-                  class: r([e(n)("main-content-popover-title-content-title")])
+                  class: r([e(i)("main-content-popover-title-content-title")])
                 }, s(e(o)("ap.apView.saveNewView")), 3),
                 a(w.FormItem, {
                   name: "isDefault",
@@ -110,14 +110,14 @@ const ce = /* @__PURE__ */ T({
                 _: 1
               }, 8, ["label", "rules"]),
               a(w.FormItem, {
-                class: r([e(n)("main-content-popover-btn"), e(m)])
+                class: r([e(i)("main-content-popover-btn"), e(m)])
               }, {
                 default: t(() => [
                   a(e(y), { size: 8 }, {
                     default: t(() => [
                       a(e(x), {
                         size: "small",
-                        onClick: i[0] || (i[0] = (v) => p.value = !1)
+                        onClick: n[0] || (n[0] = (v) => p.value = !1)
                       }, {
                         default: t(() => [
                           d(s(e(o)("ap.apView.cancel")), 1)
@@ -148,8 +148,8 @@ const ce = /* @__PURE__ */ T({
       default: t(() => [
         u("div", {
           class: r({
-            [e(n)("main-content")]: !0,
-            [e(n)("main-content-disabled")]: e(c).length >= f.maxViewNum + 1,
+            [e(i)("main-content")]: !0,
+            [e(i)("main-content-disabled")]: e(c).length >= f.maxViewNum + 1,
             hashId: e(m)
           })
         }, [
@@ -158,7 +158,7 @@ const ce = /* @__PURE__ */ T({
               a(e(y), { size: 4 }, {
                 default: t(() => [
                   a(q, {
-                    class: r([e(n)("icon"), e(m)])
+                    class: r([e(i)("icon"), e(m)])
                   }, null, 8, ["class"]),
                   u("div", null, s(e(o)("ap.apView.saveView")), 1)
                 ]),