refactor(BasicNumberInput): to composition api

[leo-anderson-x]

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

Context

• Related wtih Reduce using nuxt-property-decorator and use composition API #4750
• Requires deployment <snek/rubick/worker>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Optional

• I've tested it at </ksm/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

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

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

Copilot Summary

🤖 Generated by Copilot at 8c3cecd

Refactored BasicNumberInput.vue to use Vue 3 Composition API. Removed VModel and Prop decorators and replaced them with defineProps, defineEmits, and computed helpers. Improved code readability and TypeScript support.

🤖 Generated by Copilot at 8c3cecd

BasicNumberInput
Composed with new Vue syntax
Spring of refactoring

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	2a05fdb
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64e2dcb8b23ae7000749d9b1
😎 Deploy Preview	https://deploy-preview-6830--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.

[reviewpad]

AI-Generated Summary: This pull request refactors the BasicNumberInput.vue component in the shared form components folder. It migrates the script from using the nuxt-property-decorator to the Vue Composition API. It also replaces the component definition and replaces it with the setup method in the script. The props definitions and the emit function are also updated, and the focus state is now managed with the ref function. Furthermore, the default properties expanded, min, and step are set in the props object. Changes are made to make the component more simplified and maintainable.

[reviewpad]

Reviewpad Report

⚠️ Warnings

• Please link an issue to the pull request

[vikiival]

Looks good

Have you tested the componen?

[leo-anderson-x]

Have you tested the componen?

@vikiival Yes, I tested Royalty Rate Input:

CleanShot.2023-08-20.at.22.10.51.mp4

[stephenjason89]

code lgtm

[roiLeo]

small stuff, otherwise lgtm

[codeclimate]

Code Climate has analyzed commit 2a05fdb and detected 0 issues on this pull request.

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
1.7% Duplication

[vikiival]

pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 4.48 USD/DOT ~ 6.696 $DOT
🧗 12RA5J7wGg6bDWPTZG359Pn5bCzXSJRfsifo3UktqVAjhJ9k
🔗 0x39779ecfd9ae4b65b676bae88b3539f3b62cff942594548ab1786110d6357d74

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues