@aplus-frontend/ui 6.41.0 → 7.0.0-beta.0

package/es/src/utils/cssinjs/index.d.ts

@@ -0,0 +1,8 @@
+import { BaseToken, GenStyleCallback } from '../../design-token/interface';
+import { Ref } from 'vue';
+type GeneraterOption = {
+    skipUnit: string[];
+};
+export declare function camelToKebab(str: string): string;
+export declare function genComponentStyleHook<ComponentToken>(componentName: string, cb: GenStyleCallback<BaseToken & ComponentToken>, componentToken?: Partial<ComponentToken>, option?: GeneraterOption): (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export {};

package/es/src/utils/cssinjs/index.mjs

@@ -0,0 +1,56 @@
+import { omit as b, merge as d } from "lodash-unified";
+import { ref as k, computed as C, watch as i } from "vue";
+import { useToken as g } from "../../config-provider/hooks/use-token.mjs";
+import { injectGlobal as T, css as $ } from "@emotion/css";
+import "../../config-provider/index.mjs";
+import { useGlobalConfig as V } from "../../config-provider/hooks/use-global-config.mjs";
+function v(e, n) {
+  return Object.entries(e).reduce((o, [c, r]) => {
+    const s = typeof r == "number" && !n?.skipUnit?.includes(c) ? `${r}px` : r;
+    return o[l(c)] = s, o;
+  }, {});
+}
+function l(e) {
+  return "--" + e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function S(e) {
+  const n = {};
+  for (const o in e)
+    n[o] = `var(${l(o)})`;
+  return n;
+}
+function z(e, n, o, c) {
+  return (r) => {
+    const s = k(), u = g(), p = V("namespace"), a = C(() => {
+      let t = b(u.value || {}, "components");
+      return t = {
+        ...t,
+        ...d(
+          o || {},
+          u.value.components?.[e] || {}
+        )
+      }, t;
+    });
+    return i(
+      () => a.value,
+      (t) => {
+        const m = S(t);
+        m.componentCls = `.${p.value}-${r}`;
+        const f = n(m);
+        T(f);
+      },
+      { immediate: !0, once: !0 }
+    ), i(
+      () => a.value,
+      (t) => {
+        const m = v(t, c);
+        s.value = $(m);
+      },
+      { deep: !0, immediate: !0 }
+    ), s;
+  };
+}
+export {
+  l as camelToKebab,
+  z as genComponentStyleHook
+};

package/es/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "6.41.0";
+declare const _default: "7.0.0-beta.0";
 export default _default;

package/es/src/version.mjs

@@ -1,4 +1,4 @@
-const e = "6.41.0";
+const e = "7.0.0-beta.0";
 export {
   e as default
 };

package/lib/src/ap-action/item/index.vue2.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../../config-provider/index.js");const f=require("@aplus-frontend/antdv/es/button/LoadingIcon"),p=require("@aplus-frontend/antdv"),k=require("../../config-provider/hooks/use-namespace.js"),y={key:1},g=e.defineComponent({name:"ApActionItem",__name:"index",props:{text:{},color:{default:"primary"},disabled:{type:Boolean,default:!1},visible:{type:Boolean,default:!0},onAction:{type:Function},onClick:{type:Function},loading:{type:Boolean,default:!1},icon:{},iconFirst:{type:Boolean,default:!1},tooltip:{default:()=>({})}},setup(t){const i=e.useSlots(),a=e.createPropsRestProxy(t,["color","disabled","visible","loading","iconFirst","icon","tooltip"]),{b:u,m:n,e:d}=k.useNamespace("action-item"),r=e.ref(!1),c=e.computed(()=>t.iconFirst&&(t.icon||i.icon));function s(o){e.unref(l)||t.disabled||(a.onClick?.(o),a.onAction&&(r.value=!0,a.onAction(o).finally(()=>r.value=!1)))}const l=e.computed(()=>t.loading||e.unref(r)),m=e.computed(()=>[u(),n(t.color),c.value?n("icon-first"):null,t.disabled?n("disabled"):null,l.value?n("loading"):null].filter(Boolean));return(o,v)=>e.renderSlot(o.$slots,"trigger",{loading:l.value,disabled:o.disabled,onClick:s},()=>[o.visible?(e.openBlock(),e.createElementBlock("span",e.mergeProps({key:0},o.$attrs,{class:m.value,onClick:s}),[l.value?(e.openBlock(),e.createBlock(e.unref(f),{key:0,"prefix-cls":"btn","exist-icon":!1,loading:""})):e.createCommentVNode("",!0),o.icon||i.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(e.unref(d)("icon-wrapper"))},[e.createVNode(e.unref(p.Tooltip),e.mergeProps({title:c.value?o.text:null},o.tooltip),{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon||i.icon)))]),_:1},16,["title"])],2)):e.createCommentVNode("",!0),c.value?e.createCommentVNode("",!0):e.renderSlot(o.$slots,"default",{key:2},()=>[e.isVNode(o.text)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.text),{key:0})):(e.openBlock(),e.createElementBlock("span",y,e.toDisplayString(o.text||""),1))])],16)):e.createCommentVNode("",!0)])}});exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../../config-provider/index.js");const p=require("@aplus-frontend/antdv/es/button/LoadingIcon"),k=require("@aplus-frontend/antdv"),v=require("../style/index.js"),y=require("../../config-provider/hooks/use-namespace.js"),g={key:1},B=e.defineComponent({name:"ApActionItem",__name:"index",props:{text:{},color:{default:"primary"},disabled:{type:Boolean,default:!1},visible:{type:Boolean,default:!0},onAction:{type:Function},onClick:{type:Function},loading:{type:Boolean,default:!1},icon:{},iconFirst:{type:Boolean,default:!1},tooltip:{default:()=>({})}},setup(t){const i=e.useSlots(),a=e.createPropsRestProxy(t,["color","disabled","visible","loading","iconFirst","icon","tooltip"]),{b:u,m:n,e:d}=y.useNamespace("action-item"),r=e.ref(!1),c=e.computed(()=>t.iconFirst&&(t.icon||i.icon)),f=v.default("action");function s(o){e.unref(l)||t.disabled||(a.onClick?.(o),a.onAction&&(r.value=!0,a.onAction(o).finally(()=>r.value=!1)))}const l=e.computed(()=>t.loading||e.unref(r)),m=e.computed(()=>[f.value,u(),n(t.color),c.value?n("icon-first"):null,t.disabled?n("disabled"):null,l.value?n("loading"):null].filter(Boolean));return(o,C)=>e.renderSlot(o.$slots,"trigger",{loading:l.value,disabled:o.disabled,onClick:s},()=>[o.visible?(e.openBlock(),e.createElementBlock("span",e.mergeProps({key:0},o.$attrs,{class:m.value,onClick:s}),[l.value?(e.openBlock(),e.createBlock(e.unref(p),{key:0,"prefix-cls":"btn","exist-icon":!1,loading:""})):e.createCommentVNode("",!0),o.icon||i.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(e.unref(d)("icon-wrapper"))},[e.createVNode(e.unref(k.Tooltip),e.mergeProps({title:c.value?o.text:null},o.tooltip),{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon||i.icon)))]),_:1},16,["title"])],2)):e.createCommentVNode("",!0),c.value?e.createCommentVNode("",!0):e.renderSlot(o.$slots,"default",{key:2},()=>[e.isVNode(o.text)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.text),{key:0})):(e.openBlock(),e.createElementBlock("span",g,e.toDisplayString(o.text||""),1))])],16)):e.createCommentVNode("",!0)])}});exports.default=B;

