@type-dom/ui 0.0.10 → 0.1.1

package/src/components/navigation/td-tabs/td-tabs.class.d.ts

@@ -1,18 +1,10 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdTabPaneConfig } from './td-tab-pane.interface';
-import { ITabPaneName, ITdTabs, ITdTabsConfig } from './td-tabs.interface';
-import { TdTabNav } from './td-tab-nav.class';
-export declare class TdTabs extends UI implements ITdTabs {
+import { TypeDiv } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { TabPaneName, ITdTabs, TabsProps } from './td-tabs.interface';
+export declare class TdTabs extends TypeDiv implements ITdTabs {
     className: 'TdTabs';
-    props: ITdTabsConfig;
-    currentName: ITabPaneName;
-    tabNav: TdTabNav;
-    private newBtn?;
-    private header;
-    private panel;
-    constructor(params?: ITdTabsConfig);
-    setCurrentName(value?: ITabPaneName, trigger?: boolean): Promise<void>;
-    handleTabClick(tab: ITdTabPaneConfig, tabName: ITabPaneName, event: Event): void;
-    handleTabRemove(pane: ITdTabPaneConfig, ev: Event): void;
-    handleTabAdd(): void;
+    props: TabsProps;
+    currentName?: Signal<TabPaneName>;
+    constructor(params?: TabsProps);
+    setup(): void;
 }

package/src/components/navigation/td-tabs/td-tabs.class.js

@@ -3,154 +3,159 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTabs = void 0;
 const tslib_1 = require("tslib");
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const svgs_1 = require("@type-dom/svgs");
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 // import { $colorPrimary, $colors, $textColor } from '../../../styles';
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_ordered_children_1 = require("../../../hooks/use-ordered-children");
 const event_1 = require("../../../constants/event");
+const constants_1 = require("../../../constants");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_tabs_const_1 = require("./td-tabs.const");
 const td_tab_nav_class_1 = require("./td-tab-nav.class");
-const td_tabs_style_1 = require("./td-tabs.style");
-class TdTabs extends ui_abstract_1.UI {
+const constants_2 = require("./constants");
+class TdTabs extends framework_1.TypeDiv {
     constructor(params = {}) {
-        var _a, _b;
-        super(params);
+        super();
         this.className = 'TdTabs';
-        this.attr.addName('td-tabs');
-        // this.style.addObj($tabsStyle);
-        this.currentName = (params === null || params === void 0 ? void 0 : params.modelValue) || '';
-        this.header = new framework_1.Div({
-            className: 'header',
-            styleObj: td_tabs_style_1.$tabsHeaderStyle
+        this.attr.addObj({
+            name: 'td-tabs',
         });
-        //   isVertical.value && ns.e('header-vertical'),
-        //             ns.is(props.tabPosition),
-        const tabPosition = (params === null || params === void 0 ? void 0 : params.tabPosition) || 'top';
-        const isVertical = ['left', 'right'].includes(tabPosition);
-        if (isVertical) {
-            this.header.style.addObj(td_tabs_style_1.$tabsHeaderVerticalStyle);
-        }
-        if ((params === null || params === void 0 ? void 0 : params.editable) || (params === null || params === void 0 ? void 0 : params.addable)) {
-            this.newBtn = new framework_1.Span({
-                className: 'new-btn'
-            });
-            if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.addIcon) {
-                this.newBtn.slotChild(params.slots.addIcon);
-            }
-            else {
-                this.newBtn.addChild(new td_icon_class_1.TdIcon({
-                    name: 'icon-plus',
-                    // styleObj: $tabsIconPlusStyle,
-                    svgObj: new svgs_1.ElPlusSvg()
-                }));
-            }
-        }
-        const panes = (_b = params === null || params === void 0 ? void 0 : params.slot) === null || _b === void 0 ? void 0 : _b.map((pane, index) => pane.params);
-        this.tabNav = new td_tab_nav_class_1.TdTabNav({
-            rootTabs: this,
-            editable: params === null || params === void 0 ? void 0 : params.editable,
-            type: params === null || params === void 0 ? void 0 : params.type,
-            panes: panes,
-            stretch: params === null || params === void 0 ? void 0 : params.stretch,
-            styleObj: td_tabs_style_1.$tabsNavStyle,
-            emits: {
-                tabClick: (pane, tabName, ev) => {
-                    this.handleTabClick(pane, tabName, ev);
-                },
-                tabRemove: (pane, ev) => {
-                    this.handleTabRemove(pane, ev);
-                },
-            }
-        });
-        this.header.addChild(this.tabNav);
-        if (this.newBtn) {
-            this.header.addChild(this.newBtn);
-        }
-        this.panel = new framework_1.Div({
-            className: 'panels',
-            attrObj: {
-                name: 'td-tabs-content',
-            },
-            styleObj: Object.assign(Object.assign({}, td_tabs_style_1.$tabsContentStyle), params === null || params === void 0 ? void 0 : params.contentStyle),
-        });
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            params.slot.forEach((pane, index) => {
-                var _a;
-                const tabName = (_a = pane.props.name) !== null && _a !== void 0 ? _a : (index + 1);
-                if (tabName === this.currentName) {
-                    pane.setActive(true);
-                }
-                else {
-                    pane.setActive(false);
-                }
-                this.panel.addChild(pane);
-            });
-        }
-        if ((params === null || params === void 0 ? void 0 : params.tabPosition) !== 'bottom') {
-            this.childNodes = [this.header, this.panel];
-        }
-        else {
-            this.childNodes = [this.panel, this.header];
-        }
+        this.addEmits(td_tabs_const_1.tabsEmits);
+        this.assignProps(td_tabs_const_1.tabsProps);
         this.props = this.useParams(params);
     }
-    setCurrentName(value_1) {
-        return tslib_1.__awaiter(this, arguments, void 0, function* (value, trigger = false) {
-            var _a, _b, _c, _d, _e;
-            console.log('setCurrentName .');
+    setup() {
+        var _a;
+        const props = this.props;
+        const emit = this.emit;
+        const ns = (0, use_namespace_1.useNamespace)('tabs');
+        const isVertical = (0, signals_1.computed)(() => ['left', 'right'].includes(props.tabPosition));
+        const { children: panes, addChild: sortPane, removeChild: unregisterPane, } = (0, use_ordered_children_1.useOrderedChildren)((0, framework_1.getCurrentInstance)(), 'TdTabPane');
+        const nav$ = (0, signals_1.signal)();
+        const currentName = (0, signals_1.signal)((_a = props.modelValue) !== null && _a !== void 0 ? _a : '0');
+        const setCurrentName = (value_1, ...args_1) => tslib_1.__awaiter(this, [value_1, ...args_1], void 0, function* (value, trigger = false) {
+            var _a, _b, _c;
             // should do nothing.
-            if (this.currentName === value || (0, utils_1.isUndefined)(value))
+            if (currentName.get() === value || (0, utils_1.isUndefined)(value))
                 return;
             try {
-                const canLeave = yield ((_b = (_a = this.props).beforeLeave) === null || _b === void 0 ? void 0 : _b.call(_a, value, this.currentName));
+                const canLeave = yield ((_a = props.beforeLeave) === null || _a === void 0 ? void 0 : _a.call(props, value, currentName.get()));
                 if (canLeave !== false) {
-                    this.currentName = value;
+                    currentName.set(value);
                     if (trigger) {
-                        this.emit(event_1.UPDATE_MODEL_EVENT, value);
-                        // this.props.emits?.[UPDATE_MODEL_EVENT]?.(value);
-                        this.emit('tabChange', value);
-                        // this.props.emits?.tabChange?.(value);
+                        emit(event_1.UPDATE_MODEL_EVENT, value);
+                        emit('tabChange', value);
                     }
-                    (_c = this.props.slot) === null || _c === void 0 ? void 0 : _c.forEach((pane, index) => {
-                        var _a;
-                        const tabName = (_a = pane.props.name) !== null && _a !== void 0 ? _a : (index + 1);
-                        if (tabName === this.currentName) {
-                            pane.setActive(true);
-                        }
-                        else {
-                            pane.setActive(false);
-                        }
-                    });
-                    (_e = (_d = this.tabNav) === null || _d === void 0 ? void 0 : _d.removeFocus) === null || _e === void 0 ? void 0 : _e.call(_d);
+                    (_c = (_b = nav$.get()) === null || _b === void 0 ? void 0 : _b.removeFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
                 }
             }
-            catch (_f) {
-                console.error('tab change error');
-            }
+            catch (_d) { }
         });
-    }
-    handleTabClick(tab, tabName, event) {
-        console.log('handleTabClick . ');
-        if (tab.disabled)
-            return;
-        this.setCurrentName(tabName, true);
-        this.emit('tabClick', tab, event);
-        // this.props.emits?.tabClick?.(tab, event);
-    }
-    handleTabRemove(pane, ev) {
-        if (pane.disabled || (0, utils_1.isUndefined)(pane.name))
-            return;
-        ev.stopPropagation();
-        this.emit('edit', pane.name, 'remove');
-        // this.props.emits?.edit?.(pane.name, 'remove');
-        this.emit('tabRemove', pane.name);
-        // this.props.emits?.tabRemove?.(pane.name);
-    }
-    handleTabAdd() {
-        this.emit('edit', undefined, 'add');
-        // this.props.emits?.edit?.(undefined, 'add');
-        this.emit('tabAdd');
-        // this.props.emits?.tabAdd?.();
+        const handleTabClick = (tab, tabName, event) => {
+            if (tab.props.disabled)
+                return;
+            setCurrentName(tabName, true);
+            emit('tabClick', tab, event);
+        };
+        const handleTabRemove = (pane, ev) => {
+            if (pane.props.disabled || (0, utils_1.isUndefined)(pane.props.name))
+                return;
+            ev.stopPropagation();
+            emit('edit', pane.props.name, 'remove');
+            emit('tabRemove', pane.props.name);
+        };
+        const handleTabAdd = () => {
+            emit('edit', undefined, 'add');
+            emit('tabAdd');
+        };
+        (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, (modelValue) => setCurrentName(modelValue));
+        (0, signals_1.watch)(currentName, () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            yield (0, framework_1.nextTick)();
+            (_b = (_a = nav$.get()) === null || _a === void 0 ? void 0 : _a.scrollToActiveTab) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }));
+        (0, framework_1.provide)(constants_2.tabsRootContextKey, {
+            props,
+            currentName,
+            registerPane: (pane) => {
+                panes.get().push(pane);
+            },
+            sortPane,
+            unregisterPane,
+        });
+        (0, framework_1.defineExpose)({
+            currentName,
+        });
+        // const TabNavRenderer: { render: () => TypeNode } = ({ render}) => {
+        //   return render()
+        // }
+        const slots = (0, framework_1.useSlots)();
+        const addSlot = slots === null || slots === void 0 ? void 0 : slots.addIcon;
+        const newButton = props.editable || props.addable
+            ? new framework_1.Div({
+                class: [
+                    ns.e('new-tab'),
+                    isVertical.get() && ns.e('new-tab-vertical'),
+                ],
+                attrObj: {
+                    tabindex: '0',
+                },
+                events: {
+                    click: handleTabAdd,
+                    keydown: (ev) => {
+                        if ([constants_1.EVENT_CODE.enter, constants_1.EVENT_CODE.numpadEnter].includes(ev === null || ev === void 0 ? void 0 : ev.code))
+                            handleTabAdd();
+                    },
+                },
+                slot: addSlot
+                    ? slots.addIcon
+                    : new td_icon_class_1.TdIcon({
+                        slot: new svgs_1.ElPlusSvg(),
+                    }),
+            })
+            : undefined;
+        const header = new framework_1.Div({
+            class: [
+                ns.e('header'),
+                isVertical.get() && ns.e('header-vertical'),
+                ns.is(props.tabPosition),
+            ],
+            slot: [
+                new td_tab_nav_class_1.TdTabNav({
+                    refEl: nav$,
+                    panes: panes.get(),
+                    attrObj: {
+                        currentName: currentName.get(),
+                        editable: props.editable,
+                        type: props.type,
+                        stretch: props.stretch,
+                    },
+                    emits: {
+                        tabClick: handleTabClick,
+                        tabRemove: handleTabRemove,
+                    },
+                    slot: [],
+                }),
+                newButton,
+            ],
+        });
+        const panels = new framework_1.Div({
+            class: ns.e('content'),
+            slot: props.slot || (slots === null || slots === void 0 ? void 0 : slots.default),
+        });
+        this.addChild(new framework_1.Div({
+            class: [
+                ns.b(),
+                ns.m(props.tabPosition),
+                {
+                    [ns.m('card')]: props.type === 'card',
+                    [ns.m('border-card')]: props.type === 'border-card',
+                },
+            ],
+            slot: [panels, header],
+        }));
     }
 }
 exports.TdTabs = TdTabs;

package/src/components/navigation/td-tabs/td-tabs.const.d.ts

@@ -0,0 +1,11 @@
+import { TabPaneName, TabsProps } from './td-tabs.interface';
+import { TabsPaneContext } from './constants';
+export declare const tabsProps: TabsProps;
+export declare const tabsEmits: {
+    "update:modelValue": (name: TabPaneName) => name is string | number;
+    tabClick: (pane: TabsPaneContext, ev: Event) => boolean;
+    tabChange: (name: TabPaneName) => name is string | number;
+    edit: (paneName: TabPaneName | undefined, action: "remove" | "add") => boolean;
+    tabRemove: (name: TabPaneName) => name is string | number;
+    tabAdd: () => boolean;
+};

package/src/components/navigation/td-tabs/td-tabs.const.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabsEmits = exports.tabsProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.tabsProps = {
+    tabPosition: 'top',
+    beforeLeave: () => true,
+};
+const isPaneName = (value) => (0, utils_1.isString)(value) || (0, utils_1.isNumber)(value);
+exports.tabsEmits = {
+    [event_1.UPDATE_MODEL_EVENT]: (name) => isPaneName(name),
+    tabClick: (pane, ev) => ev instanceof Event,
+    tabChange: (name) => isPaneName(name),
+    edit: (paneName, action) => ['remove', 'add'].includes(action),
+    tabRemove: (name) => isPaneName(name),
+    tabAdd: () => true,
+};

package/src/components/navigation/td-tabs/td-tabs.interface.d.ts

@@ -1,13 +1,11 @@
 import { IStyle } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { UPDATE_MODEL_EVENT } from '../../../constants/event';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 import { TdIcon } from '../../basic/td-icon/td-icon.class';
-import { ITdTabPaneConfig } from './td-tab-pane.interface';
-import { TdTabPane } from './td-tab-pane.class';
-export interface ITdTabs extends IUI {
+import { TdTabPane } from '../td-tab-pane/td-tab-pane.class';
+export interface ITdTabs extends ITypeDiv {
     className: 'TdTabs';
 }
-export interface ITdTabsConfig extends IUIConfig {
+export interface TabsProps extends TypeDivProps {
     /**
      * @description type of Tab
      *     default: '',
@@ -38,37 +36,30 @@ export interface ITdTabsConfig extends IUIConfig {
      * @description hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented
      *     default: () => true,
      */
-    beforeLeave?: (newName: ITabPaneName, oldName: ITabPaneName | undefined) => void | boolean;
+    beforeLeave?: (newName: TabPaneName, oldName: TabPaneName | undefined) => void | boolean;
     /**
      * @description whether width of tab automatically fits its container
      */
     stretch?: boolean;
     contentStyle?: IStyle;
-    emits?: {
-        [UPDATE_MODEL_EVENT]?: (name: ITabPaneName) => void;
-        tabClick?: (pane: ITdTabPaneConfig, ev: Event) => void;
-        tabChange?: (name: ITabPaneName) => void;
-        edit?: (paneName: ITabPaneName | undefined, action: 'remove' | 'add') => void;
-        tabRemove?: (name: ITabPaneName) => void;
-        tabAdd?: () => true;
-    };
     slot?: TdTabPane[];
     slots?: {
         addIcon?: TdIcon;
     };
 }
-export type ITabPaneName = string | number;
-export type ITabsPaneContext = {
+export type TabsPanes = Record<number, TabsPaneContext>;
+export type TabPaneName = string | number;
+export type TabsPaneContext = {
     uid: number;
-    config: ITdTabsConfig;
-    paneName: ITabPaneName;
+    config: TabsProps;
+    paneName: TabPaneName;
     active: boolean;
     index: string | undefined;
     isClosable: boolean;
 };
 export interface ITabsRootContext {
-    config: ITdTabsConfig;
-    currentName: ITabPaneName;
-    registerPane: (pane: ITabsPaneContext) => void;
+    config: TabsProps;
+    currentName: TabPaneName;
+    registerPane: (pane: TabsPaneContext) => void;
     unregisterPane: (uid: number) => void;
 }

package/src/components/navigation/td-tabs/td-tabs.interface.js

@@ -1,5 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const utils_1 = require("@type-dom/utils");
-const event_1 = require("../../../constants/event");
-const isPaneName = (value) => (0, utils_1.isString)(value) || (0, utils_1.isNumber)(value);

package/src/components/navigation/td-tabs/td-tabs.style.d.ts

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITdTabsConfig } from './td-tabs.interface';
+import { TabsProps } from './td-tabs.interface';
 export declare const $tabs: {
     headerHeight: string;
 };
@@ -16,4 +16,4 @@ export declare const $tabsNavPrevStyle: IStyle;
 export declare const $tabsNavStyle: IStyle;
 export declare const $tabsItemStyle: IStyle;
 export declare const $tabsContentStyle: IStyle;
-export declare function useStyle(config?: ITdTabsConfig): void;
+export declare function useStyle(config?: TabsProps): void;

package/src/components/navigation/td-tabs/td-tabs.style.js

@@ -6,7 +6,7 @@ const var_1 = require("../../../styles/var");
 const transition_1 = require("../../../styles/transition");
 const utils_1 = require("@type-dom/utils");
 exports.$tabs = {
-    headerHeight: '40px'
+    headerHeight: '40px',
 };
 exports.$tabsStyle = {
     display: 'flex',
@@ -17,10 +17,10 @@ exports.$tabsHeaderStyle = {
     margin: '0 0 15px',
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
 };
 exports.$tabsHeaderVerticalStyle = {
-    flexDirection: 'column'
+    flexDirection: 'column',
 };
 exports.$tabsActiveBarStyle = {
     position: 'absolute',
@@ -34,9 +34,16 @@ exports.$tabsActiveBarStyle = {
     // getCssVar('transition-function-ease-in-out-bezier'),
     //   transform getCssVar('transition-duration',
     // getCssVar('transition-function-ease-in-out-bezier'),
-    transition: 'width ' + transition_1.$transitionDuration + ', ' + transition_1.$transitionFunction.easeInOutBezier + ', '
-        + 'transform ' + transition_1.$transitionDuration + ', ' + transition_1.$transitionFunction.easeInOutBezier,
-    listStyle: 'none'
+    transition: 'width ' +
+        transition_1.$transitionDuration +
+        ', ' +
+        transition_1.$transitionFunction.easeInOutBezier +
+        ', ' +
+        'transform ' +
+        transition_1.$transitionDuration +
+        ', ' +
+        transition_1.$transitionFunction.easeInOutBezier,
+    listStyle: 'none',
 };
 exports.$tabsNewTabStyle = {
     display: 'flex',
@@ -54,13 +61,13 @@ exports.$tabsNewTabStyle = {
     // color: getCssVar('text-color', 'primary'),
     color: var_1.$textColor.primary,
     cursor: 'pointer',
-    transition: 'all 0.15s'
+    transition: 'all 0.15s',
 };
 exports.$tabsNavWrapStyle = {
     overflow: 'hidden',
     marginBottom: '-1px',
     position: 'relative',
-    flex: '1 auto'
+    flex: '1 auto',
 };
 exports.$tabsNavScrollStyle = {
     position: 'absolute',
@@ -70,7 +77,7 @@ exports.$tabsNavScrollStyle = {
     // color: getCssVar('text-color', 'secondary'),
     color: var_1.$textColor.secondary,
     width: '20px',
-    textAlign: 'center'
+    textAlign: 'center',
 };
 exports.$tabsNavWrapAfterStyle = {
     // content: '',
@@ -91,7 +98,7 @@ exports.$tabNavNextStyle = {
     // color: getCssVar('text-color', 'secondary'),
     color: var_1.$textColor.secondary,
     width: '20px',
-    textAlign: 'center'
+    textAlign: 'center',
 };
 exports.$tabsNavPrevStyle = (0, utils_1.deepClone)(exports.$tabNavNextStyle);
 exports.$tabsNavStyle = {
@@ -102,7 +109,7 @@ exports.$tabsNavStyle = {
     transition: 'transform ' + transition_1.$transitionDuration,
     float: 'left',
     // zIndex: calc(#{getCssVar('index-normal')} + 1),
-    zIndex: 'calc(index-normal + 1)'
+    zIndex: 'calc(index-normal + 1)',
 };
 exports.$tabsItemStyle = {
     padding: '0 20px',
@@ -118,11 +125,10 @@ exports.$tabsItemStyle = {
     fontWeight: 500,
     // color: getCssVar('text-color', 'primary'),
     color: var_1.$textColor.primary,
-    position: 'relative'
+    position: 'relative',
 };
 exports.$tabsContentStyle = {
     overflow: 'hidden',
     position: 'relative',
 };
-function useStyle(config) {
-}
+function useStyle(config) { }

package/src/components/others/collapsible-box/collapsible-box.js

@@ -16,7 +16,7 @@ class CollapsibleBox extends framework_1.TypeDiv {
             // borderBottom: '1px solid #dddddd',
             listStyle: 'none',
             padding: '3px',
-            marginBottom: '5px'
+            marginBottom: '5px',
         });
         this.attr.addName('collapsible-box');
         this.heading = new expand_heading_1.ExpandHeading('标题');

package/src/components/others/collapsible-box/contents/contents.js

@@ -12,7 +12,7 @@ class CollapsibleBoxContents extends framework_1.TypeDiv {
             flexWrap: 'wrap',
             justifyContent: 'flex-start',
             // width: '194px',
-            border: '1px solid #a0a0a0'
+            border: '1px solid #a0a0a0',
         });
         this.attr.addName('collapsible-box-contents');
         this.childNodes = [];

package/src/components/others/collapsible-box/heading/expand-heading.js

@@ -18,19 +18,19 @@ class ExpandHeading extends framework_1.TypeDiv {
             width: '100%',
             display: 'flex',
             alignItems: 'center',
-            height: '36px'
+            height: '36px',
         });
         this.attr.addName('expand-heading');
         this.svg = new svgs_1.ElCaretBottomSvg({
             attrObj: {
-                fill: '#FFF'
-            }
+                fill: '#FFF',
+            },
         });
         this.title = new framework_1.TextNode(title);
         // span.setStyle('verticalAlign', 'middle');
         const span = new framework_1.Span({
             parent: this,
-            childNodes: [this.title]
+            slot: [this.title],
         });
         this.childNodes = [this.svg, span];
     }
@@ -48,7 +48,7 @@ class ExpandHeading extends framework_1.TypeDiv {
                 if (this.svg.style.get('transform') === 'rotate(-90deg)') {
                     this.svg.style.setObj({
                         transform: 'rotate(0deg)',
-                        transition: 'transform 0.3s'
+                        transition: 'transform 0.3s',
                     });
                     // console.log('style.transform is ', style.transform);
                     if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.lastChild) instanceof framework_1.TypeHtml) {
@@ -58,13 +58,13 @@ class ExpandHeading extends framework_1.TypeDiv {
                 else {
                     this.svg.style.setObj({
                         transform: 'rotate(-90deg)',
-                        transition: 'transform 0.3s'
+                        transition: 'transform 0.3s',
                     });
                     if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeHtml) {
                         this.parent.lastChild.style.set('display', 'none');
                     }
                 }
-            }
+            },
         });
     }
 }

package/src/components/others/custom-block/custom-block.d.ts

@@ -1,8 +1,8 @@
-import { ITypeConfig, TextNode, TypeDiv, TypeElement } from '@type-dom/framework';
-export interface ICustomBlockConfig extends ITypeConfig {
+import { TypeProps, TextNode, TypeDiv, TypeElement } from '@type-dom/framework';
+export interface ICustomBlockConfig extends TypeProps {
     type?: 'tip' | 'warning';
     title: string;
-    paragraphs: (TypeElement | TextNode)[];
+    paragraphs: (TypeElement | TextNode | string)[];
     blockquote?: TypeElement | TextNode;
 }
 export declare class CustomBlock extends TypeDiv {

package/src/components/others/custom-block/custom-block.js

@@ -17,25 +17,25 @@ class CustomBlock extends framework_1.TypeDiv {
             borderRadius: '4px',
             // border-left: 5px solid var(--el-color-primary),
             borderLeft: '5px solid ' + borderLeftColor,
-            margin: '20px 0'
+            margin: '20px 0',
         });
         if (params.title) {
             this.addChild(new framework_1.P({
-                text: params.title,
+                slot: params.title,
                 styleObj: {
                     fontSize: '1.1rem',
                     fontWeight: 700,
-                    marginTop: '0'
-                }
+                    marginTop: '0',
+                },
             }));
         }
         if (params.paragraphs) {
             params.paragraphs.forEach((paragraph) => {
                 this.addChild(new framework_1.P({
                     styleObj: {
-                        fontSize: '0.9rem'
+                        fontSize: '0.9rem',
                     },
-                    childNodes: [paragraph]
+                    slot: [paragraph],
                 }));
             });
         }
@@ -48,9 +48,9 @@ class CustomBlock extends framework_1.TypeDiv {
                     padding: '.25rem 0 .25rem 1rem',
                     fontSize: '1rem',
                     // color: var(--text-color-lighter),
-                    color: var_1.$textColor.secondary
+                    color: var_1.$textColor.secondary,
                 },
-                childNodes: [params.blockquote]
+                slot: [params.blockquote],
             }));
         }
     }