maglevcms 2.0.0 → 3.0.0.beta1

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

@@ -1,32 +0,0 @@
-<template>
-  <router-link
-    :to="{
-      name: 'editPage',
-      params: { locale: locale.prefix, pageId: pageId },
-    }"
-    :key="locale.prefix"
-    class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none cursor-pointer text-md"
-    :class="{ 'font-bold': isActive }"
-  >
-    {{ locale.label }}
-  </router-link>
-</template>
-
-<script>
-export default {
-  name: 'LocaleTogglerLink',
-  props: {
-    locale: { type: Object, required: true },
-    defaultLocale: { type: Object, required: true },
-  },
-  computed: {
-    isActive() {
-      return this.locale.prefix === this.currentLocale
-    },
-    pageId() {
-      const map = this.currentPage.pathHash
-      return map[this.locale.prefix] || map[this.defaultLocale.prefix]
-    },
-  },
-}
-</script>

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

@@ -1,41 +0,0 @@
-<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,20 +0,0 @@
-<template>
-  <a
-    :href="currentPageUrl"
-    target="_blank"
-    class="px-6 flex items-center hover:bg-editor-primary/5 transition-colors duration-200"
-  >
-    {{ $t('headerNav.previewSite') }}
-  </a>
-</template>
-
-<script>
-export default {
-  name: 'PreviewButton',
-  computed: {
-    currentPageUrl() {
-      return this.currentPage.liveUrl
-    },
-  },
-}
-</script>

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

@@ -1,40 +0,0 @@
-<template>
-  <div>
-    <uikit-dropdown placement="bottom" ref="dropdown" class="h-full flex">
-      <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"
-        >
-          <span>{{ $t('headerNav.previewToggler.button') }}</span>
-          <uikit-icon name="arrow-down-s-line" />
-        </button>
-      </template>
-      <template v-slot:content>
-        <div class="w-48 flex flex-col">
-          <a
-            class="preview-link"
-            target="_blank"
-            :href="currentPage.previewUrl"
-            >{{ $t('headerNav.previewToggler.draftLink') }}</a
-          >
-          <a class="preview-link" target="_blank" :href="currentPage.liveUrl">{{
-            $t('headerNav.previewToggler.liveLink')
-          }}</a>
-        </div>
-      </template>
-    </uikit-dropdown>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PreviewToggler',
-  computed: {},
-}
-</script>
-
-<style scoped>
-.preview-link {
-  @apply px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none cursor-pointer;
-}
-</style>

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

@@ -1,77 +0,0 @@
-<template>
-  <div class="px-5 flex items-center">
-    <div
-      v-if="isUninitialized"
-      class="flex items-center h-10 w-44 animate-pulse"
-    >
-      <div class="h-full w-full bg-gray-200 rounded"></div>
-    </div>
-
-    <button
-      v-else
-      class="rounded-sm py-2 px-4 border transition-colors duration-200"
-      :class="{
-        'text-gray-400 border-gray-100 hover:bg-editor-primary/5 cursor-not-allowed':
-          hasModifiedSections,
-        'text-gray-900 border-gray-400 hover:bg-editor-primary/5': isReady,
-        'text-gray-900 cursor-wait': isInProgress,
-        'bg-green-500 border-green-500 text-white': isSuccess,
-        'bg-red-600 border-red-600 text-white': isFail,
-      }"
-      @click="publish"
-      :disabled="isInProgress || hasModifiedSections"
-    >
-      <span class="flex items-center justify-center space-x-2">
-        <uikit-icon
-          icon="circle-notch"
-          name="ri-loader-4-line"
-          spin
-          v-if="isInProgress"
-        />
-        <uikit-icon name="ri-check-line" v-if="isSuccess" />
-        <uikit-icon name="ri-alert-line" v-if="isFail" />
-        <span>{{ label }}</span>
-      </span>
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PublishButton',
-  computed: {
-    status() {
-      return this.$store.state.ui.publishButtonState.status
-    },
-    label() {
-      return (
-        this.$store.state.ui.publishButtonState.label ||
-        this.$t(`headerNav.publishButton.${this.status}`)
-      )
-    },
-    isUninitialized() {
-      return !this.status
-    },
-    hasModifiedSections() {
-      return !this.isBlank(this.$store.state.touchedSections)
-    },
-    isReady() {
-      return this.status === 'default' && !this.hasModifiedSections
-    },
-    isInProgress() {
-      return this.status === 'inProgress'
-    },
-    isSuccess() {
-      return this.status === 'success'
-    },
-    isFail() {
-      return this.status === 'fail'
-    },
-  },
-  methods: {
-    async publish() {
-      if (this.isReady) this.$store.dispatch('publishSite')
-    },
-  },
-}
-</script>

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