package/lib/src/ap-action/style/index.cjs

@@ -0,0 +1,61 @@
+import { resetComponent } from '~/style';
+import { genComponentStyleHook } from '~/utils/cssinjs';
+export const genActionItemStyle = (token) => {
+    const { loadingOpacity, colorLink, colorLinkHover, colorSuccess, colorError, colorWarn, componentCls } = token;
+    return {
+        [`${componentCls}-item`]: {
+            display: 'inline-block',
+            cursor: 'pointer',
+            ...resetComponent(token),
+            '&--primary': {
+                color: colorLink,
+                [`&:not(${componentCls}-item--disabled):hover`]: {
+                    color: colorLinkHover
+                },
+                [`&${componentCls}-item--disabled`]: {
+                    color: token.colorLinkDisabled
+                }
+            },
+            '&--success': {
+                color: colorSuccess,
+                [`&${componentCls}-item--disabled`]: {
+                    color: token.colorSuccessDisabled
+                }
+            },
+            '&--error': {
+                color: colorError,
+                [`&${componentCls}-item--disabled`]: {
+                    color: token.colorErrorDisabled
+                }
+            },
+            '&--warn': {
+                color: colorWarn,
+                [`&${componentCls}-item--disabled`]: {
+                    color: token.colorWarnDisabled
+                }
+            },
+            '&--loading': {
+                opacity: loadingOpacity,
+                transition: 'opacity 0.2s',
+                cursor: 'default',
+                '.btn-loading-icon': {
+                    marginRight: token.spaceXS
+                }
+            },
+            '&--disabled': {
+                cursor: 'not-allowed'
+            },
+            [`${componentCls}-item__icon-wrapper`]: {
+                paddingRight: token.spaceXS
+            },
+            '&--icon-first': {
+                [`${componentCls}-item__icon-wrapper`]: {
+                    paddingRight: 0
+                }
+            }
+        }
+    };
+};
+export default genComponentStyleHook('ApAction', (token) => {
+    return [genActionItemStyle(token)];
+}, { loadingOpacity: 0.35 });

