@type-dom/ui 0.1.2 → 0.2.0

package/src/components/feedback/td-overlay/td-overlay.const.d.ts

@@ -1,5 +0,0 @@
-import { OverlayProps } from './td-overlay.interface';
-export declare const overlayProps: OverlayProps;
-export declare const overlayEmits: {
-    click: (evt: MouseEvent) => boolean;
-};

package/src/components/feedback/td-overlay/td-overlay.const.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.overlayEmits = exports.overlayProps = void 0;
-exports.overlayProps = {
-    mask: true,
-};
-exports.overlayEmits = {
-    click: (evt) => evt instanceof MouseEvent,
-};

package/src/components/feedback/td-overlay/td-overlay.interface.d.ts

@@ -1,14 +0,0 @@
-import { Property } from '@type-dom/css-type';
-import { ClassValue, ITypeDiv, TypeDivProps } from '@type-dom/framework';
-export interface ITdOverlay extends ITypeDiv {
-    className: 'TdOverlay';
-}
-export interface OverlayProps extends TypeDivProps {
-    mask?: boolean;
-    customMaskEvent?: boolean;
-    overlayClass?: ClassValue;
-    zIndex?: Property.ZIndex;
-    emits?: {
-        click: (event: MouseEvent) => void;
-    };
-}

package/src/components/feedback/td-overlay/td-overlay.interface.js

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

package/src/components/feedback/td-overlay/td-overlay.old.d.ts

@@ -1,8 +0,0 @@
-import { TypeDiv } from '@type-dom/framework';
-import { ITdOverlay, OverlayProps } from './td-overlay.interface';
-export declare let overlayZIndex: number;
-export declare class TdOverlay extends TypeDiv implements ITdOverlay {
-    className: 'TdOverlay';
-    props: OverlayProps;
-    constructor(params?: OverlayProps);
-}

package/src/components/feedback/td-overlay/td-overlay.old.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdOverlay = exports.overlayZIndex = void 0;
-const framework_1 = require("@type-dom/framework");
-const td_overlay_style_1 = require("./td-overlay.style");
-exports.overlayZIndex = 2000;
-class TdOverlay extends framework_1.TypeDiv {
-    constructor(params = {}) {
-        super();
-        exports.overlayZIndex = exports.overlayZIndex + 1;
-        this.className = 'TdOverlay';
-        this.style.addObj(td_overlay_style_1.$tdOverlayStyle);
-        if (params === null || params === void 0 ? void 0 : params.mask) {
-            this.style.addObj({
-                zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
-            });
-        }
-        else {
-            this.style.addObj({
-                zIndex: (params === null || params === void 0 ? void 0 : params.zIndex) || exports.overlayZIndex,
-                position: 'fixed',
-                top: '0px',
-                right: '0px',
-                bottom: '0px',
-                left: '0px',
-            });
-        }
-        this.slotChildren(params.slot);
-        this.props = this.useParams(params);
-    }
-}
-exports.TdOverlay = TdOverlay;

package/src/components/feedback/td-overlay/td-overlay.style.d.ts

@@ -1,2 +0,0 @@
-import { IStyle } from '@type-dom/css-type';
-export declare const $tdOverlayStyle: IStyle;

package/src/components/feedback/td-overlay/td-overlay.style.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$tdOverlayStyle = void 0;
-const var_1 = require("../../../styles/var");
-exports.$tdOverlayStyle = {
-    position: 'fixed',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    zIndex: 2000,
-    height: '100%',
-    // backgroundColor: getCssVar('overlay-color', 'lighter'),
-    backgroundColor: var_1.$overlayColor.default,
-    overflow: 'auto',
-};

package/src/components/feedback/td-popconfirm/style/css.d.ts

@@ -1,4 +0,0 @@
-import '../../../base/style/css';
-import '@element-plus/theme-chalk/el-popconfirm.css';
-import '@element-plus/components/popover/style/css';
-import '@element-plus/components/button/style/css';

package/src/components/feedback/td-popconfirm/style/css.js

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

package/src/components/feedback/td-popconfirm/style/index.d.ts

@@ -1,4 +0,0 @@
-import '../../../base/style';
-import '../../../../theme-chalk/popconfirm.scss';
-import '../../../feedback/td-popover/style';
-import '../../../basic/td-button/style';

