maglevcms 1.7.3 → 2.0.0.beta1

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: {

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/extensions/marks/Superscript.js

@@ -0,0 +1,43 @@
+import { Mark } from 'tiptap'
+import { toggleMark, markInputRule, markPasteRule } from 'tiptap-commands'
+
+export default class Superscript extends Mark {
+
+  get name() {
+    return 'sup'
+  }
+
+  get schema() {
+    return {
+      parseDOM: [
+        {
+          tag: 'sup',
+        },        
+      ],
+      toDOM: () => ['sup', 0],
+    }
+  }
+
+  keys({ type }) {
+    return {
+      'Mod-^': toggleMark(type),
+    }
+  }
+
+  commands({ type }) {
+    return () => toggleMark(type)
+  }
+
+  // NOTE: "^^" are used as delimiters to trigger the superscript formatting
+  inputRules({ type }) {
+    return [
+      markInputRule(/(?:\^\^|__)([^\^*_]+)(?:\^\^|__)$/, type),
+    ]
+  }
+
+  pasteRules({ type }) {
+    return [
+      markPasteRule(/(?:\^\^|__)([^\^*_]+)(?:\^\^|__)/g, type),
+    ]
+  }
+}

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

@@ -22,6 +22,13 @@
       :isActive="isActive.strike()"
       @click="commands.strike"
     />
+    <editor-menu-button
+      iconName="format-superscript"
+      class="rounded-r-sm"
+      :isActive="isActive.sup()"
+      @click="commands.sup"
+      v-if="extraExtensions.superscript"
+    />
   </div>
 </template>
 
@@ -34,6 +41,7 @@ export default {
   props: {
     commands: { type: Object, required: true },
     isActive: { type: Object, required: true },
-  },
+    extraExtensions: { type: Object, default: () => ({ table: false, superscript: false }) },
+  }
 }
 </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/rich-text-input.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="mt-1">
       <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-        <div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1">
+        <div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1 overflow-x-auto">
           <editor-block-button
             :commands="commands"
             :isActive="isActive"
@@ -17,7 +17,11 @@
             v-if="!lineBreak"
           />
 
-          <editor-format-buttons :commands="commands" :isActive="isActive" />
+          <editor-format-buttons 
+            :commands="commands" 
+            :isActive="isActive"
+            :extraExtensions="extraExtensions"
+          />
 
           <editor-list-buttons
             :commands="commands"
@@ -35,7 +39,7 @@
             :commands="commands"
             :isActive="isActive"
             class="relative"
-            v-if="!lineBreak && table"
+            v-if="!lineBreak && extraExtensions.table"
           />
         </div>
       </editor-menu-bar>
@@ -69,11 +73,12 @@ import {
   Table,
   TableHeader,
   TableCell,
-  TableRow,
+  TableRow
 } from 'tiptap-extensions'
 import Doc from './rich-text-input/extensions/Doc'
 import LineBreak from './rich-text-input/extensions/LineBreak'
 import Link from './rich-text-input/extensions/marks/Link'
+import Superscript from './rich-text-input/extensions/marks/Superscript'
 import EditorBlockButton from './rich-text-input/block-button.vue'
 import EditorFormatButtons from './rich-text-input/format-buttons.vue'
 import EditorListButtons from './rich-text-input/list-buttons.vue'
@@ -98,7 +103,7 @@ export default {
     value: { type: String },
     lineBreak: { type: Boolean, default: false },
     rows: { type: Number, default: 2 },
-    table: { type: Boolean, default: false },
+    extraExtensions: { type: Object, default: () => ({ table: false, superscript: false }) },
   },
   data() {
     return { editor: null }
@@ -151,6 +156,7 @@ export default {
         new Underline(),
         new Strike(),
         new Link({ openOnClick: false, target: null }),
+        new Superscript(),
         new History(),
       ]
     },

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>