maglevcms 2.0.0 → 3.0.0.beta1

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

@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <div class="block font-semibold text-gray-800" @click="focus()">
-      {{ label }}
-    </div>
-    <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"
-        >
-          <uikit-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"
-              >
-                <uikit-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"
-              >
-                <uikit-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/index.vue'
-
-export default {
-  name: 'UIKitIconInput',
-  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/frontend/editor/components/kit/icon.vue

@@ -1,36 +0,0 @@
-<template>
-  <component
-    v-bind:is="icon"
-    v-bind="$attrs"
-    viewBox="0 0 24 24"
-    class="fill-current"
-    :class="{ 'animate-spin': spin, 'animate-bounce': bounce }"
-    :style="{ width: size, height: size }"
-  ></component>
-</template>
-
-<script>
-import { defineAsyncComponent } from 'vue'
-
-export default {
-  name: 'UIKitIcon',
-  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' },
-  },
-  data() {
-    return {
-      icons: import.meta.glob(`../../assets/**/*.svg`),
-    }
-  },
-  computed: {
-    icon() {
-      const path = `../../assets/${this.library}/${this.name}.svg`
-      return defineAsyncComponent(() => this.icons[path]())      
-    },
-  },
-}
-</script>

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

@@ -1,124 +0,0 @@
-<template>
-  <div>
-    <div class="block font-semibold text-gray-800" @click="focus()">
-      {{ label }}
-    </div>
-    <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"
-        >
-          <uikit-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"
-              >
-                <uikit-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"
-              >
-                <uikit-icon name="delete-bin-line" />
-                <p class="uppercase text-xs mt-1">
-                  {{ $t('imageInput.clearButton') }}
-                </p>
-              </button>
-            </div>
-          </transition>
-        </div>
-
-        <uikit-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/index.vue'
-
-export default {
-  name: 'UIKitImageInput',
-  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/frontend/editor/components/kit/index.js

@@ -1,56 +0,0 @@
-import Vue from 'vue'
-import { VPopover } from 'v-tooltip'
-import Icon from './icon.vue'
-import ModalRoot from './modal-root.vue'
-import Modal from './modal.vue'
-import Tabs from './tabs.vue'
-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'
-import SelectInput from './select-input.vue'
-import TextAreaInput from './textarea-input.vue'
-import TextInput from './text-input.vue'
-import RichTextInput from './rich-text-input.vue'
-import CheckboxInput from './checkbox-input.vue'
-import SearchInput from './search-input.vue'
-import Pagination from './pagination/index.vue'
-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 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)
-Vue.component('uikit-dropdown', Dropdown)
-Vue.component('uikit-modal-root', ModalRoot)
-Vue.component('uikit-modal', Modal)
-Vue.component('uikit-tabs', Tabs)
-Vue.component('uikit-accordion', Accordion)
-Vue.component('uikit-confirmation-button', ConfirmationButton)
-Vue.component('uikit-submit-button', SubmitButton)
-Vue.component('uikit-image-input', ImageInput)
-Vue.component('uikit-icon-input', IconInput)
-Vue.component('uikit-link-input', LinkInput)
-Vue.component('uikit-select-input', SelectInput)
-Vue.component('uikit-textarea-input', TextAreaInput)
-Vue.component('uikit-text-input', TextInput)
-Vue.component('uikit-rich-text-input', RichTextInput)
-Vue.component('uikit-checkbox-input', CheckboxInput)
-Vue.component('uikit-search-input', SearchInput)
-Vue.component('uikit-pagination', Pagination)
-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-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

@@ -1,121 +0,0 @@
-<template>
-  <div>
-    <div class="block font-semibold text-gray-800" @click="focus()">
-      {{ label }}
-    </div>
-
-    <uikit-text-input
-      :name="name"
-      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">
-        <uikit-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">
-        <uikit-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">
-        <uikit-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)">
-        <uikit-icon name="ri-close-line" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import LinkPicker from '@/components/link-picker/index.vue'
-import { pick } from '@/misc/utils'
-
-export default {
-  name: 'UIKitLinkInput',
-  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: {
-    focus() {
-      this.openLinkPickerModal()
-    },
-    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, modalClass: 'h-144 w-120' },
-        listeners: {
-          select: (link) => this.setLink(link),
-        },
-      })
-    },
-  },
-}
-</script>

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

