@uzum-tech/ui 1.5.1 → 1.5.3

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

@@ -0,0 +1,256 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOtpProps = void 0;
+const seemly_1 = require("seemly");
+const vooks_1 = require("vooks");
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const light_1 = __importDefault(require("../styles/light"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const input_1 = require("../../input");
+exports.inputOtpProps = Object.assign(Object.assign({}, _mixins_1.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] });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'InputOtp',
+    props: exports.inputOtpProps,
+    slots: Object,
+    setup(props) {
+        const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('InputOtp', '-input-otp', index_cssr_1.default, light_1.default, props, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, _mixins_1.useRtl)('InputOtp', mergedRtlRef, mergedClsPrefixRef);
+        // form-item
+        const formItem = (0, _mixins_1.useFormItem)(props);
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: size } = mergedSizeRef;
+            const { gap: propGap } = props;
+            const { self: { [(0, _utils_1.createKey)('inputWidth', size)]: inputWidth, [(0, _utils_1.createKey)('gap', size)]: gap } } = themeRef.value;
+            return {
+                '--u-gap': propGap === undefined
+                    ? gap
+                    : typeof propGap === 'number'
+                        ? (0, seemly_1.pxfy)(propGap)
+                        : propGap,
+                '--u-input-width': inputWidth
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('input-otp', (0, vue_1.computed)(() => {
+                const { value: size } = mergedSizeRef;
+                return size[0];
+            }), cssVarsRef, props)
+            : undefined;
+        const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
+        const controlledValueRef = (0, vue_1.toRef)(props, 'value');
+        const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
+        const inputRefList = (0, vue_1.ref)([]);
+        const inputTypeRef = (0, vue_1.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) {
+                (0, _utils_1.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) {
+                (0, _utils_1.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 ((0, _utils_1.isArrayShallowEqual)(values, mergedValueRef.value)) {
+                triggerFormInput();
+                return;
+            }
+            const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onFinish } = props;
+            if (_onUpdateValue) {
+                (0, _utils_1.call)(_onUpdateValue, values, meta);
+            }
+            if (onUpdateValue) {
+                (0, _utils_1.call)(onUpdateValue, values, meta);
+            }
+            if (onFinish && values.every(Boolean)) {
+                (0, _utils_1.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: (0, vue_1.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 ((0, vue_1.h)("div", { style: this.cssVars, class: [
+                `${mergedClsPrefix}-input-otp`,
+                themeClass,
+                this.rtlEnabled && `${mergedClsPrefix}-input-otp--rtl`,
+                this.block && `${mergedClsPrefix}-input-otp--block`
+            ] }, (0, seemly_1.repeat)(this.length, undefined).map((_, index) => (0, _utils_1.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 [(0, vue_1.h)(input_1.UInput, Object.assign({}, restProps, { key: index }))];
+        }))));
+    }
+});

package/lib/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/lib/input-otp/src/public-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// --u-input-width
+// --u-gap
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input-otp', `
+ display: flex;
+ align-items: center;
+ gap: var(--u-gap);
+ `, [(0, cssr_1.cM)('block', '', [(0, cssr_1.cB)('input', '', [(0, cssr_1.cNotM)('autosize', `
+ text-align: center;
+ min-width: 0;
+ `), (0, cssr_1.cM)('autosize', `
+ text-align: center;
+ min-width: 0;
+ `)])]), (0, cssr_1.cNotM)('block', '', [(0, cssr_1.cB)('input', '', [(0, cssr_1.cNotM)('autosize', `
+ width: var(--u-input-width);
+ text-align: center;
+ `), (0, cssr_1.cM)('autosize', `
+ width: var(--u-input-width);
+ text-align: center;
+ `)])])])]);

package/lib/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/lib/input-otp/src/styles/input-otp-rtl.cssr.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+// --u-gap
+exports.default = (0, cssr_1.cB)('input-otp', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]);

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const styles_1 = require("../../input/styles");
+const light_1 = require("./light");
+const inputOtpDark = {
+    name: 'InputOtp',
+    common: common_1.commonDark,
+    peers: {
+        Input: styles_1.inputDark
+    },
+    self: light_1.self
+};
+exports.default = inputOtpDark;

package/lib/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/lib/input-otp/styles/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOtpRtl = exports.inputOtpLight = exports.inputOtpDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "inputOtpDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "inputOtpLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "inputOtpRtl", { enumerable: true, get: function () { return rtl_1.inputOtpRtl; } });

package/lib/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/lib/input-otp/styles/light.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = self;
+const _mixins_1 = require("../../_mixins");
+const common_1 = require("../../_styles/common");
+const styles_1 = require("../../input/styles");
+function self() {
+    return {
+        inputWidthSmall: '44px',
+        inputWidthMedium: '50px',
+        inputWidthLarge: '56px',
+        gapSmall: '6px',
+        gapMedium: '8px',
+        gapLarge: '10px'
+    };
+}
+const inputOtpLight = (0, _mixins_1.createTheme)({
+    name: 'InputOtp',
+    common: common_1.commonLight,
+    peers: {
+        Input: styles_1.inputLight
+    },
+    self
+});
+exports.default = inputOtpLight;

package/lib/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/lib/input-otp/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputOtpRtl = void 0;
+const input_otp_rtl_cssr_1 = __importDefault(require("../src/styles/input-otp-rtl.cssr"));
+exports.inputOtpRtl = {
+    name: 'InputOtp',
+    style: input_otp_rtl_cssr_1.default
+};

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

@@ -62,7 +62,7 @@ exports.default = (0, vue_1.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 } = (0, use_transfer_data_1.useTransferData)(props, mergedDisabledRef);
         function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateValue)
                 (0, _utils_1.call)(onUpdateValue, value);
             if (_onUpdateValue)
@@ -70,8 +70,8 @@ exports.default = (0, vue_1.defineComponent)({
             if (onChange)
                 (0, _utils_1.call)(onChange, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function handleSrcHeaderCheck(value) {
             const { value: { checked, indeterminate } } = srcCheckedStatusRef;