ip-input-vue3 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/IpInput.css +1 -1
- package/dist/IpInput.es.js +15 -15
- package/dist/IpInput.umd.js +1 -1
- package/package.json +1 -1
package/dist/IpInput.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ip_input_container[data-v-
|
|
1
|
+
.ip_input_container[data-v-ee23c0ef]{display:flex;align-items:center;border:1px solid #ccc;box-sizing:border-box;min-height:32px}.ip_input_container[data-v-ee23c0ef]:hover{border-color:#40a9ff}.ip_input_box[data-v-ee23c0ef]{width:0;flex:1;display:inline-flex;align-items:center}input[data-v-ee23c0ef]{width:0;outline:none;flex:1;border:none;text-align:center;line-height:1px;background-color:transparent}input[type=number][data-v-ee23c0ef]::-webkit-inner-spin-button,input[type=number][data-v-ee23c0ef]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.symbol_box[data-v-ee23c0ef]{font-weight:500}.port_input[data-v-ee23c0ef]{width:0;flex:1;padding:0 8px}
|
package/dist/IpInput.es.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const S = (o) => (w("data-v-
|
|
1
|
+
import { defineComponent as m, toRef as A, reactive as C, watch as g, openBlock as u, createElementBlock as c, Fragment as N, renderList as k, createCommentVNode as f, createElementVNode as h, pushScopeId as w, popScopeId as R } from "vue";
|
|
2
|
+
const S = (o) => (w("data-v-ee23c0ef"), o = o(), R(), o), V = { class: "ip_input_container" }, B = { class: "ip_input_box" }, E = ["name", "value", "onInput", "onKeydown", "disabled"], K = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "symbol_box"
|
|
5
5
|
}, j = {
|
|
6
6
|
key: 0,
|
|
7
7
|
class: "ip_input_box"
|
|
8
|
-
}, D = /* @__PURE__ */ S(() => /* @__PURE__ */
|
|
8
|
+
}, D = /* @__PURE__ */ S(() => /* @__PURE__ */ h("i", { style: { "font-style": "normal" } }, ":", -1)), F = ["value", "disabled"], L = m({
|
|
9
9
|
name: "IpInput"
|
|
10
|
-
}), O = /* @__PURE__ */
|
|
10
|
+
}), O = /* @__PURE__ */ m({
|
|
11
11
|
...L,
|
|
12
12
|
props: {
|
|
13
13
|
ip: {
|
|
@@ -26,9 +26,9 @@ const S = (o) => (w("data-v-bb3c700c"), o = o(), R(), o), V = { class: "ip_input
|
|
|
26
26
|
const l = o, _ = A(l, "port"), a = [], e = C({
|
|
27
27
|
ipControlArr: new Array(4),
|
|
28
28
|
ipArr: new Array(4)
|
|
29
|
-
}),
|
|
29
|
+
}), v = (t) => {
|
|
30
30
|
!t || a.findIndex((r) => r.name === t.name) > -1 || a.push(t);
|
|
31
|
-
},
|
|
31
|
+
}, y = (t, r) => {
|
|
32
32
|
const n = r.target.value;
|
|
33
33
|
if (r.target.value = e.ipControlArr[t] ?? "", r.data === "." && t < e.ipControlArr.length - 1) {
|
|
34
34
|
a[t + 1].focus(), e.ipControlArr[t + 1] !== "" && a[t + 1].select();
|
|
@@ -39,12 +39,12 @@ const S = (o) => (w("data-v-bb3c700c"), o = o(), R(), o), V = { class: "ip_input
|
|
|
39
39
|
Number(n) < 0 ? e.ipControlArr[t] = 0 : Number(n) > 255 ? e.ipControlArr[t] = 255 : e.ipControlArr[t] = n;
|
|
40
40
|
const p = e.ipControlArr.every((i) => i === "") ? "" : e.ipControlArr.join(".");
|
|
41
41
|
s("update:ip", p), s("change", p, l.port), n.length === 3 && t < e.ipControlArr.length - 1 && (a[t + 1].focus(), e.ipControlArr[t + 1] !== "" && a[t + 1].select());
|
|
42
|
-
},
|
|
42
|
+
}, I = (t, r) => {
|
|
43
43
|
if (r.keyCode === 8 && e.ipControlArr[t] === "" && t > 0) {
|
|
44
44
|
const n = a[t - 1];
|
|
45
45
|
n && n.focus();
|
|
46
46
|
}
|
|
47
|
-
},
|
|
47
|
+
}, b = (t) => {
|
|
48
48
|
t.target.value && (s("update:port", Number(t.target.value)), s("change", e.ipControlArr.join("."), Number(t.target.value)));
|
|
49
49
|
};
|
|
50
50
|
return g(
|
|
@@ -60,23 +60,23 @@ const S = (o) => (w("data-v-bb3c700c"), o = o(), R(), o), V = { class: "ip_input
|
|
|
60
60
|
(u(!0), c(N, null, k(e.ipControlArr, (n, p) => (u(), c("div", B, [
|
|
61
61
|
(u(), c("input", {
|
|
62
62
|
ref_for: !0,
|
|
63
|
-
ref:
|
|
63
|
+
ref: v,
|
|
64
64
|
key: p,
|
|
65
65
|
name: p + "",
|
|
66
66
|
value: n,
|
|
67
67
|
type: "text",
|
|
68
|
-
onInput: (i) =>
|
|
69
|
-
onKeydown: (i) =>
|
|
68
|
+
onInput: (i) => y(p, i),
|
|
69
|
+
onKeydown: (i) => I(p, i),
|
|
70
70
|
disabled: o.disabled
|
|
71
71
|
}, null, 40, E)),
|
|
72
72
|
p < e.ipControlArr.length - 1 ? (u(), c("i", K, "·")) : f("", !0)
|
|
73
73
|
]))), 256)),
|
|
74
|
-
o.port
|
|
74
|
+
o.port ? (u(), c("div", j, [
|
|
75
75
|
D,
|
|
76
|
-
|
|
76
|
+
h("input", {
|
|
77
77
|
class: "port_input",
|
|
78
78
|
value: _.value,
|
|
79
|
-
onInput:
|
|
79
|
+
onInput: b,
|
|
80
80
|
type: "number",
|
|
81
81
|
disabled: o.disabled
|
|
82
82
|
}, null, 40, F)
|
|
@@ -89,7 +89,7 @@ const P = (o, s) => {
|
|
|
89
89
|
for (const [_, a] of s)
|
|
90
90
|
l[_] = a;
|
|
91
91
|
return l;
|
|
92
|
-
}, d = /* @__PURE__ */ P(O, [["__scopeId", "data-v-
|
|
92
|
+
}, d = /* @__PURE__ */ P(O, [["__scopeId", "data-v-ee23c0ef"]]);
|
|
93
93
|
d.install = (o) => {
|
|
94
94
|
o.component("IpInput", d);
|
|
95
95
|
};
|
package/dist/IpInput.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(t,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(t=typeof globalThis<"u"?globalThis:t||self,t.IpInput=i(t.Vue))})(this,function(t){"use strict";const i=n=>(t.pushScopeId("data-v-
|
|
1
|
+
(function(t,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(t=typeof globalThis<"u"?globalThis:t||self,t.IpInput=i(t.Vue))})(this,function(t){"use strict";const i=n=>(t.pushScopeId("data-v-ee23c0ef"),n=n(),t.popScopeId(),n),_={class:"ip_input_container"},m={class:"ip_input_box"},h=["name","value","onInput","onKeydown","disabled"],I={key:0,class:"symbol_box"},y={key:0,class:"ip_input_box"},C=i(()=>t.createElementVNode("i",{style:{"font-style":"normal"}},":",-1)),b=["value","disabled"],A=t.defineComponent({name:"IpInput"}),k=t.defineComponent({...A,props:{ip:{type:String},port:{type:Number},disabled:{type:Boolean,default:!1}},emits:["update:port","update:ip","change"],setup(n,{emit:l}){const a=n,f=t.toRef(a,"port"),c=[],o=t.reactive({ipControlArr:new Array(4),ipArr:new Array(4)}),g=e=>{!e||c.findIndex(r=>r.name===e.name)>-1||c.push(e)},B=(e,r)=>{const p=r.target.value;if(r.target.value=o.ipControlArr[e]??"",r.data==="."&&e<o.ipControlArr.length-1){c[e+1].focus(),o.ipControlArr[e+1]!==""&&c[e+1].select();return}if(isNaN(Number(r.data)))return;Number(p)<0?o.ipControlArr[e]=0:Number(p)>255?o.ipControlArr[e]=255:o.ipControlArr[e]=p;const s=o.ipControlArr.every(u=>u==="")?"":o.ipControlArr.join(".");l("update:ip",s),l("change",s,a.port),p.length===3&&e<o.ipControlArr.length-1&&(c[e+1].focus(),o.ipControlArr[e+1]!==""&&c[e+1].select())},N=(e,r)=>{if(r.keyCode===8&&o.ipControlArr[e]===""&&e>0){const p=c[e-1];p&&p.focus()}},E=e=>{e.target.value&&(l("update:port",Number(e.target.value)),l("change",o.ipControlArr.join("."),Number(e.target.value)))};return t.watch(()=>a.ip,e=>{var r;(r=e==null?void 0:e.split("."))==null||r.forEach((p,s)=>{o.ipControlArr[s]=p?Number(p):""})},{immediate:!0}),(e,r)=>(t.openBlock(),t.createElementBlock("div",_,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o.ipControlArr,(p,s)=>(t.openBlock(),t.createElementBlock("div",m,[(t.openBlock(),t.createElementBlock("input",{ref_for:!0,ref:g,key:s,name:s+"",value:p,type:"text",onInput:u=>B(s,u),onKeydown:u=>N(s,u),disabled:n.disabled},null,40,h)),s<o.ipControlArr.length-1?(t.openBlock(),t.createElementBlock("i",I,"·")):t.createCommentVNode("",!0)]))),256)),n.port?(t.openBlock(),t.createElementBlock("div",y,[C,t.createElementVNode("input",{class:"port_input",value:f.value,onInput:E,type:"number",disabled:n.disabled},null,40,b)])):t.createCommentVNode("",!0)]))}}),V="",d=((n,l)=>{const a=n.__vccOpts||n;for(const[f,c]of l)a[f]=c;return a})(k,[["__scopeId","data-v-ee23c0ef"]]);return d.install=n=>{n.component("IpInput",d)},d});
|