maglevcms 2.1.0 → 3.0.0.beta2

data/app/frontend/editor/components/section-pane/block-list/list-item.vue

@@ -1,74 +0,0 @@
-<template>
-  <div
-    class="bg-gray-100 rounded-md pr-2 flex items-center text-gray-800"
-    :class="{ 'pl-4': !isList }"
-  >
-    <div class="flex flex-col cursor-move px-2 py-3" v-if="isList">
-      <uikit-icon name="ri-draggable" />
-    </div>
-    <router-link
-      :to="{
-        name: 'editSectionBlock',
-        params: { sectionBlockId: sectionBlock.id },
-      }"
-      class="flex items-center py-3 overflow-hidden"
-    >
-      <div class="h-8 w-8 bg-gray-400 mr-3" v-if="image">
-        <img
-          :src="image"
-          class="object-cover w-full h-full"
-          :class="{ hidden: !imageLoaded }"
-          @load="() => (imageLoaded = true)"
-        />
-      </div>
-      <span class="truncate">{{ label | truncate(40) }}</span>
-    </router-link>
-    <div class="flex items-center ml-auto pl-2">
-      <slot name="actions"></slot>
-      <uikit-confirmation-button
-        @confirm="removeSectionBlock(sectionBlock.id)"
-        v-on="$listeners"
-      >
-        <uikit-icon-button iconName="delete-bin-line" />
-      </uikit-confirmation-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-
-export default {
-  name: 'SectionBlockListItem',
-  props: {
-    sectionBlock: { type: Object, required: true },
-    index: { type: Number, required: true },
-  },
-  data() {
-    return {
-      imageLoaded: false,
-    }
-  },
-  computed: {
-    isList() {
-      return this.currentSectionDefinition.blocksPresentation !== 'tree'
-    },
-    presentation() {
-      const label = this.$store.getters.sectionBlockLabel(
-        this.sectionBlock,
-        this.index + 1,
-      )
-      return { label: label[0], image: label[1] }
-    },
-    label() {
-      return this.presentation.label
-    },
-    image() {
-      return this.presentation.image
-    },
-  },
-  methods: {
-    ...mapActions(['removeSectionBlock']),
-  },
-}
-</script>

data/app/frontend/editor/components/section-pane/block-list/new-block-button.vue

@@ -1,80 +0,0 @@
-<template>
-  <div v-if="hasTypes" class="w-full button-wrapper">
-    <uikit-dropdown
-      ref="dropdown"
-      placement="top"
-      v-on="$listeners"
-      v-if="hasMultipleTypes"
-    >
-      <template v-slot:button>
-        <button class="big-submit-button bg-editor-primary">
-          <uikit-icon name="ri-add-line" size="1.5rem" />
-          <span class="ml-3">{{ $t('sectionPane.blockList.add') }}</span>
-        </button>
-      </template>
-      <template v-slot:content>
-        <div class="w-full flex flex-col">
-          <button
-            v-for="blockType in blockTypes"
-            :key="blockType.type"
-            class="mb-2 text-base text-gray-900 py-2 px-14 hover:bg-gray-100 transition-colors text-left"
-            @click="addSectionBlockAndClose(blockType.type)"
-          >
-            {{ blockTypeLabel(blockType) }}
-          </button>
-        </div>
-      </template>
-    </uikit-dropdown>
-    <button
-      class="big-submit-button bg-editor-primary"
-      @click="addSectionBlock"
-      v-else
-    >
-      <uikit-icon name="ri-add-line" size="1.5rem" />
-      <span class="ml-3">{{ $t('sectionPane.blockList.add') }}</span>
-    </button>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-
-export default {
-  name: 'NewSectionBlockButton',
-  computed: {
-    hasTypes() {
-      return this.blockTypes.length > 0
-    },
-    hasMultipleTypes() {
-      return this.blockTypes.length > 1
-    },
-    blockTypes() {
-      if (this.currentSectionDefinition.blocksPresentation === 'tree')
-        return this.services.block.filterRoot(
-          this.currentSectionDefinition.blocks,
-          this.currentSectionBlocks,
-        )
-      else return this.currentSectionDefinition.blocks
-    },
-    currentBlockTypesI18nScope() {
-      return `${this.currentSectionI18nScope}.blocks.types`
-    }
-  },
-  methods: {
-    ...mapActions(['addSectionBlock']),
-    addSectionBlockAndClose(blockType) {
-      this.addSectionBlock({ blockType })
-      this.$refs.dropdown.close()
-    },
-    blockTypeLabel(blockType) {
-      return this.$st(`${this.currentBlockTypesI18nScope}.${blockType.type}`) ?? blockType.name
-    }
-  },
-}
-</script>
-
-<style scoped>
-.button-wrapper >>> .trigger {
-  @apply w-full;
-}
-</style>

