fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(catalog): render parameter toggles as labeled pills

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 15:08:36 +07:00
parent 9c889e200a
commit 3fd41fb565
1 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/components/catalog/CatalogConfigurator.vue
View File

@@ -454,17 +454,29 @@ function decrementSelected(group: ProductGroup) {
</div>
<div class="mt-3 flex flex-wrap gap-2">
<input
<label
v-for="option in getAllFieldOptions(group, field.key)"
:key="`${group.key}-${field.key}-${option}`"
class="btn btn-sm rounded-full border-base-300 bg-base-100 text-sm normal-case checked:btn-neutral"
type="radio"
:name="`${group.key}-${field.key}`"
:aria-label="formatOptionLabel(field.key, option)"
:checked="getGroupState(group)[field.key] === option"
:disabled="!isOptionAvailable(group, field.key, option)"
@change="updateField(group, field.key, option)"
class="btn btn-sm rounded-full border text-sm normal-case shadow-none transition"
:class="[
getGroupState(group)[field.key] === option
? 'border-neutral bg-neutral text-neutral-content'
: 'border-base-300 bg-base-100 text-base-content hover:border-neutral/30 hover:bg-base-200',
!isOptionAvailable(group, field.key, option)
? 'pointer-events-none opacity-35'
: 'cursor-pointer',
]"
>
<input
type="radio"
class="sr-only"
:name="`${group.key}-${field.key}`"
:checked="getGroupState(group)[field.key] === option"
:disabled="!isOptionAvailable(group, field.key, option)"
@change="updateField(group, field.key, option)"
>
<span>{{ formatOptionLabel(field.key, option) }}</span>
</label>
</div>
</fieldset>
</div>