@empathyco/x-components
Version:
Empathy X Components
205 lines (172 loc) • 5.24 kB
Markdown
---
title: ResultVariantSelector
---
# ResultVariantSelector
Component to show and select the available variants of a product for a given nest level.
TODO: Log 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 /><br /> |
| <code>variant-content</code> | Variant content | **variant** <code>ResultVariant</code> - The variant item<br /> |
## Events
This component does not emit any events.
## Examples
### Basic usage
This component must be used as a child of `ResultVariantsProvider`.
Also, this 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">
<p>Result name: {{ result.name }}</p>
<h1>Select color</h1>
<ResultVariantSelector :level="0" />
<h1>Select size</h1>
<ResultVariantSelector :level="1" />
</ResultVariantsProvider>
</template>
<script setup>
import {
ResultVariantsProvider,
ResultVariantSelector,
} from "@empathyco/x-components";
const 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
You can customize the list using the default slot:
```vue
<template>
<ResultVariantsProvider :result="result">
<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 setup>
import {
ResultVariantsProvider,
ResultVariantSelector,
} from "@empathyco/x-components";
const 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
You can customize the variant item using the `variant` slot:
```vue
<template>
<ResultVariantsProvider :result="result">
<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 setup>
import {
ResultVariantsProvider,
ResultVariantSelector,
} from "@empathyco/x-components";
const 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
You can customize the content of the default variant button using the `variant-content` slot:
```vue
<template>
<ResultVariantsProvider :result="result">
<ResultVariantSelector #variant-content="{ variant, isSelected }">
<div>
{{ variant.name }}
<span v-if="isSelected">SELECTED!</span>
</div>
</ResultVariantSelector>
</ResultVariantsProvider>
</template>
<script setup>
import {
ResultVariantsProvider,
ResultVariantSelector,
} from "@empathyco/x-components";
const 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>
```