fix: init modal migration from buefy to oruga

components/bsx/Offer/OfferStats.vue

@@ -9,9 +9,9 @@
     <Loader v-model="isLoading" :status="status" />
     <OfferTable
       :offers="offers"
-      :accountId="accountId"
+      :account-id="accountId"
       is-bsx-stats
-      :headerText="$t('nft.offer.title')"
+      :header-text="$t('nft.offer.title')"
       display-collection />
   </div>
 </template>

components/common/ConnectWallet/useConnectWallet.ts

@@ -1,22 +1,25 @@
 import ConnectWalletModal from './ConnectWalletModal.vue'
-import { ModalProgrammatic as Modal } from 'buefy'
-import { BModalComponent, BModalConfig } from 'buefy/types/components'
+import { useProgrammatic } from '@oruga-ui/oruga-next'
+import { ModelSync } from 'nuxt-property-decorator'
+
+const { oruga } = useProgrammatic()
+
 export const ConnectWalletModalConfig = {
   component: ConnectWalletModal,
   canCancel: ['escape', 'outside'],
-  customClass: 'connect-wallet-modal',
+  contentClass: 'connect-wallet-modal',
   autoFocus: false,
 }
 
 export const openConnectWalletModal = (instance) => {
   const modal = ref<BModalComponent | null>()
 
-  modal.value = Modal.open({
+  modal.value = oruga.modal.open({
     parent: instance?.proxy,
     onCancel: () => {
       modal.value = null
       document.body.classList.remove('is-clipped')
     },
     ...ConnectWalletModalConfig,
-  } as unknown as BModalConfig)
+  })
 }

components/common/shoppingCart/ShoppingCartModalConfig.ts

@@ -1,12 +1,14 @@
 import ShoppingCartModal from './ShoppingCartModal.vue'
-import { ModalProgrammatic as Modal } from 'buefy'
+import { useProgrammatic } from '@oruga-ui/oruga-next'
 import { BModalComponent, BModalConfig } from 'buefy/types/components'
 import { usePreferencesStore } from '@/stores/preferences'
 
+const { oruga } = useProgrammatic()
+
 export const ShoppingCartModalConfig = {
   component: ShoppingCartModal,
   canCancel: ['outside'],
-  customClass: 'shopping-cart-modal',
+  contentClass: 'shopping-cart-modal',
   autoFocus: false,
 }
 
@@ -18,13 +20,14 @@ export const openShoppingCart = (instance) => {
   const preferencesStore = usePreferencesStore()
 
   preferencesStore.setShoppingCartCollapse(true)
-  modal.value = Modal.open({
+
+  modal.value = oruga.modal.open({
     parent: instance?.proxy,
     onCancel: () => {
       modal.value = null
       preferencesStore.setShoppingCartCollapse(false)
       document.body.classList.remove('is-clipped')
     },
     ...ShoppingCartModalConfig,
-  } as unknown as BModalConfig)
+  })
 }

components/navbar/NotificationBoxButton.vue

@@ -7,32 +7,30 @@
 
 <script setup lang="ts">
 import { NeoIcon } from '@kodadot1/brick'
-import { ModalProgrammatic as Modal } from 'buefy'
-import { BModalComponent, BModalConfig } from 'buefy/types/components'
+import { useProgrammatic } from '@oruga-ui/oruga-next'
 import { NotificationBoxModalConfig } from '@/components/common/NotificationBox/useNotificationBox'
 import { usePreferencesStore } from '@/stores/preferences'
 
+const { oruga } = useProgrammatic()
 const props = defineProps<{
   showLabel: boolean
 }>()
 const emit = defineEmits(['closeBurgerMenu'])
-const modal = ref<BModalComponent | null>()
+const modal = ref(null)
 const preferencesStore = usePreferencesStore()
