feat: init vue-toastification

assets/scss/styles.scss

@@ -339,51 +339,62 @@ input[type="checkbox"] {
   @apply text-secondaryLight;
 }
 
-.toasted-container {
-  .toasted {
-    &.toasted-primary {
-      @apply bg-tooltip;
-      @apply text-primary;
-      @apply justify-start;
-      @apply shadow;
-      @apply font-medium;
+.Vue-Toastification__progress-bar {
+  background-color: rgba(0, 0, 0, 0.6) !important;
+}
 
-      font-size: var(--body-font-size);
-      line-height: var(--body-line-height);
+.Vue-Toastification__toast {
+  @apply !bg-tooltip;
+  @apply !text-primary;
+  @apply !justify-start;
+  @apply !shadow;
+  @apply !font-medium;
+  @apply h-auto;
+  @apply w-auto;
+  @apply px-4;
+  @apply py-2;
+  @apply rounded;
+  @apply flex;
+  @apply items-center;
+}
 
-      .action {
-        @apply bg-gray-500;
-        @apply px-4;
-        @apply bg-opacity-10;
-        @apply ml-auto;
-        @apply last:ml-4;
-        @apply sm:ml-8;
-        @apply transition;
-        @apply rounded;
-        @apply text-current;
-        @apply normal-case;
-        @apply hover:(bg-opacity-20 no-underline);
-        @apply font-medium;
+.Vue-Toastification__toast-body {
+  @apply !font-sans;
 
-        font-size: var(--body-font-size);
-        line-height: var(--body-line-height);
-      }
-    }
+  font-size: var(--body-font-size) !important;
+  line-height: var(--body-line-height) !important;
+}
 
-    &.info {
-      @apply !bg-accent;
-    }
+.action {
+  @apply bg-gray-500;
+  @apply px-4;
+  @apply bg-opacity-10;
+  @apply ml-auto;
+  @apply last:ml-4;
+  @apply sm:ml-8;
+  @apply transition;
+  @apply rounded;
+  @apply text-current;
+  @apply normal-case;
+  @apply hover:(bg-opacity-20 no-underline);
+  @apply font-medium;
 
-    &.error {
-      @apply !bg-red-200;
-      @apply !text-red-800;
-    }
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+}
 
-    &.success {
-      @apply !bg-green-200;
-      @apply !text-green-800;
-    }
-  }
+.Vue-Toastification__toast--info {
+  @apply !bg-accent;
+}
+
+.Vue-Toastification__toast--error {
+  @apply !bg-red-200;
+  @apply !text-red-800;
+}
+
+.Vue-Toastification__toast--success {
+  @apply !bg-green-200;
+  @apply !text-green-800;
 }
 
 .smart-splitter .splitpanes__splitter {

nuxt.config.js

@@ -139,8 +139,8 @@ export default {
   modules: [
     // https://github.com/nuxt-community/axios-module
     "@nuxtjs/axios",
-    // https://github.com/nuxt-community/modules/tree/master/packages/toast
-    "@nuxtjs/toast",
+    // https://github.com/Maronato/vue-toastification
+    "vue-toastification/nuxt",
     // https://github.com/nuxt-community/i18n-module
     "@nuxtjs/i18n",
     // https://github.com/nuxt-community/robots-module
@@ -180,9 +180,12 @@ export default {
   // Toast module configuration (https://github.com/nuxt-community/modules/tree/master/packages/toast)
   toast: {
     position: "bottom-center",
-    duration: 3000,
-    keepOnHover: true,
-    // singleton: true,
+    toastClassName: "toasted-container",
+    timeout: 3000,
+    closeOnClick: false,
+    showCloseButtonOnHover: true,
+    closeButton: "button",
+    transition: "Vue-Toastification__fade",
   },
 
   // Google Analytics module configuration (https://github.com/nuxt-community/analytics-module)

package-lock.json

@@ -14,7 +14,6 @@
         "@nuxtjs/i18n": "^7.0.3",
         "@nuxtjs/robots": "^2.5.0",
         "@nuxtjs/sitemap": "^2.4.0",
-        "@nuxtjs/toast": "^3.3.1",
         "ace-builds": "^1.4.12",
         "acorn": "^8.5.0",
         "acorn-walk": "^8.2.0",
@@ -41,6 +40,7 @@
         "vue-github-button": "^1.3.0",
         "vue-textarea-autosize": "^1.1.1",
         "vue-tippy": "^4.11.0",
+        "vue-toastification": "^1.7.11",
         "vuejs-auto-complete": "^0.9.0",
         "yargs-parser": "^20.2.9"
       },
@@ -6613,14 +6613,6 @@
         "vue-svg-loader": "^0.16.0"
       }
     },
-    "node_modules/@nuxtjs/toast": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
-      "integrity": "sha512-b9JpyjSw5ZOyjskBvNc4NEebe0qxB6LivBlO84gHOnsaF23rLkJoBfVNDcXwGNDl7vm09yM4WqBGTkm/OQ0ZCQ==",
-      "dependencies": {
-        "vue-toasted": "^1.1.28"
-      }
-    },
     "node_modules/@nuxtjs/youch": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@nuxtjs/youch/-/youch-4.2.3.tgz",
@@ -34181,10 +34173,13 @@
         "vue": "^2.5.9"
       }
     },
