ip-input-vue3 0.1.4 → 0.1.5
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 +44 -38
- 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-cd2734c1]{display:flex;align-items:center;border:1px solid #ccc;box-sizing:border-box;min-height:32px;border-radius:4px;overflow:hidden}.ip_input_container[data-v-cd2734c1]:hover{border-color:#40a9ff}.ip_input_box[data-v-cd2734c1]{width:0;flex:1;display:inline-flex;align-items:center}.port_input_box[data-v-cd2734c1]{width:50px;display:inline-flex;align-items:center}input[data-v-cd2734c1]{width:0;outline:none;flex:1;border:none;text-align:center;line-height:1px;background-color:transparent}input[type=number][data-v-cd2734c1]::-webkit-inner-spin-button,input[type=number][data-v-cd2734c1]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.symbol_box[data-v-cd2734c1]{font-weight:500;line-height:1}.port_input[data-v-cd2734c1]{width:0;flex:1;padding:0 8px}
|
package/dist/IpInput.es.js
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
|
-
import { defineComponent as m, toRef as A, reactive as C, watch as g, openBlock as u, createElementBlock as c,
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as m, toRef as A, reactive as C, watch as g, openBlock as u, createElementBlock as c, normalizeStyle as N, Fragment as k, renderList as w, createCommentVNode as f, createElementVNode as y, pushScopeId as R, popScopeId as S } from "vue";
|
|
2
|
+
const V = (o) => (R("data-v-cd2734c1"), o = o(), S(), o), 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
|
-
class: "
|
|
8
|
-
},
|
|
7
|
+
class: "port_input_box"
|
|
8
|
+
}, z = /* @__PURE__ */ V(() => /* @__PURE__ */ y("i", {
|
|
9
|
+
class: "symbol_box",
|
|
10
|
+
style: { "font-style": "normal" }
|
|
11
|
+
}, ":", -1)), D = ["value", "disabled"], F = m({
|
|
9
12
|
name: "IpInput"
|
|
10
|
-
}),
|
|
11
|
-
...
|
|
13
|
+
}), L = /* @__PURE__ */ m({
|
|
14
|
+
...F,
|
|
12
15
|
props: {
|
|
13
16
|
ip: {
|
|
14
17
|
type: String
|
|
@@ -23,25 +26,25 @@ const S = (o) => (w("data-v-1b423e61"), o = o(), R(), o), V = { class: "ip_input
|
|
|
23
26
|
},
|
|
24
27
|
emits: ["update:port", "update:ip", "change"],
|
|
25
28
|
setup(o, { emit: s }) {
|
|
26
|
-
const l = o,
|
|
29
|
+
const l = o, d = A(l, "port"), p = [], e = C({
|
|
27
30
|
ipControlArr: new Array(4),
|
|
28
31
|
ipArr: new Array(4)
|
|
29
|
-
}),
|
|
30
|
-
!t ||
|
|
32
|
+
}), h = (t) => {
|
|
33
|
+
!t || p.findIndex((r) => r.name === t.name) > -1 || p.push(t);
|
|
31
34
|
}, v = (t, r) => {
|
|
32
35
|
const n = r.target.value;
|
|
33
36
|
if (r.target.value = e.ipControlArr[t] ?? "", r.data === "." && t < e.ipControlArr.length - 1) {
|
|
34
|
-
|
|
37
|
+
p[t + 1].focus(), e.ipControlArr[t + 1] !== "" && p[t + 1].select();
|
|
35
38
|
return;
|
|
36
39
|
}
|
|
37
40
|
if (isNaN(Number(r.data)))
|
|
38
41
|
return;
|
|
39
42
|
Number(n) < 0 ? e.ipControlArr[t] = 0 : Number(n) > 255 ? e.ipControlArr[t] = 255 : e.ipControlArr[t] = n;
|
|
40
|
-
const
|
|
41
|
-
s("update:ip",
|
|
42
|
-
},
|
|
43
|
+
const a = e.ipControlArr.every((i) => i === "") ? "" : e.ipControlArr.join(".");
|
|
44
|
+
s("update:ip", a), s("change", a, l.port), n.length === 3 && t < e.ipControlArr.length - 1 && (p[t + 1].focus(), e.ipControlArr[t + 1] !== "" && p[t + 1].select());
|
|
45
|
+
}, b = (t, r) => {
|
|
43
46
|
if (r.keyCode === 8 && e.ipControlArr[t] === "" && t > 0) {
|
|
44
|
-
const n =
|
|
47
|
+
const n = p[t - 1];
|
|
45
48
|
n && n.focus();
|
|
46
49
|
}
|
|
47
50
|
}, I = (t) => {
|
|
@@ -51,49 +54,52 @@ const S = (o) => (w("data-v-1b423e61"), o = o(), R(), o), V = { class: "ip_input
|
|
|
51
54
|
() => l.ip,
|
|
52
55
|
(t) => {
|
|
53
56
|
var r;
|
|
54
|
-
(r = t == null ? void 0 : t.split(".")) == null || r.forEach((n,
|
|
55
|
-
e.ipControlArr[
|
|
57
|
+
(r = t == null ? void 0 : t.split(".")) == null || r.forEach((n, a) => {
|
|
58
|
+
e.ipControlArr[a] = n ? Number(n) : "";
|
|
56
59
|
});
|
|
57
60
|
},
|
|
58
61
|
{ immediate: !0 }
|
|
59
|
-
), (t, r) => (u(), c("div",
|
|
60
|
-
|
|
62
|
+
), (t, r) => (u(), c("div", {
|
|
63
|
+
class: "ip_input_container",
|
|
64
|
+
style: N({ minWidth: o.port ? "210px" : "160px" })
|
|
65
|
+
}, [
|
|
66
|
+
(u(!0), c(k, null, w(e.ipControlArr, (n, a) => (u(), c("div", B, [
|
|
61
67
|
(u(), c("input", {
|
|
62
68
|
ref_for: !0,
|
|
63
|
-
ref:
|
|
64
|
-
key:
|
|
65
|
-
name:
|
|
69
|
+
ref: h,
|
|
70
|
+
key: a,
|
|
71
|
+
name: a + "",
|
|
66
72
|
value: n,
|
|
67
73
|
type: "text",
|
|
68
|
-
onInput: (i) => v(
|
|
69
|
-
onKeydown: (i) =>
|
|
74
|
+
onInput: (i) => v(a, i),
|
|
75
|
+
onKeydown: (i) => b(a, i),
|
|
70
76
|
disabled: o.disabled
|
|
71
77
|
}, null, 40, E)),
|
|
72
|
-
|
|
78
|
+
a < e.ipControlArr.length - 1 ? (u(), c("i", K, "·")) : f("", !0)
|
|
73
79
|
]))), 256)),
|
|
74
|
-
o.port ? (u(), c("div", j, [
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
o.port != null ? (u(), c("div", j, [
|
|
81
|
+
z,
|
|
82
|
+
y("input", {
|
|
77
83
|
class: "port_input",
|
|
78
|
-
value:
|
|
84
|
+
value: d.value,
|
|
79
85
|
onInput: I,
|
|
80
86
|
type: "number",
|
|
81
87
|
disabled: o.disabled
|
|
82
|
-
}, null, 40,
|
|
88
|
+
}, null, 40, D)
|
|
83
89
|
])) : f("", !0)
|
|
84
|
-
]));
|
|
90
|
+
], 4));
|
|
85
91
|
}
|
|
86
92
|
});
|
|
87
|
-
const
|
|
93
|
+
const O = (o, s) => {
|
|
88
94
|
const l = o.__vccOpts || o;
|
|
89
|
-
for (const [
|
|
90
|
-
l[
|
|
95
|
+
for (const [d, p] of s)
|
|
96
|
+
l[d] = p;
|
|
91
97
|
return l;
|
|
92
|
-
},
|
|
93
|
-
|
|
94
|
-
o.component("IpInput",
|
|
98
|
+
}, _ = /* @__PURE__ */ O(L, [["__scopeId", "data-v-cd2734c1"]]);
|
|
99
|
+
_.install = (o) => {
|
|
100
|
+
o.component("IpInput", _);
|
|
95
101
|
};
|
|
96
|
-
const
|
|
102
|
+
const W = _;
|
|
97
103
|
export {
|
|
98
|
-
|
|
104
|
+
W as default
|
|
99
105
|
};
|
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-cd2734c1"),n=n(),t.popScopeId(),n),_={class:"ip_input_box"},m=["name","value","onInput","onKeydown","disabled"],h={key:0,class:"symbol_box"},y={key:0,class:"port_input_box"},I=i(()=>t.createElementVNode("i",{class:"symbol_box",style:{"font-style":"normal"}},":",-1)),b=["value","disabled"],C=t.defineComponent({name:"IpInput"}),A=t.defineComponent({...C,props:{ip:{type:String},port:{type:Number},disabled:{type:Boolean,default:!1}},emits:["update:port","update:ip","change"],setup(n,{emit:s}){const a=n,f=t.toRef(a,"port"),c=[],o=t.reactive({ipControlArr:new Array(4),ipArr:new Array(4)}),k=e=>{!e||c.findIndex(r=>r.name===e.name)>-1||c.push(e)},g=(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 l=o.ipControlArr.every(u=>u==="")?"":o.ipControlArr.join(".");s("update:ip",l),s("change",l,a.port),p.length===3&&e<o.ipControlArr.length-1&&(c[e+1].focus(),o.ipControlArr[e+1]!==""&&c[e+1].select())},B=(e,r)=>{if(r.keyCode===8&&o.ipControlArr[e]===""&&e>0){const p=c[e-1];p&&p.focus()}},N=e=>{e.target.value&&(s("update:port",Number(e.target.value)),s("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,l)=>{o.ipControlArr[l]=p?Number(p):""})},{immediate:!0}),(e,r)=>(t.openBlock(),t.createElementBlock("div",{class:"ip_input_container",style:t.normalizeStyle({minWidth:n.port?"210px":"160px"})},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o.ipControlArr,(p,l)=>(t.openBlock(),t.createElementBlock("div",_,[(t.openBlock(),t.createElementBlock("input",{ref_for:!0,ref:k,key:l,name:l+"",value:p,type:"text",onInput:u=>g(l,u),onKeydown:u=>B(l,u),disabled:n.disabled},null,40,m)),l<o.ipControlArr.length-1?(t.openBlock(),t.createElementBlock("i",h,"·")):t.createCommentVNode("",!0)]))),256)),n.port!=null?(t.openBlock(),t.createElementBlock("div",y,[I,t.createElementVNode("input",{class:"port_input",value:f.value,onInput:N,type:"number",disabled:n.disabled},null,40,b)])):t.createCommentVNode("",!0)],4))}}),E="",d=((n,s)=>{const a=n.__vccOpts||n;for(const[f,c]of s)a[f]=c;return a})(A,[["__scopeId","data-v-cd2734c1"]]);return d.install=n=>{n.component("IpInput",d)},d});
|