@@ -1,85 +0,0 @@
-<template>
-  <uikit-modal
-    :isOpen="!!currentModal"
-    :title="title"
-    :containerClass="containerClass"
-    @on-close="handleOutsideClick"
-  >
-    <component
-      v-for="(modal, index) in stack"
-      :key="`modal-${index}`"
-      :is="modal.component"
-      @on-close="handleClose"
-      v-bind="getModalProps(modal)"
-      v-on="modal.listeners"
-      v-show="index === stack.length - 1"
-    />
-  </uikit-modal>
-</template>
-
-<script>
-import { ModalBus } from '@/plugins/event-bus'
-
-export default {
-  name: 'UIKitModalRoot',
-  data() {
-    return {
-      stack: [], // NOTE: we stack modals!
-    }
-  },
-  created() {
-    ModalBus.$on(
-      'open',
-      ({
-        component,
-        title = '',
-        props = null,
-        listeners = {},
-        closeOnClick = true,
-      }) => {
-        this.stack.push({
-          component,
-          title,
-          props,
-          listeners,
-          closeOnClick,
-        })
-      },
-    )
-
-    ModalBus.$on('close', () => this.handleClose())
-    document.addEventListener('keyup', this.handleKeyup)
-  },
-  beforeDestroy() {
-    document.removeEventListener('keyup', this.handleKeyup)
-  },
-  computed: {
-    currentModal() {
-      return this.stack.length === 0 ? null : this.stack[this.stack.length - 1]
-    },
-    title() {
-      return this.currentModal?.title
-    },
-    containerClass() {
-      return this.currentModal?.props?.modalClass
-    }
-  },
-  methods: {
-    handleOutsideClick(force) {
-      if (!this.closeOnClick && !force) return
-      this.handleClose()
-    },
-    handleKeyup(e) {
-      if (e.keyCode === 27) this.handleClose()
-    },
-    handleClose() {
-      if (!this.currentModal) return
-      this.stack.pop()
-    },
-    getModalProps(modal) {
-      const { modalClass, ...rest } = (modal.props ?? {})
-      return rest
-    }
-  },
-}
-</script>

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

@@ -1,39 +0,0 @@
-<template>
-  <transition name="modal">
-    <div class="modal-mask" v-if="isOpen">
-      <div class="modal-wrapper" @click="$emit('on-close')">
-        <div class="modal-container" :class="containerClass" @click.stop>
-          <div class="modal-header">
-            <slot name="header">
-              <h3 class="text-gray-800 font-semibold antialiased text-lg">
-                {{ title }}
-              </h3>
-            </slot>
-            <button
-              class="modal-close-button"
-              type="button"
-              @click="$emit('on-close', true)"
-            >
-              <uikit-icon-button iconName="ri-close-line" class="relative -right-2" />
-            </button>
-          </div>
-
-          <div class="modal-body">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'UIKitModal',
-  props: {
-    isOpen: Boolean,
-    title: { type: String, default: 'Modal' },
-    containerClass: { type: String, default: 'w-108' },
-  },
-}
-</script>

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

@@ -1,21 +0,0 @@
-<template>
-  <uikit-icon :name="iconName" :size="size" />
-</template>
-
-<script>
-export default {
-  name: 'UIKitPageIcon',
-  props: {
-    page: { type: Object, required: true },
-    size: { type: String, default: '1.25rem' },
-  },
-  computed: {
-    iconName() {
-      return this.isIndexPage ? 'home-4-line' : 'ri-file-line'
-    },
-    isIndexPage() {
-      return this.services.page.isIndex(this.page)
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/kit/pagination/button.vue

@@ -1,35 +0,0 @@
-<template>
-  <button
-    class="flex items-center justify-center h-6 w-6 text-sm rounded-sm"
-    :class="buttonClass"
-    @click="$emit('click', page)"
-  >
-    <slot>
-      {{ page }}
-    </slot>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'PageButton',
-  props: {
-    page: { required: true },
-    activePage: { type: Number },
-  },
-  computed: {
-    buttonClass() {
-      return {
-        'bg-white': !this.enabled,
-        'hover:bg-gray-100': !this.enabled,
-        'text-gray-900': !this.enabled,
-        'bg-editor-primary': this.enabled,
-        'text-white': this.enabled,
-      }
-    },
-    enabled() {
-      return this.page === this.activePage
-    },
-  },
-}
-</script>