package/lib/src/ap-action/style/index.d.ts

@@ -0,0 +1,8 @@
+import { BaseToken, GenStyleFunc } from '../../design-token/interface';
+import { Ref } from 'vue';
+export type ActionToken = {
+    loadingOpacity: number;
+};
+export declare const genActionItemStyle: GenStyleFunc<BaseToken & ActionToken>;
+declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export default _default;

package/lib/src/ap-action/style/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../style/index.js"),d=require("../../utils/cssinjs/index.js"),e=o=>{const{loadingOpacity:i,colorLink:c,colorLinkHover:l,colorSuccess:t,colorError:n,colorWarn:s,componentCls:r}=o;return{[`${r}-item`]:{display:"inline-block",cursor:"pointer",...a.resetComponent(o),"&--primary":{color:c,[`&:not(${r}-item--disabled):hover`]:{color:l},[`&${r}-item--disabled`]:{color:o.colorLinkDisabled}},"&--success":{color:t,[`&${r}-item--disabled`]:{color:o.colorSuccessDisabled}},"&--error":{color:n,[`&${r}-item--disabled`]:{color:o.colorErrorDisabled}},"&--warn":{color:s,[`&${r}-item--disabled`]:{color:o.colorWarnDisabled}},"&--loading":{opacity:i,transition:"opacity 0.2s",cursor:"default",".btn-loading-icon":{marginRight:o.spaceXS}},"&--disabled":{cursor:"not-allowed"},[`${r}-item__icon-wrapper`]:{paddingRight:o.spaceXS},"&--icon-first":{[`${r}-item__icon-wrapper`]:{paddingRight:0}}}}},p=d.genComponentStyleHook("ApAction",o=>[e(o)],{loadingOpacity:.35});exports.default=p;exports.genActionItemStyle=e;

package/lib/src/config-provider/config-provider-props.d.ts