data/app/frontend/editor/components/section-pane/block-tree/index.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="flex flex-col h-full">
-    <div class="relative flex-auto h-0 overflow-y-auto">
-      <transition-group type="transition" name="flip-list">
-        <tree-node
-          v-for="(treeNode, index) in treeData"
-          :key="treeNode.sectionBlock.id"
-          :treeNode="treeNode"
-          :siblings="treeData"
-          :depth="0"
-          :index="index"
-          :last="index === treeData.length - 1"
-          @on-dropdown-toggle="onDropdownToggle"
-          @change="change"
-          class="mb-3"
-        />
-      </transition-group>
-    </div>
-    <div class="mt-auto relative">
-      <new-block-button @on-dropdown-toggle="onDropdownToggle" />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
-import TreeNode from './tree-node.vue'
-import NewBlockButton from '../block-list/new-block-button.vue'
-
-export default {
-  name: 'SectionBlockTree',
-  mixins: [GroupedDropdownsMixin],
-  components: { TreeNode, NewBlockButton },
-  data() {
-    return { treeData: null }
-  },
-  methods: {
-    ...mapActions(['sortSectionBlocks']),
-    change() {
-      const list = this.services.block.decodeTree(this.treeData)
-      this.sortSectionBlocks(list)
-    },
-  },
-  watch: {
-    currentSectionBlocks: {
-      immediate: true,
-      handler() {
-        this.treeData = this.services.block.encodeToTree(
-          this.currentSectionBlocks,
-        )
-      },
-    },
-  },
-}
-</script>
-
-<style scoped>
-.flip-list-move {
-  @apply transition-transform;
-  @apply duration-300;
-}
-</style>

data/app/frontend/editor/components/section-pane/block-tree/new-nested-block-button.vue

