spina 2.13.1 → 2.14.0

data/app/assets/javascripts/spina/controllers/form_controller.js

@@ -1,10 +1,23 @@
 import { Controller } from "@hotwired/stimulus"
+import debounce from "libraries/debounce"
 import formRequestSubmitPolyfill from "libraries/form-request-submit-polyfill"
 
 export default class extends Controller {
   
-  requestSubmit() {
+  submitForm = debounce(function() {
     this.element.requestSubmit()
+  }.bind(this), this.debounceTime)
+  
+  requestSubmit() {
+    this.submitForm()
+  }
+  
+  submit() {
+    this.submitForm()
+  }
+  
+  get debounceTime() {
+    return this.element.dataset.debounceTime || 0
   }
   
 }

data/app/assets/javascripts/spina/controllers/page_collapse_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "children", "indicator" ]
+  
+  toggle(event) {
+    this.childrenTarget.toggleAttribute("hidden")
+    this.indicatorTarget.classList.toggle("rotate-90")
+    
+    if (this.collapsed) event.preventDefault()
+  }
+  
+  get collapsed() {
+    return this.childrenTarget.hidden
+  }
+  
+}

data/app/assets/javascripts/spina/controllers/page_select_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  
+  static get targets() {
+    return ['input', 'label', 'search']
+  }
+  
+  connect() {
+    // Show placeholder if there is no page selected yet
+    if (this.labelTarget.querySelector("turbo-frame") == undefined) {
+      this.clear()
+    }
+  }
+  
+  select(event) {
+    let button = event.currentTarget
+    
+    this.inputTarget.value = button.dataset.id
+    this.labelTarget.innerText = button.dataset.title
+  }
+  
+  clear() {
+    this.inputTarget.value = ""
+    this.labelTarget.innerHTML = `
+      <span class="text-gray-400">
+        ${this.element.dataset.placeholder}
+      </span>
+    `
+  }
+  
+  autofocus() {
+    setTimeout(function() {
+      this.searchTarget.focus()
+    }.bind(this), 100)
+  }
+  
+}

data/app/assets/javascripts/spina/libraries/debounce.js

