maglevcms 1.0.0.rc1

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

@@ -0,0 +1,87 @@
+<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 hover:bg-opacity-5 cursor-not-allowed':
+          hasModifiedSections,
+        'text-gray-900 border-gray-400 hover:bg-editor-primary hover:bg-opacity-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">
+        <icon
+          icon="circle-notch"
+          name="ri-loader-4-line"
+          spin
+          v-if="isInProgress"
+        />
+        <icon name="check-line" v-if="isSuccess" />
+        <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>
+
+<style scoped>
+.bg-editor-primary {
+  background-color: rgba(
+    var(--editor-color-primary-non-hex),
+    var(--tw-bg-opacity)
+  );
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+  <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>
+
+<style scoped>
+.bg-editor-primary {
+  background-color: rgba(
+    var(--editor-color-primary-non-hex),
+    var(--tw-bg-opacity)
+  );
+}
+</style>

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

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

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="space-y-2">
+    <div>
+      <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/javascript/editor/components/image-library/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="flex items-center" v-if="!hasNoImagesYet">
+      <image-uploader
+        :multiple="true"
+        @uploaded="refresh"
+        class="flex-shrink-0"
+      />
+      <search-input
+        class="w-72 ml-auto"
+        :placeholder="$t('imageLibrary.searchPlaceholder')"
+        @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>
+      <pagination
+        labelI18nKey="imageLibrary.pagination.label"
+        noItemsI18nKey="imageLibrary.pagination.noItems"
+        :activePage="activePage"
+        :totalItems="totalItems"
+        :perPage="perPage"
+        @change="(page) => (this.activePage = page)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ImageUploader from './uploader'
+import ImageList from './list'
+
+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 && !this.loading
+    },
+  },
+  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/javascript/editor/components/image-library/list-item.vue

@@ -0,0 +1,93 @@
+<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)"
+            >
+              <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/javascript/editor/components/image-library/list.vue

@@ -0,0 +1,26 @@
+<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'
+
+export default {
+  name: 'ImageLibraryList',
+  components: { ListItem },
+  props: {
+    images: { type: Array, default: () => [] },
+    pickerMode: { type: Boolean, required: true },
+  },
+}
+</script>

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

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <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>
+import { numberToHumanSize } from '@/utils'
+
+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: 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/javascript/editor/components/kit/accordion.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div
+      class="flex items-center cursor-pointer select-none"
+      :class="headerClass"
+      @click="toggle"
+    >
+      <slot name="header">HINT</slot>
+      <button class="ml-auto">
+        <icon
+          name="arrow-up-s-line"
+          size="1.5rem"
+          class="ml-auto"
+          v-if="show"
+        />
+        <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: 'Accordion',
+  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>

data/app/javascript/editor/components/kit/checkbox-input.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <label :for="name" class="flex items-center cursor-pointer">
+      <div class="font-semibold text-gray-800">
+        {{ label }}
+      </div>
+      <div class="ml-auto relative">
+        <input :id="name" type="checkbox" class="hidden" v-model="localValue" />
+        <div class="toggle__line w-10 h-6 bg-gray-200 rounded-full"></div>
+        <div
+          class="toggle__dot absolute w-5 h-5 bg-white rounded-full inset-y-0 left-0 transition duration-200 ease-in-out"
+        ></div>
+      </div>
+    </label>
+    <div class="text-gray-600 text-sm" v-if="hasPlaceholder">
+      {{ placeholder }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CheckboxInput',
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'text' },
+    value: { type: Boolean, default: false },
+    placeholder: { type: String, default: null },
+  },
+  computed: {
+    localValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      },
+    },
+    hasPlaceholder() {
+      return !this.isBlank(this.placeholder)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.toggle__dot {
+  top: theme('spacing.1/2');
+  left: theme('spacing.1/2');
+}
+
+input:checked ~ .toggle__dot {
+  transform: translateX(calc(100% - theme('spacing.1')));
+}
+
+input:checked ~ .toggle__line {
+  @apply bg-editor-primary;
+}
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <label class="block font-semibold text-gray-800" :for="name">
+      {{ label }}
+    </label>
+
+    <select-input
+      :withLabel="false"
+      :placeholder="$t(`collectionItemInput.select.placeholder`)"
+      :searchEnabled="true"
+      :searchPlaceholder="$t(`collectionItemInput.select.searchPlaceholder`)"
+      :emptyLabel="$t(`collectionItemInput.select.emptyLabel`)"
+      :fetchList="(q) => services.collectionItem.findAll('products', { q })"
+      :clearEnabled="true"
+      buttonClass="h-10"
+      v-model="selectedCollectionItem"
+    >
+      <template v-slot:value>
+        <div class="flex items-center">
+          <div
+            class="h-10 w-10 bg-gray-400 mr-3"
+            v-if="selectedCollectionItem.imageUrl"
+          >
+            <img
+              class="object-cover w-full h-full"
+              :src="selectedCollectionItem.imageUrl"
+            />
+          </div>
+          <span>{{ selectedCollectionItem.label }}</span>
+        </div>
+      </template>
+      <template v-slot:item="{ item }">
+        <div class="flex items-center">
+          <div class="h-10 w-10 bg-gray-400 mr-3" v-if="item.imageUrl">
+            <img class="object-cover w-full h-full" :src="item.imageUrl" />
+          </div>
+          <span class="font-bold">{{ item.label }}</span>
+        </div>
+      </template>
+    </select-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CollectionItemInput',
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'image' },
+    value: { default: () => null },
+    isFocused: { type: Boolean, default: false },
+  },
+  computed: {
+    selectedCollectionItem: {
+      get() {
+        return this.value
+      },
+      set(collectionItem) {
+        this.$emit('input', collectionItem ? { ...collectionItem } : null)
+      },
+    },
+  },
+}
+</script>