@opengis/table 0.0.33 → 0.0.35

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.
Files changed (8) hide show
  1. package/README.md +158 -158
  2. package/dist/components/DataTable.vue.d.ts.map +1 -1
  3. package/dist/components/Export.vue.d.ts.map +1 -1
  4. package/dist/composables/i18n.d.ts.map +1 -1
  5. package/dist/index.css +1 -1
  6. package/dist/index.mjs +2435 -2300
  7. package/dist/index.umd.js +20 -15
  8. 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
package/dist/components/DataTable.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.vue"],"names":[],"mappings":"AAy7BA,OAAO,KAAK,EACV,MAAM,EAAE,sBAAsB,EAAE,SAAS,EAAiB,UAAU,EACrE,MAAM,UAAU,CAAC;AAiqClB,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ;;CAAW,EAAE,QAAQ;;CAAY,CAAE;AACtJ,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgEpD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAQnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"DataTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.vue"],"names":[],"mappings":"AA27BA,OAAO,KAAK,EACV,MAAM,EAAE,sBAAsB,EAAE,SAAS,EAAiB,UAAU,EACrE,MAAM,UAAU,CAAC;AAmqClB,QAAA,IAAI,OAAO;;CAAU,EAAE,QAAQ;;CAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ;;;CAAW,EAAE,QAAQ;;CAAW,EAAE,QAAQ;;CAAY,CAAE;AACtJ,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GACzC;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC5C;IAAE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAgEpD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAQnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
package/dist/components/Export.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Export.vue.d.ts","sourceRoot":"","sources":["../../src/components/Export.vue"],"names":[],"mappings":"AA6PA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;;AA8wBxD,wBAMG"}
1
+ {"version":3,"file":"Export.vue.d.ts","sourceRoot":"","sources":["../../src/components/Export.vue"],"names":[],"mappings":"AAsYA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAMlC,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;;AAigCxD,wBAMG"}
package/dist/composables/i18n.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/composables/i18n.ts"],"names":[],"mappings":"wBAyCK,GAAG;AAzCR,wBAyCS"}
1
+ {"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/composables/i18n.ts"],"names":[],"mappings":"wBAmDK,GAAG;AAnDR,wBAmDS"}
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .badge[data-v-14567189]{transition:all .2s ease-in-out}.badge[data-v-14567189]:hover{transform:scale(1.05)}
1
+ .badge[data-v-59a2b734]{transition:all .2s ease-in-out}.badge[data-v-59a2b734]:hover{transform:scale(1.05)}