lookbook 2.3.12 → 2.3.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 634043098ae2ae2c1e529d8ab5359e8b4894cc56679e47b71cc48da249c521ca
-  data.tar.gz: cd679fad55997bf1fc1c0163d0b32b2511f1ce3320190976c878305913fe80b9
+  metadata.gz: 6690e132c2afade65dabcdd620bf4d8e67f6bfcbacd8d94ad5f156d443417eb9
+  data.tar.gz: fa40a220f164cef926db2e1ce4a6be8681ccac8069149b49d791e58157e1a2a8
 SHA512:
-  metadata.gz: f0d330de3e7379c0f549b713dc61d762fc88af7a5015f57ab3fc4e71b4b74fe8ca66d506177e84d661048196ed07d12abdef2d5e087e9b54468d427356220119
-  data.tar.gz: 37d98a9697d647294fcb4b2f8c718452b57d9a1b4d6941a32a3d8576a42e788ef673b328455cf22a8cbc4fa8afd529a6354034944c1536a9773629b61999cbf1
+  metadata.gz: 6590230a593eccba2833f205758255543ae6fdb4afea7ccc656909d7426a0032dc67163dfcb412c000c0d7b1fb78bc55070d4e738d05068d9bb6a21b6154166d
+  data.tar.gz: cb3f413449f297e41ec1a6706b11dcfb3589631a70252f4220466dcda5ade1e9ae8b909627ad923de8c9aa5471397085fcb50cbc6cacf81348cbfaf550ceaa02

data/app/components/lookbook/button/component.html.erb

@@ -1,18 +1,17 @@
-<%= lookbook_render button_component.new(
-  id: id,
-  icon: icon,
-  **button_attrs,
-  "x-on:keydown.esc.stop.document": "hideDropdown",
-  "x-on:navigation:complete.window": "updateDropdown") do %>
-  <%= content %>
-<% end %>
+<div class="contents" key="<%= key %>">
+  <%= lookbook_render button_component.new(
+    id: id,
+    icon: icon,
+    **button_attrs,
+    "x-on:keydown.esc.stop.document": "hideDropdown") do %>
+    <%= content %>
+  <% end %>
 
-<% if dropdown? %>
-  <% content_for :dropdowns do %>
-    <div data-dropdown-id="<%= id %>">
+  <% if dropdown? %>
+    <div data-dropdown-id="<%= id %>" hidden>
       <div class="divide-y divide-lookbook-divider text-left">
         <%= dropdown %>
       </div>
     </div>
   <% end %>
-<% end %>
+</div>

data/app/components/lookbook/button/component.js

