Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(Toggle): customize onValue & offValue values #1152

Draft
wants to merge 13 commits into
base: dev
Choose a base branch
from
Draft

feat(Toggle): customize onValue & offValue values #1152

wants to merge 13 commits into from

Conversation

Hossein-Mirazimi
Copy link

@Hossein-Mirazimi Hossein-Mirazimi commented Dec 22, 2023 •
edited by benjamincanac

🔗 Linked issue

Resolves #1139

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@vercel Vercel
Copy link

vercel bot commented Dec 22, 2023 •
edited

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
ui ✅ Ready (Inspect) Visit Preview Jan 8, 2024 11:03am

@benjamincanac
Copy link
Member

Would you mind explaining a use-case for this?

@Hossein-Mirazimi
Copy link
Author

Would you mind explaining a use-case for this?

The use-case for this feature is to increase the reusability of the toggle component by enabling users to set selected and unselected values with ease. By incorporating functionality similar to Vuetify's switches, this approach provides a more flexible and customizable way to implement toggle functionality throughout the application. This streamlines development and ensures a consistent user experience across all parts of the application.

@benjamincanac
Copy link
Member

It would be nice to add a section to the docs too 😊

@benjamincanac benjamincanac changed the title Feat/toggle any value feat(Toggle): customize selected & unselected values Jan 2, 2024
@benjamincanac
Copy link
Member

Could you also fix the lint error?

benjamincanac
benjamincanac reviewed Jan 2, 2024
View reviewed changes
src/runtime/components/forms/Toggle.vue
type: AnyType,
default: false
},
selectedValue: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, it would be better to call it onValue and offValue like for the icons I guess.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's correct. A toggle component is commonly used to switch something on or off, such as a setting or feature within a user interface.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, it would be better to call it onValue and offValue like for the icons I guess.

@benjamincanac

I replaced the prop names 'onValue' and 'offValue' with 'selectedValue' and 'unselectedValue,' respectively. The initial change was made to enhance the clarity and consistency of the component's props. However, I realized that using props that start with 'on' causes Vue to automatically detect an emit, which is a problem for documentation purposes. Therefore, I decided to revert the change and use the original prop names to avoid any conflicts and ensure proper functionality.

@Hossein-Mirazimi Hossein-Mirazimi changed the title feat(Toggle): customize selected & unselected values feat(Toggle): customize onValue & offValue values Jan 2, 2024
@Hossein-Mirazimi
Copy link
Author

To avoid any confusion or issues with the component's documentation, I decided to switch back to the original prop names. This way, everything is clear and accurate, making it easier for developers to understand how the component works and how to use it in their projects.

benjamincanac
benjamincanac reviewed Jan 8, 2024
View reviewed changes
tsconfig.json
@@ -1,5 +1,5 @@
{
"extends": "./.nuxt/tsconfig.json",
"extends": "./docs/.nuxt/tsconfig.json",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why change this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when i run project i have many issues about this

the path is not correct

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you run pnpm run dev:prepare? https://ui.nuxt.com/getting-started/contributing#_2-local-development-setup

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no 😅

I remove this change

benjamincanac
benjamincanac reviewed Jan 8, 2024
View reviewed changes
Copy link
Member

@benjamincanac benjamincanac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you mind adding those new fields to the documentation?

@Hossein-Mirazimi
Copy link
Author

Would you mind adding those new fields to the documentation?

I will

@Hossein-Mirazimi
Copy link
Author

Would you mind adding those new fields to the documentation?

I'm having trouble running the documentation. When I try to run it and add some text anywhere, the app crashes. I'm not sure what's causing this issue, and I was hoping you might have some insight or suggestions on how to fix it.

@benjamincanac Volta.net
Copy link
Member

Do you have an error?? What do you mean by crash?

@Hossein-Mirazimi
Copy link
Author

Do you have an error?? What do you mean by crash?

I can run the documentation, but when I try to modify it, I get an error in the console, and eventually the app crashes. The error message looks something like this:

[nuxt] [request error] [fatal] [404] Page not found
at Module.createError (./node_modules/.pnpm/h3@1.9.0/node_modules/h3/dist/index.mjs:78:15)
at Module.createError (./node_modules/.pnpm/nuxt@3.8.2_eslint@8.56.0_rollup@3.29.4_typescript@5.3.3_vite@5.0.10_vue-tsc@1.8.25/node_modules/nuxt/dist/app/composables/error.js:39:38)
at setup (./docs/pages/[...slug].vue:74:36)

and warning message in the chrome console about hydration mismatch
[Vue warn]: Hydration text content mismatch in :

  • Server rendered: "md"
  • Client rendered: "2xs"
    at <Field name="size" global=false description="" ... >
    at <ComponentPropsField key="size" prop=

It seems like there's some kind of error related to a module or a missing page, but it's difficult to diagnose without more information. Have you tried searching for this error message online or checking the documentation for the app you're using to see if there's any information about this type of error?

@benjamincanac benjamincanac marked this pull request as draft January 29, 2024 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@benjamincanac benjamincanac benjamincanac left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feature Request] UToggle true/false value
2 participants
@Hossein-Mirazimi @benjamincanac