From e1cb34592cfaddacc6df487e9234fe709737c77d Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Tue, 15 Aug 2023 15:53:51 +0700 Subject: [PATCH 01/10] refactor: inject programmatic modal --- .../NeoModalExtend/NeoModalExtend.vue | 25 ++++++++ .../src/components/NeoModalExtend/plugin.js | 58 +++++++++++++++++++ libs/ui/src/index.ts | 3 + nuxt.config.js | 17 +----- plugins/oruga-modal.ts | 5 ++ 5 files changed, 92 insertions(+), 16 deletions(-) create mode 100644 libs/ui/src/components/NeoModalExtend/NeoModalExtend.vue create mode 100644 libs/ui/src/components/NeoModalExtend/plugin.js create mode 100644 plugins/oruga-modal.ts diff --git a/libs/ui/src/components/NeoModalExtend/NeoModalExtend.vue b/libs/ui/src/components/NeoModalExtend/NeoModalExtend.vue new file mode 100644 index 0000000000..09ba5d4ca9 --- /dev/null +++ b/libs/ui/src/components/NeoModalExtend/NeoModalExtend.vue @@ -0,0 +1,25 @@ + + + diff --git a/libs/ui/src/components/NeoModalExtend/plugin.js b/libs/ui/src/components/NeoModalExtend/plugin.js new file mode 100644 index 0000000000..70b3b3b5ee --- /dev/null +++ b/libs/ui/src/components/NeoModalExtend/plugin.js @@ -0,0 +1,58 @@ +import Vue from 'vue' +import Modal from './NeoModalExtend.vue' + +import { merge } from '@oruga-ui/oruga/src/utils/helpers' +import InstanceRegistry from '@oruga-ui/oruga/src/utils/InstanceRegistry' + +let instances = new InstanceRegistry() + +// fork https://github.com/oruga-ui/oruga/blob/4915c4dbcb1a6c2cd39bc7660d41916b330bc0cd/packages/oruga/src/components/modal/index.js#L12 implementation +const ModalProgrammatic = { + open(params) { + let parent + if (typeof params === 'string') { + params = { + content: params, + } + } + + const defaultParam = { + programmatic: { instances }, + } + if (params.parent) { + parent = params.parent + delete params.parent + } + let slot + if (Array.isArray(params.content)) { + slot = params.content + delete params.content + } + const propsData = merge(defaultParam, params) + + if (window.Promise) { + propsData.promise = new Promise((p1, p2) => { + propsData.programmatic.resolve = p1 + propsData.programmatic.reject = p2 + }) + } + + const ModalComponent = Vue.extend(Modal) + const instance = new ModalComponent({ + parent, + el: document.createElement('div'), + propsData, + }) + if (slot) { + instance.$slots.default = slot + } + return instance + }, + closeAll() { + instances.walk((entry) => { + entry.close(...arguments) + }) + }, +} + +export default ModalProgrammatic diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index b8b4b8767d..d3d42a92f1 100644 --- a/libs/ui/src/index.ts +++ b/libs/ui/src/index.ts @@ -47,3 +47,6 @@ export { default as NeoUpload } from './components/NeoUpload/NeoUpload.vue' export { default as NeoCollapse } from './components/NeoCollapse/NeoCollapse.vue' export { default as Neo } from '@oruga-ui/oruga' + +export { default as NeoModalExtend } from './components/NeoModalExtend/NeoModalExtend.vue' +export { default as NeoModalExtendProgrammatic } from './components/NeoModalExtend/plugin' diff --git a/nuxt.config.js b/nuxt.config.js index c2b1d2399f..cda5d38a9a 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -170,6 +170,7 @@ export default defineNuxtConfig({ '~/plugins/vueClipboard', '~/plugins/vueSocialSharing', '~/plugins/vueTippy', + '~/plugins/oruga-modal', ], router: { @@ -387,22 +388,6 @@ export default defineNuxtConfig({ '@google/model-viewer', // TODO check to see if it works without transpilation in future nuxt releases ], extend(config) { - // if ( - // process.env.NODE_ENV !== 'development' && - // process.env.SENTRY_AUTH_TOKEN - // ) { - // https://community.cloudflare.com/t/recurring-deployment-issue-on-pages-which-works-on-preview-branch-but-doesnt-on-production-branch/540278/10 - // config.devtool = 'source-map' - // config.plugins.push( - // new SentryWebpackPlugin({ - // org: 'kodadot', - // project: 'nft-gallery', - // include: './dist', - // authToken: process.env.SENTRY_AUTH_TOKEN, - // }) - // ) - // } - // add frontmatter-markdown-loader config.module.rules.push({ test: /\.md$/, diff --git a/plugins/oruga-modal.ts b/plugins/oruga-modal.ts new file mode 100644 index 0000000000..df553cf91d --- /dev/null +++ b/plugins/oruga-modal.ts @@ -0,0 +1,5 @@ +import { NeoModalExtendProgrammatic } from '@kodadot1/brick' + +export default (context, inject) => { + inject('neoModal', NeoModalExtendProgrammatic) +} From e2a3e2aa94b34168e39535ec49b11e26114c7ff8 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Tue, 15 Aug 2023 15:56:37 +0700 Subject: [PATCH 02/10] refactor: connect wallet modal --- components/Navbar.vue | 13 ++++--------- components/collection/drop/DropContainer.vue | 4 ++-- components/collection/drop/TokenImportButton.vue | 4 ++-- .../collection/unlockable/UnlockableContainer.vue | 4 ++-- .../common/ConnectWallet/useConnectWallet.ts | 13 +++++++------ .../GalleryItemActionType/GalleryItemOffer.vue | 4 ++-- components/navbar/ProfileDropdown.vue | 15 +++++---------- components/shared/ConnectWalletButton.vue | 4 ++-- 8 files changed, 26 insertions(+), 35 deletions(-) diff --git a/components/Navbar.vue b/components/Navbar.vue index ffd514db69..d21a430af2 100644 --- a/components/Navbar.vue +++ b/components/Navbar.vue @@ -190,7 +190,6 @@ From 70cf267960a9f62b93d7439d91a63bf755aebc1c Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Tue, 15 Aug 2023 15:57:45 +0700 Subject: [PATCH 06/10] refactor: notification modal --- .../NotificationBox/useNotificationBox.ts | 2 +- components/navbar/NotificationBoxButton.vue | 17 +++++++---------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/components/common/NotificationBox/useNotificationBox.ts b/components/common/NotificationBox/useNotificationBox.ts index 9bdfe9e94d..1b8eaa16b8 100644 --- a/components/common/NotificationBox/useNotificationBox.ts +++ b/components/common/NotificationBox/useNotificationBox.ts @@ -3,6 +3,6 @@ import NotificationBoxModal from './NotificationBoxModal.vue' export const NotificationBoxModalConfig = { component: NotificationBoxModal, canCancel: ['outside'], - customClass: 'notification-box-modal', + rootClass: 'notification-box-modal', autoFocus: false, } diff --git a/components/navbar/NotificationBoxButton.vue b/components/navbar/NotificationBoxButton.vue index 0a933664d0..a8a0f7f740 100644 --- a/components/navbar/NotificationBoxButton.vue +++ b/components/navbar/NotificationBoxButton.vue @@ -7,8 +7,6 @@ From d17163efb2de31d6a9c63f8b1cb03e230b311891 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Tue, 15 Aug 2023 16:24:05 +0700 Subject: [PATCH 07/10] refactor: connect wallet button to composition api --- components/navbar/ProfileDropdown.vue | 1 - components/shared/ConnectWalletButton.vue | 64 ++++++++++--------- .../src/components/NeoTooltip/NeoTooltip.vue | 2 +- 3 files changed, 34 insertions(+), 33 deletions(-) diff --git a/components/navbar/ProfileDropdown.vue b/components/navbar/ProfileDropdown.vue index 21bd6350e9..6f7406b6a6 100644 --- a/components/navbar/ProfileDropdown.vue +++ b/components/navbar/ProfileDropdown.vue @@ -35,7 +35,6 @@ class="button-connect-wallet px-4" variant="k-accent" no-shadow - :modal-toggle-disabled="true" @toggleConnectModal="toggleWalletConnectModal" /> diff --git a/components/shared/ConnectWalletButton.vue b/components/shared/ConnectWalletButton.vue index 8ab7019f74..d8f48f4e45 100644 --- a/components/shared/ConnectWalletButton.vue +++ b/components/shared/ConnectWalletButton.vue @@ -1,45 +1,47 @@ - diff --git a/libs/ui/src/components/NeoTooltip/NeoTooltip.vue b/libs/ui/src/components/NeoTooltip/NeoTooltip.vue index 899f3dab36..f1aa9dd635 100644 --- a/libs/ui/src/components/NeoTooltip/NeoTooltip.vue +++ b/libs/ui/src/components/NeoTooltip/NeoTooltip.vue @@ -44,7 +44,7 @@ export interface Props { multilineWidth?: string | number fullWidth?: boolean stopEvents?: boolean - autoClose?: any | boolean + autoClose?: string[] | boolean contentClass?: string } const props = withDefaults(defineProps(), { From 12f44f94883bfbbd4e76106aa74be10442f757ca Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Tue, 15 Aug 2023 17:59:42 +0700 Subject: [PATCH 08/10] fix: dynamic import neoicon on rmrk/gallery card reason: somehow it causing the build failed. works fine on `pnpm dev` tho --- components/rmrk/Gallery/GalleryCard.vue | 4 ++-- nuxt.config.js | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/components/rmrk/Gallery/GalleryCard.vue b/components/rmrk/Gallery/GalleryCard.vue index 91b9f6d0eb..09a3c6470d 100644 --- a/components/rmrk/Gallery/GalleryCard.vue +++ b/components/rmrk/Gallery/GalleryCard.vue @@ -52,14 +52,14 @@ import { getMimeType } from '@/utils/gallery/media' import { getSanitizer, sanitizeIpfsUrl } from '@/utils/ipfs' import { NFTMetadata } from '@/components/rmrk/service/scheme' import { usePreferencesStore } from '@/stores/preferences' -import { NeoIcon } from '@kodadot1/brick' + const components = { LinkResolver: () => import('@/components/shared/LinkResolver.vue'), CommonTokenMoney: () => import('@/components/shared/CommonTokenMoney.vue'), BasicImage: () => import('@/components/shared/view/BasicImage.vue'), PreviewMediaResolver: () => import('@/components/media/PreviewMediaResolver.vue'), - NeoIcon, + NeoIcon: () => import('@kodadot1/brick').then((m) => m.NeoIcon), } @Component({ components }) diff --git a/nuxt.config.js b/nuxt.config.js index cda5d38a9a..efe0418c03 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -163,6 +163,7 @@ export default defineNuxtConfig({ { src: '~/plugins/icons', mode: 'client' }, { src: '~/plugins/consola', mode: 'client' }, { src: '~/plugins/piniaPersistedState', mode: 'client' }, + { src: '~/plugins/oruga-modal', mode: 'client' }, '~/plugins/filters', '~/plugins/globalVariables', '~/plugins/pwa', @@ -170,7 +171,6 @@ export default defineNuxtConfig({ '~/plugins/vueClipboard', '~/plugins/vueSocialSharing', '~/plugins/vueTippy', - '~/plugins/oruga-modal', ], router: { @@ -388,6 +388,9 @@ export default defineNuxtConfig({ '@google/model-viewer', // TODO check to see if it works without transpilation in future nuxt releases ], extend(config) { + // for debugging + // config.devtool = 'source-map' + // add frontmatter-markdown-loader config.module.rules.push({ test: /\.md$/, From 1b7e43a3f02935dc433fd9f435e6f3a2f15bc44b Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Tue, 15 Aug 2023 18:08:54 +0700 Subject: [PATCH 09/10] fix: close all first --- components/common/ConnectWallet/ConnectWalletModal.vue | 3 +-- components/shared/ConnectWalletButton.vue | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/common/ConnectWallet/ConnectWalletModal.vue b/components/common/ConnectWallet/ConnectWalletModal.vue index bf0632b0c6..354f6c7b4c 100644 --- a/components/common/ConnectWallet/ConnectWalletModal.vue +++ b/components/common/ConnectWallet/ConnectWalletModal.vue @@ -80,9 +80,8 @@