@@ -1,33 +0,0 @@
-<template>
-  <uikit-submit-button
-    type="button"
-    class="block text-white bg-opacity-95 hover:bg-opacity-100 transition-colors duration-200"
-    :class="{
-      'w-40 h-full': big,
-      'rounded-sm py-2 px-4 text-center w-32 border border-opacity-0': !big,
-    }"
-    defaultColorClass="bg-editor-primary"
-    :labels="$t('headerNav.saveButton')"
-    :buttonState="buttonState"
-    @click="save"
-  />
-</template>
-
-<script>
-export default {
-  name: 'SaveButton',
-  props: {
-    big: { type: Boolean, default: false },
-  },
-  computed: {
-    buttonState() {
-      return this.$store.state.ui.saveButtonState
-    },
-  },
-  methods: {
-    async save() {
-      await this.$store.dispatch('persistPage')
-    },
-  },
-}
-</script>

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

@@ -1,11 +0,0 @@
-<template>
-  <div class="h-full py-4 w-px shrink-0">
-    <div class="h-full w-full bg-gray-300" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HeaderNavSeparator',
-}
-</script>

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

@@ -1,39 +0,0 @@
-<template>
-  <div class="space-y-2">
-    <div>
-      <uikit-search-input @search="(q) => (query = q)" />
-    </div>
-    <div class="overflow-y-auto h-64">
-      <div class="grid grid-cols-6 gap-2 pt-2 pb-8">
-        <div
-          v-for="(icon, index) in icons"
-          :key="`icon-${index}`"
-          class="flex justify-center"
-        >
-          <div
-            class="cursor-pointer text-gray-900 h-12 w-12 flex items-center justify-center rounded hover:bg-gray-900 hover:text-white hover:shadow-lg transition transform duration-200 ease-in-out hover:scale-125"
-            @click.prevent="$emit('select', icon)"
-          >
-            <i class="text-3xl" :class="icon"></i>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'IconLibrary',
-  data() {
-    return { query: null }
-  },
-  computed: {
-    icons() {
-      const icons = this.currentTheme.icons || []
-      if (this.isBlank(this.query)) return icons
-      return icons.filter((icon) => icon.includes(this.query))
-    },
-  },
-}
-</script>

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

