feat!: remove html props -- use equivalent slots fixes #1930 #2311
Conversation
…next#1930 refactor: useTemplateRef
|
|
commit: |
…nputs and apply them to the associated label element
feat(BFormCheckboxGroup)!: add slot option(${index}) to replace html prop
packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelect.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormSelect/BFormSelectOptionGroup.vue
Outdated
Show resolved
Hide resolved
| <template v-else> | ||
| <BFormCheckbox v-for="(item, index) in normalizeOptions" :key="item.self" v-bind="item.props"> | ||
| <slot | ||
| :name="slots[`option(${index})`] ? (`option(${index})` as 'option()') : 'option()'" |
There was a problem hiding this comment.
I like the idea of the slots. Was wondering if we could have a slot for value also? option(${item.props.value}) so we could have <template #option(foo)>
There was a problem hiding this comment.
ah, but then we have problem if the value is a number, does the index or the value take precedence...
Me myself, I don't see a case where I would use the index over the value in this. So I'd say use the value as option.foo and create a different for the index, ie option[1]... or something like that?
There was a problem hiding this comment.
In all situations of any component, I am unsure if value is unique
There was a problem hiding this comment.
@xvaara In some components value could also be a non-string representation. <option>'s value could be {} if desired
There was a problem hiding this comment.
I toyed with the idea of using the components id but index seemed easier than ids
There was a problem hiding this comment.
In all situations of any component, I am unsure if
valueis unique
Does it need to? It's a problem for the end user. I find if I need to figure which index the element is in more bothersome. ie if a add an element to the array, I need to change the v-slot index value also... And if it's a dynamic list that I want to somehow change for some, it will be so hard. Or I'd need to have multiple v-if:s in there.
The more I think about this the more I think that this is wrong way of doing it.
We should have a prop for the optionSlotField (or something like that) which defaults to 'value' and name the slot with that, or index. And pass the whole option to the slot:
<slot
:name="
slots[`option(${option[prop.optionSlotField]})`]
? (`option(${option[prop.optionSlotField]})` as 'option()')
: slots[`option(${index})`]
? (`option(${index})` as 'option()')
: 'option()'
"
:option="option"
>
{{ option.text }}
</slot>then we can have
<template #option={option}>
<img :src="option.flag"> {{ option.name }} ({{ option.coutrycode }})
</template>
<template #option(us)={option}>
<img :src="/images/us-flag.svg"> USA! USA! USA!
</template>Limiting it to text and value kinda limits the functionality too much.
@xvaara In some components
valuecould also be a non-string representation.<option>'svaluecould be{}if desired
Maybe have prop optionSlotName, default: (option) => option.value?
There was a problem hiding this comment.
I toyed with the idea of using the components
idbut index seemed easier than ids
What does the components id have to do with the options v-for?
There was a problem hiding this comment.
On the other hand, do we need to have slots for other than basic? user can just have:
<template #option={option}>
<template v-if="option.countrycode === 'us'">
<img :src="/images/us-flag.svg"> USA! USA! USA!
</template>
<template v-else>
<img :src="option.flag"> {{ option.name }} ({{ option.coutrycode }})
</template>
</template>
feat(BToast): add defineSlots feat(BNavForm): add props wrapperAttrs & bind attrs.class to li also add prop formClass
* upstream/main: (49 commits) fix: rename ref to avoid Vue warnings (Fix bootstrap-vue-next#2337) (bootstrap-vue-next#2353) Fix show/hide events and emits (bootstrap-vue-next#1821) add some classes and ids for components (bootstrap-vue-next#2344) feat: add __usedComponents __usedDirectives property to the BootstrapVueNextResolver function (bootstrap-vue-next#2351) doc(BNavbar): Parity pass (bootstrap-vue-next#2347) docs: fix lint error (bootstrap-vue-next#2349) fix(BNavbarToggle): toggle default slot doesnt have a scoped argument 'expanded' fixes bootstrap-vue-next#2348 feat!: remove html props -- use equivalent slots fixes bootstrap-vue-next#1930 (bootstrap-vue-next#2311) chore: release main (bootstrap-vue-next#2343) fix(BDropdown): fix infinite loop on keyboard navigation (bootstrap-vue-next#2342) chore: release main (bootstrap-vue-next#2336) feat(BPagination): add keyboard shortcuts fixes bootstrap-vue-next#2153 doc(BNav): Parity pass (bootstrap-vue-next#2332) chore: release main (bootstrap-vue-next#2327) fix(BTable): dynamic slots not rendering fixes bootstrap-vue-next#2328 (bootstrap-vue-next#2329) feat(BTable): make it possible to style custom footers (bootstrap-vue-next#2314) chore: release main (bootstrap-vue-next#2323) fix(BFormGroup): fix layout problem when label-for is not used (bootstrap-vue-next#2321) chore: release main (bootstrap-vue-next#2320) feat(BPagination): add small screen support (bootstrap-vue-next#2308) ...
refactor: useTemplateRef
@xvaara Please double check the changes to popover html usage
fixes #2333