@uzum-tech/ui 1.5.1 → 1.5.3

package/es/input-otp/src/InputOtp.js

@@ -0,0 +1,250 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { pxfy, repeat } from 'seemly';
+import { useMergedState } from 'vooks';
+import { computed, defineComponent, h, ref, toRef } from 'vue';
+import { useConfig, useFormItem, useRtl, useTheme, useThemeClass } from '../../_mixins';
+import { call, createKey, isArrayShallowEqual, resolveSlotWithProps } from '../../_utils';
+import inputOtpLight from '../styles/light';
+import style from './styles/index.cssr';
+import { UInput } from '../../input';
+export const inputOtpProps = Object.assign(Object.assign({}, useTheme.props), { defaultValue: { type: Array, default: [] }, value: Array, length: {
+        type: Number,
+        default: 6
+    }, block: Boolean, size: String, disabled: Boolean, mask: Boolean, readonly: Boolean, status: String, gap: [String, Number], placeholder: { type: String, default: '' }, allowInput: Function, onBlur: [Function, Array], onFocus: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFinish: [Function, Array] });
+export default defineComponent({
+    name: 'InputOtp',
+    props: inputOtpProps,
+    slots: Object,
+    setup(props) {
+        const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme('InputOtp', '-input-otp', style, inputOtpLight, props, mergedClsPrefixRef);
+        const rtlEnabledRef = useRtl('InputOtp', mergedRtlRef, mergedClsPrefixRef);
+        // form-item
+        const formItem = useFormItem(props);
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
+        const cssVarsRef = computed(() => {
+            const { value: size } = mergedSizeRef;
+            const { gap: propGap } = props;
+            const { self: { [createKey('inputWidth', size)]: inputWidth, [createKey('gap', size)]: gap } } = themeRef.value;
+            return {
+                '--u-gap': propGap === undefined
+                    ? gap
+                    : typeof propGap === 'number'
+                        ? pxfy(propGap)
+                        : propGap,
+                '--u-input-width': inputWidth
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('input-otp', computed(() => {
+                const { value: size } = mergedSizeRef;
+                return size[0];
+            }), cssVarsRef, props)
+            : undefined;
+        const uncontrolledValueRef = ref(props.defaultValue);
+        const controlledValueRef = toRef(props, 'value');
+        const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+        const inputRefList = ref([]);
+        const inputTypeRef = computed(() => props.mask ? 'password' : 'text');
+        const handleFocus = (event, index) => {
+            // If it's focused from other input element inside the component, returns
+            if (inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value.some((inputInst) => inputInst.inputElRef === event.relatedTarget)) {
+                return;
+            }
+            const { onFocus } = props;
+            if (onFocus) {
+                call(onFocus, event, index);
+            }
+            const { triggerFormFocus } = formItem;
+            triggerFormFocus();
+        };
+        const handleBlur = (event, index) => {
+            // If it's blured to other input element inside the component, returns
+            if (inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value.some((inputInst) => inputInst.inputElRef === event.relatedTarget)) {
+                return;
+            }
+            const { onBlur } = props;
+            const { triggerFormBlur } = formItem;
+            if (onBlur) {
+                call(onBlur, event, index);
+            }
+            triggerFormBlur();
+        };
+        const focusOnChar = (charIndex) => {
+            if (charIndex >= props.length) {
+                return;
+            }
+            if (charIndex < 0) {
+                return;
+            }
+            inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value[charIndex].focus();
+            inputRefList === null || inputRefList === void 0 ? void 0 : inputRefList.value[charIndex].select();
+        };
+        const focusOnNextChar = (currentIndex) => {
+            if (currentIndex >= props.length - 1) {
+                return;
+            }
+            focusOnChar(currentIndex + 1);
+        };
+        const focusOnPrevChar = (currentIndex) => {
+            if (currentIndex <= 0) {
+                return;
+            }
+            focusOnChar(currentIndex - 1);
+        };
+        const justifyValue = (value) => {
+            const justifiedValue = value ? Array.from(value) : [];
+            const length = props.length;
+            while (justifiedValue.length > length) {
+                justifiedValue.pop();
+            }
+            while (justifiedValue.length < length) {
+                justifiedValue.push('');
+            }
+            return justifiedValue;
+        };
+        function doUpdateValue(values, meta) {
+            const { triggerFormInput, triggerFormChange } = formItem;
+            if (isArrayShallowEqual(values, mergedValueRef.value)) {
+                triggerFormInput();
+                return;
+            }
+            const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onFinish } = props;
+            if (_onUpdateValue) {
+                call(_onUpdateValue, values, meta);
+            }
+            if (onUpdateValue) {
+                call(onUpdateValue, values, meta);
+            }
+            if (onFinish && values.every(Boolean)) {
+                call(onFinish, values);
+            }
+            uncontrolledValueRef.value = values;
+            triggerFormInput();
+            triggerFormChange();
+        }
+        const handlePaste = (event, index) => {
+            if (props.readonly || mergedDisabledRef.value) {
+                return;
+            }
+            event.preventDefault();
+            const { clipboardData } = event;
+            const text = clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text');
+            if (!text) {
+                return;
+            }
+            const currentValue = justifyValue(mergedValueRef.value);
+            let startIndex = index;
+            const allowInput = props.allowInput;
+            let pasteApplied = false;
+            let appendedText = '';
+            for (let i = 0; i < text.length; ++i) {
+                if (allowInput && !allowInput(text[i], startIndex, currentValue)) {
+                    continue;
+                }
+                pasteApplied = true;
+                currentValue[startIndex] = text[i];
+                appendedText += text[i];
+                startIndex++;
+                if (startIndex >= currentValue.length) {
+                    break;
+                }
+            }
+            if (pasteApplied) {
+                focusOnChar(startIndex);
+                doUpdateValue(currentValue, {
+                    diff: appendedText,
+                    index: startIndex,
+                    source: 'paste'
+                });
+            }
+        };
+        const handleKeydown = (event, index) => {
+            if (mergedDisabledRef.value) {
+                return;
+            }
+            const keyCode = event.code || event.key;
+            const currentValue = justifyValue(mergedValueRef.value);
+            if (keyCode === 'Backspace' && !props.readonly) {
+                event.preventDefault();
+                currentValue[Math.max(index, 0)] = '';
+                doUpdateValue(currentValue, { diff: '', index, source: 'delete' });
+                focusOnPrevChar(index);
+            }
+            else if (keyCode === 'ArrowLeft') {
+                event.preventDefault();
+                focusOnPrevChar(index);
+            }
+            else if (keyCode === 'ArrowRight') {
+                event.preventDefault();
+                focusOnNextChar(index);
+            }
+        };
+        const handleInput = (value, index) => {
+            const currentValue = justifyValue(mergedValueRef.value);
+            const currentValueAtIndex = currentValue[index];
+            const diff = value.replace(currentValueAtIndex, '');
+            const char = diff[diff.length - 1] || value[value.length - 1] || '';
+            const allowInput = props.allowInput;
+            if (allowInput && !allowInput(char, index, currentValue)) {
+                return;
+            }
+            currentValue[index] = char;
+            doUpdateValue(currentValue, { diff: char, index, source: 'input' });
+            focusOnNextChar(index);
+        };
+        // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+        const getTemplateEvents = (index) => {
+            return {
+                onInput: (value) => {
+                    handleInput(value, index);
+                },
+                onPaste: (event) => {
+                    handlePaste(event, index);
+                },
+                onKeydown: (event) => {
+                    handleKeydown(event, index);
+                },
+                onFocus: (event) => {
+                    handleFocus(event, index);
+                },
+                onBlur: (event) => {
+                    handleBlur(event, index);
+                }
+            };
+        };
+        const exposedMethods = {
+            focusOnChar
+        };
+        return Object.assign({ mergedTheme: themeRef, perItemValueArray: computed(() => justifyValue(mergedValueRef.value)), mergedClsPrefix: mergedClsPrefixRef, inputRefList, inputType: inputTypeRef, rtlEnabled: rtlEnabledRef, mergedStatus: mergedStatusRef, mergedDisabled: mergedDisabledRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, getTemplateEvents, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
+    },
+    render() {
+        const { mergedTheme, mergedClsPrefix, perItemValueArray, size, placeholder, mergedDisabled, mergedStatus, readonly, inputType, $slots, getTemplateEvents, themeClass, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { style: this.cssVars, class: [
+                `${mergedClsPrefix}-input-otp`,
+                themeClass,
+                this.rtlEnabled && `${mergedClsPrefix}-input-otp--rtl`,
+                this.block && `${mergedClsPrefix}-input-otp--block`
+            ] }, repeat(this.length, undefined).map((_, index) => resolveSlotWithProps($slots.default, Object.assign({ index, value: perItemValueArray[index], type: inputType, size,
+            placeholder, disabled: mergedDisabled, readonly, status: mergedStatus, builtinThemeOverrides: {
+                paddingTiny: '0',
+                paddingSmall: '0',
+                paddingMedium: '0',
+                paddingLarge: '0'
+            }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, ref: (el) => (this.inputRefList[index] = el) }, getTemplateEvents(index)), (_a) => {
+            var { index } = _a, restProps = __rest(_a, ["index"]);
+            return [h(UInput, Object.assign({}, restProps, { key: index }))];
+        }))));
+    }
+});

package/es/input-otp/src/public-types.d.ts

@@ -0,0 +1,25 @@
+import type { VNode } from 'vue';
+import type { InputInst } from '../../components';
+import type { InputProps } from '../../input/src/Input';
+export type InputOtpAllowInput = (char: string, index: number, currentValue: string[]) => boolean;
+export type InputOtpSize = 'small' | 'medium' | 'large';
+export type InputOtpOnUpdateValue = (value: string[], meta: InputOtpOnUpdateValueMeta) => void;
+export type InputOtpOnFocus = (e: FocusEvent, index: number) => void;
+export type InputOtpOnBlur = (e: FocusEvent, index: number) => void;
+export interface InputOtpSlots {
+    default?: InputOtpDefaultSlot;
+}
+export type InputOtpDefaultSlot = (props: InputProps & {
+    index: number;
+    ref: (inst: InputInst) => void;
+}) => VNode[];
+export type InputOtpOnFinish = (value: string[]) => void;
+export interface InputOtpOnUpdateValueMeta {
+    diff: string;
+    index: number;
+    source: InputOtpOnUpdateValueMetaSource;
+}
+export type InputOtpOnUpdateValueMetaSource = 'paste' | 'input' | 'delete';
+export interface InputOtpInst {
+    focusOnChar: (charIndex: number) => void;
+}

package/es/input-otp/src/public-types.js

@@ -0,0 +1 @@
+export {};

package/es/input-otp/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/input-otp/src/styles/index.cssr.js

@@ -0,0 +1,20 @@
+import { c, cB, cM, cNotM } from '../../../_utils/cssr';
+// --u-input-width
+// --u-gap
+export default c([cB('input-otp', `
+ display: flex;
+ align-items: center;
+ gap: var(--u-gap);
+ `, [cM('block', '', [cB('input', '', [cNotM('autosize', `
+ text-align: center;
+ min-width: 0;
+ `), cM('autosize', `
+ text-align: center;
+ min-width: 0;
+ `)])]), cNotM('block', '', [cB('input', '', [cNotM('autosize', `
+ width: var(--u-input-width);
+ text-align: center;
+ `), cM('autosize', `
+ width: var(--u-input-width);
+ text-align: center;
+ `)])])])]);

package/es/input-otp/src/styles/input-otp-rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/input-otp/src/styles/input-otp-rtl.cssr.js

@@ -0,0 +1,5 @@
+import { cB, cM } from '../../../_utils/cssr';
+// --u-gap
+export default cB('input-otp', [cM('rtl', `
+ direction: rtl;
+ `)]);

package/es/input-otp/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { InputOtpTheme } from './light';
+declare const inputOtpDark: InputOtpTheme;
+export default inputOtpDark;

package/es/input-otp/styles/dark.js

@@ -0,0 +1,12 @@
+import { commonDark } from '../../_styles/common';
+import { inputDark } from '../../input/styles';
+import { self } from './light';
+const inputOtpDark = {
+    name: 'InputOtp',
+    common: commonDark,
+    peers: {
+        Input: inputDark
+    },
+    self
+};
+export default inputOtpDark;

package/es/input-otp/styles/index.d.ts

@@ -0,0 +1,4 @@
+export { default as inputOtpDark } from './dark';
+export { default as inputOtpLight } from './light';
+export type { InputOtpTheme } from './light';
+export { inputOtpRtl } from './rtl';

package/es/input-otp/styles/index.js

@@ -0,0 +1,3 @@
+export { default as inputOtpDark } from './dark';
+export { default as inputOtpLight } from './light';
+export { inputOtpRtl } from './rtl';

package/es/input-otp/styles/light.d.ts

@@ -0,0 +1,83 @@
+export declare function self(): {
+    inputWidthSmall: string;
+    inputWidthMedium: string;
+    inputWidthLarge: string;
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
+};
+declare const inputOtpLight: import("../../_mixins").Theme<"InputOtp", {
+    inputWidthSmall: string;
+    inputWidthMedium: string;
+    inputWidthLarge: string;
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
+}, {
+    Input: import("../../_mixins").Theme<"Input", {
+        paddingTiny: string;
+        paddingSmall: string;
+        paddingMedium: string;
+        paddingLarge: string;
+        paddingHuge: string;
+        clearSize: string;
+        countTextColorDisabled: string;
+        countTextColor: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
+        heightHuge: string;
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        fontSizeHuge: string;
+        lineHeight: string;
+        lineHeightTextarea: string;
+        borderRadius: string;
+        iconSize: string;
+        groupLabelTextColor: string;
+        textColor: string;
+        textColorDisabled: string;
+        textDecorationColor: string;
+        caretColor: string;
+        placeholderColor: string;
+        placeholderColorDisabled: string;
+        color: string;
+        colorDisabled: string;
+        colorFocus: string;
+        groupLabelBorder: string;
+        border: string;
+        borderHover: string;
+        borderDisabled: string;
+        borderFocus: string;
+        boxShadowFocus: string;
+        loadingColor: string;
+        loadingColorWarning: string;
+        borderWarning: string;
+        borderHoverWarning: string;
+        colorFocusWarning: string;
+        borderFocusWarning: string;
+        boxShadowFocusWarning: string;
+        caretColorWarning: string;
+        loadingColorError: string;
+        borderError: string;
+        borderHoverError: string;
+        colorFocusError: string;
+        borderFocusError: string;
+        boxShadowFocusError: string;
+        caretColorError: string;
+        clearColor: string;
+        clearColorHover: string;
+        clearColorPressed: string;
+        iconColor: string;
+        iconColorDisabled: string;
+        iconColorHover: string;
+        iconColorPressed: string;
+        suffixTextColor: string;
+        selectionColor: string;
+    }, any>;
+}>;
+export default inputOtpLight;
+export type InputOtpTheme = typeof inputOtpLight;

package/es/input-otp/styles/light.js

@@ -0,0 +1,22 @@
+import { createTheme } from '../../_mixins';
+import { commonLight } from '../../_styles/common';
+import { inputLight } from '../../input/styles';
+export function self() {
+    return {
+        inputWidthSmall: '44px',
+        inputWidthMedium: '50px',
+        inputWidthLarge: '56px',
+        gapSmall: '6px',
+        gapMedium: '8px',
+        gapLarge: '10px'
+    };
+}
+const inputOtpLight = createTheme({
+    name: 'InputOtp',
+    common: commonLight,
+    peers: {
+        Input: inputLight
+    },
+    self
+});
+export default inputOtpLight;

package/es/input-otp/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const inputOtpRtl: RtlItem;

package/es/input-otp/styles/rtl.js

@@ -0,0 +1,5 @@
+import rtlStyle from '../src/styles/input-otp-rtl.cssr';
+export const inputOtpRtl = {
+    name: 'InputOtp',
+    style: rtlStyle
+};

package/es/legacy-transfer/src/Transfer.js

@@ -56,7 +56,7 @@ export default defineComponent({
         const { uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, avlSrcValueSet: avlSrcValueSetRef, avlTgtValueSet: avlTgtValueSetRef, tgtOpts: tgtOptsRef, srcOpts: srcOptsRef, filteredSrcOpts: filteredSrcOptsRef, filteredTgtOpts: filteredTgtOptsRef, srcCheckedValues: srcCheckedValuesRef, tgtCheckedValues: tgtCheckedValuesRef, srcCheckedStatus: srcCheckedStatusRef, tgtCheckedStatus: tgtCheckedStatusRef, srcPattern: srcPatternRef, tgtPattern: tgtPatternRef, isInputing: isInputingRef, fromButtonDisabled: fromButtonDisabledRef, toButtonDisabled: toButtonDisabledRef, handleInputFocus, handleInputBlur, handleTgtFilterUpdateValue, handleSrcFilterUpdateValue } = useTransferData(props, mergedDisabledRef);
         function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateValue)
                 call(onUpdateValue, value);
             if (_onUpdateValue)
@@ -64,8 +64,8 @@ export default defineComponent({
             if (onChange)
                 call(onChange, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function handleSrcHeaderCheck(value) {
             const { value: { checked, indeterminate } } = srcCheckedStatusRef;