@type-dom/ui 0.0.7 → 0.0.9

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

@@ -7,14 +7,14 @@ class TdBreadcrumb extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdBreadcrumb';
-        this.ctrl.addAttrName('td-breadcrumb');
-        this.ctrl.addStyleObj({
+        this.attr.addName('td-breadcrumb');
+        this.style.addObj({
             fontSize: '14px',
             lineHeight: 1
         });
         this.childNodes = [];
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     created() {
         console.log('TdBreadcrumb created . ');
@@ -28,7 +28,7 @@ class TdBreadcrumb extends ui_abstract_1.UI {
         var _a;
         const items = this.childNodes;
         if (items.length) {
-            (_a = items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.ctrl.setAttribute('aria-current', 'page');
+            (_a = items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.attr.set('aria-current', 'page');
         }
     }
 }

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.class.js

@@ -9,7 +9,7 @@ class TdBreadcrumbItem extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdBreadcrumbItem';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             float: 'left',
             display: 'inline-flex',
             alignItems: 'center'
@@ -39,11 +39,11 @@ class TdBreadcrumbItem extends ui_abstract_1.UI {
         if (params === null || params === void 0 ? void 0 : params.slot) {
             this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
         }
-        this.setParams(params);
+        this.useParams(params);
     }
     addSeparator(breadcrumbConfig) {
         if (breadcrumbConfig === null || breadcrumbConfig === void 0 ? void 0 : breadcrumbConfig.separatorIcon) {
-            breadcrumbConfig.separatorIcon.ctrl.addStyleObj({
+            breadcrumbConfig.separatorIcon.style.addObj({
                 verticalAlign: 'middle'
             });
             this.addChild(new td_icon_class_1.TdIcon({

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

@@ -7,11 +7,11 @@ class TdMenu extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params, 'ul');
         this.className = 'TdMenu';
-        this.ctrl.addAttrObj({
+        this.attr.addObj({
             name: 'td-menu',
             role: 'menubar'
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             // border-right: solid 1px var(--el-menu-border-color),
             borderRight: 'solid 1px ' + var_1.$borderColor.base,
             listStyle: 'none',
@@ -22,16 +22,16 @@ class TdMenu extends ui_abstract_1.UI {
             backgroundColor: var_1.$borderColor.base,
             boxSizing: 'border-box'
         });
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
         const mode = props.mode || 'vertical';
         if (mode === 'vertical') {
-            this.ctrl.addStyleObj({});
+            this.style.addObj({});
         }
         else {
-            this.ctrl.addStyleObj({
+            this.style.addObj({
                 display: 'flex',
                 flexWrap: 'nowrap',
                 borderRight: 'none'

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

@@ -1,4 +1,5 @@
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { Router } from '@type-dom/framework';
 export interface ITdMenu extends IUI {
     className: 'TdMenu';
 }
@@ -6,7 +7,7 @@ export interface ITdMenuConfig extends IUIConfig {
     mode?: 'horizontal' | 'vertical';
     defaultActive?: string;
     uniqueOpened?: boolean;
-    router?: boolean;
+    router?: Router;
     menuTrigger?: 'hover' | 'click';
     collapse?: boolean;
     backgroundColor?: string;

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

@@ -8,10 +8,10 @@ class TdTabBar extends ui_abstract_1.UI {
     constructor(params) {
         super(params);
         this.className = 'TdTabBar';
-        this.ctrl.addAttrName('td-tab-bar');
-        this.ctrl.addStyleObj(td_tabs_style_1.$tabsActiveBarStyle);
+        this.attr.addName('td-tab-bar');
+        this.style.addObj(td_tabs_style_1.$tabsActiveBarStyle);
         this.rootTabs = params === null || params === void 0 ? void 0 : params.rootTabs;
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     getBarStyle() {
         var _a;
@@ -26,7 +26,7 @@ class TdTabBar extends ui_abstract_1.UI {
         this.props.tabs && this.props.tabs.every((tab, index) => {
             var _a, _b, _c, _d, _e;
             // const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement
-            const $el = ((_a = this.rootTabs) === null || _a === void 0 ? void 0 : _a.tabNav.tabs) && ((_c = (_b = this.rootTabs) === null || _b === void 0 ? void 0 : _b.tabNav.tabs.find((node) => { var _a, _b; return ((_a = node.props.attrObj) === null || _a === void 0 ? void 0 : _a.tabName) === ((_b = tab.name) !== null && _b !== void 0 ? _b : (index + 1)); })) === null || _c === void 0 ? void 0 : _c.dom);
+            const $el = ((_a = this.rootTabs) === null || _a === void 0 ? void 0 : _a.tabNav.tabs) && ((_c = (_b = this.rootTabs) === null || _b === void 0 ? void 0 : _b.tabNav.tabs.find((node) => { var _a; return node.attr.get('tabName') === ((_a = tab.name) !== null && _a !== void 0 ? _a : (index + 1)); })) === null || _c === void 0 ? void 0 : _c.dom);
             console.log('$el is ', $el);
             if (!$el)
                 return false;
@@ -56,7 +56,7 @@ class TdTabBar extends ui_abstract_1.UI {
     change() {
         console.log('update . ');
         this.barStyle = this.getBarStyle();
-        this.ctrl.setStyleObj(this.barStyle);
+        this.style.setObj(this.barStyle);
     }
 }
 exports.TdTabBar = TdTabBar;

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

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTabNav = void 0;
 const tslib_1 = require("tslib");
+const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
-const aria_1 = require("../../../aria");
 const td_tabs_style_1 = require("./td-tabs.style");
 const td_tab_bar_class_1 = require("./td-tab-bar.class");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
@@ -17,8 +16,8 @@ class TdTabNav extends ui_abstract_1.UI {
         super(params);
         this.tabs = [];
         this.className = 'TdTabNav';
-        this.ctrl.addAttrName('td-tab-nav-wrap');
-        this.ctrl.addStyleObj(td_tabs_style_1.$tabsNavWrapStyle);
+        this.attr.addName('td-tab-nav-wrap');
+        this.style.addObj(td_tabs_style_1.$tabsNavWrapStyle);
         this.addChild(new framework_1.U({
             name: 'underline',
             styleObj: td_tabs_style_1.$tabsNavWrapAfterStyle,
@@ -134,6 +133,8 @@ class TdTabNav extends ui_abstract_1.UI {
                             this.removeFocus();
                             // this.rootTabs.currentName = tabName;
                             (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.tabClick) === null || _b === void 0 ? void 0 : _b.call(_a, pane, tabName, evt);
+                            // tabClick是上级 tabs 的事件监听器，不是tabNav的；
+                            // this.emit('tabClick', pane, tabName, evt);
                             (0, framework_1.nextTick)(() => {
                                 this.selectTab(ele);
                             });
@@ -141,21 +142,20 @@ class TdTabNav extends ui_abstract_1.UI {
                         keydown: (ev) => {
                             var _a, _b;
                             if (closable &&
-                                (ev.code === aria_1.EVENT_CODE.delete ||
-                                    ev.code === aria_1.EVENT_CODE.backspace)) {
-                                // emit('tabRemove', pane, ev)
+                                ((ev === null || ev === void 0 ? void 0 : ev.code) === utils_1.EVENT_CODE.delete || (ev === null || ev === void 0 ? void 0 : ev.code) === utils_1.EVENT_CODE.backspace)) {
+                                // emit('tabRemove', pane, ev);
                                 (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.tabRemove) === null || _b === void 0 ? void 0 : _b.call(_a, pane, ev);
                             }
                         },
                     },
                 });
                 if (tabName === ((_d = this.rootTabs) === null || _d === void 0 ? void 0 : _d.currentName)) {
-                    item.ctrl.addStyleObj({
+                    item.style.addObj({
                         color: var_1.$colors.primary.base,
                     });
                 }
                 else {
-                    item.ctrl.addStyleObj({
+                    item.style.addObj({
                         color: var_1.$textColor.regular,
                     });
                 }
@@ -187,8 +187,8 @@ class TdTabNav extends ui_abstract_1.UI {
             })) || [];
         console.log('this.tabs is ', this.tabs);
         this.nav.addChildren(...this.tabs);
-        this.nav.ctrl.addStyleObj(this.navStyle);
-        this.props = this.setParams(params);
+        this.nav.style.addObj(this.navStyle);
+        this.props = this.useParams(params);
     }
     mounted() {
         setTimeout(() => this.scrollToActiveTab(), 0);
@@ -300,12 +300,12 @@ class TdTabNav extends ui_abstract_1.UI {
         (_a = this.tabBar) === null || _a === void 0 ? void 0 : _a.change();
         this.tabs.forEach((tab) => {
             if (item === tab) {
-                tab.ctrl.setStyleObj({
+                tab.style.setObj({
                     color: var_1.$colors.primary.base,
                 });
             }
             else {
-                tab.ctrl.setStyleObj({
+                tab.style.setObj({
                     color: var_1.$textColor.regular,
                 });
             }
@@ -313,7 +313,7 @@ class TdTabNav extends ui_abstract_1.UI {
     }
     changeTab(e) {
         const code = e.code;
-        const { up, down, left, right } = aria_1.EVENT_CODE;
+        const { up, down, left, right } = utils_1.EVENT_CODE;
         if (![up, down, left, right].includes(code))
             return;
         // 左右上下键更换tab

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

@@ -26,15 +26,15 @@ class TdTabPane extends ui_abstract_1.UI {
             }
             this.addChild(this.panel);
         }
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
     setActive(active) {
         var _a, _b;
         if (active) {
-            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.show();
+            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.show();
         }
         else {
-            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.hide();
+            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.hide();
         }
     }
 }

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

@@ -16,8 +16,8 @@ class TdTabs extends ui_abstract_1.UI {
         var _a, _b;
         super(params);
         this.className = 'TdTabs';
-        this.ctrl.addAttrName('td-tabs');
-        // this.ctrl.addStyleObj($tabsStyle);
+        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',
@@ -28,7 +28,7 @@ class TdTabs extends ui_abstract_1.UI {
         const tabPosition = (params === null || params === void 0 ? void 0 : params.tabPosition) || 'top';
         const isVertical = ['left', 'right'].includes(tabPosition);
         if (isVertical) {
-            this.header.ctrl.addStyleObj(td_tabs_style_1.$tabsHeaderVerticalStyle);
+            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({
@@ -92,11 +92,11 @@ class TdTabs extends ui_abstract_1.UI {
         else {
             this.childNodes = [this.panel, this.header];
         }
-        this.props = this.setParams(params);
+        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, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e;
             console.log('setCurrentName .');
             // should do nothing.
             if (this.currentName === value || (0, utils_1.isUndefined)(value))
@@ -106,12 +106,12 @@ class TdTabs extends ui_abstract_1.UI {
                 if (canLeave !== false) {
                     this.currentName = value;
                     if (trigger) {
-                        // emit(UPDATE_MODEL_EVENT, value)
-                        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c[event_1.UPDATE_MODEL_EVENT]) === null || _d === void 0 ? void 0 : _d.call(_c, value);
-                        // emit('tabChange', value)
-                        (_f = (_e = this.props.emits) === null || _e === void 0 ? void 0 : _e.tabChange) === null || _f === void 0 ? void 0 : _f.call(_e, value);
+                        this.emit(event_1.UPDATE_MODEL_EVENT, value);
+                        // this.props.emits?.[UPDATE_MODEL_EVENT]?.(value);
+                        this.emit('tabChange', value);
+                        // this.props.emits?.tabChange?.(value);
                     }
-                    (_g = this.props.slot) === null || _g === void 0 ? void 0 : _g.forEach((pane, index) => {
+                    (_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) {
@@ -121,39 +121,36 @@ class TdTabs extends ui_abstract_1.UI {
                             pane.setActive(false);
                         }
                     });
-                    (_j = (_h = this.tabNav) === null || _h === void 0 ? void 0 : _h.removeFocus) === null || _j === void 0 ? void 0 : _j.call(_h);
+                    (_e = (_d = this.tabNav) === null || _d === void 0 ? void 0 : _d.removeFocus) === null || _e === void 0 ? void 0 : _e.call(_d);
                 }
             }
-            catch (_k) {
+            catch (_f) {
                 console.error('tab change error');
             }
         });
     }
     handleTabClick(tab, tabName, event) {
-        var _a, _b;
         console.log('handleTabClick . ');
         if (tab.disabled)
             return;
         this.setCurrentName(tabName, true);
-        // emit('tabClick', tab, event)
-        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.tabClick) === null || _b === void 0 ? void 0 : _b.call(_a, tab, event);
+        this.emit('tabClick', tab, event);
+        // this.props.emits?.tabClick?.(tab, event);
     }
     handleTabRemove(pane, ev) {
-        var _a, _b, _c, _d;
         if (pane.disabled || (0, utils_1.isUndefined)(pane.name))
             return;
         ev.stopPropagation();
-        // emit('edit', pane.props.name, 'remove')
-        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.edit) === null || _b === void 0 ? void 0 : _b.call(_a, pane.name, 'remove');
-        // emit('tabRemove', pane.props.name)
-        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c.tabRemove) === null || _d === void 0 ? void 0 : _d.call(_c, pane.name);
+        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() {
-        var _a, _b, _c, _d;
-        // emit('edit', undefined, 'add')
-        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.edit) === null || _b === void 0 ? void 0 : _b.call(_a, undefined, 'add');
-        // emit('tabAdd')
-        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c.tabAdd) === null || _d === void 0 ? void 0 : _d.call(_c);
+        this.emit('edit', undefined, 'add');
+        // this.props.emits?.edit?.(undefined, 'add');
+        this.emit('tabAdd');
+        // this.props.emits?.tabAdd?.();
     }
 }
 exports.TdTabs = TdTabs;

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

@@ -11,14 +11,14 @@ class CollapsibleBox extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'CollapsibleBox';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             // borderTop: '1px solid #dddddd',
             // borderBottom: '1px solid #dddddd',
             listStyle: 'none',
             padding: '3px',
             marginBottom: '5px'
         });
-        this.ctrl.addAttrName('collapsible-box');
+        this.attr.addName('collapsible-box');
         this.heading = new expand_heading_1.ExpandHeading('标题');
         this.heading.parent = this;
         this.contents = new contents_1.CollapsibleBoxContents();

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

@@ -7,14 +7,14 @@ class CollapsibleBoxContents extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'CollapsibleBoxContents';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'flex',
             flexWrap: 'wrap',
             justifyContent: 'flex-start',
             // width: '194px',
             border: '1px solid #a0a0a0'
         });
-        this.ctrl.addAttrName('collapsible-box-contents');
+        this.attr.addName('collapsible-box-contents');
         this.childNodes = [];
     }
 }

package/src/components/others/collapsible-box/heading/expand-heading.d.ts

@@ -7,5 +7,5 @@ export declare class ExpandHeading extends TypeDiv {
     title: TextNode;
     constructor(title: string);
     setTitle(title: string): void;
-    initEvents(): void;
+    setup(): void;
 }

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandHeading = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 class ExpandHeading extends framework_1.TypeDiv {
     constructor(title) {
         super();
         this.className = 'ExpandHeading';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             margin: '0',
             paddingLeft: '10px',
             boxSizing: 'border-box',
@@ -21,7 +20,7 @@ class ExpandHeading extends framework_1.TypeDiv {
             alignItems: 'center',
             height: '36px'
         });
-        this.ctrl.addAttrName('expand-heading');
+        this.attr.addName('expand-heading');
         this.svg = new svgs_1.ElCaretBottomSvg({
             attrObj: {
                 fill: '#FFF'
@@ -38,33 +37,35 @@ class ExpandHeading extends framework_1.TypeDiv {
     setTitle(title) {
         this.title.setText(title);
     }
-    initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.svg.dom, 'click').subscribe((e) => {
-            var _a, _b, _c;
-            console.log('expand-heading svg.dom clicked');
-            e.stopPropagation();
-            // const style = getComputedStyle(this.svg.dom);
-            // console.log('style.transform is ', style.transform);
-            if (((_a = this.svg.props.styleObj) === null || _a === void 0 ? void 0 : _a.transform) === 'rotate(-90deg)') {
-                this.svg.ctrl.setStyleObj({
-                    transform: 'rotate(0deg)',
-                    transition: 'transform 0.3s'
-                });
+    setup() {
+        this.svg.addEvents({
+            click: (e) => {
+                var _a, _b;
+                console.log('expand-heading svg.dom clicked');
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                // const style = getComputedStyle(this.svg.dom);
                 // console.log('style.transform is ', style.transform);
-                if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeHtml) {
-                    this.parent.lastChild.ctrl.setStyle('display', 'flex'); // flex
+                if (this.svg.style.get('transform') === 'rotate(-90deg)') {
+                    this.svg.style.setObj({
+                        transform: 'rotate(0deg)',
+                        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) {
+                        this.parent.lastChild.style.set('display', 'flex'); // flex
+                    }
                 }
-            }
-            else {
-                this.svg.ctrl.setStyleObj({
-                    transform: 'rotate(-90deg)',
-                    transition: 'transform 0.3s'
-                });
-                if (((_c = this.parent) === null || _c === void 0 ? void 0 : _c.lastChild) instanceof framework_1.TypeHtml) {
-                    this.parent.lastChild.ctrl.setStyle('display', 'none');
+                else {
+                    this.svg.style.setObj({
+                        transform: 'rotate(-90deg)',
+                        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');
+                    }
                 }
             }
-        }));
+        });
     }
 }
 exports.ExpandHeading = ExpandHeading;

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

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

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomBlock = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../styles/var");
+class CustomBlock extends framework_1.TypeDiv {
+    constructor(params) {
+        super();
+        this.className = 'CustomBlock';
+        this.attr.addName('tip');
+        const bgColor = params.type === 'warning' ? var_1.$colorDangerRgb : var_1.$colorPrimaryRgb;
+        const borderLeftColor = params.type === 'warning' ? var_1.$colors.danger.base : var_1.$colors.primary.base;
+        this.style.addObj({
+            padding: '8px 16px',
+            // background-color: var(--block-tip-bg-color),
+            backgroundColor: 'rgba(' + bgColor + ', 0.1)',
+            borderRadius: '4px',
+            // border-left: 5px solid var(--el-color-primary),
+            borderLeft: '5px solid ' + borderLeftColor,
+            margin: '20px 0'
+        });
+        if (params.title) {
+            this.addChild(new framework_1.P({
+                text: params.title,
+                styleObj: {
+                    fontSize: '1.1rem',
+                    fontWeight: 700,
+                    marginTop: '0'
+                }
+            }));
+        }
+        if (params.paragraphs) {
+            params.paragraphs.forEach((paragraph) => {
+                this.addChild(new framework_1.P({
+                    styleObj: {
+                        fontSize: '0.9rem'
+                    },
+                    childNodes: [paragraph]
+                }));
+            });
+        }
+        if (params.blockquote) {
+            this.addChild(new framework_1.BlockQuote({
+                styleObj: {
+                    margin: '1rem 0',
+                    // border-left: .2rem solid var(--el-border-color),
+                    borderLeft: '.2rem solid ' + var_1.$borderColor.base,
+                    padding: '.25rem 0 .25rem 1rem',
+                    fontSize: '1rem',
+                    // color: var(--text-color-lighter),
+                    color: var_1.$textColor.secondary
+                },
+                childNodes: [params.blockquote]
+            }));
+        }
+    }
+}
+exports.CustomBlock = CustomBlock;

package/src/components/others/example/example-float-control.d.ts

@@ -0,0 +1,8 @@
+import { ITypeConfig, TypeDiv } from '@type-dom/framework';
+import { Example } from './example';
+export declare class ExampleFloatControl extends TypeDiv {
+    className: 'ExampleFloatControl';
+    parent: Example;
+    constructor(params: ITypeConfig);
+    setup(): void;
+}

package/src/components/others/example/example-float-control.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleFloatControl = void 0;
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const var_1 = require("../../../styles/var");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+class ExampleFloatControl extends framework_1.TypeDiv {
+    constructor(params) {
+        super();
+        this.className = 'ExampleFloatControl';
+        this.attr.addName('example-float-control');
+        this.attr.addObj({
+            role: 'button',
+            tabIndex: 0
+        });
+        this.style.addObj({
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            // border-top: 1px solid var(--border-color),
+            borderTop: '1px solid ' + var_1.$borderColor.base,
+            height: '44px',
+            boxSizing: 'border-box',
+            // background-color: var(--bg-color, #fff),
+            backgroundColor: var_1.$bgColor.default,
+            borderBottomLeftRadius: '4px',
+            borderBottomRightRadius: '4px',
+            marginTop: '-1px',
+            // color: var(--el-text-color-secondary),
+            color: var_1.$textColor.secondary,
+            cursor: 'pointer',
+            position: 'sticky',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            zIndex: 10
+        });
+        this.addChildren(new td_icon_class_1.TdIcon({
+            svgObj: new svgs_1.ElCaretTopSvg(),
+            styleObj: {
+                fontSize: '16px'
+            }
+        }), new framework_1.Span({
+            text: '隐藏源代码',
+            styleObj: {
+                fontSize: '14px',
+                marginLeft: '10px'
+            }
+        }));
+        this.useParams(params);
+    }
+    setup() {
+        this.addEvents({
+            click: () => {
+                // 隐藏 代码
+                this.style.hide();
+                this.parent.sourceWrapper.style.hide();
+            }
+        });
+    }
+}
+exports.ExampleFloatControl = ExampleFloatControl;

package/src/components/others/example/example-showcase.d.ts

@@ -0,0 +1,7 @@
+import { ITypeConfig, TypeDiv } from '@type-dom/framework';
+import { Example } from './example';
+export declare class ExampleShowcase extends TypeDiv {
+    className: 'ExampleShowcase';
+    parent: Example;
+    constructor(params: ITypeConfig);
+}