🔧 libs/ui errors & warning

libs/ui/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@google/model-viewer": "^1.12.1",
+    "@vueuse/core": "^9.13.0",
     "bulma": "0.9.4",
     "vue": "^3.3.4",
     "vue-audio-visual": "2.5.0"

libs/ui/src/components/MediaItem/MediaItem.story.vue

@@ -1,36 +1,32 @@
 <template>
   <Story title="MediaItem">
-    <Variant title="default">
-      <MediaItem />
-    </Variant>
-
     <Variant title="image">
       <MediaItem
-        src="https://kodadot.mypinata.cloud/ipfs/bafybeig6clbsbabxkku3m4furbj4klayyx7ovwtcocmgwqmv4nxllnbxxy" />
+        src="https://image-beta.w.kodadot.xyz/ipfs/bafybeig6clbsbabxkku3m4furbj4klayyx7ovwtcocmgwqmv4nxllnbxxy" />
     </Variant>
 
     <Variant title="video">
       <MediaItem
-        src="https://kodadot.mypinata.cloud/ipfs/bafybeib22hxgpef7lpoltxsi2p2bm7jjhnntwedeupdjcz4pxgfps6dz7i"
-        animation-src="https://kodadot.mypinata.cloud/ipfs/bafybeigy4tyylo7hvk5qovlqwahl5dnh56wzdt3rrawceyqrlmvmbw7sey"
+        src="https://image-beta.w.kodadot.xyz/ipfs/bafybeib22hxgpef7lpoltxsi2p2bm7jjhnntwedeupdjcz4pxgfps6dz7i"
+        animation-src="https://image-beta.w.kodadot.xyz/ipfs/bafybeigy4tyylo7hvk5qovlqwahl5dnh56wzdt3rrawceyqrlmvmbw7sey"
         mime-type="video/mp4" />
     </Variant>
 
     <Variant title="audio">
       <MediaItem
-        src="https://kodadot.mypinata.cloud/ipfs/bafybeig6dnjacg4sipst4tkxm36ykkfuqkkb5dvfaale4u65hjtdlspvri"
-        animation-src="https://kodadot.mypinata.cloud/ipfs/bafybeibuet6ba3xquuhiurq2on2i5ccibuh3s7aiqp6c2gqlokgtgwvu5y"
+        src="https://image-beta.w.kodadot.xyz/ipfs/bafybeig6dnjacg4sipst4tkxm36ykkfuqkkb5dvfaale4u65hjtdlspvri"
+        animation-src="https://image-beta.w.kodadot.xyz/ipfs/bafybeibuet6ba3xquuhiurq2on2i5ccibuh3s7aiqp6c2gqlokgtgwvu5y"
         mime-type="audio/mpeg" />
     </Variant>
 
     <Variant title="3d">
       <MediaItem
-        animation-src="https://kodadot.mypinata.cloud/ipfs/bafybeiemgzrougue4cwbf3g5ejnmrjrjxdy45522zecz6eukcpwg42z2g4" />
+        animation-src="https://image-beta.w.kodadot.xyz/ipfs/bafybeiemgzrougue4cwbf3g5ejnmrjrjxdy45522zecz6eukcpwg42z2g4" />
     </Variant>
 
     <Variant title="json">
       <MediaItem
-        src="https://kodadot.mypinata.cloud/ipfs/bafkreiatmzjr4tx46tyjh63bpyici6sb54cllvuozj2t2ct2vbx4ez4puy"
+        src="https://image-beta.w.kodadot.xyz/ipfs/bafkreiatmzjr4tx46tyjh63bpyici6sb54cllvuozj2t2ct2vbx4ez4puy"
         mime-type="application/json" />
     </Variant>
 
@@ -41,13 +37,13 @@
 
     <Variant title="pdf">
       <MediaItem
