picocrank 1.25.1 → 1.26.0

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 (44) hide show
  1. package/eslint.config.js +68 -0
  2. package/package.json +13 -3
  3. package/router.js +74 -0
  4. package/styles/dark-theme.css +21 -9
  5. package/styles/picocrank-extensions.css +131 -2
  6. package/supplemental-themes/catppuccin-latte-frappe/theme.css +12 -22
  7. package/supplemental-themes/dracula-alucard/theme.css +12 -22
  8. package/supplemental-themes/gruvbox-dark-light/theme.css +12 -22
  9. package/supplemental-themes/waffles/theme.css +2 -12
  10. package/vue/components/Breadcrumbs.vue +192 -45
  11. package/vue/components/Calendar.vue +93 -180
  12. package/vue/components/DangerZone.vue +186 -0
  13. package/vue/components/Header.vue +22 -6
  14. package/vue/components/Login.vue +6 -7
  15. package/vue/components/NavigationGrid.vue +26 -204
  16. package/vue/components/NotificationBlock.vue +120 -0
  17. package/vue/components/NotificationPopup.vue +44 -41
  18. package/vue/components/QuickSearch.vue +21 -47
  19. package/vue/components/RadioGroup.vue +4 -4
  20. package/vue/components/ReadOnlyTextArea.vue +1 -1
  21. package/vue/components/SidebarNavLink.vue +3 -3
  22. package/vue/components/Table.vue +109 -81
  23. package/vue/components/TableColumnFilterPopover.vue +7 -17
  24. package/vue/components/TableColumnOptionsPopover.vue +22 -27
  25. package/vue/components/Tabs.vue +366 -82
  26. package/vue/components/TopBar.vue +2 -2
  27. package/vue/composables/tableColumnPriorities.js +33 -0
  28. package/vue/composables/tableFilters.js +1 -1
  29. package/vue/data/navSectionHubs.js +196 -0
  30. package/vue/data/routeBreadcrumbs.js +90 -0
  31. package/vue/examples/Admin.vue +12 -12
  32. package/vue/examples/App.vue +27 -36
  33. package/vue/examples/CalendarExample.vue +32 -22
  34. package/vue/examples/ExampleHeaderThemeSwitcher.vue +1 -1
  35. package/vue/examples/Login.vue +0 -3
  36. package/vue/examples/LoginExample.vue +2 -14
  37. package/vue/examples/NavSectionHub.vue +36 -0
  38. package/vue/examples/PageStructure.vue +6 -3
  39. package/vue/examples/StatusExample.vue +248 -129
  40. package/vue/examples/TableExample.vue +68 -67
  41. package/vue/examples/TabsExample.vue +200 -255
  42. package/vue/examples/ThemePreview.vue +21 -23
  43. package/vue/examples/ViewItem.vue +32 -5
  44. package/vue/examples/Welcome.vue +3 -112
