picocrank 1.23.1 → 1.25.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 (38) hide show
  1. package/AGENTS.md +2 -0
  2. package/docs/filter-query-v1.md +180 -0
  3. package/logo.svg +7 -7
  4. package/package.json +7 -5
  5. package/public/themes/README.md +19 -2
  6. package/public/themes/index.json +1 -5
  7. package/styles/dark-theme.css +16 -1
  8. package/supplemental-themes/README.md +9 -0
  9. package/supplemental-themes/catppuccin-latte-frappe/theme.css +276 -0
  10. package/supplemental-themes/dracula-alucard/theme.css +258 -0
  11. package/supplemental-themes/gruvbox-dark-light/theme.css +264 -0
  12. package/supplemental-themes/index.json +17 -0
  13. package/{public/themes → supplemental-themes}/waffles/theme.css +99 -0
  14. package/vite.config.js +91 -0
  15. package/vue/components/FormField.vue +69 -1
  16. package/vue/components/Header.vue +3 -3
  17. package/vue/components/Login.vue +1 -3
  18. package/vue/components/Section.vue +45 -14
  19. package/vue/components/Sidebar.vue +2 -1
  20. package/vue/components/SidebarNavLink.vue +6 -0
  21. package/vue/components/Table.vue +1113 -73
  22. package/vue/components/TableColumnFilterPopover.vue +263 -44
  23. package/vue/components/TableColumnOptionsPopover.vue +1116 -0
  24. package/vue/components/ThemeSwitcher.vue +119 -0
  25. package/vue/components/TopBar.vue +2 -2
  26. package/vue/composables/tableColumnPresets.js +296 -0
  27. package/vue/composables/tableFilterQuery.js +202 -0
  28. package/vue/composables/tableFilters.js +167 -3
  29. package/vue/composables/useCustomTheme.js +167 -24
  30. package/vue/data/examplePeople.js +2 -6
  31. package/vue/examples/App.vue +1 -1
  32. package/vue/examples/FormExample.vue +40 -6
  33. package/vue/examples/LoginExample.vue +1 -3
  34. package/vue/examples/TableExample.vue +329 -11
  35. package/vue/examples/TableRemoteExample.vue +112 -4
  36. package/vue/examples/ThemePreview.vue +17 -31
  37. package/public/themes/catppuccin/theme.css +0 -195
  38. package/public/themes/dracula/theme.css +0 -181