@@ -6,12 +6,7 @@ export default function buttonComponent() {
   let dropdown = null;
 
   return {
-    updateAfterNavigate: true,
-
     init() {
-      this.updateAfterNavigate =
-        this.$el.dataset.updateAfterNavigate !== "false";
-
       if (this.$refs.tooltip) {
         tooltip = initTooltip(this, {
           target: this.$refs.icon,
@@ -19,24 +14,28 @@ export default function buttonComponent() {
       }
 
       if (this.dropdownContent) {
-        dropdown = tippy(this.$el, {
-          content: this.dropdownContent,
-          trigger: "click",
-          theme: "menu",
-          triggerTarget: this.$el,
-          interactive: true,
-          zIndex: 99999,
-          onShow: () => {
-            if (!this.$store.settings.showTooltips) {
-              return false;
-            }
-            this.$dispatch("dropdown:show", { dropdown: this });
-          },
-          onHide: () => this.$dispatch("dropdown:hide", { dropdown: this }),
-        });
+        this.initDropdown();
       }
     },
 
+    initDropdown() {
+      dropdown = tippy(this.$el, {
+        content: this.dropdownContent,
+        trigger: "click",
+        theme: "menu",
+        triggerTarget: this.$el,
+        interactive: true,
+        zIndex: 99999,
+        onShow: () => {
+          if (!this.$store.settings.showTooltips) {
+            return false;
+          }
+          this.$dispatch("dropdown:show", { dropdown: this });
+        },
+        onHide: () => this.$dispatch("dropdown:hide", { dropdown: this }),
+      });
+    },
+
     get dropdownContent() {
       if (this.$root && this.$root.id) {
         const dropdown = document.querySelector(
@@ -53,17 +52,6 @@ export default function buttonComponent() {
       }
     },
 
-    updateDropdown() {
-      if (dropdown) {
-        dropdown.hide();
-        if (this.updateAfterNavigate) {
-          this.$nextTick(() => {
-            dropdown.setContent(this.dropdownContent);
-          });
-        }
-      }
-    },
-
     startSpin() {
       this._spinning = true;
     },

data/app/components/lookbook/button/component.rb

@@ -10,6 +10,10 @@ module Lookbook
       @button_attrs = html_attrs
     end
 
+    def key
+      Digest::SHA256.hexdigest(icon.to_s + dropdown.to_s + @button_attrs.to_json)
+    end
+
     def dropdown?
       dropdown.present?
     end

data/app/components/lookbook/button_group/component.html.erb

@@ -1,3 +1,3 @@
 <%= render_component_tag :div, class: "flex items-center" do %>
   <%= safe_join(buttons) %>
-<% end %>
+<% end %>

data/app/components/lookbook/code/component.html.erb

@@ -8,4 +8,4 @@
     } 
   ] do %>
   <%= Lookbook::CodeHighlighter.call(source, **@highlight_opts) %>
-<% end %>
+<% end %>

data/app/components/lookbook/copy_button/component.html.erb

@@ -8,4 +8,4 @@
   <% if content %>
     <div x-ref="copyTarget" class="hidden"><%== content %></div>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/debug_menu/component.html.erb

@@ -49,4 +49,4 @@
       <%== debug_data %>
     </div>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/dimensions_display/component.html.erb

@@ -1,5 +1,5 @@
 <%= render_component_tag class: "flex items-center text-xs font-mono space-x-1 transition",
-  ":class":"{'!opacity-100': resizing}",
+  "x-bind:class":"{'!opacity-100': resizing}",
   "x-on:viewport:resize-start.window": "resizing = true",
   "x-on:viewport:resize-complete.window": "resizing = false",
   "x-on:dom:update-start.window": "tearDown",
@@ -8,4 +8,4 @@
     <span x-text="`${width}px`"></span>
     <span class="opacity-70">x</span>
     <span x-text="`${height}px`"></span>
-<% end %>
+<% end %>

data/app/components/lookbook/display_options/editor/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag class: "px-2" do %>
   <% if fields.many? %>
-    <%= lookbook_render :button, id: "display-options-dropdown-button", icon: :settings, tooltip: "Display options", data: {update_after_navigate: false} do |button| %>
+    <%= lookbook_render :button, id: "display-options-dropdown-button", icon: :settings, tooltip: "Display options" do |button| %>
       <% button.with_dropdown do %>
         <div class="p-3 space-y-3">
           <%= safe_join(fields) %>
@@ -10,4 +10,4 @@
   <% else %>
     <%= safe_join(fields) %>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/display_options/field/component.html.erb

@@ -5,4 +5,4 @@
     </label>
     <%= select_tag(name, options_for_select(choices, value), "x-model": "value", class: "compact") %>
   </div>
-<% end %>
+<% end %>

data/app/components/lookbook/embed/component.html.erb

@@ -3,4 +3,4 @@
   preview="<%= preview_class %>"
   scenario="<%= scenario.name %>"
   <%= params_attrs_str %> panels="<%= panels.join(",") %>"
-  actions="<%= actions.join(",") %>"></lookbook-embed>
+  actions="<%= actions.join(",") %>"></lookbook-embed>

data/app/components/lookbook/file_source/component.html.erb

@@ -6,4 +6,4 @@
     line_numbers: true do %>
     <%= trimmed_source %>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/icon_button/component.html.erb

@@ -11,10 +11,10 @@
   disabled: disabled,
   aria: { label: tooltip } do %>
   <span x-ref="icon">
-    <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, ":class": "{'animate-spin': _spinning}") if icon) %>
+    <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, "x-bind:class": "{'animate-spin': _spinning}") if icon) %>
   </span>
   <% if tooltip %>
     <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
   <% end %>
   <%= content %>
-<% end %>
+<% end %>

data/app/components/lookbook/inspector_panel/component.html.erb

@@ -5,4 +5,4 @@
 <% if panel_styles %>
   <% content_for :user_styles do %><%= panel_styles %>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/logo/component.html.erb

@@ -3,4 +3,4 @@
     <path d="M3.5 1H17v20H3.5A2.5 2.5 0 0 1 1 18.5v-15A2.5 2.5 0 0 1 3.5 1Z"/>
     <path d="M1.153 19.36c0-.737.261-1.188.596-1.57.417-.475.985-.79 1.751-.79H17M6.801 5.1v7.554L6.8 12.7h5.57"/>
   </g>
-</svg>
+</svg>

data/app/components/lookbook/message/component.html.erb

@@ -23,4 +23,4 @@
       <%= lookbook_render :prose, size: :sm, content: content %>
     </div>
   </div>
-<% end %>
+<% end %>

data/app/components/lookbook/nav/component.html.erb

@@ -25,4 +25,4 @@
       </div>
     <% end %>
   </div>
-<% end %>
+<% end %>

data/app/components/lookbook/nav/directory/component.html.erb

@@ -25,4 +25,4 @@
       <%= safe_join(children) %>
     </ul>
   <% end %>  
-<% end %>
+<% end %>

data/app/components/lookbook/nav/entity/component.html.erb

@@ -29,4 +29,4 @@
       <%= safe_join(children) %>
     </ul>
   <% end %>  
-<% end %>
+<% end %>

data/app/components/lookbook/page_tabs/component.html.erb

@@ -15,4 +15,4 @@
       <% end %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/params/editor/component.html.erb

@@ -18,4 +18,4 @@
 <% if param_styles %>
   <% content_for :user_styles do %><%= param_styles %>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/prose/component.html.erb

@@ -5,4 +5,4 @@
     prose-h1:font-bold
   " do %>
   <%== rendered_content %>
-<% end %>
+<% end %>

data/app/components/lookbook/split_layout/component.html.erb

@@ -10,4 +10,4 @@
       </div>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/tab_panels/component.html.erb

@@ -2,4 +2,4 @@
   <div x-ref="panels" class="h-full">
     <%= safe_join(panels) %>
   </div>
-<% end %>
+<% end %>

data/app/components/lookbook/tab_panels/panel/component.html.erb

@@ -3,6 +3,6 @@
   "data-tab-panel": @name,
   cloak: true,
   class: "h-full",
-  ":class": "{ hidden: !isActive($el) }" do %>
+  "x-bind:class": "{ hidden: !isActive($el) }" do %>
     <%== content %>
 <% end %>

data/app/components/lookbook/tabs/component.html.erb

@@ -17,4 +17,4 @@
       <%= safe_join(dropdown_tabs) %>
     </div>
   </div>
-<% end %>
+<% end %>

data/app/components/lookbook/tabs/dropdown_tab/component.html.erb

@@ -8,7 +8,7 @@
       "py-2 text-base": @theme == :page,
     }
   ],
