@havue/ip-input 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 HappyPedestrian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# DragAndScale
+
+[documents](https://happypedestrian.github.io/havue/components/ip-input.html)

package/dist/ip-input.mjs

@@ -0,0 +1,164 @@
+import './style.css';
+import { defineComponent, ref, watch, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createElementVNode, createCommentVNode } from "vue";
+const withInstall = (main, extra) => {
+  main.install = (app) => {
+    for (const comp of [main, ...Object.values({})]) {
+      app.component(comp.name, comp);
+    }
+  };
+  return main;
+};
+function getValidIPItemValue(val) {
+  const num = parseInt(val + "");
+  return isNaN(num) ? "" : num < 0 ? "0" : num > 255 ? "255" : num + "";
+}
+function getRange(el) {
+  const ret = {
+    begin: null,
+    end: null,
+    result: null
+  };
+  ret.begin = el.selectionStart || 0;
+  ret.end = el.selectionEnd || 0;
+  ret.result = el.value.substring(ret.begin, ret.end);
+  el.focus();
+  return ret;
+}
+const _hoisted_1 = ["value", "disabled", "onInput", "onKeydown", "onPaste"];
+const _hoisted_2 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "HvIpInput"
+  },
+  __name: "IpInput",
+  props: {
+    modelValue: { default: "..." },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const inputRefs = ref([]);
+    const values = ref([]);
+    watch(
+      () => props.modelValue,
+      (value) => {
+        value = value + "";
+        const strs = value.split(".");
+        values.value = Array(4).fill("").map((_, i) => {
+          return getValidIPItemValue(strs[i] + "");
+        });
+      },
+      {
+        immediate: true
+      }
+    );
+    function onIPChange() {
+      const ip = values.value.map((val) => getValidIPItemValue(val)).join(".");
+      return emits("update:model-value", ip);
+    }
+    function handleChange(e, i) {
+      var _a;
+      if (props.disabled) {
+        return;
+      }
+      const curValue = e.target.value;
+      const num = getValidIPItemValue(curValue);
+      values.value[i] = num;
+      e.target.value = num;
+      onIPChange();
+      if (num === "") {
+        return e.preventDefault();
+      }
+      if (String(num).length === 3 && i < 3) {
+        (_a = inputRefs.value[i + 1]) == null ? void 0 : _a.focus();
+      }
+    }
+    function handleKeyDown(e, i) {
+      let domId = i;
+      const { end } = getRange(e.target);
+      switch (e.keyCode) {
+        case 37:
+        case 8: {
+          if (end === 0 && i > 0) {
+            domId = i - 1;
+          }
+          break;
+        }
+        case 39: {
+          if (end === e.target.value.length && i < 3) {
+            domId = i + 1;
+          }
+          break;
+        }
+        case 110:
+        case 190: {
+          e.preventDefault();
+          if (i < 3) {
+            domId = i + 1;
+          }
+          break;
+        }
+      }
+      const inputEl = inputRefs.value[domId];
+      inputEl.focus();
+      if (domId < i) {
+        const len = inputEl.value.length;
+        inputEl.selectionStart = inputEl.selectionEnd = len;
+      } else if (domId > i) {
+        inputEl.selectionStart = inputEl.selectionEnd = 0;
+      }
+    }
+    function handlePaste(e, i) {
+      if (!e.clipboardData || !e.clipboardData.getData) {
+        return;
+      }
+      const pasteData = e.clipboardData.getData("text/plain");
+      if (!pasteData) {
+        return;
+      }
+      const value = pasteData.split(".").map((v) => getValidIPItemValue(v));
+      if (value.length !== 4 - i) {
+        return;
+      }
+      if (!value.every((item) => item !== "")) {
+        return;
+      }
+      value.forEach((val, j) => {
+        values.value[i + j] = val + "";
+      });
+      onIPChange();
+      return e.preventDefault();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["hv-ip-input", props.disabled ? "is-disabled" : ""])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (value, i) => {
+          return openBlock(), createElementBlock("div", {
+            class: "hv-ip-input-item",
+            key: i
+          }, [
+            createElementVNode("input", {
+              ref_for: true,
+              ref_key: "inputRefs",
+              ref: inputRefs,
+              type: "text",
+              value,
+              disabled: props.disabled,
+              onInput: (e) => handleChange(e, i),
+              onKeydown: (e) => handleKeyDown(e, i),
+              onPaste: (e) => handlePaste(e, i)
+            }, null, 40, _hoisted_1),
+            i !== 3 ? (openBlock(), createElementBlock("i", _hoisted_2, ".")) : createCommentVNode("", true)
+          ]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const HvIpInput = withInstall(_sfc_main);
+export {
+  HvIpInput
+};

package/dist/ip-input.umd.js

@@ -0,0 +1,166 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["ip-input"] = {}, global.Vue));
+})(this, function(exports2, vue) {
+  "use strict";
+  const withInstall = (main, extra) => {
+    main.install = (app) => {
+      for (const comp of [main, ...Object.values({})]) {
+        app.component(comp.name, comp);
+      }
+    };
+    return main;
+  };
+  function getValidIPItemValue(val) {
+    const num = parseInt(val + "");
+    return isNaN(num) ? "" : num < 0 ? "0" : num > 255 ? "255" : num + "";
+  }
+  function getRange(el) {
+    const ret = {
+      begin: null,
+      end: null,
+      result: null
+    };
+    ret.begin = el.selectionStart || 0;
+    ret.end = el.selectionEnd || 0;
+    ret.result = el.value.substring(ret.begin, ret.end);
+    el.focus();
+    return ret;
+  }
+  const _hoisted_1 = ["value", "disabled", "onInput", "onKeydown", "onPaste"];
+  const _hoisted_2 = { key: 0 };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "HvIpInput"
+    },
+    __name: "IpInput",
+    props: {
+      modelValue: { default: "..." },
+      disabled: { type: Boolean, default: false }
+    },
+    emits: ["update:model-value"],
+    setup(__props, { emit: __emit }) {
+      const emits = __emit;
+      const props = __props;
+      const inputRefs = vue.ref([]);
+      const values = vue.ref([]);
+      vue.watch(
+        () => props.modelValue,
+        (value) => {
+          value = value + "";
+          const strs = value.split(".");
+          values.value = Array(4).fill("").map((_, i) => {
+            return getValidIPItemValue(strs[i] + "");
+          });
+        },
+        {
+          immediate: true
+        }
+      );
+      function onIPChange() {
+        const ip = values.value.map((val) => getValidIPItemValue(val)).join(".");
+        return emits("update:model-value", ip);
+      }
+      function handleChange(e, i) {
+        var _a;
+        if (props.disabled) {
+          return;
+        }
+        const curValue = e.target.value;
+        const num = getValidIPItemValue(curValue);
+        values.value[i] = num;
+        e.target.value = num;
+        onIPChange();
+        if (num === "") {
+          return e.preventDefault();
+        }
+        if (String(num).length === 3 && i < 3) {
+          (_a = inputRefs.value[i + 1]) == null ? void 0 : _a.focus();
+        }
+      }
+      function handleKeyDown(e, i) {
+        let domId = i;
+        const { end } = getRange(e.target);
+        switch (e.keyCode) {
+          case 37:
+          case 8: {
+            if (end === 0 && i > 0) {
+              domId = i - 1;
+            }
+            break;
+          }
+          case 39: {
+            if (end === e.target.value.length && i < 3) {
+              domId = i + 1;
+            }
+            break;
+          }
+          case 110:
+          case 190: {
+            e.preventDefault();
+            if (i < 3) {
+              domId = i + 1;
+            }
+            break;
+          }
+        }
+        const inputEl = inputRefs.value[domId];
+        inputEl.focus();
+        if (domId < i) {
+          const len = inputEl.value.length;
+          inputEl.selectionStart = inputEl.selectionEnd = len;
+        } else if (domId > i) {
+          inputEl.selectionStart = inputEl.selectionEnd = 0;
+        }
+      }
+      function handlePaste(e, i) {
+        if (!e.clipboardData || !e.clipboardData.getData) {
+          return;
+        }
+        const pasteData = e.clipboardData.getData("text/plain");
+        if (!pasteData) {
+          return;
+        }
+        const value = pasteData.split(".").map((v) => getValidIPItemValue(v));
+        if (value.length !== 4 - i) {
+          return;
+        }
+        if (!value.every((item) => item !== "")) {
+          return;
+        }
+        value.forEach((val, j) => {
+          values.value[i + j] = val + "";
+        });
+        onIPChange();
+        return e.preventDefault();
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(["hv-ip-input", props.disabled ? "is-disabled" : ""])
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(values.value, (value, i) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              class: "hv-ip-input-item",
+              key: i
+            }, [
+              vue.createElementVNode("input", {
+                ref_for: true,
+                ref_key: "inputRefs",
+                ref: inputRefs,
+                type: "text",
+                value,
+                disabled: props.disabled,
+                onInput: (e) => handleChange(e, i),
+                onKeydown: (e) => handleKeyDown(e, i),
+                onPaste: (e) => handlePaste(e, i)
+              }, null, 40, _hoisted_1),
+              i !== 3 ? (vue.openBlock(), vue.createElementBlock("i", _hoisted_2, ".")) : vue.createCommentVNode("", true)
+            ]);
+          }), 128))
+        ], 2);
+      };
+    }
+  });
+  const HvIpInput = withInstall(_sfc_main);
+  exports2.HvIpInput = HvIpInput;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/dist/style.css