@@ -4,6 +4,7 @@ import { ApiType, ApUploadConfig, ApDescriptionsConfig, ValueTypeRenderConfig, d
 import { ApGridProps } from '../ap-grid';
 import { AgGridProps } from '../ag-grid';
 import { ViewCacheOption } from '../business';
+import { FullToken } from '../design-token/interface';
 import { default as __DTS_DEFAULT_0__ } from '@aplus-frontend/antdv/es/config-provider/renderEmpty';
 import { TransformCellTextProps } from '@aplus-frontend/antdv/es/table/interface';
 import { CSPConfig } from '@aplus-frontend/antdv/es/config-provider';
@@ -156,6 +157,12 @@ export declare const configProviderProps: () => {
     aplusLocale: {
         type: PropType<LocaleType>;
     };
+    /**
+     * APlus-UI 自己的token
+     */
+    aplusToken: {
+        type: PropType<Partial<FullToken>>;
+    };
     namespace: {
         type: StringConstructor;
     };

package/lib/src/config-provider/config-provider-props.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@aplus-frontend/antdv/es/config-provider/context"),t=()=>({apGrid:{type:Object},agGrid:{type:Object}}),o=()=>({aplusLocale:{type:Object},namespace:{type:String},api:{type:Object,default:()=>({})},uiMode:{type:String},apUpload:{type:Object,default:()=>({})},apDescriptions:{type:Object,default:()=>({})},valueTypeMap:{type:Object,default:()=>({})},downloadCenterTriggerConfig:{type:Object,default:()=>({})},exportField:{type:[Object,Boolean],default:!1},scrollYDomName:{type:String},viewCacheOption:{type:Object,default:()=>({})},searchForm:{type:Object,default:()=>({})},...t(),...e.configProviderProps()});exports.configProviderProps=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@aplus-frontend/antdv/es/config-provider/context"),t=()=>({apGrid:{type:Object},agGrid:{type:Object}}),o=()=>({aplusLocale:{type:Object},aplusToken:{type:Object},namespace:{type:String},api:{type:Object,default:()=>({})},uiMode:{type:String},apUpload:{type:Object,default:()=>({})},apDescriptions:{type:Object,default:()=>({})},valueTypeMap:{type:Object,default:()=>({})},downloadCenterTriggerConfig:{type:Object,default:()=>({})},exportField:{type:[Object,Boolean],default:!1},scrollYDomName:{type:String},viewCacheOption:{type:Object,default:()=>({})},searchForm:{type:Object,default:()=>({})},...t(),...e.configProviderProps()});exports.configProviderProps=o;

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

@@ -8,6 +8,7 @@ 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 { LocaleType } from '../locale';
+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<{
@@ -155,6 +156,9 @@ export declare const ConfigProvider: DefineComponent<ExtractPropTypes<{
     aplusLocale: {
         type: PropType<LocaleType>;
     };
+    aplusToken: {
+        type: PropType<Partial< FullToken>>;
+    };
     namespace: {
         type: StringConstructor;
     };
@@ -341,6 +345,9 @@ export declare const ConfigProvider: DefineComponent<ExtractPropTypes<{
     aplusLocale: {
         type: PropType<LocaleType>;
     };
+    aplusToken: {
+        type: PropType<Partial< FullToken>>;
+    };
     namespace: {
         type: StringConstructor;
     };

package/lib/src/config-provider/config-provider.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),C=require("@aplus-frontend/antdv"),u=require("./hooks/use-global-config.js"),P=require("./config-provider-props.js"),r=require("../utils/config-provider-preset.js"),c=require("./constants.js");function G(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!i.isVNode(e)}const o=i.ref({}),h=i.defineComponent({name:"AplusConfigProvider",props:P.configProviderProps(),setup(e,{slots:l}){const t=u.useGlobalConfig();let a=!0;const f=i.computed(()=>e.namespace!==void 0?e.namespace:t.value?.namespace||c.DEFAULT_NAMESPACE),d=i.computed(()=>e.uiMode!==void 0?e.uiMode:t.value?.uiMode||c.DEFAULT_UIMODE),g=i.computed(()=>e.apGrid!==void 0?e.apGrid:t.value?.apGrid),m=i.computed(()=>e.agGrid!==void 0?e.agGrid:t.value?.agGrid),v=i.computed(()=>({namespace:i.unref(f),aplusLocale:e.aplusLocale,api:e.api,uiMode:i.unref(d),apUpload:e.apUpload,apDescriptions:e.apDescriptions,valueTypeMap:e.valueTypeMap,downloadCenterTriggerConfig:e.downloadCenterTriggerConfig,exportField:e.exportField,scrollYDomName:e.scrollYDomName,viewCacheOption:e.viewCacheOption,searchForm:e.searchForm,apGrid:i.unref(g),agGrid:i.unref(m)})),s=u.provideGlobalConfig(v);return i.watch(()=>e,n=>{o.value=r.mergeAntdProviderConfigWithCache(r.mergeAntdProvideConfig(n),o.value)},{deep:!0,immediate:!0}),i.onActivated(()=>{if(a){a=!1;return}o.value=r.mergeAntdProviderConfigWithCache(r.mergeAntdProvideConfig(e),o.value)}),typeof window<"u"&&i.watch(()=>i.unref(d),n=>{document.documentElement.dataset.aplusUiMode=n},{immediate:!0}),()=>{let n;return i.createVNode(C.ConfigProvider,o.value,G(n=i.renderSlot(l,"default",{config:s?.value}))?n:{default:()=>[n]})}}});exports.ConfigProvider=h;exports.globalConfigCached=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),C=require("@aplus-frontend/antdv"),u=require("./hooks/use-global-config.js"),P=require("./config-provider-props.js"),r=require("../utils/config-provider-preset.js"),c=require("./constants.js");function G(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!n.isVNode(e)}const o=n.ref({}),h=n.defineComponent({name:"AplusConfigProvider",props:P.configProviderProps(),setup(e,{slots:l}){const t=u.useGlobalConfig();let a=!0;const f=n.computed(()=>e.namespace!==void 0?e.namespace:t.value?.namespace||c.DEFAULT_NAMESPACE),d=n.computed(()=>e.uiMode!==void 0?e.uiMode:t.value?.uiMode||c.DEFAULT_UIMODE),g=n.computed(()=>e.apGrid!==void 0?e.apGrid:t.value?.apGrid),m=n.computed(()=>e.agGrid!==void 0?e.agGrid:t.value?.agGrid),s=n.computed(()=>({namespace:n.unref(f),aplusLocale:e.aplusLocale,aplusToken:e.aplusToken,api:e.api,uiMode:n.unref(d),apUpload:e.apUpload,apDescriptions:e.apDescriptions,valueTypeMap:e.valueTypeMap,downloadCenterTriggerConfig:e.downloadCenterTriggerConfig,exportField:e.exportField,scrollYDomName:e.scrollYDomName,viewCacheOption:e.viewCacheOption,searchForm:e.searchForm,apGrid:n.unref(g),agGrid:n.unref(m)})),v=u.provideGlobalConfig(s);return n.watch(()=>e,i=>{o.value=r.mergeAntdProviderConfigWithCache(r.mergeAntdProvideConfig(i),o.value)},{deep:!0,immediate:!0}),n.onActivated(()=>{if(a){a=!1;return}o.value=r.mergeAntdProviderConfigWithCache(r.mergeAntdProvideConfig(e),o.value)}),typeof window<"u"&&n.watch(()=>n.unref(d),i=>{document.documentElement.dataset.aplusUiMode=i},{immediate:!0}),()=>{let i;return n.createVNode(C.ConfigProvider,o.value,G(i=n.renderSlot(l,"default",{config:v?.value}))?i:{default:()=>[i]})}}});exports.ConfigProvider=h;exports.globalConfigCached=o;

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

@@ -9,6 +9,7 @@ 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 { LocaleType } from '../../locale';
+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>;
@@ -158,6 +159,9 @@ export declare const provideGlobalConfig: (config: MaybeRef<ConfigProviderContex
     aplusLocale: {
         type: PropType<LocaleType>;
     };
+    aplusToken: {
+        type: PropType<Partial< FullToken>>;
+    };
     namespace: {
         type: StringConstructor;
     };

package/lib/src/config-provider/hooks/use-global-config.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),f=require("../constants.js"),d=require("./use-locale.js"),g=require("./use-namespace.js"),l=e=>Object.keys(e),i=o.ref();function v(e,n=void 0){const r=o.getCurrentInstance()?o.inject(f.configProviderContextKey,i):i;return e?o.computed(()=>r.value?.[e]??n):r}const p=(e,n,r=!1)=>{const c=!!o.getCurrentInstance(),t=c?v():void 0,u=n?.provide??(c?o.provide:void 0);if(!u)return;const s=o.computed(()=>{const a=o.unref(e);return t?.value?C(t.value,a):a});return u(f.configProviderContextKey,s),u(g.namespaceContextKey,s.value.namespace),u(d.localeContextKey,o.computed(()=>s.value.aplusLocale)),(r||!i.value)&&(i.value=s.value),s},C=(e,n)=>{const r=[...new Set([...l(e),...l(n)])],c={};for(const t of r)c[t]=n[t]!==void 0?n[t]:e[t];return c};exports.keysOf=l;exports.provideGlobalConfig=p;exports.useGlobalConfig=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),f=require("../constants.js"),g=require("./use-locale.js"),p=require("./use-namespace.js"),C=require("./use-token.js"),m=require("lodash-unified"),y=require("../../design-token/constants.js"),a=o=>Object.keys(o),i=e.ref();function d(o,n=void 0){const r=e.getCurrentInstance()?e.inject(f.configProviderContextKey,i):i;return o?e.computed(()=>r.value?.[o]??n):r}const k=(o,n,r=!1)=>{const c=!!e.getCurrentInstance(),t=c?d():void 0,u=n?.provide??(c?e.provide:void 0);if(!u)return;const s=e.computed(()=>{const l=e.unref(o);return t?.value?b(t.value,l):l});u(f.configProviderContextKey,s),u(p.namespaceContextKey,s.value.namespace);const v=e.computed(()=>({...m.merge(y.defaultToken,s.value.aplusToken||{})}));return u(C.designTokenContextKey,v),u(g.localeContextKey,e.computed(()=>s.value.aplusLocale)),(r||!i.value)&&(i.value=s.value),s},b=(o,n)=>{const r=[...new Set([...a(o),...a(n)])],c={};for(const t of r)c[t]=n[t]!==void 0?n[t]:o[t];return c};exports.keysOf=a;exports.provideGlobalConfig=k;exports.useGlobalConfig=d;

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

@@ -0,0 +1,4 @@
+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>;

package/lib/src/config-provider/hooks/use-token.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),n=Symbol("designTokenContextKey"),t=()=>e.inject(n,e.ref({}));exports.designTokenContextKey=n;exports.useToken=t;