-  ":class": "{
+  "x-bind:class": "{
     'border-lookbook-tabs-border-active': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     'hidden': visibleTabsCount >= #{@position}

data/app/components/lookbook/tabs/tab/component.html.erb

@@ -9,7 +9,7 @@
       "px-2 text-lg relative -bottom-px": @theme == :page,
     }
   ],
-  ":class": "{
+  "x-bind:class": "{
     'border-lookbook-tabs-border-active': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     '!text-lookbook-tabs-text-disabled': isDisabled($el),

data/app/components/lookbook/text_button/component.html.erb

@@ -13,7 +13,7 @@
 
   <span class="flex items-center space-x-2 justify-center">
     <span x-ref="icon">
-      <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, ":class": "{'animate-spin': _spinning}") if icon) %>
+      <%= icons.present? ? safe_join(icons) : (lookbook_render(:icon, name: icon, size: icon_size, "x-bind:class": "{'animate-spin': _spinning}") if icon) %>
     </span>
     <% if content %>
       <span><%= content %></span>
@@ -23,4 +23,4 @@
   <% if tooltip %>
     <label class="hidden" x-ref="tooltip"><%= tooltip %></label>
   <% end %>
-<% end %>
+<% end %>

data/app/components/lookbook/toolbar/component.html.erb

@@ -2,4 +2,4 @@
   <div class="toolbar-sections flex items-stretch w-full h-10">
     <%= safe_join(sections) %>
   </div>
-<% end %>
+<% end %>

data/app/controllers/lookbook/application_controller.rb

@@ -10,6 +10,9 @@ module Lookbook
     helper Lookbook::ApplicationHelper
     helper Lookbook::UiElementsHelper
 
+    before_action :disable_annotations
+    after_action :restore_annotations
+
     before_action :assign_theme_overrides
     before_action :assign_instance_vars
 
@@ -37,6 +40,20 @@ module Lookbook
 
     protected
 
