@opensig/opendesign/es/ip-input/OIpInput.vue.mjs

import { defineComponent, ref, computed, inject, watch, onMounted, createBlock, openBlock, unref, withCtx, createElementBlock, Fragment, renderList, createVNode, createCommentVNode } from "vue";
import { OInput } from "../input/index.mjs";
import _sfc_main$1 from "../_components/in-box/InBox.vue.mjs";
import { ipInputProps } from "./types.mjs";
import { formItemInjectKey } from "../form/provide.mjs";
import { Backspace } from "../_utils/keycode.mjs";
import { formateToString } from "../_utils/helper.mjs";
const _hoisted_1 = {
  key: 0,
  class: "o-ip-separator"
};
const MAX_LEN = 3;
const MIN_NUM = 0;
const MAX_NUM = 255;
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OIpInput",
  props: ipInputProps,
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const reg = /\D/g;
    const originObj = { value: "", invalid: false };
    const inputRefs = ref([]);
    const segmentsLen = computed(() => props.segmentsLen);
    const formItemInjection = inject(formItemInjectKey, null);
    const color = computed(() => {
      var _a;
      if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
        return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || void 0;
      } else {
        return props.color;
      }
    });
    const initData = (data, n) => {
      return Array(n).fill(null).map(() => ({ ...data }));
    };
    const ipSegments = ref(initData(originObj, segmentsLen.value));
    const validateSegment = (index) => {
      const val = ipSegments.value[index].value;
      const num = parseInt(val, 10);
      if (Number.isNaN(num)) {
        ipSegments.value[index].invalid = false;
        return;
      }
      ipSegments.value[index].invalid = num < MIN_NUM || num > MAX_NUM;
    };
    const adjustSegment = (index) => {
      validateSegment(index);
      if (ipSegments.value[index].invalid) {
        ipSegments.value[index].value = formateToString(MAX_NUM);
      }
    };
    const initIpSegments = () => {
      if (!props.modelValue) return;
      const segments = props.modelValue.split(".");
      segments.forEach((val, index) => {
        if (index < segmentsLen.value) {
          ipSegments.value[index].value = val.replace(reg, "");
          adjustSegment(index);
        }
      });
    };
    const handleUpdate = (index, v) => {
      ipSegments.value[index].value = v.replace(reg, "");
      adjustSegment(index);
      if (ipSegments.value[index].value.length === MAX_LEN && index < segmentsLen.value - 1) {
        focusNextInput(index);
      }
    };
    const handleKeydown = (e, index) => {
      if (props.disabled) {
        return;
      }
      if (e.key === Backspace.key && ipSegments.value[index].value === "" && index > 0) {
        focusPrevInput(index);
      }
    };
    const getValidIp = () => {
      const validSegments = [];
      let isValid = true;
      ipSegments.value.forEach((segment) => {
        const num = parseInt(segment.value, 10);
        if (isNaN(num) || num < MIN_NUM || num > MAX_NUM) {
          isValid = false;
        }
        validSegments.push(formateToString(num));
      });
      return isValid ? validSegments.join(".") : "";
    };
    const focusNextInput = (index) => {
      if (index < segmentsLen.value) {
        const nextInput = inputRefs.value[index + 1];
        nextInput == null ? void 0 : nextInput.focus();
      }
    };
    const focusPrevInput = (index) => {
      if (index > 0) {
        const prevInput = inputRefs.value[index - 1];
        prevInput == null ? void 0 : prevInput.focus();
      }
    };
    watch(
      () => props.modelValue,
      () => initIpSegments(),
      { immediate: true }
    );
    watch(
      ipSegments,
      () => {
        var _a, _b;
        const ip = getValidIp();
        emit("update:modelValue", ip);
        emit("change", Boolean(ip), ip);
        (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
      },
      { deep: true }
    );
    onMounted(() => {
      initIpSegments();
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(_sfc_main$1), {
        class: "o-ip-input",
        color: color.value,
        size: props.size,
        disabled: props.disabled,
        round: props.round,
        readonly: props.readonly,
        variant: props.variant
      }, {
        default: withCtx(() => [
          (openBlock(true), createElementBlock(
            Fragment,
            null,
            renderList(ipSegments.value, (segment, index) => {
              return openBlock(), createElementBlock(
                Fragment,
                { key: index },
                [
                  createVNode(unref(OInput), {
                    class: "o-ip-segment",
                    "show-length": "never",
                    variant: props.variant,
                    readonly: props.readonly,
                    size: props.size,
                    disabled: props.disabled,
                    modelValue: segment.value,
                    "max-length": 3,
                    "input-on-outlimit": false,
                    ref_for: true,
                    ref: (el) => inputRefs.value[index] = el,
                    onKeydown: ($event) => handleKeydown($event, index),
                    "onUpdate:modelValue": (v) => {
                      handleUpdate(index, v);
                    }
                  }, null, 8, ["variant", "readonly", "size", "disabled", "modelValue", "onKeydown", "onUpdate:modelValue"]),
                  index < ipSegments.value.length - 1 ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true)
                ],
                64
                /* STABLE_FRAGMENT */
              );
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ]),
        _: 1
        /* STABLE */
      }, 8, ["color", "size", "disabled", "round", "readonly", "variant"]);
    };
  }
});
export {
  _sfc_main as default
};