@type-dom/ui 0.1.3 → 0.2.1

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

@@ -1,83 +0,0 @@
-import { Awaitable } from '@type-dom/utils';
-import { Placement } from '@type-dom/popper';
-import { autocompleteEmits } from './td-autocomplete.const';
-import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
-export interface ITdAutoComplete extends ITypeFragment {
-    className: 'TdAutoComplete';
-}
-export type AutocompleteData = Record<string, any>[];
-export type AutocompleteFetchSuggestionsCallback = (data: AutocompleteData) => void;
-export type AutocompleteFetchSuggestions = ((queryString: string, cb: AutocompleteFetchSuggestionsCallback) => Awaitable<AutocompleteData> | void) | AutocompleteData;
-export interface AutocompleteProps extends TypeFragmentProps {
-    /**
-     * @description key name of the input suggestion object for display
-     *     default: 'value',
-     */
-    valueKey?: string;
-    /**
-     * @description binding value
-     *     default: '',
-     */
-    modelValue?: string | number;
-    /**
-     * @description debounce delay when typing, in milliseconds
-     *     default: 300,
-     */
-    debounce?: number;
-    /**
-     * @description placement of the popup menu
-     *     default: 'bottom-start',
-     */
-    placement?: Placement;
-    /**
-     *  @description a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete
-     *   default: NOOP,
-     */
-    fetchSuggestions?: AutocompleteFetchSuggestions;
-    /**
-     * @description custom class name for autocomplete's dropdown,
-     *     default: '',
-     */
-    popperClass?: string;
-    /**
-     * @description whether show suggestions when input focus
-     *     default: true,
-     */
-    triggerOnFocus?: boolean;
-    /**
-     * @description whether to emit a `select` event on enter when there is no autocomplete match
-     *     default: false,
-     */
-    selectWhenUnmatched?: boolean;
-    /**
-     * @description whether to hide the loading icon in remote search
-     *     default: false,
-     */
-    hideLoading?: boolean;
-    teleported?: boolean;
-    /**
-     * @description whether to highlight first item in remote search suggestions by default
-     *     default: false,
-     */
-    highlightFirstItem?: boolean;
-    /**
-     * @description whether the width of the dropdown is the same as the input
-     *     default: false,
-     */
-    fitInputWidth?: boolean;
-    /**
-     * @description whether to show clear button
-     *     default: false,
-     */
-    clearable?: boolean;
-    /**
-     * @description whether to disable
-     *     default: false,
-     */
-    disabled?: boolean;
-    /**
-     * @description same as `name` in native input
-     */
-    name?: string;
-}
-export type AutocompleteEmits = typeof autocompleteEmits;

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

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

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

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

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

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

package/src/components/form/td-checkbox/composables/use-checkbox-disabled.d.ts

@@ -1,7 +0,0 @@
-import { CheckboxStatus } from './use-checkbox-status';
-import { CheckboxModel } from './use-checkbox-model';
-export declare const useCheckboxDisabled: ({ model, isChecked, }: Pick<CheckboxModel, "model"> & Pick<CheckboxStatus, "isChecked">) => {
-    isDisabled: import("@type-dom/signals").Computed<boolean>;
-    isLimitDisabled: import("@type-dom/signals").Computed<boolean>;
-};
-export type CheckboxDisabled = ReturnType<typeof useCheckboxDisabled>;

