@type-dom/ui 0.0.4 → 0.0.5

package/src/components/data/td-card/td-card.class.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCard = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const transition_1 = require("../../../styles/transition");
+const var_1 = require("../../../styles/var");
+const td_card_style_1 = require("./td-card.style");
+class TdCard extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params);
+        this.className = 'TdCard';
+        this.ctrl.addAttrName('td-card');
+        this.ctrl.addStyleObj({
+            //   border-radius: getCssVar('card', 'border-radius'),
+            borderRadius: td_card_style_1.$card.borderRadius,
+            // border: 1px solid getCssVar('card', 'border-color'),
+            border: '1px solid ' + td_card_style_1.$card.borderColor,
+            // background-color: getCssVar('card', 'bg-color'),
+            backgroundColor: td_card_style_1.$card.bgColor,
+            overflow: 'hidden',
+            // color: getCssVar('text-color', 'primary'),
+            color: var_1.$textColor.primary,
+            // transition: getCssVar('transition-duration'),
+            transition: transition_1.$transitionDuration.default
+        });
+        this.addShadow(params);
+        this.addHeader(params);
+        this.body = new framework_1.Div({
+            styleObj: {
+                // padding: getCssVar('card', 'padding'),
+                padding: td_card_style_1.$card.padding
+            }
+        });
+        if (params === null || params === void 0 ? void 0 : params.bodyStyle) {
+            this.body.ctrl.addStyleObj(params.bodyStyle);
+        }
+        if (params === null || params === void 0 ? void 0 : params.bodyClass) {
+            this.body.ctrl.addAttrClass(params.bodyClass);
+        }
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.body.slotChild(params.slot);
+        }
+        this.addChild(this.body);
+        this.addFooter(params);
+        this.props = this.setParams(params);
+    }
+    addShadow(params) {
+        const shadow = (params === null || params === void 0 ? void 0 : params.shadow) || 'always';
+        if (shadow === 'always') {
+            this.ctrl.addStyleObj({
+                boxShadow: var_1.$boxShadow.light
+            });
+        }
+        else if (shadow === 'hover') {
+            //   todo :hover :focus boxShadow: $boxShadow.light
+            this.ctrl.addAttrClass('hover-shadow');
+            (0, framework_1.createClass)('hover-shadow:hover', {
+                boxShadow: var_1.$boxShadow.light
+            });
+            (0, framework_1.createClass)('hover-shadow:focus', {
+                boxShadow: var_1.$boxShadow.light
+            });
+        }
+    }
+    addHeader(params) {
+        var _a;
+        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.header) {
+            this.header = new framework_1.Div({
+                styleObj: td_card_style_1.$cardHeader,
+                childNodes: [params.slots.header]
+            });
+            this.addChild(this.header);
+        }
+        else if (params === null || params === void 0 ? void 0 : params.header) {
+            // 文本
+            this.header = new framework_1.Div({
+                text: params.header,
+                styleObj: td_card_style_1.$cardHeader
+            });
+            this.addChild(this.header);
+        }
+    }
+    addFooter(params) {
+        var _a;
+        if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.footer) {
+            this.footer = new framework_1.Div({
+                styleObj: td_card_style_1.$cardFooter,
+                childNodes: [params.slots.footer]
+            });
+            this.addChild(this.footer);
+        }
+        else if (params === null || params === void 0 ? void 0 : params.footer) {
+            this.footer = new framework_1.Div({
+                text: params.footer,
+                styleObj: td_card_style_1.$cardFooter
+            });
+            this.addChild(this.footer);
+        }
+    }
+}
+exports.TdCard = TdCard;

package/src/components/data/td-card/td-card.interface.d.ts

