tfs-input 0.9.5 → 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,49 +1 @@
-.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;
-}
+.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,53 +1,47 @@
-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;
-  },
-  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),
-          ])
-        )
-      );
+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;
+}, d = ["placeholder", "value"], m = { class: "label" }, v = {
+  name: "tInput"
+}, y = /* @__PURE__ */ Object.assign(v, {
+  props: {
+    label: String,
+    val: String,
+    placehold: String,
+    primaryColor: {
+      type: String,
+      default: "#2563eb"
     },
+    textColor: {
+      type: String,
+      default: "#27272a"
+    }
   },
-  m = /* @__PURE__ */ r(v, [["__scopeId", "data-v-cb9a3059"]]);
-export { m as tInput };
+  emits: ["update:val"],
+  setup(t) {
+    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: 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__ */ u(y, [["__scopeId", "data-v-4c91c086"]]);
+export {
+  f as default
+};

package/dist/tfsInput.umd.cjs

@@ -1,55 +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 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" });
-});
+(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.5",
+  "version": "0.9.7",
   "private": false,
   "type": "module",
   "description": "Customizable Vue input component floating labels for modern UIs.",

package/src/main.js

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

package/src/tfsInput.vue

@@ -1,5 +1,11 @@
+<script>
+export default {
+  name: "tInput",
+};
+</script>
+
 <template>
-  <div class="contain">
+  <div class="contain" :style="colors">
     <input
       class="inp"
       name="text"
@@ -13,42 +19,56 @@
 </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"]);
-defineExpose({
-  name: "tInput",
-});
+
+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: 100%;
+  width: 90%;
   margin: 5px 15px;
   border-radius: 8.75px;
   background: none;
   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:
@@ -56,6 +76,7 @@ defineExpose({
     background-color,
     border-color 0.2s ease-out;
 }
+
 .label {
   background-color: transparent;
   color: #71717a;
@@ -66,11 +87,12 @@ defineExpose({
   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>