import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { boolean, text } from '@storybook/addon-knobs';
import ChecSwitch from '@/components/ChecSwitch.vue';

<Meta title="Form fields/Switch" component={ ChecSwitch } />

# Checkbox

<Props of={ ChecSwitch } />

<Preview>
  <Story name="Switch">
    {{
      components: {
        ChecSwitch,
      },
      props: {
        disabled: {
          default: () => boolean('Disabled', false),
        },
        prefixLabel: {
          default: () => boolean('Prefix label', false),
        },
        label: {
          default: () => text('Label', 'Switch label here'),
        },
      },
      data() {
        return {
          toggled: false,
        };
      },
      template: `
        <div class="py-16 flex justify-center font-lato">
          <ChecSwitch
            name="testing"
            v-model="toggled"
            :disabled="disabled"
            :prefix-label="prefixLabel"
          >
            {{ label }}
          </ChecSwitch>
        </div>`,
    }}
  </Story>
</Preview>