@xy-planning-network/trees 0.9.4 → 0.9.5

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 (6) hide show
  1. package/dist/trees.es.js +493 -488
  2. package/dist/trees.umd.js +4 -4
  3. package/package.json +1 -1
  4. package/src/lib-components/lists/DataTable.vue +10 -6
  5. package/src/lib-components/lists/DynamicTable.vue +57 -52
  6. package/src/lib-components/navigation/ActionsDropdown.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xy-planning-network/trees",
3
- "version": "0.9.4",
3
+ "version": "0.9.5",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "repository": "github:xy-planning-network/trees",
package/src/lib-components/lists/DataTable.vue CHANGED
@@ -34,12 +34,12 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
34
34
  class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg"
35
35
  >
36
36
  <table class="min-w-full divide-y divide-gray-200">
37
- <thead>
37
+ <thead class="bg-gray-100">
38
38
  <tr>
39
39
  <th
40
40
  v-for="(col, idx) in columns"
41
41
  :key="idx"
42
- class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase bg-gray-50 leading-4"
42
+ class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
43
43
  :class="col.alignment"
44
44
  >
45
45
  {{ col.title }}
@@ -48,12 +48,16 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
48
48
  <!--Table Actions Header-->
49
49
  <th
50
50
  v-if="hasActions"
51
- class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase bg-gray-50 leading-4"
51
+ class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
52
52
  />
53
53
  </tr>
54
54
  </thead>
55
- <tbody class="bg-white divide-y divide-gray-200">
56
- <tr v-for="(row, rowIdx) in rows" :key="rowIdx">
55
+ <tbody class="bg-white">
56
+ <tr
57
+ v-for="(row, rowIdx) in rows"
58
+ :key="rowIdx"
59
+ class="even:bg-gray-50"
60
+ >
57
61
  <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
58
62
  <component
59
63
  :is="'td'"
