Hotkeys

<script setup lang="ts">
import { VHotkeys } from 'vectis-ui'
</script>

<template>
  <VHotkeys keys="mod+k" />
</template>

<script setup lang="ts">
import { VHotkeys, VTypography, type HotkeysVariant } from 'vectis-ui'

const VARIANTS: HotkeysVariant[] = ['soft', 'outline', 'elevated']
</script>

<template>
  <div class="row">
    <div v-for="variant in VARIANTS" :key="variant" class="cell">
      <VHotkeys keys="mod+shift+p" :variant="variant" />
      <VTypography variant="caption" tone="muted">{{ variant }}</VTypography>
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-6);
}
.cell {
  display: grid;
  justify-items: center;
  gap: var(--vectis-space-2);
}
</style>

<script setup lang="ts">
import { VHotkeys, VTypography, type HotkeysSize } from 'vectis-ui'

/* Two sizes only. A shortcut is chrome beside other text, so `xs` is the default and
   `sm` is already as large as one usefully gets. */
const SIZES: HotkeysSize[] = ['xs', 'sm']
</script>

<template>
  <div class="row">
    <div v-for="size in SIZES" :key="size" class="cell">
      <VHotkeys keys="mod+k" :size="size" variant="outline" />
      <VTypography variant="caption" tone="muted">{{ size }}</VTypography>
    </div>

    <div v-for="size in SIZES" :key="`${size}-compact`" class="cell">
      <VHotkeys keys="mod+k" :size="size" compact variant="outline" />
      <VTypography variant="caption" tone="muted">{{ size }} compact</VTypography>
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--vectis-space-6);
}
.cell {
  display: grid;
  justify-items: center;
  gap: var(--vectis-space-2);
}
</style>

<script setup lang="ts">
import { VHotkeys, VTypography } from 'vectis-ui'
</script>

<template>
  <div class="row">
    <div class="cell">
      <VHotkeys keys="mod+shift+k" variant="outline" />
      <VTypography variant="caption" tone="muted">One cap per key</VTypography>
    </div>

    <!-- The decoration moves from each cap to the shortcut as a whole, which is what
         puts the separator inside the key instead of between two of them. -->
    <div class="cell">
      <VHotkeys keys="mod+shift+k" attached variant="outline" />
      <VTypography variant="caption" tone="muted">attached</VTypography>
    </div>

    <div class="cell">
      <VHotkeys keys="mod+shift+k" attached separator="" variant="outline" />
      <VTypography variant="caption" tone="muted">attached, no separator</VTypography>
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-6);
}
.cell {
  display: grid;
  justify-items: center;
  gap: var(--vectis-space-2);
}
</style>

<script setup lang="ts">
import { VHotkeys, VTypography, type HotkeysPlatform } from 'vectis-ui'

/* The four the component knows. Without the prop it detects the one the reader is on,
   which is what the shortcuts everywhere else on this page are doing. */
const PLATFORMS: { value: HotkeysPlatform; label: string }[] = [
  { value: 'mac', label: 'macOS' },
  { value: 'windows', label: 'Windows' },
  { value: 'linux', label: 'Linux' },
  { value: 'other', label: 'Unknown' },
]
</script>

<template>
  <div class="grid">
    <template v-for="platform in PLATFORMS" :key="platform.value">
      <VTypography variant="caption" tone="muted">{{ platform.label }}</VTypography>
      <div class="keys">
        <VHotkeys keys="mod+k" :platform="platform.value" variant="outline" />
        <VHotkeys keys="meta+shift+enter" :platform="platform.value" variant="outline" />
        <VHotkeys keys="alt+backspace" :platform="platform.value" variant="outline" />
      </div>
    </template>
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--vectis-space-3) var(--vectis-space-5);
}
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { VHotkeys, VTypography } from 'vectis-ui'

/* The caps are laid out with a gap of their own, so the separator is what is WRITTEN
   between them and never the space around it: an empty string leaves the gap alone
   and gives the macOS convention, where the symbols simply follow one another. */
const SEPARATORS = [
  { value: '+', label: 'The default' },
  { value: '', label: 'Nothing, the macOS convention' },
  { value: '·', label: 'A middle dot' },
  { value: '/', label: 'A slash' },
]
</script>

