Vue.js 3 upgrade

frontend/js/behaviors/openMediaLibrary.js

@@ -1,13 +1,11 @@
 import forEachNodelist from '../utils/forEachNodelist.js'
 // Open Media library from the nav
 
-const openMediaLibrary = function () {
+const openMediaLibrary = function (app) {
   const bts = document.querySelectorAll('[data-medialib-btn]')
 
   function _triggerOpenMediaLibrary () {
-    if (window[process.env.VUE_APP_NAME].vm) {
-      window[process.env.VUE_APP_NAME].vm.openFreeMediaLibrary()
-    }
+    app.openFreeMediaLibrary()
   }
 
   // Toggle Click button

frontend/js/components/Browser.vue

@@ -13,11 +13,13 @@
         </div>
         <div class="browser__search">
           <a17-filter @submit="submitFilter">
-            <div slot="additional-actions" v-if="browserNote">
-              <span class="browser__note f--small">
-                {{ browserNote }}
-              </span>
-            </div>
+            <template v-slot:additional-actions>
+              <div v-if="browserNote">
+                <span class="browser__note f--small">
+                  {{ browserNote }}
+                </span>
+              </div>
+            </template>
           </a17-filter>
         </div>
       </div>

frontend/js/components/BrowserField.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-  import draggable from 'vuedraggable'
+  import { VueDraggableNext } from 'vue-draggable-next'
   import { mapGetters,mapState } from 'vuex'
 
   import draggableMixin from '@/mixins/draggable'
@@ -49,7 +49,7 @@
     name: 'A17BrowserField',
     components: {
       'a17-browseritem': Browseritem,
-      draggable
+      draggable: VueDraggableNext
     },
     mixins: [draggableMixin],
     props: {

frontend/js/components/BrowserItem.vue

@@ -33,6 +33,7 @@
 <script>
   export default {
     name: 'A17BrowserItem',
+    emits: ['delete'],
     props: {
       name: {
         type: String,

frontend/js/components/Button.vue

@@ -1,6 +1,9 @@
 <script>
+  import { h } from 'vue'
+
   export default {
     name: 'A17Button',
+    emits: ['click'],
     props: {
       el: {
         type: String,
@@ -64,44 +67,41 @@
         this.$emit('click')
       }
     },
-    render: function (createElement) {
+    render: function () {
       const elOpts = {
         class: this.buttonClasses,
-        attrs: {},
-        on: {
-          click: (event) => {
-            this.onClick(event)
-          }
+        onClick: (event) => {
+          this.onClick(event)
         }
       }
 
       // button
       if (this.el === 'button') {
-        elOpts.attrs.type = this.type
+        elOpts.type = this.type
 
         if (this.disabled) {
-          elOpts.attrs.disabled = this.disabled
+          elOpts.disabled = this.disabled
         }
       }
 
       // a:href
       if (this.el === 'a' && this.href) {
-        elOpts.attrs.href = this.href
+        elOpts.href = this.href
 
         if (this.target) {
-          elOpts.attrs.target = this.target
+          elOpts.target = this.target
         }
 
         if (this.download) {
-          elOpts.attrs.download = this.download
+          elOpts.download = this.download
         }
 
         if (this.rel) {
-          elOpts.attrs.rel = this.rel
+          elOpts.rel = this.rel
         }
       }
 
-      return createElement(this.el, elOpts, this.$slots.default)
+      return h(this.el, elOpts, this.$slots.default())
     }
   }
 </script>
@@ -184,7 +184,7 @@
     font-weight:600;
     padding: 0 15px;
 
-    .icon {
+    :deep(.icon) {
       vertical-align: baseline;
       top: 3px;
       position: relative;
@@ -383,7 +383,7 @@
     color: $color__icons;
     @include monospaced-figures('off'); // dont use monospaced figures here
 
-    .icon {
+    :deep(.icon) {
       transition: color .25s linear;
     }
 
@@ -392,12 +392,12 @@
       border-color: $color__text;
       color: $color__text;
 
-      .icon {
+      :deep(.icon) {
         color: $color__text;
       }
     }
 
-    .icon {
+    :deep(.icon) {
       // vertical-align: top;
       // height: 100%;
       display: block;
@@ -421,7 +421,7 @@
       color: $color__button_greyed;
       background: $color__button_greyed--bg;
 
-      .icon {
+      :deep(.icon) {
         color: $color__button_greyed;
       }
 

frontend/js/components/ButtonBar.vue

@@ -41,8 +41,8 @@
     border-radius: 2px;
     display: flex;
 
-    > a,
-    > button {
+    > :slotted(a),
+    > :slotted(button) {
       @include btn-reset;
       height: $toolbar__height - 2px;
       line-height: $toolbar__height - 2px;
@@ -80,14 +80,14 @@
       }
     }
 
-    > a:first-child,
-    > button:first-child {
+    > :slotted(a):first-child,
+    > :slotted(button):first-child {
       border-top-left-radius: $border__radius;
       border-bottom-left-radius: $border__radius;
     }
 
-    > a:last-child,
-    > button:last-child {
+    > :slotted(a):last-child,
+    > :slotted(button):last-child {
       border-top-right-radius: $border__radius;
       border-bottom-right-radius: $border__radius;
       border-right: 0 none;

frontend/js/components/Checkbox.vue

@@ -16,6 +16,7 @@
   export default {
     name: 'A17Checkbox',
     mixins: [randKeyMixin],
+    emits: ['change'],
     props: {
       value: {
         default: ''

frontend/js/components/CheckboxAccordion.vue

@@ -1,7 +1,11 @@
 <template>
   <a17-accordion :open="open" @toggleVisibility="notifyOpen">
-    <span slot="accordion__title"><slot></slot></span>
-    <div slot="accordion__value">{{ currentLabel }}</div>
+    <template v-slot:accordion__title>
+      <span><slot></slot></span>
+    </template>
+    <template v-slot:accordion__value>
+      <div>{{ currentLabel }}</div>
+    </template>
     <a17-checkboxgroup :name="name" :options="options" @change="changeValue" :selected="currentValue" :min="1"></a17-checkboxgroup>
   </a17-accordion>
 </template>
@@ -18,6 +22,7 @@
       'a17-accordion': a17Accordion
     },
     mixins: [VisibilityMixin],
+    emits: ['open'],
     props: {
       value: {
         default: function () { return [] }

frontend/js/components/CheckboxGroup.vue

@@ -31,6 +31,11 @@
         default: function () { return [] }
       }
     },
+    data () {
+      return {
+        hasLocale: false
+      }
+    },
     mixins: [InputframeMixin, CheckboxMixin, FormStoreMixin],
     computed: {
       checkboxClasses: function () {

frontend/js/components/ColorField.vue

@@ -19,9 +19,11 @@
       />
       <a17-dropdown ref="colorDropdown" class="form__field--color" position="bottom-right" :arrow="true" :offset="15" :minWidth="300" :clickable="true" :sideOffset="15" @close="saveIntoStore">
         <span class="form__field--colorBtn" :style="bcgStyle" @click="$refs.colorDropdown.toggle()"></span>
-        <div slot="dropdown__content">
-          <a17-colorpicker :color="value" @change="updateValueFromPicker"></a17-colorpicker>
-        </div>
+        <template v-slot:dropdown__content>
+          <div>
+            <a17-colorpicker :color="value" @change="updateValueFromPicker"></a17-colorpicker>
+          </div>
+        </template>
       </a17-dropdown>
     </div>
   </a17-inputframe>

frontend/js/components/ColorPicker.vue

@@ -27,6 +27,7 @@
 
   export default {
     name: 'a17ColorPicker',
+    emits: ['change'],
     props: {
       color: {
         type: String,

frontend/js/components/ConnectorField.vue

@@ -83,7 +83,7 @@
       toggleVisibility: function (value) {
 
         if (this.$refs.fieldContainer) {
-          this.$slots.default.forEach((child) => {
+          this.$slots.default().forEach((child) => {
             // Base input fields.
             if (
               child.componentInstance !== undefined &&
@@ -100,7 +100,7 @@
               child.componentInstance.$slots !== undefined &&
               child.componentInstance.$slots.default !== undefined
             ) {
-              child.componentInstance.$slots.default.forEach((subChild) => {
+              child.componentInstance.$slots.default().forEach((subChild) => {
                 if (subChild.componentInstance && subChild.componentInstance.destroyValue) {
                   subChild.componentInstance.destroyValue()
                 }

frontend/js/components/Cropper.vue

@@ -2,7 +2,7 @@
   <div class="cropper">
     <header class="cropper__header">
       <ul v-if="multiCrops" class="cropper__breakpoints">
-        <li v-for="(crop, key, index) in cropOptions" :key="key" :class="{ 's--active' : toggleBreakpoint === index }" @click="changeCrop(key, index)">{{ key | capitalize }}</li>
+        <li v-for="(crop, key, index) in cropOptions" :key="key" :class="{ 's--active' : toggleBreakpoint === index }" @click="changeCrop(key, index)">{{ capitalize(key) }}</li>
       </ul>
     </header>
     <div class="cropper__content">
@@ -12,7 +12,7 @@
     </div>
     <footer class="cropper__footer">
       <ul v-if="ratiosByContext.length > 1" class="cropper__ratios">
-        <li class="f--small" v-for="ratio in ratiosByContext" @click="changeRatio(ratio)" :key="ratio.name" :class="{ 's--active' : currentRatioName === ratio.name }">{{ ratio.name | capitalize }}</li>
+        <li class="f--small" v-for="ratio in ratiosByContext" @click="changeRatio(ratio)" :key="ratio.name" :class="{ 's--active' : currentRatioName === ratio.name }">{{ capitalize(ratio.name) }}</li>
       </ul>
       <span class="cropper__values f--small hide--xsmall" :class="cropperWarning">{{ cropValues.original.width }} &times; {{ cropValues.original.height }}</span>
       <slot></slot>
@@ -28,7 +28,7 @@
 
   import cropperMixin from '@/mixins/cropper'
   import { cropConversion } from '@/utils/cropper'
-  import a17VueFilters from '@/utils/filters.js'
+  import { capitalize } from '@/utils/filters.js'
 
   export default {
     name: 'a17Cropper',
@@ -43,6 +43,7 @@
       }
     },
     mixins: [cropperMixin],
+    emits: ['crop-end'],
     data: function () {
       return {
         cropper: null,
@@ -109,7 +110,6 @@
         allCrops: state => state.mediaLibrary.crops
       })
     },
-    filters: a17VueFilters,
     mounted: function () {
       const opts = this.cropperOpts
       const imageBox = this.$refs.cropImage
@@ -141,6 +141,7 @@
       })
     },
     methods: {
+      capitalize,
       initAspectRatio: function () {
         const filtered = this.ratiosByContext
         const filter = filtered.find((r) => r.name === this.currentRatioName)
@@ -217,7 +218,7 @@
         return cropConversion(data, this.currentMedia, this.cropValues.natural)
       }
     },
-    beforeDestroy: function () {
+    beforeUnmount: function () {
       this.cropper.destroy()
     }
   }

frontend/js/components/DatePicker.vue

@@ -4,7 +4,7 @@
     <div class="datePicker__group" :ref="refs.flatPicker">
       <div class="form__field datePicker__field">
         <input type="text" :name="name" :id="uniqId" :required="required" :placeholder="placeHolder" data-input
-               @blur="onBlur" v-model="date" :disabled="disabled">
+               @blur="onBlur" @input="onInput" v-model="date" :disabled="disabled">
         <a href="#" v-if="clear" class="datePicker__reset" :class="{ 'datePicker__reset--cleared' : !date }"
            @click.prevent="onClear"><span v-svg symbol="close_icon"></span></a>
       </div>
@@ -15,7 +15,7 @@
 <script>
   import 'flatpickr/dist/flatpickr.css'
 
-  import parse from 'date-fns/parse'
+  import { parse } from 'date-fns'
   import FlatPickr from 'flatpickr'
 
   import FormStoreMixin from '@/mixins/formStore'
@@ -26,6 +26,7 @@
   export default {
     name: 'A17DatePicker',
     mixins: [randKeyMixin, InputframeMixin, FormStoreMixin],
+    emits: ['input', 'open', 'close', 'blur'],
     props: {
       /* @see: https://chmln.github.io/flatpickr/options/ */
       name: { // FlatPicker hidden input name
@@ -149,15 +150,15 @@
           parseDate: function (date, format) {
             const fullFormat = 'yyyy-MM-dd HH:mm:ss';
             if (date.length === fullFormat.length) {
-              return parse(date + 'Z', fullFormat + 'X', Date.UTC());
+              return parse(date + 'Z', fullFormat + 'X', Date.UTC(0, 0));
             }
             const fullFormatNoSeconds = 'yyyy-MM-dd HH:mm';
             if (date.length === fullFormatNoSeconds.length) {
-              return parse(date + 'Z', fullFormat + 'X', Date.UTC());
+              return parse(date + 'Z', fullFormat + 'X', Date.UTC(0, 0));
             }
             const fullFormatNoTime = 'yyyy-MM-dd';
             if (date.length === fullFormatNoTime.length) {
-              return parse(date, fullFormatNoTime, Date.UTC());
+              return parse(date, fullFormatNoTime, Date.UTC(0, 0));
             }
 
             // Hope for the best..
@@ -219,7 +220,7 @@
 
       this.isMobile = self.flatPicker.isMobile
     },
-    beforeDestroy: function () {
+    beforeUnmount: function () {
       const self = this
       self.flatPicker.destroy()
     }