@@ -1,73 +0,0 @@
-<template>
-  <div class="w-full">
-    <uikit-dropdown
-      placement="left"
-      ref="dropdown"
-      :fullWidth="true"
-      v-on="$listeners"
-      v-if="hasMultipleTypes"
-    >
-      <template v-slot:button>
-        <uikit-icon-button iconName="ri-add-line" />
-      </template>
-      <template v-slot:content>
-        <div class="w-full flex flex-col">
-          <button
-            v-for="blockType in blockTypes"
-            :key="blockType.type"
-            class="mb-2 text-base text-gray-900 py-2 px-4 hover:bg-gray-100 transition-colors text-left"
-            @click="addNestedSectionBlockAndClose(blockType.type)"
-          >
-            {{ blockTypeLabel(blockType) }}
-          </button>
-        </div>
-      </template>
-    </uikit-dropdown>
-    <uikit-icon-button
-      iconName="ri-add-line"
-      @click.native="addNestedSectionBlock"
-      v-else
-    />
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-
-export default {
-  name: 'NewNestedSectionBlockButton',
-  props: {
-    parentId: { type: String, required: true },
-    accept: { type: Array, required: true },
-  },
-  computed: {
-    hasMultipleTypes() {
-      return this.blockTypes.length > 1
-    },
-    blockTypes() {
-      return this.currentSectionDefinition.blocks.filter(
-        (block) => this.accept.indexOf(block.type) !== -1,
-      )
-    },
-    currentBlockTypesI18nScope() {
-      return `${this.currentSectionI18nScope}.blocks.types`
-    }
-  },
-  methods: {
-    ...mapActions(['addSectionBlock']),
-    addNestedSectionBlock() {
-      this.addSectionBlock({
-        blockType: this.blockTypes[0].type,
-        parentId: this.parentId,
-      })
-    },
-    addNestedSectionBlockAndClose(blockType) {
-      this.addSectionBlock({ blockType, parentId: this.parentId })
-      this.$refs.dropdown.close()
-    },
-    blockTypeLabel(blockType) {
-      return this.$st(`${this.currentBlockTypesI18nScope}.${blockType.type}`) ?? blockType.name
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/section-pane/block-tree/tree-node.vue

@@ -1,109 +0,0 @@
-<template>
-  <div :style="{ 'margin-left': marginLeft }">
-    <list-item
-      :sectionBlock="treeNode.sectionBlock"
-      :index="index"
-      v-on="$listeners"
-    >
-      <template v-slot:actions>
-        <div class="flex items-center">
-          <new-nested-block-button
-            :parentId="treeNode.sectionBlock.id"
-            :accept="acceptedNestedSectionBlocks"
-            v-if="canAdd"
-            v-on="$listeners"
-          />
-
-          <uikit-icon-button
-            iconName="arrow-up-s-line"
-            @click.native="moveSectionBlockUp"
-            v-if="index > 0"
-          />
-
-          <uikit-icon-button
-            iconName="arrow-down-s-line"
-            @click.native="moveSectionBlockDown"
-            v-if="!last"
-          />
-        </div>
-      </template>
-    </list-item>
-
-    <div class="mt-3" v-if="hasChildren">
-      <transition-group type="transition" name="flip-list">
-        <block-tree-node
-          v-for="(childNode, index) in children"
-          :key="childNode.sectionBlock.id"
-          :treeNode="childNode"
-          :siblings="children"
-          :depth="depth + 1"
-          :index="index"
-          :last="index === children.length - 1"
-          class="mb-3"
-          v-on="$listeners"
-        />
-      </transition-group>
-    </div>
-  </div>
-</template>
-
-<script>
-import ListItem from '../block-list/list-item.vue'
-import NewNestedBlockButton from './new-nested-block-button.vue'
-
-export default {
-  name: 'BlockTreeNode',
-  components: { ListItem, NewNestedBlockButton },
-  props: {
-    treeNode: { type: Object, required: true },
-    siblings: { type: Array },
-    depth: { type: Number, required: true },
-    index: { type: Number, required: true },
-    last: { type: Boolean, required: false, default: false },
-  },
-  computed: {
-    children() {
-      return this.treeNode.children
-    },
-    hasChildren() {
-      return this.children?.length > 0
-    },
-    sectionBlockDefinition() {
-      return this.currentSectionDefinition.blocks.find(
-        (block) => block.type === this.treeNode.sectionBlock.type,
-      )
-    },
-    acceptedNestedSectionBlocks() {
-      return this.sectionBlockDefinition?.accept
-    },
-    canAdd() {
-      return this.acceptedNestedSectionBlocks?.length > 0
-    },
-    marginLeft() {
-      return `${this.depth * 1.25}rem`
-    },
-  },
-  methods: {
-    moveSectionBlockUp() {
-      this.swapSectionBlockWith(this.index - 1)
-    },
-    moveSectionBlockDown() {
-      this.swapSectionBlockWith(this.index + 1)
-    },
-    swapSectionBlockWith(newIndex) {
-      ;[this.siblings[this.index], this.siblings[newIndex]] = [
-        this.siblings[newIndex],
-        this.siblings[this.index],
-      ]
-      this.$emit('change')
-    },
-  },
-}
-</script>
-
-<style scoped>
-.flip-list-move {
-  @apply transition-transform;
-  @apply duration-300;
-}
-</style>

data/app/frontend/editor/components/section-pane/index.vue

@@ -1,94 +0,0 @@
-<template>
-  <uikit-tabs
-    :tabs="tabs"
-    :firstIndex="tabIndexFromRoute"
-    :otherProps="{ sectionId: currentSection.id, settingId }"
-    class="overflow-y-hidden"
-    navClass="px-4"
-    panelClass="px-3"
-    ref="tabs"
-  />
-</template>
-
-<script>
-import SettingList from './setting-list.vue'
-import BlockList from './block-list/index.vue'
-import BlockTree from './block-tree/index.vue'
-
-export default {
-  name: 'SectionPane',
-  props: {
-    settingId: { type: String, default: undefined },
-  },
-  computed: {
-    unfilteredTabs() {
-      return [
-        {
-          name: this.$t('sectionPane.tabs.settings'),
-          tab: SettingList,
-          type: 'content',
-          condition: () => this.hasSettings,
-        },
-        {
-          name: this.blocksLabel,
-          tab: this.blocksComponent,
-          type: 'blocks',
-          condition: () => this.hasBlocks,
-        },
-        {
-          name: this.$t('sectionPane.tabs.advanced'),
-          tab: SettingList,
-          type: 'advanced',
-          condition: () => this.hasAdvancedSettings,
-          props: () => ({ advanced: true }),
-        },
-      ]
-    },
-    tabs() {
-      return this.unfilteredTabs.filter(
-        (tab) => !tab.condition || tab.condition(),
-      )
-    },
-    tabIndexFromRoute() {
-      return this.findTabIndexFromRoute()
-    },
-    hasSettings() {
-      return !this.isBlank(this.currentSectionSettings)
-    },
-    hasAdvancedSettings() {
-      return !this.isBlank(this.currentSectionAdvancedSettings)
-    },
-    hasBlocks() {
-      return !this.isBlank(this.currentSectionDefinition.blocks)
-    },
-    blocksLabel() {
-      return (
-        this.$st(`${this.currentSectionI18nScope}.blocks.label`) ||
-        this.currentSectionDefinition.blocksLabel ||
-        this.$t('sectionPane.tabs.blocks')
-      )
-    },
-    blocksComponent() {
-      return this.currentSectionDefinition.blocksPresentation === 'tree'
-        ? BlockTree
-        : BlockList
-    },
-  },
-  methods: {
-    findTabIndexFromRoute() {
-      const type = this.$route.hash.replace('#', '')
-      const index = this.tabs.findIndex((tab) => tab.type === type)
-      return index === -1 ? 0 : index
-    },
-  },
-  watch: {
-    '$route.hash': {
-      immediate: true,
-      handler() {
-        if (!this.$refs.tabs) return
-        this.$refs.tabs.selectTab(this.findTabIndexFromRoute())
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/section-pane/setting-list.vue

@@ -1,50 +0,0 @@
-<template>
-  <dynamic-form
-    class="mt-2"
-    :parentKey="currentSection.id"
-    :settings="sectionSettings"
-    :content="currentSectionContent"
-    :focusedSetting="settingId"
-    :i18nScope="i18nScope"
-    @blur="onBlur"
-    @change="updateSectionContent"
-  />
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-import DynamicForm from '@/components/dynamic-form/index.vue'
-
-export default {
-  name: 'SectionSettingList',
-  components: { DynamicForm },
-  props: {
-    sectionId: { type: String, default: undefined },
-    settingId: { type: String, default: undefined },
-    advanced: { type: Boolean, default: false },
-  },
-  computed: {
-    sectionSettings() {
-      return this.advanced
-        ? this.currentSectionAdvancedSettings
-        : this.services.section.filterSettings(
-            this.currentSectionSettings,
-            this.currentSectionContent,
-          )
-    },
-    i18nScope() {
-      return `${this.currentSectionI18nScope}.settings`
-    },
-  },
-  methods: {
-    ...mapActions(['updateSectionContent']),
-    onBlur() {
-      this.$router
-        .push({ name: 'editSection', params: { sectionId: this.sectionId } })
-        .catch((err) => {
-          if (err.name !== 'NavigationDuplicated') throw err
-        })
-    },
-  },
-}
-</script>

data/app/frontend/editor/components/sidebar-nav/index.vue

@@ -1,102 +0,0 @@
-<template>
-  <nav class="w-16 flex flex-col justify-between">
-    <div
-      class="flex justify-center h-full w-full animate-pulse"
-      v-if="!currentPage"
-    >
-      <div class="w-6 bg-gray-200 rounded h-48 my-6"></div>
-    </div>
-    <ol class="divide-y divide-gray-300 px-4" v-else>
-      <li>
-        <sidebar-nav-link
-          routerLinkName="listPages"
-          :active="isListPagesActive"
-          iconName="ri-file-copy-line"
-          :tooltipMessage="$t('sidebarNav.listPagesTooltip')"
-        />
-      </li>
-      <li>
-        <sidebar-nav-link
-          :routerLinkName="'listSections'"
-          :active="isSectionListPaneActive"
-          iconName="ri-stack-line"
-          :tooltipMessage="$t('sidebarNav.managePageSectionsTooltip')"        
-        />
-      </li>
-      <li v-if="hasStyle">
-        <sidebar-nav-link
-          :routerLinkName="'editStyle'"
-          :active="isEditStylePaneActive"
-          iconName="ri-drop-line"
-          iconSize="1.25rem"
-          :tooltipMessage="$t('sidebarNav.editStyleTooltip')"        
-        />        
-      </li>
-      <li>
-        <sidebar-nav-link
-          :isRouterLink="false"
-          iconName="image-line"
-          :tooltipMessage="$t('sidebarNav.openImageLibraryTooltip')"
-          @click.prevent="openImageLibraryModal"
-        />        
-      </li>      
-      <li></li>
-    </ol>
-
-    <ol class="divide-y divide-gray-300 px-4">
-      <li></li>
-      <li>
-        <sidebar-nav-link
-          :isRouterLink="false"
-          :linkUrl="leaveEditorUrl"
-          iconName="logout-box-r-line"
-          :tooltipMessage="$t('sidebarNav.leaveEditorTooltip')"
-        />
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<script>
-import ImageLibrary from '@/components/image-library/index.vue'
-import SidebarNavLink from './link.vue'
-
-export default {
-  name: 'SidebarNav',
-  components: { 
-    SidebarNavLink 
-  },
-  computed: {
-    hasStyle() {
-      return !this.isBlank(this.currentStyle)
-    },
-    isListPagesActive() {
-      return this.$route.name === 'listPages'
-    },
-    isAddSectionPaneActive() {
-      return this.$route.name === 'addSection'
-    },
-    isSectionListPaneActive() {
-      return this.$route.name === 'listSections'
-    },
-    isEditStylePaneActive() {
-      return this.$route.name === 'editStyle'
-    },
-    isEditPageActive() {
-      return this.$route.name === 'editPageSettings'
-    },
-    leaveEditorUrl() {
-      return window.leaveUrl
-    },
-  },
-  methods: {
-    openImageLibraryModal() {
-      this.openModal({
-        title: this.$t('imageLibrary.title'),
-        component: ImageLibrary,
-        props: { modalClass: 'w-216' },
-      })
-    },
-  },
-}
-</script>