lookbook 1.0.8 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 95694c758af19ee6a561b2aedfee93d932c663f7027471204da2dce393052a5a
-  data.tar.gz: 1b4f3e4af714af47b6719cbbef7a861ad0ca2341089e2689ef8ed80b9a745867
+  metadata.gz: d855b9a3a2e36fa5e18aa2388ced2c97a8b07dc8cd5b81785cd6ed1b85269bca
+  data.tar.gz: 3f54dfcf6def53543c8247634ed0b40e6a39807d6e09c59690c50f0f8a0f175d
 SHA512:
-  metadata.gz: 0a148ae5b71546463c003244040e54de07106db6f927e61b77ff35c92d524f37ed59e53646833675a8d1c399968904ffe41891817e85628aa8da879af8aa3bd8
-  data.tar.gz: ee91d909da4634558dbf542802ee770c921f0dfdec0bdc37592977b082a97705957bf7e19cf5168b599e78dca1f5d4222147417262c4b41f90b305a43c2c4f72
+  metadata.gz: f213eb79ea2eab3f01af6be18544c1d59d02905b50d6ff773f54f89e14e0982be43ff948c1eab32819317278a6915070cf1c8259923bb17b195d86d4932f27c5
+  data.tar.gz: 616c37c62765074f87d79c14313499e9bcec19e8722751f74ce39793693ca3058b60f55ac5e80edb406b9301022d79d55c3bb33f9601281576d3f15eb868109b

data/app/assets/lookbook/css/lookbook.css

