tfs-input 0.9.7 → 0.9.9

package/README.md

@@ -1,65 +1,6 @@
-# tfsInput
+# tfsInput [![npm](https://img.shields.io/npm/v/tfs-input.svg)](https://www.npmjs.com/package/tfs-input) [![Download](https://img.shields.io/npm/dm/tfs-input)](https://www.npmjs.com/package/tfs-input)
 
-A customizable Vue 3 input component with animated floating labels for clean, modern forms.
-
-## Features
-
-- 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@latest
-```
-
-## Usage
-
-Import and use the component in your Vue project.
-
-```vue
-<template>
-  <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>
-```
-
-## Properties
-
-### Props
-
-| **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
-
-| **Event**    | **Description**                                      |
-| ------------ | ---------------------------------------------------- |
-| `update:val` | Emits input value updates for v-model compatibility. |
+A highly customizable Vue 3 input component with dynamic theming, reactive properties, and modern styling. Supports light/dark mode, responsive design, and customizable colors for seamless integration into any project.
 
 ## Credits
 

package/dist/style.css

@@ -1 +1 @@
-.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)}
+[data-v-c12c66bd]:root,.light[data-v-c12c66bd],.auto[data-v-c12c66bd]{--c1: #52525b;--c2: #71717a}.dark[data-v-c12c66bd]{--c1: #71717a;--c2: #a1a1aa}@media (prefers-color-scheme: dark){.auto[data-v-c12c66bd]{--c1: #71717a;--c2: #a1a1aa}}.contain[data-v-c12c66bd]{position:relative}.inp[data-v-c12c66bd]{background-color:transparent;color:var(--text);border:1px solid var(--c1);width:90%;margin:5px 15px;border-radius:8.75px;background:none;padding:12px 16px;font-size:18px}.inp[data-v-c12c66bd]:focus{border:1px solid var(--primary);outline:none}.inp[data-v-c12c66bd]::placeholder{color:var(--c2)}.inp[data-v-c12c66bd],.label[data-v-c12c66bd]{transition:color,background-color,border-color .2s ease-out}.label[data-v-c12c66bd]{background-color:transparent;color:var(--c2);border:1px solid var(--c1);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-c12c66bd]{color:var(--primary);border:1px solid var(--primary)}

package/dist/tfsInput.js

@@ -1,23 +1,38 @@
-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) => {
+import { computed as r, openBlock as c, createElementBlock as i, normalizeStyle as s, normalizeClass as u, createElementVNode as n, toDisplayString as d } from "vue";
+const p = (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 = {
+}, m = ["placeholder", "value"], v = { class: "label" }, y = {
   name: "tInput"
-}, y = /* @__PURE__ */ Object.assign(v, {
+}, f = /* @__PURE__ */ Object.assign(y, {
   props: {
-    label: String,
-    val: String,
-    placehold: String,
+    label: {
+      type: String,
+      default: "Label"
+    },
+    val: {
+      type: String,
+      default: "Input Value"
+    },
+    placehold: {
+      type: String,
+      default: "Placeholder"
+    },
     primaryColor: {
       type: String,
-      default: "#2563eb"
+      default: "#2563eb",
+      validator: (t) => /^#([0-9A-F]{3}){1,2}$/i.test(t)
     },
     textColor: {
       type: String,
-      default: "#27272a"
+      default: "#27272a",
+      validator: (t) => /^#([0-9A-F]{3}){1,2}$/i.test(t)
+    },
+    theme: {
+      type: String,
+      default: "auto"
     }
   },
   emits: ["update:val"],
@@ -26,9 +41,9 @@ const u = (t, a) => {
       "--primary": t.primaryColor,
       "--text": t.textColor
     }));
-    return (e, l) => (c(), s("div", {
-      class: "contain",
-      style: i(a.value)
+    return (e, l) => (c(), i("div", {
+      class: u(["contain", t.theme]),
+      style: s(a.value)
     }, [
       n("input", {
         class: "inp",
@@ -37,11 +52,11 @@ const u = (t, a) => {
         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));
+      }, null, 40, m),
+      n("label", v, d(t.label), 1)
+    ], 6));
   }
-}), f = /* @__PURE__ */ u(y, [["__scopeId", "data-v-4c91c086"]]);
+}), b = /* @__PURE__ */ p(f, [["__scopeId", "data-v-c12c66bd"]]);
 export {
-  f as default
+  b 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,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"]])});
+(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis<"u"?globalThis:e||self,e["tfs-Input"]=l(e.Vue))})(this,function(e){"use strict";const l=(t,o)=>{const a=t.__vccOpts||t;for(const[n,i]of o)a[n]=i;return a},r=["placeholder","value"],s={class:"label"};return l(Object.assign({name:"tInput"},{props:{label:{type:String,default:"Label"},val:{type:String,default:"Input Value"},placehold:{type:String,default:"Placeholder"},primaryColor:{type:String,default:"#2563eb",validator:t=>/^#([0-9A-F]{3}){1,2}$/i.test(t)},textColor:{type:String,default:"#27272a",validator:t=>/^#([0-9A-F]{3}){1,2}$/i.test(t)},theme:{type:String,default:"auto"}},emits:["update:val"],setup(t){const o=e.computed(()=>({"--primary":t.primaryColor,"--text":t.textColor}));return(a,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["contain",t.theme]),style:e.normalizeStyle(o.value)},[e.createElementVNode("input",{class:"inp",name:"text",type:"text",placeholder:t.placehold,value:t.val,onInput:n[0]||(n[0]=i=>a.$emit("update:val",i.target.value))},null,40,r),e.createElementVNode("label",s,e.toDisplayString(t.label),1)],6))}}),[["__scopeId","data-v-c12c66bd"]])});

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "tfs-input",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "private": false,
   "type": "module",
   "description": "Customizable Vue input component floating labels for modern UIs.",
-  "homepage": "https://github.com/MFM-347/tfsInput#readme",
+  "homepage": "https://MFM-347.github.io/tfsInput",
   "files": [
     "dist/*",
     "src/*"

package/src/tfsInput.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <template>
-  <div class="contain" :style="colors">
+  <div class="contain" :class="theme" :style="colors">
     <input
       class="inp"
       name="text"
@@ -22,16 +22,31 @@ export default {
 import { computed } from "vue";
 
 const { label, val, placehold, primaryColor, textColor } = defineProps({
-  label: String,
-  val: String,
-  placehold: String,
+  label: {
+    type: String,
+    default: "Label",
+  },
+  val: {
+    type: String,
+    default: "Input Value",
+  },
+  placehold: {
+    type: String,
+    default: "Placeholder",
+  },
   primaryColor: {
     type: String,
     default: "#2563eb",
+    validator: (value) => /^#([0-9A-F]{3}){1,2}$/i.test(value),
   },
   textColor: {
     type: String,
     default: "#27272a",
+    validator: (value) => /^#([0-9A-F]{3}){1,2}$/i.test(value),
+  },
+  theme: {
+    type: String,
+    default: "auto",
   },
 });
 
@@ -44,6 +59,22 @@ const colors = computed(() => ({
 </script>
 
 <style scoped>
+:root,
+.light,
+.auto {
+  --c1: #52525b;
+  --c2: #71717a;
+}
+.dark {
+  --c1: #71717a;
+  --c2: #a1a1aa;
+}
+@media (prefers-color-scheme: dark) {
+  .auto {
+    --c1: #71717a;
+    --c2: #a1a1aa;
+  }
+}
 .contain {
   position: relative;
 }
@@ -51,7 +82,7 @@ const colors = computed(() => ({
 .inp {
   background-color: transparent;
   color: var(--text);
-  border: 1px solid #52525b;
+  border: 1px solid var(--c1);
   width: 90%;
   margin: 5px 15px;
   border-radius: 8.75px;
@@ -66,7 +97,7 @@ const colors = computed(() => ({
 }
 
 .inp::placeholder {
-  color: #71717a;
+  color: var(--c2);
 }
 
 .inp,
@@ -79,8 +110,8 @@ const colors = computed(() => ({
 
 .label {
   background-color: transparent;
-  color: #71717a;
-  border: 1px solid #52525b;
+  color: var(--c2);
+  border: 1px solid var(--c1);
   font-size: 15px;
   font-weight: 600;
   padding: 0 6px;