@type-dom/ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,49 @@
+"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)({
+        get() {
+            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();
+        },
+        set(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,6 +1,12 @@
-import { ITdCheckboxConfig } from '../td-checkbox.interface';
-export declare const useCheckboxStatus: (props?: ITdCheckboxConfig) => {
-    isFocused: boolean;
-    hasOwnLabel: boolean;
-    actualValue: string | number | boolean | object | undefined;
+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

@@ -2,51 +2,57 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCheckboxStatus = void 0;
 const utils_1 = require("@type-dom/utils");
-const useCheckboxStatus = (props) => {
-    // const checkboxGroup = inject(checkboxGroupContextKey, undefined)
-    const isFocused = false;
-    const actualValue = (() => {
+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 === null || props === void 0 ? void 0 : props.value)) {
-            return props === null || props === void 0 ? void 0 : props.value;
+        if (!(0, utils_1.isPropAbsent)(props.value)) {
+            return props.value;
         }
-        return props === null || props === void 0 ? void 0 : props.label;
-    })();
-    // const isChecked = computed<boolean>(() => {
-    //   const value = model.value
-    //   if (isBoolean(value)) {
-    //     return value
-    //   } else if (isArray(value)) {
-    //     if (isObject(actualValue.value)) {
-    //       return value.map(toRaw).some((o) => isEqual(o, actualValue.value))
-    //     } else {
-    //       return value.map(toRaw).includes(actualValue.value)
-    //     }
-    //   } else if (value !== null && value !== undefined) {
-    //     return value === props.trueValue || value === props.trueLabel
-    //   } else {
-    //     return !!value
-    //   }
-    // })
-    //
-    // const checkboxButtonSize = useFormSize(
-    //   computed(() => checkboxGroup?.size?.value),
-    //   {
-    //     prop: true,
-    //   }
-    // )
-    // const checkboxSize = useFormSize(computed(() => checkboxGroup?.size?.value))
-    //
-    const hasOwnLabel = !!(props === null || props === void 0 ? void 0 : props.slot) || !(0, utils_1.isPropAbsent)(actualValue);
+        return props.label;
+    });
+    const isChecked = (0, signals_1.computed)(() => {
+        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 ', signals_1.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,
+        checkboxButtonSize,
+        isChecked,
         isFocused,
-        // checkboxSize,
+        checkboxSize,
         hasOwnLabel,
         actualValue,
     };
 };
 exports.useCheckboxStatus = useCheckboxStatus;
-// export type CheckboxStatus = ReturnType<typeof useCheckboxStatus>

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

@@ -1,6 +1,16 @@
-import { ITdCheckboxConfig } from '../td-checkbox.interface';
-export declare const useCheckbox: (props?: ITdCheckboxConfig) => {
-    isFocused: boolean;
-    hasOwnLabel: boolean;
-    actualValue: string | number | boolean | object | undefined;
+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<unknown>;
+    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 +1,80 @@
 "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 useCheckbox = (props) => {
-    // const { formItem: elFormItem } = useFormItem()
-    // const { model, isGroup, isLimitExceeded } = useCheckboxModel(props)
-    const { isFocused, 
-    // isChecked,
-    // checkboxButtonSize,
-    // checkboxSize,
-    hasOwnLabel, actualValue, } = (0, use_checkbox_status_1.useCheckboxStatus)(props);
-    // const { isDisabled } = useCheckboxDisabled({ model, isChecked });
-    // const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
-    //   formItemContext: elFormItem,
-    //   disableIdGeneration: hasOwnLabel,
-    //   disableIdManagement: isGroup,
-    // })
-    // const { handleChange, onClickRoot } = useCheckboxEvent(props, {
-    //   model,
-    //   isLimitExceeded,
-    //   hasOwnLabel,
-    //   isDisabled,
-    //   isLabeledByFormItem,
-    // })
-    //
-    // const setStoreValue = () => {
-    //   function addToStore() {
-    //     if (isArray(model.value) && !model.value.includes(actualValue.value)) {
-    //       model.value.push(actualValue.value)
-    //     } else {
-    //       model.value = props.trueValue ?? props.trueLabel ?? true
-    //     }
-    //   }
-    //   props.checked && addToStore()
-    // }
-    //
-    // setStoreValue()
-    // 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',
-    //   },
-    //   computed(() => isGroup.value && isPropAbsent(props.value))
-    // )
-    //
-    // useDeprecated(
-    //   {
-    //     from: 'true-label',
-    //     replacement: 'true-value',
-    //     version: '3.0.0',
-    //     scope: 'el-checkbox',
-    //     ref: 'https://element-plus.org/en-US/component/checkbox.html',
-    //   },
-    //   computed(() => !!props.trueLabel)
-    // )
-    // useDeprecated(
-    //   {
-    //     from: 'false-label',
-    //     replacement: 'false-value',
-    //     version: '3.0.0',
-    //     scope: 'el-checkbox',
-    //     ref: 'https://element-plus.org/en-US/component/checkbox.html',
-    //   },
-    //   computed(() => !!props.falseLabel)
-    // )
+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,
+        inputId,
+        isLabeledByFormItem,
+        isChecked,
+        isDisabled,
         isFocused,
-        // checkboxButtonSize,
-        // checkboxSize,
+        checkboxButtonSize,
+        checkboxSize,
         hasOwnLabel,
-        // model,
+        model,
         actualValue,
-        // handleChange,
-        // onClickRoot,
+        handleChange,
+        onClickRoot,
     };
 };
 exports.useCheckbox = useCheckbox;

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

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

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

@@ -0,0 +1,4 @@
+"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

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

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

@@ -0,0 +1,4 @@
+"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,28 +1,10 @@
 import { TypeHtml } from '@type-dom/framework';
-import { ITdCheckbox, ITdCheckboxConfig } from './td-checkbox.interface';
-import { ISize } from '../../../styles';
+import { ITdCheckbox, CheckboxProps } from './td-checkbox.interface';
+import './style/index';
 export declare class TdCheckbox extends TypeHtml implements ITdCheckbox {
     className: 'TdCheckbox';
-    nodeName: string;
-    dom: HTMLElement;
-    props: ITdCheckboxConfig;
-    private isFocused?;
-    private isLimitExceeded?;
-    private actualValue?;
-    private intermediate?;
-    private hasOwnLabel?;
-    private isDisabled?;
-    private isLabeledByFormItem?;
-    private model?;
-    constructor(params?: ITdCheckboxConfig);
-    get checkedValue(): boolean | undefined;
-    mounted(): void;
-    handleChange(ev?: InputEvent): void;
-    onClickRoot(e: MouseEvent): Promise<void>;
-    getLabeledValue(value: string | number | boolean): string | number | boolean;
-    emitChangeEvent(checked: string | number | boolean, e: InputEvent | MouseEvent): void;
-    setChecked(checked?: number | string | boolean): void;
-    setDisabled(disabled: boolean): void;
-    setIndeterminate(indeterminate: boolean): void;
-    setSize(size: ISize): void;
+    dom?: HTMLElement;
+    props: CheckboxProps;
+    constructor(params?: CheckboxProps);
+    setup(): void;
 }