@aplus-frontend/ui 7.5.0 → 7.7.0

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

@@ -1,64 +1,58 @@
-import { genComponentStyleHook as t } from "../../../utils/cssinjs/index.mjs";
+import { genComponentStyleHook as e } from "../../../utils/cssinjs/index.mjs";
 const r = (o) => {
-  const { componentCls: e } = o;
+  const { componentCls: t } = o;
   return {
-    [e]: {
+    [t]: {
       display: "flex",
       alignItems: "center",
       width: "100%",
       ".copy-btn": {
         opacity: 0,
-        transition: "opacity 0.2s ease"
+        transition: `opacity ${o.motionDurationMid} ease`
       },
       "&:hover": {
         ".copy-btn": {
           opacity: 1
         }
       },
-      [`${e}__text`]: {
+      [`${t}__text`]: {
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
-        height: "18px",
-        lineHeight: "18px"
+        lineHeight: o.lineHeight
       },
-      [`${e}--text-major`]: {
+      [`${t}--text-major`]: {
         color: o.textColor1
       },
-      [`${e}--text-minor`]: {
+      [`${t}--text-minor`]: {
         color: o.textColor3
       },
-      [`${e}--text-link`]: {
+      [`${t}--text-link`]: {
         color: o.colorLink,
         cursor: "pointer",
         "&:hover": {
           color: o.colorLinkHover
         }
       },
-      [`${e}__copy-btn`]: {
+      [`${t}__copy-btn`]: {
         flexShrink: 0,
-        width: "16px",
-        marginInlineStart: "4px",
+        marginInlineStart: o.spaceXS,
         display: "flex",
         alignItems: "center",
-        ".user-frontend-icon": {
-          cursor: "pointer",
-          color: "#ABB7CC",
-          height: "14px",
-          lineHeight: "14px"
-        },
+        fontSize: o.fontSizeLG,
+        color: o.textColor4,
+        cursor: "pointer",
         "&:hover": {
           ".user-frontend-icon": {
-            cursor: "pointer",
             color: o.colorLink
           }
         }
       }
     }
   };
-}, i = t("ApCopy", (o) => [
+}, l = e("ApCopy", (o) => [
   r(o)
 ]);
 export {
-  i as default
+  l as default
 };

package/es/src/business/ap-descriptions/formatter/index.mjs

@@ -3,7 +3,7 @@ import { getTimeFormatToZone as d, toThousand as g } from "@aplus-frontend/utils
 import { isBoolean as h, merge as p, get as c, debounce as Y } from "lodash-unified";
 import { formatString as A } from "./utils.mjs";
 import { TypographyParagraph as b } from "@aplus-frontend/antdv";
-import { toDecimalMark as M } from "@fruits-chain/utils";
+import { toDecimalMark as M } from "../../../utils/format.mjs";
 function S({
   value: t
 }, n) {

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

@@ -11,7 +11,7 @@ const e = (t) => {
           paddingBlockEnd: "var(--ap-descriptions-item-padding-bottom, 16px)"
         },
         "th.ant-descriptions-item": {
-          paddingBlockEnd: "4px"
+          paddingBlockEnd: t.spaceXS
         },
         ".ant-descriptions-row:last-child": {
           ".ant-descriptions-item": {
@@ -19,7 +19,8 @@ const e = (t) => {
           }
         },
         ".ant-descriptions-item-label::after": {
-          marginInline: "4px 12px"
+          marginInlineStart: t.spaceXS,
+          marginInlineEnd: t.spaceLG
         }
       },
       [`${i}-item__ellipsis`]: {
@@ -30,7 +31,8 @@ const e = (t) => {
           flexShrink: 1,
           minWidth: 0,
           ".ant-typography": {
-            marginBlockEnd: 0
+            marginBlockEnd: 0,
+            flex: 1
           },
           ".ant-typography-ellipsis": {
             maxWidth: "100%"
@@ -49,7 +51,7 @@ const e = (t) => {
           color: t.textColor3,
           ".ap-descriptions-item-content__help": {
             fontSize: t.fontSizeLG,
-            marginInlineStart: "4px",
+            marginInlineStart: t.spaceXS,
             color: t.textColor3
           },
           ".ant-typography": {
@@ -66,9 +68,9 @@ const e = (t) => {
       }
     }
   };
-}, r = n("ApDescriptions", (t) => [
+}, a = n("ApDescriptions", (t) => [
   e(t)
 ]);
 export {
-  r as default
+  a as default
 };

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

@@ -14,12 +14,12 @@ const r = (o) => {
       cursor: "pointer",
       alignItems: "center",
       ".spin": {
-        marginInlineEnd: "5px"
+        marginInlineEnd: o.spaceXS
       },
       ".icon": {
         position: "relative",
         fontSize: o.fontSizeXL,
-        marginInlineEnd: "5px"
+        marginInlineEnd: o.spaceXS
       },
       ".text": {
         color: "var(--download-main-color)"
@@ -48,9 +48,9 @@ const r = (o) => {
       }
     }
   };
-}, a = l("ApDownload", (o) => [
+}, t = l("ApDownload", (o) => [
   r(o)
 ]);
 export {
-  a as default
+  t as default
 };

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/select-layout.vue2.mjs

@@ -57,9 +57,9 @@ const X = ["onClick"], se = /* @__PURE__ */ D({
                   open: k.value,
                   "onUpdate:open": n[0] || (n[0] = (l) => k.value = l)
                 }, {
-                  title: c(() => n[3] || (n[3] = [
-                    A("收起")
-                  ])),
+                  title: c(() => [...n[3] || (n[3] = [
+                    A("收起", -1)
+                  ])]),
                   default: c(() => [
                     u(e(G), { onClick: F })
                   ]),
@@ -118,9 +118,9 @@ const X = ["onClick"], se = /* @__PURE__ */ D({
               open: T.value,
               "onUpdate:open": n[2] || (n[2] = (l) => T.value = l)
             }, {
-              title: c(() => n[4] || (n[4] = [
-                A("展开")
-              ])),
+              title: c(() => [...n[4] || (n[4] = [
+                A("展开", -1)
+              ])]),
               default: c(() => [
                 u(e(H), { onClick: F })
               ]),

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;