@nextcloud/vue/dist/chunks/NcFormBox-K2tCRm3B.mjs.map

Nextcloud vue components

{"version":3,"file":"NcFormBox-K2tCRm3B.mjs","sources":["../../src/components/NcFormBox/NcFormBox.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 { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\ndefineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>()\n\ndefineSlots<{\n\t/**\n\t * Grouped content\n\t */\n\tdefault?: Slot<{\n\t\t/**\n\t\t * Class to add on a custom item to apply the border radius effect\n\t\t */\n\t\titemClass: string\n\t}>\n}>()\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<slot :item-class=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\"  />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","row","_renderSlot"],"mappings":";;;;;;;;;AA8BA,UAAM,QAAQ,aAAA;AAEd,YAAQ,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;0BAIAA,mBAEM,OAAA;AAAA,QAFA,OAAKC,eAAA,CAAGC,KAAAA,OAAO,WAAWC,KAAAA,MAAMD,KAAAA,OAAO,gBAAgBA,KAAAA,OAAO,aAAa,CAAA;AAAA,MAAA;QAChFE,WAA6C,KAAA,QAAA,WAAA;AAAA,UAAtC,WAAYF,KAAAA,OAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}