maglevcms 1.0.0 → 1.1.0

data/app/{javascript → frontend}/editor/components/kit/color-picker.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { hexToRgb } from '@/utils'
+import { hexToRgb } from '@/misc/utils'
 
 export default {
   name: 'ColorPicker',

data/app/{javascript → frontend}/editor/components/kit/icon-input.vue

@@ -57,7 +57,7 @@
 
 <script>
 import FocusedInputMixin from '@/mixins/focused-input'
-import IconLibrary from '@/components/icon-library'
+import IconLibrary from '@/components/icon-library/index.vue'
 
 export default {
   name: 'IconInput',

data/app/{javascript → frontend}/editor/components/kit/icon.vue

@@ -11,11 +11,7 @@
 </template>
 
 <script>
-// RemixIcon (https://remixicon.com)
-const icons = {
-  remixicons: require.context('@/assets/remixicons', true),
-  zondicons: require.context('@/assets/zondicons', true),
-}
+import { defineAsyncComponent } from 'vue'
 
 export default {
   name: 'MaglevIcon',
@@ -28,7 +24,9 @@ export default {
   },
   computed: {
     icon() {
-      return icons[this.library](`./${this.name}.svg`, true).default
+      return defineAsyncComponent(() =>
+        import(`../../assets/${this.library}/${this.name}.svg`),
+      )
     },
   },
 }

data/app/{javascript → frontend}/editor/components/kit/image-input.vue

@@ -70,7 +70,7 @@
 
 <script>
 import FocusedInputMixin from '@/mixins/focused-input'
-import ImageLibrary from '@/components/image-library'
+import ImageLibrary from '@/components/image-library/index.vue'
 
 export default {
   name: 'ImageInput',

data/app/{javascript → frontend}/editor/components/kit/index.js

@@ -1,28 +1,28 @@
 import Vue from 'vue'
 import { VPopover } from 'v-tooltip'
-import Icon from './icon'
-import ModalRoot from './modal-root'
-import Modal from './modal'
-import Tabs from './tabs'
-import Accordion from './accordion'
-import Dropdown from './dropdown'
-import ConfirmationButton from './confirmation-button'
-import SubmitButton from './submit-button'
-import ImageInput from './image-input'
-import IconInput from './icon-input'
-import LinkInput from './link-input'
-import SelectInput from './select-input'
-import TextAreaInput from './textarea-input'
-import TextInput from './text-input'
-import RichTextInput from './rich-text-input'
-import CheckboxInput from './checkbox-input'
-import SearchInput from './search-input'
-import Pagination from './pagination'
-import PageIcon from './page-icon'
-import ColorPicker from './color-picker'
-import SimpleSelect from './simple-select'
-import CollectionItemInput from './collection-item-input'
-import ListItemButton from './list-item-button'
+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 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 ColorPicker from './color-picker.vue'
+import SimpleSelect from './simple-select.vue'
+import CollectionItemInput from './collection-item-input.vue'
+import ListItemButton from './list-item-button.vue'
 
 Vue.component('icon', Icon)
 Vue.component('v-popoper', VPopover)

data/app/{javascript → frontend}/editor/components/kit/link-input.vue

@@ -45,8 +45,8 @@
 </template>
 
 <script>
-import LinkPicker from '@/components/link-picker'
-import { pick } from '@/utils'
+import LinkPicker from '@/components/link-picker/index.vue'
+import { pick } from '@/misc/utils'
 
 export default {
   name: 'LinkInput',

data/app/{javascript → frontend}/editor/components/kit/pagination/index.vue

@@ -45,7 +45,7 @@
 
 <script>
 // Inspired by https://github.com/arnedesmedt/vue-ads-pagination (MIT License)
-import PageButton from './button'
+import PageButton from './button.vue'
 
 export default {
   name: 'Pagination',

data/app/{javascript → frontend}/editor/components/kit/rich-text-input/link-buttons.vue

@@ -16,7 +16,7 @@
 
 <script>
 import EditorMenuButton from './menu-button.vue'
-import LinkPicker from '@/components/link-picker'
+import LinkPicker from '@/components/link-picker/index.vue'
 
 export default {
   name: 'EditorLinkButtons',

data/app/{javascript → frontend}/editor/components/kit/select-input.vue

@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import { debounce } from '@/utils'
+import { debounce } from '@/misc/utils'
 
 export default {
   name: 'SelectInput',

data/app/{javascript → frontend}/editor/components/link-picker/index.vue

@@ -20,10 +20,10 @@
 </template>
 
 <script>
-import PickerActions from './actions'
-import PagePicker from './page'
-import UrlPicker from './url'
-import EmailPicker from './email'
+import PickerActions from './actions.vue'
+import PagePicker from './page.vue'
+import UrlPicker from './url.vue'
+import EmailPicker from './email.vue'
 
 export default {
   name: 'LinkPicker',

data/app/{javascript → frontend}/editor/components/page/edit.vue

@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import MainForm from './form/main'
-import SEOForm from './form/seo'
+import MainForm from './form/main.vue'
+import SEOForm from './form/seo.vue'
 
 export default {
   name: 'EditPage',

data/app/{javascript → frontend}/editor/components/page/list/index.vue

@@ -28,7 +28,7 @@
 
 <script>
 import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
-import ListItem from './list-item'
+import ListItem from './list-item.vue'
 
 export default {
   name: 'PageList',

data/app/{javascript → frontend}/editor/components/page/list/list-item.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import EditPageModal from '@/components/page/edit'
+import EditPageModal from '@/components/page/edit.vue'
 
 export default {
   name: 'PageListItem',

data/app/{javascript → frontend}/editor/components/page/new.vue

@@ -26,8 +26,8 @@
 </template>
 
 <script>
-import MainForm from './form/main'
-import SEOForm from './form/seo'
+import MainForm from './form/main.vue'
+import SEOForm from './form/seo.vue'
 
 export default {
   name: 'NewPage',

data/app/{javascript → frontend}/editor/components/section-block-pane/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import SettingList from './setting-list'
+import SettingList from './setting-list.vue'
 
 export default {
   name: 'SectionBlockPane',

data/app/{javascript → frontend}/editor/components/section-block-pane/setting-list.vue

@@ -12,7 +12,7 @@
 
 <script>
 import { mapActions } from 'vuex'
-import DynamicForm from '@/components/dynamic-form'
+import DynamicForm from '@/components/dynamic-form/index.vue'
 
 export default {
   name: 'SectionBlockSettingList',

data/app/{javascript → frontend}/editor/components/section-highlighter/index.vue

@@ -42,11 +42,11 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+// import { mapState } from 'vuex'
 import TransformationMixin from '@/mixins/preview-transformation'
-import TopLeftActions from './top-left-actions'
-import TopRightActions from './top-right-actions'
-import BottomActions from './bottom-actions'
+import TopLeftActions from './top-left-actions.vue'
+import TopRightActions from './top-right-actions.vue'
+import BottomActions from './bottom-actions.vue'
 
 export default {
   name: 'SectionHighlighter',
@@ -66,21 +66,13 @@ export default {
     window.removeEventListener('maglev:preview:scroll', this.onPreviewScroll)
   },
   computed: {
-    ...mapState(['previewDocument']),
     style() {
       if (!this.hoveredSection && !this.shadow) return {}
-      const { el } = this.hoveredSection || this.shadow
-      const rect = el.getBoundingClientRect()
-      return this.performStyle(rect)
+      const { sectionRect } = this.hoveredSection || this.shadow
+      return this.performStyle(sectionRect)
     },
     minTop() {
-      return (
-        this.services.inlineEditing.getMinTop(
-          this.previewDocument,
-          this.hoveredSection,
-          this.currentSectionList,
-        ) || 0
-      )
+      return this.hoveredSection?.sectionOffsetTop || 0
     },
   },
   methods: {
@@ -94,7 +86,6 @@ export default {
         Object.entries(newStyle).forEach(
           ([key, value]) => (self.$el.style[key] = value),
         )
-        self.previewDocument.ticking = false
       })
     },
     performStyle(boundingRect) {

data/app/{javascript → frontend}/editor/components/section-list/index.vue

@@ -22,7 +22,7 @@
 import { mapActions } from 'vuex'
 import draggable from 'vuedraggable'
 import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
-import ListItem from './list-item'
+import ListItem from './list-item.vue'
 
 export default {
   name: 'SectionList',

data/app/{javascript → frontend}/editor/components/section-pane/block-list/index.vue

@@ -25,8 +25,8 @@
 import { mapActions } from 'vuex'
 import draggable from 'vuedraggable'
 import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
-import ListItem from './list-item'
-import NewBlockButton from './new-block-button'
+import ListItem from './list-item.vue'
+import NewBlockButton from './new-block-button.vue'
 
 export default {
   name: 'SectionBlockList',

data/app/{javascript → frontend}/editor/components/section-pane/block-tree/index.vue

@@ -25,8 +25,8 @@
 <script>
 import { mapActions } from 'vuex'
 import GroupedDropdownsMixin from '@/mixins/grouped-dropdowns'
-import TreeNode from './tree-node'
-import NewBlockButton from '../block-list/new-block-button'
+import TreeNode from './tree-node.vue'
+import NewBlockButton from '../block-list/new-block-button.vue'
 
 export default {
   name: 'SectionBlockTree',

data/app/{javascript → frontend}/editor/components/section-pane/block-tree/tree-node.vue

@@ -48,8 +48,8 @@
 </template>
 
 <script>
-import ListItem from '../block-list/list-item'
-import NewNestedBlockButton from './new-nested-block-button'
+import ListItem from '../block-list/list-item.vue'
+import NewNestedBlockButton from './new-nested-block-button.vue'
 
 export default {
   name: 'BlockTreeNode',

data/app/{javascript → frontend}/editor/components/section-pane/index.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script>
-import SettingList from './setting-list'
-import BlockList from './block-list'
-import BlockTree from './block-tree'
+import SettingList from './setting-list.vue'
+import BlockList from './block-list/index.vue'
+import BlockTree from './block-tree/index.vue'
 
 export default {
   name: 'SectionPane',

data/app/{javascript → frontend}/editor/components/section-pane/setting-list.vue

@@ -12,7 +12,7 @@
 
 <script>
 import { mapActions } from 'vuex'
-import DynamicForm from '@/components/dynamic-form'
+import DynamicForm from '@/components/dynamic-form/index.vue'
 
 export default {
   name: 'SectionSettingList',

data/app/{javascript → frontend}/editor/components/sidebar-nav.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script>
-import ImageLibrary from '@/components/image-library'
+import ImageLibrary from '@/components/image-library/index.vue'
 
 export default {
   name: 'SidebarNav',

data/app/{javascript → frontend}/editor/components/style-pane/index.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { mapActions } from 'vuex'
-import DynamicForm from '@/components/dynamic-form'
+import DynamicForm from '@/components/dynamic-form/index.vue'
 
 export default {
   name: 'StylePane',

data/app/{javascript → frontend}/editor/components/theme-section-list/index.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import ListItem from './list-item'
+import ListItem from './list-item.vue'
 
 export default {
   name: 'ThemeSectionList',

data/app/frontend/editor/design/helpers.scss

@@ -0,0 +1,9 @@
+.capitalize-first::first-letter {
+  text-transform: uppercase;
+}
+
+.bg-checkerboard {
+  background-image: linear-gradient(45deg, #F2F2F2 25%, transparent 25%), linear-gradient(-45deg, #F2F2F2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #F2F2F2 75%), linear-gradient(-45deg, transparent 75%, #F2F2F2 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}

data/app/{javascript → frontend}/editor/layouts/app.vue

@@ -19,9 +19,9 @@
 </template>
 
 <script>
-import Layout from '@/layouts/default'
-import HeaderNav from '@/components/header-nav'
-import SidebarNav from '@/components/sidebar-nav'
+import Layout from '@/layouts/default.vue'
+import HeaderNav from '@/components/header-nav/index.vue'
+import SidebarNav from '@/components/sidebar-nav.vue'
 
 export default {
   name: 'AppLayout',

data/app/{javascript → frontend}/editor/locales/index.js

@@ -1,6 +1,6 @@
 import EditorEN from './editor.en.json'
 import EditorFR from './editor.fr.json'
-import { deepMerge } from '@/utils'
+import { deepMerge } from '@/misc/utils'
 
 const overriddenEN = window.customTranslations?.en ?? {}
 const overriddenFR = window.customTranslations?.fr ?? {}

data/app/{javascript → frontend}/editor/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import App from './App'
+import App from './App.vue'
 import store from '@/store'
 import i18n from '@/plugins/i18n'
 import router from '@/router'
@@ -9,11 +9,13 @@ import '@/components/kit'
 
 Vue.config.productionTip = false
 
-document.addEventListener('DOMContentLoaded', () => {
+const start = () => {
   new Vue({
     store,
     router,
     i18n,
     render: (h) => h(App),
   }).$mount('#maglev-app')
-})
+}
+
+export default { start }

data/app/frontend/editor/misc/__tests__/utils.spec.js

@@ -0,0 +1,8 @@
+import * as utils from '../utils'
+import i18n from '@/plugins/i18n.js'
+
+describe('numberToHumanSize', () => {
+  it('takes a number and converts it into a human string', () => {
+    expect(utils.numberToHumanSize(2096000, i18n)).toEqual('2.00 MB')
+  })
+})

data/app/{javascript → frontend}/editor/mixins/error-modal.js

@@ -1,4 +1,4 @@
-import StaleRecord from '@/components/errors/stale-record'
+import StaleRecord from '@/components/errors/stale-record.vue'
 
 export default {
   methods: {

data/app/{javascript → frontend}/editor/mixins/global.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
 import { ModalBus } from '@/plugins/event-bus'
 import services from '@/services'
-import { isBlank } from '@/utils'
+import { isBlank } from '@/misc/utils'
 
 Vue.mixin({
   computed: {
@@ -99,7 +99,6 @@ Vue.mixin({
     ...mapActions([
       'setDevice',
       'setLocale',
-      'setPreviewDocument',
       'fetchSite',
       'fetchPage',
       'fetchSection',

data/app/{javascript → frontend}/editor/plugins/filters.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import i18n from '@/plugins/i18n.js'
-import { numberToHumanSize, truncate, formatPath } from '@/utils'
+import { numberToHumanSize, truncate, formatPath } from '@/misc/utils'
 
 Vue.filter('numberToHumanSize', (size) => numberToHumanSize(size, i18n))
 Vue.filter('truncate', truncate)