@empathyco/x-components
Version:
Empathy X Components
280 lines (239 loc) • 7.95 kB
Markdown
---
title: ResultVariantSelector
---
# ResultVariantSelector
Component to show and select the available variants of a product for a given nest level. TODO: Add
logger warning on mount when result is not injected.
## Props
| Name | Description | Type | Default |
| ------------------ | ---------------------------------------------- | ------------------- | -------------- |
| <code>level</code> | The nest level of the variants to be rendered. | <code>number</code> | <code>0</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| ---------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>variant</code> | Variant item | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected<br />**selectVariant** <code>() => void</code> - Callback to select the variant |
| <code>variant-content</code> | Variant content | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected |
## Events
This component doesn't emit events.
## See it in action
Here you have a basic example of how the `ResultVariantSelector` component is rendered.
Take into account that this component **must** be a child of a `ResultVariantsProvider` component.
Also, the component is intended to be used overwriting the content with the slots.
By default it will render a list of buttons containing the available variants.
This component only has a required `level` prop, that indicates the level of the variants to be
rendered.
```vue
<template>
<ResultVariantsProvider :result="result" #default="{ result }">
<p>Result name: {{ result.name }}</p>
<h1>Select color</h1>
<ResultVariantSelector :level="0" #variant="{ variant, selectVariant }" />
<h1>Select size</h1>
<ResultVariantSelector :level="1" #variant="{ variant, selectVariant }" />
</ResultVariantsProvider>
</template>
<script>
import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';
export default {
name: 'ResultVariantSelectorDemo',
components: {
ResultVariantsProvider,
ResultVariantSelector
},
data() {
return {
result: {
id: 'jacket',
modelName: 'Result',
type: 'Product',
isWishlisted: false,
identifier: { value: 'jacket' },
images: [],
name: 'jacket',
price: { hasDiscount: false, originalValue: 10, value: 10 },
url: '/products/jacket',
variants: [
{
name: 'red',
variants: [
{
name: 'red XL'
},
{
name: 'red L'
}
]
},
{
name: 'blue',
variants: [
{
name: 'blue S'
},
{
name: 'blue M'
},
{
name: 'blue L'
}
]
}
]
}
};
}
};
</script>
```
### Play with the default slot
In this example the default slot is used to customize the list.
```vue
<template>
<ResultVariantsProvider :result="result" #default="{ result }">
<p>Result name: {{ result.name }}</p>
<ResultVariantSelector :level="0" #default="{ variants, selectedVariant, selectVariant }">
<div>
<p v-if="selectedVariant">Selected variant: {{ selectedVariant.name }}</p>
<ul class="x-flex">
<li v-for="(variant, index) in variants" :key="index">
<button @click="selectVariant(variant)">{{ variant.name }}</button>
</li>
</ul>
</div>
</ResultVariantSelector>
</ResultVariantsProvider>
</template>
<script>
import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';
export default {
name: 'ResultVariantSelectorDemo',
components: {
ResultVariantsProvider,
ResultVariantSelector
},
data() {
return {
result: {
id: 'jacket',
modelName: 'Result',
type: 'Product',
isWishlisted: false,
identifier: { value: 'jacket' },
images: [],
name: 'jacket',
price: { hasDiscount: false, originalValue: 10, value: 10 },
url: '/products/jacket',
variants: [
{
name: 'red'
},
{
name: 'blue'
}
]
}
};
}
};
</script>
```
### Play with variant-slot
In this example the variant-slot is used to customize the variant item.
The variant will be rendered inside a list.
```vue
<template>
<ResultVariantsProvider :result="result" #default="{ result }">
<p>Result name: {{ result.name }}</p>
<ResultVariantSelector :level="0" #variant="{ variant, isSelected, selectVariant }">
<div>
<button @click="selectVariant">
{{ variant.name }}
<span v-if="isSelected">SELECTED!</span>
</button>
</div>
</ResultVariantSelector>
</ResultVariantsProvider>
</template>
<script>
import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';
export default {
name: 'ResultVariantSelectorDemo',
components: {
ResultVariantsProvider,
ResultVariantSelector
},
data() {
return {
result: {
id: 'jacket',
modelName: 'Result',
type: 'Product',
isWishlisted: false,
identifier: { value: 'jacket' },
images: [],
name: 'jacket',
price: { hasDiscount: false, originalValue: 10, value: 10 },
url: '/products/jacket',
variants: [
{
name: 'red'
},
{
name: 'blue'
}
]
}
};
}
};
</script>
```
### Play with variant-content slot
In this example the variant-content slot is used to customize the content of the default variant
button.
```vue
<template>
<ResultVariantsProvider :result="result" #default="{ result }">
<p>Result name: {{ result.name }}</p>
<ResultVariantSelector #variant-content="{ variant, isSelected }">
<div>
{{ variant.name }}
<span v-if="isSelected">SELECTED!</span>
</div>
</ResultVariantSelector>
</ResultVariantsProvider>
</template>
<script>
import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components';
export default {
name: 'ResultVariantSelectorDemo',
components: {
ResultVariantsProvider,
ResultVariantSelector
},
data() {
return {
result: {
id: 'jacket',
modelName: 'Result',
type: 'Product',
isWishlisted: false,
identifier: { value: 'jacket' },
images: [],
name: 'jacket',
price: { hasDiscount: false, originalValue: 10, value: 10 },
url: '/products/jacket',
variants: [
{
name: 'red'
},
{
name: 'blue'
}
]
}
};
}
};
</script>
```