@aplus-frontend/ui 7.0.0 → 7.1.0

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

@@ -1,48 +1,48 @@
-import { resetComponent as e } from "../../style/index.mjs";
-import { genComponentStyleHook as a } from "../../utils/cssinjs/index.mjs";
+import { resetComponent as o } from "../../style/index.mjs";
+import { genComponentStyleHook as i } from "../../utils/cssinjs/index.mjs";
 import { genPopoverStyle as t } from "./search-form.mjs";
-const i = (r) => {
-  const { componentCls: o } = r;
+const l = (r) => {
+  const { componentCls: e } = r, a = r.calc("100%").div(r.searchFormSorterCountPerRow).equal();
   return {
-    [o]: {
-      [`${o}-content`]: {
+    [e]: {
+      [`${e}-content`]: {
         width: r.searchFormSorterWidth
       },
-      [`${o}-header`]: {
+      [`${e}-header`]: {
         padding: `${r.spaceXL} ${r.spaceXL} 0px`,
         "&-title": {
-          ...e(r),
-          color: r.textColor2,
+          ...o(r),
+          color: r.textColor1,
           fontWeight: 700,
           display: "inline-block",
           paddingBottom: r.spaceXS
         },
         "&-desc": {
-          ...e(r),
+          ...o(r),
           color: r.textColor3
         },
         "&-action-wrapper": {
           padding: r.space,
-          margin: `calc(-1 * ${r.space})`,
+          margin: r.calc(-1).mul(r.space).equal(),
           cursor: "pointer"
         },
         "&-reset-btn": {
-          ...e(r),
+          ...o(r),
           color: r.colorLink
         }
       },
-      [`${o}-sorter-wrapper`]: {
+      [`${e}-sorter-wrapper`]: {
         display: "flex",
         flexDirection: "row",
         flexWrap: "wrap",
-        marginInlineStart: `calc(${r.searchFormSorterItemGap} / -2)`,
-        marginInlineEnd: `calc(${r.searchFormSorterItemGap} / -2)`,
+        marginInlineStart: r.calc(r.searchFormSorterItemGap).div(-2).equal(),
+        marginInlineEnd: r.calc(r.searchFormSorterItemGap).div(-2).equal(),
         rowGap: r.searchFormSorterItemGap
       },
-      [`${o}-sorter-item`]: {
-        flex: "0 0 33.333333%",
-        maxWidth: "33.333333%",
-        paddingInline: `calc(${r.searchFormSorterItemGap} / 2)`,
+      [`${e}-sorter-item`]: {
+        flex: `0 0 ${a}`,
+        maxWidth: a,
+        paddingInline: r.calc(r.searchFormSorterItemGap).div(2).equal(),
         "> div": {
           border: `1px solid ${r.colorBg1}`,
           borderRadius: r.borderRadius,
@@ -62,10 +62,10 @@ const i = (r) => {
           display: "none"
         }
       },
-      [`${o}-sorter-item-text`]: {
-        ...e(r),
+      [`${e}-sorter-item-text`]: {
+        ...o(r),
         paddingInlineStart: r.spaceXS,
-        color: r.textColor2,
+        color: r.textColor1,
         maxWidth: "100%",
         whiteSpace: "nowrap",
         overflow: "hidden",
@@ -74,15 +74,19 @@ const i = (r) => {
     },
     ...t(r)
   };
-}, s = a(
+}, d = i(
   "ApForm.SearchFormSorter",
-  (r) => [i(r)],
+  (r) => [l(r)],
   {
     searchFormSorterWidth: 560,
-    searchFormSorterItemGap: 8
+    searchFormSorterItemGap: 8,
+    searchFormSorterCountPerRow: 3
+  },
+  {
+    skipUnit: ["searchFormSorterCountPerRow"]
   }
 );
 export {
-  s as default,
-  i as genSearchFormSorter
+  d as default,
+  l as genSearchFormSorter
 };

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

@@ -12,6 +12,10 @@ export type ApFormToken = {
      * 对话框表单底部Footer区域边距
      */
     apFormModalFooterPadding: string | number;
+    /**
+     * 对话框表单底部Footer上边框
+     */
+    apFormModalFooterBorderTop: string;
     /**
      * 关闭按钮的尺寸
      */
@@ -24,4 +28,8 @@ export type ApFormToken = {
      * 查询表单排序元素间距
      */
     searchFormSorterItemGap: number;
+    /**
+     * 查询表单排序每一行显示的元素
+     */
+    searchFormSorterCountPerRow: number;
 };

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

@@ -139,13 +139,13 @@ const g = (e) => {
           backgroundColor: "var(--vxe-ui-loading-background-color)"
         },
         [`${i}-pagination-count-text`]: {
-          color: e.textColor2
+          color: e.textColor1
         },
         [`${i}-pagination--total-right`]: {
           paddingInlineStart: "12px"
         },
         [`${i}-pagination-total-wrapper`]: {
-          color: e.textColor1
+          color: e.textColor2
         },
         // ApGrid中表格表头的样式
         [`${i}-table-header`]: {
@@ -203,7 +203,7 @@ const g = (e) => {
         },
         "div.vxe-cell--tree-btn > i": {
           fontSize: e.fontSizeSM,
-          color: e.textColor2
+          color: e.textColor1
         }
       }
     }

package/es/src/ap-pro-card/style/statistic.mjs

@@ -51,7 +51,7 @@ const o = (t) => {
         marginTop: "4px"
       },
       ".ant-statistic-title": {
-        color: t.textColor1,
+        color: t.textColor2,
         fontSize: t.fontSize,
         lineHeight: t.lineHeight,
         marginBlockEnd: "8px"
@@ -94,7 +94,7 @@ const o = (t) => {
           fontWeight: "500"
         },
         ".ant-statistic-content": {
-          color: t.textColor2,
+          color: t.textColor1,
           fontSize: t.fontSize,
           lineHeight: t.lineHeight,
           fontWeight: "500"
@@ -111,7 +111,7 @@ const o = (t) => {
           fontWeight: "500"
         },
         ".ant-statistic-content": {
-          color: t.textColor2,
+          color: t.textColor1,
           fontSize: t.fontSize,
           lineHeight: t.lineHeight,
           fontWeight: "500"

package/es/src/ap-pro-card/style/token.mjs

@@ -12,7 +12,7 @@ const r = {
   apProCardTooltipColor: "#8896b0",
   apProCardHeaderTitleFontSize: "12px",
   apProCardHeaderTitleFontColor: "#182948",
-  apProCardAreaColor: "#f1f7ff",
+  apProCardAreaColor: "#f7f8fa",
   apProCardSplitLineHeight: "100%",
   apProCardDividerLineHeight: "60%"
 };

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

@@ -126,13 +126,13 @@ const r = (t) => ({
         marginBlockEnd: 0
       },
       "&-pagination-count-text": {
-        color: t.textColor2
+        color: t.textColor1
       },
       "&-pagination--total-right": {
         paddingLeft: "12px"
       },
       "&-pagination-total-wrapper": {
-        color: t.textColor1
+        color: t.textColor2
       },
       // ApTable的header区域
       [`${a}-header`]: {

package/es/src/ap-table/style/setting.mjs

@@ -16,7 +16,7 @@ const r = (e) => {
         [`.${l}-ap-grid-table-header__title`]: {
           ...n(e),
           fontWeight: "normal",
-          color: e.textColor2
+          color: e.textColor1
         },
         [`.${l}-ag-grid-table-header__title`]: {
           ...n(e)
@@ -169,7 +169,7 @@ const r = (e) => {
           "&-title": {
             ...i(e),
             fontWeight: "bold",
-            color: e.textColor2
+            color: e.textColor1
           }
         },
         "&-content": {

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

@@ -1,19 +1,19 @@
-import { defineComponent as G, ref as C, computed as n, unref as f, watch as I, nextTick as L, onMounted as A, onUnmounted as F, createBlock as g, openBlock as a, mergeProps as w, withCtx as d, createElementVNode as t, normalizeStyle as b, normalizeClass as k, createElementBlock as _, createCommentVNode as U, Fragment as q, renderList as H, toDisplayString as W, renderSlot as J, createTextVNode as K } from "vue";
-import { Tooltip as O } from "@aplus-frontend/antdv";
-import Q from "@ant-design/icons-vue";
+import { defineComponent as j, ref as x, computed as n, unref as p, watch as I, nextTick as L, onMounted as A, onUnmounted as F, createBlock as g, openBlock as a, mergeProps as w, withCtx as v, createElementVNode as t, normalizeStyle as C, normalizeClass as k, createElementBlock as _, createCommentVNode as G, Fragment as M, renderList as U, toDisplayString as b, renderSlot as q, createTextVNode as H } from "vue";
+import { Tooltip as J } from "@aplus-frontend/antdv";
+import K from "@ant-design/icons-vue";
 import "./ap-tag.vue2.mjs";
 import "../config-provider/index.mjs";
-import { omit as X } from "lodash-unified";
-import { getTextWidth as T } from "./utils.mjs";
+import { omit as O } from "lodash-unified";
+import { getTextWidth as W } from "./utils.mjs";
 import "../hooks/index.mjs";
-import { useDevWarning as Y } from "../utils/warning.mjs";
-import Z from "./style/group.mjs";
-import { useLocale as ee } from "../config-provider/hooks/use-locale.mjs";
-import { useGlobalConfig as te } from "../config-provider/hooks/use-global-config.mjs";
-import { useNamespace as le } from "../config-provider/hooks/use-namespace.mjs";
-import { useResize as oe } from "../hooks/useResize.mjs";
-import ie from "./ap-tag.vue.mjs";
-const we = /* @__PURE__ */ G({
+import { useDevWarning as Q } from "../utils/warning.mjs";
+import X from "./style/group.mjs";
+import { useToken as Y } from "../config-provider/hooks/use-token.mjs";
+import { useLocale as Z } from "../config-provider/hooks/use-locale.mjs";
+import { useNamespace as ee } from "../config-provider/hooks/use-namespace.mjs";
+import { useResize as te } from "../hooks/useResize.mjs";
+import oe from "./ap-tag.vue.mjs";
+const xe = /* @__PURE__ */ j({
   __name: "ap-tag-group",
   props: {
     list: { default: () => [] },
@@ -21,92 +21,92 @@ const we = /* @__PURE__ */ G({
     ellipsisColor: {},
     ellipsis: { default: () => ({}) }
   },
-  setup(z) {
-    const { t: V } = ee(), o = z, B = Y("ApTagGroup"), v = te("uiMode"), { b: E, bm: h } = le("tag-group"), D = Z("tag-group"), r = C(), { observe: M, unobserve: P } = oe(), i = n(() => ({
+  setup(T) {
+    const { t: z } = Z(), l = T, { token: V } = Y(), B = Q("ApTagGroup"), { b: d } = ee("tag-group"), E = X("tag-group"), i = x(), { observe: D, unobserve: P } = te(), r = n(() => ({
       ...{
-        iconColor: v.value === "aplus" ? "#182948" : "#333",
+        iconColor: V.value?.textColor1,
         symbol: "icon",
-        text: V("ap.common.more")
+        text: z("ap.common.more")
       },
-      ...o.ellipsis
-    })), S = n(() => i.value.tooltip && typeof i.value.tooltip == "object" ? X(i.value.tooltip, ["trigger", "title"]) : {}), p = n(() => f(c) < o.list.length), c = C(0), N = n(() => o.list.map((e) => e.text).join("、")), R = n(() => [E(), D.value].filter(Boolean)), $ = n(() => v.value === "aplus" ? [h("ellipsis-text", "aplus")] : [h("ellipsis-text", "admin")]), y = () => {
-      let e = 0, l = 0;
-      if (!r.value) return;
-      const u = r.value.offsetWidth;
-      for (let s of o.list) {
-        const m = s.size === "small" ? 8 : 12, x = T(
+      ...l.ellipsis
+    })), S = n(() => r.value.tooltip && typeof r.value.tooltip == "object" ? O(r.value.tooltip, ["trigger", "title"]) : {}), c = n(() => p(m) < l.list.length), m = x(0), N = n(() => l.list.map((e) => e.text).join("、")), R = n(() => [d(), E.value].filter(Boolean)), h = () => {
+      let e = 0, o = 0;
+      if (!i.value) return;
+      const u = i.value.offsetWidth;
+      for (let s of l.list) {
+        const f = s.size === "small" ? 8 : 12, y = W(
           s.size === "large" ? 14 : 12,
           s.text
-        ) + m + o.space;
-        if (e += x, e > u) {
-          e -= x;
+        ) + f + l.space;
+        if (e += y, e > u) {
+          e -= y;
           break;
         }
-        l++;
+        o++;
       }
-      if (l < o.list.length) {
-        const m = T(12, i.value.text);
-        o.ellipsis.symbol === "icon" ? e += 16 : e += m, e > u && l--;
+      if (o < l.list.length) {
+        const f = W(12, r.value.text);
+        l.ellipsis.symbol === "icon" ? e += 16 : e += f, e > u && o--;
       }
-      c.value = l;
+      m.value = o;
     };
     I(
-      () => o.list,
-      (e, l) => {
-        e !== l && L(() => {
-          y();
+      () => l.list,
+      (e, o) => {
+        e !== o && L(() => {
+          h();
         });
       },
       {
         immediate: !0
       }
     );
-    const j = () => {
-      y();
+    const $ = () => {
+      h();
     };
     return A(() => {
       [["ellipsisColor", "ellipse.color"]].forEach(
-        ([e, l]) => {
+        ([e, o]) => {
           B.deprecated(
-            !o[e],
+            !l[e],
             e,
-            l
+            o
           );
         }
-      ), r.value && M(r.value, j);
+      ), i.value && D(i.value, $);
     }), F(() => {
-      r.value && P(r.value);
-    }), (e, l) => (a(), g(f(O), w({ trigger: "hover" }, S.value), {
-      title: d(() => [
-        J(e.$slots, "tooltip", { tags: e.list }, () => [
-          K(W(N.value), 1)
+      i.value && P(i.value);
+    }), (e, o) => (a(), g(p(J), w({ trigger: "hover" }, S.value), {
+      title: v(() => [
+        q(e.$slots, "tooltip", { tags: e.list }, () => [
+          H(b(N.value), 1)
         ])
       ]),
-      default: d(() => [
+      default: v(() => [
         t("div", {
           ref_key: "container",
-          ref: r,
+          ref: i,
           class: k(R.value),
-          style: b({
-            pointerEvents: p.value ? "auto" : "none"
+          style: C({
+            pointerEvents: c.value ? "auto" : "none"
             // opacity: isUpdating ? '0' : '1'
           })
         }, [
-          (a(!0), _(q, null, H(e.list, (u, s) => (a(), g(ie, w({ ref_for: !0 }, u, {
+          (a(!0), _(M, null, U(e.list, (u, s) => (a(), g(oe, w({ ref_for: !0 }, u, {
             key: s,
             style: {
-              display: s >= c.value ? "none" : "inline-flex",
+              display: s >= m.value ? "none" : "inline-flex",
               marginRight: `${e.space}px`
             }
           }), null, 16, ["style"]))), 128)),
-          p.value && i.value.symbol === "icon" ? (a(), g(f(Q), {
+          c.value && r.value.symbol === "icon" ? (a(), g(p(K), {
             key: 0,
-            style: b({
-              color: e.ellipsisColor || i.value.iconColor,
+            style: C({
+              color: e.ellipsisColor || r.value.iconColor,
               cursor: "pointer"
             })
           }, {
-            component: d(() => l[0] || (l[0] = [
+            component: v(() => o[0] || (o[0] = [
               t("svg", {
                 xmlns: "http://www.w3.org/2000/svg",
                 "xmlns:xlink": "http://www.w3.org/1999/xlink",
@@ -162,11 +162,11 @@ const we = /* @__PURE__ */ G({
               ], -1)
             ])),
             _: 1
-          }, 8, ["style"])) : p.value && i.value.symbol === "text" ? (a(), _("span", {
+          }, 8, ["style"])) : c.value && r.value.symbol === "text" ? (a(), _("span", {
             key: 1,
-            class: k($.value),
+            class: k(p(d)("ellipsis-text")),
             style: { cursor: "pointer" }
-          }, W(i.value.text), 3)) : U("", !0)
+          }, b(r.value.text), 3)) : G("", !0)
         ], 6)
       ]),
       _: 3
@@ -174,5 +174,5 @@ const we = /* @__PURE__ */ G({
   }
 });
 export {
-  we as default
+  xe as default
 };

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

@@ -1,9 +1,8 @@
-import { defineComponent as $, computed as n, createElementBlock as b, openBlock as w, normalizeClass as i, normalizeStyle as B, createElementVNode as _, toDisplayString as v } from "vue";
+import { defineComponent as S, computed as n, createElementBlock as $, openBlock as b, normalizeClass as i, normalizeStyle as w, createElementVNode as B, toDisplayString as _ } from "vue";
 import "../config-provider/index.mjs";
 import z from "./style/index.mjs";
-import { useGlobalConfig as I } from "../config-provider/hooks/use-global-config.mjs";
-import { useNamespace as W } from "../config-provider/hooks/use-namespace.mjs";
-const k = ["title"], G = /* @__PURE__ */ $({
+import { useNamespace as I } from "../config-provider/hooks/use-namespace.mjs";
+const v = ["title"], A = /* @__PURE__ */ S({
   name: "ApTag",
   __name: "ap-tag",
   props: {
@@ -15,37 +14,37 @@ const k = ["title"], G = /* @__PURE__ */ $({
     fixedWidth: { type: Boolean, default: !1 }
   },
   setup(o) {
-    const e = o, l = I("uiMode"), { b: a, bm: r } = W("tag"), c = z("tag");
+    const e = o, { b: a, bm: r } = I("tag"), l = 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");
-      return `#${f.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${y.toString(16).padStart(2, "0")}${S}`;
+      const m = parseInt(t.slice(1, 3), 16), f = parseInt(t.slice(3, 5), 16), g = parseInt(t.slice(5, 7), 16), y = Math.round(p * 255).toString(16).padStart(2, "0");
+      return `#${m.toString(16).padStart(2, "0")}${f.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${y}`;
     }
-    const d = n(() => ({
+    const c = n(() => ({
       "--tag-main-color": e.color,
       "--tag-main-color-opacity": s(e.color, 0.06),
       "--tag-main-color-background": s(e.color, 0.15)
-    })), u = n(() => [
+    })), d = n(() => [
       a(),
       a("wrapper"),
       a(`wrapper-${e.type}`),
       r("wrapper", e.size),
-      c.value
-    ].filter(Boolean)), m = n(() => {
+      l.value
+    ].filter(Boolean)), u = n(() => {
       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 e.disabled && t.push(r("inner-wrapper", "disabled")), t;
     });
-    return (t, p) => (w(), b("span", {
-      style: B(d.value),
+    return (t, p) => (b(), $("span", {
+      style: w(c.value),
       title: t.text,
-      class: i(u.value)
+      class: i(d.value)
     }, [
-      _("span", {
-        class: i(m.value)
-      }, v(t.text), 3)
-    ], 14, k));
+      B("span", {
+        class: i(u.value)
+      }, _(t.text), 3)
+    ], 14, v));
   }
 });
 export {
-  G as default
+  A as default
 };

package/es/src/ap-tag/style/group.mjs

@@ -9,14 +9,8 @@ const n = (e) => {
       whiteSpace: "nowrap",
       alignItems: "center",
       [`${o}-ellipsis-text`]: {
-        "&--admin": {
-          fontSize: e.fontSize,
-          color: "#333"
-        },
-        "&--aplus": {
-          fontSize: e.fontSize,
-          color: "#182948"
-        }
+        fontSize: e.fontSize,
+        color: e.textColor1
       }
     }
   };

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

@@ -1,13 +1,13 @@
 import { genComponentStyleHook as l } from "../../utils/cssinjs/index.mjs";
 const a = (o) => {
-  const { componentCls: i } = o, e = `${i}-wrapper`, r = `${i}-inner-wrapper`;
+  const { componentCls: e } = o, r = `${e}-wrapper`, i = `${e}-inner-wrapper`;
   return {
-    [e]: {
+    [r]: {
       textWrap: "nowrap",
       whiteSpace: "nowrap",
       display: "inline-flex",
       maxWidth: "100%",
-      [r]: {
+      [i]: {
         borderRadius: o.borderRadius,
         boxSizing: "border-box",
         overflow: "hidden",
@@ -31,43 +31,34 @@ const a = (o) => {
         }
       }
     },
-    [`${e}-purely`]: {
+    [`${r}-purely`]: {
       "& > *": {
         backgroundColor: "var(--tag-main-color-background)",
-        color: o.textColor2
-      },
-      [`${r}--disabled`]: {
-        backgroundColor: "rgba(#8896b0,0.15)"
+        color: o.textColor1
       },
-      [`${r}--disabled-admin`]: {
-        backgroundColor: "rgba(#333,0.15)"
+      [`${i}--disabled`]: {
+        backgroundColor: `color-mix(in srgb, ${o.textColor3} 15%, white)`
       }
     },
-    [`${e}-border`]: {
+    [`${r}-border`]: {
       "& > *": {
         outline: "1px solid var(--tag-main-color)",
         outlineOffset: "-1px",
         backgroundColor: "var(--tag-main-color-opacity)",
         color: "var(--tag-main-color)"
       },
-      [`${r}--disabled`]: {
-        outline: "1px solid #DEE4ED",
+      [`${i}--disabled`]: {
+        outline: `1px solid ${o.borderColorBase}`,
         outlineOffset: "-1px",
-        backgroundColor: "#526a900f",
-        color: "#8896b0"
-      },
-      [`${r}--disabled-admin`]: {
-        outline: "1px solid #d9d9d9",
-        outlineOffset: "-1px",
-        backgroundColor: "#9999990f",
-        color: "#999"
+        backgroundColor: `color-mix(in srgb, ${o.textColor2} 6%, white)`,
+        color: o.textColor2
       }
     }
   };
-}, d = l("ApTag", (o) => [
+}, n = l("ApTag", (o) => [
   a(o)
 ]);
 export {
-  d as default,
+  n as default,
   a as genApTagStyle
 };