tfs-input 0.9.0

package/README.md

@@ -0,0 +1,60 @@
+# tfsInput
+
+A customizable Vue 3 input component with animated floating labels for clean, modern forms.
+
+## Features
+
+- Modern UI
+- Customizable placeholder, label, and value.
+- Emits updates for seamless v-model binding.
+
+## Installation
+
+Install via npm:
+
+```bash
+npm install tfs-input
+```
+
+## Basic Usage
+
+Import and use the component in your Vue project.
+
+```vue
+<template>
+  <tInput label="Name" placehold="Enter your name" v-model:val="name" />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import tInput from "tfs-input";
+
+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.         |
+
+### Emits
+
+| **Event**    | **Description**                                      |
+| ------------ | ---------------------------------------------------- |
+| `update:val` | Emits input value updates for v-model compatibility. |
+
+## Credits
+
+- Created by [Farhan Madni](https://github.com/MFM-347)
+
+## License
+
+The code in this repository is licensed under the **MIT License**.
+
+[![License MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

package/dist/style.css

@@ -0,0 +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}

package/dist/tfsInput.js

@@ -0,0 +1,31 @@
+import { openBlock as s, createElementBlock as c, createElementVNode as n, toDisplayString as r } from "vue";
+const p = (t, l) => {
+  const e = t.__vccOpts || t;
+  for (const [a, o] of l)
+    e[a] = o;
+  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) {
+    return (l, 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))
+      }, null, 40, u),
+      n("label", d, r(t.label), 1)
+    ]));
+  }
+}, m = /* @__PURE__ */ p(v, [["__scopeId", "data-v-2143fbc4"]]);
+export {
+  m as tInput
+};

package/dist/tfsInput.umd.cjs

@@ -0,0 +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"})});

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "tfs-input",
+  "version": "0.9.0",
+  "private": false,
+  "type": "module",
+  "description": "Customizable Vue input component floating labels for modern UIs.",
+  "homepage": "https://github.com/MFM-347/tfsInput#readme",
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "main": "./dist/tfsInput.umd.cjs",
+  "module": "./dist/tfsInput.js",
+  "exports": {
+    ".": {
+      "import": "./dist/tfsInput.js",
+      "require": "./dist/tfsInput.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.12"
+  },
+  "peerDependencies": {
+    "vue": "^3.x"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "vite": "^5.4.10"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "input",
+    "ui-component"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MFM-347/tfsInput.git"
+  },
+  "bugs": {
+    "url": "https://github.com/MFM-347/tfsInput/issues"
+  },
+  "author": {
+    "name": "Farhan Madni",
+    "email": "madnifm347@outlook.com"
+  },
+  "license": "MIT"
+}

package/src/main.js

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

package/src/tfsInput.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="contain">
+    <input
+      class="inp"
+      name="text"
+      type="text"
+      :placeholder="placehold"
+      :value="val"
+      @input="$emit('update:val', $event.target.value)"
+    />
+    <label class="label"> {{ label }} </label>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  label: String,
+  val: String,
+  placehold: String,
+});
+
+defineEmits(["update:val"]);
+</script>
+<style scoped>
+.contain {
+  position: relative;
+}
+.inp {
+  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:focus {
+  border: 1px solid #2563eb;
+  outline: none;
+}
+.inp::placeholder,
+.inp::-webkit-input-placeholder,
+.inp::-ms-input-placeholder,
+.inp::-moz-input-placeholder {
+  color: #71717a;
+}
+.inp,
+.label {
+  transition:
+    color,
+    background-color,
+    border-color 0.2s ease-out;
+}
+.label {
+  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;
+  backdrop-filter: blur(8px);
+}
+.contain:focus-within .label {
+  color: #2563eb;
+  border: 1px solid #2563eb;
+}
+</style>