wip: add event

Author: cc-hearts

components/input/OTP/OTPInput.tsx

@@ -1,22 +1,63 @@
 import Input from '../Input';
-import { computed, defineComponent, shallowRef } from 'vue';
+import { PropType, computed, defineComponent, nextTick, shallowRef } from 'vue';
+import inputProps from '../inputProps';
+import omit from '../../_util/omit';
+import { type ChangeEventHandler } from '../../_util/EventInterface';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'OTPInput',
   inheritAttrs: false,
   props: {
+    ...inputProps(),
     index: Number,
     value: { type: String, default: undefined },
     mask: { type: [Boolean, String], default: false },
+    onChange: { type: Function as PropType<(index: number, value: string) => void> },
   },
-  setup(props, { attrs }) {
+  setup(props, { attrs, expose }) {
     const inputRef = shallowRef();
     const internalValue = computed(() => {
-      const { value, mask, ...resetProps } = props;
+      const { value, mask } = props;
       return value && typeof mask === 'string' ? mask : value;
     });
 
-    return () => <Input ref={inputRef} class={attrs.class} value={internalValue.value} />;
+    const syncSelection = () => {
+      requestAnimationFrame(() => {
+        inputRef.value.select();
+      });
+    };
+    const handleSyncMouseDown = e => {
+      e.preventDefault();
+      syncSelection();
+    };
+    // ======================= Event handlers =================
+    const onInternalChange: ChangeEventHandler = e => {
+      props.onChange(props.index, e.target.value);
+    };
+
+    const focus = () => {
+      inputRef.value?.focus();
+      syncSelection();
+    };
+
+    expose({
+      focus,
+    });
+
+    return () => (
+      <Input
+        ref={inputRef}
+        {...attrs}
+        {...omit(props, ['index', 'value', 'mask', 'onChange'])}
+        class={attrs.class}
+        value={internalValue.value}
+        onInput={onInternalChange}
+        onMousedown={handleSyncMouseDown}
+        onMouseUp={handleSyncMouseDown}
+        onKeydown={syncSelection}
+        onKeyup={syncSelection}
+      />
+    );
   },
 });

components/input/OTP/index.tsx

@@ -1,4 +1,4 @@
-import { PropType, defineComponent, reactive, ref } from 'vue';
+import { PropType, defineComponent, nextTick, reactive, ref } from 'vue';
 import inputProps from '../inputProps';
 import { FormItemInputContext } from 'ant-design-vue/es/form/FormItemContext';
 import useConfigInject from '../../config-provider/hooks/useConfigInject';
@@ -13,25 +13,77 @@ export default defineComponent({
   props: {
     ...inputProps(),
     length: { type: Number, default: 6 },
+    onChange: { type: Function as PropType<(value: string) => void>, default: undefined },
     formatter: { type: Function as PropType<(arg: string) => string>, default: undefined },
     defaultValue: { type: String, default: undefined },
   },
   setup(props, { attrs }) {
     const { prefixCls, direction, size } = useConfigInject('otp', props);
     // Style
     const [wrapSSR, hashId] = useStyle(prefixCls);
-
+    // ==================== Provider =========================
     const proxyFormContext = reactive({
       // TODO:
     });
     FormItemInputContext.useProvide(proxyFormContext);
 
-    const { defaultValue } = props;
+    const refs = ref([]);
     const strToArr = (str: string) => (str || '').split('');
     // keep reactive
     const internalFormatter = (txt: string) => (props.formatter ? props.formatter(txt) : txt);
+    const valueCells = ref<string[]>(strToArr(internalFormatter(props.defaultValue || '')));
+    const patchValue = (index: number, txt: string) => {
+      let nextCells = valueCells.value.slice();
+
+      for (let i = 0; i < index; i += 1) {
+        if (!nextCells[i]) {
+          nextCells[i] = '';
+        }
+      }
+
+      if (txt.length <= 1) {
+        nextCells[index] = txt;
+      } else {
+        nextCells = nextCells.slice(0, index).concat(strToArr(txt));
+      }
+
+      nextCells = nextCells.slice(0, props.length);
+      for (let i = nextCells.length - 1; i >= 0; i -= 1) {
+        if (nextCells[i]) {
+          break;
+        }
+        nextCells.pop();
+      }
+
+      const formattedValue = internalFormatter(nextCells.map(c => c || ' ').join(''));
+      nextCells = strToArr(formattedValue).map((c, i) => {
+        if (c === ' ' && !nextCells[i]) {
+          return nextCells[i];
+        }
+        return c;
+      });
 
-    const valueCells = ref<string[]>(strToArr(internalFormatter(defaultValue || '')));
+      return nextCells;
+    };
+
+    // ======================= Change handlers =================
+    const onInputChange = (index: number, value: string) => {
+      const nextValueCells = patchValue(index, value);
+      const nextIndex = Math.min(index + value.length, props.length);
+      if (nextIndex !== index) {
+        refs.value[nextIndex]?.focus();
+      }
+
+      if (
+        props.onChange &&
+        nextValueCells.length === props.length &&
+        nextValueCells.every(v => v) &&
+        nextValueCells.some((v, i) => v !== valueCells.value[i])
+      ) {
+        props.onChange(nextValueCells.join(''));
+      }
+      valueCells.value = nextValueCells.slice();
+    };
 
     return () => {
       const cls = classNames(
@@ -44,19 +96,22 @@ export default defineComponent({
         attrs.class,
         hashId.value,
       );
-      const { length } = props;
+      const { length, autofocus } = props;
       return wrapSSR(
         <div class={cls}>
           {Array.from({ length }).map((_, index) => {
             const key = `opt-${index}`;
             const singleValue = valueCells.value[index];
-
             return (
               <OTPInput
+                ref={ref => (refs.value[index] = ref)}
                 key={key}
                 index={index}
                 class={`${prefixCls.value}-input`}
                 value={singleValue}
+                htmlSize={1}
+                onChange={onInputChange}
+                autofocus={index === 0 && autofocus}
               />
             );
           })}

components/input/style/otp.ts

@@ -10,8 +10,6 @@ const genOTPInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       alignItems: 'center',
       flexWrap: 'nowrap',
       columnGap: paddingXS,
-      padding: 0,
-      // border: 'none',
 
       '&-rtl': {
         direction: 'rtl',

components/vc-input/Input.tsx

@@ -181,7 +181,7 @@ export default defineComponent({
         ),
         ref: inputRef,
         key: 'ant-input',
-        size: htmlSize,
+        size: htmlSize ? String(htmlSize) : undefined,
         type,
         lazy: props.lazy,
       };
@@ -191,7 +191,7 @@ export default defineComponent({
       if (!inputProps.autofocus) {
         delete inputProps.autofocus;
       }
-      const inputNode = <BaseInputCore {...omit(inputProps, ['size'])} />;
+      const inputNode = <BaseInputCore {...inputProps} />;
       return inputNode;
     };
     const getSuffix = () => {

components/vc-input/inputProps.ts

@@ -91,6 +91,8 @@ export const inputProps = () => ({
   onPressEnter: Function as PropType<KeyboardEventHandler>,
   onKeydown: Function as PropType<KeyboardEventHandler>,
   onKeyup: Function as PropType<KeyboardEventHandler>,
+  onMousedown: { type: Function as PropType<MouseEventHandler>, default: undefined },
+  onMouseUp: { type: Function as PropType<MouseEventHandler>, default: undefined },
   onFocus: Function as PropType<FocusEventHandler>,
   onBlur: Function as PropType<FocusEventHandler>,
   onChange: Function as PropType<ChangeEventHandler>,