maglevcms 2.1.0 → 3.0.0.beta1

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

@@ -1,99 +0,0 @@
-<template>
-  <div
-    class="flex flex-col flex-1"
-    :class="{ 'overflow-y-hidden': enableOverflow }"
-  >
-    <nav class="flex flex-col sm:flex-row" :class="{
-      [sharedClass]: !isBlank(sharedClass),
-      [navClass]: !isBlank(navClass)
-    }">
-      <button
-        v-for="(tab, index) in tabs"
-        :key="`tab-${index}`"
-        type="button"
-        class="py-1 pb-0 px-4 block hover:text-editor-primary focus:outline-none border-b-2 z-10"
-        :class="{
-          'text-gray-500 border-transparent': index !== currentIndex,
-          'text-editor-primary font-medium border-editor-primary':
-            index === currentIndex,
-        }"
-        @click="selectTab(index)"
-      >
-        {{ tab.name }}
-      </button>
-    </nav>
-    <div class="relative -mt-1/2" :class="{
-      [sharedClass]: !isBlank(sharedClass),
-      [navClass]: !isBlank(navClass)
-    }">
-      <div class="w-full border-gray-200 border-t-2 h-0"></div>
-    </div>
-    <div
-      class="flex-1 mt-4 pb-4"
-      :class="{
-        [sharedClass]: !isBlank(sharedClass),
-        [panelClass]: !isBlank(panelClass),
-        'overflow-y-auto': enableOverflow,
-      }"
-    >
-      <transition :name="slideDirection" mode="out-in">
-        <component
-          :is="currentTabComponent"
-          :key="currentTabKey"
-          v-on="$listeners"
-          v-bind="{ ...otherProps, ...currentTabProps }"
-          class="px-1"
-        />
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'UIKitTabs',
-  props: {
-    tabs: { type: Array, default: () => [] },
-    firstIndex: { type: Number, default: 0 },
-    otherProps: { type: Object, default: () => ({}) },
-    navClass: { type: String, default: null },
-    panelClass: { type: String, default: null },
-    sharedClass: { type: String, default: null },
-    enableOverflow: { type: Boolean, default: true },
-  },
-  data() {
-    return { currentIndex: 0, slideDirection: null }
-  },
-  computed: {
-    currentTab() {
-      return this.tabs[this.currentIndex]
-    },
-    currentTabComponent() {
-      return this.currentTab.tab
-    },
-    currentTabKey() {
-      return this.currentTab.type
-    },
-    currentTabProps() {
-      return this.currentTab.props ? this.currentTab.props() : {}
-    },
-  },
-  methods: {
-    selectTab(index) {
-      this.currentIndex = index
-      this.$emit('select-tab', index)
-    },
-  },
-  watch: {
-    firstIndex: {
-      immediate: true,
-      handler() {
-        this.currentIndex = this.firstIndex
-      },
-    },
-    currentIndex(newIndex, oldIndex) {
-      this.slideDirection = newIndex > oldIndex ? 'slide-left' : 'slide-right'
-    },
-  },
-}
-</script>

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

@@ -1,63 +0,0 @@
-<template>
-  <div class="space-y-1 flex flex-col">
-    <label
-      class="block font-semibold text-gray-800"
-      :for="name"
-      v-if="showLabel"
-    >
-      <span>{{ label }}</span>
-      <transition name="fade">
-        <span
-          class="text-red-700 bg-red-100 text-xs ml-4 py-1 px-3 rounded"
-          v-if="showError"
-          >{{ error[0] }}
-        </span>
-      </transition>
-    </label>
-    <input
-      :id="name"
-      type="text"
-      :value="value"
-      :placeholder="placeholder"
-      @blur="blur()"
-      @input="updateInput"
-      class="block py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500"
-      autocomplete="off"
-      ref="input"
-    />
-  </div>
-</template>
-
-<script>
-import FocusedInputMixin from '@/mixins/focused-input'
-
-export default {
-  name: 'UIKitTextInput',
-  mixins: [FocusedInputMixin],
-  props: {
-    label: { type: String, default: 'Label' },
-    name: { type: String, default: 'text' },
-    value: { type: String },
-    placeholder: { type: String, default: null },
-    showLabel: { type: Boolean, default: true },
-    error: { type: Array, default: null },
-  },
-  data() {
-    return { showError: false }
-  },
-  methods: {
-    updateInput(event) {
-      this.showError = false
-      this.$emit('input', event.target.value)
-    },
-    focus() {
-      this.$refs.input.focus()
-    },
-  },
-  watch: {
-    error() {
-      if (!this.isBlank(this.error)) this.showError = true
-    },
-  },
-}
-</script>

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

