@nextcloud/vue/dist/Components/NcKbd.cjs.map

Nextcloud vue components

{"version":3,"file":"NcKbd.cjs","sources":["../../src/components/NcKbd/NcKbd.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { t } from '../../l10n.js'\nimport { isMac } from '../../utils/platform.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Key name or symbol to display.\n\t * For common special keys (CTRL, ALT, SHIFT, Arrow keys, etc.) it will display the symbol on macOS and the localized name on Windows/Linux.\n\t */\n\tsymbol?: 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Control' | 'Alt' | 'Shift' | 'Enter' | 'Space' | 'Tab' | 'Delete' | 'Escape' | (string & {})\n\t/**\n\t * Explicitly use macOS (true) or Windows/Linux (false) key symbols.\n\t * By default it uses the OS detected from the user agent.\n\t */\n\tmac?: boolean | undefined\n}>(), {\n\tsymbol: undefined,\n\tmac: isMac,\n})\n\n/**\n * Map of special key names to symbols or localized names:\n * - macOS uses symbols instead of names\n * - Windows/Linux uses localized names\n * - In ternary expressions, // TRANSLATORS comments only works for the second operand, but not for `else`\n */\nconst labels = computed(() => ({\n\tArrowUp: '↑',\n\tArrowDown: '↓',\n\tArrowLeft: '←',\n\tArrowRight: '→',\n\tControl: !props.mac\n\t\t? t('Ctrl') // TRANSLATORS: Ctrl key on keyboard (Windows/Linux)\n\t\t: '⌘',\n\tAlt: !props.mac\n\t\t? t('Alt') // TRANSLATORS: Alt key on keyboard (Windows/Linux)\n\t\t: '⌥',\n\tShift: !props.mac\n\t\t? t('Shift') // TRANSLATORS: Shift key on keyboard\n\t\t: '⇧',\n\tEnter: !props.mac\n\t\t? t('Enter') // TRANSLATORS: Enter key on keyboard\n\t\t: '⏎',\n\tTab: !props.mac\n\t\t? t('Tab') // TRANSLATORS: Tab key on keyboard\n\t\t: '⇥',\n\tDelete: !props.mac\n\t\t? t('Delete') // TRANSLATORS: Delete key on keyboard\n\t\t: '⌫',\n\tEscape: !props.mac\n\t\t? t('Escape') // TRANSLATORS: Escape key on keyboard\n\t\t: '⎋',\n\tSpace: t('Space'), // TRANSLATORS: Space key on keyboard\n} as const))\n\nconst label = computed(() => (props.symbol && labels.value[props.symbol]) || props.symbol)\n</script>\n\n<template>\n\t<kbd :class=\"$style.kbd\">\n\t\t<slot>\n\t\t\t{{ label }}\n\t\t</slot>\n\t</kbd>\n</template>\n\n<style lang=\"scss\" module>\n.kbd {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));\n\tborder: 2px solid var(--color-primary-element-light);\n\tborder-block-end-width: 4px;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: none; /* Override server <kbd> styles */\n\tfont-family: var(--font-family); /* Design decision: looks better with the default font instead of mono */\n\tline-height: 1;\n\twhite-space: nowrap;\n\n\t& + .kbd {\n\t\tmargin-inline-start: calc(1 * var(--default-grid-baseline));\n\t}\n}\n</style>\n\n<docs>\nNextcloud-styled `<kbd>` element. It can be used with a single key symbol in the content or with the `symbol` prop (preferred).\n\nSubsequent `<NcKbd>` elements will have a small margin between them.\n\n```vue\n<template>\n\t<div>\n\t\t<NcKbd symbol=\"Control\" />\n\t\t<NcKbd symbol=\"F\" />\n\t</div>\n</template>\n```\n\n### Special symbols\n\nIt is recommended to use the `symbol` prop. It displays the appropriate symbol or localized name depending on the OS.\nOS detection is automatic but can be overridden via the `mac` prop.\n\n```vue\n<template>\n\t<table class=\"sample-table\">\n\t\t<tr>\n\t\t\t<th>symbol</th>\n\t\t\t<th>Auto</th>\n\t\t\t<th>macOS</th>\n\t\t\t<th>Windows/Linux</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowUp</th>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowDown</th>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowLeft</th>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowRight</th>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Control</th>\n\t\t\t<td><NcKbd symbol=\"Control\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Alt</th>\n\t\t\t<td><NcKbd symbol=\"Alt\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Shift</th>\n\t\t\t<td><NcKbd symbol=\"Shift\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Enter</th>\n\t\t\t<td><NcKbd symbol=\"Enter\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Tab</th>\n\t\t\t<td><NcKbd symbol=\"Tab\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Delete</th>\n\t\t\t<td><NcKbd symbol=\"Delete\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Escape</th>\n\t\t\t<td><NcKbd symbol=\"Escape\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Space</th>\n\t\t\t<td><NcKbd symbol=\"Space\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"false\" /></td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\n.sample-table {\n\tborder-collapse: collapse;\n\n\tth,\n\ttd {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: calc(1 * var(--default-grid-baseline));\n\t}\n\n\ttr:first-child {\n\t\tborder-block-end: 2px solid var(--color-border);\n\n\t\tth {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n```\n\n### Custom content\n\nIn a special case you might want to use a custom content.\n\n```vue\n<template>\n\t<NcKbd aria-label=\"Eject\">\n\t\t<IconEject :size=\"15\" />\n\t</NcKbd>\n</template>\n\n<script>\nimport IconEject from 'vue-material-design-icons/Eject.vue'\n\nexport default {\n\tcomponents: { IconEject }\n}\n</script>\n```\n</docs>\n"],"names":["computed","t"],"mappings":";;;;;;;;;;;;;;AAgCA,UAAM,SAASA,IAAAA,SAAS,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS,CAAC,MAAM,MACbC,MAAAA,EAAE,MAAM,IACR;AAAA,MACH,KAAK,CAAC,MAAM,MACTA,MAAAA,EAAE,KAAK,IACP;AAAA,MACH,OAAO,CAAC,MAAM,MACXA,MAAAA,EAAE,OAAO,IACT;AAAA,MACH,OAAO,CAAC,MAAM,MACXA,MAAAA,EAAE,OAAO,IACT;AAAA,MACH,KAAK,CAAC,MAAM,MACTA,MAAAA,EAAE,KAAK,IACP;AAAA,MACH,QAAQ,CAAC,MAAM,MACZA,MAAAA,EAAE,QAAQ,IACV;AAAA,MACH,QAAQ,CAAC,MAAM,MACZA,MAAAA,EAAE,QAAQ,IACV;AAAA,MACH,OAAOA,MAAAA,EAAE,OAAO;AAAA;AAAA,IAAA,EACN;AAEX,UAAM,QAAQD,IAAAA,SAAS,MAAO,MAAM,UAAU,OAAO,MAAM,MAAM,MAAM,KAAM,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}