package/src/components/form/td-checkbox/composables/use-checkbox-disabled.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheckboxDisabled = 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_form_common_props_1 = require("../../td-form/hooks/use-form-common-props");
-const td_checkbox_const_1 = require("../td-checkbox.const");
-const useCheckboxDisabled = ({ model, isChecked, }) => {
-    const checkboxGroup = (0, framework_1.inject)(td_checkbox_const_1.checkboxGroupContextKey, undefined);
-    const isLimitDisabled = (0, signals_1.computed)(() => {
-        var _a, _b, _c, _d;
-        const max = (_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.max) === null || _a === void 0 ? void 0 : _a.get();
-        const min = (_b = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.min) === null || _b === void 0 ? void 0 : _b.get();
-        return ((!(0, utils_1.isUndefined)(max) &&
-            ((_c = model.get()) === null || _c === void 0 ? void 0 : _c.length) >= max &&
-            !isChecked.get()) ||
-            (!(0, utils_1.isUndefined)(min) &&
-                ((_d = model.get()) === null || _d === void 0 ? void 0 : _d.length) <= min &&
-                isChecked.get()));
-    });
-    const isDisabled = (0, use_form_common_props_1.useFormDisabled)((0, signals_1.computed)(() => { var _a; return ((_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled) === null || _a === void 0 ? void 0 : _a.get()) || isLimitDisabled.get(); }));
-    return {
-        isDisabled,
-        isLimitDisabled,
-    };
-};
-exports.useCheckboxDisabled = useCheckboxDisabled;

package/src/components/form/td-checkbox/composables/use-checkbox-event.d.ts

@@ -1,9 +0,0 @@
-import { useFormItemInputId } from '../../td-form/hooks/use-form-item';
-import { CheckboxProps } from '../td-checkbox.interface';
-import { CheckboxModel } from './use-checkbox-model';
-import { CheckboxStatus } from './use-checkbox-status';
-import { CheckboxDisabled } from './use-checkbox-disabled';
-export declare const useCheckboxEvent: (props: CheckboxProps, { model, isLimitExceeded, hasOwnLabel, isDisabled, isLabeledByFormItem, }: Pick<CheckboxModel, "model" | "isLimitExceeded"> & Pick<CheckboxStatus, "hasOwnLabel"> & Pick<CheckboxDisabled, "isDisabled"> & Pick<ReturnType<typeof useFormItemInputId>, "isLabeledByFormItem">) => {
-    handleChange: (e?: Event) => void;
-    onClickRoot: (e?: MouseEvent) => Promise<void>;
-};

package/src/components/form/td-checkbox/composables/use-checkbox-event.js

