tfs-input 0.9.0 → 0.9.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Farhan Madni
+
+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

@@ -37,11 +37,11 @@ const name = ref("");
 
 ### Props
 
-| **Prop**    |**Type**| **Description**                     |
-| ----------- | ------ | ----------------------------------- |
-| `label`     | String | Text displayed as a floating label. |
-| `val`       | String | Bound value for input.              |
-| `placehold` | String | Placeholder text for input.         |
+| **Prop**    | **Type** | **Description**                     |
+| ----------- | -------- | ----------------------------------- |
+| `label`     | String   | Text displayed as a floating label. |
+| `val`       | String   | Bound value for input.              |
+| `placehold` | String   | Placeholder text for input.         |
 
 ### Emits
 

package/dist/style.css

@@ -1 +1,49 @@
-.contain[data-v-2143fbc4]{position:relative}.inp[data-v-2143fbc4]{background-color:transparent;color:#27272a;border:1px solid #52525b;width:100%;margin:5px 15px;border-radius:8.75px;background:none;padding:12px 16px;font-size:18px}.inp[data-v-2143fbc4]:focus{border:1px solid #2563eb;outline:none}.inp[data-v-2143fbc4]::placeholder,.inp[data-v-2143fbc4]::-webkit-input-placeholder,.inp[data-v-2143fbc4]::-ms-input-placeholder,.inp[data-v-2143fbc4]::-moz-input-placeholder{color:#71717a}.inp[data-v-2143fbc4],.label[data-v-2143fbc4]{transition:color,background-color,border-color .2s ease-out}.label[data-v-2143fbc4]{background-color:transparent;color:#71717a;border:1px solid #52525b;font-size:15px;font-weight:600;padding:0 6px;border-radius:7.25px;position:absolute;top:-12px;left:40px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.contain:focus-within .label[data-v-2143fbc4]{color:#2563eb;border:1px solid #2563eb}
+.contain[data-v-cb9a3059] {
+  position: relative;
+}
+.inp[data-v-cb9a3059] {
+  background-color: transparent;
+  color: #27272a;
+  border: 1px solid #52525b;
+  width: 100%;
+  margin: 5px 15px;
+  border-radius: 8.75px;
+  background: none;
+  padding: 12px 16px;
+  font-size: 18px;
+}
+.inp[data-v-cb9a3059]:focus {
+  border: 1px solid #2563eb;
+  outline: none;
+}
+.inp[data-v-cb9a3059]::placeholder,
+.inp[data-v-cb9a3059]::-webkit-input-placeholder,
+.inp[data-v-cb9a3059]::-ms-input-placeholder,
+.inp[data-v-cb9a3059]::-moz-input-placeholder {
+  color: #71717a;
+}
+.inp[data-v-cb9a3059],
+.label[data-v-cb9a3059] {
+  transition:
+    color,
+    background-color,
+    border-color 0.2s ease-out;
+}
+.label[data-v-cb9a3059] {
+  background-color: transparent;
+  color: #71717a;
+  border: 1px solid #52525b;
+  font-size: 15px;
+  font-weight: 600;
+  padding: 0 6px;
+  border-radius: 7.25px;
+  position: absolute;
+  top: -12px;
+  left: 40px;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+.contain:focus-within .label[data-v-cb9a3059] {
+  color: #2563eb;
+  border: 1px solid #2563eb;
+}

package/dist/tfsInput.js

@@ -1,31 +1,53 @@
-import { openBlock as s, createElementBlock as c, createElementVNode as n, toDisplayString as r } from "vue";
-const p = (t, l) => {
-  const e = t.__vccOpts || t;
-  for (const [a, o] of l)
-    e[a] = o;
-  return e;
-}, i = { class: "contain" }, u = ["placeholder", "value"], d = { class: "label" }, v = {
-  __name: "tfsInput",
-  props: {
-    label: String,
-    val: String,
-    placehold: String
+import {
+  openBlock as s,
+  createElementBlock as c,
+  createElementVNode as o,
+  toDisplayString as p,
+} from "vue";
+const r = (t, l) => {
+    const e = t.__vccOpts || t;
+    for (const [a, n] of l) e[a] = n;
+    return e;
   },
-  emits: ["update:val"],
-  setup(t) {
-    return (l, e) => (s(), c("div", i, [
-      n("input", {
-        class: "inp",
-        name: "text",
-        type: "text",
-        placeholder: t.placehold,
-        value: t.val,
-        onInput: e[0] || (e[0] = (a) => l.$emit("update:val", a.target.value))
-      }, null, 40, u),
-      n("label", d, r(t.label), 1)
-    ]));
-  }
-}, m = /* @__PURE__ */ p(v, [["__scopeId", "data-v-2143fbc4"]]);
-export {
-  m as tInput
-};
+  i = { class: "contain" },
+  u = ["placeholder", "value"],
+  d = { class: "label" },
+  v = {
+    __name: "tfsInput",
+    props: {
+      label: String,
+      val: String,
+      placehold: String,
+    },
+    emits: ["update:val"],
+    setup(t, { expose: l }) {
+      return (
+        l({
+          name: "tInput",
+        }),
+        (e, a) => (
+          s(),
+          c("div", i, [
+            o(
+              "input",
+              {
+                class: "inp",
+                name: "text",
+                type: "text",
+                placeholder: t.placehold,
+                value: t.val,
+                onInput:
+                  a[0] || (a[0] = (n) => e.$emit("update:val", n.target.value)),
+              },
+              null,
+              40,
+              u,
+            ),
+            o("label", d, p(t.label), 1),
+          ])
+        )
+      );
+    },
+  },
+  m = /* @__PURE__ */ r(v, [["__scopeId", "data-v-cb9a3059"]]);
+export { m as tInput };

package/dist/tfsInput.umd.cjs

@@ -1 +1,55 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t["tfs-Input"]={},t.Vue))})(this,function(t,e){"use strict";const a=(n,o)=>{const l=n.__vccOpts||n;for(const[s,u]of o)l[s]=u;return l},i={class:"contain"},c=["placeholder","value"],d={class:"label"},p=a({__name:"tfsInput",props:{label:String,val:String,placehold:String},emits:["update:val"],setup(n){return(o,l)=>(e.openBlock(),e.createElementBlock("div",i,[e.createElementVNode("input",{class:"inp",name:"text",type:"text",placeholder:n.placehold,value:n.val,onInput:l[0]||(l[0]=s=>o.$emit("update:val",s.target.value))},null,40,c),e.createElementVNode("label",d,e.toDisplayString(n.label),1)]))}},[["__scopeId","data-v-2143fbc4"]]);t.tInput=p,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
+(function (t, e) {
+  typeof exports == "object" && typeof module < "u"
+    ? e(exports, require("vue"))
+    : typeof define == "function" && define.amd
+      ? define(["exports", "vue"], e)
+      : ((t = typeof globalThis < "u" ? globalThis : t || self),
+        e((t["tfs-Input"] = {}), t.Vue));
+})(this, function (t, e) {
+  "use strict";
+  const i = (n, a) => {
+      const o = n.__vccOpts || n;
+      for (const [l, s] of a) o[l] = s;
+      return o;
+    },
+    c = { class: "contain" },
+    p = ["placeholder", "value"],
+    u = { class: "label" },
+    d = i(
+      {
+        __name: "tfsInput",
+        props: { label: String, val: String, placehold: String },
+        emits: ["update:val"],
+        setup(n, { expose: a }) {
+          return (
+            a({ name: "tInput" }),
+            (o, l) => (
+              e.openBlock(),
+              e.createElementBlock("div", c, [
+                e.createElementVNode(
+                  "input",
+                  {
+                    class: "inp",
+                    name: "text",
+                    type: "text",
+                    placeholder: n.placehold,
+                    value: n.val,
+                    onInput:
+                      l[0] ||
+                      (l[0] = (s) => o.$emit("update:val", s.target.value)),
+                  },
+                  null,
+                  40,
+                  p,
+                ),
+                e.createElementVNode("label", u, e.toDisplayString(n.label), 1),
+              ])
+            )
+          );
+        },
+      },
+      [["__scopeId", "data-v-cb9a3059"]],
+    );
+  (t.tInput = d),
+    Object.defineProperty(t, Symbol.toStringTag, { value: "Module" });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tfs-input",
-  "version": "0.9.0",
+  "version": "0.9.5",
   "private": false,
   "type": "module",
   "description": "Customizable Vue input component floating labels for modern UIs.",
@@ -41,7 +41,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/MFM-347/tfsInput.git"
+    "url": "https://github.com/MFM-347/tfsInput.git"
   },
   "bugs": {
     "url": "https://github.com/MFM-347/tfsInput/issues"

package/src/main.js

@@ -1,3 +1 @@
-import tInput from "./tfsInput.vue";
-
-export { tInput };
+export { default as tInput } from "./tfsInput.vue";

package/src/tfsInput.vue

@@ -20,6 +20,9 @@ defineProps({
 });
 
 defineEmits(["update:val"]);
+defineExpose({
+  name: "tInput",
+});
 </script>
 <style scoped>
 .contain {