Vue 3 migration

package.json

@@ -12,11 +12,11 @@
   "scripts": {
     "start": "run-s docs:build:markdown docs:watch",
     "dev": "run-s start",
-    "docs": "vuepress dev --open",
-    "docs:dev": "vuepress dev",
+    "docs": "NODE_OPTIONS='--openssl-legacy-provider' vuepress dev --open",
+    "docs:dev": "NODE_OPTIONS='--openssl-legacy-provider' vuepress dev",
     "docs:watch": "run-p -l theo:watch docs:watch:markdown docs",
     "docs:build": "run-s theo:build:docs docs:build:markdown docs:build:vuepress",
-    "docs:build:vuepress": "vuepress build",
+    "docs:build:vuepress": "NODE_OPTIONS='--openssl-legacy-provider' vuepress build",
     "docs:build:markdown": "node build/build-markdown-components.js",
     "docs:watch:markdown": "node build/watch-markdown-components.js",
     "docs:build:markdown:component": "HYGEN_OVERWRITE=1 hygen vuepress component > /dev/null",
@@ -65,7 +65,7 @@
     "fuzzaldrin-plus": "^0.6.0",
     "lodash": "^4.17.10",
     "markdown-it": "^8.4.2",
-    "vue": "^2.5.22",
+    "vue": "2.7.16",
     "vue-directive-tooltip": "^1.4.5",
     "vuedraggable": "2.24.3"
   },
@@ -160,13 +160,13 @@
     "tinycolor2": "^1.4.1",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^3.0.0",
-    "vue": "^2.5.22",
+    "vue": "2.7.16",
     "vue-directive-tooltip": "~1.6.3",
     "vue-docgen-api": "^3.19.5",
     "vue-jest": "^3.0.7",
     "vue-loader": "^15.7.1",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.5.22",
+    "vue-template-compiler": "2.7.16",
     "vuedraggable": "2.24.3",
     "vuepress": "^1.9.10",
     "vuepress-plugin-code-copy": "^1.0.6",

src/elements/GeoAlert/GeoAlert.vue

@@ -1,16 +1,14 @@
-<template functional>
+<template>
   <div
-    v-bind="data.attrs"
+    v-bind="$attrs"
     :class="[
-      data.class,
-      data.staticClass,
       'geo-alert',
-      `geo-alert--${props.variant}`
+      `geo-alert--${variant}`
     ]"
-    v-on="listeners"
+    v-on="$listeners"
   >
     <font-awesome-icon
-      :icon="props.icon"
+      :icon="icon"
       class="geo-alert__icon"
       fixed-width
     />

src/elements/GeoAlert/GeoErrorAlert.vue

@@ -1,13 +1,9 @@
-<template functional>
+<template>
   <geo-alert
-    v-bind="data.attrs"
-    :class="[
-      data.class,
-      data.staticClass
-    ]"
+    v-bind="$attrs"
     :icon="['fal', 'exclamation-triangle']"
-    :variant="$options.helpers.VARIANTS.error"
-    v-on="listeners"
+    :variant="VARIANTS.error"
+    v-on="$listeners"
   >
     <!-- @slot Use this slot to customize alert's content -->
     <slot />
@@ -30,8 +26,10 @@ export default {
   name: 'GeoErrorAlert',
   status: 'ready',
   release: '22.0.0',
-  helpers: {
-    VARIANTS
+  data() {
+    return {
+      VARIANTS
+    }
   }
 }
 </script>

src/elements/GeoAlert/GeoInfoAlert.vue

@@ -1,13 +1,9 @@
-<template functional>
+<template>
   <geo-alert
-    v-bind="data.attrs"
-    :class="[
-      data.class,
-      data.staticClass
-    ]"
+    v-bind="$attrs"
     :icon="['fal', 'lightbulb']"
-    :variant="$options.helpers.VARIANTS.info"
-    v-on="listeners"
+    :variant="VARIANTS.info"
+    v-on="$listeners"
   >
     <!-- @slot Use this slot to customize alert's content -->
     <slot />