@@ -1,77 +0,0 @@
-"use strict";
-// import { computed, getCurrentInstance, inject, nextTick, watch } from 'vue'
-// import { useFormItem } from '@element-plus/components/form'
-// import { debugWarn } from '@element-plus/utils'
-// import { checkboxGroupContextKey } from '../constants'
-//
-// import type { useFormItemInputId } from '@element-plus/components/form'
-// import type { CheckboxProps } from '../checkbox'
-// import type {
-//   CheckboxDisabled,
-//   CheckboxModel,
-//   CheckboxStatus,
-// } from '../composables'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheckboxEvent = void 0;
-const tslib_1 = require("tslib");
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const utils_1 = require("@type-dom/utils");
-const use_form_item_1 = require("../../td-form/hooks/use-form-item");
-const event_1 = require("../../../../constants/event");
-const td_checkbox_const_1 = require("../td-checkbox.const");
-const useCheckboxEvent = (props, { model, isLimitExceeded, hasOwnLabel, isDisabled, isLabeledByFormItem, }) => {
-    const checkboxGroup = (0, framework_1.inject)(td_checkbox_const_1.checkboxGroupContextKey, undefined);
-    const { formItem } = (0, use_form_item_1.useFormItem)();
-    const { emit } = (0, framework_1.getCurrentInstance)();
-    function getLabeledValue(value) {
-        var _a, _b, _c, _d;
-        return [true, props.trueValue, props.trueLabel].includes(value)
-            ? (_b = (_a = props.trueValue) !== null && _a !== void 0 ? _a : props.trueLabel) !== null && _b !== void 0 ? _b : true
-            : (_d = (_c = props.falseValue) !== null && _c !== void 0 ? _c : props.falseLabel) !== null && _d !== void 0 ? _d : false;
-    }
-    function emitChangeEvent(checked, e) {
-        // console.warn('emitChangeEvent . checked is ', checked);
-        emit(event_1.CHANGE_EVENT, getLabeledValue(checked), e);
-    }
-    function handleChange(e) {
-        // console.warn('handleChange . ');
-        if (isLimitExceeded.get()) {
-            return;
-        }
-        if (isDisabled.get()) {
-            return;
-        } // add by me
-        const target = e === null || e === void 0 ? void 0 : e.target;
-        emit(event_1.CHANGE_EVENT, getLabeledValue(target.checked), e);
-    }
-    function onClickRoot(e) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            // console.warn('onClickRoot . ');
-            // console.warn('onClickRoot . model.get() is ', model.get());
-            if (isLimitExceeded.get())
-                return;
-            if (!hasOwnLabel.get() && !isDisabled.get() && isLabeledByFormItem.get()) {
-                // fix: https://github.com/element-plus/element-plus/issues/9981
-                const eventTargets = e === null || e === void 0 ? void 0 : e.composedPath();
-                const hasLabel = eventTargets === null || eventTargets === void 0 ? void 0 : eventTargets.some((item) => item.tagName === 'LABEL');
-                if (!hasLabel) {
-                    model.set(getLabeledValue([false, props.falseValue, props.falseLabel].includes(model.get())));
-                    yield (0, framework_1.nextTick)();
-                    emitChangeEvent(model.get(), e);
-                }
-            }
-        });
-    }
-    const validateEvent = (0, signals_1.computed)(() => (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.validateEvent) || props.validateEvent);
-    (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, () => {
-        if (validateEvent.get()) {
-            formItem === null || formItem === void 0 ? void 0 : formItem.validate('change').catch((err) => (0, utils_1.debugWarn)(err));
-        }
-    });
-    return {
-        handleChange,
-        onClickRoot,
-    };
-};
-exports.useCheckboxEvent = useCheckboxEvent;

package/src/components/form/td-checkbox/composables/use-checkbox-model.d.ts

@@ -1,7 +0,0 @@
-import { CheckboxProps } from '../td-checkbox.interface';
-export declare const useCheckboxModel: (props: CheckboxProps) => {
-    model: import("@type-dom/signals").Computed<any>;
-    isGroup: import("@type-dom/signals").Computed<boolean>;
-    isLimitExceeded: import("@type-dom/signals").Signal<boolean>;
-};
-export type CheckboxModel = ReturnType<typeof useCheckboxModel>;

package/src/components/form/td-checkbox/composables/use-checkbox-model.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheckboxModel = void 0;
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const utils_1 = require("@type-dom/utils");
-const event_1 = require("../../../../constants/event");
-const td_checkbox_const_1 = require("../td-checkbox.const");
-const useCheckboxModel = (props) => {
-    const selfModel = (0, signals_1.signal)(false);
-    const { emit } = (0, framework_1.getCurrentInstance)();
-    const checkboxGroup = (0, framework_1.inject)(td_checkbox_const_1.checkboxGroupContextKey, undefined);
-    // console.log('inject checkGroup is ', checkboxGroup);
-    const isGroup = (0, signals_1.computed)(() => (0, utils_1.isUndefined)(checkboxGroup) === false);
-    const isLimitExceeded = (0, signals_1.signal)(false);
-    const model = (0, signals_1.computed)(() => {
-        var _a, _b, _c;
-        // console.log('get model value isGroup is  ', isGroup.get());
-        return isGroup.get()
-            ? (_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.modelValue) === null || _a === void 0 ? void 0 : _a.get()
-            : // 这里的computed监听props.modelValue，与vuejs中的监听props.modelValue是不同的，
-                // 因为vuejs中的监听props.modelValue，当props.modelValue变化时就会促发。
-                // 而这里的computed监听，只有Signal类型的get/set才会触发
-                //   所以这里还是用 vModel.get的方式。
-                (_c = (_b = props.vModel) === null || _b === void 0 ? void 0 : _b.get()) !== null && _c !== void 0 ? _c : selfModel.get(); // : props.modelValue ?? selfModel.get();
-    }, (val) => {
-        var _a, _b;
-        // console.log('set model value is ', val);
-        if (isGroup.get() && (0, utils_1.isArray)(val)) {
-            isLimitExceeded.set(((_a = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.max) === null || _a === void 0 ? void 0 : _a.get()) !== undefined &&
-                val.length > checkboxGroup.max.get() &&
-                val.length > model.get().length);
-            isLimitExceeded.get() === false && ((_b = checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.changeEvent) === null || _b === void 0 ? void 0 : _b.call(checkboxGroup, val));
-        }
-        else {
-            emit(event_1.UPDATE_MODEL_EVENT, val);
-            selfModel.set(val);
-        }
-    });
-    return {
-        model,
-        isGroup,
-        isLimitExceeded,
-    };
-};
-exports.useCheckboxModel = useCheckboxModel;

