@uzum-tech/ui 0.1.1 → 1.0.0

package/es/_internal/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox, type CheckboxBaseProps, type UseCheckbox } from './src/use-checkbox';
+export type { OnUpdateChecked, OnUpdateCheckedImpl, CheckboxInst } from './src/interface';

package/es/_internal/checkbox/index.js

@@ -0,0 +1 @@
+export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox } from './src/use-checkbox';

package/es/_internal/checkbox/src/use-checkbox.d.ts

@@ -0,0 +1,53 @@
+import { ComputedRef, ExtractPropTypes, PropType, Ref } from 'vue';
+import { MaybeArray } from '../../../_utils';
+import { OnUpdateChecked } from './interface';
+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 checkboxBaseProps: {
+    size: PropType<"small" | "medium" | "large">;
+    checked: {
+        type: PropType<string | number | boolean | undefined>;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: PropType<string | number | boolean>;
+        default: boolean;
+    };
+    value: PropType<string | number>;
+    disabled: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    checkedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    uncheckedValue: {
+        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
+    onUpdateChecked: PropType<MaybeArray<OnUpdateChecked>>;
+    onChange: PropType<MaybeArray<OnUpdateChecked>>;
+};
+export type CheckboxBaseProps = ExtractPropTypes<typeof checkboxBaseProps>;
+export interface UseCheckbox {
+    selfRef: Ref<HTMLDivElement | null>;
+    mergedSize: ComputedRef<'small' | 'medium' | 'large'>;
+    mergedDisabled: Ref<boolean>;
+    renderedChecked: ComputedRef<boolean>;
+    handleClick: (e: MouseEvent) => void;
+    handleKeyUp: (e: KeyboardEvent) => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    focus: () => void;
+    blur: () => void;
+}
+export declare const useCheckbox: (props: CheckboxBaseProps) => UseCheckbox;

package/es/_internal/checkbox/src/use-checkbox.js

@@ -0,0 +1,159 @@
+import { inject, ref, toRef } from 'vue';
+import { call, createInjectionKey } from '../../../_utils';
+import { useFormItem } from '../../../_mixins';
+import { useMemo, useMergedState } from 'vooks';
+export const checkboxGroupInjectionKey = createInjectionKey('u-checkbox-group');
+export const checkboxBaseProps = {
+    size: String,
+    checked: {
+        type: [Boolean, String, Number],
+        default: undefined
+    },
+    defaultChecked: {
+        type: [Boolean, String, Number],
+        default: false
+    },
+    value: [String, Number],
+    disabled: {
+        type: Boolean,
+        default: undefined
+    },
+    checkedValue: {
+        type: [Boolean, String, Number],
+        default: true
+    },
+    uncheckedValue: {
+        type: [Boolean, String, Number],
+        default: false
+    },
+    'onUpdate:checked': [Function, Array],
+    onUpdateChecked: [Function, Array],
+    // deprecated
+    onChange: [Function, Array]
+};
+export const useCheckbox = (props) => {
+    const selfRef = ref(null);
+    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;
+        }
+    });
+    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();
+        }
+    };
+    return Object.assign(formItem, exposedMethods, {
+        selfRef,
+        mergedSize: mergedSizeRef,
+        mergedDisabled: mergedDisabledRef,
+        renderedChecked: renderedCheckedRef,
+        handleClick,
+        handleKeyUp,
+        handleKeyDown
+    });
+};

package/es/_internal/close/src/styles/index.cssr.js

