import {
  ArgsTable,
  Canvas,
  Description,
  Meta,
  Story,
} from "@storybook/addon-docs"
import { ref } from "@nuxtjs/composition-api"

import VSnackbar from "~/components/VSnackbar.vue"

<Meta
  title="Components/VSnackbar"
  components={VSnackbar}
  argTypes={{
    size: {
      options: ["large", "small"],
      control: { type: "radio" },
    },
  }}
/>

export const Template = (args) => ({
  components: { VSnackbar },
  template: `
    <div>
      <input type="checkbox" id="show" v-model="isVisible">
      <label for="show">Show snackbar</label>
      <VSnackbar v-bind="args" :is-visible="isVisible">
        <template v-slot>${args.defaultSlot}</template>
      </Vsnackbar>
    </div>
  `,
  setup() {
    const isVisible = ref(true)
    return { args, isVisible }
  },
})

# VSnackbar

<Description of={VSnackbar} />

<ArgsTable of={VSnackbar} />

<!-- Use inline={false} to keep the snackbar within the preview area. -->

<Canvas>
  <Story
    name="Default"
    args={{ defaultSlot: "Your message goes here.", size: "small" }}
    inline={false}
  >
    {Template.bind({})}
  </Story>
</Canvas>
