@uzum-tech/ui 0.1.1 → 1.0.0

package/es/checkbox/src/Checkbox.js

@@ -1,26 +1,15 @@
-import { h, defineComponent, computed, inject, ref, toRef, watchEffect } from 'vue';
-import { useMergedState, useMemo } from 'vooks';
+import { h, defineComponent, computed, watchEffect } from 'vue';
 import { createId } from 'seemly';
 import { on } from 'evtd';
-import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
-import { UIconSwitchTransition } from '../../_internal';
-import { call, createKey, warnOnce, resolveWrappedSlot } from '../../_utils';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { UIconSwitchTransition, checkboxBaseProps, useCheckbox } from '../../_internal';
+import { createKey, warnOnce, resolveWrappedSlot } from '../../_utils';
 import { checkboxLight } from '../styles';
 import CheckMark from './CheckMark';
 import LineMark from './LineMark';
-import { checkboxGroupInjectionKey } from './CheckboxGroup';
 import style from './styles/index.cssr';
 import { useRtl } from '../../_mixins/use-rtl';
-export const checkboxProps = Object.assign(Object.assign({}, useTheme.props), { size: String, checked: {
-        type: [Boolean, String, Number],
-        default: undefined
-    }, defaultChecked: {
-        type: [Boolean, String, Number],
-        default: false
-    }, value: [String, Number], disabled: {
-        type: Boolean,
-        default: undefined
-    }, indeterminate: Boolean, label: String, description: String, position: {
+export const checkboxProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), checkboxBaseProps), { indeterminate: Boolean, label: String, description: String, position: {
         type: String,
         default: 'left'
     }, ripple: {
@@ -29,17 +18,9 @@ export const checkboxProps = Object.assign(Object.assign({}, useTheme.props), {
     }, focusable: {
         type: Boolean,
         default: false
-    }, checkedValue: {
-        type: [Boolean, String, Number],
-        default: true
-    }, uncheckedValue: {
-        type: [Boolean, String, Number],
-        default: false
-    }, 'onUpdate:checked': [Function, Array], onUpdateChecked: [Function, Array], 
+    }, 
     // private
-    privateInsideTable: Boolean, 
-    // deprecated
-    onChange: [Function, Array] });
+    privateInsideTable: Boolean });
 export default defineComponent({
     name: 'Checkbox',
     props: checkboxProps,
@@ -51,139 +32,32 @@ export default defineComponent({
                 }
             });
         }
-        const selfRef = ref(null);
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
-        const formItem = useFormItem(props, {
-            mergedSize(UFormItem) {
-                const { size } = props;
-                if (size !== undefined)
-                    return size;
-                if (UCheckboxGroup) {
-                    const { value: mergedSize } = UCheckboxGroup.mergedSizeRef;
-                    if (mergedSize !== undefined) {
-                        return mergedSize;
-                    }
-                }
-                if (UFormItem) {
-                    const { mergedSize } = UFormItem;
-                    if (mergedSize !== undefined)
-                        return mergedSize.value;
-                }
-                return 'medium';
-            },
-            mergedDisabled(UFormItem) {
-                const { disabled } = props;
-                if (disabled !== undefined)
-                    return disabled;
-                if (UCheckboxGroup) {
-                    if (UCheckboxGroup.disabledRef.value)
-                        return true;
-                    const { maxRef: { value: max }, checkedCountRef } = UCheckboxGroup;
-                    if (max !== undefined &&
-                        checkedCountRef.value >= max &&
-                        !renderedCheckedRef.value) {
-                        return true;
-                    }
-                    const { minRef: { value: min } } = UCheckboxGroup;
-                    if (min !== undefined &&
-                        checkedCountRef.value <= min &&
-                        renderedCheckedRef.value) {
-                        return true;
-                    }
-                }
-                if (UFormItem) {
-                    return UFormItem.disabled.value;
-                }
-                return false;
-            }
-        });
-        const { mergedDisabledRef, mergedSizeRef } = formItem;
-        const UCheckboxGroup = inject(checkboxGroupInjectionKey, null);
-        const uncontrolledCheckedRef = ref(props.defaultChecked);
-        const controlledCheckedRef = toRef(props, 'checked');
-        const mergedCheckedRef = useMergedState(controlledCheckedRef, uncontrolledCheckedRef);
-        const renderedCheckedRef = useMemo(() => {
-            if (UCheckboxGroup) {
-                const groupValueSet = UCheckboxGroup.valueSetRef.value;
-                if (groupValueSet && props.value !== undefined) {
-                    return groupValueSet.has(props.value);
-                }
-                return false;
-            }
-            else {
-                return mergedCheckedRef.value === props.checkedValue;
-            }
-        });
+        const checkbox = useCheckbox(props);
         const themeRef = useTheme('Checkbox', '-checkbox', style, checkboxLight, props, mergedClsPrefixRef);
