@a-vision-software/vue-input-components 1.3.20 → 1.3.21
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/README.md +31 -120
- package/dist/src/components/Checkbox.vue.d.ts +92 -0
- package/dist/src/components/Dropdown.vue.d.ts +3 -3
- package/dist/src/components/TextInput.vue.d.ts +2 -2
- package/dist/src/index.d.ts +2 -1
- package/dist/src/types/checkbox.d.ts +30 -0
- package/dist/src/types/index.d.ts +1 -0
- package/dist/src/types/textinput.d.ts +7 -7
- package/dist/vue-input-components.cjs.js +1 -1
- package/dist/vue-input-components.css +1 -1
- package/dist/vue-input-components.es.js +3814 -3660
- package/dist/vue-input-components.umd.js +1 -1
- package/package.json +1 -1
- package/src/components/Checkbox.vue +337 -0
- package/src/index.ts +2 -1
- package/src/router/index.ts +7 -0
- package/src/types/checkbox.ts +31 -0
- package/src/types/index.ts +1 -0
- package/src/types/textinput.ts +7 -7
- package/src/views/CheckboxTestView.vue +209 -0
- package/src/views/DashboardView.vue +99 -79
|
@@ -1,105 +1,125 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
<div class="dashboard">
|
|
3
|
+
<h1>Vue Input Components</h1>
|
|
4
|
+
<p class="dashboard__subtitle">A collection of reusable Vue input components</p>
|
|
5
|
+
<div class="dashboard__grid">
|
|
6
|
+
<router-link to="/textinput" class="dashboard__item">
|
|
7
|
+
<div class="dashboard__icon-wrapper">
|
|
8
|
+
<font-awesome-icon icon="keyboard" class="dashboard__icon" />
|
|
9
|
+
</div>
|
|
10
|
+
<span class="dashboard__label">Text Input</span>
|
|
11
|
+
<span class="dashboard__description">Single and multi-line text inputs with validation</span>
|
|
12
|
+
</router-link>
|
|
13
|
+
<router-link to="/fileupload" class="dashboard__item">
|
|
14
|
+
<div class="dashboard__icon-wrapper">
|
|
15
|
+
<font-awesome-icon icon="file-arrow-up" class="dashboard__icon" />
|
|
16
|
+
</div>
|
|
17
|
+
<span class="dashboard__label">File Upload</span>
|
|
18
|
+
<span class="dashboard__description">Drag and drop file uploads with preview</span>
|
|
19
|
+
</router-link>
|
|
20
|
+
<router-link to="/navigation" class="dashboard__item">
|
|
21
|
+
<div class="dashboard__icon-wrapper">
|
|
22
|
+
<font-awesome-icon icon="bars" class="dashboard__icon" />
|
|
23
|
+
</div>
|
|
24
|
+
<span class="dashboard__label">Navigation</span>
|
|
25
|
+
<span class="dashboard__description">Responsive navigation menus and tabs</span>
|
|
26
|
+
</router-link>
|
|
27
|
+
<router-link to="/dropdown" class="dashboard__item">
|
|
28
|
+
<div class="dashboard__icon-wrapper">
|
|
29
|
+
<font-awesome-icon icon="list" class="dashboard__icon" />
|
|
30
|
+
</div>
|
|
31
|
+
<span class="dashboard__label">Dropdown</span>
|
|
32
|
+
<span class="dashboard__description">Single and multiple selection dropdowns</span>
|
|
33
|
+
</router-link>
|
|
34
|
+
<router-link to="/checkbox" class="dashboard__item">
|
|
35
|
+
<div class="dashboard__icon-wrapper">
|
|
36
|
+
<font-awesome-icon icon="square-check" class="dashboard__icon" />
|
|
37
|
+
</div>
|
|
38
|
+
<span class="dashboard__label">Checkbox</span>
|
|
39
|
+
<span class="dashboard__description">Single and multiple selection checkboxes</span>
|
|
40
|
+
</router-link>
|
|
10
41
|
</div>
|
|
11
|
-
</router-link>
|
|
12
|
-
<router-link to="/file-upload" class="tile">
|
|
13
|
-
<div class="tile-content">
|
|
14
|
-
<font-awesome-icon icon="file-upload" class="tile-icon" />
|
|
15
|
-
<h2>File Upload</h2>
|
|
16
|
-
<p>Test the file upload component with drag and drop support</p>
|
|
17
|
-
</div>
|
|
18
|
-
</router-link>
|
|
19
|
-
<router-link to="/action" class="tile">
|
|
20
|
-
<div class="tile-content">
|
|
21
|
-
<font-awesome-icon icon="hand-pointer" class="tile-icon" />
|
|
22
|
-
<h2>Action</h2>
|
|
23
|
-
<p>Test the action component with various button and link styles</p>
|
|
24
|
-
</div>
|
|
25
|
-
</router-link>
|
|
26
|
-
<router-link to="/navigation" class="tile">
|
|
27
|
-
<div class="tile-content">
|
|
28
|
-
<font-awesome-icon icon="bars" class="tile-icon" />
|
|
29
|
-
<h2>Navigation</h2>
|
|
30
|
-
<p>Test the navigation component</p>
|
|
31
|
-
</div>
|
|
32
|
-
</router-link>
|
|
33
|
-
<router-link to="/dropdown" class="tile">
|
|
34
|
-
<div class="tile-content">
|
|
35
|
-
<font-awesome-icon icon="chevron-down" class="tile-icon" />
|
|
36
|
-
<h2>Dropdown</h2>
|
|
37
|
-
<p>Test the dropdown component with single/multiple selection and filtering</p>
|
|
38
|
-
</div>
|
|
39
|
-
</router-link>
|
|
40
42
|
</div>
|
|
41
|
-
</div>
|
|
42
43
|
</template>
|
|
43
44
|
|
|
44
|
-
<script setup lang="ts"
|
|
45
|
+
<script setup lang="ts">
|
|
46
|
+
// No script needed for this view
|
|
47
|
+
</script>
|
|
45
48
|
|
|
46
49
|
<style scoped>
|
|
47
50
|
.dashboard {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
+
max-width: 1200px;
|
|
52
|
+
margin: 0 auto;
|
|
53
|
+
padding: 3rem 2rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.dashboard h1 {
|
|
57
|
+
text-align: center;
|
|
58
|
+
margin-bottom: 1rem;
|
|
59
|
+
color: #2d3748;
|
|
60
|
+
font-size: 2.5rem;
|
|
61
|
+
font-weight: 700;
|
|
51
62
|
}
|
|
52
63
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
64
|
+
.dashboard__subtitle {
|
|
65
|
+
text-align: center;
|
|
66
|
+
color: #718096;
|
|
67
|
+
font-size: 1.1rem;
|
|
68
|
+
margin-bottom: 3rem;
|
|
57
69
|
}
|
|
58
70
|
|
|
59
|
-
.
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
71
|
+
.dashboard__grid {
|
|
72
|
+
display: grid;
|
|
73
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
74
|
+
gap: 2rem;
|
|
63
75
|
}
|
|
64
76
|
|
|
65
|
-
.
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
77
|
+
.dashboard__item {
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: column;
|
|
80
|
+
align-items: center;
|
|
81
|
+
padding: 2rem;
|
|
82
|
+
background-color: #ffffff;
|
|
83
|
+
border-radius: 1rem;
|
|
84
|
+
text-decoration: none;
|
|
85
|
+
color: #2d3748;
|
|
86
|
+
transition: all 0.3s ease;
|
|
87
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
88
|
+
border: 1px solid #e2e8f0;
|
|
75
89
|
}
|
|
76
90
|
|
|
77
|
-
.
|
|
78
|
-
|
|
79
|
-
|
|
91
|
+
.dashboard__item:hover {
|
|
92
|
+
transform: translateY(-4px);
|
|
93
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
94
|
+
border-color: #4a90e2;
|
|
80
95
|
}
|
|
81
96
|
|
|
82
|
-
.
|
|
83
|
-
|
|
84
|
-
|
|
97
|
+
.dashboard__icon-wrapper {
|
|
98
|
+
width: 64px;
|
|
99
|
+
height: 64px;
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
background-color: #ebf8ff;
|
|
104
|
+
border-radius: 50%;
|
|
105
|
+
margin-bottom: 1.5rem;
|
|
85
106
|
}
|
|
86
107
|
|
|
87
|
-
.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
color: var(--primary);
|
|
108
|
+
.dashboard__icon {
|
|
109
|
+
font-size: 2rem;
|
|
110
|
+
color: #4a90e2;
|
|
91
111
|
}
|
|
92
112
|
|
|
93
|
-
.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
113
|
+
.dashboard__label {
|
|
114
|
+
font-size: 1.25rem;
|
|
115
|
+
font-weight: 600;
|
|
116
|
+
margin-bottom: 0.5rem;
|
|
97
117
|
}
|
|
98
118
|
|
|
99
|
-
.
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
119
|
+
.dashboard__description {
|
|
120
|
+
font-size: 0.9rem;
|
|
121
|
+
color: #718096;
|
|
122
|
+
text-align: center;
|
|
123
|
+
line-height: 1.5;
|
|
104
124
|
}
|
|
105
125
|
</style>
|