@@ -0,0 +1,26 @@
+.hv-ip-input {
+  --hv-ip-input-width: 30px;
+  display: inline-block;
+  padding: 6px 8px;
+  font-size: 14px;
+  line-height: 19px;
+  outline: none;
+  border: 1px solid #373d48;
+  border-radius: 4px;
+}
+.hv-ip-input input {
+  width: var(--hv-ip-input-width);
+  text-align: center;
+  outline: none;
+  background-color: transparent;
+  border: none;
+}
+.hv-ip-input.is-disabled {
+  cursor: not-allowed;
+}
+.hv-ip-input.is-disabled input {
+  cursor: not-allowed;
+}
+.hv-ip-input .hv-ip-input-item {
+  display: inline-block;
+}

package/dist/types/src/IpInput.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    modelValue: string | undefined;
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:model-value": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:model-value"?: ((value: string) => any) | undefined;
+}>, {
+    modelValue: string | undefined;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/src/index.d.ts

@@ -0,0 +1,3 @@
+import type { SFCWithInstall } from '@havue/utils';
+import IpInput from './IpInput.vue';
+export declare const HvIpInput: SFCWithInstall<typeof IpInput>;

package/dist/types/src/utils/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * IP每一项值是否有效 | IP Whether each entry value is valid
+ * @param val 单个IP值 | Single IP value
+ */
+export declare function getValidIPItemValue(val: string | number): string;
+/**
+ * 光标在输入框文本中的位置 | The position of the cursor within the text of the input field
+ * @param { HTMLInputElement } el
+ */
+export declare function getRange(el: HTMLInputElement): {
+    begin: number | null;
+    end: number | null;
+    result: string | null;
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@havue/ip-input",
+  "version": "1.2.0",
+  "description": "Ip address input components for Vue3",
+  "keywords": [
+    "havue",
+    "components",
+    "ip",
+    "address",
+    "input",
+    "vue3"
+  ],
+  "license": "MIT",
+  "homepage": "https://happypedestrian.github.io/havue/guide/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HappyPedestrian/havue.git"
+  },
+  "dependencies": {
+    "@havue/shared": "^1.2.0"
+  },
+  "devDependencies": {
+    "vue": "^3.3.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/ip-input.umd.js",
+  "module": "./dist/ip-input.mjs",
+  "types": "./dist/types/src/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/ip-input.umd.js",
+      "import": "./dist/ip-input.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build --mode package"
+  }
+}