@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,28 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$checkboxButtonInnerStyle = exports.$checkboxButtonOriginalStyle = exports.$checkboxButtonStyle = exports.$checkboxButton = void 0;
+exports.$checkboxButtonOriginalStyle = exports.$checkboxButtonInnerHoverStyle = exports.$checkboxButtonInnerStyle = exports.$checkboxButtonStyle = exports.$checkboxButton = void 0;
+exports.useCheckboxButtonStyle = useCheckboxButtonStyle;
+exports.useCheckedStyle = useCheckedStyle;
+exports.useDisabledStyle = useDisabledStyle;
+exports.useFocusStyle = useFocusStyle;
+exports.useSize = useSize;
 const var_1 = require("../../../styles/var");
 const transition_1 = require("../../../styles/transition");
 const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
+const td_button_style_1 = require("../../basic/td-button/td-button.style");
 exports.$checkboxButton = {
     // 'checked-bg-color': getCssVar('color-primary'),
-    checkedBgColor: var_1.$colors.primary.base,
+    checkedBgColor: var_1.$colorPrimary,
     // 'checked-text-color': getCssVar('color-white'),
-    checkedTextColor: var_1.$colors.white,
+    checkedTextColor: var_1.$colorWhite,
     // 'checked-border-color': getCssVar('color-primary'),
-    checkedBorderColor: var_1.$colors.primary.base,
+    checkedBorderColor: var_1.$colorPrimary,
 };
 exports.$checkboxButtonStyle = {
     position: 'relative',
     display: 'inline-block',
 };
