@nextcloud/vue/dist/chunks/NcFormBoxItem-BBP76Mkf.mjs.map

Nextcloud vue components

{"version":3,"file":"NcFormBoxItem-BBP76Mkf.mjs","sources":["../../src/components/NcFormBox/NcFormBoxItem.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'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useNcFormBox } from '../../components/NcFormBox/useNcFormBox.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n\ttag,\n\tlabel = undefined,\n\tdescription = undefined,\n\tinvertedAccent = false,\n\tclass: rootClasses = undefined,\n\titemClasses = undefined,\n} = defineProps<{\n\t/** Interactive item element's tag */\n\ttag: string\n\t/** Main Label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label */\n\tinvertedAccent?: boolean\n\t/** Root element classes */\n\tclass?: VueClassType\n\t/** Interactive item classes */\n\titemClasses?: VueClassType\n}>()\n\ndefineEmits<{\n\t/** Click on the item */\n\tclick: [event: MouseEvent]\n}>()\n\nconst slots = defineSlots<{\n\t/** Item's label custom content */\n\tdefault?: Slot<{\n\t\t/** IDRef of the description element if present */\n\t\tdescriptionId?: string\n\t}>\n\t/** Custom description content */\n\tdescription?: Slot<{\n\t\t/** IDRef of the description element if present */\n\t\tdescriptionId?: string\n\t}>\n\t/** Icon content */\n\ticon?: Slot\n}>()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst descriptionId = createElementId()\nconst hasDescription = () => !!description || !!slots.description\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[\n\t\t\trootClasses,\n\t\t\t$style.formBoxItem,\n\t\t\tformBoxItemClass,\n\t\t\t{\n\t\t\t\t[$style.formBoxItem_inverted]: invertedAccent && hasDescription(),\n\t\t\t\t[$style.formBoxItem_legacy]: isLegacy,\n\t\t\t},\n\t\t]\">\n\t\t<span :class=\"$style.formBoxItem__content\">\n\t\t\t<component\n\t\t\t\t:is=\"tag\"\n\t\t\t\t:class=\"[$style.formBoxItem__element, itemClasses]\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t\t<slot :description-id>\n\t\t\t\t\t{{ label || '⚠️ Label is missing' }}\n\t\t\t\t</slot>\n\t\t\t</component>\n\t\t\t<span v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"$style.formBoxItem__description\">\n\t\t\t\t<slot name=\"description\">\n\t\t\t\t\t{{ description }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t\t<span :class=\"$style.formBoxItem__icon\">\n\t\t\t<slot name=\"icon\" :description-id>\n\t\t\t\t⚠️ Icon is missing\n\t\t\t</slot>\n\t\t</span>\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxItem {\n\t--nc-form-box-item-border-width: 1px;\n\t--nc-form-box-item-min-height: 40px; // Special size defined by the design\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-element-label-padding: calc(var(--form-element-label-offset) - var(--nc-form-box-item-border-width));\n\t// New colors we don't yet have in theming\n\t// TODO: add new colors to the theming\n\t--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmin-height: var(--nc-form-box-item-min-height);\n\tpadding-inline: var(--form-element-label-padding);\n\tborder: 1px solid var(--color-primary-element-extra-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--border-radius-element);\n\tbackground-color: var(--color-primary-element-extra-light);\n\tcolor: var(--color-main-text);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: var(--animation-quick);\n\ttransition-timing-function: linear;\n\t-webkit-user-select: none;\n\tuser-select: none;\n\tcursor: pointer;\n\n\t* {\n\t\tcursor: inherit;\n\t}\n\n\t&:has(:disabled) {\n\t\tcursor: default;\n\t\topacity: 0.5;\n\t}\n\n\t&:hover:not(:has(:disabled)) {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-extra-light-hover);\n\t}\n\n\t&:has(:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&.formBoxItem_legacy {\n\t\t--nc-form-box-item-border-width: 0px;\n\t\tborder: none;\n\t}\n\n\t&.formBoxItem_inverted {\n\t\t.formBoxItem__element {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.formBoxItem__description {\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n}\n\n.formBoxItem__content {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\toverflow-wrap: anywhere;\n}\n\n// A trick for accessibility:\n// make entire component clickable while internally splitting the interactive item and the description\n.formBoxItem__element::after {\n\tcontent: '';\n\tposition: absolute;\n\tinset: 0;\n}\n\n.formBoxItem__description {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formBoxItem__icon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n</style>\n\n<docs>\nAn internal component\n</docs>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","_unref","invertedAccent","_createElementVNode","_createBlock","_resolveDynamicComponent","tag","_mergeProps","itemClasses","$attrs","$emit","_renderSlot","label","description"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CA,UAAM,QAAQA,SAAA;AAed,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,UAAM,gBAAgB,gBAAA;AACtB,UAAM,iBAAiB,MAAM,CAAC,CAAC,QAAA,eAAe,CAAC,CAAC,MAAM;;0BAIrDC,mBA+BM,OAAA;AAAA,QA9BJ,OAAKC,eAAA;AAAA,UAAO,QAAA;AAAA,UAAgBC,KAAAA,OAAO;AAAA,UAAgBC,MAAA,gBAAA;AAAA;YAA4BD,CAAAA,KAAAA,OAAO,oBAAoB,GAAGE,KAAAA,kBAAkB,eAAA;AAAA,aAAuBF,KAAAA,OAAO,kBAAkB,GAAGC,MAAA,QAAA;AAAA,UAAA;AAAA;;QASnLE,mBAeO,QAAA;AAAA,UAfA,OAAKJ,eAAEC,KAAAA,OAAO,oBAAoB;AAAA,QAAA;wBACxCI,YAQYC,wBAPNC,KAAAA,GAAG,GADTC,WAQY;AAAA,YANV,OAAK,CAAGP,KAAAA,OAAO,sBAAsBQ,KAAAA,WAAW;AAAA,UAAA,GACzCC,KAAAA,QAAM;AAAA,YACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,KAAAA,MAAK,SAAU,MAAM;AAAA,UAAA;6BAC7B,MAEO;AAAA,cAFPC,WAEO,KAAA,QAAA,WAAA,EAFA,eAAAV,MAAA,aAAA,EAAA,GAAP,MAEO;AAAA,gDADHW,KAAAA,SAAK,qBAAA,GAAA,CAAA;AAAA,cAAA;;;;UAGE,iCAAZd,mBAIO,QAAA;AAAA;YAJwB,IAAIG,MAAA,aAAA;AAAA,YAAgB,OAAKF,eAAEC,KAAAA,OAAO,wBAAwB;AAAA,UAAA;YACxFW,WAEO,gCAFP,MAEO;AAAA,8CADHE,KAAAA,WAAW,GAAA,CAAA;AAAA,YAAA;;;QAIjBV,mBAIO,QAAA;AAAA,UAJA,OAAKJ,eAAEC,KAAAA,OAAO,iBAAiB;AAAA,QAAA;UACrCW,WAEO,KAAA,QAAA,QAAA,EAFY,eAAAV,MAAA,aAAA,EAAA,GAAnB,MAEO;AAAA,sDAF2B,wBAElC,EAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}