import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Components/Select',
};
const Template = new Builder(args => `<x-select ${toProps(args)}>
	<option>Selection option 1</option>
	<option>Selection option 2</option>
	<option>Selection option 3</option>
</x-select>`);
export const Simple = Template.args({
    placeholder: 'Select an option',
}).build();
export const Multiple = Template.args({
    label: 'Select an option',
    multiple: true,
    size: 3,
}).build();
export const WithLabel = Template.args({
    label: 'Description',
    placeholder: 'Select an option',
}).build();
export const WithIndicator = Template.args({
    placeholder: 'Select an option',
}).build(args => `<x-select ${toProps(args)}>
	<span slot="indicator">@</span>
	<option>Selection option 1</option>
	<option>Selection option 2</option>
	<option>Selection option 3</option>
</x-select>`);
export const WithValidation = Template.args({
    label: 'Is required',
    placeholder: 'Select an option',
    name: 'select',
    validate: true,
    required: true,
}).build(args => `<form>
	<x-select ${toProps(args)}>
		<option>Selection option 1</option>
		<option>Selection option 2</option>
		<option>Selection option 3</option>
	</x-select>
	<x-input-error errors-for="${args.name}"></x-input-error>
</form>`);
export const Loading = Template.args({
    loading: true,
    placeholder: 'Select an option',
}).build();
export const Disabled = Template.args({
    disabled: true,
    placeholder: 'Select an option',
}).build();