<template>
  <div class="grid">
    <template v-for="separator in SEPARATORS" :key="separator.label">
      <VHotkeys keys="mod+shift+k" :separator="separator.value" variant="outline" />
      <VTypography variant="caption" tone="muted">{{ separator.label }}</VTypography>
    </template>
  </div>
</template>

<style scoped>
.grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--vectis-space-3) var(--vectis-space-5);
  justify-items: start;
}
</style>

<script setup lang="ts">
import {
  VButton,
  VHotkeys,
  VMenu,
  VMenuItem,
  VMenuSeparator,
  VTooltip,
  VTypography,
} from 'vectis-ui'

const COMMANDS = [
  { label: 'New file', keys: 'mod+n' },
  { label: 'Save', keys: 'mod+s' },
  { label: 'Save as', keys: 'mod+shift+s' },
]
</script>

<template>
  <div class="stack">
    <!-- The cap takes its size from the text it sits in, so a shortcut written into a
         sentence keeps the line it is on. -->
    <VTypography class="prose">
      Press <VHotkeys keys="mod+k" /> to open the command palette, then type the first letters of
      what you are after. <VHotkeys keys="esc" /> puts it away again.
    </VTypography>

    <!-- At the end of a command row, which is where a shortcut is usually read. -->
    <VMenu>
      <template #trigger="{ triggerProps }">
        <VButton v-bind="triggerProps" variant="outline" tone="neutral">File</VButton>
      </template>
      <VMenuItem v-for="command in COMMANDS" :key="command.keys" :label="command.label">
        <template #end><VHotkeys :keys="command.keys" /></template>
      </VMenuItem>
      <VMenuSeparator />
      <VMenuItem label="Settings">
        <template #end><VHotkeys keys="mod+," /></template>
      </VMenuItem>
    </VMenu>

    <!-- Inside a tooltip, which is what its `#content` slot is for: rich but never
         interactive. -->
    <VTooltip>
      <template #default="{ triggerProps }">
        <VButton v-bind="triggerProps" variant="outline" tone="neutral">Save</VButton>
      </template>
      <template #content>Save this file <VHotkeys keys="mod+s" size="xs" /></template>
    </VTooltip>

    <!-- And inside the control the shortcut is a second route to. -->
    <VButton variant="outline" tone="neutral" class="search">
      Search the docs
      <VHotkeys keys="mod+k" variant="outline" />
    </VButton>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--vectis-space-5);
}
.prose {
  max-inline-size: 34rem;
  line-height: 1.9;
}
.search {
  inline-size: 18rem;
  justify-content: space-between;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VHotkeys, VInput, VTypography } from 'vectis-ui'

const opened = ref(0)
const saved = ref(0)
const strict = ref(0)
const permissive = ref(0)
</script>

<template>
  <div class="stack">
    <!-- No platform is pinned, so the caps show what this keyboard has and the matcher
         answers to the same thing: a Mac reader presses Command, everyone else Ctrl. -->
    <p class="line">
      <VHotkeys keys="mod+k" variant="outline" listen @trigger="opened++" />
      <VTypography as="span">Press it anywhere on the page. Fired {{ opened }} times.</VTypography>
    </p>

    <!-- The browser's own binding is cancelled unless allowDefault says otherwise,
         which is the whole point of taking over a combination it already uses. Here
         both happen: the count goes up and the browser opens its save dialog. -->
    <p class="line">
      <VHotkeys keys="mod+s" variant="outline" listen allow-default @trigger="saved++" />
      <VTypography as="span" tone="muted">
        With allowDefault, the browser still saves the page. Fired {{ saved }} times.
      </VTypography>
    </p>

    <VInput label="Type in here, then press the shortcut below" class="field" />

    <p class="line">
      <VHotkeys keys="mod+j" variant="outline" listen @trigger="strict++" />
      <VTypography as="span">Quiet while a field has the focus: {{ strict }}</VTypography>
    </p>

    <p class="line">
      <VHotkeys keys="mod+j" variant="outline" listen allow-in-input @trigger="permissive++" />
      <VTypography as="span">With allowInInput, it fires there too: {{ permissive }}</VTypography>
    </p>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--vectis-space-4);
}
.line {
  display: flex;
  align-items: center;
  gap: var(--vectis-space-3);
  margin: 0;
}
.field {
  inline-size: 22rem;
}
</style>