@type-dom/ui 0.0.2 → 0.0.3

package/src/components/form/td-radio-group/td-radio-group.interface.d.ts

@@ -0,0 +1,47 @@
+import { ISize } from '../../../styles/size';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITdRadioConfig } from '../td-radio/td-radio.interface';
+import { IJsonData, IPrimitive, XProxy } from '@type-dom/framework';
+export interface ITdRadioGroup extends IUI {
+    className: 'TdRadioGroup';
+}
+export interface ITdRadioGroupConfig extends IUIConfig {
+    isButton?: boolean;
+    options?: ITdRadioConfig[];
+    /**
+     * @description native `id` attribute
+     */
+    id?: string;
+    /**
+     * @description the size of radio buttons or bordered radios
+     */
+    size?: ISize;
+    /**
+     * @description whether the nesting radios are disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description binding value
+     */
+    modelValue?: IPrimitive | XProxy<IJsonData>;
+    /**
+     * @description border and background color when button is active
+     */
+    fill?: string;
+    /**
+     * @description same as `aria-label` in RadioGroup
+     */
+    label?: string;
+    /**
+     * @description font color when button is active
+     */
+    textColor?: string;
+    /**
+     * @description native `name` attribute
+     */
+    name?: string;
+    /**
+     * @description whether to trigger form validation
+     */
+    validateEvent?: boolean;
+}

package/src/components/form/td-radio-group/td-radio-group.interface.js

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

package/src/components/form/td-select/dropdown/dropdown.class.d.ts

@@ -0,0 +1,9 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdSelectDropdown, ITdSelectDropdownConfig } from './dropdown.interface';
+export declare class TdSelectDropDown extends UI implements ITdSelectDropdown {
+    className: 'TdSelectDropdown';
+    private header?;
+    private footer?;
+    constructor(config?: ITdSelectDropdownConfig);
+    setConfig(config?: Partial<ITdSelectDropdownConfig>): void;
+}

package/src/components/form/td-select/dropdown/dropdown.class.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSelectDropDown = void 0;
+const ui_1 = require("@type-dom/ui");
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const td_select_style_1 = require("../td-select.style");
+class TdSelectDropDown extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdSelectDropdown';
+        this.addStyleObj({
+            // z-index: calc(#{getCssVar('index-top')} + 1);
+            // border-radius: getCssVar('border-radius-base');
+            borderRadius: ui_1.$borderRadius.base,
+            boxSizing: 'border-box',
+        });
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.header) {
+            this.header = new framework_1.Div({
+                styleObj: {
+                    // padding: map.get($select-dropdown, 'header-padding');
+                    padding: td_select_style_1.$selectDropdown.headerPadding,
+                    // border-bottom: map.get($select-dropdown, 'border');
+                    borderBottom: td_select_style_1.$selectDropdown.border,
+                }
+            });
+            this.header.addChild(config.header);
+            this.unshiftChild(this.header);
+        }
+        if (config === null || config === void 0 ? void 0 : config.footer) {
+            this.footer = new framework_1.Div({
+                styleObj: {
+                    // padding: map.get($select-dropdown, 'footer-padding');
+                    padding: td_select_style_1.$selectDropdown.footerPadding,
+                    // border-top: map.get($select-dropdown, 'border');
+                    borderTop: td_select_style_1.$selectDropdown.border,
+                }
+            });
+            this.footer.addChild(config.footer);
+            this.addChild(this.footer);
+        }
+    }
+}
+exports.TdSelectDropDown = TdSelectDropDown;

package/src/components/form/td-select/dropdown/dropdown.interface.d.ts

@@ -0,0 +1,9 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+import { TypeElement } from '@type-dom/framework';
+export interface ITdSelectDropdown extends IUI {
+    className: 'TdSelectDropdown';
+}
+export interface ITdSelectDropdownConfig extends IUIConfig {
+    header?: TypeElement;
+    footer?: TypeElement;
+}

package/src/components/form/td-select/dropdown/dropdown.interface.js

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

package/src/components/form/td-select/option/option.class.d.ts

@@ -0,0 +1,6 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdOption, ITdOptionConfig } from './option.interface';
+export declare class TdOption extends UI implements ITdOption {
+    className: 'TdOption';
+    constructor(config?: ITdOptionConfig);
+}