package/src/components/form/td-checkbox/composables/use-checkbox-status.d.ts

@@ -1,12 +0,0 @@
-import { ISlots } from '@type-dom/framework';
-import { CheckboxProps } from '../td-checkbox.interface';
-import { CheckboxModel } from './use-checkbox-model';
-export declare const useCheckboxStatus: (props: CheckboxProps, slots: ISlots, { model }: Pick<CheckboxModel, "model">) => {
-    checkboxButtonSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
-    isChecked: import("@type-dom/signals").Computed<boolean>;
-    isFocused: import("@type-dom/signals").Signal<boolean>;
-    checkboxSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
-    hasOwnLabel: import("@type-dom/signals").Computed<boolean>;
-    actualValue: import("@type-dom/signals").Computed<string | number | boolean | object | undefined>;
-};
-export type CheckboxStatus = ReturnType<typeof useCheckboxStatus>;

package/src/components/form/td-checkbox/composables/use-checkbox-status.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheckboxStatus = void 0;
-const utils_1 = require("@type-dom/utils");
-const signals_1 = require("@type-dom/signals");
-const framework_1 = require("@type-dom/framework");
-const use_form_common_props_1 = require("../../td-form/hooks/use-form-common-props");
-const td_checkbox_const_1 = require("../td-checkbox.const");
-const useCheckboxStatus = (props, slots, { model }) => {
-    const checkboxGroup = (0, framework_1.inject)(td_checkbox_const_1.checkboxGroupContextKey, undefined);
-    const isFocused = (0, signals_1.signal)(false);
-    const actualValue = (0, signals_1.computed)(() => {
-        // In version 2.x, if there's no props.value, props.label will act as props.value
-        // In version 3.x, remove this computed value, use props.value instead.
-        if (!(0, utils_1.isPropAbsent)(props.value)) {
-            return props.value;
-        }
-        return props.label;
-    });
-    const isChecked = (0, signals_1.computed)(() => {
-        // console.warn('computed isChecked . ');
-        const value = model.get();
-        if ((0, utils_1.isBoolean)(value)) {
-            return value;
-        }
-        else if ((0, utils_1.isArray)(value)) {
-            // console.warn('isChecked is array . ');
-            if ((0, utils_1.isObject)(actualValue.get())) {
-                return value.map(signals_1.toRaw).some((o) => (0, utils_1.isEqual)(o, actualValue.get()));
-            }
-            else {
-                // console.warn('computed value is ', value, ' toRaw is ', toRaw);
-                return value.map(signals_1.toRaw).includes(actualValue.get());
-            }
-        }
-        else if (value !== null && value !== undefined) {
-            return value === (props === null || props === void 0 ? void 0 : props.trueValue) || value === (props === null || props === void 0 ? void 0 : props.trueLabel);
-        }
-        else {
-            return !!value;
-        }
-    });
-    const checkboxButtonSize = (0, use_form_common_props_1.useFormSize)(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.size, {
-        prop: true,
-    });
-    const checkboxSize = (0, use_form_common_props_1.useFormSize)(checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.size);
-    const hasOwnLabel = (0, signals_1.computed)(() => {
-        return !!slots.default || !(0, utils_1.isPropAbsent)(actualValue.get());
-    });
-    return {
-        checkboxButtonSize,
-        isChecked,
-        isFocused,
-        checkboxSize,
-        hasOwnLabel,
-        actualValue,
-    };
-};
-exports.useCheckboxStatus = useCheckboxStatus;

