@conduction/nextcloud-vue 2.122.0 → 2.123.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/CnAppRoot/CnAppRoot.vue2.js +1 -0
- package/dist/esm/components/CnAppRoot/CnAppRoot.vue2.js.map +1 -1
- package/dist/esm/components/CnAppRoot/CnAppRoot.vue3.js.map +1 -1
- package/dist/esm/components/CnAttentionFlagWidget/CnAttentionFlagWidget.vue.js +1 -1
- package/dist/esm/components/CnAttentionFlagWidget/CnAttentionFlagWidget.vue2.js +18 -4
- package/dist/esm/components/CnAttentionFlagWidget/CnAttentionFlagWidget.vue2.js.map +1 -1
- package/dist/esm/components/CnAttentionFlagWidget/CnAttentionFlagWidget.vue3.js +63 -32
- package/dist/esm/components/CnAttentionFlagWidget/CnAttentionFlagWidget.vue3.js.map +1 -1
- package/dist/esm/components/CnChartWidget/CnChartWidget.vue.js +1 -1
- package/dist/esm/components/CnChartWidget/CnChartWidget.vue2.js.map +1 -1
- package/dist/esm/components/CnChartWidget/CnChartWidget.vue3.js.map +1 -1
- package/dist/esm/components/CnDetailPage/CnDetailPage.vue2.js +35 -0
- package/dist/esm/components/CnDetailPage/CnDetailPage.vue2.js.map +1 -1
- package/dist/esm/components/CnDetailPage/CnDetailPage.vue3.js +11 -5
- package/dist/esm/components/CnDetailPage/CnDetailPage.vue3.js.map +1 -1
- package/dist/esm/components/CnDetailWidgetHost/CnDetailWidgetHost.vue.js +1 -1
- package/dist/esm/components/CnDetailWidgetHost/CnDetailWidgetHost.vue2.js +13 -0
- package/dist/esm/components/CnDetailWidgetHost/CnDetailWidgetHost.vue2.js.map +1 -1
- package/dist/esm/components/CnDetailWidgetHost/CnDetailWidgetHost.vue3.js +37 -5
- package/dist/esm/components/CnDetailWidgetHost/CnDetailWidgetHost.vue3.js.map +1 -1
- package/dist/esm/components/CnFilesBrowser/CnFilesBrowser.vue.js +1 -1
- package/dist/esm/components/CnFilesBrowser/CnFilesBrowser.vue2.js +40 -0
- package/dist/esm/components/CnFilesBrowser/CnFilesBrowser.vue2.js.map +1 -1
- package/dist/esm/components/CnFilesBrowser/CnFilesBrowser.vue3.js +71 -65
- package/dist/esm/components/CnFilesBrowser/CnFilesBrowser.vue3.js.map +1 -1
- package/dist/esm/components/CnFlowDetail/CnFlowDetail.vue.js +1 -1
- package/dist/esm/components/CnFlowDetail/CnFlowDetail.vue2.js +20 -0
- package/dist/esm/components/CnFlowDetail/CnFlowDetail.vue2.js.map +1 -1
- package/dist/esm/components/CnFlowDetail/CnFlowDetail.vue3.js +2 -1
- package/dist/esm/components/CnFlowDetail/CnFlowDetail.vue3.js.map +1 -1
- package/dist/esm/components/CnFlowsPage/CnFlowBoard.vue.js +1 -1
- package/dist/esm/components/CnFlowsPage/CnFlowBoard.vue2.js +2 -0
- package/dist/esm/components/CnFlowsPage/CnFlowBoard.vue2.js.map +1 -1
- package/dist/esm/components/CnFlowsPage/CnFlowBoard.vue3.js +49 -44
- package/dist/esm/components/CnFlowsPage/CnFlowBoard.vue3.js.map +1 -1
- package/dist/esm/components/CnFlowsPage/CnFlowEditorPage.vue2.js +10 -0
- package/dist/esm/components/CnFlowsPage/CnFlowEditorPage.vue2.js.map +1 -1
- package/dist/esm/components/CnFlowsPage/CnFlowEditorPage.vue3.js +2 -1
- package/dist/esm/components/CnFlowsPage/CnFlowEditorPage.vue3.js.map +1 -1
- package/dist/esm/components/CnGraphCanvas/CnGraphCanvas.vue2.js +31 -0
- package/dist/esm/components/CnGraphCanvas/CnGraphCanvas.vue2.js.map +1 -1
- package/dist/esm/components/CnGraphCanvas/CnGraphCanvas.vue3.js +4 -3
- package/dist/esm/components/CnGraphCanvas/CnGraphCanvas.vue3.js.map +1 -1
- package/dist/esm/components/CnIndexPage/CnIndexPage.vue2.js +34 -2
- package/dist/esm/components/CnIndexPage/CnIndexPage.vue2.js.map +1 -1
- package/dist/esm/components/CnIndexPage/CnIndexPage.vue3.js.map +1 -1
- package/dist/esm/components/CnObjectSidebar/CnFilesTab.vue.js +1 -1
- package/dist/esm/components/CnObjectSidebar/CnFilesTab.vue2.js +2 -0
- package/dist/esm/components/CnObjectSidebar/CnFilesTab.vue2.js.map +1 -1
- package/dist/esm/components/CnObjectSidebar/CnFilesTab.vue3.js +2 -1
- package/dist/esm/components/CnObjectSidebar/CnFilesTab.vue3.js.map +1 -1
- package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue.js +1 -1
- package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue2.js +31 -1
- package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue2.js.map +1 -1
- package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue3.js +14 -4
- package/dist/esm/components/CnSectionsWidget/CnSectionsWidget.vue3.js.map +1 -1
- package/dist/esm/composables/flowGraphLayout.js +36 -7
- package/dist/esm/composables/flowGraphLayout.js.map +1 -1
- package/dist/esm/composables/useFlowStore.js +7 -3
- package/dist/esm/composables/useFlowStore.js.map +1 -1
- package/dist/esm/l10n/en.json.js +3 -1
- package/dist/esm/l10n/en.json.js.map +1 -1
- package/dist/esm/l10n/nl.json.js +3 -1
- package/dist/esm/l10n/nl.json.js.map +1 -1
- package/dist/esm/library-style.js +1 -1
- package/dist/esm/nextcloud-vue.css +508 -303
- package/dist/esm/utils/manifestTranslate.js +12 -3
- package/dist/esm/utils/manifestTranslate.js.map +1 -1
- package/dist/esm/utils/routeFilters.js +3 -3
- package/dist/esm/utils/routeFilters.js.map +1 -1
- package/dist/nextcloud-vue.cjs.js +1217 -847
- package/dist/nextcloud-vue.cjs.js.map +2 -2
- package/dist/nextcloud-vue.css +508 -303
- package/l10n/en.json +3 -1
- package/l10n/nl.json +3 -1
- package/package.json +1 -1
- package/src/components/CnAppRoot/CnAppRoot.vue +1 -0
- package/src/components/CnAttentionFlagWidget/CnAttentionFlagWidget.vue +50 -5
- package/src/components/CnChartWidget/CnChartWidget.vue +10 -8
- package/src/components/CnDetailPage/CnDetailPage.md +10 -0
- package/src/components/CnDetailPage/CnDetailPage.vue +42 -1
- package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue +39 -0
- package/src/components/CnFilesBrowser/CnFilesBrowser.vue +95 -37
- package/src/components/CnFlowDetail/CnFlowDetail.vue +21 -0
- package/src/components/CnFlowsPage/CnFlowBoard.vue +35 -18
- package/src/components/CnFlowsPage/CnFlowEditorPage.vue +11 -0
- package/src/components/CnGraphCanvas/CnGraphCanvas.vue +34 -2
- package/src/components/CnIndexPage/CnIndexPage.vue +34 -2
- package/src/components/CnObjectSidebar/CnFilesTab.vue +3 -0
- package/src/components/CnSectionsWidget/CnSectionsWidget.vue +53 -2
- package/src/composables/flowGraphLayout.js +35 -6
- package/src/composables/useFlowStore.js +7 -3
- package/src/css/detail-page.css +6 -0
- package/src/css/look-board-detail.css +26 -6
- package/src/css/look-board-index.css +43 -0
- package/src/css/look-board.css +89 -3
- package/src/utils/manifestTranslate.js +12 -3
- package/src/utils/routeFilters.js +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CnFilesTab.vue3.js","sources":["../../../../src/components/CnObjectSidebar/CnFilesTab.vue?vue&type=template&id=fe12141e&lang.js"],"sourcesContent":["<template>\n\t<div class=\"cn-sidebar-tab\">\n\t\t<!-- The object's folder as a real files browser, on the Files app's own\n\t\t primitives (its actions, its New menu, its breadcrumbs), when the\n\t\t folder resolves for this user. The list below is the fallback for an\n\t\t object with no folder, or a user the folder is not shared with. -->\n\t\t<CnFilesBrowser\n\t\t\tv-if=\"browserRoot !== null\"\n\t\t\t:rootPath=\"browserRoot\"\n\t\t\t:rootLabel=\"effectiveBrowserRootLabel\"\n\t\t\t:source=\"browserSource\"\n\t\t\t:deleteLabel=\"deleteLabel\"\n\t\t\t:uploadButton=\"uploadButton\"\n\t\t\t:dropOverlay=\"dropOverlay\"\n\t\t\t:dropLabel=\"dropLabel\"\n\t\t\t:dropDetail=\"dropDetail\"\n\t\t\t:dropHint=\"dropHint\"\n\t\t\t:rowActions=\"rowActions\"\n\t\t\t:newActions=\"newActions\"\n\t\t\t:headerActions=\"headerActions\"\n\t\t\t:rowButton=\"rowButton\"\n\t\t\t:reviewSummary=\"reviewSummary\"\n\t\t\t:footnote=\"footnote\"\n\t\t\t:nameSecondary=\"nameSecondary\"\n\t\t\t:linkedItems=\"linkedItems\"\n\t\t\t:columns=\"columns\"\n\t\t\t:rowData=\"rowDataSource\"\n\t\t\t:preferenceApp=\"preferenceApp\"\n\t\t\t:preferenceKey=\"preferenceKey\"\n\t\t\t:bulkActions=\"bulkActions\"\n\t\t\t:selectionLabel=\"selectionLabel\"\n\t\t\t:selectionLabelOne=\"selectionLabelOne\"\n\t\t\t:showClearSelection=\"showClearSelection\"\n\t\t\t:sideCards=\"sideCards\"\n\t\t\t:groupBy=\"groupBy\"\n\t\t\t:facets=\"facets\"\n\t\t\t@changed=\"onBrowserChanged\" />\n\t\t<template v-else>\n\t\t\t<!-- Upload error -->\n\t\t\t<div v-if=\"uploadError\" class=\"cn-sidebar-tab__upload-error\">\n\t\t\t\t{{ uploadError }}\n\t\t\t</div>\n\n\t\t\t<!-- Share toggle — seeds from schema config (defaultAutoShare) or\n\t\t from the `defaultShare` prop. Hidden via `showShareToggle=false`. -->\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\tv-if=\"showShareToggle\"\n\t\t\t\tv-model=\"share\"\n\t\t\t\tclass=\"cn-sidebar-tab__share\"\n\t\t\t\t:disabled=\"loading\"\n\t\t\t\ttype=\"switch\">\n\t\t\t\t{{ shareLabel }}\n\t\t\t</NcCheckboxRadioSwitch>\n\n\t\t\t<!-- File drop zone -->\n\t\t\t<div\n\t\t\t\tclass=\"cn-sidebar-tab__dropzone\"\n\t\t\t\t:class=\"{ 'cn-sidebar-tab__dropzone--active': isDragOver }\"\n\t\t\t\t@click=\"triggerFileInput\"\n\t\t\t\t@dragover.prevent=\"onDragOver\"\n\t\t\t\t@dragleave.prevent=\"onDragLeave\"\n\t\t\t\t@drop.prevent=\"onDrop\">\n\t\t\t\t<!--\n\t\t\t\t`:ref` (dynamic), not `ref` (static), and this is load-bearing.\n\n\t\t\t\tEvery other binding on this input is static, and Vue caches the\n\t\t\t\t`@change` handler, so with a STATIC ref the compiler hoists the\n\t\t\t\twhole vnode to module scope. A hoisted vnode is created once,\n\t\t\t\toutside any render, so its ref carries no owner instance\n\t\t\t\t(`rawRef.i === null`).\n\n\t\t\t\t`setRef()` guards that — but the guard AND its early `return`\n\t\t\t\tlive inside `if (process.env.NODE_ENV !== 'production')`. In a\n\t\t\t\tdevelopment build you get the warning \"Missing ref owner\n\t\t\t\tcontext. ref cannot be used on hoisted vnodes.\" and nothing\n\t\t\t\tbreaks. In a PRODUCTION build the guard is compiled out and\n\t\t\t\texecution falls through to `owner.refs`, throwing\n\t\t\t\t`TypeError: Cannot read properties of null (reading 'refs')`\n\t\t\t\t— which aborts the render of whatever mounted this tab.\n\n\t\t\t\tMeasured: hrmq's detail pages (the only pages in the fleet that\n\t\t\t\treach CnIntegrationWidget through a `widgets[]` grid) rendered a\n\t\t\t\tCOMPLETELY BLANK content pane in production while looking fine\n\t\t\t\tin dev. A dynamic ref is compiled as a patchable prop, so the\n\t\t\t\tvnode is created inside the render function and owns a proper\n\t\t\t\tinstance.\n\t\t\t-->\n\t\t\t\t<input\n\t\t\t\t\t:ref=\"fileInputRef\"\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tmultiple\n\t\t\t\t\tclass=\"cn-sidebar-tab__file-input\"\n\t\t\t\t\t@change=\"onFileUpload\">\n\t\t\t\t<Upload :size=\"24\" class=\"cn-sidebar-tab__dropzone-icon\" />\n\t\t\t\t<span class=\"cn-sidebar-tab__dropzone-text\">{{ dropZoneLabel }}</span>\n\t\t\t</div>\n\n\t\t\t<!-- File list. Each row borrows what Nextcloud already has on this\n\t\t page: the theme's own mime icon (OC.MimeType), the core preview\n\t\t endpoint for images, the Viewer for opening, and the Files sidebar\n\t\t for details, sharing and versions. Nothing of the Files app is\n\t\t rebuilt here; the row hands over to it. -->\n\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t<NcEmptyContent\n\t\t\t\tv-else-if=\"files.length === 0\"\n\t\t\t\tclass=\"cn-sidebar-tab__empty\"\n\t\t\t\t:name=\"noFilesLabel\"\n\t\t\t\t:description=\"dropZoneLabel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Paperclip :size=\"44\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t\t<div v-else class=\"cn-sidebar-tab__list\">\n\t\t\t\t<NcListItem\n\t\t\t\t\tv-for=\"file in files\"\n\t\t\t\t\t:key=\"file.id\"\n\t\t\t\t\t:name=\"file.name || file.title\"\n\t\t\t\t\t:bold=\"false\"\n\t\t\t\t\t:forceDisplayActions=\"true\"\n\t\t\t\t\t@click=\"openFile(file)\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tv-if=\"previewUrlFor(file)\"\n\t\t\t\t\t\t\tclass=\"cn-sidebar-tab__thumb\"\n\t\t\t\t\t\t\t:src=\"previewUrlFor(file)\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t@error=\"onPreviewError(file)\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tv-else-if=\"mimeIconFor(file)\"\n\t\t\t\t\t\t\tclass=\"cn-sidebar-tab__mime\"\n\t\t\t\t\t\t\t:src=\"mimeIconFor(file)\"\n\t\t\t\t\t\t\talt=\"\">\n\t\t\t\t\t\t<FileOutline v-else :size=\"32\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t<span class=\"cn-sidebar-tab__meta\">\n\t\t\t\t\t\t\t<span>{{ formatFileSize(file.size) }}</span>\n\t\t\t\t\t\t\t<template v-if=\"modifiedAt(file)\">\n\t\t\t\t\t\t\t\t<span aria-hidden=\"true\"> · </span>\n\t\t\t\t\t\t\t\t<NcDateTime :timestamp=\"modifiedAt(file)\" :ignoreSeconds=\"true\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t<template v-if=\"labelsOf(file)\">\n\t\t\t\t\t\t\t\t<span aria-hidden=\"true\"> · </span>\n\t\t\t\t\t\t\t\t<span>{{ labelsOf(file) }}</span>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton :closeAfterClick=\"true\" @click=\"openFile(file)\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ openLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<!-- OpenRegister's Office page applies the object rule:\n\t\t\t\t\t\t update edits, read views, no read is a 404. -->\n\t\t\t\t\t\t<NcActionLink\n\t\t\t\t\t\t\tv-if=\"officeOpens(file)\"\n\t\t\t\t\t\t\t:href=\"officeUrlFor(file)\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t:closeAfterClick=\"true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<FileDocumentEditOutline :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ openInOfficeLabel }}\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t\t<NcActionLink\n\t\t\t\t\t\t\tv-if=\"file.id\"\n\t\t\t\t\t\t\t:href=\"downloadUrlFor(file)\"\n\t\t\t\t\t\t\t:download=\"file.name || file.title || ''\"\n\t\t\t\t\t\t\t:closeAfterClick=\"true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ downloadLabel }}\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"canShowDetails() && file.path\"\n\t\t\t\t\t\t\t:closeAfterClick=\"true\"\n\t\t\t\t\t\t\t@click=\"showDetails(file)\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<InformationOutline :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ detailsLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink\n\t\t\t\t\t\t\tv-if=\"file.id\"\n\t\t\t\t\t\t\t:href=\"showInFilesUrl(file)\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t:closeAfterClick=\"true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<FolderOutline :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ showInFilesLabel }}\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t\t<NcActionButton v-if=\"file.id\" :closeAfterClick=\"true\" @click=\"copyLink(file)\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<LinkVariant :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ copyLinkLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionSeparator />\n\t\t\t\t\t\t<NcActionButton :closeAfterClick=\"true\" @click=\"deleteFile(file)\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ deleteLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t</template>\n\t\t\t\t</NcListItem>\n\t\t\t</div>\n\t\t\t<NcButton\n\t\t\t\tv-if=\"files.length < total\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t:wide=\"true\"\n\t\t\t\t:disabled=\"loadingMore\"\n\t\t\t\tclass=\"cn-sidebar-tab__load-more\"\n\t\t\t\t@click=\"loadMore\">\n\t\t\t\t<template v-if=\"loadingMore\" #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ loadMoreLabel }}\n\t\t\t</NcButton>\n\t\t</template>\n\t\t<CnFilePreview v-if=\"previewFile\" :file=\"previewFile\" @close=\"previewFile = null\" />\n\t</div>\n</template>\n\n<script>\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { translate as t } from '@nextcloud/l10n'\nimport { generateRemoteUrl, generateUrl } from '@nextcloud/router'\nimport {\n\tNcActionButton,\n\tNcActionLink,\n\tNcActionSeparator,\n\tNcButton,\n\tNcCheckboxRadioSwitch,\n\tNcDateTime,\n\tNcEmptyContent,\n\tNcListItem,\n\tNcLoadingIcon,\n} from '@nextcloud/vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Download from 'vue-material-design-icons/Download.vue'\nimport FileDocumentEditOutline from 'vue-material-design-icons/FileDocumentEditOutline.vue'\nimport FileOutline from 'vue-material-design-icons/FileOutline.vue'\nimport FolderOutline from 'vue-material-design-icons/FolderOutline.vue'\nimport InformationOutline from 'vue-material-design-icons/InformationOutline.vue'\nimport LinkVariant from 'vue-material-design-icons/LinkVariant.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Paperclip from 'vue-material-design-icons/Paperclip.vue'\nimport Upload from 'vue-material-design-icons/Upload.vue'\nimport CnFilePreview from '../CnFilePreview/CnFilePreview.vue'\nimport CnFilesBrowser from '../CnFilesBrowser/CnFilesBrowser.vue'\nimport { useFileOpener } from '../../composables/useFileOpener.js'\nimport { buildHeaders, prefixUrl } from '../../utils/index.js'\nimport { indexRowData, objectDisplayName, resolveObjectFolderInfo } from '../CnFilesBrowser/filesBrowser.js'\nimport { createOpenRegisterSource } from '../CnFilesBrowser/openRegisterSource.js'\n\n/**\n * The mime types Nextcloud Office opens by default for the current person.\n *\n * richdocuments publishes its capabilities only to a person it lets use\n * Office, so an empty list means no Office here, or none for them.\n *\n * @return {Array<string>} The mime types, or an empty list.\n */\nfunction readOfficeMimetypes() {\n\ttry {\n\t\tconst mimetypes = getCapabilities()?.richdocuments?.mimetypes\n\t\treturn Array.isArray(mimetypes) ? mimetypes.filter((mime) => typeof mime === 'string') : []\n\t} catch {\n\t\treturn []\n\t}\n}\n\nexport default {\n\tname: 'CnFilesTab',\n\n\tcomponents: {\n\t\tCnFilePreview,\n\t\tCnFilesBrowser,\n\t\tNcActionButton,\n\t\tNcActionLink,\n\t\tNcActionSeparator,\n\t\tNcButton,\n\t\tNcCheckboxRadioSwitch,\n\t\tNcDateTime,\n\t\tNcEmptyContent,\n\t\tNcListItem,\n\t\tNcLoadingIcon,\n\t\tDelete,\n\t\tDownload,\n\t\tFileDocumentEditOutline,\n\t\tFileOutline,\n\t\tFolderOutline,\n\t\tInformationOutline,\n\t\tLinkVariant,\n\t\tOpenInNew,\n\t\tPaperclip,\n\t\tUpload,\n\t},\n\n\tprops: {\n\t\t/** ID of the object this tab belongs to */\n\t\tobjectId: { type: String, required: true },\n\t\t/** OpenRegister register slug */\n\t\tregister: { type: String, default: '' },\n\t\t/** JSON Schema definition for the object */\n\t\tschema: { type: String, default: '' },\n\t\t/** Base URL for the OpenRegister API */\n\t\tapiBase: { type: String, default: '/apps/openregister/api' },\n\t\t/** Text shown inside the file drop zone */\n\t\tdropZoneLabel: { type: String, default: () => t('nextcloud-vue', 'Drop files here or click to browse') },\n\t\t/** Text shown when no files are attached */\n\t\tnoFilesLabel: { type: String, default: () => t('nextcloud-vue', 'No files attached') },\n\t\t/** Label for the open/view file action */\n\t\topenLabel: { type: String, default: () => t('nextcloud-vue', 'Open') },\n\t\t/**\n\t\t * Label of the action that opens a document in Nextcloud Office through\n\t\t * OpenRegister's Office page. Shown only when Office is there for this\n\t\t * person and opens the file's type; the page opens it for editing or\n\t\t * read-only by the object's own rule.\n\t\t */\n\t\topenInOfficeLabel: { type: String, default: () => t('nextcloud-vue', 'Open in Office') },\n\t\t/** Label for the delete action */\n\t\tdeleteLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },\n\t\t/** What the files browser's root crumb reads; null shows the object's name, else the folder's own name. */\n\t\tbrowserRootLabel: { type: String, default: null },\n\t\t/**\n\t\t * Where the files browser reads the object's folder from.\n\t\t * `openregister` (the default) goes through OpenRegister's files API under\n\t\t * the object's access rule, so anyone who may read the object sees its\n\t\t * files, without a share. `webdav` is the earlier behaviour: the folder is\n\t\t * looked up in the person's own Files over WebDAV and the browser shows\n\t\t * only when it is shared with them.\n\t\t */\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\tdefault: 'openregister',\n\t\t\tvalidator: (value) => ['openregister', 'webdav'].includes(value),\n\t\t},\n\n\t\t/** Forwarded to CnFilesBrowser: a primary \"Add files\" button beside the New menu. */\n\t\tuploadButton: { type: Boolean, default: false },\n\t\t/** Forwarded to CnFilesBrowser: the drop state drawn over the list (\"Drop to add\") and announced. */\n\t\tdropOverlay: { type: Boolean, default: false },\n\t\t/** Forwarded to CnFilesBrowser: the drop state's line (\"Laat los om toe te voegen\"); the library's own without it. */\n\t\tdropLabel: { type: String, default: undefined },\n\t\t/** Forwarded to CnFilesBrowser: the drop state's second line, `{count}` the files dragged; it also makes the overlay fill the panel. */\n\t\tdropDetail: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: \"Or drag files onto this list.\" under the list. */\n\t\tdropHint: { type: Boolean, default: false },\n\t\t/**\n\t\t * The host's own actions on each file row of the browser, forwarded\n\t\t * to CnFilesBrowser's `rowActions`: declared like any manifest action\n\t\t * and dispatched with the file's id, name and path merged in.\n\t\t *\n\t\t * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}\n\t\t */\n\t\trowActions: { type: Array, default: () => [] },\n\t\t/**\n\t\t * The host's own entries in the browser's New menu, forwarded to\n\t\t * CnFilesBrowser's `newActions`: declared like a row action and\n\t\t * dispatched with the folder rather than a row, for things like\n\t\t * \"new from template\" or \"request a file from a party\".\n\t\t *\n\t\t * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}\n\t\t */\n\t\tnewActions: { type: Array, default: () => [] },\n\t\t/**\n\t\t * An app endpoint that answers the object's linked files, rows the\n\t\t * browser shows after the folder's own (files the host joined from\n\t\t * another object's folder). App-relative; `{objectId}` is replaced.\n\t\t * The response is an array (or `{ items: [] }`) of\n\t\t * `{ id, name, mime?, size?, mtime?, href?, downloadHref?, note?, noteHref? }`.\n\t\t * Null fetches nothing.\n\t\t */\n\t\tlinkedItemsUrl: { type: String, default: null },\n\t\t/**\n\t\t * Forwarded to CnFilesBrowser: the columns the browser shows, built-in\n\t\t * names or declared columns (`{ key, label, source, formatter }`).\n\t\t * A `source: 'row'` column reads the host's record for the file from\n\t\t * `rowDataUrl`. None keeps name, size and modified.\n\t\t *\n\t\t * @type {Array<string|object>}\n\t\t */\n\t\tcolumns: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: the app id the user's column choice is stored under; unset offers no Columns chooser. */\n\t\tpreferenceApp: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: the key the column choice is stored under. */\n\t\tpreferenceKey: { type: String, default: 'files-browser-columns' },\n\t\t/**\n\t\t * An app endpoint that answers the host's own record per file, for the\n\t\t * browser's `source: 'row'` columns. App-relative; `{objectId}` is\n\t\t * replaced. Read once per listing. The answer is a list of records\n\t\t * (or the list at `rowDataPath`, or under `items` or `results`), each\n\t\t * naming its file in `rowDataKey`. Null reads nothing.\n\t\t */\n\t\trowDataUrl: { type: String, default: null },\n\t\t/**\n\t\t * Forwarded to CnFilesBrowser: the host's actions on a selection of\n\t\t * files. With at least one, files get checkboxes and a bulk bar.\n\t\t *\n\t\t * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}\n\t\t */\n\t\tbulkActions: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: the bulk bar's count, a template with `{count}`. */\n\t\tselectionLabel: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: the bulk bar's count for one file. */\n\t\tselectionLabelOne: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: whether the bulk bar ends in \"Clear selection\". */\n\t\tshowClearSelection: { type: Boolean, default: true },\n\t\t/**\n\t\t * Forwarded to CnFilesBrowser: cards beside the list about the last\n\t\t * selected file.\n\t\t *\n\t\t * @type {Array<{id: string, title: string, fields?: Array<object>, actions?: Array<object>}>}\n\t\t */\n\t\tsideCards: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: the key of a declared column to group the files on. */\n\t\tgroupBy: { type: String, default: '' },\n\t\t/**\n\t\t * Forwarded to CnFilesBrowser: keys of declared columns to filter on,\n\t\t * a chip per value in use.\n\t\t *\n\t\t * @type {string[]}\n\t\t */\n\t\tfacets: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: the host's own buttons in the bar. */\n\t\theaderActions: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: one visible button on every file row. */\n\t\trowButton: { type: Object, default: null },\n\t\t/** Forwarded to CnFilesBrowser: the review summary above the list. */\n\t\treviewSummary: { type: Object, default: null },\n\t\t/** Forwarded to CnFilesBrowser: the host's own line under the list. */\n\t\tfootnote: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: the second line under each file's name. */\n\t\tnameSecondary: { type: String, default: '' },\n\t\t/** A dotted path to the list of records in the `rowDataUrl` answer; empty reads the answer itself. */\n\t\trowDataPath: { type: String, default: '' },\n\t\t/** The record field that holds the Nextcloud file id. */\n\t\trowDataKey: { type: String, default: 'fileId' },\n\t\t/** Label of the Download action. */\n\t\tdownloadLabel: { type: String, default: () => t('nextcloud-vue', 'Download') },\n\t\t/** Label of the action that opens the Files sidebar on the file. */\n\t\tdetailsLabel: { type: String, default: () => t('nextcloud-vue', 'Details and sharing') },\n\t\t/** Label of the link that opens the file in the Files app. */\n\t\tshowInFilesLabel: { type: String, default: () => t('nextcloud-vue', 'Show in Files') },\n\t\t/** Label of the action that copies the file permalink. */\n\t\tcopyLinkLabel: { type: String, default: () => t('nextcloud-vue', 'Copy link') },\n\t\t/** Label for the load-more button */\n\t\tloadMoreLabel: { type: String, default: () => t('nextcloud-vue', 'Load more') },\n\t\t/**\n\t\t * Whether to render the \"share uploaded files\" toggle. Off by default;\n\t\t * when false, uploads never set the share flag (no auto-publish).\n\t\t *\n\t\t * @type {boolean}\n\t\t */\n\t\tshowShareToggle: { type: Boolean, default: false },\n\t\t/**\n\t\t * Initial state for the share toggle. `true`/`false` wins outright;\n\t\t * `null` (the default) defers to the schema's\n\t\t * `configuration.defaultAutoShare` from OpenRegister.\n\t\t *\n\t\t * @type {boolean|null}\n\t\t */\n\t\tdefaultShare: { type: Boolean, default: null },\n\t\t/** Label for the share toggle */\n\t\tshareLabel: { type: String, default: () => t('nextcloud-vue', 'Share uploaded files') },\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tpreviewFile: null,\n\t\t\tfiles: [],\n\t\t\tloading: false,\n\t\t\tloadingMore: false,\n\t\t\tisDragOver: false,\n\t\t\tuploadError: '',\n\t\t\tpage: 1,\n\t\t\ttotal: 0,\n\t\t\tlimit: 20,\n\t\t\tshare: false,\n\t\t\t/** The object's folder as a user-relative path, or null while unresolved or absent. */\n\t\t\tbrowserRoot: null,\n\t\t\t/** The browser's data source for `source: 'openregister'`, or null for WebDAV. */\n\t\t\tbrowserSource: null,\n\t\t\tbrowserObjectName: null,\n\t\t\tlinkedItems: [],\n\t\t\t/** File ids whose preview request failed, so the row falls back to the mime icon. */\n\t\t\tpreviewFailed: {},\n\t\t\t/**\n\t\t\t * The file input element, set by the template's function ref.\n\t\t\t *\n\t\t\t * Held here rather than read back through `$refs` so the ref stays\n\t\t\t * DYNAMIC — see the long comment on the input itself for why a\n\t\t\t * static ref on this element is a production crash.\n\t\t\t *\n\t\t\t * @type {HTMLInputElement|null}\n\t\t\t */\n\t\t\tfileInputEl: null,\n\t\t\t/** The mime types Nextcloud Office opens for this person; empty without Office. */\n\t\t\tofficeMimetypes: readOfficeMimetypes(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The browser's `rowData`: a function that reads the host's records\n\t\t * from `rowDataUrl` and keys them by file id, or null without a url.\n\t\t * The browser calls it once per listing.\n\t\t *\n\t\t * @return {(function(): Promise<object>)|null} The row data source.\n\t\t * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md\n\t\t */\n\t\trowDataSource() {\n\t\t\tif (!this.rowDataUrl || !this.objectId) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst url = generateUrl(this.rowDataUrl.replace('{objectId}', encodeURIComponent(this.objectId)))\n\t\t\tconst path = this.rowDataPath\n\t\t\tconst key = this.rowDataKey\n\t\t\treturn async () => {\n\t\t\t\tconst { data } = await axios.get(url)\n\t\t\t\treturn indexRowData(data, { path, key })\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The root crumb: the host's label, else the object's name (its folder\n\t\t * on disk is called after its uuid), else the folder's own name.\n\t\t *\n\t\t * @return {string|null}\n\t\t * @spec openspec/changes/dutch-library-strings-and-files-crumb/specs/dutch-library-strings-and-files-crumb/spec.md#requirement-the-files-browser-names-the-object-in-its-root-crumb\n\t\t */\n\t\teffectiveBrowserRootLabel() {\n\t\t\treturn this.browserRootLabel || this.browserObjectName || null\n\t\t},\n\t},\n\n\twatch: {\n\t\t// Match every other CnObjectSidebar tab — a single immediate\n\t\t// `objectId` watcher drives all initial loads. Folding the\n\t\t// share-toggle seed in here avoids two concurrent GETs of\n\t\t// `schemas/{schema}` on mount (one per immediate watcher).\n\t\tobjectId: {\n\t\t\timmediate: true,\n\t\t\thandler(id) {\n\t\t\t\tif (id) {\n\t\t\t\t\tthis.fetchFiles()\n\t\t\t\t}\n\t\t\t\tthis.applyShareDefault()\n\t\t\t\tthis.resolveBrowserRoot()\n\t\t\t\tthis.fetchLinkedItems()\n\t\t\t},\n\t\t},\n\n\t\tlinkedItemsUrl() {\n\t\t\tthis.fetchLinkedItems()\n\t\t},\n\n\t\tsource() {\n\t\t\tthis.resolveBrowserRoot()\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Function ref for the file input.\n\t\t *\n\t\t * A method (not an inline arrow in the template) so the binding is a\n\t\t * stable reference across renders and Vue does not detach/reattach the\n\t\t * ref on every patch. Being a function ref is what keeps the vnode\n\t\t * dynamic — see the template comment on the input.\n\t\t *\n\t\t * @param {HTMLInputElement|null} el The element, or null on unmount.\n\t\t * @return {void}\n\t\t */\n\t\tfileInputRef(el) {\n\t\t\tthis.fileInputEl = el || null\n\t\t},\n\n\t\t/**\n\t\t * Find the object's folder for the browser, or leave the legacy list.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\t/**\n\t\t * The browser changed the folder: refresh the object's file list and\n\t\t * the linked rows, since a join or a move can change either.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tonBrowserChanged() {\n\t\t\tthis.fetchFiles()\n\t\t\tthis.fetchLinkedItems()\n\t\t},\n\n\t\t/**\n\t\t * Read the object's linked files from the host's endpoint, if any.\n\t\t *\n\t\t * A failure leaves the last list in place and logs at debug: the\n\t\t * folder's own rows are the surface, the linked rows a supplement.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchLinkedItems() {\n\t\t\tif (!this.linkedItemsUrl || !this.objectId) {\n\t\t\t\tthis.linkedItems = []\n\t\t\t\treturn\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst url = generateUrl(this.linkedItemsUrl.replace('{objectId}', encodeURIComponent(this.objectId)))\n\t\t\t\tconst { data } = await axios.get(url)\n\t\t\t\tconst items = Array.isArray(data) ? data : (Array.isArray(data?.items) ? data.items : [])\n\t\t\t\tthis.linkedItems = items.filter((item) => item && typeof item === 'object')\n\t\t\t} catch (error) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.debug('[CnFilesTab] linked items not read', error)\n\t\t\t}\n\t\t},\n\n\t\tasync resolveBrowserRoot() {\n\t\t\tthis.browserRoot = null\n\t\t\tthis.browserSource = null\n\t\t\tthis.browserObjectName = null\n\t\t\tif (!this.objectId || !this.register || !this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.source === 'openregister') {\n\t\t\t\tawait this.resolveOpenRegisterSource()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tlet remoteUrl\n\t\t\ttry {\n\t\t\t\tremoteUrl = generateRemoteUrl('dav')\n\t\t\t} catch {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst info = await resolveObjectFolderInfo({\n\t\t\t\tapiBase: this.apiBase,\n\t\t\t\tregister: this.register,\n\t\t\t\tschema: this.schema,\n\t\t\t\tobjectId: this.objectId,\n\t\t\t\tuid: getCurrentUser()?.uid || '',\n\t\t\t\tremoteUrl,\n\t\t\t})\n\t\t\tthis.browserRoot = info === null ? null : info.path\n\t\t\tthis.browserObjectName = info === null ? null : info.name\n\t\t},\n\n\t\t/**\n\t\t * Use OpenRegister's files API for the browser, when this person may read\n\t\t * the object's folder through it. A listing that fails (no read on the\n\t\t * object, or an OpenRegister without the folder endpoints) leaves the\n\t\t * legacy list, as an unresolved WebDAV folder did.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/files-browser-openregister-source/specs/files-browser/spec.md\n\t\t */\n\t\tasync resolveOpenRegisterSource() {\n\t\t\tconst objectId = this.objectId\n\t\t\tconst source = createOpenRegisterSource({\n\t\t\t\tapiBase: this.apiBase,\n\t\t\t\tregister: this.register,\n\t\t\t\tschema: this.schema,\n\t\t\t\tobjectId,\n\t\t\t})\n\t\t\ttry {\n\t\t\t\tawait source.list('/')\n\t\t\t} catch {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (objectId !== this.objectId) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.browserSource = source\n\t\t\tthis.browserRoot = '/'\n\t\t\tthis.fetchObjectName()\n\t\t},\n\n\t\t/**\n\t\t * Read the object's name for the root crumb, by the same rule the WebDAV\n\t\t * path uses (`objectDisplayName`: never the uuid). The OpenRegister path\n\t\t * has no folder lookup to piggyback on, so this is its one object read.\n\t\t * A failure keeps the crumb on its default.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchObjectName() {\n\t\t\tconst objectId = this.objectId\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.get(generateUrl(`${this.apiBase}/objects/{register}/{schema}/{objectId}`, {\n\t\t\t\t\tregister: this.register,\n\t\t\t\t\tschema: this.schema,\n\t\t\t\t\tobjectId,\n\t\t\t\t}))\n\t\t\t\tif (objectId === this.objectId) {\n\t\t\t\t\tthis.browserObjectName = objectDisplayName(data, objectId)\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// The crumb keeps its default.\n\t\t\t}\n\t\t},\n\n\t\tasync fetchFiles(append = false) {\n\t\t\tif (!this.register || !this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (append) {\n\t\t\t\tthis.loadingMore = true\n\t\t\t} else {\n\t\t\t\tthis.loading = true\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst params = new URLSearchParams({ limit: this.limit, _page: this.page })\n\t\t\t\tconst response = await fetch(\n\t\t\t\t\tprefixUrl(`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/files?${params}`),\n\t\t\t\t\t{ headers: buildHeaders() },\n\t\t\t\t)\n\t\t\t\tif (response.ok) {\n\t\t\t\t\tconst data = await response.json()\n\t\t\t\t\tconst results = data.results || data || []\n\t\t\t\t\tthis.files = append ? [...this.files, ...results] : results\n\t\t\t\t\tthis.total = data.total || this.files.length\n\t\t\t\t}\n\t\t\t} catch (err) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('CnFilesTab: Failed to fetch files', err)\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.loadingMore = false\n\t\t\t}\n\t\t},\n\n\t\tloadMore() {\n\t\t\tthis.page++\n\t\t\tthis.fetchFiles(true)\n\t\t},\n\n\t\t/**\n\t\t * Seed the `share` toggle. The `defaultShare` prop wins when set\n\t\t * (non-null); otherwise we look up the active schema's\n\t\t * `configuration.defaultAutoShare` from OpenRegister and use that.\n\t\t * Network failure or missing key → keep the safe default (false) so\n\t\t * a hiccup never silently flips uploads to \"share\".\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync applyShareDefault() {\n\t\t\tif (this.defaultShare !== null && this.defaultShare !== undefined) {\n\t\t\t\tthis.share = !!this.defaultShare\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.share = false\n\t\t\tif (!this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(\n\t\t\t\t\tprefixUrl(`${this.apiBase}/schemas/${this.schema}`),\n\t\t\t\t\t{ headers: buildHeaders() },\n\t\t\t\t)\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tconst data = await response.json().catch(() => null)\n\t\t\t\tif (data?.configuration?.defaultAutoShare === true) {\n\t\t\t\t\tthis.share = true\n\t\t\t\t}\n\t\t\t} catch (err) {\n\t\t\t\t// Non-fatal — keep the safe default, but surface the\n\t\t\t\t// failure so a missing toggle default isn't silent.\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('CnFilesTab: Failed to fetch schema default for share toggle', err)\n\t\t\t}\n\t\t},\n\n\t\ttriggerFileInput() {\n\t\t\tthis.fileInputEl?.click()\n\t\t},\n\n\t\tonDragOver() {\n\t\t\tthis.isDragOver = true\n\t\t},\n\n\t\tonDragLeave() {\n\t\t\tthis.isDragOver = false\n\t\t},\n\n\t\tonDrop(event) {\n\t\t\tthis.isDragOver = false\n\t\t\tconst droppedFiles = event.dataTransfer?.files\n\t\t\tif (droppedFiles?.length) {\n\t\t\t\tthis.uploadFiles(droppedFiles)\n\t\t\t}\n\t\t},\n\n\t\tasync onFileUpload(event) {\n\t\t\tconst inputFiles = event.target.files\n\t\t\tif (!inputFiles?.length) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tawait this.uploadFiles(inputFiles)\n\t\t\tif (this.fileInputEl) {\n\t\t\t\tthis.fileInputEl.value = ''\n\t\t\t}\n\t\t},\n\n\t\tasync uploadFiles(fileList) {\n\t\t\tif (!fileList?.length || !this.register || !this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.uploadError = ''\n\t\t\tconst formData = new FormData()\n\t\t\tfor (const file of fileList) {\n\t\t\t\tformData.append('files[]', file)\n\t\t\t}\n\t\t\t// Only forward the share flag when the toggle is actually visible.\n\t\t\t// Hiding the toggle (showShareToggle=false) means \"don't auto-publish\".\n\t\t\tif (this.showShareToggle) {\n\t\t\t\tformData.append('share', String(this.share))\n\t\t\t}\n\n\t\t\tthis.loading = true\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(\n\t\t\t\t\tprefixUrl(`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/filesMultipart`),\n\t\t\t\t\t{\n\t\t\t\t\t\tmethod: 'POST',\n\t\t\t\t\t\theaders: { requesttoken: OC?.requestToken || '', 'OCS-APIREQUEST': 'true' },\n\t\t\t\t\t\tbody: formData,\n\t\t\t\t\t},\n\t\t\t\t)\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\tconst data = await response.json().catch(() => ({}))\n\t\t\t\t\tthis.uploadError = data.error || `Upload failed (${response.status})`\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tawait this.fetchFiles()\n\t\t\t} catch (err) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('CnFilesTab: Failed to upload file', err)\n\t\t\t\tthis.uploadError = 'Upload failed: could not connect to server'\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Whether the Files app's details sidebar is on this page.\n\t\t *\n\t\t * It is when the host page dispatched Nextcloud's `LoadSidebar` event\n\t\t * server-side; then `OCA.Files.Sidebar.open(path)` shows the same\n\t\t * sharing, versions, comments and activity tabs the Files app shows.\n\t\t * Absent, the row offers no details action rather than a dead one. A\n\t\t * method rather than a computed: the global is not reactive, so a\n\t\t * cached answer from before the sidebar script ran would stay wrong.\n\t\t *\n\t\t * @return {boolean} true when the sidebar can be opened.\n\t\t */\n\t\tcanShowDetails() {\n\t\t\treturn typeof window !== 'undefined' && typeof window.OCA?.Files?.Sidebar?.open === 'function'\n\t\t},\n\n\t\t/**\n\t\t * The file's path relative to the user's files root, which is the path\n\t\t * the Viewer and the Files sidebar take. OpenRegister reports the node's\n\t\t * full path (`/{uid}/files/…`), so the first two segments come off.\n\t\t *\n\t\t * @param {string} path The node path as OpenRegister reports it.\n\t\t * @return {string} The user-relative path, `/` at least.\n\t\t */\n\t\tuserRelativePath(path) {\n\t\t\tconst stripped = String(path || '').replace(/^\\/[^/]+\\/files(?=\\/|$)/, '')\n\t\t\treturn stripped === '' ? '/' : stripped\n\t\t},\n\n\t\t/**\n\t\t * The theme's own icon for the file's mime type, the one the Files app\n\t\t * draws, or null on a page without Nextcloud's core script.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string|null} The icon url.\n\t\t */\n\t\tmimeIconFor(file) {\n\t\t\tconst getIconUrl = typeof window !== 'undefined' ? window.OC?.MimeType?.getIconUrl : null\n\t\t\tif (typeof getIconUrl !== 'function') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst mime = file.type || file.mimetype || file.mimeType || ''\n\t\t\ttry {\n\t\t\t\treturn getIconUrl(mime) || null\n\t\t\t} catch {\n\t\t\t\treturn null\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * A small preview for an image, through Nextcloud's core preview\n\t\t * endpoint, or null for anything else or after the preview failed once.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string|null} The preview url.\n\t\t */\n\t\tpreviewUrlFor(file) {\n\t\t\tconst mime = file.type || file.mimetype || file.mimeType || ''\n\t\t\tif (!file.id || !/^image\\//i.test(mime) || /svg/i.test(mime) || this.previewFailed[file.id]) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn generateUrl('/core/preview?fileId={fileId}&x=64&y=64&a=1', { fileId: file.id })\n\t\t},\n\n\t\t/**\n\t\t * Remember that a preview did not load, so the row shows the mime icon.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {void}\n\t\t */\n\t\tonPreviewError(file) {\n\t\t\tthis.previewFailed = { ...this.previewFailed, [file.id]: true }\n\t\t},\n\n\t\t/**\n\t\t * The file's modification moment as a Date, or null when unknown.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {Date|null} The moment.\n\t\t */\n\t\tmodifiedAt(file) {\n\t\t\tconst raw = file.modified || file.updated || ''\n\t\t\tif (!raw) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst date = new Date(raw)\n\t\t\treturn Number.isNaN(date.getTime()) ? null : date\n\t\t},\n\n\t\t/**\n\t\t * The file's labels (Nextcloud tags), joined for the meta line.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string} The labels, or the empty string.\n\t\t */\n\t\tlabelsOf(file) {\n\t\t\treturn Array.isArray(file.labels) ? file.labels.filter(Boolean).join(', ') : ''\n\t\t},\n\n\t\t/**\n\t\t * The download url for a file, through OpenRegister's file endpoint,\n\t\t * which streams the node the object owns.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string} The url.\n\t\t */\n\t\tdownloadUrlFor(file) {\n\t\t\treturn `${this.apiBase}/files/${encodeURIComponent(String(file.id))}/download`\n\t\t},\n\n\t\t/**\n\t\t * Whether Nextcloud Office opens this file for this person.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {boolean} true when the Office action applies.\n\t\t */\n\t\tofficeOpens(file) {\n\t\t\tconst mime = file.type || file.mimetype || file.mimeType || ''\n\t\t\treturn Boolean(file.id) && mime !== '' && this.officeMimetypes.includes(mime)\n\t\t},\n\n\t\t/**\n\t\t * OpenRegister's Office page for a file of this object, which checks the\n\t\t * object rule and opens the document editable or read-only.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string} The url.\n\t\t */\n\t\tofficeUrlFor(file) {\n\t\t\tconst appBase = /\\/api\\/?$/.test(this.apiBase) ? this.apiBase.replace(/\\/api\\/?$/, '') : '/apps/openregister'\n\t\t\tconst segments = [this.register, this.schema, this.objectId, String(file.id)].map((part) => encodeURIComponent(String(part)))\n\t\t\treturn prefixUrl(`${appBase}/office/${segments.join('/')}`)\n\t\t},\n\n\t\t/**\n\t\t * The Files app's permalink for a file: opens the Files app at the\n\t\t * file's folder with the file selected.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string} The url.\n\t\t */\n\t\tshowInFilesUrl(file) {\n\t\t\treturn generateUrl('/f/{fileid}', { fileid: file.id })\n\t\t},\n\n\t\t/**\n\t\t * Open the Files sidebar on this file: details, sharing, versions,\n\t\t * comments and activity, exactly as the Files app offers them.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {void}\n\t\t */\n\t\tshowDetails(file) {\n\t\t\tif (!this.canShowDetails() || !file.path) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\twindow.OCA.Files.Sidebar.open(this.userRelativePath(file.path))\n\t\t},\n\n\t\t/**\n\t\t * Put the file's permalink on the clipboard and say so.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync copyLink(file) {\n\t\t\tconst href = new URL(this.showInFilesUrl(file), window.location.origin).href\n\t\t\ttry {\n\t\t\t\tawait navigator.clipboard.writeText(href)\n\t\t\t\tconst { showSuccess } = await import('@nextcloud/dialogs')\n\t\t\t\tshowSuccess(t('nextcloud-vue', 'Link copied'))\n\t\t\t} catch {\n\t\t\t\tconst { showError } = await import('@nextcloud/dialogs')\n\t\t\t\tshowError(t('nextcloud-vue', 'The link could not be copied'))\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Show a file in the in-page preview.\n\t\t *\n\t\t * @param {object} file The file to preview.\n\t\t */\n\t\tshowPreview(file) {\n\t\t\tthis.previewFile = file\n\t\t},\n\n\t\t/**\n\t\t * Open a file through the shared opener (Viewer, preview, browser, Files).\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t */\n\t\topenFile(file) {\n\t\t\tuseFileOpener({\n\t\t\t\tonPreview: this.showPreview,\n\t\t\t\tuserRelativePath: this.userRelativePath,\n\t\t\t\tanyAccessUrl: true,\n\t\t\t\tfilesAppUrl: (f) => {\n\t\t\t\t\tconst dirPath = f.path ? f.path.substring(0, f.path.lastIndexOf('/')) : ''\n\t\t\t\t\tconst cleanPath = dirPath.replace(/^\\/admin\\/files\\//, '/')\n\t\t\t\t\treturn `/index.php/apps/files/files/${f.id}?dir=${encodeURIComponent(cleanPath)}&openfile=true`\n\t\t\t\t},\n\t\t\t}).open(file)\n\t\t},\n\n\t\tasync deleteFile(file) {\n\t\t\tif (!this.register || !this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tawait fetch(\n\t\t\t\t\tprefixUrl(`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/files/${file.id}`),\n\t\t\t\t\t{ method: 'DELETE', headers: buildHeaders() },\n\t\t\t\t)\n\t\t\t\tthis.files = this.files.filter((f) => f.id !== file.id)\n\t\t\t} catch (err) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('CnFilesTab: Failed to delete file', err)\n\t\t\t}\n\t\t},\n\n\t\tformatFileSize(bytes) {\n\t\t\tconst sizes = ['Bytes', 'KB', 'MB', 'GB']\n\t\t\tif (!bytes || bytes === 0) {\n\t\t\t\treturn 'n/a'\n\t\t\t}\n\t\t\tconst i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)))\n\t\t\tif (i === 0) {\n\t\t\t\treturn '< 1 KB'\n\t\t\t}\n\t\t\treturn (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sidebar-tab { padding: 12px; }\n\n.cn-sidebar-tab__upload-error {\n\tpadding: 8px 12px;\n\tmargin-bottom: 8px;\n\tborder-radius: var(--border-radius, 4px);\n\tbackground-color: var(--color-error-light, rgba(229, 57, 53, 0.1));\n\tcolor: var(--color-error, #e53935);\n\tfont-size: 13px;\n}\n\n.cn-sidebar-tab__dropzone {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tpadding: 20px 12px;\n\tmargin-bottom: 16px;\n\tborder: 2px dashed var(--color-border);\n\tborder-radius: var(--border-radius-large, 8px);\n\tcursor: pointer;\n\ttransition: border-color 0.15s ease, background-color 0.15s ease;\n}\n\n.cn-sidebar-tab__dropzone:hover {\n\tborder-color: var(--color-primary-element);\n\tbackground-color: var(--color-primary-element-light, rgba(0, 130, 201, 0.08));\n}\n\n.cn-sidebar-tab__dropzone--active {\n\tborder-color: var(--color-primary-element);\n\tbackground-color: var(--color-primary-element-light, rgba(0, 130, 201, 0.12));\n}\n\n.cn-sidebar-tab__share { margin-bottom: 12px; }\n\n.cn-sidebar-tab__dropzone-icon { color: var(--color-text-maxcontrast); }\n\n.cn-sidebar-tab__dropzone--active .cn-sidebar-tab__dropzone-icon,\n.cn-sidebar-tab__dropzone:hover .cn-sidebar-tab__dropzone-icon { color: var(--color-primary-element); }\n\n.cn-sidebar-tab__dropzone-text { font-size: 13px; color: var(--color-text-maxcontrast); }\n\n.cn-sidebar-tab__file-input { display: none; }\n\n.cn-sidebar-tab__empty {\n\ttext-align: center;\n\tpadding: 24px 12px;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n}\n\n.cn-sidebar-tab__list { display: flex; flex-direction: column; gap: 2px; }\n\n.cn-sidebar-tab__mime,\n.cn-sidebar-tab__thumb {\n\twidth: 32px;\n\theight: 32px;\n\tdisplay: block;\n}\n\n.cn-sidebar-tab__thumb {\n\tobject-fit: cover;\n\tborder-radius: var(--border-radius, 4px);\n}\n\n.cn-sidebar-tab__meta { color: var(--color-text-maxcontrast); }\n\n.cn-sidebar-tab__load-more { margin-top: 8px; }\n</style>\n"],"names":["_openBlock","_createElementBlock","_createBlock","_Fragment","_toDisplayString","_createElementVNode","_normalizeClass","_createVNode","_renderList","_createTextVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CnFilesTab.vue3.js","sources":["../../../../src/components/CnObjectSidebar/CnFilesTab.vue?vue&type=template&id=76386af6&lang.js"],"sourcesContent":["<template>\n\t<div class=\"cn-sidebar-tab\">\n\t\t<!-- The object's folder as a real files browser, on the Files app's own\n\t\t primitives (its actions, its New menu, its breadcrumbs), when the\n\t\t folder resolves for this user. The list below is the fallback for an\n\t\t object with no folder, or a user the folder is not shared with. -->\n\t\t<CnFilesBrowser\n\t\t\tv-if=\"browserRoot !== null\"\n\t\t\t:rootPath=\"browserRoot\"\n\t\t\t:rootLabel=\"effectiveBrowserRootLabel\"\n\t\t\t:source=\"browserSource\"\n\t\t\t:deleteLabel=\"deleteLabel\"\n\t\t\t:uploadButton=\"uploadButton\"\n\t\t\t:dropOverlay=\"dropOverlay\"\n\t\t\t:dropLabel=\"dropLabel\"\n\t\t\t:dropDetail=\"dropDetail\"\n\t\t\t:dropHint=\"dropHint\"\n\t\t\t:rowActions=\"rowActions\"\n\t\t\t:newActions=\"newActions\"\n\t\t\t:headerActions=\"headerActions\"\n\t\t\t:rowButton=\"rowButton\"\n\t\t\t:reviewSummary=\"reviewSummary\"\n\t\t\t:footnote=\"footnote\"\n\t\t\t:nameSecondary=\"nameSecondary\"\n\t\t\t:linkedItems=\"linkedItems\"\n\t\t\t:columns=\"columns\"\n\t\t\t:rowData=\"rowDataSource\"\n\t\t\t:preferenceApp=\"preferenceApp\"\n\t\t\t:preferenceKey=\"preferenceKey\"\n\t\t\t:bulkActions=\"bulkActions\"\n\t\t\t:selectionLabel=\"selectionLabel\"\n\t\t\t:selectionLabelOne=\"selectionLabelOne\"\n\t\t\t:showClearSelection=\"showClearSelection\"\n\t\t\t:sideCards=\"sideCards\"\n\t\t\t:sideCardsPlacement=\"sideCardsPlacement\"\n\t\t\t:groupBy=\"groupBy\"\n\t\t\t:facets=\"facets\"\n\t\t\t@changed=\"onBrowserChanged\" />\n\t\t<template v-else>\n\t\t\t<!-- Upload error -->\n\t\t\t<div v-if=\"uploadError\" class=\"cn-sidebar-tab__upload-error\">\n\t\t\t\t{{ uploadError }}\n\t\t\t</div>\n\n\t\t\t<!-- Share toggle — seeds from schema config (defaultAutoShare) or\n\t\t from the `defaultShare` prop. Hidden via `showShareToggle=false`. -->\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\tv-if=\"showShareToggle\"\n\t\t\t\tv-model=\"share\"\n\t\t\t\tclass=\"cn-sidebar-tab__share\"\n\t\t\t\t:disabled=\"loading\"\n\t\t\t\ttype=\"switch\">\n\t\t\t\t{{ shareLabel }}\n\t\t\t</NcCheckboxRadioSwitch>\n\n\t\t\t<!-- File drop zone -->\n\t\t\t<div\n\t\t\t\tclass=\"cn-sidebar-tab__dropzone\"\n\t\t\t\t:class=\"{ 'cn-sidebar-tab__dropzone--active': isDragOver }\"\n\t\t\t\t@click=\"triggerFileInput\"\n\t\t\t\t@dragover.prevent=\"onDragOver\"\n\t\t\t\t@dragleave.prevent=\"onDragLeave\"\n\t\t\t\t@drop.prevent=\"onDrop\">\n\t\t\t\t<!--\n\t\t\t\t`:ref` (dynamic), not `ref` (static), and this is load-bearing.\n\n\t\t\t\tEvery other binding on this input is static, and Vue caches the\n\t\t\t\t`@change` handler, so with a STATIC ref the compiler hoists the\n\t\t\t\twhole vnode to module scope. A hoisted vnode is created once,\n\t\t\t\toutside any render, so its ref carries no owner instance\n\t\t\t\t(`rawRef.i === null`).\n\n\t\t\t\t`setRef()` guards that — but the guard AND its early `return`\n\t\t\t\tlive inside `if (process.env.NODE_ENV !== 'production')`. In a\n\t\t\t\tdevelopment build you get the warning \"Missing ref owner\n\t\t\t\tcontext. ref cannot be used on hoisted vnodes.\" and nothing\n\t\t\t\tbreaks. In a PRODUCTION build the guard is compiled out and\n\t\t\t\texecution falls through to `owner.refs`, throwing\n\t\t\t\t`TypeError: Cannot read properties of null (reading 'refs')`\n\t\t\t\t— which aborts the render of whatever mounted this tab.\n\n\t\t\t\tMeasured: hrmq's detail pages (the only pages in the fleet that\n\t\t\t\treach CnIntegrationWidget through a `widgets[]` grid) rendered a\n\t\t\t\tCOMPLETELY BLANK content pane in production while looking fine\n\t\t\t\tin dev. A dynamic ref is compiled as a patchable prop, so the\n\t\t\t\tvnode is created inside the render function and owns a proper\n\t\t\t\tinstance.\n\t\t\t-->\n\t\t\t\t<input\n\t\t\t\t\t:ref=\"fileInputRef\"\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tmultiple\n\t\t\t\t\tclass=\"cn-sidebar-tab__file-input\"\n\t\t\t\t\t@change=\"onFileUpload\">\n\t\t\t\t<Upload :size=\"24\" class=\"cn-sidebar-tab__dropzone-icon\" />\n\t\t\t\t<span class=\"cn-sidebar-tab__dropzone-text\">{{ dropZoneLabel }}</span>\n\t\t\t</div>\n\n\t\t\t<!-- File list. Each row borrows what Nextcloud already has on this\n\t\t page: the theme's own mime icon (OC.MimeType), the core preview\n\t\t endpoint for images, the Viewer for opening, and the Files sidebar\n\t\t for details, sharing and versions. Nothing of the Files app is\n\t\t rebuilt here; the row hands over to it. -->\n\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t<NcEmptyContent\n\t\t\t\tv-else-if=\"files.length === 0\"\n\t\t\t\tclass=\"cn-sidebar-tab__empty\"\n\t\t\t\t:name=\"noFilesLabel\"\n\t\t\t\t:description=\"dropZoneLabel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Paperclip :size=\"44\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t\t<div v-else class=\"cn-sidebar-tab__list\">\n\t\t\t\t<NcListItem\n\t\t\t\t\tv-for=\"file in files\"\n\t\t\t\t\t:key=\"file.id\"\n\t\t\t\t\t:name=\"file.name || file.title\"\n\t\t\t\t\t:bold=\"false\"\n\t\t\t\t\t:forceDisplayActions=\"true\"\n\t\t\t\t\t@click=\"openFile(file)\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tv-if=\"previewUrlFor(file)\"\n\t\t\t\t\t\t\tclass=\"cn-sidebar-tab__thumb\"\n\t\t\t\t\t\t\t:src=\"previewUrlFor(file)\"\n\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t@error=\"onPreviewError(file)\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tv-else-if=\"mimeIconFor(file)\"\n\t\t\t\t\t\t\tclass=\"cn-sidebar-tab__mime\"\n\t\t\t\t\t\t\t:src=\"mimeIconFor(file)\"\n\t\t\t\t\t\t\talt=\"\">\n\t\t\t\t\t\t<FileOutline v-else :size=\"32\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t<span class=\"cn-sidebar-tab__meta\">\n\t\t\t\t\t\t\t<span>{{ formatFileSize(file.size) }}</span>\n\t\t\t\t\t\t\t<template v-if=\"modifiedAt(file)\">\n\t\t\t\t\t\t\t\t<span aria-hidden=\"true\"> · </span>\n\t\t\t\t\t\t\t\t<NcDateTime :timestamp=\"modifiedAt(file)\" :ignoreSeconds=\"true\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t<template v-if=\"labelsOf(file)\">\n\t\t\t\t\t\t\t\t<span aria-hidden=\"true\"> · </span>\n\t\t\t\t\t\t\t\t<span>{{ labelsOf(file) }}</span>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton :closeAfterClick=\"true\" @click=\"openFile(file)\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ openLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<!-- OpenRegister's Office page applies the object rule:\n\t\t\t\t\t\t update edits, read views, no read is a 404. -->\n\t\t\t\t\t\t<NcActionLink\n\t\t\t\t\t\t\tv-if=\"officeOpens(file)\"\n\t\t\t\t\t\t\t:href=\"officeUrlFor(file)\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t:closeAfterClick=\"true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<FileDocumentEditOutline :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ openInOfficeLabel }}\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t\t<NcActionLink\n\t\t\t\t\t\t\tv-if=\"file.id\"\n\t\t\t\t\t\t\t:href=\"downloadUrlFor(file)\"\n\t\t\t\t\t\t\t:download=\"file.name || file.title || ''\"\n\t\t\t\t\t\t\t:closeAfterClick=\"true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ downloadLabel }}\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"canShowDetails() && file.path\"\n\t\t\t\t\t\t\t:closeAfterClick=\"true\"\n\t\t\t\t\t\t\t@click=\"showDetails(file)\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<InformationOutline :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ detailsLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink\n\t\t\t\t\t\t\tv-if=\"file.id\"\n\t\t\t\t\t\t\t:href=\"showInFilesUrl(file)\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t:closeAfterClick=\"true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<FolderOutline :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ showInFilesLabel }}\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t\t<NcActionButton v-if=\"file.id\" :closeAfterClick=\"true\" @click=\"copyLink(file)\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<LinkVariant :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ copyLinkLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionSeparator />\n\t\t\t\t\t\t<NcActionButton :closeAfterClick=\"true\" @click=\"deleteFile(file)\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ deleteLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t</template>\n\t\t\t\t</NcListItem>\n\t\t\t</div>\n\t\t\t<NcButton\n\t\t\t\tv-if=\"files.length < total\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t:wide=\"true\"\n\t\t\t\t:disabled=\"loadingMore\"\n\t\t\t\tclass=\"cn-sidebar-tab__load-more\"\n\t\t\t\t@click=\"loadMore\">\n\t\t\t\t<template v-if=\"loadingMore\" #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ loadMoreLabel }}\n\t\t\t</NcButton>\n\t\t</template>\n\t\t<CnFilePreview v-if=\"previewFile\" :file=\"previewFile\" @close=\"previewFile = null\" />\n\t</div>\n</template>\n\n<script>\nimport { getCurrentUser } from '@nextcloud/auth'\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { translate as t } from '@nextcloud/l10n'\nimport { generateRemoteUrl, generateUrl } from '@nextcloud/router'\nimport {\n\tNcActionButton,\n\tNcActionLink,\n\tNcActionSeparator,\n\tNcButton,\n\tNcCheckboxRadioSwitch,\n\tNcDateTime,\n\tNcEmptyContent,\n\tNcListItem,\n\tNcLoadingIcon,\n} from '@nextcloud/vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Download from 'vue-material-design-icons/Download.vue'\nimport FileDocumentEditOutline from 'vue-material-design-icons/FileDocumentEditOutline.vue'\nimport FileOutline from 'vue-material-design-icons/FileOutline.vue'\nimport FolderOutline from 'vue-material-design-icons/FolderOutline.vue'\nimport InformationOutline from 'vue-material-design-icons/InformationOutline.vue'\nimport LinkVariant from 'vue-material-design-icons/LinkVariant.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Paperclip from 'vue-material-design-icons/Paperclip.vue'\nimport Upload from 'vue-material-design-icons/Upload.vue'\nimport CnFilePreview from '../CnFilePreview/CnFilePreview.vue'\nimport CnFilesBrowser from '../CnFilesBrowser/CnFilesBrowser.vue'\nimport { useFileOpener } from '../../composables/useFileOpener.js'\nimport { buildHeaders, prefixUrl } from '../../utils/index.js'\nimport { indexRowData, objectDisplayName, resolveObjectFolderInfo } from '../CnFilesBrowser/filesBrowser.js'\nimport { createOpenRegisterSource } from '../CnFilesBrowser/openRegisterSource.js'\n\n/**\n * The mime types Nextcloud Office opens by default for the current person.\n *\n * richdocuments publishes its capabilities only to a person it lets use\n * Office, so an empty list means no Office here, or none for them.\n *\n * @return {Array<string>} The mime types, or an empty list.\n */\nfunction readOfficeMimetypes() {\n\ttry {\n\t\tconst mimetypes = getCapabilities()?.richdocuments?.mimetypes\n\t\treturn Array.isArray(mimetypes) ? mimetypes.filter((mime) => typeof mime === 'string') : []\n\t} catch {\n\t\treturn []\n\t}\n}\n\nexport default {\n\tname: 'CnFilesTab',\n\n\tcomponents: {\n\t\tCnFilePreview,\n\t\tCnFilesBrowser,\n\t\tNcActionButton,\n\t\tNcActionLink,\n\t\tNcActionSeparator,\n\t\tNcButton,\n\t\tNcCheckboxRadioSwitch,\n\t\tNcDateTime,\n\t\tNcEmptyContent,\n\t\tNcListItem,\n\t\tNcLoadingIcon,\n\t\tDelete,\n\t\tDownload,\n\t\tFileDocumentEditOutline,\n\t\tFileOutline,\n\t\tFolderOutline,\n\t\tInformationOutline,\n\t\tLinkVariant,\n\t\tOpenInNew,\n\t\tPaperclip,\n\t\tUpload,\n\t},\n\n\tprops: {\n\t\t/** ID of the object this tab belongs to */\n\t\tobjectId: { type: String, required: true },\n\t\t/** OpenRegister register slug */\n\t\tregister: { type: String, default: '' },\n\t\t/** JSON Schema definition for the object */\n\t\tschema: { type: String, default: '' },\n\t\t/** Base URL for the OpenRegister API */\n\t\tapiBase: { type: String, default: '/apps/openregister/api' },\n\t\t/** Text shown inside the file drop zone */\n\t\tdropZoneLabel: { type: String, default: () => t('nextcloud-vue', 'Drop files here or click to browse') },\n\t\t/** Text shown when no files are attached */\n\t\tnoFilesLabel: { type: String, default: () => t('nextcloud-vue', 'No files attached') },\n\t\t/** Label for the open/view file action */\n\t\topenLabel: { type: String, default: () => t('nextcloud-vue', 'Open') },\n\t\t/**\n\t\t * Label of the action that opens a document in Nextcloud Office through\n\t\t * OpenRegister's Office page. Shown only when Office is there for this\n\t\t * person and opens the file's type; the page opens it for editing or\n\t\t * read-only by the object's own rule.\n\t\t */\n\t\topenInOfficeLabel: { type: String, default: () => t('nextcloud-vue', 'Open in Office') },\n\t\t/** Label for the delete action */\n\t\tdeleteLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },\n\t\t/** What the files browser's root crumb reads; null shows the object's name, else the folder's own name. */\n\t\tbrowserRootLabel: { type: String, default: null },\n\t\t/**\n\t\t * Where the files browser reads the object's folder from.\n\t\t * `openregister` (the default) goes through OpenRegister's files API under\n\t\t * the object's access rule, so anyone who may read the object sees its\n\t\t * files, without a share. `webdav` is the earlier behaviour: the folder is\n\t\t * looked up in the person's own Files over WebDAV and the browser shows\n\t\t * only when it is shared with them.\n\t\t */\n\t\tsource: {\n\t\t\ttype: String,\n\t\t\tdefault: 'openregister',\n\t\t\tvalidator: (value) => ['openregister', 'webdav'].includes(value),\n\t\t},\n\n\t\t/** Forwarded to CnFilesBrowser: a primary \"Add files\" button beside the New menu. */\n\t\tuploadButton: { type: Boolean, default: false },\n\t\t/** Forwarded to CnFilesBrowser: the drop state drawn over the list (\"Drop to add\") and announced. */\n\t\tdropOverlay: { type: Boolean, default: false },\n\t\t/** Forwarded to CnFilesBrowser: the drop state's line (\"Laat los om toe te voegen\"); the library's own without it. */\n\t\tdropLabel: { type: String, default: undefined },\n\t\t/** Forwarded to CnFilesBrowser: the drop state's second line, `{count}` the files dragged; it also makes the overlay fill the panel. */\n\t\tdropDetail: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: \"Or drag files onto this list.\" under the list. */\n\t\tdropHint: { type: Boolean, default: false },\n\t\t/**\n\t\t * The host's own actions on each file row of the browser, forwarded\n\t\t * to CnFilesBrowser's `rowActions`: declared like any manifest action\n\t\t * and dispatched with the file's id, name and path merged in.\n\t\t *\n\t\t * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}\n\t\t */\n\t\trowActions: { type: Array, default: () => [] },\n\t\t/**\n\t\t * The host's own entries in the browser's New menu, forwarded to\n\t\t * CnFilesBrowser's `newActions`: declared like a row action and\n\t\t * dispatched with the folder rather than a row, for things like\n\t\t * \"new from template\" or \"request a file from a party\".\n\t\t *\n\t\t * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}\n\t\t */\n\t\tnewActions: { type: Array, default: () => [] },\n\t\t/**\n\t\t * An app endpoint that answers the object's linked files, rows the\n\t\t * browser shows after the folder's own (files the host joined from\n\t\t * another object's folder). App-relative; `{objectId}` is replaced.\n\t\t * The response is an array (or `{ items: [] }`) of\n\t\t * `{ id, name, mime?, size?, mtime?, href?, downloadHref?, note?, noteHref? }`.\n\t\t * Null fetches nothing.\n\t\t */\n\t\tlinkedItemsUrl: { type: String, default: null },\n\t\t/**\n\t\t * Forwarded to CnFilesBrowser: the columns the browser shows, built-in\n\t\t * names or declared columns (`{ key, label, source, formatter }`).\n\t\t * A `source: 'row'` column reads the host's record for the file from\n\t\t * `rowDataUrl`. None keeps name, size and modified.\n\t\t *\n\t\t * @type {Array<string|object>}\n\t\t */\n\t\tcolumns: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: the app id the user's column choice is stored under; unset offers no Columns chooser. */\n\t\tpreferenceApp: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: the key the column choice is stored under. */\n\t\tpreferenceKey: { type: String, default: 'files-browser-columns' },\n\t\t/**\n\t\t * An app endpoint that answers the host's own record per file, for the\n\t\t * browser's `source: 'row'` columns. App-relative; `{objectId}` is\n\t\t * replaced. Read once per listing. The answer is a list of records\n\t\t * (or the list at `rowDataPath`, or under `items` or `results`), each\n\t\t * naming its file in `rowDataKey`. Null reads nothing.\n\t\t */\n\t\trowDataUrl: { type: String, default: null },\n\t\t/**\n\t\t * Forwarded to CnFilesBrowser: the host's actions on a selection of\n\t\t * files. With at least one, files get checkboxes and a bulk bar.\n\t\t *\n\t\t * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}\n\t\t */\n\t\tbulkActions: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: the bulk bar's count, a template with `{count}`. */\n\t\tselectionLabel: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: the bulk bar's count for one file. */\n\t\tselectionLabelOne: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: whether the bulk bar ends in \"Clear selection\". */\n\t\tshowClearSelection: { type: Boolean, default: true },\n\t\t/**\n\t\t * Forwarded to CnFilesBrowser: cards beside the list about the last\n\t\t * selected file.\n\t\t *\n\t\t * @type {Array<{id: string, title: string, fields?: Array<object>, actions?: Array<object>}>}\n\t\t */\n\t\tsideCards: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: `page-side` puts the side cards in the detail page's side column. */\n\t\tsideCardsPlacement: { type: String, default: 'beside' },\n\t\t/** Forwarded to CnFilesBrowser: the key of a declared column to group the files on. */\n\t\tgroupBy: { type: String, default: '' },\n\t\t/**\n\t\t * Forwarded to CnFilesBrowser: keys of declared columns to filter on,\n\t\t * a chip per value in use.\n\t\t *\n\t\t * @type {string[]}\n\t\t */\n\t\tfacets: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: the host's own buttons in the bar. */\n\t\theaderActions: { type: Array, default: () => [] },\n\t\t/** Forwarded to CnFilesBrowser: one visible button on every file row. */\n\t\trowButton: { type: Object, default: null },\n\t\t/** Forwarded to CnFilesBrowser: the review summary above the list. */\n\t\treviewSummary: { type: Object, default: null },\n\t\t/** Forwarded to CnFilesBrowser: the host's own line under the list. */\n\t\tfootnote: { type: String, default: '' },\n\t\t/** Forwarded to CnFilesBrowser: the second line under each file's name. */\n\t\tnameSecondary: { type: String, default: '' },\n\t\t/** A dotted path to the list of records in the `rowDataUrl` answer; empty reads the answer itself. */\n\t\trowDataPath: { type: String, default: '' },\n\t\t/** The record field that holds the Nextcloud file id. */\n\t\trowDataKey: { type: String, default: 'fileId' },\n\t\t/** Label of the Download action. */\n\t\tdownloadLabel: { type: String, default: () => t('nextcloud-vue', 'Download') },\n\t\t/** Label of the action that opens the Files sidebar on the file. */\n\t\tdetailsLabel: { type: String, default: () => t('nextcloud-vue', 'Details and sharing') },\n\t\t/** Label of the link that opens the file in the Files app. */\n\t\tshowInFilesLabel: { type: String, default: () => t('nextcloud-vue', 'Show in Files') },\n\t\t/** Label of the action that copies the file permalink. */\n\t\tcopyLinkLabel: { type: String, default: () => t('nextcloud-vue', 'Copy link') },\n\t\t/** Label for the load-more button */\n\t\tloadMoreLabel: { type: String, default: () => t('nextcloud-vue', 'Load more') },\n\t\t/**\n\t\t * Whether to render the \"share uploaded files\" toggle. Off by default;\n\t\t * when false, uploads never set the share flag (no auto-publish).\n\t\t *\n\t\t * @type {boolean}\n\t\t */\n\t\tshowShareToggle: { type: Boolean, default: false },\n\t\t/**\n\t\t * Initial state for the share toggle. `true`/`false` wins outright;\n\t\t * `null` (the default) defers to the schema's\n\t\t * `configuration.defaultAutoShare` from OpenRegister.\n\t\t *\n\t\t * @type {boolean|null}\n\t\t */\n\t\tdefaultShare: { type: Boolean, default: null },\n\t\t/** Label for the share toggle */\n\t\tshareLabel: { type: String, default: () => t('nextcloud-vue', 'Share uploaded files') },\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tpreviewFile: null,\n\t\t\tfiles: [],\n\t\t\tloading: false,\n\t\t\tloadingMore: false,\n\t\t\tisDragOver: false,\n\t\t\tuploadError: '',\n\t\t\tpage: 1,\n\t\t\ttotal: 0,\n\t\t\tlimit: 20,\n\t\t\tshare: false,\n\t\t\t/** The object's folder as a user-relative path, or null while unresolved or absent. */\n\t\t\tbrowserRoot: null,\n\t\t\t/** The browser's data source for `source: 'openregister'`, or null for WebDAV. */\n\t\t\tbrowserSource: null,\n\t\t\tbrowserObjectName: null,\n\t\t\tlinkedItems: [],\n\t\t\t/** File ids whose preview request failed, so the row falls back to the mime icon. */\n\t\t\tpreviewFailed: {},\n\t\t\t/**\n\t\t\t * The file input element, set by the template's function ref.\n\t\t\t *\n\t\t\t * Held here rather than read back through `$refs` so the ref stays\n\t\t\t * DYNAMIC — see the long comment on the input itself for why a\n\t\t\t * static ref on this element is a production crash.\n\t\t\t *\n\t\t\t * @type {HTMLInputElement|null}\n\t\t\t */\n\t\t\tfileInputEl: null,\n\t\t\t/** The mime types Nextcloud Office opens for this person; empty without Office. */\n\t\t\tofficeMimetypes: readOfficeMimetypes(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The browser's `rowData`: a function that reads the host's records\n\t\t * from `rowDataUrl` and keys them by file id, or null without a url.\n\t\t * The browser calls it once per listing.\n\t\t *\n\t\t * @return {(function(): Promise<object>)|null} The row data source.\n\t\t * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md\n\t\t */\n\t\trowDataSource() {\n\t\t\tif (!this.rowDataUrl || !this.objectId) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst url = generateUrl(this.rowDataUrl.replace('{objectId}', encodeURIComponent(this.objectId)))\n\t\t\tconst path = this.rowDataPath\n\t\t\tconst key = this.rowDataKey\n\t\t\treturn async () => {\n\t\t\t\tconst { data } = await axios.get(url)\n\t\t\t\treturn indexRowData(data, { path, key })\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The root crumb: the host's label, else the object's name (its folder\n\t\t * on disk is called after its uuid), else the folder's own name.\n\t\t *\n\t\t * @return {string|null}\n\t\t * @spec openspec/changes/dutch-library-strings-and-files-crumb/specs/dutch-library-strings-and-files-crumb/spec.md#requirement-the-files-browser-names-the-object-in-its-root-crumb\n\t\t */\n\t\teffectiveBrowserRootLabel() {\n\t\t\treturn this.browserRootLabel || this.browserObjectName || null\n\t\t},\n\t},\n\n\twatch: {\n\t\t// Match every other CnObjectSidebar tab — a single immediate\n\t\t// `objectId` watcher drives all initial loads. Folding the\n\t\t// share-toggle seed in here avoids two concurrent GETs of\n\t\t// `schemas/{schema}` on mount (one per immediate watcher).\n\t\tobjectId: {\n\t\t\timmediate: true,\n\t\t\thandler(id) {\n\t\t\t\tif (id) {\n\t\t\t\t\tthis.fetchFiles()\n\t\t\t\t}\n\t\t\t\tthis.applyShareDefault()\n\t\t\t\tthis.resolveBrowserRoot()\n\t\t\t\tthis.fetchLinkedItems()\n\t\t\t},\n\t\t},\n\n\t\tlinkedItemsUrl() {\n\t\t\tthis.fetchLinkedItems()\n\t\t},\n\n\t\tsource() {\n\t\t\tthis.resolveBrowserRoot()\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Function ref for the file input.\n\t\t *\n\t\t * A method (not an inline arrow in the template) so the binding is a\n\t\t * stable reference across renders and Vue does not detach/reattach the\n\t\t * ref on every patch. Being a function ref is what keeps the vnode\n\t\t * dynamic — see the template comment on the input.\n\t\t *\n\t\t * @param {HTMLInputElement|null} el The element, or null on unmount.\n\t\t * @return {void}\n\t\t */\n\t\tfileInputRef(el) {\n\t\t\tthis.fileInputEl = el || null\n\t\t},\n\n\t\t/**\n\t\t * Find the object's folder for the browser, or leave the legacy list.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\t/**\n\t\t * The browser changed the folder: refresh the object's file list and\n\t\t * the linked rows, since a join or a move can change either.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tonBrowserChanged() {\n\t\t\tthis.fetchFiles()\n\t\t\tthis.fetchLinkedItems()\n\t\t},\n\n\t\t/**\n\t\t * Read the object's linked files from the host's endpoint, if any.\n\t\t *\n\t\t * A failure leaves the last list in place and logs at debug: the\n\t\t * folder's own rows are the surface, the linked rows a supplement.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchLinkedItems() {\n\t\t\tif (!this.linkedItemsUrl || !this.objectId) {\n\t\t\t\tthis.linkedItems = []\n\t\t\t\treturn\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst url = generateUrl(this.linkedItemsUrl.replace('{objectId}', encodeURIComponent(this.objectId)))\n\t\t\t\tconst { data } = await axios.get(url)\n\t\t\t\tconst items = Array.isArray(data) ? data : (Array.isArray(data?.items) ? data.items : [])\n\t\t\t\tthis.linkedItems = items.filter((item) => item && typeof item === 'object')\n\t\t\t} catch (error) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.debug('[CnFilesTab] linked items not read', error)\n\t\t\t}\n\t\t},\n\n\t\tasync resolveBrowserRoot() {\n\t\t\tthis.browserRoot = null\n\t\t\tthis.browserSource = null\n\t\t\tthis.browserObjectName = null\n\t\t\tif (!this.objectId || !this.register || !this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.source === 'openregister') {\n\t\t\t\tawait this.resolveOpenRegisterSource()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tlet remoteUrl\n\t\t\ttry {\n\t\t\t\tremoteUrl = generateRemoteUrl('dav')\n\t\t\t} catch {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst info = await resolveObjectFolderInfo({\n\t\t\t\tapiBase: this.apiBase,\n\t\t\t\tregister: this.register,\n\t\t\t\tschema: this.schema,\n\t\t\t\tobjectId: this.objectId,\n\t\t\t\tuid: getCurrentUser()?.uid || '',\n\t\t\t\tremoteUrl,\n\t\t\t})\n\t\t\tthis.browserRoot = info === null ? null : info.path\n\t\t\tthis.browserObjectName = info === null ? null : info.name\n\t\t},\n\n\t\t/**\n\t\t * Use OpenRegister's files API for the browser, when this person may read\n\t\t * the object's folder through it. A listing that fails (no read on the\n\t\t * object, or an OpenRegister without the folder endpoints) leaves the\n\t\t * legacy list, as an unresolved WebDAV folder did.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t * @spec openspec/changes/files-browser-openregister-source/specs/files-browser/spec.md\n\t\t */\n\t\tasync resolveOpenRegisterSource() {\n\t\t\tconst objectId = this.objectId\n\t\t\tconst source = createOpenRegisterSource({\n\t\t\t\tapiBase: this.apiBase,\n\t\t\t\tregister: this.register,\n\t\t\t\tschema: this.schema,\n\t\t\t\tobjectId,\n\t\t\t})\n\t\t\ttry {\n\t\t\t\tawait source.list('/')\n\t\t\t} catch {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (objectId !== this.objectId) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.browserSource = source\n\t\t\tthis.browserRoot = '/'\n\t\t\tthis.fetchObjectName()\n\t\t},\n\n\t\t/**\n\t\t * Read the object's name for the root crumb, by the same rule the WebDAV\n\t\t * path uses (`objectDisplayName`: never the uuid). The OpenRegister path\n\t\t * has no folder lookup to piggyback on, so this is its one object read.\n\t\t * A failure keeps the crumb on its default.\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync fetchObjectName() {\n\t\t\tconst objectId = this.objectId\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.get(generateUrl(`${this.apiBase}/objects/{register}/{schema}/{objectId}`, {\n\t\t\t\t\tregister: this.register,\n\t\t\t\t\tschema: this.schema,\n\t\t\t\t\tobjectId,\n\t\t\t\t}))\n\t\t\t\tif (objectId === this.objectId) {\n\t\t\t\t\tthis.browserObjectName = objectDisplayName(data, objectId)\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// The crumb keeps its default.\n\t\t\t}\n\t\t},\n\n\t\tasync fetchFiles(append = false) {\n\t\t\tif (!this.register || !this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (append) {\n\t\t\t\tthis.loadingMore = true\n\t\t\t} else {\n\t\t\t\tthis.loading = true\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst params = new URLSearchParams({ limit: this.limit, _page: this.page })\n\t\t\t\tconst response = await fetch(\n\t\t\t\t\tprefixUrl(`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/files?${params}`),\n\t\t\t\t\t{ headers: buildHeaders() },\n\t\t\t\t)\n\t\t\t\tif (response.ok) {\n\t\t\t\t\tconst data = await response.json()\n\t\t\t\t\tconst results = data.results || data || []\n\t\t\t\t\tthis.files = append ? [...this.files, ...results] : results\n\t\t\t\t\tthis.total = data.total || this.files.length\n\t\t\t\t}\n\t\t\t} catch (err) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('CnFilesTab: Failed to fetch files', err)\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t\tthis.loadingMore = false\n\t\t\t}\n\t\t},\n\n\t\tloadMore() {\n\t\t\tthis.page++\n\t\t\tthis.fetchFiles(true)\n\t\t},\n\n\t\t/**\n\t\t * Seed the `share` toggle. The `defaultShare` prop wins when set\n\t\t * (non-null); otherwise we look up the active schema's\n\t\t * `configuration.defaultAutoShare` from OpenRegister and use that.\n\t\t * Network failure or missing key → keep the safe default (false) so\n\t\t * a hiccup never silently flips uploads to \"share\".\n\t\t *\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync applyShareDefault() {\n\t\t\tif (this.defaultShare !== null && this.defaultShare !== undefined) {\n\t\t\t\tthis.share = !!this.defaultShare\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.share = false\n\t\t\tif (!this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(\n\t\t\t\t\tprefixUrl(`${this.apiBase}/schemas/${this.schema}`),\n\t\t\t\t\t{ headers: buildHeaders() },\n\t\t\t\t)\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tconst data = await response.json().catch(() => null)\n\t\t\t\tif (data?.configuration?.defaultAutoShare === true) {\n\t\t\t\t\tthis.share = true\n\t\t\t\t}\n\t\t\t} catch (err) {\n\t\t\t\t// Non-fatal — keep the safe default, but surface the\n\t\t\t\t// failure so a missing toggle default isn't silent.\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('CnFilesTab: Failed to fetch schema default for share toggle', err)\n\t\t\t}\n\t\t},\n\n\t\ttriggerFileInput() {\n\t\t\tthis.fileInputEl?.click()\n\t\t},\n\n\t\tonDragOver() {\n\t\t\tthis.isDragOver = true\n\t\t},\n\n\t\tonDragLeave() {\n\t\t\tthis.isDragOver = false\n\t\t},\n\n\t\tonDrop(event) {\n\t\t\tthis.isDragOver = false\n\t\t\tconst droppedFiles = event.dataTransfer?.files\n\t\t\tif (droppedFiles?.length) {\n\t\t\t\tthis.uploadFiles(droppedFiles)\n\t\t\t}\n\t\t},\n\n\t\tasync onFileUpload(event) {\n\t\t\tconst inputFiles = event.target.files\n\t\t\tif (!inputFiles?.length) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tawait this.uploadFiles(inputFiles)\n\t\t\tif (this.fileInputEl) {\n\t\t\t\tthis.fileInputEl.value = ''\n\t\t\t}\n\t\t},\n\n\t\tasync uploadFiles(fileList) {\n\t\t\tif (!fileList?.length || !this.register || !this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.uploadError = ''\n\t\t\tconst formData = new FormData()\n\t\t\tfor (const file of fileList) {\n\t\t\t\tformData.append('files[]', file)\n\t\t\t}\n\t\t\t// Only forward the share flag when the toggle is actually visible.\n\t\t\t// Hiding the toggle (showShareToggle=false) means \"don't auto-publish\".\n\t\t\tif (this.showShareToggle) {\n\t\t\t\tformData.append('share', String(this.share))\n\t\t\t}\n\n\t\t\tthis.loading = true\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(\n\t\t\t\t\tprefixUrl(`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/filesMultipart`),\n\t\t\t\t\t{\n\t\t\t\t\t\tmethod: 'POST',\n\t\t\t\t\t\theaders: { requesttoken: OC?.requestToken || '', 'OCS-APIREQUEST': 'true' },\n\t\t\t\t\t\tbody: formData,\n\t\t\t\t\t},\n\t\t\t\t)\n\t\t\t\tif (!response.ok) {\n\t\t\t\t\tconst data = await response.json().catch(() => ({}))\n\t\t\t\t\tthis.uploadError = data.error || `Upload failed (${response.status})`\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tawait this.fetchFiles()\n\t\t\t} catch (err) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('CnFilesTab: Failed to upload file', err)\n\t\t\t\tthis.uploadError = 'Upload failed: could not connect to server'\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Whether the Files app's details sidebar is on this page.\n\t\t *\n\t\t * It is when the host page dispatched Nextcloud's `LoadSidebar` event\n\t\t * server-side; then `OCA.Files.Sidebar.open(path)` shows the same\n\t\t * sharing, versions, comments and activity tabs the Files app shows.\n\t\t * Absent, the row offers no details action rather than a dead one. A\n\t\t * method rather than a computed: the global is not reactive, so a\n\t\t * cached answer from before the sidebar script ran would stay wrong.\n\t\t *\n\t\t * @return {boolean} true when the sidebar can be opened.\n\t\t */\n\t\tcanShowDetails() {\n\t\t\treturn typeof window !== 'undefined' && typeof window.OCA?.Files?.Sidebar?.open === 'function'\n\t\t},\n\n\t\t/**\n\t\t * The file's path relative to the user's files root, which is the path\n\t\t * the Viewer and the Files sidebar take. OpenRegister reports the node's\n\t\t * full path (`/{uid}/files/…`), so the first two segments come off.\n\t\t *\n\t\t * @param {string} path The node path as OpenRegister reports it.\n\t\t * @return {string} The user-relative path, `/` at least.\n\t\t */\n\t\tuserRelativePath(path) {\n\t\t\tconst stripped = String(path || '').replace(/^\\/[^/]+\\/files(?=\\/|$)/, '')\n\t\t\treturn stripped === '' ? '/' : stripped\n\t\t},\n\n\t\t/**\n\t\t * The theme's own icon for the file's mime type, the one the Files app\n\t\t * draws, or null on a page without Nextcloud's core script.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string|null} The icon url.\n\t\t */\n\t\tmimeIconFor(file) {\n\t\t\tconst getIconUrl = typeof window !== 'undefined' ? window.OC?.MimeType?.getIconUrl : null\n\t\t\tif (typeof getIconUrl !== 'function') {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst mime = file.type || file.mimetype || file.mimeType || ''\n\t\t\ttry {\n\t\t\t\treturn getIconUrl(mime) || null\n\t\t\t} catch {\n\t\t\t\treturn null\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * A small preview for an image, through Nextcloud's core preview\n\t\t * endpoint, or null for anything else or after the preview failed once.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string|null} The preview url.\n\t\t */\n\t\tpreviewUrlFor(file) {\n\t\t\tconst mime = file.type || file.mimetype || file.mimeType || ''\n\t\t\tif (!file.id || !/^image\\//i.test(mime) || /svg/i.test(mime) || this.previewFailed[file.id]) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn generateUrl('/core/preview?fileId={fileId}&x=64&y=64&a=1', { fileId: file.id })\n\t\t},\n\n\t\t/**\n\t\t * Remember that a preview did not load, so the row shows the mime icon.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {void}\n\t\t */\n\t\tonPreviewError(file) {\n\t\t\tthis.previewFailed = { ...this.previewFailed, [file.id]: true }\n\t\t},\n\n\t\t/**\n\t\t * The file's modification moment as a Date, or null when unknown.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {Date|null} The moment.\n\t\t */\n\t\tmodifiedAt(file) {\n\t\t\tconst raw = file.modified || file.updated || ''\n\t\t\tif (!raw) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tconst date = new Date(raw)\n\t\t\treturn Number.isNaN(date.getTime()) ? null : date\n\t\t},\n\n\t\t/**\n\t\t * The file's labels (Nextcloud tags), joined for the meta line.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string} The labels, or the empty string.\n\t\t */\n\t\tlabelsOf(file) {\n\t\t\treturn Array.isArray(file.labels) ? file.labels.filter(Boolean).join(', ') : ''\n\t\t},\n\n\t\t/**\n\t\t * The download url for a file, through OpenRegister's file endpoint,\n\t\t * which streams the node the object owns.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string} The url.\n\t\t */\n\t\tdownloadUrlFor(file) {\n\t\t\treturn `${this.apiBase}/files/${encodeURIComponent(String(file.id))}/download`\n\t\t},\n\n\t\t/**\n\t\t * Whether Nextcloud Office opens this file for this person.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {boolean} true when the Office action applies.\n\t\t */\n\t\tofficeOpens(file) {\n\t\t\tconst mime = file.type || file.mimetype || file.mimeType || ''\n\t\t\treturn Boolean(file.id) && mime !== '' && this.officeMimetypes.includes(mime)\n\t\t},\n\n\t\t/**\n\t\t * OpenRegister's Office page for a file of this object, which checks the\n\t\t * object rule and opens the document editable or read-only.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string} The url.\n\t\t */\n\t\tofficeUrlFor(file) {\n\t\t\tconst appBase = /\\/api\\/?$/.test(this.apiBase) ? this.apiBase.replace(/\\/api\\/?$/, '') : '/apps/openregister'\n\t\t\tconst segments = [this.register, this.schema, this.objectId, String(file.id)].map((part) => encodeURIComponent(String(part)))\n\t\t\treturn prefixUrl(`${appBase}/office/${segments.join('/')}`)\n\t\t},\n\n\t\t/**\n\t\t * The Files app's permalink for a file: opens the Files app at the\n\t\t * file's folder with the file selected.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {string} The url.\n\t\t */\n\t\tshowInFilesUrl(file) {\n\t\t\treturn generateUrl('/f/{fileid}', { fileid: file.id })\n\t\t},\n\n\t\t/**\n\t\t * Open the Files sidebar on this file: details, sharing, versions,\n\t\t * comments and activity, exactly as the Files app offers them.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {void}\n\t\t */\n\t\tshowDetails(file) {\n\t\t\tif (!this.canShowDetails() || !file.path) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\twindow.OCA.Files.Sidebar.open(this.userRelativePath(file.path))\n\t\t},\n\n\t\t/**\n\t\t * Put the file's permalink on the clipboard and say so.\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t * @return {Promise<void>}\n\t\t */\n\t\tasync copyLink(file) {\n\t\t\tconst href = new URL(this.showInFilesUrl(file), window.location.origin).href\n\t\t\ttry {\n\t\t\t\tawait navigator.clipboard.writeText(href)\n\t\t\t\tconst { showSuccess } = await import('@nextcloud/dialogs')\n\t\t\t\tshowSuccess(t('nextcloud-vue', 'Link copied'))\n\t\t\t} catch {\n\t\t\t\tconst { showError } = await import('@nextcloud/dialogs')\n\t\t\t\tshowError(t('nextcloud-vue', 'The link could not be copied'))\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Show a file in the in-page preview.\n\t\t *\n\t\t * @param {object} file The file to preview.\n\t\t */\n\t\tshowPreview(file) {\n\t\t\tthis.previewFile = file\n\t\t},\n\n\t\t/**\n\t\t * Open a file through the shared opener (Viewer, preview, browser, Files).\n\t\t *\n\t\t * @param {object} file The file row.\n\t\t */\n\t\topenFile(file) {\n\t\t\tuseFileOpener({\n\t\t\t\tonPreview: this.showPreview,\n\t\t\t\tuserRelativePath: this.userRelativePath,\n\t\t\t\tanyAccessUrl: true,\n\t\t\t\tfilesAppUrl: (f) => {\n\t\t\t\t\tconst dirPath = f.path ? f.path.substring(0, f.path.lastIndexOf('/')) : ''\n\t\t\t\t\tconst cleanPath = dirPath.replace(/^\\/admin\\/files\\//, '/')\n\t\t\t\t\treturn `/index.php/apps/files/files/${f.id}?dir=${encodeURIComponent(cleanPath)}&openfile=true`\n\t\t\t\t},\n\t\t\t}).open(file)\n\t\t},\n\n\t\tasync deleteFile(file) {\n\t\t\tif (!this.register || !this.schema) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tawait fetch(\n\t\t\t\t\tprefixUrl(`${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/files/${file.id}`),\n\t\t\t\t\t{ method: 'DELETE', headers: buildHeaders() },\n\t\t\t\t)\n\t\t\t\tthis.files = this.files.filter((f) => f.id !== file.id)\n\t\t\t} catch (err) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error('CnFilesTab: Failed to delete file', err)\n\t\t\t}\n\t\t},\n\n\t\tformatFileSize(bytes) {\n\t\t\tconst sizes = ['Bytes', 'KB', 'MB', 'GB']\n\t\t\tif (!bytes || bytes === 0) {\n\t\t\t\treturn 'n/a'\n\t\t\t}\n\t\t\tconst i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)))\n\t\t\tif (i === 0) {\n\t\t\t\treturn '< 1 KB'\n\t\t\t}\n\t\t\treturn (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sidebar-tab { padding: 12px; }\n\n.cn-sidebar-tab__upload-error {\n\tpadding: 8px 12px;\n\tmargin-bottom: 8px;\n\tborder-radius: var(--border-radius, 4px);\n\tbackground-color: var(--color-error-light, rgba(229, 57, 53, 0.1));\n\tcolor: var(--color-error, #e53935);\n\tfont-size: 13px;\n}\n\n.cn-sidebar-tab__dropzone {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tpadding: 20px 12px;\n\tmargin-bottom: 16px;\n\tborder: 2px dashed var(--color-border);\n\tborder-radius: var(--border-radius-large, 8px);\n\tcursor: pointer;\n\ttransition: border-color 0.15s ease, background-color 0.15s ease;\n}\n\n.cn-sidebar-tab__dropzone:hover {\n\tborder-color: var(--color-primary-element);\n\tbackground-color: var(--color-primary-element-light, rgba(0, 130, 201, 0.08));\n}\n\n.cn-sidebar-tab__dropzone--active {\n\tborder-color: var(--color-primary-element);\n\tbackground-color: var(--color-primary-element-light, rgba(0, 130, 201, 0.12));\n}\n\n.cn-sidebar-tab__share { margin-bottom: 12px; }\n\n.cn-sidebar-tab__dropzone-icon { color: var(--color-text-maxcontrast); }\n\n.cn-sidebar-tab__dropzone--active .cn-sidebar-tab__dropzone-icon,\n.cn-sidebar-tab__dropzone:hover .cn-sidebar-tab__dropzone-icon { color: var(--color-primary-element); }\n\n.cn-sidebar-tab__dropzone-text { font-size: 13px; color: var(--color-text-maxcontrast); }\n\n.cn-sidebar-tab__file-input { display: none; }\n\n.cn-sidebar-tab__empty {\n\ttext-align: center;\n\tpadding: 24px 12px;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n}\n\n.cn-sidebar-tab__list { display: flex; flex-direction: column; gap: 2px; }\n\n.cn-sidebar-tab__mime,\n.cn-sidebar-tab__thumb {\n\twidth: 32px;\n\theight: 32px;\n\tdisplay: block;\n}\n\n.cn-sidebar-tab__thumb {\n\tobject-fit: cover;\n\tborder-radius: var(--border-radius, 4px);\n}\n\n.cn-sidebar-tab__meta { color: var(--color-text-maxcontrast); }\n\n.cn-sidebar-tab__load-more { margin-top: 8px; }\n</style>\n"],"names":["_openBlock","_createElementBlock","_createBlock","_Fragment","_toDisplayString","_createElementVNode","_normalizeClass","_createVNode","_renderList","_createTextVNode"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import script from './CnSectionsWidget.vue2.js';
|
|
|
2
2
|
import { render } from './CnSectionsWidget.vue3.js';
|
|
3
3
|
|
|
4
4
|
script.render = render;
|
|
5
|
-
script.__scopeId = "data-v-
|
|
5
|
+
script.__scopeId = "data-v-28baf01e";
|
|
6
6
|
const __sfc_main = script;
|
|
7
7
|
|
|
8
8
|
export { __sfc_main as default };
|
|
@@ -58,7 +58,11 @@ var script = {
|
|
|
58
58
|
* - `dividers` — draw a rule between sections (default true). `false` stacks them 8px apart with no rule,
|
|
59
59
|
* for a row of strips that each say one thing (a record's banners).
|
|
60
60
|
*
|
|
61
|
-
*
|
|
61
|
+
* - `columns` — lay the sections out side by side in this many columns (2 to 4), one column on a narrow
|
|
62
|
+
* screen. Ignored when a section asks for the side column.
|
|
63
|
+
* - `footnote` — a line of muted text under the sections.
|
|
64
|
+
*
|
|
65
|
+
* @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean, dividers?: boolean, columns?: number, footnote?: string}}
|
|
62
66
|
*/
|
|
63
67
|
content: {
|
|
64
68
|
type: Object,
|
|
@@ -220,6 +224,32 @@ var script = {
|
|
|
220
224
|
return this.sections.some((section) => section.column === 'side')
|
|
221
225
|
},
|
|
222
226
|
|
|
227
|
+
/**
|
|
228
|
+
* How many columns the sections are laid out in side by side: the
|
|
229
|
+
* configured `columns`, capped at four; 1 (stacked) without it or
|
|
230
|
+
* when a section asks for the side column.
|
|
231
|
+
*
|
|
232
|
+
* @return {number}
|
|
233
|
+
* @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-sections-widget-can-lay-its-cards-out-in-columns
|
|
234
|
+
*/
|
|
235
|
+
gridColumns() {
|
|
236
|
+
const n = Math.floor(Number(this.content?.columns));
|
|
237
|
+
if (!Number.isFinite(n) || n < 2 || this.twoColumn) {
|
|
238
|
+
return 1
|
|
239
|
+
}
|
|
240
|
+
return Math.min(n, 4)
|
|
241
|
+
},
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* The translated footnote under the sections, or ''.
|
|
245
|
+
*
|
|
246
|
+
* @return {string}
|
|
247
|
+
* @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-sections-widget-can-close-with-a-footnote
|
|
248
|
+
*/
|
|
249
|
+
footnote() {
|
|
250
|
+
return this.tr(this.content?.footnote || '')
|
|
251
|
+
},
|
|
252
|
+
|
|
223
253
|
/**
|
|
224
254
|
* The columns to draw, each with its sections in order.
|
|
225
255
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CnSectionsWidget.vue2.js","sources":["../../../../src/components/CnSectionsWidget/CnSectionsWidget.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div\n\t\tclass=\"cn-sections-widget\"\n\t\t:class=\"{\n\t\t\t'cn-sections-widget--cards': cards,\n\t\t\t'cn-sections-widget--two-column': twoColumn,\n\t\t\t'cn-sections-widget--plain': plain,\n\t\t}\"\n\t\tdata-testid=\"cn-sections-widget\">\n\t\t<div\n\t\t\tv-for=\"column in columns\"\n\t\t\t:key=\"column.id\"\n\t\t\tclass=\"cn-sections-widget__column\"\n\t\t\t:class=\"`cn-sections-widget__column--${column.id}`\">\n\t\t\t<section\n\t\t\t\tv-for=\"section in column.sections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-sections-widget__section\"\n\t\t\t\t:class=\"{ 'cn-sections-widget__section--empty': !isShown(section.key) }\"\n\t\t\t\t:aria-labelledby=\"section.title && isShown(section.key) ? headingId(section.key) : undefined\"\n\t\t\t\t:data-testid=\"`cn-section-${section.key}`\">\n\t\t\t\t<!-- The heading waits for content: a widget type that does not\n\t\t\t\t resolve renders nothing, and a heading over nothing is a\n\t\t\t\t label on a void. -->\n\t\t\t\t<h3\n\t\t\t\t\tv-if=\"section.title && isShown(section.key)\"\n\t\t\t\t\t:id=\"headingId(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__heading\">\n\t\t\t\t\t{{ section.title }}\n\t\t\t\t</h3>\n\t\t\t\t<p\n\t\t\t\t\tv-if=\"section.description && isShown(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__description\">\n\t\t\t\t\t{{ section.description }}\n\t\t\t\t</p>\n\t\t\t\t<!-- The host always mounts, also while the section reads as\n\t\t\t\t empty: a widget that has not mounted cannot fetch, so it\n\t\t\t\t could never gain the content that would show it. -->\n\t\t\t\t<div :ref=\"(el) => setHostRef(section.key, el)\" class=\"cn-sections-widget__body\">\n\t\t\t\t\t<CnDetailWidgetHost\n\t\t\t\t\t\t:widget=\"section.widget\"\n\t\t\t\t\t\tchrome=\"bare\"\n\t\t\t\t\t\t:objectId=\"objectId\"\n\t\t\t\t\t\t:object=\"objectData\"\n\t\t\t\t\t\t:objectType=\"objectType\"\n\t\t\t\t\t\t:schemaObject=\"schemaObject\"\n\t\t\t\t\t\t:register=\"register\"\n\t\t\t\t\t\t:schema=\"schema\"\n\t\t\t\t\t\t:store=\"store\"\n\t\t\t\t\t\t:surface=\"surface\"\n\t\t\t\t\t\t:integrationContext=\"integrationContext\"\n\t\t\t\t\t\t:cnRegistry=\"cnRegistry\"\n\t\t\t\t\t\t:availableWidgets=\"availableWidgets\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'\n\n/** Counter for unique heading ids across instances. */\nlet instanceCounter = 0\n\n/**\n * CnSectionsWidget — the `sections` widget: several widgets in one place,\n * each under its own heading.\n *\n * A tab strip binds one widget per tab, and a tab often holds more than one\n * thing: the documents list and the case folder (DqZaak), a portal's details\n * form, house style and sign-in (PtPortalInstellingen). This widget stacks\n * them as sections under headings with a rule between them (the default), or\n * as one card per section (`cards: true`), optionally in a main and a side\n * column (`column: \"side\"` on a section). A single column of separate titled\n * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is\n * for headed sections, and for the two-column card grid a settings tab draws.\n *\n * ```json\n * {\n * \"type\": \"sections\",\n * \"content\": {\n * \"sections\": [\n * { \"title\": \"Documenten\", \"widgetId\": \"case-documents\" },\n * { \"title\": \"Zaakmap\", \"widget\": { \"type\": \"files\" } }\n * ]\n * }\n * }\n * ```\n *\n * A section names its widget inline (`widget`) or by id (`widgetId`, a\n * sibling definition on the same surface). Children render through\n * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child\n * behaves here as it does in a tab. A section whose widget draws nothing\n * shows no heading and takes no space (`hideEmpty`, default true). Stacked\n * children share one cell, so an object list in a section renders every\n * fetched row (`content.fit: false`) unless its definition says otherwise.\n *\n * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md\n */\nexport default {\n\tname: 'CnSectionsWidget',\n\n\tcomponents: { CnDetailWidgetHost },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.\n\t\t * `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.\n\t\t * - `cards` — draw each section as its own card (default false: headings and a rule between sections).\n\t\t * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).\n\t\t * - `dividers` — draw a rule between sections (default true). `false` stacks them 8px apart with no rule,\n\t\t * for a row of strips that each say one thing (a record's banners).\n\t\t *\n\t\t * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean, dividers?: boolean}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** Sibling widget definitions on the surface, for `widgetId` sections. */\n\t\tavailableWidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The bound record's id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The loaded record, or null while it is still being fetched. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The resolved object-type slug. */\n\t\tobjectType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The resolved JSON Schema object, needed by a `data` child. */\n\t\tschemaObject: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The effective object store. */\n\t\tstore: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Rendering surface forwarded to the children. */\n\t\tsurface: {\n\t\t\ttype: String,\n\t\t\tdefault: 'detail-page',\n\t\t},\n\n\t\t/** Object context forwarded to integration children. */\n\t\tintegrationContext: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The consumer's component registry, for custom child widget types. */\n\t\tcnRegistry: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\tdata() {\n\t\tinstanceCounter += 1\n\t\treturn {\n\t\t\tuid: instanceCounter,\n\t\t\t/**\n\t\t\t * Section key to \"has this section rendered anything\".\n\t\t\t *\n\t\t\t * @type {Record<string, boolean>}\n\t\t\t */\n\t\t\tfilled: {},\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Whether each section is its own card.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcards() {\n\t\t\treturn this.content?.cards === true\n\t\t},\n\n\t\t/**\n\t\t * Whether the sections stack with no rule between them.\n\t\t *\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/dq-abstract-record-widgets/specs/record-widgets/spec.md#requirement-sections-can-stack-without-dividers\n\t\t */\n\t\tplain() {\n\t\t\treturn !this.cards && this.content?.dividers === false\n\t\t},\n\n\t\t/**\n\t\t * Whether an empty section hides.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thideEmpty() {\n\t\t\treturn this.content?.hideEmpty !== false\n\t\t},\n\n\t\t/**\n\t\t * The sections to render: a stable key, a translated title, the column\n\t\t * and the widget definition. A section whose widget cannot be found is\n\t\t * dropped (with a development warning for an unknown id).\n\t\t *\n\t\t * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings\n\t\t */\n\t\tsections() {\n\t\t\tconst raw = Array.isArray(this.content?.sections) ? this.content.sections : []\n\t\t\tconst out = []\n\t\t\traw.forEach((entry, index) => {\n\t\t\t\tif (!entry || typeof entry !== 'object') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null\n\t\t\t\tif (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {\n\t\t\t\t\twidget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null\n\t\t\t\t\tif (!widget) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(`[CnSectionsWidget] section widgetId \"${entry.widgetId}\" names no widget on this surface; section skipped.`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (!widget || !widget.type) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tout.push({\n\t\t\t\t\tkey: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),\n\t\t\t\t\ttitle: this.tr(entry.title || entry.label || ''),\n\t\t\t\t\tdescription: this.tr(entry.description || ''),\n\t\t\t\t\tcolumn: entry.column === 'side' ? 'side' : 'main',\n\t\t\t\t\twidget: this.shared(widget),\n\t\t\t\t})\n\t\t\t})\n\t\t\treturn out\n\t\t},\n\n\t\t/**\n\t\t * Whether any section sits in the side column.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\ttwoColumn() {\n\t\t\treturn this.sections.some((section) => section.column === 'side')\n\t\t},\n\n\t\t/**\n\t\t * The columns to draw, each with its sections in order.\n\t\t *\n\t\t * @return {Array<{id: string, sections: Array<object>}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-can-draw-cards-in-a-main-and-a-side-column\n\t\t */\n\t\tcolumns() {\n\t\t\tif (!this.twoColumn) {\n\t\t\t\treturn [{ id: 'main', sections: this.sections }]\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },\n\t\t\t\t{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },\n\t\t\t]\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.stopObserving()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate through the host app.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string}\n\t\t */\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/**\n\t\t * The heading id of a section.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {string}\n\t\t */\n\t\theadingId(key) {\n\t\t\treturn `cn-sections-${this.uid}-${key}`.replace(/[^\\w-]/g, '-')\n\t\t},\n\n\t\t/**\n\t\t * A child definition with the cell budget off: stacked children share\n\t\t * one cell, so an object list must not size itself to that cell.\n\t\t *\n\t\t * @param {object} widget The definition.\n\t\t * @return {object}\n\t\t */\n\t\tshared(widget) {\n\t\t\tconst content = widget.content || {}\n\t\t\tif (Object.hasOwn(content, 'fit')) {\n\t\t\t\treturn widget\n\t\t\t}\n\t\t\treturn { ...widget, content: { ...content, fit: false } }\n\t\t},\n\n\t\t/**\n\t\t * Whether a section shows its heading and takes space.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent\n\t\t */\n\t\tisShown(key) {\n\t\t\treturn !this.hideEmpty || this.filled[key] === true\n\t\t},\n\n\t\t/**\n\t\t * Watch one section's host for content, so its heading appears when\n\t\t * the widget renders and stays away when it never does. A\n\t\t * MutationObserver, because most widgets mount empty and fill after a\n\t\t * fetch.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @param {HTMLElement|null} el The host wrapper, or null on teardown.\n\t\t * @return {void}\n\t\t */\n\t\tsetHostRef(key, el) {\n\t\t\tthis.observers = this.observers || {}\n\t\t\tif (this.observers[key]) {\n\t\t\t\tthis.observers[key].disconnect()\n\t\t\t\tdelete this.observers[key]\n\t\t\t}\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Assign only on a change: `filled` drives the template, so an\n\t\t\t// unconditional write re-renders, mutates, and fires again.\n\t\t\tconst measure = () => {\n\t\t\t\tconst next = this.hasContent(el)\n\t\t\t\tif (this.filled[key] === next) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.filled = { ...this.filled, [key]: next }\n\t\t\t}\n\t\t\tif (typeof MutationObserver === 'function') {\n\t\t\t\tconst observer = new MutationObserver(measure)\n\t\t\t\tobserver.observe(el, { childList: true, subtree: true, characterData: true })\n\t\t\t\tthis.observers[key] = observer\n\t\t\t}\n\t\t\t// Not synchronously: a ref callback runs during the patch.\n\t\t\tthis.$nextTick(measure)\n\t\t},\n\n\t\t/**\n\t\t * Whether a host rendered anything a reader would see: text (an empty\n\t\t * state counts), or a graphical or interactive element.\n\t\t *\n\t\t * @param {HTMLElement} el The host wrapper.\n\t\t * @return {boolean}\n\t\t */\n\t\thasContent(el) {\n\t\t\tif (!el) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (el.textContent && el.textContent.trim().length > 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null\n\t\t},\n\n\t\t/**\n\t\t * Drop every observer.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tstopObserving() {\n\t\t\tfor (const observer of Object.values(this.observers || {})) {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t\tthis.observers = {}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sections-widget {\n\tmin-width: 0;\n}\n\n.cn-sections-widget__column {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(var(--default-grid-baseline, 4px) * 4);\n\tmin-width: 0;\n}\n\n/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */\n.cn-sections-widget--two-column {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(280px, 418px);\n\tgap: 20px;\n\talign-items: start;\n}\n\n@media (max-width: 1024px) {\n\t.cn-sections-widget--two-column {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n/* A host page may space every <section>; these sections are spaced by the column gap only. */\n.cn-sections-widget__section {\n\tmargin: 0;\n\tmin-width: 0;\n}\n\n/* A rule above a section that follows a shown one. */\n.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: calc(var(--default-grid-baseline, 4px) * 4);\n\tborder-top: 1px solid var(--color-border);\n}\n\n/* No rule: strips that each say one thing, 8px apart. */\n.cn-sections-widget--plain .cn-sections-widget__column {\n\tgap: calc(var(--default-grid-baseline, 4px) * 2);\n}\n\n.cn-sections-widget.cn-sections-widget--plain .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: 0;\n\tborder-top: 0;\n}\n\n/*\n * An empty section keeps its host mounted (display: none still mounts it, so\n * the widget fetches and can fill later) but takes no space, gap or rule.\n */\n.cn-sections-widget__section--empty {\n\tdisplay: none;\n}\n\n.cn-sections-widget__heading {\n\tmargin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-sections-widget__description {\n\tmargin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n/* One card per section. */\n.cn-sections-widget--cards .cn-sections-widget__column {\n\tgap: 20px;\n}\n\n.cn-sections-widget--cards .cn-sections-widget__section {\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));\n\tpadding: var(--cn-board-card-padding, 16px 20px);\n}\n\n.cn-sections-widget--cards .cn-sections-widget__heading {\n\tfont-size: 18px;\n\tmargin-bottom: 12px;\n}\n</style>\n"],"names":["CnDetailWidgetHost"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CnSectionsWidget.vue2.js","sources":["../../../../src/components/CnSectionsWidget/CnSectionsWidget.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div\n\t\tclass=\"cn-sections-widget\"\n\t\t:class=\"{\n\t\t\t'cn-sections-widget--cards': cards,\n\t\t\t'cn-sections-widget--two-column': twoColumn,\n\t\t\t'cn-sections-widget--grid': gridColumns > 1,\n\t\t\t'cn-sections-widget--plain': plain,\n\t\t}\"\n\t\tdata-testid=\"cn-sections-widget\">\n\t\t<div\n\t\t\tv-for=\"column in columns\"\n\t\t\t:key=\"column.id\"\n\t\t\tclass=\"cn-sections-widget__column\"\n\t\t\t:class=\"`cn-sections-widget__column--${column.id}`\"\n\t\t\t:style=\"gridColumns > 1 ? { '--cn-sections-columns': gridColumns } : null\">\n\t\t\t<section\n\t\t\t\tv-for=\"section in column.sections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-sections-widget__section\"\n\t\t\t\t:class=\"{ 'cn-sections-widget__section--empty': !isShown(section.key) }\"\n\t\t\t\t:aria-labelledby=\"section.title && isShown(section.key) ? headingId(section.key) : undefined\"\n\t\t\t\t:data-testid=\"`cn-section-${section.key}`\">\n\t\t\t\t<!-- The heading waits for content: a widget type that does not\n\t\t\t\t resolve renders nothing, and a heading over nothing is a\n\t\t\t\t label on a void. -->\n\t\t\t\t<h3\n\t\t\t\t\tv-if=\"section.title && isShown(section.key)\"\n\t\t\t\t\t:id=\"headingId(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__heading\">\n\t\t\t\t\t{{ section.title }}\n\t\t\t\t</h3>\n\t\t\t\t<p\n\t\t\t\t\tv-if=\"section.description && isShown(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__description\">\n\t\t\t\t\t{{ section.description }}\n\t\t\t\t</p>\n\t\t\t\t<!-- The host always mounts, also while the section reads as\n\t\t\t\t empty: a widget that has not mounted cannot fetch, so it\n\t\t\t\t could never gain the content that would show it. -->\n\t\t\t\t<div :ref=\"(el) => setHostRef(section.key, el)\" class=\"cn-sections-widget__body\">\n\t\t\t\t\t<CnDetailWidgetHost\n\t\t\t\t\t\t:widget=\"section.widget\"\n\t\t\t\t\t\tchrome=\"bare\"\n\t\t\t\t\t\t:objectId=\"objectId\"\n\t\t\t\t\t\t:object=\"objectData\"\n\t\t\t\t\t\t:objectType=\"objectType\"\n\t\t\t\t\t\t:schemaObject=\"schemaObject\"\n\t\t\t\t\t\t:register=\"register\"\n\t\t\t\t\t\t:schema=\"schema\"\n\t\t\t\t\t\t:store=\"store\"\n\t\t\t\t\t\t:surface=\"surface\"\n\t\t\t\t\t\t:integrationContext=\"integrationContext\"\n\t\t\t\t\t\t:cnRegistry=\"cnRegistry\"\n\t\t\t\t\t\t:availableWidgets=\"availableWidgets\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t\t<p v-if=\"footnote\" class=\"cn-sections-widget__footnote\" data-testid=\"cn-sections-widget-footnote\">\n\t\t\t{{ footnote }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'\n\n/** Counter for unique heading ids across instances. */\nlet instanceCounter = 0\n\n/**\n * CnSectionsWidget — the `sections` widget: several widgets in one place,\n * each under its own heading.\n *\n * A tab strip binds one widget per tab, and a tab often holds more than one\n * thing: the documents list and the case folder (DqZaak), a portal's details\n * form, house style and sign-in (PtPortalInstellingen). This widget stacks\n * them as sections under headings with a rule between them (the default), or\n * as one card per section (`cards: true`), optionally in a main and a side\n * column (`column: \"side\"` on a section). A single column of separate titled\n * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is\n * for headed sections, and for the two-column card grid a settings tab draws.\n *\n * ```json\n * {\n * \"type\": \"sections\",\n * \"content\": {\n * \"sections\": [\n * { \"title\": \"Documenten\", \"widgetId\": \"case-documents\" },\n * { \"title\": \"Zaakmap\", \"widget\": { \"type\": \"files\" } }\n * ]\n * }\n * }\n * ```\n *\n * A section names its widget inline (`widget`) or by id (`widgetId`, a\n * sibling definition on the same surface). Children render through\n * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child\n * behaves here as it does in a tab. A section whose widget draws nothing\n * shows no heading and takes no space (`hideEmpty`, default true). Stacked\n * children share one cell, so an object list in a section renders every\n * fetched row (`content.fit: false`) unless its definition says otherwise.\n *\n * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md\n */\nexport default {\n\tname: 'CnSectionsWidget',\n\n\tcomponents: { CnDetailWidgetHost },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.\n\t\t * `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.\n\t\t * - `cards` — draw each section as its own card (default false: headings and a rule between sections).\n\t\t * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).\n\t\t * - `dividers` — draw a rule between sections (default true). `false` stacks them 8px apart with no rule,\n\t\t * for a row of strips that each say one thing (a record's banners).\n\t\t *\n\t\t * - `columns` — lay the sections out side by side in this many columns (2 to 4), one column on a narrow\n\t\t * screen. Ignored when a section asks for the side column.\n\t\t * - `footnote` — a line of muted text under the sections.\n\t\t *\n\t\t * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean, dividers?: boolean, columns?: number, footnote?: string}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** Sibling widget definitions on the surface, for `widgetId` sections. */\n\t\tavailableWidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The bound record's id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The loaded record, or null while it is still being fetched. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The resolved object-type slug. */\n\t\tobjectType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The resolved JSON Schema object, needed by a `data` child. */\n\t\tschemaObject: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The effective object store. */\n\t\tstore: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Rendering surface forwarded to the children. */\n\t\tsurface: {\n\t\t\ttype: String,\n\t\t\tdefault: 'detail-page',\n\t\t},\n\n\t\t/** Object context forwarded to integration children. */\n\t\tintegrationContext: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The consumer's component registry, for custom child widget types. */\n\t\tcnRegistry: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\tdata() {\n\t\tinstanceCounter += 1\n\t\treturn {\n\t\t\tuid: instanceCounter,\n\t\t\t/**\n\t\t\t * Section key to \"has this section rendered anything\".\n\t\t\t *\n\t\t\t * @type {Record<string, boolean>}\n\t\t\t */\n\t\t\tfilled: {},\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Whether each section is its own card.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcards() {\n\t\t\treturn this.content?.cards === true\n\t\t},\n\n\t\t/**\n\t\t * Whether the sections stack with no rule between them.\n\t\t *\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/dq-abstract-record-widgets/specs/record-widgets/spec.md#requirement-sections-can-stack-without-dividers\n\t\t */\n\t\tplain() {\n\t\t\treturn !this.cards && this.content?.dividers === false\n\t\t},\n\n\t\t/**\n\t\t * Whether an empty section hides.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thideEmpty() {\n\t\t\treturn this.content?.hideEmpty !== false\n\t\t},\n\n\t\t/**\n\t\t * The sections to render: a stable key, a translated title, the column\n\t\t * and the widget definition. A section whose widget cannot be found is\n\t\t * dropped (with a development warning for an unknown id).\n\t\t *\n\t\t * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings\n\t\t */\n\t\tsections() {\n\t\t\tconst raw = Array.isArray(this.content?.sections) ? this.content.sections : []\n\t\t\tconst out = []\n\t\t\traw.forEach((entry, index) => {\n\t\t\t\tif (!entry || typeof entry !== 'object') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null\n\t\t\t\tif (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {\n\t\t\t\t\twidget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null\n\t\t\t\t\tif (!widget) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(`[CnSectionsWidget] section widgetId \"${entry.widgetId}\" names no widget on this surface; section skipped.`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (!widget || !widget.type) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tout.push({\n\t\t\t\t\tkey: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),\n\t\t\t\t\ttitle: this.tr(entry.title || entry.label || ''),\n\t\t\t\t\tdescription: this.tr(entry.description || ''),\n\t\t\t\t\tcolumn: entry.column === 'side' ? 'side' : 'main',\n\t\t\t\t\twidget: this.shared(widget),\n\t\t\t\t})\n\t\t\t})\n\t\t\treturn out\n\t\t},\n\n\t\t/**\n\t\t * Whether any section sits in the side column.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\ttwoColumn() {\n\t\t\treturn this.sections.some((section) => section.column === 'side')\n\t\t},\n\n\t\t/**\n\t\t * How many columns the sections are laid out in side by side: the\n\t\t * configured `columns`, capped at four; 1 (stacked) without it or\n\t\t * when a section asks for the side column.\n\t\t *\n\t\t * @return {number}\n\t\t * @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-sections-widget-can-lay-its-cards-out-in-columns\n\t\t */\n\t\tgridColumns() {\n\t\t\tconst n = Math.floor(Number(this.content?.columns))\n\t\t\tif (!Number.isFinite(n) || n < 2 || this.twoColumn) {\n\t\t\t\treturn 1\n\t\t\t}\n\t\t\treturn Math.min(n, 4)\n\t\t},\n\n\t\t/**\n\t\t * The translated footnote under the sections, or ''.\n\t\t *\n\t\t * @return {string}\n\t\t * @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-sections-widget-can-close-with-a-footnote\n\t\t */\n\t\tfootnote() {\n\t\t\treturn this.tr(this.content?.footnote || '')\n\t\t},\n\n\t\t/**\n\t\t * The columns to draw, each with its sections in order.\n\t\t *\n\t\t * @return {Array<{id: string, sections: Array<object>}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-can-draw-cards-in-a-main-and-a-side-column\n\t\t */\n\t\tcolumns() {\n\t\t\tif (!this.twoColumn) {\n\t\t\t\treturn [{ id: 'main', sections: this.sections }]\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },\n\t\t\t\t{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },\n\t\t\t]\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.stopObserving()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate through the host app.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string}\n\t\t */\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/**\n\t\t * The heading id of a section.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {string}\n\t\t */\n\t\theadingId(key) {\n\t\t\treturn `cn-sections-${this.uid}-${key}`.replace(/[^\\w-]/g, '-')\n\t\t},\n\n\t\t/**\n\t\t * A child definition with the cell budget off: stacked children share\n\t\t * one cell, so an object list must not size itself to that cell.\n\t\t *\n\t\t * @param {object} widget The definition.\n\t\t * @return {object}\n\t\t */\n\t\tshared(widget) {\n\t\t\tconst content = widget.content || {}\n\t\t\tif (Object.hasOwn(content, 'fit')) {\n\t\t\t\treturn widget\n\t\t\t}\n\t\t\treturn { ...widget, content: { ...content, fit: false } }\n\t\t},\n\n\t\t/**\n\t\t * Whether a section shows its heading and takes space.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent\n\t\t */\n\t\tisShown(key) {\n\t\t\treturn !this.hideEmpty || this.filled[key] === true\n\t\t},\n\n\t\t/**\n\t\t * Watch one section's host for content, so its heading appears when\n\t\t * the widget renders and stays away when it never does. A\n\t\t * MutationObserver, because most widgets mount empty and fill after a\n\t\t * fetch.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @param {HTMLElement|null} el The host wrapper, or null on teardown.\n\t\t * @return {void}\n\t\t */\n\t\tsetHostRef(key, el) {\n\t\t\tthis.observers = this.observers || {}\n\t\t\tif (this.observers[key]) {\n\t\t\t\tthis.observers[key].disconnect()\n\t\t\t\tdelete this.observers[key]\n\t\t\t}\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Assign only on a change: `filled` drives the template, so an\n\t\t\t// unconditional write re-renders, mutates, and fires again.\n\t\t\tconst measure = () => {\n\t\t\t\tconst next = this.hasContent(el)\n\t\t\t\tif (this.filled[key] === next) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.filled = { ...this.filled, [key]: next }\n\t\t\t}\n\t\t\tif (typeof MutationObserver === 'function') {\n\t\t\t\tconst observer = new MutationObserver(measure)\n\t\t\t\tobserver.observe(el, { childList: true, subtree: true, characterData: true })\n\t\t\t\tthis.observers[key] = observer\n\t\t\t}\n\t\t\t// Not synchronously: a ref callback runs during the patch.\n\t\t\tthis.$nextTick(measure)\n\t\t},\n\n\t\t/**\n\t\t * Whether a host rendered anything a reader would see: text (an empty\n\t\t * state counts), or a graphical or interactive element.\n\t\t *\n\t\t * @param {HTMLElement} el The host wrapper.\n\t\t * @return {boolean}\n\t\t */\n\t\thasContent(el) {\n\t\t\tif (!el) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (el.textContent && el.textContent.trim().length > 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null\n\t\t},\n\n\t\t/**\n\t\t * Drop every observer.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tstopObserving() {\n\t\t\tfor (const observer of Object.values(this.observers || {})) {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t\tthis.observers = {}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sections-widget {\n\tmin-width: 0;\n}\n\n.cn-sections-widget__column {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(var(--default-grid-baseline, 4px) * 4);\n\tmin-width: 0;\n}\n\n/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */\n.cn-sections-widget--two-column {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(280px, 418px);\n\tgap: 20px;\n\talign-items: start;\n}\n\n@media (max-width: 1024px) {\n\t.cn-sections-widget--two-column {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n/* Sections side by side (`columns`): at most that many to a row, each at\n least 240px wide, so a narrow cell wraps them onto more rows. */\n.cn-sections-widget.cn-sections-widget--grid .cn-sections-widget__column {\n\t--cn-sections-gap: 14px;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc((100% - (var(--cn-sections-columns, 2) - 1) * var(--cn-sections-gap)) / var(--cn-sections-columns, 2)))), 1fr));\n\tgap: var(--cn-sections-gap);\n\talign-items: start;\n}\n\n.cn-sections-widget__footnote {\n\tmargin: calc(var(--default-grid-baseline, 4px) * 3) 0 0;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n}\n\n/* A host page may space every <section>; these sections are spaced by the column gap only. */\n.cn-sections-widget__section {\n\tmargin: 0;\n\tmin-width: 0;\n}\n\n/* A rule above a section that follows a shown one. */\n.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: calc(var(--default-grid-baseline, 4px) * 4);\n\tborder-top: 1px solid var(--color-border);\n}\n\n/* No rule: strips that each say one thing, 8px apart. */\n.cn-sections-widget--plain .cn-sections-widget__column {\n\tgap: calc(var(--default-grid-baseline, 4px) * 2);\n}\n\n.cn-sections-widget.cn-sections-widget--plain .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: 0;\n\tborder-top: 0;\n}\n\n/*\n * An empty section keeps its host mounted (display: none still mounts it, so\n * the widget fetches and can fill later) but takes no space, gap or rule.\n */\n.cn-sections-widget__section--empty {\n\tdisplay: none;\n}\n\n.cn-sections-widget__heading {\n\tmargin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-sections-widget__description {\n\tmargin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n/* One card per section. */\n.cn-sections-widget--cards .cn-sections-widget__column {\n\tgap: 20px;\n}\n\n.cn-sections-widget--cards .cn-sections-widget__section {\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));\n\tpadding: var(--cn-board-card-padding, 16px 20px);\n}\n\n.cn-sections-widget--cards .cn-sections-widget__heading {\n\tfont-size: 18px;\n\tmargin-bottom: 12px;\n}\n</style>\n"],"names":["CnDetailWidgetHost"],"mappings":";;AAwEA;AACA,IAAI,kBAAkB,EAAA;;AAEtB;AACC;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;;;AAIA;;;;AAIA;AACA;;;AAGA;;AAEA;;AAEA;AACA;AACA;;AAED,aAAe;CACd,IAAI,EAAE,kBAAkB;;AAExB,CAAA,UAAU,EAAE,sBAAEA,YAAoB;;AAElC,CAAA,MAAM,EAAE;AACP,EAAA,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,KAAK,KAAK;EAC5C;;AAED,CAAA,KAAK,EAAE;AACN;;AAEC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;;AAGD,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,OAAO,EAAE,CAAC;GACnB;;AAED;AACA,EAAA,gBAAgB,EAAE;GACjB,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;;;AAGD,EAAA,QAAQ,EAAE;AACT,GAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;GACtB,OAAO,EAAE,EAAE;GACX;;;EAGD,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;EACA,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;;EAGD,YAAY,EAAE;GACb,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;AACA,EAAA,QAAQ,EAAE;AACT,GAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;GACtB,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,MAAM,EAAE;AACP,GAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;GACtB,OAAO,EAAE,EAAE;GACX;;;AAGD,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;AAED;AACA,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,aAAa;GACtB;;;AAGD,EAAA,kBAAkB,EAAE;GACnB,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;;;EAGD,UAAU,EAAE;GACX,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,OAAO,EAAE,CAAC;GACnB;EACD;;AAED,CAAA,IAAI,GAAG;AACN,EAAA,eAAc,IAAK,EAAA;AACnB,EAAA,OAAO;AACN,GAAA,GAAG,EAAE,eAAe;AACpB;AACC;AACA;;;AAGD,GAAA,MAAM,EAAE,EAAE;AACX,GAAA;EACA;;AAED,CAAA,QAAQ,EAAE;AACT;AACC;AACA;AACA;;AAED,EAAA,KAAK,GAAG;AACP,GAAA,OAAO,IAAI,CAAC,OAAO,EAAE,KAAI,KAAM,IAAG;GAClC;;AAED;AACC;AACA;AACA;;;AAGD,EAAA,KAAK,GAAG;GACP,OAAO,CAAC,IAAI,CAAC,KAAI,IAAK,IAAI,CAAC,OAAO,EAAE,QAAS,KAAI,KAAI;GACrD;;AAED;;AAEC;AACA;;EAED,SAAS,GAAG;AACX,GAAA,OAAO,IAAI,CAAC,OAAO,EAAE,SAAQ,KAAM,KAAI;GACvC;;AAED;;;;AAIC;AACA;AACA;;EAED,QAAQ,GAAG;AACV,GAAA,MAAM,GAAE,GAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAA,GAAI,IAAI,CAAC,OAAO,CAAC,QAAO,GAAI,GAAC;GAC7E,MAAM,GAAE,GAAI,GAAC;GACb,GAAG,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK;AAC7B,IAAA,IAAI,CAAC,KAAM,IAAG,OAAO,KAAM,KAAI,QAAQ,EAAE;KACxC,MAAK;AACN,KAAA;AACA,IAAA,IAAI,MAAO,GAAE,KAAK,CAAC,MAAO,IAAG,OAAO,KAAK,CAAC,WAAW,QAAO,GAAI,KAAK,CAAC,MAAK,GAAI,KAAG;AAClF,IAAA,IAAI,CAAC,MAAO,IAAG,OAAO,KAAK,CAAC,QAAO,KAAM,QAAS,IAAG,KAAK,CAAC,QAAO,KAAM,EAAE,EAAE;AAC3E,KAAA,MAAO,GAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAA,IAAK,CAAC,CAAC,EAAG,KAAI,KAAK,CAAC,QAAQ,CAAE,IAAG,KAAG;KAC/E,IAAI,CAAC,MAAM,EAAE;AACZ;MACA,OAAO,CAAC,IAAI,CAAC,CAAC,qCAAqC,EAAE,KAAK,CAAC,QAAQ,CAAC,mDAAmD,CAAC,EAAA;AACzH,MAAA;AACD,KAAA;IACA,IAAI,CAAC,MAAK,IAAK,CAAC,MAAM,CAAC,IAAI,EAAE;KAC5B,MAAK;AACN,KAAA;AACA,IAAA,GAAG,CAAC,IAAI,CAAC;AACR,KAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,GAAE,IAAK,MAAM,CAAC,EAAG,IAAG,KAAK,CAAC,QAAS,IAAG,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAClF,KAAA,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAM,IAAG,KAAK,CAAC,KAAI,IAAK,EAAE,CAAC;AAChD,KAAA,WAAW,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAU,IAAK,EAAE,CAAC;AAC7C,KAAA,MAAM,EAAE,KAAK,CAAC,WAAW,MAAO,GAAE,SAAS,MAAM;KACjD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;KAC3B,EAAA;IACD,EAAA;AACD,GAAA,OAAO,GAAE;GACT;;AAED;AACC;AACA;AACA;;EAED,SAAS,GAAG;GACX,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,MAAK,KAAM,MAAM,CAAA;GAChE;;AAED;;;AAGC;AACA;AACA;AACA;;EAED,WAAW,GAAG;GACb,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,EAAA;AAClD,GAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA,IAAK,IAAI,CAAA,IAAK,IAAI,CAAC,SAAS,EAAE;AACnD,IAAA,OAAO,CAAA;AACR,IAAA;AACA,GAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAA;GACpB;;AAED;AACC;AACA;AACA;AACA;;EAED,QAAQ,GAAG;AACV,GAAA,OAAO,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,EAAE,CAAA;GAC3C;;AAED;AACC;AACA;;AAEA;;AAED,EAAA,OAAO,GAAG;AACT,GAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACpB,IAAA,OAAO,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAA;AAChD,IAAA;AACA,GAAA,OAAO;AACN,IAAA,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,WAAW,MAAM,GAAG;AACtF,IAAA,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,WAAW,MAAM,GAAG;AACvF,IAAA;GACA;EACD;;AAED,CAAA,aAAa,GAAG;AACf,EAAA,IAAI,CAAC,aAAa,GAAC;EACnB;;AAED,CAAA,OAAO,EAAE;AACR;;AAEC;;AAEA;;AAED,EAAA,EAAE,CAAC,IAAI,EAAE;AACR,GAAA,IAAI,OAAO,IAAG,KAAM,QAAO,IAAK,SAAS,EAAE,EAAE;AAC5C,IAAA,OAAO,EAAC;AACT,IAAA;AACA,GAAA,OAAO,OAAO,IAAI,CAAC,WAAY,KAAI,UAAW,GAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAA,GAAI,IAAG;GAC5E;;AAED;;AAEC;AACA;AACA;;AAED,EAAA,SAAS,CAAC,GAAG,EAAE;GACd,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAA;GAC9D;;AAED;;;AAGC;AACA;AACA;;AAED,EAAA,MAAM,CAAC,MAAM,EAAE;AACd,GAAA,MAAM,OAAQ,GAAE,MAAM,CAAC,OAAM,IAAK,GAAC;AACnC,GAAA,IAAI,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;IAClC,OAAO,MAAK;AACb,IAAA;GACA,OAAO,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,KAAI,EAAI,EAAA;GACxD;;AAED;AACC;AACA;AACA;AACA;AACA;;EAED,OAAO,CAAC,GAAG,EAAE;AACZ,GAAA,OAAO,CAAC,IAAI,CAAC,SAAU,IAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAE,KAAI,IAAG;GAClD;;AAED;;AAEC;;AAEA;AACA;AACA;;;;AAID,EAAA,UAAU,CAAC,GAAG,EAAE,EAAE,EAAE;AACnB,GAAA,IAAI,CAAC,YAAY,IAAI,CAAC,SAAU,IAAG,GAAC;GACpC,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;AACxB,IAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU,GAAC;IAC/B,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,EAAA;AAC1B,IAAA;AACA,GAAA,IAAI,CAAC,EAAE,EAAE;IACR,MAAK;AACN,IAAA;;;AAGA,GAAA,MAAM,OAAQ,GAAE,MAAM;IACrB,MAAM,IAAK,GAAE,IAAI,CAAC,UAAU,CAAC,EAAE,EAAA;IAC/B,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAE,KAAI,IAAI,EAAE;KAC9B,MAAK;AACN,KAAA;AACA,IAAA,IAAI,CAAC,MAAK,GAAI,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,IAAK,GAAA;AAC7C,KAAA;AACA,GAAA,IAAI,OAAO,gBAAiB,KAAI,UAAU,EAAE;AAC3C,IAAA,MAAM,QAAS,GAAE,IAAI,gBAAgB,CAAC,OAAO,EAAA;AAC7C,IAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAA;IAC5E,IAAI,CAAC,SAAS,CAAC,GAAG,CAAE,GAAE,SAAO;AAC9B,IAAA;;GAEA,IAAI,CAAC,SAAS,CAAC,OAAO,EAAA;GACtB;;AAED;;;AAGC;AACA;AACA;;AAED,EAAA,UAAU,CAAC,EAAE,EAAE;AACd,GAAA,IAAI,CAAC,EAAE,EAAE;IACR,OAAO,KAAI;AACZ,IAAA;GACA,IAAI,EAAE,CAAC,WAAY,IAAG,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAK,GAAI,CAAC,EAAE;AACvD,IAAA,OAAO,IAAG;AACX,IAAA;AACA,GAAA,OAAO,EAAE,CAAC,aAAa,CAAC,0DAA0D,CAAE,KAAI,IAAG;GAC3F;;AAED;AACC;AACA;;;AAGD,EAAA,aAAa,GAAG;GACf,KAAK,MAAM,QAAO,IAAK,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAQ,IAAK,EAAE,CAAC,EAAE;AAC3D,IAAA,QAAQ,CAAC,UAAU,GAAC;AACrB,IAAA;AACA,GAAA,IAAI,CAAC,SAAQ,GAAI,GAAC;GAClB;EACD;AACF;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, toDisplayString, createCommentVNode, createElementVNode, createVNode } from 'vue';
|
|
1
|
+
import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, normalizeStyle, toDisplayString, createCommentVNode, createElementVNode, createVNode } from 'vue';
|
|
2
2
|
|
|
3
3
|
const _hoisted_1 = ["aria-labelledby", "data-testid"];
|
|
4
4
|
const _hoisted_2 = ["id"];
|
|
@@ -6,6 +6,11 @@ const _hoisted_3 = {
|
|
|
6
6
|
key: 1,
|
|
7
7
|
class: "cn-sections-widget__description"
|
|
8
8
|
};
|
|
9
|
+
const _hoisted_4 = {
|
|
10
|
+
key: 0,
|
|
11
|
+
class: "cn-sections-widget__footnote",
|
|
12
|
+
"data-testid": "cn-sections-widget-footnote"
|
|
13
|
+
};
|
|
9
14
|
|
|
10
15
|
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
11
16
|
const _component_CnDetailWidgetHost = resolveComponent("CnDetailWidgetHost");
|
|
@@ -14,6 +19,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
14
19
|
class: normalizeClass(["cn-sections-widget", {
|
|
15
20
|
'cn-sections-widget--cards': $options.cards,
|
|
16
21
|
'cn-sections-widget--two-column': $options.twoColumn,
|
|
22
|
+
'cn-sections-widget--grid': $options.gridColumns > 1,
|
|
17
23
|
'cn-sections-widget--plain': $options.plain,
|
|
18
24
|
}]),
|
|
19
25
|
"data-testid": "cn-sections-widget"
|
|
@@ -21,7 +27,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
21
27
|
(openBlock(true), createElementBlock(Fragment, null, renderList($options.columns, (column) => {
|
|
22
28
|
return (openBlock(), createElementBlock("div", {
|
|
23
29
|
key: column.id,
|
|
24
|
-
class: normalizeClass(["cn-sections-widget__column", `cn-sections-widget__column--${column.id}`])
|
|
30
|
+
class: normalizeClass(["cn-sections-widget__column", `cn-sections-widget__column--${column.id}`]),
|
|
31
|
+
style: normalizeStyle($options.gridColumns > 1 ? { '--cn-sections-columns': $options.gridColumns } : null)
|
|
25
32
|
}, [
|
|
26
33
|
(openBlock(true), createElementBlock(Fragment, null, renderList(column.sections, (section) => {
|
|
27
34
|
return (openBlock(), createElementBlock("section", {
|
|
@@ -63,8 +70,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
63
70
|
], 512 /* NEED_PATCH */)
|
|
64
71
|
], 10 /* CLASS, PROPS */, _hoisted_1))
|
|
65
72
|
}), 128 /* KEYED_FRAGMENT */))
|
|
66
|
-
],
|
|
67
|
-
}), 128 /* KEYED_FRAGMENT */))
|
|
73
|
+
], 6 /* CLASS, STYLE */))
|
|
74
|
+
}), 128 /* KEYED_FRAGMENT */)),
|
|
75
|
+
($options.footnote)
|
|
76
|
+
? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString($options.footnote), 1 /* TEXT */))
|
|
77
|
+
: createCommentVNode("v-if", true)
|
|
68
78
|
], 2 /* CLASS */))
|
|
69
79
|
}
|
|
70
80
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CnSectionsWidget.vue3.js","sources":["../../../../src/components/CnSectionsWidget/CnSectionsWidget.vue?vue&type=template&id=1bba4b0c&lang.js"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div\n\t\tclass=\"cn-sections-widget\"\n\t\t:class=\"{\n\t\t\t'cn-sections-widget--cards': cards,\n\t\t\t'cn-sections-widget--two-column': twoColumn,\n\t\t\t'cn-sections-widget--plain': plain,\n\t\t}\"\n\t\tdata-testid=\"cn-sections-widget\">\n\t\t<div\n\t\t\tv-for=\"column in columns\"\n\t\t\t:key=\"column.id\"\n\t\t\tclass=\"cn-sections-widget__column\"\n\t\t\t:class=\"`cn-sections-widget__column--${column.id}`\">\n\t\t\t<section\n\t\t\t\tv-for=\"section in column.sections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-sections-widget__section\"\n\t\t\t\t:class=\"{ 'cn-sections-widget__section--empty': !isShown(section.key) }\"\n\t\t\t\t:aria-labelledby=\"section.title && isShown(section.key) ? headingId(section.key) : undefined\"\n\t\t\t\t:data-testid=\"`cn-section-${section.key}`\">\n\t\t\t\t<!-- The heading waits for content: a widget type that does not\n\t\t\t\t resolve renders nothing, and a heading over nothing is a\n\t\t\t\t label on a void. -->\n\t\t\t\t<h3\n\t\t\t\t\tv-if=\"section.title && isShown(section.key)\"\n\t\t\t\t\t:id=\"headingId(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__heading\">\n\t\t\t\t\t{{ section.title }}\n\t\t\t\t</h3>\n\t\t\t\t<p\n\t\t\t\t\tv-if=\"section.description && isShown(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__description\">\n\t\t\t\t\t{{ section.description }}\n\t\t\t\t</p>\n\t\t\t\t<!-- The host always mounts, also while the section reads as\n\t\t\t\t empty: a widget that has not mounted cannot fetch, so it\n\t\t\t\t could never gain the content that would show it. -->\n\t\t\t\t<div :ref=\"(el) => setHostRef(section.key, el)\" class=\"cn-sections-widget__body\">\n\t\t\t\t\t<CnDetailWidgetHost\n\t\t\t\t\t\t:widget=\"section.widget\"\n\t\t\t\t\t\tchrome=\"bare\"\n\t\t\t\t\t\t:objectId=\"objectId\"\n\t\t\t\t\t\t:object=\"objectData\"\n\t\t\t\t\t\t:objectType=\"objectType\"\n\t\t\t\t\t\t:schemaObject=\"schemaObject\"\n\t\t\t\t\t\t:register=\"register\"\n\t\t\t\t\t\t:schema=\"schema\"\n\t\t\t\t\t\t:store=\"store\"\n\t\t\t\t\t\t:surface=\"surface\"\n\t\t\t\t\t\t:integrationContext=\"integrationContext\"\n\t\t\t\t\t\t:cnRegistry=\"cnRegistry\"\n\t\t\t\t\t\t:availableWidgets=\"availableWidgets\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'\n\n/** Counter for unique heading ids across instances. */\nlet instanceCounter = 0\n\n/**\n * CnSectionsWidget — the `sections` widget: several widgets in one place,\n * each under its own heading.\n *\n * A tab strip binds one widget per tab, and a tab often holds more than one\n * thing: the documents list and the case folder (DqZaak), a portal's details\n * form, house style and sign-in (PtPortalInstellingen). This widget stacks\n * them as sections under headings with a rule between them (the default), or\n * as one card per section (`cards: true`), optionally in a main and a side\n * column (`column: \"side\"` on a section). A single column of separate titled\n * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is\n * for headed sections, and for the two-column card grid a settings tab draws.\n *\n * ```json\n * {\n * \"type\": \"sections\",\n * \"content\": {\n * \"sections\": [\n * { \"title\": \"Documenten\", \"widgetId\": \"case-documents\" },\n * { \"title\": \"Zaakmap\", \"widget\": { \"type\": \"files\" } }\n * ]\n * }\n * }\n * ```\n *\n * A section names its widget inline (`widget`) or by id (`widgetId`, a\n * sibling definition on the same surface). Children render through\n * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child\n * behaves here as it does in a tab. A section whose widget draws nothing\n * shows no heading and takes no space (`hideEmpty`, default true). Stacked\n * children share one cell, so an object list in a section renders every\n * fetched row (`content.fit: false`) unless its definition says otherwise.\n *\n * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md\n */\nexport default {\n\tname: 'CnSectionsWidget',\n\n\tcomponents: { CnDetailWidgetHost },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.\n\t\t * `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.\n\t\t * - `cards` — draw each section as its own card (default false: headings and a rule between sections).\n\t\t * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).\n\t\t * - `dividers` — draw a rule between sections (default true). `false` stacks them 8px apart with no rule,\n\t\t * for a row of strips that each say one thing (a record's banners).\n\t\t *\n\t\t * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean, dividers?: boolean}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** Sibling widget definitions on the surface, for `widgetId` sections. */\n\t\tavailableWidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The bound record's id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The loaded record, or null while it is still being fetched. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The resolved object-type slug. */\n\t\tobjectType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The resolved JSON Schema object, needed by a `data` child. */\n\t\tschemaObject: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The effective object store. */\n\t\tstore: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Rendering surface forwarded to the children. */\n\t\tsurface: {\n\t\t\ttype: String,\n\t\t\tdefault: 'detail-page',\n\t\t},\n\n\t\t/** Object context forwarded to integration children. */\n\t\tintegrationContext: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The consumer's component registry, for custom child widget types. */\n\t\tcnRegistry: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\tdata() {\n\t\tinstanceCounter += 1\n\t\treturn {\n\t\t\tuid: instanceCounter,\n\t\t\t/**\n\t\t\t * Section key to \"has this section rendered anything\".\n\t\t\t *\n\t\t\t * @type {Record<string, boolean>}\n\t\t\t */\n\t\t\tfilled: {},\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Whether each section is its own card.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcards() {\n\t\t\treturn this.content?.cards === true\n\t\t},\n\n\t\t/**\n\t\t * Whether the sections stack with no rule between them.\n\t\t *\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/dq-abstract-record-widgets/specs/record-widgets/spec.md#requirement-sections-can-stack-without-dividers\n\t\t */\n\t\tplain() {\n\t\t\treturn !this.cards && this.content?.dividers === false\n\t\t},\n\n\t\t/**\n\t\t * Whether an empty section hides.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thideEmpty() {\n\t\t\treturn this.content?.hideEmpty !== false\n\t\t},\n\n\t\t/**\n\t\t * The sections to render: a stable key, a translated title, the column\n\t\t * and the widget definition. A section whose widget cannot be found is\n\t\t * dropped (with a development warning for an unknown id).\n\t\t *\n\t\t * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings\n\t\t */\n\t\tsections() {\n\t\t\tconst raw = Array.isArray(this.content?.sections) ? this.content.sections : []\n\t\t\tconst out = []\n\t\t\traw.forEach((entry, index) => {\n\t\t\t\tif (!entry || typeof entry !== 'object') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null\n\t\t\t\tif (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {\n\t\t\t\t\twidget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null\n\t\t\t\t\tif (!widget) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(`[CnSectionsWidget] section widgetId \"${entry.widgetId}\" names no widget on this surface; section skipped.`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (!widget || !widget.type) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tout.push({\n\t\t\t\t\tkey: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),\n\t\t\t\t\ttitle: this.tr(entry.title || entry.label || ''),\n\t\t\t\t\tdescription: this.tr(entry.description || ''),\n\t\t\t\t\tcolumn: entry.column === 'side' ? 'side' : 'main',\n\t\t\t\t\twidget: this.shared(widget),\n\t\t\t\t})\n\t\t\t})\n\t\t\treturn out\n\t\t},\n\n\t\t/**\n\t\t * Whether any section sits in the side column.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\ttwoColumn() {\n\t\t\treturn this.sections.some((section) => section.column === 'side')\n\t\t},\n\n\t\t/**\n\t\t * The columns to draw, each with its sections in order.\n\t\t *\n\t\t * @return {Array<{id: string, sections: Array<object>}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-can-draw-cards-in-a-main-and-a-side-column\n\t\t */\n\t\tcolumns() {\n\t\t\tif (!this.twoColumn) {\n\t\t\t\treturn [{ id: 'main', sections: this.sections }]\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },\n\t\t\t\t{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },\n\t\t\t]\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.stopObserving()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate through the host app.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string}\n\t\t */\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/**\n\t\t * The heading id of a section.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {string}\n\t\t */\n\t\theadingId(key) {\n\t\t\treturn `cn-sections-${this.uid}-${key}`.replace(/[^\\w-]/g, '-')\n\t\t},\n\n\t\t/**\n\t\t * A child definition with the cell budget off: stacked children share\n\t\t * one cell, so an object list must not size itself to that cell.\n\t\t *\n\t\t * @param {object} widget The definition.\n\t\t * @return {object}\n\t\t */\n\t\tshared(widget) {\n\t\t\tconst content = widget.content || {}\n\t\t\tif (Object.hasOwn(content, 'fit')) {\n\t\t\t\treturn widget\n\t\t\t}\n\t\t\treturn { ...widget, content: { ...content, fit: false } }\n\t\t},\n\n\t\t/**\n\t\t * Whether a section shows its heading and takes space.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent\n\t\t */\n\t\tisShown(key) {\n\t\t\treturn !this.hideEmpty || this.filled[key] === true\n\t\t},\n\n\t\t/**\n\t\t * Watch one section's host for content, so its heading appears when\n\t\t * the widget renders and stays away when it never does. A\n\t\t * MutationObserver, because most widgets mount empty and fill after a\n\t\t * fetch.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @param {HTMLElement|null} el The host wrapper, or null on teardown.\n\t\t * @return {void}\n\t\t */\n\t\tsetHostRef(key, el) {\n\t\t\tthis.observers = this.observers || {}\n\t\t\tif (this.observers[key]) {\n\t\t\t\tthis.observers[key].disconnect()\n\t\t\t\tdelete this.observers[key]\n\t\t\t}\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Assign only on a change: `filled` drives the template, so an\n\t\t\t// unconditional write re-renders, mutates, and fires again.\n\t\t\tconst measure = () => {\n\t\t\t\tconst next = this.hasContent(el)\n\t\t\t\tif (this.filled[key] === next) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.filled = { ...this.filled, [key]: next }\n\t\t\t}\n\t\t\tif (typeof MutationObserver === 'function') {\n\t\t\t\tconst observer = new MutationObserver(measure)\n\t\t\t\tobserver.observe(el, { childList: true, subtree: true, characterData: true })\n\t\t\t\tthis.observers[key] = observer\n\t\t\t}\n\t\t\t// Not synchronously: a ref callback runs during the patch.\n\t\t\tthis.$nextTick(measure)\n\t\t},\n\n\t\t/**\n\t\t * Whether a host rendered anything a reader would see: text (an empty\n\t\t * state counts), or a graphical or interactive element.\n\t\t *\n\t\t * @param {HTMLElement} el The host wrapper.\n\t\t * @return {boolean}\n\t\t */\n\t\thasContent(el) {\n\t\t\tif (!el) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (el.textContent && el.textContent.trim().length > 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null\n\t\t},\n\n\t\t/**\n\t\t * Drop every observer.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tstopObserving() {\n\t\t\tfor (const observer of Object.values(this.observers || {})) {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t\tthis.observers = {}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sections-widget {\n\tmin-width: 0;\n}\n\n.cn-sections-widget__column {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(var(--default-grid-baseline, 4px) * 4);\n\tmin-width: 0;\n}\n\n/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */\n.cn-sections-widget--two-column {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(280px, 418px);\n\tgap: 20px;\n\talign-items: start;\n}\n\n@media (max-width: 1024px) {\n\t.cn-sections-widget--two-column {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n/* A host page may space every <section>; these sections are spaced by the column gap only. */\n.cn-sections-widget__section {\n\tmargin: 0;\n\tmin-width: 0;\n}\n\n/* A rule above a section that follows a shown one. */\n.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: calc(var(--default-grid-baseline, 4px) * 4);\n\tborder-top: 1px solid var(--color-border);\n}\n\n/* No rule: strips that each say one thing, 8px apart. */\n.cn-sections-widget--plain .cn-sections-widget__column {\n\tgap: calc(var(--default-grid-baseline, 4px) * 2);\n}\n\n.cn-sections-widget.cn-sections-widget--plain .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: 0;\n\tborder-top: 0;\n}\n\n/*\n * An empty section keeps its host mounted (display: none still mounts it, so\n * the widget fetches and can fill later) but takes no space, gap or rule.\n */\n.cn-sections-widget__section--empty {\n\tdisplay: none;\n}\n\n.cn-sections-widget__heading {\n\tmargin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-sections-widget__description {\n\tmargin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n/* One card per section. */\n.cn-sections-widget--cards .cn-sections-widget__column {\n\tgap: 20px;\n}\n\n.cn-sections-widget--cards .cn-sections-widget__section {\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));\n\tpadding: var(--cn-board-card-padding, 16px 20px);\n}\n\n.cn-sections-widget--cards .cn-sections-widget__heading {\n\tfont-size: 18px;\n\tmargin-bottom: 12px;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_openBlock","_renderList","_toDisplayString","_createElementVNode"],"mappings":";;;;;;AA0CS,EAAA,KAAC,EAAC,iCAAiC;;;;;;uBA/BzCA;AACD,IAAA,KAAC,kBAAA,oBAAA,EAAA;gCAC+B,QAAA,CAAA,KAAA;qCAAA,QAAA,CAAA,SAAA;gCAAA,QAAA,CAAA,KAAA;;iBAKrB,EAAC,oBAAoB;;sBAC/BA,8CACiB,QAAO,CAAA,OAAA,EAAA,CAAjB,MAAM,KAAA;2BADbA;QAEC,GAAG,EAAE,MAAM,CAAC,EAAE;AACd,QAAA,KAAI,EAACC,cAAA,CAAA,CAAA,4BAA4B,EACK,CAAA,4BAAA,EAAA,MAAM,CAAC,EAAC,CAAA,CAAA,CAAA,CAAA;;AAC9C,SAAAC,SAAA,CAAA,IAAA,CAAA,EAAAF,kBAAA,SACkB,EAAA,IAAA,EAAAG,UAAA,CAAA,MAAM,CAAC,QAAQ,GAA1B,OAAO,KAAA;+BADdH;YAEC,GAAI,EAAC,OAAO,CAAC,GAAG;iBACZ,kBAAC,6BAA4B,EAAA,EAAA,oCAAA,EAAA,CACV,gBAAA,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AACvB,YAAA,iBAAC,EAAA,OAAA,CAAA,KAAA,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,IAAA,QAAA,CAAA,SAAA,CAAA,OAAA,CAAA,GAAA,IAAA,SAAA;YACD,aAAW,EAAA,CAAA,WAAA,EAAgB,OAAO,CAAC,GAAG,CAAA,CAAA;;AAKtC,YAAA,CAAA,OAAA,CAAA,KAAA,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,CAAA;8BADDA,kBAKG,CAAA,IAAA,EAAA;;AAHD,kBAAA,EAAE,EAAE,QAAA,CAAA,SAAS,CAAC,OAAO,CAAC,GAAG,CAAA;AAC1B,kBAAA,KAAK,EAAC,6BAA6B;AAChC,iBAAA,EAAAI,eAAA,CAAA,OAAO,CAAC,KAAK,CAAA,EAAA,CAAA,oBAAA,UAAA,CAAA;;AAGV,YAAA,CAAA,OAAO,CAAC,WAAW,IAAI,gBAAO,CAAC,OAAO,CAAC,GAAG,CAAA;AADjD,iBAAAF,SAAA,EAAA,EAAAF,kBAAA,CAII,GAJJ,EAAA,UAII,EADCI,eAAA,CAAA,OAAM,CAAC,WAAW,CAAA,EAAA,CAAA,YAAA;;YAKrBC;;cAAI,GAAG,EAAA,CAAG,EAAE,KAAK,QAAA,CAAA,UAAE,CAAA,OAAA,CAAA,GAAA,EAAA,EAAA,CAAA;AAAA,cAAA,KAAA,EAAA,0BAAA;;;gBAElB,MAAM,EAAE,OAAO,CAAC,MAAM;AACvB,gBAAA,MAAM,EAAC,MAAM;AACZ,gBAAA,QAAQ,EAAE,MAAI,CAAA,QAAA;AACd,gBAAA,MAAM,EAAE,MAAI,CAAA,UAAA;AACZ,gBAAA,UAAU,EAAE,MAAI,CAAA,UAAA;AAChB,gBAAA,YAAY,EAAE,MAAY,CAAA,YAAA;AAC1B,gBAAA,QAAQ,EAAE,MAAQ,CAAA,QAAA;AAClB,gBAAA,MAAM,EAAE,MAAM,CAAA,MAAA;AACd,gBAAA,KAAE,EAAA,MAAA,CAAA,KAAA;AACF,gBAAA,OAAK,EAAA,MAAA,CAAA,OAAA;AACL,gBAAA,kBAAA,EAAA,MAAA,CAAA,kBAAA;AACD,gBAAA,UAAA,EAAA,MAAA,CAAA,UAAA;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"CnSectionsWidget.vue3.js","sources":["../../../../src/components/CnSectionsWidget/CnSectionsWidget.vue?vue&type=template&id=28baf01e&lang.js"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2026 Conduction B.V.\n - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div\n\t\tclass=\"cn-sections-widget\"\n\t\t:class=\"{\n\t\t\t'cn-sections-widget--cards': cards,\n\t\t\t'cn-sections-widget--two-column': twoColumn,\n\t\t\t'cn-sections-widget--grid': gridColumns > 1,\n\t\t\t'cn-sections-widget--plain': plain,\n\t\t}\"\n\t\tdata-testid=\"cn-sections-widget\">\n\t\t<div\n\t\t\tv-for=\"column in columns\"\n\t\t\t:key=\"column.id\"\n\t\t\tclass=\"cn-sections-widget__column\"\n\t\t\t:class=\"`cn-sections-widget__column--${column.id}`\"\n\t\t\t:style=\"gridColumns > 1 ? { '--cn-sections-columns': gridColumns } : null\">\n\t\t\t<section\n\t\t\t\tv-for=\"section in column.sections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-sections-widget__section\"\n\t\t\t\t:class=\"{ 'cn-sections-widget__section--empty': !isShown(section.key) }\"\n\t\t\t\t:aria-labelledby=\"section.title && isShown(section.key) ? headingId(section.key) : undefined\"\n\t\t\t\t:data-testid=\"`cn-section-${section.key}`\">\n\t\t\t\t<!-- The heading waits for content: a widget type that does not\n\t\t\t\t resolve renders nothing, and a heading over nothing is a\n\t\t\t\t label on a void. -->\n\t\t\t\t<h3\n\t\t\t\t\tv-if=\"section.title && isShown(section.key)\"\n\t\t\t\t\t:id=\"headingId(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__heading\">\n\t\t\t\t\t{{ section.title }}\n\t\t\t\t</h3>\n\t\t\t\t<p\n\t\t\t\t\tv-if=\"section.description && isShown(section.key)\"\n\t\t\t\t\tclass=\"cn-sections-widget__description\">\n\t\t\t\t\t{{ section.description }}\n\t\t\t\t</p>\n\t\t\t\t<!-- The host always mounts, also while the section reads as\n\t\t\t\t empty: a widget that has not mounted cannot fetch, so it\n\t\t\t\t could never gain the content that would show it. -->\n\t\t\t\t<div :ref=\"(el) => setHostRef(section.key, el)\" class=\"cn-sections-widget__body\">\n\t\t\t\t\t<CnDetailWidgetHost\n\t\t\t\t\t\t:widget=\"section.widget\"\n\t\t\t\t\t\tchrome=\"bare\"\n\t\t\t\t\t\t:objectId=\"objectId\"\n\t\t\t\t\t\t:object=\"objectData\"\n\t\t\t\t\t\t:objectType=\"objectType\"\n\t\t\t\t\t\t:schemaObject=\"schemaObject\"\n\t\t\t\t\t\t:register=\"register\"\n\t\t\t\t\t\t:schema=\"schema\"\n\t\t\t\t\t\t:store=\"store\"\n\t\t\t\t\t\t:surface=\"surface\"\n\t\t\t\t\t\t:integrationContext=\"integrationContext\"\n\t\t\t\t\t\t:cnRegistry=\"cnRegistry\"\n\t\t\t\t\t\t:availableWidgets=\"availableWidgets\" />\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t\t<p v-if=\"footnote\" class=\"cn-sections-widget__footnote\" data-testid=\"cn-sections-widget-footnote\">\n\t\t\t{{ footnote }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'\n\n/** Counter for unique heading ids across instances. */\nlet instanceCounter = 0\n\n/**\n * CnSectionsWidget — the `sections` widget: several widgets in one place,\n * each under its own heading.\n *\n * A tab strip binds one widget per tab, and a tab often holds more than one\n * thing: the documents list and the case folder (DqZaak), a portal's details\n * form, house style and sign-in (PtPortalInstellingen). This widget stacks\n * them as sections under headings with a rule between them (the default), or\n * as one card per section (`cards: true`), optionally in a main and a side\n * column (`column: \"side\"` on a section). A single column of separate titled\n * cards in a tab is the tabs widget's own `widgetIds` stack; this widget is\n * for headed sections, and for the two-column card grid a settings tab draws.\n *\n * ```json\n * {\n * \"type\": \"sections\",\n * \"content\": {\n * \"sections\": [\n * { \"title\": \"Documenten\", \"widgetId\": \"case-documents\" },\n * { \"title\": \"Zaakmap\", \"widget\": { \"type\": \"files\" } }\n * ]\n * }\n * }\n * ```\n *\n * A section names its widget inline (`widget`) or by id (`widgetId`, a\n * sibling definition on the same surface). Children render through\n * `CnDetailWidgetHost` in bare mode, the dispatch a tab panel uses, so a child\n * behaves here as it does in a tab. A section whose widget draws nothing\n * shows no heading and takes no space (`hideEmpty`, default true). Stacked\n * children share one cell, so an object list in a section renders every\n * fetched row (`content.fit: false`) unless its definition says otherwise.\n *\n * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md\n */\nexport default {\n\tname: 'CnSectionsWidget',\n\n\tcomponents: { CnDetailWidgetHost },\n\n\tinject: {\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The widget configuration.\n\t\t *\n\t\t * - `sections` — `[{ key?, title?, description?, column?, widget? | widgetId? }]`, in order.\n\t\t * `label` is accepted as an alias of `title`; `column` is `main` (default) or `side`.\n\t\t * - `cards` — draw each section as its own card (default false: headings and a rule between sections).\n\t\t * - `hideEmpty` — hide the heading and the space of a section whose widget drew nothing (default true).\n\t\t * - `dividers` — draw a rule between sections (default true). `false` stacks them 8px apart with no rule,\n\t\t * for a row of strips that each say one thing (a record's banners).\n\t\t *\n\t\t * - `columns` — lay the sections out side by side in this many columns (2 to 4), one column on a narrow\n\t\t * screen. Ignored when a section asks for the side column.\n\t\t * - `footnote` — a line of muted text under the sections.\n\t\t *\n\t\t * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean, dividers?: boolean, columns?: number, footnote?: string}}\n\t\t */\n\t\tcontent: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/** Sibling widget definitions on the surface, for `widgetId` sections. */\n\t\tavailableWidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The bound record's id. */\n\t\tobjectId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The loaded record, or null while it is still being fetched. */\n\t\tobjectData: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The resolved object-type slug. */\n\t\tobjectType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The resolved JSON Schema object, needed by a `data` child. */\n\t\tschemaObject: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** OpenRegister register slug of the surface. */\n\t\tregister: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** OpenRegister schema slug of the surface. */\n\t\tschema: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The effective object store. */\n\t\tstore: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** Rendering surface forwarded to the children. */\n\t\tsurface: {\n\t\t\ttype: String,\n\t\t\tdefault: 'detail-page',\n\t\t},\n\n\t\t/** Object context forwarded to integration children. */\n\t\tintegrationContext: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/** The consumer's component registry, for custom child widget types. */\n\t\tcnRegistry: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\tdata() {\n\t\tinstanceCounter += 1\n\t\treturn {\n\t\t\tuid: instanceCounter,\n\t\t\t/**\n\t\t\t * Section key to \"has this section rendered anything\".\n\t\t\t *\n\t\t\t * @type {Record<string, boolean>}\n\t\t\t */\n\t\t\tfilled: {},\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Whether each section is its own card.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tcards() {\n\t\t\treturn this.content?.cards === true\n\t\t},\n\n\t\t/**\n\t\t * Whether the sections stack with no rule between them.\n\t\t *\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/dq-abstract-record-widgets/specs/record-widgets/spec.md#requirement-sections-can-stack-without-dividers\n\t\t */\n\t\tplain() {\n\t\t\treturn !this.cards && this.content?.dividers === false\n\t\t},\n\n\t\t/**\n\t\t * Whether an empty section hides.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thideEmpty() {\n\t\t\treturn this.content?.hideEmpty !== false\n\t\t},\n\n\t\t/**\n\t\t * The sections to render: a stable key, a translated title, the column\n\t\t * and the widget definition. A section whose widget cannot be found is\n\t\t * dropped (with a development warning for an unknown id).\n\t\t *\n\t\t * @return {Array<{key: string, title: string, description: string, column: string, widget: object}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-stacks-configured-widgets-under-headings\n\t\t */\n\t\tsections() {\n\t\t\tconst raw = Array.isArray(this.content?.sections) ? this.content.sections : []\n\t\t\tconst out = []\n\t\t\traw.forEach((entry, index) => {\n\t\t\t\tif (!entry || typeof entry !== 'object') {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tlet widget = entry.widget && typeof entry.widget === 'object' ? entry.widget : null\n\t\t\t\tif (!widget && typeof entry.widgetId === 'string' && entry.widgetId !== '') {\n\t\t\t\t\twidget = this.availableWidgets.find((w) => w && w.id === entry.widgetId) || null\n\t\t\t\t\tif (!widget) {\n\t\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\t\tconsole.warn(`[CnSectionsWidget] section widgetId \"${entry.widgetId}\" names no widget on this surface; section skipped.`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (!widget || !widget.type) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tout.push({\n\t\t\t\t\tkey: String(entry.key || widget.id || entry.widgetId || `${widget.type}-${index}`),\n\t\t\t\t\ttitle: this.tr(entry.title || entry.label || ''),\n\t\t\t\t\tdescription: this.tr(entry.description || ''),\n\t\t\t\t\tcolumn: entry.column === 'side' ? 'side' : 'main',\n\t\t\t\t\twidget: this.shared(widget),\n\t\t\t\t})\n\t\t\t})\n\t\t\treturn out\n\t\t},\n\n\t\t/**\n\t\t * Whether any section sits in the side column.\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\ttwoColumn() {\n\t\t\treturn this.sections.some((section) => section.column === 'side')\n\t\t},\n\n\t\t/**\n\t\t * How many columns the sections are laid out in side by side: the\n\t\t * configured `columns`, capped at four; 1 (stacked) without it or\n\t\t * when a section asks for the side column.\n\t\t *\n\t\t * @return {number}\n\t\t * @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-sections-widget-can-lay-its-cards-out-in-columns\n\t\t */\n\t\tgridColumns() {\n\t\t\tconst n = Math.floor(Number(this.content?.columns))\n\t\t\tif (!Number.isFinite(n) || n < 2 || this.twoColumn) {\n\t\t\t\treturn 1\n\t\t\t}\n\t\t\treturn Math.min(n, 4)\n\t\t},\n\n\t\t/**\n\t\t * The translated footnote under the sections, or ''.\n\t\t *\n\t\t * @return {string}\n\t\t * @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-sections-widget-can-close-with-a-footnote\n\t\t */\n\t\tfootnote() {\n\t\t\treturn this.tr(this.content?.footnote || '')\n\t\t},\n\n\t\t/**\n\t\t * The columns to draw, each with its sections in order.\n\t\t *\n\t\t * @return {Array<{id: string, sections: Array<object>}>}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-sections-widget-can-draw-cards-in-a-main-and-a-side-column\n\t\t */\n\t\tcolumns() {\n\t\t\tif (!this.twoColumn) {\n\t\t\t\treturn [{ id: 'main', sections: this.sections }]\n\t\t\t}\n\t\t\treturn [\n\t\t\t\t{ id: 'main', sections: this.sections.filter((section) => section.column === 'main') },\n\t\t\t\t{ id: 'side', sections: this.sections.filter((section) => section.column === 'side') },\n\t\t\t]\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.stopObserving()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate through the host app.\n\t\t *\n\t\t * @param {string} text The text.\n\t\t * @return {string}\n\t\t */\n\t\ttr(text) {\n\t\t\tif (typeof text !== 'string' || text === '') {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t\treturn typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text\n\t\t},\n\n\t\t/**\n\t\t * The heading id of a section.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {string}\n\t\t */\n\t\theadingId(key) {\n\t\t\treturn `cn-sections-${this.uid}-${key}`.replace(/[^\\w-]/g, '-')\n\t\t},\n\n\t\t/**\n\t\t * A child definition with the cell budget off: stacked children share\n\t\t * one cell, so an object list must not size itself to that cell.\n\t\t *\n\t\t * @param {object} widget The definition.\n\t\t * @return {object}\n\t\t */\n\t\tshared(widget) {\n\t\t\tconst content = widget.content || {}\n\t\t\tif (Object.hasOwn(content, 'fit')) {\n\t\t\t\treturn widget\n\t\t\t}\n\t\t\treturn { ...widget, content: { ...content, fit: false } }\n\t\t},\n\n\t\t/**\n\t\t * Whether a section shows its heading and takes space.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @return {boolean}\n\t\t * @spec openspec/changes/abstract-sections-widget/specs/sections-widget/spec.md#requirement-a-section-whose-widget-draws-nothing-stays-silent\n\t\t */\n\t\tisShown(key) {\n\t\t\treturn !this.hideEmpty || this.filled[key] === true\n\t\t},\n\n\t\t/**\n\t\t * Watch one section's host for content, so its heading appears when\n\t\t * the widget renders and stays away when it never does. A\n\t\t * MutationObserver, because most widgets mount empty and fill after a\n\t\t * fetch.\n\t\t *\n\t\t * @param {string} key The section key.\n\t\t * @param {HTMLElement|null} el The host wrapper, or null on teardown.\n\t\t * @return {void}\n\t\t */\n\t\tsetHostRef(key, el) {\n\t\t\tthis.observers = this.observers || {}\n\t\t\tif (this.observers[key]) {\n\t\t\t\tthis.observers[key].disconnect()\n\t\t\t\tdelete this.observers[key]\n\t\t\t}\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Assign only on a change: `filled` drives the template, so an\n\t\t\t// unconditional write re-renders, mutates, and fires again.\n\t\t\tconst measure = () => {\n\t\t\t\tconst next = this.hasContent(el)\n\t\t\t\tif (this.filled[key] === next) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tthis.filled = { ...this.filled, [key]: next }\n\t\t\t}\n\t\t\tif (typeof MutationObserver === 'function') {\n\t\t\t\tconst observer = new MutationObserver(measure)\n\t\t\t\tobserver.observe(el, { childList: true, subtree: true, characterData: true })\n\t\t\t\tthis.observers[key] = observer\n\t\t\t}\n\t\t\t// Not synchronously: a ref callback runs during the patch.\n\t\t\tthis.$nextTick(measure)\n\t\t},\n\n\t\t/**\n\t\t * Whether a host rendered anything a reader would see: text (an empty\n\t\t * state counts), or a graphical or interactive element.\n\t\t *\n\t\t * @param {HTMLElement} el The host wrapper.\n\t\t * @return {boolean}\n\t\t */\n\t\thasContent(el) {\n\t\t\tif (!el) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\tif (el.textContent && el.textContent.trim().length > 0) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn el.querySelector('img, svg, canvas, table, input, button, select, textarea') !== null\n\t\t},\n\n\t\t/**\n\t\t * Drop every observer.\n\t\t *\n\t\t * @return {void}\n\t\t */\n\t\tstopObserving() {\n\t\t\tfor (const observer of Object.values(this.observers || {})) {\n\t\t\t\tobserver.disconnect()\n\t\t\t}\n\t\t\tthis.observers = {}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-sections-widget {\n\tmin-width: 0;\n}\n\n.cn-sections-widget__column {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(var(--default-grid-baseline, 4px) * 4);\n\tmin-width: 0;\n}\n\n/* A main and a side column (the settings boards: 1fr and 418px, 20px apart). */\n.cn-sections-widget--two-column {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1fr) minmax(280px, 418px);\n\tgap: 20px;\n\talign-items: start;\n}\n\n@media (max-width: 1024px) {\n\t.cn-sections-widget--two-column {\n\t\tgrid-template-columns: minmax(0, 1fr);\n\t}\n}\n\n/* Sections side by side (`columns`): at most that many to a row, each at\n least 240px wide, so a narrow cell wraps them onto more rows. */\n.cn-sections-widget.cn-sections-widget--grid .cn-sections-widget__column {\n\t--cn-sections-gap: 14px;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc((100% - (var(--cn-sections-columns, 2) - 1) * var(--cn-sections-gap)) / var(--cn-sections-columns, 2)))), 1fr));\n\tgap: var(--cn-sections-gap);\n\talign-items: start;\n}\n\n.cn-sections-widget__footnote {\n\tmargin: calc(var(--default-grid-baseline, 4px) * 3) 0 0;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n}\n\n/* A host page may space every <section>; these sections are spaced by the column gap only. */\n.cn-sections-widget__section {\n\tmargin: 0;\n\tmin-width: 0;\n}\n\n/* A rule above a section that follows a shown one. */\n.cn-sections-widget:not(.cn-sections-widget--cards) .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: calc(var(--default-grid-baseline, 4px) * 4);\n\tborder-top: 1px solid var(--color-border);\n}\n\n/* No rule: strips that each say one thing, 8px apart. */\n.cn-sections-widget--plain .cn-sections-widget__column {\n\tgap: calc(var(--default-grid-baseline, 4px) * 2);\n}\n\n.cn-sections-widget.cn-sections-widget--plain .cn-sections-widget__section:not(.cn-sections-widget__section--empty) ~ .cn-sections-widget__section {\n\tpadding-top: 0;\n\tborder-top: 0;\n}\n\n/*\n * An empty section keeps its host mounted (display: none still mounts it, so\n * the widget fetches and can fill later) but takes no space, gap or rule.\n */\n.cn-sections-widget__section--empty {\n\tdisplay: none;\n}\n\n.cn-sections-widget__heading {\n\tmargin: 0 0 calc(var(--default-grid-baseline, 4px) * 2);\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-sections-widget__description {\n\tmargin: calc(var(--default-grid-baseline, 4px) * -1) 0 calc(var(--default-grid-baseline, 4px) * 3);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n/* One card per section. */\n.cn-sections-widget--cards .cn-sections-widget__column {\n\tgap: 20px;\n}\n\n.cn-sections-widget--cards .cn-sections-widget__section {\n\tbackground: var(--color-main-background);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--cn-board-card-radius, var(--border-radius-large, 12px));\n\tpadding: var(--cn-board-card-padding, 16px 20px);\n}\n\n.cn-sections-widget--cards .cn-sections-widget__heading {\n\tfont-size: 18px;\n\tmargin-bottom: 12px;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_Fragment","_renderList","_toDisplayString","_createElementVNode"],"mappings":"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"}
|