From 9ff436316d4a21fb84580b19a91499b40a5ee72a Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Sat, 11 Sep 2021 20:55:33 +0530 Subject: [PATCH] feat: init vue-toastification --- assets/scss/styles.scss | 89 +++++++++++++++++++++++------------------ nuxt.config.js | 13 +++--- package-lock.json | 38 ++++++------------ package.json | 2 +- 4 files changed, 72 insertions(+), 70 deletions(-) diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss index f54c9535e..e3d95182a 100644 --- a/assets/scss/styles.scss +++ b/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 { diff --git a/nuxt.config.js b/nuxt.config.js index b77f39f75..3295fb898 100644 --- a/nuxt.config.js +++ b/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) diff --git a/package-lock.json b/package-lock.json index 098126f2d..b9fa16d5d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 94374cc76..3ec48b475 100644 --- a/package.json +++ b/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" },