@aplus-frontend/ui 7.6.0 → 7.7.0

package/es/src/business/ap-draggable-grid/style/index.mjs

@@ -1,5 +1,5 @@
-import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
-const i = (r) => {
+import { genComponentStyleHook as i } from "../../../utils/cssinjs/index.mjs";
+const o = (r) => {
   const { componentCls: e } = r;
   return {
     [e]: {
@@ -23,12 +23,12 @@ const i = (r) => {
         transition: "all 0.5s ease",
         overflow: "hidden",
         boxSizing: "border-box",
-        border: "1px solid #fff"
+        border: `${r.lineWidth} ${r.lineType} #fff`
       },
       [`${e}--canDrag`]: {
         cursor: "pointer",
         "&:hover": {
-          border: `1px solid ${r.colorPrimary}`
+          border: `${r.lineWidth} ${r.lineType} ${r.colorPrimary}`
         }
       },
       [`${e}--dragging`]: {
@@ -41,12 +41,12 @@ const i = (r) => {
         zIndex: 999
       },
       [`${e}__overlay`]: {
-        border: `1px solid ${r.colorPrimary}`
+        border: `${r.lineWidth} ${r.lineType} ${r.colorPrimary}`
       }
     }
   };
-}, d = o("ApDraggableGrid", (r) => [
-  i(r)
+}, d = i("ApDraggableGrid", (r) => [
+  o(r)
 ]);
 export {
   d as default

package/es/src/business/ap-expand-alert/style/index.mjs

@@ -1,43 +1,44 @@
-import { genComponentStyleHook as a } from "../../../utils/cssinjs/index.mjs";
-const r = (e) => {
-  const { componentCls: t, namespace: n } = e, o = `.${n}-action-item`;
+import { genComponentStyleHook as l } from "../../../utils/cssinjs/index.mjs";
+const i = (n) => {
+  const { componentCls: o, namespace: t, spaceXS: r, motionDurationSlow: e } = n, a = `.${t}-action-item`;
   return {
-    [t]: {
-      [o]: {
-        fontSize: e.fontSize
+    [o]: {
+      [a]: {
+        fontSize: n.fontSize
       },
-      [`${t}__expandText`]: {
-        fontSize: e.fontSize,
-        marginInline: "4px"
+      [`${o}__expandText`]: {
+        fontSize: n.fontSize,
+        marginInline: r
       },
-      [`${t}__expandIcon`]: {
-        transition: "all 0.3s",
+      [`${o}__expandIcon`]: {
+        transition: `all ${e}`,
         transform: "rotateZ(180deg)"
       },
-      [`${t}__collapseIcon`]: {
-        transition: "all 0.3s",
+      [`${o}__collapseIcon`]: {
+        transition: `all ${e}`,
         transform: "rotateZ(0deg)"
       },
-      [`${t}__prefix`]: {
+      [`${o}__prefix`]: {
         display: "inline-block"
       },
-      [`${t}__showItem`]: {
-        color: "#0070ff",
+      [`${o}__showItem`]: {
+        color: n.colorLink,
         cursor: "pointer",
         whiteSpace: "nowrap",
         "&:hover": {
-          color: "#66a9ff"
+          color: n.colorLinkHover
         }
       },
-      [`${t}__spliter`]: {
-        color: "#dee4ed",
-        padding: "0 8px"
+      [`${o}__spliter`]: {
+        color: n.borderColorBase,
+        paddingInline: n.space,
+        paddingBlock: 0
       },
-      [`${t}__antAlert.ant-alert`]: {
+      [`${o}__antAlert.ant-alert`]: {
         alignItems: "flex-start",
-        lineHeight: e.lineHeight,
+        lineHeight: n.lineHeight,
         ".ant-alert-icon": {
-          fontSize: e.fontSizeLG,
+          fontSize: n.fontSizeLG,
           transform: "translateY(2px)",
           display: "block"
         }
@@ -45,12 +46,15 @@ const r = (e) => {
       ".card-alert": {
         backgroundColor: "transparent !important",
         border: "none"
+      },
+      ".ant-alert-close-icon": {
+        lineHeight: "unset"
       }
     }
   };
-}, i = a("ApExpandAlert", (e) => [
-  r(e)
+}, c = l("ApExpandAlert", (n) => [
+  i(n)
 ]);
 export {
-  i as default
+  c as default
 };

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

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

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

@@ -1,19 +1,20 @@
-import { genComponentStyleHook as t } from "../../../utils/cssinjs/index.mjs";
-const n = (e) => {
+import { genComponentStyleHook as n } from "../../../utils/cssinjs/index.mjs";
+const t = (e) => {
   const { componentCls: o } = e;
   return {
     [`${o}-toolbar`]: {
       display: "flex",
       alignItems: "center",
-      padding: "0 24px",
+      paddingInline: e.spaceXXL,
+      paddingBlock: 0,
       backgroundColor: "rgba(0, 0, 0, 0.1)",
       borderRadius: "100px"
     }
   };
-}, a = t("ApImage", (e) => [
-  n(e)
+}, l = n("ApImage", (e) => [
+  t(e)
 ]);
 export {
-  a as default,
-  n as genApImageStyle
+  l as default,
+  t as genApImageStyle
 };

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

@@ -4,7 +4,7 @@ const t = (n) => ({
     display: "flex",
     alignItems: "center",
     [`${n.componentCls}__input-number`]: {
-      marginInlineEnd: "16px"
+      marginInlineEnd: n.spaceXL
     }
   }
 }), p = e("ApInputRadio", (n) => [

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

@@ -1,3 +1,17 @@
 import { ComputedRef } from 'vue';
+export type ApLabelToken = {
+    /**
+     * 自定义绿色
+     */
+    apLabelColorCustomGreen: string;
+    /**
+     * 自定义红色
+     */
+    apLabelColorCustomRed: string;
+    /**
+     * 自定义蓝色
+     */
+    apLabelColorCustomBlue: string;
+};
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

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

@@ -1,12 +1,17 @@
 import { genComponentStyleHook as t } from "../../../utils/cssinjs/index.mjs";
-const r = (o) => {
-  const { componentCls: e } = o;
+const c = (o) => {
+  const {
+    componentCls: e,
+    apLabelColorCustomGreen: l,
+    apLabelColorCustomBlue: r,
+    apLabelColorCustomRed: a
+  } = o;
   return {
     [e]: {
       display: "flex",
       flexDirection: "column",
       alignItems: "start",
-      fontSize: "14px",
+      fontSize: o.fontSizeLG,
       [`${e}__content`]: {
         display: "flex",
         flexDirection: "row",
@@ -17,33 +22,38 @@ const r = (o) => {
         }
       },
       [`${e}__custom`]: {
-        marginBlockStart: "2px",
+        marginBlockStart: o.spaceXXS,
         width: "100%",
         ".ant-tag": {
-          height: "24px",
-          lineHeight: "24px"
+          lineHeight: o.lineHeightLG
         },
         ".ant-tag-green": {
-          color: "#34b77c",
-          borderColor: "#34b77c",
-          background: "rgba(52, 183, 124, 0.06)"
+          color: l,
+          borderColor: l,
+          background: o.calc(l).colorOpacity(6)
         },
         ".ant-tag-red": {
-          color: "#FF4D4F",
-          borderColor: "#FF4D4F",
-          backgroundColor: "rgba(255, 77, 79, 0.06)"
+          color: a,
+          borderColor: a,
+          backgroundColor: o.calc(a).colorOpacity(6)
         },
         ".ant-tag-blue": {
-          color: "#1890ff",
-          borderColor: "#1890ff",
-          backgroundColor: "rgba(24, 144, 255, 0.06)"
+          color: r,
+          borderColor: r,
+          backgroundColor: o.calc(r).colorOpacity(6)
         }
       }
     }
   };
-}, l = t("ApLabel", (o) => [
-  r(o)
-]);
+}, i = t(
+  "ApLabel",
+  (o) => [c(o)],
+  {
+    apLabelColorCustomGreen: "#34b77c",
+    apLabelColorCustomRed: "#FF4D4F",
+    apLabelColorCustomBlue: "#1890ff"
+  }
+);
 export {
-  l as default
+  i as default
 };

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

@@ -1,5 +1,5 @@
-import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
-const i = (l) => {
+import { genComponentStyleHook as i } from "../../../utils/cssinjs/index.mjs";
+const o = (l) => {
   const { componentCls: e } = l;
   return {
     [e]: {
@@ -26,7 +26,8 @@ const i = (l) => {
       },
       [`${e}__value-group-label-semicolon`]: {
         display: "inline-block",
-        padding: "0 3px"
+        paddingInlineStart: l.spaceXXS,
+        paddingInlineEnd: l.spaceXS
       },
       [`${e}__value-group-value`]: {
         color: l.textColor1,
@@ -102,7 +103,7 @@ const i = (l) => {
       [`${e}__help-message`]: {
         display: "flex",
         alignItems: "center",
-        marginInlineStart: "4px"
+        marginInlineStart: l.spaceXS
       },
       [`${e}__major`]: {
         lineHeight: l.lineHeight,
@@ -131,8 +132,8 @@ const i = (l) => {
       }
     }
   };
-}, t = o("ApLadder", (l) => [
-  i(l)
+}, t = i("ApLadder", (l) => [
+  o(l)
 ]);
 export {
   t as default

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

@@ -1,3 +1,13 @@
 import { ComputedRef } from 'vue';
+export type ApProductInfoToken = {
+    /**
+     * 商品信息卡片图片尺寸
+     */
+    apProductInfoImageSize: number;
+    /**
+     * 商品信息卡最大宽度
+     */
+    apProductInfoMaxWidth: number;
+};
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

package/es/src/business/ap-product-info/style/index.mjs

@@ -1,75 +1,82 @@
-import { genComponentStyleHook as o } from "../../../utils/cssinjs/index.mjs";
-const l = (i) => {
-  const { componentCls: e } = i;
+import { genComponentStyleHook as e } from "../../../utils/cssinjs/index.mjs";
+const o = (i) => {
+  const { componentCls: l } = i;
   return {
-    [e]: {
+    [l]: {
       display: "flex",
-      [`${e}__img`]: {
-        width: "44px",
-        height: "44px",
-        marginInlineEnd: "8px",
+      [`${l}__img`]: {
+        width: i.apProductInfoImageSize,
+        height: i.apProductInfoImageSize,
+        marginInlineEnd: i.space,
         flexShrink: 0
       },
-      [`${e}__content`]: {
+      [`${l}__content`]: {
         flex: 1,
         display: "flex",
         flexDirection: "column",
         overflow: "hidden"
       },
-      [`${e}__row-container `]: {
+      [`${l}__row-container `]: {
         display: "flex",
         flexWrap: "wrap"
       },
-      [`${e}__row-item`]: {
+      [`${l}__row-item`]: {
         position: "relative",
         display: "flex"
       },
-      [`${e}__divider`]: {
-        width: "1px",
+      [`${l}__divider`]: {
+        width: i.lineWidth,
         position: "relative",
         height: "12px",
         top: "50%",
-        margin: "-6px 16px 0px 0px",
+        marginBlockStart: i.calc(i.spaceSM).mul(-1).equal(),
+        marginInlineEnd: i.spaceXL,
         zIndex: 1
       },
-      [`${e}__divider-vertical`]: {
-        width: "1px",
+      [`${l}__divider-vertical`]: {
+        width: i.lineWidth,
         height: "100%",
-        backgroundColor: "#E9EDF3",
+        backgroundColor: i.colorBg1,
         position: "absolute",
         transform: "translateX(-50%)"
       },
-      [`${e}__item`]: {
+      [`${l}__item`]: {
         display: "flex",
         alignItems: "baseline"
       },
-      [`${e}--full`]: {
+      [`${l}--full`]: {
         width: "100%"
       },
-      [`${e}__label`]: {
+      [`${l}__label`]: {
         color: i.textColor3,
         flexShrink: 0,
         span: {
           display: "inline-block",
-          padding: "0 2px"
+          paddingInline: i.spaceXXS,
+          paddingBlock: 0
         }
       },
-      [`${e}__value`]: {
-        maxWidth: "300px",
+      [`${l}__value`]: {
+        maxWidth: i.apProductInfoMaxWidth,
         color: i.textColor3,
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap"
       },
-      [`${e}--link`]: {
+      [`${l}--link`]: {
         color: i.colorLink,
         cursor: "pointer"
       }
     }
   };
-}, n = o("ApProductInfo", (i) => [
-  l(i)
-]);
+}, r = e(
+  "ApProductInfo",
+  (i) => [o(i)],
+  {
+    apProductInfoImageSize: 44,
+    apProductInfoMaxWidth: 300
+  }
+);
 export {
-  n as default
+  r as default
 };

package/es/src/business/ap-radio-group/style/index.mjs

@@ -11,7 +11,7 @@ const i = (o) => {
         paddingInline: o.spaceLG,
         borderRadius: o.borderRadius,
         color: o.textColor2,
-        transition: "all 0.3s ease-in-out",
+        transition: `all ${o.motionDurationSlow} ease-in-out`,
         willChange: "background-color",
         "&:hover": {
           backgroundColor: o.colorBg2
@@ -23,7 +23,7 @@ const i = (o) => {
       }
     }
   };
-}, l = a(
+}, e = a(
   "ApRadioGroup",
   (o) => [i(o)],
   {
@@ -31,5 +31,5 @@ const i = (o) => {
   }
 );
 export {
-  l as default
+  e as default
 };

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

@@ -1,3 +1,9 @@
 import { ComputedRef } from 'vue';
+export type ApSelectLayoutToken = {
+    /**
+     * 选择布局左侧宽度
+     */
+    apSelectLayoutSideWidth: number;
+};
 declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

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