@uzum-tech/ui 0.1.1 → 1.0.0

package/lib/checkbox/src/Checkbox.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkboxProps = void 0;
 const vue_1 = require("vue");
-const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
 const evtd_1 = require("evtd");
 const _mixins_1 = require("../../_mixins");
@@ -14,19 +13,9 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const CheckMark_1 = __importDefault(require("./CheckMark"));
 const LineMark_1 = __importDefault(require("./LineMark"));
-const CheckboxGroup_1 = require("./CheckboxGroup");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const use_rtl_1 = require("../../_mixins/use-rtl");
-exports.checkboxProps = Object.assign(Object.assign({}, _mixins_1.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: {
+exports.checkboxProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), _internal_1.checkboxBaseProps), { indeterminate: Boolean, label: String, description: String, position: {
         type: String,
         default: 'left'
     }, ripple: {
@@ -35,17 +24,9 @@ exports.checkboxProps = Object.assign(Object.assign({}, _mixins_1.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 });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Checkbox',
     props: exports.checkboxProps,
@@ -57,139 +38,32 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const selfRef = (0, vue_1.ref)(null);
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
-        const formItem = (0, _mixins_1.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 = (0, vue_1.inject)(CheckboxGroup_1.checkboxGroupInjectionKey, null);
-        const uncontrolledCheckedRef = (0, vue_1.ref)(props.defaultChecked);
-        const controlledCheckedRef = (0, vue_1.toRef)(props, 'checked');
-        const mergedCheckedRef = (0, vooks_1.useMergedState)(controlledCheckedRef, uncontrolledCheckedRef);
-        const renderedCheckedRef = (0, vooks_1.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 = (0, _internal_1.useCheckbox)(props);
         const themeRef = (0, _mixins_1.useTheme)('Checkbox', '-checkbox', index_cssr_1.default, styles_1.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) {
-                    (0, _utils_1.call)(_onUpdateCheck, nextChecked, e);
-                }
-                if (onUpdateChecked) {
-                    (0, _utils_1.call)(onUpdateChecked, nextChecked, e);
-                }
-                if (onChange)
-                    (0, _utils_1.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 = (0, use_rtl_1.useRtl)('Checkbox', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.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, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.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, [(0, _utils_1.createKey)('borderRadius', mergedSize)]: borderRadius, [(0, _utils_1.createKey)('size', mergedSize)]: size, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.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,
@@ -199,19 +73,21 @@ exports.default = (0, vue_1.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',
@@ -219,19 +95,13 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? (0, _mixins_1.useThemeClass)('checkbox', (0, vue_1.computed)(() => mergedSizeRef.value[0]), cssVarsRef, props)
+            ? (0, _mixins_1.useThemeClass)('checkbox', (0, vue_1.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: (0, seemly_1.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
@@ -239,13 +109,13 @@ exports.default = (0, vue_1.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 = (0, _utils_1.resolveWrappedSlot)($slots.default, (children) => {
             if (label || children) {
-                return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox__label_box`, id: labelId },
-                    (0, vue_1.h)("span", { class: `${mergedClsPrefix}-checkbox__label` }, label || children),
-                    (0, vue_1.h)("span", { class: `${mergedClsPrefix}-checkbox__description` }, description)));
+                return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-label`, id: labelId },
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-label__label` }, label || children),
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-label__description` }, description)));
             }
             return null;
         });
@@ -258,11 +128,9 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.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: () => {
                 (0, evtd_1.on)('selectstart', window, (e) => {
@@ -271,14 +139,12 @@ exports.default = (0, vue_1.defineComponent)({
                     once: true
                 });
             } },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box-wrapper` },
-                "\u00A0",
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box` },
-                    rippleNode,
-                    (0, vue_1.h)(_internal_1.UIconSwitchTransition, null, {
-                        default: () => this.indeterminate ? ((0, vue_1.h)("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-icon` }, LineMark_1.default)) : ((0, vue_1.h)("div", { key: "check", class: `${mergedClsPrefix}-checkbox-icon` }, CheckMark_1.default))
-                    }),
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box__border` }))),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box` },
+                rippleNode,
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-checkbox-box__border` }),
+                (0, vue_1.h)(_internal_1.UIconSwitchTransition, null, {
+                    default: () => this.indeterminate ? ((0, vue_1.h)("div", { key: "indeterminate", class: `${mergedClsPrefix}-checkbox-box__icon` }, LineMark_1.default)) : ((0, vue_1.h)("div", { key: "check", class: `${mergedClsPrefix}-checkbox-box__icon` }, CheckMark_1.default))
+                })),
             labelNode));
     }
 });

package/lib/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/lib/checkbox/src/CheckboxGroup.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkboxGroupProps = exports.checkboxGroupInjectionKey = void 0;
+exports.checkboxGroupProps = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
-exports.checkboxGroupInjectionKey = (0, _utils_1.createInjectionKey)('u-checkbox-group');
+const _internal_1 = require("../../_internal");
 exports.checkboxGroupProps = {
     min: Number,
     max: Number,
@@ -144,7 +144,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
-        (0, vue_1.provide)(exports.checkboxGroupInjectionKey, {
+        (0, vue_1.provide)(_internal_1.checkboxGroupInjectionKey, {
             checkedCountRef: checkedCount,
             maxRef: (0, vue_1.toRef)(props, 'max'),
             minRef: (0, vue_1.toRef)(props, 'min'),