From 4bbe01e525d17998057c989897a52a5097f60931 Mon Sep 17 00:00:00 2001
From: roiLeo <medina.leo42@gmail.com>
Date: Mon, 19 Jun 2023 09:52:36 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20oruga=20component=20usage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/gallery/GalleryItemDescription.vue | 23 +++++++-----
 .../GalleryItemActivityTable.vue              | 36 ++++++++++---------
 .../GalleryItemOffers.vue                     | 36 +++++++++----------
 .../filters/modules/PopularCollections.vue    |  7 ++--
 .../components/NeoRadio/NeoRadio.story.vue    |  6 ++--
 5 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/components/gallery/GalleryItemDescription.vue b/components/gallery/GalleryItemDescription.vue
index 0c6818fbc8..8497a7dda9 100644
--- a/components/gallery/GalleryItemDescription.vue
+++ b/components/gallery/GalleryItemDescription.vue
@@ -21,17 +21,17 @@
       :disabled="propertiesTabDisabled"
       :label="$t('tabs.properties')"
       :disabled-tooltip="$t('tabs.noPropertiesForNFT')">
-      <o-table v-if="properties?.length" :data="properties" hoverable>
-        <o-table-column
+      <NeoTable v-if="properties?.length" :data="properties" hoverable>
+        <NeoTableColumn
           v-slot="props"
           field="trait_type"
           :label="$t('tabs.tabProperties.section')">
           {{ props.row.trait_type }}
-        </o-table-column>
-        <o-table-column v-slot="props" field="value" label="Trait">
+        </NeoTableColumn>
+        <NeoTableColumn v-slot="props" field="value" label="Trait">
           {{ props.row.value }}
-        </o-table-column>
-      </o-table>
+        </NeoTableColumn>
+      </NeoTable>
     </DisablableTab>
 
     <!-- details tab -->
@@ -116,12 +116,17 @@
 </template>
 
 <script setup lang="ts">
-import { OTabItem, OTable, OTableColumn, OTabs } from '@oruga-ui/oruga'
+import { OTabItem, OTabs } from '@oruga-ui/oruga'
+import {
+  DisablableTab,
+  MediaItem,
+  NeoTable,
+  NeoTableColumn,
+} from '@kodadot1/brick'
+
 import Identity from '@/components/identity/IdentityIndex.vue'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 
-import { DisablableTab, MediaItem } from '@kodadot1/brick'
-
 import { GalleryItem, useGalleryItem } from './useGalleryItem'
 
 import { MediaType } from '@/components/rmrk/types'
diff --git a/components/gallery/GalleryItemTabsPanel/GalleryItemActivityTable.vue b/components/gallery/GalleryItemTabsPanel/GalleryItemActivityTable.vue
index b9d9a95370..918ae2a0e4 100644
--- a/components/gallery/GalleryItemTabsPanel/GalleryItemActivityTable.vue
+++ b/components/gallery/GalleryItemTabsPanel/GalleryItemActivityTable.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="gallery-item-activity-table is-flex is-flex-direction-column">
-    <o-table
+    <NeoTable
       v-if="events.length"
       :data="events"
       hoverable
       class="py-5 padding-top-mobile">
       <!-- event name -->
-      <o-table-column
+      <NeoTableColumn
         v-slot="props"
         width="20%"
         field="interaction"
         :label="$t('tabs.tabActivity.event')">
         {{ props.row.interaction.toLowerCase() }}
-      </o-table-column>
+      </NeoTableColumn>
 
       <!-- price -->
-      <o-table-column
+      <NeoTableColumn
         v-slot="props"
         width="20%"
         field="meta"
@@ -23,10 +23,10 @@
         <p v-if="Number(props.row.meta)">
           {{ formatPrice(props.row.meta) }}
         </p>
-      </o-table-column>
+      </NeoTableColumn>
 
       <!-- from -->
-      <o-table-column
+      <NeoTableColumn
         v-slot="props"
         width="20%"
         field="caller"
@@ -43,10 +43,10 @@
           class="has-text-link">
           <Identity :address="props.row.caller" />
         </nuxt-link>
-      </o-table-column>
+      </NeoTableColumn>
 
       <!-- to -->