@@ -39,6 +39,8 @@ export default cB('base-close', `
  color: var(--u-close-icon-color-hover);
  `), c('&:hover::before', `
  background-color: var(--u-close-color-hover);
+ `), c('&:focus', `
+ color: var(--u-close-icon-color-hover);
  `), c('&:focus::before', `
  background-color: var(--u-close-color-hover);
  `), c('&:active', `

package/es/_internal/icon/src/styles/index.cssr.js

@@ -9,6 +9,6 @@ export default cB('base-icon', `
  fill: currentColor;
  transform: translateZ(0);
 `, [c('svg', `
- height: 1em;
- width: 1em;
+ height: 100%;
+ width: 100%;
  `)]);

package/es/_internal/icons/ChevronDown.js

@@ -2,7 +2,7 @@ import { h, defineComponent } from 'vue';
 export default defineComponent({
     name: 'ChevronDown',
     render() {
-        return (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            h("path", { d: "M11.5876 15.5635C11.4543 15.5635 11.3293 15.5425 11.2126 15.5005C11.0959 15.4592 10.9876 15.3885 10.8876 15.2885L6.26259 10.6635C6.07925 10.4802 5.99192 10.2508 6.00059 9.9755C6.00859 9.70084 6.10425 9.47184 6.28759 9.2885C6.47092 9.10517 6.70425 9.0135 6.98759 9.0135C7.27092 9.0135 7.50425 9.10517 7.68759 9.2885L11.5876 13.1885L15.5126 9.2635C15.6959 9.08017 15.9253 8.9925 16.2006 9.0005C16.4753 9.00917 16.7043 9.10517 16.8876 9.2885C17.0709 9.47184 17.1626 9.70517 17.1626 9.9885C17.1626 10.2718 17.0709 10.5052 16.8876 10.6885L12.2876 15.2885C12.1876 15.3885 12.0793 15.4592 11.9626 15.5005C11.8459 15.5425 11.7209 15.5635 11.5876 15.5635Z", fill: "currentColor" })));
+        return (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
 });

package/es/_internal/icons/ChevronDownOutline.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/_internal/icons/ChevronDownOutline.js

@@ -0,0 +1,8 @@
+import { h, defineComponent } from 'vue';
+export default defineComponent({
+    name: 'ChevronDownOutline',
+    render() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
+            h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "48", d: "M112 184l144 144 144-144" })));
+    }
+});

package/es/_internal/icons/ChevronLeft.js

@@ -3,6 +3,6 @@ export default defineComponent({
     name: 'ChevronLeft',
     render() {
         return (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            h("path", { d: "M10.3536 3.14645C10.5488 3.34171 10.5488 3.65829 10.3536 3.85355L6.20711 8L10.3536 12.1464C10.5488 12.3417 10.5488 12.6583 10.3536 12.8536C10.1583 13.0488 9.84171 13.0488 9.64645 12.8536L5.14645 8.35355C4.95118 8.15829 4.95118 7.84171 5.14645 7.64645L9.64645 3.14645C9.84171 2.95118 10.1583 2.95118 10.3536 3.14645Z", fill: "currentColor" })));
+            h("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
 });

package/es/_internal/icons/ChevronRight.js

@@ -3,6 +3,6 @@ export default defineComponent({
     name: 'ChevronRight',
     render() {
         return (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-            h("path", { d: "M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z", fill: "currentColor" })));
+            h("path", { d: "M6 12L10 8L6 4", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round", "stroke-linejoin": "round" })));
     }
 });

package/es/_internal/icons/Clear.js

@@ -1,12 +1,4 @@
 import { h } from 'vue';
 import { replaceable } from './replaceable';
-export default replaceable('clear', 
-// <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
-//   <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-//     <g fill="currentColor" fill-rule="nonzero">
-//       <path d="M8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 C2,4.6862915 4.6862915,2 8,2 Z M6.5343055,5.83859116 C6.33943736,5.70359511 6.07001296,5.72288026 5.89644661,5.89644661 L5.89644661,5.89644661 L5.83859116,5.9656945 C5.70359511,6.16056264 5.72288026,6.42998704 5.89644661,6.60355339 L5.89644661,6.60355339 L7.293,8 L5.89644661,9.39644661 L5.83859116,9.4656945 C5.70359511,9.66056264 5.72288026,9.92998704 5.89644661,10.1035534 L5.89644661,10.1035534 L5.9656945,10.1614088 C6.16056264,10.2964049 6.42998704,10.2771197 6.60355339,10.1035534 L6.60355339,10.1035534 L8,8.707 L9.39644661,10.1035534 L9.4656945,10.1614088 C9.66056264,10.2964049 9.92998704,10.2771197 10.1035534,10.1035534 L10.1035534,10.1035534 L10.1614088,10.0343055 C10.2964049,9.83943736 10.2771197,9.57001296 10.1035534,9.39644661 L10.1035534,9.39644661 L8.707,8 L10.1035534,6.60355339 L10.1614088,6.5343055 C10.2964049,6.33943736 10.2771197,6.07001296 10.1035534,5.89644661 L10.1035534,5.89644661 L10.0343055,5.83859116 C9.83943736,5.70359511 9.57001296,5.72288026 9.39644661,5.89644661 L9.39644661,5.89644661 L8,7.293 L6.60355339,5.89644661 Z" />
-//     </g>
-//   </g>
-// </svg>
-h("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
-    h("path", { d: "M9.19998 0.806647C8.93998 0.546647 8.51998 0.546647 8.25998 0.806647L4.99998 4.05998L1.73998 0.79998C1.47998 0.53998 1.05998 0.53998 0.79998 0.79998C0.53998 1.05998 0.53998 1.47998 0.79998 1.73998L4.05998 4.99998L0.79998 8.25998C0.53998 8.51998 0.53998 8.93998 0.79998 9.19998C1.05998 9.45998 1.47998 9.45998 1.73998 9.19998L4.99998 5.93998L8.25998 9.19998C8.51998 9.45998 8.93998 9.45998 9.19998 9.19998C9.45998 8.93998 9.45998 8.51998 9.19998 8.25998L5.93998 4.99998L9.19998 1.73998C9.45331 1.48665 9.45331 1.05998 9.19998 0.806647Z", fill: "currentColor" })));
+export default replaceable('clear', h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/es/_internal/icons/ClearSmall.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/_internal/icons/ClearSmall.js

@@ -0,0 +1,8 @@
+import { h, defineComponent } from 'vue';
+export default defineComponent({
+    name: 'ClearSmall',
+    render() {
+        return (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M16 8L8 16M8 8L16 16", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+    }
+});

package/es/_internal/icons/Close.js

@@ -1,6 +1,4 @@
 import { h } from 'vue';
 import { replaceable } from './replaceable';
-export default replaceable('close', h("svg", { viewBox: "0 0 12 12", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true },
-    h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
-        h("g", { fill: "currentColor", "fill-rule": "nonzero" },
-            h("path", { d: "M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z" })))));
+export default replaceable('close', h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true },
+    h("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", "stroke-width": "1.4", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/es/_internal/icons/Error.js

@@ -1,6 +1,4 @@
 import { h } from 'vue';
 import { replaceable } from './replaceable';
-export default replaceable('error', h("svg", { viewBox: "0 0 48 48", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
-    h("g", { stroke: "none", "stroke-width": "1", "fill-rule": "evenodd" },
-        h("g", { "fill-rule": "nonzero" },
-            h("path", { d: "M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M17.8838835,16.1161165 L17.7823881,16.0249942 C17.3266086,15.6583353 16.6733914,15.6583353 16.2176119,16.0249942 L16.1161165,16.1161165 L16.0249942,16.2176119 C15.6583353,16.6733914 15.6583353,17.3266086 16.0249942,17.7823881 L16.1161165,17.8838835 L22.233,24 L16.1161165,30.1161165 L16.0249942,30.2176119 C15.6583353,30.6733914 15.6583353,31.3266086 16.0249942,31.7823881 L16.1161165,31.8838835 L16.2176119,31.9750058 C16.6733914,32.3416647 17.3266086,32.3416647 17.7823881,31.9750058 L17.8838835,31.8838835 L24,25.767 L30.1161165,31.8838835 L30.2176119,31.9750058 C30.6733914,32.3416647 31.3266086,32.3416647 31.7823881,31.9750058 L31.8838835,31.8838835 L31.9750058,31.7823881 C32.3416647,31.3266086 32.3416647,30.6733914 31.9750058,30.2176119 L31.8838835,30.1161165 L25.767,24 L31.8838835,17.8838835 L31.9750058,17.7823881 C32.3416647,17.3266086 32.3416647,16.6733914 31.9750058,16.2176119 L31.8838835,16.1161165 L31.7823881,16.0249942 C31.3266086,15.6583353 30.6733914,15.6583353 30.2176119,16.0249942 L30.1161165,16.1161165 L24,22.233 L17.8838835,16.1161165 L17.7823881,16.0249942 L17.8838835,16.1161165 Z" })))));
+export default replaceable('error', h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.00008 0.666626C3.94999 0.666626 0.666748 3.94987 0.666748 7.99996C0.666748 12.05 3.94999 15.3333 8.00008 15.3333C12.0502 15.3333 15.3334 12.05 15.3334 7.99996C15.3334 3.94987 12.0502 0.666626 8.00008 0.666626ZM10.4715 5.52855C10.7318 5.7889 10.7318 6.21101 10.4715 6.47136L8.94289 7.99996L10.4715 9.52855C10.7318 9.7889 10.7318 10.211 10.4715 10.4714C10.2111 10.7317 9.78903 10.7317 9.52868 10.4714L8.00008 8.94277L6.47149 10.4714C6.21114 10.7317 5.78903 10.7317 5.52868 10.4714C5.26833 10.211 5.26833 9.7889 5.52868 9.52855L7.05727 7.99996L5.52868 6.47136C5.26833 6.21101 5.26833 5.7889 5.52868 5.52855C5.78903 5.26821 6.21114 5.26821 6.47149 5.52855L8.00008 7.05715L9.52868 5.52855C9.78903 5.26821 10.2111 5.26821 10.4715 5.52855Z", fill: "currentColor" })));

package/es/_internal/icons/Inactive.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/_internal/icons/Inactive.js

@@ -0,0 +1,8 @@
+import { h, defineComponent } from 'vue';
+export default defineComponent({
+    name: 'InactiveIcon',
+    render() {
+        return (h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM5.33329 7.33329C4.9651 7.33329 4.66663 7.63177 4.66663 7.99996C4.66663 8.36815 4.9651 8.66663 5.33329 8.66663H10.6666C11.0348 8.66663 11.3333 8.36815 11.3333 7.99996C11.3333 7.63177 11.0348 7.33329 10.6666 7.33329H5.33329Z", fill: "currentColor" })));
+    }
+});

package/es/_internal/icons/InfoOutline.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/es/_internal/icons/InfoOutline.js

@@ -0,0 +1,4 @@
+import { h } from 'vue';
+import { replaceable } from './replaceable';
+export default replaceable('infoOutline', h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/es/_internal/icons/Success.js

@@ -1,6 +1,4 @@
 import { h } from 'vue';
 import { replaceable } from './replaceable';
-export default replaceable('success', h("svg", { viewBox: "0 0 48 48", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
-    h("g", { stroke: "none", "stroke-width": "1", "fill-rule": "evenodd" },
-        h("g", { "fill-rule": "nonzero" },
-            h("path", { d: "M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" })))));
+export default replaceable('success', h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.00008 0.666626C3.94999 0.666626 0.666748 3.94987 0.666748 7.99996C0.666748 12.05 3.94999 15.3333 8.00008 15.3333C12.0502 15.3333 15.3334 12.05 15.3334 7.99996C15.3334 3.94987 12.0502 0.666626 8.00008 0.666626ZM11.4715 6.47136C11.7318 6.21101 11.7318 5.7889 11.4715 5.52855C11.2111 5.26821 10.789 5.26821 10.5287 5.52855L7.00008 9.05715L5.47149 7.52855C5.21114 7.2682 4.78903 7.2682 4.52868 7.52855C4.26833 7.7889 4.26833 8.21101 4.52868 8.47136L6.52868 10.4714C6.78903 10.7317 7.21114 10.7317 7.47149 10.4714L11.4715 6.47136Z", fill: "currentColor" })));

package/es/_internal/icons/Warning.js

@@ -1,6 +1,4 @@
 import { h } from 'vue';
 import { replaceable } from './replaceable';
-export default replaceable('warning', h("svg", { viewBox: "0 0 24 24", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
-    h("g", { stroke: "none", "stroke-width": "1", "fill-rule": "evenodd" },
-        h("g", { "fill-rule": "nonzero" },
-            h("path", { d: "M12,2 C17.523,2 22,6.478 22,12 C22,17.522 17.523,22 12,22 C6.477,22 2,17.522 2,12 C2,6.478 6.477,2 12,2 Z M12.0018002,15.0037242 C11.450254,15.0037242 11.0031376,15.4508407 11.0031376,16.0023869 C11.0031376,16.553933 11.450254,17.0010495 12.0018002,17.0010495 C12.5533463,17.0010495 13.0004628,16.553933 13.0004628,16.0023869 C13.0004628,15.4508407 12.5533463,15.0037242 12.0018002,15.0037242 Z M11.99964,7 C11.4868042,7.00018474 11.0642719,7.38637706 11.0066858,7.8837365 L11,8.00036004 L11.0018003,13.0012393 L11.00857,13.117858 C11.0665141,13.6151758 11.4893244,14.0010638 12.0021602,14.0008793 C12.514996,14.0006946 12.9375283,13.6145023 12.9951144,13.1171428 L13.0018002,13.0005193 L13,7.99964009 L12.9932303,7.8830214 C12.9352861,7.38570354 12.5124758,6.99981552 11.99964,7 Z" })))));
+export default replaceable('warning', h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99996 0.666626C3.94987 0.666626 0.666626 3.94987 0.666626 7.99996C0.666626 12.05 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.05 15.3333 7.99996C15.3333 3.94987 12.05 0.666626 7.99996 0.666626ZM8.66663 5.33329C8.66663 4.9651 8.36815 4.66663 7.99996 4.66663C7.63177 4.66663 7.33329 4.9651 7.33329 5.33329V7.99996C7.33329 8.36815 7.63177 8.66663 7.99996 8.66663C8.36815 8.66663 8.66663 8.36815 8.66663 7.99996V5.33329ZM7.99996 9.99996C7.63177 9.99996 7.33329 10.2984 7.33329 10.6666C7.33329 11.0348 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0348 8.67329 10.6666C8.67329 10.2984 8.37482 9.99996 8.00663 9.99996H7.99996Z", fill: "currentColor" })));

package/es/_internal/icons/index.d.ts

@@ -7,6 +7,7 @@ export { default as DateIcon } from './Date';
 export { default as CheckmarkIcon } from './Checkmark';
 export { default as ChevronLeftIcon } from './ChevronLeft';
 export { default as ChevronRightIcon } from './ChevronRight';
+export { default as ChevronDownOutline } from './ChevronDownOutline';
 export { default as CloseIcon } from './Close';
 export { default as EyeIcon } from './Eye';
 export { default as EyeOffIcon } from './EyeOff';
@@ -40,3 +41,6 @@ export { default as ZoomOutIcon } from './ZoomOut';
 export { default as FileIcon } from './File';
 export { default as PhotoIcon } from './Photo';
 export { default as ResizeSmallIcon } from './ResizeSmall';
+export { default as InfoOutlineIcon } from './InfoOutline';
+export { default as InactiveIcon } from './Inactive';
+export { default as ClearSmallIcon } from './ClearSmall';

package/es/_internal/icons/index.js

@@ -7,6 +7,7 @@ export { default as DateIcon } from './Date';
 export { default as CheckmarkIcon } from './Checkmark';
 export { default as ChevronLeftIcon } from './ChevronLeft';
 export { default as ChevronRightIcon } from './ChevronRight';
+export { default as ChevronDownOutline } from './ChevronDownOutline';
 export { default as CloseIcon } from './Close';
 export { default as EyeIcon } from './Eye';
 export { default as EyeOffIcon } from './EyeOff';
@@ -40,3 +41,6 @@ export { default as ZoomOutIcon } from './ZoomOut';
 export { default as FileIcon } from './File';
 export { default as PhotoIcon } from './Photo';
 export { default as ResizeSmallIcon } from './ResizeSmall';
+export { default as InfoOutlineIcon } from './InfoOutline';
+export { default as InactiveIcon } from './Inactive';
+export { default as ClearSmallIcon } from './ClearSmall';

package/es/_internal/icons/replaceable.js

@@ -1,4 +1,4 @@
-import { upperFirst } from 'lodash-es';
+import { upperFirst } from 'lodash';
 import { defineComponent, inject } from 'vue';
 import { configProviderInjectionKey } from '../../config-provider/src/context';
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type

package/es/_internal/index.d.ts

@@ -18,3 +18,7 @@ export { default as UBaseClear } from './clear';
 export { default as UBaseSuffix } from './suffix';
 export { UScrollbar, UxScrollbar } from './scrollbar';
 export type { ScrollbarInst, ScrollbarProps } from './scrollbar';
+export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox } from './checkbox';
+export type { CheckboxBaseProps, UseCheckbox, OnUpdateChecked, OnUpdateCheckedImpl, CheckboxInst } from './checkbox';
+export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';
+export type { OnUpdateValue, OnUpdateValueImpl, RadioGroupInjection, UseRadio, RadioBaseProps } from './radio';

package/es/_internal/index.js

@@ -13,3 +13,5 @@ export { default as UBaseSlotMachine } from './slot-machine';
 export { default as UBaseClear } from './clear';
 export { default as UBaseSuffix } from './suffix';
 export { UScrollbar, UxScrollbar } from './scrollbar';
+export { checkboxGroupInjectionKey, checkboxBaseProps, useCheckbox } from './checkbox';
+export { radioBaseProps, radioGroupInjectionKey, useRadio } from './radio';

package/es/_internal/radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/use-radio';
+export type * from './src/interface';

package/es/_internal/radio/index.js

@@ -0,0 +1 @@
+export * from './src/use-radio';

package/es/_internal/radio/src/interface.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+export type OnUpdateValue = (value: string & number & boolean) => void;
+export type OnUpdateValueImpl = (value: string | number | boolean) => void;
+export type OnChangeImpl = (value: Event) => void;
+export interface RadioGroupInjection {
+    mergedClsPrefixRef: Ref<string>;
+    nameRef: Ref<string | undefined>;
+    valueRef: Ref<string | number | boolean | null>;
+    mergedSizeRef: Ref<'small' | 'medium' | 'large'>;
+    disabledRef: Ref<boolean>;
+    doUpdateValue: OnUpdateValue;
+}

package/{lib → es/_internal}/radio/src/use-radio.d.ts

@@ -1,6 +1,6 @@
 import { type ExtractPropTypes, type PropType, type Ref, type ComputedRef } from 'vue';
-import type { MaybeArray } from '../../_utils';
-import { type OnUpdateValue } from './interface';
+import type { MaybeArray } from '../../../_utils';
+import { OnChangeImpl, RadioGroupInjection } from './interface';
 export declare const radioBaseProps: {
     readonly name: StringConstructor;
     readonly value: {
@@ -24,15 +24,8 @@ export declare const radioBaseProps: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly onChange: PropType<OnChangeImpl>;
 };
-export interface RadioGroupInjection {
-    mergedClsPrefixRef: Ref<string>;
-    nameRef: Ref<string | undefined>;
-    valueRef: Ref<string | number | boolean | null>;
-    mergedSizeRef: Ref<'small' | 'medium' | 'large'>;
-    disabledRef: Ref<boolean>;
-    doUpdateValue: OnUpdateValue;
-}
 export declare const radioGroupInjectionKey: import("vue").InjectionKey<RadioGroupInjection>;
 export interface UseRadio {
     mergedClsPrefix: Ref<string>;
@@ -44,10 +37,10 @@ export interface UseRadio {
     renderSafeChecked: Ref<boolean>;
     focus: Ref<boolean>;
     mergedSize: ComputedRef<'small' | 'medium' | 'large'>;
-    handleRadioInputChange: () => void;
+    handleRadioInputChange: OnChangeImpl;
     handleRadioInputBlur: () => void;
     handleRadioInputFocus: () => void;
 }
-declare function setup(props: ExtractPropTypes<typeof radioBaseProps>): UseRadio;
+declare function useRadio(props: ExtractPropTypes<typeof radioBaseProps>): UseRadio;
 export type RadioBaseProps = ExtractPropTypes<typeof radioBaseProps>;
-export { setup };
+export { useRadio };

package/es/{radio → _internal/radio}/src/use-radio.js

@@ -1,7 +1,7 @@
-import { inject, ref, toRef, watchEffect } from 'vue';
+import { inject, ref, toRef } from 'vue';
 import { useMemo, useMergedState } from 'vooks';
-import { useConfig, useFormItem } from '../../_mixins';
-import { call, createInjectionKey, warnOnce } from '../../_utils';
+import { useConfig, useFormItem } from '../../../_mixins';
+import { call, createInjectionKey } from '../../../_utils';
 export const radioBaseProps = {
     name: String,
     value: {
@@ -25,17 +25,11 @@ export const radioBaseProps = {
     checkedValue: {
         type: Boolean,
         default: undefined
-    }
+    },
+    onChange: [Function, Array]
 };
 export const radioGroupInjectionKey = createInjectionKey('u-radio-group');
-function setup(props) {
-    if (process.env.NODE_ENV !== 'production') {
-        watchEffect(() => {
-            if (props.checkedValue !== undefined) {
-                warnOnce('radio', '`checked-value` is deprecated, please use `checked` instead.');
-            }
-        });
-    }
+function useRadio(props) {
     const formItem = useFormItem(props, {
         mergedSize(UFormItem) {
             const { size } = props;
@@ -82,33 +76,35 @@ function setup(props) {
             return URadioGroup.nameRef.value;
     });
     const focusRef = ref(false);
-    function doUpdateChecked() {
+    function doUpdateChecked(e) {
         if (URadioGroup) {
             const { doUpdateValue } = URadioGroup;
             const { value } = props;
             call(doUpdateValue, value);
         }
         else {
-            const { onUpdateChecked, 'onUpdate:checked': _onUpdateChecked } = props;
+            const { onUpdateChecked, 'onUpdate:checked': _onUpdateChecked, onChange } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
             if (onUpdateChecked)
                 call(onUpdateChecked, true);
             if (_onUpdateChecked)
                 call(_onUpdateChecked, true);
+            if (onChange)
+                onChange(e);
             nTriggerFormInput();
             nTriggerFormChange();
             uncontrolledCheckedRef.value = true;
         }
     }
-    function toggle() {
+    function toggle(e) {
         if (mergedDisabledRef.value)
             return;
         if (!renderSafeCheckedRef.value) {
-            doUpdateChecked();
+            doUpdateChecked(e);
         }
     }
-    function handleRadioInputChange() {
-        toggle();
+    function handleRadioInputChange(e) {
+        toggle(e);
     }
     function handleRadioInputBlur() {
         focusRef.value = false;
@@ -133,4 +129,4 @@ function setup(props) {
         handleRadioInputFocus
     };
 }
-export { setup };
+export { useRadio };