@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,35 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBreadcrumb = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-//  todo link 样式没有添加
-class TdBreadcrumb extends ui_abstract_1.UI {
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const use_locale_1 = require("../../../hooks/use-locale");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const constants_1 = require("./constants");
+const td_breadcrumb_const_1 = require("./td-breadcrumb.const");
+require("./style/index");
+class TdBreadcrumb extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdBreadcrumb';
         this.attr.addName('td-breadcrumb');
-        this.style.addObj({
-            fontSize: '14px',
-            lineHeight: 1
-        });
-        this.childNodes = [];
-        this.addChild(this.getSlotNode());
+        this.assignProps(td_breadcrumb_const_1.breadcrumbProps);
         this.props = this.useParams(params);
     }
-    created() {
-        console.log('TdBreadcrumb created . ');
-        this.childNodes.forEach((item, index) => {
-            if (index < this.childNodes.length - 1) {
-                item.addSeparator(this.props);
+    setup() {
+        var _a;
+        console.log('TdBreadcrumb setup . ');
+        const { t } = (0, use_locale_1.useLocale)();
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('breadcrumb');
+        const breadcrumb = (0, signals_1.signal)();
+        (0, framework_1.provide)(constants_1.breadcrumbKey, props);
+        (0, framework_1.onMounted)(() => {
+            const items = breadcrumb.get().querySelectorAll(`.${ns.e('item')}`);
+            if (items.length) {
+                items[items.length - 1].setAttribute('aria-current', 'page');
             }
         });
-    }
-    mounted() {
-        var _a;
-        const items = this.childNodes;
-        if (items.length) {
-            (_a = items[items.length - 1]) === null || _a === void 0 ? void 0 : _a.attr.set('aria-current', 'page');
-        }
+        this.assignProps({
+            refDom: breadcrumb,
+        });
+        this.attr.addObj({
+            class: ns.b(),
+            ariaLabel: t('el.breadcrumb.label'),
+            role: 'navigation',
+        });
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdBreadcrumb = TdBreadcrumb;

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

@@ -0,0 +1,2 @@
+import { BreadcrumbProps } from './td-breadcrumb.interface';
+export declare const breadcrumbProps: BreadcrumbProps;

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

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

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

@@ -1,9 +1,8 @@
-import { TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdBreadcrumb extends IUI {
+import { ITypeDiv, TypeDivProps, TypeSvgSvg } from '@type-dom/framework';
+export interface ITdBreadcrumb extends ITypeDiv {
     className: 'TdBreadcrumb';
 }
-export interface ITdBreadcrumbConfig extends IUIConfig {
+export interface BreadcrumbProps extends TypeDivProps {
     /**
      * @description separator character
      *     default: '/',
@@ -11,6 +10,7 @@ export interface ITdBreadcrumbConfig extends IUIConfig {
     separator?: string;
     /**
      * @description icon component of icon separator
+     * 要是类，否则会只有一个对象。
      */
-    separatorIcon?: TypeSvgSvg;
+    separatorIcon?: typeof TypeSvgSvg;
 }

package/src/components/navigation/td-breadcrumb-item/style/css.d.ts

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

package/src/components/navigation/td-breadcrumb-item/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-breadcrumb-item.css");

package/src/components/navigation/td-breadcrumb-item/style/index.d.ts

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

package/src/components/navigation/td-breadcrumb-item/style/index.js

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

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.class.d.ts

@@ -1,8 +1,9 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdBreadcrumbConfig } from '../td-breadcrumb/td-breadcrumb.interface';
-import { ITdBreadcrumbItem, ITdBreadcrumbItemConfig } from './td-breadcrumb-item.interface';
-export declare class TdBreadcrumbItem extends UI implements ITdBreadcrumbItem {
+import { TypeSpan } from '@type-dom/framework';
+import { ITdBreadcrumbItem, BreadcrumbItemProps } from './td-breadcrumb-item.interface';
+import './style/index';
+export declare class TdBreadcrumbItem extends TypeSpan implements ITdBreadcrumbItem {
     className: 'TdBreadcrumbItem';
-    constructor(params?: ITdBreadcrumbItemConfig);
-    addSeparator(breadcrumbConfig?: ITdBreadcrumbConfig): void;
+    props: BreadcrumbItemProps;
+    constructor(params?: BreadcrumbItemProps);
+    setup(): void;
 }

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

@@ -2,70 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdBreadcrumbItem = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const var_1 = require("../../../styles/var");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-class TdBreadcrumbItem extends ui_abstract_1.UI {
+const constants_1 = require("../td-breadcrumb/constants");
+require("./style/index");
+class TdBreadcrumbItem extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
         this.className = 'TdBreadcrumbItem';
-        this.style.addObj({
-            float: 'left',
-            display: 'inline-flex',
-            alignItems: 'center'
-        });
-        const link = new framework_1.Span({
-            name: 'link',
+        this.attr.addName('td-breadcrumb-item');
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        const props = this.props;
+        // const instance = getCurrentInstance()!
+        const breadcrumbContext = (0, framework_1.inject)(constants_1.breadcrumbKey, undefined);
+        const ns = (0, use_namespace_1.useNamespace)('breadcrumb');
+        const router = props.router;
+        const link = (0, signals_1.signal)();
+        const onClick = () => {
+            if (!props.toPath || !router)
+                return;
+            props.replace ? router.replace(props.toPath) : router.push(props.toPath);
+        };
+        this.addChildren(new framework_1.Span({
+            refDom: link,
+            class: [ns.e('inner'), ns.is('link', !!props.toPath)],
             attrObj: {
-                role: 'link'
-            },
-            styleObj: {
-                // color: getCssVar('text-color', 'regular');
-                color: var_1.$textColor.regular
+                role: 'link',
             },
             events: {
-                click: (evt) => {
-                    if (!(params === null || params === void 0 ? void 0 : params.toPath) || !(params === null || params === void 0 ? void 0 : params.router)) {
-                        return;
-                    }
-                    (params === null || params === void 0 ? void 0 : params.replace)
-                        ? params.router.replace(params.toPath)
-                        : params.router.push(params.toPath);
-                    // params.replace ? params.router.replace(params.toPath) : params.router.push(params.toPath)
-                }
-            }
-        }); // todo slot
-        this.addChild(link);
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
-        }
-        this.useParams(params);
-    }
-    addSeparator(breadcrumbConfig) {
-        if (breadcrumbConfig === null || breadcrumbConfig === void 0 ? void 0 : breadcrumbConfig.separatorIcon) {
-            breadcrumbConfig.separatorIcon.style.addObj({
-                verticalAlign: 'middle'
-            });
-            this.addChild(new td_icon_class_1.TdIcon({
-                styleObj: {
-                    margin: '0 6px',
-                    fontWeight: 'normal'
-                },
-                svgObj: breadcrumbConfig.separatorIcon.clone()
-            }));
-        }
-        else {
-            this.addChild(new framework_1.Span({
-                text: (breadcrumbConfig === null || breadcrumbConfig === void 0 ? void 0 : breadcrumbConfig.separator) || '/',
-                attrObj: {
-                    role: 'presentation'
-                },
-                styleObj: {
-                    margin: '0 6px',
-                    fontWeight: 'normal'
-                }
-            }));
-        }
+                click: onClick,
+            },
+            slot: props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default),
+        }), new td_icon_class_1.TdIcon({
+            vIf: breadcrumbContext === null || breadcrumbContext === void 0 ? void 0 : breadcrumbContext.separatorIcon,
+            class: ns.e('separator'),
+            slot: breadcrumbContext.separatorIcon &&
+                new breadcrumbContext.separatorIcon(),
+        }), new framework_1.Span({
+            vIf: !(breadcrumbContext === null || breadcrumbContext === void 0 ? void 0 : breadcrumbContext.separatorIcon),
+            class: ns.e('separator'),
+            attrObj: {
+                role: 'presentation',
+            },
+            slot: breadcrumbContext === null || breadcrumbContext === void 0 ? void 0 : breadcrumbContext.separator,
+        }));
     }
 }
 exports.TdBreadcrumbItem = TdBreadcrumbItem;

package/src/components/navigation/td-breadcrumb-item/td-breadcrumb-item.interface.d.ts

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { Router } from '@type-dom/framework';
-export interface ITdBreadcrumbItem extends IUI {
+import { ITypeSpan, Router, TypeSpanProps } from '@type-dom/framework';
+export interface ITdBreadcrumbItem extends ITypeSpan {
     className: 'TdBreadcrumbItem';
 }
-export interface ITdBreadcrumbItemConfig extends IUIConfig {
+export interface BreadcrumbItemProps extends TypeSpanProps {
     /**
      * @description target route of the link, same as `to` of `vue-router`
      *     default: '',

package/src/components/navigation/td-dropdown/style/css.d.ts

@@ -0,0 +1,6 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/components/button/style/css';
+import '@element-plus/components/button-group/style/css';
+import '@element-plus/components/popper/style/css';
+import '@element-plus/components/scrollbar/style/css';
+import '@element-plus/theme-chalk/el-dropdown.css';

package/src/components/navigation/td-dropdown/style/css.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@element-plus/components/base/style/css");
+require("@element-plus/components/button/style/css");
+require("@element-plus/components/button-group/style/css");
+require("@element-plus/components/popper/style/css");
+require("@element-plus/components/scrollbar/style/css");
+require("@element-plus/theme-chalk/el-dropdown.css");

package/src/components/navigation/td-dropdown/style/index.d.ts

@@ -0,0 +1,6 @@
+import '../../../../components/base/style';
+import '../../../../components/basic/td-button/style';
+import '../../../../components/basic/td-button-group/style';
+import '../../../../components/feedback/td-popper/style';
+import '../../../../components/basic/td-scrollbar/style';
+import '../../../../theme-chalk/dropdown.scss';

package/src/components/navigation/td-dropdown/style/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../components/basic/td-button/style");
+require("../../../../components/basic/td-button-group/style");
+require("../../../../components/feedback/td-popper/style");
+require("../../../../components/basic/td-scrollbar/style");
+require("../../../../theme-chalk/dropdown.scss");

package/src/components/navigation/td-dropdown-item/style/css.d.ts

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

package/src/components/navigation/td-dropdown-item/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-dropdown-item.css");

package/src/components/navigation/td-dropdown-item/style/index.d.ts

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

package/src/components/navigation/td-dropdown-item/style/index.js

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

package/src/components/navigation/td-menu/style/css.d.ts

@@ -0,0 +1,3 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-menu.css';
+import '@element-plus/components/tooltip/style/css';

package/src/components/navigation/td-menu/style/css.js

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

package/src/components/navigation/td-menu/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/menu.scss';
+import '../../../../components/feedback/td-tooltip/style';

package/src/components/navigation/td-menu/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../theme-chalk/menu.scss");
+require("../../../../components/feedback/td-tooltip/style");

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

@@ -1,8 +1,8 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdMenu, ITdMenuConfig } from './td-menu.interface';
-export declare class TdMenu extends UI implements ITdMenu {
+import { TypeUL } from '@type-dom/framework';
+import { ITdMenu, MenuProps } from './td-menu.interface';
+export declare class TdMenu extends TypeUL implements ITdMenu {
     className: 'TdMenu';
-    props: ITdMenuConfig;
-    constructor(params?: ITdMenuConfig);
+    props: MenuProps;
+    constructor(params?: MenuProps);
     setup(): void;
 }

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

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMenu = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
-class TdMenu extends ui_abstract_1.UI {
+class TdMenu extends framework_1.TypeUL {
     constructor(params = {}) {
-        super(params, 'ul');
+        super();
+        // this.useTag('ul');
         this.className = 'TdMenu';
         this.attr.addObj({
             name: 'td-menu',
-            role: 'menubar'
+            role: 'menubar',
         });
         this.style.addObj({
             // border-right: solid 1px var(--el-menu-border-color),
@@ -20,7 +21,7 @@ class TdMenu extends ui_abstract_1.UI {
             paddingLeft: '0',
             // background-color: var(--el-menu-bg-color),
             backgroundColor: var_1.$borderColor.base,
-            boxSizing: 'border-box'
+            boxSizing: 'border-box',
         });
         this.props = this.useParams(params);
     }
@@ -34,7 +35,7 @@ class TdMenu extends ui_abstract_1.UI {
             this.style.addObj({
                 display: 'flex',
                 flexWrap: 'nowrap',
-                borderRight: 'none'
+                borderRight: 'none',
                 // height: var(--el-menu-horizontal-height),
             });
         }

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

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { Router } from '@type-dom/framework';
-export interface ITdMenu extends IUI {
+import { ITypeUL, TypeULProps, Router } from '@type-dom/framework';
+export interface ITdMenu extends ITypeUL {
     className: 'TdMenu';
 }
-export interface ITdMenuConfig extends IUIConfig {
+export interface MenuProps extends TypeULProps {
     mode?: 'horizontal' | 'vertical';
     defaultActive?: string;
     uniqueOpened?: boolean;

package/src/components/navigation/td-menu-item/style/css.d.ts

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

package/src/components/navigation/td-menu-item/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-menu-item.css");

package/src/components/navigation/td-menu-item/style/index.d.ts

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

package/src/components/navigation/td-menu-item/style/index.js

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

package/src/components/navigation/td-menu-item-group/style/css.d.ts

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

package/src/components/navigation/td-menu-item-group/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-menu-item-group.css");

package/src/components/navigation/td-menu-item-group/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/menu-item-group.scss';

package/src/components/navigation/td-menu-item-group/style/index.js

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

package/src/components/navigation/td-page-header/style/css.d.ts

@@ -0,0 +1,3 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/components/divider/style/css';
+import '@element-plus/theme-chalk/el-page-header.css';

package/src/components/navigation/td-page-header/style/css.js

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

package/src/components/navigation/td-page-header/style/index.d.ts

@@ -0,0 +1,3 @@
+import '../../../../components/base/style';
+import '../../../../components/others/td-divider/style';
+import '../../../../theme-chalk/page-header.scss';

package/src/components/navigation/td-page-header/style/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../components/others/td-divider/style");
+require("../../../../theme-chalk/page-header.scss");

package/src/components/navigation/td-page-header/td-page-header.class.d.ts

@@ -0,0 +1,8 @@
+import { TypeDiv } from '@type-dom/framework';
+import { ITdPageHeader, PageHeaderProps } from './td-page-header.interface';
+export declare class TdPageHeader extends TypeDiv implements ITdPageHeader {
+    className: 'PageHeader';
+    props: PageHeaderProps;
+    constructor(param: PageHeaderProps);
+    setup(): void;
+}

package/src/components/navigation/td-page-header/td-page-header.class.js

@@ -1 +1,96 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdPageHeader = void 0;
+const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const use_locale_1 = require("../../../hooks/use-locale");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_page_header_const_1 = require("./td-page-header.const");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_divider_class_1 = require("../../others/td-divider/td-divider.class");
+class TdPageHeader extends framework_1.TypeDiv {
+    constructor(param) {
+        super();
+        this.className = 'PageHeader';
+        this.assignProps(td_page_header_const_1.pageHeaderProps);
+        this.props = this.useParams(param);
+    }
+    setup() {
+        var _a, _b, _c, _d;
+        const props = this.props;
+        const emit = this.emit;
+        const slots = (0, framework_1.useSlots)();
+        const { t } = (0, use_locale_1.useLocale)();
+        const ns = (0, use_namespace_1.useNamespace)('page-header');
+        const kls = (0, signals_1.computed)(() => {
+            return [
+                ns.b(),
+                {
+                    [ns.m('has-breadcrumb')]: !!(slots === null || slots === void 0 ? void 0 : slots.breadcrumb),
+                    [ns.m('has-extra')]: !!(slots === null || slots === void 0 ? void 0 : slots.extra),
+                    [ns.is('contentful')]: !!(slots === null || slots === void 0 ? void 0 : slots.default),
+                },
+            ];
+        });
+        function handleClick() {
+            emit('back');
+        }
+        this.attr.addClass(kls);
+        this.addChildren(new framework_1.Div({
+            vIf: slots === null || slots === void 0 ? void 0 : slots.breadcrumb,
+            class: ns.e('breadcrumb'),
+            slot: slots === null || slots === void 0 ? void 0 : slots.breadcrumb,
+        }), new framework_1.Div({
+            class: ns.e('header'),
+            slot: [
+                new framework_1.Div({
+                    class: ns.e('left'),
+                    slot: [
+                        new framework_1.Div({
+                            class: ns.e('back'),
+                            attrObj: {
+                                role: 'button',
+                                tabindex: '0',
+                            },
+                            events: {
+                                click: handleClick,
+                            },
+                            slot: [
+                                new framework_1.Div({
+                                    vIf: props.icon || (slots === null || slots === void 0 ? void 0 : slots.icon),
+                                    ariaLabel: props.title || t('el.pageHeader.title'),
+                                    class: ns.e('icon'),
+                                    slot: (_a = slots === null || slots === void 0 ? void 0 : slots.icon) !== null && _a !== void 0 ? _a : new td_icon_class_1.TdIcon({
+                                        vIf: props.icon,
+                                        slot: new props.icon(),
+                                    }),
+                                }),
+                                new framework_1.Div({
+                                    class: ns.e('title'),
+                                    slot: (_b = slots === null || slots === void 0 ? void 0 : slots.title) !== null && _b !== void 0 ? _b : (props.title || t('el.pageHeader.title')),
+                                }),
+                            ],
+                        }),
+                        new td_divider_class_1.TdDivider({
+                            direction: 'vertical',
+                        }),
+                        new framework_1.Div({
+                            class: ns.e('content'),
+                            slot: (_c = slots === null || slots === void 0 ? void 0 : slots.content) !== null && _c !== void 0 ? _c : props.content,
+                        }),
+                    ],
+                }),
+                new framework_1.Div({
+                    vIf: slots === null || slots === void 0 ? void 0 : slots.extra,
+                    class: ns.e('extra'),
+                    slot: slots === null || slots === void 0 ? void 0 : slots.extra,
+                }),
+            ],
+        }), new framework_1.Div({
+            vIf: props.slot || (slots === null || slots === void 0 ? void 0 : slots.default),
+            class: ns.e('main'),
+            slot: (_d = props.slot) !== null && _d !== void 0 ? _d : slots === null || slots === void 0 ? void 0 : slots.default,
+        }));
+    }
+}
+exports.TdPageHeader = TdPageHeader;

package/src/components/navigation/td-page-header/td-page-header.const.d.ts

@@ -0,0 +1,5 @@
+import { PageHeaderProps } from './td-page-header.interface';
+export declare const pageHeaderProps: PageHeaderProps;
+export declare const pageHeaderEmits: {
+    back: () => boolean;
+};

package/src/components/navigation/td-page-header/td-page-header.const.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageHeaderEmits = exports.pageHeaderProps = void 0;
+const svgs_1 = require("@type-dom/svgs");
+exports.pageHeaderProps = {
+    icon: svgs_1.ElBackSvg,
+};
+exports.pageHeaderEmits = {
+    back: () => true,
+};