@@ -0,0 +1,26 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { IStyle } from '@type-dom/css-type';
+export interface ITdCard extends IUI {
+    className: 'TdCard';
+}
+export interface ITdCardConfig extends IUIConfig {
+    /**
+     * @description title of the card. Also accepts a DOM passed by `slot#header`
+     *     default: '',
+     */
+    header?: string;
+    footer?: string;
+    /**
+     * @description CSS style of card body
+     */
+    bodyStyle?: IStyle;
+    /**
+     * @description custom class name of card body
+     */
+    bodyClass?: string;
+    /**
+     * @description when to show card shadows
+     *     default: 'always',
+     */
+    shadow?: 'always' | 'hover' | 'never';
+}

package/src/components/data/td-card/td-card.interface.js

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

package/src/components/data/td-card/td-card.style.d.ts

@@ -0,0 +1,9 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $card: {
+    borderColor: string;
+    borderRadius: string;
+    padding: string;
+    bgColor: string;
+};
+export declare const $cardHeader: IStyle;
+export declare const $cardFooter: IStyle;

package/src/components/data/td-card/td-card.style.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$cardFooter = exports.$cardHeader = exports.$card = void 0;
+const var_1 = require("../../../styles/var");
+exports.$card = {
+    // 'border-color': getCssVar('border-color', 'light'),
+    borderColor: var_1.$borderColor.light,
+    borderRadius: '4px',
+    padding: '20px',
+    // 'bg-color': getCssVar('fill-color', 'blank'),
+    bgColor: var_1.$fillColor.blank
+};
+exports.$cardHeader = {
+    // padding: calc(#{getCssVar('card', 'padding')} - 2px) getCssVar('card', 'padding'),
+    padding: `calc(${exports.$card.padding} - 2px) ${exports.$card.padding}`,
+    // border-bottom: 1px solid getCssVar('card', 'border-color'),
+    borderBottom: '1px solid ' + exports.$card.borderColor,
+    // box-sizing: border-box,
+    boxSizing: 'border-box'
+};
+exports.$cardFooter = {
+    //     padding: calc(#{getCssVar('card', 'padding')} - 2px)
+    // getCssVar('card', 'padding'),
+    padding: `calc(${exports.$card.padding} - 2px) ${exports.$card.padding}`,
+    // border-top: 1px solid getCssVar('card', 'border-color'),
+    borderTop: '1px solid ' + exports.$card.borderColor,
+    // box-sizing: border-box,
+    boxSizing: 'border-box'
+};

package/src/components/data/td-carousel/td-carousel.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/data/td-carousel/td-carousel.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/data/td-check-tag/td-check-tag.class.d.ts

@@ -0,0 +1,12 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdCheckTag, ITdCheckTagConfig } from './td-check-tag.interface';
+export declare class TdCheckTag extends UI implements ITdCheckTag {
+    className: 'TdCheckTag';
+    props: ITdCheckTagConfig;
+    checked?: boolean;
+    private type;
+    constructor(params?: ITdCheckTagConfig);
+    initEvents(): void;
+    handleChange(): void;
+    setChecked(checked?: boolean): void;
+}

