@a-vision-software/vue-input-components 1.3.22 → 1.3.24
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/dist/src/components/List.vue.d.ts +42 -0
- package/dist/src/components/TextInput.vue.d.ts +1 -1
- package/dist/src/index.d.ts +2 -1
- package/dist/src/types/list.d.ts +40 -0
- package/dist/vue-input-components.cjs.js +561 -1
- package/dist/vue-input-components.css +1 -1
- package/dist/vue-input-components.es.js +8345 -5077
- package/dist/vue-input-components.umd.js +561 -1
- package/package.json +1 -1
- package/src/components/List.vue +264 -0
- package/src/index.ts +2 -1
- package/src/router/index.ts +7 -0
- package/src/types/list.ts +47 -0
- package/src/views/DashboardView.vue +89 -85
- package/src/views/ListTestView.vue +143 -0
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="list-test">
|
|
3
|
+
<h1>List Component Test</h1>
|
|
4
|
+
|
|
5
|
+
<!-- Default Presentation -->
|
|
6
|
+
<section class="list-test__section">
|
|
7
|
+
<h2>Default Presentation</h2>
|
|
8
|
+
<List :columns="columns" :data="data" :filter="{ placeholder: 'Search users...' }" :actions="actions"
|
|
9
|
+
@update:filter="handleFilter" @sort="handleSort" @row-click="handleRowClick" />
|
|
10
|
+
</section>
|
|
11
|
+
|
|
12
|
+
<!-- Minimal Presentation -->
|
|
13
|
+
<section class="list-test__section">
|
|
14
|
+
<h2>Minimal Presentation</h2>
|
|
15
|
+
<List :columns="columns" :data="data" presentation="minimal" :filter="{ placeholder: 'Search users...' }"
|
|
16
|
+
@update:filter="handleFilter" @sort="handleSort" @row-click="handleRowClick" />
|
|
17
|
+
</section>
|
|
18
|
+
|
|
19
|
+
<!-- Loading State -->
|
|
20
|
+
<section class="list-test__section">
|
|
21
|
+
<h2>Loading State</h2>
|
|
22
|
+
<List :columns="columns" :data="[]" :loading="true" :filter="{ placeholder: 'Search users...' }" />
|
|
23
|
+
</section>
|
|
24
|
+
|
|
25
|
+
<!-- Empty State -->
|
|
26
|
+
<section class="list-test__section">
|
|
27
|
+
<h2>Empty State</h2>
|
|
28
|
+
<List :columns="columns" :data="[]" empty-message="No users found" :filter="{ placeholder: 'Search users...' }" />
|
|
29
|
+
</section>
|
|
30
|
+
</div>
|
|
31
|
+
</template>
|
|
32
|
+
|
|
33
|
+
<script setup lang="ts">
|
|
34
|
+
import { ref } from 'vue'
|
|
35
|
+
import { List } from '@/components/List'
|
|
36
|
+
import type { ListColumn, ListAction } from '../types/list'
|
|
37
|
+
|
|
38
|
+
const columns: ListColumn[] = [
|
|
39
|
+
{
|
|
40
|
+
key: 'name',
|
|
41
|
+
label: 'Name',
|
|
42
|
+
type: 'text',
|
|
43
|
+
sortable: true,
|
|
44
|
+
filterable: true
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
key: 'email',
|
|
48
|
+
label: 'Email',
|
|
49
|
+
type: 'text',
|
|
50
|
+
sortable: true,
|
|
51
|
+
filterable: true
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
key: 'joined',
|
|
55
|
+
label: 'Joined',
|
|
56
|
+
type: 'date',
|
|
57
|
+
sortable: true
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
key: 'active',
|
|
61
|
+
label: 'Active',
|
|
62
|
+
type: 'checkbox',
|
|
63
|
+
align: 'center'
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
key: 'actions',
|
|
67
|
+
label: 'Actions',
|
|
68
|
+
type: 'action',
|
|
69
|
+
align: 'right'
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
|
|
73
|
+
const data = ref([
|
|
74
|
+
{
|
|
75
|
+
name: 'John Doe',
|
|
76
|
+
email: 'john@example.com',
|
|
77
|
+
joined: '2023-01-15',
|
|
78
|
+
active: {
|
|
79
|
+
modelValue: true,
|
|
80
|
+
disabled: false
|
|
81
|
+
},
|
|
82
|
+
actions: {
|
|
83
|
+
label: 'Edit',
|
|
84
|
+
icon: 'edit',
|
|
85
|
+
onClick: () => console.log('Edit John')
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
name: 'Jane Smith',
|
|
90
|
+
email: 'jane@example.com',
|
|
91
|
+
joined: '2023-02-20',
|
|
92
|
+
active: {
|
|
93
|
+
modelValue: false,
|
|
94
|
+
disabled: false
|
|
95
|
+
},
|
|
96
|
+
actions: {
|
|
97
|
+
label: 'Edit',
|
|
98
|
+
icon: 'edit',
|
|
99
|
+
onClick: () => console.log('Edit Jane')
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
])
|
|
103
|
+
|
|
104
|
+
const actions: ListAction[] = [
|
|
105
|
+
{
|
|
106
|
+
label: 'Add User',
|
|
107
|
+
icon: 'plus',
|
|
108
|
+
onClick: () => console.log('Add user')
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
label: 'Export',
|
|
112
|
+
icon: 'download',
|
|
113
|
+
onClick: () => console.log('Export')
|
|
114
|
+
}
|
|
115
|
+
]
|
|
116
|
+
|
|
117
|
+
const handleFilter = (value: string) => {
|
|
118
|
+
console.log('Filter:', value)
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
const handleSort = (column: ListColumn, direction: 'asc' | 'desc') => {
|
|
122
|
+
console.log('Sort:', column.key, direction)
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const handleRowClick = (row: any, index: number) => {
|
|
126
|
+
console.log('Row clicked:', row, index)
|
|
127
|
+
}
|
|
128
|
+
</script>
|
|
129
|
+
|
|
130
|
+
<style scoped>
|
|
131
|
+
.list-test {
|
|
132
|
+
padding: 2rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.list-test__section {
|
|
136
|
+
margin-bottom: 3rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.list-test__section h2 {
|
|
140
|
+
margin-bottom: 1rem;
|
|
141
|
+
color: var(--text-primary);
|
|
142
|
+
}
|
|
143
|
+
</style>
|