@@ -30,8 +26,10 @@ export default {
   name: 'GeoInfoAlert',
   status: 'ready',
   release: '22.0.0',
-  helpers: {
-    VARIANTS
+  data() {
+    return {
+      VARIANTS
+    }
   }
 }
 </script>

src/elements/GeoAlert/GeoSuccessAlert.vue

@@ -1,13 +1,9 @@
-<template functional>
+<template>
   <geo-alert
-    v-bind="data.attrs"
-    :class="[
-      data.class,
-      data.staticClass
-    ]"
+    v-bind="$attrs"
     :icon="['fal', 'thumbs-up']"
-    :variant="$options.helpers.VARIANTS.success"
-    v-on="listeners"
+    :variant="VARIANTS.success"
+    v-on="$listeners"
   >
     <!-- @slot Use this slot to customize alert's content -->
     <slot />
@@ -29,8 +25,10 @@ export default {
   name: 'GeoSuccessAlert',
   status: 'ready',
   release: '22.0.0',
-  helpers: {
-    VARIANTS
+  data() {
+    return {
+      VARIANTS
+    }
   }
 }
 </script>

src/elements/GeoAlert/GeoWarningAlert.vue

@@ -1,13 +1,9 @@
-<template functional>
+<template>
   <geo-alert
-    v-bind="data.attrs"
-    :class="[
-      data.class,
-      data.staticClass
-    ]"
+    v-bind="$attrs"
     :icon="['fal', 'exclamation-triangle']"
-    :variant="$options.helpers.VARIANTS.warning"
-    v-on="listeners"
+    :variant="VARIANTS.warning"
+    v-on="$listeners"
   >
     <!-- @slot Use this slot to customize alert's content -->
     <slot />