-      <o-table-column
+      <NeoTableColumn
         v-slot="props"
         width="20%"
         field="currentOwner"
@@ -71,19 +71,19 @@
           class="has-text-link">
           <Identity :address="props.row.meta" />
         </nuxt-link>
-      </o-table-column>
+      </NeoTableColumn>
 
       <!-- date -->
-      <o-table-column
+      <NeoTableColumn
         v-slot="props"
         width="20%"
         field="timestamp"
         :label="$t('tabs.tabActivity.date')">
-        <o-tooltip :label="parseDate(props.row.timestamp)" position="left">
+        <NeoTooltip :label="parseDate(props.row.timestamp)" position="left">
           <span class="no-wrap">{{ formatToNow(props.row.timestamp) }}</span>
-        </o-tooltip>
-      </o-table-column>
-    </o-table>
+        </NeoTooltip>
+      </NeoTableColumn>
+    </NeoTable>
     <div v-else-if="loading" class="p-5">
       <NeoSkeleton animated size="large" :count="3"></NeoSkeleton>
     </div>
@@ -92,9 +92,13 @@
 </template>
 
 <script setup lang="ts">
-import { OTable, OTableColumn, OTooltip } from '@oruga-ui/oruga'
 import Identity from '@/components/identity/IdentityIndex.vue'
-import { NeoSkeleton } from '@kodadot1/brick'
+import {
+  NeoSkeleton,
+  NeoTable,
+  NeoTableColumn,
+  NeoTooltip,
+} from '@kodadot1/brick'
 import { formatToNow } from '@/utils/format/time'
 import formatBalance from '@/utils/format/balance'
 import { parseDate } from '@/utils/datetime'
diff --git a/components/gallery/GalleryItemTabsPanel/GalleryItemOffers.vue b/components/gallery/GalleryItemTabsPanel/GalleryItemOffers.vue
index 8433366a9a..a78dd838e8 100644
--- a/components/gallery/GalleryItemTabsPanel/GalleryItemOffers.vue
+++ b/components/gallery/GalleryItemTabsPanel/GalleryItemOffers.vue
@@ -1,46 +1,46 @@
 <template>
   <div>
     <Loader v-model="isLoading" :status="status" />
-    <o-table v-if="offers?.length" :data="offers" hoverable>
+    <NeoTable v-if="offers?.length" :data="offers" hoverable>
       <!-- token price -->
-      <o-table-column
+      <NeoTableColumn
         v-slot="props"
         field="id"
         :label="`${$t(`offer.price`)} (${chainSymbol})`">
         {{ getOffersDetails(props.row.id).token }}
-      </o-table-column>
+      </NeoTableColumn>
 
       <!-- usd price -->
-      <o-table-column v-slot="props" field="id" :label="$t('offer.usdPrice')">
+      <NeoTableColumn v-slot="props" field="id" :label="$t('offer.usdPrice')">
         {{ getOffersDetails(props.row.id).usd }}
-      </o-table-column>
+      </NeoTableColumn>
 
       <!-- floor difference -->
-      <o-table-column
+      <NeoTableColumn
         v-slot="props"
         field="id"
         :label="$t('offer.floorDifferences')">
         {{ getOffersDetails(props.row.id).floorDifference }}
-      </o-table-column>
+      </NeoTableColumn>
 
       <!-- expiration -->
-      <o-table-column
+      <NeoTableColumn
         v-slot="props"
         field="expiration"
         :label="$t('offer.expiration')">
         {{ expirationTime(props.row.expiration) }}
-      </o-table-column>
+      </NeoTableColumn>
 
       <!-- caller -->
-      <o-table-column v-slot="props" field="caller" :label="$t('offer.caller')">
+      <NeoTableColumn v-slot="props" field="caller" :label="$t('offer.caller')">
         <nuxt-link
           :to="`/${urlPrefix}/u/${props.row.caller}`"
           class="has-text-link">
           <Identity :address="props.row.caller" />
         </nuxt-link>
-      </o-table-column>
+      </NeoTableColumn>
       <!-- status -->
-      <o-table-column v-slot="props" field="status" :label="$t('offer.status')">
+      <NeoTableColumn v-slot="props" field="status" :label="$t('offer.status')">
         <span
           :class="{
             'has-text-danger': props.row.status === OfferStatusType.WITHDRAWN,
