vue3-float-label 1.0.0

package/README.md

@@ -0,0 +1,82 @@
+# Vue 3 Float Label
+
+Float Label like package for Vue 3. Written in Composition API and easily customizable with CSS.
+
+![Animation intro showing Vue 3 Float Label in action](src/demo.gif)
+
+```html
+<float-label>
+  <input type="text" placeholder="Label">
+</float-label>
+```
+
+## Installation
+
+Install the package via npm:
+```sh
+$ npm install vue3-float-label
+```
+
+## Usage
+
+To use the component locally within a single component:
+
+```html
+<template>
+  <FloatLabel label="Your Name">
+    <input type="text" placeholder="Enter your name" />
+  </FloatLabel>
+</template>
+
+<script setup>
+import { FloatLabel } from 'vue3-float-label';
+import 'vue3-float-label/dist/style.css'; // Import the stylesheet
+</script>
+```
+### Props
+<hr>
+
+#### `label` 
+
+**String** - If you want a different label than the placeholder text. You can also pass it dynamic text based on another value (i.e. `'Start time on ' + beginningDate` )
+
+Example:
+```html
+<float-label :label="'Your Name'">
+    <input type="text" placeholder="Enter your name">
+</float-label>
+```
+<hr>
+
+#### `float` 
+
+**Boolean** - Use this to manually control when the label is floated. This disables all other detection and `on-focus` prop.
+
+```html
+<float-label :float="name ? true : false">
+    <input v-model="name" type="text" placeholder="Enter your name">
+</float-label>
+```
+<hr>
+#### `on-focus`
+
+**Boolean** - Optional behavior that triggers the float when the field is in focus instead of when content is typed
+
+## Customizing Styles
+
+The `vue3-float-label` component uses CSS variables to allow easy customization of its appearance. You can either copy the styles and modify them yourself, or there are some variables you can override. Below are the default CSS variables defined in the component that you can override in your stylesheet:
+
+```css
+:root {
+    --vfl-padding-y: 17px;
+    --vfl-padding-x: 16px;
+    --vfl-label-color: #6c6c6c;
+    --border-color: lightgray;
+    --border-width: 1px;
+}
+```
+
+
+## License
+
+This project is licensed under the MIT License.

package/dist/float-label.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>float-label</title>
+    <g id="float-label" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" stroke="#979797" stroke-width="4" fill="#FFFFFF" x="2" y="2" width="124" height="124" rx="8"></rect>
+        <text id="label" font-family="OpenSans-Semibold, Open Sans" font-size="33.8253887" font-weight="500" fill="#4885FF">
+            <tspan x="12" y="39">label</tspan>
+        </text>
+        <text id="Text" font-family="OpenSans-Semibold, Open Sans" font-size="50.738083" font-weight="500" fill="#000000">
+            <tspan x="12" y="93">Text</tspan>
+        </text>
+    </g>
+</svg>

package/dist/style.css