package/public/themes/catppuccin/theme.css DELETED
@@ -1,195 +0,0 @@
1
- /*
2
- * Catppuccin Mocha sample theme for PicoCrank / Femtocrank.
3
- * Palette: https://catppuccin.com/palette/ (Mocha)
4
- *
5
- * Asset URLs must be absolute, e.g.:
6
- * background-image: url('/themes/catppuccin/background.png');
7
- */
8
-
9
- :root,
10
- html {
11
- color-scheme: dark;
12
-
13
- --ctp-rosewater: #f5e0dc;
14
- --ctp-flamingo: #f2cdcd;
15
- --ctp-pink: #f5c2e7;
16
- --ctp-mauve: #cba6f7;
17
- --ctp-red: #f38ba8;
18
- --ctp-maroon: #eba0ac;
19
- --ctp-peach: #fab387;
20
- --ctp-yellow: #f9e2af;
21
- --ctp-green: #a6e3a1;
22
- --ctp-teal: #94e2d5;
23
- --ctp-sky: #89dceb;
24
- --ctp-sapphire: #74c7ec;
25
- --ctp-blue: #89b4fa;
26
- --ctp-lavender: #b4befe;
27
- --ctp-text: #cdd6f4;
28
- --ctp-subtext1: #bac2de;
29
- --ctp-subtext0: #a6adc8;
30
- --ctp-overlay2: #9399b2;
31
- --ctp-overlay1: #7f849c;
32
- --ctp-overlay0: #6c7086;
33
- --ctp-surface2: #585b70;
34
- --ctp-surface1: #45475a;
35
- --ctp-surface0: #313244;
36
- --ctp-base: #1e1e2e;
37
- --ctp-mantle: #181825;
38
- --ctp-crust: #11111b;
39
-
40
- --text-color: var(--ctp-text);
41
- --border-color: var(--ctp-surface1);
42
- --standout-bg-color: var(--ctp-mantle);
43
- --hover-background-color: var(--ctp-surface0);
44
- --hover-text-color: var(--ctp-text);
45
- --header-hover-background-color: var(--ctp-surface1);
46
- --header-hover-text-color: var(--ctp-text);
47
- --disabled-background-color: var(--ctp-surface0);
48
- --disabled-text-color: var(--ctp-overlay0);
49
-
50
- --karma-good: var(--ctp-green);
51
- --karma-bad: var(--ctp-red);
52
- --karma-warning: var(--ctp-yellow);
53
- --karma-severe: var(--ctp-maroon);
54
- --karma-important: var(--ctp-peach);
55
- --karma-note: var(--ctp-sapphire);
56
- --karma-info: var(--ctp-surface1);
57
- --karma-old: var(--ctp-overlay0);
58
-
59
- --karma-good-fg: var(--ctp-green);
60
- --karma-bad-fg: var(--ctp-red);
61
- --karma-warning-fg: var(--ctp-yellow);
62
- --karma-severe-fg: var(--ctp-maroon);
63
- --karma-important-fg: var(--ctp-peach);
64
- --karma-note-fg: var(--ctp-sapphire);
65
- --karma-info-fg: var(--ctp-subtext0);
66
- --karma-old-fg: var(--ctp-overlay1);
67
- }
68
-
69
- body {
70
- background-color: var(--ctp-base);
71
- color: var(--ctp-text);
72
- }
73
-
74
- header {
75
- background-color: var(--ctp-crust);
76
- border-bottom: 1px solid var(--ctp-surface0);
77
- box-shadow: none;
78
- color: var(--ctp-text);
79
- }
80
-
81
- #sidebar-toggler-button,
82
- #sidebar-toggler-button.neutral,
83
- header .theme-toggle,
84
- header .theme-toggle.neutral,
85
- header .search-trigger,
86
- header .search-trigger.neutral {
87
- background-color: transparent;
88
- border: 0;
89
- color: var(--ctp-text);
90
- }
91
-
92
- #sidebar-toggler-button:hover,
93
- header .theme-toggle:hover,
94
- header .search-trigger:hover,
95
- header .user-info:hover {
96
- background-color: var(--header-hover-background-color);
97
- color: var(--header-hover-text-color);
98
- }
99
-
100
- aside,
101
- #sidebar {
102
- background-color: var(--ctp-mantle);
103
- color: var(--ctp-text);
104
- border-color: var(--ctp-surface0);
105
- /* Replace Femtocrank's light gray glow — it reads as a haze on Mocha */
106
- box-shadow: 0.15em 0 0.6em rgba(17, 17, 27, 0.65);
107
- }
108
-
109
- aside a,
110
- aside a:visited {
111
- color: var(--ctp-text);
112
- }
113
-
114
- aside a:hover,
115
- aside :is(ul, menu) li a:hover,
116
- aside .nav-section-header:hover {
117
- background-color: var(--ctp-surface0);
118
- color: var(--ctp-text);
119
- }
120
-
121
- section {
122
- background-color: var(--ctp-mantle);
123
- color: var(--ctp-text);
124
- box-shadow: 0 0 0.5em var(--ctp-crust);
125
- border-color: var(--ctp-surface0);
126
- }
127
-
128
- section .section-header,
129
- section .section-subheader {
130
- background-color: var(--ctp-mantle);
131
- border-bottom-color: var(--ctp-surface0);
132
- color: var(--ctp-text);
133
- }
134
-
135
- button,
136
- .button {
137
- background-color: var(--ctp-surface0);
138
- border: 1px solid var(--ctp-surface1);
139
- color: var(--ctp-text);
140
- }
141
-
142
- button:hover,
143
- .button:hover {
144
- background-color: var(--ctp-surface1);
145
- color: var(--ctp-text);
146
- }
147
-
148
- button.good,
149
- .button.good {
150
- background-color: var(--ctp-green);
151
- border-color: var(--ctp-green);
152
- color: var(--ctp-crust);
153
- }
154
-
155
- button.bad,
156
- .button.bad {
157
- background-color: var(--ctp-red);
158
- border-color: var(--ctp-red);
159
- color: var(--ctp-crust);
160
- }
161
-
162
- button.warning,
163
- .button.warning {
164
- background-color: var(--ctp-yellow);
165
- border-color: var(--ctp-yellow);
166
- color: var(--ctp-crust);
167
- }
168
-
169
- button.neutral,
170
- .button.neutral {
171
- background-color: var(--ctp-surface1);
172
- border-color: var(--ctp-surface2);
173
- color: var(--ctp-text);
174
- }
175
-
176
- input,
177
- select,
178
- textarea {
179
- background-color: var(--ctp-surface0);
180
- border: 1px solid var(--ctp-surface1);
181
- color: var(--ctp-text);
182
- }
183
-
184
- a {
185
- color: var(--ctp-blue);
186
- }
187
-
188
- footer {
189
- color: var(--ctp-subtext0);
190
- border-top-color: var(--ctp-surface0);
191
- }
192
-
193
- .subtle {
194
- color: var(--ctp-subtext0);
195
- }
package/public/themes/dracula/theme.css DELETED
@@ -1,181 +0,0 @@
1
- /*
2
- * Dracula sample theme for PicoCrank / Femtocrank.
3
- * Palette: https://draculatheme.com/ / https://spec.draculatheme.com/
4
- *
5
- * Asset URLs must be absolute, e.g.:
6
- * background-image: url('/themes/dracula/background.png');
7
- */
8
-
9
- :root,
10
- html {
11
- color-scheme: dark;
12
-
13
- --dracula-background: #282a36;
14
- --dracula-current-line: #44475a;
15
- --dracula-foreground: #f8f8f2;
16
- --dracula-comment: #6272a4;
17
- --dracula-cyan: #8be9fd;
18
- --dracula-green: #50fa7b;
19
- --dracula-orange: #ffb86c;
20
- --dracula-pink: #ff79c6;
21
- --dracula-purple: #bd93f9;
22
- --dracula-red: #ff5555;
23
- --dracula-yellow: #f1fa8c;
24
- --dracula-selection: #44475a;
25
- --dracula-ansi-black: #21222c;
26
-
27
- --text-color: var(--dracula-foreground);
28
- --border-color: var(--dracula-current-line);
29
- --standout-bg-color: var(--dracula-ansi-black);
30
- --hover-background-color: var(--dracula-selection);
31
- --hover-text-color: var(--dracula-foreground);
32
- --header-hover-background-color: var(--dracula-selection);
33
- --header-hover-text-color: var(--dracula-foreground);
34
- --disabled-background-color: var(--dracula-current-line);
35
- --disabled-text-color: var(--dracula-comment);
36
-
37
- --karma-good: var(--dracula-green);
38
- --karma-bad: var(--dracula-red);
39
- --karma-warning: var(--dracula-yellow);
40
- --karma-severe: var(--dracula-orange);
41
- --karma-important: var(--dracula-purple);
42
- --karma-note: var(--dracula-cyan);
43
- --karma-info: var(--dracula-current-line);
44
- --karma-old: var(--dracula-comment);
45
-
46
- --karma-good-fg: var(--dracula-green);
47
- --karma-bad-fg: var(--dracula-red);
48
- --karma-warning-fg: var(--dracula-yellow);
49
- --karma-severe-fg: var(--dracula-orange);
50
- --karma-important-fg: var(--dracula-purple);
51
- --karma-note-fg: var(--dracula-cyan);
52
- --karma-info-fg: var(--dracula-comment);
53
- --karma-old-fg: var(--dracula-comment);
54
- }
55
-
56
- body {
57
- background-color: var(--dracula-background);
58
- color: var(--dracula-foreground);
59
- }
60
-
61
- header {
62
- background-color: var(--dracula-ansi-black);
63
- border-bottom: 1px solid var(--dracula-current-line);
64
- box-shadow: none;
65
- color: var(--dracula-foreground);
66
- }
67
-
68
- #sidebar-toggler-button,
69
- #sidebar-toggler-button.neutral,
70
- header .theme-toggle,
71
- header .theme-toggle.neutral,
72
- header .search-trigger,
73
- header .search-trigger.neutral {
74
- background-color: transparent;
75
- border: 0;
76
- color: var(--dracula-foreground);
77
- }
78
-
79
- #sidebar-toggler-button:hover,
80
- header .theme-toggle:hover,
81
- header .search-trigger:hover,
82
- header .user-info:hover {
83
- background-color: var(--header-hover-background-color);
84
- color: var(--header-hover-text-color);
85
- }
86
-
87
- aside,
88
- #sidebar {
89
- background-color: var(--dracula-ansi-black);
90
- color: var(--dracula-foreground);
91
- border-color: var(--dracula-current-line);
92
- box-shadow: 0.15em 0 0.6em rgba(33, 34, 44, 0.85);
93
- }
94
-
95
- aside a,
96
- aside a:visited {
97
- color: var(--dracula-foreground);
98
- }
99
-
100
- aside a:hover,
101
- aside :is(ul, menu) li a:hover,
102
- aside .nav-section-header:hover {
103
- background-color: var(--dracula-selection);
104
- color: var(--dracula-foreground);
105
- }
106
-
107
- section {
108
- background-color: var(--dracula-ansi-black);
109
- color: var(--dracula-foreground);
110
- box-shadow: 0 0 0.5em rgba(33, 34, 44, 0.9);
111
- border-color: var(--dracula-current-line);
112
- }
113
-
114
- section .section-header,
115
- section .section-subheader {
116
- background-color: var(--dracula-ansi-black);
117
- border-bottom-color: var(--dracula-current-line);
118
- color: var(--dracula-foreground);
119
- }
120
-
121
- button,
122
- .button {
123
- background-color: var(--dracula-current-line);
124
- border: 1px solid var(--dracula-comment);
125
- color: var(--dracula-foreground);
126
- }
127
-
128
- button:hover,
129
- .button:hover {
130
- background-color: var(--dracula-selection);
131
- color: var(--dracula-foreground);
132
- }
133
-
134
- button.good,
135
- .button.good {
136
- background-color: var(--dracula-green);
137
- border-color: var(--dracula-green);
138
- color: var(--dracula-ansi-black);
139
- }
140
-
141
- button.bad,
142
- .button.bad {
143
- background-color: var(--dracula-red);
144
- border-color: var(--dracula-red);
145
- color: var(--dracula-foreground);
146
- }
147
-
148
- button.warning,
149
- .button.warning {
150
- background-color: var(--dracula-yellow);
151
- border-color: var(--dracula-yellow);
152
- color: var(--dracula-ansi-black);
153
- }
154
-
155
- button.neutral,
156
- .button.neutral {
157
- background-color: var(--dracula-selection);
158
- border-color: var(--dracula-comment);
159
- color: var(--dracula-foreground);
160
- }
161
-
162
- input,
163
- select,
164
- textarea {
165
- background-color: var(--dracula-background);
166
- border: 1px solid var(--dracula-current-line);
167
- color: var(--dracula-foreground);
168
- }
169
-
170
- a {
171
- color: var(--dracula-pink);
172
- }
173
-
174
- footer {
175
- color: var(--dracula-comment);
176
- border-top-color: var(--dracula-current-line);
177
- }
178
-
179
- .subtle {
180
- color: var(--dracula-comment);
181
- }