-        src="https://kodadot.mypinata.cloud/ipfs/bafybeih6yrucucyamosb2nk4qch4cg4bxdv3yheortwawttslvt7ameiiu"
+        src="https://image-beta.w.kodadot.xyz/ipfs/bafybeih6yrucucyamosb2nk4qch4cg4bxdv3yheortwawttslvt7ameiiu"
         mime-type="application/pdf" />
     </Variant>
 
     <Variant title="unknown">
       <MediaItem
-        src="https://kodadot.mypinata.cloud/ipfs/bafybeih6yrucucyamosb2nk4qch4cg4bxdv3yheortwawttslvt7ameiiu"
+        src="https://image-beta.w.kodadot.xyz/ipfs/bafybeih6yrucucyamosb2nk4qch4cg4bxdv3yheortwawttslvt7ameiiu"
         mime-type="unknown" />
     </Variant>
   </Story>

libs/ui/src/components/MediaItem/MediaItem.vue

@@ -46,9 +46,12 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { useElementHover } from '@vueuse/core'
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
+
 import { getMimeType, resolveMedia } from '@/utils/gallery/media'
 import { MediaType } from '@/components/rmrk/types'
-import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import ImageMedia from './type/ImageMedia.vue'
 import VideoMedia from './type/VideoMedia.vue'
 import AudioMedia from './type/AudioMedia.vue'
@@ -57,7 +60,6 @@ import JsonMedia from './type/JsonMedia.vue'
 import IFrameMedia from './type/IFrameMedia.vue'
 import ObjectMedia from './type/ObjectMedia.vue'
 import Media from './type/UnknownMedia.vue'
-import { useElementHover } from '@vueuse/core'
 
 const SUFFIX = 'Media'
 const props = withDefaults(
@@ -86,7 +88,10 @@ const props = withDefaults(
     disableOperation: undefined,
   },
 )
-const isInteractive = ref<boolean>(false)
+
+const isInteractive = computed(() => {
+  return resolveMedia(mimeType.value) === MediaType.IFRAME && !props.isDetail
+})
 const type = ref('')
 
 // props.mimeType may be empty string "". Add `image/png` as fallback
