refactor: neo dropdown

[preschian]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Needs QA check

• @kodadot/qa-guild please review

Context

• Related Goodbye Buefy #5852

Did your issue had any of the "$" label on it?

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at 934af36

Refactored various components to use custom NeoDropdown and NeoDropdownItem components instead of Buefy components for better UI consistency, accessibility, and performance. Added a new feature to list an NFT directly from the gallery item by passing the nftId and price as parameters. Updated the NeoDropdown and NeoDropdownItem components to extend the oruga library components and allow more customization. Fixed some minor bugs and improved the styling of the dropdown components.

🤖 Generated by Copilot at 934af36

We're breaking free from the chains of Buefy
We're building our own NeoDropdown army
We're refactoring the code with fire and fury
We're improving the design, performance, and accessibility

[reviewpad]

AI-Generated Summary: This pull request includes multiple changes across various components, primarily focusing on replacing b-dropdown and b-dropdown-item with the new custom components NeoDropdown and NeoDropdownItem. The import statements have been updated to import these new components directly from the @kodadot1/brick package. The file diffs also involve refactoring and simplification of component structures, improved usage of templates and slots, and better handling of events and attributes. Several files also have minor code style improvements and enhanced readability. Additionally, the composables/transaction/types.ts file shows updates to the ActionList type, making it more flexible and customizable. Overall, this pull request improves the consistency, maintainability, and user experience of the components involved.

[reviewpad]

Reviewpad Report

⚠️ Warnings

• Please link an issue to the pull request

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	71485d3
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/649c03c9ab7663000884d807
😎 Deploy Preview	https://deploy-preview-6196--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[preschian]

todos:

• migrate .dropdown-menu and .dropdown-item selector

[roiLeo]

hover state in navbar

Enregistrement.de.l.ecran.2023-06-20.a.11.42.21.AM.mov

[prury]

• Create on Statemine:
  

• Chart dropdown broken on mobile
  Dropdown options won't show

• Mobile issues(on both items and gallery pages):
  
  
  
  

[preschian]

@roiLeo @prury updated

[roiLeo]

✅ wfm

[vikiival]

[prury]

Another one(unlockables mobile):

[preschian]

Another one(unlockables mobile):

updated

[daiagi]

is there something that can be done about the repeating
<template #trigger="{ active }"> ?

1. can we make trigger active by default
2. what are the other options except for active?

[roiLeo]

is there something that can be done about the repeating <template #trigger="{ active }"> ?

1. can we make trigger active by default

2. what are the other options except for active?

I think we can replace it by <template #trigger> and it would still work

[vikiival]

cc @preschian ?

[preschian]

is there something that can be done about the repeating
<template #trigger="{ active }"> ?

feel free to create a wrapper component for this case. for NeoDropdown let it extends ODropdown components

1. can we make trigger active by default
2. what are the other options except for active?

1. need to pass it down from slot-props. ref: https://oruga.io/components/Dropdown.html
2. for now only active from slot-props. ref: https://github.com/oruga-ui/oruga/blob/126aba420d7b0635e8d1c9aec1202ab1bf2eab20/packages/oruga/src/components/dropdown/Dropdown.vue#L17

use #trigger={ active } when it needs active state, for example in this component, active state used on NeoButton props

nft-gallery/components/chart/PriceChart.vue

Lines 7 to 13 in 475e5e8

	<template #trigger="{ active }">
	<NeoButton
	:label="selectedTimeRange.label"
	class="time-range-button"
	no-shadow
	:active="active" />
	</template>

in this component, no need active state from dropdown. so, just write it #trigger

nft-gallery/components/common/ConnectWallet/WalletAssetMenu.vue

Lines 26 to 29 in 475e5e8

	<template #trigger>
	<NeoIcon icon="globe" />
	<span>{{ $t('profileMenu.language') }}</span>
	</template>

ref: https://vuejs.org/guide/components/slots.html#scoped-slots

[codeclimate]

Code Climate has analyzed commit 71485d3 and detected 0 issues on this pull request.

View more on Code Climate.