@type-dom/ui 0.1.2 → 0.2.0

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

@@ -1,285 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdSwitch = void 0;
-const utils_1 = require("@type-dom/utils");
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const svgs_1 = require("@type-dom/svgs");
-const event_1 = require("../../../constants/event");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-const use_form_common_props_1 = require("../td-form/hooks/use-form-common-props");
-const use_form_item_1 = require("../td-form/hooks/use-form-item");
-const td_switch_const_1 = require("./td-switch.const");
-require("./style/index");
-class TdSwitch extends framework_1.TypeDiv {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdSwitch';
-        this.attr.addName('td-switch');
-        this.addEmits(td_switch_const_1.switchEmits);
-        this.assignProps(td_switch_const_1.switchProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const COMPONENT_NAME = 'TdSwitch';
-        const emit = this.emit;
-        const { formItem } = (0, use_form_item_1.useFormItem)();
-        const switchSize = (0, use_form_common_props_1.useFormSize)();
-        const ns = (0, use_namespace_1.useNamespace)('switch');
-        const { inputId } = (0, use_form_item_1.useFormItemInputId)(props, {
-            formItemContext: formItem,
-        });
-        const switchDisabled = (0, use_form_common_props_1.useFormDisabled)((0, signals_1.computed)(() => (0, signals_1.unref)(props.loading)));
-        const isControlled = (0, signals_1.signal)(props.modelValue !== false);
-        const input = (0, signals_1.signal)();
-        const core = (0, signals_1.signal)();
-        const switchKls = (0, signals_1.computed)(() => [
-            ns.b(),
-            ns.m(switchSize.get()),
-            ns.is('disabled', switchDisabled.get()),
-            ns.is('checked', checked.get()),
-        ]);
-        const labelLeftKls = (0, signals_1.computed)(() => [
-            ns.e('label'),
-            ns.em('label', 'left'),
-            ns.is('active', !checked.get()),
-        ]);
-        const labelRightKls = (0, signals_1.computed)(() => [
-            ns.e('label'),
-            ns.em('label', 'right'),
-            ns.is('active', checked.get()),
-        ]);
-        const coreStyle = (0, signals_1.computed)(() => ({
-            width: (0, utils_1.addUnit)(props.width),
-            backgroundColor: checked.get()
-                ? props.switchOnColor
-                : props.switchOffColor,
-        }));
-        (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, (newValue) => {
-            console.warn('props.vModel newValue is ', newValue);
-            console.warn('isControlled.get() is ', isControlled.get());
-            isControlled.set(true);
-        });
-        const actualValue = (0, signals_1.computed)(() => {
-            var _a, _b;
-            console.warn('actualValue computed. props.vModel.get() is ', (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get());
-            console.warn('isControlled.get() is ', isControlled.get());
-            return isControlled.get() ? (_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get() : false;
-        });
-        const checked = (0, signals_1.computed)(() => actualValue.get() === props.activeValue);
-        if (![props.activeValue, props.inactiveValue].includes(actualValue.get())) {
-            emit(event_1.UPDATE_MODEL_EVENT, props.inactiveValue);
-            emit(event_1.CHANGE_EVENT, props.inactiveValue);
-            emit(event_1.INPUT_EVENT, props.inactiveValue);
-        }
-        (0, signals_1.watch)(checked, (val) => {
-            var _a;
-            console.warn('checked newValue is ', val);
-            if (input.get()) {
-                input.get().checked = val;
-            }
-            if (props.validateEvent) {
-                (_a = formItem === null || formItem === void 0 ? void 0 : formItem.validate) === null || _a === void 0 ? void 0 : _a.call(formItem, 'change').catch((err) => (0, utils_1.debugWarn)(err));
-            }
-        });
-        const handleChange = () => {
-            console.warn('handleChange . ');
-            const val = checked.get() ? props.inactiveValue : props.activeValue;
-            emit(event_1.UPDATE_MODEL_EVENT, val);
-            emit(event_1.CHANGE_EVENT, val);
-            emit(event_1.INPUT_EVENT, val);
-            (0, framework_1.nextTick)(() => {
-                input.get().checked = checked.get();
-            });
-        };
-        const switchValue = () => {
-            console.warn('switchValue . ');
-            if (switchDisabled.get())
-                return;
-            const { beforeChange } = props;
-            if (!beforeChange) {
-                handleChange();
-                return;
-            }
-            const shouldChange = beforeChange();
-            const isPromiseOrBool = [
-                (0, utils_1.isPromise)(shouldChange),
-                (0, utils_1.isBoolean)(shouldChange),
-            ].includes(true);
-            if (!isPromiseOrBool) {
-                (0, utils_1.throwError)(COMPONENT_NAME, 'beforeChange must return type `Promise<boolean>` or `boolean`');
-            }
-            if ((0, utils_1.isPromise)(shouldChange)) {
-                shouldChange
-                    .then((result) => {
-                    if (result) {
-                        handleChange();
-                    }
-                })
-                    .catch((e) => {
-                    (0, utils_1.debugWarn)(COMPONENT_NAME, `some error occurred: ${e}`);
-                });
-            }
-            else if (shouldChange) {
-                handleChange();
-            }
-        };
-        const focus = () => {
-            var _a, _b;
-            (_b = (_a = input.get()) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
-        (0, framework_1.onMounted)(() => {
-            console.warn('onMounted . ');
-            input.get().checked = checked.get();
-        });
-        (0, framework_1.defineExpose)({
-            /**
-             *  @description manual focus to the switch component
-             **/
-            focus,
-            /**
-             * @description whether Switch is checked
-             */
-            checked,
-        });
-        this.attr.addClass(switchKls);
-        this.addEvents({
-            click: (evt) => {
-                console.warn('click . ');
-                switchValue();
-                evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-            },
-        });
-        this.addChildren(new framework_1.Input({
-            refDom: input,
-            attrObj: {
-                id: inputId.get(),
-                class: ns.e('input'),
-                type: 'checkbox',
-                role: 'switch',
-                ariaChecked: checked,
-                ariaDisabled: switchDisabled,
-                ariaLabel: props.ariaLabel,
-                // name: name,
-                trueValue: props.activeValue,
-                falseValue: props.inactiveValue,
-                disabled: switchDisabled,
-                tabindex: props.tabindex,
-            },
-            events: {
-                change: handleChange,
-                keydown: (evt) => {
-                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
-                        switchValue();
-                    }
-                },
-            },
-        }), !props.inlinePrompt && (props.inactiveIcon || props.inactiveText)
-            ? new framework_1.Span({
-                class: labelLeftKls,
-                slot: [
-                    props.inactiveIcon
-                        ? new td_icon_class_1.TdIcon({
-                            slot: props.inactiveIcon,
-                        })
-                        : undefined,
-                    !props.inactiveIcon && props.inactiveText
-                        ? new framework_1.Span({
-                            attrObj: {
-                                ariaHidden: checked,
-                            },
-                            slot: props.inactiveText,
-                        })
-                        : undefined,
-                ],
-            })
-            : undefined, new framework_1.Span({
-            refDom: core,
-            class: ns.e('core'),
-            styleObj: coreStyle,
-            slot: [
-                props.inlinePrompt
-                    ? new framework_1.Div({
-                        class: ns.e('inner'),
-                        slot: props.activeIcon || props.inactiveIcon
-                            ? new td_icon_class_1.TdIcon({
-                                class: ns.is('icon'),
-                                slot: (0, signals_1.computed)(() => checked.get() ? props.activeIcon : props.inactiveIcon),
-                            })
-                            : props.activeText || props.inactiveText
-                                ? new framework_1.Span({
-                                    class: ns.is('text'),
-                                    // vIf: props.activeText || props.inactiveText,
-                                    attrObj: {
-                                        ariaHidden: !checked.get(),
-                                    },
-                                    slot: (0, signals_1.computed)(() => checked.get() ? props.activeText : props.inactiveText),
-                                })
-                                : undefined,
-                    })
-                    : undefined,
-                new framework_1.Div({
-                    class: ns.e('action'),
-                    slot: (0, signals_1.computed)(() => {
-                        var _a, _b;
-                        if (props.loading) {
-                            return new td_icon_class_1.TdIcon({
-                                class: ns.is('loading'),
-                                slot: new svgs_1.ElLoadingSvg(),
-                            });
-                        }
-                        else if (checked.get()) {
-                            if ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.activeAction) {
-                                return (0, framework_1.rawSlot)(props.slots.activeAction);
-                            }
-                            else {
-                                if (props.activeActionIcon) {
-                                    return new td_icon_class_1.TdIcon({
-                                        slot: props.activeActionIcon,
-                                    });
-                                }
-                            }
-                        }
-                        else if (!checked.get()) {
-                            if ((_b = props.slots) === null || _b === void 0 ? void 0 : _b.inactiveAction) {
-                                return (0, framework_1.rawSlot)(props.slots.inactiveAction);
-                            }
-                            else {
-                                if (props.inactiveActionIcon) {
-                                    return new td_icon_class_1.TdIcon({
-                                        slot: props.inactiveActionIcon,
-                                    });
-                                }
-                            }
-                        }
-                        return undefined;
-                    }),
-                }),
-            ],
-        }), !props.inlinePrompt && (props.activeIcon || props.activeText)
-            ? new framework_1.Span({
-                class: labelRightKls,
-                slot: (() => {
-                    const slot = [];
-                    if (props.activeIcon) {
-                        slot.push(new td_icon_class_1.TdIcon({
-                            slot: props.activeIcon,
-                        }));
-                    }
-                    if (!props.activeIcon && props.activeText) {
-                        slot.push(new framework_1.Span({
-                            attrObj: {
-                                ariaHidden: !checked.get(),
-                            },
-                            slot: props.activeText,
-                        }));
-                    }
-                    return slot;
-                })(),
-            })
-            : undefined);
-    }
-}
-exports.TdSwitch = TdSwitch;

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

@@ -1,10 +0,0 @@
-import { InjectionKey } from '@type-dom/framework';
-import { SelectContext } from '../td-select/td-select.interface';
-import { SwitchProps } from './td-switch.interface';
-export declare const switchProps: SwitchProps;
-export declare const switchEmits: {
-    "update:modelValue": (val: boolean | string | number) => boolean;
-    change: (val: boolean | string | number) => boolean;
-    input: (val: boolean | string | number) => boolean;
-};
-export declare const switchKey: InjectionKey<SelectContext>;

package/src/components/form/td-switch/td-switch.const.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.switchKey = exports.switchEmits = exports.switchProps = void 0;
-const utils_1 = require("@type-dom/utils");
-const event_1 = require("../../../constants/event");
-exports.switchProps = {
-    modelValue: false,
-    width: '',
-    activeText: '',
-    inactiveText: '',
-    activeValue: true,
-    inactiveValue: false,
-    name: '',
-    validateEvent: true,
-};
-// 这些只是验证器，与双向绑定没有任何关系的。
-exports.switchEmits = {
-    [event_1.UPDATE_MODEL_EVENT]: (val) => {
-        // console.log('switch emit update:modelValue . ');
-        return (0, utils_1.isBoolean)(val) || (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val);
-    },
-    [event_1.CHANGE_EVENT]: (val) => (0, utils_1.isBoolean)(val) || (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val),
-    [event_1.INPUT_EVENT]: (val) => (0, utils_1.isBoolean)(val) || (0, utils_1.isString)(val) || (0, utils_1.isNumber)(val),
-};
-exports.switchKey = Symbol('TdSwitch');

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

@@ -1,101 +0,0 @@
-import { ITypeDiv, TypeDivProps, TypeSvgSvg } from '@type-dom/framework';
-import { MaybeRef, Signal } from '@type-dom/signals';
-export interface ITdSwitch extends ITypeDiv {
-    className: 'TdSwitch';
-}
-export interface SwitchProps extends TypeDivProps {
-    /**
-     * @description binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type
-     * default: false
-     */
-    modelValue?: boolean | number | string;
-    vModel?: Signal<boolean | number | string>;
-    /**
-     * @description whether Switch is disabled
-     * default false
-     */
-    disabled?: boolean;
-    /**
-     * @description whether Switch is in loading state
-     * default false
-     */
-    loading?: MaybeRef<boolean>;
-    /**
-     * @description size of Switch
-     */
-    size?: 'large' | 'default' | 'small';
-    /**
-     * @description width of Switch
-     */
-    width?: number | string;
-    /**
-     * @description whether icon or text is displayed inside dot, only the first character will be rendered for text
-     * default false
-     */
-    inlinePrompt?: boolean;
-    /**
-     * @description component of the icon displayed in action when in `off` state
-     */
-    inactiveActionIcon?: TypeSvgSvg;
-    /**
-     * @description component of the icon displayed in action when in `on` state
-     */
-    activeActionIcon?: TypeSvgSvg;
-    /**
-     * @description component of the icon displayed when in `on` state, overrides `active-text`
-     */
-    activeIcon?: TypeSvgSvg;
-    /**
-     * @description component of the icon displayed when in `off` state, overrides `inactive-text`
-     */
-    inactiveIcon?: TypeSvgSvg;
-    /**
-     * @description text displayed when in `on` state
-     */
-    activeText?: string;
-    /**
-     * @description text displayed when in `off` state
-     */
-    inactiveText?: string;
-    /**
-     * @description switch value when in `on` state
-     * default true
-     */
-    activeValue?: boolean | string | number;
-    /**
-     * @description switch value when in `off` state
-     */
-    inactiveValue?: boolean | string | number;
-    /**
-     * @description input name of Switch
-     */
-    name?: string;
-    /**
-     * @description whether to trigger form validation
-     *     default: true
-     */
-    validateEvent?: boolean;
-    /**
-     * @description before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching
-     */
-    beforeChange?: () => Promise<boolean> | boolean;
-    /**
-     * @description id for input
-     */
-    id?: string;
-    /**
-     * @description tabindex for input
-     */
-    tabindex?: string | number;
-    /**
-     * @description native input aria-label
-     */
-    label?: string;
-    switchOnColor?: string;
-    switchOffColor?: string;
-    activeActionText?: string;
-    inactiveActionText?: string;
-}
-export interface SwitchContext {
-    checked: MaybeRef<boolean>;
-}

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

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

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

@@ -1,65 +0,0 @@
-import { IStyle } from '@type-dom/css-type';
-export declare const $switchOnColor: string;
-export declare const $switchOffColor: string;
-export declare const $switchBorderColor: string;
-export declare const $switchHeight: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $switchFontSize: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $switchCoreBorderRadius: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $switchCoreWidth: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $switchCoreHeight: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $switchButtonSize: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $switchContentPadding: {
-    large: string;
-    default: string;
-    small: string;
-};
-export declare const $switch: {
-    onColor: string;
-    offColor: {
-        base: string;
-        light: string;
-        lighter: string;
-        extraLight: string;
-        dark: string;
-        darker: string;
-    };
-};
-export declare const $switchStyle: IStyle;
-export declare const $switchLabel: {
-    transition: string;
-    display: string;
-    fontWeight: string;
-    cursor: string;
-    verticalAlign: string;
-    color: string;
-};
-export declare const $switchInputStyle: IStyle;
-export declare const $switchCoreStyle: IStyle;
-export declare const $switchDisabledStyle: IStyle;
-export declare const $disabledStyle: IStyle;
-export declare const $switchCoreInnerStyle: IStyle;
-export declare const $switchCoreActionStyle: IStyle;

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

@@ -1,150 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$switchCoreActionStyle = exports.$switchCoreInnerStyle = exports.$disabledStyle = exports.$switchDisabledStyle = exports.$switchCoreStyle = exports.$switchInputStyle = exports.$switchLabel = exports.$switchStyle = exports.$switch = exports.$switchContentPadding = exports.$switchButtonSize = exports.$switchCoreHeight = exports.$switchCoreWidth = exports.$switchCoreBorderRadius = exports.$switchFontSize = exports.$switchHeight = exports.$switchBorderColor = exports.$switchOffColor = exports.$switchOnColor = void 0;
-const var_1 = require("../../../styles/var");
-exports.$switchOnColor = var_1.$colors.primary.base;
-// -switch-on-color: var(--el-color-primary);
-exports.$switchOffColor = var_1.$borderColor.base;
-// --el-switch-off-color: var(--el-border-color);
-exports.$switchBorderColor = var_1.$borderColor.base;
-exports.$switchHeight = {
-    large: '40px',
-    default: '32px',
-    small: '24px',
-};
-exports.$switchFontSize = {
-    large: '14px',
-    default: '14px',
-    small: '12px',
-};
-exports.$switchCoreBorderRadius = {
-    large: '12px',
-    default: '10px',
-    small: '8px',
-};
-exports.$switchCoreWidth = {
-    large: '50px',
-    default: '40px',
-    small: '30px',
-};
-exports.$switchCoreHeight = {
-    large: '24px',
-    default: '20px',
-    small: '16px',
-};
-exports.$switchButtonSize = {
-    large: '20px',
-    default: '16px',
-    small: '12px',
-};
-exports.$switchContentPadding = {
-    large: '6px',
-    default: '4px',
-    small: '2px',
-};
-exports.$switch = {
-    // 'on-color': getCssVar('color-primary'),
-    onColor: var_1.$colorPrimary,
-    // 'off-color': getCssVar('border-color'),
-    offColor: var_1.$borderColor,
-};
-exports.$switchStyle = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    position: 'relative',
-    // font-size: map.get($switch-font-size, 'default'),
-    fontSize: exports.$switchFontSize['default'],
-    // line-height: map.get($switch-core-height, 'default'),
-    lineHeight: exports.$switchHeight['default'],
-    // height: map.get($switch-height, 'default'),
-    height: exports.$switchHeight['default'],
-    verticalAlign: 'middle',
-};
-exports.$switchLabel = {
-    // transition: getCssVar('transition-duration-fast'),
-    transition: var_1.$transitionDurationFast,
-    // height: map.get($switch-core-height, 'default'),
-    display: 'inline-flex',
-    // font-size: map.get($switch-font-size, 'default'),
-    fontWeight: exports.$switchFontSize['default'],
-    cursor: 'pointer',
-    verticalAlign: 'middle',
-    // color: getCssVar('text-color', 'primary'),
-    color: var_1.$textColor.primary,
-};
-exports.$switchInputStyle = {
-    position: 'absolute',
-    width: 0,
-    height: 0,
-    opacity: 0,
-    margin: 0,
-};
-exports.$switchCoreStyle = {
-    display: 'inline-flex',
-    position: 'relative',
-    alignItems: 'center',
-    //   min-width: map.get($switch-core-width, 'default');
-    minWidth: exports.$switchCoreWidth['default'],
-    // height: map.get($switch-core-height, 'default');
-    height: exports.$switchCoreHeight['default'],
-    // border: '1px solid var(--el-switch-border-color, var(--el-switch-off-color))',
-    border: '1px solid ' + exports.$switchBorderColor,
-    // border-radius: map.get($switch-core-border-radius, 'default'),
-    borderRadius: exports.$switchCoreBorderRadius['default'],
-    outline: 'none',
-    boxSizing: 'border-box',
-    // background: getCssVar('switch-off-color'),
-    backgroundColor: exports.$switchOffColor,
-    cursor: 'pointer',
-    // transition: border-color getCssVar('transition-duration'),
-    //     background-color getCssVar('transition-duration'),
-    transition: 'border-color ' +
-        var_1.$transitionDurationDefault +
-        ', background-color ' +
-        var_1.$transitionDurationDefault,
-};
-exports.$switchDisabledStyle = {
-    opacity: 0.6,
-};
-exports.$disabledStyle = {
-    cursor: 'not-allowed',
-};
-exports.$switchCoreInnerStyle = {
-    width: '100%',
-    // transition: all getCssVar('transition-duration'),
-    transition: 'all ' + var_1.$transitionDurationDefault,
-    // height: map.get($switch-button-size, 'default'),
-    height: exports.$switchButtonSize['default'],
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    // padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
-    //     $switch-button-size,
-    //     'default'
-    //   )} + 2px);
-    padding: '0 ' +
-        exports.$switchContentPadding['default'] +
-        ' 0 calc(' +
-        exports.$switchButtonSize['default'] +
-        ' + 2px)',
-};
-exports.$switchCoreActionStyle = {
-    position: 'absolute',
-    left: '1px',
-    // border-radius: getCssVar('border-radius-circle'),
-    borderRadius: var_1.$borderRadius.circle,
-    // transition: all getCssVar('transition-duration'),
-    transition: 'all ' + var_1.$transitionDurationDefault,
-    // width: map.get($switch-button-size, 'default'),
-    width: exports.$switchButtonSize['default'],
-    // height: map.get($switch-button-size, 'default'),
-    height: exports.$switchButtonSize['default'],
-    // background-color: getCssVar('color-white'),
-    backgroundColor: var_1.$colorWhite,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    // color: getCssVar('switch-off-color'),
-    color: exports.$switchOffColor,
-};

package/src/components/form/td-switch/widget/td-switch-core.d.ts

@@ -1,18 +0,0 @@
-import { Div, TypeSpanProps, Span, TypeSpan } from '@type-dom/framework';
-import { TdIcon } from '../../../basic/td-icon/td-icon.class';
-import { SwitchProps } from '../td-switch.interface';
-import { TdSwitch } from '../td-switch.class';
-export declare class TdSwitchCore extends TypeSpan {
-    className: 'TdSwitchCore';
-    action: Div;
-    parent?: TdSwitch;
-    props: SwitchProps & TypeSpanProps;
-    private innerText?;
-    private innerIcon?;
-    inner?: Div;
-    actionIcon?: TdIcon;
-    actionSpan?: Span;
-    constructor(params?: SwitchProps);
-    setup(): void;
-    setInnerChecked(checked: boolean): void;
-}