package/src/components/form/td-select/option/option.class.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdOption = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const td_select_style_1 = require("../td-select.style");
+const framework_1 = require("@type-dom/framework");
+class TdOption extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'li' });
+        this.className = 'TdOption';
+        this.addAttrObj({
+            name: 'td-option',
+            role: 'option',
+        });
+        this.addStyleObj({
+            // font-size: map.get($select, 'font-size'),
+            fontSize: td_select_style_1.$select.fontSize, // $fontSizes.base,
+            // 20 as the padding of option item, 12 as the size of ✓ icon size
+            padding: '0 #{20 + 12}px 0 20px',
+            position: 'relative',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            // color: map.get($select-option, 'text-color'),
+            color: td_select_style_1.$selectOption.textColor,
+            // height: map.get($select-option, 'height'),
+            height: td_select_style_1.$selectOption.height,
+            // line-height: map.get($select-option, 'height'),
+            lineHeight: td_select_style_1.$selectOption.height,
+            boxSizing: 'border-box',
+            cursor: framework_1.StyleCursor.pointer,
+        });
+        this.setConfig(config);
+    }
+}
+exports.TdOption = TdOption;

package/src/components/form/td-select/option/option.interface.d.ts

@@ -0,0 +1,20 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdOption extends IUI {
+    className: 'TdOption';
+}
+export interface ITdOptionConfig extends IUIConfig {
+    /**
+     * @description value of option
+     *     required: true,
+     */
+    value: string | number | boolean | object;
+    /**
+     * @description label of option, same as `value` if omitted
+     */
+    label?: string | number;
+    created?: boolean;
+    /**
+     * @description whether option is disabled
+     */
+    disabled?: boolean;
+}

package/src/components/form/td-select/option/option.interface.js

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

package/src/components/form/td-select/option-group/option-group.class.d.ts

@@ -0,0 +1,6 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdOptionGroup, ITdOptionGroupConfig } from './option-group.interface';
+export declare class TdOptionGroup extends UI implements ITdOptionGroup {
+    className: 'TdOptionGroup';
+    constructor(config?: ITdOptionGroupConfig);
+}

package/src/components/form/td-select/option-group/option-group.class.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdOptionGroup = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const td_select_style_1 = require("../td-select.style");
+class TdOptionGroup extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: 'ul' });
+        this.className = 'TdOptionGroup';
+        this.addAttrObj({
+            name: 'option-group-wrap'
+        });
+        this.addStyleObj({
+            margin: '0',
+            padding: '0',
+            position: 'relative',
+            listStyle: 'none',
+        });
+        const $gap = '20px';
+        this.addChildren(new framework_1.LI({
+            text: (config === null || config === void 0 ? void 0 : config.label) || '选项组',
+            attrObj: {
+                name: 'option-group-title'
+            },
+            styleObj: {
+                paddingLeft: $gap,
+                // fontSize: map.get($select-group, 'font-size'),
+                fontSize: td_select_style_1.$selectGroup.fontSize,
+                // color: map.get($select-group, 'text-color'),
+                color: td_select_style_1.$selectGroup.textColor,
+                // line-height: map.get($select-group, 'height'),
+                lineHeight: td_select_style_1.$selectGroup.height,
+            }
+        }), new framework_1.LI({
+            childNodes: [
+                new framework_1.UL({
+                    styleObj: {
+                        margin: '0',
+                        padding: '0',
+                        position: 'relative',
+                        listStyle: 'none',
+                    }
+                })
+            ]
+        }));
+        this.setConfig(config);
+    }
+}
+exports.TdOptionGroup = TdOptionGroup;

package/src/components/form/td-select/option-group/option-group.interface.d.ts

@@ -0,0 +1,14 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdOptionGroup extends IUI {
+    className: 'TdOptionGroup';
+}
+export interface ITdOptionGroupConfig extends IUIConfig {
+    /**
+     * @description name of the group
+     */
+    label?: string;
+    /**
+     * @description whether to disable all options in this group
+     */
+    disabled?: boolean;
+}

package/src/components/form/td-select/option-group/option-group.interface.js

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

package/src/components/form/td-select/td-select.class.d.ts

@@ -0,0 +1,6 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdSelect } from './td-select.interface';
+export declare class TdSelect extends UI implements ITdSelect {
+    className: 'TdSelect';
+    constructor();
+}

package/src/components/form/td-select/td-select.class.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSelect = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_tooltip_class_1 = require("../../feedback/td-tooltip/td-tooltip.class");
+const dropdown_class_1 = require("./dropdown/dropdown.class");
+const td_select_style_1 = require("./td-select.style");
+class TdSelect extends ui_abstract_1.UI {
+    constructor() {
+        super();
+        this.className = 'TdSelect';
+        this.addStyleObj(td_select_style_1.$select);
+        this.addChild(new td_tooltip_class_1.TdTooltip({
+            childNodes: [
+                new framework_1.Div({
+                    name: 'wrapper'
+                }),
+                new framework_1.Div({
+                    name: 'content',
+                    childNodes: [
+                        new dropdown_class_1.TdSelectDropDown({
+                            name: 'content-inner',
+                            childNodes: []
+                        }),
+                    ]
+                })
+            ]
+        }));
+    }
+}
+exports.TdSelect = TdSelect;

