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

Closed
wants to merge 13 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
98f7d54
chore(utils): add isEqual utility function
Dec 22, 2023
b288fda
feat(toggle): enhance modelValue to emit multiple value instead of bo…
Dec 22, 2023
9eaa8ba
refactor(toggle): rename selected value props
Jan 2, 2024
97276ac
fix(toggle): eslint error
Jan 2, 2024
7859111
refactor(toggle): rename selectedValue and unselectedValue to onValue…
Jan 2, 2024
ecaee87
Merge branch 'dev' into feat/toggle-any-value
Hossein-Mirazimi Jan 2, 2024
511992d
Merge branch 'nuxt:dev' into feat/toggle-any-value
Hossein-Mirazimi Jan 2, 2024
e933232
fix: resolve extends path for tsconfig file
Jan 2, 2024
a5f980b
refactor(toggle): use ohash to compare two object
Jan 3, 2024
cd4f81f
Merge branch 'nuxt:dev' into feat/toggle-any-value
Hossein-Mirazimi Jan 3, 2024
9260397
Revert "refactor(toggle): rename selectedValue and unselectedValue to…
Jan 3, 2024
0a0170b
Merge branch 'nuxt:dev' into feat/toggle-any-value
Hossein-Mirazimi Jan 5, 2024
4238286
Merge branch 'dev' into feat/toggle-any-value
Hossein-Mirazimi Jan 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions src/runtime/components/forms/Toggle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { computed, toRef, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { Switch as HSwitch } from '@headlessui/vue'
import { twMerge, twJoin } from 'tailwind-merge'
import { isEqual } from 'ohash'
import UIcon from '../elements/Icon.vue'
import { useUI } from '../../composables/useUI'
import { useFormGroup } from '../../composables/useFormGroup'
Expand All @@ -35,6 +36,8 @@ import colors from '#ui-colors'

const config = mergeConfig<typeof toggle>(appConfig.ui.strategy, appConfig.ui.toggle, toggle)

const AnyType = [Boolean, String, Number, Object]

export default defineComponent({
components: {
HSwitch,
Expand All @@ -51,7 +54,15 @@ export default defineComponent({
default: null
},
modelValue: {
type: Boolean,
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

@Hossein-Mirazimi Hossein-Mirazimi Jan 3, 2024 •
edited
Loading

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.

type: AnyType,
default: true
},
unselectedValue: {
type: AnyType,
default: false
},
disabled: {
Expand Down Expand Up @@ -97,10 +108,13 @@ export default defineComponent({

const active = computed({
get () {
return props.modelValue
if (typeof props?.selectedValue === 'object') {
return isEqual((props.modelValue as Record<string, unknown> | unknown[]), (props.selectedValue as Record<string, unknown> | unknown[]))
}
return props.modelValue === props.selectedValue
},
set (value) {
emit('update:modelValue', value)
emit('update:modelValue', !value ? props.unselectedValue : props.selectedValue)
emitFormChange()
}
})
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

"exclude": ["docs", "dist"],
"compilerOptions": {
"noImplicitAny": false,
Expand Down
Loading