@nextcloud/vue/dist/chunks/NcFormGroup-CnSfPFey.mjs.map

Nextcloud vue components

{"version":3,"file":"NcFormGroup-CnSfPFey.mjs","sources":["../../src/components/NcFormGroup/NcFormGroup.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 { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\thideLabel = false,\n\thideDescription = false,\n\tnoGap = false,\n} = defineProps<{\n\t/**\n\t * Group label #label slot can be used for custom label content\n\t */\n\tlabel?: string\n\t/**\n\t * Optional fieldset description. #description slot can be used for custom description content\n\t */\n\tdescription?: string\n\t/**\n\t * Hide the label visually but keep it accessible for screen readers\n\t */\n\thideLabel?: boolean\n\t/**\n\t * Hide the description visually but keep it accessible for screen readers\n\t */\n\thideDescription?: boolean\n\t/**\n\t * Disable default fieldset content gap between content elements\n\t */\n\tnoGap?: boolean\n}>()\n\nconst slots = defineSlots<{\n\t/**\n\t * Content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom label content\n\t */\n\tlabel?: Slot\n\t/**\n\t * Custom description content\n\t */\n\tdescription?: Slot\n}>()\n\nconst id = `nc-form-group-${createElementId()}`\nconst descriptionId = `${id}-description`\n\nconst hasDescription = () => !!description || !!slots.description\nconst getDescriptionId = () => hasDescription() ? descriptionId : undefined\nconst hasContentOnly = () => hideLabel && (!hasDescription() || hideDescription)\n</script>\n\n<template>\n\t<fieldset\n\t\t:class=\"[$style.formGroup, { [$style.formGroup_noGap]: noGap }]\"\n\t\t:aria-describedby=\"getDescriptionId()\">\n\t\t<legend :class=\"[$style.formGroup__label, { 'hidden-visually': hideLabel }]\">\n\t\t\t<slot name=\"label\">\n\t\t\t\t{{ label || '⚠️ Missing label' }}\n\t\t\t</slot>\n\t\t</legend>\n\t\t<div v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"[$style.formGroup__description, { 'hidden-visually': hideDescription }]\">\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</div>\n\t\t<div :class=\"[$style.formGroup__content, { [$style.formGroup__content_only]: hasContentOnly() }]\">\n\t\t\t<slot />\n\t\t</div>\n\t</fieldset>\n</template>\n\n<style lang=\"scss\" module>\n.formGroup {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-group-content-gap: calc(2 * var(--default-grid-baseline));\n\n\t&.formGroup_noGap {\n\t\t--form-group-content-gap: 0;\n\t}\n}\n\n.formGroup__label {\n\tpadding-inline: var(--form-element-label-offset);\n\tfont-size: var(--font-size);\n\tfont-weight: bold;\n}\n\n.formGroup__description {\n\tpadding-inline: var(--form-element-label-offset);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formGroup__content {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--form-group-content-gap);\n\tmargin-block-start: calc(2.5 * var(--default-grid-baseline));\n\n\t&.formGroup__content_only {\n\t\tmargin-block-start: 0;\n\t}\n}\n</style>\n\n<docs>\n### General\n\nLabelled group of form elements.\n\n```vue\n<template>\n\t<NcFormGroup label=\"Personal information\">\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n\n### With description\n\n```vue\n<template>\n\t<NcFormGroup label=\"Personal information\" description=\"Your contact details\">\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n\n### Hidden label/description\n\nYou can visually hide the label and/or the description.\\\nNote: you still must provide the label. Do not visually hide the missing label warning!\n\n```vue\n<template>\n\t<NcFormGroup\n\t\tlabel=\"Personal information\"\n\t\tdescription=\"Your contact details\"\n\t\thide-label\n\t\thide-description>\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","noGap","_createElementVNode","hideLabel","_renderSlot","label","hideDescription","description"],"mappings":";;;;;;;;;;;;;;AAuCA,UAAM,QAAQA,SAAA;AAed,UAAM,KAAK,iBAAiB,gBAAA,CAAiB;AAC7C,UAAM,gBAAgB,GAAG,EAAE;AAE3B,UAAM,iBAAiB,MAAM,CAAC,CAAC,QAAA,eAAe,CAAC,CAAC,MAAM;AACtD,UAAM,mBAAmB,MAAM,eAAA,IAAmB,gBAAgB;AAClE,UAAM,iBAAiB,MAAM,QAAA,cAAc,CAAC,eAAA,KAAoB,QAAA;;0BAI/DC,mBAgBW,YAAA;AAAA,QAfT,OAAKC,eAAA,CAAGC,YAAO,cAAcA,KAAAA,OAAO,eAAe,GAAGC,KAAAA,MAAAA,CAAK,CAAA;AAAA,QAC3D,oBAAkB,iBAAA;AAAA,MAAgB;QACnCC,mBAIS,UAAA;AAAA,UAJA,OAAKH,eAAA,CAAGC,KAAAA,OAAO,uCAAuCG,KAAAA,WAAS,CAAA;AAAA,QAAA;UACvEC,WAEO,0BAFP,MAEO;AAAA,4CADHC,KAAAA,SAAK,kBAAA,GAAA,CAAA;AAAA,UAAA;;QAGC,iCAAXP,mBAIM,OAAA;AAAA;UAJwB,IAAI;AAAA,UAAgB,OAAKC,eAAA,CAAGC,KAAAA,OAAO,6CAA6CM,KAAAA,iBAAe,CAAA;AAAA,QAAA;UAC5HF,WAEO,gCAFP,MAEO;AAAA,4CADHG,KAAAA,WAAW,GAAA,CAAA;AAAA,UAAA;;QAGhBL,mBAEM,OAAA;AAAA,UAFA,OAAKH,eAAA,CAAGC,YAAO,uBAAuBA,KAAAA,OAAO,uBAAuB,GAAG,eAAA,EAAc,CAAA,CAAA;AAAA,QAAA;UAC1FI,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;"}