package/src/components/form/td-select/td-select.interface.d.ts

@@ -0,0 +1,172 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { IJsonData, IPrimitive, XProxy } from '@type-dom/framework';
+import { ISize } from '../../../styles/size';
+export interface ITdSelect extends IUI {
+    className: 'TdSelect';
+}
+export interface ITdSelectConfig extends IUIConfig {
+    /**
+     * @description the name attribute of select input
+     */
+    name?: string;
+    /**
+     * @description native input id
+     */
+    id?: string;
+    /**
+     * @description binding value
+     *     default: undefined,
+     */
+    modelValue?: IPrimitive | XProxy<IJsonData>;
+    /**
+     * @description the autocomplete attribute of select input
+     *     default: 'off',
+     */
+    autocomplete?: string;
+    /**
+     * @description for non-filterable Select, this prop decides if the option menu pops up when the input is focused
+     */
+    automaticDropdown?: boolean;
+    /**
+     * @description size of Input
+     */
+    size?: ISize;
+    /**
+     * @description tooltip theme, built-in theme: `dark` / `light`
+     *     default: 'light',
+     */
+    effect?: 'light' | 'dark' | string;
+    /**
+     * @description whether Select is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description whether select can be cleared
+     */
+    clearable?: boolean;
+    /**
+     * @description whether Select is filterable
+     */
+    filterable?: boolean;
+    /**
+     * @description whether creating new items is allowed. To use this, `filterable` must be true
+     */
+    allowCreate?: boolean;
+    /**
+     * @description whether Select is loading data from server
+     */
+    loading?: boolean;
+    /**
+     * @description custom class name for Select's dropdown
+     *     default: '',
+     */
+    popperClass?: string;
+    /**
+     * @description [popper.js](https://popper.js.org/docs/v2/) parameters
+     */
+    /**
+     * @description whether options are loaded from server
+     */
+    remote?: boolean;
+    /**
+     * @description displayed text while loading data from server, default is 'Loading'
+     */
+    loadingText?: string;
+    /**
+     * @description displayed text when no data matches the filtering query, you can also use slot `empty`, default is 'No matching data'
+     */
+    noMatchText?: string;
+    /**
+     * @description displayed text when there is no options, you can also use slot `empty`, default is 'No data'
+     */
+    noDataText?: string;
+    /**
+     * @description custom remote search method
+     */
+    /**
+     * @description custom filter method
+     */
+    /**
+     * @description whether multiple-select is activated
+     */
+    multiple?: boolean;
+    /**
+     * @description maximum number of options user can select when `multiple` is `true`. No limit when set to 0
+     *     default: 0,
+     */
+    multipleLimit?: number;
+    /**
+     * @description placeholder, default is 'Select'
+     */
+    placeholder?: string;
+    /**
+     * @description select first matching option on enter key. Use with `filterable` or `remote`
+     */
+    defaultFirstOption?: boolean;
+    /**
+     * @description when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option
+     *     default: true,
+     */
+    reserveKeyword?: boolean;
+    /**
+     * @description unique identity key name for value, required when value is an object
+     *     default: 'value',
+     */
+    valueKey?: string;
+    /**
+     * @description whether to collapse tags to a text when multiple selecting
+     */
+    collapseTags?: boolean;
+    /**
+     * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true
+     */
+    collapseTagsTooltip?: boolean;
+    /**
+     * @description the max tags number to be shown. To use this, `collapse-tags` must be true
+     *     default: 1,
+     */
+    maxCollapseTags?: number;
+    /**
+     * @description whether select dropdown is teleported to the body
+     */
+    /**
+     * @description when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed
+     *     default: true,
+     */
+    persistent?: boolean;
+    /**
+     * @description custom clear icon component
+     */
+    /**
+     * @description whether the width of the dropdown is the same as the input
+     */
+    fitInputWidth?: boolean;
+    /**
+     * @description custom suffix icon component
+     */
+    /**
+     * @description tag type
+     * default: 'info'
+     */
+    /**
+     * @description whether to trigger form validation
+     *     default: true,
+     */
+    validateEvent?: boolean;
+    /**
+     * @description in remote search method show suffix icon
+     */
+    remoteShowSuffix?: boolean;
+    /**
+     * @description position of dropdown
+     *     default: 'bottom-start',
+     */
+    /**
+     * @description list of possible positions for dropdown
+     */
+    /**
+     * @description native input aria-label
+     *     default: undefined,
+     */
+    ariaLabel?: string;
+}

package/src/components/form/td-select/td-select.interface.js

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

package/src/components/form/td-select/td-select.style.d.ts

