UNPKG

@nextcloud/vue

Version:
1 lines 3.73 kB
{"version":3,"file":"NcHotkeyList-BBE5BqwB.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.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 type { Slot } from 'vue'\n\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n} = defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkey> components\n\t */\n\tdefault?: Slot\n}>()\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","label","_unref","_renderSlot"],"mappings":";;;;;;;;;;;AA2BA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;0BAIhDA,mBAOM,OAAA;AAAA,QAPA,OAAKC,eAAEC,KAAAA,OAAO,UAAU;AAAA,MAAA;QAC7BC,mBAEM,OAAA;AAAA,UAFA,IAAI;AAAA,UAAU,OAAKF,eAAA,CAAGC,KAAAA,OAAO,2CAA2CE,KAAAA,OAAK,CAAA;AAAA,QAAA,GAC/EA,gBAAAA,KAAAA,SAASC,MAAA,CAAA,EAAC,oBAAA,CAAA,GAAA,CAAA;AAAA,QAEdF,mBAEK,MAAA,EAFA,mBAAiB,WAAO;AAAA,UAC5BG,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;"}