package/src/components/feedback/td-popconfirm/style/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style");
-require("../../../../theme-chalk/popconfirm.scss");
-require("../../../feedback/td-popover/style");
-require("../../../basic/td-button/style");

package/src/components/feedback/td-popconfirm/td-popconfirm.class.d.ts

@@ -1,9 +0,0 @@
-import { TypeFragment } from '@type-dom/framework';
-import { ITdPopconfirm, PopconfirmProps } from './td-popconfirm.interface';
-import './style';
-export declare class TdPopconfirm extends TypeFragment implements ITdPopconfirm {
-    className: 'TdPopconfirm';
-    props: PopconfirmProps;
-    constructor(params?: PopconfirmProps);
-    setup(): void;
-}

package/src/components/feedback/td-popconfirm/td-popconfirm.class.js

@@ -1,110 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdPopconfirm = void 0;
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const utils_1 = require("@type-dom/utils");
-const use_locale_1 = require("../../../hooks/use-locale");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-const td_button_class_1 = require("../../basic/td-button/td-button.class");
-const td_tooltip_class_1 = require("../td-tooltip/td-tooltip.class");
-const td_popconfirm_const_1 = require("./td-popconfirm.const");
-require("./style");
-class TdPopconfirm extends framework_1.TypeFragment {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdPopconfirm';
-        this.addEmits(td_popconfirm_const_1.popconfirmEmits);
-        this.assignProps(td_popconfirm_const_1.popconfirmProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        var _a, _b, _c;
-        const props = this.props;
-        const emit = this.emit;
-        const { t } = (0, use_locale_1.useLocale)();
-        const ns = (0, use_namespace_1.useNamespace)('popconfirm');
-        const tooltipRef = (0, signals_1.signal)();
-        const hidePopper = () => {
-            var _a, _b;
-            (_b = (_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
-        const style = (0, signals_1.computed)(() => {
-            return {
-                width: (0, utils_1.addUnit)(props.width),
-            };
-        });
-        const confirm = (e) => {
-            emit('confirm', e);
-            hidePopper();
-        };
-        const cancel = (e) => {
-            // console.warn('cancel . ');
-            emit('cancel', e);
-            hidePopper();
-        };
-        const finalConfirmButtonText = (0, signals_1.computed)(() => props.confirmButtonText || t('el.popconfirm.confirmButtonText'));
-        const finalCancelButtonText = (0, signals_1.computed)(() => props.cancelButtonText || t('el.popconfirm.cancelButtonText'));
-        this.addChildren(new td_tooltip_class_1.TdTooltip({
-            refEl: tooltipRef,
-            trigger: 'click',
-            effect: 'light',
-            // v-bind="$attrs"
-            placement: props.placement, // add by me base on attr
-            popperClass: `${ns.namespace.get()}-popover`,
-            popperStyle: style,
-            teleported: props.teleported,
-            fallbackPlacements: ['bottom', 'top', 'right', 'left'],
-            hideAfter: props.hideAfter,
-            persistent: props.persistent,
-            slots: {
-                content: new framework_1.Div({
-                    class: ns.e(),
-                    slot: [
-                        new framework_1.Div({
-                            class: ns.e('main'),
-                            slot: [
-                                new td_icon_class_1.TdIcon({
-                                    vIf: !props.hideIcon && props.icon,
-                                    class: ns.e('icon'),
-                                    slot: new props.icon(),
-                                    styleObj: {
-                                        color: props.iconColor
-                                    }
-                                }),
-                                props.title
-                            ]
-                        }),
-                        new framework_1.Div({
-                            class: ns.e('action'),
-                            slot: (0, utils_1.isFunction)((_a = props.slots) === null || _a === void 0 ? void 0 : _a.actions) ? (_b = props.slots) === null || _b === void 0 ? void 0 : _b.actions(confirm, cancel)
-                                : [
-                                    new td_button_class_1.TdButton({
-                                        size: 'small',
-                                        type: props.cancelButtonType === 'text' ? '' : props.cancelButtonType,
-                                        text: props.cancelButtonType === 'text',
-                                        slot: finalCancelButtonText,
-                                        events: {
-                                            click: cancel
-                                        }
-                                    }),
-                                    new td_button_class_1.TdButton({
-                                        size: 'small',
-                                        type: props.confirmButtonType === 'text' ? '' : props.confirmButtonType,
-                                        text: props.confirmButtonType === 'text',
-                                        slot: finalConfirmButtonText,
-                                        events: {
-                                            click: confirm
-                                        }
-                                    })
-                                ]
-                        })
-                    ]
-                }),
-                default: (_c = props.slots) === null || _c === void 0 ? void 0 : _c.reference,
-            }
-        }));
-    }
-}
-exports.TdPopconfirm = TdPopconfirm;

package/src/components/feedback/td-popconfirm/td-popconfirm.const.d.ts

@@ -1,12 +0,0 @@
-import { PopconfirmProps } from './td-popconfirm.interface';
-export declare const popconfirmProps: PopconfirmProps;
-export declare const popconfirmEmits: {
-    /**
-     * @description triggers when click confirm button
-     */
-    confirm: (e: MouseEvent) => boolean;
-    /**
-     * @description triggers when click cancel button
-     */
-    cancel: (e: MouseEvent) => boolean;
-};

package/src/components/feedback/td-popconfirm/td-popconfirm.const.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.popconfirmEmits = exports.popconfirmProps = void 0;
-const svgs_1 = require("@type-dom/svgs");
-exports.popconfirmProps = {
-    confirmButtonType: 'primary',
-    cancelButtonType: 'text',
-    icon: svgs_1.ElQuestionFilledSvg,
-    iconColor: '#f90',
-    hideIcon: false,
-    hideAfter: 200,
-    teleported: true,
-    width: 150,
-};
-exports.popconfirmEmits = {
-    /**
-     * @description triggers when click confirm button
-     */
-    confirm: (e) => e instanceof MouseEvent,
-    /**
-     * @description triggers when click cancel button
-     */
-    cancel: (e) => e instanceof MouseEvent,
-};

package/src/components/feedback/td-popconfirm/td-popconfirm.interface.d.ts

@@ -1,68 +0,0 @@
-import { ITypeFragment, TypeFragmentProps, TypeSvgSvg } from '@type-dom/framework';
-import { IButtonType } from '../../basic/td-button/td-button.interface';
-import { Placement } from '@type-dom/popper';
-export interface ITdPopconfirm extends ITypeFragment {
-    className: 'TdPopconfirm';
-}
-export interface PopconfirmProps extends TypeFragmentProps {
-    /**
-     * @description Title
-     */
-    title?: string;
-    /**
-     * @description Confirm button text
-     */
-    confirmButtonText?: string;
-    /**
-     * @description Cancel button text
-     */
-    cancelButtonText?: string;
-    /**
-     * @description Confirm button type
-     *     default: 'primary',
-     */
-    confirmButtonType?: IButtonType;
-    /**
-     * @description Cancel button type
-     *     default: 'text',
-     */
-    cancelButtonType?: IButtonType;
-    /**
-     * @description Icon Component
-     *     default: () => QuestionFilled,
-     */
-    icon?: typeof TypeSvgSvg;
-    /**
-     * @description Icon color
-     *     default: '#f90',
-     */
-    iconColor?: string;
-    /**
-     * @description is hide Icon
-     *     default: false,
-     */
-    hideIcon?: boolean;
-    /**
-     * @description delay of disappear, in millisecond
-     *     default: 200,
-     */
-    hideAfter?: number;
-    /**
-     * @description whether popconfirm is teleported to the body
-     */
-    teleported?: boolean;
-    /**
-     * @description when popconfirm inactive and `persistent` is `false` , popconfirm will be destroyed
-     */
-    persistent?: boolean;
-    /**
-     * @description popconfirm width, min width 150px
-     *     default: 150,
-     */
-    width?: string | number;
-    /**
-     * @description popover placement  tooltip
-     * bottom
-     */
-    placement?: Placement;
-}

package/src/components/feedback/td-popconfirm/td-popconfirm.interface.js

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

package/src/components/feedback/td-popover/style/css.d.ts

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

package/src/components/feedback/td-popover/style/css.js

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

package/src/components/feedback/td-popover/style/index.d.ts

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

package/src/components/feedback/td-popover/style/index.js

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

package/src/components/feedback/td-popover/td-popover.class.d.ts

@@ -1,12 +0,0 @@
-import { TypeFragment } from '@type-dom/framework';
-import { Computed } from '@type-dom/signals';
-import { ITdPopover, PopoverProps } from './td-popover.interface';
-import './style/index';
-export declare class TdPopover extends TypeFragment implements ITdPopover {
-    className: 'TdPopover';
-    props: PopoverProps;
-    popperRef?: Computed<HTMLElement | undefined>;
-    hide?: () => void;
-    constructor(params: PopoverProps);
-    setup(): void;
-}

package/src/components/feedback/td-popover/td-popover.class.js

@@ -1,126 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdPopover = void 0;
-const framework_1 = require("@type-dom/framework");
-const utils_1 = require("@type-dom/utils");
-const signals_1 = require("@type-dom/signals");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const td_tooltip_class_1 = require("../td-tooltip/td-tooltip.class");
-const td_popper_const_1 = require("./td-popper.const");
-require("./style/index");
-class TdPopover extends framework_1.TypeFragment {
-    constructor(params) {
-        super();
-        this.className = 'TdPopover';
-        this.addEmits(td_popper_const_1.popoverEmits);
-        this.assignProps(td_popper_const_1.popoverProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        var _a, _b, _c, _d;
-        const props = this.props;
-        const emit = this.emit;
-        const updateEventKeyRaw = `onUpdate:visible`;
-        const onUpdateVisible = (0, signals_1.computed)(() => {
-            return props[updateEventKeyRaw];
-            // return props.emits?.['update:visible']
-        });
-        const ns = (0, use_namespace_1.useNamespace)('popover');
-        const tooltipRef = (0, signals_1.signal)();
-        const popperRef = (0, signals_1.computed)(() => {
-            var _a, _b;
-            return (_b = (_a = (0, signals_1.unref)(tooltipRef)) === null || _a === void 0 ? void 0 : _a.popperRef) === null || _b === void 0 ? void 0 : _b.get();
-        });
-        const style = (0, signals_1.computed)(() => {
-            return [
-                {
-                    width: (0, utils_1.addUnit)(props.width),
-                },
-                props.popperStyle,
-            ];
-        });
-        const kls = (0, signals_1.computed)(() => {
-            return [ns.b(), props.popperClass, { [ns.m('plain')]: !!props.content }];
-        });
-        const gpuAcceleration = (0, signals_1.computed)(() => {
-            return props.transition === `${ns.namespace.get()}-fade-in-linear`;
-        });
-        const hide = () => {
-            var _a, _b;
-            (_b = (_a = tooltipRef.get()) === null || _a === void 0 ? void 0 : _a.hide) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
-        const beforeEnter = () => {
-            emit('before-enter');
-        };
-        const beforeLeave = () => {
-            emit('before-leave');
-        };
-        const afterEnter = () => {
-            emit('after-enter');
-        };
-        const afterLeave = () => {
-            emit('update:visible', false);
-            emit('after-leave');
-        };
-        (0, framework_1.defineExpose)({
-            /** @description popper ref */
-            popperRef,
-            /** @description hide popover */
-            hide,
-        });
-        this.addChild(new td_tooltip_class_1.TdTooltip({
-            refEl: tooltipRef,
-            //    v-bind="$attrs"  // virtualTriggering  virtualRef等
-            virtualRef: props.virtualRef,
-            virtualTriggering: props.virtualTriggering,
-            trigger: props.trigger,
-            placement: props.placement,
-            disabled: props.disabled,
-            visible: props.visible, // todo undefined don't show popover , why ?
-            transition: props.transition,
-            popperOptions: props.popperOptions,
-            content: props.content,
-            offset: props.offset,
-            showAfter: props.showAfter,
-            hideAfter: props.hideAfter,
-            autoClose: props.autoClose,
-            showArrow: props.showArrow,
-            effect: props.effect,
-            enterable: props.enterable,
-            popperClass: kls.get(),
-            popperStyle: style.get(),
-            teleported: props.teleported,
-            persistent: props.persistent,
-            gpuAcceleration: gpuAcceleration.get(),
-            attrObj: {
-                tabindex: props.tabindex,
-                ariaLabel: props.title,
-            },
-            emits: {
-                'update:visible': onUpdateVisible.get(), // todo
-                beforeShow: beforeEnter,
-                beforeHide: beforeLeave,
-                show: afterEnter,
-                hide: afterLeave,
-            },
-            slots: {
-                default: (_a = props.slots) === null || _a === void 0 ? void 0 : _a.reference,
-                content: [
-                    props.title
-                        ? new framework_1.Div({
-                            class: ns.e('title'),
-                            attrObj: {
-                                role: 'title',
-                            },
-                            slot: props.title,
-                        })
-                        : undefined,
-                    new framework_1.Fragment({
-                        slot: (_d = (_b = props.slot) !== null && _b !== void 0 ? _b : (_c = props.slots) === null || _c === void 0 ? void 0 : _c.default) !== null && _d !== void 0 ? _d : props.content,
-                    }),
-                ],
-            },
-        }));
-    }
-}
-exports.TdPopover = TdPopover;

package/src/components/feedback/td-popover/td-popover.interface.d.ts

@@ -1,110 +0,0 @@
-import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
-import { TooltipTriggerType } from '../td-tooltip/trigger/trigger.interface';
-import { Placement } from '@type-dom/popper';
-import { IStyle } from '@type-dom/css-type';
-import { Ref } from '@type-dom/signals';
-import { Measurable } from '../td-popper/td-popper.interface';
-import { TooltipContentProps } from '../td-tooltip/content/content.interface';
-export interface ITdPopover extends ITypeFragment {
-    className: 'TdPopover';
-}
-export interface PopoverProps extends TypeFragmentProps {
-    /**
-     * @description how the popover is triggered
-     */
-    trigger?: TooltipTriggerType | TooltipTriggerType[];
-    /**
-     * @description popover placement
-     * bottom
-     */
-    placement?: Placement;
-    /**
-     * @description whether Popover is disabled
-     */
-    disabled?: boolean;
-    /**
-     * @description whether popover is visible
-     */
-    visible?: TooltipContentProps['visible'];
-    /**
-     * @description popover transition animation
-     */
-    transition?: string;
-    /**
-     * @description parameters for [popper.js](https://popper.js.org/docs/v2/)
-     */
-    popperOptions?: any;
-    /**
-     * @description [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover
-     */
-    tabindex?: string | number;
-    /**
-     * @description popover content, can be replaced with a default `slot`
-     */
-    content?: string;
-    /**
-     * @description custom style for popover
-     */
-    popperStyle?: IStyle;
-    /**
-     * @description custom class name for popover
-     */
-    popperClass?: TooltipContentProps['popperClass'];
-    /**
-     *  ...useTooltipContentProps.enterable,
-     default: true,
-     */
-    enterable?: TooltipContentProps['enterable'];
-    /**
-     * @description Tooltip theme, built-in theme: `dark` / `light`
-     *     default: 'light',
-     */
-    effect?: 'dark' | 'light';
-    /**
-     * @description whether popover dropdown is teleported to the body
-     * true
-     */
-    teleported?: boolean;
-    /**
-     * @description popover title
-     */
-    title?: string;
-    /**
-     * @description popover width
-     default: 150,
-     */
-    width?: string | number;
-    /**
-     * @description popover offset
-     default: undefined,
-     */
-    offset?: number;
-    /**
-     * @description delay of appearance, in millisecond
-     default: 0,
-     */
-    showAfter?: number;
-    /**
-     * @description delay of disappear, in millisecond
-     default: 200,
-     */
-    hideAfter?: number;
-    /**
-     * @description timeout in milliseconds to hide tooltip
-     default: 0,
-     */
-    autoClose?: number;
-    /**
-     * @description whether a tooltip arrow is displayed or not. For more info, please refer to [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper)
-     default: true,
-     */
-    showArrow?: boolean;
-    /**
-     * @description when popover inactive and `persistent` is `false` , popover will be destroyed
-     default: true,
-     */
-    persistent?: boolean;
-    'onUpdate:visible'?: (visible: boolean) => void;
-    virtualRef?: Ref<Measurable>;
-    virtualTriggering?: boolean;
-}

package/src/components/feedback/td-popover/td-popover.interface.js

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

package/src/components/feedback/td-popover/td-popover.style.d.ts

@@ -1,13 +0,0 @@
-import { IStyle } from '@type-dom/css-type';
-export declare const $popover: {
-    bgColor: string;
-    fontSize: string;
-    borderColor: string;
-    padding: string;
-    paddingLarge: string;
-    titleFontSize: string;
-    titleTextColor: string;
-    borderRadius: string;
-};
-export declare const $popoverPopperStyle: IStyle;
-export declare const $popoverTitleStyle: IStyle;