package/src/components/data/td-check-tag/td-check-tag.class.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCheckTag = void 0;
+const var_1 = require("../../../styles/var");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const event_1 = require("../../../constants/event");
+const td_check_tag_style_1 = require("./td-check-tag.style");
+class TdCheckTag extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'span');
+        this.className = 'TdCheckTag';
+        this.ctrl.addAttrName('td-check-tag');
+        this.type = (params === null || params === void 0 ? void 0 : params.type) || 'primary';
+        (0, td_check_tag_style_1.useType)();
+        this.ctrl.addStyleObj(td_check_tag_style_1.$checkTag);
+        this.setChecked(params === null || params === void 0 ? void 0 : params.checked);
+        this.props = this.setParams(params);
+    }
+    initEvents() {
+        this.addEvents({
+            click: () => {
+                // if (this.props.emits?.change) {
+                //   this.checked = !this.checked;
+                //   this.setChecked(this.checked);
+                // }
+                this.handleChange();
+            },
+            mouseenter: () => {
+                if (this.checked) {
+                    this.ctrl.setStyleObj({
+                        backgroundColor: var_1.$colors[this.type]['light-7']
+                    });
+                }
+                else {
+                    this.ctrl.setStyleObj({
+                        backgroundColor: var_1.$colors.info['light-7']
+                    });
+                }
+            },
+            mouseleave: () => {
+                if (this.checked) {
+                    this.ctrl.setStyleObj({
+                        backgroundColor: var_1.$colors[this.type]['light-8']
+                    });
+                }
+                else {
+                    this.ctrl.setStyleObj({
+                        backgroundColor: var_1.$colors.info['light-9']
+                    });
+                }
+            }
+        });
+    }
+    handleChange() {
+        this.checked = !this.checked;
+        this.setChecked(this.checked);
+        this.emit(event_1.CHANGE_EVENT, this.checked);
+        this.emit('update:checked', this.checked);
+        // emit(CHANGE_EVENT, checked)
+        // emit('update:checked', checked)
+    }
+    setChecked(checked) {
+        this.checked = checked;
+        if (checked) {
+            this.ctrl.setStyleObj(td_check_tag_style_1.$checkTagChecked[this.type]);
+        }
+        else {
+            this.ctrl.setStyleObj({
+                backgroundColor: var_1.$colors.info['light-9'],
+                color: var_1.$colors.info.base
+            });
+        }
+    }
+}
+exports.TdCheckTag = TdCheckTag;

package/src/components/data/td-check-tag/td-check-tag.interface.d.ts

@@ -0,0 +1,22 @@
+import { IType } from '../../../styles/var';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { CHANGE_EVENT } from '../../../constants/event';
+export interface ITdCheckTag extends IUI {
+    className: 'TdCheckTag';
+}
+export interface ITdCheckTagConfig extends IUIConfig {
+    /**
+     * @description is checked
+     *     default: false,
+     */
+    checked?: boolean;
+    /**
+     * @description type of Tag
+     *     default: 'primary',
+     */
+    type?: IType;
+    emits?: {
+        'update:checked'?: (value: boolean) => void;
+        [CHANGE_EVENT]?: (value: boolean) => void;
+    };
+}

package/src/components/data/td-check-tag/td-check-tag.interface.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const event_1 = require("../../../constants/event");

package/src/components/data/td-check-tag/td-check-tag.style.d.ts

@@ -0,0 +1,7 @@
+import { IStyle } from '@type-dom/css-type';
+import { IType } from '../../../styles/var';
+export declare const $checkTag: IStyle;
+export declare const $checkTagHover: IStyle;
+export declare const $checkTagChecked: Record<IType, IStyle<0 | (string & {}), string & {}>>;
+export declare const $checkTagCheckedHover: Record<IType, string>;
+export declare function useType(): void;

package/src/components/data/td-check-tag/td-check-tag.style.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useType = exports.$checkTagCheckedHover = exports.$checkTagChecked = exports.$checkTagHover = exports.$checkTag = void 0;
+const var_1 = require("../../../styles/var");
+const transition_1 = require("../../../styles/transition");
+exports.$checkTag = {
+    // background-color: getCssVar('color', 'info', 'light-9'),
+    backgroundColor: var_1.$colors.info['light-9'],
+    // border-radius: getCssVar('border-radius', 'base'),
+    borderRadius: var_1.$borderRadius.base,
+    // color: getCssVar('color', 'info'),
+    color: var_1.$colors.info.base,
+    cursor: 'pointer',
+    display: 'inline-block',
+    // font-size: getCssVar('font-size', 'base'),
+    fontSize: var_1.$fontSizes.base,
+    // line-height: getCssVar('font-size', 'base'),
+    lineHeight: var_1.$fontSizes.base,
+    padding: '7px 15px',
+    // transition: getCssVar('transition', 'all'),
+    transition: transition_1.$transition.all,
+    fontWeight: 'bold',
+    userSelect: 'none', // 禁止用户选中文本
+};
+exports.$checkTagHover = {
+    backgroundColor: var_1.$colors.info['light-7'],
+};
+exports.$checkTagChecked = {};
+exports.$checkTagCheckedHover = {};
+function useType() {
+    for (const type of var_1.$types) {
+        exports.$checkTagChecked[type] = {
+            backgroundColor: var_1.$colors[type]['light-8'],
+            color: var_1.$colors[type].base,
+        };
+        exports.$checkTagCheckedHover[type] = var_1.$colors[type]['light-7'];
+    }
+}
+exports.useType = useType;