-        function toggle(e) {
-            if (UCheckboxGroup && props.value !== undefined) {
-                UCheckboxGroup.toggleCheckbox(!renderedCheckedRef.value, props.value);
-            }
-            else {
-                const { onChange, 'onUpdate:checked': _onUpdateCheck, onUpdateChecked } = props;
-                const { nTriggerFormInput, nTriggerFormChange } = formItem;
-                const nextChecked = renderedCheckedRef.value
-                    ? props.uncheckedValue
-                    : props.checkedValue;
-                if (_onUpdateCheck) {
-                    call(_onUpdateCheck, nextChecked, e);
-                }
-                if (onUpdateChecked) {
-                    call(onUpdateChecked, nextChecked, e);
-                }
-                if (onChange)
-                    call(onChange, nextChecked, e); // deprecated
-                nTriggerFormInput();
-                nTriggerFormChange();
-                uncontrolledCheckedRef.value = nextChecked;
-            }
-        }
-        function handleClick(e) {
-            if (!mergedDisabledRef.value) {
-                toggle(e);
-            }
-        }
-        function handleKeyUp(e) {
-            if (mergedDisabledRef.value)
-                return;
-            switch (e.key) {
-                case ' ':
-                case 'Enter':
-                    toggle(e);
-            }
-        }
-        function handleKeyDown(e) {
-            switch (e.key) {
-                case ' ':
-                    e.preventDefault();
-            }
-        }
-        const exposedMethods = {
-            focus: () => {
-                var _a;
-                (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.focus();
-            },
-            blur: () => {
-                var _a;
-                (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.blur();
-            }
-        };
         const rtlEnabledRef = useRtl('Checkbox', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
-            const { value: mergedSize } = mergedSizeRef;
-            const { common: { cubicBezierEaseInOut }, self: { borderRadiusSmall, borderRadiusLarge, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderHover, borderFocus, borderDisabled, borderChecked, boxShadowHover, boxShadowFocus, boxShadowActive, boxShadowHoverChecked, boxShadowFocusChecked, boxShadowActiveChecked, textColor, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, labelLineHeight, labelFontWeight, [createKey('fontSize', mergedSize)]: fontSize, [createKey('size', mergedSize)]: size } } = themeRef.value;
+            const { value: mergedSize } = checkbox.mergedSize;
+            const { common: { cubicBezierEaseInOut }, self: { color, colorHover, colorActive, colorFocus, colorChecked, colorHoverChecked, colorFocusChecked, colorActiveChecked, colorDisabled, checkMarkColor, checkMarkColorHover, checkMarkColorActive, checkMarkColorFocus, checkMarkColorDisabled, border, borderHover, borderFocus, borderActive, borderDisabled, borderChecked, borderHoverChecked, borderFocusChecked, borderActiveChecked, boxShadowHover, boxShadowFocus, boxShadowActive, boxShadowHoverChecked, boxShadowFocusChecked, boxShadowActiveChecked, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, fontWeight, descriptionTextColor, descriptionTextColorDisabled, [createKey('borderRadius', mergedSize)]: borderRadius, [createKey('size', mergedSize)]: size, [createKey('fontSize', mergedSize)]: fontSize, [createKey('lineHeight', mergedSize)]: lineHeight } } = themeRef.value;
             return {
-                '--u-label-line-height': labelLineHeight,
-                '--u-label-font-weight': labelFontWeight,
-                '--u-size': size,
                 '--u-bezier': cubicBezierEaseInOut,
-                '--u-border-radius': mergedSizeRef.value === 'large'
-                    ? borderRadiusLarge
-                    : borderRadiusSmall,
+                '--u-text-color': textColor,
+                '--u-text-color-disabled': textColorDisabled,
+                '--u-description-text-color': descriptionTextColor,
+                '--u-description-text-color-disabled': descriptionTextColorDisabled,
+                '--u-font-size': fontSize,
+                '--u-line-height': lineHeight,
+                '--u-font-weight': fontWeight,
+                '--u-size': size,
+                '--u-border-radius': borderRadius,
                 '--u-border': border,
                 '--u-border-hover': borderHover,
-                '--u-border-checked': borderChecked,
                 '--u-border-focus': borderFocus,
+                '--u-border-active': borderActive,
+                '--u-border-checked': borderChecked,
+                '--u-border-hover-checked': borderHoverChecked,
+                '--u-border-focus-checked': borderFocusChecked,
+                '--u-border-active-checked': borderActiveChecked,
                 '--u-border-disabled': borderDisabled,
                 '--u-border-disabled-checked': borderDisabledChecked,
                 '--u-box-shadow-hover': boxShadowHover,
@@ -193,19 +67,21 @@ export default defineComponent({
                 '--u-box-shadow-focus-checked': boxShadowFocusChecked,
                 '--u-box-shadow-active-checked': boxShadowActiveChecked,
                 '--u-color': color,
+                '--u-color-hover': colorHover,
+                '--u-color-focus': colorFocus,
+                '--u-color-active': colorActive,
                 '--u-color-checked': colorChecked,
-                '--u-color-table': colorTableHeader,
-                '--u-color-table-modal': colorTableHeaderModal,
-                '--u-color-table-popover': colorTableHeaderPopover,
+                '--u-color-hover-checked': colorHoverChecked,
+                '--u-color-focus-checked': colorFocusChecked,
+                '--u-color-active-checked': colorActiveChecked,
                 '--u-color-disabled': colorDisabled,
                 '--u-color-disabled-checked': colorDisabledChecked,
-                '--u-text-color': textColor,
-                '--u-text-color-disabled': textColor,
-                '--u-text-description-color': '#999',
                 '--u-check-mark-color': checkMarkColor,
+                '--u-check-mark-hover-color': checkMarkColorHover,
+                '--u-check-mark-focus-color': checkMarkColorFocus,
+                '--u-check-mark-active-color': checkMarkColorActive,
                 '--u-check-mark-color-disabled': checkMarkColorDisabled,
                 '--u-check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
-                '--u-font-size': fontSize,
                 '--u-label-padding': props.position === 'right' ? '0 16px 0 0' : labelPadding,
                 '--u-checkbox-position': props.position === 'right' ? '1' : '0',
                 '--u-checkbox-position-block': props.position === 'right' ? 'flex' : 'inline-flex',
@@ -213,19 +89,13 @@ export default defineComponent({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('checkbox', computed(() => mergedSizeRef.value[0]), cssVarsRef, props)
+            ? useThemeClass('checkbox', computed(() => checkbox.mergedSize.value[0]), cssVarsRef, props)
             : undefined;
-        return Object.assign(formItem, exposedMethods, {
+        return Object.assign(checkbox, {
             rtlEnabled: rtlEnabledRef,
-            selfRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            mergedDisabled: mergedDisabledRef,
-            renderedChecked: renderedCheckedRef,
             mergedTheme: themeRef,
             labelId: createId(),
-            handleClick,
-            handleKeyUp,
-            handleKeyDown,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -233,13 +103,13 @@ export default defineComponent({
     },
     render() {
         var _a;
-        const { $slots, renderedChecked, mergedDisabled, indeterminate, privateInsideTable, cssVars, labelId, ripple, label, description, mergedClsPrefix, focusable, handleKeyUp, handleKeyDown, handleClick } = this;
+        const { $slots, renderedChecked, mergedDisabled, indeterminate, cssVars, labelId, ripple, label, description, mergedClsPrefix, focusable, handleKeyUp, handleKeyDown, handleClick } = this;
         (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         const labelNode = resolveWrappedSlot($slots.default, (children) => {
             if (label || children) {
-                return (h("div", { class: `${mergedClsPrefix}-checkbox__label_box`, id: labelId },
-                    h("span", { class: `${mergedClsPrefix}-checkbox__label` }, label || children),
-                    h("span", { class: `${mergedClsPrefix}-checkbox__description` }, description)));
+                return (h("div", { class: `${mergedClsPrefix}-checkbox-label`, id: labelId },
+                    h("div", { class: `${mergedClsPrefix}-checkbox-label__label` }, label || children),
+                    h("div", { class: `${mergedClsPrefix}-checkbox-label__description` }, description)));
             }
             return null;
         });
@@ -252,11 +122,9 @@ export default defineComponent({
         return (h("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-checkbox`,
                 this.themeClass,
-                this.rtlEnabled && `${mergedClsPrefix}-checkbox--rtl`,
                 renderedChecked && `${mergedClsPrefix}-checkbox--checked`,
                 mergedDisabled && `${mergedClsPrefix}-checkbox--disabled`,
                 indeterminate && `${mergedClsPrefix}-checkbox--indeterminate`,
-                privateInsideTable && `${mergedClsPrefix}-checkbox--inside-table`,
                 labelNode && `${mergedClsPrefix}-checkbox--show-label`
             ], tabindex: mergedDisabled || !focusable ? undefined : 0, role: "checkbox", "aria-checked": indeterminate ? 'mixed' : renderedChecked, "aria-labelledby": labelId, style: cssVars, onKeyup: handleKeyUp, onKeydown: handleKeyDown, onClick: handleClick, onMousedown: () => {
                 on('selectstart', window, (e) => {
@@ -265,14 +133,12 @@ export default defineComponent({
                     once: true
                 });
             } },
-            h("div", { class: `${mergedClsPrefix}-checkbox-box-wrapper` },
-                "\u00A0",
-                h("div", { class: `${mergedClsPrefix}-checkbox-box` },
-                    rippleNode,
-                    h(UIconSwitchTransition, null, {
-                        default: () => this.indeterminate ? (h("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark)) : (h("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark))
-                    }),
-                    h("div", { class: `${mergedClsPrefix}-checkbox-box__border` }))),
+            h("div", { class: `${mergedClsPrefix}-checkbox-box` },
+                rippleNode,
+                h("div", { class: `${mergedClsPrefix}-checkbox-box__border` }),
+                h(UIconSwitchTransition, null, {
+                    default: () => this.indeterminate ? (h("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-box__icon` }, LineMark)) : (h("div", { key: "check", class: `${mergedClsPrefix}-checkbox-box__icon` }, CheckMark))
+                })),
             labelNode));
     }
 });

package/es/checkbox/src/CheckboxGroup.d.ts

@@ -1,15 +1,5 @@
-import { type PropType, type Ref, type ComputedRef } from 'vue';
+import { type PropType } from 'vue';
 import { type MaybeArray, type ExtractPublicPropTypes } from '../../_utils';
-export interface CheckboxGroupInjection {
-    checkedCountRef: ComputedRef<number>;
-    maxRef: Ref<number | undefined>;
-    minRef: Ref<number | undefined>;
-    disabledRef: Ref<boolean>;
-    valueSetRef: Ref<Set<string | number>>;
-    mergedSizeRef: Ref<'small' | 'medium' | 'large'>;
-    toggleCheckbox: (checked: boolean, checkboxValue: string | number) => void;
-}
-export declare const checkboxGroupInjectionKey: import("vue").InjectionKey<CheckboxGroupInjection>;
 export declare const checkboxGroupProps: {
     readonly min: NumberConstructor;
     readonly max: NumberConstructor;
@@ -57,7 +47,7 @@ declare const _default: import("vue").DefineComponent<{
     }) => void>>;
     readonly onChange: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
 }, {
-    mergedClsPrefix: Ref<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly min: NumberConstructor;
     readonly max: NumberConstructor;

package/es/checkbox/src/CheckboxGroup.js

@@ -1,8 +1,8 @@
 import { h, defineComponent, provide, computed, toRef, ref, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
 import { useConfig, useFormItem } from '../../_mixins';
-import { call, createInjectionKey, warnOnce } from '../../_utils';
-export const checkboxGroupInjectionKey = createInjectionKey('u-checkbox-group');
+import { call, warnOnce } from '../../_utils';
+import { checkboxGroupInjectionKey } from '../../_internal';
 export const checkboxGroupProps = {
     min: Number,
     max: Number,