maglevcms 2.1.0 → 3.0.0.beta2

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

@@ -1,59 +0,0 @@
-<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: 'UIKitCheckboxInput',
-  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/frontend/editor/components/kit/collection-item-input.vue

@@ -1,79 +0,0 @@
-<template>
-  <div>
-    <label class="block font-semibold text-gray-800" :for="name">
-      {{ label }}
-    </label>
-
-    <uikit-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(collectionId, { q })"
-      :clearEnabled="true"
-      buttonClass="h-10"
-      v-model="selectedCollectionItem"
-    >
-      <template v-slot:value>
-        <div
-          class="flex items-center flex-grow-0 overflow-x-hidden"
-          :title="selectedCollectionItem.label"
-        >
-          <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 class="truncate">{{ selectedCollectionItem.label }}</span>
-        </div>
-      </template>
-      <template v-slot:item="{ item }">
-        <div class="flex items-center" :title="item.label">
-          <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="truncate font-bold">{{ item.label }}</span>
-        </div>
-      </template>
-    </uikit-select-input>
-  </div>
-</template>
-
-<script>
-import { camelizeKeys } from '@/misc/utils'
-
-export default {
-  name: 'UIKitCollectionItemInput',
-  props: {
-    label: { type: String, default: 'Label' },
-    name: { type: String, default: 'image' },
-    value: { default: () => null },
-    collectionId: { type: String },
-    isFocused: { type: Boolean, default: false },
-  },
-  computed: {
-    selectedCollectionItem: {
-      get() {
-        return this.value === 'any' ? null : camelizeKeys(this.value)
-      },
-      set(collectionItem) {
-        this.$emit('input', collectionItem ? { ...collectionItem } : null)
-      },
-    },
-  },
-  watch: {
-    value: {
-      async handler(value) {
-        if (value === 'any')
-          this.selectedCollectionItem = await this.services.collectionItem.findOne(this.collectionId, 'any')
-      },
-      immediate: true,
-    },
-  }
-}
-</script>

