maglevcms 2.1.0 → 3.0.0.beta1

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

@@ -1,187 +0,0 @@
-<template>
-  <div>
-    <div
-      class="block font-semibold text-gray-800"
-      :for="name"
-      @click="focus()"
-    >
-      {{ label }}
-    </div>
-    <div class="mt-1">
-      <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-        <div class="flex sticky top-0 z-10 pb-2 bg-white space-x-1 overflow-x-auto">
-          <editor-block-button
-            :commands="commands"
-            :isActive="isActive"
-            class="relative"
-            v-if="!lineBreak"
-          />
-
-          <editor-format-buttons 
-            :commands="commands" 
-            :isActive="isActive"
-            :extraExtensions="extraExtensions"
-          />
-
-          <editor-list-buttons
-            :commands="commands"
-            :isActive="isActive"
-            v-if="!lineBreak"
-          />
-
-          <editor-link-buttons
-            :editor="editor"
-            :commands="commands"
-            :isActive="isActive"
-          />
-
-          <editor-table-button
-            :commands="commands"
-            :isActive="isActive"
-            class="relative"
-            v-if="!lineBreak && extraExtensions.table"
-          />
-        </div>
-      </editor-menu-bar>
-      <div ref="editorWrapper" class="mt-1">
-        <editor-content
-          :editor="editor"
-          class="rich-text-editor"
-          :data-rows="rows"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import FocusedInputMixin from '@/mixins/focused-input'
-import { Editor, EditorContent, EditorMenuBar, Text, Paragraph } from 'tiptap'
-import {
-  Blockquote,
-  CodeBlock,
-  HardBreak,
-  Heading,
-  OrderedList,
-  BulletList,
-  ListItem,
-  Bold,
-  Italic,
-  Strike,
-  Underline,
-  History,
-  Table,
-  TableHeader,
-  TableCell,
-  TableRow
-} from 'tiptap-extensions'
-import Doc from './rich-text-input/extensions/Doc'
-import LineBreak from './rich-text-input/extensions/LineBreak'
-import Link from './rich-text-input/extensions/marks/Link'
-import Superscript from './rich-text-input/extensions/marks/Superscript'
-import EditorBlockButton from './rich-text-input/block-button.vue'
-import EditorFormatButtons from './rich-text-input/format-buttons.vue'
-import EditorListButtons from './rich-text-input/list-buttons.vue'
-import EditorLinkButtons from './rich-text-input/link-buttons.vue'
-import EditorTableButton from './rich-text-input/table-button.vue'
-
-export default {
-  name: 'UIKitRichTextInput',
-  mixins: [FocusedInputMixin],
-  components: {
-    EditorContent,
-    EditorMenuBar,
-    EditorBlockButton,
-    EditorFormatButtons,
-    EditorListButtons,
-    EditorLinkButtons,
-    EditorTableButton,
-  },
-  props: {
-    label: { type: String, default: 'Label' },
-    name: { type: String, default: 'text' },
-    value: { type: String },
-    lineBreak: { type: Boolean, default: false },
-    rows: { type: Number, default: 2 },
-    extraExtensions: { type: Object, default: () => ({ table: false, superscript: false }) },
-  },
-  data() {
-    return { editor: null }
-  },
-  mounted() {
-    this.editor = new Editor({
-      extensions: this.buildExtensions(),
-      useBuiltInExtensions: !this.lineBreak,
-      content: this.value,
-      onUpdate: ({ getHTML }) => {
-        let content = getHTML()
-        content = this.lineBreak
-          ? this.getHTMLWithinParagraph(content)
-          : content
-        this.$emit('input', content)
-      },
-      onBlur: () => this.blur(),
-    })
-  },
-  beforeDestroy() {
-    // insert a empty div in place of the editor content component
-    // to avoid the flickering when closing the slide-pane
-    let rect = this.editor.view.dom.getBoundingClientRect()
-    let div = document.createElement('div')
-    div.classList.add('py-2', 'px-3', 'rounded', 'bg-gray-100') // .ProseMirror
-    div.style.height = `${rect.height}px`
-    div.style.width = '100%'
-    this.$refs.editorWrapper.appendChild(div)
-
-    // clean stuff
-    this.editor.destroy()
-  },
-  methods: {
-    focus() {
-      this.editor.focus('end')
-      // NOTE: if lineBreak is true, focus('end') will throw an exception
-      // when pressing the ENTER key.
-      if (this.lineBreak) {
-        const { from, to } = this.editor.resolveSelection('end')
-        this.editor.setSelection(from - 1, to - 1)
-      }
-    },
-    getHTMLWithinParagraph(content) {
-      return content.replace(/<\/?p>/g, '')
-    },
-    buildDefaultExtensions() {
-      return [
-        new Bold(),
-        new Italic(),
-        new Underline(),
-        new Strike(),
-        new Link({ openOnClick: false, target: null }),
-        new Superscript(),
-        new History(),
-      ]
-    },
-    buildExtensions() {
-      if (this.lineBreak) {
-        return [].concat(
-          [new Doc(), new Text(), new Paragraph(), new LineBreak()],
-          this.buildDefaultExtensions(),
-        )
-      } else {
-        return [].concat(this.buildDefaultExtensions(), [
-          new HardBreak(),
-          new Heading({ levels: [2, 3] }),
-          new Blockquote(),
-          new CodeBlock(),
-          new BulletList(),
-          new ListItem(),
-          new OrderedList(),
-          new Table({ resizable: true }),
-          new TableHeader(),
-          new TableCell(),
-          new TableRow(),
-        ])
-      }
-    },
-  },
-}
-</script>

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