@@ -1,107 +0,0 @@
-<template>
-  <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"
-        class="flex-shrink-0"
-      />
-      <uikit-search-input
-        class="w-72 ml-auto"
-        :placeholder="$t('imageLibrary.searchPlaceholder')"
-        @search="search"
-      />
-    </div>
-    <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>
-      <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>
-
-<script>
-import ImageUploader from './uploader.vue'
-import ImageList from './list.vue'
-
-export default {
-  name: 'ImageLibrary',
-  components: { ImageUploader, ImageList },
-  props: {
-    pickerMode: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      images: null,
-      totalItems: null,
-      activePage: 1,
-      perPage: 16,
-      slideDirection: null,
-      query: null,
-      loading: true,
-    }
-  },
-  mounted() {
-    this.query = null
-    this.fetch()
-  },
-  computed: {
-    hasNoImagesYet() {
-      return this.isBlank(this.images) && this.query === null
-    },
-  },
-  methods: {
-    async fetch() {
-      this.loading = true
-      let { data, totalItems } = await this.services.image.findAll(
-        this.activePage,
-        this.perPage,
-        this.query,
-      )
-      this.images = data
-      this.totalItems = totalItems
-      this.loading = false
-    },
-    search(query) {
-      this.loading = true
-      this.query = query
-      this.fetch()
-    },
-    refresh() {
-      this.activePage = 1
-      this.fetch()
-    },
-    async destroyImage(image) {
-      await this.services.image.destroy(image.id)
-      this.fetch()
-    },
-  },
-  watch: {
-    activePage(newActivePage, oldActivePage) {
-      this.slideDirection =
-        newActivePage > oldActivePage ? 'slide-left' : 'slide-right'
-      this.fetch()
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/image-library/list-item.vue

@@ -1,93 +0,0 @@
-<template>
-  <div
-    class="col-span-1"
-    @mouseover="hovered = true"
-    @mouseleave="hovered = false"
-  >
-    <div class="bg-checkerboard pb-full relative overflow-hidden rounded">
-      <div class="absolute inset-0 h-full w-full rounded">
-        <img
-          class="h-full w-full object-contain"
-          :class="{
-            'cursor-pointer': pickerMode,
-          }"
-          :src="image.url"
-          @click.prevent="$emit('select', image)"
-        />
-        <transition name="slide-up">
-          <div
-            class="flex items-center px-2 absolute bg-black bg-opacity-75 bottom-0 h-12 w-full text-white text-xs cursor-default rounded-b"
-            v-if="actionBarDisplayed"
-          >
-            <button
-              type="button"
-              class="px-1 py-1 bg-white rounded-full flex items-center justify-center text-gray-900 ml-auto"
-              @click="() => (this.askingForRemoval = true)"
-            >
-              <uikit-icon name="delete-bin-line" size="1rem" />
-            </button>
-          </div>
-        </transition>
-        <div
-          class="flex items-center justify-center absolute bg-black bg-opacity-75 inset-0 rounded text-white"
-          v-if="askingForRemoval"
-        >
-          <div class="text-center">
-            <p class="mb-2">{{ $t('imageLibrary.destroy.text') }}</p>
-            <button
-              class="block w-full rounded text-center text-sm bg-transparent py-1 px-4 hover:bg-white hover:text-gray-900"
-              @click="() => $emit('destroy', this.image)"
-            >
-              {{ $t('imageLibrary.destroy.ok') }}
-            </button>
-            <button
-              class="block w-full rounded text-center text-sm bg-transparent py-1 px-4 hover:bg-white hover:text-gray-900"
-              @click="() => (this.askingForRemoval = false)"
-            >
-              {{ $t('imageLibrary.destroy.cancel') }}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="mt-1 px-2 text-xs font-bold text-gray-900">
-      {{ image.filename | truncate(26) }}
-    </div>
-    <div
-      class="px-2 mb-1 flex items-center text-xs justify-between text-gray-700"
-    >
-      <span :class="{ invisible: !hasDimensions }"
-        >{{ image.width }}x{{ image.height }}</span
-      >
-      <span :class="{ invisible: !hasSize }">{{
-        image.byteSize | numberToHumanSize
-      }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ImageLibraryListItem',
-  props: {
-    image: { type: Object, required: true },
-    leftEdge: { type: Boolean, default: false },
-    bottomEdge: { type: Boolean, default: false },
-    pickerMode: { type: Boolean, required: true },
-  },
-  data() {
-    return { hovered: false, askingForRemoval: false }
-  },
-  computed: {
-    hasDimensions() {
-      return !this.isBlank(this.image.width) && !this.isBlank(this.image.height)
-    },
-    hasSize() {
-      return !this.isBlank(this.image.byteSize)
-    },
-    actionBarDisplayed() {
-      return this.hovered && !this.askingForRemoval
-    },
-  },
-}
-</script>

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

@@ -1,26 +0,0 @@
-<template>
-  <div class="grid grid-cols-4 gap-4">
-    <list-item
-      v-for="(image, index) in images"
-      :key="image.id"
-      :image="image"
-      :leftEdge="index % 4 === 0"
-      :bottomEdge="index >= Math.ceil(images.length / 4 - 1) * 4"
-      :pickerMode="pickerMode"
-      v-on="$listeners"
-    />
-  </div>
-</template>
-
-<script>
-import ListItem from './list-item.vue'
-
-export default {
-  name: 'ImageLibraryList',
-  components: { ListItem },
-  props: {
-    images: { type: Array, default: () => [] },
-    pickerMode: { type: Boolean, required: true },
-  },
-}
-</script>

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

@@ -1,76 +0,0 @@
-<template>
-  <div>
-    <uikit-submit-button
-      type="button"
-      class="rounded-sm text-white py-2 px-4"
-      defaultColorClass="bg-editor-primary"
-      :labels="$t('imageLibrary.uploader.uploadButton')"
-      :buttonState="uploadingState"
-      @click="openFileDialog"
-    />
-
-    <input
-      type="file"
-      ref="input"
-      accept="image/*"
-      :multiple="multiple"
-      @change="addFiles"
-      class="hidden"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ImageLibraryUploader',
-  props: {
-    maxsize: { type: Number, default: 2048144 },
-    multiple: { type: Boolean, default: false },
-  },
-  data() {
-    return { uploadingState: 'default' }
-  },
-  methods: {
-    openFileDialog() {
-      this.$refs.input.click()
-    },
-    addFiles() {
-      const allowedFiles = this.checkFiles()
-      if (allowedFiles) {
-        this.uploadingState = 'inProgress'
-        Promise.all(
-          allowedFiles.map((file) => this.services.image.create({ file })),
-        )
-          .then(() => {
-            this.uploadingState = 'success'
-            this.$emit('uploaded')
-          })
-          .catch((error) => {
-            this.uploadingState = 'fail'
-            console.log(
-              '[Maglev] Uploader failed. Check your server logs',
-              error,
-            )
-          })
-      } else {
-        alert(
-          this.$t('imageLibrary.uploader.wrongFiles', {
-            limit: this.$options.filters.numberToHumanSize(this.maxsize),
-          }),
-        )
-      }
-    },
-    checkFiles() {
-      let allowedFiles = []
-      const files = this.$refs.input.files
-      for (var i = 0; i < files.length; i++) {
-        const file = files[i]
-        if (file && file.size < this.maxsize) {
-          allowedFiles.push(file)
-        } else return false
-      }
-      return allowedFiles
-    },
-  },
-}
-</script>

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

