Nychthemeron/packages/playground/stories/Select.stories.ts

import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'

import { Select as NychSelect } from '@nychthemeron/library'

const meta = {
  title: 'Components/Select',
  component: NychSelect,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    placeholder: {
      control: { type: 'text' },
      description: 'Placeholder text',
    },
    disabled: {
      control: { type: 'boolean' },
      description: 'Disable the select',
    },
  },
} satisfies Meta<typeof NychSelect>

export default meta
type Story = StoryObj<typeof meta>

const RIVERS = ['Styx', 'Acheron', 'Cocytus', 'Phlegethon', 'Lethe']

export const Default: Story = {
  render: () => ({
    components: { NychSelect },
    setup() {
      const river = ref(null)
      return { river, RIVERS }
    },
    template: `<NychSelect v-model="river" :options="RIVERS" placeholder="Choose a river" />`,
  }),
}

export const Selected: Story = {
  render: () => ({
    components: { NychSelect },
    setup() {
      const river = ref('Lethe')
      return { river, RIVERS }
    },
    template: `<NychSelect v-model="river" :options="RIVERS" placeholder="Choose a river" />`,
  }),
}

export const Disabled: Story = {
  render: () => ({
    components: { NychSelect },
    setup() {
      const river = ref('Styx')
      return { river, RIVERS }
    },
    template: `<NychSelect v-model="river" :options="RIVERS" disabled />`,
  }),
}

export const ObjectOptions: Story = {
  render: () => ({
    components: { NychSelect },
    setup() {
      const god = ref(null)
      const gods = [
        { name: 'Apollo', domain: 'apollo' },
        { name: 'Hades', domain: 'hades' },
        { name: 'Hermes', domain: 'hermes' },
      ]
      return { god, gods }
    },
    template: `<NychSelect v-model="god" :options="gods" optionLabel="name" optionValue="domain" placeholder="Choose a god" />`,
  }),
}