lookbook 1.0.8 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/lookbook/css/lookbook.css +76 -2
- data/app/assets/lookbook/js/app.js +20 -2
- data/app/{components/lookbook/params_editor/field/component.js → assets/lookbook/js/components/params_input.js} +1 -14
- data/app/assets/lookbook/js/lookbook.js +2 -1
- data/app/components/lookbook/base_component.rb +2 -3
- data/app/components/lookbook/button/component.html.erb +2 -2
- data/app/components/lookbook/button/component.rb +6 -1
- data/app/components/lookbook/button_group/component.rb +3 -4
- data/app/components/lookbook/copy_button/component.html.erb +1 -1
- data/app/components/lookbook/debug_menu/component.html.erb +51 -0
- data/app/components/lookbook/debug_menu/component.rb +18 -0
- data/app/components/lookbook/embed/component.html.erb +3 -3
- data/app/components/lookbook/header/component.html.erb +19 -44
- data/app/components/lookbook/inspector_panel/component.html.erb +5 -3
- data/app/components/lookbook/inspector_panel/component.rb +6 -18
- data/app/components/lookbook/nav/component.js +4 -0
- data/app/components/lookbook/nav/component.rb +1 -1
- data/app/components/lookbook/nav/item/component.html.erb +4 -4
- data/app/components/lookbook/nav/item/component.rb +1 -1
- data/app/components/lookbook/page_tabs/component.html.erb +4 -4
- data/app/components/lookbook/page_tabs/component.rb +1 -1
- data/app/components/lookbook/params/editor/component.html.erb +21 -0
- data/app/components/lookbook/{params_editor → params/editor}/component.js +1 -1
- data/app/components/lookbook/params/editor/component.rb +40 -0
- data/app/components/lookbook/params/field/component.css +76 -0
- data/app/components/lookbook/params/field/component.html.erb +27 -0
- data/app/components/lookbook/params/field/component.js +7 -0
- data/app/components/lookbook/params/field/component.rb +101 -0
- data/app/components/lookbook/tabs/component.html.erb +2 -2
- data/app/components/lookbook/tag_component.rb +1 -0
- data/app/components/lookbook/viewport/component.css +1 -1
- data/app/components/lookbook/viewport/component.html.erb +11 -0
- data/app/controllers/lookbook/previews_controller.rb +1 -1
- data/app/helpers/lookbook/component_helper.rb +45 -26
- data/app/helpers/lookbook/page_helper.rb +1 -1
- data/app/views/layouts/lookbook/application.html.erb +18 -4
- data/app/views/layouts/lookbook/page.html.erb +4 -4
- data/app/views/layouts/lookbook/shell.html.erb +4 -4
- data/app/views/layouts/lookbook/skeleton.html.erb +0 -6
- data/app/views/lookbook/error.html.erb +1 -1
- data/app/views/lookbook/pages/show.html.erb +2 -2
- data/app/views/lookbook/previews/inputs/_color.html.erb +5 -0
- data/app/views/lookbook/previews/inputs/_range.html.erb +15 -0
- data/app/views/lookbook/previews/inputs/_select.html.erb +5 -0
- data/app/views/lookbook/previews/inputs/_text.html.erb +5 -0
- data/app/views/lookbook/previews/inputs/_textarea.html.erb +5 -0
- data/app/views/lookbook/previews/inputs/_toggle.html.erb +20 -0
- data/app/views/lookbook/previews/panels/_content.html.erb +2 -2
- data/app/views/lookbook/previews/panels/_notes.html.erb +2 -2
- data/app/views/lookbook/previews/panels/_output.html.erb +1 -1
- data/app/views/lookbook/previews/panels/_params.html.erb +3 -3
- data/app/views/lookbook/previews/panels/_preview.html.erb +1 -1
- data/app/views/lookbook/previews/panels/_source.html.erb +2 -2
- data/app/views/lookbook/previews/show.html.erb +13 -19
- data/lib/lookbook/config.rb +16 -1
- data/lib/lookbook/engine.rb +16 -6
- data/lib/lookbook/markdown.rb +1 -1
- data/lib/lookbook/panels.rb +14 -4
- data/lib/lookbook/params.rb +66 -35
- data/lib/lookbook/parser.rb +1 -0
- data/lib/lookbook/preview.rb +10 -4
- data/lib/lookbook/preview_controller.rb +7 -19
- data/lib/lookbook/preview_example.rb +1 -1
- data/lib/lookbook/source_inspector.rb +10 -4
- data/lib/lookbook/tag.rb +13 -3
- data/lib/lookbook/tag_options.rb +111 -0
- data/lib/lookbook/tags.rb +6 -2
- data/lib/lookbook/template_parser.rb +72 -0
- data/lib/lookbook/theme.rb +1 -1
- data/lib/lookbook/utils.rb +23 -0
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +2 -0
- data/public/lookbook-assets/css/lookbook.css +369 -126
- data/public/lookbook-assets/css/lookbook.css.map +1 -1
- data/public/lookbook-assets/js/embed.js +13 -13
- data/public/lookbook-assets/js/embed.js.map +1 -1
- data/public/lookbook-assets/js/lookbook.js +706 -621
- data/public/lookbook-assets/js/lookbook.js.map +1 -1
- metadata +42 -10
- data/app/components/lookbook/params_editor/component.html.erb +0 -3
- data/app/components/lookbook/params_editor/component.rb +0 -11
- data/app/components/lookbook/params_editor/field/component.html.erb +0 -49
- data/app/components/lookbook/params_editor/field/component.rb +0 -44
@@ -0,0 +1,40 @@
|
|
1
|
+
module Lookbook
|
2
|
+
module Params
|
3
|
+
class Editor::Component < Lookbook::BaseComponent
|
4
|
+
renders_many :fields, ->(input:, description: nil, **attrs) do
|
5
|
+
@field_count += 1
|
6
|
+
@descriptions = true if description.present?
|
7
|
+
input_config = @inputs[input.tr("-", "_").to_sym]
|
8
|
+
Lookbook::Params::Field::Component.new(input: input, description: description, index: @field_count, config: input_config, **attrs)
|
9
|
+
end
|
10
|
+
|
11
|
+
def initialize(inputs: {}, **html_attrs)
|
12
|
+
@inputs = inputs
|
13
|
+
@field_count = -1
|
14
|
+
@descriptions = false
|
15
|
+
@@input_styles = {}
|
16
|
+
super(**html_attrs)
|
17
|
+
end
|
18
|
+
|
19
|
+
def before_render
|
20
|
+
fields
|
21
|
+
end
|
22
|
+
|
23
|
+
def param_styles
|
24
|
+
@css_styles ||= @@input_styles.map do |input_name, styles|
|
25
|
+
styles.map { |s| "[data-param-input=#{input_name}] #{s}" }.join("\n")
|
26
|
+
end.join("\n")
|
27
|
+
end
|
28
|
+
|
29
|
+
def self.add_styles(input, styles)
|
30
|
+
@@input_styles[input] ||= styles
|
31
|
+
end
|
32
|
+
|
33
|
+
protected
|
34
|
+
|
35
|
+
def alpine_component
|
36
|
+
"paramsEditorComponent"
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|
40
|
+
end
|
@@ -0,0 +1,76 @@
|
|
1
|
+
@layer components {
|
2
|
+
[data-component="params-editor"] {
|
3
|
+
table:not(.linear) {
|
4
|
+
thead {
|
5
|
+
tr {
|
6
|
+
@apply border-b border-gray-300;
|
7
|
+
}
|
8
|
+
|
9
|
+
th {
|
10
|
+
@apply font-bold py-4 px-4 align-middle text-left;
|
11
|
+
}
|
12
|
+
|
13
|
+
th.param-label {
|
14
|
+
width: 18%;
|
15
|
+
}
|
16
|
+
|
17
|
+
th.param-input {
|
18
|
+
width: 45%;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
tbody {
|
23
|
+
tr + tr td {
|
24
|
+
@apply border-t border-gray-200;
|
25
|
+
}
|
26
|
+
|
27
|
+
td {
|
28
|
+
@apply py-4 px-4 align-middle;
|
29
|
+
}
|
30
|
+
|
31
|
+
td.param-label {
|
32
|
+
@apply font-bold;
|
33
|
+
}
|
34
|
+
|
35
|
+
.param-input-wrapper {
|
36
|
+
min-height: 38px;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
[data-component="params-editor"] {
|
43
|
+
table.linear {
|
44
|
+
table,
|
45
|
+
tr,
|
46
|
+
td {
|
47
|
+
display: block;
|
48
|
+
}
|
49
|
+
|
50
|
+
thead,
|
51
|
+
th {
|
52
|
+
display: none;
|
53
|
+
}
|
54
|
+
|
55
|
+
tr:not(:last-child) {
|
56
|
+
@apply border-b border-gray-200;
|
57
|
+
}
|
58
|
+
|
59
|
+
tr {
|
60
|
+
@apply space-y-3 py-4;
|
61
|
+
}
|
62
|
+
|
63
|
+
td {
|
64
|
+
@apply px-4 align-middle;
|
65
|
+
}
|
66
|
+
|
67
|
+
td.param-label {
|
68
|
+
@apply font-bold;
|
69
|
+
}
|
70
|
+
|
71
|
+
td.param-description-empty {
|
72
|
+
@apply hidden;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<%= render_component_tag :tr, "@keydown.stop": true do %>
|
2
|
+
<td class="param-label">
|
3
|
+
<label for="param-<%= @name %>">
|
4
|
+
<span class="mr-0.5"><%== @label %></span>
|
5
|
+
<% if hint? %>
|
6
|
+
<span x-data="tooltipComponent" class="inline-block cursor-help relative top-[2px]">
|
7
|
+
<%= icon :help_circle, size: 3.5, class: "opacity-40 hover:opacity-100 transition" %>
|
8
|
+
<div class="hidden" x-ref="tooltip">
|
9
|
+
<%= @hint %>
|
10
|
+
</div>
|
11
|
+
</span>
|
12
|
+
<% end %>
|
13
|
+
</label>
|
14
|
+
</td>
|
15
|
+
<td class="param-description <%= "param-description-empty" unless description? %>">
|
16
|
+
<% if description? %>
|
17
|
+
<p class="opacity-70"><%= @description %></p>
|
18
|
+
<% else %>
|
19
|
+
<p class="italic opacity-40">—</p>
|
20
|
+
<% end %>
|
21
|
+
</td>
|
22
|
+
<td class="param-input">
|
23
|
+
<div class="param-input-wrapper">
|
24
|
+
<%= input %>
|
25
|
+
</div>
|
26
|
+
</td>
|
27
|
+
<% end %>
|
@@ -0,0 +1,101 @@
|
|
1
|
+
module Lookbook
|
2
|
+
module Params
|
3
|
+
class Field::Component < Lookbook::BaseComponent
|
4
|
+
def initialize(name:, input:, index:, label: nil, hint: nil, description: nil, value: nil, value_default: nil, value_type: nil, input_options: {}, config: nil, **html_attrs)
|
5
|
+
@input_name = input
|
6
|
+
@name = name
|
7
|
+
@label = label || name.titleize
|
8
|
+
@hint = hint
|
9
|
+
@description = description
|
10
|
+
@value = value
|
11
|
+
@index = index
|
12
|
+
@input_options = input_options
|
13
|
+
@value_default = value_default
|
14
|
+
@value_type = value_type
|
15
|
+
@config = config || {}
|
16
|
+
@rendered_input = nil
|
17
|
+
super(**html_attrs)
|
18
|
+
end
|
19
|
+
|
20
|
+
def hint?
|
21
|
+
@hint.present?
|
22
|
+
end
|
23
|
+
|
24
|
+
def description?
|
25
|
+
@description.present?
|
26
|
+
end
|
27
|
+
|
28
|
+
def input
|
29
|
+
@rendered_input
|
30
|
+
end
|
31
|
+
|
32
|
+
def before_render
|
33
|
+
tpl = TemplateParser.new(render_input)
|
34
|
+
Editor::Component.add_styles(@input_name, tpl.styles)
|
35
|
+
|
36
|
+
wrapper_attrs = {
|
37
|
+
data: {"param-input": @input_name},
|
38
|
+
"x-data": "paramsInputComponent({name: '#{@name}', value: #{escaped_value}})"
|
39
|
+
}
|
40
|
+
|
41
|
+
@rendered_input = tag.div(**wrapper_attrs) do
|
42
|
+
tpl.content
|
43
|
+
end
|
44
|
+
end
|
45
|
+
|
46
|
+
protected
|
47
|
+
|
48
|
+
def input_error(error)
|
49
|
+
tag.div error, class: "p-2 text-red-500 italic"
|
50
|
+
end
|
51
|
+
|
52
|
+
def value
|
53
|
+
val = @value.presence || @value_default
|
54
|
+
@value_type.downcase == "boolean" ? val == "true" || val == true : val
|
55
|
+
end
|
56
|
+
|
57
|
+
def escaped_value
|
58
|
+
json_escape(value.to_json)
|
59
|
+
end
|
60
|
+
|
61
|
+
def input_options
|
62
|
+
config_options = @config.fetch(:input_options, {})
|
63
|
+
opts = config_options.merge(@input_options).symbolize_keys
|
64
|
+
opts[:id] = "param-#{@name}"
|
65
|
+
opts
|
66
|
+
end
|
67
|
+
|
68
|
+
def render_props
|
69
|
+
{
|
70
|
+
name: @name,
|
71
|
+
input: @input_name,
|
72
|
+
value: value,
|
73
|
+
value_type: @value_type,
|
74
|
+
value_default: @value_default,
|
75
|
+
input_options: input_options.except(:choices),
|
76
|
+
choices: input_options[:choices]
|
77
|
+
}
|
78
|
+
end
|
79
|
+
|
80
|
+
def render_input
|
81
|
+
target = @config[:partial]
|
82
|
+
|
83
|
+
if target
|
84
|
+
render(target, **render_props)
|
85
|
+
else
|
86
|
+
input_error "No param input defined for input type '#{@input_name}'."
|
87
|
+
end
|
88
|
+
rescue ::ActionView::MissingTemplate => exception
|
89
|
+
Lookbook.logger.error exception
|
90
|
+
input_error "Param input partial '#{@config[:partial]}' could not be found."
|
91
|
+
rescue => exception
|
92
|
+
Lookbook.logger.error exception
|
93
|
+
input_error exception.message
|
94
|
+
end
|
95
|
+
|
96
|
+
def alpine_component
|
97
|
+
"paramsFieldComponent"
|
98
|
+
end
|
99
|
+
end
|
100
|
+
end
|
101
|
+
end
|
@@ -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
|
-
<%=
|
13
|
-
<%=
|
12
|
+
<%= lookbook_render :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
|
13
|
+
<%= lookbook_render :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>
|
@@ -4,7 +4,7 @@
|
|
4
4
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
|
5
5
|
|
6
6
|
.resize-handle {
|
7
|
-
@apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-
|
7
|
+
@apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-draggable-hint hover:bg-opacity-20;
|
8
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,6 +11,17 @@
|
|
11
11
|
<% elsif @max_height.present? %>
|
12
12
|
max-height: <%= @max_height %>px;
|
13
13
|
<% end %>`">
|
14
|
+
|
15
|
+
<div
|
16
|
+
class="absolute z-10 pointer-events-none pr-1 pl-2 pt-1.5 pb-1 bg-gray-100/80 rounded-tl-sm top-0 <%= @resize_width ? "right-[18px]" : "right-0" %>"
|
17
|
+
x-ref="dimensions"
|
18
|
+
x-show="store.resizing"
|
19
|
+
x-cloak
|
20
|
+
x-transition:enter.opacity.duration.300ms
|
21
|
+
x-transition:leave.opacity.duration.500ms.delay.600ms>
|
22
|
+
<%= lookbook_render :dimensions_display, target: "[data-component=viewport] iframe" %>
|
23
|
+
</div>
|
24
|
+
|
14
25
|
<div
|
15
26
|
class="grid bg-white relative -inset-px <%= "grid-cols-[1fr_17px]" if @resize_width %> <%= "grid-rows-[1fr_17px]" if @resize_height %>"
|
16
27
|
style="width: calc(100% + 2px); height: calc(100% + 1px); <%= "max-height: #{@max_height}px;" if @max_height.present? %>">
|
@@ -97,7 +97,7 @@ module Lookbook
|
|
97
97
|
# cast known params to type
|
98
98
|
@target.params.each do |param|
|
99
99
|
if preview_controller.params.key?(param[:name])
|
100
|
-
preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:
|
100
|
+
preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:value_type])
|
101
101
|
end
|
102
102
|
end
|
103
103
|
# set display and data params
|
@@ -3,33 +3,69 @@ module Lookbook
|
|
3
3
|
COMPONENT_CLASSES = {} # cache for constantized references
|
4
4
|
|
5
5
|
def icon(name, **attrs)
|
6
|
-
|
6
|
+
lookbook_render :icon, name: name, **attrs
|
7
7
|
end
|
8
8
|
|
9
9
|
def code(language = :html, **attrs, &block)
|
10
10
|
attrs[:language] ||= language
|
11
|
-
|
11
|
+
lookbook_render :code, **attrs, &block
|
12
12
|
end
|
13
13
|
|
14
|
-
def
|
15
|
-
|
16
|
-
comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)
|
17
|
-
render comp, &block
|
14
|
+
def lookbook_tag(tag = :div, **attrs, &block)
|
15
|
+
lookbook_render :tag, tag: tag, **attrs, &block
|
18
16
|
end
|
19
17
|
|
20
|
-
def
|
21
|
-
|
18
|
+
def lookbook_render(ref, **attrs, &block)
|
19
|
+
comp = if ref.is_a? ViewComponent::Base
|
20
|
+
ref
|
21
|
+
else
|
22
|
+
klass = component_class(ref)
|
23
|
+
attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)
|
24
|
+
end
|
25
|
+
if block && !attrs.key?(:content)
|
26
|
+
public_send render_method_name, comp, &block
|
27
|
+
else
|
28
|
+
public_send render_method_name, comp
|
29
|
+
end
|
22
30
|
end
|
23
31
|
|
24
|
-
|
32
|
+
unless respond_to? :class_names
|
25
33
|
def class_names(*args)
|
26
34
|
tokens = build_tag_values(*args).flat_map { |value| value.to_s.split(/\s+/) }.uniq
|
35
|
+
|
27
36
|
safe_join(tokens, " ")
|
28
37
|
end
|
38
|
+
|
39
|
+
def build_tag_values(*args)
|
40
|
+
tag_values = []
|
41
|
+
|
42
|
+
args.each do |tag_value|
|
43
|
+
case tag_value
|
44
|
+
when Hash
|
45
|
+
tag_value.each do |key, val|
|
46
|
+
tag_values << key.to_s if val && key.present?
|
47
|
+
end
|
48
|
+
when Array
|
49
|
+
tag_values.concat build_tag_values(*tag_value)
|
50
|
+
else
|
51
|
+
tag_values << tag_value.to_s if tag_value.present?
|
52
|
+
end
|
53
|
+
end
|
54
|
+
|
55
|
+
tag_values
|
56
|
+
end
|
29
57
|
end
|
30
58
|
|
31
59
|
private
|
32
60
|
|
61
|
+
def render_method_name
|
62
|
+
if Rails.application.config.view_component.render_monkey_patch_enabled || Rails.version.to_f >= 6.1
|
63
|
+
:render
|
64
|
+
else
|
65
|
+
:render_component
|
66
|
+
end
|
67
|
+
end
|
68
|
+
|
33
69
|
def component_class(ref)
|
34
70
|
klass = COMPONENT_CLASSES[ref]
|
35
71
|
if klass.nil?
|
@@ -44,22 +80,5 @@ module Lookbook
|
|
44
80
|
end
|
45
81
|
klass
|
46
82
|
end
|
47
|
-
|
48
|
-
def build_tag_values(*args)
|
49
|
-
tag_values = []
|
50
|
-
args.each do |tag_value|
|
51
|
-
case tag_value
|
52
|
-
when Hash
|
53
|
-
tag_value.each do |key, val|
|
54
|
-
tag_values << key.to_s if val && key.present?
|
55
|
-
end
|
56
|
-
when Array
|
57
|
-
tag_values.concat build_tag_values(*tag_value)
|
58
|
-
else
|
59
|
-
tag_values << tag_value.to_s if tag_value.present?
|
60
|
-
end
|
61
|
-
end
|
62
|
-
tag_values
|
63
|
-
end
|
64
83
|
end
|
65
84
|
end
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<% content_for :shell do %>
|
2
2
|
<% if @previews.any? || @pages.any? %>
|
3
|
-
<%=
|
3
|
+
<%= lookbook_render :split_layout,
|
4
4
|
alpine_data: "$store.layout.main",
|
5
5
|
":class": "$store.layout.mobile && '!block'" do |layout| %>
|
6
6
|
|
@@ -13,13 +13,13 @@
|
|
13
13
|
"@click.outside": "closeMobileSidebar",
|
14
14
|
cloak: true do %>
|
15
15
|
|
16
|
-
<%=
|
16
|
+
<%= lookbook_render :split_layout,
|
17
17
|
alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
|
18
18
|
style: "height: calc(100vh - 2.5rem);" do |layout| %>
|
19
19
|
|
20
20
|
<% if @previews.any? %>
|
21
21
|
<% layout.pane class: "overflow-hidden" do %>
|
22
|
-
<%=
|
22
|
+
<%= lookbook_render :nav,
|
23
23
|
id: "previews-nav",
|
24
24
|
collection: @previews,
|
25
25
|
alpine_data: "$store.nav.previews",
|
@@ -28,6 +28,13 @@
|
|
28
28
|
<% toolbar.section padded: true do %>
|
29
29
|
<h4 class="pt-1">Previews</h4>
|
30
30
|
<% end %>
|
31
|
+
<% toolbar.section align: :right, padded: false do %>
|
32
|
+
<%= lookbook_render :button_group, size: :xs do |group| %>
|
33
|
+
<% group.button icon: :minus_square,
|
34
|
+
tooltip: "Collapse all",
|
35
|
+
"@click": "closeAll" %>
|
36
|
+
<% end %>
|
37
|
+
<% end %>
|
31
38
|
<% end %>
|
32
39
|
<% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name…" %>
|
33
40
|
<% end %>
|
@@ -36,7 +43,7 @@
|
|
36
43
|
|
37
44
|
<% if @pages.any? %>
|
38
45
|
<% layout.pane class: "overflow-hidden" do %>
|
39
|
-
<%=
|
46
|
+
<%= lookbook_render :nav,
|
40
47
|
id: "pages-nav",
|
41
48
|
collection: @pages,
|
42
49
|
alpine_data: "$store.nav.pages" do |nav| %>
|
@@ -44,6 +51,13 @@
|
|
44
51
|
<% toolbar.section padded: true do %>
|
45
52
|
<h4 class="pt-1">Pages</h4>
|
46
53
|
<% end %>
|
54
|
+
<% toolbar.section align: :right, padded: false do %>
|
55
|
+
<%= lookbook_render :button_group, size: :xs do |group| %>
|
56
|
+
<% group.button icon: :minus_square,
|
57
|
+
tooltip: "Collapse all",
|
58
|
+
"@click": "closeAll" %>
|
59
|
+
<% end %>
|
60
|
+
<% end %>
|
47
61
|
<% end %>
|
48
62
|
<% end %>
|
49
63
|
<% end %>
|
@@ -12,14 +12,14 @@
|
|
12
12
|
<div class="relative z-10 flex items-center">
|
13
13
|
|
14
14
|
<% if @previous_page %>
|
15
|
-
<%=
|
15
|
+
<%= lookbook_render :button,
|
16
16
|
size: :lg,
|
17
17
|
icon: :chevron_left,
|
18
18
|
tooltip: "Previous page",
|
19
19
|
href: lookbook_page_path(@previous_page.lookup_path),
|
20
20
|
class: "pr-0.5 bg-transparent" %>
|
21
21
|
<% else %>
|
22
|
-
<%=
|
22
|
+
<%= lookbook_render :button,
|
23
23
|
size: :lg,
|
24
24
|
icon: :chevron_left,
|
25
25
|
disabled: true,
|
@@ -27,14 +27,14 @@
|
|
27
27
|
<% end %>
|
28
28
|
|
29
29
|
<% if @next_page %>
|
30
|
-
<%=
|
30
|
+
<%= lookbook_render :button,
|
31
31
|
size: :lg,
|
32
32
|
icon: :chevron_right,
|
33
33
|
tooltip: "Next page",
|
34
34
|
href: lookbook_page_path(@next_page.lookup_path),
|
35
35
|
class: "pl-0.5 bg-transparent" %>
|
36
36
|
<% else %>
|
37
|
-
<%=
|
37
|
+
<%= lookbook_render :button,
|
38
38
|
size: :lg,
|
39
39
|
icon: :chevron_right,
|
40
40
|
disabled: true,
|
@@ -7,13 +7,13 @@
|
|
7
7
|
@navigation:start="closeMobileSidebar"
|
8
8
|
class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
|
9
9
|
|
10
|
-
<% if content_for? :
|
11
|
-
<style media="all" id="
|
12
|
-
<%= content_for :
|
10
|
+
<% if content_for? :user_styles %>
|
11
|
+
<style media="all" id="user-styles">
|
12
|
+
<%= content_for :user_styles -%>
|
13
13
|
</style>
|
14
14
|
<% end %>
|
15
15
|
|
16
|
-
<%=
|
16
|
+
<%= lookbook_render :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
|
17
17
|
<% header.branding { config.project_name } %>
|
18
18
|
<% end %>
|
19
19
|
|
@@ -24,7 +24,7 @@ error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error)
|
|
24
24
|
|
25
25
|
<% if error.source_code %>
|
26
26
|
<div class="mx-8 border border-red-200 max-w-screen-lg">
|
27
|
-
<%=
|
27
|
+
<%= lookbook_render :code,
|
28
28
|
language: error.file_lang,
|
29
29
|
highlight_lines: [error.source_code[:highlighted_line]],
|
30
30
|
start_line: error.source_code[:start_line],
|
@@ -6,12 +6,12 @@
|
|
6
6
|
</header>
|
7
7
|
<% end %>
|
8
8
|
|
9
|
-
<%=
|
9
|
+
<%= lookbook_render :prose, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
|
10
10
|
<%= @page_content %>
|
11
11
|
<% end %>
|
12
12
|
|
13
13
|
<% if @page.sections.any? %>
|
14
|
-
<%=
|
14
|
+
<%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
|
15
15
|
<% @page.sections.each do |section| %>
|
16
16
|
<% page_tabs.tab name: "page-section-#{section.name}", label: section.label do %>
|
17
17
|
<%= page_controller.render_page(section) %>
|
@@ -0,0 +1,15 @@
|
|
1
|
+
<div class="w-full flex items-center pt-2">
|
2
|
+
<div class="flex-none px-2 opacity-60">
|
3
|
+
<%= input_options[:min] %>
|
4
|
+
</div>
|
5
|
+
<div class="w-full px-2">
|
6
|
+
<%= text_field_tag(name, value,
|
7
|
+
**input_options,
|
8
|
+
type: "range",
|
9
|
+
"x-model.throttle.300ms": "value"
|
10
|
+
) %>
|
11
|
+
</div>
|
12
|
+
<div class="flex-none px-2 opacity-60">
|
13
|
+
<%= input_options[:max] %>
|
14
|
+
</div>
|
15
|
+
</div>
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<%
|
2
|
+
button_classes = [
|
3
|
+
"relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full
|
4
|
+
cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2
|
5
|
+
focus:ring-offset-2 focus:ring-input-border-focus",
|
6
|
+
value == true ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle"
|
7
|
+
]
|
8
|
+
span_classes = [
|
9
|
+
"pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200",
|
10
|
+
value == true ? "translate-x-5" : "translate-x-0"
|
11
|
+
]
|
12
|
+
%>
|
13
|
+
|
14
|
+
<%= button_tag **input_options,
|
15
|
+
class: class_names(button_classes),
|
16
|
+
role: "switch",
|
17
|
+
type: "button",
|
18
|
+
"@click.stop": "value = !value" do %>
|
19
|
+
<%= tag.span "aria-hidden": true, class: class_names(span_classes) %>
|
20
|
+
<% end %>
|
@@ -1,11 +1,11 @@
|
|
1
1
|
<div class="p-4 bg-lookbook-prose-bg h-full">
|
2
2
|
<% if panel.content.present? %>
|
3
|
-
<%=
|
3
|
+
<%= lookbook_render :prose, markdown: true do %>
|
4
4
|
<%== panel.content %>
|
5
5
|
<% end %>
|
6
6
|
<% else %>
|
7
7
|
<% if Rails.env.development? %>
|
8
|
-
<%=
|
8
|
+
<%= lookbook_render :prose do %>
|
9
9
|
<em class='opacity-50'>No content has been defined for this panel.</em>
|
10
10
|
<% end %>
|
11
11
|
<% end %>
|