@aplus-frontend/ui 7.5.0 → 7.7.0

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

@@ -1,48 +1,44 @@
-import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
-const t = (e) => {
-  const { componentCls: i } = e;
+import { genComponentStyleHook as r } from "../../../utils/cssinjs/index.mjs";
+const a = (i) => {
+  const { componentCls: e, apSelectLayoutSideWidth: l } = i;
   return {
-    [i]: {
+    [e]: {
       display: "flex",
       width: "100%",
       height: "100%",
-      [`${i}-side`]: {
+      [`${e}-side`]: {
         display: "flex",
         flexDirection: "column",
-        width: "214px",
-        minWidth: "214px",
-        maxWidth: "214px",
-        marginInlineEnd: "16px",
+        width: l,
+        minWidth: l,
+        maxWidth: l,
+        marginInlineEnd: i.spaceXL,
         overflow: "hidden",
         backgroundColor: "#fff",
         "&__header": {
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
-          padding: "12px 16px",
-          borderBottom: "1px solid #e9e9e9",
+          paddingInline: i.spaceXL,
+          paddingBlock: i.spaceLG,
+          borderBottom: `${i.lineWidth} ${i.lineType} ${i.borderColorBase}`,
           overflow: "hidden",
           whiteSpace: "nowrap",
           "& > h3": {
             margin: 0,
-            color: "#333",
-            fontSize: e.fontSize,
+            color: i.textColor1,
+            fontSize: i.fontSize,
             fontWeight: "bold",
-            lineHeight: e.lineHeightLG
+            lineHeight: i.lineHeightLG
           },
           "&--imgWrap": {
-            borderRadius: "2px",
+            borderRadius: i.borderRadiusSM,
             cursor: "pointer",
-            fontSize: "20px",
-            color: "#999",
+            fontSize: i.fontSizeXXL,
+            color: i.textColor3,
             display: "flex",
-            height: "20px",
             "&:hover": {
-              background: "#f5f5f5"
-            },
-            "& > img": {
-              width: "24px",
-              height: "24px"
+              background: i.colorBg3
             }
           }
         },
@@ -50,42 +46,48 @@ const t = (e) => {
           position: "relative",
           flex: 1,
           "&--search": {
-            margin: "10px 0",
-            padding: "0 16px"
+            marginBlock: i.spaceMD,
+            paddingInline: i.spaceXL
           },
           "&--scroll": {
             position: "absolute",
-            inset: "52px 0 0",
+            insetBlockStart: i.calc(i.controlHeight).add(i.calc(i.spaceMD).mul(2)).add(i.calc(i.lineWidth).mul(2)).equal(),
+            insetBlockEnd: 0,
+            insetInlineStart: 0,
+            insetInlineEnd: 0,
             overflowY: "auto",
-            padding: "0 16px"
+            paddingInline: i.spaceXL
           },
           "&--scroll-item": {
-            marginBottom: "8px",
-            padding: "8px 12px",
+            marginBottom: i.space,
+            paddingInline: i.spaceLG,
+            paddingBlock: i.space,
             overflow: "hidden",
-            color: "#333",
-            lineHeight: "22px",
-            width: "calc(214px - 32px)",
+            color: i.textColor1,
+            lineHeight: i.lineHeightLG,
+            width: i.calc(i.apSelectLayoutSideWidth).sub(
+              i.calc(i.controlHeight).add(i.calc(i.lineWidth).mul(2))
+            ).equal(),
             textOverflow: "ellipsis",
             textWrap: "nowrap",
             cursor: "pointer",
-            borderRadius: "4px",
+            borderRadius: i.borderRadius,
             "&:hover": {
-              background: "#f5f5f5"
+              background: i.colorBg3
             },
             "&.active": {
-              backgroundColor: "#e4faf1",
-              color: "#34b77c",
+              backgroundColor: i.calc(i.colorPrimary).colorOpacity(10),
+              color: i.colorPrimary,
               fontWeight: "bold",
               "& > .ant-typography": {
-                color: "#34b77c"
+                color: i.colorPrimary
               }
             }
           }
         }
       },
       ".v-enter-active, .v-leave-active": {
-        transition: "all 0.2s, background 0s"
+        transition: `all ${i.motionDurationMid}, background 0s`
       },
       ".v-enter-from, .v-leave-to": {
         width: 0,
@@ -93,7 +95,7 @@ const t = (e) => {
         maxWidth: 0,
         marginInlineEnd: 0
       },
-      [`${i}-content`]: {
+      [`${e}-content`]: {
         flex: 1,
         overflowX: "hidden",
         display: "flex",
@@ -101,35 +103,39 @@ const t = (e) => {
         "&__header": {
           display: "flex",
           alignItems: "center",
-          height: "32px",
-          padding: "16px 16px 0",
+          height: i.controlHeight,
+          paddingBlockStart: i.spaceXL,
+          paddingInlineStart: i.spaceXL,
           boxSizing: "content-box",
           background: "#fff",
           "&--imgWrap": {
-            marginRight: "10px",
-            borderRadius: "2px",
+            marginInlineEnd: i.spaceMD,
+            borderRadius: i.borderRadiusSM,
             cursor: "pointer",
-            fontSize: "20px",
+            fontSize: i.fontSizeXXL,
             display: "flex",
-            height: "20px",
-            color: "#999",
+            color: i.textColor3,
             "&:hover": {
-              background: "#f5f5f5"
+              background: i.colorBg3
             }
           },
           "&--title": {
             margin: 0,
-            fontSize: e.fontSizeLG,
+            fontSize: i.fontSizeLG,
             fontWeight: "bold",
-            lineHeight: e.lineHeightLG
+            lineHeight: i.lineHeightLG
           }
         }
       }
     }
   };
-}, r = o("ApSelectLayout", (e) => [
-  t(e)
-]);
+}, d = r(
+  "ApSelectLayout",
+  (i) => [a(i)],
+  {
+    apSelectLayoutSideWidth: 214
+  }
+);
 export {
-  r as default
+  d as default
 };

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/ap-tag-group.vue.mjs

@@ -106,7 +106,7 @@ const xe = /* @__PURE__ */ j({
               cursor: "pointer"
             })
           }, {
-            component: v(() => o[0] || (o[0] = [
+            component: v(() => [...o[0] || (o[0] = [
               t("svg", {
                 xmlns: "http://www.w3.org/2000/svg",
                 "xmlns:xlink": "http://www.w3.org/1999/xlink",
@@ -160,7 +160,7 @@ const xe = /* @__PURE__ */ j({
                   ])
                 ])
               ], -1)
-            ])),
+            ])]),
             _: 1
           }, 8, ["style"])) : c.value && r.value.symbol === "text" ? (a(), _("span", {
             key: 1,

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