data/app/frontend/editor/components/kit/color-input/core-input.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="relative">
-    <div
-      class="absolute left-3 top-2 w-6 h-6 rounded-sm border border-gray-200"
-      :class="{ 'bg-checkerboard': isTransparent }"
-      :style="{ 'background-color': styleRgbaColor }"
-    ></div>
-
-    <span class="absolute left-11 top-1.5 font-bold text-gray-900 text-lg"
-      >#</span
-    >
-
-    <input
-      :id="name"
-      type="text"
-      :value="inputColor"
-      @input="updateInput"
-      class="py-2 pl-14 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500 font-normal"
-      :class="{
-        'pr-8': hasPresets,
-        'pr-2': !hasPresets,
-      }"
-      autocomplete="off"
-      minlength="4"
-      maxlength="8"
-      size="7"
-    />
-
-    <preset-dropdown
-      v-model="updatableValue"
-      :presets="presets"
-      v-if="hasPresets"
-    />
-  </div>
-</template>
-
-<script>
-import PresetDropdown from './preset-dropdown.vue'
-
-import { colorVariableToHex, colorVariableToRgb } from '@/misc/utils'
-
-export default {
-  name: 'CoreInput',
-  components: { PresetDropdown },
-  props: {
-    name: { type: String, default: 'color' },
-    value: { type: String },
-    presets: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    inputColor() {
-      return this.hexColor?.replaceAll('#', '')
-    },
-    hexColor() {
-      return colorVariableToHex(this.value)
-    },
-    rgbColor() {
-      return colorVariableToRgb(this.value)
-    },
-    styleRgbaColor() {
-      const color = this.isTransparent
-        ? { r: 255, g: 255, b: 255 }
-        : this.rgbColor || { r: 0, g: 0, b: 0 }
-      return `rgba(${color.r}, ${color.g}, ${color.b}, 1)`
-    },
-    isTransparent() {
-      return this.value === ''
-    },
-    hasPresets() {
-      return this.presets && this.presets.length > 0
-    },
-    updatableValue: {
-      get() {
-        return this.value
-      },
-      set(color) {
-        this.$emit('input', color)
-      },
-    },
-  },
-  methods: {
-    updateInput(event) {
-      var value = event.target.value.replace('#', '')
-      if (value.length > 0) value = `#${value}`
-      this.$emit('input', value)
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/kit/color-input/preset-button.vue

@@ -1,61 +0,0 @@
-<template>
-  <div
-    class="self-center cursor-pointer p-0.5 rounded-sm"
-    @click="selectPreset"
-  >
-    <div
-      class="flex items-center justify-center w-6 h-6 rounded-sm transition transform duration-200 ease-in-out hover:scale-110 select-none text-white"
-      :class="{
-        'border border-gray-300 text-gray-800': isWhite,
-        'bg-checkerboard': isTransparent,
-      }"
-      :style="{ 'background-color': hexColor }"
-    >
-      <uikit-icon name="ri-check-line" size="1rem" v-if="selected" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { colorVariableToHex, colorVariableToRgb } from '@/misc/utils'
-
-export default {
-  name: 'PresetButton',
-  props: {
-    preset: { type: String },
-    value: { type: String },
-  },
-  computed: {
-    selected() {
-      return !!this.value && this.value.trim().toLowerCase() === this.hexColor
-    },
-    hexColor() {
-      return colorVariableToHex(this.preset)
-    },
-    rgbColor() {
-      return colorVariableToRgb(this.preset)
-    },
-    isWhite() {
-      if (!this.rgbColor) return true
-      return (
-        this.rgbColor.r === 255 &&
-        this.rgbColor.g === 255 &&
-        this.rgbColor.b === 255
-      )
-    },
-    isTransparent() {
-      return this.hexColor === ''
-    },
-    borderColor() {
-      if (!this.selected) return 'transparent'
-      let color = this.isWhite ? { r: 0, g: 0, b: 0 } : this.rgbColor
-      return `rgba(${color.r}, ${color.g}, ${color.b}, 0.40)`
-    },
-  },
-  methods: {
-    selectPreset() {
-      this.$emit('input', this.hexColor)
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/kit/color-input/preset-dropdown.vue

@@ -1,47 +0,0 @@
-<template>
-  <uikit-dropdown v-on="$listeners" class="absolute top-1.5 right-1">
-    <template v-slot:button>
-      <button
-        class="px-1 py-1 hover:text-gray-900 focus:outline-none transition-colors duration-200"
-      >
-        <uikit-icon name="ri-palette-line" size="1.25rem" />
-      </button>
-    </template>
-    <template v-slot:content>
-      <div class="flex flex-wrap gap-1">
-        <preset-button
-          v-for="preset in presets"
-          v-model="updatableValue"
-          :preset="preset"
-          :key="preset"
-        />
-      </div>
-    </template>
-  </uikit-dropdown>
-</template>
-
-<script>
-import PresetButton from './preset-button.vue'
-
-export default {
-  name: 'PresetDropdown',
-  components: { PresetButton },
-  props: {
-    value: { type: String },
-    presets: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    updatableValue: {
-      get() {
-        return this.value
-      },
-      set(color) {
-        this.$emit('input', color)
-      },
-    },
-  },
-}
-</script>

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

@@ -1,41 +0,0 @@
-<template>
-  <div class="pt-1">
-    <label
-      class="flex items-center justify-between font-semibold text-gray-800"
-      :for="name"
-      v-if="showLabel"
-    >
-      <span class="pr-2">{{ label }}</span>
-      <core-input :name="name" :presets="presets" v-model="updatableValue" />
-    </label>
-  </div>
-</template>
-
-<script>
-import CoreInput from '@/components/kit/color-input/core-input.vue'
-
-export default {
-  name: 'UIKitColorInput',
-  components: { CoreInput },
-  props: {
-    label: { type: String, default: 'Label' },
-    name: { type: String, default: 'color' },
-    presets: {
-      type: Array,
-      default: () => [],
-    },
-    value: { type: String },
-    showLabel: { type: Boolean, default: true },
-  },
-  computed: {
-    updatableValue: {
-      get() {
-        return this.value
-      },
-      set(color) {
-        this.$emit('input', color)
-      },
-    },
-  },
-}
-</script>

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

@@ -1,65 +0,0 @@
-<template>
-  <uikit-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>
-  </uikit-dropdown>
-</template>
-
-<script>
-export default {
-  name: 'UIKitConfirmationButton',
-  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/frontend/editor/components/kit/copy-paste-button.vue

@@ -1,26 +0,0 @@
-<template>
-  <button @click.stop.prevent="copyToClipboard">
-    <uikit-icon name="clipboard-line" size="0.75rem" v-if="!copied" class="text-gray-500 hover:text-gray-900 transition-colors duration-200" />
-    <uikit-icon name="ri-check-line" size="0.75rem" class="text-green-500" v-else />
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'CopyPasteButton',
-  props: {
-    textToCopy: { type: String, required: true },
-  },
-  data() {
-    return { copied: false }
-  },
-  methods: {
-    copyToClipboard() {
-      this.copied = true
-      navigator.clipboard.writeText(this.textToCopy)
-      const timeout = setTimeout((() => { this.copied = false }).bind(this), 2000)
-      this.$once('hook:beforeDestroy', () => clearTimeout(timeout))
-    },
-  },
-}
-</script>

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

@@ -1,22 +0,0 @@
-<template>
-  <div :class="{ 'pt-4': withHint, 'pt-4 pb-2': !withHint }">
-    <div class="relative">
-      <div class="absolute inset-0 flex items-center" aria-hidden="true">
-        <div class="w-full border-t border-gray-200"></div>
-      </div>
-      <div class="relative flex justify-center">
-        <span class="bg-white px-3 leading-6 text-gray-800">{{ text }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'UIKitDivider',
-  props: {
-    text: { type: String, default: 'Text goes here' },
-    withHint: { type: Boolean, default: false },
-  },
-}
-</script>

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

@@ -1,66 +0,0 @@
-<template>
-  <v-popoper
-    trigger="manual"
-    :autoHide="true"
-    :open="open"
-    :placement="placement"
-    class="flex"
-    v-on:auto-hide="close"
-    :popoverClass="popoverClass"
-  >
-    <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: 'UIKitDropdown',
-  props: {
-    placement: {
-      type: String,
-      default: 'bottom',
-      validator: (value) =>
-        ['top', 'bottom', 'right', 'left'].indexOf(value) !== -1,
-    },
-    popoverClass: {
-      type: String,
-      default: ''
-    }
-  },
-  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/frontend/editor/components/kit/hint.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="text-gray-600 text-sm">{{ text }}</div>
-</template>
-
-<script>
-export default {
-  name: 'UIKitHint',
-  props: {
-    text: { type: String, default: 'Hint goes here' },
-  },
-}
-</script>

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

@@ -1,24 +0,0 @@
-<template>
-  <button
-    class="h-7 w-7 flex items-center justify-center rounded-full focus:outline-none transition-colors duration-200"
-    :class="{ 
-      'bg-gray-600 text-gray-200 hover:bg-gray-900 hover:text-gray-100': dark, 
-      'bg-gray-600 bg-opacity-0 hover:text-gray-900 text-gray-800 hover:bg-opacity-10': !dark 
-    }"
-    v-on="$listeners"
-    v-bind="$attrs"
-  >
-    <uikit-icon :name="iconName" size="1.15rem" />
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'UIKitIconButton',
-  inheritAttrs: false,
-  props: {
-    iconName: { type: String, required: true },
-    dark: { type: Boolean, default: false },
-  },
-}
-</script>