Toolbar

<script setup>
import { Toolbar } from "@dicehub/kappa/components/toolbar";
import { Select } from "@dicehub/kappa/components/select";
import { ListFilter, Settings2 } from "@lucide/vue";

const sortItems = ["Name", "Created date", "Status"];
</script>

<template>
  <Toolbar aria-label="Filter and sort records">
    <Toolbar.Button :icon="ListFilter">Filter</Toolbar.Button>
    <Select
      id="toolbar-sort-records"
      aria-label="Sort records"
      :default-value="['Name']"
      :items="sortItems"
      :positioning="{ sameWidth: false }"
    >
      <Select.Trigger as-child>
        <Toolbar.Button><Select.ValueText /></Toolbar.Button>
      </Select.Trigger>
      <Select.Positioner>
        <Select.Content class="sort-menu">
          <Select.List>
            <template #default="{ item }">
              <Select.Item :item="item">{{ item }}</Select.Item>
            </template>
          </Select.List>
        </Select.Content>
      </Select.Positioner>
    </Select>
    <Toolbar.Button :icon="Settings2" aria-label="View settings" />
  </Toolbar>
</template>

<style scoped>
.sort-menu { min-width: 10rem; }
</style>

<script setup>
import { Toolbar } from "@dicehub/kappa/components/toolbar";
import { Combobox } from "@dicehub/kappa/components/combobox";
import { ListFilter, Settings2 } from "@lucide/vue";

const statusItems = ["All records", "Active", "Paused", "Failed"];
</script>

<template>
  <Toolbar aria-label="Filter record status" class="status-toolbar">
    <Toolbar.Button :icon="ListFilter">Status</Toolbar.Button>
    <Combobox
      id="toolbar-filter-status"
      :default-value="['All records']"
      :items="statusItems"
    >
      <Combobox.TriggerInput as-child>
        <Toolbar.Input
          aria-label="Filter status"
          class="status-toolbar__input"
          placeholder="Filter status…"
        />
      </Combobox.TriggerInput>
      <Combobox.Content>
        <Combobox.Empty>No matching status.</Combobox.Empty>
        <Combobox.List>
          <template #default="{ item }">
            <Combobox.Item :item="item">{{ item }}</Combobox.Item>
          </template>
        </Combobox.List>
      </Combobox.Content>
    </Combobox>
    <Toolbar.Button :icon="Settings2" aria-label="Status settings" />
  </Toolbar>
</template>

<style scoped>
.status-toolbar { width: min(100%, 28rem); }
.status-toolbar__input { flex: 1 1 auto; }
</style>

<script setup>
import { Toolbar } from "@dicehub/kappa/components/toolbar";
import { ListFilter, Settings2 } from "@lucide/vue";
</script>

<template>
  <Toolbar aria-label="Search records" class="search-toolbar">
    <Toolbar.Input
      aria-label="Search records"
      class="search-toolbar__input"
      placeholder="Search records"
    />
    <Toolbar.Button :icon="ListFilter" aria-label="Filter" />
    <Toolbar.Button :icon="Settings2" aria-label="Settings" />
  </Toolbar>
</template>

<style scoped>
.search-toolbar { width: min(100%, 28rem); }
.search-toolbar__input { flex: 1 1 auto; }
</style>

<script setup>
import { Toolbar } from "@dicehub/kappa/components/toolbar";
import { InputGroup } from "@dicehub/kappa/components/input-group";
</script>

<template>
  <Toolbar aria-label="Open a site" class="site-toolbar">
    <Toolbar.InputGroup aria-label="Site address" class="site-toolbar__input">
      <InputGroup.Input aria-label="Site subdomain" placeholder="docs" />
      <InputGroup.Addon align="inline-end">
        <InputGroup.Text>.example.com</InputGroup.Text>
      </InputGroup.Addon>
    </Toolbar.InputGroup>
    <Toolbar.Button>Open</Toolbar.Button>
  </Toolbar>
</template>

<style scoped>
.site-toolbar { width: min(100%, 32rem); }
.site-toolbar__input { flex: 1 1 auto; }
</style>

<script setup>
import { Toolbar, type ToolbarSize } from "@dicehub/kappa/components/toolbar";

const sizes: ToolbarSize[] = ["xs", "sm", "base", "lg"];
</script>

<template>
  <div class="toolbar-sizes">
    <div v-for="size in sizes" :key="size" class="toolbar-size-row">
      <span class="toolbar-size-label">{{ size }}</span>
      <Toolbar :aria-label="`${size} toolbar`" :size="size">
        <Toolbar.Input :aria-label="`${size} search`" placeholder="Search…" />
        <Toolbar.Button>Apply</Toolbar.Button>
      </Toolbar>
    </div>
  </div>
</template>

<style scoped>
.toolbar-sizes { display: grid; gap: 0.75rem; }
.toolbar-size-row { display: flex; align-items: center; gap: 0.75rem; }
.toolbar-size-label { width: 2.5rem; }
</style>

<script setup>
import { Toolbar } from "@dicehub/kappa/components/toolbar";
import { Download, Upload } from "@lucide/vue";
</script>

<template>
  <Toolbar aria-label="File actions">
    <Toolbar.Button :icon="Upload">Upload</Toolbar.Button>
    <Toolbar.Button :icon="Download">Download</Toolbar.Button>
  </Toolbar>
</template>

<script setup>
import { Toolbar } from "@dicehub/kappa/components/toolbar";
import { BookOpen, Download } from "@lucide/vue";
</script>

<template>
  <Toolbar aria-label="Documentation actions">
    <Toolbar.Link href="/docs/components/button" :icon="BookOpen">Button docs</Toolbar.Link>
    <Toolbar.Button :icon="Download">Download</Toolbar.Button>
  </Toolbar>
</template>

<script setup>
import { Toolbar } from "@dicehub/kappa/components/toolbar";
import { Search } from "@lucide/vue";
</script>

<template>
  <Toolbar aria-label="Search records">
    <Toolbar.Input aria-label="Search records" placeholder="Search" />
    <Toolbar.Button :icon="Search" aria-label="Search" />
  </Toolbar>
</template>