package/vue/components/TableColumnFilterPopover.vue CHANGED
@@ -497,10 +497,10 @@ onBeforeUnmount(() => {
497
497
  max-width: min(24rem, calc(100vw - 1rem));
498
498
  max-height: calc(100vh - 1rem);
499
499
  padding: 0.75rem;
500
- border: 1px solid var(--border-color, #e1e5e9);
500
+ border: 1px solid var(--table-popover-border);
501
501
  border-radius: 0.4rem;
502
- background: var(--background-color, #fff);
503
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
502
+ background: var(--table-popover-bg);
503
+ box-shadow: var(--table-popover-shadow);
504
504
  overflow: hidden;
505
505
  }
506
506
 
@@ -552,7 +552,7 @@ onBeforeUnmount(() => {
552
552
 
553
553
  .field-label {
554
554
  font-size: 0.85rem;
555
- color: var(--text-muted, #666);
555
+ color: var(--table-popover-muted-fg);
556
556
  }
557
557
 
558
558
  .popover-actions {
@@ -563,21 +563,21 @@ onBeforeUnmount(() => {
563
563
  gap: 0.5rem;
564
564
  margin-top: 0.75rem;
565
565
  padding-top: 0.75rem;
566
- border-top: 1px solid var(--border-color, #e1e5e9);
566
+ border-top: 1px solid var(--table-popover-divider);
567
567
  }
568
568
 
569
569
  .saved-filters {
570
570
  flex-shrink: 0;
571
571
  margin-top: 0.75rem;
572
572
  padding-top: 0.75rem;
573
- border-top: 1px solid var(--border-color, #e1e5e9);
573
+ border-top: 1px solid var(--table-popover-divider);
574
574
  min-height: 0;
575
575
  }
576
576
 
577
577
  .saved-filters-heading {
578
578
  margin: 0 0 0.5rem;
579
579
  font-size: 0.85rem;
580
- color: var(--text-muted, #666);
580
+ color: var(--table-popover-muted-fg);
581
581
  }
582
582
 
583
583
  .saved-filters-list {
@@ -627,14 +627,4 @@ onBeforeUnmount(() => {
627
627
  align-items: center;
628
628
  justify-content: center;
629
629
  }
630
-
631
- html[data-theme="dark"] .table-column-filter-popover {
632
- background: var(--background-color, #1e1e1e);
633
- border-color: var(--border-color, #444);
634
- }
635
-
636
- html[data-theme="dark"] .popover-actions,
637
- html[data-theme="dark"] .saved-filters {
638
- border-top-color: var(--border-color, #444);
639
- }
640
630
  </style>
package/vue/components/TableColumnOptionsPopover.vue CHANGED
@@ -264,6 +264,10 @@ const props = defineProps({
264
264
  type: Object,
265
265
  default: () => ({}),
266
266
  },
267
+ defaultColumnPriorities: {
268
+ type: Object,
269
+ default: () => ({}),
270
+ },
267
271
  anchorEl: {
268
272
  type: Object,
269
273
  default: null,
@@ -389,6 +393,11 @@ function isValidColPriority(priority) {
389
393
  }
390
394
 
391
395
  function defaultColumnPriority(key) {
396
+ if (Object.prototype.hasOwnProperty.call(props.defaultColumnPriorities, key)) {
397
+ const value = props.defaultColumnPriorities[key]
398
+ return isValidColPriority(value) ? value : null
399
+ }
400
+
392
401
  const header = headerByKey.value.get(key)
393
402
  return isValidColPriority(header?.colPriority) ? header.colPriority : null
394
403
  }
@@ -839,10 +848,10 @@ onBeforeUnmount(() => {
839
848
  min-width: min(30rem, calc(100vw - 1rem));
840
849
  max-height: calc(100vh - 1rem);
841
850
  padding: 0.75rem;
842
- border: 1px solid var(--border-color, #e1e5e9);
851
+ border: 1px solid var(--table-popover-border);
843
852
  border-radius: 0.4rem;
844
- background: var(--background-color, #fff);
845
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
853
+ background: var(--table-popover-bg);
854
+ box-shadow: var(--table-popover-shadow);
846
855
  overflow: hidden;
847
856
  box-sizing: border-box;
848
857
  }
@@ -923,19 +932,19 @@ onBeforeUnmount(() => {
923
932
 
924
933
  .field-label {
925
934
  font-size: 0.85rem;
926
- color: var(--text-muted, #666);
935
+ color: var(--table-popover-muted-fg);
927
936
  }
928
937
 
929
938
  .column-options-tab-error {
930
939
  margin: 0;
931
940
  font-size: 0.85rem;
932
- color: var(--bad-color, #c62828);
941
+ color: var(--table-popover-error-fg);
933
942
  }
934
943
 
935
944
  .column-options-tab-success {
936
945
  margin: 0;
937
946
  font-size: 0.85rem;
938
- color: var(--good-color, #2e7d32);
947
+ color: var(--table-popover-success-fg);
939
948
  }
940
949
 
941
950
  .column-options-load-panel {
@@ -948,7 +957,7 @@ onBeforeUnmount(() => {
948
957
  display: flex;
949
958
  justify-content: center;
950
959
  padding-top: 0.25rem;
951
- border-top: 1px solid var(--border-color, #e1e5e9);
960
+ border-top: 1px solid var(--table-popover-divider);
952
961
  }
953
962
 
954
963
  .column-options-preset-list {
@@ -968,7 +977,7 @@ onBeforeUnmount(() => {
968
977
  gap: 0.5rem;
969
978
  align-items: start;
970
979
  padding-bottom: 0.65rem;
971
- border-bottom: 1px solid var(--border-color, #e1e5e9);
980
+ border-bottom: 1px solid var(--table-popover-divider);
972
981
  }
973
982
 
974
983
  .column-options-preset-item:last-child {
@@ -1014,9 +1023,9 @@ onBeforeUnmount(() => {
1014
1023
  align-items: center;
1015
1024
  gap: 0.5rem;
1016
1025
  padding: 0.25rem 0.45rem;
1017
- border: 1px solid var(--border-color, #e1e5e9);
1026
+ border: 1px solid var(--table-popover-border);
1018
1027
  border-radius: 0.35rem;
1019
- background: var(--standout-bg-color, #f8f9fa);
1028
+ background: var(--table-popover-item-bg);
1020
1029
  }
1021
1030
 
1022
1031
  .column-options-item.is-dragging {
@@ -1024,7 +1033,7 @@ onBeforeUnmount(() => {
1024
1033
  }
1025
1034
 
1026
1035
  .column-options-item.is-drag-over {
1027
- border-color: var(--text-color, #334155);
1036
+ border-color: var(--table-popover-item-drag-border);
1028
1037
  }
1029
1038
 
1030
1039
  .column-options-item.is-fixed {
@@ -1034,7 +1043,7 @@ onBeforeUnmount(() => {
1034
1043
  .column-options-drag-handle {
1035
1044
  display: inline-flex;
1036
1045
  align-items: center;
1037
- color: var(--text-color, inherit);
1046
+ color: var(--table-popover-fg, inherit);
1038
1047
  opacity: 0.65;
1039
1048
  cursor: grab;
1040
1049
  }
@@ -1097,20 +1106,6 @@ onBeforeUnmount(() => {
1097
1106
  gap: 0.5rem;
1098
1107
  margin-top: 0.75rem;
1099
1108
  padding-top: 0.75rem;
1100
- border-top: 1px solid var(--border-color, #e1e5e9);
1101
- }
1102
-
1103
- html[data-theme="dark"] .table-column-options-popover {
1104
- background: var(--background-color, #1e1e1e);
1105
- border-color: var(--border-color, #444);
1106
- }
1107
-
1108
- html[data-theme="dark"] .column-options-item {
1109
- background: var(--standout-bg-color, #1f1f1f);
1110
- border-color: var(--border-color, #444);
1111
- }
1112
-
1113
- html[data-theme="dark"] .popover-actions {
1114
- border-top-color: var(--border-color, #444);
1109
+ border-top: 1px solid var(--table-popover-divider);
1115
1110
  }
1116
1111
  </style>