@@ -31,8 +27,10 @@ export default {
   name: 'GeoWarningAlert',
   status: 'ready',
   release: '22.0.0',
-  helpers: {
-    VARIANTS
+  data() {
+    return {
+      VARIANTS
+    }
   }
 }
 </script>

src/elements/GeoBorderedBox/GeoBorderedBox.examples.md

@@ -140,8 +140,8 @@ export default {
     <geo-bordered-box>
       <geo-bordered-box-header>One group</geo-bordered-box-header>
       <geo-list-group>
-        <template slot="title">Single group</template>
-        <template slot="item">
+        <template #title>Single group</template>
+        <template #item>
           <geo-list-item>First option</geo-list-item>
           <geo-list-item>Second option</geo-list-item>
           <geo-list-item>Third option</geo-list-item>
@@ -152,16 +152,16 @@ export default {
     <geo-bordered-box>
       <geo-bordered-box-header>Several groups</geo-bordered-box-header>
       <geo-list-group>
-        <template slot="title">First group</template>
-        <template slot="item">
+        <template #title>First group</template>
+        <template #item>
           <geo-list-item>First option</geo-list-item>
           <geo-list-item>Second option</geo-list-item>
           <geo-list-item>Third option</geo-list-item>
         </template>
       </geo-list-group>
       <geo-list-group>
-        <template slot="title">Second group</template>
-        <template slot="item">
+        <template #title>Second group</template>
+        <template #item>
           <geo-list-item>First option</geo-list-item>
           <geo-list-item>Second option</geo-list-item>
           <geo-list-item>Third option</geo-list-item>
@@ -172,16 +172,16 @@ export default {
     <geo-bordered-box>
       <geo-bordered-box-header>Several groups and footer</geo-bordered-box-header>
       <geo-list-group>
-        <template slot="title">First group</template>
-        <template slot="item">
+        <template #title>First group</template>
+        <template #item>
           <geo-list-item>First option</geo-list-item>
           <geo-list-item>Second option</geo-list-item>
           <geo-list-item>Third option</geo-list-item>
         </template>
       </geo-list-group>
       <geo-list-group>
-        <template slot="title">Second group</template>
-        <template slot="item">
+        <template #title>Second group</template>
+        <template #item>
           <geo-list-item>First option</geo-list-item>
           <geo-list-item>Second option</geo-list-item>
           <geo-list-item>Third option</geo-list-item>

src/elements/GeoBorderedBox/GeoBorderedBoxHeaderSearchForm.vue

@@ -11,25 +11,23 @@
       @input="searchPattern($event)"
       @delete-value="deleteValue($event)"
     >
-      <!-- @slot Use this slot to customize content displayed before the icon -->
-      <slot
-        slot="leadingAccessoryItem"
-        name="beforeSearchIconItem"
-      />
-      <font-awesome-icon
-        slot="leadingAccessoryItem"
-        :icon="searchIcon"
-      />
-      <!-- @slot Use this slot to customize content displayed after the icon, on the left of the input -->
-      <slot
-        slot="leadingAccessoryItem"
-        name="afterSearchIconItem"
-      />
+      <template #leadingAccessoryItem>
+        <!-- @slot Use this slot to customize content displayed before the icon -->
+        <slot
+          name="beforeSearchIconItem"
+        />
+        <font-awesome-icon
+          :icon="searchIcon"
+        />
+        <!-- @slot Use this slot to customize content displayed after the icon, on the left of the input -->
+        <slot
+          name="afterSearchIconItem"
+        />
+      </template>
       <!-- @slot Use this slot to customize content displayed on the right of the input -->
-      <slot
-        slot="trailingAccessoryItem"
-        name="trailingAccessoryItem"
-      />
+      <template #trailingAccessoryItem>
+        <slot name="trailingAccessoryItem" />
+      </template>
     </geo-input>
   </form>
 </template>

src/elements/GeoButton/GeoButton.template.html

@@ -4,8 +4,7 @@
   @click="$emit('click', $event)"
 >
   <slot />
-  <slot
-    slot="loading"
-    name="loading"
-  />
+  <template #loading>
+    <slot name="loading" />
+  </template>
 </geo-button>

src/elements/GeoButton/GeoExternalLinkButton.vue

@@ -23,10 +23,9 @@
       aria-hidden
     />
 
-    <slot
-      slot="loading"
-      name="loading"
-    />
+    <template #loading>
+      <slot name="loading" />
+    </template>
   </geo-button>
 </template>
 

src/elements/GeoCalendar/GeoCalendar.examples.md

@@ -39,7 +39,7 @@
       >
         <template
           v-if="hasGranularities"
-          slot="pickerGranularity"
+          #pickerGranularity
         >
           <h5 class="element-demo__header">
             Browse by
@@ -82,7 +82,7 @@
         </template>
         <template
           v-if="hasAliases"
-          slot="pickerAliases"
+          #pickerAliases
         >
           <h5 class="element-demo__header">
             Date ranges
@@ -111,17 +111,17 @@
         </template>
 
         <p
-          slot="formatError"
+          #formatError
           class="geo-calendar__input__date-feedback--error"
         >
           The inserted date is not valid
         </p>
 
-        <template slot="earliestDatePlaceholder">
+        <template #earliestDatePlaceholder>
           Set earliest date
         </template>
 
-        <template slot="latestDatePlaceholder">
+        <template #latestDatePlaceholder>
           Set latest date
         </template>
       </geo-calendar>

src/elements/GeoCalendar/GeoCalendar.vue

@@ -30,7 +30,6 @@
           <!-- @slot Use this slot to customize the message shown when there is an error in one of the selected dates -->
           <geo-input-message
             v-if="showFromFormatError"
-            slot="message"
             variant="error"
           >
             <slot name="formatError" />
@@ -69,7 +68,6 @@
           <!-- @slot Use this slot to customize the message shown when there is an error in one of the selected dates -->
           <geo-input-message
             v-if="showToFormatError"
-            slot="message"
             variant="error"
           >
             <slot name="formatError" />