keystone_ui 0.22.0 → 0.24.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.
- checksums.yaml +4 -4
- data/app/components/keystone/ui/action_menu_component.html.erb +11 -0
- data/app/components/keystone/ui/action_menu_component.rb +12 -0
- data/app/components/keystone/ui/action_menu_item_component.rb +21 -0
- data/app/components/keystone/ui/data_table_component.html.erb +3 -1
- data/app/components/keystone/ui/form_page_component.rb +2 -0
- data/app/components/keystone/ui/section_component.html.erb +7 -0
- data/app/components/keystone/ui/section_component.rb +2 -1
- data/app/components/keystone/ui/show_page_component.rb +2 -0
- data/app/helpers/keystone_ui_helper.rb +8 -0
- data/lib/keystone_ui/incomplete_trail.rb +9 -0
- data/lib/keystone_ui/missing_back_link.rb +9 -0
- data/lib/keystone_ui/safelist.rb +2 -0
- data/lib/keystone_ui/version.rb +1 -1
- data/lib/keystone_ui.rb +2 -0
- data/the_local/agents/keystone_ui-develop.md +39 -10
- data/the_local/agents/keystone_ui-info.md +17 -4
- data/the_local/agents/keystone_ui-install.md +19 -7
- data/the_local/interface.yml +8 -0
- metadata +6 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0ebdae8cec6c4c1ac5a5d9e0ba2c2f81af46ac2bcd2d1537dce3ac039287a895
|
|
4
|
+
data.tar.gz: 3729bc3f9486e0adca2a21482bf493c832506d36c0e5bb9e98a50bba7a70e49a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1091cd7bb197a64a0ceb327906932e191e11e19bbcdc2559283cfde82573a7ad36adc4a6b1c2e430fef41eeb421642e6d3779ca1879a172d009098e98a4cfbba
|
|
7
|
+
data.tar.gz: 2d532adcf2a254df72de1e82383f4f373a520c03503adbf31c9c45b881c2a0f8296348bb0f581b3360e8b7ff505fd22431a41f7fef6042fc15681cbf97242833
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<div class="<%= WRAPPER_CLASSES %>" data-controller="dropdown">
|
|
2
|
+
<button type="button"
|
|
3
|
+
data-action="click->dropdown#toggle click@window->dropdown#hide"
|
|
4
|
+
class="<%= BUTTON_CLASSES %>"
|
|
5
|
+
aria-label="Actions">
|
|
6
|
+
<%= ELLIPSIS_ICON.html_safe %>
|
|
7
|
+
</button>
|
|
8
|
+
<div data-dropdown-target="menu" class="<%= DROPDOWN_CLASSES %>">
|
|
9
|
+
<%= content %>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Keystone
|
|
4
|
+
module Ui
|
|
5
|
+
class ActionMenuComponent < ViewComponent::Base
|
|
6
|
+
WRAPPER_CLASSES = "relative inline-block"
|
|
7
|
+
BUTTON_CLASSES = MobileActionsComponent::BUTTON_CLASSES
|
|
8
|
+
DROPDOWN_CLASSES = MobileActionsComponent::DROPDOWN_CLASSES
|
|
9
|
+
ELLIPSIS_ICON = MobileActionsComponent::ELLIPSIS_ICON
|
|
10
|
+
end
|
|
11
|
+
end
|
|
12
|
+
end
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module Keystone
|
|
4
|
+
module Ui
|
|
5
|
+
class ActionMenuItemComponent < ViewComponent::Base
|
|
6
|
+
ITEM_CLASSES = "ks-menu-option block w-full text-left"
|
|
7
|
+
|
|
8
|
+
def initialize(label:, href:, method: :get)
|
|
9
|
+
@label = label
|
|
10
|
+
@href = href
|
|
11
|
+
@method = method.to_sym
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
def call
|
|
15
|
+
return link_to(@label, @href, class: ITEM_CLASSES) if @method == :get
|
|
16
|
+
|
|
17
|
+
button_to(@href, method: @method, class: ITEM_CLASSES) { @label }
|
|
18
|
+
end
|
|
19
|
+
end
|
|
20
|
+
end
|
|
21
|
+
end
|
|
@@ -43,7 +43,9 @@
|
|
|
43
43
|
<% end %>
|
|
44
44
|
<% if actions? %>
|
|
45
45
|
<td class="<%= Keystone::Ui::DataTableComponent::ROW_CLASSES_LAST %>">
|
|
46
|
-
<%=
|
|
46
|
+
<%= render Keystone::Ui::ActionMenuComponent.new do %>
|
|
47
|
+
<%= capture(item, &@actions_block) %>
|
|
48
|
+
<% end %>
|
|
47
49
|
</td>
|
|
48
50
|
<% end %>
|
|
49
51
|
</tr>
|
|
@@ -17,6 +17,8 @@ module Keystone
|
|
|
17
17
|
def before_render
|
|
18
18
|
@trail ||= KeystoneUi.configuration.supplied_trail(helpers)
|
|
19
19
|
@back_url ||= @trail&.last&.last
|
|
20
|
+
raise KeystoneUi::MissingBackLink, @title unless @back_url
|
|
21
|
+
raise KeystoneUi::IncompleteTrail, @title if @trail&.any? { |label, href| label.blank? || href.blank? }
|
|
20
22
|
end
|
|
21
23
|
|
|
22
24
|
def subtitle?
|
|
@@ -12,6 +12,13 @@
|
|
|
12
12
|
<%= @action[:label] %>
|
|
13
13
|
</a>
|
|
14
14
|
<% end %>
|
|
15
|
+
<% if @menu.any? %>
|
|
16
|
+
<%= render Keystone::Ui::ActionMenuComponent.new do %>
|
|
17
|
+
<% @menu.each do |item| %>
|
|
18
|
+
<%= render Keystone::Ui::ActionMenuItemComponent.new(**item) %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% end %>
|
|
15
22
|
</div>
|
|
16
23
|
<% end %>
|
|
17
24
|
<%= content %>
|
|
@@ -9,10 +9,11 @@ module Keystone
|
|
|
9
9
|
SUBTITLE_CLASSES = "ks-section-subtitle"
|
|
10
10
|
ACTION_CLASSES = "ks-section-action"
|
|
11
11
|
|
|
12
|
-
def initialize(title: nil, subtitle: nil, action: nil, spacing: :md, class: nil)
|
|
12
|
+
def initialize(title: nil, subtitle: nil, action: nil, menu: [], spacing: :md, class: nil)
|
|
13
13
|
@title = title
|
|
14
14
|
@subtitle = subtitle
|
|
15
15
|
@action = action
|
|
16
|
+
@menu = menu
|
|
16
17
|
@spacing = spacing
|
|
17
18
|
@extra_classes = binding.local_variable_get(:class)
|
|
18
19
|
end
|
|
@@ -17,6 +17,8 @@ module Keystone
|
|
|
17
17
|
def before_render
|
|
18
18
|
@trail ||= KeystoneUi.configuration.supplied_trail(helpers)
|
|
19
19
|
@back_url ||= @trail&.last&.last
|
|
20
|
+
raise KeystoneUi::MissingBackLink, @title unless @back_url
|
|
21
|
+
raise KeystoneUi::IncompleteTrail, @title if @trail&.any? { |label, href| label.blank? || href.blank? }
|
|
20
22
|
end
|
|
21
23
|
|
|
22
24
|
def subtitle?
|
|
@@ -125,6 +125,14 @@ module KeystoneUiHelper
|
|
|
125
125
|
render Keystone::Ui::MobileHeaderComponent.new(**args)
|
|
126
126
|
end
|
|
127
127
|
|
|
128
|
+
def ui_action_menu(**args, &block)
|
|
129
|
+
render Keystone::Ui::ActionMenuComponent.new(**args), &block
|
|
130
|
+
end
|
|
131
|
+
|
|
132
|
+
def ui_action_menu_item(**args)
|
|
133
|
+
render Keystone::Ui::ActionMenuItemComponent.new(**args)
|
|
134
|
+
end
|
|
135
|
+
|
|
128
136
|
def ui_mobile_actions(**args, &block)
|
|
129
137
|
render Keystone::Ui::MobileActionsComponent.new(**args), &block
|
|
130
138
|
end
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module KeystoneUi
|
|
4
|
+
class IncompleteTrail < StandardError
|
|
5
|
+
def initialize(title)
|
|
6
|
+
super(%(The page "#{title}" has a breadcrumb trail with a link that has no label or no address. Give every link in the trail both.))
|
|
7
|
+
end
|
|
8
|
+
end
|
|
9
|
+
end
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module KeystoneUi
|
|
4
|
+
class MissingBackLink < StandardError
|
|
5
|
+
def initialize(title)
|
|
6
|
+
super(%(The page "#{title}" has no Back link. Pass back_url: or trail:, or supply a trail for it through config.trail_supplier.))
|
|
7
|
+
end
|
|
8
|
+
end
|
|
9
|
+
end
|
data/lib/keystone_ui/safelist.rb
CHANGED
|
@@ -6,6 +6,8 @@ module Keystone
|
|
|
6
6
|
# The safelist_spec verifies this list matches Keystone::Ui components.
|
|
7
7
|
COMPONENTS = [
|
|
8
8
|
Keystone::Ui::AccordionComponent,
|
|
9
|
+
Keystone::Ui::ActionMenuComponent,
|
|
10
|
+
Keystone::Ui::ActionMenuItemComponent,
|
|
9
11
|
Keystone::Ui::TabSwitcherComponent,
|
|
10
12
|
Keystone::Ui::StatCardComponent,
|
|
11
13
|
Keystone::Ui::ChartCardComponent,
|
data/lib/keystone_ui/version.rb
CHANGED
data/lib/keystone_ui.rb
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
require "view_component"
|
|
4
4
|
require "keystone_ui/styles"
|
|
5
5
|
require "keystone_ui/configuration"
|
|
6
|
+
require "keystone_ui/missing_back_link"
|
|
7
|
+
require "keystone_ui/incomplete_trail"
|
|
6
8
|
require "keystone_ui/theme_choice"
|
|
7
9
|
require "keystone_ui/look_choice"
|
|
8
10
|
require "keystone_ui/engine"
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: keystone_ui-develop
|
|
3
|
-
description: Use PROACTIVELY for building or editing screens in a Rails app that has Keystone UI — pages, forms, tables, navigation, dashboards, charts, marketing sections, a light/dark theme switch — MUST BE USED instead of hand-writing ERB and Tailwind for UI.
|
|
3
|
+
description: Use PROACTIVELY for building or editing screens in a Rails app that has Keystone UI — pages, forms, tables, navigation, action menus for a record's Edit and Delete, dashboards, charts, marketing sections, a light/dark theme switch — MUST BE USED instead of hand-writing ERB and Tailwind for UI.
|
|
4
4
|
tools: Read, Write, Edit, Grep
|
|
5
5
|
scope: UI — pages, forms, tables, navigation, dashboards
|
|
6
6
|
---
|
|
@@ -45,9 +45,13 @@ outer element. See Conventions before using it.
|
|
|
45
45
|
`:lg` `:xl` to clear a fixed navbar. When `ui_form_page` or `ui_show_page` was
|
|
46
46
|
called earlier on the same screen, `ui_page` renders their back link or
|
|
47
47
|
breadcrumbs, and the form page's title, at its top, above the block.
|
|
48
|
-
- `ui_section(title: nil, subtitle: nil, action: nil, spacing: :md, class: nil)`
|
|
48
|
+
- `ui_section(title: nil, subtitle: nil, action: nil, menu: [], spacing: :md, class: nil)`
|
|
49
49
|
— takes a block. A titled block of content with an optional right-aligned
|
|
50
50
|
link. `action:` is `{ label:, href: }`; `spacing:` `:sm` `:md` `:lg`.
|
|
51
|
+
`menu:` is `[{ label:, href:, method: }, ...]`, each hash taking the keywords
|
|
52
|
+
of `ui_action_menu_item`, and renders an action menu at the right of the
|
|
53
|
+
header. The header, and with it `action:` and `menu:`, renders only when
|
|
54
|
+
`title:` is given.
|
|
51
55
|
- `ui_panel(padding: :md, radius: :lg, shadow: true)` — takes a block. A bordered
|
|
52
56
|
card surface. `padding:` `:sm` `:md` `:lg`; `radius:` `:md` `:lg` `:xl`.
|
|
53
57
|
- `ui_grid(cols: { default: 1 }, gap: :md, gap_x: nil, gap_y: nil)` — takes a
|
|
@@ -75,8 +79,11 @@ outer element. See Conventions before using it.
|
|
|
75
79
|
supplies for the current request, if the app supplies one. With no
|
|
76
80
|
`back_url:`, the back URL is the `href` of the trail's last link. A `trail:`
|
|
77
81
|
or `back_url:` passed here always wins over the supplied ones. With no
|
|
78
|
-
`back_url:` and no trail from either place,
|
|
79
|
-
|
|
82
|
+
`back_url:` and no trail from either place, or a trail that is empty or whose
|
|
83
|
+
last link has no `href`, rendering raises `KeystoneUi::MissingBackLink`, naming
|
|
84
|
+
the page's title. A trail with any link whose label or `href` is `nil` or
|
|
85
|
+
blank raises `KeystoneUi::IncompleteTrail`, naming the page's title, even when
|
|
86
|
+
`back_url:` is passed.
|
|
80
87
|
- `ui_show_page(title:, back_url: nil, subtitle: nil, trail: nil)` — the shell
|
|
81
88
|
marker for a detail screen. It renders nothing where it is called. It
|
|
82
89
|
publishes the title, subtitle, and back URL for the navbar, and hands
|
|
@@ -84,8 +91,9 @@ outer element. See Conventions before using it.
|
|
|
84
91
|
`ui_page`, outside `ui_page`'s block. It shows no title, so put
|
|
85
92
|
`ui_page_header` inside the `ui_page` block for the desktop title. `trail:`
|
|
86
93
|
and `back_url:` work as they do on `ui_form_page`, including the supplied
|
|
87
|
-
trail
|
|
88
|
-
`
|
|
94
|
+
trail, the fallback to the trail's last link, and the
|
|
95
|
+
`KeystoneUi::MissingBackLink` and `KeystoneUi::IncompleteTrail` errors, and
|
|
96
|
+
the breadcrumbs end with `title` unlinked.
|
|
89
97
|
- `ui_breadcrumbs(trail:, current: nil)` — a line of links shown only from `lg:`
|
|
90
98
|
up. `trail:` is `[[label, href], ...]`, from the top level down, and each pair
|
|
91
99
|
renders as a link, separated by `›`. `current:` is the page being shown,
|
|
@@ -109,8 +117,18 @@ outer element. See Conventions before using it.
|
|
|
109
117
|
- `ui_mobile_header(title:, back_url:, subtitle: nil)` — a back chevron plus
|
|
110
118
|
centered title for mobile; hidden above `lg:`. Place it in the navbar's
|
|
111
119
|
`mobile_left` slot.
|
|
120
|
+
- `ui_action_menu` — no keywords, takes a block. An ellipsis (⋯) button that
|
|
121
|
+
opens a dropdown of actions, shown at every screen size. Fill the block with
|
|
122
|
+
`ui_action_menu_item` calls.
|
|
123
|
+
- `ui_action_menu_item(label:, href:, method: :get)` — one entry in an action
|
|
124
|
+
menu. With `method: :get` it is a link to `href`. Any other method, such as
|
|
125
|
+
`:post`, `:patch` or `:delete`, renders a button inside its own small form
|
|
126
|
+
that sends that method to `href`, so never place such an item inside a
|
|
127
|
+
`ui_form` block, since a form cannot contain another form. It asks for no
|
|
128
|
+
confirmation before sending.
|
|
112
129
|
- `ui_mobile_actions` — no keywords, takes a block. An ellipsis dropdown for
|
|
113
|
-
mobile actions; the block holds the menu items. Hidden above `lg:`.
|
|
130
|
+
mobile actions; the block holds the menu items. Hidden above `lg:`. Use
|
|
131
|
+
`ui_action_menu` instead when the actions must also be reachable on desktop.
|
|
114
132
|
- `ui_settings_link(label:, href:)` — a full-width settings row with a chevron.
|
|
115
133
|
- `ui_theme_toggle` — no keywords, no block. A row of three buttons, Light, Dark
|
|
116
134
|
and System, that switches the page's theme at once and remembers the choice in
|
|
@@ -176,7 +194,9 @@ outer element. See Conventions before using it.
|
|
|
176
194
|
`columns:` accepts plain `{ key: "Label" }` hashes or `Keystone::Ui::Column`
|
|
177
195
|
objects. In the block, `table.link(:column_key) { |item| url }` turns that
|
|
178
196
|
column's cells into links and `table.actions { |item| ... }` appends a
|
|
179
|
-
right-aligned actions column.
|
|
197
|
+
right-aligned actions column. Each row's actions render inside an action
|
|
198
|
+
menu, so the `actions` block holds `ui_action_menu_item` calls and nothing
|
|
199
|
+
else, never buttons or bare links. Sorting requires all three of `sort:` (the
|
|
180
200
|
current column key), `sort_direction:` (`:asc`/`:desc`), and `sort_url:` (a
|
|
181
201
|
lambda taking `(column_key, direction)` and returning a URL); headers then
|
|
182
202
|
render as links that flip direction. `hidden_columns:` drops columns
|
|
@@ -338,7 +358,9 @@ outer element. See Conventions before using it.
|
|
|
338
358
|
does, a screen whose supplied trail is right passes neither `trail:` nor
|
|
339
359
|
`back_url:`, and passes its own only where the supplied one is wrong. If the
|
|
340
360
|
app supplies no trail, every form and detail screen passes `back_url:` or
|
|
341
|
-
`trail
|
|
361
|
+
`trail:`, since a screen with neither raises `KeystoneUi::MissingBackLink`
|
|
362
|
+
when it renders. Every link in a trail needs both a label and an `href`, or
|
|
363
|
+
the screen raises `KeystoneUi::IncompleteTrail`. Setting up a supplied trail is `keystone_ui-install`'s job. Below `lg:` the
|
|
342
364
|
back link comes from `ui_mobile_header`, which the navbar renders from the
|
|
343
365
|
title and back URL these shells publish. Check the app's layout: if it does not
|
|
344
366
|
already render `ui_mobile_header` from that published context, ask the
|
|
@@ -356,6 +378,12 @@ outer element. See Conventions before using it.
|
|
|
356
378
|
To show the arithmetic behind a figure, put `ui_calculation` under it rather
|
|
357
379
|
than a hand-built list. Which lines and groups to show is the app's own
|
|
358
380
|
calculation, so ask the developer which steps a reader needs to see.
|
|
381
|
+
Put the actions on a record, such as Edit and Delete, in an action menu
|
|
382
|
+
rather than in a row of buttons: `menu:` on the `ui_section` that shows the
|
|
383
|
+
record, `table.actions` for a table row, or `ui_action_menu` anywhere else.
|
|
384
|
+
An item that deletes or changes data sends without asking for
|
|
385
|
+
confirmation, so ask the developer whether that action needs a confirmation
|
|
386
|
+
step before adding it.
|
|
359
387
|
|
|
360
388
|
6. For a table, decide how columns are declared. Use `{ key: "Label" }` hashes
|
|
361
389
|
when every column is plain. Switch the whole set to `Keystone::Ui::Column`
|
|
@@ -415,7 +443,8 @@ outer element. See Conventions before using it.
|
|
|
415
443
|
through it, so anything else emitted inside their block is discarded.
|
|
416
444
|
- **Mobile is not an afterthought.** Several helpers render only on one side of
|
|
417
445
|
the `lg:` (or `sm:`) breakpoint — page headers, mobile headers, mobile actions,
|
|
418
|
-
bottom navigation, breadcrumbs.
|
|
446
|
+
bottom navigation, breadcrumbs. The action menu is the exception and shows at
|
|
447
|
+
every size. A screen needs both treatments; check the small viewport
|
|
419
448
|
before calling it done.
|
|
420
449
|
- Out of scope for this local: installing or upgrading the gem, changing the
|
|
421
450
|
palette or theme defaults, and editing the components themselves. Building a
|
|
@@ -31,9 +31,15 @@ earlier pages instead, the shell shows breadcrumbs in place of that link, ending
|
|
|
31
31
|
with the page's own title. A page that passes no trail gets the one the app or
|
|
32
32
|
another gem supplies for the request, if any, and a page that passes no back
|
|
33
33
|
link goes back to that trail's last link. A trail or back link the page passes
|
|
34
|
-
itself always wins. Supplying a trail is set up through the install local.
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
itself always wins. Supplying a trail is set up through the install local.
|
|
35
|
+
|
|
36
|
+
Every form and show page must end up with a Back link. A page with no back
|
|
37
|
+
link, no trail and no supplied trail raises `KeystoneUi::MissingBackLink` when it
|
|
38
|
+
renders, and the message names the page's title. A trail with a link missing
|
|
39
|
+
its label or its address raises `KeystoneUi::IncompleteTrail`, also naming the
|
|
40
|
+
page. That link or those breadcrumbs, and the form page's title, appear at the
|
|
41
|
+
top of the page container, inside its width and padding, so a page using either
|
|
42
|
+
shell also uses the page container.
|
|
37
43
|
|
|
38
44
|
## Interface
|
|
39
45
|
|
|
@@ -68,6 +74,13 @@ holds the catalog.
|
|
|
68
74
|
that render one thing (a button, a badge, a field, a stat, a bucket) are
|
|
69
75
|
configured entirely by keyword arguments. The navigation bar exposes named
|
|
70
76
|
slots instead of a single block.
|
|
77
|
+
- **Action menus.** An action menu is an ellipsis button that opens a dropdown
|
|
78
|
+
of actions, shown at every screen size. The mobile action menu is the one
|
|
79
|
+
hidden from `lg:` up. Each action is a label, an address and an HTTP method.
|
|
80
|
+
A plain visit renders as a link. Any other method renders as a button that
|
|
81
|
+
sends that method, so an action that changes data is never a bare link. A
|
|
82
|
+
data table puts each row's actions in one action menu at the end of the row,
|
|
83
|
+
and a section can carry an action menu in its header beside its title.
|
|
71
84
|
- **Options are symbols, and each component accepts its own set.** Appearance is
|
|
72
85
|
chosen by name — `variant:`, `size:`, `type:`, `padding:`, `spacing:`,
|
|
73
86
|
`max_width:`, `radius:` — on a size scale (`:sm` … `:xl`) or a short list of
|
|
@@ -94,7 +107,7 @@ holds the catalog.
|
|
|
94
107
|
keystone_ui-styles 0.6.0 or later: corner radius, font, label weight, border
|
|
95
108
|
width, padding and colours. Each colour variable has a `-dark` partner read
|
|
96
109
|
on a dark page. Buttons, panels, cards, alerts, badges, form fields, the
|
|
97
|
-
modal, the mobile action menu, the column picker, multi select, copy button,
|
|
110
|
+
modal, the action menu, the mobile action menu, the column picker, multi select, copy button,
|
|
98
111
|
theme toggle, checkbox row, radio card, option card, file upload and colour
|
|
99
112
|
picker read these variables. So do the data display components: stat card,
|
|
100
113
|
chart card, card link, CTA banner, feature grid, hero, data table, code,
|
|
@@ -25,7 +25,7 @@ built on ViewComponent; hook it in before building any screen with those helpers
|
|
|
25
25
|
`register_look` (a look's CSS file by name), `default_look` and
|
|
26
26
|
`look_supplier` (which registered look a page gets),
|
|
27
27
|
`trail_supplier` (a callable that supplies the breadcrumb trail for form and
|
|
28
|
-
show pages that pass none),
|
|
28
|
+
show pages that pass none, and their Back link when they pass none either),
|
|
29
29
|
and the `tailwind_imports` and `tailwind_sources` lists (extra CSS files and
|
|
30
30
|
scan paths added to the Tailwind build).
|
|
31
31
|
- `keystone_theme_attributes` — a layout helper placed inside the `<html>` tag.
|
|
@@ -83,9 +83,9 @@ built on ViewComponent; hook it in before building any screen with those helpers
|
|
|
83
83
|
the Stimulus application is set up and add those two lines there. Without
|
|
84
84
|
them, dropdowns, modals, file uploads, the column picker, the theme toggle
|
|
85
85
|
and the other interactive components do nothing.
|
|
86
|
-
`registerControllers(application)` also copies `data-theme`
|
|
87
|
-
Turbo renders onto the `<html>` tag. Without it, a Turbo
|
|
88
|
-
theme of the first page loaded.
|
|
86
|
+
`registerControllers(application)` also copies `data-theme` and `data-look`
|
|
87
|
+
from each page Turbo renders onto the `<html>` tag. Without it, a Turbo
|
|
88
|
+
visit keeps the theme and look of the first page loaded.
|
|
89
89
|
- `app/views/layouts/application.html.erb not found` — ask the developer which
|
|
90
90
|
layout the app renders and add `<%= keystone_theme_attributes %>` to its
|
|
91
91
|
`<html>` tag. Without it, a saved light or dark choice is not applied when
|
|
@@ -149,7 +149,7 @@ built on ViewComponent; hook it in before building any screen with those helpers
|
|
|
149
149
|
```
|
|
150
150
|
|
|
151
151
|
Buttons, panels, cards, alerts, badges, form fields, the modal, the mobile
|
|
152
|
-
action menu, the column picker, multi select, copy button, theme toggle,
|
|
152
|
+
action menu, the action menu, the column picker, multi select, copy button, theme toggle,
|
|
153
153
|
checkbox row, radio card, option card, file upload and colour picker read
|
|
154
154
|
these variables. So do the data display components: stat card, chart card,
|
|
155
155
|
card link, CTA banner, feature grid, hero, data table, code, accordion,
|
|
@@ -214,8 +214,20 @@ built on ViewComponent; hook it in before building any screen with those helpers
|
|
|
214
214
|
screens, ending with the page's title, in place of the desktop "Back" link.
|
|
215
215
|
A page that passes no Back link goes back to the trail's last link. A page
|
|
216
216
|
that passes its own trail or Back link keeps it. With no supplier, or a
|
|
217
|
-
`nil` return, the page shows its Back link.
|
|
218
|
-
|
|
217
|
+
`nil` return, the page shows its Back link. Return `nil`, not an empty
|
|
218
|
+
array, for a page with no trail, because an empty array replaces the
|
|
219
|
+
page's Back link with breadcrumbs holding only its title.
|
|
220
|
+
- Every form and show page must end up with a Back link. A page that passes
|
|
221
|
+
no Back link and no trail, and gets no trail from the supplier, raises
|
|
222
|
+
`KeystoneUi::MissingBackLink` naming the page's title when it renders.
|
|
223
|
+
So does a page whose trail's last link has no address.
|
|
224
|
+
- Every link the supplier returns needs both a label and an address. A trail
|
|
225
|
+
with a blank label or address raises `KeystoneUi::IncompleteTrail` naming
|
|
226
|
+
the page's title.
|
|
227
|
+
- Ask the developer which code in the app knows each page's trail before
|
|
228
|
+
writing the callable. If some form or show pages pass no `back_url:`, ask
|
|
229
|
+
where their Back link should come from before enabling the supplier or
|
|
230
|
+
leaving it out.
|
|
219
231
|
- `tailwind_imports` and `tailwind_sources` — lists to append to, never
|
|
220
232
|
assign. Each import becomes an `@import` line and each source becomes an
|
|
221
233
|
`@source` line in `keystone_source.css` on the next boot. They are for
|
data/the_local/interface.yml
CHANGED
|
@@ -36,6 +36,8 @@ develop:
|
|
|
36
36
|
- ui_breadcrumbs
|
|
37
37
|
- ui_mobile_header
|
|
38
38
|
- ui_mobile_actions
|
|
39
|
+
- ui_action_menu
|
|
40
|
+
- ui_action_menu_item
|
|
39
41
|
- ui_navbar
|
|
40
42
|
- ui_nav_item
|
|
41
43
|
- ui_nav_dropdown
|
|
@@ -65,6 +67,8 @@ develop:
|
|
|
65
67
|
sources:
|
|
66
68
|
- lib/generators/keystone/install_generator.rb
|
|
67
69
|
- lib/keystone_ui/configuration.rb
|
|
70
|
+
- lib/keystone_ui/missing_back_link.rb
|
|
71
|
+
- lib/keystone_ui/incomplete_trail.rb
|
|
68
72
|
- lib/keystone_ui/theme_choice.rb
|
|
69
73
|
- lib/keystone_ui/look_choice.rb
|
|
70
74
|
- app/helpers/keystone_ui_helper.rb
|
|
@@ -86,6 +90,7 @@ sources:
|
|
|
86
90
|
- app/components/keystone/ui/copy_button_component.rb
|
|
87
91
|
- app/components/keystone/ui/cta_banner_component.rb
|
|
88
92
|
- app/components/keystone/ui/data_table_component.rb
|
|
93
|
+
- app/components/keystone/ui/data_table_component.html.erb
|
|
89
94
|
- app/components/keystone/ui/disclosure_component.rb
|
|
90
95
|
- app/components/keystone/ui/calculation_component.rb
|
|
91
96
|
- app/components/keystone/ui/feature_grid_component.rb
|
|
@@ -106,6 +111,8 @@ sources:
|
|
|
106
111
|
- app/components/keystone/ui/input_component.rb
|
|
107
112
|
- app/components/keystone/ui/line_chart_component.rb
|
|
108
113
|
- app/components/keystone/ui/mobile_actions_component.rb
|
|
114
|
+
- app/components/keystone/ui/action_menu_component.rb
|
|
115
|
+
- app/components/keystone/ui/action_menu_item_component.rb
|
|
109
116
|
- app/components/keystone/ui/mobile_header_component.rb
|
|
110
117
|
- app/components/keystone/ui/modal_component.rb
|
|
111
118
|
- app/components/keystone/ui/multi_select_component.rb
|
|
@@ -122,6 +129,7 @@ sources:
|
|
|
122
129
|
- app/components/keystone/ui/progress_component.rb
|
|
123
130
|
- app/components/keystone/ui/radio_card_component.rb
|
|
124
131
|
- app/components/keystone/ui/section_component.rb
|
|
132
|
+
- app/components/keystone/ui/section_component.html.erb
|
|
125
133
|
- app/components/keystone/ui/select_component.rb
|
|
126
134
|
- app/components/keystone/ui/settings_link_component.rb
|
|
127
135
|
- app/components/keystone/ui/show_page_component.rb
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: keystone_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.24.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Tyler Schneider
|
|
@@ -73,6 +73,9 @@ files:
|
|
|
73
73
|
- app/assets/tailwind/keystone_ui_engine/grid_safelist.css
|
|
74
74
|
- app/components/keystone/ui/accordion_component.html.erb
|
|
75
75
|
- app/components/keystone/ui/accordion_component.rb
|
|
76
|
+
- app/components/keystone/ui/action_menu_component.html.erb
|
|
77
|
+
- app/components/keystone/ui/action_menu_component.rb
|
|
78
|
+
- app/components/keystone/ui/action_menu_item_component.rb
|
|
76
79
|
- app/components/keystone/ui/alert_component.html.erb
|
|
77
80
|
- app/components/keystone/ui/alert_component.rb
|
|
78
81
|
- app/components/keystone/ui/badge_component.html.erb
|
|
@@ -189,9 +192,11 @@ files:
|
|
|
189
192
|
- lib/keystone_ui.rb
|
|
190
193
|
- lib/keystone_ui/configuration.rb
|
|
191
194
|
- lib/keystone_ui/engine.rb
|
|
195
|
+
- lib/keystone_ui/incomplete_trail.rb
|
|
192
196
|
- lib/keystone_ui/leftover_stylesheet.rb
|
|
193
197
|
- lib/keystone_ui/look_check.rb
|
|
194
198
|
- lib/keystone_ui/look_choice.rb
|
|
199
|
+
- lib/keystone_ui/missing_back_link.rb
|
|
195
200
|
- lib/keystone_ui/safelist.rb
|
|
196
201
|
- lib/keystone_ui/source_css.rb
|
|
197
202
|
- lib/keystone_ui/theme_choice.rb
|