package/lib/src/config-provider/index.d.ts

@@ -7,6 +7,7 @@ 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 { LocaleType } from '../locale';
+import { FullToken } from '../design-token/interface';
 import { ApiType, ApUploadConfig, ApDescriptionsConfig, ValueTypeRenderConfig, downloadCenterTriggerConfig, ExportField, SearchFormGlobalConfig } from './constants';
 export * from './config-provider-props';
 export * from './constants';
@@ -160,6 +161,9 @@ export declare const APConfigProvider: {
         aplusLocale: {
             type: PropType<LocaleType>;
         };
+        aplusToken: {
+            type: PropType<Partial< FullToken>>;
+        };
         namespace: {
             type: StringConstructor;
         };
@@ -392,6 +396,9 @@ export declare const APConfigProvider: {
         aplusLocale: {
             type: PropType<LocaleType>;
         };
+        aplusToken: {
+            type: PropType<Partial< FullToken>>;
+        };
         namespace: {
             type: StringConstructor;
         };
@@ -621,6 +628,9 @@ export declare const APConfigProvider: {
     aplusLocale: {
         type: PropType<LocaleType>;
     };
+    aplusToken: {
+        type: PropType<Partial< FullToken>>;
+    };
     namespace: {
         type: StringConstructor;
     };

package/lib/src/design-token/constants.d.ts

@@ -0,0 +1,2 @@
+import { BaseToken } from './interface';
+export declare const defaultToken: BaseToken;

package/lib/src/design-token/constants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o={borderColorBase:"#dee4ed",hoverColorBase:"#66a9ff",activeColorBase:"#66a9ff",colorPrimary:"#0070ff",colorPrimaryDisabled:"#cce2ff",colorLink:"#0070ff",colorLinkHover:"#66a9ff",colorLinkDisabled:"#cce2ff",colorSuccess:"#2ed1a3",colorSuccessDisabled:"#d5f6ed",colorError:"#ff4d4f",colorErrorDisabled:"#ffdbdc",colorWarn:"#ffa940",colorWarnDisabled:"#ffeed9",textColor1:"#526a90",textColor2:"#182948",textColor3:"#8896b0",textColor4:"#abb7cc",colorBg1:"#e9edf3",colorBg2:"#f6f9fa",colorBg3:"#f3f5f8",colorBgDisabled:"#f2f6f9",fontSizeSM:10,fontSize:12,fontSizeLG:14,fontSizeXL:16,lineHeightSM:16,lineHeight:18,lineHeightLG:22,borderRadiusXS:1,borderRadius:4,spaceXXS:2,spaceXS:4,spaceSM:6,space:8,spaceMD:10,spaceLG:12,spaceXL:16,spaceXXL:24};exports.defaultToken=o;

package/lib/src/design-token/interface.d.ts

@@ -0,0 +1,123 @@
+import { ActionToken } from '../ap-action/style';
+import { Recordable } from '../type';
+import { CSSInterpolation } from '@emotion/serialize';
+export type BaseToken = {
+    /**
+     * 基础边框色
+     */
+    borderColorBase: string;
+    /**
+     * 基础hover色
+     */
+    hoverColorBase: string;
+    /**
+     * 基础active色
+     */
+    activeColorBase: string;
+    /**
+     * 主色
+     */
+    colorPrimary: string;
+    /**
+     * 主色禁用色
+     */
+    colorPrimaryDisabled: string;
+    /**
+     * 链接色
+     */
+    colorLink: string;
+    /**
+     * 链接色-hover
+     */
+    colorLinkHover: string;
+    /**
+     * 链接色-禁用
+     */
+    colorLinkDisabled: string;
+    /**
+     * 成功色
+     */
+    colorSuccess: string;
+    /**
+     * 成功色-禁用
+     */
+    colorSuccessDisabled: string;
+    /**
+     * 失败色
+     */
+    colorError: string;
+    /**
+     * 失败色-禁用
+     */
+    colorErrorDisabled: string;
+    /**
+     * 警告色
+     */
+    colorWarn: string;
+    /**
+     * 警告色-禁用
+     */
+    colorWarnDisabled: string;
+    /**
+     * 一级文本色
+     */
+    textColor1: string;
+    /**
+     * 二级文本色
+     */
+    textColor2: string;
+    /**
+     * 三级文本色
+     */
+    textColor3: string;
+    /**
+     * 四级文本色
+     */
+    textColor4: string;
+    /**
+     * 一级背景色
+     */
+    colorBg1: string;
+    /**
+     * 二级背景色
+     */
+    colorBg2: string;
+    /**
+     * 三级背景色
+     */
+    colorBg3: string;
+    /**
+     * 背景禁用色
+     */
+    colorBgDisabled: string;
+    fontSizeXL: number;
+    fontSizeLG: number;
+    fontSize: number;
+    fontSizeSM: number;
+    lineHeightLG: number;
+    lineHeight: number;
+    lineHeightSM: number;
+    borderRadiusXS: number;
+    borderRadius: number;
+    spaceXXS: number;
+    spaceXS: number;
+    spaceSM: number;
+    space: number;
+    spaceMD: number;
+    spaceLG: number;
+    spaceXL: number;
+    spaceXXL: number;
+};
+export type FullToken = BaseToken & {
+    components: {
+        ApAction: ActionToken;
+    };
+};
+export type TokenWithComponentCls<Token> = Token & {
+    componentCls: string;
+};
+export type CssVarToken<Token = Recordable> = {
+    [key in keyof Token]: Token[key] | string;
+};
+export type GenStyleFunc<Token> = (token: TokenWithComponentCls<Token>) => CSSInterpolation;
+export type GenStyleCallback<Token> = (token: TokenWithComponentCls<Token>) => CSSInterpolation[];

package/lib/src/style/index.cjs

@@ -0,0 +1,12 @@
+export const resetComponent = (token) => {
+    return {
+        boxSizing: 'border-box',
+        margin: 0,
+        padding: 0,
+        color: token.textColor2,
+        fontSize: token.fontSize,
+        fontFamily: 'inherit',
+        lineHeight: token.lineHeight,
+        listStyle: 'none'
+    };
+};

package/lib/src/style/index.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'vue';
+import { BaseToken } from '../design-token/interface';
+export declare const resetComponent: (token: BaseToken) => CSSProperties;

package/lib/src/style/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>({boxSizing:"border-box",margin:0,padding:0,color:e.textColor2,fontSize:e.fontSize,fontFamily:"inherit",lineHeight:e.lineHeight,listStyle:"none"});exports.resetComponent=t;

package/lib/src/utils/cssinjs/index.d.ts

@@ -0,0 +1,8 @@
+import { BaseToken, GenStyleCallback } from '../../design-token/interface';
+import { Ref } from 'vue';
+type GeneraterOption = {
+    skipUnit: string[];
+};
+export declare function camelToKebab(str: string): string;
+export declare function genComponentStyleHook<ComponentToken>(componentName: string, cb: GenStyleCallback<BaseToken & ComponentToken>, componentToken?: Partial<ComponentToken>, option?: GeneraterOption): (prefixCls: string) => Ref<string | undefined, string | undefined>;
+export {};

package/lib/src/utils/cssinjs/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("lodash-unified"),a=require("vue"),g=require("../../config-provider/hooks/use-token.js"),f=require("@emotion/css");require("../../config-provider/index.js");const k=require("../../config-provider/hooks/use-global-config.js");function C(e,t){return Object.entries(e).reduce((n,[s,r])=>{const c=typeof r=="number"&&!t?.skipUnit?.includes(s)?`${r}px`:r;return n[i(s)]=c,n},{})}function i(e){return"--"+e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function T(e){const t={};for(const n in e)t[n]=`var(${i(n)})`;return t}function S(e,t,n,s){return r=>{const c=a.ref(),l=g.useToken(),b=k.useGlobalConfig("namespace"),m=a.computed(()=>{let o=p.omit(l.value||{},"components");return o={...o,...p.merge(n||{},l.value.components?.[e]||{})},o});return a.watch(()=>m.value,o=>{const u=T(o);u.componentCls=`.${b.value}-${r}`;const d=t(u);f.injectGlobal(d)},{immediate:!0,once:!0}),a.watch(()=>m.value,o=>{const u=C(o,s);c.value=f.css(u)},{deep:!0,immediate:!0}),c}}exports.camelToKebab=i;exports.genComponentStyleHook=S;

package/lib/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "6.41.0";
+declare const _default: "7.0.0-beta.0";
 export default _default;

package/lib/src/version.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="6.41.0";exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="7.0.0-beta.0";exports.default=e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aplus-frontend/ui",
-  "version": "6.41.0",
+  "version": "7.0.0-beta.0",
   "main": "./lib/index.js",
   "type": "module",
   "files": [
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@emotion/css": "^11.13.5",
     "@fruits-chain/utils": "^1.0.7",
     "@vueuse/core": "^10.9.0",
     "ag-grid-community": "^33.3.2",
@@ -51,6 +52,7 @@
     "@aplus-frontend/antdv": "^1.2.16",
     "@aplus-frontend/icon": "^1.3.2",
     "@aplus-frontend/oss": "^1.1.2",
+    "@emotion/serialize": "^1.3.3",
     "@types/sortablejs": "^1.15.8",
     "@vue/test-utils": "^2.4.6",
     "axios": "^1.7.2",

package/theme/ag-grid/index.css

@@ -485,62 +485,6 @@
   word-wrap: break-word;
   word-break: break-all;
 }
-.aplus-action-item {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  color: #182948;
-  font-size: 12px;
-  font-family: inherit;
-  line-height: 18px;
-  list-style: none;
-  display: inline-block;
-  cursor: pointer;
-}
-.aplus-action-item--primary {
-  color: var(--ap-color-link);
-}
-.aplus-action-item--primary:not(.aplus-action-item--disabled):hover {
-  color: var(--ap-color-link-hover);
-}
-.aplus-action-item--success {
-  color: var(--ap-color-success);
-}
-.aplus-action-item--error {
-  color: var(--ap-color-error);
-}
-.aplus-action-item--warn {
-  color: var(--ap-color-warn);
-}
-.aplus-action-item--loading {
-  opacity: 0.35;
-  transition: opacity 0.2s;
-  cursor: default;
-}
-.aplus-action-item--loading .btn-loading-icon {
-  margin-right: 4px;
-}
-.aplus-action-item--disabled {
-  cursor: not-allowed;
-}
-.aplus-action-item--primary.aplus-action-item--disabled {
-  color: var(--ap-color-link-disabled);
-}
-.aplus-action-item--success.aplus-action-item--disabled {
-  color: var(--ap-color-success-disabled);
-}
-.aplus-action-item--error.aplus-action-item--disabled {
-  color: var(--ap-color-error-disabled);
-}
-.aplus-action-item--warn.aplus-action-item--disabled {
-  color: var(--ap-color-warn-disabled);
-}
-.aplus-action-item__icon-wrapper {
-  padding-right: 4px;
-}
-.aplus-action-item--icon-first .aplus-action-item__icon-wrapper {
-  padding-right: 0;
-}
 .aplus-action-item-dropdown__item .aplus-action-item {
   width: 100%;
 }

package/theme/ag-grid-modal/index.css

@@ -485,62 +485,6 @@
   word-wrap: break-word;
   word-break: break-all;
 }
-.aplus-action-item {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  color: #182948;
-  font-size: 12px;
-  font-family: inherit;
-  line-height: 18px;
-  list-style: none;
-  display: inline-block;
-  cursor: pointer;
-}
-.aplus-action-item--primary {
-  color: var(--ap-color-link);
-}
-.aplus-action-item--primary:not(.aplus-action-item--disabled):hover {
-  color: var(--ap-color-link-hover);
-}
-.aplus-action-item--success {
-  color: var(--ap-color-success);
-}
-.aplus-action-item--error {
-  color: var(--ap-color-error);
-}
-.aplus-action-item--warn {
-  color: var(--ap-color-warn);
-}
-.aplus-action-item--loading {
-  opacity: 0.35;
-  transition: opacity 0.2s;
-  cursor: default;
-}
-.aplus-action-item--loading .btn-loading-icon {
-  margin-right: 4px;
-}
-.aplus-action-item--disabled {
-  cursor: not-allowed;
-}
-.aplus-action-item--primary.aplus-action-item--disabled {
-  color: var(--ap-color-link-disabled);
-}
-.aplus-action-item--success.aplus-action-item--disabled {
-  color: var(--ap-color-success-disabled);
-}
-.aplus-action-item--error.aplus-action-item--disabled {
-  color: var(--ap-color-error-disabled);
-}
-.aplus-action-item--warn.aplus-action-item--disabled {
-  color: var(--ap-color-warn-disabled);
-}
-.aplus-action-item__icon-wrapper {
-  padding-right: 4px;
-}
-.aplus-action-item--icon-first .aplus-action-item__icon-wrapper {
-  padding-right: 0;
-}
 .aplus-action-item-dropdown__item .aplus-action-item {
   width: 100%;
 }