tfs-input 0.9.6 → 0.9.7

package/README.md

@@ -4,30 +4,40 @@ A customizable Vue 3 input component with animated floating labels for clean, mo
 
 ## Features
 
-- Modern UI
-- Customizable placeholder, label, and value.
-- Emits updates for seamless v-model binding.
+- Modern and minimalistic UI with smooth transitions.
+- Customizable placeholder, label, and value for flexible usage.
+- Built-in support for two-way binding using `v-model`.
+- Dynamic theme customization, including primary and text colors.
+- Lightweight, performant, and designed with accessibility in mind.
 
 ## Installation
 
 Install via npm:
 
 ```bash
-npm install tfs-input
+npm install tfs-input@latest
 ```
 
-## Basic Usage
+## Usage
 
 Import and use the component in your Vue project.
 
 ```vue
 <template>
-  <tInput label="Name" placehold="Enter your name" v-model:val="name" />
+  <tInput
+    label="Name"
+    primaryColor="yellow"
+    textColor="white"
+    placehold="Enter your name"
+    v-model:val="name"
+  />
+  <p>Hello, {{ name }}!</p>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import tInput from "tfs-input";
+import "tfs-input/style.css";
 
 const name = ref("");
 </script>
@@ -37,11 +47,13 @@ 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.         |
+| `primaryColor` | string   | Customizes the primary color.       |
+| `textColor`    | string   | Customizes the text color.          |
 
 ### Emits
 

package/dist/style.css

@@ -1 +1 @@
-.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}
+.contain[data-v-4c91c086]{position:relative}.inp[data-v-4c91c086]{background-color:transparent;color:var(--text);border:1px solid #52525b;width:90%;margin:5px 15px;border-radius:8.75px;background:none;padding:12px 16px;font-size:18px}.inp[data-v-4c91c086]:focus{border:1px solid var(--primary);outline:none}.inp[data-v-4c91c086]::placeholder{color:#71717a}.inp[data-v-4c91c086],.label[data-v-4c91c086]{transition:color,background-color,border-color .2s ease-out}.label[data-v-4c91c086]{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:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.contain:focus-within .label[data-v-4c91c086]{color:var(--primary);border:1px solid var(--primary)}

package/dist/tfsInput.js

@@ -1,32 +1,47 @@
-import { openBlock as s, createElementBlock as c, createElementVNode as n, toDisplayString as r } from "vue";
-const p = (t, a) => {
+import { computed as r, openBlock as c, createElementBlock as s, normalizeStyle as i, createElementVNode as n, toDisplayString as p } from "vue";
+const u = (t, a) => {
   const e = t.__vccOpts || t;
   for (const [l, o] of a)
     e[l] = o;
   return e;
-}, i = { class: "contain" }, u = ["placeholder", "value"], d = { class: "label" }, _ = {
+}, d = ["placeholder", "value"], m = { class: "label" }, v = {
   name: "tInput"
-}, v = /* @__PURE__ */ Object.assign(_, {
+}, y = /* @__PURE__ */ Object.assign(v, {
   props: {
     label: String,
     val: String,
-    placehold: String
+    placehold: String,
+    primaryColor: {
+      type: String,
+      default: "#2563eb"
+    },
+    textColor: {
+      type: String,
+      default: "#27272a"
+    }
   },
   emits: ["update:val"],
   setup(t) {
-    return (a, e) => (s(), c("div", i, [
+    const a = r(() => ({
+      "--primary": t.primaryColor,
+      "--text": t.textColor
+    }));
+    return (e, l) => (c(), s("div", {
+      class: "contain",
+      style: i(a.value)
+    }, [
       n("input", {
         class: "inp",
         name: "text",
         type: "text",
         placeholder: t.placehold,
         value: t.val,
-        onInput: e[0] || (e[0] = (l) => a.$emit("update:val", l.target.value))
-      }, null, 40, u),
-      n("label", d, r(t.label), 1)
-    ]));
+        onInput: l[0] || (l[0] = (o) => e.$emit("update:val", o.target.value))
+      }, null, 40, d),
+      n("label", m, p(t.label), 1)
+    ], 4));
   }
-}), f = /* @__PURE__ */ p(v, [["__scopeId", "data-v-3ebac3f7"]]);
+}), f = /* @__PURE__ */ u(y, [["__scopeId", "data-v-4c91c086"]]);
 export {
   f as default
 };

package/dist/tfsInput.umd.cjs

@@ -1 +1 @@
-(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"]])});
+(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,a)=>{const l=t.__vccOpts||t;for(const[o,i]of a)l[o]=i;return l},r=["placeholder","value"],s={class:"label"};return n(Object.assign({name:"tInput"},{props:{label:String,val:String,placehold:String,primaryColor:{type:String,default:"#2563eb"},textColor:{type:String,default:"#27272a"}},emits:["update:val"],setup(t){const a=e.computed(()=>({"--primary":t.primaryColor,"--text":t.textColor}));return(l,o)=>(e.openBlock(),e.createElementBlock("div",{class:"contain",style:e.normalizeStyle(a.value)},[e.createElementVNode("input",{class:"inp",name:"text",type:"text",placeholder:t.placehold,value:t.val,onInput:o[0]||(o[0]=i=>l.$emit("update:val",i.target.value))},null,40,r),e.createElementVNode("label",s,e.toDisplayString(t.label),1)],4))}}),[["__scopeId","data-v-4c91c086"]])});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tfs-input",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "private": false,
   "type": "module",
   "description": "Customizable Vue input component floating labels for modern UIs.",

package/src/tfsInput.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <template>
-  <div class="contain">
+  <div class="contain" :style="colors">
     <input
       class="inp"
       name="text"
@@ -17,22 +17,40 @@ export default {
     <label class="label"> {{ label }} </label>
   </div>
 </template>
+
 <script setup>
-defineProps({
+import { computed } from "vue";
+
+const { label, val, placehold, primaryColor, textColor } = defineProps({
   label: String,
   val: String,
   placehold: String,
+  primaryColor: {
+    type: String,
+    default: "#2563eb",
+  },
+  textColor: {
+    type: String,
+    default: "#27272a",
+  },
 });
 
 defineEmits(["update:val"]);
+
+const colors = computed(() => ({
+  "--primary": primaryColor,
+  "--text": textColor,
+}));
 </script>
+
 <style scoped>
 .contain {
   position: relative;
 }
+
 .inp {
   background-color: transparent;
-  color: #27272a;
+  color: var(--text);
   border: 1px solid #52525b;
   width: 90%;
   margin: 5px 15px;
@@ -41,16 +59,16 @@ defineEmits(["update:val"]);
   padding: 12px 16px;
   font-size: 18px;
 }
+
 .inp:focus {
-  border: 1px solid #2563eb;
+  border: 1px solid var(--primary);
   outline: none;
 }
-.inp::placeholder,
-.inp::-webkit-input-placeholder,
-.inp::-ms-input-placeholder,
-.inp::-moz-input-placeholder {
+
+.inp::placeholder {
   color: #71717a;
 }
+
 .inp,
 .label {
   transition:
@@ -58,6 +76,7 @@ defineEmits(["update:val"]);
     background-color,
     border-color 0.2s ease-out;
 }
+
 .label {
   background-color: transparent;
   color: #71717a;
@@ -68,11 +87,12 @@ defineEmits(["update:val"]);
   border-radius: 7.25px;
   position: absolute;
   top: -12px;
-  left: 40px;
+  left: 24px;
   backdrop-filter: blur(8px);
 }
+
 .contain:focus-within .label {
-  color: #2563eb;
-  border: 1px solid #2563eb;
+  color: var(--primary);
+  border: 1px solid var(--primary);
 }
 </style>