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

package/es/src/business/ap-attachment/ApAttachment.mjs

@@ -1,108 +1,108 @@
-import { defineComponent as M, ref as C, useSlots as U, computed as o, cloneVNode as W, toRaw as f, unref as _, createVNode as t, createTextVNode as j } from "vue";
-import { Tooltip as K, Popover as B } from "@aplus-frontend/antdv";
+import { defineComponent as U, ref as F, useSlots as W, computed as n, cloneVNode as _, toRaw as v, unref as j, createVNode as t, createTextVNode as K } from "vue";
+import { Tooltip as B, Popover as G } from "@aplus-frontend/antdv";
 import "../../config-provider/index.mjs";
-import { ApAttachmentProps as G } from "./constans.mjs";
-import { getHexWithOpacity as H, getFileInfo as w } from "../../ap-download/utils/getFileInfo.mjs";
-import { useOssInit as R } from "../../ap-download/hooks/index.mjs";
-import { debounce as q, isArray as D } from "lodash-unified";
-import { LoadingOutlined as v } from "@ant-design/icons-vue";
-import { warning as E } from "../../utils/warning.mjs";
-import J from "./style/index.mjs";
-import { useNamespace as Q } from "../../config-provider/hooks/use-namespace.mjs";
-import { useGlobalConfig as h } from "../../config-provider/hooks/use-global-config.mjs";
-import { useLocale as X } from "../../config-provider/hooks/use-locale.mjs";
-const ue = /* @__PURE__ */ M({
+import { ApAttachmentProps as H } from "./constans.mjs";
+import { getHexWithOpacity as R, getFileInfo as b } from "../../ap-download/utils/getFileInfo.mjs";
+import { useOssInit as q } from "../../ap-download/hooks/index.mjs";
+import { debounce as D, isArray as E } from "lodash-unified";
+import { LoadingOutlined as h } from "@ant-design/icons-vue";
+import { warning as J } from "../../utils/warning.mjs";
+import Q from "./style/index.mjs";
+import { useNamespace as X } from "../../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as g } from "../../config-provider/hooks/use-global-config.mjs";
+import { useLocale as Y } from "../../config-provider/hooks/use-locale.mjs";
+const me = /* @__PURE__ */ U({
   name: "ApAttachment",
-  props: G(),
+  props: H(),
   setup(e) {
     const {
-      b: F,
-      e: a
-    } = Q("ap-attachment"), g = J("ap-attachment"), b = h("uiMode"), x = h("apUpload"), N = h("downloadCenterTriggerConfig"), {
-      lang: O,
-      t: m
-    } = X(), i = C(!1), c = C(""), u = U(), T = o(() => O.value === "zh-cn" ? "zh_CN" : "en_US"), r = o(() => e.attachmentList.length === 1), L = o(() => e.needName ? e.attachmentList.length > 0 && e.needName && e.needName.nameKey ? e.attachmentList[0][e.needName.nameKey] : "" : e.attachmentList.length > 0 ? e.attachmentList[0].fileName : ""), P = o(() => r.value ? L.value : m("ap.apAttachment.downloadall")), p = o(() => e.color ? e.color : b.value === "aplus" ? "#0070FF" : "#1890FF"), y = o(() => ({
-      "--download-main-color": p.value,
-      "--download-main-color-opacity": H(p.value, 0.6)
-    })), k = o(() => e.getOssAccess || x.value?.getOssAccess), I = o(() => {
-      const l = u.default ? u.default()[0] : null;
-      return l ? W(l, {
+      b: x,
+      e: l
+    } = X("ap-attachment"), p = Q("ap-attachment"), O = g("uiMode"), L = g("apUpload"), N = g("downloadCenterTriggerConfig"), {
+      lang: T,
+      t: r
+    } = Y(), c = F(!1), s = F(""), m = W(), P = n(() => T.value === "zh-cn" ? "zh_CN" : "en_US"), i = n(() => e.needName ?? L?.value?.needName), d = n(() => e.attachmentList.length === 1), y = n(() => i.value ? e.attachmentList.length > 0 && i.value && i.value?.nameKey ? e.attachmentList[0][i.value.nameKey] : "" : e.attachmentList.length > 0 ? e.attachmentList[0].fileName : ""), k = n(() => d.value ? y.value : r("ap.apAttachment.downloadall")), A = n(() => e.color ? e.color : O.value === "aplus" ? "#0070FF" : "#1890FF"), C = n(() => ({
+      "--download-main-color": A.value,
+      "--download-main-color-opacity": R(A.value, 0.6)
+    })), I = n(() => e.getOssAccess || L.value?.getOssAccess), S = n(() => {
+      const a = m.default ? m.default()[0] : null;
+      return a ? _(a, {
         style: {
           "font-size": "16px"
         }
       }) : null;
-    }), d = q(async (l, s) => {
+    }), f = D(async (a, u) => {
       if (!e.disabled) {
-        i.value = !0, s && (c.value = s);
+        c.value = !0, u && (s.value = u);
         try {
-          const n = D(f(l)) ? f(l) : [f(l)];
+          const o = E(v(a)) ? v(a) : [v(a)];
           if (N.value?.trigger) {
-            const z = w(e.needName, n).map((A) => ({
-              objectName: A.path,
-              fileName: A.fileName
+            const M = b(i.value, o).map((w) => ({
+              objectName: w.path,
+              fileName: w.fileName
             }));
-            N.value?.trigger(z);
+            N.value?.trigger(M);
           } else
-            await (await R(k.value, _(T))).downloadFile(w(e.needName, n));
-        } catch (n) {
-          E(!1, n);
+            await (await q(I.value, j(P))).downloadFile(b(i.value, o));
+        } catch (o) {
+          J(!1, o);
         } finally {
-          i.value = !1, c.value = "";
+          c.value = !1, s.value = "";
         }
       }
-    }, 500), S = (l) => l && l.length > 0 ? t("ul", {
-      class: [a("file-list"), g.value],
-      style: y.value
-    }, [l.map((s, n) => t("li", {
-      key: n,
-      class: [a("file-item")],
-      onClick: () => d(s, n + 1)
-    }, [i.value && c.value === n + 1 ? t("span", {
-      class: [a("spin")]
-    }, [t(v, {
+    }, 500), V = (a) => a && a.length > 0 ? t("ul", {
+      class: [l("file-list"), p.value],
+      style: C.value
+    }, [a.map((u, o) => t("li", {
+      key: o,
+      class: [l("file-item")],
+      onClick: () => f(u, o + 1)
+    }, [c.value && s.value === o + 1 ? t("span", {
+      class: [l("spin")]
+    }, [t(h, {
       spin: !0
-    }, null)]) : null, s.fileName])), t("li", {
-      class: [a("download-all")],
-      onClick: () => d(e.attachmentList, "all")
-    }, [i.value && c.value === "all" ? t("span", {
-      class: [a("spin")]
-    }, [t(v, {
+    }, null)]) : null, u.fileName])), t("li", {
+      class: [l("download-all")],
+      onClick: () => f(e.attachmentList, "all")
+    }, [c.value && s.value === "all" ? t("span", {
+      class: [l("spin")]
+    }, [t(h, {
       spin: !0
-    }, null)]) : null, m("ap.apAttachment.downloadall")])]) : null;
+    }, null)]) : null, r("ap.apAttachment.downloadall")])]) : null;
     return () => e.attachmentList?.length > 0 && t("div", {
-      class: [F(), g.value],
-      style: [y.value]
-    }, [t(K, {
-      title: P.value,
+      class: [x(), p.value],
+      style: [C.value]
+    }, [t(B, {
+      title: k.value,
       placement: e.textToolTipPlacement,
       color: e.toolTipBgColor
     }, {
       default: () => [t("div", {
-        class: [a("content")],
-        onClick: () => d(r.value ? e.attachmentList[0] : e.attachmentList, "global")
-      }, [i.value && c.value === "global" ? t("div", {
-        class: [a("spin")]
-      }, [t(v, {
+        class: [l("content")],
+        onClick: () => f(d.value ? e.attachmentList[0] : e.attachmentList, "global")
+      }, [c.value && s.value === "global" ? t("div", {
+        class: [l("spin")]
+      }, [t(h, {
         spin: !0
-      }, null)]) : null, u.default ? t("div", {
-        class: [a("text-render")]
-      }, [I.value, j(" ")]) : null, t("div", {
-        class: [a("text-inner")],
+      }, null)]) : null, m.default ? t("div", {
+        class: [l("text-render")]
+      }, [S.value, K(" ")]) : null, t("div", {
+        class: [l("text-inner")],
         style: {
           "max-width": e.maxWidth ? e.maxWidth + "px" : "auto"
         }
-      }, [L.value])])]
-    }), t(B, {
-      content: S(e.attachmentList),
+      }, [y.value])])]
+    }), t(G, {
+      content: V(e.attachmentList),
       placement: e.fileMorePopoverPlacement,
       color: "#fff"
     }, {
-      default: () => [!r.value && t("div", {
-        class: [a("more")]
-      }, [m("ap.apAttachment.more")])]
+      default: () => [!d.value && t("div", {
+        class: [l("more")]
+      }, [r("ap.apAttachment.more")])]
     })]);
   }
 });
 export {
-  ue as default
+  me as default
 };

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

@@ -39,6 +39,7 @@ const n = (r) => {
         lineHeight: r.lineHeight,
         cursor: "pointer",
         color: "var(--download-main-color)",
+        marginLeft: "8px",
         "&:hover": {
           color: "var(--download-main-color-opacity)"
         }

package/es/src/business/ap-batch-action/style/index.mjs

@@ -8,7 +8,7 @@ const n = (t) => {
         width: "100%",
         paddingBottom: "8px",
         marginBottom: "8px",
-        borderBottom: "1px solid var(--ap-color-bg)"
+        borderBottom: `1px solid ${t.colorBg1}`
       },
       [`${e}-body`]: {
         width: "100%",
@@ -23,9 +23,9 @@ const n = (t) => {
             display: "flex",
             alignItems: "center",
             fontSize: t.fontSize,
-            color: "var(--ap-text-color-3)",
+            color: t.textColor3,
             span: {
-              color: "var(--ap-color-primary)",
+              color: t.colorPrimary,
               fontWeight: "bold",
               minWidth: "10px",
               textAlign: "center",

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

@@ -1,5 +1,5 @@
 import { genComponentStyleHook as a } from "../../../utils/cssinjs/index.mjs";
-const e = (o) => {
+const i = (o) => {
   const { componentCls: r } = o;
   return {
     [r]: {
@@ -24,8 +24,8 @@ const e = (o) => {
     }
   };
 }, l = a(
-  "ApRadioGroupToken",
-  (o) => [e(o)],
+  "ApRadioGroup",
+  (o) => [i(o)],
   {
     apRadioGroupItemActiveBgColor: "rgba(0, 112, 255, 0.12)"
   }

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

@@ -1,28 +1,25 @@
 import { genComponentStyleHook as n } from "../../../utils/cssinjs/index.mjs";
-const o = (e) => {
-  const { componentCls: t } = e;
+const o = (t) => {
+  const { componentCls: e } = t;
   return {
-    [t]: {
-      ".ant-btn-default:has(&-main-content-disabled)": {
-        borderColor: "var(--ap-border-color-base) !important"
-      },
+    [e]: {
       "& > .ant-btn": {
         padding: 0
       },
       "& > .ant-dropdown-trigger": {
-        color: "var(--ap-text-color-3)"
+        color: t.textColor3
       },
-      [`${t}-main-content`]: {
+      [`${e}-main-content`]: {
         padding: "4px 8px",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         "&-disabled": {
-          color: "var(--ap-text-color-4)",
+          color: t.textColor4,
           cursor: "not-allowed"
         }
       },
-      [`${t}-icon`]: {
+      [`${e}-icon`]: {
         width: "100%",
         height: "100%",
         fontSize: "14px",
@@ -31,7 +28,7 @@ const o = (e) => {
         alignItems: "center"
       }
     },
-    [`${t}-main-content-popover`]: {
+    [`${e}-main-content-popover`]: {
       width: "340px",
       "&-title-content": {
         display: "flex",
@@ -55,7 +52,7 @@ const o = (e) => {
         }
       }
     },
-    [`${t}-overlay`]: {
+    [`${e}-overlay`]: {
       ".ant-dropdown-menu": {
         padding: "8px",
         "&-item": {
@@ -65,7 +62,7 @@ const o = (e) => {
           }
         }
       },
-      [`${t}-menu-list-content`]: {
+      [`${e}-menu-list-content`]: {
         width: "250px",
         display: "flex",
         padding: "6px 8px",
@@ -94,13 +91,13 @@ const o = (e) => {
             fontSize: "12px",
             display: "flex",
             alignItems: "center",
-            color: "var(--ap-color-primary)"
+            color: t.colorPrimary
           },
           "&-delete": {
             cursor: "pointer",
             display: "flex",
             alignItems: "center",
-            color: "var(--ap-text-color-3)",
+            color: t.textColor3,
             svg: {
               outline: "none",
               boxShadow: "none"
@@ -123,23 +120,23 @@ const o = (e) => {
           cursor: "default"
         },
         "&:hover": {
-          background: "var(--ap-color-bg-1)",
+          background: t.colorBg1,
           ".menu-list-content-action": {
             display: "block"
           }
         }
       },
-      [`${t}-menu-list-content-active`]: {
+      [`${e}-menu-list-content-active`]: {
         ".menu-list-content-name": {
-          color: "var(--ap-color-primary)"
+          color: t.colorPrimary
         }
       }
     }
   };
-}, a = n("ApView", (e) => [
-  o(e)
+}, r = n("ApView", (t) => [
+  o(t)
 ]);
 export {
-  a as default,
+  r as default,
   o as genProCardStyle
 };

package/es/src/business/batch-input-group/style/index.d.ts

@@ -1,3 +1,6 @@
 import { Ref } from 'vue';
+export type BatchInputGroupToken = {
+    batchInputGroupTriggerColorDisabled: string;
+};
 declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
 export default _default;

package/es/src/business/batch-input-group/style/index.mjs

@@ -17,9 +17,9 @@ const a = (o) => {
           },
           "&--disabled": {
             cursor: "not-allowed",
-            color: "var(--batch-input-group-trigger-color-disabled, rgba(24, 41, 72, 0.25))",
+            color: o.batchInputGroupTriggerColorDisabled,
             "&:hover": {
-              color: "var(--batch-input-group-trigger-color-disabled, rgba(24, 41, 72, 0.25))"
+              color: o.batchInputGroupTriggerColorDisabled
             }
           }
         }
@@ -45,9 +45,13 @@ const a = (o) => {
       }
     }
   };
-}, c = i("BatchInputGroup", (o) => [
-  a(o)
-]);
+}, c = i(
+  "BatchInputGroup",
+  (o) => [a(o)],
+  {
+    batchInputGroupTriggerColorDisabled: "rgba(24, 41, 72, 0.25)"
+  }
+);
 export {
   c as default
 };

package/es/src/check-card/style/index.mjs

@@ -1,10 +1,16 @@
-import { resetComponent as d } from "../../style/index.mjs";
-import { genComponentStyleHook as e } from "../../utils/cssinjs/index.mjs";
+import { resetComponent as t } from "../../style/index.mjs";
+import { genComponentStyleHook as a } from "../../utils/cssinjs/index.mjs";
 const c = (r) => {
-  const { componentCls: i } = r;
+  const {
+    componentCls: o,
+    checkCardDisabledOutlineColor: l,
+    checkCardIndicatorSize: e,
+    checkCardOutlineWidth: d,
+    checkCardIndicatorOffset: i
+  } = r;
   return {
-    [`${i}`]: {
-      ...d(r),
+    [`${o}`]: {
+      ...t(r),
       borderRadius: r.borderRadius,
       position: "relative",
       "&--disabled": {
@@ -14,7 +20,7 @@ const c = (r) => {
       "&--bordered": {
         outline: `1px solid ${r.borderColorBase}`
       },
-      [`&:hover:not(${i}--disabled)`]: {
+      [`&:hover:not(${o}--disabled)`]: {
         cursor: "pointer",
         outline: `1px solid ${r.colorPrimary}`
       },
@@ -24,32 +30,32 @@ const c = (r) => {
         width: 0,
         height: 0,
         opacity: 0,
-        insetBlockStart: r.checkCardIndicatorOffset,
-        insetInlineEnd: r.checkCardIndicatorOffset,
-        borderInlineStart: r.checkCardIndicatorSize,
-        borderBlockEnd: r.checkCardIndicatorSize,
+        insetBlockStart: i,
+        insetInlineEnd: i,
+        borderInlineStart: e,
+        borderBlockEnd: e,
         borderRadius: r.borderRadius
       },
       "&--checked": {
-        outline: `${r.checkCardOutlineWidth} solid ${r.colorPrimary}`,
-        [`&:hover:not(${i}--disabled)`]: {
-          outline: `${r.checkCardOutlineWidth} solid ${r.colorPrimary}`
+        outline: `${d} solid ${r.colorPrimary}`,
+        [`&:hover:not(${o}--disabled)`]: {
+          outline: `${d} solid ${r.colorPrimary}`
         },
         "&::after": {
           opacity: 1,
-          border: `${r.checkCardIndicatorSize} solid ${r.colorPrimary}`,
-          borderInlineStart: `${r.checkCardIndicatorSize} solid transparent`,
-          borderBlockEnd: `${r.checkCardIndicatorSize} solid transparent`,
-          insetBlockStart: r.checkCardIndicatorOffset,
-          insetInlineEnd: r.checkCardIndicatorOffset,
+          border: `${e} solid ${r.colorPrimary}`,
+          borderInlineStart: `${e} solid transparent`,
+          borderBlockEnd: `${e} solid transparent`,
+          insetBlockStart: i,
+          insetInlineEnd: i,
           transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)"
         },
-        [`&${i}--disabled`]: {
-          outlineColor: r.checkCardDisabledOutlineColor,
+        [`&${o}--disabled`]: {
+          outlineColor: l,
           "&::after": {
-            border: `${r.checkCardIndicatorSize} solid ${r.checkCardDisabledOutlineColor}`,
-            borderInlineStart: `${r.checkCardIndicatorSize} solid transparent`,
-            borderBlockEnd: `${r.checkCardIndicatorSize} solid transparent`
+            border: `${e} solid ${l}`,
+            borderInlineStart: `${e} solid transparent`,
+            borderBlockEnd: `${e} solid transparent`
           }
         }
       },
@@ -59,8 +65,8 @@ const c = (r) => {
       "&--small": {
         padding: `${r.spaceSM} ${r.spaceLG}`
       },
-      [`${i}__title`]: {
-        ...d(r),
+      [`${o}__title`]: {
+        ...t(r),
         marginBottom: r.spaceXS,
         color: "#333",
         fontWeight: "bold",
@@ -68,14 +74,14 @@ const c = (r) => {
           color: r.textColor4
         }
       },
-      [`${i}__content`]: {
-        ...d(r),
+      [`${o}__content`]: {
+        ...t(r),
         color: "#333",
         "&--disabled": {
           color: r.textColor4
         }
       },
-      [`${i}__checked-icon`]: {
+      [`${o}__checked-icon`]: {
         position: "absolute",
         top: 0,
         right: 0,
@@ -83,13 +89,13 @@ const c = (r) => {
         lineHeight: 1,
         userSelect: "none",
         "& > img": {
-          width: `calc(${r.checkCardIndicatorSize} - 2px)`,
+          width: `calc(${e} - ${d})`,
           verticalAlign: "top"
         }
       }
     }
   };
-}, l = e(
+}, b = a(
   "CheckCard",
   (r) => [c(r)],
   {
@@ -101,5 +107,5 @@ const c = (r) => {
   }
 );
 export {
-  l as default
+  b as default
 };

package/es/src/config-provider/config-provider.d.ts

@@ -6,10 +6,9 @@ import { CSPConfig } from '@aplus-frontend/antdv/es/config-provider';
 import { Locale } from '@aplus-frontend/antdv/es/locale';
 import { ButtonSize } from '@aplus-frontend/antdv/es/button';
 import { ThemeConfig, InputConfig, PaginationConfig, FormConfig, SelectConfig, CascaderConfig, DatePickerConfig, RangePickerConfig, TreeSelectConfig, TextAreaConfig, InputNumberConfig, MentionsConfig, TimePickerConfig, CardConfig } from '@aplus-frontend/antdv/es/config-provider/context';
-import { ApGridRowSelection, AgGridRowSelection, ViewCacheOption } from '..';
+import { ApGridRowSelection, AgGridRowSelection, FullToken, ViewCacheOption } from '..';
 import { LocaleType } from '../locale';
 import { RecursivePartial } from '../type';
-import { FullToken } from '../design-token/interface';
 import { ApiType, ApUploadConfig, ApDescriptionsConfig, ValueTypeRenderConfig, downloadCenterTriggerConfig, ExportField, SearchFormGlobalConfig } from './constants';
 export declare const globalConfigCached: Ref<ConfigProviderProps>;
 export declare const ConfigProvider: DefineComponent<ExtractPropTypes<{

package/es/src/config-provider/hooks/use-global-config.d.ts

@@ -7,10 +7,9 @@ import { CSPConfig } from '@aplus-frontend/antdv/es/config-provider';
 import { Locale } from '@aplus-frontend/antdv/es/locale';
 import { ButtonSize } from '@aplus-frontend/antdv/es/button';
 import { ThemeConfig, InputConfig, PaginationConfig, FormConfig, SelectConfig, CascaderConfig, DatePickerConfig, RangePickerConfig, TreeSelectConfig, TextAreaConfig, InputNumberConfig, MentionsConfig, TimePickerConfig, CardConfig } from '@aplus-frontend/antdv/es/config-provider/context';
-import { ApGridRowSelection, AgGridRowSelection, ViewCacheOption } from '../..';
+import { ApGridRowSelection, AgGridRowSelection, FullToken, ViewCacheOption } from '../..';
 import { LocaleType } from '../../locale';
 import { RecursivePartial } from '../../type';
-import { FullToken } from '../../design-token/interface';
 import { ApiType, ApUploadConfig, ApDescriptionsConfig, ValueTypeRenderConfig, downloadCenterTriggerConfig, ExportField, SearchFormGlobalConfig } from '..';
 export declare const keysOf: <T extends Record<string, any>>(arr: T) => Array<keyof T>;
 export declare function useGlobalConfig<K extends keyof ConfigProviderContext, D extends ConfigProviderContext[K]>(key: K, defaultValue?: D): Ref<Exclude<ConfigProviderContext[K], undefined> | D>;

package/es/src/config-provider/hooks/use-global-config.mjs

@@ -1,39 +1,48 @@
-import { ref as v, getCurrentInstance as a, inject as d, computed as f, provide as g, unref as C } from "vue";
-import { configProviderContextKey as m } from "../constants.mjs";
-import { localeContextKey as k } from "./use-locale.mjs";
-import { namespaceContextKey as y } from "./use-namespace.mjs";
-import { designTokenContextKey as x } from "./use-token.mjs";
-import { merge as K, cloneDeep as T } from "lodash-unified";
-import { defaultToken as b } from "../../design-token/constants.mjs";
-const l = (e) => Object.keys(e), s = v();
-function j(e, o = void 0) {
-  const t = a() ? d(m, s) : s;
-  return e ? f(() => t.value?.[e] ?? o) : t;
+import { ref as p, getCurrentInstance as v, inject as k, computed as c, provide as y, unref as x, watch as T } from "vue";
+import { configProviderContextKey as d } from "../constants.mjs";
+import { localeContextKey as b } from "./use-locale.mjs";
+import { namespaceContextKey as K } from "./use-namespace.mjs";
+import { designTokenContextKey as j } from "./use-token.mjs";
+import { merge as w, cloneDeep as G, omit as O } from "lodash-unified";
+import { defaultToken as S } from "../../design-token/constants.mjs";
+import { css as V } from "@emotion/css";
+import { generateCssVar as h } from "../../utils/cssinjs/utils.mjs";
+const m = (e) => Object.keys(e), u = p();
+function D(e, o = void 0) {
+  const n = v() ? k(d, u) : u;
+  return e ? c(() => n.value?.[e] ?? o) : n;
 }
-const P = (e, o, t = !1) => {
-  const i = !!a(), n = i ? j() : void 0, c = o?.provide ?? (i ? g : void 0);
-  if (!c)
+const J = (e, o, n = !1) => {
+  const s = !!v(), t = s ? D() : void 0, i = o?.provide ?? (s ? y : void 0);
+  if (!i)
     return;
-  const r = f(() => {
-    const u = C(e);
-    return n?.value ? G(n.value, u) : u;
+  const r = c(() => {
+    const a = x(e);
+    return t?.value ? F(t.value, a) : a;
   });
-  c(m, r), c(y, r.value.namespace);
-  const p = f(() => ({
-    ...K(T(b), r.value.aplusToken || {})
-  }));
-  return c(x, p), c(
-    k,
-    f(() => r.value.aplusLocale)
-  ), (t || !s.value) && (s.value = r.value), r;
-}, G = (e, o) => {
-  const t = [.../* @__PURE__ */ new Set([...l(e), ...l(o)])], i = {};
-  for (const n of t)
-    i[n] = o[n] !== void 0 ? o[n] : e[n];
-  return i;
+  i(d, r), i(
+    b,
+    c(() => r.value.aplusLocale)
+  ), i(K, r.value.namespace);
+  const f = c(() => ({
+    ...w(G(S), r.value.aplusToken || {})
+  })), g = c(() => O(f.value, ["components"])), l = p();
+  return T(
+    () => g.value,
+    (a) => {
+      const C = h(a);
+      l.value = V(C);
+    },
+    { deep: !0, immediate: !0 }
+  ), i(j, { token: f, rootCls: l }), (n || !u.value) && (u.value = r.value), r;
+}, F = (e, o) => {
+  const n = [.../* @__PURE__ */ new Set([...m(e), ...m(o)])], s = {};
+  for (const t of n)
+    s[t] = o[t] !== void 0 ? o[t] : e[t];
+  return s;
 };
 export {
-  l as keysOf,
-  P as provideGlobalConfig,
-  j as useGlobalConfig
+  m as keysOf,
+  J as provideGlobalConfig,
+  D as useGlobalConfig
 };

package/es/src/config-provider/hooks/use-token.d.ts

@@ -1,4 +1,9 @@
 import { InjectionKey, Ref } from 'vue';
 import { FullToken } from '../../design-token/interface';
-export declare const designTokenContextKey: InjectionKey<Ref<Partial<FullToken>>>;
-export declare const useToken: () => Ref<FullToken>;
+type DesignTokenContextType = {
+    token: Ref<Partial<FullToken>>;
+    rootCls: Ref<string | undefined>;
+};
+export declare const designTokenContextKey: InjectionKey<DesignTokenContextType>;
+export declare const useToken: () => DesignTokenContextType;
+export {};

package/es/src/config-provider/hooks/use-token.mjs

@@ -1,6 +1,9 @@
-import { inject as e, ref as n } from "vue";
-const o = Symbol("designTokenContextKey"), r = () => e(o, n({}));
+import { inject as o, ref as e } from "vue";
+const n = Symbol("designTokenContextKey"), r = () => o(n, {
+  token: e({}),
+  rootCls: e()
+});
 export {
-  o as designTokenContextKey,
+  n as designTokenContextKey,
   r as useToken
 };