SplitButton

<script setup lang="ts">
  import { ref } from 'vue'
  import { DropdownMenuItem, Flex, SplitButton, Stack, Text } from '@hina-ui/vue'

  const variants = ['solid', 'soft', 'outline', 'ghost'] as const
  const result = ref('Each style keeps its primary action separate from the menu')
</script>

<template>
  <Stack align="center" gap="lg">
    <Flex wrap justify="center" gap="lg">
      <SplitButton
        v-for="variant in variants"
        :key="variant"
        :variant="variant"
        :menu-label="`${variant} options`"
        @click="result = `${variant}: saved`"
      >
        {{ variant }}
        <template #content>
          <DropdownMenuItem @select="result = `${variant}: save a copy`">
            Save a copy
          </DropdownMenuItem>
        </template>
      </SplitButton>
    </Flex>
    <Flex wrap justify="center" gap="lg">
      <SplitButton
        tone="neutral"
        menu-label="Download options"
        @click="result = 'Action: download'"
      >
        Download
        <template #content>
          <DropdownMenuItem @select="result = 'Action: copy link'">Copy link</DropdownMenuItem>
        </template>
      </SplitButton>
      <SplitButton
        tone="danger"
        variant="soft"
        menu-label="Archive options"
        @click="result = 'Action: archive'"
      >
        Archive
        <template #content>
          <DropdownMenuItem @select="result = 'Action: move to trash'">
            Move to trash
          </DropdownMenuItem>
        </template>
      </SplitButton>
    </Flex>
    <Text role="status" size="sm" tone="muted">{{ result }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DropdownMenuItem, Flex, SplitButton, Stack, Text } from '@hina-ui/vue'

  const sizes = ['sm', 'md', 'lg'] as const
  const result = ref('Both buttons share the same height')
</script>

<template>
  <Stack align="center">
    <Flex wrap align="center" justify="center" gap="lg">
      <SplitButton
        v-for="size in sizes"
        :key="size"
        :size="size"
        :menu-label="`${size} options`"
        @click="result = `${size}: saved`"
      >
        Save
        <template #content>
          <DropdownMenuItem @select="result = `${size}: save a copy`">Save a copy</DropdownMenuItem>
        </template>
      </SplitButton>
      <SplitButton
        pill
        variant="outline"
        menu-label="Rounded button options"
        @click="result = 'Action: save'"
      >
        Rounded
        <template #content>
          <DropdownMenuItem @select="result = 'Action: save a copy'">Save a copy</DropdownMenuItem>
        </template>
      </SplitButton>
    </Flex>
    <Text role="status" size="sm" tone="muted">{{ result }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DropdownMenuItem, FormField, SplitButton, Stack, Switch, Text } from '@hina-ui/vue'

  const loading = ref(false)
  const disabled = ref(false)
  const primaryDisabled = ref(false)
  const menuDisabled = ref(false)
  const result = ref('Disable either action independently')
</script>

<template>
  <Stack class="w-full max-w-xs" gap="lg">
    <Stack gap="sm">
      <FormField label="Loading" orientation="horizontal"><Switch v-model="loading" /></FormField>
      <FormField label="Disable both" orientation="horizontal">
        <Switch v-model="disabled" />
      </FormField>
      <FormField label="Disable primary action" orientation="horizontal">
        <Switch v-model="primaryDisabled" />
      </FormField>
      <FormField label="Disable menu" orientation="horizontal">
        <Switch v-model="menuDisabled" />
      </FormField>
    </Stack>
    <Stack align="center" gap="sm">
      <SplitButton
        :loading="loading"
        :disabled="disabled"
        :primary-disabled="primaryDisabled"
        :menu-disabled="menuDisabled"
        menu-label="Save options"
        @click="result = 'Action: save'"
      >
        Save changes
        <template #content>
          <DropdownMenuItem @select="result = 'Action: save a copy'">Save a copy</DropdownMenuItem>
        </template>
      </SplitButton>
      <Text role="status" size="sm" tone="muted">{{ result }}</Text>
    </Stack>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Download } from '@lucide/vue'
  import {
    DropdownMenuLabel,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    SplitButton,
    Stack,
    Text,
  } from '@hina-ui/vue'

  const format = ref('CSV')
  const result = ref('The primary action uses the selected format')
