maglevcms 1.8.0 → 2.0.0.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5f367edf49a70fcab89dd3906037a4d7e1b4711c50fd9a5b255f526f78262ec
-  data.tar.gz: e041ca5f4be377ba43ab62b8ac86835e6c2cb4079e77274a50966b231a41098d
+  metadata.gz: 82bc9958b22dec5a92e3f9e3fab438418f666479d868e9196c6c96fe350d082c
+  data.tar.gz: 975cf8a2f8b11ce2c2f3cfad7c38ba7db2c7ab351d1e5a83a1f563e903a9def2
 SHA512:
-  metadata.gz: 12e159b397754772159e3dfa9531d3cb147b7b73d2f0006452acce3f34aec256a9f66cbbcc5d054c2518dc6bcc476af5f382965835806255a4769426bfe4d1fe
-  data.tar.gz: 6837950bdf76d44df4a2ede9a4c417010714631a03b7cab000edb5ff5e8c194f913c82281915361c20680ed6bc84c1ab9799fb02efb6f137a5e734980cb8264d
+  metadata.gz: 8a5ec523921178fdbecbec37ff7ddccab1fc9f1e26fd6d1fd270b7bf231ab28af1b111a7ecfc71b132abdce46f39ff785bc6630d6c98925c106bc266c6432037
+  data.tar.gz: 52b7d06da150eb80b06ec8006fa5960f8e77543cd7d054786a19d4875fed86b50946e2820567b402455df561b25fb1302e5e3a7be1adfa7b8f4b8b8d75dad417

data/README.md

