tfs-input 0.9.7 → 0.9.8

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-2ea9708e]:root,.light[data-v-2ea9708e]{--c1: #52525b;--c2: #71717a}.dark[data-v-2ea9708e]{--c1: #71717a;--c2: #a1a1aa}.contain[data-v-2ea9708e]{position:relative}.inp[data-v-2ea9708e]{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-2ea9708e]:focus{border:1px solid var(--primary);outline:none}.inp[data-v-2ea9708e]::placeholder{color:var(--c2)}.inp[data-v-2ea9708e],.label[data-v-2ea9708e]{transition:color,background-color,border-color .2s ease-out}.label[data-v-2ea9708e]{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-2ea9708e]{color:var(--primary);border:1px solid var(--primary)}

package/dist/tfsInput.js

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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "tfs-input",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "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

@@ -22,9 +22,9 @@ 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",
@@ -44,6 +44,15 @@ const colors = computed(() => ({
 </script>
 
 <style scoped>
+:root,
+.light {
+  --c1: #52525b;
+  --c2: #71717a;
+}
+.dark {
+  --c1: #71717a;
+  --c2: #a1a1aa;
+}
 .contain {
   position: relative;
 }
@@ -51,7 +60,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 +75,7 @@ const colors = computed(() => ({
 }
 
 .inp::placeholder {
-  color: #71717a;
+  color: var(--c2);
 }
 
 .inp,
@@ -79,8 +88,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;