@@ -1,61 +0,0 @@
-<template>
-  <div class="space-y-1 flex flex-col">
-    <label
-      :for="name"
-      class="block font-semibold text-gray-800 flex justify-between items-center"
-    >
-      <span>{{ label }}</span>
-      <span
-        v-if="maxLength"
-        class="text-xs"
-        :class="{
-          'text-red-600': isOverMaxLength,
-          'text-gray-600': !isOverMaxLength,
-        }"
-        >{{ numCharacters }} / {{ maxLength }}</span
-      >
-    </label>
-    <textarea
-      :id="name"
-      :value="value"
-      @blur="blur()"
-      @input="updateInput"
-      class="block mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring"
-      autocomplete="off"
-      ref="input"
-      :rows="rows"
-    />
-  </div>
-</template>
-
-<script>
-import FocusedInputMixin from '@/mixins/focused-input'
-
-export default {
-  name: 'UIKitTextInput',
-  mixins: [FocusedInputMixin],
-  props: {
-    label: { type: String, default: 'Label' },
-    name: { type: String, default: 'text' },
-    value: { type: String },
-    maxLength: { type: Number, default: null },
-    rows: { type: Number, default: 2 },
-  },
-  computed: {
-    numCharacters() {
-      return (this.value || '').length
-    },
-    isOverMaxLength() {
-      return this.numCharacters > this.maxLength
-    },
-  },
-  methods: {
-    updateInput(event) {
-      this.$emit('input', event.target.value)
-    },
-    focus() {
-      this.$refs.input.focus()
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/link-picker/actions.vue

@@ -1,32 +0,0 @@
-<template>
-  <div class="mt-10 flex flex-col px-1">
-    <button
-      class="big-submit-button bg-editor-primary"
-      type="button"
-      :disabled="disabled"
-      @click="$emit('select', link)"
-    >
-      {{ $t(`${i18nScope}.mainButton.${mode}`) }}
-    </button>
-
-    <button class="cancel-button" type="button" @click="$emit('on-close')">
-      {{ $t(`${i18nScope}.cancelButton`) }}
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LinkPickerActions',
-  props: {
-    link: { type: Object, required: true },
-    mode: { type: String, default: 'select' },
-    disabled: { type: Boolean, default: true },
-  },
-  computed: {
-    i18nScope() {
-      return 'linkPicker.shared'
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/link-picker/email.vue

@@ -1,32 +0,0 @@
-<template>
-  <div>
-    <uikit-text-input
-      :label="$t(`linkPicker.email.input.label`)"
-      name="email"
-      v-model="emailInput"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LinkEmailPicker',
-  props: {
-    currentLink: { type: Object, default: undefined },
-  },
-  computed: {
-    emailInput: {
-      get() {
-        return this.currentLink.email
-      },
-      set(email) {
-        this.$emit('change', {
-          ...this.currentLink,
-          email,
-          href: `mailto:${email}`,
-        })
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/link-picker/index.vue

@@ -1,97 +0,0 @@
-<template>
-  <div class="flex flex-col h-full">
-    <uikit-tabs
-      :tabs="tabs"
-      :firstIndex="firstTabIndex"
-      :otherProps="{ currentLink: link }"
-      navClass="px-1"
-      :enableOverflow="false"
-      @select-tab="onTabSelected"
-      @change="onChange"
-    />
-
-    <picker-actions
-      :link="link"
-      :mode="mode"
-      :disabled="!isValid"
-      v-on="$listeners"
-    />
-  </div>
-</template>
-
-<script>
-import PickerActions from './actions.vue'
-import PagePicker from './page.vue'
-import UrlPicker from './url.vue'
-import EmailPicker from './email.vue'
-
-export default {
-  name: 'LinkPicker',
-  components: { PickerActions },
-  props: {
-    currentLink: { type: Object, default: undefined },
-    mode: { type: String, default: 'select' },
-  },
-  data() {
-    return { linkType: null, linksByTypes: {} }
-  },
-  computed: {
-    tabs() {
-      return [
-        {
-          name: this.$t('linkPicker.page.name'),
-          tab: PagePicker,
-          type: 'page',
-          subType: 'static_page',
-        },
-        { name: this.$t('linkPicker.url.name'), tab: UrlPicker, type: 'url' },
-        {
-          name: this.$t('linkPicker.email.name'),
-          tab: EmailPicker,
-          type: 'email',
-        },
-      ]
-    },
-    firstTabIndex() {
-      return this.tabs.findIndex(
-        (tab) => this.linkType === tab.type || this.linkType === tab.subType,
-      )
-    },
-    link() {
-      return (
-        this.linksByTypes[this.linkType] || {
-          linkType: this.linkType,
-          linkId: null,
-          href: null,
-          email: null,
-          openNewWindow: false,
-        }
-      )
-    },
-    isValid() {
-      return this.link && !this.isBlank(this.link.href)
-    },
-  },
-  methods: {
-    onTabSelected(index) {
-      this.linkType = this.tabs[index].type
-    },
-    onChange(link) {
-      const linkType = link.linkType || this.linkType
-      this.linksByTypes = {
-        ...this.linksByTypes,
-        [this.linkType]: { ...link, linkType },
-      }
-    },
-  },
-  watch: {
-    currentLink: {
-      immediate: true,
-      handler(link) {
-        this.linkType = link?.linkType || 'url'
-        this.linksByTypes[this.linkType] = link
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/link-picker/page.vue

@@ -1,126 +0,0 @@
-<template>
-  <div>
-    <uikit-select-input
-      :label="$t(`linkPicker.page.input.label`)"
-      :placeholder="$t(`linkPicker.page.input.placeholder`)"
-      :searchEnabled="true"
-      :searchPlaceholder="$t(`linkPicker.page.input.searchPlaceholder`)"
-      :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 }}
-      </template>
-      <template v-slot:item="{ item, hovered }">
-        <div class="flex items-center">
-          <span class="font-bold">{{ item.title }}</span>
-          <span
-            class="ml-auto"
-            :class="{ 'text-gray-500': !hovered, 'text-white': hovered }"
-          >
-            {{ item.path | formatPath }}
-          </span>
-        </div>
-      </template>
-    </uikit-select-input>
-
-    <div class="mt-6" v-if="hasPageSections">
-      <uikit-select-input
-        :label="$t(`linkPicker.page.sectionInput.label`)"
-        :placeholder="$t(`linkPicker.page.sectionInput.placeholder`)"
-        :emptyLabel="$t(`linkPicker.page.sectionInput.emptyLabel`)"
-        :fetchList="() => fetchPageSectionNames()"
-        :clearEnabled="true"
-        v-model="pageSection"
-        listClass="overflow-y-scroll h-48"
-      >
-        <template v-slot:value>
-          {{ pageSection.name }}
-        </template>
-        <template v-slot:item="{ item }">
-          <div class="flex items-center">
-            <span class="font-bold">{{ item.name }}</span>
-          </div>
-        </template>
-      </uikit-select-input>
-    </div>
-
-    <uikit-checkbox-input
-      :label="$t(`linkPicker.shared.newWindowInput.label`)"
-      name="openNewWindow"
-      class="mt-6"
-      v-model="openNewWindowInput"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LinkPagePicker',
-  props: {
-    currentLink: { type: Object, default: undefined },
-  },
-  data() {
-    return { page: null, pageSection: null }
-  },
-  computed: {
-    openNewWindowInput: {
-      get() {
-        return this.currentLink.openNewWindow
-      },
-      set(openNewWindow) {
-        this.$emit('change', { ...this.currentLink, openNewWindow })
-      },
-    },
-    hasPageSections() {
-      return !this.isBlank(this.page?.sectionNames)
-    },
-  },
-  methods: {
-    async fetchPageSectionNames() {
-      return this.page.sectionNames
-    },
-  },
-  watch: {
-    currentLink: {
-      immediate: true,
-      async handler(currentLink) {
-        if (
-          !currentLink ||
-          (currentLink.linkType !== 'page' &&
-            currentLink.linkType !== 'static_page') ||
-          this.isBlank(currentLink.linkId) ||
-          currentLink.linkId === this.page?.id
-        )
-          return
-        this.page = await this.services.page.findById(
-          this.currentSite,
-          currentLink.linkId,
-        )
-        if (this.page)
-          this.pageSection = this.page.sectionNames.find(
-            (item) => item.id === currentLink.sectionId,
-          )
-      },
-    },
-    page(page) {
-      this.$emit('change', {
-        ...this.currentLink,
-        linkType: page.static ? 'static_page' : 'page',
-        linkId: page.id,
-        linkLabel: page.title,
-        sectionId: null,
-        href: `/${page.path}`,
-      })
-    },
-    pageSection(pageSection) {
-      this.$emit('change', {
-        ...this.currentLink,
-        sectionId: pageSection?.id || null,
-      })
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/link-picker/url.vue

@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <uikit-text-input
-      :label="$t(`linkPicker.url.input.label`)"
-      name="href"
-      v-model="hrefInput"
-    />
-
-    <uikit-checkbox-input
-      :label="$t(`linkPicker.shared.newWindowInput.label`)"
-      name="openNewWindow"
-      class="mt-6"
-      v-model="openNewWindowInput"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LinkUrlPicker',
-  props: {
-    currentLink: { type: Object, default: undefined },
-  },
-  computed: {
-    hrefInput: {
-      get() {
-        return this.currentLink.href
-      },
-      set(href) {
-        this.$emit('change', { ...this.currentLink, href })
-      },
-    },
-    openNewWindowInput: {
-      get() {
-        return this.currentLink.openNewWindow
-      },
-      set(openNewWindow) {
-        this.$emit('change', { ...this.currentLink, openNewWindow })
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/page/edit.vue

@@ -1,99 +0,0 @@
-<template>
-  <div class="flex flex-col flex-1 overflow-y-hidden">
-    <uikit-tabs
-      :tabs="tabs"
-      :otherProps="{ page: editedPage, errors }"
-      :navClass="!insideModal ? 'mx-4' : 'mx-1'"
-      :panelClass="!insideModal ? 'mx-3' : ''"
-      class="overflow-y-hidden pb-4"
-      @on-change="onChange"
-    />
-    <div class="mt-auto" :class="{ 'mx-4': !insideModal }">
-      <uikit-submit-button
-        type="button"
-        class="big-submit-button"
-        defaultColorClass="bg-editor-primary"
-        :labels="$t('page.edit.submitButton')"
-        :buttonState="submitState"
-        @click="updatePage"
-      >
-        {{ $t('page.edit.submitButton') }}
-      </uikit-submit-button>
-      <button
-        class="cancel-button"
-        v-if="insideModal"
-        @click="$emit('on-close')"
-      >
-        {{ $t('page.edit.cancelButton') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-import MainForm from './form/main.vue'
-import SEOForm from './form/seo.vue'
-
-export default {
-  name: 'EditPage',
-  props: {
-    page: { type: Object, required: true },
-    insideModal: { type: Boolean, default: false },
-  },
-  data() {
-    return { editedPage: null, errors: {}, submitState: 'default' }
-  },
-  computed: {
-    tabs() {
-      return [
-        {
-          name: this.$t('page.form.tabs.main'),
-          tab: MainForm,
-          type: 'main',
-        },
-        {
-          name: this.$t('page.form.tabs.seo'),
-          tab: SEOForm,
-          type: 'seo',
-        },
-      ]
-    },
-  },
-  methods: {
-    updatePage() {
-      this.submitState = 'inProgress'
-      const { id: pageId, ...attributes } = this.editedPage
-      this.services.page
-        .updateSettings(pageId, {
-          ...attributes,
-          lockVersion: this.page.lockVersion,
-        })
-        .then(({ headers }) => {
-          this.submitState = 'success'
-          this.$emit('on-update', {
-            ...attributes,
-            lockVersion: headers['page-lock-version'],
-          })
-        })
-        .catch(({ response: { status, data } }) => {
-          console.log('[Maglev] could not update the page', status)
-          this.submitState = 'fail'
-          if (status === 409) this.openErrorModal('staleRecord')
-          if (status !== 400) return
-          this.errors = data.errors
-        })
-    },
-    onChange(changes) {
-      this.editedPage = { ...this.editedPage, ...changes }
-    },
-  },
-  watch: {
-    page: {
-      immediate: true,
-      handler() {
-        this.editedPage = { ...this.page }
-      },
-    },
-  },
-}
-</script>