@aplus-frontend/ui 7.0.0-beta.1 → 7.0.0-beta.3

package/es/src/ap-form/style/item.mjs

@@ -1,8 +1,8 @@
-import { genComponentStyleHook as t } from "../../utils/cssinjs/index.mjs";
-const r = (n) => {
-  const { componentCls: a, namespace: e } = n;
+import { genComponentStyleHook as a } from "../../utils/cssinjs/index.mjs";
+const i = (n) => {
+  const { componentCls: e, namespace: t } = n;
   return {
-    [a]: {
+    [e]: {
       // bordered
       "&--bordered": {
         boxSizing: "border-box",
@@ -12,7 +12,7 @@ const r = (n) => {
         ".ant-input-affix-wrapper": {
           padding: 0
         },
-        [`&:has(.${e}-batch-input-group):has(.ant-select)`]: {
+        [`&:has(.${t}-batch-input-group):has(.ant-select)`]: {
           ".ant-input-affix-wrapper": {
             paddingInlineEnd: n.space
           }
@@ -81,9 +81,9 @@ const r = (n) => {
         },
         "&:focus": {
           borderColor: n.activeColorBase,
-          boxShadow: `0 0 0 2px ${n.apFormBorderedShadowColor}`
+          boxShadow: "0 0 0 2px rgba(5, 155, 255, 0.1)"
         },
-        [`.${e}-batch-input-group-popover-input__popover`]: {
+        [`.${t}-batch-input-group-popover-input__popover`]: {
           width: "calc(100% + 12px)"
         }
       },
@@ -97,12 +97,12 @@ const r = (n) => {
       // focus
       "&--focused": {
         borderColor: n.activeColorBase,
-        boxShadow: `0 0 0 2px ${n.apFormBorderedShadowColor}`
+        boxShadow: "0 0 0 2px rgba(5, 155, 255, 0.1)"
       },
       // other
       ".ant-form-show-help": {
         ".ant-form-item-explain-error": {
-          fontsize: n.fontSize,
+          fontSize: n.fontSize,
           lineHeight: "16px"
         }
       },
@@ -124,12 +124,8 @@ const r = (n) => {
       }
     }
   };
-}, i = t(
-  "ApForm",
-  (n) => [r(n)],
-  { apFormBorderedShadowColor: "rgba(5, 155, 255, 0.1)" }
-);
+}, o = a("ApForm", (n) => [i(n)]);
 export {
-  i as default,
-  r as genApFormItemStyle
+  o as default,
+  i as genApFormItemStyle
 };

package/es/src/ap-form/style/modal-form.d.ts

@@ -1,5 +1,6 @@
 import { GenStyleFunc } from '../../design-token/interface';
+import { ApFormToken } from './token';
 import { Ref } from 'vue';
-export declare const genModalFormStyle: GenStyleFunc;
+export declare const genModalFormStyle: GenStyleFunc<ApFormToken>;
 declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
 export default _default;

package/es/src/ap-form/style/modal-form.mjs

@@ -1,32 +1,45 @@
-import { genComponentStyleHook as n } from "../../utils/cssinjs/index.mjs";
-const e = (t) => {
-  const { componentCls: o } = t;
+import { genComponentStyleHook as d } from "../../utils/cssinjs/index.mjs";
+const e = (o) => {
+  const { componentCls: a } = o;
   return {
-    [o]: {
+    [a]: {
       ".ant-modal-content": {
         padding: 0
       },
       ".ant-modal-header": {
-        padding: "15px 20px",
+        paddingInline: o.apFormModalHeaderPaddingInline,
+        paddingBlock: o.apFormModalHeaderPaddingBlock,
         borderBottom: "1px solid #E9EDF3",
         marginBottom: 0
       },
-      [`${o}__content`]: {
-        padding: "20px 20px 0px"
+      [`${a}__content`]: {
+        padding: o.apFormModalContentPadding
       },
-      [`${o}__footer`]: {
-        padding: "12px 20px"
+      [`${a}__footer`]: {
+        padding: o.apFormModalFooterPadding
       },
-      [`${o}__footer-admin`]: {
+      [`${a}__footer-admin`]: {
         borderTop: "1px solid #E9EDF3"
       },
       ".ant-modal-close": {
-        top: "16px"
+        top: `calc(${o.apFormModalHeaderPaddingBlock} - (${o.apFormModalCloseSize} - 22px) / 2)`,
+        width: o.apFormModalCloseSize,
+        height: o.apFormModalCloseSize
       }
     }
   };
-}, d = n("ApForm.Modal", (t) => [e(t)]);
+}, r = d(
+  "ApForm.Modal",
+  (o) => [e(o)],
+  {
+    apFormModalHeaderPaddingInline: 20,
+    apFormModalHeaderPaddingBlock: 15,
+    apFormModalContentPadding: "20px 20px 0px",
+    apFormModalFooterPadding: "12px 20px",
+    apFormModalCloseSize: 32
+  }
+);
 export {
-  d as default,
+  r as default,
   e as genModalFormStyle
 };

package/es/src/ap-form/style/search-form-sorter.d.ts

@@ -1,5 +1,6 @@
 import { GenStyleFunc } from '../../design-token/interface';
+import { ApFormToken } from './token';
 import { Ref } from 'vue';
-export declare const genSearchFormSorter: GenStyleFunc;
+export declare const genSearchFormSorter: GenStyleFunc<ApFormToken>;
 declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
 export default _default;

package/es/src/ap-form/style/search-form-sorter.mjs

@@ -1,12 +1,12 @@
 import { resetComponent as e } from "../../style/index.mjs";
-import { genComponentStyleHook as i } from "../../utils/cssinjs/index.mjs";
-import { genPopoverStyle as p } from "./search-form.mjs";
-const a = (r) => {
+import { genComponentStyleHook as a } from "../../utils/cssinjs/index.mjs";
+import { genPopoverStyle as t } from "./search-form.mjs";
+const i = (r) => {
   const { componentCls: o } = r;
   return {
     [o]: {
       [`${o}-content`]: {
-        width: "560px"
+        width: r.searchFormSorterWidth
       },
       [`${o}-header`]: {
         padding: `${r.spaceXL} ${r.spaceXL} 0px`,
@@ -23,7 +23,7 @@ const a = (r) => {
         },
         "&-action-wrapper": {
           padding: r.space,
-          margin: `calc(-${r.space})`,
+          margin: `calc(-1 * ${r.space})`,
           cursor: "pointer"
         },
         "&-reset-btn": {
@@ -35,14 +35,14 @@ const a = (r) => {
         display: "flex",
         flexDirection: "row",
         flexWrap: "wrap",
-        marginInlineStart: "-4px",
-        marginInlineEnd: "-4px",
-        rowGap: "8px"
+        marginInlineStart: `calc(${r.searchFormSorterItemGap} / -2)`,
+        marginInlineEnd: `calc(${r.searchFormSorterItemGap} / -2)`,
+        rowGap: r.searchFormSorterItemGap
       },
       [`${o}-sorter-item`]: {
         flex: "0 0 33.333333%",
         maxWidth: "33.333333%",
-        paddingInline: r.spaceXS,
+        paddingInline: `calc(${r.searchFormSorterItemGap} / 2)`,
         "> div": {
           border: `1px solid ${r.colorBg1}`,
           borderRadius: r.borderRadius,
@@ -72,10 +72,17 @@ const a = (r) => {
         textOverflow: "ellipsis"
       }
     },
-    ...p(r)
+    ...t(r)
   };
-}, c = i("ApForm.SearchFormSorter", (r) => [a(r)]);
+}, s = a(
+  "ApForm.SearchFormSorter",
+  (r) => [i(r)],
+  {
+    searchFormSorterWidth: 560,
+    searchFormSorterItemGap: 8
+  }
+);
 export {
-  c as default,
-  a as genSearchFormSorter
+  s as default,
+  i as genSearchFormSorter
 };

package/es/src/ap-form/style/token.d.ts

@@ -1,3 +1,27 @@
 export type ApFormToken = {
-    apFormBorderedShadowColor: string;
+    /**
+     * 对话框表单头部边距
+     */
+    apFormModalHeaderPaddingInline: number;
+    apFormModalHeaderPaddingBlock: number;
+    /**
+     * 对话框表单内容区边距
+     */
+    apFormModalContentPadding: string | number;
+    /**
+     * 对话框表单底部Footer区域边距
+     */
+    apFormModalFooterPadding: string | number;
+    /**
+     * 关闭按钮的尺寸
+     */
+    apFormModalCloseSize: number;
+    /**
+     * 查询表单排序弹框宽度
+     */
+    searchFormSorterWidth: number;
+    /**
+     * 查询表单排序元素间距
+     */
+    searchFormSorterItemGap: number;
 };

package/es/src/ap-grid/hooks/use-table-style.mjs

@@ -8,7 +8,7 @@ const x = () => {
       "--vxe-ui-table-row-checkbox-checked-background-color": e.controlItemBgActive,
       "--vxe-ui-table-row-hover-checkbox-checked-background-color": e.controlItemBgActiveHover,
       "--vxe-ui-font-primary-color": e.colorPrimary,
-      "--vxe-ui-table-header-background-color": "var(--ap-table-header-bg)",
+      "--vxe-ui-table-header-background-color": "var(--table-header-bg)",
       "--vxe-ui-table-cell-padding-default": "12px",
       "--vxe-ui-table-cell-padding-medium": "9px",
       "--vxe-ui-table-row-height-medium": "36px",

package/es/src/ap-grid/index.vue.mjs

@@ -535,8 +535,8 @@ const lo = /* @__PURE__ */ Je({
             direction: "horizontal",
             "scroll-container": Re.value,
             "extra-size": -4.2,
-            "bar-color": "var(--ap-scrollbar-thumb-color-base)",
-            "track-color": "var(--ap-table-header-bg, #f2f6f9)"
+            "bar-color": "var(--scrollbar-thumb-color-base)",
+            "track-color": "var(--table-header-bg, #f2f6f9)"
           }, null, 8, ["scroll-container"])) : y("", !0),
           e.pagination !== !1 ? (s(), d(t(pt), S({
             key: 1,

package/es/src/ap-grid/style/index.d.ts

@@ -1,5 +1,8 @@
 import { GenStyleFunc } from '../../design-token/interface';
 import { Ref } from 'vue';
-export declare const genApGridStyle: GenStyleFunc;
+export type ApGridToken = {
+    apGridFixedScrollingBoxShadowColor: string;
+};
+export declare const genApGridStyle: GenStyleFunc<ApGridToken>;
 declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import { genSettingTriggerBtnStyle as r } from "../../ap-table/style/index.mjs";
-import { multiRows as o, resetScrollbar as p } from "../../style/index.mjs";
-import { genComponentStyleHook as d } from "../../utils/cssinjs/index.mjs";
+import { multiRows as o, resetScrollbar as d } from "../../style/index.mjs";
+import { genComponentStyleHook as p } from "../../utils/cssinjs/index.mjs";
 import { aplusApGridIconFont as c } from "./font.mjs";
 const g = (e) => {
   const { componentCls: i, namespace: t } = e, l = `${i}-vxe-wrapper`, a = `${i}-pagination-wrapper`, n = `.${t}-scroll-bar`;
@@ -8,7 +8,7 @@ const g = (e) => {
     c,
     {
       [i]: {
-        ...p(e),
+        ...d(e),
         ".vxe-table--render-default.size--medium .vxe-body--column.is--padding div.vxe-cell": {
           minHeight: "unset !important",
           padding: "9px 12px",
@@ -152,7 +152,6 @@ const g = (e) => {
           "&__title": {
             ...o(e),
             fontWeight: "bold",
-            textAlign: "right",
             "&--single": {
               flex: "unset"
             }
@@ -209,9 +208,13 @@ const g = (e) => {
       }
     }
   ];
-}, m = d("ApGrid", (e) => [
-  g(e)
-]);
+}, m = p(
+  "ApGrid",
+  (e) => [g(e)],
+  {
+    apGridFixedScrollingBoxShadowColor: "#dae0e7"
+  }
+);
 export {
   m as default,
   g as genApGridStyle

package/es/src/ap-table/ap-table.vue2.mjs

@@ -485,8 +485,8 @@ const Mr = /* @__PURE__ */ De({
         ref: R,
         "scroll-container": D.value?.table?.scrollBodyRef,
         direction: "horizontal",
-        "bar-color": "var(--ap-scrollbar-thumb-color-base)",
-        "track-color": "var(--ap-table-header-bg, #f2f6f9)"
+        "bar-color": "var(--scrollbar-thumb-color-base)",
+        "track-color": "var(--table-header-bg, #f2f6f9)"
       }, null, 8, ["scroll-container"])]),
       key: "0"
     } : void 0, ne(o(ue)(g, ["title", "searchFormExtra", "headerCell", "summary"]), (t, d) => ({

package/es/src/ap-table/utils.mjs

@@ -1,11 +1,11 @@
 import { isVNode as T, createVNode as s, mergeProps as a, cloneVNode as h, createTextVNode as C, Fragment as j } from "vue";
-import { isObject as d, isArray as u, isUndefined as E, isFunction as g, omit as O, isBoolean as v, isString as x, isEqual as F, sortBy as m, isPlainObject as y, every as N, isEmpty as R } from "lodash-unified";
+import { isObject as d, isArray as u, isUndefined as x, isFunction as g, omit as E, isBoolean as O, isString as v, isEqual as F, sortBy as m, isPlainObject as y, every as N, isEmpty as R } from "lodash-unified";
 import { apTableRenderItemMap as P, apTableFormItemMap as S } from "./constants.mjs";
 import { isType as I } from "@fruits-chain/utils";
 import "../ap-form/index.mjs";
-import { Tooltip as V } from "@aplus-frontend/antdv";
-import { QuestionCircleOutlined as w } from "@ant-design/icons-vue";
-import A from "../ap-form/item/index.vue.mjs";
+import { Tooltip as A } from "@aplus-frontend/antdv";
+import { QuestionCircleOutlined as V } from "@ant-design/icons-vue";
+import w from "../ap-form/item/index.vue.mjs";
 function M(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !T(e);
 }
@@ -72,7 +72,7 @@ const W = (e) => {
       });
     }
   }), t;
-}, X = (e) => E(e) || e < 0 ? 0 : e;
+}, X = (e) => x(e) || e < 0 ? 0 : e;
 function B(e, t) {
   return !e || !g(e) ? e : e(t);
 }
@@ -104,7 +104,7 @@ function ee(e, t) {
   const o = t?.[e.valueType];
   return () => {
     const r = o?.renderFormItem?.(e.fieldProps.field);
-    return r ? s(A, a(e.fieldProps, {
+    return r ? s(w, a(e.fieldProps, {
       span: e.span
     }), M(r) ? r : {
       default: () => [r]
@@ -118,7 +118,7 @@ function te(e, t) {
     value: i ? t.index + 1 : t.value
   };
   return e.valueEnum && (o.valueEnum = e.valueEnum), {
-    ...O(o, ["request"]),
+    ...E(o, ["request"]),
     ...f
   };
 }
@@ -126,7 +126,7 @@ function ne(e) {
   const t = {
     ...e
   };
-  return v(e.filters) && e.filters && e.valueEnum && (t.filters = b(e.valueEnum)), t;
+  return O(e.filters) && e.filters && e.valueEnum && (t.filters = b(e.valueEnum)), t;
 }
 function re(e, t) {
   const n = t || {};
@@ -151,8 +151,11 @@ function ie(e, t, n, o) {
   }), i = r?.filter((l) => l.type !== Symbol.for("v-cmt")) || [];
   if (r && i.length > 0)
     return r;
-  const c = x(e.title) ? s("span", {
+  const c = v(e.title) ? s("span", {
     class: t,
+    style: {
+      textAlign: e.align || "left"
+    },
     title: e.title
   }, [e._requireMark ? s("span", {
     style: {
@@ -166,12 +169,12 @@ function ie(e, t, n, o) {
       alignItems: "center",
       maxWidth: "100%"
     }
-  }, [c, s(V, {
+  }, [c, s(A, {
     title: p,
     placement: "bottom",
     getPopupContainer: (l) => l.closest(".ant-table") || l.closest(".ant-modal") || l.closest(".vxe-table") || document.body
   }, {
-    default: () => [s(w, {
+    default: () => [s(V, {
       style: {
         paddingInline: "4px",
         color: o,

package/es/src/ap-tag/ap-tag.vue.mjs

@@ -15,7 +15,7 @@ const k = ["title"], G = /* @__PURE__ */ $({
     fixedWidth: { type: Boolean, default: !1 }
   },
   setup(o) {
-    const e = o, l = I("uiMode"), { b: r, bm: a } = W("tag"), c = z("tag");
+    const e = o, l = I("uiMode"), { b: a, bm: r } = W("tag"), c = z("tag");
     function s(t, p) {
       t.length === 4 && (t = `#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`);
       const f = parseInt(t.slice(1, 3), 16), g = parseInt(t.slice(3, 5), 16), y = parseInt(t.slice(5, 7), 16), S = Math.round(p * 255).toString(16).padStart(2, "0");
@@ -26,13 +26,14 @@ const k = ["title"], G = /* @__PURE__ */ $({
       "--tag-main-color-opacity": s(e.color, 0.06),
       "--tag-main-color-background": s(e.color, 0.15)
     })), u = n(() => [
-      r("wrapper"),
-      r(`wrapper-${e.type}`),
-      a("wrapper", e.size),
+      a(),
+      a("wrapper"),
+      a(`wrapper-${e.type}`),
+      r("wrapper", e.size),
       c.value
     ].filter(Boolean)), m = n(() => {
-      const t = [r("inner-wrapper"), a("inner-wrapper", e.size)];
-      return e.disabled && (l.value === "aplus" ? t.push(a("inner-wrapper", "disabled")) : t.push(a("inner-wrapper", "disabled-admin"))), t;
+      const t = [a("inner-wrapper"), r("inner-wrapper", e.size)];
+      return e.disabled && (l.value === "aplus" ? t.push(r("inner-wrapper", "disabled")) : t.push(r("inner-wrapper", "disabled-admin"))), t;
     });
     return (t, p) => (w(), b("span", {
       style: B(d.value),

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

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

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

@@ -1,6 +1,7 @@
-import { genComponentStyleHook as n } from "../../../utils/cssinjs/index.mjs";
+import { genComponentStyleHook as e } from "../../../utils/cssinjs/index.mjs";
+import { defaultToken as n } from "./token.mjs";
 const r = (o) => {
-  const { componentCls: t } = o, e = `${t}__file-area`;
+  const { componentCls: t } = o;
   return {
     [t]: {
       [`${t}__suffix`]: {
@@ -13,17 +14,17 @@ const r = (o) => {
         padding: 0,
         height: "min-content"
       },
-      [e]: {
+      [`${t}__file-area`]: {
         marginTop: "12px",
-        [`${e}--border`]: {
-          border: "1px dashed var(--ap-border-color-base)",
+        "&--border": {
+          border: `1px dashed ${o.borderColorBase}`,
           padding: "12px",
           borderRadius: "4px"
         },
-        [`${e}-content`]: {
+        "&-content": {
           display: "grid",
           gap: "16px 80px",
-          gridTemplateColumns: "var(--ap-appendix-column,repeat(2, 1fr))",
+          gridTemplateColumns: o.apAppendixColumn,
           "&-item": {
             overflow: "hidden",
             userSelect: "none",
@@ -38,7 +39,7 @@ const r = (o) => {
               marginRight: "8px",
               svg: {
                 width: "16px",
-                color: "var(--ap-text-color-4)"
+                color: o.textColor4
               }
             },
             "&-file-name": {
@@ -50,13 +51,13 @@ const r = (o) => {
               ".ant-typography": {
                 fontSize: o.fontSize,
                 lineHeight: o.lineHeight,
-                color: "var(--ap-text-color-2)",
+                color: o.textColor2,
                 transition: "color 0.2s"
               }
             },
             "&-content:hover": {
               ".ant-typography": {
-                color: "var(--ap-color-link)"
+                color: o.colorLink
               }
             },
             "&--loading": {
@@ -64,11 +65,11 @@ const r = (o) => {
                 cursor: "not-allowed"
               },
               ".ant-typography": {
-                color: "var(--ap-text-color-4)"
+                color: o.textColor4
               },
               "&-content:hover": {
                 ".ant-typography": {
-                  color: "var(--ap-text-color-4)"
+                  color: o.textColor4
                 }
               }
             }
@@ -85,10 +86,12 @@ const r = (o) => {
       }
     }
   };
-}, i = n("ApAppendix", (o) => [
-  r(o)
-]);
+}, l = e(
+  "ApAppendix",
+  (o) => [r(o)],
+  n
+);
 export {
-  i as default,
+  l as default,
   r as genProCardStyle
 };

package/es/src/business/ap-appendix/style/token.d.ts

@@ -0,0 +1,4 @@
+export type AppendixToken = {
+    apAppendixColumn: string;
+};
+export declare const defaultToken: AppendixToken;

package/es/src/business/ap-appendix/style/token.mjs

@@ -0,0 +1,6 @@
+const e = {
+  apAppendixColumn: "repeat(2, 1fr)"
+};
+export {
+  e as defaultToken
+};