🔧 oruga component usage

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'

components/gallery/GalleryItemTabsPanel/GalleryItemActivityTable.vue

@@ -1,32 +1,32 @@
 <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"
  :label="`${$t(`tabs.tabActivity.price`)} (${chainSymbol})`">
  <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'

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'

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()

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'