maglevcms 1.8.0 → 2.0.0.beta1

data/app/frontend/editor/components/kit/collection-item-input.vue

@@ -66,5 +66,14 @@ export default {
       },
     },
   },
+  watch: {
+    value: {
+      async handler(value) {
+        if (value === 'any')
+          this.selectedCollectionItem = await this.services.collectionItem.findOne(this.collectionId, 'any')
+      },
+      immediate: true,
+    },
+  }
 }
 </script>

data/app/frontend/editor/components/kit/copy-paste-button.vue

@@ -0,0 +1,26 @@
+<template>
+  <button @click.stop.prevent="copyToClipboard">
+    <uikit-icon name="clipboard-line" size="0.75rem" v-if="!copied" class="text-gray-500 hover:text-gray-900 transition-colors duration-200" />
+    <uikit-icon name="ri-check-line" size="0.75rem" class="text-green-500" v-else />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'CopyPasteButton',
+  props: {
+    textToCopy: { type: String, required: true },
+  },
+  data() {
+    return { copied: false }
+  },
+  methods: {
+    copyToClipboard() {
+      this.copied = true
+      navigator.clipboard.writeText(this.textToCopy)
+      const timeout = setTimeout((() => { this.copied = false }).bind(this), 2000)
+      this.$once('hook:beforeDestroy', () => clearTimeout(timeout))
+    },
+  },
+}
+</script>

data/app/frontend/editor/components/kit/dropdown.vue

@@ -6,6 +6,7 @@
     :placement="placement"
     class="flex"
     v-on:auto-hide="close"
+    :popoverClass="popoverClass"
   >
     <div
       class="z-10 relative flex items-center focus:outline-none select-none cursor-pointer w-full"
@@ -32,6 +33,10 @@ export default {
       validator: (value) =>
         ['top', 'bottom', 'right', 'left'].indexOf(value) !== -1,
     },
+    popoverClass: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {

data/app/frontend/editor/components/kit/icon-button.vue

@@ -0,0 +1,24 @@
+<template>
+  <button
+    class="h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200"
+    :class="{ 
+      'bg-gray-600 text-gray-200 hover:bg-gray-900 hover:text-gray-100': dark, 
+      'bg-gray-600 bg-opacity-0 hover:text-gray-900 text-gray-800 hover:bg-opacity-10': !dark 
+    }"
+    v-on="$listeners"
+    v-bind="$attrs"
+  >
+    <uikit-icon :name="iconName" size="1.15rem" />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'UIKitIconButton',
+  inheritAttrs: false,
+  props: {
+    iconName: { type: String, required: true },
+    dark: { type: Boolean, default: false },
+  },
+}
+</script>

data/app/frontend/editor/components/kit/icon.vue

@@ -28,9 +28,8 @@ export default {
   },
   computed: {
     icon() {
-      return defineAsyncComponent(() =>
-        this.icons[`../../assets/${this.library}/${this.name}.svg`](),
-      )
+      const path = `../../assets/${this.library}/${this.name}.svg`
+      return defineAsyncComponent(() => this.icons[path]())      
     },
   },
 }

data/app/frontend/editor/components/kit/index.js

@@ -8,6 +8,7 @@ import Accordion from './accordion.vue'
 import Dropdown from './dropdown.vue'
 import ConfirmationButton from './confirmation-button.vue'
 import SubmitButton from './submit-button.vue'
+import CopyPasteButton from './copy-paste-button.vue'
 import ImageInput from './image-input.vue'
 import IconInput from './icon-input.vue'
 import LinkInput from './link-input.vue'
@@ -22,9 +23,9 @@ import PageIcon from './page-icon.vue'
 import ColorInput from './color-input.vue'
 import SimpleSelect from './simple-select.vue'
 import CollectionItemInput from './collection-item-input.vue'
-import ListItemButton from './list-item-button.vue'
 import Divider from './divider.vue'
 import Hint from './hint.vue'
+import IconButton from './icon-button.vue'
 
 Vue.component('v-popoper', VPopover)
 Vue.component('uikit-icon', Icon)
@@ -49,6 +50,7 @@ Vue.component('uikit-page-icon', PageIcon)
 Vue.component('uikit-color-input', ColorInput)
 Vue.component('uikit-simple-select', SimpleSelect)
 Vue.component('uikit-collection-item-input', CollectionItemInput)
-Vue.component('uikit-list-item-button', ListItemButton)
 Vue.component('uikit-divider', Divider)
 Vue.component('uikit-hint', Hint)
+Vue.component('uikit-icon-button', IconButton)
+Vue.component('uikit-copy-paste-button', CopyPasteButton)

data/app/frontend/editor/components/kit/link-input.vue

