@nextcloud/vue
Version:
Nextcloud vue components
1 lines • 3.07 kB
Source Map (JSON)
{"version":3,"file":"NcHotkey-KGHPzHBJ.mjs","sources":["../../src/components/NcHotkey/NcHotkey.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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst {\n\tlabel = undefined,\n\thotkey = undefined,\n} = defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom label content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom hotkey content for an advanced hotkey layout with <NcKbd> components or other custom content\n\t */\n\thotkey?: Slot\n}>()\n\nconst symbols = computed(() => {\n\treturn hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","label"],"mappings":";;;AAwCA,MAAM,mBAAmB;;;;;;;;AAJzB,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,QAAA,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IAChD,CAAC;;0BAMAA,mBAWK,MAAA;AAAA,QAXA,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,MAAA;QACxBC,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAQ,OAAKF,eAAEC,KAAAA,OAAO,YAAY;AAAA,QAAA;UAC5CE,WAEO,2BAFP,MAEO;AAAA,aADNC,UAAA,IAAA,GAAAL,mBAAiEM,UAAA,MAAAC,WAAhC,QAAA,OAAO,CAAzB,QAAQ,UAAK;kCAA5BC,YAAiE,OAAA;AAAA,gBAAtB,KAAK;AAAA,gBAAQ;AAAA,cAAA;;;;QAG1DL,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAc,OAAKF,eAAEC,KAAAA,OAAO,aAAa;AAAA,QAAA;UACnDE,WAEO,4BAFP,MAEO;AAAA,YADHK,gBAAAA,gBAAAA,KAAAA,SAAS,gBAAgB,GAAA,CAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;"}