@@ -1,68 +0,0 @@
-<template>
-  <div>
-    <div
-      class="flex items-center cursor-pointer select-none"
-      :class="headerClass"
-      @click="toggle"
-    >
-      <slot name="header">HINT</slot>
-      <button class="ml-auto">
-        <uikit-icon
-          name="arrow-up-s-line"
-          size="1.5rem"
-          class="ml-auto"
-          v-if="show"
-        />
-        <uikit-icon
-          name="arrow-down-s-line"
-          size="1.5rem"
-          class="ml-auto"
-          v-else
-        />
-      </button>
-    </div>
-    <transition
-      name="accordion"
-      v-on:before-enter="beforeEnter"
-      v-on:enter="enter"
-      v-on:before-leave="beforeLeave"
-      v-on:leave="leave"
-    >
-      <div
-        class="overflow-hidden transition-all duration-150 select-none"
-        v-show="show"
-      >
-        <slot></slot>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'UIKitAccordion',
-  props: {
-    headerClass: { type: String, default: '' },
-  },
-  data() {
-    return { show: false }
-  },
-  methods: {
-    toggle() {
-      this.show = !this.show
-    },
-    beforeEnter(el) {
-      el.style.height = '0'
-    },
-    enter(el) {
-      el.style.height = el.scrollHeight + 'px'
-    },
-    beforeLeave(el) {
-      el.style.height = el.scrollHeight + 'px'
-    },
-    leave(el) {
-      el.style.height = '0'
-    },
-  },
-}
-</script>