import FieldDatalist from './FieldDatalist.vue';

export default {
  title: 'Composants/form/FieldDatalist',
  component: FieldDatalist,
};

const Template = (args) => ({
  setup() {
    return { args };
  },
  components: {
    FieldDatalist,
  },
  template: `
    <FieldDatalist v-bind="args"/>
    <br/>
    <FieldDatalist v-bind="{...args, small:true}"/>
    `,
});

export const Default = Template.bind({});
Default.args = {
  options: ['toto', 'titi', 'tutu', 'tirlitititututatoooo'].map((i) => ({
    label: i,
    value: i,
  })),
};

export const CanAddNewOption = Template.bind({});
CanAddNewOption.args = {
  options: ['toto', 'titi', 'tutu', 'tirlitititututatoooo'].map((i) => ({
    label: i,
    value: i,
  })),
  canAddNewOption: true,
  newOption: 'manual input',
};