@@ -47,9 +47,83 @@
 }
 
 @layer components {
-  .form-input {
+  [type="text"],
+  [type="email"],
+  [type="url"],
+  [type="password"],
+  [type="number"],
+  [type="date"],
+  [type="datetime-local"],
+  [type="month"],
+  [type="search"],
+  [type="tel"],
+  [type="time"],
+  [type="week"],
+  textarea,
+  select {
     @apply text-lookbook-input-text placeholder:text-lookbook-input-text-placeholder placeholder:italic;
     @apply border-lookbook-input-border focus:ring-lookbook-input-border-focus focus:border-lookbook-input-border-focus;
-    @apply rounded-md text-sm w-full bg-lookbook-input-bg;
+    @apply rounded-md text-sm w-full bg-lookbook-input-bg block;
+  }
+
+  input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  input[type="range"]:focus {
+    outline: none;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    @apply bg-lookbook-input-toggle;
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    @apply bg-lookbook-input-toggle-active;
+    margin-top: -4px;
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  input[type="range"]::-moz-range-track {
+    @apply bg-lookbook-input-toggle;
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    @apply bg-lookbook-input-toggle-active;
+    border: none;
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  input[type="range"]:focus::-webkit-slider-thumb,
+  input[type="range"]:focus::-moz-range-thumb {
+    @apply outline-1 outline-lookbook-input-toggle-active outline-offset-2;
+  }
+
+  input[type="color"] {
+    -webkit-appearance: none;
+    width: 46px;
+    @apply border border-lookbook-input-border rounded-lg cursor-pointer;
+  }
+
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  input[type="color"]::-webkit-color-swatch {
+    @apply border-0 rounded-lg;
   }
 }

data/app/assets/lookbook/js/app.js

@@ -5,10 +5,20 @@ import { isExternalLink } from "./helpers/dom";
 
 export default function app() {
   return {
+    _requestsInProgress: 0,
+
     version: Alpine.$persist("").as("lookbook-version"),
 
     location: window.location,
 
+    get sidebarHidden() {
+      return this.$store.layout.sidebar.hidden;
+    },
+
+    get loading() {
+      return this._requestsInProgress > 0;
+    },
+
     init() {
       if (window.SOCKET_PATH) {
         console.log("SOCKET CREATED");
@@ -42,6 +52,7 @@ export default function app() {
     async updateDOM() {
       this.debug("Starting DOM update");
       this.$dispatch("dom:update-start");
+      this.requestStart();
       try {
         const { fragment, title } = await fetchHTML(
           window.location,
@@ -49,6 +60,7 @@ export default function app() {
         );
         morph(this.$root, fragment);
         document.title = title;
+        this.requestEnd();
         this.$dispatch("dom:update-complete");
         this.debug("DOM update complete");
       } catch (err) {
@@ -67,8 +79,14 @@ export default function app() {
       }
     },
 
-    get sidebarHidden() {
-      return this.$store.layout.sidebar.hidden;
+    requestStart() {
+      this._requestsInProgress += 1;
+    },
+
+    requestEnd() {
+      if (this._requestsInProgress > 0) {
+        this._requestsInProgress -= 1;
+      }
     },
 
     ...Alpine.$log,

data/app/{components/lookbook/params_editor/field/component.js → assets/lookbook/js/components/params_input.js}

@@ -1,4 +1,4 @@
-export default function paramsEditorFieldComponent({ name, value }) {
+export default function paramsInputComponent({ name, value }) {
   return {
     name,
     value,
@@ -19,18 +19,5 @@ export default function paramsEditorFieldComponent({ name, value }) {
     validate() {
       return this.$root.reportValidity ? this.$root.reportValidity() : true;
     },
-
-    get isNarrowLayout() {
-      return this.narrow || false;
-    },
-
-    bindings: {
-      input: {
-        [":id"]: "`param-${name}`",
-        ["x-ref"]: "input",
-        ["x-model.debounce.200"]: "value",
-        ["@keydown.stop"]: true,
-      },
-    },
   };
 }

data/app/assets/lookbook/js/lookbook.js

@@ -19,7 +19,7 @@ import app from "./app";
 // Note: A ParcelJS issue prevents loading all depths of component JS files in one glob,
 // so need to split it up. Path aliases also do not work with the glob imports.
 import { getComponents } from "./helpers/build";
-import * as components from "../../../components/lookbook/*/component.js";
+import * as components from "../../../components/lookbook/*/*component.js";
 import * as subComponents from "../../../components/lookbook/*/*/component.js";
 import * as jsComponents from "./components/*.js";
 
@@ -50,6 +50,7 @@ Alpine.data("app", app);
 [components, subComponents, jsComponents].forEach((scripts) => {
   const components = getComponents(scripts);
   Object.keys(components).forEach((name) => {
+    console.log(name);
     Alpine.data(`${name}Component`, components[name]);
   });
 });

data/app/components/lookbook/base_component.rb

@@ -12,11 +12,10 @@ module Lookbook
       merged_classes = class_names(attrs[:class], @html_attrs[:class])
       merged_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
 
-      render Lookbook::TagComponent.new(tag: tag,
-        name: component_name,
+      lookbook_tag tag, name: component_name,
         **merged_attrs,
         "x-data": prepare_alpine_data(merged_attrs[:"x-data"]),
-        class: merged_classes), &block
+        class: merged_classes, &block
     end
 
     def component_name

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

@@ -10,7 +10,7 @@
   disabled: @disabled,
   "@keydown.esc.stop": "hideDropdown" do %>
   <span x-ref="icon">
-    <%= icon || render_component(:icon, name: @icon, size: icon_size, ":class": "{'animate-spin': _spinning}") %>
+    <%= icon || lookbook_render(:icon, name: @icon, size: icon_size, ":class": "{'animate-spin': _spinning}") %>
   </span>
   <% if @tooltip %>
     <label class="hidden" x-ref="tooltip"><%= @tooltip %></label>
@@ -18,7 +18,7 @@
   <% if content %>
     <div x-ref="content"><%== content %></div>
   <% end %>
-  <% if dropdown %>
+  <% if dropdown? %>
     <div class="hidden" x-ref="dropdown">
       <div class="bg-white divide-y divide-lookbook-divider text-left">
         <%== dropdown %>

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

@@ -4,6 +4,7 @@ module Lookbook
     renders_one :dropdown
 
     ICON_SIZES = {
+      xs: 3,
       sm: 3.5,
       md: 4,
       lg: 6
@@ -23,13 +24,17 @@ module Lookbook
     end
 
     def padding
-      @size == :sm ? "p-1" : "p-2"
+      [:xs, :sm].include?(@size) ? "p-1" : "p-2"
     end
 
     def tag_name
       @href.present? ? :a : :button
     end
 
+    def dropdown?
+      dropdown.present?
+    end
+
     protected
 
     def alpine_component

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

@@ -2,12 +2,11 @@ module Lookbook
   class ButtonGroup::Component < Lookbook::BaseComponent
     renders_many :buttons, ->(copy: nil, **attrs, &block) do
       attrs[:size] = @size
-      instance = if copy.present?
-        CopyButton::Component.new(target: copy, **attrs)
+      if copy.present?
+        lookbook_render :copy_button, target: copy, **attrs, &block
       else
-        Button::Component.new(**attrs)
+        lookbook_render :button, **attrs, &block
       end
-      render instance, &block
     end
 
     def initialize(size: :md, **html_attrs)

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

@@ -1,4 +1,4 @@
-<%= render_component :button,
+<%= lookbook_render :button,
   name: "copy-button",
   **@button_attrs,
   "x-data": prepare_alpine_data,

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

@@ -0,0 +1,51 @@
+<%= render_component_tag class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
+  <div class="px-3 py-3">
+    <ul class="space-y-2 opacity-80">
+      <% if debug_data? %>
+        <li>
+          <a href="#"
+            class="text-xs flex items-center hover:underline"
+            x-data="clipboardComponent"
+            @click.prevent.stop="copyToClipboard('#debug-data')">
+            <span x-show="copied" x-cloak>
+              <%= icon :check, size: 2.5, class: "text-green-600" %>
+            </span>
+            <span x-show="!copied">
+              <%= icon :clipboard, size: 2.5 %>
+            </span>
+            <span class="ml-2">Copy debug data</span>
+          </a>
+        </li>
+      <% end %>
+      <li>
+        <a href="#"
+          class="text-xs flex items-center hover:underline"
+          @click.stop="localStorage.clear(); window.location.reload();">
+          <%= icon :refresh_cw, size: 2.5 %>
+          <span class="ml-2">Reset local storage</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="flex items-center text-xs px-3 py-2 bg-zinc-50">
+    <span class="opacity-70 mr-1">Lookbook</span>
+    <span class="mr-6">v<%= @version %></span>
+    <div class="flex items-center space-x-2">
+      <% if @docs_url.present? %>
+        <a href="<%= @docs_url %>" target="_blank" class="ml-auto opacity-70" title="Documentation">
+          <%= icon :book, size: 3 %>
+        </a>
+      <% end %>
+      <% if @repo_url.present? %>
+        <a href="<%= @repo_url %>" target="_blank" class="ml-auto opacity-70" title="Github">
+          <%= icon :github, size: 3 %>
+        </a>
+      <% end %>
+    </div>
+  </div>
+  <% if debug_data? %>
+    <div id="debug-data" class="hidden" x-cloak>
+      <%== debug_data %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,18 @@
+module Lookbook
+  class DebugMenu::Component < Lookbook::BaseComponent
+    def initialize(version: nil, docs_url: nil, repo_url: nil, **html_attrs)
+      @version = version
+      @docs_url = docs_url
+      @repo_url = repo_url
+      super(**html_attrs)
+    end
+
+    def debug_data
+      content
+    end
+
+    def debug_data?
+      debug_data.present?
+    end
+  end
+end

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

@@ -1,14 +1,14 @@
 <% if @target.present? %>
 <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
 
-  <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
+  <%= lookbook_render :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
     <% toolbar.section padded: true do %>
       <h3>
         <%= @target.preview.label %> (<%= @target.label %>)
       </h3>
     <% end %>
     <% toolbar.section align: :right, divide: :left do %>
-      <%= render_component :button_group do |group| %>
+      <%= lookbook_render :button_group do |group| %>
         <% group.button icon: :eye,
           href: lookbook_inspect_path(@target.path, @params),
           tooltip: "View in Inspector" %>
@@ -27,7 +27,7 @@
     @viewport:resize-progress="resizeIframe"
     @viewport:resize-complete="resizeIframe"
     @tabs:change.window="resizeIframe"> 
-    <%= render_component :viewport,
+    <%= lookbook_render :viewport,
       src: lookbook_preview_path(@target.path, @params.merge(lookbook_embed: true)),
       alpine_data: "store",
       resize_height: false,

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

@@ -1,5 +1,5 @@
 <%= render_component_tag :header do %>
-  <%= render_component :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
+  <%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
     <% toolbar.section padded: true do %>
       <% if branding.present? %>
         <a
@@ -11,57 +11,32 @@
     <% end %>
 
     <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
-      <%= render_component :button_group do |group| %>
+
+      <div x-show="loading" x-cloak>
+        <svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+
+      <%= lookbook_render :button_group do |group| %>
         <% if @debug_menu %>
-          <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
-            <% button.dropdown do %>
-              <%= tag.div class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
-                <div class="px-3 py-3">
-                  <ul class="space-y-2 opacity-80">
-                    <li>
-                      <a href="#"
-                        class="text-xs flex items-center hover:underline"
-                        x-data="clipboardComponent"
-                        @click.prevent.stop="copyToClipboard('#debug-data')">
-                        <span x-show="copied" x-cloak>
-                          <%= icon :check, size: 2.5, class: "text-green-600" %>
-                        </span>
-                        <span x-show="!copied">
-                          <%= icon :clipboard, size: 2.5 %>
-                        </span>
-                        <span class="ml-2">Copy debug data</span>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#"
-                        class="text-xs flex items-center hover:underline"
-                        @click.stop="localStorage.clear(); window.location.reload();">
-                        <%= icon  :refresh_cw, size: 2.5 %>
-                        <span class="ml-2">Reset local storage</span>
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div class="flex items-center text-xs px-3 py-2 bg-zinc-50">
-                  <span class="opacity-70 mr-1">Lookbook</span>
-                  <span class="mr-6">v<%= Lookbook::VERSION %></span>
-                  <div class="flex items-center space-x-2">
-                    <a href="https://lookbook.build/guide" target="_blank" class="ml-auto opacity-70" title="Documentation">
-                      <%= icon :book, size: 3 %>
-                    </a>
-                    <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
-                      <%= icon :github, size: 3 %>
-                    </a>
-                  </div>
-                </div>
-              <% end %>
+          <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
+            <% menu = lookbook_render :debug_menu,
+              version: Lookbook::VERSION,
+              docs_url: "https://lookbook.build/guide",
+              repo_url: "https://github.com/allmarkedup/lookbook" do %>
+              <%= helpers.pretty_json(Lookbook.debug_data) %>
             <% end %>
+            <% button.dropdown({}).with_content(menu) %>
           <% end %>
         <% end %>
+
         <% group.button icon: :menu,
           "@click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && sidebarHidden",
           class: "!text-lookbook-header-text" %>
+
         <% group.button icon: :x,
           "@click.stop": "toggleSidebar",
           "x-show": "$store.layout.mobile && !sidebarHidden",

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

@@ -1,6 +1,8 @@
 <%= render_component_tag :div, class: "h-full" do %>
-  <% if panel_styles %>
-    <% content_for :panel_css do %><%= panel_styles %><% end %>
-  <% end %>
   <%= panel_html %>
+<% end %>
+
+<% if panel_styles %>
+  <% content_for :user_styles do %><%= panel_styles %>
+  <% end %>
 <% end %>

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

@@ -4,30 +4,18 @@ module Lookbook
   class InspectorPanel::Component < Lookbook::BaseComponent
     attr_reader :panel_styles, :panel_html, :id
 
-    def initialize(id:, name:, system: false, **html_attrs)
+    def initialize(id:, name:, **attrs)
       @id = id
       @name = name
-      @system = system
-      @panel_html = nil
-      @panel_styles = nil
-      super(**html_attrs)
+      @system = attrs[:system] || false
+      super(**attrs.except(:system))
     end
 
     def before_render
       if @system == false
-        panel_dom = ::Nokogiri::HTML.fragment(content)
-        style_tags = panel_dom.css("style")
-        if style_tags.any?
-          css_parser = ::CssParser::Parser.new
-          @panel_styles = ""
-          style_tags.each do |style_tag|
-            css_parser.load_string! style_tag.text
-            css_parser.each_selector do |selector, declarations, specificity|
-              @panel_styles += "##{id} #{selector} { #{declarations} }\n"
-            end
-          end
-          @panel_html = content.gsub(/<style(?:\s[^>]*)?>.*<\/style>/, "").html_safe
-        end
+        tpl = TemplateParser.new(content)
+        @panel_styles = tpl.styles.map { |s| "##{id} #{s}" }.join("\n")
+        @panel_html = tpl.content
       end
       @panel_html ||= content
     end

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

@@ -25,6 +25,10 @@ export default function navComponent(store) {
       }
     },
 
+    closeAll() {
+      store.open.length = 0;
+    },
+
     toggleOpen(id) {
       this.isOpen(id) ? this.setClosed(id) : this.setOpen(id);
     },

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

@@ -18,7 +18,7 @@ module Lookbook
 
     def items
       @collection.non_empty_items.map do |item|
-        render Lookbook::Nav::Item::Component.new item,
+        lookbook_render Lookbook::Nav::Item::Component.new item,
           nav_id: @id,
           depth: 1,
           **@item_args

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

@@ -6,18 +6,18 @@
     "entity-type": item.type
   },
   cloak: true do %>
-  <%= render_tag href.present? ? :a : :div,
+  <%= lookbook_tag href.present? ? :a : :div,
     href: href,
-    class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover",
+    class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition",
     style: "padding-left: #{left_pad}px",
     "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
-    <div class="relative flex items-center">
+    <div class="relative flex items-center w-full">
       <%= icon nil,
         size: 3,
         class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
         "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
       <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
-      <span <% if @item.type == :preview %>class="font-bold"<% end %>><%= label %></span>
+      <span class="truncate <% if @item.type == :preview %>font-bold<% end %>"><%= label %></span>
     </div>
   <% end %>
   

data/app/components/lookbook/nav/item/component.rb

@@ -45,7 +45,7 @@ module Lookbook
     def children
       @children ||= if collection? && !collapsed?
         item.non_empty_items.map do |item|
-          render Lookbook::Nav::Item::Component.new item,
+          lookbook_render Lookbook::Nav::Item::Component.new item,
             nav_id: @nav_id,
             depth: (@depth + 1),
             collapse_singles: @collapse_singles

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

@@ -1,16 +1,16 @@
  <%= render_component_tag "x-data": "{ activeTab: null }" do %>
   <div class="flex w-full border-b border-lookbook-divider mb-6">
-    <%= render_component :tabs, theme: :page do |t| %>
+    <%= lookbook_render :tabs, theme: :page do |t| %>
       <% @tabs.each do |props| %>
         <%= t.tab **props %>
       <% end %>
     <% end %>
   </div>
-  <%= render_component :tab_panels do |t| %>
+  <%= lookbook_render :tab_panels do |t| %>
     <% @tabs.each do |props| %>
       <% t.panel name: props[:name] do %>
-        <%= render_component :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
-          <%== props[:content] %>
+        <%= lookbook_render :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
+          <%== props[:tab_content] %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -2,7 +2,7 @@ module Lookbook
   class PageTabs::Component < Lookbook::BaseComponent
     renders_many :tabs, ->(**attrs, &block) do
       @tabs ||= []
-      attrs[:content] = capture(&block)
+      attrs[:tab_content] = capture(&block)
       attrs[:markdown] ||= @markdown
       @tabs << attrs
     end

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

@@ -0,0 +1,21 @@
+<%= render_component_tag class: "p-4 overflow-hidden" do %>
+  <div class="bg-white border border-lookbook-divider rounded-md overflow-x-auto">
+    <table class="border-collapse w-full" :class="narrow && 'linear'">
+      <thead>
+        <tr>
+          <th class="param-label">Param</th>
+          <th class="param-description">Description</th>
+          <th class="param-input">Input</th>
+        </tr>
+      </thead>
+      <tbody>
+        <%= safe_join(fields.compact) %>
+      </tbody>
+    </table>
+  </div>
+<% end %>
+
+<% if param_styles %>
+  <% content_for :user_styles do %><%= param_styles %>
+  <% end %>
+<% end %>

data/app/components/lookbook/{params_editor → params/editor}/component.js

@@ -5,7 +5,7 @@ export default function paramsEditorComponent() {
     narrow: false,
     init() {
       observeSize(this.$el, ({ width }) => {
-        this.narrow = width < 450;
+        this.narrow = width < 500;
       });
     },
   };