import { Meta, Source, Story } from "@storybook/addon-docs/blocks";

import * as SelectSmartStories from "./SelectSmart.stories";

<Meta of={SelectSmartStories} />

# SelectSmart

SelectSmart is designed to solve common problems related to option selection.
It combines three elements: Select, Autocomplete, and AutocompleteSelect, which
originally didn't follow a consistent pattern and had some bugs. With SelectSmart,
these components have been unified and improved and it also brings a new design.

> It is a _self-closing_ component, which means it does not support child elements.

> Available in small and medium versions, which can be toggled through the
> `size` property, accepting the strings "sm" or "md".

<Source
  language="html"
  dark
  code={`
    <UnnnicSelectSmart v-model="exampleValue" :options="exampleArray" />
  `}
/>

---

#### **IMPORTANT:**

To ensure proper functioning of the component, it is fundamental to provide the `v-model`
(or `value` and `@input`), even if it is empty (`[]`), since it is through this property
that the selected options are controlled.

The other one required property is `options`, which requires an array of objects in the following format:

| Key         | Description                                                                                                                               | Type   |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| value       | **Required.**<br/>Sets the option value. If it is empty, the _label_ of this object will be used as the _placeholder_ of the SelectSmart. | string |
| label       | **Required.**<br/>Provides user-friendly text that represents the option to the user.                                                     | string |
| description | _Not required._<br/>Provides an additional description for the option.                                                                    | string |

<Source
  language="json"
  dark
  code={`[
  {
    "value": "",
    "label": "Select some option"  <---- Since the value of this object is empty, this will be the placeholder
  },
  {
    "value": "1",
    "label": "Option 1",
  },
  {
    "value": "2",
    "label": "Option 2",
    "description": "This is the first option"
  },
]`}
/>

> The options will be presented in alphabetical order, following the value of each `label`,
> regardless of the sequence in which the objects are supplied to the `:options` property.
> However, if the `orderedByIndex` property is included, the options will be sorted
> according to the arrangement given to `:options`.

---

<br />

## Default

Allows you to choose from a list.

<Story of={SelectSmartStories.Default} />

## Loading

Variation that signals data loading. Use `isLoading` prop.

<Story of={SelectSmartStories.Loading} />

## Default option selected

For the first option to be selected by default, it is essential that
there is no object with its `value` field empty.

If your intention is to set a specific option as the default, you can
accomplish this using the `value` (or `v-model`) property. Make sure that this
value is passed as an array, and that the object is structured according to the
pattern of the other options.

<Story of={SelectSmartStories.FirstSelected} />

## Ordered by index

If the `orderedByIndex` property is included, the options will
be ordered according to the arrangement given to `:options`.

<Story of={SelectSmartStories.OrderedByIndex} />

## Disabled

SelectSmart will respond to the value passed to the `disabled` property,
becoming disabled when set to _true_ and remaining enabled when set to _false_.

<Story of={SelectSmartStories.Disabled} />

## With descriptions

If you want a more detailed description for your options, you can include the
`description` key inside the object corresponding to each option.

<Story of={SelectSmartStories.WithDescriptions} />

## Autocomplete

To activate the search functionality, just include the `autocomplete` property.
The search takes place based on the text of the `label`, without distinction
between uppercase and lowercase, spaces and accents.

If you want the search bar to be emptied when focusing on the component, use
the `autocompleteClearOnFocus` property.

Furthermore, it is possible to incorporate the magnifying glass icon on the side (left) of
the search bar by using the `autocompleteIconLeft` property.

<Story of={SelectSmartStories.Autocomplete} />

## Enable Search By Value

To activate the search by value functionality, just include the `enableSearchByValue` property.

The search takes place based on the text of the `label` or `value`, without distinction
between uppercase and lowercase, spaces and accents.

<Story of={SelectSmartStories.EnableSearchByValue} />

## Multiple

To use the component version that allows the selection of
several options, just pass the `multiple` property.

You also have the freedom to customize the message that signals
when no option has been selected, through the `multipleWithoutSelectsMessage` property.

Typically, components involving multiple options offer a considerable range
of choices. So, in order to improve the user experience, the `multiple` option
automatically activates the `autocomplete` feature, it cannot be deactivated.

<Story of={SelectSmartStories.Multiple} />