package/src/components/data/td-collapse/td-collapse.class.d.ts

@@ -0,0 +1,13 @@
+import { UI } from '../../../ui/ui.abstract';
+import { TdCollapseItem } from '../td-collapse-item/td-collapse-item.class';
+import type { ICollapseActiveName, ITdCollapse, ITdCollapseConfig } from './td-collapse.interface';
+export declare class TdCollapse extends UI implements ITdCollapse {
+    className: 'TdCollapse';
+    props: ITdCollapseConfig;
+    childNodes: TdCollapseItem[];
+    private activeNames;
+    constructor(params?: ITdCollapseConfig);
+    mounted(): void;
+    setActiveNames(activeNames: ICollapseActiveName[]): void;
+    handleItemClick(name: ICollapseActiveName): void;
+}

package/src/components/data/td-collapse/td-collapse.class.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCollapse = void 0;
+const utils_1 = require("@type-dom/utils");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_collapse_style_1 = require("./td-collapse.style");
+class TdCollapse extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a;
+        super(params);
+        this.className = 'TdCollapse';
+        this.childNodes = [];
+        this.ctrl.addStyleObj({
+            //   border-top: 1px solid getCssVar('collapse-border-color');
+            borderTop: '1px solid ' + td_collapse_style_1.$collapse.borderColor,
+            // border-bottom: 1px solid getCssVar('collapse-border-color');
+            borderBottom: '1px solid ' + td_collapse_style_1.$collapse.borderColor
+        });
+        this.activeNames = (0, utils_1.isArray)(params === null || params === void 0 ? void 0 : params.modelValue)
+            ? params.modelValue
+            : [(_a = params === null || params === void 0 ? void 0 : params.modelValue) !== null && _a !== void 0 ? _a : ''];
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.slotChild(params === null || params === void 0 ? void 0 : params.slot);
+        }
+        this.props = this.setParams(params);
+    }
+    mounted() {
+        this.setActiveNames(this.activeNames);
+    }
+    // get name() {
+    //   return this.props.name ??
+    // }
+    setActiveNames(activeNames) {
+        // this.activeNames = activeNames;
+        // if (this.props.accordion) {
+        //   this.activeNames = activeNames[0];
+        // }
+        this.activeNames = activeNames;
+        console.log('this.activeNames is ', this.activeNames);
+        if (activeNames) {
+            if (this.props.accordion) {
+                this.childNodes.forEach((item) => {
+                    if (item.props.nameId === activeNames[0]) {
+                        item.setActive(true);
+                    }
+                    else {
+                        item.setActive(false);
+                    }
+                });
+            }
+            else {
+                this.childNodes.forEach((item) => {
+                    var _a;
+                    if (activeNames && ((_a = item.props) === null || _a === void 0 ? void 0 : _a.nameId)) {
+                        if (activeNames.includes(item.props.nameId)) {
+                            item.setActive(true);
+                        }
+                        else {
+                            item.setActive(false);
+                        }
+                    }
+                });
+            }
+        }
+    }
+    handleItemClick(name) {
+        var _a;
+        console.log('handleItemClick, name is ', name);
+        if ((_a = this.props) === null || _a === void 0 ? void 0 : _a.accordion) {
+            this.setActiveNames([this.activeNames[0] === name ? '' : name]);
+        }
+        else {
+            const _activeNames = [...this.activeNames];
+            const index = _activeNames.indexOf(name);
+            if (index > -1) {
+                _activeNames.splice(index, 1);
+            }
+            else {
+                _activeNames.push(name);
+            }
+            this.setActiveNames(_activeNames);
+        }
+    }
+}
+exports.TdCollapse = TdCollapse;