@@ -87,7 +91,7 @@ const { columns, hasActions, isEmptyCellValue, rows } = useTable(
87
91
 
88
92
  <tr v-if="rows.length === 0">
89
93
  <td
90
- :colspan="columns.length"
94
+ :colspan="columns.length + (hasActions ? 1 : 0)"
91
95
  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
92
96
  >
93
97
  No items were found!
package/src/lib-components/lists/DynamicTable.vue CHANGED
@@ -236,76 +236,81 @@ loadAndRender()
236
236
  class="relative z-0 min-w-full align-middle border-b border-gray-200 shadow sm:rounded-lg overflow-x-auto"
237
237
  >
238
238
  <table class="min-w-full divide-y divide-gray-200">
239
- <thead>
239
+ <thead class="bg-gray-100">
240
240
  <tr>
241
241
  <th
242
242
  v-for="(col, idx) in columns"
243
243
  :key="idx"
244
- class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase bg-gray-50 leading-4"
244
+ class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
245
245
  :class="col.alignment"
246
246
  >
247
- <span v-if="col.title">{{ col.title }}</span>
248
- <span
249
- v-if="col.sort"
250
- class="cursor-pointer"
251
- @click.prevent="handleSort(col.sort as string)"
247
+ <div
248
+ class="inline-flex items-center gap-2"
249
+ :class="{ 'cursor-pointer': col.sort }"
250
+ @click.prevent="
251
+ col.sort ? handleSort(col.sort as string) : undefined
252
+ "
252
253
  >
253
- <svg
254
- v-if="currentSort !== col.sort"
255
- xmlns="http://www.w3.org/2000/svg"
256
- fill="none"
257
- viewBox="0 0 24 24"
258
- stroke="currentColor"
259
- class="h-5 inline"
260
- >
261
- <path
262
- stroke-linecap="round"
263
- stroke-linejoin="round"
264
- stroke-width="2"
265
- d="M8 9l4-4 4 4m0 6l-4 4-4-4"
266
- />
267
- </svg>
268
- <svg
269
- v-else-if="currentSortDirection == 'desc'"
270
- xmlns="http://www.w3.org/2000/svg"
271
- viewBox="0 0 20 20"
272
- fill="currentColor"
273
- class="h-5 inline"
274
- >
275
- <path
276
- fill-rule="evenodd"
277
- d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
278
- clip-rule="evenodd"
279
- />
280
- </svg>
281
- <svg
282
- v-else
283
- xmlns="http://www.w3.org/2000/svg"
284
- viewBox="0 0 20 20"
285
- fill="currentColor"
286
- class="h-5 inline"
287
- >
288
- <path
289
- fill-rule="evenodd"
290
- d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
291
- clip-rule="evenodd"
292
- />
293
- </svg>
294
- </span>
254
+ <span v-if="col.title">{{ col.title }}</span>
255
+ <span v-if="col.sort">
256
+ <svg
257
+ v-if="currentSort !== col.sort"
258
+ xmlns="http://www.w3.org/2000/svg"
259
+ fill="none"
260
+ viewBox="0 0 24 24"
261
+ stroke="currentColor"
262
+ class="h-5 inline"
263
+ >
264
+ <path
265
+ stroke-linecap="round"
266
+ stroke-linejoin="round"
267
+ stroke-width="2"
268
+ d="M8 9l4-4 4 4m0 6l-4 4-4-4"
269
+ />
270
+ </svg>
271
+ <svg
272
+ v-else-if="currentSortDirection == 'desc'"
273
+ xmlns="http://www.w3.org/2000/svg"
274
+ viewBox="0 0 20 20"
275
+ fill="currentColor"
276
+ class="h-5 inline"
277
+ >
278
+ <path
279
+ fill-rule="evenodd"
280
+ d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
281
+ clip-rule="evenodd"
282
+ />
283
+ </svg>
284
+ <svg
285
+ v-else
286
+ xmlns="http://www.w3.org/2000/svg"
287
+ viewBox="0 0 20 20"
288
+ fill="currentColor"
289
+ class="h-5 inline"
290
+ >
291
+ <path
292
+ fill-rule="evenodd"
293
+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
294
+ clip-rule="evenodd"
295
+ />
296
+ </svg>
297
+ </span>
298
+ </div>
295
299
  </th>
296
300
 
297
301
  <!--Table Actions Header-->
298
302
  <th
299
303
  v-if="hasActions"
300
- class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase bg-gray-50 leading-4"
304
+ class="px-6 py-3 text-xs font-medium tracking-wider text-gray-900 uppercase leading-4"
301
305
  />
302
306
  </tr>
303
307
  </thead>
304
308
 
305
- <tbody class="bg-white divide-y divide-gray-200">
309
+ <tbody class="bg-white">
306
310
  <tr
307
311
  v-for="(row, rowIdx) in rows"
308
312
  :key="rowIdx"
313
+ class="even:bg-gray-50"
309
314
  @click="$emit('click:row', row.rowData)"
310
315
  >
311
316
  <template v-for="(cell, cellIdx) in row.cells" :key="cellIdx">
@@ -341,7 +346,7 @@ loadAndRender()
341
346
 
342
347
  <tr v-if="!hasContent">
343
348
  <td
344
- :colspan="rows.length"
349
+ :colspan="columns.length + (hasActions ? 1 : 0)"
345
350
  class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap leading-5"
346
351
  >
347
352
  No items were found!
package/src/lib-components/navigation/ActionsDropdown.vue CHANGED
@@ -29,7 +29,7 @@ const { floatingStyles } = useFloating(trigger, wrapper, {
29
29
  <Menu as="div" class="relative flex justify-end items-center">
30
30
  <MenuButton
31
31
  ref="trigger"
32
- class="w-8 h-8 bg-white inline-flex items-center justify-center text-gray-700 rounded-full hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
32
+ class="w-8 h-8 inline-flex items-center justify-center text-gray-700 rounded-full hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
33
33
  :disabled="!hasActions"
34
34
  >
35
35
  <span class="sr-only">Open options</span>