-const instance = getCurrentInstance()
 
 function toggleNotificationModal() {
   emit('closeBurgerMenu')
 
   if (!document.querySelector('.notification-box-modal')) {
     preferencesStore.setNotificationBoxCollapse(true)
-    modal.value = Modal.open({
-      parent: instance?.proxy,
+    modal.value = oruga.modal.open({
       onCancel: () => {
         modal.value = null
         preferencesStore.setNotificationBoxCollapse(false)
       },
       ...NotificationBoxModalConfig,
-    } as unknown as BModalConfig)
+    })
   }
 
   // close all modal

components/navbar/ProfileDropdown.vue

@@ -72,9 +72,9 @@ import { useIdentityStore } from '@/stores/identity'
 import { useLangStore } from '@/stores/lang'
 import { langsFlags as langsFlagsList } from '@/utils/config/i18n'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
-import type { BModalConfig } from 'buefy/types/components'
-import { ModalProgrammatic as Modal } from 'buefy'
+import { useProgrammatic } from '@oruga-ui/oruga-next'
 
+const { oruga } = useProgrammatic()
 const identityStore = useIdentityStore()
 const langStore = useLangStore()
 const instance = getCurrentInstance()
@@ -96,10 +96,10 @@ const setUserLang = (value: string) => {
 
 const toggleWalletConnectModal = () => {
   if (!document.querySelector('.connect-wallet-modal')) {
-    modal.value = Modal.open({
+    modal.value = oruga.modal.open({
       parent: instance?.proxy,
       ...ConnectWalletModalConfig,
-    } as unknown as BModalConfig)
+    })
   }
 
   // close all modal

components/redirect/useRedirectModal.ts

@@ -1,13 +1,14 @@
 import RedirectModal from './RedirectModal.vue'
 import { EXTERNAL_LINK_WHITELIST } from '@/utils/constants'
-import { ModalProgrammatic as Modal } from 'buefy'
-import { BModalConfig } from 'buefy/types/components'
+import { useProgrammatic } from '@oruga-ui/oruga-next'
 import VueI18n from 'vue-i18n/types'
 import {
   convertSingularCollectionUrlToKodadotUrl,
   isExternal,
 } from '@/utils/url'
 
+const { oruga } = useProgrammatic()
+
 function isWhiteList(url: string) {
   const urlObj = new URL(url)
   const redirectHost = urlObj.host.toLocaleLowerCase()
@@ -27,15 +28,15 @@ function isWhiteList(url: string) {
 }
 
 const showModal = (url: string, i18n: VueI18n) => {
-  Modal.open({
+  oruga.modal.open({
     component: RedirectModal,
     canCancel: ['outside', 'escape'],
-    customClass: 'redirect-modal',
+    contentClass: 'redirect-modal',
     props: {
       url,
       i18n,
     },
-  } as unknown as BModalConfig)
+  })
 }
 
 export const useRedirectModal = (target: string) => {

components/rmrk/Gallery/Holding.vue

@@ -1,12 +1,12 @@
 <template>
   <CommonHolderTable
     :events="ownerEventsOfNft"
-    groupKeyOption="CollectionId"
-    openOnDefault
-    dateHeaderLabel="Last Activity"
-    nameHeaderLabel="Collection"
-    :collapseTitleOption="$t('Holdings')"
-    hideCollapse />
+    group-key-option="CollectionId"
+    open-on-default
+    date-header-label="Last Activity"
+    name-header-label="Collection"
+    :collapse-title-option="$t('Holdings')"
+    hide-collapse />
 </template>
 
 <script lang="ts">

components/rmrk/Gallery/UserGainHistory.vue

@@ -1,8 +1,8 @@
 <template>
   <Flipper
     :events="ownerEventsOfNft"
-    groupKeyOption="CollectionId"
-    nameHeaderLabel="Name" />
+    group-key-option="CollectionId"
+    name-header-label="Name" />
 </template>
 
 <script lang="ts">

nuxt.config.js

@@ -171,6 +171,7 @@ export default defineNuxtConfig({
     '~/plugins/vueClipboard',
     '~/plugins/vueSocialSharing',
     '~/plugins/vueTippy',
+    '~plugins/oruga.ts',
   ],
 
   router: {

package.json

@@ -77,6 +77,7 @@
     "@nuxtjs/i18n": "^7.3.1",
     "@nuxtjs/sentry": "^7.3.1",
     "@nuxtjs/sitemap": "thisismydesign/sitemap-module#cd4dc22293b9b67e8ebb5b3c49840e67c108e312",
+    "@oruga-ui/oruga-next": "^0.6.0",
     "@paraspell/sdk": "^2.0.5",
     "@pinia/nuxt": "^0.4.11",
     "@polkadot/api": "^10.6.1",
@@ -89,6 +90,7 @@
     "@polkadot/vue-identicon": "^3.3.1",
     "@ramp-network/ramp-instant-sdk": "^3.2.3",
     "@sentry/browser": "7.42.0",
+    "add": "^2.0.6",
     "apollo-boost": "^0.4.9",
     "axios": "^0.27.2",
     "buefy": "^0.9.23",

plugins/oruga.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '@nuxt/bridge/dist/runtime/app'
+import Oruga from '@oruga-ui/oruga-next'
+import '@oruga-ui/oruga-next/dist/oruga.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Oruga)
+})

tests/floorPrice.spec.ts

@@ -1,8 +1,8 @@
 import { Interaction, NFT } from '@/components/rmrk/service/scheme'
 import {
+  collectionFloorPriceList,
   onlyEvents,
   onlyPriceEvents,
-  collectionFloorPriceList,
 } from '@/components/rmrk/utils'
 import { fullCollection } from './sample2'
 

tests/shoppingActions.spec.ts

@@ -1,4 +1,4 @@
-import { getActions, ownerActions, buyActions } from '@/utils/shoppingActions'
+import { buyActions, getActions, ownerActions } from '@/utils/shoppingActions'
 
 describe('GET ACTIONS TEST', (): void => {
   it('owner actions', () => {

utils/extension.ts

@@ -1,5 +1,5 @@
 import { web3Enable } from '@polkadot/extension-dapp'
-import { getWalletBySource, WalletAccount } from '@/utils/config/wallets'
+import { WalletAccount, getWalletBySource } from '@/utils/config/wallets'
 import consola from 'consola'
 
 export const enableExtension = async () => await web3Enable('KodaDot')