@@ -2,12 +2,12 @@
 
 [![Build Status](https://github.com/maglevhq/maglev-core/actions/workflows/verify.yml/badge.svg)](https://github.com/maglevhq/maglev-core/actions/workflows/verify.yml)
 
-MaglevCMS is a website builder / CMS that you can plug in any Ruby on Rails 6+ application.
+MaglevCMS is a website builder/CMS that you can integrate into any Ruby on Rails application from version 7 up to version 8.
 
 ## Demo
 
-Check out our [MaglevCMS PRO demo](https://demo-pro.maglev.dev) to see MaglevCMS in action.\
-This demo showcases the full capabilities of MaglevCMS, including advanced features available in the PRO version.
+Check out our [MaglevCMS Saas Edition demo](https://demo-pro.maglev.dev) to see MaglevCMS in action.\
+This demo showcases the full capabilities of MaglevCMS, including advanced features available in the SaaS version.
 
 
 ## Getting started / Documentation
@@ -17,7 +17,7 @@ This demo showcases the full capabilities of MaglevCMS, including advanced featu
 
 ## Interested in more power for your Rails SaaS?
 
-If you're a Rails SaaS owner looking to offer advanced page-building and customization features to your clients, check out [MaglevCMS PRO](https://pro.maglev.dev). With MaglevCMS PRO, you get premium tools, enhanced customization options, and dedicated support to take your platform to the next level.\
+If you're a Rails SaaS owner looking to offer advanced page-building and customization features to your clients, check out [MaglevCMS Saas Edition](https://www.maglev.dev/saas-edition). With MaglevCMS SaaS Edition, you get premium tools, enhanced customization options, and dedicated support to take your platform to the next level.\
 Explore the full potential of MaglevCMS and see how it can transform your SaaS business.
 
 ## Testing

data/Rakefile

@@ -20,8 +20,9 @@ require 'vite_ruby'
 ViteRuby.install_tasks
 ViteRuby.config.root # Ensure the engine is set as the root.
 
-rakefile_path = Rails::VERSION::MAJOR >= 8 ? 'spec/dummy/Rakefile' : 'spec/legacy_dummy/Rakefile'
+rakefile_path = !defined?(Rails) || Rails::VERSION::MAJOR >= 8 ? 'spec/dummy/Rakefile' : 'spec/legacy_dummy/Rakefile'
 APP_RAKEFILE = File.expand_path(rakefile_path, __dir__)
+
 load 'rails/tasks/engine.rake'
 load 'rails/tasks/statistics.rake'
 

data/app/components/maglev/block_component.rb

@@ -5,7 +5,7 @@ module Maglev
     include TagHelper
 
     extend Forwardable
-    def_delegators :section, :site, :config
+    def_delegators :section, :site, :page, :config
 
     attr_reader :section, :id, :name, :type, :settings, :attributes, :definition
     attr_accessor :children

data/app/components/maglev/content/base.rb

@@ -6,7 +6,7 @@ module Maglev
       include ::Maglev::Inspector
 
       extend Forwardable
-      def_delegators :scope, :site, :config
+      def_delegators :scope, :site, :config, :page
 
       attr_accessor :scope, :content, :setting
 

data/app/components/maglev/content/link.rb

@@ -23,6 +23,10 @@ module Maglev
         open_new_window? ? '_blank' : nil
       end
 
+      def active?
+        link[:link_type] == 'page' && link[:link_id] == page.id
+      end
+
       def to_s
         href
       end

data/app/components/maglev/section_component.rb

@@ -5,7 +5,7 @@ module Maglev
     include TagHelper
 
     extend Forwardable
-    def_delegators :parent, :site, :config
+    def_delegators :parent, :site, :page, :config
 
     attr_reader :parent, :id, :type, :settings, :attributes, :definition, :templates_root_path, :rendering_mode
 
@@ -97,7 +97,7 @@ module Maglev
     end
 
     def handle_error(exception)
-      throw exception if %i[live section].include?(rendering_mode) || Rails.env.test?
+      raise exception if %i[live section].include?(rendering_mode) || Rails.env.test?
 
       Rails.logger.error [
         "⚠️  [Maglev] Error when rendering a \"#{type}\" type section ⚠️",

data/app/controllers/concerns/maglev/fetchers_concern.rb

@@ -48,7 +48,9 @@ module Maglev
     end
 
     def fetch_maglev_theme_layout
-      @fetch_maglev_theme_layout ||= maglev_services.fetch_theme_layout.call
+      @fetch_maglev_theme_layout ||= maglev_services.fetch_theme_layout.call(
+        page: fetch_maglev_page
+      )
     end
 
     def fetch_maglev_sections_path

data/app/controllers/concerns/maglev/resource_id_concern.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Maglev
+  module ResourceIdConcern
+    def resource_id
+      # A standard UUID code contains 32 hex digits along with 4 "-"" symbols
+      Maglev.uuid_as_primary_key? && params[:id] ? params[:id][0..35] : params[:id]
+    end
+  end
+end

data/app/controllers/concerns/maglev/standalone_sections_concern.rb

@@ -10,6 +10,12 @@ module Maglev
       include Maglev::ContentLocaleConcern
 
       helper Maglev::PagePreviewHelper
+
+      private
+
+      def maglev_rendering_mode
+        params[:rendering_mode] || super
+      end
     end
 
     private

data/app/controllers/concerns/maglev/{ui_locale_concern.rb → user_interface_locale_concern.rb}

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Maglev
-  module UiLocaleConcern
+  module UserInterfaceLocaleConcern
     extend ActiveSupport::Concern
 
     included do

data/app/controllers/maglev/api/collection_items_controller.rb

@@ -9,6 +9,13 @@ module Maglev
           keyword: params[:q]
         )
       end
+
+      def show
+        @item = services.fetch_collection_items.call(
+          collection_id: params[:collection_id],
+          id: params[:id]
+        )
+      end
     end
   end
 end

data/app/controllers/maglev/api/page_clones_controller.rb

@@ -4,8 +4,7 @@ module Maglev
   module Api
     class PageClonesController < ::Maglev::ApiController
       def create
-        page = clone_page(resources.find(params[:page_id]))
-        head :created, location: api_page_path(page)
+        @page = clone_page(resources.find(params[:page_id]))
       end
 
       private

data/app/controllers/maglev/api_controller.rb

@@ -3,7 +3,7 @@
 module Maglev
   class ApiController < ::Maglev::ApplicationController
     include Maglev::JsonConcern
-    include Maglev::UiLocaleConcern
+    include Maglev::UserInterfaceLocaleConcern
     include Maglev::ContentLocaleConcern
 
     before_action :authenticate

data/app/controllers/maglev/application_controller.rb

@@ -3,6 +3,7 @@
 module Maglev
   class ApplicationController < ::ApplicationController
     include Maglev::ServicesConcern
+    include Maglev::ResourceIdConcern
 
     protect_from_forgery with: :exception
 
@@ -13,10 +14,5 @@ module Maglev
     def use_engine_vite?
       true
     end
-
-    def resource_id
-      # A standard UUID code contains 32 hex digits along with 4 "-"" symbols
-      Maglev.uuid_as_primary_key? && params[:id] ? params[:id][0..35] : params[:id]
-    end
   end
 end

data/app/controllers/maglev/assets/active_storage_proxy_controller.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Assets
+    class ActiveStorageProxyController < ::ActiveStorage::Blobs::ProxyController
+      include Maglev::ResourceIdConcern
+
+      private
+
+      def set_blob
+        @blob = Maglev::Asset.find(resource_id).file
+      rescue ActiveRecord::RecordNotFound
+        head :not_found
+      end
+    end
+  end
+end

data/app/controllers/maglev/assets/proxy_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Assets
+    class ProxyController < ApplicationController
+      def show
+        @asset = Maglev::Asset.find(resource_id)
+        send_data @asset.download, filename: @asset.filename, type: @asset.content_type
+        response.headers['Cache-Control'] = cache_control_header
+      end
+
+      private
+
+      def cache_control_header
+        # Rails 8+ uses :'cache-control' and Rails 7.x uses :'Cache-Control'
+        Rails.configuration.public_file_server.headers[:'cache-control'] ||
+          Rails.configuration.public_file_server.headers[:'Cache-Control']
+      end
+    end
+  end
+end

data/app/controllers/maglev/editor_controller.rb

@@ -5,7 +5,7 @@ module Maglev
     include Maglev::AuthenticationConcern
     include Maglev::FetchersConcern
     include Maglev::BackActionConcern
-    include Maglev::UiLocaleConcern
+    include Maglev::UserInterfaceLocaleConcern
     include Maglev::ContentLocaleConcern
 
     before_action :fetch_maglev_site, only: :show

data/app/controllers/maglev/page_preview_controller.rb

@@ -7,7 +7,7 @@ module Maglev
     include Maglev::ContentLocaleConcern
 
     before_action :fetch_maglev_site
-    before_action :extract_content_locale
+    around_action :extract_content_locale
 
     def index
       render_maglev_page
@@ -43,9 +43,9 @@ module Maglev
       false
     end
 
-    def extract_content_locale
+    def extract_content_locale(&block)
       _, locale = maglev_services.extract_locale.call(params: params, locales: maglev_site.locale_prefixes)
-      ::I18n.locale = locale
+      ::I18n.with_locale(locale, &block)
     end
 
     def fallback_to_default_locale

data/app/frontend/admin/controllers/screenshot_controller.js

@@ -2,7 +2,7 @@ import { Controller } from 'stimulus'
 import axios from '../utils/axios'
 
 export default class extends Controller {
-  static targets = ['source', 'output']
+  static targets = ['source', 'output', 'fileInput']
   static values = { url: String }
 
   connect() {
@@ -38,4 +38,32 @@ export default class extends Controller {
           .catch((error) => console.log('ERROR!', error))
       })
   }
+
+  triggerFileInput() {
+    this.fileInputTarget.click()
+  }
+
+  handleFileUpload(event) {
+    const file = event.target.files[0]
+    if (!file) return
+
+    const reader = new FileReader()
+    reader.onload = () => {
+      const base64Image = reader.result
+      this.outputTarget.src = base64Image
+      
+      axios
+        .post(this.urlValue, {
+          screenshot: { base64_image: base64Image },
+        })
+        .then(() => {
+          alert('Screenshot uploaded!')
+        })
+        .catch((error) => console.log('ERROR!', error))
+    }
+    reader.readAsDataURL(file)
+
+    // Clear the input so the same file can be selected again
+    event.target.value = ''
+  }
 }

data/app/frontend/editor/assets/remixicons/clipboard-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 4V2H17V4H20.0066C20.5552 4 21 4.44495 21 4.9934V21.0066C21 21.5552 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5551 3 21.0066V4.9934C3 4.44476 3.44495 4 3.9934 4H7ZM7 6H5V20H19V6H17V8H7V6ZM9 4V6H15V4H9Z"></path></svg>

data/app/frontend/editor/assets/remixicons/ri-draggable.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8.5 7C9.32843 7 10 6.32843 10 5.5C10 4.67157 9.32843 4 8.5 4C7.67157 4 7 4.67157 7 5.5C7 6.32843 7.67157 7 8.5 7ZM8.5 13.5C9.32843 13.5 10 12.8284 10 12C10 11.1716 9.32843 10.5 8.5 10.5C7.67157 10.5 7 11.1716 7 12C7 12.8284 7.67157 13.5 8.5 13.5ZM10 18.5C10 19.3284 9.32843 20 8.5 20C7.67157 20 7 19.3284 7 18.5C7 17.6716 7.67157 17 8.5 17C9.32843 17 10 17.6716 10 18.5ZM15.5 7C16.3284 7 17 6.32843 17 5.5C17 4.67157 16.3284 4 15.5 4C14.6716 4 14 4.67157 14 5.5C14 6.32843 14.6716 7 15.5 7ZM17 12C17 12.8284 16.3284 13.5 15.5 13.5C14.6716 13.5 14 12.8284 14 12C14 11.1716 14.6716 10.5 15.5 10.5C16.3284 10.5 17 11.1716 17 12ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z"></path></svg>

data/app/frontend/editor/assets/remixicons/ri-folders-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 7V4C6 3.44772 6.44772 3 7 3H13.4142L15.4142 5H21C21.5523 5 22 5.44772 22 6V16C22 16.5523 21.5523 17 21 17H18V20C18 20.5523 17.5523 21 17 21H3C2.44772 21 2 20.5523 2 20V8C2 7.44772 2.44772 7 3 7H6ZM6 9H4V19H16V17H6V9ZM8 5V15H20V7H14.5858L12.5858 5H8Z"></path></svg>

data/app/frontend/editor/assets/remixicons/ri-more-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10ZM19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"></path></svg>

data/app/frontend/editor/assets/remixicons/ri-shadow-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 2C2.44772 2 2 2.44772 2 3V17C2 17.5523 2.44772 18 3 18H6V21C6 21.5523 6.44772 22 7 22H21C21.5523 22 22 21.5523 22 21V7C22 6.44772 21.5523 6 21 6H18V3C18 2.44772 17.5523 2 17 2H3ZM18 11.5607L20 13.5607V16.4393L18 14.4393V11.5607ZM18 9.43934V8H20V11.4393L18 9.43934ZM18 17V16.5607L20 18.5607V20H18.5607L16.5607 18H17C17.5523 18 18 17.5523 18 17ZM14.4393 18L16.4393 20H13.5607L11.5607 18H14.4393ZM9.43934 18L11.4393 20H8V18H9.43934ZM4 16V4H16V16H4Z"></path></svg>

data/app/frontend/editor/components/errors/forbidden.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="pt-8 pb-4">
+    <p class="text-gray-600 text-justify">
+      {{ $t('errorModals.forbidden.message') }}
+    </p>
+
+    <div class="mt-4 text-center">
+      <button class="big-submit-button bg-editor-primary" @click="close">
+        {{ $t('errorModals.forbidden.button') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ForbiddenError',
+  methods: {
+    close() {
+      this.closeModal()
+    },
+  },
+}
+</script>

data/app/frontend/editor/components/errors/stale-record.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="pt-8 pb-4">
+  <div class="pt-8 pb-4 space-y-4">
     <p class="text-gray-600 text-justify">
       {{ $t('errorModals.staleRecord.message') }}
     </p>
 
-    <div class="mt-8 text-center">
+    <div class="text-center">
       <button class="big-submit-button bg-editor-primary" @click="reloadPage">
         {{ $t('errorModals.staleRecord.button') }}
       </button>

data/app/frontend/editor/components/header-nav/device-toggler.vue

@@ -5,9 +5,12 @@
       :key="icon.device"
       :name="icon.name"
       :color="icon.color"
-      class="cursor-pointer"
-      :class="{ 'mx-2': index === 1 }"
-      size="1.5rem"
+      class="cursor-pointer hover:bg-editor-primary hover:bg-opacity-5 px-2"
+      :class="{ 
+        'mx-1': index === 1,
+        'bg-editor-primary bg-opacity-5': device === icon.device
+      }"
+      size="2.5rem"
       @click.native="setDevice(icon.device)"
     />
   </div>

data/app/frontend/editor/components/header-nav/index.vue

@@ -7,54 +7,26 @@
       <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
       <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
     </div>
-    <div class="flex justify-between h-full w-full" v-else>
-      <div class="flex">
-        <router-link
-          :to="{ name: 'listPages' }"
-          class="flex items-center py-4 px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
-          :class="{
-            'bg-white': !isListPagesActive,
-            'bg-editor-primary bg-opacity-5': isListPagesActive,
-          }"
-        >
-          <span>{{ $t('headerNav.pages') }}</span>
-          <uikit-page-icon class="ml-4" :page="currentPage" />
-          <span class="ml-2">{{ currentPage.title }}</span>
-          <uikit-icon name="arrow-down-s-line" class="ml-3" />
-        </router-link>
-
-        <separator />
-
-        <router-link
-          :to="{ name: 'editPageSettings' }"
-          class="flex items-center py-4 px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
-          :class="{
-            'bg-white': !isEditPageActive,
-            'bg-editor-primary bg-opacity-5': isEditPageActive,
-          }"
-        >
-          <uikit-icon name="settings-4-line" size="1.25rem" />
-          <span class="ml-2">{{ $t('headerNav.pageSettings') }}</span>
-        </router-link>
-
-        <separator />
+    <div class="grid grid-cols-5 h-full w-full" v-else>
+      <div class="col-span-3 lg:col-span-2">
+        <page-info />
       </div>
 
-      <div class="flex">
-        <div class="flex py-4 px-6">
-          <device-toggler />
-        </div>
-        <separator />
+      <div class="col-span-1 hidden lg:flex justify-center">
+        <device-toggler />
+      </div>
 
+      <div class="col-span-2 flex justify-end h-full">
         <div class="flex h-full relative" v-if="hasMultipleLocales">
           <locale-toggler />
         </div>
         <separator v-if="hasMultipleLocales" />
 
         <preview-toggler v-if="isSitePublishable" />
-        <preview-button v-else />
+        <preview-button v-else class="hidden lg:flex" />
 
         <separator v-if="isSitePublishable" />
+        
         <div
           class="flex items-center h-full relative space-x-1 pr-4"
           v-if="isSitePublishable"
@@ -64,7 +36,7 @@
         </div>
 
         <div v-else>
-          <save-button :big="true" />
+          <save-button big />
         </div>
       </div>
     </div>
@@ -79,6 +51,7 @@ import PreviewToggler from './preview-toggler.vue'
 import PublishButton from './publish-button.vue'
 import SaveButton from './save-button.vue'
 import Separator from './separator.vue'
+import PageInfo from './page-info.vue'
 
 export default {
   name: 'HeaderNav',
@@ -90,6 +63,7 @@ export default {
     SaveButton,
     Separator,
     PreviewToggler,
+    PageInfo,
   },
   computed: {
     isLoading() {
@@ -97,10 +71,7 @@ export default {
     },
     isListPagesActive() {
       return this.$route.name === 'listPages'
-    },
-    isEditPageActive() {
-      return this.$route.name === 'editPageSettings'
-    },
+    },    
   },
 }
 </script>

data/app/frontend/editor/components/header-nav/locale-toggler/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <uikit-dropdown placement="bottom" ref="dropdown" class="h-full flex">
+    <uikit-dropdown placement="bottom" ref="dropdown" class="h-full flex" popoverClass="tooltip-menu">
       <template v-slot:button>
         <button
           class="h-full w-full px-6 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200 flex items-center focus:outline-none focus:none"

data/app/frontend/editor/components/header-nav/page-info.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="flex flex-row items-center h-full w-full px-4 overflow-hidden">
+    <div class="flex flex-col leading-none overflow-hidden">
+      <div class="flex items-center">
+        <uikit-page-icon :page="currentPage" size="1.1rem" class="shrink-0 text-gray-900" />
+        <div class="text-base font-semibold truncate ml-1 mr-3">{{ currentPage.title }}</div>
+
+        <page-actions-button 
+          :page="currentPage" 
+          compact
+          @on-clone="goToClonedPage"
+        />
+      </div>
+      <div class="text-xs text-gray-500 flex items-center space-x-1">
+        <p class="truncate text-gray-700">
+          <span class="text-gray-900 font-semibold">{{ currentPagePath[0] }}</span>{{ currentPagePath.slice(1) }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PageActionsButton from '../page/list/actions-button.vue'
+
+export default {
+  name: 'PageInfo',
+  components: {
+    PageActionsButton,
+  },
+  computed: {
+    ...mapGetters(['currentPagePath', 'currentPageUrl']),    
+  },
+  methods: {
+    goToClonedPage(page) {
+      this.$router.push({ name: 'editPage', params: { pageId: page.path } })
+    },
+  },
+}
+</script>

data/app/frontend/editor/components/header-nav/preview-button.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    :href="currentPage.previewUrl"
+    :href="currentPageUrl"
     target="_blank"
     class="px-6 flex items-center hover:bg-editor-primary/5 transition-colors duration-200"
   >
@@ -11,5 +11,10 @@
 <script>
 export default {
   name: 'PreviewButton',
+  computed: {
+    currentPageUrl() {
+      return this.currentPage.liveUrl
+    },
+  },
 }
 </script>

data/app/frontend/editor/components/header-nav/separator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full py-4 w-px">
+  <div class="h-full py-4 w-px shrink-0">
     <div class="h-full w-full bg-gray-300" />
   </div>
 </template>

data/app/frontend/editor/components/image-library/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div class="flex items-center" v-if="!hasNoImagesYet">
+  <div class="h-156 flex flex-col space-y-5">
+    <div class="flex items-center h-10" v-if="!hasNoImagesYet">
       <image-uploader
         :multiple="true"
         @uploaded="refresh"
@@ -12,34 +12,31 @@
         @search="search"
       />
     </div>
-    <div class="mt-5">
-      <div
-        class="overflow-y-auto h-128"
-        :class="{ invisible: images === null }"
-      >
-        <div class="mt-10 flex flex-col items-center" v-if="hasNoImagesYet">
-          <p class="text-center">{{ $t('imageLibrary.none') }}</p>
-          <image-uploader @uploaded="refresh" :multiple="true" class="mt-4" />
-        </div>
-        <transition :name="slideDirection" mode="out-in" v-else>
-          <image-list
-            :images="images"
-            :key="activePage"
-            :pickerMode="pickerMode"
-            v-on="$listeners"
-            @destroy="destroyImage"
-          />
-        </transition>
+    <div class="grow overflow-y-auto">
+      <div class="mt-10 flex flex-col items-center" v-if="hasNoImagesYet">
+        <p class="text-center">{{ $t('imageLibrary.none') }}</p>
+        <image-uploader @uploaded="refresh" :multiple="true" class="mt-4" />
       </div>
-      <uikit-pagination
-        labelI18nKey="imageLibrary.pagination.label"
-        noItemsI18nKey="imageLibrary.pagination.noItems"
-        :activePage="activePage"
-        :totalItems="totalItems"
-        :perPage="perPage"
-        @change="(page) => (this.activePage = page)"
-      />
+      <transition :name="slideDirection" mode="out-in" v-else>
+        <image-list
+          :images="images"
+          :key="activePage"
+          :pickerMode="pickerMode"
+          v-on="$listeners"
+          @destroy="destroyImage"
+        />
+      </transition>
     </div>
+    <uikit-pagination
+      class="shrink-0"
+      labelI18nKey="imageLibrary.pagination.label"
+      noItemsI18nKey=""
+      :activePage="activePage"
+      :totalItems="totalItems"
+      :perPage="perPage"
+      @change="(page) => (this.activePage = page)"
+      v-if="!hasNoImagesYet"
+    />
   </div>
 </template>
 
@@ -70,7 +67,7 @@ export default {
   },
   computed: {
     hasNoImagesYet() {
-      return this.isBlank(this.images) && this.query === null && !this.loading
+      return this.isBlank(this.images) && this.query === null
     },
   },
   methods: {