maglevcms 1.4.0 → 1.5.1

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

@@ -12,12 +12,10 @@
 </template>
 
 <script>
-import { hexToRgb } from '@/misc/utils'
-
 import CoreInput from '@/components/kit/color-input/core-input.vue'
 
 export default {
-  name: 'ColorInput',
+  name: 'UIKitColorInput',
   components: { CoreInput },
   props: {
     label: { type: String, default: 'Label' },
@@ -27,7 +25,7 @@ export default {
       default: () => [],
     },
     value: { type: String },
-    showLabel: { type: Boolean, default: true }
+    showLabel: { type: Boolean, default: true },
   },
   computed: {
     updatableValue: {

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

@@ -1,5 +1,5 @@
 <template>
-  <dropdown
+  <uikit-dropdown
     :placement="placement"
     v-on="$listeners"
     class="relative"
@@ -33,12 +33,12 @@
         </div>
       </div>
     </template>
-  </dropdown>
+  </uikit-dropdown>
 </template>
 
 <script>
 export default {
-  name: 'ConfirmationButton',
+  name: 'UIKitConfirmationButton',
   props: {
     placement: { type: String, default: 'bottom' },
     text: { type: String, default: null },

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

@@ -13,10 +13,10 @@
 
 <script>
 export default {
-  name: 'Divider',
+  name: 'UIKitDivider',
   props: {
     text: { type: String, default: 'Text goes here' },
-    withHint: { type: Boolean, default: false }
-  }
+    withHint: { type: Boolean, default: false },
+  },
 }
-</script>
+</script>

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

@@ -24,7 +24,7 @@
 import { ModalBus } from '@/plugins/event-bus'
 
 export default {
-  name: 'Dropdown',
+  name: 'UIKitDropdown',
   props: {
     placement: {
       type: String,

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

@@ -4,9 +4,9 @@
 
 <script>
 export default {
-  name: 'Hint',
+  name: 'UIKitHint',
   props: {
     text: { type: String, default: 'Hint goes here' },
-  }
+  },
 }
-</script>
+</script>

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

@@ -12,7 +12,7 @@
           class="flex items-center justify-center flex-col"
           @click="openIconPickerModal"
         >
-          <icon name="ri-book-line" />
+          <uikit-icon name="ri-book-line" />
           <p class="uppercase text-xs mt-1">{{ $t('iconInput.addButton') }}</p>
         </button>
       </div>
@@ -32,7 +32,7 @@
                 class="flex items-center justify-center flex-col mr-4"
                 @click="openIconPickerModal"
               >
-                <icon name="ri-book-line" />
+                <uikit-icon name="ri-book-line" />
                 <p class="uppercase text-xs mt-1">
                   {{ $t('iconInput.replaceButton') }}
                 </p>
@@ -42,7 +42,7 @@
                 class="flex items-center justify-center flex-col"
                 @click="removeIcon"
               >
-                <icon name="delete-bin-line" />
+                <uikit-icon name="delete-bin-line" />
                 <p class="uppercase text-xs mt-1">
                   {{ $t('iconInput.clearButton') }}
                 </p>
@@ -60,7 +60,7 @@ import FocusedInputMixin from '@/mixins/focused-input'
 import IconLibrary from '@/components/icon-library/index.vue'
 
 export default {
-  name: 'IconInput',
+  name: 'UIKitIconInput',
   mixins: [FocusedInputMixin],
   props: {
     label: { type: String, default: 'Label' },

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

@@ -13,7 +13,7 @@
 import { defineAsyncComponent } from 'vue'
 
 export default {
-  name: 'MaglevIcon',
+  name: 'UIKitIcon',
   props: {
     name: { type: String },
     size: { type: String, default: '1.25rem' },
@@ -21,10 +21,15 @@ export default {
     bounce: { type: Boolean, default: false },
     library: { type: String, default: 'remixicons' },
   },
+  data() {
+    return {
+      icons: import.meta.glob(`../../assets/**/*.svg`),
+    }
+  },
   computed: {
     icon() {
       return defineAsyncComponent(() =>
-        import(`../../assets/${this.library}/${this.name}.svg`),
+        this.icons[`../../assets/${this.library}/${this.name}.svg`](),
       )
     },
   },

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

@@ -12,7 +12,7 @@
           class="flex items-center justify-center flex-col"
           @click="openImagePickerModal"
         >
-          <icon name="camera-line" />
+          <uikit-icon name="camera-line" />
           <p class="uppercase text-xs mt-1">{{ $t('imageInput.addButton') }}</p>
         </button>
       </div>
@@ -37,7 +37,7 @@
                 class="flex items-center justify-center flex-col mr-4"
                 @click="openImagePickerModal"
               >
-                <icon name="camera-line" />
+                <uikit-icon name="camera-line" />
                 <p class="uppercase text-xs mt-1">
                   {{ $t('imageInput.replaceButton') }}
                 </p>
@@ -47,7 +47,7 @@
                 class="flex items-center justify-center flex-col"
                 @click="removeImage"
               >
-                <icon name="delete-bin-line" />
+                <uikit-icon name="delete-bin-line" />
                 <p class="uppercase text-xs mt-1">
                   {{ $t('imageInput.clearButton') }}
                 </p>
@@ -56,7 +56,7 @@
           </transition>
         </div>
 
-        <text-input
+        <uikit-text-input
           class="mt-2"
           :showLabel="false"
           :placeholder="$t('imageInput.altTextPlaceholder')"
@@ -73,7 +73,7 @@ import FocusedInputMixin from '@/mixins/focused-input'
 import ImageLibrary from '@/components/image-library/index.vue'
 
 export default {
-  name: 'ImageInput',
+  name: 'UIKitImageInput',
   mixins: [FocusedInputMixin],
   props: {
     label: { type: String, default: 'Label' },

data/app/frontend/editor/components/kit/index.js

@@ -26,29 +26,29 @@ import ListItemButton from './list-item-button.vue'
 import Divider from './divider.vue'
 import Hint from './hint.vue'
 
-Vue.component('icon', Icon)
 Vue.component('v-popoper', VPopover)
-Vue.component('dropdown', Dropdown)
-Vue.component('modal-root', ModalRoot)
-Vue.component('modal', Modal)
-Vue.component('tabs', Tabs)
-Vue.component('accordion', Accordion)
-Vue.component('confirmation-button', ConfirmationButton)
-Vue.component('submit-button', SubmitButton)
-Vue.component('image-input', ImageInput)
-Vue.component('icon-input', IconInput)
-Vue.component('link-input', LinkInput)
-Vue.component('select-input', SelectInput)
-Vue.component('textarea-input', TextAreaInput)
-Vue.component('text-input', TextInput)
-Vue.component('rich-text-input', RichTextInput)
-Vue.component('checkbox-input', CheckboxInput)
-Vue.component('search-input', SearchInput)
-Vue.component('pagination', Pagination)
-Vue.component('page-icon', PageIcon)
-Vue.component('color-input', ColorInput)
-Vue.component('simple-select', SimpleSelect)
-Vue.component('collection-item-input', CollectionItemInput)
-Vue.component('list-item-button', ListItemButton)
-Vue.component('divider', Divider)
-Vue.component('hint', Hint)
+Vue.component('uikit-icon', Icon)
+Vue.component('uikit-dropdown', Dropdown)
+Vue.component('uikit-modal-root', ModalRoot)
+Vue.component('uikit-modal', Modal)
+Vue.component('uikit-tabs', Tabs)
+Vue.component('uikit-accordion', Accordion)
+Vue.component('uikit-confirmation-button', ConfirmationButton)
+Vue.component('uikit-submit-button', SubmitButton)
+Vue.component('uikit-image-input', ImageInput)
+Vue.component('uikit-icon-input', IconInput)
+Vue.component('uikit-link-input', LinkInput)
+Vue.component('uikit-select-input', SelectInput)
+Vue.component('uikit-textarea-input', TextAreaInput)
+Vue.component('uikit-text-input', TextInput)
+Vue.component('uikit-rich-text-input', RichTextInput)
+Vue.component('uikit-checkbox-input', CheckboxInput)
+Vue.component('uikit-search-input', SearchInput)
+Vue.component('uikit-pagination', Pagination)
+Vue.component('uikit-page-icon', PageIcon)
+Vue.component('uikit-color-input', ColorInput)
+Vue.component('uikit-simple-select', SimpleSelect)
+Vue.component('uikit-collection-item-input', CollectionItemInput)
+Vue.component('uikit-list-item-button', ListItemButton)
+Vue.component('uikit-divider', Divider)
+Vue.component('uikit-hint', Hint)

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

@@ -4,7 +4,7 @@
       {{ label }}
     </label>
 
-    <text-input
+    <uikit-text-input
       v-model="textInput"
       :showLabel="false"
       :placeholder="$t('linkInput.nestedTextPlaceholder')"
@@ -18,15 +18,15 @@
       @click="openLinkPickerModal"
     >
       <div class="flex-1 flex items-center overflow-hidden" v-if="isPage">
-        <page-icon :page="{ path: value.href }" class="flex-shrink-0" />
+        <uikit-page-icon :page="{ path: value.href }" class="flex-shrink-0" />
         <span class="ml-3">{{ value.linkLabel }}</span>
       </div>
       <div class="flex-1 flex items-center overflow-hidden" v-if="isUrl">
-        <icon name="ri-external-link-line" class="flex-shrink-0" />
+        <uikit-icon name="ri-external-link-line" class="flex-shrink-0" />
         <span class="ml-3 shrink">{{ value.href }}</span>
       </div>
       <div class="flex-1 flex items-center overflow-hidden" v-if="isEmail">
-        <icon name="ri-mail-line" class="flex-shrink-0" />
+        <uikit-icon name="ri-mail-line" class="flex-shrink-0" />
         <span class="ml-3">{{ value.email }}</span>
       </div>
 
@@ -38,7 +38,7 @@
       </div>
 
       <button class="ml-3" @click.prevent.stop="clear" v-if="!isBlank(value)">
-        <icon name="ri-close-line" />
+        <uikit-icon name="ri-close-line" />
       </button>
     </div>
   </div>
@@ -49,7 +49,7 @@ import LinkPicker from '@/components/link-picker/index.vue'
 import { pick } from '@/misc/utils'
 
 export default {
-  name: 'LinkInput',
+  name: 'UIKitLinkInput',
   props: {
     label: { type: String, default: 'Label' },
     name: { type: String, default: 'image' },

data/app/frontend/editor/components/kit/list-item-button.vue

@@ -2,13 +2,13 @@
   <button
     class="px-1 py-1 rounded-full bg-gray-600 bg-opacity-0 hover:text-gray-900 text-gray-600 focus:outline-none hover:bg-opacity-10 transition-colors duration-200"
   >
-    <icon :name="iconName" size="1.25rem" />
+    <uikit-icon :name="iconName" size="1.25rem" />
   </button>
 </template>
 
 <script>
 export default {
-  name: 'ListItemButton',
+  name: 'UIKitListItemButton',
   props: {
     iconName: { type: String, required: true },
   },

data/app/frontend/editor/components/kit/modal-root.vue

@@ -1,5 +1,5 @@
 <template>
-  <modal
+  <uikit-modal
     :isOpen="!!currentModal"
     :title="title"
     :containerClass="containerClass"
@@ -14,14 +14,14 @@
       v-on="modal.listeners"
       v-show="index === stack.length - 1"
     />
-  </modal>
+  </uikit-modal>
 </template>
 
 <script>
 import { ModalBus } from '@/plugins/event-bus'
 
 export default {
-  name: 'ModalRoot',
+  name: 'UIKitModalRoot',
   data() {
     return {
       stack: [], // NOTE: we stack modals!

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

@@ -14,7 +14,7 @@
               type="button"
               @click="$emit('on-close', true)"
             >
-              <icon name="ri-close-circle-line" />
+              <uikit-icon name="ri-close-circle-line" />
             </button>
           </div>
 
@@ -29,7 +29,7 @@
 
 <script>
 export default {
-  name: 'Modal',
+  name: 'UIKitModal',
   props: {
     isOpen: Boolean,
     title: { type: String, default: 'Modal' },

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

@@ -1,10 +1,10 @@
 <template>
-  <icon :name="iconName" />
+  <uikit-icon :name="iconName" />
 </template>
 
 <script>
 export default {
-  name: 'PageIcon',
+  name: 'UIKitPageIcon',
   props: {
     page: { type: Object, required: true },
     size: { type: String, default: '1.25rem' },

data/app/frontend/editor/components/kit/pagination/index.vue

@@ -10,7 +10,7 @@
     </div>
     <div class="flex items-center" v-if="visible">
       <page-button :page="activePage - 1" @click="change" class="mr-1">
-        <icon name="arrow-drop-left" />
+        <uikit-icon name="arrow-drop-left" />
       </page-button>
 
       <page-button
@@ -37,7 +37,7 @@
       />
 
       <page-button :page="activePage + 1" @click="change">
-        <icon name="arrow-drop-right" />
+        <uikit-icon name="arrow-drop-right" />
       </page-button>
     </div>
   </div>
@@ -48,7 +48,7 @@
 import PageButton from './button.vue'
 
 export default {
-  name: 'Pagination',
+  name: 'UIKitPagination',
   components: { PageButton },
   props: {
     labelI18nKey: { type: String, default: 'pagination.defaultLabel' },

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

@@ -1,52 +1,52 @@
 <template>
-  <dropdown placement="left" ref="dropdown">
+  <uikit-dropdown placement="left" ref="dropdown">
     <template v-slot:button>
       <button
         class="rounded-sm px-2 py-2 bg-gray-100 hover:bg-gray-200 flex items-center focus:outline-none focus:ring"
       >
-        <icon :name="iconName" class="w-4 h-4 text-dark" />
-        <icon name="arrow-down-s-line" class="ml-1" />
+        <uikit-icon :name="iconName" class="w-4 h-4 text-dark" />
+        <uikit-icon name="arrow-down-s-line" class="ml-1" />
       </button>
     </template>
 
     <template v-slot:content>
       <div class="w-full flex">
         <button class="py-2 px-3 hover:bg-gray-200" @click="commands.paragraph">
-          <icon name="format-paragraph" />
+          <uikit-icon name="format-paragraph" />
         </button>
         <button
           class="py-2 px-3 hover:bg-gray-200"
           @click="commands.heading({ level: 2 })"
         >
-          <icon name="format-heading-2" />
+          <uikit-icon name="format-heading-2" />
         </button>
         <button
           class="py-2 px-3 hover:bg-gray-200"
           @click="commands.heading({ level: 3 })"
         >
-          <icon name="format-heading-3" />
+          <uikit-icon name="format-heading-3" />
         </button>
         <button
           class="py-2 px-3 hover:bg-gray-200"
           @click="commands.heading({ level: 4 })"
         >
-          <icon name="format-heading-4" />
+          <uikit-icon name="format-heading-4" />
         </button>
         <button
           class="py-2 px-3 hover:bg-gray-200"
           @click="commands.blockquote"
         >
-          <icon name="format-blockquote" />
+          <uikit-icon name="format-blockquote" />
         </button>
         <button
           class="py-2 px-3 hover:bg-gray-200"
           @click="commands.code_block"
         >
-          <icon name="format-code" />
+          <uikit-icon name="format-code" />
         </button>
       </div>
     </template>
-  </dropdown>
+  </uikit-dropdown>
 </template>
 
 <script>

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

@@ -7,7 +7,7 @@
     }"
     @click="$emit('click')"
   >
-    <icon :name="iconName" class="w-4 h-4 text-dark" />
+    <uikit-icon :name="iconName" class="w-4 h-4 text-dark" />
   </button>
 </template>
 

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

@@ -5,16 +5,16 @@
       class="block h-full rounded-sm px-2 py-2 bg-gray-100 hover:bg-gray-200 flex items-center focus:outline-none focus:ring"
       @click="insertTable"
     >
-      <icon name="ri-table-2" class="w-4 h-4 text-dark" />
+      <uikit-icon name="ri-table-2" class="w-4 h-4 text-dark" />
     </button>
 
-    <dropdown placement="bottom" ref="dropdown" v-else>
+    <uikit-dropdown placement="bottom" ref="dropdown" v-else>
       <template v-slot:button>
         <button
           class="rounded-sm px-2 py-2 bg-gray-100 hover:bg-gray-200 flex items-center focus:outline-none focus:ring"
         >
-          <icon name="ri-table-2" class="w-4 h-4 text-dark" />
-          <icon name="arrow-down-s-line" class="ml-1" />
+          <uikit-icon name="ri-table-2" class="w-4 h-4 text-dark" />
+          <uikit-icon name="arrow-down-s-line" class="ml-1" />
         </button>
       </template>
 
@@ -24,47 +24,53 @@
             class="py-2 px-3 hover:bg-gray-200"
             @click="commands.deleteTable"
           >
-            <icon name="delete-bin-line" class="w-4 h-4 text-dark" />
+            <uikit-icon name="delete-bin-line" class="w-4 h-4 text-dark" />
           </button>
           <button
             class="py-2 px-3 hover:bg-gray-200"
             @click="commands.addColumnBefore"
           >
-            <icon name="ri-insert-column-left" class="w-4 h-4 text-dark" />
+            <uikit-icon
+              name="ri-insert-column-left"
+              class="w-4 h-4 text-dark"
+            />
           </button>
           <button
             class="py-2 px-3 hover:bg-gray-200"
             @click="commands.addColumnAfter"
           >
-            <icon name="ri-insert-column-right" class="w-4 h-4 text-dark" />
+            <uikit-icon
+              name="ri-insert-column-right"
+              class="w-4 h-4 text-dark"
+            />
           </button>
           <button
             class="py-2 px-3 hover:bg-gray-200"
             @click="commands.deleteColumn"
           >
-            <icon name="ri-delete-column" class="w-4 h-4 text-dark" />
+            <uikit-icon name="ri-delete-column" class="w-4 h-4 text-dark" />
           </button>
           <button
             class="py-2 px-3 hover:bg-gray-200"
             @click="commands.addRowBefore"
           >
-            <icon name="ri-insert-row-top" class="w-4 h-4 text-dark" />
+            <uikit-icon name="ri-insert-row-top" class="w-4 h-4 text-dark" />
           </button>
           <button
             class="py-2 px-3 hover:bg-gray-200"
             @click="commands.addRowAfter"
           >
-            <icon name="ri-insert-row-bottom" class="w-4 h-4 text-dark" />
+            <uikit-icon name="ri-insert-row-bottom" class="w-4 h-4 text-dark" />
           </button>
           <button
             class="py-2 px-3 hover:bg-gray-200"
             @click="commands.deleteRow"
           >
-            <icon name="ri-delete-row" class="w-4 h-4 text-dark" />
+            <uikit-icon name="ri-delete-row" class="w-4 h-4 text-dark" />
           </button>
         </div>
       </template>
-    </dropdown>
+    </uikit-dropdown>
   </div>
 </template>
 

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

@@ -81,7 +81,7 @@ import EditorLinkButtons from './rich-text-input/link-buttons.vue'
 import EditorTableButton from './rich-text-input/table-button.vue'
 
 export default {
-  name: 'RichTextInput',
+  name: 'UIKitRichTextInput',
   mixins: [FocusedInputMixin],
   components: {
     EditorContent,

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

@@ -4,7 +4,7 @@
     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">
-      <icon name="search-line" class="text-gray-500" />
+      <uikit-icon name="search-line" class="text-gray-500" />
     </button>
 
     <input
@@ -21,14 +21,14 @@
       @click.stop.prevent="reset"
       type="button"
     >
-      <icon name="close-line" />
+      <uikit-icon name="close-line" />
     </button>
   </form>
 </template>
 
 <script>
 export default {
-  name: 'SearchInput',
+  name: 'UIKitSearchInput',
   props: {
     placeholder: { type: String, default: 'Type your query here' },
   },

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

@@ -22,11 +22,25 @@
             @click.stop.prevent="clear"
             v-if="canClear"
           >
-            <icon name="ri-close-line" />
+            <uikit-icon name="ri-close-line" />
           </button>
-          <div :class="{ 'flex-shrink-0': true, 'ml-1': canClear, 'ml-auto': !canClear }"> 
-            <icon name="arrow-up-s-line" size="1.5rem" :class="{ 'hidden': !isOpen }" />
-            <icon name="arrow-down-s-line" size="1.5rem" :class="{ 'hidden': isOpen }" />
+          <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>
@@ -78,7 +92,7 @@
 import { debounce } from '@/misc/utils'
 
 export default {
-  name: 'SelectInput',
+  name: 'UIKitSelectInput',
   props: {
     label: { type: String, default: 'Label' },
     name: { type: String, default: 'text' },

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

@@ -22,7 +22,7 @@
 
 <script>
 export default {
-  name: 'Simple-Select',
+  name: 'UIKitSimpleSelect',
   props: {
     label: { type: String, default: 'Label' },
     name: { type: String, default: 'select' },