@@ -0,0 +1,53 @@
+export declare const $select: {
+    borderColorHover: string;
+    disabledColor: string;
+    disabledBorder: string;
+    fontSize: string;
+    closeHoverColor: string;
+    inputColor: string;
+    inputFontSize: string;
+    width: string;
+};
+export declare const $selectOption: {
+    textColor: string;
+    disabledColor: string;
+    height: string;
+    hoverBackground: string;
+    selectedTextColor: string;
+};
+export declare const $selectGroup: {
+    textColor: string;
+    height: string;
+    fontSize: string;
+};
+export declare const $selectDropdown: {
+    bgColor: string;
+    shadow: string;
+    emptyColor: string;
+    maxHeight: string;
+    padding: string;
+    emptyPadding: string;
+    headerPadding: string;
+    footerPadding: string;
+    border: string;
+};
+export declare const $selectWrapperPadding: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $selectNearMarginLeft: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $selectItemGap: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $selectItemHeight: {
+    large: string;
+    default: string;
+    small: string;
+};

package/src/components/form/td-select/td-select.style.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$selectItemHeight = exports.$selectItemGap = exports.$selectNearMarginLeft = exports.$selectWrapperPadding = exports.$selectDropdown = exports.$selectGroup = exports.$selectOption = exports.$select = void 0;
+// Select
+const var_1 = require("../../../styles/var");
+exports.$select = {
+    // borderColorHover: getCssVar('border-color-hover'),
+    borderColorHover: var_1.$borderColorHover,
+    // disabledColor: getCssVar('disabled-text-color'),
+    disabledColor: var_1.$disabled.textColor,
+    // disabledBorder: getCssVar('disabled-border-color'),
+    disabledBorder: var_1.$disabled.borderColor,
+    // fontSize: getCssVar('font-size-base'),
+    fontSize: var_1.$fontSizes.base,
+    // closeHoverColor: getCssVar('text-color-secondary'),
+    closeHoverColor: var_1.$textColor.secondary,
+    // inputColor: getCssVar('text-color-placeholder'),
+    inputColor: var_1.$textColor.placeholder,
+    // multipleInputColor: getCssVar('text-color-regular'),
+    // inputFocusBorderColor: getCssVar('color-primary'),
+    inputFontSize: '14px',
+    width: '100%',
+};
+exports.$selectOption = {
+    // textColor: getCssVar('text-color-regular'),
+    textColor: var_1.$textColor.regular,
+    // disabledColor: getCssVar('text-color-placeholder'),
+    disabledColor: var_1.$textColor.placeholder,
+    height: '34px',
+    // hoverBackground: getCssVar('fill-color', 'light'),
+    hoverBackground: var_1.$fillColor.light,
+    // selectedTextColor': getCssVar('color-primary'),
+    selectedTextColor: var_1.$colorPrimary,
+};
+exports.$selectGroup = {
+    // 'text-color': getCssVar('color-info'),
+    textColor: var_1.$colors.info.base,
+    height: '30px',
+    fontSize: '12px',
+};
+exports.$selectDropdown = {
+    // bgColor: getCssVar('bg-color', 'overlay'),
+    bgColor: var_1.$bgColor.overlay,
+    // shadow: getCssVar('box-shadow-light'),
+    shadow: var_1.$boxShadow.light,
+    // emptyColor: getCssVar('text-color-secondary'),
+    emptyColor: var_1.$textColor.secondary,
+    maxHeight: '274px',
+    padding: '6px 0',
+    emptyPadding: '10px 0',
+    headerPadding: '10px',
+    footerPadding: '10px',
+    // border: 1px solid getCssVar('border-color-light'),
+    border: '1px solid ' + var_1.$borderColor.light,
+};
+exports.$selectWrapperPadding = {
+    large: '8px 16px',
+    default: '4px 12px',
+    small: '2px 8px',
+};
+exports.$selectNearMarginLeft = {
+    large: '-8px',
+    default: '-8px',
+    small: '-6px',
+};
+exports.$selectItemGap = {
+    large: '6px',
+    default: '6px',
+    small: '4px',
+};
+// the same height of el-tag
+exports.$selectItemHeight = {
+    large: '24px',
+    default: '24px',
+    small: '20px',
+};

package/src/components/form/td-switch/td-switch.class.d.ts

@@ -0,0 +1,20 @@
+import { Input } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { ITdSwitch, ITdSwitchConfig } from './td-switch.interface';
+export declare class TdSwitch extends UI implements ITdSwitch {
+    className: 'TdSwitch';
+    input: Input;
+    private left?;
+    private core;
+    private right?;
+    config?: ITdSwitchConfig;
+    private activeValue;
+    private inactiveValue;
+    constructor(config?: ITdSwitchConfig);
+    setConfig(config?: ITdSwitchConfig): void;
+    initEvents(): void;
+    handleChange(): void;
+    setDisabled(disabled: boolean): void;
+    setChecked(checked: boolean): void;
+    switchValue(): void;
+}