@@ -110,7 +110,7 @@ export default {
       this.openModal({
         title: this.$t('linkPicker.title'),
         component: LinkPicker,
-        props: { currentLink: this.value },
+        props: { currentLink: this.value, modalClass: 'h-144 w-120' },
         listeners: {
           select: (link) => this.setLink(link),
         },

data/app/frontend/editor/components/kit/modal.vue

@@ -14,7 +14,7 @@
               type="button"
               @click="$emit('on-close', true)"
             >
-              <uikit-icon name="ri-close-circle-line" />
+              <uikit-icon-button iconName="ri-close-line" class="relative -right-2" />
             </button>
           </div>
 

data/app/frontend/editor/components/kit/page-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <uikit-icon :name="iconName" />
+  <uikit-icon :name="iconName" :size="size" />
 </template>
 
 <script>

data/app/frontend/editor/components/kit/rich-text-input/link-buttons.vue

@@ -77,7 +77,7 @@ export default {
       this.openModal({
         title: this.$t('linkPicker.insertTitle'),
         component: LinkPicker,
-        props: { currentLink: this.sanitizeLink(), mode: 'insert' },
+        props: { currentLink: this.sanitizeLink(), mode: 'insert', modalClass: 'h-144 w-120' },
         listeners: {
           select: (link) => this.setLink(link),
         },

data/app/frontend/editor/components/kit/select-input.vue

@@ -45,7 +45,7 @@
         </div>
       </button>
       <div
-        class="absolute w-full z-10 -mt-1 rounded-b shadow-sm bg-gray-100"
+        class="absolute w-full z-20 -mt-1 rounded-b shadow-sm bg-gray-100"
         @keydown="naviguate"
         v-if="isOpen"
       >
@@ -57,6 +57,7 @@
             v-model="q"
             :placeholder="searchPlaceholder"
             ref="input"
+            autocomplete="off"
           />
         </div>
 
@@ -64,7 +65,7 @@
           {{ emptyLabel }}
         </div>
 
-        <div v-if="list">
+        <div v-if="list" :class="listClass">
           <div
             v-for="(item, index) in list"
             :key="item.id"
@@ -106,6 +107,7 @@ export default {
     clearEnabled: { type: Boolean, default: false },
     withLabel: { type: Boolean, default: true },
     buttonClass: { type: [Object, String], default: () => ({}) },
+    listClass: { type: [Object, String], default: () => ({}) },
   },
   data() {
     return {

data/app/frontend/editor/components/link-picker/actions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-10 flex flex-col">
+  <div class="mt-10 flex flex-col px-1">
     <button
       class="big-submit-button bg-editor-primary"
       type="button"

data/app/frontend/editor/components/link-picker/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-4">
+  <div class="flex flex-col h-full">
     <uikit-tabs
       :tabs="tabs"
       :firstIndex="firstTabIndex"

data/app/frontend/editor/components/link-picker/page.vue

@@ -8,6 +8,7 @@
       :emptyLabel="$t(`linkPicker.page.input.emptyLabel`)"
       :fetchList="(q) => services.page.findAll({ q })"
       v-model="page"
+      listClass="overflow-y-scroll h-48"
     >
       <template v-slot:value>
         {{ page.title }}
@@ -33,6 +34,7 @@
         :fetchList="() => fetchPageSectionNames()"
         :clearEnabled="true"
         v-model="pageSection"
+        listClass="overflow-y-scroll h-48"
       >
         <template v-slot:value>
           {{ pageSection.name }}

data/app/frontend/editor/components/page/form/main.vue

@@ -11,7 +11,7 @@
       :label="$t(`page.form.path`)"
       name="path"
       v-model="pathInput"
-      :error="errors.path || errors.pathsValue"
+      :error="errors.path || errors['paths.value'] || errors['pathsValue']"
       v-if="!isPageIndex || !page.id"
     />
 

data/app/frontend/editor/components/page/list/actions-button.vue

@@ -0,0 +1,159 @@
+<template>
+  <uikit-dropdown v-on="$listeners" popoverClass="tooltip-menu" ref="dropdown">
+    <template v-slot:button>
+      <uikit-icon-button :iconName="compact ? 'ri-more-fill' : 'ri-more-2-fill'" class="shrink-0" />
+    </template>
+    <template v-slot:content>
+      <div class="flex flex-col w-48 text-gray-800">
+        <button
+          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
+          @click.stop="editPage"
+        >
+          <uikit-icon name="ri-settings-5-line" />
+          <span class="ml-2 whitespace-nowrap">{{
+            $t('page.actions.edit')
+          }}</span>
+        </button>
+        <button
+          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
+          @click.stop="clonePage"
+        >
+          <uikit-icon name="ri-shadow-line" />
+          <span class="ml-2">{{ $t('page.actions.clone') }}</span>
+        </button>
+        <button
+          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
+          @click.stop="hidePage"
+          v-if="!compact &&isVisible"
+        >
+          <uikit-icon name="ri-eye-off-line" />
+          <span class="ml-2">{{ $t('page.actions.hide') }}</span>
+        </button>
+
+        <button
+          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
+          @click.stop="showPage"
+          v-if="!compact && !isVisible"
+        >
+          <uikit-icon name="ri-eye-line" />
+          <span class="ml-2">{{ $t('page.actions.show') }}</span>
+        </button>
+
+        <button
+          class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
+          :class="{ 'text-green-500': copied }"
+          @click.stop="copyUrlToClipboard"
+        >
+          <uikit-icon name="clipboard-line" v-if="!copied" />
+          <uikit-icon name="ri-check-line" v-else />
+          <span class="ml-2" v-if="!copied">{{ $t('page.actions.copyUrlToClipboard') }}</span>
+          <span class="ml-2" v-else>{{ $t('page.actions.copyUrlToClipboardSuccess') }}</span>
+        </button>
+
+        <uikit-confirmation-button
+          @confirm="deletePage"
+          ref="deleteDropdown"
+          v-if="!isIndexPage"
+        >
+          <button
+            class="flex items-center w-full px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
+          >
+            <uikit-icon name="delete-bin-line" />
+            <span class="ml-2">{{ $t('page.actions.delete') }}</span>
+          </button>
+        </uikit-confirmation-button>
+      </div>
+    </template>
+  </uikit-dropdown>    
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import EditPageModal from '@/components/page/edit.vue'
+
+export default {
+  name: 'PageActionsButton',
+  props: {
+    page: { type: Object, required: true },
+    compact: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      copied: false,
+    }
+  },
+  computed: {
+    ...mapGetters(['currentPageUrl']),    
+    isIndexPage() {
+      return this.services.page.isIndex(this.page)
+    },
+    isCurrentPage() {
+      return this.currentPage.id === this.page.id
+    },
+    isVisible() {
+      return this.page.visible
+    },
+  },
+  methods: {
+    copyUrlToClipboard() {
+      this.copied = true
+      navigator.clipboard.writeText(this.currentPageUrl)
+      const timeout = setTimeout((() => { this.copied = false }).bind(this), 2000)
+      this.$once('hook:beforeDestroy', () => clearTimeout(timeout))
+    },
+    editPage() {
+      this.$refs.dropdown.close()
+      if (!this.compact) {
+        this.openEditPageModal()
+      } else if (this.$route.name !== 'editPageSettings') {        
+        this.$router.push({ name: 'editPageSettings' })
+      }
+    },
+    openEditPageModal() {
+      this.openModal({
+        title: this.$t('page.edit.title'),
+        component: EditPageModal,
+        closeOnClick: false,
+        props: {
+          page: this.page,
+          insideModal: true,
+          modalClass: 'w-120 h-144',
+        },
+        listeners: {
+          'on-update': (editedPage) => this.onUpdate(editedPage),
+        },
+      })
+    },
+    onUpdate(editedPage) {
+      this.closeDropdown()
+      if (this.isCurrentPage) this.setCurrentPageSettings(editedPage)
+      this.$emit('on-update')
+    },
+    clonePage() {
+      this.services.page.clone(this.page.id).then(page => this.$emit('on-clone', page))
+    },
+    showPage() {
+      this.services.page
+        .setVisible(this.page.id, true)
+        .then(() => this.$emit('on-update'))
+    },
+    hidePage() {
+      this.services.page
+        .setVisible(this.page.id, false)
+        .then(() => this.$emit('on-update'))
+    },
+    deletePage() {
+      this.closeDropdown()
+      this.services.page.destroy(this.page.id).then(() => {
+        this.$emit('on-delete')
+        if (this.isCurrentPage)
+          this.$router.push({ name: 'editPage', params: { pageId: 'index' } })
+      })
+    },
+    closeDropdown() {
+      if (!this.$refs.deleteDropdown) return
+      this.$refs.deleteDropdown.close()
+    },
+  }
+}
+</script>

data/app/frontend/editor/components/page/list/index.vue

@@ -1,28 +1,19 @@
 <template>
   <div>
-    <transition name="fade" mode="out-in">
-      <div key="list-placeholder" v-if="isLoading">
-        <div class="flex flex-col items-center w-full animate-pulse">
-          <div class="h-12 bg-gray-200 rounded w-full mb-3"></div>
-          <div class="h-12 bg-gray-200 rounded w-full mb-3"></div>
-          <div class="h-12 bg-gray-200 rounded w-full mb-3"></div>
-        </div>
-      </div>
-      <div key="empty-list" class="pt-4 text-center" v-else-if="isEmpty">
-        No pages found
-      </div>
-      <div key="list" v-else>
-        <list-item
-          v-for="page in previewablePages"
-          :key="page.id"
-          :page="page"
-          @on-update="fetch"
-          @on-clone="fetch"
-          @on-delete="fetch"
-          @on-dropdown-toggle="onDropdownToggle"
-        />
-      </div>
-    </transition>
+    <div key="empty-list" class="pt-4 text-center" v-if="isEmpty">
+      No pages found
+    </div>
+    <div key="list" v-else>
+      <list-item
+        v-for="page in previewablePages"
+        :key="page.id"
+        :page="page"
+        @on-update="fetch"
+        @on-clone="fetch"
+        @on-delete="fetch"
+        @on-dropdown-toggle="onDropdownToggle"
+      />
+    </div>
   </div>
 </template>
 
@@ -42,7 +33,7 @@ export default {
   },
   computed: {
     isEmpty() {
-      return this.previewablePages.length === 0
+      return this.previewablePages.length === 0 && !this.isLoading
     },
     previewablePages() {
       return this.pages.filter((page) => !!page.previewUrl && !page.static)

data/app/frontend/editor/components/page/list/list-item.vue

@@ -1,13 +1,14 @@
 <template>
   <div
-    class="flex items-center py-3 pl-6 pr-2 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+    class="flex items-center pl-6 pr-2 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
   >
     <router-link
       :to="{ name: 'editPage', params: { pageId: page.path } }"
-      class="flex flex-grow items-center text-gray-800"
+      class="flex items-center text-gray-800 overflow-hidden w-full py-3.5"
+      :title="page.title"
     >
-      <uikit-page-icon :page="page" />
-      <span class="ml-4">{{ page.title }}</span>
+      <uikit-page-icon :page="page" class="shrink-0" />
+      <span class="ml-4 truncate">{{ page.title }}</span>
       <uikit-icon
         class="ml-4 text-gray-400"
         name="ri-eye-off-line"
@@ -16,72 +17,20 @@
       />
     </router-link>
     <div class="ml-auto pr-2 relative">
-      <uikit-dropdown v-on="$listeners">
-        <template v-slot:button>
-          <button
-            class="px-1 py-1 rounded-full bg-editor-primary bg-opacity-0 hover:text-gray-900 text-gray-600 focus:outline-none hover:bg-opacity-10 transition-colors duration-200"
-          >
-            <uikit-icon name="ri-more-2-fill" size="1.25rem" />
-          </button>
-        </template>
-        <template v-slot:content>
-          <div class="flex flex-col w-48 text-gray-800">
-            <button
-              class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-              @click.stop="openEditPageModal"
-            >
-              <uikit-icon name="ri-settings-5-line" />
-              <span class="ml-2 whitespace-nowrap">{{
-                $t('page.list.item.edit')
-              }}</span>
-            </button>
-            <button
-              class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-              @click.stop="clonePage"
-            >
-              <uikit-icon name="ri-file-copy-line" />
-              <span class="ml-2">{{ $t('page.list.item.clone') }}</span>
-            </button>
-            <button
-              class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-              @click.stop="hidePage"
-              v-if="isVisible"
-            >
-              <uikit-icon name="ri-eye-off-line" />
-              <span class="ml-2">{{ $t('page.list.item.hide') }}</span>
-            </button>
-            <button
-              class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-              @click.stop="showPage"
-              v-if="!isVisible"
-            >
-              <uikit-icon name="ri-eye-line" />
-              <span class="ml-2">{{ $t('page.list.item.show') }}</span>
-            </button>
-            <uikit-confirmation-button
-              @confirm="deletePage"
-              ref="deleteDropdown"
-              v-if="!isIndexPage"
-            >
-              <button
-                class="flex items-center w-full px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none"
-              >
-                <uikit-icon name="delete-bin-line" />
-                <span class="ml-2">{{ $t('page.list.item.delete') }}</span>
-              </button>
-            </uikit-confirmation-button>
-          </div>
-        </template>
-      </uikit-dropdown>
+      <page-actions-button :page="page" v-on="$listeners" />
     </div>
   </div>
 </template>
 
 <script>
 import EditPageModal from '@/components/page/edit.vue'
+import PageActionsButton from './actions-button.vue'
 
 export default {
   name: 'PageListItem',
+  components: {
+    PageActionsButton,
+  },
   props: {
     page: { type: Object, required: true },
   },