@@ -1,54 +0,0 @@
-<template>
-  <form
-    @submit.stop.prevent="search"
-    class="flex items-center py-2 px-4 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring"
-  >
-    <button class="mr-2" type="submit">
-      <uikit-icon name="search-line" class="text-gray-500" />
-    </button>
-
-    <input
-      name="search-input"
-      type="text"
-      v-model="query"
-      class="block w-full border-0 bg-transparent focus:outline-none placeholder-gray-500"
-      :placeholder="placeholder"
-      :aria-label="placeholder"
-    />
-
-    <button
-      class="ml-1 text-gray-500"
-      :class="{ invisible: !query }"
-      @click.stop.prevent="reset"
-      type="button"
-    >
-      <uikit-icon name="close-line" />
-    </button>
-  </form>
-</template>
-
-<script>
-export default {
-  name: 'UIKitSearchInput',
-  props: {
-    placeholder: { type: String, default: 'Type your query here' },
-  },
-  data() {
-    return {
-      query: null,
-    }
-  },
-  methods: {
-    search() {
-      const cleanQuery =
-        (this.query || '').trim().length > 0 ? this.query.trim() : null
-      // console.log(`searching for ${cleanQuery}`);
-      this.$emit('search', cleanQuery)
-    },
-    reset() {
-      this.query = null
-      this.$emit('search', null)
-    },
-  },
-}
-</script>

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