</script>

<template>
  <Stack align="center" gap="sm">
    <SplitButton
      variant="outline"
      menu-label="Export format"
      @click="result = `Action: export ${format}`"
    >
      <template #icon><Download /></template>
      Export {{ format }}
      <template #content>
        <DropdownMenuLabel>File format</DropdownMenuLabel>
        <DropdownMenuRadioGroup v-model="format">
          <DropdownMenuRadioItem value="CSV">CSV</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="JSON">JSON</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="XLSX">Excel (.xlsx)</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </template>
    </SplitButton>
    <Text role="status" size="sm" tone="muted">{{ result }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Download } from '@lucide/vue'
  import { DropdownMenuItem, SplitButton, Stack, Text } from '@hina-ui/vue'

  const result = ref('The primary action grows; the menu button stays square')
</script>

<template>
  <Stack class="w-full max-w-xs" gap="sm">
    <SplitButton
      block
      menu-label="More report actions"
      @click="result = 'Action: export the full report'"
    >
      <template #icon><Download /></template>
      Export the complete monthly activity report for all projects
      <template #content>
        <DropdownMenuItem @select="result = 'Action: export selection'">
          Export selection
        </DropdownMenuItem>
        <DropdownMenuItem @select="result = 'Action: copy report link'">
          Copy report link
        </DropdownMenuItem>
      </template>
    </SplitButton>
    <Text role="status" size="sm" tone="muted">{{ result }}</Text>
  </Stack>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { DropdownMenuItem, Form, FormField, Input, SplitButton, Text } from '@hina-ui/vue'

  const values = reactive({ title: '' })
  const result = ref('')
  const schema = v.object({
    title: v.pipe(v.string(), v.trim(), v.minLength(2, 'Enter at least 2 characters')),
  })

  async function publish(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 800))
    result.value = `Published: ${(data as { title: string }).title}`
  }
  function saveDraft() {
    result.value = `Draft saved: ${values.title.trim() || 'Untitled article'}`
  }
</script>

<template>
  <Form
    v-slot="{ submitting }"
    :values="values"
    :rules="schema"
    class="w-full max-w-sm"
    @submit="publish"
  >
    <FormField
      name="title"
      label="Article title"
      description="Publishing validates the title. Saving a draft allows unfinished content."
      required
    >
      <Input v-model="values.title" placeholder="Enter a title" />
    </FormField>
    <SplitButton
      type="submit"
      :loading="submitting"
      menu-label="More saving options"
      class="self-start"
    >
      Publish article
      <template #content>
        <DropdownMenuItem @select="saveDraft">Save draft</DropdownMenuItem>
      </template>
    </SplitButton>
    <Text v-if="result" role="status" size="sm" tone="muted">{{ result }}</Text>
  </Form>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DropdownMenuItem, SplitButton, Stack, Text } from '@hina-ui/vue'

  const result = ref('The menu button follows the writing direction')
</script>

<template>
  <Stack align="center" gap="sm">
    <SplitButton dir="rtl" menu-label="خيارات النشر" @click="result = 'Action: publish'">
      نشر المقال
      <template #content>
        <DropdownMenuItem @select="result = 'Action: save draft'">حفظ المسودة</DropdownMenuItem>
        <DropdownMenuItem @select="result = 'Action: schedule'">جدولة النشر</DropdownMenuItem>
      </template>
    </SplitButton>
    <Text role="status" size="sm" tone="muted">{{ result }}</Text>
  </Stack>
</template>