@type-dom/ui 0.1.2 → 0.2.0

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

@@ -1,11 +0,0 @@
-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

@@ -1,18 +0,0 @@
-"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,65 +0,0 @@
-import { IStyle } from '@type-dom/css-type';
-import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
-import { TdIcon } from '../../basic/td-icon/td-icon.class';
-import { TdTabPane } from '../td-tab-pane/td-tab-pane.class';
-export interface ITdTabs extends ITypeDiv {
-    className: 'TdTabs';
-}
-export interface TabsProps extends TypeDivProps {
-    /**
-     * @description type of Tab
-     *     default: '',
-     */
-    type?: 'card' | 'border-card' | '';
-    /**
-     * @description whether Tab is closable
-     */
-    closable?: boolean;
-    /**
-     * @description whether Tab is addable
-     */
-    addable?: boolean;
-    /**
-     * @description binding value, name of the selected tab
-     */
-    modelValue?: string | number;
-    /**
-     * @description whether Tab is addable and closable
-     */
-    editable?: boolean;
-    /**
-     * @description position of tabs
-     *     default: 'top',
-     */
-    tabPosition?: 'top' | 'right' | 'bottom' | 'left';
-    /**
-     * @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: TabPaneName, oldName: TabPaneName | undefined) => void | boolean;
-    /**
-     * @description whether width of tab automatically fits its container
-     */
-    stretch?: boolean;
-    contentStyle?: IStyle;
-    slot?: TdTabPane[];
-    slots?: {
-        addIcon?: TdIcon;
-    };
-}
-export type TabsPanes = Record<number, TabsPaneContext>;
-export type TabPaneName = string | number;
-export type TabsPaneContext = {
-    uid: number;
-    config: TabsProps;
-    paneName: TabPaneName;
-    active: boolean;
-    index: string | undefined;
-    isClosable: boolean;
-};
-export interface ITabsRootContext {
-    config: TabsProps;
-    currentName: TabPaneName;
-    registerPane: (pane: TabsPaneContext) => void;
-    unregisterPane: (uid: number) => void;
-}

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

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,19 +0,0 @@
-import { IStyle } from '@type-dom/css-type';
-import { TabsProps } from './td-tabs.interface';
-export declare const $tabs: {
-    headerHeight: string;
-};
-export declare const $tabsStyle: IStyle;
-export declare const $tabsHeaderStyle: IStyle;
-export declare const $tabsHeaderVerticalStyle: IStyle;
-export declare const $tabsActiveBarStyle: IStyle;
-export declare const $tabsNewTabStyle: IStyle;
-export declare const $tabsNavWrapStyle: IStyle;
-export declare const $tabsNavScrollStyle: IStyle;
-export declare const $tabsNavWrapAfterStyle: IStyle;
-export declare const $tabNavNextStyle: IStyle;
-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?: TabsProps): void;

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

