➖ remove b-image component (#5854)

Co-authored-by: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Co-authored-by: Viki Val <viktorko99@gmail.com>

components/collection/CollectionCard.vue

@@ -3,20 +3,22 @@
  <nuxt-link
  v-if="!isLoading && collection"
  :to="`/${urlPrefix}/collection/${collection.id}`">
- <BasicImage
- :src="image"
- :alt="collection.name"
- custom-class="collection-card__image-wrapper" />
-
- <CollectionDetail
- :nfts="collection.nfts || []"
- :name="collection.name || ''"
- :image="image" />
+ <template v-if="!isLoadingMeta">
+ <BasicImage
+ :src="image"
+ :alt="collection.name"
+ custom-class="collection-card__image-wrapper" />
+
+ <CollectionDetail
+ :nfts="collection.nfts || []"
+ :name="collection.name || ''"
+ :image="image" />
+ </template>
  </nuxt-link>
 
  <template v-else>
  <NeoSkeleton no-margin :rounded="false" height="112px" />
- <CollectionDetail :is-loading="true" :nfts="[]" name="" />
+ <CollectionDetail is-loading :nfts="[]" name="" />
  </template>
  </div>
 </template>
@@ -32,6 +34,7 @@ import CollectionDetail from './CollectionDetail.vue'
 import type { Metadata } from '@/components/rmrk/service/scheme'
 
 const { urlPrefix } = usePrefix()
+const isLoadingMeta = ref(false)
 
 interface Props {
  isLoading?: boolean
@@ -46,11 +49,13 @@ onMounted(async () => {
  return
  }
 
+ isLoadingMeta.value = true
  const metadata = (await processSingleMetadata(
  props.collection.metadata
  )) as Metadata
  image.value = sanitizeIpfsUrl(
  metadata.image || metadata.thumbnailUri || metadata.mediaUri || ''
  )
+ isLoadingMeta.value = false
 })
 </script>

components/common/ConnectWallet/WalletMenuItem.vue

@@ -8,10 +8,11 @@
  <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>
+ :alt="wallet.extensionName"
+ width="32"
+ style="vertical-align: middle" />
  <span class="is-size-6 ml-2 is-capitalized">{{ wallet.name }}</span>
  </span>
 

components/generative/CongratsView.vue

@@ -1,15 +1,14 @@
 <template>
  <section>
- <br />
  <p class="title is-size-3">Waii you made it! ✨</p>
  <p class="title is-size-4">Your NFT should be ready in 1 minute</p>
  <nuxt-link class="is-size-4 link" :to="`/bsx/collection/${collectionId}`">
  In the meanwhile, click here to check the collection ♥️🍷
  </nuxt-link>
- <b-image
+ <BasicImage
  src="https://imagedelivery.net/jk5b6spi_m_-9qC4VTnjpg/bafybeifp6l3kqvimdnzymgitv4q67ryodvymx6keihdmudx6vv3syqz2ku/aaa" />
- <br />
  <SubmitButton
+ class="py-2"
  icon="sync"
  type="is-success"
  label="Start over"
@@ -20,17 +19,10 @@
 
 <script setup lang="ts">
 import { COLLECTION_ID } from './promptBuilder'
+import BasicImage from '@/components/shared/view/BasicImage.vue'
+import SubmitButton from '@/components/base/SubmitButton.vue'
 
-const SubmitButton = defineAsyncComponent(
- () => import('@/components/base/SubmitButton.vue')
-)
-
-const { urlPrefix } = usePrefix()
 const collectionId = COLLECTION_ID
-
 const emit = defineEmits(['select'])
-
-const submit = () => {
- emit('select')
-}
+const submit = () => emit('select')
 </script>

components/series/SeriesTable.vue

@@ -36,13 +36,7 @@
  header-class="front-stack-layer"
  cell-class="is-vcentered">
  <div class="image is-48x48 mb-2">
- <b-image
- v-if="!isLoading"
- :src="props.row.image"
- :alt="props.row.name"
- ratio="1by1"
- rounded />
- <NeoSkeleton :active="isLoading" circle width="48px" height="48px" />
+ <BasicImage :src="props.row.image" :alt="props.row.name" rounded />
  </div>
  </b-table-column>
 
@@ -330,6 +324,7 @@ const components = {
  Identity: () => import('@/components/identity/IdentityIndex.vue'),
  Money: () => import('@/components/shared/format/Money.vue'),
  Loader: () => import('@/components/shared/Loader.vue'),
+ BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
 }
 
 @Component({ components })

components/shared/view/BasicImage.vue

@@ -1,32 +1,57 @@
 <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="image-wrapper image is-1by1" :class="customClass">
+ <transition name="fade">
+ <img
+ :src="imageSrc || 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({
- src: { type: String, default: '' },
- alt: { type: String, default: 'KodaDot NFT minted multimedia' },
- customClass: { type: String, default: '' },
- rounded: Boolean,
-})
+const props = withDefaults(
+ defineProps<{
+ src: string
+ alt?: string
+ customClass?: string
+ rounded?: boolean
+ }>(),
+ {
+ src: '',
+ alt: '',
+ customClass: '',
+ }
+)
 
-function onImageError(ev: Event, src: string) {
- $consola.error('[BasicImage] to load:', src, ev)
+const imageSrc = ref(props.src)
+const loaded = ref(false)
+
+const onImageLoad = () => {
+ loaded.value = true
+}
+const onImageError = (ev: Event) => {
+ $consola.error('[BasicImage] to load:', props.src, ev)
+ imageSrc.value = placeholder.value
 }
 </script>
+
+<style lang="scss" scoped>
+.image-wrapper {
+ padding-top: 100%;
+ img {
+ object-fit: cover;
+ }
+}
+</style>

components/shared/view/SelectableImage.vue

@@ -1,17 +1,17 @@
 <template>
- <b-image
- ratio="1by1"
- class="image"
+ <BasicImage
  :class="[
  disabled ? 'selectable-image-disabled' : 'selectable-image',
  { 'is-selected': selected },
  ]"
  :src="src"
  alt="Some Image"
- @click.native="handleClick"></b-image>
+ @click.native="handleClick" />
 </template>
 
 <script setup lang="ts">
+import BasicImage from '@/components/shared/view/BasicImage.vue'
+
 const props = defineProps<{
  src: string
  index: number

components/unique/Collection/Item/CollectionItem.vue

@@ -3,12 +3,7 @@
  <div class="columns is-centered">
  <div class="column is-half has-text-centered">
  <div class="container image is-128x128 mb-2">
- <b-image
- v-if="!isLoading"
- :src="image"
- :alt="name"
- ratio="1by1"
- rounded></b-image>
+ <BasicImage v-if="!isLoading" :src="image" :alt="name" rounded />
  </div>
  <h1 class="title is-2">
  {{ name }}
@@ -101,6 +96,7 @@ import UseApiMixin from '@/utils/mixins/useApiMixin'
 import { tokenIdToRoute } from '../../utils'
 
 const components = {
+ BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
  GalleryCardList: () =>
  import('@/components/rmrk/Gallery/GalleryCardList.vue'),
  Sharing: () => import('@/components/shared/Sharing.vue'),

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
 }
-