Merge pull request #5883 from kodadot/feat-neo-modal-move

#5853 neo modal

components/gallery/GalleryItemPreviewer.vue

@@ -1,11 +1,12 @@
 <template>
- <b-modal
+ <NeoModal
  v-model="isFullscreen"
  :destroy-on-hide="false"
  :can-cancel="false"
  full-screen
- custom-class="gallery-item-modal"
- custom-content-class="gallery-item-modal-content">
+ root-class="gallery-item-modal"
+ content-class="gallery-item-modal-content"
+ @close="isFullscreen = false">
  <NeoButton class="back-button" @click.native="emit('input', false)">
  <NeoIcon icon="chevron-left" />
  {{ $t('go back') }}
@@ -21,12 +22,12 @@
  :title="nft?.name || nft?.id"
  original />
  </div>
- </b-modal>
+ </NeoModal>
 </template>
 
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import { MediaItem, NeoButton, NeoIcon } from '@kodadot1/brick'
+import { MediaItem, NeoButton, NeoIcon, NeoModal } from '@kodadot1/brick'
 import { useGalleryItem } from './useGalleryItem'
 const { nft, nftAnimation, nftMimeType } = useGalleryItem()
 const { placeholder } = useTheme()

libs/ui/src/components/NeoModal/NeoModal.vue

@@ -3,7 +3,11 @@
  class="neo-modal"
  scroll="clip"
  :active.sync="isModalActive"
+ :destroy-on-hide="destroyOnHide"
  :can-cancel="canCancel"
+ :full-screen="fullScreen"
+ :content-class="contentClass"
+ :root-class="rootClass"
  @close="updateClose">
  <slot />
  </o-modal>
@@ -15,10 +19,18 @@ import { OModal } from '@oruga-ui/oruga'
 const props = withDefaults(
  defineProps<{
  value: boolean
- canCancel?: string[] | boolean
+ destroyOnHide?: boolean
+ canCancel?: boolean
+ fullScreen?: boolean
+ contentClass?: boolean
+ rootClass?: boolean
  }>(),
  {
+ destroyOnHide: true,
  canCancel: true,
+ fullScreen: false,
+ contentClass: false,
+ rootClass: false,
  }
 )