@@ -1,134 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$tabsContentStyle = exports.$tabsItemStyle = exports.$tabsNavStyle = exports.$tabsNavPrevStyle = exports.$tabNavNextStyle = exports.$tabsNavWrapAfterStyle = exports.$tabsNavScrollStyle = exports.$tabsNavWrapStyle = exports.$tabsNewTabStyle = exports.$tabsActiveBarStyle = exports.$tabsHeaderVerticalStyle = exports.$tabsHeaderStyle = exports.$tabsStyle = exports.$tabs = void 0;
-exports.useStyle = useStyle;
-const var_1 = require("../../../styles/var");
-const transition_1 = require("../../../styles/transition");
-const utils_1 = require("@type-dom/utils");
-exports.$tabs = {
-    headerHeight: '40px',
-};
-exports.$tabsStyle = {
-    display: 'flex',
-};
-exports.$tabsHeaderStyle = {
-    padding: 0,
-    position: 'relative',
-    margin: '0 0 15px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-};
-exports.$tabsHeaderVerticalStyle = {
-    flexDirection: 'column',
-};
-exports.$tabsActiveBarStyle = {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    height: '2px',
-    // background-color: getCssVar('color-primary'),
-    backgroundColor: var_1.$colorPrimary,
-    zIndex: 1,
-    // transition: width getCssVar('transition-duration',
-    // 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',
-};
-exports.$tabsNewTabStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    // border: 1px solid getCssVar('border-color'),
-    border: '1px solid ' + var_1.$borderColor,
-    height: '20px',
-    width: '20px',
-    lineHeight: '20px',
-    margin: '10px 0 10px 10px',
-    borderRadius: '3px',
-    textAlign: 'center',
-    fontSize: '12px',
-    // color: getCssVar('text-color', 'primary'),
-    color: var_1.$textColor.primary,
-    cursor: 'pointer',
-    transition: 'all 0.15s',
-};
-exports.$tabsNavWrapStyle = {
-    overflow: 'hidden',
-    marginBottom: '-1px',
-    position: 'relative',
-    flex: '1 auto',
-};
-exports.$tabsNavScrollStyle = {
-    position: 'absolute',
-    cursor: 'pointer',
-    lineHeight: '44px',
-    fontSize: '12px',
-    // color: getCssVar('text-color', 'secondary'),
-    color: var_1.$textColor.secondary,
-    width: '20px',
-    textAlign: 'center',
-};
-exports.$tabsNavWrapAfterStyle = {
-    // content: '',
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-    width: '100%',
-    height: '2px',
-    // background-color: getCssVar('border-color-light'),
-    backgroundColor: var_1.$borderColor.light,
-    // zIndex: getCssVar('index-normal'),
-};
-exports.$tabNavNextStyle = {
-    position: 'absolute',
-    cursor: 'pointer',
-    lineHeight: '44px',
-    fontSize: '12px',
-    // color: getCssVar('text-color', 'secondary'),
-    color: var_1.$textColor.secondary,
-    width: '20px',
-    textAlign: 'center',
-};
-exports.$tabsNavPrevStyle = (0, utils_1.deepClone)(exports.$tabNavNextStyle);
-exports.$tabsNavStyle = {
-    display: 'flex',
-    whiteSpace: 'nowrap',
-    position: 'relative',
-    // transition: transform getCssVar('transition-duration'),
-    transition: 'transform ' + transition_1.$transitionDuration,
-    float: 'left',
-    // zIndex: calc(#{getCssVar('index-normal')} + 1),
-    zIndex: 'calc(index-normal + 1)',
-};
-exports.$tabsItemStyle = {
-    padding: '0 20px',
-    // height: getCssVar('tabs', 'header-height'),
-    height: exports.$tabs.headerHeight,
-    boxSizing: 'border-box',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    listStyle: 'none',
-    // font-size: getCssVar('font-size-base'),
-    fontSize: var_1.$fontSizes.base,
-    fontWeight: 500,
-    // color: getCssVar('text-color', 'primary'),
-    color: var_1.$textColor.primary,
-    position: 'relative',
-};
-exports.$tabsContentStyle = {
-    overflow: 'hidden',
-    position: 'relative',
-};
-function useStyle(config) { }

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

@@ -1,14 +0,0 @@
-import { TypeDiv } from '@type-dom/framework';
-import { CollapsibleBoxContents } from './contents/contents';
-import { ExpandHeading } from './heading/expand-heading';
-/**
- * 可收缩盒子组件
- */
-export declare class CollapsibleBox extends TypeDiv {
-    className: 'CollapsibleBox' | string;
-    childNodes: [ExpandHeading, CollapsibleBoxContents];
-    heading: ExpandHeading;
-    contents: CollapsibleBoxContents;
-    constructor();
-    get children(): (CollapsibleBoxContents | ExpandHeading)[];
-}

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

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleBox = void 0;
-const framework_1 = require("@type-dom/framework");
-const contents_1 = require("./contents/contents");
-const expand_heading_1 = require("./heading/expand-heading");
-/**
- * 可收缩盒子组件
- */
-class CollapsibleBox extends framework_1.TypeDiv {
-    constructor() {
-        super();
-        this.className = 'CollapsibleBox';
-        this.style.addObj({
-            // borderTop: '1px solid #dddddd',
-            // borderBottom: '1px solid #dddddd',
-            listStyle: 'none',
-            padding: '3px',
-            marginBottom: '5px',
-        });
-        this.attr.addName('collapsible-box');
-        this.heading = new expand_heading_1.ExpandHeading('标题');
-        this.heading.parent = this;
-        this.contents = new contents_1.CollapsibleBoxContents();
-        // 继承的类不能赋值this.contents;只能给this.contents添加子元素
-        this.contents.parent = this;
-        this.childNodes = [this.heading, this.contents];
-    }
-    // contents重新赋值后，children刷新。render渲染会变。
-    get children() {
-        return [this.heading, this.contents];
-    }
-}
-exports.CollapsibleBox = CollapsibleBox;

package/src/components/others/collapsible-box/contents/contents.d.ts

@@ -1,7 +0,0 @@
-import { TypeDiv } from '@type-dom/framework';
-import { CollapsibleBox } from '../collapsible-box';
-export declare class CollapsibleBoxContents extends TypeDiv {
-    className: 'CollapsibleBoxContents' | string;
-    parent?: CollapsibleBox;
-    constructor();
-}

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

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleBoxContents = void 0;
-const framework_1 = require("@type-dom/framework");
-class CollapsibleBoxContents extends framework_1.TypeDiv {
-    // childNodes: ControlMenu[];
-    constructor() {
-        super();
-        this.className = 'CollapsibleBoxContents';
-        this.style.addObj({
-            display: 'flex',
-            flexWrap: 'wrap',
-            justifyContent: 'flex-start',
-            // width: '194px',
-            border: '1px solid #a0a0a0',
-        });
-        this.attr.addName('collapsible-box-contents');
-        this.childNodes = [];
-    }
-}
-exports.CollapsibleBoxContents = CollapsibleBoxContents;

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