@@ -0,0 +1,65 @@
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not
+ * be triggered. The function will be called after it stops being called for
+ * N milliseconds. If `immediate` is passed, trigger the function on the
+ * leading edge, instead of the trailing. The function also has a property 'clear' 
+ * that is a function which will clear the timer to prevent previously scheduled executions. 
+ *
+ * @source underscore.js
+ * @see http://unscriptable.com/2009/03/20/debouncing-javascript-methods/
+ * @param {Function} function to wrap
+ * @param {Number} timeout in ms (`100`)
+ * @param {Boolean} whether to execute at the beginning (`false`)
+ * @api public
+ */
+export default function debounce(func, wait, immediate){
+  var timeout, args, context, timestamp, result;
+  if (null == wait) wait = 100;
+
+  function later() {
+    var last = Date.now() - timestamp;
+
+    if (last < wait && last >= 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      if (!immediate) {
+        result = func.apply(context, args);
+        context = args = null;
+      }
+    }
+  };
+
+  var debounced = function(){
+    context = this;
+    args = arguments;
+    timestamp = Date.now();
+    var callNow = immediate && !timeout;
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+
+  debounced.clear = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+  
+  debounced.flush = function() {
+    if (timeout) {
+      result = func.apply(context, args);
+      context = args = null;
+      
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  };
+
+  return debounced;
+};

data/app/components/spina/forms/search_component.html.erb

@@ -0,0 +1,12 @@
+<div class="flex items-center relative">
+  <div class="absolute left-2">
+    <%= helpers.heroicon('search', style: :solid, class: 'text-gray-300 w-5 h-5') %>
+  </div>
+
+  <%= f.search_field @method, 
+    value: params[@method.to_sym],
+    placeholder: t("spina.search"),
+    class: "form-input rounded-full pl-8 text-sm h-9 w-full",
+    data: {action: "input->form#requestSubmit"}
+  %>
+</div>

data/app/components/spina/forms/search_component.rb

@@ -0,0 +1,12 @@
+module Spina
+  module Forms
+    class SearchComponent < ApplicationComponent
+      attr_accessor :f, :method
+
+      def initialize(f, method)
+        @f = f
+        @method = method
+      end
+    end
+  end
+end

data/app/components/spina/forms/trix_toolbar_component.html.erb

@@ -66,11 +66,7 @@
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 424H16a16 16 0 0 0-16 16v16a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-16a16 16 0 0 0-16-16zM27.31 363.3l96-96a16 16 0 0 0 0-22.62l-96-96C17.27 138.66 0 145.78 0 160v192c0 14.31 17.33 21.3 27.31 11.3zM435.17 168H204.83A12.82 12.82 0 0 0 192 180.83v22.34A12.82 12.82 0 0 0 204.83 216h230.34A12.82 12.82 0 0 0 448 203.17v-22.34A12.82 12.82 0 0 0 435.17 168zM432 48H16A16 16 0 0 0 0 64v16a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm3.17 248H204.83A12.82 12.82 0 0 0 192 308.83v22.34A12.82 12.82 0 0 0 204.83 344h230.34A12.82 12.82 0 0 0 448 331.17v-22.34A12.82 12.82 0 0 0 435.17 296z"/></svg>
       </button>
     </div>
-    
-    <div class="absolute hidden w-full" data-trix-target="imageFields">
-      <input type="text" class="h-8 px-2 mt-1 border-0 ring-0 focus:ring-0 w-full text-sm italic" placeholder="Alt text" data-trix-target="altField" data-action="keyup->trix#setAltText keydown->trix#preventSubmission" />
-    </div>
-  
+
     <div hidden data-reveal data-trix-dialogs>
       <div class="trix-dialog" data-trix-dialog="href" data-trix-dialog-attribute="href">
         <div class="fixed inset-0 flex justify-center items-center bg-gray-700 bg-opacity-25 z-50">
@@ -98,4 +94,7 @@
     </div>
     
   </div>
-</div>
+</div>
+<div class="absolute hidden w-full" data-trix-target="imageFields">
+  <input type="text" class="h-8 px-2 mt-1 border-0 ring-0 focus:ring-0 w-full text-sm italic" placeholder="Alt text" data-trix-target="altField" data-action="keyup->trix#setAltText keydown->trix#preventSubmission" />
+</div>

data/app/components/spina/media_picker/modal_component.html.erb

@@ -4,28 +4,36 @@
       <div class="flex flex-col md:flex-row h-full w-full">
         <div class="flex-1 bg-white flex flex-col max-h-full relative overflow-hidden">
           <div data-infinite-scroll-target="container" data-controller="selectable" class="p-6 h-full w-full overflow-scroll" data-action="scroll->infinite-scroll#load">
-            
-            <!-- Images are loaded using nested turbo-frame-tags -->
-            <!-- Only load images in multiples of 4 so that this grid -->
-            <!-- will not show any gaps. -->
-            <turbo-frame id="images-<%= @images.current_page %>">
-              <div class="grid grid-cols-2 md:grid-cols-4 gap-6 auto-rows-min">
-                <%= render Spina::MediaPicker::ImageComponent.with_collection(@images) %>
-              </div>
-              
-              <% if @images.next_page %>
-                <turbo-frame id="images-<%= @images.next_page %>" data-action= "turbo:frame-load->infinite-scroll#load">
-                  <%= link_to "Load more images", helpers.path_to_next_page(@images), class: "btn btn-default mt-6", data: {infinite_scroll_target: "button"} %>
-                </turbo-frame>
-              <% end %>
-              
+            <turbo-frame id="images">
+              <!-- Images are loaded using nested turbo-frame-tags -->
+              <!-- Only load images in multiples of 4 so that this grid -->
+              <!-- will not show any gaps. -->
+              <turbo-frame id="images-<%= @images.current_page %>">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-6 auto-rows-min">
+                  <%= render Spina::MediaPicker::ImageComponent.with_collection(@images) %>
+                </div>
+                
+                <% if @images.next_page %>
+                  <turbo-frame id="images-<%= @images.next_page %>" data-action= "turbo:frame-load->infinite-scroll#load">
+                    <%= link_to "Load more images", helpers.path_to_next_page(@images), class: "btn btn-default mt-6", data: {infinite_scroll_target: "button"} %>
+                  </turbo-frame>
+                <% end %>
+                
+              </turbo-frame>
             </turbo-frame>
             
           </div>
         </div>
       
         <div class="md:w-72 p-4 border-t rounded-b-lg md:rounded-none md:border-t-0 border-gray-200 flex flex-col justify-between bg-gray-100 md:bg-opacity-50 md:rounded-l-lg">
-          <div class="hidden md:block md:mb-6 overflow-scroll">
+          <div class="mb-4">
+            <%= form_with method: :get, url: helpers.spina.admin_media_picker_path, data: {controller: "form", turbo_frame: "images"} do |f| %>
+              <%= f.hidden_field :media_folder_id, value: @media_folder&.id %>
+              <%= render Spina::Forms::SearchComponent.new(f, :query) %>
+            <% end %>
+          </div>
+          
+          <div class="hidden md:block md:mb-6 overflow-scroll flex-1">
             <%= link_to helpers.spina.admin_media_picker_path, class: "font-medium w-full text-sm px-3 py-2 rounded-lg flex items-center justify-between #{media_folder_classes(nil)}", data: {turbo_frame: "media_picker"} do %>
               <div class="flex items-center">
                 <%= helpers.heroicon("collection", style: :solid, class: "w-5 h-5 mr-2 text-spina-light") %>

data/app/components/spina/pages/page_component.html.erb

@@ -1,4 +1,4 @@
-<turbo-frame id="page_<%= @page.id %>" data-id="<%= @page.id %>">
+<turbo-frame id="page_<%= page.id %>" data-id="<%= page.id %>" data-controller="<%= 'page-collapse' if has_children? %>">
   <div class="flex items-center border-gray-200 border-b <%= css_class %> bg-opacity-50">
     <% if sortable? %>
       <% if draggable? %>
@@ -7,31 +7,44 @@
         </div>
       <% else %>
         <div class="pl-2">          
-          <%= button_to helpers.spina.sort_one_admin_page_path(@page, direction: "up"), class: "btn btn-default shadow-none border-gray-200 border-b-0 rounded-b-none px-1 h-5 sort-up" do %>
+          <%= button_to helpers.spina.sort_one_admin_page_path(page, direction: "up"), class: "btn btn-default shadow-none border-gray-200 border-b-0 rounded-b-none px-1 h-5 sort-up" do %>
             <%= helpers.heroicon("chevron-up", style: :solid, class: 'w-4 h-4 text-gray-600') %>
           <% end %>
 
-          <%= button_to helpers.spina.sort_one_admin_page_path(@page), class: "btn btn-default shadow-none border-gray-200 rounded-t-none px-1 h-5 sort-down" do %>
+          <%= button_to helpers.spina.sort_one_admin_page_path(page), class: "btn btn-default shadow-none border-gray-200 rounded-t-none px-1 h-5 sort-down" do %>
             <%= helpers.heroicon("chevron-down", style: :solid, class: 'w-4 h-4 text-gray-600') %>
           <% end %>
         </div>
       <% end %>
     <% end %>
     
-    <%= link_to helpers.spina.edit_admin_page_path(@page), class: "block text-spina font-medium text-sm p-4 hover:text-spina-dark", data: {turbo_frame: "_top"} do %>
-      <%= @page.menu_title %>
+    <% if has_children? %>
+      <%= link_to helpers.spina.children_admin_page_path(page, sortable: sortable?, draggable: draggable?), class: "ml-2 -mr-3 px-1 h-7 font-medium rounded-md flex items-center text-spina hover:bg-spina/10 transition transition-bg transform", data: {turbo_frame: "page_#{page.id}_children", page_collapse_target: "button", action: "page-collapse#toggle"} do %>
+        <div data-page-collapse-target="indicator" class="transform transition <%= 'rotate-90' unless collapsed? %>">
+          <%= helpers.heroicon('chevron-right', style: :mini, class: 'w-5 h-5') %>
+        </div>
+      <% end %>
+    <% end %>
+    
+    <%= link_to helpers.spina.edit_admin_page_path(page), class: "text-spina font-medium text-sm p-4 hover:text-spina-dark flex items-center", data: {turbo_frame: "_top"} do %>
+      <%= page.menu_title %>
       
-      <small class="font-normal"><%= label %></small>
+      <small class="font-normal ml-2"><%= label %></small>
     <% end %>
     
     <div class='flex-1'></div>
     <div class="mr-3 flex space-x-2">
-      <%= render Spina::Pages::TranslationsComponent.new(@page) %>
+      <%= render Spina::Pages::TranslationsComponent.new(page) %>
     </div>
 
   </div>
 
-  <% if children.any? %>
-    <%= render Spina::Pages::ListComponent.new(pages: children, sortable: sortable, draggable: draggable) %>
+  <% if has_children? %>
+    <turbo-frame id="page_<%= page.id %>_children" data-page-collapse-target="children" <%= 'hidden' if collapsed? %>>
+      <% unless collapsed? %>
+        <%= render Spina::Pages::ListComponent.new(pages: children, sortable: sortable?, draggable: draggable?) %>
+      <% end %>
+    </turbo-frame>
   <% end %>
-</turbo-frame>
+</turbo-frame>
+

data/app/components/spina/pages/page_component.rb

@@ -1,7 +1,7 @@
 module Spina
   module Pages
     class PageComponent < ApplicationComponent
-      attr_reader :sortable, :draggable
+      attr_reader :page, :sortable, :draggable
 
       def initialize(page:, sortable: true, draggable: true)
         @page = page
@@ -25,9 +25,14 @@ module Spina
       def draggable?
         draggable
       end
+      
+      # Pages are collapsed by default if they're inside a resource
+      def collapsed?
+        page.resource_id.present?
+      end
 
       def depth
-        @page.depth
+        page.depth
       end
 
       def css_class
@@ -38,9 +43,16 @@ module Spina
           "pl-10 bg-gray-200"
         end
       end
+      
+      # Explicitly check for "== 0" to account for older
+      # Spina setups where ancestry_children_count is still NULL
+      def has_children?
+        return false if page.ancestry_children_count == 0
+        page.has_children?
+      end
 
       def children
-        @children ||= @page.children.active.sorted
+        @children ||= page.children.active.sorted
       end
     end
   end

data/app/controllers/spina/admin/attachments_controller.rb

@@ -4,7 +4,7 @@ module Spina
       before_action :set_breadcrumbs
 
       def index
-        @attachments = Attachment.sorted.with_attached_file.page(params[:page]).per(25)
+        @attachments = Attachment.sorted.with_attached_file.with_filename(params[:query].to_s).page(params[:page]).per(25)
       end
 
       def show

data/app/controllers/spina/admin/images_controller.rb

@@ -6,7 +6,7 @@ module Spina
 
       def index
         @media_folders = MediaFolder.order(:name).includes(:images)
-        @images = Image.sorted.where(media_folder: @media_folder).with_attached_file.page(params[:page]).per(25)
+        @images = Image.sorted.where(media_folder: @media_folder).with_attached_file.with_filename(params[:query].to_s).page(params[:page]).per(25)
       end
 
       def show

data/app/controllers/spina/admin/media_picker_controller.rb

@@ -2,7 +2,7 @@ module Spina
   module Admin
     class MediaPickerController < AdminController
       def show
-        @images = Spina::Image.sorted.with_attached_file.page(params[:page]).per(16)
+        @images = Spina::Image.sorted.with_attached_file.with_filename(params[:query].to_s).page(params[:page]).per(16)
 
         if (@media_folder = Spina::MediaFolder.find_by(id: params[:media_folder_id]))
           @images = @images.where(media_folder: @media_folder)

data/app/controllers/spina/admin/page_select_options_controller.rb

@@ -0,0 +1,24 @@
+module Spina
+  module Admin
+    class PageSelectOptionsController < AdminController
+      
+      def show
+        @page = Page.find(params[:id])
+      end
+      
+      def index
+      end
+      
+      def search
+        if params[:resource].present?
+          @pages = Resource.find_by(name: params[:resource])&.pages
+        end
+        
+        @pages ||= Page.all
+        @pages = @pages.joins(:translations).where("spina_page_translations.title ILIKE :query OR materialized_path ILIKE :query", query: "%#{params[:search]}%").order(created_at: :desc).distinct.page(params[:page]).per(20)
+        render :index
+      end
+      
+    end
+  end
+end

data/app/controllers/spina/admin/pages_controller.rb

@@ -108,7 +108,7 @@ module Spina
 
         redirect_to spina.admin_pages_url(resource_id: @page.resource_id)
       end
-
+      
       private
 
       def set_locale

data/app/controllers/spina/admin/password_resets_controller.rb

@@ -11,7 +11,7 @@ module Spina
       def create
         user = User.find_by(email: params[:email])
 
-        if user&.reset_passord!
+        if user&.reset_password!
           UserMailer.forgot_password(user, request.user_agent).deliver_later
           redirect_to admin_login_path, flash: {success: t("spina.forgot_password.instructions_sent")}
         else

data/app/models/concerns/spina/attachable.rb

@@ -0,0 +1,21 @@
+module Spina
+  module Attachable
+    extend ActiveSupport::Concern
+    
+    included do
+      has_one_attached :file
+      
+      scope :with_filename, ->(query) do
+        joins(:file_blob).where(
+          "active_storage_blobs.filename ILIKE ?",
+          "%" + Image.sanitize_sql_like(query) + "%"
+        )
+      end
+    end
+    
+    def name
+      file&.filename.to_s
+    end
+    
+  end
+end

data/app/models/spina/attachment.rb

@@ -1,15 +1,11 @@
 module Spina
   class Attachment < ApplicationRecord
-    has_one_attached :file
-
+    include Attachable
+    
     attr_accessor :_destroy
 
     scope :sorted, -> { order("created_at DESC") }
 
-    def name
-      file.filename.to_s
-    end
-
     def content
       file if file.attached?
     end

data/app/models/spina/image.rb

@@ -1,15 +1,11 @@
 module Spina
   class Image < ApplicationRecord
+    include Attachable
+    
     belongs_to :media_folder, optional: true
 
-    has_one_attached :file
-
     scope :sorted, -> { order("created_at DESC") }
 
-    def name
-      file.try(:filename).to_s
-    end
-
     def variant(options)
       return "" unless file.attached?
       return file if file.content_type.include?("svg")

data/app/models/spina/navigation_item.rb

@@ -13,6 +13,6 @@ module Spina
 
     validates :page, uniqueness: {scope: :navigation}
 
-    delegate :menu_title, :materialized_path, :draft?, to: :page
+    delegate :menu_title, :materialized_path, :draft?, :homepage?, to: :page
   end
 end

data/app/models/spina/page.rb

@@ -10,7 +10,9 @@ module Spina
     attr_accessor :old_path
 
     # Orphaned pages are adopted by parent pages if available, otherwise become root
-    has_ancestry orphan_strategy: :adopt
+    has_ancestry orphan_strategy: :adopt,
+                 counter_cache: :ancestry_children_count,
+                 cache_depth: true
 
     # Pages can belong to navigations (optional)
     has_many :navigation_items, dependent: :destroy

data/app/models/spina/parts/page_link.rb

@@ -0,0 +1,13 @@
+module Spina
+  module Parts
+    class PageLink < Base
+      attr_json :page_id, :integer, default: nil
+      
+      attr_accessor :options
+
+      def content
+        Page.live.find_by(id: page_id)
+      end
+    end
+  end
+end

data/app/models/spina/user.rb

@@ -16,7 +16,7 @@ module Spina
       name
     end
 
-    def reset_passord!
+    def reset_password!
       regenerate_password_reset_token
       self.password_reset_sent_at = Time.current
       save!

data/app/views/spina/admin/attachments/index.html.erb

@@ -27,7 +27,13 @@
   <% end %>
 <% end %>
 
-<div class="my-8 border-t border-gray-200">
+<div class="px-8 mt-4 flex items-center justify-end">
+  <%= form_with method: :get, url: spina.admin_attachments_path, data: {controller: "form", turbo_frame: "attachments"} do |f| %>
+    <%= render Spina::Forms::SearchComponent.new(f, :query) %>
+  <% end %>
+</div>
+
+<div class="my-4 border-t border-gray-200">
   
   <div data-controller="infinite-scroll">
     <%= turbo_frame_tag "attachments" do %>

data/app/views/spina/admin/images/index.html.erb

@@ -41,7 +41,14 @@
   <% end %>
 <% end %>
 
-<div class="my-8 border-t border-gray-200">
+<div class="px-8 mt-4 flex items-center justify-end">
+  <%= form_with method: :get, url: spina.admin_images_path, data: {controller: "form", turbo_frame: "images"} do |f| %>
+    <%= f.hidden_field :media_folder_id, value: @media_folder&.id %>
+    <%= render Spina::Forms::SearchComponent.new(f, :query) %>
+  <% end %>
+</div>
+
+<div class="my-4 border-t border-gray-200">  
   <% if @media_folder.present? %>
     <div class="flex items-center h-12 hover:bg-white border-b border-gray-200 px-8">
       <%= link_to spina.admin_images_path, class: 'flex h-full items-center flex-1' do %>

data/app/views/spina/admin/page_select_options/index.html.erb

@@ -0,0 +1,21 @@
+<%= turbo_frame_tag "page_select_options_#{params[:object_id]}" do %>
+  <% if params[:search].blank? %>
+    <button type="button" data-action="page-select#clear reveal#hide" class="block hover:bg-gray-100 w-full text-left px-5 py-2 font-medium leading-5 text-gray-700 hover:text-gray-900 text-sm border-t border-gray-150">
+      –
+    </button>
+  <% end %>
+  
+  <% @pages.each do |page| %>
+    <button type="button" data-action="page-select#select reveal#hide" data-title="<%= page.title %>" data-id="<%= page.id %>" class="block hover:bg-gray-100 w-full text-left px-5 py-2 font-medium leading-5 text-gray-700 hover:text-gray-900 text-sm border-t border-gray-150">
+      <%= page.title %>
+      <% if page.draft? %>
+        <span class="font-normal text-gray-400">
+          (<%=t "spina.pages.concept" %>)
+        </span>
+      <% end %>
+      <div class="text-xs font-normal text-gray-400">
+        <%= page.materialized_path %>
+      </div>
+    </button>
+  <% end %>
+<% end %>

data/app/views/spina/admin/page_select_options/show.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag :page_title do %>
+  <%= @page.title %>
+<% end %>

data/app/views/spina/admin/pages/children.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag "page_#{@page.id}_children" do %>
+  <%= render Spina::Pages::ListComponent.new(pages: @children, sortable: params[:sortable] == "true", draggable: params[:draggable] == "true") %>
+<% end %>

data/app/views/spina/admin/parts/multi_lines/_form.html.erb

@@ -1,4 +1,7 @@
 <div class="mt-6">
   <label for="content" class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
-  <%= f.text_area :content, placeholder: f.object.title, class: "form-input mt-1 w-full" %>
+  <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
+  <div class="mt-1">
+    <%= f.text_area :content, placeholder: f.object.title, class: "form-input mt-1 w-full" %>
+  </div>
 </div>

data/app/views/spina/admin/parts/page_links/_form.html.erb

@@ -0,0 +1,36 @@
+<div class="mt-6">
+  <label class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
+  <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
+
+  <div data-controller="page-select reveal" data-placeholder="<%=t "spina.pages.select_page" %>" class="relative mt-1" data-reveal-away-value>
+    <%= f.hidden_field :page_id, data: {page_select_target: "input"} %>
+    
+    <button type="button" class="btn btn-default px-3 inline-flex items-center text-sm font-medium" data-action="reveal#toggle page-select#autofocus">
+      <%= heroicon("link", style: :mini, class: "w-4 h-4 mr-1 text-gray-600") %>
+      <div data-page-select-target="label">
+        <% if f.object.page_id.present? %>
+          <%= turbo_frame_tag :page_title, src: spina.admin_page_select_option_path(f.object.page_id) %>
+        <% end %>
+      </div>
+    </button>
+     
+    <div class="relative mt-1">
+      <div data-reveal data-transition hidden class="absolute shadow-lg border border-gray-200 origin-top-right rounded-md z-10 top-0">
+        <div class="rounded-md bg-white shadow-xs">
+          <%= form_with url: spina.search_admin_page_select_options_path, data: {turbo_frame: "page_select_options_#{f.object.object_id}", controller: "form", debounce_time: 100} do |ff| %>
+            <%= ff.hidden_field :object_id, value: f.object.object_id %>
+            <%= ff.hidden_field :resource, value: f.object.options&.dig(:resource) %>
+            <div class="p-2">
+              <%= ff.search_field :search, placeholder: t("spina.search"), class: "form-input sticky top-0 text-sm w-80", data: {action: "input->form#submit focus->form#submit", page_select_target: "search"} %>
+            </div>
+          <% end %>
+          
+          <div class="overflow-scroll max-h-80">
+            <%= turbo_frame_tag "page_select_options_#{f.object.object_id}" do %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>