+    def disable_annotations
+      return unless ActionView::Base.respond_to?(:annotate_rendered_view_with_filenames)
+
+      @original_annotations_value = ActionView::Base.annotate_rendered_view_with_filenames
+      ActionView::Base.annotate_rendered_view_with_filenames = false
+    end
+
+    def restore_annotations
+      return if @original_annotations_value.nil?
+
+      ActionView::Base.annotate_rendered_view_with_filenames = @original_annotations_value
+      @original_annotations_value = nil
+    end
+
     def assign_theme_overrides
       @theme_overrides ||= Engine.theme.to_css
     end

data/app/views/layouts/lookbook/application.html.erb

@@ -22,10 +22,10 @@
         
         <%= lookbook_render :split_layout,
           alpine_data: "$store.layout.main",
-          ":class": "$store.layout.mobile && '!block'" do |layout| %>
+          "x-bind:class": "$store.layout.mobile && '!block'" do |layout| %>
 
           <% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
-            ":class": "{
+            "x-bind:class": "{
               'transition': $store.layout.mobile,
               'translate-x-full': $store.layout.mobile && sidebarHidden,
               '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-[1001] border-l border-lookbook-divider': $store.layout.mobile
@@ -93,7 +93,7 @@
             <% end %>
           <% end %>
 
-          <% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+          <% layout.with_pane id: "app-main", class: "overflow-hidden h-full", "x-bind:class": "$store.layout.mobile && 'w-screen'" do %>
             <%= content_for?(:main) ? yield(:main) : yield %>
           <% end %>
         <% end %>

data/app/views/layouts/lookbook/embed.html.erb

@@ -31,4 +31,4 @@
   <%= yield :body %>
 <% else %>
   <%= render template: "layouts/lookbook/skeleton" %>
-<% end %>
+<% end %>

data/app/views/lookbook/embeds/show.html.erb

@@ -9,4 +9,4 @@
     params: @passed_params,
     dynamic_display_options: @dynamic_display_options,
     static_display_options: @static_display_options
-  } %>
+  } %>

data/app/views/lookbook/errors/default.html.erb

@@ -37,4 +37,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

data/app/views/lookbook/errors/not_found.html.erb

@@ -7,4 +7,4 @@
       theme: :error do %>
       <%= @error.detail || "It may have been moved or deleted." %>
     <% end %>
-<% end %>
+<% end %>

data/app/views/lookbook/index.html.erb

@@ -37,4 +37,4 @@ sidebar_panels_config = @config.preview_inspector.sidebar_panels.map(&:to_sym)
       <p>Select a preview from the nav to get started.</p>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/views/lookbook/inspector/inputs/_color.html.erb

@@ -3,4 +3,4 @@
   type: "color",
   "x-on:change.stop": "",
   "x-on:blur": "value = $el.value",
-) %>
+) %>

data/app/views/lookbook/inspector/inputs/_range.html.erb

@@ -12,4 +12,4 @@
   <div class="flex-none px-2 opacity-60">
     <%= input_options[:max] %>
   </div>
-</div>
+</div>

data/app/views/lookbook/inspector/inputs/_select.html.erb

@@ -2,4 +2,4 @@
   options_for_select(choices || [], value),
   **input_options,
   "x-model": "value"
-) %>
+) %>

data/app/views/lookbook/inspector/inputs/_text.html.erb

@@ -2,4 +2,4 @@
   **input_options,
   type: input,
   "x-model.debounce.200ms": "value"
-) %>
+) %>

data/app/views/lookbook/inspector/inputs/_text_two_step.html.erb

@@ -16,4 +16,4 @@
       "x-show": "changed",
       "x-on:click": "applyChange" %>
   </div>
-</div>
+</div>

data/app/views/lookbook/inspector/inputs/_textarea.html.erb

@@ -2,4 +2,4 @@
   rows: 4,
   **input_options,
   "x-model.debounce.200ms": "value"
-) %>
+) %>

data/app/views/lookbook/inspector/panels/_notes.html.erb

@@ -16,4 +16,4 @@
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>
   </div>
-<% end %>
+<% end %>

data/app/views/lookbook/inspector/panels/_output.html.erb

@@ -4,4 +4,4 @@
   <%- else -%>
     <%== scenarios.first.beautified_output -%>
   <%- end %>
-<% end %>
+<% end %>

data/app/views/lookbook/inspector/panels/_preview.html.erb

@@ -7,4 +7,4 @@
     class: "-inset-px relative",
     style: "width: calc(100% + 2px); height: calc(100% + 2px)"
     %>
