tfs-input 0.9.6 → 0.9.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. package/README.md +23 -11
  2. package/dist/style.css +1 -1
  3. package/dist/tfsInput.js +29 -14
  4. package/dist/tfsInput.umd.cjs +1 -1
  5. package/package.json +2 -2
  6. package/src/tfsInput.vue +47 -18
package/README.md CHANGED
@@ -4,30 +4,40 @@ A customizable Vue 3 input component with animated floating labels for clean, mo
4
4
 
5
5
  ## Features
6
6
 
7
- - Modern UI
8
- - Customizable placeholder, label, and value.
9
- - Emits updates for seamless v-model binding.
7
+ - Modern and minimalistic UI with smooth transitions.
8
+ - Customizable placeholder, label, and value for flexible usage.
9
+ - Built-in support for two-way binding using `v-model`.
10
+ - Dynamic theme customization, including primary and text colors.
11
+ - Lightweight, performant, and designed with accessibility in mind.
10
12
 
11
13
  ## Installation
12
14
 
13
15
  Install via npm:
14
16
 
15
17
  ```bash
16
- npm install tfs-input
18
+ npm install tfs-input@latest
17
19
  ```
18
20
 
19
- ## Basic Usage
21
+ ## Usage
20
22
 
21
23
  Import and use the component in your Vue project.
22
24
 
