@nextcloud/vue/dist/chunks/NcRadioGroupButton-CDA5i7Dq.mjs.map

Nextcloud vue components

{"version":3,"file":"NcRadioGroupButton-CDA5i7Dq.mjs","sources":["../../src/components/NcRadioGroupButton/NcRadioGroupButton.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, onMounted } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { useNcFormBox } from '../NcFormBox/useNcFormBox.ts'\nimport { useInsideRadioGroup } from '../NcRadioGroup/useNcRadioGroup.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Non visible label for accessibility when no `label` is passed.\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * The visual label of the radio button\n\t */\n\tlabel?: string\n\n\t/**\n\t * The value that should be assigned to the `modelValue` of the `NcRadioGroup`.\n\t */\n\tvalue: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional icon slot\n\t */\n\ticon?: Slot\n}>()\n\nconst labelId = createElementId()\nconst radioGroup = useInsideRadioGroup()\nconst { formBoxItemClass } = useNcFormBox()\n\nonMounted(() => radioGroup!.value.register(true))\n\nconst isChecked = computed(() => radioGroup?.value.modelValue === props.value)\n\n/**\n * Handle updating the current model value\n */\nfunction onUpdate() {\n\tradioGroup!.value.onUpdate(props.value)\n}\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.radioGroupButton_active]: isChecked,\n\t\t}, $style.radioGroupButton, formBoxItemClass]\"\n\t\t@click=\"onUpdate\">\n\t\t<div v-if=\"$slots.icon\" :class=\"$style.radioGroupButton__icon\">\n\t\t\t<slot name=\"icon\" />\n\t\t</div>\n\n\t\t<div v-if=\"label\" :id=\"labelId\" :class=\"$style.radioGroupButton__label\">\n\t\t\t{{ label }}\n\t\t</div>\n\n\t\t<input\n\t\t\t:aria-labelledby=\"label ? labelId : undefined\"\n\t\t\t:aria-label=\"label ? undefined : ariaLabel\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:checked=\"isChecked\"\n\t\t\ttype=\"radio\"\n\t\t\t:value\n\t\t\t@input=\"onUpdate\">\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.radioGroupButton {\n\t--radio-group-button--border-radius: var(--border-radius-small);\n\t--radio-group-button--border-width: 1px;\n\t--radio-group-button--color: var(--color-primary-element-light-text);\n\t--radio-group-button--background-color: var(--color-primary-element-light);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-light-hover);\n\t--radio-group-button--padding: 1px;\n\tcursor: pointer;\n\tcolor: var(--radio-group-button--color);\n\tbackground-color: var(--radio-group-button--background-color);\n\ttransition: var(--animation-quick) background-color;\n\tborder: var(--radio-group-button--border-width) solid var(--radio-group-button--background-color-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--radio-group-button--border-radius);\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: center;\n\ttext-align: center;\n\tmin-height: var(--default-clickable-area);\n\t// ensure that the content is centered because of uneven border\n\tpadding-block: var(--radio-group-button--padding) 0;\n\tpadding-inline: var(--radio-group-button--padding);\n\n\t* {\n\t\tcursor: pointer;\n\t}\n\n\t&:has(&__label) {\n\t\tpadding-inline: calc(var(--radio-group-button--padding) + var(--border-radius-element));\n\t}\n\n\t&:has(&__icon) {\n\t\tpadding-inline-start: var(--radio-group-button--padding);\n\t}\n\n\t&:hover {\n\t\tbackground-color: var(--radio-group-button--background-color-hover);\n\t}\n\n\t&:focus-within {\n\t\t--radio-group-button--border-width: 2px;\n\t\t--radio-group-button--padding: 0px;\n\t\tborder: var(--radio-group-button--border-width) solid var(--color-main-text) !important;\n\t\toutline: calc(var(--default-grid-baseline) / 2) var(--color-main-background);\n\t}\n}\n\n.radioGroupButton_active {\n\t--radio-group-button--color: var(--color-primary-element-text);\n\t--radio-group-button--background-color: var(--color-primary-element);\n\t--radio-group-button--background-color-hover: var(--color-primary-element-hover);\n}\n\n.radioGroupButton__label {\n\tfont-weight: bold;\n}\n\n.radioGroupButton__icon {\n\t--radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\theight: 100%;\n\twidth: var(--radio-group-button--icon-size);\n\n\t// make sure the icon is a bit smaller to account for border\n\t* {\n\t\t--default-clickable-area: var(--radio-group-button--icon-size);\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","$slots","_renderSlot","label","_createElementVNode","ariaLabel","value"],"mappings":";;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AAwBd,UAAM,UAAU,gBAAA;AAChB,UAAM,aAAa,oBAAA;AACnB,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,cAAU,MAAM,WAAY,MAAM,SAAS,IAAI,CAAC;AAEhD,UAAM,YAAY,SAAS,MAAM,YAAY,MAAM,eAAe,MAAM,KAAK;AAK7E,aAAS,WAAW;AACnB,iBAAY,MAAM,SAAS,MAAM,KAAK;AAAA,IACvC;;0BAICA,mBAqBM,OAAA;AAAA,QApBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,uBAAuB,GAAG,UAAA;AAAA,QAAA,GAAgBA,KAAAA,OAAO,kBAAkBC,MAAA,gBAAA,CAAgB,CAAA;AAAA,QAGxG,SAAO;AAAA,MAAA;QACGC,KAAAA,OAAO,qBAAlBJ,mBAEM,OAAA;AAAA;UAFmB,OAAKC,eAAEC,KAAAA,OAAO,sBAAsB;AAAA,QAAA;UAC5DG,WAAoB,KAAA,QAAA,MAAA;AAAA,QAAA;QAGVC,KAAAA,sBAAXN,mBAEM,OAAA;AAAA;UAFa,IAAIG,MAAA,OAAA;AAAA,UAAU,OAAKF,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,QAAA,mBAClEI,KAAAA,KAAK,GAAA,IAAA,UAAA;QAGTC,mBAOmB,SAAA;AAAA,UANjB,mBAAiBD,KAAAA,QAAQH,MAAA,OAAA,IAAU;AAAA,UACnC,cAAYG,KAAAA,QAAQ,SAAYE,KAAAA;AAAAA,UACjC,OAAM;AAAA,UACL,SAAS,UAAA;AAAA,UACV,MAAK;AAAA,UACJ,OAAAC,KAAAA;AAAAA,UACA,SAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}