-exports.$checkboxButtonOriginalStyle = {
-    opacity: 0,
-    outline: 'none',
-    position: 'absolute',
-    margin: 0,
-    zIndex: -1,
-};
 exports.$checkboxButtonInnerStyle = {
     display: 'inline-block',
     lineHeight: 1,
@@ -37,13 +36,14 @@ exports.$checkboxButtonInnerStyle = {
     // ),
     background: var_1.$button.bgColor,
     // border: getCssVar('border'),
+    border: var_1.$border,
     borderLeftColor: 'transparent',
     // color: var
     //   #{getCssVarName('button-text-color')},
     //   map.get($button, 'text-color',
     // ),
     color: var_1.$button.textColor,
-    // -webkit-appearance: 'none',
+    '-webkit-appearance': 'none',
     textAlign: 'center',
     boxSizing: 'border-box',
     outline: 'none',
@@ -53,3 +53,81 @@ exports.$checkboxButtonInnerStyle = {
     transition: transition_1.$transition.all,
     userSelect: 'none',
 };
+exports.$checkboxButtonInnerHoverStyle = {
+    color: var_1.$colorPrimary,
+};
+exports.$checkboxButtonOriginalStyle = {
+    opacity: 0,
+    outline: 'none',
+    position: 'absolute',
+    margin: 0,
+    zIndex: -1,
+};
+function useCheckboxButtonStyle(params) {
+    useCheckedStyle(params);
+    useDisabledStyle(params);
+    useSize(params);
+    // const paddingVertical = parseInt($buttonPaddingVertical.default) - parseInt($buttonBorderWidth) + 'px';
+    // const paddingHorizontal = parseInt($buttonPaddingHorizontal.default) - parseInt($buttonBorderWidth) + 'px';
+    // const fontSize = $fontSizes.default;
+    // $checkboxButtonInnerStyle = Object.assign($checkboxButtonInnerStyle, buttonSize(paddingVertical, paddingHorizontal, fontSize, 0))
+}
+function useCheckedStyle(params) {
+    const checked = params.checked;
+    if (checked) {
+        exports.$checkboxButtonInnerStyle.color = exports.$checkboxButton.checkedTextColor;
+        exports.$checkboxButtonInnerStyle.backgroundColor = exports.$checkboxButton.checkedBgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = exports.$checkboxButton.checkedBorderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow =
+            '-1px 0 0 0 ' + var_1.$colors.primary['light-7'];
+        //   todo 如果是第一个子节点 则添加 border-left-color: getCssVar('checkbox-button-checked-border-color');
+        //   $checkboxButtonInnerStyle.borderLeftColor = $checkboxButton.checkedBorderColor;
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.color = var_1.$button.textColor;
+        exports.$checkboxButtonInnerStyle.backgroundColor = var_1.$button.bgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = var_1.$button.borderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useDisabledStyle(params) {
+    const disabled = params.disabled;
+    if (disabled) {
+        exports.$checkboxButtonInnerStyle.color = var_1.$disabled.textColor;
+        exports.$checkboxButtonInnerStyle.cursor = 'not-allowed';
+        exports.$checkboxButtonInnerStyle.backgroundImage = 'none';
+        exports.$checkboxButtonInnerStyle.backgroundColor = var_1.$button.disabled.bgColor;
+        exports.$checkboxButtonInnerStyle.borderColor = var_1.$button.disabled.borderColor;
+        exports.$checkboxButtonInnerStyle.boxShadow = 'none';
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.color = var_1.$button.textColor;
+        exports.$checkboxButtonInnerStyle.cursor = 'pointer';
+        exports.$checkboxButtonInnerStyle.backgroundImage = undefined;
+        exports.$checkboxButtonInnerStyle.background = var_1.$button.bgColor;
+        exports.$checkboxButtonInnerStyle.border = var_1.$border;
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useFocusStyle(params) {
+    const focus = false;
+    if (focus) {
+        exports.$checkboxButtonInnerStyle.borderColor = exports.$checkboxButton.checkedBorderColor;
+    }
+    else {
+        exports.$checkboxButtonInnerStyle.boxShadow = undefined;
+    }
+}
+function useSize(params) {
+    const size = params.size || 'default';
+    //         @include button-size(
+    //           map.get($button-padding-vertical, $size) - $button-border-width,
+    //           map.get($button-padding-horizontal, $size) - $button-border-width,
+    //           map.get($button-font-size, $size),
+    //           0
+    //         );
+    const paddingVertical = td_button_style_1.$buttonPaddingVertical[size];
+    const paddingHorizontal = td_button_style_1.$buttonPaddingHorizontal[size];
+    const sizeStyle = (0, td_button_style_1.buttonSize)(paddingVertical, paddingHorizontal, var_1.$fontSizes[size], 0);
+    exports.$checkboxButtonInnerStyle = Object.assign(exports.$checkboxButtonInnerStyle, sizeStyle);
+}

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

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

package/src/components/form/td-checkbox-group/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-group/style/index.d.ts

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

package/src/components/form/td-checkbox-group/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-group/td-checkbox-group.class.d.ts

@@ -1,7 +1,10 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeHtml } from '@type-dom/framework';
 import { ITdCheckboxGroup, ITdCheckboxGroupConfig } from './td-checkbox-group.interface';
-export declare class TdCheckboxGroup extends UI implements ITdCheckboxGroup {
+import './style/index';
+export declare class TdCheckboxGroup extends TypeHtml implements ITdCheckboxGroup {
     className: 'TdCheckboxGroup';
+    dom?: HTMLElement;
     props: ITdCheckboxGroupConfig;
     constructor(params?: ITdCheckboxGroupConfig);
+    setup(): void;
 }

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

@@ -1,20 +1,80 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCheckboxGroup = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_checkbox_style_1 = require("../td-checkbox/td-checkbox.style");
-class TdCheckboxGroup extends ui_abstract_1.UI {
+const tslib_1 = require("tslib");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const event_1 = require("../../../constants/event");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_checkbox_const_1 = require("../td-checkbox/td-checkbox.const");
+const use_form_item_1 = require("../td-form/hooks/use-form-item");
+const td_checkbox_group_const_1 = require("./td-checkbox-group.const");
+require("./style/index");
+class TdCheckboxGroup extends framework_1.TypeHtml {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdCheckboxGroup';
+        this.assignProps(td_checkbox_group_const_1.checkboxGroupProps);
+        this.addEmits(td_checkbox_group_const_1.checkboxGroupEmits);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('checkbox');
+        const { formItem } = (0, use_form_item_1.useFormItem)();
+        const { inputId: groupId, isLabeledByFormItem } = (0, use_form_item_1.useFormItemInputId)(props, {
+            formItemContext: formItem,
+        });
+        this.assignProps({
+            nodeName: props.tag,
+        });
         this.attr.addObj({
+            id: groupId.get(),
             role: 'group',
-            // ariaLabel: !config.isLabeledByFormItem ? config?.ariaLabel || 'checkbox-group' : undefined,
-            // aria-labelledby="isLabeledByFormItem ? formItem?.labelId : undefined"
+            class: ns.b('group'),
+            ariaLabel: !isLabeledByFormItem
+                ? props.ariaLabel || 'checkbox-group'
+                : undefined,
+            ariaLabelledby: isLabeledByFormItem ? formItem === null || formItem === void 0 ? void 0 : formItem.labelId : undefined,
         });
-        this.style.addObj(td_checkbox_style_1.$checkboxGroupStyle);
-        this.addChild(this.getSlotNode());
-        this.props = this.useParams(params);
+        this.slotChildren(props.slot);
+        const changeEvent = (value) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            console.warn('td-check-group changeEvent, value is ', value);
+            this.emit(event_1.UPDATE_MODEL_EVENT, value);
+            yield (0, framework_1.nextTick)();
+            this.emit('change', value);
+        });
+        const modelValue = (0, signals_1.computed)({
+            get() {
+                var _a;
+                // return props.modelValue; // 无法触发监听
+                return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get();
+            },
+            set(val) {
+                console.warn('modelValue', val);
+                changeEvent(val);
+            },
+        });
+        console.log('then provide checkboxGroupContext . ');
+        this.provide(td_checkbox_const_1.checkboxGroupContextKey, Object.assign(Object.assign({}, (0, utils_1.pick)((0, signals_1.toRefs)(props), [
+            'size',
+            'min',
+            'max',
+            'disabled',
+            'validateEvent',
+            'fill',
+            'textColor',
+        ])), { modelValue,
+            changeEvent }));
+        if (props.vModel) {
+            (0, signals_1.watch)(() => { var _a; return (_a = props.vModel) === null || _a === void 0 ? void 0 : _a.get(); }, // props.modelValue 无法促发监听
+            () => {
+                if (props.validateEvent) {
+                    formItem === null || formItem === void 0 ? void 0 : formItem.validate('change').catch((err) => (0, utils_1.debugWarn)(err));
+                }
+            });
+        }
     }
 }
 exports.TdCheckboxGroup = TdCheckboxGroup;

package/src/components/form/td-checkbox-group/td-checkbox-group.const.d.ts

@@ -0,0 +1,9 @@
+import { CheckboxValueType } from '../td-checkbox/td-checkbox.interface';
+import { ITdCheckboxGroupConfig } from './td-checkbox-group.interface';
+import { CheckboxGroupValueType } from './td-checkbox-group.interface';
+export declare const checkboxGroupProps: ITdCheckboxGroupConfig;
+export declare const checkboxGroupEmits: {
+    "update:modelValue": (val: CheckboxGroupValueType) => boolean;
+    change: (val: CheckboxValueType[]) => boolean;
+};
+export type CheckboxGroupEmits = typeof checkboxGroupEmits;

package/src/components/form/td-checkbox-group/td-checkbox-group.const.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxGroupEmits = exports.checkboxGroupProps = void 0;
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+exports.checkboxGroupProps = {
+    modelValue: [],
+    tag: 'div',
+    validateEvent: true,
+    // ...useAriaProps(['ariaLabel']),
+};
+exports.checkboxGroupEmits = {
+    [event_1.UPDATE_MODEL_EVENT]: (val) => (0, utils_1.isArray)(val),
+    change: (val) => (0, utils_1.isArray)(val),
+};

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

@@ -1,14 +1,17 @@
-import { IPrimitive } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { ISize } from '../../../styles/size';
-export interface ITdCheckboxGroup extends IUI {
+import { TypeProps, ITypeHtml } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
+import { TdCheckbox } from '../td-checkbox/td-checkbox.class';
+import { CheckboxValueType } from '../td-checkbox/td-checkbox.interface';
+import { TdCheckboxButton } from '../td-checkbox-button/td-checkbox-button.class';
+export interface ITdCheckboxGroup extends ITypeHtml {
     className: 'TdCheckboxGroup';
 }
-export interface ITdCheckboxGroupConfig extends IUIConfig {
+export type CheckboxGroupValueType = Exclude<CheckboxValueType, boolean>[];
+export interface ITdCheckboxGroupConfig extends TypeProps {
     /**
      * @description binding value
      */
-    modelValue?: IPrimitive[];
+    modelValue?: (string | boolean | number | undefined | object)[];
     /**
      * @description whether the nesting checkboxes are disabled
      */
@@ -24,7 +27,7 @@ export interface ITdCheckboxGroupConfig extends IUIConfig {
     /**
      * @description size of checkbox
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description label for screen reader
      */
@@ -47,4 +50,5 @@ export interface ITdCheckboxGroupConfig extends IUIConfig {
      *     default: true,
      */
     validateEvent?: boolean;
+    slot?: (TdCheckbox | TdCheckboxButton)[];
 }