Skip to content

Commit 45ba5d5

Browse files
author
Justin Moreland
committed
Changes page title and favicon
1 parent 602915a commit 45ba5d5

10 files changed

+163
-65
lines changed

‎dist/float-label.svg

+13
Loading

‎dist/style.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vite.svg

-1
This file was deleted.

‎dist/vue3-float-label.js

+127-47
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,146 @@
1-
import { ref as l, computed as i, watch as S, onMounted as T, onBeforeUnmount as B, openBlock as C, createElementBlock as k, normalizeClass as I, unref as s, renderSlot as M, createElementVNode as U, toDisplayString as q } from "vue";
2-
const A = ["for"], H = {
1+
import { ref as o, computed as x, watch as I, onMounted as M, onBeforeUnmount as j, openBlock as v, createElementBlock as _, normalizeClass as w, unref as s, renderSlot as W, createElementVNode as e, toDisplayString as k, createCommentVNode as q, createTextVNode as D, Fragment as H, createVNode as i, withCtx as d, withDirectives as P, isRef as R, vModelText as z, createApp as O } from "vue";
2+
const Q = {
3+
key: 0,
4+
class: "float-label__label float-label--no-click"
5+
}, G = { class: "float-label__label__text" }, J = ["for"], K = {
6+
key: 0,
7+
class: "float-label__label__bg"
8+
}, X = /* @__PURE__ */ D(), Y = { class: "float-label__label__text" }, c = {
39
__name: "FloatLabel",
410
props: {
511
label: { type: String, default: "" },
6-
float: { type: Boolean },
12+
float: { type: Boolean, default: null },
713
onFocus: { type: Boolean, default: !1 }
814
},
9-
setup(u) {
10-
const a = u;
11-
let d = l(null), c = l(""), o = l("");
12-
l(a.label);
13-
let t = l({}), r = l(""), p = l(""), f = l(!1), m = l(!1);
14-
const h = "[type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select", v = i(() => a.label), g = i(() => o.value && c.value !== o.value), F = i(() => {
15-
let e = !1;
16-
return a.float ? e = a.float : e = f.value, e;
17-
}), y = () => {
18-
c.value = v.value ? a.label : o.value;
19-
}, E = () => t.value.getAttribute("id"), x = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (n) => (n ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> n / 4).toString(16)), _ = () => {
20-
switch (p.value) {
15+
setup(g) {
16+
const a = g;
17+
let h = o(null), r = o(""), n = o("");
18+
o(a.label);
19+
let t = o({}), p = o(""), u = o(""), m = o(!1), y = o(!1), T = o(!1);
20+
const S = "[type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select", E = x(() => a.label), V = x(() => u.value === "select" ? !0 : n.value && r.value !== n.value), C = x(() => {
21+
let l = !1;
22+
return a.float ? l = !0 : l = m.value && m.value !== "0", l;
23+
}), F = () => {
24+
r.value = E.value ? a.label : n.value;
25+
}, L = () => t.value.getAttribute("id"), U = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (f) => (f ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> f / 4).toString(16)), $ = () => {
26+
switch (u.value) {
2127
case "input":
2228
case "textarea":
2329
return t.value.placeholder;
2430
case "select":
25-
let e = t.value.querySelector("option[disabled][selected]");
26-
return e ? e.innerHTML : "";
31+
let l = t.value.querySelector("option:disabled");
32+
return l ? l.innerHTML : "";
2733
default:
2834
return "";
2935
}
30-
}, w = () => {
31-
r.value || (r.value = x(), t.value.id = r.value);
32-
}, L = () => {
33-
t.value.addEventListener("input", b);
34-
}, b = (e) => {
35-
f.value = e.target.value.length > 0;
36-
}, V = () => {
37-
t.value.removeEventListener("input", b);
36+
}, B = () => {
37+
p.value || (p.value = U(), t.value.id = p.value);
38+
}, N = () => {
39+
u.value === "select" ? t.value.addEventListener("change", b) : t.value.addEventListener("input", b);
40+
}, A = () => {
41+
u.value === "select" ? t.value.removeEventListener("change", b) : t.value.removeEventListener("input", b);
42+
}, b = (l) => {
43+
m.value = l.target.value.length > 0;
3844
};
39-
return S(v, (e, n) => {
40-
y();
41-
}), T(() => {
42-
t.value = d.value.querySelector(h), m.value = !!t.value, m.value ? (r.value = E(), p.value = t.value ? t.value.tagName.toLowerCase() : "", o.value = _(), w(), setTimeout(() => {
43-
L();
44-
}, 200)) : o.value = "", y();
45-
}), B(() => {
46-
V();
47-
}), (e, n) => (C(), k("div", {
48-
class: I(["float-label", { "float-label--fade-anim": s(g), "float-label--on-focus": a.onFocus, "float-label--fixed": s(F) }]),
45+
return I(E, (l, f) => {
46+
F();
47+
}), M(() => {
48+
t.value = h.value.querySelector(S), y.value = !!t.value, T.value = a.float === null, y.value ? (p.value = L(), u.value = t.value ? t.value.tagName.toLowerCase() : "", m.value = !!t.value.value, n.value = $(), B(), T.value === !0 && setTimeout(() => {
49+
N();
50+
}, 200)) : n.value = "", F();
51+
}), j(() => {
52+
y.value && A();
53+
}), (l, f) => (v(), _("div", {
54+
class: w(["float-label", { "float-label--fade-anim": s(V), "float-label--on-focus": a.onFocus, "float-label--fixed": s(C) }]),
4955
ref_key: "root",
50-
ref: d
56+
ref: h
5157
}, [
52-
M(e.$slots, "default"),
53-
U("label", {
54-
class: "float-label__label",
55-
for: s(r)
56-
}, q(s(c)), 9, A)
58+
W(l.$slots, "default"),
59+
s(u) === "" ? (v(), _("div", Q, [
60+
e("span", G, k(s(r)), 1)
61+
])) : (v(), _("label", {
62+
key: 1,
63+
class: w(["float-label__label", { "float-label--no-click": s(u) === "select" }]),
64+
for: s(p)
65+
}, [
66+
s(u) === "textarea" ? (v(), _("span", K)) : q("", !0),
67+
X,
68+
e("span", Y, k(s(r)), 1)
69+
], 10, J))
5770
], 2));
5871
}
59-
}, z = {
60-
install: (u, a) => {
61-
u.component("FloatLabel", H);
72+
}, Z = /* @__PURE__ */ e("input", {
73+
id: "justin-id",
74+
type: "text",
75+
placeholder: "This is placeholder text"
76+
}, null, -1), ee = /* @__PURE__ */ e("input", { type: "text" }, null, -1), te = /* @__PURE__ */ e("textarea", {
77+
name: "textarea",
78+
id: "textarea",
79+
cols: "30",
80+
rows: "10",
81+
placeholder: "This is a text area"
82+
}, null, -1), le = /* @__PURE__ */ e("select", {
83+
name: "justins-select",
84+
id: "justins-select"
85+
}, [
86+
/* @__PURE__ */ e("option", {
87+
value: "",
88+
disabled: "disabled",
89+
selected: ""
90+
}, "Select a number"),
91+
/* @__PURE__ */ e("option", { value: "1" }, "one"),
92+
/* @__PURE__ */ e("option", { value: "2" }, "two"),
93+
/* @__PURE__ */ e("option", { value: "3" }, "three"),
94+
/* @__PURE__ */ e("option", { value: "4" }, "four"),
95+
/* @__PURE__ */ e("option", { value: "5" }, "five")
96+
], -1), ae = /* @__PURE__ */ e("div", { style: { padding: "24px", border: "1px solid red" } }, null, -1), oe = {
97+
__name: "App",
98+
setup(g) {
99+
let a = o("This is existing v-model text");
100+
return (h, r) => (v(), _(H, null, [
101+
i(c, { label: "This is label text" }, {
102+
default: d(() => [
103+
Z
104+
]),
105+
_: 1
106+
}),
107+
i(c, { label: "This has no placeholder but a :label prop" }, {
108+
default: d(() => [
109+
ee
110+
]),
111+
_: 1
112+
}),
113+
i(c, null, {
114+
default: d(() => [
115+
te
116+
]),
117+
_: 1
118+
}),
119+
i(c, { label: "Select a big number" }, {
120+
default: d(() => [
121+
le
122+
]),
123+
_: 1
124+
}),
125+
i(c, null, {
126+
default: d(() => [
127+
P(e("input", {
128+
type: "text",
129+
"onUpdate:modelValue": r[0] || (r[0] = (n) => R(a) ? a.value = n : a = n),
130+
placeholder: "Pre-filled Text"
131+
}, null, 512), [
132+
[z, s(a)]
133+
])
134+
]),
135+
_: 1
136+
}),
137+
i(c, { label: "This is a <div> with a red border" }, {
138+
default: d(() => [
139+
ae
140+
]),
141+
_: 1
142+
})
143+
], 64));
62144
}
63145
};
64-
export {
65-
z as default
66-
};
146+
O(oe).mount("#app");

‎dist/vue3-float-label.umd.cjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
(function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(e=typeof globalThis<"u"?globalThis:e||self,e["vue3-float-label"]=s(e.Vue))})(this,function(e){"use strict";const s="",h=["for"],g={__name:"FloatLabel",props:{label:{type:String,default:""},float:{type:Boolean},onFocus:{type:Boolean,default:!1}},setup(u){const a=u;let c=e.ref(null),f=e.ref(""),o=e.ref("");e.ref(a.label);let l=e.ref({}),n=e.ref(""),i=e.ref(""),d=e.ref(!1),p=e.ref(!1);const v="[type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select",m=e.computed(()=>a.label),F=e.computed(()=>o.value&&f.value!==o.value),x=e.computed(()=>{let t=!1;return a.float?t=a.float:t=d.value,t}),y=()=>{f.value=m.value?a.label:o.value},E=()=>l.value.getAttribute("id"),_=()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,r=>(r^crypto.getRandomValues(new Uint8Array(1))[0]&15>>r/4).toString(16)),w=()=>{switch(i.value){case"input":case"textarea":return l.value.placeholder;case"select":let t=l.value.querySelector("option[disabled][selected]");return t?t.innerHTML:"";default:return""}},T=()=>{n.value||(n.value=_(),l.value.id=n.value)},V=()=>{l.value.addEventListener("input",b)},b=t=>{d.value=t.target.value.length>0},L=()=>{l.value.removeEventListener("input",b)};return e.watch(m,(t,r)=>{y()}),e.onMounted(()=>{l.value=c.value.querySelector(v),p.value=!!l.value,p.value?(n.value=E(),i.value=l.value?l.value.tagName.toLowerCase():"",o.value=w(),T(),setTimeout(()=>{V()},200)):o.value="",y()}),e.onBeforeUnmount(()=>{L()}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["float-label",{"float-label--fade-anim":e.unref(F),"float-label--on-focus":a.onFocus,"float-label--fixed":e.unref(x)}]),ref_key:"root",ref:c},[e.renderSlot(t.$slots,"default"),e.createElementVNode("label",{class:"float-label__label",for:e.unref(n)},e.toDisplayString(e.unref(f)),9,h)],2))}};return{install:(u,a)=>{u.component("FloatLabel",g)}}});
1+
(function(e,d){typeof exports=="object"&&typeof module<"u"?d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis<"u"?globalThis:e||self,d(e.Vue))})(this,function(e){"use strict";const d="",W="",y={key:0,class:"float-label__label float-label--no-click"},E={class:"float-label__label__text"},V=["for"],g={key:0,class:"float-label__label__bg"},N=e.createTextVNode(),T={class:"float-label__label__text"},s={__name:"FloatLabel",props:{label:{type:String,default:""},float:{type:Boolean,default:null},onFocus:{type:Boolean,default:!1}},setup(_){const a=_;let u=e.ref(null),r=e.ref(""),o=e.ref("");e.ref(a.label);let t=e.ref({}),c=e.ref(""),n=e.ref(""),f=e.ref(!1),m=e.ref(!1),h=e.ref(!1);const L="[type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select",b=e.computed(()=>a.label),U=e.computed(()=>n.value==="select"?!0:o.value&&r.value!==o.value),$=e.computed(()=>{let l=!1;return a.float?l=!0:l=f.value&&f.value!=="0",l}),x=()=>{r.value=b.value?a.label:o.value},j=()=>t.value.getAttribute("id"),A=()=>([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,i=>(i^crypto.getRandomValues(new Uint8Array(1))[0]&15>>i/4).toString(16)),I=()=>{switch(n.value){case"input":case"textarea":return t.value.placeholder;case"select":let l=t.value.querySelector("option:disabled");return l?l.innerHTML:"";default:return""}},M=()=>{c.value||(c.value=A(),t.value.id=c.value)},q=()=>{n.value==="select"?t.value.addEventListener("change",p):t.value.addEventListener("input",p)},D=()=>{n.value==="select"?t.value.removeEventListener("change",p):t.value.removeEventListener("input",p)},p=l=>{f.value=l.target.value.length>0};return e.watch(b,(l,i)=>{x()}),e.onMounted(()=>{t.value=u.value.querySelector(L),m.value=!!t.value,h.value=a.float===null,m.value?(c.value=j(),n.value=t.value?t.value.tagName.toLowerCase():"",f.value=!!t.value.value,o.value=I(),M(),h.value===!0&&setTimeout(()=>{q()},200)):o.value="",x()}),e.onBeforeUnmount(()=>{m.value&&D()}),(l,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["float-label",{"float-label--fade-anim":e.unref(U),"float-label--on-focus":a.onFocus,"float-label--fixed":e.unref($)}]),ref_key:"root",ref:u},[e.renderSlot(l.$slots,"default"),e.unref(n)===""?(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("span",E,e.toDisplayString(e.unref(r)),1)])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["float-label__label",{"float-label--no-click":e.unref(n)==="select"}]),for:e.unref(c)},[e.unref(n)==="textarea"?(e.openBlock(),e.createElementBlock("span",g)):e.createCommentVNode("",!0),N,e.createElementVNode("span",T,e.toDisplayString(e.unref(r)),1)],10,V))],2))}},k=e.createElementVNode("input",{id:"justin-id",type:"text",placeholder:"This is placeholder text"},null,-1),w=e.createElementVNode("input",{type:"text"},null,-1),C=e.createElementVNode("textarea",{name:"textarea",id:"textarea",cols:"30",rows:"10",placeholder:"This is a text area"},null,-1),B=e.createElementVNode("select",{name:"justins-select",id:"justins-select"},[e.createElementVNode("option",{value:"",disabled:"disabled",selected:""},"Select a number"),e.createElementVNode("option",{value:"1"},"one"),e.createElementVNode("option",{value:"2"},"two"),e.createElementVNode("option",{value:"3"},"three"),e.createElementVNode("option",{value:"4"},"four"),e.createElementVNode("option",{value:"5"},"five")],-1),F=e.createElementVNode("div",{style:{padding:"24px",border:"1px solid red"}},null,-1),S={__name:"App",setup(_){let a=e.ref("This is existing v-model text");return(u,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(s,{label:"This is label text"},{default:e.withCtx(()=>[k]),_:1}),e.createVNode(s,{label:"This has no placeholder but a :label prop"},{default:e.withCtx(()=>[w]),_:1}),e.createVNode(s,null,{default:e.withCtx(()=>[C]),_:1}),e.createVNode(s,{label:"Select a big number"},{default:e.withCtx(()=>[B]),_:1}),e.createVNode(s,null,{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("input",{type:"text","onUpdate:modelValue":r[0]||(r[0]=o=>e.isRef(a)?a.value=o:a=o),placeholder:"Pre-filled Text"},null,512),[[e.vModelText,e.unref(a)]])]),_:1}),e.createVNode(s,{label:"This is a <div> with a red border"},{default:e.withCtx(()=>[F]),_:1})],64))}};e.createApp(S).mount("#app")});

0 commit comments

Comments
 (0)