package/src/components/data/td-collapse/td-collapse.interface.d.ts

@@ -0,0 +1,18 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { Arrayable } from '../../feedback/td-tooltip/utils';
+export interface ITdCollapse extends IUI {
+    className: 'TdCollapse';
+}
+export interface ITdCollapseConfig extends IUIConfig {
+    /**
+     * @description whether to activate accordion mode
+     */
+    accordion?: boolean;
+    /**
+     * @description currently active panel, the type is `string` in accordion mode, otherwise it is `array`
+     *   default: () => mutable([] as const),
+     */
+    modelValue?: string | number | ICollapseActiveName[];
+}
+export type ICollapseActiveName = string | number;
+export type ICollapseModelValue = Arrayable<ICollapseActiveName>;

package/src/components/data/td-collapse/td-collapse.interface.js

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

package/src/components/data/td-collapse/td-collapse.style.d.ts

@@ -0,0 +1,11 @@
+export declare const $collapse: {
+    borderColor: string;
+    headerHeight: string;
+    headerBgColor: string;
+    headerTextColor: string;
+    headerFontSize: string;
+    contentBgColor: string;
+    'content-font-size': string;
+    contentFontSize: string;
+    contentTextColor: string;
+};

package/src/components/data/td-collapse/td-collapse.style.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$collapse = void 0;
+const var_1 = require("../../../styles/var");
+exports.$collapse = {
+    // 'border-color': getCssVar('border-color-lighter'),
+    borderColor: var_1.$borderColor.lighter,
+    // 'header-height': '48px',
+    headerHeight: '48px',
+    // 'header-bg-color': getCssVar('fill-color', 'blank'),
+    headerBgColor: var_1.$fillColor.blank,
+    // 'header-text-color': getCssVar('text-color-primary'),
+    headerTextColor: var_1.$textColor.primary,
+    // 'header-font-size': '13px',
+    headerFontSize: '13px',
+    // 'content-bg-color': getCssVar('fill-color', 'blank'),
+    contentBgColor: var_1.$fillColor.blank,
+    'content-font-size': '13px',
+    contentFontSize: '13px',
+    // 'content-text-color': getCssVar('text-color-primary'),
+    contentTextColor: var_1.$textColor.primary
+};

package/src/components/data/td-collapse-item/td-collapse-item.class.d.ts

@@ -0,0 +1,25 @@
+import { Button, Div } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { TdIcon } from '../../basic/td-icon/td-icon.class';
+import { TdCollapse } from '../td-collapse/td-collapse.class';
+import { ICollapseActiveName } from '../td-collapse/td-collapse.interface';
+import { ITdCollapseItem, ITdCollapseItemConfig } from './td-collapse-item.interface';
+export declare class TdCollapseItem extends UI<undefined> implements ITdCollapseItem {
+    className: 'TdCollapseItem';
+    props: ITdCollapseItemConfig;
+    parent?: TdCollapse;
+    headerBtn: Button;
+    private disabled?;
+    wrapper: Div;
+    content: Div;
+    private focusing?;
+    private isClick?;
+    private transition;
+    arrowIcon: TdIcon;
+    constructor(params?: ITdCollapseItemConfig);
+    setActive(active: boolean): void;
+    setDisable(disabled: boolean): void;
+    handleFocus(): void;
+    handleHeaderClick(name: ICollapseActiveName): void;
+    handleEnterClick(): void;
+}