@vue-interface/input-field 1.0.0-beta.7 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/demo.css +12 -0
- package/docs/input-field.md +373 -0
- package/index.css +3 -0
- package/index.html +240 -0
- package/{dist/index.d.ts → index.ts} +4 -1
- package/package.json +16 -44
- package/src/InputField.vue +129 -0
- package/tsconfig.json +27 -0
- package/vite.config.js +47 -0
- package/dist/input-field.js +0 -827
- package/dist/input-field.js.map +0 -1
- package/dist/input-field.umd.cjs +0 -2
- package/dist/input-field.umd.cjs.map +0 -1
- package/dist/src/InputField.vue.d.ts +0 -259
- package/dist/style.css +0 -1
package/index.html
ADDED
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
6
|
+
<title>InputField</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body class="dark:bg-neutral-900 dark:text-white">
|
|
9
|
+
<div id="app" class="container mx-auto">
|
|
10
|
+
<h1 class="text-4xl mb-5">input-field</h1>
|
|
11
|
+
|
|
12
|
+
<div class="bg-neutral-100 dark:bg-neutral-800 p-3 mb-3">
|
|
13
|
+
Value: {{ value }}
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<input-field v-model="value" label="Text Field" placeholder="Some placeholder" class="mb-3" @change="onChange"></input-field>
|
|
17
|
+
<input-field type="password" label="Password Field" class="mb-3"></input-field>
|
|
18
|
+
<input-field label="Descriptive Text Field" help-text="Some helpful text goes here." class="mb-3"></input-field>
|
|
19
|
+
<input-field type="email" label="Email Field" placeholder="you@example.com" class="mb-3"></input-field>
|
|
20
|
+
<input-field label="Plain Text" placeholder="Type something here..." class="mb-3" plaintext></input-field>
|
|
21
|
+
<input-field label="Readonly" placeholder="Type something here..." class="mb-3" readonly></input-field>
|
|
22
|
+
<input-field label="Readonly (Disabled)" placeholder="Type something here..." class="mb-3" readonly disabled></input-field>
|
|
23
|
+
<input-field label="Disabled" placeholder="Type something here..." class="mb-3" disabled></input-field>
|
|
24
|
+
|
|
25
|
+
<h2 class="text-2xl mt-6 mb-3">Sizes</h2>
|
|
26
|
+
|
|
27
|
+
<input-field label="Small" size="form-control-sm" class="mb-3"></input-field>
|
|
28
|
+
<input-field label="Medium" size="form-control-md" class="mb-3"></input-field>
|
|
29
|
+
<input-field label="Large" size="form-control-lg" class="mb-3"></input-field>
|
|
30
|
+
|
|
31
|
+
<h2 class="text-2xl mt-6 mb-3">Icons</h2>
|
|
32
|
+
|
|
33
|
+
<input-field label="Small Icon" size="form-control-sm" class="form-control-sm mb-3">
|
|
34
|
+
<template #icon>
|
|
35
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
36
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
37
|
+
</svg>
|
|
38
|
+
</template>
|
|
39
|
+
</input-field>
|
|
40
|
+
|
|
41
|
+
<input-field label="Medium Icon" size="form-control-md" class="form-control-md mb-3">
|
|
42
|
+
<template #icon>
|
|
43
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
44
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
45
|
+
</svg>
|
|
46
|
+
</template>
|
|
47
|
+
</input-field>
|
|
48
|
+
|
|
49
|
+
<input-field label="Large Icon" size="form-control-lg" class="form-control-lg mb-3">
|
|
50
|
+
<template #icon>
|
|
51
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
52
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
53
|
+
</svg>
|
|
54
|
+
</template>
|
|
55
|
+
</input-field>
|
|
56
|
+
|
|
57
|
+
<input-field label="Icon-xl" size="form-control-xl" class="form-control-xl mb-3">
|
|
58
|
+
<template #icon>
|
|
59
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
60
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
61
|
+
</svg>
|
|
62
|
+
</template>
|
|
63
|
+
</input-field>
|
|
64
|
+
|
|
65
|
+
<input-field label="Icon-7" size="form-control-7" class="form-control-7 mb-3">
|
|
66
|
+
<template #icon>
|
|
67
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
68
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
69
|
+
</svg>
|
|
70
|
+
</template>
|
|
71
|
+
</input-field>
|
|
72
|
+
|
|
73
|
+
<input-field label="Icon-[27px]" size="form-control-[27px]" class="form-control-[27px] mb-3">
|
|
74
|
+
<template #icon>
|
|
75
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
76
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
77
|
+
</svg>
|
|
78
|
+
</template>
|
|
79
|
+
</input-field>
|
|
80
|
+
|
|
81
|
+
<h2 class="text-2xl mt-6 mb-3">Activity Indicator</h2>
|
|
82
|
+
|
|
83
|
+
<input-field label="Small" size="form-control-sm" :indicator="Dots()" indicator-size="xs" :activity="showActivity" class="mb-3"></input-field>
|
|
84
|
+
<input-field label="Medium" size="form-control-md" :indicator="Pulse()" indicator-size="md" :activity="showActivity" class="mb-3"></input-field>
|
|
85
|
+
<input-field label="Large" size="form-control-lg" :indicator="Spinner()" indicator-size="lg" :activity="showActivity" class="mb-3"></input-field>
|
|
86
|
+
|
|
87
|
+
<button type="button" class="underline text-blue-600" @click="showActivity = !showActivity">
|
|
88
|
+
<span v-if="!showActivity">Show</span><span v-else>Hide</span> Activity
|
|
89
|
+
</button>
|
|
90
|
+
|
|
91
|
+
<!-- <h2 class="text-2xl mt-6 mb-3">Animated Labels</h2>
|
|
92
|
+
|
|
93
|
+
<input-field size="sm" label="Small" class="mb-3" animated></input-field>
|
|
94
|
+
<input-field size="md" label="Medium" class="mb-3" animated></input-field>
|
|
95
|
+
<input-field v-model="value" size="md" label="Medium" class="mb-3" animated></input-field>
|
|
96
|
+
|
|
97
|
+
<input-field value="Some Value" size="md" label="Medium" class="mb-3" animated></input-field>
|
|
98
|
+
<input-field size="lg" label="Large" class="mb-3" animated></input-field> -->
|
|
99
|
+
|
|
100
|
+
<h2 class="text-2xl mt-6 mb-3">Validation</h2>
|
|
101
|
+
|
|
102
|
+
<input-field label="Empty Array of Errors" :errors="[]" class="mb-3"></input-field>
|
|
103
|
+
|
|
104
|
+
<input-field label="Single Inline Error" error="This is an inline error." class="mb-3 invalid-feedback"></input-field>
|
|
105
|
+
<input-field label="Array of Errors" :errors="['First Error', 'Second Error']" class="mb-3 invalid-feedback"></input-field>
|
|
106
|
+
<input-field name="test" label="Multiple Errors From Object" :errors="{'test': ['This is an inline error #1.', 'This is an inline error #2.']}" class="mb-3 invalid-feedback"></input-field>
|
|
107
|
+
|
|
108
|
+
<input-field label="Valid Field" valid class="mb-3 valid-feedback"></input-field>
|
|
109
|
+
<input-field label="Valid Field with Feedback" valid feedback="This is some success message." class="mb-3 valid-feedback"></input-field>
|
|
110
|
+
<input-field label="Valid Field with Array of Feedback" valid :feedback="['This is some success message.', 'This is some success message.']" class="mb-3 valid-feedback"></input-field>
|
|
111
|
+
|
|
112
|
+
<h2 class="text-2xl mt-6 mb-3">Animated Labels</h2>
|
|
113
|
+
|
|
114
|
+
<input-field v-model="value" label="Text Field" placeholder="Some placeholder" class="mb-3 form-control-animated"></input-field>
|
|
115
|
+
<input-field label="Text Field" placeholder="Some placeholder" class="mb-3 form-control-animated"></input-field>
|
|
116
|
+
<input-field label="Text Field" placeholder="Some placeholder" size="form-control-lg" class="mb-3 form-control-animated-lg"></input-field>
|
|
117
|
+
|
|
118
|
+
<input-field label="Small Icon" placeholder="Some placeholder" size="form-control-sm" class="mb-3 form-control-animated-sm">
|
|
119
|
+
<template #icon>
|
|
120
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
121
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
122
|
+
</svg>
|
|
123
|
+
</template>
|
|
124
|
+
</input-field>
|
|
125
|
+
|
|
126
|
+
<input-field label="Medium Icon" placeholder="Some placeholder" size="form-control-md" class="mb-3 form-control-animated-md">
|
|
127
|
+
<template #icon>
|
|
128
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
129
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
130
|
+
</svg>
|
|
131
|
+
</template>
|
|
132
|
+
</input-field>
|
|
133
|
+
|
|
134
|
+
<input-field label="Large Icon" placeholder="Some placeholder" size="form-control-lg" class="mb-3 form-control-animated-lg">
|
|
135
|
+
<template #icon>
|
|
136
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
137
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
138
|
+
</svg>
|
|
139
|
+
</template>
|
|
140
|
+
</input-field>
|
|
141
|
+
|
|
142
|
+
<input-field label="xl Icon" placeholder="Some placeholder" size="form-control-xl" class="mb-3 form-control-animated-xl">
|
|
143
|
+
<template #icon>
|
|
144
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
145
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
146
|
+
</svg>
|
|
147
|
+
</template>
|
|
148
|
+
</input-field>
|
|
149
|
+
|
|
150
|
+
<input-field label="2xl Icon" placeholder="Some placeholder" size="form-control-2xl" class="mb-3 form-control-animated-2xl">
|
|
151
|
+
<template #icon>
|
|
152
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
153
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
154
|
+
</svg>
|
|
155
|
+
</template>
|
|
156
|
+
</input-field>
|
|
157
|
+
|
|
158
|
+
<input-field label="Icon-4" placeholder="Some placeholder" size="form-control-4" class="mb-3 form-control-animated-4">
|
|
159
|
+
<template #icon>
|
|
160
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
161
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
162
|
+
</svg>
|
|
163
|
+
</template>
|
|
164
|
+
</input-field>
|
|
165
|
+
|
|
166
|
+
<input-field label="Icon-5" placeholder="Some placeholder" size="form-control-5" class="mb-3 form-control-animated-5">
|
|
167
|
+
<template #icon>
|
|
168
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
169
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
170
|
+
</svg>
|
|
171
|
+
</template>
|
|
172
|
+
</input-field>
|
|
173
|
+
|
|
174
|
+
<input-field label="Icon-6" placeholder="Some placeholder" size="form-control-6" class="mb-3 form-control-animated-6">
|
|
175
|
+
<template #icon>
|
|
176
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
177
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
178
|
+
</svg>
|
|
179
|
+
</template>
|
|
180
|
+
</input-field>
|
|
181
|
+
|
|
182
|
+
<input-field label="Icon-7" placeholder="Some placeholder" size="form-control-7" class="mb-3 form-control-animated-7">
|
|
183
|
+
<template #icon>
|
|
184
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
185
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
186
|
+
</svg>
|
|
187
|
+
</template>
|
|
188
|
+
</input-field>
|
|
189
|
+
|
|
190
|
+
<input-field label="Icon-[16px]" placeholder="Some placeholder" size="form-control-[16px]" class="mb-3 form-control-animated-[16px]">
|
|
191
|
+
<template #icon>
|
|
192
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
193
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
194
|
+
</svg>
|
|
195
|
+
</template>
|
|
196
|
+
</input-field>
|
|
197
|
+
|
|
198
|
+
<input-field label="Icon-[21px]" placeholder="Some placeholder" size="form-control-[21px]" class="mb-3 form-control-animated-[21px]">
|
|
199
|
+
<template #icon>
|
|
200
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="stroke-black dark:stroke-white">
|
|
201
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
|
|
202
|
+
</svg>
|
|
203
|
+
</template>
|
|
204
|
+
</input-field>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<script type="module">
|
|
208
|
+
import './demo.css';
|
|
209
|
+
import { createApp } from 'vue/dist/vue.esm-bundler.js';
|
|
210
|
+
import { InputField } from './index';
|
|
211
|
+
import { Dots, Pulse, Spinner } from '@vue-interface/activity-indicator';
|
|
212
|
+
|
|
213
|
+
const vue = createApp({
|
|
214
|
+
components: {
|
|
215
|
+
InputField
|
|
216
|
+
},
|
|
217
|
+
data() {
|
|
218
|
+
return {
|
|
219
|
+
Dots: () => Dots,
|
|
220
|
+
Spinner: () => Spinner,
|
|
221
|
+
Pulse: () => Pulse,
|
|
222
|
+
showActivity: false,
|
|
223
|
+
value: undefined
|
|
224
|
+
};
|
|
225
|
+
},
|
|
226
|
+
mounted() {
|
|
227
|
+
setTimeout(() => {
|
|
228
|
+
this.value = 'testing...'
|
|
229
|
+
}, 1000)
|
|
230
|
+
},
|
|
231
|
+
methods: {
|
|
232
|
+
onChange(value) {
|
|
233
|
+
console.log('change', value)
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
vue.mount('#app');
|
|
238
|
+
</script>
|
|
239
|
+
</body>
|
|
240
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,37 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/input-field",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A Vue input field component.",
|
|
5
|
-
"files": [
|
|
6
|
-
"dist"
|
|
7
|
-
],
|
|
8
5
|
"type": "module",
|
|
9
6
|
"main": "./dist/input-field.umd.cjs",
|
|
10
7
|
"module": "./dist/input-field.js",
|
|
11
|
-
"style": "./dist/style.css",
|
|
12
8
|
"types": "./dist/index.d.ts",
|
|
13
9
|
"exports": {
|
|
14
10
|
".": {
|
|
11
|
+
"source": "./index.ts",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
15
13
|
"import": "./dist/input-field.js",
|
|
16
|
-
"require": "./dist/input-field.umd.js"
|
|
17
|
-
|
|
18
|
-
},
|
|
19
|
-
"./dist/style.css": "./dist/style.css"
|
|
14
|
+
"require": "./dist/input-field.umd.js"
|
|
15
|
+
}
|
|
20
16
|
},
|
|
21
17
|
"browserslist": "last 2 versions, > 0.5%, ie >= 11",
|
|
22
|
-
"scripts": {
|
|
23
|
-
"dev": "vite",
|
|
24
|
-
"build": "vite build",
|
|
25
|
-
"preview": "vite preview",
|
|
26
|
-
"pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
|
|
27
|
-
"release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
|
|
28
|
-
"release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
|
|
29
|
-
"release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
|
|
30
|
-
"release": "git add . -A; git commit; git push --tags origin; npm publish;"
|
|
31
|
-
},
|
|
32
18
|
"repository": {
|
|
33
19
|
"type": "git",
|
|
34
|
-
"url": "git+https://github.com/vue-interface/input-field
|
|
20
|
+
"url": "git+https://github.com/vue-interface/input-field"
|
|
35
21
|
},
|
|
36
22
|
"keywords": [
|
|
37
23
|
"Input",
|
|
@@ -44,31 +30,17 @@
|
|
|
44
30
|
"author": "Justin Kimbrell",
|
|
45
31
|
"license": "ISC",
|
|
46
32
|
"bugs": {
|
|
47
|
-
"url": "https://github.com/vue-interface/input-field
|
|
48
|
-
},
|
|
49
|
-
"homepage": "https://github.com/vue-interface/input-field/docs#readme",
|
|
50
|
-
"dependencies": {
|
|
51
|
-
"@vue-interface/activity-indicator": "^2.0.0-beta.7",
|
|
52
|
-
"@vue-interface/form-control": "^1.0.0-beta.9"
|
|
33
|
+
"url": "https://github.com/vue-interface/input-field"
|
|
53
34
|
},
|
|
35
|
+
"homepage": "https://github.com/vue-interface/vue-interface",
|
|
54
36
|
"peerDependencies": {
|
|
55
|
-
"vue": "^3.
|
|
37
|
+
"vue": "^3.3.4",
|
|
38
|
+
"@vue-interface/activity-indicator": "3.0.0",
|
|
39
|
+
"@vue-interface/form-control": "2.0.0"
|
|
56
40
|
},
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"autoprefixer": "^10.4.2",
|
|
62
|
-
"babel-eslint": "^10.1.0",
|
|
63
|
-
"babel-preset-vue": "^2.0.2",
|
|
64
|
-
"change-case": "^4.1.2",
|
|
65
|
-
"eslint": "^8.28.0",
|
|
66
|
-
"eslint-plugin-vue": "^9.8.0",
|
|
67
|
-
"pascalcase": "^2.0.0",
|
|
68
|
-
"postcss": "^8.4.6",
|
|
69
|
-
"tailwindcss": "^3.0.18",
|
|
70
|
-
"vite": "^3.0.0",
|
|
71
|
-
"vite-plugin-dts": "^1.7.1",
|
|
72
|
-
"vue": "^3.2.37"
|
|
41
|
+
"scripts": {
|
|
42
|
+
"dev": "vite",
|
|
43
|
+
"build": "vue-tsc && vite build",
|
|
44
|
+
"preview": "vite preview"
|
|
73
45
|
}
|
|
74
|
-
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<script setup lang="ts" generic="ModelValue, Value">
|
|
2
|
+
import { ActivityIndicator } from '@vue-interface/activity-indicator';
|
|
3
|
+
import type { FormControlEvents, FormControlProps, FormControlSlots } from '@vue-interface/form-control';
|
|
4
|
+
import { FormControlErrors, FormControlFeedback, useFormControl } from '@vue-interface/form-control';
|
|
5
|
+
import { InputHTMLAttributes, ref } from 'vue';
|
|
6
|
+
|
|
7
|
+
const props = withDefaults(defineProps<InputFieldProps<ModelValue,Value>>(), {
|
|
8
|
+
formControlClass: 'form-control',
|
|
9
|
+
labelClass: 'form-label'
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
defineOptions({
|
|
13
|
+
inheritAttrs: false
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
const model = defineModel<ModelValue>();
|
|
17
|
+
|
|
18
|
+
defineSlots<FormControlSlots<InputFieldControlSizePrefix,ModelValue>>();
|
|
19
|
+
|
|
20
|
+
const emit = defineEmits<FormControlEvents<ModelValue>>();
|
|
21
|
+
|
|
22
|
+
const {
|
|
23
|
+
controlAttributes,
|
|
24
|
+
formGroupClasses,
|
|
25
|
+
listeners
|
|
26
|
+
} = useFormControl<InputHTMLAttributes, InputFieldControlSizePrefix, ModelValue, Value>({ model, props, emit });
|
|
27
|
+
|
|
28
|
+
const field = ref<HTMLInputElement>();
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
<script lang="ts">
|
|
32
|
+
export type InputFieldControlSizePrefix = 'form-control';
|
|
33
|
+
|
|
34
|
+
export type InputFieldProps<ModelValue, Value> = FormControlProps<
|
|
35
|
+
InputHTMLAttributes,
|
|
36
|
+
InputFieldControlSizePrefix,
|
|
37
|
+
ModelValue,
|
|
38
|
+
Value
|
|
39
|
+
>;
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<div
|
|
44
|
+
class="input-field"
|
|
45
|
+
:class="formGroupClasses">
|
|
46
|
+
<slot name="label">
|
|
47
|
+
<label
|
|
48
|
+
v-if="label"
|
|
49
|
+
ref="label"
|
|
50
|
+
:class="labelClass"
|
|
51
|
+
:for="controlAttributes.id">
|
|
52
|
+
{{ label }}
|
|
53
|
+
</label>
|
|
54
|
+
</slot>
|
|
55
|
+
|
|
56
|
+
<div class="form-control-inner">
|
|
57
|
+
<slot
|
|
58
|
+
name="control"
|
|
59
|
+
v-bind="{ controlAttributes, listeners }">
|
|
60
|
+
<div
|
|
61
|
+
v-if="$slots.icon"
|
|
62
|
+
class="form-control-inner-icon"
|
|
63
|
+
@click="field?.focus()">
|
|
64
|
+
<slot name="icon" />
|
|
65
|
+
</div>
|
|
66
|
+
<input
|
|
67
|
+
ref="field"
|
|
68
|
+
v-model="model"
|
|
69
|
+
v-bind="{...controlAttributes, ...listeners}">
|
|
70
|
+
</slot>
|
|
71
|
+
|
|
72
|
+
<div class="form-control-activity-indicator">
|
|
73
|
+
<slot name="activity">
|
|
74
|
+
<Transition name="input-field-fade">
|
|
75
|
+
<ActivityIndicator
|
|
76
|
+
v-if="activity && indicator"
|
|
77
|
+
key="activity"
|
|
78
|
+
ref="activity"
|
|
79
|
+
:type="indicator"
|
|
80
|
+
:size="indicatorSize" />
|
|
81
|
+
</Transition>
|
|
82
|
+
</slot>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<slot
|
|
87
|
+
name="errors"
|
|
88
|
+
v-bind="{ error, errors, id: $attrs.id, name: $attrs.name }">
|
|
89
|
+
<FormControlErrors
|
|
90
|
+
v-if="!!(error || errors)"
|
|
91
|
+
:id="id"
|
|
92
|
+
v-slot="{ error }"
|
|
93
|
+
:name="name"
|
|
94
|
+
:error="error"
|
|
95
|
+
:errors="errors">
|
|
96
|
+
<div
|
|
97
|
+
invalid
|
|
98
|
+
class="invalid-feedback">
|
|
99
|
+
{{ error }}<br>
|
|
100
|
+
</div>
|
|
101
|
+
</FormControlErrors>
|
|
102
|
+
</slot>
|
|
103
|
+
|
|
104
|
+
<slot
|
|
105
|
+
name="feedback"
|
|
106
|
+
v-bind="{ feedback }">
|
|
107
|
+
<FormControlFeedback
|
|
108
|
+
v-slot="{ feedback }"
|
|
109
|
+
:feedback="feedback">
|
|
110
|
+
<div
|
|
111
|
+
valid
|
|
112
|
+
class="valid-feedback">
|
|
113
|
+
{{ feedback }}
|
|
114
|
+
</div>
|
|
115
|
+
</FormControlFeedback>
|
|
116
|
+
</slot>
|
|
117
|
+
|
|
118
|
+
<slot
|
|
119
|
+
name="help"
|
|
120
|
+
v-bind="{ helpText }">
|
|
121
|
+
<small
|
|
122
|
+
v-if="helpText"
|
|
123
|
+
ref="help"
|
|
124
|
+
class="form-help">
|
|
125
|
+
{{ helpText }}
|
|
126
|
+
</small>
|
|
127
|
+
</slot>
|
|
128
|
+
</div>
|
|
129
|
+
</template>
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"moduleResolution": "bundler",
|
|
9
|
+
"customConditions": ["source"],
|
|
10
|
+
"allowImportingTsExtensions": true,
|
|
11
|
+
"resolveJsonModule": true,
|
|
12
|
+
"isolatedModules": true,
|
|
13
|
+
"noEmit": true,
|
|
14
|
+
"strict": true,
|
|
15
|
+
"noUnusedLocals": true,
|
|
16
|
+
"noUnusedParameters": true,
|
|
17
|
+
"noFallthroughCasesInSwitch": true,
|
|
18
|
+
"jsx": "preserve",
|
|
19
|
+
"jsxImportSource": "vue"
|
|
20
|
+
},
|
|
21
|
+
"include": [
|
|
22
|
+
"**/*.ts",
|
|
23
|
+
"**/*.tsx",
|
|
24
|
+
"**/*.vue",
|
|
25
|
+
],
|
|
26
|
+
"exclude": ["node_modules"]
|
|
27
|
+
}
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
2
|
+
import vue from '@vitejs/plugin-vue';
|
|
3
|
+
import { pascalCase } from 'change-case';
|
|
4
|
+
import path from 'path';
|
|
5
|
+
import { defineConfig } from 'vite';
|
|
6
|
+
import dts from 'vite-plugin-dts';
|
|
7
|
+
import pkg from './package.json';
|
|
8
|
+
|
|
9
|
+
const fileName = pkg.name.split('/')[1];
|
|
10
|
+
|
|
11
|
+
const external = [
|
|
12
|
+
...(pkg.dependencies ? Object.keys(pkg.dependencies) : []),
|
|
13
|
+
...(pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [])
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
export default ({ command }) => defineConfig({
|
|
17
|
+
build: {
|
|
18
|
+
sourcemap: command === 'build',
|
|
19
|
+
lib: {
|
|
20
|
+
entry: path.resolve(__dirname, 'index.ts'),
|
|
21
|
+
name: pascalCase(fileName),
|
|
22
|
+
fileName,
|
|
23
|
+
},
|
|
24
|
+
rollupOptions: {
|
|
25
|
+
external,
|
|
26
|
+
output: {
|
|
27
|
+
globals: external.reduce((carry, dep) => {
|
|
28
|
+
return Object.assign(carry, {
|
|
29
|
+
[dep]: pascalCase(dep)
|
|
30
|
+
});
|
|
31
|
+
}, {}),
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
watch: !process.env.NODE_ENV && {
|
|
35
|
+
include: [
|
|
36
|
+
'./tailwindcss/**/*.js'
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
plugins: [
|
|
41
|
+
vue(),
|
|
42
|
+
dts({
|
|
43
|
+
entryRoot: path.resolve(__dirname, './'),
|
|
44
|
+
}),
|
|
45
|
+
tailwindcss()
|
|
46
|
+
],
|
|
47
|
+
});
|