@opengis/table 0.0.35 → 0.0.36
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 +158 -158
- package/dist/composables/useLocale.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.mjs +1739 -1721
- package/dist/index.umd.js +18 -18
- package/package.json +58 -58
package/README.md
CHANGED
|
@@ -1,159 +1,159 @@
|
|
|
1
|
-
# DataTable Component
|
|
2
|
-
|
|
3
|
-
Full-featured table component for Vue 3 with TypeScript, supporting pagination, row selection, sorting, and custom slots.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- ✅ Pagination with local data or through API
|
|
8
|
-
- ✅ Row selection with checkboxes
|
|
9
|
-
- ✅ Different table sizes (small, medium, large)
|
|
10
|
-
- ✅ Data formatting (text, numbers, dates, badges, arrays)
|
|
11
|
-
- ✅ **Custom slots for columns**
|
|
12
|
-
- ✅ Loading state and error handling
|
|
13
|
-
- ✅ Dark theme
|
|
14
|
-
- ✅ Adaptive design
|
|
15
|
-
|
|
16
|
-
## Custom column slots
|
|
17
|
-
|
|
18
|
-
The component supports custom slots to create custom table cells. Use `template #body` in the `Column` component:
|
|
19
|
-
|
|
20
|
-
```vue
|
|
21
|
-
<DataTable :rows="data" tableClass="w-full" tableStyle="min-width: 50rem">
|
|
22
|
-
<Column field="name" header="Name">
|
|
23
|
-
<template #body="{ data }">
|
|
24
|
-
<div>
|
|
25
|
-
<div class="font-medium">{{ data.name.main }}</div>
|
|
26
|
-
<div class="text-sm text-gray-500">{{ data.name.sub }}</div>
|
|
27
|
-
</div>
|
|
28
|
-
</template>
|
|
29
|
-
</Column>
|
|
30
|
-
<Column field="status" header="Status">
|
|
31
|
-
<template #body="{ data }">
|
|
32
|
-
<span :class="getStatusClass(data.status)" class="px-2 py-1 rounded-full text-xs">
|
|
33
|
-
{{ data.status }}
|
|
34
|
-
</span>
|
|
35
|
-
</template>
|
|
36
|
-
</Column>
|
|
37
|
-
<Column field="actions" header="Actions">
|
|
38
|
-
<template #body="{ data }">
|
|
39
|
-
<div class="flex gap-2">
|
|
40
|
-
<button @click="handleView(data)" title="View">
|
|
41
|
-
<i class="fas fa-eye"></i>
|
|
42
|
-
</button>
|
|
43
|
-
<button @click="handleEdit(data)" title="Edit">
|
|
44
|
-
<i class="fas fa-edit"></i>
|
|
45
|
-
</button>
|
|
46
|
-
</div>
|
|
47
|
-
</template>
|
|
48
|
-
</Column>
|
|
49
|
-
</DataTable>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
### Slot parameters
|
|
53
|
-
|
|
54
|
-
The `#body` slot receives an object with the following properties:
|
|
55
|
-
|
|
56
|
-
- `data` - full row data object
|
|
57
|
-
- `value` - value of the specific column field
|
|
58
|
-
|
|
59
|
-
### Examples
|
|
60
|
-
|
|
61
|
-
#### 1. Compound name with subtitle
|
|
62
|
-
```vue
|
|
63
|
-
<Column field="name" header="Name">
|
|
64
|
-
<template #body="{ data }">
|
|
65
|
-
<div>
|
|
66
|
-
<div class="font-medium">{{ data.name.main }}</div>
|
|
67
|
-
<div class="text-sm text-gray-500">{{ data.name.sub }}</div>
|
|
68
|
-
</div>
|
|
69
|
-
</template>
|
|
70
|
-
</Column>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
#### 2. Badge with color
|
|
74
|
-
```vue
|
|
75
|
-
<Column field="role" header="Role">
|
|
76
|
-
<template #body="{ data }">
|
|
77
|
-
<span :class="data.role === 'admin' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'"
|
|
78
|
-
class="px-2 py-1 rounded-full text-xs font-medium">
|
|
79
|
-
{{ data.role }}
|
|
80
|
-
</span>
|
|
81
|
-
</template>
|
|
82
|
-
</Column>
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
#### 3. Status with icon
|
|
86
|
-
```vue
|
|
87
|
-
<Column field="status" header="Status">
|
|
88
|
-
<template #body="{ data }">
|
|
89
|
-
<div class="flex items-center gap-2">
|
|
90
|
-
<span :class="getStatusIconClass(data.status)" class="text-lg">
|
|
91
|
-
{{ getStatusIcon(data.status) }}
|
|
92
|
-
</span>
|
|
93
|
-
<span>{{ data.status }}</span>
|
|
94
|
-
</div>
|
|
95
|
-
</template>
|
|
96
|
-
</Column>
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
#### 4. Action buttons
|
|
100
|
-
```vue
|
|
101
|
-
<Column field="actions" header="Actions">
|
|
102
|
-
<template #body="{ data }">
|
|
103
|
-
<div class="flex gap-2">
|
|
104
|
-
<button @click.stop="handleView(data)" title="View">
|
|
105
|
-
<i class="fas fa-eye"></i>
|
|
106
|
-
</button>
|
|
107
|
-
<button @click.stop="handleDownload(data)" title="Download">
|
|
108
|
-
<i class="fas fa-download"></i>
|
|
109
|
-
</button>
|
|
110
|
-
</div>
|
|
111
|
-
</template>
|
|
112
|
-
</Column>
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
**Important:** Use `@click.stop` for buttons in slots to prevent row click triggering.
|
|
116
|
-
|
|
117
|
-
## Installation
|
|
118
|
-
|
|
119
|
-
```bash
|
|
120
|
-
npm install @opengis/table
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
## Usage
|
|
124
|
-
|
|
125
|
-
```vue
|
|
126
|
-
<template>
|
|
127
|
-
<DataTable
|
|
128
|
-
:rows="data"
|
|
129
|
-
:columns="columns"
|
|
130
|
-
:selectable="true"
|
|
131
|
-
@update:selectedRows="handleSelection"
|
|
132
|
-
/>
|
|
133
|
-
</template>
|
|
134
|
-
|
|
135
|
-
<script setup>
|
|
136
|
-
import { DataTable, Column } from '@opengis/table';
|
|
137
|
-
|
|
138
|
-
const data = ref([
|
|
139
|
-
{ id: 1, name: 'Product A', category: 'Electronics' },
|
|
140
|
-
{ id: 2, name: 'Product B', category: 'Books' }
|
|
141
|
-
]);
|
|
142
|
-
|
|
143
|
-
const columns = ref([
|
|
144
|
-
{ field: 'id', header: 'ID' },
|
|
145
|
-
{ field: 'name', header: 'Name' },
|
|
146
|
-
{ field: 'category', header: 'Category' }
|
|
147
|
-
]);
|
|
148
|
-
</script>
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
## Theme options
|
|
152
|
-
|
|
153
|
-
| Prop | Type | Default | Description |
|
|
154
|
-
|-------|-----|------------------|------|
|
|
155
|
-
| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Table theme |
|
|
156
|
-
|
|
157
|
-
## License
|
|
158
|
-
|
|
1
|
+
# DataTable Component
|
|
2
|
+
|
|
3
|
+
Full-featured table component for Vue 3 with TypeScript, supporting pagination, row selection, sorting, and custom slots.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- ✅ Pagination with local data or through API
|
|
8
|
+
- ✅ Row selection with checkboxes
|
|
9
|
+
- ✅ Different table sizes (small, medium, large)
|
|
10
|
+
- ✅ Data formatting (text, numbers, dates, badges, arrays)
|
|
11
|
+
- ✅ **Custom slots for columns**
|
|
12
|
+
- ✅ Loading state and error handling
|
|
13
|
+
- ✅ Dark theme
|
|
14
|
+
- ✅ Adaptive design
|
|
15
|
+
|
|
16
|
+
## Custom column slots
|
|
17
|
+
|
|
18
|
+
The component supports custom slots to create custom table cells. Use `template #body` in the `Column` component:
|
|
19
|
+
|
|
20
|
+
```vue
|
|
21
|
+
<DataTable :rows="data" tableClass="w-full" tableStyle="min-width: 50rem">
|
|
22
|
+
<Column field="name" header="Name">
|
|
23
|
+
<template #body="{ data }">
|
|
24
|
+
<div>
|
|
25
|
+
<div class="font-medium">{{ data.name.main }}</div>
|
|
26
|
+
<div class="text-sm text-gray-500">{{ data.name.sub }}</div>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
</Column>
|
|
30
|
+
<Column field="status" header="Status">
|
|
31
|
+
<template #body="{ data }">
|
|
32
|
+
<span :class="getStatusClass(data.status)" class="px-2 py-1 rounded-full text-xs">
|
|
33
|
+
{{ data.status }}
|
|
34
|
+
</span>
|
|
35
|
+
</template>
|
|
36
|
+
</Column>
|
|
37
|
+
<Column field="actions" header="Actions">
|
|
38
|
+
<template #body="{ data }">
|
|
39
|
+
<div class="flex gap-2">
|
|
40
|
+
<button @click="handleView(data)" title="View">
|
|
41
|
+
<i class="fas fa-eye"></i>
|
|
42
|
+
</button>
|
|
43
|
+
<button @click="handleEdit(data)" title="Edit">
|
|
44
|
+
<i class="fas fa-edit"></i>
|
|
45
|
+
</button>
|
|
46
|
+
</div>
|
|
47
|
+
</template>
|
|
48
|
+
</Column>
|
|
49
|
+
</DataTable>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Slot parameters
|
|
53
|
+
|
|
54
|
+
The `#body` slot receives an object with the following properties:
|
|
55
|
+
|
|
56
|
+
- `data` - full row data object
|
|
57
|
+
- `value` - value of the specific column field
|
|
58
|
+
|
|
59
|
+
### Examples
|
|
60
|
+
|
|
61
|
+
#### 1. Compound name with subtitle
|
|
62
|
+
```vue
|
|
63
|
+
<Column field="name" header="Name">
|
|
64
|
+
<template #body="{ data }">
|
|
65
|
+
<div>
|
|
66
|
+
<div class="font-medium">{{ data.name.main }}</div>
|
|
67
|
+
<div class="text-sm text-gray-500">{{ data.name.sub }}</div>
|
|
68
|
+
</div>
|
|
69
|
+
</template>
|
|
70
|
+
</Column>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
#### 2. Badge with color
|
|
74
|
+
```vue
|
|
75
|
+
<Column field="role" header="Role">
|
|
76
|
+
<template #body="{ data }">
|
|
77
|
+
<span :class="data.role === 'admin' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'"
|
|
78
|
+
class="px-2 py-1 rounded-full text-xs font-medium">
|
|
79
|
+
{{ data.role }}
|
|
80
|
+
</span>
|
|
81
|
+
</template>
|
|
82
|
+
</Column>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
#### 3. Status with icon
|
|
86
|
+
```vue
|
|
87
|
+
<Column field="status" header="Status">
|
|
88
|
+
<template #body="{ data }">
|
|
89
|
+
<div class="flex items-center gap-2">
|
|
90
|
+
<span :class="getStatusIconClass(data.status)" class="text-lg">
|
|
91
|
+
{{ getStatusIcon(data.status) }}
|
|
92
|
+
</span>
|
|
93
|
+
<span>{{ data.status }}</span>
|
|
94
|
+
</div>
|
|
95
|
+
</template>
|
|
96
|
+
</Column>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
#### 4. Action buttons
|
|
100
|
+
```vue
|
|
101
|
+
<Column field="actions" header="Actions">
|
|
102
|
+
<template #body="{ data }">
|
|
103
|
+
<div class="flex gap-2">
|
|
104
|
+
<button @click.stop="handleView(data)" title="View">
|
|
105
|
+
<i class="fas fa-eye"></i>
|
|
106
|
+
</button>
|
|
107
|
+
<button @click.stop="handleDownload(data)" title="Download">
|
|
108
|
+
<i class="fas fa-download"></i>
|
|
109
|
+
</button>
|
|
110
|
+
</div>
|
|
111
|
+
</template>
|
|
112
|
+
</Column>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
**Important:** Use `@click.stop` for buttons in slots to prevent row click triggering.
|
|
116
|
+
|
|
117
|
+
## Installation
|
|
118
|
+
|
|
119
|
+
```bash
|
|
120
|
+
npm install @opengis/table
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Usage
|
|
124
|
+
|
|
125
|
+
```vue
|
|
126
|
+
<template>
|
|
127
|
+
<DataTable
|
|
128
|
+
:rows="data"
|
|
129
|
+
:columns="columns"
|
|
130
|
+
:selectable="true"
|
|
131
|
+
@update:selectedRows="handleSelection"
|
|
132
|
+
/>
|
|
133
|
+
</template>
|
|
134
|
+
|
|
135
|
+
<script setup>
|
|
136
|
+
import { DataTable, Column } from '@opengis/table';
|
|
137
|
+
|
|
138
|
+
const data = ref([
|
|
139
|
+
{ id: 1, name: 'Product A', category: 'Electronics' },
|
|
140
|
+
{ id: 2, name: 'Product B', category: 'Books' }
|
|
141
|
+
]);
|
|
142
|
+
|
|
143
|
+
const columns = ref([
|
|
144
|
+
{ field: 'id', header: 'ID' },
|
|
145
|
+
{ field: 'name', header: 'Name' },
|
|
146
|
+
{ field: 'category', header: 'Category' }
|
|
147
|
+
]);
|
|
148
|
+
</script>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Theme options
|
|
152
|
+
|
|
153
|
+
| Prop | Type | Default | Description |
|
|
154
|
+
|-------|-----|------------------|------|
|
|
155
|
+
| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Table theme |
|
|
156
|
+
|
|
157
|
+
## License
|
|
158
|
+
|
|
159
159
|
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLocale.d.ts","sourceRoot":"","sources":["../../src/composables/useLocale.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useLocale.d.ts","sourceRoot":"","sources":["../../src/composables/useLocale.ts"],"names":[],"mappings":"AA+CA,MAAM,CAAC,OAAO,UAAU,SAAS,QAKhC"}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.badge[data-v-
|
|
1
|
+
.badge[data-v-14567189]{transition:all .2s ease-in-out}.badge[data-v-14567189]:hover{transform:scale(1.05)}
|