@@ -105,9 +110,7 @@ const components = {
 
 const resolveComponent = computed(() => {
   let mediaType = resolveMedia(mimeType.value)
-
   if (mediaType === MediaType.IFRAME && !props.isDetail) {
-    isInteractive.value = true
     mediaType = MediaType.IMAGE
   }
   return components[mediaType + SUFFIX]

libs/ui/src/components/MediaItem/type/AudioMedia.vue

@@ -19,9 +19,10 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useElementHover, watchDebounced } from '@vueuse/core'
 import { NeoAudioPlayer } from '@kodadot1/brick'
 import ImageMedia from './ImageMedia.vue'
-import { useElementHover, watchDebounced } from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{

libs/ui/src/components/MediaItem/type/VideoMedia.vue

@@ -16,6 +16,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 const props = withDefaults(
   defineProps<{
     animationSrc?: string

libs/ui/src/components/NeoAudioPlayer/NeoAudioPlayer.vue

@@ -60,6 +60,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, ref } from 'vue'
 import { useEventListener, useMediaControls } from '@vueuse/core'
 import { NeoButton, NeoIcon, NeoSkeleton } from '@kodadot1/brick'
 import { getRandomValues } from '@/components/unique/utils'

libs/ui/src/components/NeoAudioPlayer/NeoWaveform.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import WaveSurfer from 'wavesurfer.js'
 
 const emit = defineEmits(['play', 'ready'])

libs/ui/src/components/NeoAvatar/NeoAvatar.story.vue

@@ -14,7 +14,7 @@
 import NeoAvatar from './NeoAvatar.vue'
 
 const image =
-  'https://kodadot.mypinata.cloud/ipfs/bafybeigdh3ecetqmzplrjrovs5po23vwpikh2vgtfjai4vky5qzitjzaq4'
+  'https://image-beta.w.kodadot.xyz/ipfs/bafybeigdh3ecetqmzplrjrovs5po23vwpikh2vgtfjai4vky5qzitjzaq4'
 
 const name = 'NFT Avatar'
 const size = 70

libs/ui/src/components/NeoAvatar/NeoAvatar.vue

@@ -14,6 +14,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
   avatar?: string
   placeholder: string

libs/ui/src/components/NeoCheckbox/NeoCheckbox.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
 import { OCheckbox } from '@oruga-ui/oruga-next'
 const props = defineProps<{
   disabled?: boolean

libs/ui/src/components/NeoDropdown/NeoDropdown.story.vue

@@ -1,11 +1,14 @@
 <template>
   <Story title="NeoDropdown" :layout="{ type: 'grid', width: '200px' }">
     <Variant title="With Text">
-      {{ label }}
-      <NeoDropdownItem
-        v-for="(option, index) in options"
-        :key="index"
-        :item="option" />
+      <NeoDropdown>
+        <template #trigger>{{ label }}</template>
+
+        <NeoDropdownItem
+          v-for="(option, index) in options"
+          :key="index"
+          :item="option" />
+      </NeoDropdown>
     </Variant>
     <Variant title="With Button">
       <NeoDropdown>

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

@@ -21,6 +21,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { useVModel } from '@vueuse/core'
 import { OModal } from '@oruga-ui/oruga-next'
 
 const props = withDefaults(

libs/ui/src/components/NeoModalHead/NeoModalHead.vue

@@ -22,6 +22,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 
 defineProps<{

libs/ui/src/components/NeoNftCard/NFTMediaInfo.vue

@@ -41,11 +41,15 @@
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { NftCardVariant } from '@kodadot1/brick'
+
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 import { getChainNameByPrefix } from '@/utils/chain'
-import { NftCardVariant } from '@kodadot1/brick'
 import { NeoNFT } from './types'
+
 const props = withDefaults(
   defineProps<{
     nft: NeoNFT

libs/ui/src/components/NeoNftCard/NFTMediaInfoStacked.vue

@@ -60,8 +60,10 @@
 </template>
 
 <script lang="ts" setup>
-import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
+import { computed } from 'vue'
 import { NeoButton, NftCardVariant } from '@kodadot1/brick'
+
+import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
 import { NeoNFT } from './types'
 
 const props = withDefaults(

libs/ui/src/components/NeoNftCard/NeoNftCard.vue

@@ -70,9 +70,11 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
+import { NeoSkeleton, NftCardVariant } from '@kodadot1/brick'
 import type { ComputedOptions, ConcreteComponent, MethodOptions } from 'vue'
+
 import MediaItem from '../MediaItem/MediaItem.vue'
-import { NeoSkeleton, NftCardVariant } from '@kodadot1/brick'
 import NFTMediaInfoStacked from './NFTMediaInfoStacked.vue'
 import NFTMediaInfo from './NFTMediaInfo.vue'
 import { NeoNFT } from './types'

libs/ui/src/components/NeoSteps/NeoSteps.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import { computed } from 'vue'
 import { OSteps } from '@oruga-ui/oruga-next'
 
 const props = withDefaults(

libs/ui/src/components/NeoStickyModal/NeoStickyModal.vue

@@ -69,6 +69,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import NeoModal from '../NeoModal/NeoModal.vue'
 import NeoButton from '../NeoButton/NeoButton.vue'
 

libs/ui/src/components/NeoTooltip/NeoTooltip.vue

@@ -34,6 +34,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import { OTooltip } from '@oruga-ui/oruga-next'
 import { LocaleMessage } from 'vue-i18n'
 export interface Props {

package.json

@@ -62,7 +62,6 @@
     "@braintree/sanitize-url": "^6.0.4",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@google/model-viewer": "^1.12.1",
     "@kodadot1/brick": "workspace:*",
     "@kodadot1/minimark": "^0.1.10",
     "@kodadot1/minipfs": "0.4.1-rc.0",