@opensig/opendesign/lib/ip-input/OIpInput.vue.js

"use strict";
const vue = require("vue");
const index = require("../input/index.js");
const InBox_vue_vue_type_script_setup_true_lang = require("../_components/in-box/InBox.vue.js");
const types = require("./types.js");
const provide = require("../form/provide.js");
const keycode = require("../_utils/keycode.js");
const helper = require("../_utils/helper.js");
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__ */ vue.defineComponent({
  __name: "OIpInput",
  props: types.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 = vue.ref([]);
    const segmentsLen = vue.computed(() => props.segmentsLen);
    const formItemInjection = vue.inject(provide.formItemInjectKey, null);
    const color = vue.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 = vue.ref(initData(originObj, segmentsLen.value));
    const validateSegment = (index2) => {
      const val = ipSegments.value[index2].value;
      const num = parseInt(val, 10);
      if (Number.isNaN(num)) {
        ipSegments.value[index2].invalid = false;
        return;
      }
      ipSegments.value[index2].invalid = num < MIN_NUM || num > MAX_NUM;
    };
    const adjustSegment = (index2) => {
      validateSegment(index2);
      if (ipSegments.value[index2].invalid) {
        ipSegments.value[index2].value = helper.formateToString(MAX_NUM);
      }
    };
    const initIpSegments = () => {
      if (!props.modelValue) return;
      const segments = props.modelValue.split(".");
      segments.forEach((val, index2) => {
        if (index2 < segmentsLen.value) {
          ipSegments.value[index2].value = val.replace(reg, "");
          adjustSegment(index2);
        }
      });
    };
    const handleUpdate = (index2, v) => {
      ipSegments.value[index2].value = v.replace(reg, "");
      adjustSegment(index2);
      if (ipSegments.value[index2].value.length === MAX_LEN && index2 < segmentsLen.value - 1) {
        focusNextInput(index2);
      }
    };
    const handleKeydown = (e, index2) => {
      if (props.disabled) {
        return;
      }
      if (e.key === keycode.Backspace.key && ipSegments.value[index2].value === "" && index2 > 0) {
        focusPrevInput(index2);
      }
    };
    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(helper.formateToString(num));
      });
      return isValid ? validSegments.join(".") : "";
    };
    const focusNextInput = (index2) => {
      if (index2 < segmentsLen.value) {
        const nextInput = inputRefs.value[index2 + 1];
        nextInput == null ? void 0 : nextInput.focus();
      }
    };
    const focusPrevInput = (index2) => {
      if (index2 > 0) {
        const prevInput = inputRefs.value[index2 - 1];
        prevInput == null ? void 0 : prevInput.focus();
      }
    };
    vue.watch(
      () => props.modelValue,
      () => initIpSegments(),
      { immediate: true }
    );
    vue.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 }
    );
    vue.onMounted(() => {
      initIpSegments();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(InBox_vue_vue_type_script_setup_true_lang), {
        class: "o-ip-input",
        color: color.value,
        size: props.size,
        disabled: props.disabled,
        round: props.round,
        readonly: props.readonly,
        variant: props.variant
      }, {
        default: vue.withCtx(() => [
          (vue.openBlock(true), vue.createElementBlock(
            vue.Fragment,
            null,
            vue.renderList(ipSegments.value, (segment, index$1) => {
              return vue.openBlock(), vue.createElementBlock(
                vue.Fragment,
                { key: index$1 },
                [
                  vue.createVNode(vue.unref(index.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$1] = el,
                    onKeydown: ($event) => handleKeydown($event, index$1),
                    "onUpdate:modelValue": (v) => {
                      handleUpdate(index$1, v);
                    }
                  }, null, 8, ["variant", "readonly", "size", "disabled", "modelValue", "onKeydown", "onUpdate:modelValue"]),
                  index$1 < ipSegments.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1)) : vue.createCommentVNode("v-if", true)
                ],
                64
                /* STABLE_FRAGMENT */
              );
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ]),
        _: 1
        /* STABLE */
      }, 8, ["color", "size", "disabled", "round", "readonly", "variant"]);
    };
  }
});
module.exports = _sfc_main;