@@ -0,0 +1,86 @@
+:root {
+    --vfl-padding-y: 17px;
+    --vfl-padding-x: 16px;
+    --vfl-label-color: #6c6c6c;
+    --border-color: lightgray;
+    --border-width: 1px;
+}
+.float-label {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+}
+.float-label__label__bg {
+    background-image: linear-gradient(180deg, #FFF 55%, #ffffff00 100%);
+    display: block;
+    pointer-events: none;
+    position: absolute;
+    top: 2px;
+    right: calc(var(--vfl-padding-x) - 2px);
+    left: calc(var(--vfl-padding-x) - 2px);
+    height: 26px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.float-label__label__text {
+    transition: all .2s;
+    opacity: 1;
+    left: calc(var(--vfl-padding-x) -2px);
+    display: table;
+}
+.float-label--fade-anim .float-label__label__text {
+    opacity: 0;
+}
+.float-label input, .float-label textarea, .float-label select {
+    padding: var(--vfl-padding-y) var(--vfl-padding-x);
+    width: 100%;
+    font-size: 16px;
+    line-height: 20px;
+    border: var(--border-width) solid var(--border-color);
+    margin-bottom: 6px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+.float-label select {
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") right 16px top 22px no-repeat;
+}
+.float-label input:focus, .float-label textarea:focus, .float-label select:focus {
+    outline: 2px solid #80b4d3;
+}
+
+.float-label select { 
+    background-position: top 7px right -3px;
+}
+
+.float-label input::placeholder, .float-label > textarea::placeholder, .float-label select::placeholder, .float-label__label__text {
+    position: absolute;
+    top: var(--vfl-padding-y); 
+    left: var(--vfl-padding-x);
+    display: block;
+    line-height: 24px;
+    color: var(--vfl-label-color);
+}
+.float-label input::placeholder, .float-label textarea::placeholder {
+    color: transparent;
+    transition: opacity 0.2s;
+}
+.float-label--fade-anim input::placeholder, .float-label--fade-anim textarea::placeholder {
+    color: gray;
+}
+.float-label--fixed .float-label__label__text, .float-label--on-focus input:focus ~ .float-label__label .float-label__label__text {
+    transform-origin: top left;
+    transform: scale(.85) translateY(-18px);
+    opacity: 1;
+    pointer-events: none;
+}
+.float-label--fixed input::placeholder, .float-label--fixed textarea::placeholder, .float-label--on-focus input:focus::placeholder {
+    opacity: 0;
+}
+.float-label--fixed .float-label__label__bg {
+    opacity: 1;
+}
+.float-label--no-click {
+    pointer-events: none;
+}

package/dist/vue3-float-label.es.js

@@ -0,0 +1,73 @@
+import { ref as t, computed as m, watch as I, onMounted as N, onBeforeUnmount as M, openBlock as v, createElementBlock as d, normalizeClass as g, renderSlot as W, unref as u, createElementVNode as x, toDisplayString as E, createCommentVNode as q, createTextVNode as A } from "vue";
+const H = {
+  key: 0,
+  class: "float-label__label float-label--no-click"
+}, R = { class: "float-label__label__text" }, z = ["for"], D = {
+  key: 0,
+  class: "float-label__label__bg"
+}, O = { class: "float-label__label__text" }, P = "[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", $ = {
+  __name: "FloatLabel",
+  props: {
+    label: { type: String, default: "" },
+    float: { type: Boolean, default: null },
+    onFocus: { type: Boolean, default: !1 }
+  },
+  setup(F) {
+    const s = F;
+    let b = t(null), c = t(""), r = t(""), k = t(null), e = t({}), n = t(""), a = t(""), i = t(!1), p = t(!1), _ = t(!1);
+    const y = m(() => s.label), L = m(() => a.value === "select" ? !0 : r.value && c.value !== r.value), w = m(() => {
+      let l = !1;
+      return s.float ? l = !0 : l = i.value && i.value !== "0", l;
+    }), h = () => {
+      c.value = y.value ? s.label : r.value;
+    }, C = () => e.value.getAttribute("id"), T = () => ("10000000-1000-4000-8000" + -1e11).replace(/[018]/g, (o) => (o ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> o / 4).toString(16)), V = () => {
+      switch (a.value) {
+        case "input":
+        case "textarea":
+          return e.value.placeholder;
+        case "select":
+          let l = e.value.querySelector("option:disabled");
+          return l ? l.innerHTML : "";
+        default:
+          return "";
+      }
+    }, S = () => {
+      n.value || (n.value = T(), e.value.id = n.value);
+    }, B = () => {
+      a.value === "select" ? e.value.addEventListener("change", f) : e.value.addEventListener("input", f);
+    }, U = () => {
+      a.value === "select" ? e.value.removeEventListener("change", f) : e.value.removeEventListener("input", f);
+    }, f = (l) => {
+      i.value = l.target.value.length > 0;
+    };
+    return I(y, (l, o) => {
+      h();
+    }), N(() => {
+      k.value = s.label, e.value = b.value.querySelector(P), p.value = !!e.value, _.value = s.float === null, p.value ? (n.value = C(), a.value = e.value ? e.value.tagName.toLowerCase() : "", i.value = !!e.value.value, r.value = V(), S(), _.value === !0 && setTimeout(() => {
+        B();
+      }, 200)) : r.value = "", h();
+    }), M(() => {
+      p.value && U();
+    }), (l, o) => (v(), d("div", {
+      class: g(["float-label", { "float-label--fade-anim": L.value, "float-label--on-focus": s.onFocus, "float-label--fixed": w.value }]),
+      ref_key: "root",
+      ref: b
+    }, [
+      W(l.$slots, "default"),
+      u(a) === "" ? (v(), d("div", H, [
+        x("span", R, E(u(c)), 1)
+      ])) : (v(), d("label", {
+        key: 1,
+        class: g(["float-label__label", { "float-label--no-click": u(a) === "select" }]),
+        for: u(n)
+      }, [
+        u(a) === "textarea" ? (v(), d("span", D)) : q("", !0),
+        o[0] || (o[0] = A()),
+        x("span", O, E(u(c)), 1)
+      ], 10, z))
+    ], 2));
+  }
+};
+export {
+  $ as FloatLabel
+};

package/dist/vue3-float-label.umd.js

@@ -0,0 +1 @@
+(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.Vue3FloatLabel={},o.Vue))})(this,function(o,e){"use strict";const _={key:0,class:"float-label__label float-label--no-click"},h={class:"float-label__label__text"},g=["for"],v={key:0,class:"float-label__label__bg"},E={class:"float-label__label__text"},k="[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",x={__name:"FloatLabel",props:{label:{type:String,default:""},float:{type:Boolean,default:null},onFocus:{type:Boolean,default:!1}},setup(F){const r=F;let p=e.ref(null),u=e.ref(""),s=e.ref(""),B=e.ref(null),l=e.ref({}),c=e.ref(""),a=e.ref(""),f=e.ref(!1),d=e.ref(!1),m=e.ref(!1);const b=e.computed(()=>r.label),L=e.computed(()=>a.value==="select"?!0:s.value&&u.value!==s.value),T=e.computed(()=>{let t=!1;return r.float?t=!0:t=f.value&&f.value!=="0",t}),y=()=>{u.value=b.value?r.label:s.value},V=()=>l.value.getAttribute("id"),S=()=>("10000000-1000-4000-8000"+-1e11).replace(/[018]/g,n=>(n^crypto.getRandomValues(new Uint8Array(1))[0]&15>>n/4).toString(16)),C=()=>{switch(a.value){case"input":case"textarea":return l.value.placeholder;case"select":let t=l.value.querySelector("option:disabled");return t?t.innerHTML:"";default:return""}},w=()=>{c.value||(c.value=S(),l.value.id=c.value)},N=()=>{a.value==="select"?l.value.addEventListener("change",i):l.value.addEventListener("input",i)},U=()=>{a.value==="select"?l.value.removeEventListener("change",i):l.value.removeEventListener("input",i)},i=t=>{f.value=t.target.value.length>0};return e.watch(b,(t,n)=>{y()}),e.onMounted(()=>{B.value=r.label,l.value=p.value.querySelector(k),d.value=!!l.value,m.value=r.float===null,d.value?(c.value=V(),a.value=l.value?l.value.tagName.toLowerCase():"",f.value=!!l.value.value,s.value=C(),w(),m.value===!0&&setTimeout(()=>{N()},200)):s.value="",y()}),e.onBeforeUnmount(()=>{d.value&&U()}),(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["float-label",{"float-label--fade-anim":L.value,"float-label--on-focus":r.onFocus,"float-label--fixed":T.value}]),ref_key:"root",ref:p},[e.renderSlot(t.$slots,"default"),e.unref(a)===""?(e.openBlock(),e.createElementBlock("div",_,[e.createElementVNode("span",h,e.toDisplayString(e.unref(u)),1)])):(e.openBlock(),e.createElementBlock("label",{key:1,class:e.normalizeClass(["float-label__label",{"float-label--no-click":e.unref(a)==="select"}]),for:e.unref(c)},[e.unref(a)==="textarea"?(e.openBlock(),e.createElementBlock("span",v)):e.createCommentVNode("",!0),n[0]||(n[0]=e.createTextVNode()),e.createElementVNode("span",E,e.toDisplayString(e.unref(u)),1)],10,g))],2))}};o.FloatLabel=x,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "vue3-float-label",
+  "version": "1.0.0",
+  "description": "A Vue 3 component for float labels.",
+  "type": "module",
+  "author": "Justin Moreland",
+  "keywords": [
+    "vue",
+    "vue 3",
+    "float-label",
+    "component"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jwmoreland/vue3-float-label.git"
+  },
+  "files": [
+    "dist",
+    "dist/style.css"
+  ],
+  "main": "dist/vue3-float-label.umd.js",
+  "module": "dist/vue3-float-label.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue3-float-label.es.js",
+      "require": "./dist/vue3-float-label.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "watch": "vite",
+    "build": "vite build && cp src/style.css dist/style.css",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.0.7"
+  }
+}