@@ -1,11 +0,0 @@
-import { Span, TextNode, TypeDiv } from '@type-dom/framework';
-import { ElCaretBottomSvg } from '@type-dom/svgs';
-export declare class ExpandHeading extends TypeDiv {
-    className: 'ExpandHeading';
-    childNodes: [ElCaretBottomSvg, Span];
-    svg: ElCaretBottomSvg;
-    title: TextNode;
-    constructor(title: string);
-    setTitle(title: string): void;
-    setup(): void;
-}

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

@@ -1,71 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpandHeading = void 0;
-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.style.addObj({
-            margin: '0',
-            paddingLeft: '10px',
-            boxSizing: 'border-box',
-            backgroundColor: '#a0a0a0',
-            color: '#fff',
-            textIndent: '20px',
-            borderRadius: '4px 4px 0 0',
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            height: '36px',
-        });
-        this.attr.addName('expand-heading');
-        this.svg = new svgs_1.ElCaretBottomSvg({
-            attrObj: {
-                fill: '#FFF',
-            },
-        });
-        this.title = new framework_1.TextNode(title);
-        // span.setStyle('verticalAlign', 'middle');
-        const span = new framework_1.Span({
-            parent: this,
-            slot: [this.title],
-        });
-        this.childNodes = [this.svg, span];
-    }
-    setTitle(title) {
-        this.title.setText(title);
-    }
-    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 (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.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

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

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

@@ -1,58 +0,0 @@
-"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({
-                slot: 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',
-                    },
-                    slot: [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,
-                },
-                slot: [params.blockquote],
-            }));
-        }
-    }
-}
-exports.CustomBlock = CustomBlock;

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

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

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

@@ -1,63 +0,0 @@
-"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({
-            slot: new svgs_1.ElCaretTopSvg(),
-            styleObj: {
-                fontSize: '16px',
-            },
-        }), new framework_1.Span({
-            slot: '隐藏源代码',
-            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

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

package/src/components/others/example/example-showcase.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleShowcase = void 0;
-const framework_1 = require("@type-dom/framework");
-const var_1 = require("../../../styles/var");
-class ExampleShowcase extends framework_1.TypeDiv {
-    constructor(params) {
-        super();
-        this.className = 'ExampleShowcase';
-        this.attr.addName('example-showcase');
-        this.style.addObj({
-            padding: '1.5rem',
-            margin: '.5px',
-            // background-color: var(--bg-color),
-            backgroundColor: var_1.$bgColor.default,
-        });
-        this.useParams(params);
-    }
-}
-exports.ExampleShowcase = ExampleShowcase;

package/src/components/others/example/example-source-wrapper.d.ts

@@ -1,10 +0,0 @@
-import { TypeDivProps, TypeDiv } from '@type-dom/framework';
-import { Signal } from '@type-dom/signals';
-export interface IExampleSourceWrapperConfig extends TypeDivProps {
-    sourceWrapper: string | Signal<string>;
-}
-export declare class ExampleSourceWrapper extends TypeDiv {
-    className: 'ExampleSourceWrapper';
-    props: IExampleSourceWrapperConfig;
-    constructor(params: IExampleSourceWrapperConfig);
-}

package/src/components/others/example/example-source-wrapper.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExampleSourceWrapper = void 0;
-const framework_1 = require("@type-dom/framework");
-const styles_1 = require("../../../styles");
-class ExampleSourceWrapper extends framework_1.TypeDiv {
-    constructor(params) {
-        var _a;
-        super();
-        this.className = 'ExampleSourceWrapper';
-        this.attr.addName('example-source-wrapper');
-        this.style.addObj({
-            // background-color: var(--code-bg-color),
-            backgroundColor: styles_1.$fillColor.light,
-            overflowX: 'auto',
-            userSelect: 'text',
-        });
-        this.addChild(new framework_1.Pre({
-            slot: [
-                new framework_1.Code({
-                    slot: (_a = params.sourceWrapper) !== null && _a !== void 0 ? _a : '',
-                }),
-            ],
-        }));
-        this.props = this.useParams(params);
-    }
-}
-exports.ExampleSourceWrapper = ExampleSourceWrapper;

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

@@ -1,15 +0,0 @@
-import { Signal } from '@type-dom/signals';
-import { TypeDivProps, TypeDiv, TypeElement } from '@type-dom/framework';
-import { ExampleSourceWrapper } from './example-source-wrapper';
-import { ExampleFloatControl } from './example-float-control';
-export interface IExampleConfig extends TypeDivProps {
-    showcase: TypeElement[];
-    sourceWrapper: string | Signal<string>;
-}
-export declare class Example extends TypeDiv {
-    className: 'Example';
-    sourceWrapper: ExampleSourceWrapper;
-    floatControl: ExampleFloatControl;
-    props: IExampleConfig;
-    constructor(params: IExampleConfig);
-}