package/src/components/form/td-checkbox/composables/use-checkbox.d.ts

@@ -1,16 +0,0 @@
-import { ISlots } from '@type-dom/framework';
-import { CheckboxProps } from '../td-checkbox.interface';
-export declare const useCheckbox: (props: CheckboxProps, slots?: ISlots) => {
-    inputId: import("@type-dom/signals").Signal<string | undefined>;
-    isLabeledByFormItem: import("@type-dom/signals").Computed<boolean>;
-    isChecked: import("@type-dom/signals").Computed<boolean>;
-    isDisabled: import("@type-dom/signals").Computed<boolean>;
-    isFocused: import("@type-dom/signals").Signal<boolean>;
-    checkboxButtonSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
-    checkboxSize: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
-    hasOwnLabel: import("@type-dom/signals").Computed<boolean>;
-    model: import("@type-dom/signals").Computed<any>;
-    actualValue: import("@type-dom/signals").Computed<string | number | boolean | object | undefined>;
-    handleChange: (e?: Event) => void;
-    onClickRoot: (e?: MouseEvent) => Promise<void>;
-};

package/src/components/form/td-checkbox/composables/use-checkbox.js

@@ -1,85 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCheckbox = void 0;
-const utils_1 = require("@type-dom/utils");
-const use_form_item_1 = require("../../td-form/hooks/use-form-item");
-const use_checkbox_status_1 = require("./use-checkbox-status");
-const use_checkbox_model_1 = require("./use-checkbox-model");
-const use_checkbox_disabled_1 = require("./use-checkbox-disabled");
-const use_checkbox_event_1 = require("./use-checkbox-event");
-const use_deprecated_1 = require("../../../../hooks/use-deprecated");
-const signals_1 = require("@type-dom/signals");
-const useCheckbox = (props, slots = {}) => {
-    const { formItem: elFormItem } = (0, use_form_item_1.useFormItem)();
-    const { model, isGroup, isLimitExceeded } = (0, use_checkbox_model_1.useCheckboxModel)(props);
-    // console.log(
-    //   'isGroup is ',
-    //   isGroup.get(),
-    //   ' isLimitExceeded is ',
-    //   isLimitExceeded.get()
-    // );
-    const { isFocused, isChecked, checkboxButtonSize, checkboxSize, hasOwnLabel, actualValue, } = (0, use_checkbox_status_1.useCheckboxStatus)(props, slots, { model });
-    const { isDisabled } = (0, use_checkbox_disabled_1.useCheckboxDisabled)({ model, isChecked });
-    const { inputId, isLabeledByFormItem } = (0, use_form_item_1.useFormItemInputId)(props, {
-        formItemContext: elFormItem,
-        disableIdGeneration: hasOwnLabel,
-        disableIdManagement: isGroup,
-    });
-    const { handleChange, onClickRoot } = (0, use_checkbox_event_1.useCheckboxEvent)(props, {
-        model,
-        isLimitExceeded,
-        hasOwnLabel,
-        isDisabled,
-        isLabeledByFormItem,
-    });
-    const setStoreValue = () => {
-        function addToStore() {
-            var _a, _b;
-            if ((0, utils_1.isArray)(model.get()) &&
-                !model.get().includes(actualValue.get())) {
-                model.get().push(actualValue.get());
-            }
-            else {
-                model.set((_b = (_a = props.trueValue) !== null && _a !== void 0 ? _a : props.trueLabel) !== null && _b !== void 0 ? _b : true);
-            }
-        }
-        props.checked && addToStore();
-    };
-    setStoreValue();
-    (0, use_deprecated_1.useDeprecated)({
-        from: 'label act as value',
-        replacement: 'value',
-        version: '3.0.0',
-        scope: 'el-checkbox',
-        ref: 'https://element-plus.org/en-US/component/checkbox.html',
-    }, (0, signals_1.computed)(() => isGroup.get() && (0, utils_1.isPropAbsent)(props.value)));
-    (0, use_deprecated_1.useDeprecated)({
-        from: 'true-label',
-        replacement: 'true-value',
-        version: '3.0.0',
-        scope: 'el-checkbox',
-        ref: 'https://element-plus.org/en-US/component/checkbox.html',
-    }, (0, signals_1.computed)(() => !!props.trueLabel));
-    (0, use_deprecated_1.useDeprecated)({
-        from: 'false-label',
-        replacement: 'false-value',
-        version: '3.0.0',
-        scope: 'el-checkbox',
-        ref: 'https://element-plus.org/en-US/component/checkbox.html',
-    }, (0, signals_1.computed)(() => !!props.falseLabel));
-    return {
-        inputId,
-        isLabeledByFormItem,
-        isChecked,
-        isDisabled,
-        isFocused,
-        checkboxButtonSize,
-        checkboxSize,
-        hasOwnLabel,
-        model,
-        actualValue,
-        handleChange,
-        onClickRoot,
-    };
-};
-exports.useCheckbox = useCheckbox;

