@type-dom/ui 0.0.10 → 0.1.1

package/src/components/basic/td-space/td-space.interface.d.ts

@@ -1,24 +1,34 @@
-import { StyleAlignItems, TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdSpace extends IUI {
+import { ITypeDiv, TypeDivProps, IClass, TypeNode } from '@type-dom/framework';
+import { Property } from '@type-dom/css-type';
+import { MaybeRef } from '@type-dom/signals';
+import { ComponentSize } from '../../../constants';
+export interface ITdSpace extends ITypeDiv {
     className: 'TdSpace';
     horizontalSize?: number;
     verticalSize?: number;
 }
-export interface ITdSpaceConfig extends IUIConfig {
+export interface SpaceProps extends TypeDivProps {
     /**
      * @description Placement direction	排列的方向
      */
-    direction?: 'horizontal' | 'vertical';
+    direction?: MaybeRef<'horizontal' | 'vertical'>;
+    /**
+     * @description Classname
+     */
+    class?: IClass;
     /**
      * @description Controls the alignment of items	对齐方式
      * 对应 align-items
      */
-    alignment?: StyleAlignItems;
+    alignment?: Property.AlignItems;
+    /**
+     * @description Prefix for space-items
+     */
+    prefixCls?: string;
     /**
      * @description Spacer	间隔符
      */
-    spacer?: string | number | TypeSvgSvg;
+    spacer?: string | number | TypeNode;
     /**
      * @description Auto wrapping 设置是否自动折行 default: false
      */
@@ -26,15 +36,16 @@ export interface ITdSpaceConfig extends IUIConfig {
     /**
      * @description Whether to fill the container	是否填充剩余空间 default: false
      */
-    fill?: boolean;
+    fill?: MaybeRef<boolean>;
     /**
      * @description Ratio of fill
+     * 填充比率 default: 100
      */
-    fillRatio?: number;
+    fillRatio?: MaybeRef<number>;
     /**
      * Sets the space between each element.
      * 间隔大小
      * 元组：[水平间隔，垂直间隔]；
      */
-    size?: number | string | [h: number, v: number];
+    size?: MaybeRef<number | ComponentSize | string | [h: number, v: number]>;
 }

package/src/components/basic/td-space/use-space.d.ts

@@ -0,0 +1,7 @@
+import { IStyle } from '@type-dom/css-type';
+import { SpaceProps } from './td-space.interface';
+export declare function useSpace(props: SpaceProps): {
+    classes: import("@type-dom/signals").Computed<import("dist/libs/framework/src").IClass[]>;
+    containerStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>[]>;
+    itemStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
+};

package/src/components/basic/td-space/use-space.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSpace = useSpace;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const SIZE_MAP = {
+    small: 8,
+    default: 12,
+    large: 16,
+};
+function useSpace(props) {
+    const ns = (0, use_namespace_1.useNamespace)('space');
+    const classes = (0, signals_1.computed)(() => [
+        ns.b(),
+        ns.m((0, signals_1.toRaw)(props.direction)),
+        props.class,
+    ]);
+    const horizontalSize = (0, signals_1.signal)(0);
+    const verticalSize = (0, signals_1.signal)(0);
+    const containerStyle = (0, signals_1.computed)(() => {
+        const wrapKls = props.wrap || (0, signals_1.toRaw)(props.fill) ? { flexWrap: 'wrap' } : {};
+        const alignment = {
+            alignItems: props.alignment,
+        };
+        const gap = {
+            rowGap: `${verticalSize.get()}px`,
+            columnGap: `${horizontalSize.get()}px`,
+        };
+        // return Object.assign({}, wrapKls, alignment, gap, props.styleObj)
+        return [wrapKls, alignment, gap, props.styleObj];
+    });
+    const itemStyle = (0, signals_1.computed)(() => {
+        return (0, signals_1.toRaw)(props.fill)
+            ? { flexGrow: 1, minWidth: `${(0, signals_1.toRaw)(props.fillRatio)}%` }
+            : {};
+    });
+    (0, signals_1.effect)(() => {
+        console.error('TdSpace effect . ');
+        const { wrap, direction: dir, fill } = props;
+        const size = (0, signals_1.unref)(props.size);
+        // when the specified size have been given
+        if ((0, utils_1.isArray)(size)) {
+            const [h = 0, v = 0] = size;
+            horizontalSize.set(h);
+            verticalSize.set(v);
+        }
+        else {
+            let val;
+            if ((0, utils_1.isNumber)(size)) {
+                val = size;
+            }
+            else {
+                val = SIZE_MAP[size || 'small'] || SIZE_MAP.small;
+            }
+            if ((wrap || fill) && dir === 'horizontal') {
+                horizontalSize.set(val);
+                verticalSize.set(val);
+            }
+            else {
+                if (dir === 'horizontal') {
+                    horizontalSize.set(val);
+                    verticalSize.set(0);
+                }
+                else {
+                    verticalSize.set(val);
+                    horizontalSize.set(0);
+                }
+            }
+        }
+    });
+    return {
+        classes,
+        containerStyle,
+        itemStyle,
+    };
+}

package/src/components/basic/td-text/style/css.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '../../../../theme-chalk/td-text.css';

package/src/components/basic/td-text/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("../../../../theme-chalk/td-text.css");

package/src/components/basic/td-text/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style';
+import '../../../../theme-chalk/text.scss';

package/src/components/basic/td-text/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");
+require("../../../../theme-chalk/text.scss");

package/src/components/basic/td-text/td-text.class.d.ts

@@ -1,10 +1,10 @@
-import { UI } from '../../../ui/ui.abstract';
-import { TdIcon } from '../td-icon/td-icon.class';
+import { TypeHtml } from '@type-dom/framework';
 import { ITdText, ITdTextConfig } from './td-text.interface';
-export declare class TdText extends UI implements ITdText {
+import './style/index';
+export declare class TdText extends TypeHtml implements ITdText {
     className: 'TdText';
+    dom?: HTMLElement;
     props: ITdTextConfig;
-    icon?: TdIcon;
     constructor(params?: ITdTextConfig);
     setup(): void;
 }

package/src/components/basic/td-text/td-text.class.js

@@ -1,53 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdText = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_text_style_1 = require("./td-text.style");
-class TdText extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_form_common_props_1 = require("../../form/td-form/hooks/use-form-common-props");
+const td_text_const_1 = require("./td-text.const");
+require("./style/index");
+class TdText extends framework_1.TypeHtml {
     constructor(params = {}) {
-        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'span');
+        super();
         this.className = 'TdText';
-        this.style.addObj(td_text_style_1.$baseText);
+        this.assignProps(td_text_const_1.textProps);
         this.props = this.useParams(params);
-        // this.addChild(this.getSlotNode());
-        if (params.slot) {
-            this.slotChild(params.slot);
-        }
     }
     setup() {
         const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.type) {
-            this.style.addObj(td_text_style_1.$textStateColors[props.type].default);
-        }
-        else {
-            this.style.addObj(td_text_style_1.$textStateColors.default.default);
-        }
-        if (props === null || props === void 0 ? void 0 : props.size) {
-            this.style.addObj(td_text_style_1.sizeOpts[props === null || props === void 0 ? void 0 : props.size]);
-        }
-        else {
-            this.style.addObj(td_text_style_1.sizeOpts.default);
-        }
-        if ((props === null || props === void 0 ? void 0 : props.truncated) && (props === null || props === void 0 ? void 0 : props.width)) {
-            this.style.addObj({
-                display: 'inline-block',
-                maxWidth: '100%',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                width: props === null || props === void 0 ? void 0 : props.width
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.lineClamp) {
+        const textSize = (0, use_form_common_props_1.useFormSize)();
+        const ns = (0, use_namespace_1.useNamespace)('text');
+        const textKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.m(props.type),
+            ns.m(textSize.get()),
+            ns.is('truncated', props.truncated),
+            ns.is('line-clamp', !(0, utils_1.isUndefined)(props.lineClamp)),
+        ]);
+        this.attr.addClass(textKls);
+        if (props.lineClamp) {
+            console.warn('then -webkit-line-clamp . ');
             this.style.addObj({
-                // '-webkit-line-clamp': props?.lineClamp,
-                WebkitLineClamp: props === null || props === void 0 ? void 0 : props.lineClamp,
-                display: '-webkit-inline-box',
-                // '-webkit-box-orient': 'vertical',
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden'
+                // color: '#f00',
+                '-webkit-line-clamp': props.lineClamp,
             });
         }
+        this.slotChildren(props.slot);
     }
 }
 exports.TdText = TdText;

package/src/components/basic/td-text/td-text.const.d.ts

@@ -0,0 +1,2 @@
+import { ITdTextConfig } from './td-text.interface';
+export declare const textProps: ITdTextConfig;

package/src/components/basic/td-text/td-text.const.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textProps = void 0;
+exports.textProps = {
+    tag: 'span',
+};

package/src/components/basic/td-text/td-text.interface.d.ts

@@ -1,12 +1,12 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TypeProps, ITypeHtml } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
 import { IType } from '../../../styles';
-import { ISize } from '../../../styles/size';
-export interface ITdText extends IUI {
+export interface ITdText extends ITypeHtml {
     className: 'TdText';
 }
-export interface ITdTextConfig extends IUIConfig {
+export interface ITdTextConfig extends TypeProps {
     type?: IType;
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description render ellipsis
      */

package/src/components/basic/td-text/td-text.style.js

@@ -9,7 +9,7 @@ exports.$baseText = {
     padding: '0',
     fontSize: var_1.$fontSizeMap.default,
     color: var_1.$colors.default.base,
-    overflowWrap: 'break-word'
+    overflowWrap: 'break-word',
 };
 exports.sizeOpts = {
     // mini: {
@@ -19,27 +19,27 @@ exports.sizeOpts = {
     // },
     small: {
         height: var_1.$commonComponentSize.small,
-        fontSize: var_1.$fontSizes.extraSmall
+        fontSize: var_1.$fontSizes.extraSmall,
     },
     default: {
         height: var_1.$commonComponentSize.default,
-        fontSize: var_1.$fontSizes.base
+        fontSize: var_1.$fontSizes.base,
     },
     large: {
         height: var_1.$commonComponentSize.large,
-        fontSize: var_1.$fontSizes.medium
-    }
+        fontSize: var_1.$fontSizes.medium,
+    },
 };
 exports.$textStateColors = {};
 function buttonVariant($type) {
     exports.$textStateColors[$type] = {
         default: {
-            color: var_1.$colors[$type].base
+            color: var_1.$colors[$type].base,
         },
         hover: {
             color: $type === 'default'
                 ? var_1.$colors['primary'].base
-                : var_1.$colors[$type]['light-3'] // ['color', $type, 'light-3'],
+                : var_1.$colors[$type]['light-3'], // ['color', $type, 'light-3'],
             // content: '',
             // position: 'absolute',
             // left: 0,
@@ -49,11 +49,11 @@ function buttonVariant($type) {
             // borderBottom: '1px solid ' + ($type === 'default' ? $colors['primary'].base : $colors[$type]['light-3']),
         },
         active: {
-            color: var_1.$colors[$type]['dark-2'] // ['color', $type, 'dark-2'],
+            color: var_1.$colors[$type]['dark-2'], // ['color', $type, 'dark-2'],
         },
         disabled: {
-            color: var_1.$colors[$type]['light-5'] // ['color', $type, 'light-5'],
-        }
+            color: var_1.$colors[$type]['light-5'], // ['color', $type, 'light-5'],
+        },
     };
 }
 for (const $type of [
@@ -62,7 +62,7 @@ for (const $type of [
     'warning',
     'info',
     'danger',
-    'default'
+    'default',
 ]) {
     buttonVariant($type);
 }

package/src/components/configuration/td-config-provider/config-provider-props.d.ts

@@ -0,0 +1,46 @@
+import { TypeFragmentProps } from '@type-dom/framework';
+import { Language } from '../../../locale';
+import { ButtonConfigContext } from '../../basic/td-button/td-button.const';
+import { UseEmptyValuesProps } from '../../../hooks/use-empty-values';
+import { ComponentSize } from '../../../constants/size';
+import { MessageConfigContext } from '../../feedback/td-message/td-message.interface';
+export type ExperimentalFeatures = {};
+export interface ConfigProviderProps extends TypeFragmentProps, UseEmptyValuesProps {
+    /**
+     * @description Controlling if the users want a11y features
+     */
+    a11y?: boolean;
+    /**
+     * @description Locale Object
+     */
+    locale?: Language;
+    /**
+     * @description global component size
+     */
+    size?: ComponentSize;
+    /**
+     * @description button related configuration, [see the following table](#button-attributes)
+     */
+    button?: ButtonConfigContext;
+    /**
+     * @description features at experimental stage to be added, all features are default to be set to false                                                                                | ^[object]
+     */
+    experimentalFeatures?: ExperimentalFeatures;
+    /**
+     * @description Controls if we should handle keyboard navigation
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * @description message related configuration, [see the following table](#message-attributes)
+     */
+    message?: MessageConfigContext;
+    /**
+     * @description global Initial zIndex
+     */
+    zIndex?: number;
+    /**
+     * @description global component className prefix (cooperated with [$namespace](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/mixins/config.scss#L1)) | ^[string]
+     */
+    namespace?: string;
+}
+export declare const configProviderProps: ConfigProviderProps;

package/src/components/configuration/td-config-provider/config-provider-props.js

@@ -0,0 +1,16 @@
+"use strict";
+// import { buildProps, definePropType } from '@element-plus/utils'
+// import { useEmptyValuesProps, useSizeProp } from '@element-plus/hooks'
+//
+// import type { ExtractPropTypes } from 'vue'
+// import type { Language } from '@element-plus/locale'
+// import type { ButtonConfigContext } from '@element-plus/components/button'
+// import type { MessageConfigContext } from '@element-plus/components/message'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configProviderProps = void 0;
+exports.configProviderProps = {
+    a11y: true,
+    keyboardNavigation: true,
+    namespace: 'td',
+    // ...useEmptyValuesProps,
+};

package/src/components/configuration/td-config-provider/config-provider.d.ts

@@ -0,0 +1,11 @@
+import { ConfigProviderProps } from './config-provider-props';
+import { MessageConfigContext } from '../../feedback/td-message/td-message.interface';
+import { TypeFragment } from '@type-dom/framework';
+export declare const messageConfig: MessageConfigContext;
+export declare class ConfigProvider extends TypeFragment {
+    className: 'TdConfigProvider';
+    props: ConfigProviderProps;
+    constructor(params: ConfigProviderProps);
+    setup(): void;
+}
+export default ConfigProvider;

package/src/components/configuration/td-config-provider/config-provider.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigProvider = exports.messageConfig = void 0;
+// import { defineComponent, renderSlot, watch } from 'vue'
+const use_global_config_1 = require("./hooks/use-global-config");
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+// import type { MessageConfigContext } from '@element-plus/components/message'
+exports.messageConfig = {};
+class ConfigProvider extends framework_1.TypeFragment {
+    constructor(params) {
+        super();
+        this.className = 'TdConfigProvider';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const slots = this.props.slots;
+        (0, signals_1.watch)(() => props.message, (val) => {
+            Object.assign(exports.messageConfig, val !== null && val !== void 0 ? val : {});
+        }, { immediate: true, deep: true });
+        const config = (0, use_global_config_1.provideGlobalConfig)(props);
+        // return () => renderSlot(slots, 'default', { config: config?.value })
+        const slot = props.slot || (slots === null || slots === void 0 ? void 0 : slots.default);
+        // todo slot config
+        this.slotChildren(slot);
+    }
+}
+exports.ConfigProvider = ConfigProvider;
+// export type ConfigProviderInstance = InstanceType<typeof ConfigProvider>
+exports.default = ConfigProvider;

package/src/components/configuration/td-config-provider/constants.d.ts

@@ -0,0 +1,5 @@
+import type { ConfigProviderProps } from './config-provider-props';
+import { InjectionKey } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+export type ConfigProviderContext = Partial<ConfigProviderProps>;
+export declare const configProviderContextKey: InjectionKey<Ref<ConfigProviderContext>>;

package/src/components/configuration/td-config-provider/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configProviderContextKey = void 0;
+exports.configProviderContextKey = Symbol();

package/src/components/configuration/td-config-provider/hooks/use-global-config.d.ts

@@ -0,0 +1,33 @@
+import { Ref, MaybeRef } from '@type-dom/signals';
+import { TypeElement } from '@type-dom/framework';
+import type { ConfigProviderContext } from '../constants';
+export declare function useGlobalConfig<K extends keyof ConfigProviderContext, D extends ConfigProviderContext[K]>(key: K, defaultValue?: D): Ref<Exclude<ConfigProviderContext[K], undefined> | D>;
+export declare function useGlobalConfig(): Ref<ConfigProviderContext>;
+export declare function useGlobalComponentSettings(block: string, sizeFallback?: MaybeRef<ConfigProviderContext['size']>): {
+    ns: {
+        namespace: import("@type-dom/signals").Computed<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string) => string;
+        m: (modifier?: string) => string;
+        be: (blockSuffix?: string, element?: string) => string;
+        em: (element?: string, modifier?: string) => string;
+        bm: (blockSuffix?: string, modifier?: string) => string;
+        bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    locale: import("../../../../hooks/use-locale").LocaleContext;
+    zIndex: {
+        initialZIndex: import("@type-dom/signals").Computed<number>;
+        currentZIndex: import("@type-dom/signals").Computed<number>;
+        nextZIndex: () => number;
+    };
+    size: import("@type-dom/signals").Computed<"default" | "small" | "" | "large">;
+};
+export declare const provideGlobalConfig: (config: MaybeRef<ConfigProviderContext>, app?: TypeElement, global?: boolean) => import("@type-dom/signals").Computed<Partial<import("..").ConfigProviderProps>> | undefined;

package/src/components/configuration/td-config-provider/hooks/use-global-config.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.provideGlobalConfig = void 0;
+exports.useGlobalConfig = useGlobalConfig;
+exports.useGlobalComponentSettings = useGlobalComponentSettings;
+// import { computed, getCurrentInstance, inject, provide, ref, unref } from 'vue'
+// import { debugWarn, keysOf } from '@element-plus/utils'
+// import {
+//   SIZE_INJECTION_KEY,
+//   defaultInitialZIndex,
+//   defaultNamespace,
+//   emptyValuesContextKey,
+//   localeContextKey,
+//   namespaceContextKey,
+//   useLocale,
+//   useNamespace,
+//   useZIndex,
+//   zIndexContextKey,
+// } from '@element-plus/hooks'
+// import type { MaybeRef } from '@vueuse/core'
+// import type { App, Ref } from 'vue'
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const use_locale_1 = require("../../../../hooks/use-locale");
+const use_z_index_1 = require("../../../../hooks/use-z-index");
+const use_size_1 = require("../../../../hooks/use-size");
+const use_empty_values_1 = require("../../../../hooks/use-empty-values");
+const constants_1 = require("../constants");
+// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale
+// into the component as default injection value.
+// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266
+const globalConfig = (0, signals_1.signal)();
+function useGlobalConfig(key, defaultValue = undefined) {
+    const config = (0, framework_1.getCurrentInstance)()
+        ? (0, framework_1.inject)(constants_1.configProviderContextKey, globalConfig)
+        : globalConfig;
+    if (key) {
+        return (0, signals_1.computed)(() => { var _a, _b; return (_b = (_a = config.get()) === null || _a === void 0 ? void 0 : _a[key]) !== null && _b !== void 0 ? _b : defaultValue; });
+    }
+    else {
+        return config;
+    }
+}
+// for components like `ElMessage` `ElNotification` `ElMessageBox`.
+function useGlobalComponentSettings(block, sizeFallback) {
+    const config = useGlobalConfig();
+    const ns = (0, use_namespace_1.useNamespace)(block, (0, signals_1.computed)(() => { var _a; return ((_a = config.get()) === null || _a === void 0 ? void 0 : _a.namespace) || use_namespace_1.defaultNamespace; }));
+    const locale = (0, use_locale_1.useLocale)((0, signals_1.computed)(() => { var _a; return (_a = config.get()) === null || _a === void 0 ? void 0 : _a.locale; }));
+    const zIndex = (0, use_z_index_1.useZIndex)((0, signals_1.computed)(() => { var _a; return ((_a = config.get()) === null || _a === void 0 ? void 0 : _a.zIndex) || use_z_index_1.defaultInitialZIndex; }));
+    const size = (0, signals_1.computed)(() => { var _a; return (0, signals_1.unref)(sizeFallback) || ((_a = config.get()) === null || _a === void 0 ? void 0 : _a.size) || ''; });
+    (0, exports.provideGlobalConfig)((0, signals_1.computed)(() => (0, signals_1.unref)(config) || {}));
+    return {
+        ns,
+        locale,
+        zIndex,
+        size,
+    };
+}
+const provideGlobalConfig = (config, app, global = false) => {
+    var _a, _b, _c;
+    const inSetup = !!(0, framework_1.getCurrentInstance)();
+    const oldConfig = inSetup ? useGlobalConfig() : undefined;
+    const provideFn = (_a = app === null || app === void 0 ? void 0 : app.provide) !== null && _a !== void 0 ? _a : (inSetup ? framework_1.provide : undefined);
+    if (!provideFn) {
+        (0, utils_1.debugWarn)('provideGlobalConfig', 'provideGlobalConfig() can only be used inside setup().');
+        return;
+    }
+    const context = (0, signals_1.computed)(() => {
+        const cfg = (0, signals_1.unref)(config);
+        if (!(oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.get()))
+            return cfg;
+        return mergeConfig(oldConfig.get(), cfg);
+    });
+    provideFn(constants_1.configProviderContextKey, context);
+    provideFn(use_locale_1.localeContextKey, (0, signals_1.computed)(() => context.get().locale));
+    provideFn(use_namespace_1.namespaceContextKey, (0, signals_1.computed)(() => context.get().namespace));
+    provideFn(use_z_index_1.zIndexContextKey, (0, signals_1.computed)(() => context.get().zIndex));
+    provideFn(use_size_1.SIZE_INJECTION_KEY, {
+        size: (0, signals_1.computed)(() => context.get().size || ''),
+    });
+    provideFn(use_empty_values_1.emptyValuesContextKey, {
+        emptyValues: (_b = context === null || context === void 0 ? void 0 : context.get()) === null || _b === void 0 ? void 0 : _b.emptyValues,
+        valueOnClear: (_c = context === null || context === void 0 ? void 0 : context.get()) === null || _c === void 0 ? void 0 : _c.valueOnClear,
+    });
+    if (global || !globalConfig.get()) {
+        globalConfig.set(context.get());
+    }
+    return context;
+};
+exports.provideGlobalConfig = provideGlobalConfig;
+const mergeConfig = (a, b) => {
+    const keys = [...new Set([...(0, utils_1.keysOf)(a), ...(0, utils_1.keysOf)(b)])];
+    const obj = {};
+    for (const key of keys) {
+        obj[key] = b[key] !== undefined ? b[key] : a[key];
+    }
+    return obj;
+};

package/src/components/configuration/td-config-provider/index.d.ts

@@ -0,0 +1,4 @@
+export * from './config-provider';
+export * from './config-provider-props';
+export * from './constants';
+export * from './hooks/use-global-config';

package/src/components/configuration/td-config-provider/index.js

@@ -0,0 +1,11 @@
+"use strict";
+// import ConfigProvider from './config-provider'
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// export const ElConfigProvider: SFCWithInstall<typeof ConfigProvider> =
+//   withInstall(ConfigProvider)
+// export default ElConfigProvider
+tslib_1.__exportStar(require("./config-provider"), exports);
+tslib_1.__exportStar(require("./config-provider-props"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./hooks/use-global-config"), exports);

package/src/components/configuration/td-config-provider/style/css.d.ts

@@ -0,0 +1,2 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-config-provider.css';

package/src/components/configuration/td-config-provider/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/theme-chalk/el-config-provider.css");