@aplus-frontend/ui 7.5.0 → 7.7.0

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

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

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

@@ -1,10 +1,10 @@
-const r = (o) => {
-  const { componentCls: t } = o;
+const o = (i) => {
+  const { componentCls: r } = i;
   return {
-    [`${t}-picture`]: {
+    [`${r}-picture`]: {
       ".picture-context": {
         display: "grid",
-        gap: "16px",
+        gap: i.spaceXL,
         gridTemplateColumns: "repeat(auto-fill, 100px)",
         userSelect: "none",
         ".picture-upload": {
@@ -14,36 +14,36 @@ const r = (o) => {
           justifyContent: "center",
           width: "100px",
           overflow: "hidden",
-          transition: "all 0.2s",
-          border: `1px dashed ${o.borderColorBase}`,
-          borderRadius: "4px",
-          background: o.colorBgLayout,
-          color: o.textColor4,
-          fontSize: "16px",
+          transition: `all ${i.motionDurationMid}`,
+          border: `${i.lineWidth} dashed ${i.borderColorBase}`,
+          borderRadius: i.borderRadius,
+          background: i.colorBgLayout,
+          color: i.textColor4,
+          fontSize: i.fontSizeXL,
           cursor: "pointer",
           aspectRatio: "1 / 1",
-          "& > * + *": { marginTop: "4px", fontSize: o.fontSize },
+          "& > * + *": { marginTop: i.spaceXS, fontSize: i.fontSize },
           "&:hover": {
-            border: `1px dashed ${o.colorPrimary}`
+            border: `${i.lineWidth} dashed ${i.colorPrimary}`
           }
         },
         ".picture-item": {
-          width: "100px",
-          padding: "8px",
+          width: i.apUploadPictureItemWidth,
+          padding: i.space,
           overflow: "hidden",
-          border: `1px solid ${o.borderColorBase}`,
-          borderRadius: "4px",
+          border: `${i.lineWidth} ${i.lineType} ${i.borderColorBase}`,
+          borderRadius: i.borderRadius,
           background: "#fff",
           aspectRatio: "1 / 1",
           ".picture-item-box": {
             position: "relative",
             width: "100%",
             height: "100%",
-            borderRadius: "2px",
+            borderRadius: i.borderRadiusSM,
             "& > img": {
               width: "100%",
               height: "100%",
-              borderRadius: "2px",
+              borderRadius: i.borderRadiusSM,
               objectFit: "cover"
             },
             "&:hover > .picture-item-shadow": {
@@ -55,10 +55,10 @@ const r = (o) => {
               left: 0,
               width: "100%",
               height: "100%",
-              borderRadius: "2px",
+              borderRadius: i.borderRadiusSM,
               background: "rgb(0 0 0 / 50%)",
               color: "#fff",
-              fontSize: o.fontSize,
+              fontSize: i.fontSize,
               ".picture-item-close": {
                 display: "flex",
                 position: "absolute",
@@ -66,14 +66,14 @@ const r = (o) => {
                 right: 0,
                 alignItems: "center",
                 justifyContent: "center",
-                width: "16px",
+                width: i.apUploadPictureCloseIconWidth,
                 overflow: "hidden",
                 transform: "translate(30%, -30%)",
-                border: "1px solid #fff",
+                border: `${i.lineWidth} ${i.lineType} #fff`,
                 borderRadius: "50%",
-                background: o.colorError,
+                background: i.colorError,
                 color: "#fff",
-                fontSize: "10px",
+                fontSize: i.fontSizeSM,
                 cursor: "pointer",
                 aspectRatio: "1 / 1"
               },
@@ -91,12 +91,12 @@ const r = (o) => {
       },
       ".picture-title": {
         marginTop: "8px",
-        color: o.textColor3,
+        color: i.textColor3,
         fontSize: "12px"
       }
     }
   };
 };
 export {
-  r as pictureStyle
+  o as pictureStyle
 };

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

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

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-upload-file/icon/delete-icon.vue.mjs

@@ -8,7 +8,7 @@ const r = {}, L = {
   viewBox: "0 0 20 20"
 };
 function i(c, o) {
-  return n(), l("svg", L, o[0] || (o[0] = [
+  return n(), l("svg", L, [...o[0] || (o[0] = [
     e("g", null, [
       e("g", null, [
         e("path", {
@@ -19,7 +19,7 @@ function i(c, o) {
         })
       ])
     ], -1)
-  ]));
+  ])]);
 }
 const f = /* @__PURE__ */ t(r, [["render", i]]);
 export {

package/es/src/business/ap-upload-file/icon/file-icon.vue.mjs

@@ -8,9 +8,9 @@ const r = {}, s = {
   viewBox: "0 0 56 56"
 };
 function p(a, t) {
-  return i(), o("svg", s, t[0] || (t[0] = [
+  return i(), o("svg", s, [...t[0] || (t[0] = [
     e('<defs><clipPath id="master_svg0_693_19001"><rect x="0" y="0" width="56" height="56" rx="7"></rect></clipPath><linearGradient id="master_svg1_693_19025" x1="0.5" y1="0" x2="0.5" y2="0.7987817525863647"><stop offset="0%" stop-color="#AED1FF" stop-opacity="1"></stop><stop offset="100%" stop-color="#74B1FF" stop-opacity="1"></stop></linearGradient><linearGradient id="master_svg2_693_19014" x1="0.5" y1="0" x2="0.5" y2="1"><stop offset="0.7142857182770967%" stop-color="#DBEBFF" stop-opacity="1"></stop><stop offset="100%" stop-color="#98C5FF" stop-opacity="1"></stop></linearGradient></defs><g clip-path="url(#master_svg0_693_19001)"><g><g><path d="M49.4644,10.22729L35.1706,10.22729C34.2282,10.22729,33.316,9.89456,32.595,9.287759999999999L29.1746,6.4093C28.0931,5.499102,26.7249,5,25.3113,5L5.5,5C3.29086,5,1.5,6.79086,1.5,9L1.5,45L54.4995,45L54.5,15.2852C54.5,12.49165,52.2455,10.22729,49.4644,10.22729Z" fill="url(#master_svg1_693_19025)" fill-opacity="1"></path></g><g><path d="M10.5,13L45.5,13C46.6046,13,47.5,13.895431,47.5,15L47.5,35.9999L8.5,36L8.5,15C8.5,13.895431,9.395431,13,10.5,13" fill="#FFFFFF" fill-opacity="0.30000001192092896"></path></g><g><path d="M8.5,17L47.5,17C48.6046,17,49.5,17.895431,49.5,19L49.5,41.9998L6.5,42L6.5,19C6.5,17.895431,7.395431,17,8.5,17" fill="#F9FCFF" fill-opacity="1"></path></g><g><rect x="14.5" y="21" width="15" height="2" rx="1" fill="#8DBFFF" fill-opacity="0.30000001192092896"></rect></g><g><rect x="14.5" y="27" width="28" height="2" rx="1" fill="#8DBFFF" fill-opacity="0.6000000238418579"></rect></g><g><path d="M1.5,37L1.5,48C1.5,50.2091,3.29086,52,5.5,52L50.5,52C52.7091,52,54.5,50.2091,54.5,48L54.5,37C54.5,35.34315,53.1569,34,51.5,34L4.5,34C2.84315,34,1.5,35.34315,1.5,37Z" fill="url(#master_svg2_693_19014)" fill-opacity="1"></path></g></g></g>', 2)
-  ]));
+  ])]);
 }
 const g = /* @__PURE__ */ l(r, [["render", p]]);
 export {

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