maglevcms 1.0.0.rc1

data/app/javascript/editor/components/kit/color-picker.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <label class="block font-semibold text-gray-800" :for="name">
+      {{ label }}
+    </label>
+    <div class="flex flex-wrap gap-0.5 mt-2">
+      <div v-for="preset in presets" :key="preset">
+        <input
+          type="radio"
+          name="selectedColor"
+          :id="`${name}-${preset}`"
+          :value="preset"
+          class="hidden"
+          v-model="selectedColor"
+        />
+        <label
+          :for="`${name}-${preset}`"
+          :title="preset"
+          class="inline-block w-10 h-10 cursor-pointer p-0.5 border-4 rounded-sm"
+          :style="{
+            'border-color':
+              preset === selectedColor ? selectedBorderColor : 'transparent',
+          }"
+        >
+          <span
+            class="block w-full h-full rounded-sm transition transform duration-200 ease-in-out hover:scale-110 select-none"
+            :class="{ 'border border-gray-300': isWhite(preset) }"
+            :style="{ 'background-color': realHexColor(preset) }"
+          >
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { hexToRgb } from '@/utils'
+
+export default {
+  name: 'ColorPicker',
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'color' },
+    presets: {
+      type: Array,
+      default: () => [],
+    },
+    value: { type: String },
+  },
+  computed: {
+    selectedColor: {
+      get() {
+        return this.value
+      },
+      set(color) {
+        this.$emit('input', color)
+      },
+    },
+    selectedBorderColor() {
+      let color = hexToRgb(this.realHexColor(this.selectedColor))
+      if (this.isWhite()) color = { r: 0, g: 0, b: 0 }
+      return `rgba(${color.r}, ${color.g}, ${color.b}, 0.40)`
+    },
+  },
+  methods: {
+    realHexColor(hexColorOrStyle) {
+      return hexColorOrStyle.startsWith('--')
+        ? getComputedStyle(document.body).getPropertyValue(hexColorOrStyle)
+        : hexColorOrStyle
+    },
+    isWhite(hexColorOrStyle) {
+      const value = hexToRgb(
+        this.realHexColor(hexColorOrStyle || this.selectedColor),
+      )
+      if (!value) return true
+      return value.r === 255 && value.g === 255 && value.b === 255
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/confirmation-button.vue

@@ -0,0 +1,65 @@
+<template>
+  <dropdown
+    :placement="placement"
+    v-on="$listeners"
+    class="relative"
+    ref="dropdown"
+  >
+    <template v-slot:button>
+      <slot></slot>
+    </template>
+    <template v-slot:content>
+      <div class="text-gray-700 text-md w-56">
+        <p class="py-3">
+          {{ text || $t('confirmationButton.text') }}
+        </p>
+        <div class="mt-1 flex flex-col">
+          <button
+            class="bg-red-600 rounded-sm text-white py-2 px-4"
+            @click.stop="confirm"
+          >
+            {{
+              confirmButtonLabel || $t('confirmationButton.confirmButtonLabel')
+            }}
+          </button>
+          <button
+            class="block w-full text-gray-800 py-2 hover:bg-gray-100 transition-colors duration-200"
+            @click.stop="cancel"
+          >
+            {{
+              cancelButtonLabel || $t('confirmationButton.cancelButtonLabel')
+            }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmationButton',
+  props: {
+    placement: { type: String, default: 'bottom' },
+    text: { type: String, default: null },
+    confirmButtonLabel: { type: String, default: null },
+    cancelButtonLabel: { type: String, default: null },
+  },
+  methods: {
+    isOpen() {
+      return this.$refs.dropdown.open
+    },
+    confirm() {
+      this.close()
+      this.$emit('confirm')
+    },
+    cancel() {
+      this.close()
+      this.$emit('cancel')
+    },
+    close() {
+      this.$refs.dropdown.close()
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <v-popoper
+    trigger="manual"
+    :autoHide="true"
+    :open="open"
+    :placement="placement"
+    class="flex"
+  >
+    <div
+      class="z-10 relative flex items-center focus:outline-none select-none cursor-pointer w-full"
+      @click.stop.prevent="toggle"
+    >
+      <slot name="button"></slot>
+    </div>
+
+    <template slot="popover">
+      <slot name="content"></slot>
+    </template>
+  </v-popoper>
+</template>
+
+<script>
+import { ModalBus } from '@/plugins/event-bus'
+
+export default {
+  name: 'Dropdown',
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom',
+      validator: (value) =>
+        ['top', 'bottom', 'right', 'left'].indexOf(value) !== -1,
+    },
+  },
+  data() {
+    return {
+      open: false,
+    }
+  },
+  mounted() {
+    ModalBus.$on('open', () => this.close())
+    document.addEventListener('keydown', this.onEscape)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keydown', this.onEscape)
+    })
+  },
+  methods: {
+    onEscape(e) {
+      if (e.key === 'Esc' || e.key === 'Escape') this.close()
+    },
+    toggle() {
+      this.open = !this.open
+      this.$emit('on-dropdown-toggle', this)
+    },
+    close() {
+      this.open = false
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <label class="block font-semibold text-gray-800" :for="name">
+      {{ label }}
+    </label>
+    <div class="mt-1">
+      <div
+        class="flex items-center justify-center bg-gray-100 h-24 rounded"
+        v-if="isBlank(value)"
+      >
+        <button
+          class="flex items-center justify-center flex-col"
+          @click="openIconPickerModal"
+        >
+          <icon name="ri-book-line" />
+          <p class="uppercase text-xs mt-1">{{ $t('iconInput.addButton') }}</p>
+        </button>
+      </div>
+      <div v-else>
+        <div
+          class="relative bg-gray-100 h-24 rounded flex items-center justify-center overflow-hidden"
+          @mouseover="hovered = true"
+          @mouseleave="hovered = false"
+        >
+          <i class="text-6xl text-gray-800 font-bold" :class="value" />
+          <transition name="slide-up">
+            <div
+              class="flex justify-center py-3 px-2 absolute bg-black bg-opacity-75 bottom-0 w-full text-white cursor-default rounded-b"
+              v-if="hovered"
+            >
+              <button
+                class="flex items-center justify-center flex-col mr-4"
+                @click="openIconPickerModal"
+              >
+                <icon name="ri-book-line" />
+                <p class="uppercase text-xs mt-1">
+                  {{ $t('iconInput.replaceButton') }}
+                </p>
+              </button>
+
+              <button
+                class="flex items-center justify-center flex-col"
+                @click="removeIcon"
+              >
+                <icon name="delete-bin-line" />
+                <p class="uppercase text-xs mt-1">
+                  {{ $t('iconInput.clearButton') }}
+                </p>
+              </button>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FocusedInputMixin from '@/mixins/focused-input'
+import IconLibrary from '@/components/icon-library'
+
+export default {
+  name: 'IconInput',
+  mixins: [FocusedInputMixin],
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'icon' },
+    value: { default: () => ({ altText: '' }) },
+  },
+  data() {
+    return { hovered: false, errorOnLoading: false }
+  },
+  methods: {
+    focus() {
+      this.openIconPickerModal()
+    },
+    openIconPickerModal() {
+      this.openModal({
+        title: this.$t('iconLibrary.pickerTitle'),
+        component: IconLibrary,
+        props: { modalClass: 'w-120', pickerMode: true },
+        listeners: {
+          select: (icon) => this.onSelectIcon(icon),
+        },
+      })
+    },
+    removeIcon() {
+      this.$emit('input', null)
+    },
+    onSelectIcon(icon) {
+      this.closeModal()
+      this.$emit('input', icon)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,35 @@
+<template>
+  <component
+    v-bind:is="icon"
+    v-bind="$attrs"
+    viewBox="0 0 24 24"
+    :width="size"
+    :height="size"
+    class="fill-current"
+    :class="{ 'animate-spin': spin, 'animate-bounce': bounce }"
+  ></component>
+</template>
+
+<script>
+// RemixIcon (https://remixicon.com)
+const icons = {
+  remixicons: require.context('@/assets/remixicons', true),
+  zondicons: require.context('@/assets/zondicons', true),
+}
+
+export default {
+  name: 'MaglevIcon',
+  props: {
+    name: { type: String },
+    size: { type: String, default: '1.25rem' },
+    spin: { type: Boolean, default: false },
+    bounce: { type: Boolean, default: false },
+    library: { type: String, default: 'remixicons' },
+  },
+  computed: {
+    icon() {
+      return icons[this.library](`./${this.name}.svg`, true).default
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <label class="block font-semibold text-gray-800" :for="name">
+      {{ label }}
+    </label>
+    <div class="mt-1">
+      <div
+        class="flex items-center justify-center bg-gray-100 h-48 rounded"
+        v-if="isBlank(value)"
+      >
+        <button
+          class="flex items-center justify-center flex-col"
+          @click="openImagePickerModal"
+        >
+          <icon name="camera-line" />
+          <p class="uppercase text-xs mt-1">{{ $t('imageInput.addButton') }}</p>
+        </button>
+      </div>
+      <div v-else>
+        <div
+          class="relative bg-checkerboard h-48 rounded overflow-hidden"
+          @mouseover="hovered = true"
+          @mouseleave="hovered = false"
+        >
+          <img
+            class="h-full w-full object-contain rounded"
+            :src="value.url"
+            @error="() => (this.errorOnLoading = true)"
+            v-if="isValidImage"
+          />
+          <transition name="slide-up">
+            <div
+              class="flex justify-center py-3 px-2 absolute bg-black bg-opacity-75 bottom-0 w-full text-white cursor-default rounded-b"
+              v-if="hovered"
+            >
+              <button
+                class="flex items-center justify-center flex-col mr-4"
+                @click="openImagePickerModal"
+              >
+                <icon name="camera-line" />
+                <p class="uppercase text-xs mt-1">
+                  {{ $t('imageInput.replaceButton') }}
+                </p>
+              </button>
+
+              <button
+                class="flex items-center justify-center flex-col"
+                @click="removeImage"
+              >
+                <icon name="delete-bin-line" />
+                <p class="uppercase text-xs mt-1">
+                  {{ $t('imageInput.clearButton') }}
+                </p>
+              </button>
+            </div>
+          </transition>
+        </div>
+
+        <text-input
+          class="mt-2"
+          :showLabel="false"
+          :placeholder="$t('imageInput.altTextPlaceholder')"
+          v-model="altText"
+          v-if="hasAltText"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FocusedInputMixin from '@/mixins/focused-input'
+import ImageLibrary from '@/components/image-library'
+
+export default {
+  name: 'ImageInput',
+  mixins: [FocusedInputMixin],
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'image' },
+    value: { default: () => ({ altText: '' }) },
+    hasAltText: { type: Boolean, default: true, required: false },
+  },
+  data() {
+    return { hovered: false, errorOnLoading: false }
+  },
+  computed: {
+    altText: {
+      get() {
+        return this.value.altText
+      },
+      set(altText) {
+        this.$emit('input', { ...this.value, altText })
+      },
+    },
+    isValidImage() {
+      return !this.isBlank(this.value?.url) && !this.errorOnLoading
+    },
+  },
+  methods: {
+    focus() {
+      this.openImagePickerModal()
+    },
+    openImagePickerModal() {
+      this.openModal({
+        title: this.$t('imageLibrary.pickerTitle'),
+        component: ImageLibrary,
+        props: { modalClass: 'w-216', pickerMode: true },
+        listeners: {
+          select: (image) => this.onSelectImage(image),
+        },
+      })
+    },
+    removeImage() {
+      this.$emit('input', null)
+    },
+    onSelectImage(image) {
+      this.closeModal()
+      this.$emit('input', { ...this.value, ...image })
+      this.errorOnLoading = false
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import { VPopover } from 'v-tooltip'
+import Icon from './icon'
+import ModalRoot from './modal-root'
+import Modal from './modal'
+import Tabs from './tabs'
+import Accordion from './accordion'
+import Dropdown from './dropdown'
+import ConfirmationButton from './confirmation-button'
+import SubmitButton from './submit-button'
+import ImageInput from './image-input'
+import IconInput from './icon-input'
+import LinkInput from './link-input'
+import SelectInput from './select-input'
+import TextAreaInput from './textarea-input'
+import TextInput from './text-input'
+import RichTextInput from './rich-text-input'
+import CheckboxInput from './checkbox-input'
+import SearchInput from './search-input'
+import Pagination from './pagination'
+import PageIcon from './page-icon'
+import ColorPicker from './color-picker'
+import SimpleSelect from './simple-select'
+import CollectionItemInput from './collection-item-input'
+import ListItemButton from './list-item-button'
+
+Vue.component('icon', Icon)
+Vue.component('v-popoper', VPopover)
+Vue.component('dropdown', Dropdown)
+Vue.component('modal-root', ModalRoot)
+Vue.component('modal', Modal)
+Vue.component('tabs', Tabs)
+Vue.component('accordion', Accordion)
+Vue.component('confirmation-button', ConfirmationButton)
+Vue.component('submit-button', SubmitButton)
+Vue.component('image-input', ImageInput)
+Vue.component('icon-input', IconInput)
+Vue.component('link-input', LinkInput)
+Vue.component('select-input', SelectInput)
+Vue.component('textarea-input', TextAreaInput)
+Vue.component('text-input', TextInput)
+Vue.component('rich-text-input', RichTextInput)
+Vue.component('checkbox-input', CheckboxInput)
+Vue.component('search-input', SearchInput)
+Vue.component('pagination', Pagination)
+Vue.component('page-icon', PageIcon)
+Vue.component('color-picker', ColorPicker)
+Vue.component('simple-select', SimpleSelect)
+Vue.component('collection-item-input', CollectionItemInput)
+Vue.component('list-item-button', ListItemButton)

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

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <label class="block font-semibold text-gray-800" :for="name">
+      {{ label }}
+    </label>
+
+    <text-input
+      v-model="textInput"
+      :showLabel="false"
+      :placeholder="$t('linkInput.nestedTextPlaceholder')"
+      :isFocused="isFocused"
+      class="mt-2"
+      :class="{ hidden: !withText }"
+    />
+
+    <div
+      class="flex items-center w-full mt-2 py-3 px-3 rounded bg-gray-100 text-gray-800 cursor-pointer"
+      @click="openLinkPickerModal"
+    >
+      <div class="flex-1 flex items-center overflow-hidden" v-if="isPage">
+        <page-icon :page="{ path: value.href }" class="flex-shrink-0" />
+        <span class="ml-3">{{ value.linkLabel }}</span>
+      </div>
+      <div class="flex-1 flex items-center overflow-hidden" v-if="isUrl">
+        <icon name="ri-external-link-line" class="flex-shrink-0" />
+        <span class="ml-3 shrink">{{ value.href }}</span>
+      </div>
+      <div class="flex-1 flex items-center overflow-hidden" v-if="isEmail">
+        <icon name="ri-mail-line" class="flex-shrink-0" />
+        <span class="ml-3">{{ value.email }}</span>
+      </div>
+
+      <div
+        class="flex-1 flex items-center overflow-hidden text-gray-400"
+        v-if="isBlank(value)"
+      >
+        {{ $t('linkInput.placeholder') }}
+      </div>
+
+      <button class="ml-3" @click.prevent.stop="clear" v-if="!isBlank(value)">
+        <icon name="ri-close-line" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import LinkPicker from '@/components/link-picker'
+import { pick } from '@/utils'
+
+export default {
+  name: 'LinkInput',
+  props: {
+    label: { type: String, default: 'Label' },
+    name: { type: String, default: 'image' },
+    withText: { type: Boolean, default: false },
+    value: { default: () => ({ text: '' }) },
+    isFocused: { type: Boolean, default: false },
+  },
+  computed: {
+    isPage() {
+      return (
+        this.value?.linkType === 'page' ||
+        this.value?.linkType === 'static_page'
+      )
+    },
+    isUrl() {
+      return (
+        (this.value && !this.value.linkType) || this.value?.linkType === 'url'
+      )
+    },
+    isEmail() {
+      return this.value?.linkType === 'email'
+    },
+    textInput: {
+      get() {
+        return this.value?.text
+      },
+      set(text) {
+        this.$emit('input', { ...this.value, text })
+      },
+    },
+  },
+  methods: {
+    setLink(link) {
+      this.$emit('input', {
+        ...pick(
+          link,
+          'linkType',
+          'linkLabel',
+          'linkId',
+          'sectionId',
+          'href',
+          'email',
+          'openNewWindow',
+          'text',
+        ),
+        text: this.value?.text || '',
+      })
+      this.closeModal()
+    },
+    clear() {
+      this.$emit('input', null)
+    },
+    openLinkPickerModal() {
+      this.openModal({
+        title: this.$t('linkPicker.title'),
+        component: LinkPicker,
+        props: { currentLink: this.value },
+        listeners: {
+          select: (link) => this.setLink(link),
+        },
+      })
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/list-item-button.vue

@@ -0,0 +1,16 @@
+<template>
+  <button
+    class="px-1 py-1 rounded-full bg-gray-600 bg-opacity-0 hover:text-gray-900 text-gray-600 focus:outline-none hover:bg-opacity-10 transition-colors duration-200"
+  >
+    <icon :name="iconName" size="1.25rem" />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ListItemButton',
+  props: {
+    iconName: { type: String, required: true },
+  },
+}
+</script>