tfs-input 0.9.0 → 0.9.6

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 @@
-.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-3ebac3f7]{position:relative}.inp[data-v-3ebac3f7]{background-color:transparent;color:#27272a;border:1px solid #52525b;width:90%;margin:5px 15px;border-radius:8.75px;background:none;padding:12px 16px;font-size:18px}.inp[data-v-3ebac3f7]:focus{border:1px solid #2563eb;outline:none}.inp[data-v-3ebac3f7]::placeholder,.inp[data-v-3ebac3f7]::-webkit-input-placeholder,.inp[data-v-3ebac3f7]::-ms-input-placeholder,.inp[data-v-3ebac3f7]::-moz-input-placeholder{color:#71717a}.inp[data-v-3ebac3f7],.label[data-v-3ebac3f7]{transition:color,background-color,border-color .2s ease-out}.label[data-v-3ebac3f7]{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-3ebac3f7]{color:#2563eb;border:1px solid #2563eb}

package/dist/tfsInput.js

@@ -1,11 +1,12 @@
 import { openBlock as s, createElementBlock as c, createElementVNode as n, toDisplayString as r } from "vue";
-const p = (t, l) => {
+const p = (t, a) => {
   const e = t.__vccOpts || t;
-  for (const [a, o] of l)
-    e[a] = o;
+  for (const [l, o] of a)
+    e[l] = o;
   return e;
-}, i = { class: "contain" }, u = ["placeholder", "value"], d = { class: "label" }, v = {
-  __name: "tfsInput",
+}, i = { class: "contain" }, u = ["placeholder", "value"], d = { class: "label" }, _ = {
+  name: "tInput"
+}, v = /* @__PURE__ */ Object.assign(_, {
   props: {
     label: String,
     val: String,
@@ -13,19 +14,19 @@ const p = (t, l) => {
   },
   emits: ["update:val"],
   setup(t) {
-    return (l, e) => (s(), c("div", i, [
+    return (a, 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))
+        onInput: e[0] || (e[0] = (l) => a.$emit("update:val", l.target.value))
       }, null, 40, u),
       n("label", d, r(t.label), 1)
     ]));
   }
-}, m = /* @__PURE__ */ p(v, [["__scopeId", "data-v-2143fbc4"]]);
+}), f = /* @__PURE__ */ p(v, [["__scopeId", "data-v-3ebac3f7"]]);
 export {
-  m as tInput
+  f as default
 };

package/dist/tfsInput.umd.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tfs-input",
-  "version": "0.9.0",
+  "version": "0.9.6",
   "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,3 @@
 import tInput from "./tfsInput.vue";
 
-export { tInput };
+export default tInput;

package/src/tfsInput.vue

@@ -1,3 +1,9 @@
+<script>
+export default {
+  name: "tInput",
+};
+</script>
+
 <template>
   <div class="contain">
     <input
@@ -11,7 +17,6 @@
     <label class="label"> {{ label }} </label>
   </div>
 </template>
-
 <script setup>
 defineProps({
   label: String,
@@ -29,7 +34,7 @@ defineEmits(["update:val"]);
   background-color: transparent;
   color: #27272a;
   border: 1px solid #52525b;
-  width: 100%;
+  width: 90%;
   margin: 5px 15px;
   border-radius: 8.75px;
   background: none;