@type-dom/ui 0.1.1 → 0.1.3

package/src/components/basic/td-scrollbar/thumb/thumb.class.js

@@ -1,95 +1,82 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdScrollbarThumb = void 0;
+exports.Thumb = void 0;
 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 util_1 = require("../util");
-const td_scrollbar_style_1 = require("../td-scrollbar.style");
 const td_scrollbar_const_1 = require("../td-scrollbar.const");
-class TdScrollbarThumb extends framework_1.TypeFragment {
+class Thumb extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
-        this.className = 'TdScrollbarThumb';
-        this.thumb = new framework_1.Div({
-            name: 'thumb',
-            styleObj: td_scrollbar_style_1.$scrollbarThumbStyle,
-        });
-        this.instance = new framework_1.Div({
-            styleObj: td_scrollbar_style_1.$scrollbarBarStyle,
-            slot: [this.thumb],
-        });
-        this.addChild(new framework_1.Transition({
-            name: 'fade',
-            slot: this.instance,
-        }));
+        this.className = 'Thumb';
         this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
         const COMPONENT_NAME = 'Thumb';
-        const scrollbar = this.inject(td_scrollbar_const_1.scrollbarContextKey);
-        if (!scrollbar) {
+        const scrollbar = (0, framework_1.inject)(td_scrollbar_const_1.scrollbarContextKey);
+        const ns = (0, use_namespace_1.useNamespace)('scrollbar');
+        if (!scrollbar)
             (0, utils_1.throwError)(COMPONENT_NAME, 'can not inject scrollbar context');
-        }
-        const thumbState = {};
-        let visible = false;
+        const instance = (0, signals_1.signal)();
+        const thumb = (0, signals_1.signal)();
+        const thumbState = (0, signals_1.signal)({});
+        const visible = (0, signals_1.signal)(false);
         let cursorDown = false;
         let cursorLeave = false;
         let originalOnSelectStart = utils_1.isClient ? document.onselectstart : null;
-        const bar = util_1.BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
-        const thumbStyle = (0, util_1.renderThumbStyle)({
-            size: props.size,
-            move: props.move,
-            bar: bar,
+        const bar = (0, signals_1.computed)(() => util_1.BAR_MAP[props.vertical ? 'vertical' : 'horizontal']);
+        const thumbStyle = (0, signals_1.computed)(() => {
+            // console.warn('thumStyle . ');
+            // props.size?.get();
+            // props.move?.get();
+            return (0, util_1.renderThumbStyle)({
+                size: props.size,
+                move: props.move,
+                bar: bar.get(),
+            });
         });
-        const offsetRatio = 
+        const offsetRatio = (0, signals_1.computed)(() => 
         // offsetRatioX = original width of thumb / current width of thumb / ratioX
         // offsetRatioY = original height of thumb / current height of thumb / ratioY
         // instance height = wrap height - GAP
-        this.instance.dom
-            ? Math.pow(this.instance.dom[bar.offset], 2) /
-                scrollbar.wrapElement.dom[bar.scrollSize] /
-                props.ratio /
-                this.thumb.dom[bar.offset]
-            : 1;
+        Math.pow(instance.get()[bar.get().offset], 2) /
+            scrollbar.wrapElement.get()[bar.get().scrollSize] /
+            (0, signals_1.unref)(props.ratio) /
+            thumb.get()[bar.get().offset]);
         const clickThumbHandler = (e) => {
             var _a;
             // prevent click event of middle and right button
+            if (!e)
+                return;
             e === null || e === void 0 ? void 0 : e.stopPropagation();
-            if ((e === null || e === void 0 ? void 0 : e.ctrlKey) || [1, 2].includes(e.button)) {
+            if ((e === null || e === void 0 ? void 0 : e.ctrlKey) || [1, 2].includes(e.button))
                 return;
-            }
             (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
             startDrag(e);
-            const el = e === null || e === void 0 ? void 0 : e.currentTarget;
-            if (!el) {
+            const el = e.currentTarget;
+            if (!el)
                 return;
-            }
-            thumbState[bar.axis] =
-                el[bar.offset] -
-                    (e[bar.client] - el.getBoundingClientRect()[bar.direction]);
+            thumbState.get()[bar.get().axis] =
+                el[bar.get().offset] -
+                    (e[bar.get().client] - el.getBoundingClientRect()[bar.get().direction]);
         };
-        this.thumb.addEvents({
-            mousedown: clickThumbHandler,
-        });
         const clickTrackHandler = (e) => {
-            if (!this.thumb.dom || !this.instance.dom || !scrollbar.wrapElement.dom) {
+            if (!e || !thumb.get() || !instance.get() || !scrollbar.wrapElement)
                 return;
-            }
-            const offset = Math.abs((e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect()[bar.direction] -
-                e[bar.client]);
-            const thumbHalf = this.thumb.dom[bar.offset] / 2;
-            const thumbPositionPercentage = ((offset - thumbHalf) * 100 * offsetRatio) /
-                this.instance.dom[bar.offset];
-            scrollbar.wrapElement.dom[bar.scroll] =
-                (thumbPositionPercentage * scrollbar.wrapElement.dom[bar.scrollSize]) /
+            const offset = Math.abs(e.target.getBoundingClientRect()[bar.get().direction] -
+                e[bar.get().client]);
+            const thumbHalf = thumb.get()[bar.get().offset] / 2;
+            const thumbPositionPercentage = ((offset - thumbHalf) * 100 * offsetRatio.get()) /
+                instance.get()[bar.get().offset];
+            scrollbar.wrapElement.get()[bar.get().scroll] =
+                (thumbPositionPercentage * scrollbar.wrapElement.get()[bar.get().scrollSize]) /
                     100;
         };
-        this.instance.addEvents({
-            mousedown: clickTrackHandler,
-        });
         const startDrag = (e) => {
-            e === null || e === void 0 ? void 0 : e.stopImmediatePropagation();
+            e.stopImmediatePropagation();
             cursorDown = true;
             document.addEventListener('mousemove', mouseMoveDocumentHandler);
             document.addEventListener('mouseup', mouseUpDocumentHandler);
@@ -97,67 +84,70 @@ class TdScrollbarThumb extends framework_1.TypeFragment {
             document.onselectstart = () => false;
         };
         const mouseMoveDocumentHandler = (e) => {
-            if (!this.instance.dom || !this.thumb.dom) {
+            if (!instance.get() || !thumb.get())
                 return;
-            }
-            if (cursorDown === false) {
+            if (cursorDown === false)
                 return;
-            }
-            const prevPage = thumbState[bar.axis];
-            if (!prevPage) {
+            const prevPage = thumbState.get()[bar.get().axis];
+            if (!prevPage)
                 return;
-            }
-            const offset = (this.instance.dom.getBoundingClientRect()[bar.direction] -
-                e[bar.client]) *
+            const offset = (instance.get().getBoundingClientRect()[bar.get().direction] -
+                e[bar.get().client]) *
                 -1;
-            const thumbClickPosition = this.thumb.dom[bar.offset] - prevPage;
-            const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 * offsetRatio) /
-                this.instance.dom[bar.offset];
-            scrollbar.wrapElement.dom[bar.scroll] =
-                (thumbPositionPercentage * scrollbar.wrapElement.dom[bar.scrollSize]) /
+            const thumbClickPosition = thumb.get()[bar.get().offset] - prevPage;
+            const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 * offsetRatio.get()) /
+                instance.get()[bar.get().offset];
+            scrollbar.wrapElement.get()[bar.get().scroll] =
+                (thumbPositionPercentage * scrollbar.wrapElement.get()[bar.get().scrollSize]) /
                     100;
         };
         const mouseUpDocumentHandler = () => {
             cursorDown = false;
-            thumbState[bar.axis] = 0;
+            thumbState.get()[bar.get().axis] = 0;
             document.removeEventListener('mousemove', mouseMoveDocumentHandler);
             document.removeEventListener('mouseup', mouseUpDocumentHandler);
             restoreOnselectstart();
-            if (cursorLeave) {
-                visible = false;
-            }
+            if (cursorLeave)
+                visible.set(false);
         };
         const mouseMoveScrollbarHandler = () => {
+            var _a;
             cursorLeave = false;
-            visible = !!props.size;
+            visible.set(!!((_a = props.size) === null || _a === void 0 ? void 0 : _a.get()));
         };
         const mouseLeaveScrollbarHandler = () => {
             cursorLeave = true;
-            visible = cursorDown;
+            visible.set(cursorDown);
         };
-        this.onBeforeUnmount(() => {
+        (0, framework_1.onBeforeUnmount)(() => {
             restoreOnselectstart();
             document.removeEventListener('mouseup', mouseUpDocumentHandler);
         });
         const restoreOnselectstart = () => {
-            if (document.onselectstart !== originalOnSelectStart) {
+            if (document.onselectstart !== originalOnSelectStart)
                 document.onselectstart = originalOnSelectStart;
-            }
         };
-        scrollbar.scrollbarElement.addEvents({
-            mousemove: mouseMoveScrollbarHandler,
-            mouseleave: mouseLeaveScrollbarHandler,
-        });
-        // useEventListener(
-        //   toRef(scrollbar, 'scrollbarElement'),
-        //   'mousemove',
-        //   mouseMoveScrollbarHandler
-        // )
-        // useEventListener(
-        //   toRef(scrollbar, 'scrollbarElement'),
-        //   'mouseleave',
-        //   mouseLeaveScrollbarHandler
-        // )
+        (0, framework_1.useEventListener)(scrollbar.scrollbarElement, 'mousemove', mouseMoveScrollbarHandler);
+        (0, framework_1.useEventListener)(scrollbar.scrollbarElement, 'mouseleave', mouseLeaveScrollbarHandler);
+        this.addChild(new framework_1.Transition({
+            name: ns.b('fade'),
+            slot: new framework_1.Div({
+                vShow: (0, signals_1.computed)(() => props.always || visible.get()),
+                refDom: instance,
+                class: (0, signals_1.computed)(() => [ns.e('bar'), ns.is(bar.get().key)]),
+                events: {
+                    mousedown: clickTrackHandler,
+                },
+                slot: new framework_1.Div({
+                    refDom: thumb,
+                    class: ns.e('thumb'),
+                    styleObj: thumbStyle,
+                    events: {
+                        mousedown: clickThumbHandler,
+                    },
+                }),
+            })
+        }));
     }
 }
-exports.TdScrollbarThumb = TdScrollbarThumb;
+exports.Thumb = Thumb;

package/src/components/basic/td-scrollbar/thumb/thumb.interface.d.ts

@@ -1,11 +1,12 @@
 import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
-export interface ITdScrollbarThumb extends ITypeFragment {
-    className: 'TdScrollbarThumb';
+import { Ref } from '@type-dom/signals';
+export interface IThumb extends ITypeFragment {
+    className: 'Thumb';
 }
-export interface ITdScrollbarThumbConfig extends TypeFragmentProps {
+export interface ThumbProps extends TypeFragmentProps {
     vertical?: boolean;
-    size?: string;
-    move?: number;
-    ratio?: number;
+    size?: Ref<string>;
+    move?: Ref<number>;
+    ratio?: Ref<number>;
     always?: boolean;
 }

package/src/components/basic/td-scrollbar/util.d.ts

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITdScrollbarThumbConfig } from './thumb/thumb.interface';
+import { ThumbProps } from './thumb/thumb.interface';
 export declare const GAP = 4;
 export declare const BAR_MAP: {
     readonly vertical: {
@@ -23,6 +23,6 @@ export declare const BAR_MAP: {
         readonly direction: "left";
     };
 };
-export declare const renderThumbStyle: ({ move, size, bar, }: Pick<ITdScrollbarThumbConfig, "move" | "size"> & {
+export declare const renderThumbStyle: ({ move, size, bar, }: Pick<ThumbProps, "move" | "size"> & {
     bar: (typeof BAR_MAP)[keyof typeof BAR_MAP];
 }) => IStyle;

package/src/components/basic/td-scrollbar/util.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderThumbStyle = exports.BAR_MAP = exports.GAP = void 0;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
 exports.GAP = 4; // top 2 + bottom 2 of bar instance
 exports.BAR_MAP = {
     vertical: {
@@ -24,8 +26,13 @@ exports.BAR_MAP = {
         direction: 'left',
     },
 };
-const renderThumbStyle = ({ move, size, bar, }) => ({
-    [bar.size]: size,
-    transform: `translate${bar.axis}(${move}%)`,
-});
+const renderThumbStyle = ({ move, size, bar, }) => {
+    // console.warn('size is ', size);
+    // console.warn('move is ', move);
+    // console.warn('bar is ', bar);
+    return {
+        [bar.size]: (0, utils_1.addUnit)(size === null || size === void 0 ? void 0 : size.get()),
+        transform: `translate${bar.axis}(${(0, signals_1.unref)(move)}%)`,
+    };
+};
 exports.renderThumbStyle = renderThumbStyle;

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

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

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

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

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSpace = void 0;
 const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
 const framework_1 = require("@type-dom/framework");
 const td_space_const_1 = require("./td-space.const");
 const td_space_item_class_1 = require("./td-space-item/td-space-item.class");
 const use_space_1 = require("./use-space");
 require("./style/index");
-const signals_1 = require("@type-dom/signals");
 class TdSpace extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
@@ -18,14 +18,15 @@ class TdSpace extends framework_1.TypeDiv {
     }
     setup() {
         var _a, _b;
-        console.log('td-space setup . ');
+        // console.log('td-space setup . ');
         const props = this.props;
         const { classes, containerStyle, itemStyle } = (0, use_space_1.useSpace)(props);
+        // console.warn('containerStyle is ', containerStyle);
         // retrieve the children out via a simple for loop
         // the edge case here is that when users uses directives like <v-for>, <v-if>
         // we need to go deeper until the child is not the Fragment type
         function extractChildren(children, parentKey = '', extractedChildren = []) {
-            console.warn('extractChildren is ', children);
+            // console.warn('extractChildren is ', children);
             // const { prefixCls } = props
             children.forEach((child, loopKey) => {
                 if ((0, framework_1.isFragment)(child)) {
@@ -100,7 +101,7 @@ class TdSpace extends framework_1.TypeDiv {
         // loop the children, if current children is rendered via `renderList` or `<v-for>`
         if ((0, utils_1.isArray)(children)) {
             let extractedChildren = extractChildren(children);
-            console.log('extractChildren is ', extractedChildren);
+            // console.log('extractChildren is ', extractedChildren);
             if (spacer) {
                 // track the current rendering index, when encounters the last element
                 // then no need to add a spacer after it.
@@ -116,7 +117,7 @@ class TdSpace extends framework_1.TypeDiv {
                         new framework_1.Span({
                             styleObj: (0, signals_1.computed)(() => [
                                 itemStyle.get(),
-                                { width: direction === 'vertical' ? '100%' : null },
+                                { width: direction === 'vertical' ? '100%' : undefined },
                             ]),
                             // if spacer is already a valid node, then append it to the current
                             // span element.

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

@@ -1,4 +1,4 @@
-import { ITypeDiv, TypeDivProps, IClass, TypeNode } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps, TypeNode } from '@type-dom/framework';
 import { Property } from '@type-dom/css-type';
 import { MaybeRef } from '@type-dom/signals';
 import { ComponentSize } from '../../../constants';
@@ -15,7 +15,6 @@ export interface SpaceProps extends TypeDivProps {
     /**
      * @description Classname
      */
-    class?: IClass;
     /**
      * @description Controls the alignment of items	对齐方式
      * 对应 align-items

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

@@ -1,7 +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>[]>;
+    classes: import("@type-dom/signals").Computed<import("dist/libs/framework/src").ClassValue[]>;
+    containerStyle: import("@type-dom/signals").Computed<(IStyle<string | 0, string> | Record<string, import("@type-dom/signals").MaybeRef<string | number | undefined>> | import("@type-dom/signals").Signal<import("dist/libs/framework/src").StyleValue | undefined> | import("@type-dom/signals").Computed<import("dist/libs/framework/src").StyleValue | undefined> | (import("dist/libs/framework/src").StyleValue | undefined)[] | undefined)[]>;
     itemStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
 };

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

@@ -36,9 +36,13 @@ function useSpace(props) {
             : {};
     });
     (0, signals_1.effect)(() => {
-        console.error('TdSpace effect . ');
-        const { wrap, direction: dir, fill } = props;
-        const size = (0, signals_1.unref)(props.size);
+        var _a;
+        // console.error('TdSpace effect . ');
+        const { size: inputSize = 'small', wrap, direction: dir, fill } = props;
+        // const size = unref(props.size) ?? 'small';
+        // console.error('TdSpace effect , inputSize ',  inputSize);
+        const size = (_a = (0, signals_1.unref)(inputSize)) !== null && _a !== void 0 ? _a : 'small';
+        // console.error('size is ', size);
         // when the specified size have been given
         if ((0, utils_1.isArray)(size)) {
             const [h = 0, v = 0] = size;

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

@@ -28,7 +28,7 @@ class TdText extends framework_1.TypeHtml {
         ]);
         this.attr.addClass(textKls);
         if (props.lineClamp) {
-            console.warn('then -webkit-line-clamp . ');
+            // console.warn('then -webkit-line-clamp . ');
             this.style.addObj({
                 // color: '#f00',
                 '-webkit-line-clamp': props.lineClamp,

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

@@ -14,7 +14,7 @@ export declare function useGlobalComponentSettings(block: string, sizeFallback?:
         bm: (blockSuffix?: string, modifier?: string) => string;
         bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
         is: {
-            (name: string, state: boolean | undefined): string;
+            (name: string, state: boolean | "" | undefined): string;
             (name: string): string;
         };
         cssVar: (object: Record<string, string>) => Record<string, string>;

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

@@ -59,7 +59,7 @@ function useGlobalComponentSettings(block, sizeFallback) {
     };
 }
 const provideGlobalConfig = (config, app, global = false) => {
-    var _a, _b, _c;
+    var _a;
     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);
@@ -80,10 +80,13 @@ const provideGlobalConfig = (config, app, global = false) => {
     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,
-    });
+    provideFn(use_empty_values_1.emptyValuesContextKey, (0, signals_1.computed)(() => {
+        var _a, _b;
+        return ({
+            emptyValues: (_a = context === null || context === void 0 ? void 0 : context.get()) === null || _a === void 0 ? void 0 : _a.emptyValues,
+            valueOnClear: (_b = context === null || context === void 0 ? void 0 : context.get()) === null || _b === void 0 ? void 0 : _b.valueOnClear,
+        });
+    }));
     if (global || !globalConfig.get()) {
         globalConfig.set(context.get());
     }

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

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

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

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

package/src/components/data/index.d.ts

@@ -8,6 +8,8 @@ export { TdCollapse } from './td-collapse/td-collapse.class';
 export type * from './td-collapse/td-collapse.interface';
 export { TdCollapseItem } from './td-collapse-item/td-collapse-item.class';
 export type * from './td-collapse-item/td-collapse-item.interface';
+export { TdCollapseTransition } from './td-collapse-transition/td-collapse-transition.class';
+export type * from './td-collapse-transition/td-collapse-transition.interface';
 export { TdDescriptions } from './td-descriptions/td-descriptions.class';
 export type * from './td-descriptions/td-descriptions.interface';
 export { TdDescriptionsItem } from './td-descriptions-item/td-descriptions-item.class';
@@ -15,6 +17,8 @@ export { TdEmpty } from './td-empty/td-empty.class';
 export type * from './td-empty/td-empty.interface';
 export { TdImage } from './td-image/td-image.class';
 export type * from './td-image/td-image.interface';
+export { TdImageViewer } from './td-image-viewer/td-image-viewer.class';
+export type * from './td-image-viewer/td-image-viewer.interface';
 export { TdStatistic } from './td-statistic/td-statistic.class';
 export type * from './td-statistic/td-statistic.interface';
 export { TdCountDown } from './td-count-down/td-count-down.class';

package/src/components/data/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdCheckTag = exports.TdTag = exports.TdSegmented = exports.TdResult = exports.TdProgress = exports.TdCountDown = exports.TdStatistic = exports.TdImage = exports.TdEmpty = exports.TdDescriptionsItem = exports.TdDescriptions = exports.TdCollapseItem = exports.TdCollapse = exports.TdCard = exports.TdBadge = exports.TdAvatar = void 0;
+exports.TdCheckTag = exports.TdTag = exports.TdSegmented = exports.TdResult = exports.TdProgress = exports.TdCountDown = exports.TdStatistic = exports.TdImageViewer = exports.TdImage = exports.TdEmpty = exports.TdDescriptionsItem = exports.TdDescriptions = exports.TdCollapseTransition = exports.TdCollapseItem = exports.TdCollapse = exports.TdCard = exports.TdBadge = exports.TdAvatar = void 0;
 const tslib_1 = require("tslib");
 var td_avatar_class_1 = require("./td-avatar/td-avatar.class");
 Object.defineProperty(exports, "TdAvatar", { enumerable: true, get: function () { return td_avatar_class_1.TdAvatar; } });
@@ -12,6 +12,8 @@ var td_collapse_class_1 = require("./td-collapse/td-collapse.class");
 Object.defineProperty(exports, "TdCollapse", { enumerable: true, get: function () { return td_collapse_class_1.TdCollapse; } });
 var td_collapse_item_class_1 = require("./td-collapse-item/td-collapse-item.class");
 Object.defineProperty(exports, "TdCollapseItem", { enumerable: true, get: function () { return td_collapse_item_class_1.TdCollapseItem; } });
+var td_collapse_transition_class_1 = require("./td-collapse-transition/td-collapse-transition.class");
+Object.defineProperty(exports, "TdCollapseTransition", { enumerable: true, get: function () { return td_collapse_transition_class_1.TdCollapseTransition; } });
 var td_descriptions_class_1 = require("./td-descriptions/td-descriptions.class");
 Object.defineProperty(exports, "TdDescriptions", { enumerable: true, get: function () { return td_descriptions_class_1.TdDescriptions; } });
 var td_descriptions_item_class_1 = require("./td-descriptions-item/td-descriptions-item.class");
@@ -20,6 +22,8 @@ var td_empty_class_1 = require("./td-empty/td-empty.class");
 Object.defineProperty(exports, "TdEmpty", { enumerable: true, get: function () { return td_empty_class_1.TdEmpty; } });
 var td_image_class_1 = require("./td-image/td-image.class");
 Object.defineProperty(exports, "TdImage", { enumerable: true, get: function () { return td_image_class_1.TdImage; } });
+var td_image_viewer_class_1 = require("./td-image-viewer/td-image-viewer.class");
+Object.defineProperty(exports, "TdImageViewer", { enumerable: true, get: function () { return td_image_viewer_class_1.TdImageViewer; } });
 var td_statistic_class_1 = require("./td-statistic/td-statistic.class");
 Object.defineProperty(exports, "TdStatistic", { enumerable: true, get: function () { return td_statistic_class_1.TdStatistic; } });
 var td_count_down_class_1 = require("./td-count-down/td-count-down.class");

package/src/components/data/td-avatar/td-avatar.class.js

@@ -50,7 +50,7 @@ class TdAvatar extends framework_1.TypeSpan {
         // need reset hasLoadError to false if src changed
         (0, signals_1.watch)(() => props.src, () => hasLoadError.set(false));
         function handleError(e) {
-            console.warn('TdAvatar handleError. ');
+            // console.warn('TdAvatar handleError. ');
             hasLoadError.set(true);
             emit('error', e);
         }
@@ -80,7 +80,8 @@ class TdAvatar extends framework_1.TypeSpan {
             // 只加载，不动态清除；
             this.slotChildren(props.slot);
         }
-        (0, signals_1.watch)(() => hasLoadError.get(), (newVal) => {
+        (0, signals_1.watch)(() => hasLoadError.get(), // add by me
+        (newVal) => {
             if (newVal) {
                 if (props.slot instanceof framework_1.TypeElement) {
                     this.slotChildren(props.slot); // todo 添加了，但是没有渲染

package/src/components/data/td-badge/td-badge.class.js

@@ -18,7 +18,7 @@ class TdBadge extends framework_1.TypeDiv {
     }
     setup() {
         var _a, _b, _c;
-        console.log('TdBadge setup');
+        // console.log('TdBadge setup');
         const props = this.props;
         const ns = (0, use_namespace_1.useNamespace)('badge');
         const content = (0, signals_1.computed)(() => {

package/src/components/data/td-card/style/css.d.ts

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

package/src/components/data/td-card/style/css.js

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

package/src/components/data/td-carousel/style/css.d.ts

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

package/src/components/data/td-carousel/style/css.js

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

package/src/components/data/td-carousel/td-carousel-item.class.js

@@ -32,7 +32,7 @@ class TdCarouselItem extends framework_1.TypeDiv {
             const translateType = `translate${(0, signals_1.unref)(isVertical) ? 'Y' : 'X'}`;
             const _translate = `${translateType}(${(0, signals_1.unref)(translate)}px)`;
             const _scale = `scale(${(0, signals_1.unref)(scale)})`;
-            const transform = [_translate, _scale];
+            const transform = [_translate, _scale].join(' ');
             return {
                 transform,
             };

package/src/components/data/td-carousel/use-carousel-item.d.ts

@@ -1,6 +1,6 @@
 import { CarouselItemProps } from './td-carousel-item.interface';
 export declare const useCarouselItem: (props: CarouselItemProps) => {
-    carouselItemRef: import("@type-dom/signals").Signal<HTMLElement | undefined>;
+    carouselItemRef: import("@type-dom/signals").Signal<HTMLElement>;
     active: import("@type-dom/signals").Signal<boolean>;
     animating: import("@type-dom/signals").Signal<boolean>;
     hover: import("@type-dom/signals").Signal<boolean>;

package/src/components/data/td-carousel/use-carousel.d.ts

@@ -1,8 +1,8 @@
-import { AnyFn } from '@type-dom/framework';
+import { AnyFn } from '@type-dom/utils';
 import type { CarouselItemContext } from './constants';
 import { CarouselProps } from './td-carousel.interface';
 export declare const useCarousel: (props: CarouselProps, emit: AnyFn, componentName: string) => {
-    root: import("@type-dom/signals").Signal<HTMLDivElement | undefined>;
+    root: import("@type-dom/signals").Signal<HTMLDivElement>;
     activeIndex: import("@type-dom/signals").Signal<number>;
     arrowDisplay: import("@type-dom/signals").Computed<boolean>;
     hasLabel: import("@type-dom/signals").Computed<boolean>;

package/src/components/data/td-check-tag/style/css.d.ts

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

package/src/components/data/td-check-tag/style/css.js

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