sajjadtalkhabi
125 lines
2.8 KiB
Vue
125 lines
2.8 KiB
Vue
<template>
|
|
<div class="badge-select">
|
|
<label v-if="label" class="badge-select__label">{{ label }}</label>
|
|
<div class="badge-select__chips" :class="`badge-select__chips--${size}`">
|
|
<button
|
|
v-for="option in options"
|
|
:key="option[optionValue]"
|
|
type="button"
|
|
class="badge-select__chip"
|
|
:class="[
|
|
`badge-select__chip--${variant}`,
|
|
{ 'badge-select__chip--selected': modelValue === option[optionValue] },
|
|
]"
|
|
:disabled="disabled"
|
|
@click="select(option)"
|
|
>
|
|
{{ option[optionLabel] }}
|
|
</button>
|
|
</div>
|
|
<div v-if="error" class="badge-select__error">{{ error }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
modelValue: { type: [String, Number], default: null },
|
|
label: { type: String, default: '' },
|
|
options: { type: Array, default: () => [] },
|
|
optionLabel: { type: String, default: 'label' },
|
|
optionValue: { type: String, default: 'value' },
|
|
variant: { type: String, default: 'neutral' },
|
|
size: { type: String, default: 'md' },
|
|
disabled: { type: Boolean, default: false },
|
|
error: { type: String, default: '' },
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue', 'change'])
|
|
|
|
const select = (option) => {
|
|
if (props.disabled) return
|
|
const value = option[props.optionValue]
|
|
emit('update:modelValue', value)
|
|
emit('change', value)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.badge-select {
|
|
width: 100%;
|
|
margin-bottom: 0.75rem;
|
|
|
|
&__label {
|
|
display: flex;
|
|
margin-bottom: 0.375rem;
|
|
font-family: var(--font-family-fa);
|
|
font-weight: 300;
|
|
line-height: 1.5rem;
|
|
font-size: 0.875rem;
|
|
color: var(--color-prim-gray);
|
|
}
|
|
|
|
&__chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
&__chip {
|
|
border: 1px solid #e8e8e8;
|
|
border-radius: 9999px;
|
|
background: transparent;
|
|
font-family: var(--font-family-fa);
|
|
color: #b5b5b5;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
|
|
&:hover:enabled {
|
|
color: #7a7a7a;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&--selected {
|
|
background: #fff;
|
|
border-color: #f0f0f0;
|
|
box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 6%);
|
|
color: #4b4b4b;
|
|
font-weight: 500;
|
|
}
|
|
|
|
&--primary#{&}--selected {
|
|
color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
&__chips--sm .badge-select__chip {
|
|
padding: 0.25rem 0.875rem;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
&__chips--md .badge-select__chip {
|
|
padding: 0.375rem 1.125rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
&__chips--lg .badge-select__chip {
|
|
padding: 0.5rem 1.375rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
&__error {
|
|
margin-top: 0.25rem;
|
|
font-family: var(--font-family-fa);
|
|
font-size: 0.75rem;
|
|
color: var(--color-error);
|
|
}
|
|
}
|
|
</style>
|