@@ -54,8 +54,8 @@
           }"
           >{{ formatOfferStatus(props.row.status, props.row.expiration) }}</span
         >
-      </o-table-column>
-      <o-table-column v-slot="props" field="action">
+      </NeoTableColumn>
+      <NeoTableColumn v-slot="props" field="action">
         <NeoSecondaryButton
           v-if="
             (props.row.caller === accountId || isOwner) && isActive(props.row)
@@ -70,20 +70,18 @@
           @click.native="onAcceptOffer(props.row.caller)"
           >Accept</NeoSecondaryButton
         >
-      </o-table-column>
-    </o-table>
+      </NeoTableColumn>
+    </NeoTable>
     <div v-else class="has-text-centered">{{ $t('nft.offer.empty') }}</div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { OTable, OTableColumn } from '@oruga-ui/oruga'
+import { NeoSecondaryButton, NeoTable, NeoTableColumn } from '@kodadot1/brick'
 import Identity from '@/components/identity/IdentityIndex.vue'
-
 import { getKSMUSD } from '@/utils/coingecko'
 import formatBalance from '@/utils/format/balance'
 import { formatSecondsToDuration } from '@/utils/format/time'
-import { NeoSecondaryButton } from '@kodadot1/brick'
 import type { Offer, OfferResponse } from '@/components/bsx/Offer/types'
 import type { CollectionEvents } from '@/components/rmrk/service/scheme'
 import { OfferStatusType } from '@/utils/offerStatus'
diff --git a/components/shared/filters/modules/PopularCollections.vue b/components/shared/filters/modules/PopularCollections.vue
index 5d7d93120f..a3673433c9 100644
--- a/components/shared/filters/modules/PopularCollections.vue
+++ b/components/shared/filters/modules/PopularCollections.vue
@@ -15,7 +15,7 @@
       </div>
     </template>
     <div v-if="collections.length > 0" class="p-4">
-      <o-field
+      <NeoField
         v-for="(collection, index) in collections"
         :key="`${collection.id}-${isCutArray[index].value}`"
         class="mb-2">
@@ -50,7 +50,7 @@
             </div>
           </div>
         </NeoCheckbox>
-      </o-field>
+      </NeoField>
     </div>
     <div v-else class="p-4 is-size-6 has-text-grey">
       {{ $t('general.noPopularCollections') }}
@@ -62,11 +62,10 @@
 import { NeoCheckbox, NeoTooltip } from '@kodadot1/brick'
 import { useExploreFiltersStore } from '@/stores/exploreFilters'
 import { Collection, usePopularCollections } from './usePopularCollections'
-import { OField } from '@oruga-ui/oruga'
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { getCollectionIds } from '@/utils/queryParams'
 import { useTextOverflow } from '@/composables/useTextOverflow'
-import { NeoIcon } from '@kodadot1/brick'
+import { NeoField, NeoIcon } from '@kodadot1/brick'
 
 const exploreFiltersStore = useExploreFiltersStore()
 const route = useRoute()
diff --git a/libs/ui/src/components/NeoRadio/NeoRadio.story.vue b/libs/ui/src/components/NeoRadio/NeoRadio.story.vue
index 3c46793850..874e18e967 100644
--- a/libs/ui/src/components/NeoRadio/NeoRadio.story.vue
+++ b/libs/ui/src/components/NeoRadio/NeoRadio.story.vue
@@ -63,7 +63,7 @@
     </Variant>
 
     <Variant title="NeoRadioButton">
-      <OField>
+      <NeoField>
         <NeoRadioButton
           v-model="radioButton"
           native-value="Nope"
@@ -88,7 +88,7 @@
         <NeoRadioButton v-model="radioButton" native-value="Disabled" disabled>
           Disabled
         </NeoRadioButton>
-      </OField>
+      </NeoField>
 
       <p class="content">
         <b>Selection:</b>
@@ -100,7 +100,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { OField } from '@oruga-ui/oruga'
+import NeoField from './NeoField.vue'
 import NeoRadio from './NeoRadio.vue'
 import NeoRadioButton from './NeoRadioButton.vue'