➖ remove b-image component

components/common/ConnectWallet/WalletMenuItem.vue

@@ -8,10 +8,10 @@
  <div
  class="is-flex is-justify-content-space-between is-align-items-center">
  <span>
- <b-image
+ <img
  :src="wallet.img"
  class="is-32x32 is-inline-block"
- style="vertical-align: middle"></b-image>
+ style="vertical-align: middle" />
  <span class="is-size-6 ml-2 is-capitalized">{{ wallet.name }}</span>
  </span>
 

components/generative/CongratsView.vue

@@ -6,7 +6,7 @@
  <nuxt-link class="is-size-4 link" :to="`/bsx/collection/${collectionId}`">
  In the meanwhile, click here to check the collection ♥️🍷
  </nuxt-link>
- <b-image
+ <img
  src="https://imagedelivery.net/jk5b6spi_m_-9qC4VTnjpg/bafkreierepnow4cazbhinko36ubpuxl6pih7wuyxvi5mfmhvcmm6xgt6ha/aaa" />
  <br />
  <SubmitButton

components/series/SeriesTable.vue

@@ -77,7 +77,7 @@
  header-class="front-stack-layer"
  cell-class="is-vcentered">
  <div class="image is-48x48 mb-2">
- <b-image
+ <img
  v-if="!isLoading"
  :src="props.row.image"
  :alt="props.row.name"

components/shared/view/BasicImage.vue

@@ -1,32 +1,41 @@
 <template>
- <b-image
- :src="src || placeholder"
- :src-fallback="placeholder"
- :alt="alt"
- ratio="1by1"
- :class="customClass"
- :rounded="rounded"
- data-cy="type-image"
- @error="onImageError">
- <template #placeholder>
- <NeoSkeleton full-size no-margin :circle="rounded" />
- </template>
- </b-image>
+ <figure
+ class="b-image-wrapper image is-1by1"
+ :style="{ 'padding-top': '100%' }"
+ :class="customClass">
+ <transition name="fade">
+ <img
+ :src="src || placeholder"
+ :alt="alt"
+ :class="['has-ratio', { 'is-rounded': rounded }]"
+ @load="onImageLoad"
+ @error="onImageError" />
+ </transition>
+ <transition name="fade">
+ <slot v-if="!loaded" name="placeholder">
+ <NeoSkeleton full-size no-margin :circle="rounded" />
+ </slot>
+ </transition>
+ </figure>
 </template>
 
 <script lang="ts" setup>
 import { NeoSkeleton } from '@kodadot1/brick'
 
 const { $consola } = useNuxtApp()
 const { placeholder } = useTheme()
-defineProps({
+const props = defineProps({
  src: { type: String, default: '' },
  alt: { type: String, default: 'KodaDot NFT minted multimedia' },
  customClass: { type: String, default: '' },
  rounded: Boolean,
 })
+const loaded = ref(false)
 
-function onImageError(ev: Event, src: string) {
- $consola.error('[BasicImage] to load:', src, ev)
+function onImageLoad() {
+ loaded.value = true
+}
+function onImageError(ev: Event) {
+ $consola.error('[BasicImage] to load:', props.src, ev)
 }
 </script>

components/shared/view/SelectableImage.vue

@@ -1,5 +1,5 @@
 <template>
- <b-image
+ <img
  ratio="1by1"
  class="image"
  :class="[
@@ -8,7 +8,7 @@
  ]"
  :src="src"
  alt="Some Image"
- @click.native="handleClick"></b-image>
+ @click.native="handleClick" />
 </template>
 
 <script setup lang="ts">

components/unique/Collection/Item/TransferCollectionModal.vue

@@ -1,6 +1,6 @@
 <template>
- <ModalWrapper icon="paper-plane" title="Transfer collection" isRight>
- <template v-slot:default>
+ <ModalWrapper icon="paper-plane" title="Transfer collection" is-right>
+ <template #default>
  <Loader v-model="isLoading" :status="status" />
  <b-field>
  <Auth />
@@ -27,7 +27,7 @@
 <script lang="ts">
 import MetaTransactionMixin from '@/utils/mixins/metaMixin'
 import { isAddress } from '@polkadot/util-crypto'
-import { Component, mixins, Prop } from 'nuxt-property-decorator'
+import { Component, Prop, mixins } from 'nuxt-property-decorator'
 import { showNotification } from '@/utils/notification'
 
 const components = {

components/unique/Gallery/Item/DangerModal.vue

@@ -1,6 +1,6 @@
 <template>
- <ModalWrapper icon="trash" :title="title" isRight>
- <template v-slot:default>
+ <ModalWrapper icon="trash" :title="title" is-right>
+ <template #default>
  <Loader v-model="isLoading" :status="status" />
  <div class="buttons">
  <b-button type="is-danger" expanded outlined @click="clearMeta"
@@ -10,8 +10,8 @@
  type="is-danger"
  expanded
  outlined
- @click="clearAttrs"
  :disabled="!hasAttributes"
+ @click="clearAttrs"
  >Remove ALL attributes</b-button
  >
  </div>
@@ -22,7 +22,7 @@
 <script lang="ts">
 import { emptyArray } from '@/utils/empty'
 import MetaTransactionMixin from '@/utils/mixins/metaMixin'
-import { Component, mixins, Prop, Watch } from 'nuxt-property-decorator'
+import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
 import { showNotification } from '~/utils/notification'
 import { Attribute } from '../../types'
 

components/unique/graphqlResponseTypes.ts

@@ -35,4 +35,3 @@ export type NFTEntitiesWithCount<T> = {
 export type WithData<T> = {
  data: T
 }
-