import Builder, { toProps } from "../../utils/builder";
export default {
    title: 'Elements/Dropdown',
    component: 'x-dropdown',
    argTypes: {
        align: {
            options: ['auto', 'top', 'bottom', 'right', 'left'],
            control: {
                type: 'radio',
            },
        },
    },
};
const Template = new Builder(args => `<div class="d-flex justify-content-center align-items-center vh-100" style="margin: -1rem">
	<x-dropdown ${toProps(args)}>
		<x-button color="primary" class="m-0" style="width: 300px">Select &nbsp;&nbsp;<x-icon name="right"></x-icon></x-button>

		<x-card slot="dropdown">
			Lorem
		</x-card>
	</x-dropdown>
</div>`);
// BUG: Fix align on hover
export const Auto = Template.args({
    align: 'bottom',
    syncWidth: true,
    hover: true,
    offset: 3,
}).build();
export const Top = Template.args({
    align: 'top',
    show: true,
    syncWidth: true,
}).build();
export const Right = Template.args({
    align: 'right',
    show: true,
    syncWidth: true,
}).build();
export const Bottom = Template.args({
    align: 'bottom',
    show: true,
    syncWidth: true,
}).build();
export const Left = Template.args({
    align: 'left',
    show: true,
    syncWidth: true,
}).build();
