@aplus-frontend/ui 7.6.0 → 7.7.0

package/es/src/business/ap-size-input/style/index.mjs

@@ -3,11 +3,11 @@ const n = (e) => ({
   [e.componentCls]: {
     display: "flex",
     alignItems: "center",
-    gap: "8px"
+    gap: e.space
   }
-}), p = t("ApSizeInput", (e) => [
+}), o = t("ApSizeInput", (e) => [
   n(e)
 ]);
 export {
-  p as default
+  o as default
 };

package/es/src/business/ap-status/style/index.mjs

@@ -12,7 +12,7 @@ const n = (t) => {
     {
       [o]: {
         fontSize: t.fontSizeXL,
-        lineHeight: "2",
+        lineHeight: 2,
         display: "inline-block",
         position: "relative",
         fontFamily: "aplusstatusfont",

package/es/src/business/ap-summary/style/index.d.ts

@@ -1,3 +1,13 @@
 import { ComputedRef } from 'vue';
+export type ApSummaryToken = {
+    /**
+     * 表格总结栏高度
+     */
+    apSummaryItemHeight: number;
+    /**
+     * 表格总结栏高度（较小）
+     */
+    apSummartItemHeightSM: number;
+};
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

package/es/src/business/ap-summary/style/index.mjs

@@ -1,25 +1,32 @@
-import { genComponentStyleHook as r } from "../../../utils/cssinjs/index.mjs";
-const a = (o) => {
-  const { componentCls: t } = o;
+import { genComponentStyleHook as m } from "../../../utils/cssinjs/index.mjs";
+const r = (a) => {
+  const { componentCls: t } = a;
   return {
     [t]: {
       [`${t}__item`]: {
-        height: "38px",
-        padding: "8px 12px !important",
+        height: a.apSummaryItemHeight,
+        paddingInline: `${a.spaceLG} !important`,
+        paddingBlock: `${a.space} !important`,
         backgroundColor: "var(--ap-summary-background, #f9ecc7) !important",
-        color: "#333",
+        color: a.textColor1,
         fontWeight: "bolder",
         "&--small": {
-          height: "28px",
-          padding: "4px 12px !important",
+          height: a.apSummartItemHeightSM,
+          paddingInline: `${a.spaceLG} !important`,
+          paddingBlock: `${a.spaceXS} !important`,
           backgroundColor: "var(--ap-summary-background, #E6EDFF) !important"
         }
       }
     }
   };
-}, p = r("ApSummary", (o) => [
-  a(o)
-]);
+}, p = m(
+  "ApSummary",
+  (a) => [r(a)],
+  {
+    apSummaryItemHeight: 38,
+    apSummartItemHeightSM: 28
+  }
+);
 export {
   p as default
 };

package/es/src/business/ap-table-modal/style/index.d.ts

@@ -1,5 +1,15 @@
 import { GenStyleFunc } from '../../../design-token/interface';
 import { ComputedRef } from 'vue';
-export declare const genApTableModalStyle: GenStyleFunc;
+export type ApTableModalToken = {
+    /**
+     * 右侧已选列表宽度
+     */
+    apTableModalRightWidth: number;
+    /**
+     * 右侧已选列表最大高度
+     */
+    apTableModalRightMaxHeight: number;
+};
+export declare const genApTableModalStyle: GenStyleFunc<ApTableModalToken>;
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

package/es/src/business/ap-table-modal/style/index.mjs

@@ -1,5 +1,5 @@
-import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
-const t = (e) => ({
+import { genComponentStyleHook as t } from "../../../utils/cssinjs/index.mjs";
+const l = (e) => ({
   [`${e.componentCls}`]: {
     [`${e.componentCls}--table-layout`]: {
       display: "flex",
@@ -12,7 +12,7 @@ const t = (e) => ({
       "&-left": {
         flex: 1,
         minWidth: 0,
-        paddingInlineEnd: "20px",
+        paddingInlineEnd: e.spaceXL,
         boxSizing: "border-box",
         display: "flex",
         flexDirection: "column",
@@ -24,9 +24,9 @@ const t = (e) => ({
         }
       },
       "&-right": {
-        maxHeight: "643px",
-        width: "410px",
-        paddingLeft: "20px",
+        maxHeight: e.apTableModalRightMaxHeight,
+        width: e.apTableModalRightWidth,
+        paddingInlineStart: e.spaceXL,
         position: "relative",
         display: "flex",
         flexDirection: "column",
@@ -37,7 +37,7 @@ const t = (e) => ({
         "&::before": {
           content: '""',
           height: "calc(100% + 16px)",
-          width: "1px",
+          width: e.lineWidth,
           backgroundColor: e.borderColorBase,
           position: "absolute",
           left: 0,
@@ -46,10 +46,15 @@ const t = (e) => ({
       }
     }
   }
-}), n = o("ApTable.Modal", (e) => [
-  t(e)
-]);
+}), i = t(
+  "ApTable.Modal",
+  (e) => [l(e)],
+  {
+    apTableModalRightWidth: 410,
+    apTableModalRightMaxHeight: 640
+  }
+);
 export {
-  n as default,
-  t as genApTableModalStyle
+  i as default,
+  l as genApTableModalStyle
 };

package/es/src/business/ap-tag/style/index.mjs

@@ -1,64 +1,66 @@
-import { genComponentStyleHook as l } from "../../../utils/cssinjs/index.mjs";
-const a = (o) => {
-  const { componentCls: e } = o, r = `${e}-wrapper`, i = `${e}-inner-wrapper`;
+import { genComponentStyleHook as a } from "../../../utils/cssinjs/index.mjs";
+const o = (i) => {
+  const { componentCls: e } = i, l = `${e}-wrapper`, r = `${e}-inner-wrapper`;
   return {
-    [r]: {
+    [l]: {
       textWrap: "nowrap",
       whiteSpace: "nowrap",
       display: "inline-flex",
       maxWidth: "100%",
-      [i]: {
-        borderRadius: o.borderRadius,
+      [r]: {
+        borderRadius: i.borderRadius,
         boxSizing: "border-box",
         overflow: "hidden",
         textOverflow: "ellipsis",
         width: "100%",
         "&--large": {
-          padding: "6px",
-          lineHeight: o.lineHeightLG,
-          fontSize: o.fontSizeLG
+          padding: i.spaceSM,
+          lineHeight: i.lineHeightLG,
+          fontSize: i.fontSizeLG
         },
         "&--middle": {
-          lineHeight: o.lineHeight,
-          padding: "3px 6px",
-          fontSize: o.fontSize
+          lineHeight: i.lineHeight,
+          paddingInline: i.spaceSM,
+          paddingBlock: i.calc(i.spaceSM).div(2).equal(),
+          fontSize: i.fontSize
         },
         "&--small": {
-          padding: "0 4px",
-          lineHeight: o.lineHeight,
-          fontSize: o.fontSize,
-          borderRadius: "2px"
+          paddingInline: i.spaceXS,
+          paddingBlock: 0,
+          lineHeight: i.lineHeight,
+          fontSize: i.fontSize,
+          borderRadius: i.borderRadiusSM
         }
       }
     },
-    [`${r}-purely`]: {
+    [`${l}-purely`]: {
       "& > *": {
         backgroundColor: "var(--tag-main-color-background)",
-        color: o.textColor1
+        color: i.textColor1
       },
-      [`${i}--disabled`]: {
-        backgroundColor: `color-mix(in srgb, ${o.textColor3} 15%, white)`
+      [`${r}--disabled`]: {
+        backgroundColor: `color-mix(in srgb, ${i.textColor3} 15%, white)`
       }
     },
-    [`${r}-border`]: {
+    [`${l}-border`]: {
       "& > *": {
-        outline: "1px solid var(--tag-main-color)",
-        outlineOffset: "-1px",
+        outline: `${i.lineWidth} ${i.lineType} var(--tag-main-color)`,
+        outlineOffset: i.calc(i.lineWidth).mul(-1).equal(),
         backgroundColor: "var(--tag-main-color-opacity)",
         color: "var(--tag-main-color)"
       },
-      [`${i}--disabled`]: {
-        outline: `1px solid ${o.borderColorBase}`,
-        outlineOffset: "-1px",
-        backgroundColor: `color-mix(in srgb, ${o.textColor2} 6%, white)`,
-        color: o.textColor2
+      [`${r}--disabled`]: {
+        outline: `${i.lineWidth} ${i.lineType} ${i.borderColorBase}`,
+        outlineOffset: i.calc(i.lineWidth).mul(-1).equal(),
+        backgroundColor: `color-mix(in srgb, ${i.textColor2} 6%, white)`,
+        color: i.textColor2
       }
     }
   };
-}, n = l("ApTag", (o) => [
-  a(o)
+}, n = a("ApTag", (i) => [
+  o(i)
 ]);
 export {
   n as default,
-  a as genApTagStyle
+  o as genApTagStyle
 };

package/es/src/business/ap-title/style/index.d.ts

@@ -1,5 +1,6 @@
-import { GenStyleFunc } from '../../../design-token/interface';
+import { GenStyleFunc, StyleMixin } from '../../../design-token/interface';
 import { ComputedRef } from 'vue';
+export declare const genTitlePrefix: StyleMixin;
 export declare const genApTitleStyle: GenStyleFunc;
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

package/es/src/business/ap-title/style/index.mjs

@@ -1,6 +1,31 @@
-import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
-const r = (e) => {
-  const { componentCls: t } = e;
+import { genComponentStyleHook as i } from "../../../utils/cssinjs/index.mjs";
+const a = (e) => ({
+  normal: {
+    position: "absolute",
+    content: '""',
+    left: 0,
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "3px",
+    height: "14px",
+    backgroundColor: e.colorPrimary,
+    borderRadius: "0px 4px 4px 0px",
+    zIndex: 1
+  },
+  admin: {
+    top: "50%",
+    transform: "translateY(-50%)",
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderColor: e.colorPrimary,
+    background: "#fff",
+    zIndex: 1
+  }
+}), l = (e) => {
+  const { componentCls: t } = e, { admin: o, normal: r } = a(e);
   return {
     [t]: {
       position: "relative",
@@ -8,20 +33,10 @@ const r = (e) => {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingInlineStart: "10px",
+      // tips: 保证图标和文字间的距离始终为token.spaceSM
+      paddingInlineStart: e.calc(e.spaceSM).add("3px").equal(),
       fontSize: e.fontSize,
-      "&::before": {
-        position: "absolute",
-        content: '""',
-        left: 0,
-        top: "50%",
-        transform: "translateY(-50%)",
-        width: "3px",
-        height: "14px",
-        backgroundColor: e.colorPrimary,
-        borderRadius: "0px 4px 4px 0px",
-        zIndex: 1
-      },
+      "&::before": r,
       [`${t}__prefix`]: {
         fontWeight: "bold",
         color: e.textColor1,
@@ -29,47 +44,24 @@ const r = (e) => {
         alignItems: "center",
         ".anticon-question-circle": {
           fontSize: e.fontSizeLG,
-          marginInlineStart: "5px",
-          color: "#8896b0"
+          marginInlineStart: e.spaceXS,
+          color: e.textColor3
         }
       },
       "&--admin": {
-        paddingLeft: "14px",
-        "&::before": {
-          top: "50%",
-          transform: "translateY(-50%)",
-          width: "8px",
-          height: "8px",
-          borderRadius: "50%",
-          borderWidth: "2px",
-          borderStyle: "solid",
-          borderColor: e.colorPrimary,
-          background: "#fff",
-          zIndex: 1
-        },
-        [t]: {
-          "&__prefix": {
-            fontWeight: "bold",
-            color: "#333",
-            display: "flex",
-            alignItems: "center",
-            ".anticon-question-circle": {
-              fontSize: e.fontSizeLG,
-              marginLeft: "5px",
-              color: "#999"
-            }
-          }
-        }
+        paddingLeft: e.calc(e.spaceSM).add("8px").equal(),
+        "&::before": o
       },
       [`${t}__suffix`]: {
-        color: "#526a90"
+        color: e.textColor2
       }
     }
   };
-}, n = o("ApTitle", (e) => [
-  r(e)
+}, d = i("ApTitle", (e) => [
+  l(e)
 ]);
 export {
-  n as default,
-  r as genApTitleStyle
+  d as default,
+  l as genApTitleStyle,
+  a as genTitlePrefix
 };

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

@@ -2,11 +2,16 @@ import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
 import { singleFileStyle as t } from "./single-file.mjs";
 import { multipleFileStyle as l } from "./multiple-file.mjs";
 import { pictureStyle as m } from "./picture.mjs";
-const y = o("ApUpload", (e) => [
-  t(e),
-  l(e),
-  m(e)
-]);
+import { defaultValue as r } from "./token.mjs";
+const y = o(
+  "ApUpload",
+  (e) => [
+    t(e),
+    l(e),
+    m(e)
+  ],
+  r
+);
 export {
   y as default
 };

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

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

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

@@ -1,4 +1,4 @@
-const a = (l) => {
+const t = (l) => {
   const { componentCls: o } = l;
   return {
     [`${o}-multiple-file`]: {
@@ -8,10 +8,11 @@ const a = (l) => {
         ".file-btn": {
           display: "flex",
           alignItems: "center",
-          padding: "7px 12px",
-          transition: "all 0.3s",
-          border: `1px solid ${l.borderColorBase}`,
-          borderRadius: "4px",
+          paddingBlock: l.space,
+          paddingInline: l.spaceLG,
+          transition: `all ${l.motionDurationSlow}`,
+          border: `${l.lineWidth} ${l.lineType} ${l.borderColorBase}`,
+          borderRadius: l.borderRadius,
           color: l.textColor1,
           "&:hover": {
             borderColor: l.colorPrimary,
@@ -19,7 +20,7 @@ const a = (l) => {
           }
         },
         ".sub-title": {
-          paddingLeft: "16px",
+          paddingLeft: l.spaceXL,
           color: l.textColor3,
           fontSize: l.fontSize
         }
@@ -62,5 +63,5 @@ const a = (l) => {
   };
 };
 export {
-  a as multipleFileStyle
+  t as multipleFileStyle
 };

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