-</div>
+</div>

data/app/views/lookbook/inspector/panels/_source.html.erb

@@ -8,4 +8,4 @@
     <% scenario = scenarios.first %>
     <%= lookbook_render :code, language: scenario.source_lang[:name], line_numbers: true, full_height: true do %><%== scenario.source %><% end %>
   <% end %>
-</div>
+</div>

data/app/views/lookbook/inspector/show.html.erb

@@ -2,7 +2,7 @@
   <%= lookbook_render :split_layout,
     id: "inspector",
     alpine_data: "$store.layout.inspector",
-    ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
+    "x-bind:class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
     data: {
       "preview-target": @target.id
     } do |layout| %>
@@ -11,7 +11,7 @@
       "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
     
       <%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
-        <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
+        <% toolbar.with_section "x-bind:class": "layoutResizing && 'overflow-hidden'" do %>
           <%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
             <%= @main_panels.each do |panel| %>
               <% tabs.with_tab name: panel.name,
@@ -99,7 +99,7 @@
       "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
       <%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
-        <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
+        <% toolbar.with_section "x-bind:class": "layoutResizing && 'overflow-hidden'" do %>
           <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
             <%= @drawer_panels.each do |panel| %>
               <% tabs.with_tab name: panel.name,
@@ -133,7 +133,7 @@
               tooltip: "Pin drawer on right",
               "x-on:click": "switchOrientation",
               "x-show": "horizontal",
-              ":class": "{'pointer-events-none opacity-50 !cursor-not-allowed': horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth}",
+              "x-bind:class": "{'pointer-events-none opacity-50 !cursor-not-allowed': horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth}",
               cloak: true %>
 
             <% group.with_button id: "drawer-to-bottom-button",

data/app/views/lookbook/pages/show.html.erb

@@ -95,4 +95,4 @@
       </div>
     </div>
   </div>
-</main>
+</main>

data/app/views/lookbook/partials/_iframe_content_scripts.html.erb

@@ -1 +1 @@
-<script src="<%= lookbook_asset_path("/js/iframe.js") %>" defer></script>
+<script src="<%= lookbook_asset_path("/js/iframe.js") %>" defer></script>

data/app/views/lookbook/partials/_user_styles.html.erb

@@ -2,4 +2,4 @@
   <style media="all" id="user-styles">
     <%= content_for :user_styles -%>
   </style>
-<% end %>
+<% end %>

data/app/views/lookbook/previews/group.html.erb

@@ -12,4 +12,4 @@
 <% else %>
   <%# Render a single scenario %>
   <%= scenarios.first.output %>
-<% end %>
+<% end %>

data/app/views/lookbook/previews/preview.html.erb

@@ -1,9 +1,9 @@
 <% if @render_args[:component] %>
   <% if defined?(Phlex::SGML) && @render_args[:component].is_a?(Phlex::SGML) %>
-    <% if defined?(Phlex::VERSION) && Gem::Version.new(Phlex::VERSION) >= Gem::Version.new("2.0.0") %>
-      <%= raw(@render_args[:component].call(context: { rails_view_context: self }, &@render_args[:block])) %>
-    <% else %>
+    <% if defined?(Phlex::VERSION) && Gem::Version.new(Phlex::VERSION) < Gem::Version.new("2.0.0") %>
       <%= raw(@render_args[:component].call(view_context: self, &@render_args[:block])) %>
+    <% else %>
+      <%= render(@render_args[:component], @render_args[:args], &@render_args[:block]) %>
     <% end %>
   <% else %>
     <%= render(@render_args[:component], @render_args[:args], &@render_args[:block]) %>

data/app/views/lookbook/previews/show.html.erb

@@ -1 +1 @@
- <%= @preview_html %>
+ <%= @preview_html %>

data/config/app.yml

@@ -41,7 +41,6 @@ shared:
     disable_indented_code_blocks: true
     strikethrough: true
     highlight: true
-    with_toc_data: true
     lax_spacing: true
 
   highlighter_options:

data/lib/lookbook/preview_parser.rb

@@ -6,7 +6,7 @@ module Lookbook
       @paths = paths
       @after_parse_callbacks = []
       @after_parse_once_callbacks = []
-      @parsing = Mutex.new
+      @parsing = Monitor.new
 
       define_tags(tags)
       YARD::Parser::SourceParser.after_parse_list { run_callbacks }