@@ -1,200 +0,0 @@
-<template>
-  <div>
-    <div
-      class="block font-semibold text-gray-800"
-      @click="focus()"
-      v-if="withLabel"
-    >
-      {{ label }}
-    </div>
-    <div class="relative">
-      <button
-        class="text-left block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring"
-        type="button"
-        @click="toggle"
-      >
-        <div class="flex items-center" :class="buttonClass">
-          <slot name="value" v-if="value"></slot>
-          <span v-else>{{ placeholder }}</span>
-          <button
-            type="button"
-            class="ml-auto flex-shrink-0"
-            @click.stop.prevent="clear"
-            v-if="canClear"
-          >
-            <uikit-icon name="ri-close-line" />
-          </button>
-          <div
-            :class="{
-              'flex-shrink-0': true,
-              'ml-1': canClear,
-              'ml-auto': !canClear,
-            }"
-          >
-            <uikit-icon
-              name="arrow-up-s-line"
-              size="1.5rem"
-              :class="{ hidden: !isOpen }"
-            />
-            <uikit-icon
-              name="arrow-down-s-line"
-              size="1.5rem"
-              :class="{ hidden: isOpen }"
-            />
-          </div>
-        </div>
-      </button>
-      <div
-        class="absolute w-full z-20 -mt-1 rounded-b shadow-sm bg-gray-100"
-        @keydown="naviguate"
-        v-if="isOpen"
-      >
-        <div class="px-3 pt-1 pb-3" v-if="searchEnabled">
-          <input
-            :id="name"
-            class="block mt-1 px-3 py-1 w-full border rounded border-gray-300 bg-gray-100 placeholder-gray-500 focus:ring focus:ring"
-            type="text"
-            v-model="q"
-            :placeholder="searchPlaceholder"
-            ref="input"
-            autocomplete="off"
-          />
-        </div>
-
-        <div class="px-4 pb-3 text-gray-600 text-sm" v-if="isEmpty">
-          {{ emptyLabel }}
-        </div>
-
-        <div v-if="list" :class="listClass">
-          <div
-            v-for="(item, index) in list"
-            :key="item.id"
-            class="py-1 px-4 cursor-pointer"
-            :class="{
-              'rounded-b': index === list.length - 1,
-              'bg-editor-primary text-white': index === focusIndex,
-            }"
-            @mouseover="focusIndex = index"
-            @mouseleave="focusIndex = undefined"
-            @click="select(item)"
-          >
-            <slot
-              name="item"
-              v-bind:item="item"
-              v-bind:hovered="index === focusIndex"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { debounce } from '@/misc/utils'
-
-export default {
-  name: 'UIKitSelectInput',
-  props: {
-    label: { type: String, default: 'Label' },
-    name: { type: String, default: 'text' },
-    placeholder: { type: String, default: 'Select an item' },
-    searchEnabled: { type: Boolean, default: false },
-    searchPlaceholder: { type: String, default: 'Search...' },
-    value: { type: Object, default: null },
-    fetchList: { type: Function, default: () => ({}) },
-    emptyLabel: { type: String, default: 'No results found' },
-    clearEnabled: { type: Boolean, default: false },
-    withLabel: { type: Boolean, default: true },
-    buttonClass: { type: [Object, String], default: () => ({}) },
-    listClass: { type: [Object, String], default: () => ({}) },
-  },
-  data() {
-    return {
-      isOpen: false,
-      q: undefined,
-      list: undefined,
-      focusIndex: undefined,
-    }
-  },
-  created() {
-    this.debouncedFetch = debounce(this.fetch.bind(this), 300)
-  },
-  computed: {
-    canClear() {
-      return this.clearEnabled && this.value
-    },
-    isEmpty() {
-      return this.list && this.list.length === 0
-    },
-  },
-  methods: {
-    focus() {
-      this.toggle();
-    },
-    toggle() {
-      this.isOpen = !this.isOpen
-    },
-    fetch() {
-      this.fetchList(this.q).then((list) => {
-        this.list = list
-        this.focusIndex = list && list.length > 0 ? 0 : null
-      })
-    },
-    select(value) {
-      this.$emit('input', value)
-      this.reset()
-    },
-    clear() {
-      this.$emit('input', null)
-      this.reset()
-    },
-    naviguate(event) {
-      if (!this) return
-      switch (event.keyCode) {
-        case 13:
-          if (this.focusIndex !== undefined) {
-            this.select(this.list[this.focusIndex])
-          }
-          event.stopPropagation() & event.preventDefault()
-          break
-        case 38:
-          if (!this.focusIndex) {
-            this.focusIndex = 0
-          } else if (this.focusIndex > 0) {
-            this.focusIndex--
-          }
-          event.stopPropagation() & event.preventDefault()
-          break
-        case 40:
-          if (!this.focusIndex) {
-            this.focusIndex = 0
-          } else if (this.focusIndex < this.list.length - 1) {
-            this.focusIndex++
-          }
-          event.stopPropagation() & event.preventDefault()
-          break
-      }
-    },
-    reset() {
-      this.isOpen = false
-      this.q = null
-      this.list = undefined
-      this.focusIndex = undefined
-    },
-  },
-  watch: {
-    q() {
-      if (!this.q) return
-      this.debouncedFetch()
-    },
-    isOpen() {
-      if (this.isOpen)
-        this.$nextTick(() => {
-          if (this.searchEnabled) this.$refs.input.focus()
-          else this.debouncedFetch()
-        })
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/kit/simple-select.vue

@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <label class="block font-semibold text-gray-800" :for="name">
-      {{ label }}
-    </label>
-    <div class="flex gap-2 mt-1">
-      <select
-        v-model="selectedOption"
-        class="block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500"
-      >
-        <option
-          v-for="(option, index) in selectOptions"
-          :key="index"
-          :value="getOptionValue(option)"
-        >
-          {{ getOptionLabel(option) }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'UIKitSimpleSelect',
-  props: {
-    label: { type: String, default: 'Label' },
-    name: { type: String, default: 'select' },
-    value: { type: String },
-    selectOptions: {
-      type: Array,
-      default: function () {
-        return []
-      },
-    },
-    i18nScope: { type: String, default: 'support.simpleSelect' },
-  },
-  computed: {
-    selectedOption: {
-      get() {
-        return this.value
-      },
-      set(option) {
-        this.$emit('input', option)
-      },
-    },
-  },
-  methods: {
-    getOptionLabel(option) {
-      const value = this.getOptionValue(option)
-      const i18nKey = `${this.i18nScope}.${this.name}_options.${value}`
-      const translatedLabel = this.$st(i18nKey)
-
-      if (!this.isBlank(translatedLabel)) return translatedLabel
-
-      return typeof option === 'string' ? option : option.label
-    },
-    getOptionValue(option) {
-      return (typeof option === 'string') ? option : option.value
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/kit/submit-button.vue

@@ -1,117 +0,0 @@
-<template>
-  <button
-    :type="type"
-    :class="{ [buttonClass]: true }"
-    :disabled="disabled || isInProgressState"
-    @click="click"
-  >
-    <span v-if="isDefaultState" data-button-label>{{ defaultLabel }}</span>
-
-    <span v-if="isInProgressState" class="flex items-center justify-center">
-      <uikit-icon name="ri-loader-4-line" spin color="#fff" key="progress" />
-      <span class="ml-2" data-button-label>{{ inProgressLabel }}</span>
-    </span>
-
-    <span v-if="isSuccessState" class="flex items-center justify-center">
-      <uikit-icon name="ri-check-line" color="#fff" key="success" />
-      <span class="ml-2" data-button-label>{{ successLabel }}</span>
-    </span>
-
-    <span v-if="isFailState" class="flex items-center justify-center">
-      <uikit-icon name="ri-alert-line" color="#fff" key="fail" />
-      <span class="ml-2" data-button-label>{{ failLabel }}</span>
-    </span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'UIKitSubmitButton',
-  props: {
-    type: {
-      type: String,
-      default: 'submit',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    labels: {
-      type: Object,
-      default: undefined,
-    },
-    buttonState: {
-      type: String,
-      default: 'default',
-    },
-    defaultColorClass: {
-      type: String,
-      default: 'bg-gray-700',
-    },
-  },
-  data() {
-    return {
-      internalButtonState: 'default',
-      timeout: undefined,
-    }
-  },
-  computed: {
-    isDefaultState() {
-      return this.internalButtonState === 'default'
-    },
-    defaultLabel() {
-      return this.labels?.default || 'Submit'
-    },
-    isInProgressState() {
-      return this.internalButtonState === 'inProgress'
-    },
-    inProgressLabel() {
-      return this.labels?.inProgress || 'Loading'
-    },
-    isSuccessState() {
-      return this.internalButtonState === 'success'
-    },
-    successLabel() {
-      return this.labels?.success || 'Success!'
-    },
-    isFailState() {
-      return this.internalButtonState === 'fail'
-    },
-    failLabel() {
-      return this.labels?.fail || 'Failure!'
-    },
-    buttonClass() {
-      switch (this.internalButtonState) {
-        case 'default':
-          return this.defaultColorClass
-        case 'inProgress':
-          return `${this.defaultColorClass} bg-opacity-75`
-        case 'success':
-          return 'bg-green-500'
-        case 'fail':
-          return 'bg-red-600'
-      }
-      return ''
-    },
-  },
-  methods: {
-    click() {
-      if (this.type === 'button' && this.isDefaultState) this.$emit('click')
-    },
-  },
-  watch: {
-    buttonState: {
-      immediate: true,
-      handler(newValue) {
-        this.internalButtonState = newValue
-        if (newValue === 'success' || newValue === 'fail') {
-          if (this.timeout) clearTimeout(this.timeout)
-          this.timeout = setTimeout(() => {
-            this.internalButtonState = 'default'
-          }, 3000)
-        }
-      },
-    },
-  },
-}
-</script>