23
25
  ```vue
24
26
  <template>
25
- <tInput label="Name" placehold="Enter your name" v-model:val="name" />
27
+ <tInput
28
+ label="Name"
29
+ primaryColor="yellow"
30
+ textColor="white"
31
+ placehold="Enter your name"
32
+ v-model:val="name"
33
+ />
34
+ <p>Hello, {{ name }}!</p>
26
35
  </template>
27
36
 
28
37
  <script setup>
29
38
  import { ref } from "vue";
30
39
  import tInput from "tfs-input";
40
+ import "tfs-input/style.css";
31
41
 
32
42
  const name = ref("");
33
43
  </script>
@@ -37,11 +47,13 @@ const name = ref("");
37
47
 
38
48
  ### Props
39
49
 
40
- | **Prop** | **Type** | **Description** |
41
- | ----------- | -------- | ----------------------------------- |
42
- | `label` | String | Text displayed as a floating label. |
43
- | `val` | String | Bound value for input. |
44
- | `placehold` | String | Placeholder text for input. |
50
+ | **Prop** | **Type** | **Description** |
51
+ | -------------- | -------- | ----------------------------------- |
52
+ | `label` | String | Text displayed as a floating label. |
53
+ | `val` | String | Bound value for input. |
54
+ | `placehold` | String | Placeholder text for input. |
55
+ | `primaryColor` | string | Customizes the primary color. |
56
+ | `textColor` | string | Customizes the text color. |
45
57
 
46
58
  ### Emits
47
59
 
package/dist/style.css CHANGED
@@ -1 +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}
1
+ [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 CHANGED
@@ -1,32 +1,47 @@
1
- import { openBlock as s, createElementBlock as c, createElementVNode as n, toDisplayString as r } from "vue";
2
- const p = (t, a) => {
1
+ import { computed as r, openBlock as c, createElementBlock as s, normalizeStyle as u, createElementVNode as n, toDisplayString as p } from "vue";
2
+ const i = (t, a) => {
3
3
  const e = t.__vccOpts || t;
4
4
  for (const [l, o] of a)
5
5
  e[l] = o;
6
6
  return e;
7
- }, i = { class: "contain" }, u = ["placeholder", "value"], d = { class: "label" }, _ = {
7
+ }, d = ["placeholder", "value"], m = { class: "label" }, y = {
8
8
  name: "tInput"
9
- }, v = /* @__PURE__ */ Object.assign(_, {
9
+ }, v = /* @__PURE__ */ Object.assign(y, {
10
10
  props: {
11
- label: String,
12
- val: String,
13
- placehold: String
11
+ label: { type: String, default: "Label" },
12
+ val: { type: String, default: "Input Value" },
13
+ placehold: { type: String, default: "Placeholder" },
14
+ primaryColor: {
15
+ type: String,
16
+ default: "#2563eb"
17
+ },
18
+ textColor: {
19
+ type: String,
20
+ default: "#27272a"
21
+ }
14
22
  },
15
23
  emits: ["update:val"],
16
24
  setup(t) {
17
- return (a, e) => (s(), c("div", i, [
25
+ const a = r(() => ({
26
+ "--primary": t.primaryColor,
27
+ "--text": t.textColor
28
+ }));
29
+ return (e, l) => (c(), s("div", {
30
+ class: "contain",
31
+ style: u(a.value)
32
+ }, [
18
33
  n("input", {
19
34
  class: "inp",
20
35
  name: "text",
21
36
  type: "text",
22
37
  placeholder: t.placehold,
23
38
  value: t.val,
24
- onInput: e[0] || (e[0] = (l) => a.$emit("update:val", l.target.value))
25
- }, null, 40, u),
26
- n("label", d, r(t.label), 1)
27
- ]));
39
+ onInput: l[0] || (l[0] = (o) => e.$emit("update:val", o.target.value))
40
+ }, null, 40, d),
41
+ n("label", m, p(t.label), 1)
42
+ ], 4));
28
43
  }
29
- }), f = /* @__PURE__ */ p(v, [["__scopeId", "data-v-3ebac3f7"]]);
44
+ }), g = /* @__PURE__ */ i(v, [["__scopeId", "data-v-2ea9708e"]]);
30
45
  export {
31
- f as default
46
+ g as default
32
47
  };
package/dist/tfsInput.umd.cjs CHANGED
@@ -1 +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"]])});
1
+ (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 CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "tfs-input",
3
- "version": "0.9.6",
3
+ "version": "0.9.8",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "description": "Customizable Vue input component floating labels for modern UIs.",
7
- "homepage": "https://github.com/MFM-347/tfsInput#readme",
7
+ "homepage": "https://MFM-347.github.io/tfsInput",
8
8
  "files": [
9
9
  "dist/*",
10
10
  "src/*"
package/src/tfsInput.vue CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  </script>
6
6
 
7
7
  <template>
8
- <div class="contain">
8
+ <div class="contain" :style="colors">
9
9
  <input
10
10
  class="inp"
11
11
  name="text"
@@ -17,23 +17,50 @@ export default {
17
17
  <label class="label"> {{ label }} </label>
18
18
  </div>
19
19
  </template>
20
+
20
21
  <script setup>
21
- defineProps({
22
- label: String,
23
- val: String,
24
- placehold: String,
22
+ import { computed } from "vue";
23
+
24
+ const { label, val, placehold, primaryColor, textColor } = defineProps({
25
+ label: { type: String, default: "Label" },
26
+ val: { type: String, default: "Input Value" },
27
+ placehold: { type: String, default: "Placeholder" },
28
+ primaryColor: {
29
+ type: String,
30
+ default: "#2563eb",
31
+ },
32
+ textColor: {
33
+ type: String,
34
+ default: "#27272a",
35
+ },
25
36
  });
26
37
 
27
38
  defineEmits(["update:val"]);
39
+
40
+ const colors = computed(() => ({
41
+ "--primary": primaryColor,
42
+ "--text": textColor,
43
+ }));
28
44
  </script>
45
+
29
46
  <style scoped>
47
+ :root,
48
+ .light {
49
+ --c1: #52525b;
50
+ --c2: #71717a;
51
+ }
52
+ .dark {
53
+ --c1: #71717a;
54
+ --c2: #a1a1aa;
55
+ }
30
56
  .contain {
31
57
  position: relative;
32
58
  }
59
+
33
60
  .inp {
34
61
  background-color: transparent;
35
- color: #27272a;
36
- border: 1px solid #52525b;
62
+ color: var(--text);
63
+ border: 1px solid var(--c1);
37
64
  width: 90%;
38
65
  margin: 5px 15px;
39
66
  border-radius: 8.75px;
@@ -41,16 +68,16 @@ defineEmits(["update:val"]);
41
68
  padding: 12px 16px;
42
69
  font-size: 18px;
43
70
  }
71
+
44
72
  .inp:focus {
45
- border: 1px solid #2563eb;
73
+ border: 1px solid var(--primary);
46
74
  outline: none;
47
75
  }
48
- .inp::placeholder,
49
- .inp::-webkit-input-placeholder,
50
- .inp::-ms-input-placeholder,
51
- .inp::-moz-input-placeholder {
52
- color: #71717a;
76
+
77
+ .inp::placeholder {
78
+ color: var(--c2);
53
79
  }
80
+
54
81
  .inp,
55
82
  .label {
56
83
  transition:
@@ -58,21 +85,23 @@ defineEmits(["update:val"]);
58
85
  background-color,
59
86
  border-color 0.2s ease-out;
60
87
  }
88
+
61
89
  .label {
62
90
  background-color: transparent;
63
- color: #71717a;
64
- border: 1px solid #52525b;
91
+ color: var(--c2);
92
+ border: 1px solid var(--c1);
65
93
  font-size: 15px;
66
94
  font-weight: 600;
67
95
  padding: 0 6px;
68
96
  border-radius: 7.25px;
69
97
  position: absolute;
70
98
  top: -12px;
71
- left: 40px;
99
+ left: 24px;
72
100
  backdrop-filter: blur(8px);
73
101
  }
102
+
74
103
  .contain:focus-within .label {
75
- color: #2563eb;
76
- border: 1px solid #2563eb;
104
+ color: var(--primary);
105
+ border: 1px solid var(--primary);
77
106
  }
78
107
  </style>