package/src/components/form/td-checkbox/style/css.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style/css';
-import '../../../../theme-chalk/el-checkbox.css';

package/src/components/form/td-checkbox/style/css.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("../../../../theme-chalk/el-checkbox.css");

package/src/components/form/td-checkbox/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../base/style';
-import '../../../../theme-chalk/checkbox.scss';

package/src/components/form/td-checkbox/style/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style");
-require("../../../../theme-chalk/checkbox.scss");

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

@@ -1,10 +0,0 @@
-import { TypeHtml } from '@type-dom/framework';
-import { ITdCheckbox, CheckboxProps } from './td-checkbox.interface';
-import './style/index';
-export declare class TdCheckbox extends TypeHtml implements ITdCheckbox {
-    className: 'TdCheckbox';
-    dom?: HTMLElement;
-    props: CheckboxProps;
-    constructor(params?: CheckboxProps);
-    setup(): void;
-}

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

@@ -1,151 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdCheckbox = 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 use_checkbox_1 = require("./composables/use-checkbox");
-const td_checkbox_const_1 = require("./td-checkbox.const");
-require("./style/index");
-class TdCheckbox extends framework_1.TypeHtml {
-    constructor(params = {}) {
-        super(); // label | span
-        this.className = 'TdCheckbox';
-        this.attr.addObj({
-            name: 'td-checkbox',
-        });
-        this.assignProps(td_checkbox_const_1.checkboxProps);
-        this.addEmits(td_checkbox_const_1.checkboxEmits);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        var _a;
-        // console.warn('TdCheckbox setup');
-        const props = this.props;
-        const slots = (0, framework_1.useSlots)();
-        const { inputId, isLabeledByFormItem, isChecked, isDisabled, isFocused, checkboxSize, hasOwnLabel, model, actualValue, handleChange, onClickRoot, } = (0, use_checkbox_1.useCheckbox)(props, slots);
-        // console.log('hasOwnLabel is ', hasOwnLabel);
-        this.assignProps({
-            nodeName: !hasOwnLabel && isLabeledByFormItem ? 'span' : 'label',
-        });
-        const ns = (0, use_namespace_1.useNamespace)('checkbox');
-        // console.warn('isChecked is ', isChecked);
-        const compKls = (0, signals_1.computed)(() => [
-            ns.b(),
-            ns.m(checkboxSize.get()),
-            ns.is('disabled', isDisabled.get()),
-            ns.is('checked', isChecked.get()),
-            ns.is('bordered', props.border),
-        ]);
-        // console.warn('compKls is ', compKls);
-        this.attr.addClass(compKls);
-        // watch(compKls, (newValue, oldValue) => {
-        //   console.warn('checkbox watch compKls', newValue);
-        // });
-        const spanKls = (0, signals_1.computed)(() => {
-            var _a;
-            return [
-                ns.e('input'),
-                ns.is('disabled', isDisabled.get()),
-                ns.is('checked', isChecked.get()),
-                ns.is('indeterminate', (_a = props.indeterminate) === null || _a === void 0 ? void 0 : _a.get()),
-                ns.is('focus', isFocused.get()),
-            ];
-        });
-        // console.warn('spanKls is ', spanKls);
-        this.addChild(new framework_1.Span({
-            name: 'td-checkbox-input-span',
-            class: spanKls,
-            slot: [
-                new framework_1.Input({
-                    name: 'original',
-                    vModel: model,
-                    disabled: isDisabled,
-                    class: ns.e('original'),
-                    attrObj: {
-                        id: inputId.get(),
-                        type: 'checkbox',
-                        value: actualValue.get(),
-                        checked: isChecked.get(),
-                        intermediate: (_a = props.indeterminate) === null || _a === void 0 ? void 0 : _a.get(),
-                    },
-                    events: {
-                        click: (ev) => {
-                            // console.warn('td-checkbox input click . ');
-                            ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-                        },
-                        change: (ev) => {
-                            // console.warn('td-checkbox input change . ');
-                            handleChange(ev);
-                            ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-                        },
-                        focus: (evt) => {
-                            isFocused.set(true);
-                        },
-                        blur: (evt) => {
-                            isFocused.set(false);
-                        },
-                    },
-                }),
-                new framework_1.Span({
-                    name: 'inner',
-                    attrObj: {
-                        class: ns.e('inner'),
-                    },
-                }),
-            ],
-        }));
-        if (hasOwnLabel) {
-            const labelSpan = new framework_1.Span({
-                name: 'label',
-                attrObj: {
-                    class: ns.e('label'),
-                },
-                // styleObj: deepClone($checkboxLabelStyle),
-            });
-            if (props === null || props === void 0 ? void 0 : props.slot) {
-                labelSpan.slotChildren(props.slot);
-            }
-            else {
-                labelSpan.slotChildren(String(props.label || ''));
-            }
-            this.addChild(labelSpan);
-        }
-        this.addEvents({
-            click: onClickRoot,
-        });
-        // add by me todo why should add ???
-        // console.warn('then this.addEmits . ');
-        this.addEmits({
-            change: (newValue) => {
-                // console.warn('change emit , newValue is ', newValue);
-                // 应该根据newValue是否为选中状态判断来看是否要过滤。
-                const selected = model.get();
-                // todo 数组 还是 值
-                if ((0, utils_1.isArray)(selected)) {
-                    // model.set(
-                    //   selected.includes(actualValue.get())
-                    //     ? selected.filter((item) => {
-                    //         if (newValue) {
-                    //           return true;
-                    //         } else {
-                    //           return item !== actualValue.get();
-                    //         }
-                    //       })
-                    //     : newValue ? [...selected, actualValue.get()] : [...selected]
-                    // );
-                    const value = actualValue.get();
-                    const shouldAdd = !selected.includes(value);
-                    model.set(shouldAdd
-                        ? newValue ? [...selected, value] : [...selected]
-                        : selected.filter(item => newValue || item !== value));
-                }
-                else {
-                    model.set(newValue);
-                }
-            },
-        });
-    }
-}
-exports.TdCheckbox = TdCheckbox;