-    "node_modules/vue-toasted": {
-      "version": "1.1.28",
-      "resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
-      "integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
+    "node_modules/vue-toastification": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.11.tgz",
+      "integrity": "sha512-CT/DYttb/VtWDNdhJG0BskLVfveZq5rGOgO/u3qTX+RPQQzX0WSai8VVxxUuvR8UpxfSGPS+JQleR33bo3Vadg==",
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
     },
     "node_modules/vuejs-auto-complete": {
       "version": "0.9.0",
@@ -40826,14 +40821,6 @@
         "vue-svg-loader": "^0.16.0"
       }
     },
-    "@nuxtjs/toast": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
-      "integrity": "sha512-b9JpyjSw5ZOyjskBvNc4NEebe0qxB6LivBlO84gHOnsaF23rLkJoBfVNDcXwGNDl7vm09yM4WqBGTkm/OQ0ZCQ==",
-      "requires": {
-        "vue-toasted": "^1.1.28"
-      }
-    },
     "@nuxtjs/youch": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/@nuxtjs/youch/-/youch-4.2.3.tgz",
@@ -62407,10 +62394,11 @@
         "tippy.js": "^4.3.5"
       }
     },
-    "vue-toasted": {
-      "version": "1.1.28",
-      "resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
-      "integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
+    "vue-toastification": {
+      "version": "1.7.11",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.11.tgz",
+      "integrity": "sha512-CT/DYttb/VtWDNdhJG0BskLVfveZq5rGOgO/u3qTX+RPQQzX0WSai8VVxxUuvR8UpxfSGPS+JQleR33bo3Vadg==",
+      "requires": {}
     },
     "vuejs-auto-complete": {
       "version": "0.9.0",

package.json

@@ -30,7 +30,6 @@
     "@nuxtjs/i18n": "^7.0.3",
     "@nuxtjs/robots": "^2.5.0",
     "@nuxtjs/sitemap": "^2.4.0",
-    "@nuxtjs/toast": "^3.3.1",
     "ace-builds": "^1.4.12",
     "acorn": "^8.5.0",
     "acorn-walk": "^8.2.0",
@@ -57,6 +56,7 @@
     "vue-github-button": "^1.3.0",
     "vue-textarea-autosize": "^1.1.1",
     "vue-tippy": "^4.11.0",
+    "vue-toastification": "^1.7.11",
     "vuejs-auto-complete": "^0.9.0",
     "yargs-parser": "^20.2.9"
   },