lookbook 1.0.0.beta.4 → 1.0.0.beta.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +27 -254
- data/app/assets/lookbook/css/lookbook.css +1 -1
- data/app/assets/lookbook/css/themes/blue.css +57 -36
- data/app/assets/lookbook/css/themes/indigo.css +57 -36
- data/app/assets/lookbook/css/themes/zinc.css +57 -36
- data/app/assets/lookbook/css/tooltip.css +5 -5
- data/app/components/lookbook/base_component.rb +6 -4
- data/app/components/lookbook/button/component.html.erb +2 -2
- data/app/components/lookbook/copy_button/component.html.erb +3 -3
- data/app/components/lookbook/embed/component.html.erb +33 -33
- data/app/components/lookbook/embed/component.rb +8 -0
- data/app/components/lookbook/filter/component.html.erb +1 -1
- data/app/components/lookbook/header/component.html.erb +3 -3
- data/app/components/lookbook/inspector_panel/component.html.erb +4 -0
- data/app/components/lookbook/inspector_panel/component.rb +36 -0
- data/app/components/lookbook/nav/component.html.erb +4 -8
- data/app/components/lookbook/nav/component.rb +5 -7
- data/app/components/lookbook/nav/item/component.html.erb +12 -6
- data/app/components/lookbook/nav/item/component.rb +9 -2
- data/app/components/lookbook/page_tabs/component.html.erb +1 -1
- data/app/components/lookbook/params_editor/field/component.rb +2 -1
- data/app/components/lookbook/prose/component.html.erb +1 -1
- data/app/components/lookbook/split_layout/component.html.erb +1 -1
- data/app/components/lookbook/tab_panels/panel/component.html.erb +2 -2
- data/app/components/lookbook/tabs/component.html.erb +2 -2
- data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +2 -2
- data/app/components/lookbook/tabs/tab/component.html.erb +2 -2
- data/app/components/lookbook/tag_component.rb +5 -10
- data/app/components/lookbook/toolbar/component.html.erb +1 -1
- data/app/components/lookbook/viewport/component.css +1 -1
- data/app/components/lookbook/viewport/component.html.erb +1 -1
- data/app/controllers/lookbook/application_controller.rb +2 -2
- data/app/controllers/lookbook/pages_controller.rb +1 -0
- data/app/controllers/lookbook/previews_controller.rb +15 -3
- data/app/helpers/lookbook/application_helper.rb +9 -6
- data/app/helpers/lookbook/preview_helper.rb +2 -3
- data/app/views/layouts/lookbook/application.html.erb +76 -60
- data/app/views/layouts/lookbook/page.html.erb +36 -36
- data/app/views/layouts/lookbook/shell.html.erb +6 -0
- data/app/views/layouts/lookbook/skeleton.html.erb +15 -14
- data/app/views/lookbook/index.html.erb +24 -11
- data/app/views/lookbook/pages/show.html.erb +1 -1
- data/app/views/lookbook/previews/panels/_content.html.erb +1 -1
- data/app/views/lookbook/previews/panels/_notes.html.erb +2 -2
- data/app/views/lookbook/previews/panels/_params.html.erb +1 -1
- data/app/views/lookbook/previews/show.html.erb +12 -10
- data/lib/lookbook/config.rb +63 -36
- data/lib/lookbook/data.rb +11 -0
- data/lib/lookbook/engine.rb +68 -60
- data/lib/lookbook/hooks.rb +21 -0
- data/lib/lookbook/markdown.rb +3 -1
- data/lib/lookbook/page.rb +4 -0
- data/lib/lookbook/panels.rb +15 -0
- data/lib/lookbook/params.rb +12 -0
- data/lib/lookbook/parser.rb +4 -1
- data/lib/lookbook/preview.rb +36 -6
- data/lib/lookbook/preview_example.rb +1 -1
- data/lib/lookbook/preview_group.rb +8 -0
- data/lib/lookbook/source_inspector.rb +9 -0
- data/lib/lookbook/store.rb +8 -0
- data/lib/lookbook/tag.rb +108 -0
- data/lib/lookbook/tags.rb +22 -0
- data/lib/lookbook/theme.rb +36 -7
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +1 -0
- data/lib/tasks/lookbook_tasks.rake +1 -1
- data/public/lookbook-assets/css/lookbook.css +314 -162
- data/public/lookbook-assets/css/lookbook.css.map +1 -1
- data/public/lookbook-assets/css/themes/blue.css +57 -36
- data/public/lookbook-assets/css/themes/blue.css.map +1 -1
- data/public/lookbook-assets/css/themes/indigo.css +57 -36
- data/public/lookbook-assets/css/themes/indigo.css.map +1 -1
- data/public/lookbook-assets/css/themes/zinc.css +57 -36
- data/public/lookbook-assets/css/themes/zinc.css.map +1 -1
- data/public/lookbook-assets/js/embed.js +193 -193
- data/public/lookbook-assets/js/lookbook.js +1162 -1319
- data/public/lookbook-assets/js/lookbook.js.map +1 -1
- metadata +11 -4
@@ -4,23 +4,23 @@
|
|
4
4
|
.tippy-box[data-theme~="tooltip"] {
|
5
5
|
@apply text-xs opacity-90;
|
6
6
|
|
7
|
-
background-color: var(--lookbook-tooltip);
|
7
|
+
background-color: var(--lookbook-tooltip-bg);
|
8
8
|
color: var(--lookbook-tooltip-text);
|
9
9
|
|
10
10
|
&[data-placement^="top"] > .tippy-arrow::before {
|
11
|
-
border-top-color: var(--lookbook-tooltip);
|
11
|
+
border-top-color: var(--lookbook-tooltip-bg);
|
12
12
|
}
|
13
13
|
|
14
14
|
&[data-placement^="bottom"] > .tippy-arrow::before {
|
15
|
-
border-bottom-color: var(--lookbook-tooltip);
|
15
|
+
border-bottom-color: var(--lookbook-tooltip-bg);
|
16
16
|
}
|
17
17
|
|
18
18
|
&[data-placement^="left"] > .tippy-arrow::before {
|
19
|
-
border-left-color: var(--lookbook-tooltip);
|
19
|
+
border-left-color: var(--lookbook-tooltip-bg);
|
20
20
|
}
|
21
21
|
|
22
22
|
&[data-placement^="right"] > .tippy-arrow::before {
|
23
|
-
border-right-color: var(--lookbook-tooltip);
|
23
|
+
border-right-color: var(--lookbook-tooltip-bg);
|
24
24
|
}
|
25
25
|
}
|
26
26
|
|
@@ -10,11 +10,13 @@ module Lookbook
|
|
10
10
|
|
11
11
|
def render_component_tag(tag = :div, **attrs, &block)
|
12
12
|
merged_classes = class_names(attrs[:class], @html_attrs[:class])
|
13
|
-
|
13
|
+
merged_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
|
14
|
+
|
15
|
+
|
14
16
|
render Lookbook::TagComponent.new(tag: tag,
|
15
17
|
name: component_name,
|
16
|
-
**
|
17
|
-
|
18
|
+
**merged_attrs,
|
19
|
+
"x-data": prepare_alpine_data(merged_attrs[:"x-data"]),
|
18
20
|
class: merged_classes), &block
|
19
21
|
end
|
20
22
|
|
@@ -31,7 +33,7 @@ module Lookbook
|
|
31
33
|
end
|
32
34
|
|
33
35
|
def prepare_alpine_data(x_data = nil)
|
34
|
-
alpine_component_name = x_data || @html_attrs&.dig(:
|
36
|
+
alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
|
35
37
|
if alpine_component_name.present?
|
36
38
|
args = Array.wrap(alpine_data)
|
37
39
|
args.any? ? "#{alpine_component_name}(#{safe_join(args).gsub(""", "'").tr("\"", "'")})" : alpine_component_name
|
@@ -1,9 +1,9 @@
|
|
1
1
|
<%= render_component_tag tag_name,
|
2
2
|
href: @href,
|
3
3
|
class: [
|
4
|
-
"block text-lookbook-button-
|
4
|
+
"block text-lookbook-icon-button-stroke focus:outline-none focus-visible:outline-none #{padding}",
|
5
5
|
{
|
6
|
-
"hover:text-lookbook-button-
|
6
|
+
"hover:text-lookbook-icon-button-stroke-hover": !@disabled,
|
7
7
|
"cursor-[not-allowed] opacity-50": @disabled
|
8
8
|
}
|
9
9
|
],
|
@@ -1,10 +1,10 @@
|
|
1
1
|
<%= render_component :button,
|
2
2
|
name: "copy-button",
|
3
3
|
**@button_attrs,
|
4
|
-
|
4
|
+
"x-data": prepare_alpine_data,
|
5
5
|
"@click.prevent": "copyToClipboard" do |button| %>
|
6
|
-
<% button.icon name: @icon, size: icon_size,
|
7
|
-
<%= icon :check, size: icon_size, class: "text-green-500",
|
6
|
+
<% button.icon name: @icon, size: icon_size, "x-show": "!copied", cloak: true %>
|
7
|
+
<%= icon :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true %>
|
8
8
|
<% if content %>
|
9
9
|
<div x-ref="copyTarget" class="hidden"><%== content %></div>
|
10
10
|
<% end %>
|
@@ -1,41 +1,41 @@
|
|
1
1
|
<% if @example.present? %>
|
2
|
-
|
2
|
+
<%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
|
3
3
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
<% end %>
|
4
|
+
<%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
|
5
|
+
<% toolbar.section padded: true do %>
|
6
|
+
<h3>
|
7
|
+
<%= @example.preview.label %> (<%= @example.label %>)
|
8
|
+
</h3>
|
9
|
+
<% end %>
|
10
|
+
<% toolbar.section align: :right, divide: :left do %>
|
11
|
+
<%= render_component :button_group do |group| %>
|
12
|
+
<% group.button icon: :eye,
|
13
|
+
href: lookbook_inspect_path(@example.path, @params),
|
14
|
+
tooltip: "View in Inspector" %>
|
15
|
+
<% group.button icon: :external_link,
|
16
|
+
href: lookbook_inspect_path(@example.path, @params),
|
17
|
+
tooltip: "Open in new window",
|
18
|
+
target: "_blank" %>
|
20
19
|
<% end %>
|
21
20
|
<% end %>
|
21
|
+
<% end %>
|
22
22
|
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
23
|
+
<div
|
24
|
+
x-show="tab === 'preview'"
|
25
|
+
@viewport:loaded="loadResizer"
|
26
|
+
@dom:update-complete="loadResizer"
|
27
|
+
@viewport:resize-progress="resizeIframe"
|
28
|
+
@viewport:resize-complete="resizeIframe"
|
29
|
+
@tabs:change.window="resizeIframe">
|
30
|
+
<%= render_component :viewport,
|
31
|
+
src: lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
|
32
|
+
alpine_data: "store",
|
33
|
+
resize_height: false,
|
34
|
+
max_height: @max_height,
|
35
|
+
class: "mb-[-2px]" %>
|
36
|
+
</div>
|
37
37
|
|
38
|
-
|
38
|
+
<% end %>
|
39
39
|
<% else %>
|
40
40
|
<%= render_component_tag class: "bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose" do %>
|
41
41
|
<div class="px-4 text-center">
|
@@ -47,5 +47,5 @@
|
|
47
47
|
</p>
|
48
48
|
</div>
|
49
49
|
</div>
|
50
|
-
|
50
|
+
<% end %>
|
51
51
|
<% end %>
|
@@ -11,6 +11,14 @@ module Lookbook
|
|
11
11
|
|
12
12
|
protected
|
13
13
|
|
14
|
+
def lookbook_inspect_path(*args)
|
15
|
+
Lookbook::Engine.routes.url_helpers.lookbook_inspect_path(*args)
|
16
|
+
end
|
17
|
+
|
18
|
+
def lookbook_preview_path(*args)
|
19
|
+
Lookbook::Engine.routes.url_helpers.lookbook_preview_path(*args)
|
20
|
+
end
|
21
|
+
|
14
22
|
def alpine_data
|
15
23
|
[@id.to_json, "$store.pages.embeds"].join(",")
|
16
24
|
end
|
@@ -10,7 +10,7 @@
|
|
10
10
|
@keydown.esc.stop="clear"
|
11
11
|
@keydown.f.stop.prevent.window="focus"
|
12
12
|
@keydown.stop>
|
13
|
-
<button class="text-lookbook-button-
|
13
|
+
<button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
|
14
14
|
<%= icon :x, size: 3 %>
|
15
15
|
</button>
|
16
16
|
</div>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<%= render_component_tag :header do %>
|
2
|
-
<%= render_component :toolbar, class: "!bg-lookbook-header !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
|
2
|
+
<%= render_component :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
|
3
3
|
<% toolbar.section padded: true do %>
|
4
4
|
<% if branding.present? %>
|
5
5
|
<a
|
@@ -60,11 +60,11 @@
|
|
60
60
|
<% end %>
|
61
61
|
<% group.button icon: :menu,
|
62
62
|
"@click.stop": "toggleSidebar",
|
63
|
-
|
63
|
+
"x-show": "$store.layout.mobile && sidebarHidden",
|
64
64
|
class: "!text-lookbook-header-text" %>
|
65
65
|
<% group.button icon: :x,
|
66
66
|
"@click.stop": "toggleSidebar",
|
67
|
-
|
67
|
+
"x-show": "$store.layout.mobile && !sidebarHidden",
|
68
68
|
"@keydown.esc.window": "closeMobileSidebar",
|
69
69
|
class: "!text-lookbook-header-text" %>
|
70
70
|
<% end %>
|
@@ -0,0 +1,36 @@
|
|
1
|
+
require "css_parser"
|
2
|
+
|
3
|
+
module Lookbook
|
4
|
+
class InspectorPanel::Component < Lookbook::BaseComponent
|
5
|
+
attr_reader :panel_styles, :panel_html, :id
|
6
|
+
|
7
|
+
def initialize(id:, name:, system: false, **html_attrs)
|
8
|
+
@id = id
|
9
|
+
@name = name
|
10
|
+
@system = system
|
11
|
+
@panel_html = nil
|
12
|
+
@panel_styles = nil
|
13
|
+
super(**html_attrs)
|
14
|
+
end
|
15
|
+
|
16
|
+
def before_render
|
17
|
+
if @system == false
|
18
|
+
panel_dom = ::Nokogiri::HTML::fragment(content)
|
19
|
+
style_tags = panel_dom.css('style')
|
20
|
+
if style_tags.any?
|
21
|
+
css_parser = ::CssParser::Parser.new
|
22
|
+
@panel_styles = ""
|
23
|
+
style_tags.each do |style_tag|
|
24
|
+
css_parser.load_string! style_tag.text
|
25
|
+
css_parser.each_selector do |selector, declarations, specificity|
|
26
|
+
@panel_styles += "##{id} #{selector} { #{declarations} }\n"
|
27
|
+
end
|
28
|
+
style_tag.unlink
|
29
|
+
end
|
30
|
+
@panel_html = panel_dom.to_html.html_safe
|
31
|
+
end
|
32
|
+
end
|
33
|
+
@panel_html ||= content
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
@@ -1,12 +1,8 @@
|
|
1
1
|
<%= render_component_tag class: "flex flex-col overflow-hidden h-full",
|
2
2
|
"@filter:change.stop": "filter($event.detail.text)" do %>
|
3
3
|
|
4
|
-
<% if
|
5
|
-
<%=
|
6
|
-
<% toolbar.section padded: true do %>
|
7
|
-
<h4 class="pt-1"><%= label %></h4>
|
8
|
-
<% end %>
|
9
|
-
<% end %>
|
4
|
+
<% if toolbar %>
|
5
|
+
<%= toolbar %>
|
10
6
|
<% end %>
|
11
7
|
|
12
8
|
<% if filter && items.any? %>
|
@@ -21,11 +17,11 @@
|
|
21
17
|
<%= safe_join(items) %>
|
22
18
|
</ul>
|
23
19
|
<div class="p-4 text-center" x-show="empty" x-cloak>
|
24
|
-
<h4 class="opacity-50 italic">No matching
|
20
|
+
<h4 class="opacity-50 italic">No matching results.</h4>
|
25
21
|
</div>
|
26
22
|
<% else %>
|
27
23
|
<div class="p-4 text-center">
|
28
|
-
<h4 class="opacity-50 italic">
|
24
|
+
<h4 class="opacity-50 italic">Nothing here yet.</h4>
|
29
25
|
</div>
|
30
26
|
<% end %>
|
31
27
|
</div>
|
@@ -1,28 +1,26 @@
|
|
1
1
|
module Lookbook
|
2
2
|
class Nav::Component < Lookbook::BaseComponent
|
3
3
|
renders_one :filter, Lookbook::Filter::Component
|
4
|
+
renders_one :toolbar, Lookbook::Toolbar::Component
|
4
5
|
|
5
6
|
def initialize(
|
7
|
+
id: nil,
|
6
8
|
collection:,
|
7
|
-
label: nil,
|
8
9
|
collapse_singles: false,
|
9
10
|
**attrs
|
10
11
|
)
|
12
|
+
@id = id.presence || "#{collection.id}-nav"
|
11
13
|
@collection = collection.as_tree
|
12
|
-
@label = label
|
13
14
|
@item_args = {
|
14
15
|
collapse_singles: collapse_singles
|
15
16
|
}
|
16
|
-
super(**attrs)
|
17
|
-
end
|
18
|
-
|
19
|
-
def label
|
20
|
-
@label || @collection.label
|
17
|
+
super(**attrs, id: id)
|
21
18
|
end
|
22
19
|
|
23
20
|
def items
|
24
21
|
@collection.non_empty_items.map do |item|
|
25
22
|
render Lookbook::Nav::Item::Component.new item,
|
23
|
+
nav_id: @id,
|
26
24
|
depth: 1,
|
27
25
|
**@item_args
|
28
26
|
end
|
@@ -1,16 +1,22 @@
|
|
1
|
-
<%= render_component_tag :li,
|
2
|
-
|
1
|
+
<%= render_component_tag :li,
|
2
|
+
id: id,
|
3
|
+
class: "list-none",
|
4
|
+
"x-show": "!filteredOut",
|
5
|
+
data: {
|
6
|
+
"entity-type": item.type
|
7
|
+
},
|
8
|
+
cloak: true do %>
|
3
9
|
<%= render_tag href.present? ? :a : :div,
|
4
10
|
href: href,
|
5
11
|
class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover",
|
6
12
|
style: "padding-left: #{left_pad}px",
|
7
|
-
|
13
|
+
"x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
|
8
14
|
<div class="relative flex items-center">
|
9
|
-
<%= icon
|
15
|
+
<%= icon nil,
|
10
16
|
size: 3,
|
11
17
|
class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
|
12
|
-
|
13
|
-
<%= icon
|
18
|
+
"x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
|
19
|
+
<%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
|
14
20
|
<span><%= label %></span>
|
15
21
|
</div>
|
16
22
|
<% end %>
|
@@ -14,16 +14,22 @@ module Lookbook
|
|
14
14
|
|
15
15
|
def initialize(
|
16
16
|
item,
|
17
|
+
nav_id:,
|
17
18
|
depth: 1,
|
18
19
|
collapse_singles: false,
|
19
20
|
**html_attrs
|
20
21
|
)
|
22
|
+
@nav_id = nav_id
|
21
23
|
@item = item
|
22
24
|
@depth = depth
|
23
25
|
@collapse_singles = collapse_singles
|
24
26
|
super(**html_attrs)
|
25
27
|
end
|
26
28
|
|
29
|
+
def id
|
30
|
+
"#{@nav_id}-#{@item.id}"
|
31
|
+
end
|
32
|
+
|
27
33
|
def left_pad
|
28
34
|
((@depth - 1) * 12) + 24
|
29
35
|
end
|
@@ -40,6 +46,7 @@ module Lookbook
|
|
40
46
|
@children ||= if collection? && !collapsed?
|
41
47
|
item.non_empty_items.map do |item|
|
42
48
|
render Lookbook::Nav::Item::Component.new item,
|
49
|
+
nav_id: @nav_id,
|
43
50
|
depth: (@depth + 1),
|
44
51
|
collapse_singles: @collapse_singles
|
45
52
|
end
|
@@ -52,8 +59,8 @@ module Lookbook
|
|
52
59
|
collapsed? ? @item.first : @item
|
53
60
|
end
|
54
61
|
|
55
|
-
def nav_icon
|
56
|
-
ICONS[
|
62
|
+
def nav_icon
|
63
|
+
ICONS[@item.type] || :file
|
57
64
|
end
|
58
65
|
|
59
66
|
def collection?
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render_component_tag
|
1
|
+
<%= render_component_tag "x-data": "{ activeTab: null }" do %>
|
2
2
|
<div class="flex w-full border-b border-lookbook-divider mb-6">
|
3
3
|
<%= render_component :tabs, theme: :page do |t| %>
|
4
4
|
<% @tabs.each do |props| %>
|
@@ -1,3 +1,3 @@
|
|
1
|
-
<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose prose-a:text-lookbook-prose-link" do %>
|
1
|
+
<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link" do %>
|
2
2
|
<%== rendered_content %>
|
3
3
|
<% end %>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render_component_tag class: "grid h-full w-full",
|
1
|
+
<%= render_component_tag class: "grid h-full w-full", "x-bind": "bindings.root", "x-effect": "initSplit" do %>
|
2
2
|
<% panes.each.with_index(1) do |pane, i| %>
|
3
3
|
<%= pane %>
|
4
4
|
<% if i < panes.size %>
|
@@ -9,8 +9,8 @@
|
|
9
9
|
<%= safe_join(tabs) %>
|
10
10
|
</div>
|
11
11
|
<div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
|
12
|
-
<%= render_component :button, icon: :chevrons_right,
|
13
|
-
<%= render_component :button, icon: :menu, class: "-ml-3",
|
12
|
+
<%= render_component :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
|
13
|
+
<%= render_component :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
|
14
14
|
</div>
|
15
15
|
<div class="hidden">
|
16
16
|
<div x-ref="tabsDropdown" data-cloak>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<%= render_component_tag :button,
|
2
|
-
|
2
|
+
"x-ref": @name,
|
3
3
|
class: [
|
4
4
|
"whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
|
5
5
|
{
|
@@ -8,7 +8,7 @@
|
|
8
8
|
}
|
9
9
|
],
|
10
10
|
":class": "{
|
11
|
-
'border-lookbook-tabs-
|
11
|
+
'border-lookbook-tabs-border-active': isSelected($el),
|
12
12
|
'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
|
13
13
|
'hidden': visibleTabsCount >= #{@position}
|
14
14
|
}",
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<%= render_component_tag :button,
|
2
2
|
id: @id,
|
3
|
-
|
3
|
+
"x-ref": @name,
|
4
4
|
class: [
|
5
5
|
"whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
|
6
6
|
{
|
@@ -9,7 +9,7 @@
|
|
9
9
|
}
|
10
10
|
],
|
11
11
|
":class": "{
|
12
|
-
'border-lookbook-tabs-
|
12
|
+
'border-lookbook-tabs-border-active': isSelected($el),
|
13
13
|
'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
|
14
14
|
'!text-lookbook-tabs-text-disabled': isDisabled($el),
|
15
15
|
'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}
|
@@ -4,26 +4,21 @@ module Lookbook
|
|
4
4
|
|
5
5
|
def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
|
6
6
|
@tag = tag
|
7
|
-
html_attrs[:class] = class_names(html_attrs[:class]) if html_attrs[:class]
|
8
7
|
html_attrs[:data] ||= {}
|
9
8
|
html_attrs[:data][:component] = name if name.present?
|
10
|
-
html_attrs[
|
11
|
-
|
9
|
+
html_attrs["x-cloak"] = true if cloak == true
|
10
|
+
html_attrs[self.class.escape_attribute_key] = false
|
11
|
+
@html_attrs = html_attrs
|
12
12
|
end
|
13
13
|
|
14
14
|
def call
|
15
|
-
@html_attrs[Rails.version.to_f < 7.0 ? :escape_attributes : :escape] = false
|
16
15
|
tag.public_send(@tag, **@html_attrs) do
|
17
16
|
content
|
18
17
|
end
|
19
18
|
end
|
20
19
|
|
21
|
-
|
22
|
-
|
23
|
-
def convert_attrs(html_attrs)
|
24
|
-
html_attrs.map do |name, value|
|
25
|
-
[name.to_s.tr("_", "-"), value]
|
26
|
-
end.to_h
|
20
|
+
def self.escape_attribute_key
|
21
|
+
@escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new('6.1.5.1') ? :escape_attributes : :escape
|
27
22
|
end
|
28
23
|
end
|
29
24
|
end
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar" do %>
|
1
|
+
<%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar-bg" do %>
|
2
2
|
<div class="toolbar-sections flex items-stretch w-full">
|
3
3
|
<%= safe_join(sections) %>
|
4
4
|
</div>
|
@@ -5,7 +5,7 @@
|
|
5
5
|
|
6
6
|
.resize-handle {
|
7
7
|
@apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-indigo-100 hover:bg-opacity-20;
|
8
|
-
@apply text-lookbook-viewport-handle-icon hover:text-lookbook-viewport-handle-icon-hover transition select-none touch-none;
|
8
|
+
@apply text-lookbook-viewport-handle-icon-stroke hover:text-lookbook-viewport-handle-icon-stroke-hover transition select-none touch-none;
|
9
9
|
}
|
10
10
|
}
|
11
11
|
}
|
@@ -34,7 +34,7 @@
|
|
34
34
|
<% end %>
|
35
35
|
<% if @resize_height %>
|
36
36
|
<div
|
37
|
-
class="resize-handle border-b border-l border-lookbook-divider cursor-[
|
37
|
+
class="resize-handle border-b border-l border-lookbook-divider cursor-[row-resize] <%= "border-r" unless @resize_width %>"
|
38
38
|
@pointerdown="onResizeHeightStart"
|
39
39
|
@dblclick="toggleFullHeight">
|
40
40
|
<svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
|
@@ -17,14 +17,14 @@ module Lookbook
|
|
17
17
|
if landing.present?
|
18
18
|
redirect_to lookbook_page_path(landing.lookup_path)
|
19
19
|
else
|
20
|
-
render "lookbook/index"
|
20
|
+
render "lookbook/index"
|
21
21
|
end
|
22
22
|
end
|
23
23
|
|
24
24
|
protected
|
25
25
|
|
26
26
|
def generate_theme_overrides
|
27
|
-
@theme_overrides ||= Lookbook
|
27
|
+
@theme_overrides ||= Lookbook.theme.to_css
|
28
28
|
end
|
29
29
|
|
30
30
|
def feature_enabled?(feature)
|
@@ -47,6 +47,16 @@ module Lookbook
|
|
47
47
|
redirect_to lookbook_inspect_path params[:path]
|
48
48
|
end
|
49
49
|
|
50
|
+
# Namespaced preview helpers
|
51
|
+
|
52
|
+
def lookbook_display(key, fallback = nil)
|
53
|
+
params.dig(:lookbook, :display, key.to_sym) || fallback
|
54
|
+
end
|
55
|
+
|
56
|
+
def lookbook_data(key, fallback = nil)
|
57
|
+
Lookbook.data.get(key, fallback)
|
58
|
+
end
|
59
|
+
|
50
60
|
private
|
51
61
|
|
52
62
|
def lookup_entities
|
@@ -98,10 +108,11 @@ module Lookbook
|
|
98
108
|
preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
|
99
109
|
end
|
100
110
|
end
|
101
|
-
# set display params
|
111
|
+
# set display and data params
|
102
112
|
preview_controller.params.merge!({
|
103
113
|
lookbook: {
|
104
|
-
display: @example.display_params
|
114
|
+
display: @example.display_params,
|
115
|
+
data: Lookbook.data
|
105
116
|
}
|
106
117
|
})
|
107
118
|
end
|
@@ -145,7 +156,8 @@ module Lookbook
|
|
145
156
|
context: context_data,
|
146
157
|
preview: preview,
|
147
158
|
examples: examples,
|
148
|
-
|
159
|
+
example: example,
|
160
|
+
data: Lookbook.data,
|
149
161
|
app: Lookbook
|
150
162
|
})
|
151
163
|
end
|
@@ -4,6 +4,15 @@ module Lookbook
|
|
4
4
|
Lookbook::Engine.config.lookbook
|
5
5
|
end
|
6
6
|
|
7
|
+
def theme
|
8
|
+
Lookbook.theme
|
9
|
+
end
|
10
|
+
|
11
|
+
def asset_path(file, version: true)
|
12
|
+
path = "/lookbook-assets/#{file}".gsub("//", "/")
|
13
|
+
version ? "#{path}?v=#{Lookbook::VERSION}" : path
|
14
|
+
end
|
15
|
+
|
7
16
|
def feature_enabled?(name)
|
8
17
|
Lookbook::Features.enabled?(name)
|
9
18
|
end
|
@@ -20,11 +29,5 @@ module Lookbook
|
|
20
29
|
def generate_id(*args)
|
21
30
|
args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
|
22
31
|
end
|
23
|
-
|
24
|
-
def append_styles(&block)
|
25
|
-
content_for :styles do
|
26
|
-
capture(&block)
|
27
|
-
end
|
28
|
-
end
|
29
32
|
end
|
30
33
|
end
|