npm - @conduction/nextcloud-vue - Versions diffs - 2.56.0-beta.36 → 2.56.0-beta.38 - Mend

@conduction/nextcloud-vue 2.56.0-beta.36 → 2.56.0-beta.38

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.

Files changed (382) hide show

package/dist/esm/components/CnVersionInfoCard/CnVersionInfoCard.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnVersionInfoCard.vue2.js","sources":["../../../../src/components/CnVersionInfoCard/CnVersionInfoCard.vue"],"sourcesContent":["<template>\n\t<CnSettingsSection\n\t\t:name=\"title\"\n\t\t:description=\"description\"\n\t\t:docUrl=\"docUrl\"\n\t\t:loading=\"loading\"\n\t\tloadingMessage=\"Loading version information...\">\n\t\t<!-- Actions slot (top right). Under the board look the same buttons sit\n\t\t in the footer row of the card instead. -->\n\t\t<template v-if=\"!isBoard\" #actions>\n\t\t\t<!-- Update Button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ updateButtonText }}\n\t\t\t</NcButton>\n\n\t\t\t<!-- Additional Actions (slot) -->\n\t\t\t<slot name=\"actions\" />\n\t\t</template>\n\n\t\t<!-- Main content (only shown when not loading) -->\n\t\t<div v-if=\"!loading\" class=\"cn-version-info\" :class=\"{ 'cn-version-info--board': isBoard }\">\n\t\t\t<!-- Version card with gray background -->\n\t\t\t<div class=\"cn-version-info__card\">\n\t\t\t\t<h4>{{ cardTitle }}</h4>\n\t\t\t\t<div class=\"cn-version-info__details\">\n\t\t\t\t\t<!-- Application Name -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ labels.appName }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appName }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Version -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ labels.version }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Configured Version (if provided) -->\n\t\t\t\t\t<div v-if=\"configuredVersion\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ labels.configuredVersion }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ configuredVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Additional items -->\n\t\t\t\t\t<div v-for=\"item in additionalItems\" :key=\"item.label\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ item.label }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\" :class=\"item.statusClass\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Optional additional items slot -->\n\t\t\t\t\t<slot name=\"additional-items\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- The state, then the actions (re-import), after a hairline. -->\n\t\t\t\t<div v-if=\"isBoard\" class=\"cn-version-info__footer-row\" data-testid=\"cn-version-info-footer-row\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ updateButtonText }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Optional footer slot -->\n\t\t\t\t<slot name=\"footer\" />\n\t\t\t</div>\n\n\t\t\t<!-- Optional extra cards slot -->\n\t\t\t<slot name=\"extra-cards\" />\n\t\t</div>\n\t</CnSettingsSection>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcLoadingIcon } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Update from 'vue-material-design-icons/Update.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { CnSettingsSection } from '../CnSettingsSection/index.js'\n\n/*\n CnVersionInfoCard - App version information card for admin settings pages.\n \n Displays application name, version, and optional configured version with an\n * update button. Wraps CnSettingsSection for consistent admin settings layout.\n \n Every Conduction Nextcloud app should show this as the first section on its\n * admin settings page.\n \n Basic usage\n * ```vue\n * <CnVersionInfoCard app-name=\"Open Register\" app-version=\"0.2.3\" />\n * ```\n \n With update button\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Open Register\"\n * app-version=\"0.2.3\"\n * configured-version=\"0.2.2\"\n * :is-up-to-date=\"false\"\n * :show-update-button=\"true\"\n * :updating=\"isUpdating\"\n * @update=\"runUpdate\" />\n * ```\n \n With additional items and actions\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Pipelinq\"\n * app-version=\"0.1.7\"\n * :additional-items=\"[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]\">\n * <template #actions>\n * <NcButton @click=\"clearCache\">Clear App Store Cache</NcButton>\n * </template>\n * </CnVersionInfoCard>\n * ```\n /\nexport default {\n\tname: 'CnVersionInfoCard',\n\n\tcomponents: {\n\t\tCnSettingsSection,\n\t\tNcLoadingIcon,\n\t\tNcButton,\n\t\tCheck,\n\t\tUpdate,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The look the card is drawn in: `board` or `nextcloud`. Empty follows\n\t\t * the `cnLook` that CnAppRoot provides. Under `board` the facts are a\n\t\t * two-column list and the actions sit in a footer row.\n\t\t \n\t\t @spec openspec/changes/screens-chrome-parity/specs/settings-board-look/spec.md#requirement-the-version-card-takes-the-board-facts-and-footer\n\t\t /\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Section title /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Version information'),\n\t\t},\n\n\t\t/* Section description /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Information about the current application installation'),\n\t\t},\n\n\t\t/* Documentation URL (shows info icon next to title) /\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Card heading text /\n\t\tcardTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Application information'),\n\t\t},\n\n\t\t/* Application name to display /\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Application version string /\n\t\tappVersion: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Configured version (optional, for apps that track configuration versions separately) /\n\t\tconfiguredVersion: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Whether the app configuration is up to date /\n\t\tisUpToDate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Whether to show the update button /\n\t\tshowUpdateButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether an update is currently in progress /\n\t\tupdating: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional key-value items to display.\n\t\t * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]\n\t\t /\n\t\tadditionalItems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/* Whether version info is loading /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Custom labels for the standard fields /\n\t\tlabels: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tappName: 'Application Name',\n\t\t\t\tversion: 'Version',\n\t\t\t\tconfiguredVersion: 'Configured Version',\n\t\t\t}),\n\t\t},\n\t},\n\n\temits: ['update'],\n\n\tsetup(props) {\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tcomputed: {\n\t\t/* @return {string} Button type based on update status /\n\t\tupdateButtonType() {\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'success'\n\t\t\t}\n\t\t\treturn 'error'\n\t\t},\n\n\t\t/* @return {boolean} Whether the update button should be disabled /\n\t\tupdateButtonDisabled() {\n\t\t\treturn this.isUpToDate \|\| this.updating\n\t\t},\n\n\t\t/* @return {string} Update button label text /\n\t\tupdateButtonText() {\n\t\t\tif (this.updating) {\n\t\t\t\treturn 'Updating...'\n\t\t\t}\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'Up to date'\n\t\t\t}\n\t\t\treturn 'Update'\n\t\t},\n\t},\n\n\tmethods: {\n\t\thandleUpdateClick() {\n\t\t\tif (!this.updateButtonDisabled) {\n\t\t\t\tthis.$emit('update')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-version-info__card {\n\tbackground: var(--color-background-hover);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.cn-version-info__card h4 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-version-info__details {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-version-info__item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 8px 0;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.cn-version-info__item:last-child {\n\tborder-bottom: none;\n}\n\n.cn-version-info__label {\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 14px;\n}\n\n.cn-version-info__value {\n\tfont-family: 'Courier New', Courier, monospace;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n\tfont-size: 14px;\n}\n\n/ Status classes for values */\n.cn-version-info__status--ok {\n\tcolor: var(--color-success);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--warning {\n\tcolor: var(--color-warning);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--error {\n\tcolor: var(--color-error);\n\tfont-weight: 600;\n}\n\n@media (max-width: 768px) {\n\t.cn-version-info__item {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 4px;\n\t}\n\n\t.cn-version-info__label {\n\t\tfont-weight: 600;\n\t}\n\n\t.cn-version-info__value {\n\t\tword-break: break-all;\n\t}\n}\n</style>\n"],"names":["CnSettingsSection","t"],"mappings":"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"}
1	+ {"version":3,"file":"CnVersionInfoCard.vue2.js","sources":["../../../../src/components/CnVersionInfoCard/CnVersionInfoCard.vue"],"sourcesContent":["<template>\n\t<CnSettingsSection\n\t\t:name=\"title\"\n\t\t:description=\"description\"\n\t\t:docUrl=\"docUrl\"\n\t\t:loading=\"loading\"\n\t\t:wide=\"isBoard && wide\"\n\t\t:loadingMessage=\"t('nextcloud-vue', 'Loading version information…')\">\n\t\t<!-- Actions slot (top right). Under the board look the same buttons sit\n\t\t in the footer row of the card instead. -->\n\t\t<template v-if=\"!isBoard\" #actions>\n\t\t\t<!-- Update Button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ updateButtonText }}\n\t\t\t</NcButton>\n\n\t\t\t<!-- Additional Actions (slot) -->\n\t\t\t<slot name=\"actions\" />\n\t\t</template>\n\n\t\t<!-- Main content (only shown when not loading) -->\n\t\t<div v-if=\"!loading\" class=\"cn-version-info\" :class=\"{ 'cn-version-info--board': isBoard }\">\n\t\t\t<!-- Version card with gray background -->\n\t\t\t<div class=\"cn-version-info__card\">\n\t\t\t\t<h4>{{ cardTitle }}</h4>\n\t\t\t\t<div class=\"cn-version-info__details\">\n\t\t\t\t\t<!-- Application Name -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.appName }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appName }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Version -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.version }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Configured Version (if provided) -->\n\t\t\t\t\t<div v-if=\"configuredVersion\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.configuredVersion }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ configuredVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Additional items -->\n\t\t\t\t\t<div v-for=\"item in additionalItems\" :key=\"item.label\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ item.label }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\" :class=\"item.statusClass\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Optional additional items slot -->\n\t\t\t\t\t<slot name=\"additional-items\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- The state, then the actions (re-import), after a hairline. -->\n\t\t\t\t<div v-if=\"isBoard\" class=\"cn-version-info__footer-row\" data-testid=\"cn-version-info-footer-row\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ updateButtonText }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Optional footer slot -->\n\t\t\t\t<slot name=\"footer\" />\n\t\t\t</div>\n\n\t\t\t<!-- Optional extra cards slot -->\n\t\t\t<slot name=\"extra-cards\" />\n\t\t</div>\n\t</CnSettingsSection>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcLoadingIcon } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Update from 'vue-material-design-icons/Update.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { CnSettingsSection } from '../CnSettingsSection/index.js'\n\n/*\n CnVersionInfoCard - App version information card for admin settings pages.\n \n Displays application name, version, and optional configured version with an\n * update button. Wraps CnSettingsSection for consistent admin settings layout.\n \n Every Conduction Nextcloud app should show this as the first section on its\n * admin settings page.\n \n Basic usage\n * ```vue\n * <CnVersionInfoCard app-name=\"Open Register\" app-version=\"0.2.3\" />\n * ```\n \n With update button\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Open Register\"\n * app-version=\"0.2.3\"\n * configured-version=\"0.2.2\"\n * :is-up-to-date=\"false\"\n * :show-update-button=\"true\"\n * :updating=\"isUpdating\"\n * @update=\"runUpdate\" />\n * ```\n \n With additional items and actions\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Pipelinq\"\n * app-version=\"0.1.7\"\n * :additional-items=\"[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]\">\n * <template #actions>\n * <NcButton @click=\"clearCache\">Clear App Store Cache</NcButton>\n * </template>\n * </CnVersionInfoCard>\n * ```\n /\nexport default {\n\tname: 'CnVersionInfoCard',\n\n\tcomponents: {\n\t\tCnSettingsSection,\n\t\tNcLoadingIcon,\n\t\tNcButton,\n\t\tCheck,\n\t\tUpdate,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The look the card is drawn in: `board` or `nextcloud`. Empty follows\n\t\t * the `cnLook` that CnAppRoot provides. Under `board` the facts are a\n\t\t * two-column list and the actions sit in a footer row.\n\t\t \n\t\t @spec openspec/changes/screens-chrome-parity/specs/settings-board-look/spec.md#requirement-the-version-card-takes-the-board-facts-and-footer\n\t\t /\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Under the board look the card spans the whole settings grid, as the\n\t\t * boards draw the version card. Set to `false` to keep it one card in\n\t\t * the grid. Without the board look it has no effect.\n\t\t \n\t\t @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid\n\t\t /\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Section title /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Version information'),\n\t\t},\n\n\t\t/* Section description /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Information about the current application installation'),\n\t\t},\n\n\t\t/* Documentation URL (shows info icon next to title) /\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Card heading text /\n\t\tcardTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Application information'),\n\t\t},\n\n\t\t/* Application name to display /\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Application version string /\n\t\tappVersion: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Configured version (optional, for apps that track configuration versions separately) /\n\t\tconfiguredVersion: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Whether the app configuration is up to date /\n\t\tisUpToDate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Whether to show the update button /\n\t\tshowUpdateButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether an update is currently in progress /\n\t\tupdating: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional key-value items to display.\n\t\t * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]\n\t\t /\n\t\tadditionalItems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/* Whether version info is loading /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Custom labels for the standard fields, `{ appName?, version?, configuredVersion? }`.\n\t\t * A label left out keeps the translated default.\n\t\t /\n\t\tlabels: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\temits: ['update'],\n\n\tsetup(props) {\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The field labels: the app's, else the library's in the reader's language.\n\t\t \n\t\t @return {{appName: string, version: string, configuredVersion: string}}\n\t\t * @spec openspec/changes/version-card-dutch-and-header/specs/settings-board-look/spec.md#requirement-the-admin-chrome-reads-in-the-readers-language\n\t\t /\n\t\tfieldLabels() {\n\t\t\treturn {\n\t\t\t\tappName: t('nextcloud-vue', 'Application name'),\n\t\t\t\tversion: t('nextcloud-vue', 'Version'),\n\t\t\t\tconfiguredVersion: t('nextcloud-vue', 'Configured version'),\n\t\t\t\t...(this.labels \|\| {}),\n\t\t\t}\n\t\t},\n\n\t\t/* @return {string} Button type based on update status /\n\t\tupdateButtonType() {\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'success'\n\t\t\t}\n\t\t\treturn 'error'\n\t\t},\n\n\t\t/* @return {boolean} Whether the update button should be disabled /\n\t\tupdateButtonDisabled() {\n\t\t\treturn this.isUpToDate \|\| this.updating\n\t\t},\n\n\t\t/* @return {string} Update button label text /\n\t\tupdateButtonText() {\n\t\t\tif (this.updating) {\n\t\t\t\treturn t('nextcloud-vue', 'Updating…')\n\t\t\t}\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn t('nextcloud-vue', 'Up to date')\n\t\t\t}\n\t\t\treturn t('nextcloud-vue', 'Update')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleUpdateClick() {\n\t\t\tif (!this.updateButtonDisabled) {\n\t\t\t\tthis.$emit('update')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-version-info__card {\n\tbackground: var(--color-background-hover);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.cn-version-info__card h4 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-version-info__details {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-version-info__item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 8px 0;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.cn-version-info__item:last-child {\n\tborder-bottom: none;\n}\n\n.cn-version-info__label {\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 14px;\n}\n\n.cn-version-info__value {\n\tfont-family: 'Courier New', Courier, monospace;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n\tfont-size: 14px;\n}\n\n/ Status classes for values */\n.cn-version-info__status--ok {\n\tcolor: var(--color-success);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--warning {\n\tcolor: var(--color-warning);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--error {\n\tcolor: var(--color-error);\n\tfont-weight: 600;\n}\n\n@media (max-width: 768px) {\n\t.cn-version-info__item {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 4px;\n\t}\n\n\t.cn-version-info__label {\n\t\tfont-weight: 600;\n\t}\n\n\t.cn-version-info__value {\n\t\tword-break: break-all;\n\t}\n}\n</style>\n"],"names":["CnSettingsSection","t"],"mappings":"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"}

package/dist/esm/components/CnVersionInfoCard/CnVersionInfoCard.vue3.js CHANGED Viewed

@@ -33,7 +33,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     description: $props.description,
     docUrl: $props.docUrl,
     loading: $props.loading,
-    loadingMessage: "Loading version information..."
+    wide: $setup.isBoard && $props.wide,
+    loadingMessage: $options.t('nextcloud-vue', 'Loading version information…')
   }, createSlots({
     default: withCtx(() => [
       (!$props.loading)
@@ -45,16 +46,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               createElementVNode("h4", null, toDisplayString($props.cardTitle), 1 /* TEXT */),
               createElementVNode("div", _hoisted_2, [
                 createElementVNode("div", _hoisted_3, [
-                  createElementVNode("span", _hoisted_4, toDisplayString($props.labels.appName) + ":", 1 /* TEXT */),
+                  createElementVNode("span", _hoisted_4, toDisplayString($options.fieldLabels.appName) + ":", 1 /* TEXT */),
                   createElementVNode("span", _hoisted_5, toDisplayString($props.appName), 1 /* TEXT */)
                 ]),
                 createElementVNode("div", _hoisted_6, [
-                  createElementVNode("span", _hoisted_7, toDisplayString($props.labels.version) + ":", 1 /* TEXT */),
+                  createElementVNode("span", _hoisted_7, toDisplayString($options.fieldLabels.version) + ":", 1 /* TEXT */),
                   createElementVNode("span", _hoisted_8, toDisplayString($props.appVersion), 1 /* TEXT */)
                 ]),
                 ($props.configuredVersion)
                   ? (openBlock(), createElementBlock("div", _hoisted_9, [
-                      createElementVNode("span", _hoisted_10, toDisplayString($props.labels.configuredVersion) + ":", 1 /* TEXT */),
+                      createElementVNode("span", _hoisted_10, toDisplayString($options.fieldLabels.configuredVersion) + ":", 1 /* TEXT */),
                       createElementVNode("span", _hoisted_11, toDisplayString($props.configuredVersion), 1 /* TEXT */)
                     ]))
                   : createCommentVNode("v-if", true),
@@ -151,7 +152,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           key: "0"
         }
       : undefined
-  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["name", "description", "docUrl", "loading"]))
+  ]), 1032 /* PROPS, DYNAMIC_SLOTS */, ["name", "description", "docUrl", "loading", "wide", "loadingMessage"]))
 }
 export { render };

package/dist/esm/components/CnVersionInfoCard/CnVersionInfoCard.vue3.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnVersionInfoCard.vue3.js","sources":["../../../../src/components/CnVersionInfoCard/CnVersionInfoCard.vue?vue&type=template&id=7a828af4&lang.js"],"sourcesContent":["<template>\n\t<CnSettingsSection\n\t\t:name=\"title\"\n\t\t:description=\"description\"\n\t\t:docUrl=\"docUrl\"\n\t\t:loading=\"loading\"\n\t\tloadingMessage=\"Loading version information...\">\n\t\t<!-- Actions slot (top right). Under the board look the same buttons sit\n\t\t in the footer row of the card instead. -->\n\t\t<template v-if=\"!isBoard\" #actions>\n\t\t\t<!-- Update Button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ updateButtonText }}\n\t\t\t</NcButton>\n\n\t\t\t<!-- Additional Actions (slot) -->\n\t\t\t<slot name=\"actions\" />\n\t\t</template>\n\n\t\t<!-- Main content (only shown when not loading) -->\n\t\t<div v-if=\"!loading\" class=\"cn-version-info\" :class=\"{ 'cn-version-info--board': isBoard }\">\n\t\t\t<!-- Version card with gray background -->\n\t\t\t<div class=\"cn-version-info__card\">\n\t\t\t\t<h4>{{ cardTitle }}</h4>\n\t\t\t\t<div class=\"cn-version-info__details\">\n\t\t\t\t\t<!-- Application Name -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ labels.appName }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appName }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Version -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ labels.version }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Configured Version (if provided) -->\n\t\t\t\t\t<div v-if=\"configuredVersion\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ labels.configuredVersion }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ configuredVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Additional items -->\n\t\t\t\t\t<div v-for=\"item in additionalItems\" :key=\"item.label\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ item.label }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\" :class=\"item.statusClass\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Optional additional items slot -->\n\t\t\t\t\t<slot name=\"additional-items\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- The state, then the actions (re-import), after a hairline. -->\n\t\t\t\t<div v-if=\"isBoard\" class=\"cn-version-info__footer-row\" data-testid=\"cn-version-info-footer-row\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ updateButtonText }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Optional footer slot -->\n\t\t\t\t<slot name=\"footer\" />\n\t\t\t</div>\n\n\t\t\t<!-- Optional extra cards slot -->\n\t\t\t<slot name=\"extra-cards\" />\n\t\t</div>\n\t</CnSettingsSection>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcLoadingIcon } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Update from 'vue-material-design-icons/Update.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { CnSettingsSection } from '../CnSettingsSection/index.js'\n\n/*\n CnVersionInfoCard - App version information card for admin settings pages.\n \n Displays application name, version, and optional configured version with an\n * update button. Wraps CnSettingsSection for consistent admin settings layout.\n \n Every Conduction Nextcloud app should show this as the first section on its\n * admin settings page.\n \n Basic usage\n * ```vue\n * <CnVersionInfoCard app-name=\"Open Register\" app-version=\"0.2.3\" />\n * ```\n \n With update button\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Open Register\"\n * app-version=\"0.2.3\"\n * configured-version=\"0.2.2\"\n * :is-up-to-date=\"false\"\n * :show-update-button=\"true\"\n * :updating=\"isUpdating\"\n * @update=\"runUpdate\" />\n * ```\n \n With additional items and actions\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Pipelinq\"\n * app-version=\"0.1.7\"\n * :additional-items=\"[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]\">\n * <template #actions>\n * <NcButton @click=\"clearCache\">Clear App Store Cache</NcButton>\n * </template>\n * </CnVersionInfoCard>\n * ```\n /\nexport default {\n\tname: 'CnVersionInfoCard',\n\n\tcomponents: {\n\t\tCnSettingsSection,\n\t\tNcLoadingIcon,\n\t\tNcButton,\n\t\tCheck,\n\t\tUpdate,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The look the card is drawn in: `board` or `nextcloud`. Empty follows\n\t\t * the `cnLook` that CnAppRoot provides. Under `board` the facts are a\n\t\t * two-column list and the actions sit in a footer row.\n\t\t \n\t\t @spec openspec/changes/screens-chrome-parity/specs/settings-board-look/spec.md#requirement-the-version-card-takes-the-board-facts-and-footer\n\t\t /\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Section title /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Version information'),\n\t\t},\n\n\t\t/* Section description /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Information about the current application installation'),\n\t\t},\n\n\t\t/* Documentation URL (shows info icon next to title) /\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Card heading text /\n\t\tcardTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Application information'),\n\t\t},\n\n\t\t/* Application name to display /\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Application version string /\n\t\tappVersion: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Configured version (optional, for apps that track configuration versions separately) /\n\t\tconfiguredVersion: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Whether the app configuration is up to date /\n\t\tisUpToDate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Whether to show the update button /\n\t\tshowUpdateButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether an update is currently in progress /\n\t\tupdating: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional key-value items to display.\n\t\t * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]\n\t\t /\n\t\tadditionalItems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/* Whether version info is loading /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Custom labels for the standard fields /\n\t\tlabels: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({\n\t\t\t\tappName: 'Application Name',\n\t\t\t\tversion: 'Version',\n\t\t\t\tconfiguredVersion: 'Configured Version',\n\t\t\t}),\n\t\t},\n\t},\n\n\temits: ['update'],\n\n\tsetup(props) {\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tcomputed: {\n\t\t/* @return {string} Button type based on update status /\n\t\tupdateButtonType() {\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'success'\n\t\t\t}\n\t\t\treturn 'error'\n\t\t},\n\n\t\t/* @return {boolean} Whether the update button should be disabled /\n\t\tupdateButtonDisabled() {\n\t\t\treturn this.isUpToDate \|\| this.updating\n\t\t},\n\n\t\t/* @return {string} Update button label text /\n\t\tupdateButtonText() {\n\t\t\tif (this.updating) {\n\t\t\t\treturn 'Updating...'\n\t\t\t}\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'Up to date'\n\t\t\t}\n\t\t\treturn 'Update'\n\t\t},\n\t},\n\n\tmethods: {\n\t\thandleUpdateClick() {\n\t\t\tif (!this.updateButtonDisabled) {\n\t\t\t\tthis.$emit('update')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-version-info__card {\n\tbackground: var(--color-background-hover);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.cn-version-info__card h4 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-version-info__details {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-version-info__item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 8px 0;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.cn-version-info__item:last-child {\n\tborder-bottom: none;\n}\n\n.cn-version-info__label {\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 14px;\n}\n\n.cn-version-info__value {\n\tfont-family: 'Courier New', Courier, monospace;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n\tfont-size: 14px;\n}\n\n/ Status classes for values */\n.cn-version-info__status--ok {\n\tcolor: var(--color-success);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--warning {\n\tcolor: var(--color-warning);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--error {\n\tcolor: var(--color-error);\n\tfont-weight: 600;\n}\n\n@media (max-width: 768px) {\n\t.cn-version-info__item {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 4px;\n\t}\n\n\t.cn-version-info__label {\n\t\tfont-weight: 600;\n\t}\n\n\t.cn-version-info__value {\n\t\tword-break: break-all;\n\t}\n}\n</style>\n"],"names":["_createBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_openBlock","_Fragment","_renderList","_renderSlot","_createTextVNode"],"mappings":"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"}
1	+ {"version":3,"file":"CnVersionInfoCard.vue3.js","sources":["../../../../src/components/CnVersionInfoCard/CnVersionInfoCard.vue?vue&type=template&id=17db98e4&lang.js"],"sourcesContent":["<template>\n\t<CnSettingsSection\n\t\t:name=\"title\"\n\t\t:description=\"description\"\n\t\t:docUrl=\"docUrl\"\n\t\t:loading=\"loading\"\n\t\t:wide=\"isBoard && wide\"\n\t\t:loadingMessage=\"t('nextcloud-vue', 'Loading version information…')\">\n\t\t<!-- Actions slot (top right). Under the board look the same buttons sit\n\t\t in the footer row of the card instead. -->\n\t\t<template v-if=\"!isBoard\" #actions>\n\t\t\t<!-- Update Button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ updateButtonText }}\n\t\t\t</NcButton>\n\n\t\t\t<!-- Additional Actions (slot) -->\n\t\t\t<slot name=\"actions\" />\n\t\t</template>\n\n\t\t<!-- Main content (only shown when not loading) -->\n\t\t<div v-if=\"!loading\" class=\"cn-version-info\" :class=\"{ 'cn-version-info--board': isBoard }\">\n\t\t\t<!-- Version card with gray background -->\n\t\t\t<div class=\"cn-version-info__card\">\n\t\t\t\t<h4>{{ cardTitle }}</h4>\n\t\t\t\t<div class=\"cn-version-info__details\">\n\t\t\t\t\t<!-- Application Name -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.appName }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appName }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Version -->\n\t\t\t\t\t<div class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.version }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ appVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Configured Version (if provided) -->\n\t\t\t\t\t<div v-if=\"configuredVersion\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ fieldLabels.configuredVersion }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\">{{ configuredVersion }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Additional items -->\n\t\t\t\t\t<div v-for=\"item in additionalItems\" :key=\"item.label\" class=\"cn-version-info__item\">\n\t\t\t\t\t\t<span class=\"cn-version-info__label\">{{ item.label }}:</span>\n\t\t\t\t\t\t<span class=\"cn-version-info__value\" :class=\"item.statusClass\">{{ item.value }}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Optional additional items slot -->\n\t\t\t\t\t<slot name=\"additional-items\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- The state, then the actions (re-import), after a hairline. -->\n\t\t\t\t<div v-if=\"isBoard\" class=\"cn-version-info__footer-row\" data-testid=\"cn-version-info-footer-row\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"showUpdateButton\"\n\t\t\t\t\t\t:type=\"updateButtonType\"\n\t\t\t\t\t\t:disabled=\"updateButtonDisabled\"\n\t\t\t\t\t\t@click=\"handleUpdateClick\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"updating\" :size=\"20\" />\n\t\t\t\t\t\t\t<Check v-else-if=\"isUpToDate\" :size=\"20\" />\n\t\t\t\t\t\t\t<Update v-else :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t{{ updateButtonText }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Optional footer slot -->\n\t\t\t\t<slot name=\"footer\" />\n\t\t\t</div>\n\n\t\t\t<!-- Optional extra cards slot -->\n\t\t\t<slot name=\"extra-cards\" />\n\t\t</div>\n\t</CnSettingsSection>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton, NcLoadingIcon } from '@nextcloud/vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport Update from 'vue-material-design-icons/Update.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { CnSettingsSection } from '../CnSettingsSection/index.js'\n\n/*\n CnVersionInfoCard - App version information card for admin settings pages.\n \n Displays application name, version, and optional configured version with an\n * update button. Wraps CnSettingsSection for consistent admin settings layout.\n \n Every Conduction Nextcloud app should show this as the first section on its\n * admin settings page.\n \n Basic usage\n * ```vue\n * <CnVersionInfoCard app-name=\"Open Register\" app-version=\"0.2.3\" />\n * ```\n \n With update button\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Open Register\"\n * app-version=\"0.2.3\"\n * configured-version=\"0.2.2\"\n * :is-up-to-date=\"false\"\n * :show-update-button=\"true\"\n * :updating=\"isUpdating\"\n * @update=\"runUpdate\" />\n * ```\n \n With additional items and actions\n * ```vue\n * <CnVersionInfoCard\n * app-name=\"Pipelinq\"\n * app-version=\"0.1.7\"\n * :additional-items=\"[{ label: 'Database', value: 'Connected', statusClass: 'cn-version-info__status--ok' }]\">\n * <template #actions>\n * <NcButton @click=\"clearCache\">Clear App Store Cache</NcButton>\n * </template>\n * </CnVersionInfoCard>\n * ```\n /\nexport default {\n\tname: 'CnVersionInfoCard',\n\n\tcomponents: {\n\t\tCnSettingsSection,\n\t\tNcLoadingIcon,\n\t\tNcButton,\n\t\tCheck,\n\t\tUpdate,\n\t},\n\n\tprops: {\n\t\t/\n\t\t The look the card is drawn in: `board` or `nextcloud`. Empty follows\n\t\t * the `cnLook` that CnAppRoot provides. Under `board` the facts are a\n\t\t * two-column list and the actions sit in a footer row.\n\t\t \n\t\t @spec openspec/changes/screens-chrome-parity/specs/settings-board-look/spec.md#requirement-the-version-card-takes-the-board-facts-and-footer\n\t\t /\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Under the board look the card spans the whole settings grid, as the\n\t\t * boards draw the version card. Set to `false` to keep it one card in\n\t\t * the grid. Without the board look it has no effect.\n\t\t \n\t\t @spec openspec/changes/board-version-card-full-width/specs/settings-board-look/spec.md#requirement-the-board-version-card-spans-the-settings-grid\n\t\t /\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Section title /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Version information'),\n\t\t},\n\n\t\t/* Section description /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Information about the current application installation'),\n\t\t},\n\n\t\t/* Documentation URL (shows info icon next to title) /\n\t\tdocUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Card heading text /\n\t\tcardTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Application information'),\n\t\t},\n\n\t\t/* Application name to display /\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Application version string /\n\t\tappVersion: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Configured version (optional, for apps that track configuration versions separately) /\n\t\tconfiguredVersion: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Whether the app configuration is up to date /\n\t\tisUpToDate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/* Whether to show the update button /\n\t\tshowUpdateButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/* Whether an update is currently in progress /\n\t\tupdating: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional key-value items to display.\n\t\t * Format: [{ label: 'Label', value: 'Value', statusClass: 'cn-version-info__status--ok' }]\n\t\t /\n\t\tadditionalItems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/* Whether version info is loading /\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Custom labels for the standard fields, `{ appName?, version?, configuredVersion? }`.\n\t\t * A label left out keeps the translated default.\n\t\t /\n\t\tlabels: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\n\temits: ['update'],\n\n\tsetup(props) {\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The field labels: the app's, else the library's in the reader's language.\n\t\t \n\t\t @return {{appName: string, version: string, configuredVersion: string}}\n\t\t * @spec openspec/changes/version-card-dutch-and-header/specs/settings-board-look/spec.md#requirement-the-admin-chrome-reads-in-the-readers-language\n\t\t /\n\t\tfieldLabels() {\n\t\t\treturn {\n\t\t\t\tappName: t('nextcloud-vue', 'Application name'),\n\t\t\t\tversion: t('nextcloud-vue', 'Version'),\n\t\t\t\tconfiguredVersion: t('nextcloud-vue', 'Configured version'),\n\t\t\t\t...(this.labels \|\| {}),\n\t\t\t}\n\t\t},\n\n\t\t/* @return {string} Button type based on update status /\n\t\tupdateButtonType() {\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn 'success'\n\t\t\t}\n\t\t\treturn 'error'\n\t\t},\n\n\t\t/* @return {boolean} Whether the update button should be disabled /\n\t\tupdateButtonDisabled() {\n\t\t\treturn this.isUpToDate \|\| this.updating\n\t\t},\n\n\t\t/* @return {string} Update button label text /\n\t\tupdateButtonText() {\n\t\t\tif (this.updating) {\n\t\t\t\treturn t('nextcloud-vue', 'Updating…')\n\t\t\t}\n\t\t\tif (this.isUpToDate) {\n\t\t\t\treturn t('nextcloud-vue', 'Up to date')\n\t\t\t}\n\t\t\treturn t('nextcloud-vue', 'Update')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleUpdateClick() {\n\t\t\tif (!this.updateButtonDisabled) {\n\t\t\t\tthis.$emit('update')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-version-info__card {\n\tbackground: var(--color-background-hover);\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tpadding: 20px;\n\tmargin-bottom: 20px;\n}\n\n.cn-version-info__card h4 {\n\tmargin: 0 0 16px 0;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n}\n\n.cn-version-info__details {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 12px;\n}\n\n.cn-version-info__item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 8px 0;\n\tborder-bottom: 1px solid var(--color-border);\n}\n\n.cn-version-info__item:last-child {\n\tborder-bottom: none;\n}\n\n.cn-version-info__label {\n\tfont-weight: 500;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 14px;\n}\n\n.cn-version-info__value {\n\tfont-family: 'Courier New', Courier, monospace;\n\tfont-weight: 600;\n\tcolor: var(--color-main-text);\n\tfont-size: 14px;\n}\n\n/ Status classes for values */\n.cn-version-info__status--ok {\n\tcolor: var(--color-success);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--warning {\n\tcolor: var(--color-warning);\n\tfont-weight: 600;\n}\n\n.cn-version-info__status--error {\n\tcolor: var(--color-error);\n\tfont-weight: 600;\n}\n\n@media (max-width: 768px) {\n\t.cn-version-info__item {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t\tgap: 4px;\n\t}\n\n\t.cn-version-info__label {\n\t\tfont-weight: 600;\n\t}\n\n\t.cn-version-info__value {\n\t\tword-break: break-all;\n\t}\n}\n</style>\n"],"names":["_createBlock","_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_openBlock","_Fragment","_renderList","_renderSlot","_createTextVNode"],"mappings":"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"}

package/dist/esm/components/CnWidgetCardGrid/CnWidgetCardGrid.vue2.js CHANGED Viewed

@@ -1,5 +1,8 @@
 import { translate } from '@nextcloud/l10n';
+import { inject, ref } from 'vue';
 import __sfc_main from '../CnObjectCard/CnObjectCard.vue.js';
+import { useEndpointSource } from '../../composables/useEndpointSource.js';
+import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js';
 import __sfc_main$1 from '../CnWidgetWrapper/CnWidgetWrapper.vue.js';
 /**
@@ -8,7 +11,9 @@ import __sfc_main$1 from '../CnWidgetWrapper/CnWidgetWrapper.vue.js';
  * Renders the card grid on the shared CnWidgetWrapper chrome, which supplies
  * the widget title and the standard overflow Actions menu (Refresh /
  * Documentation / Request a feature). Each entry in `objects` is rendered as a
- * CnObjectCard.
+ * CnObjectCard. Without `objects`, an `endpointSource` (`{ url, method?,
+ * params?, responsePath? }`, as on the object table) supplies them: the
+ * payload after `responsePath` is the array of objects.
  */
 var script = {
 	name: 'CnWidgetCardGrid',
@@ -48,6 +53,53 @@ var script = {
 			type: Array,
 			default: () => [],
 		},
+		/**
+		 * Read the objects from an app endpoint: `{ url, method?, params?,
+		 * responsePath? }`, with the token grammar of widget filters. Ignored
+		 * while `objects` holds any.
+		 *
+		 * @type {object|null}
+		 */
+		endpointSource: {
+			type: Object,
+			default: null,
+		},
+	},
+	setup(props) {
+		const objectCtxRaw = inject('cnObjectContext', null);
+		const detailCtxRaw = inject('cnDetailObjectContext', null);
+		const workspaceRaw = inject('cnWorkspaceContext', ref(null));
+		const appConfigRaw = inject('cnAppConfig', ref({}));
+		const unwrap = (v) => ((v && typeof v === 'object' && 'value' in v) ? v.value : v);
+		const { data, loading } = useEndpointSource(
+			() => ((props.objects && props.objects.length > 0) ? null : props.endpointSource),
+			{
+				ctx: () => ({
+					...(resolveObjectTokenContext(objectCtxRaw, detailCtxRaw) || {}),
+					workspace: unwrap(workspaceRaw) || {},
+					config: unwrap(appConfigRaw) || {},
+				}),
+				widgetId: () => props.widgetId,
+			},
+		);
+		return { epData: data, epLoading: loading }
+	},
+	computed: {
+		/**
+		 * The objects drawn: `objects` when given, else the endpoint's array.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/endpoint-source-card-grid-record-list/specs/dashboard-page/spec.md#requirement-a-record-list-and-a-card-grid-can-read-an-endpoint
+		 */
+		cards() {
+			if (this.objects && this.objects.length > 0) {
+				return this.objects
+			}
+			return Array.isArray(this.epData) ? this.epData : []
+		},
 	},
 };

package/dist/esm/components/CnWidgetCardGrid/CnWidgetCardGrid.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnWidgetCardGrid.vue2.js","sources":["../../../../src/components/CnWidgetCardGrid/CnWidgetCardGrid.vue"],"sourcesContent":["<!--\n CnWidgetCardGrid — built-in v2 widget rendering a grid of CnObjectCard items.\n\n Referenced in v2 manifests via `widgetKey: \"card-grid\"`. Renders the grid on\n the shared CnWidgetWrapper chrome (title + standard overflow Actions menu:\n Refresh / Documentation / Request a feature) and renders each item in\n `objects` as a CnObjectCard, replacing the v1.3.0 `cardComponent` field\n pattern.\n\n Spec: REQ-MVR-010 (manifest-v2-renderer) — built-in widget: card-grid\n-->\n<template>\n\t<CnWidgetWrapper\n\t\t:title=\"title\"\n\t\t:widgetId=\"widgetId\"\n\t\t:documentationUrl=\"documentationUrl\"\n\t\tflush>\n\t\t<div class=\"cn-widget-card-grid\">\n\t\t\t<CnObjectCard\n\t\t\t\tv-for=\"(item, index) in ~~objects~~\"\n\t\t\t\t:key=\"item.id \|\| index\"\n\t\t\t\t:object=\"item\" />\n\t\t</div>\n\t</CnWidgetWrapper>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport CnObjectCard from '../CnObjectCard/CnObjectCard.vue'\nimport { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'\n\n/*\n CnWidgetCardGrid — built-in v2 widget rendering a grid of CnObjectCard items.\n \n Renders the card grid on the shared CnWidgetWrapper chrome, which supplies\n * the widget title and the standard overflow Actions menu (Refresh /\n * Documentation / Request a feature). Each entry in `objects` is rendered as a\n * CnObjectCard.\n /\nexport default {\n\tname: 'CnWidgetCardGrid',\n\n\tcomponents: { CnObjectCard, CnWidgetWrapper },\n\n\tprops: {\n\t\t/\n\t\t Widget title shown in the CnWidgetWrapper header.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Items'),\n\t\t},\n\n\t\t/\n\t\t Documentation link surfaced in the widget's overflow Actions menu.\n\t\t * Empty (the default) hides the Documentation item; the Refresh and\n\t\t * Request-a-feature items always render.\n\t\t /\n\t\tdocumentationUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Stable id forwarded to the widget chrome for the Refresh /\n\t\t * Request-a-feature payloads.\n\t\t /\n\t\twidgetId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Array of object records to render as cards. /\n\t\tobjects: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n}\n</script>\n\n<style>\n.cn-widget-card-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n\tgap: calc(2 var(--default-grid-baseline, 4px));\n}\n</style>\n"],"names":["CnObjectCard","CnWidgetWrapper","t"],"mappings":"~~;;;;AA+BA~~;AACC;AACA;AACA;;AAEA~~;;;AAGD~~,aAAe;CACd,IAAI,EAAE,kBAAkB;;AAExB,CAAA,UAAU,EAAE,gBAAEA,UAAY,mBAAEC,cAAiB;;AAE7C,CAAA,KAAK,EAAE;AACN;AACC;;AAED,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMC,SAAC,CAAC,eAAe,EAAE,OAAO,CAAC;GAC1C;;AAED;;;AAGC;;AAED,EAAA,gBAAgB,EAAE;GACjB,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;;;;AAIA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;EACD;AACF;;;;"}
1	+ {"version":3,"file":"CnWidgetCardGrid.vue2.js","sources":["../../../../src/components/CnWidgetCardGrid/CnWidgetCardGrid.vue"],"sourcesContent":["<!--\n CnWidgetCardGrid — built-in v2 widget rendering a grid of CnObjectCard items.\n\n Referenced in v2 manifests via `widgetKey: \"card-grid\"`. Renders the grid on\n the shared CnWidgetWrapper chrome (title + standard overflow Actions menu:\n Refresh / Documentation / Request a feature) and renders each item in\n `objects` as a CnObjectCard, replacing the v1.3.0 `cardComponent` field\n pattern.\n\n Spec: REQ-MVR-010 (manifest-v2-renderer) — built-in widget: card-grid\n-->\n<template>\n\t<CnWidgetWrapper\n\t\t:title=\"title\"\n\t\t:widgetId=\"widgetId\"\n\t\t:documentationUrl=\"documentationUrl\"\n\t\t:refreshing=\"epLoading\"\n\t\tflush>\n\t\t<div class=\"cn-widget-card-grid\">\n\t\t\t<CnObjectCard\n\t\t\t\tv-for=\"(item, index) in cards\"\n\t\t\t\t:key=\"item.id \|\| index\"\n\t\t\t\t:object=\"item\" />\n\t\t</div>\n\t</CnWidgetWrapper>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { inject, ref } from 'vue'\nimport CnObjectCard from '../CnObjectCard/CnObjectCard.vue'\nimport { useEndpointSource } from '../../composables/useEndpointSource.js'\nimport { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'\nimport { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'\n\n/*\n CnWidgetCardGrid — built-in v2 widget rendering a grid of CnObjectCard items.\n \n Renders the card grid on the shared CnWidgetWrapper chrome, which supplies\n * the widget title and the standard overflow Actions menu (Refresh /\n * Documentation / Request a feature). Each entry in `objects` is rendered as a\n * CnObjectCard. Without `objects`, an `endpointSource` (`{ url, method?,\n * params?, responsePath? }`, as on the object table) supplies them: the\n * payload after `responsePath` is the array of objects.\n /\nexport default {\n\tname: 'CnWidgetCardGrid',\n\n\tcomponents: { CnObjectCard, CnWidgetWrapper },\n\n\tprops: {\n\t\t/\n\t\t Widget title shown in the CnWidgetWrapper header.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Items'),\n\t\t},\n\n\t\t/\n\t\t Documentation link surfaced in the widget's overflow Actions menu.\n\t\t * Empty (the default) hides the Documentation item; the Refresh and\n\t\t * Request-a-feature items always render.\n\t\t /\n\t\tdocumentationUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Stable id forwarded to the widget chrome for the Refresh /\n\t\t * Request-a-feature payloads.\n\t\t /\n\t\twidgetId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Array of object records to render as cards. /\n\t\tobjects: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/\n\t\t Read the objects from an app endpoint: `{ url, method?, params?,\n\t\t * responsePath? }`, with the token grammar of widget filters. Ignored\n\t\t * while `objects` holds any.\n\t\t \n\t\t @type {object\|null}\n\t\t /\n\t\tendpointSource: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst objectCtxRaw = inject('cnObjectContext', null)\n\t\tconst detailCtxRaw = inject('cnDetailObjectContext', null)\n\t\tconst workspaceRaw = inject('cnWorkspaceContext', ref(null))\n\t\tconst appConfigRaw = inject('cnAppConfig', ref({}))\n\t\tconst unwrap = (v) => ((v && typeof v === 'object' && 'value' in v) ? v.value : v)\n\t\tconst { data, loading } = useEndpointSource(\n\t\t\t() => ((props.objects && props.objects.length > 0) ? null : props.endpointSource),\n\t\t\t{\n\t\t\t\tctx: () => ({\n\t\t\t\t\t...(resolveObjectTokenContext(objectCtxRaw, detailCtxRaw) \|\| {}),\n\t\t\t\t\tworkspace: unwrap(workspaceRaw) \|\| {},\n\t\t\t\t\tconfig: unwrap(appConfigRaw) \|\| {},\n\t\t\t\t}),\n\t\t\t\twidgetId: () => props.widgetId,\n\t\t\t},\n\t\t)\n\t\treturn { epData: data, epLoading: loading }\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The objects drawn: `objects` when given, else the endpoint's array.\n\t\t \n\t\t @return {Array<object>}\n\t\t * @spec openspec/changes/endpoint-source-card-grid-record-list/specs/dashboard-page/spec.md#requirement-a-record-list-and-a-card-grid-can-read-an-endpoint\n\t\t /\n\t\tcards() {\n\t\t\tif (this.objects && this.objects.length > 0) {\n\t\t\t\treturn this.objects\n\t\t\t}\n\t\t\treturn Array.isArray(this.epData) ? this.epData : []\n\t\t},\n\t},\n}\n</script>\n\n<style>\n.cn-widget-card-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n\tgap: calc(2 var(--default-grid-baseline, 4px));\n}\n</style>\n"],"names":["CnObjectCard","CnWidgetWrapper","t"],"mappings":";;;;;;;AAmCA;AACC;AACA;AACA;;AAEA;AACA;;;;AAID,aAAe;CACd,IAAI,EAAE,kBAAkB;;AAExB,CAAA,UAAU,EAAE,gBAAEA,UAAY,mBAAEC,cAAiB;;AAE7C,CAAA,KAAK,EAAE;AACN;AACC;;AAED,EAAA,KAAK,EAAE;GACN,IAAI,EAAE,MAAM;AACZ,GAAA,OAAO,EAAE,MAAMC,SAAC,CAAC,eAAe,EAAE,OAAO,CAAC;GAC1C;;AAED;;;AAGC;;AAED,EAAA,gBAAgB,EAAE;GACjB,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;;;;AAIA,EAAA,QAAQ,EAAE;GACT,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,EAAE;GACX;;AAED;AACA,EAAA,OAAO,EAAE;GACR,IAAI,EAAE,KAAK;AACX,GAAA,OAAO,EAAE,MAAM,EAAE;GACjB;;AAED;;;;AAIC;AACA;;AAED,EAAA,cAAc,EAAE;GACf,IAAI,EAAE,MAAM;GACZ,OAAO,EAAE,IAAI;GACb;EACD;;CAED,KAAK,CAAC,KAAK,EAAE;EACZ,MAAM,YAAW,GAAI,MAAM,CAAC,iBAAiB,EAAE,IAAI,EAAA;EACnD,MAAM,YAAW,GAAI,MAAM,CAAC,uBAAuB,EAAE,IAAI,EAAA;EACzD,MAAM,YAAa,GAAE,MAAM,CAAC,oBAAoB,EAAE,GAAG,CAAC,IAAI,CAAC,EAAA;EAC3D,MAAM,YAAW,GAAI,MAAM,CAAC,aAAa,EAAE,GAAG,CAAC,EAAE,CAAC,EAAA;AAClD,EAAA,MAAM,MAAK,GAAI,CAAC,CAAC,MAAM,CAAC,CAAE,IAAG,OAAO,CAAA,KAAM,QAAS,IAAG,OAAM,IAAK,CAAC,IAAI,CAAC,CAAC,KAAI,GAAI,CAAC,EAAA;AACjF,EAAA,MAAM,EAAE,IAAI,EAAE,OAAM,EAAI,GAAE,iBAAiB;AAC1C,GAAA,OAAO,CAAC,KAAK,CAAC,OAAM,IAAK,KAAK,CAAC,OAAO,CAAC,MAAK,GAAI,CAAC,IAAI,IAAK,GAAE,KAAK,CAAC,cAAc,CAAC;AACjF,GAAA;AACC,IAAA,GAAG,EAAE,OAAO;KACX,IAAI,yBAAyB,CAAC,YAAY,EAAE,YAAY,CAAA,IAAK,EAAE,CAAC;AAChE,KAAA,SAAS,EAAE,MAAM,CAAC,YAAY,CAAA,IAAK,EAAE;AACrC,KAAA,MAAM,EAAE,MAAM,CAAC,YAAY,CAAA,IAAK,EAAE;AACnC,KAAC,CAAC;IACF,QAAQ,EAAE,MAAM,KAAK,CAAC,QAAQ;IAC9B;AACF,IAAA;AACA,EAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAQ,EAAA;EAC1C;;AAED,CAAA,QAAQ,EAAE;AACT;;AAEC;;AAEA;;AAED,EAAA,KAAK,GAAG;AACP,GAAA,IAAI,IAAI,CAAC,OAAQ,IAAG,IAAI,CAAC,OAAO,CAAC,MAAO,GAAE,CAAC,EAAE;AAC5C,IAAA,OAAO,IAAI,CAAC,OAAM;AACnB,IAAA;GACA,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAA,GAAI,IAAI,CAAC,MAAK,GAAI,EAAC;GACnD;EACD;AACF;;;;"}

package/dist/esm/components/CnWidgetCardGrid/CnWidgetCardGrid.vue3.js CHANGED Viewed

@@ -10,11 +10,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     title: $props.title,
     widgetId: $props.widgetId,
     documentationUrl: $props.documentationUrl,
+    refreshing: $setup.epLoading,
     flush: ""
   }, {
     default: withCtx(() => [
       createElementVNode("div", _hoisted_1, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList($props.objects, (item, index) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList($options.cards, (item, index) => {
           return (openBlock(), createBlock(_component_CnObjectCard, {
             key: item.id || index,
             object: item
@@ -23,7 +24,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["title", "widgetId", "documentationUrl"]))
+  }, 8 /* PROPS */, ["title", "widgetId", "documentationUrl", "refreshing"]))
 }
 export { render };

package/dist/esm/components/CnWidgetCardGrid/CnWidgetCardGrid.vue3.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CnWidgetCardGrid.vue3.js","sources":["../../../../src/components/CnWidgetCardGrid/CnWidgetCardGrid.vue?vue&type=template&id=~~e604ccb8~~&lang.js"],"sourcesContent":["<!--\n CnWidgetCardGrid — built-in v2 widget rendering a grid of CnObjectCard items.\n\n Referenced in v2 manifests via `widgetKey: \"card-grid\"`. Renders the grid on\n the shared CnWidgetWrapper chrome (title + standard overflow Actions menu:\n Refresh / Documentation / Request a feature) and renders each item in\n `objects` as a CnObjectCard, replacing the v1.3.0 `cardComponent` field\n pattern.\n\n Spec: REQ-MVR-010 (manifest-v2-renderer) — built-in widget: card-grid\n-->\n<template>\n\t<CnWidgetWrapper\n\t\t:title=\"title\"\n\t\t:widgetId=\"widgetId\"\n\t\t:documentationUrl=\"documentationUrl\"\n\t\tflush>\n\t\t<div class=\"cn-widget-card-grid\">\n\t\t\t<CnObjectCard\n\t\t\t\tv-for=\"(item, index) in ~~objects~~\"\n\t\t\t\t:key=\"item.id \|\| index\"\n\t\t\t\t:object=\"item\" />\n\t\t</div>\n\t</CnWidgetWrapper>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport CnObjectCard from '../CnObjectCard/CnObjectCard.vue'\nimport { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'\n\n/*\n CnWidgetCardGrid — built-in v2 widget rendering a grid of CnObjectCard items.\n \n Renders the card grid on the shared CnWidgetWrapper chrome, which supplies\n * the widget title and the standard overflow Actions menu (Refresh /\n * Documentation / Request a feature). Each entry in `objects` is rendered as a\n * CnObjectCard.\n /\nexport default {\n\tname: 'CnWidgetCardGrid',\n\n\tcomponents: { CnObjectCard, CnWidgetWrapper },\n\n\tprops: {\n\t\t/\n\t\t Widget title shown in the CnWidgetWrapper header.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Items'),\n\t\t},\n\n\t\t/\n\t\t Documentation link surfaced in the widget's overflow Actions menu.\n\t\t * Empty (the default) hides the Documentation item; the Refresh and\n\t\t * Request-a-feature items always render.\n\t\t /\n\t\tdocumentationUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Stable id forwarded to the widget chrome for the Refresh /\n\t\t * Request-a-feature payloads.\n\t\t /\n\t\twidgetId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Array of object records to render as cards. /\n\t\tobjects: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n}\n</script>\n\n<style>\n.cn-widget-card-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n\tgap: calc(2 var(--default-grid-baseline, 4px));\n}\n</style>\n"],"names":[~~"_createBlock"~~],"mappings":"~~;;;;;;;;uBAuBCA~~;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"CnWidgetCardGrid.vue3.js","sources":["../../../../src/components/CnWidgetCardGrid/CnWidgetCardGrid.vue?vue&type=template&id=4c7ebb07&lang.js"],"sourcesContent":["<!--\n CnWidgetCardGrid — built-in v2 widget rendering a grid of CnObjectCard items.\n\n Referenced in v2 manifests via `widgetKey: \"card-grid\"`. Renders the grid on\n the shared CnWidgetWrapper chrome (title + standard overflow Actions menu:\n Refresh / Documentation / Request a feature) and renders each item in\n `objects` as a CnObjectCard, replacing the v1.3.0 `cardComponent` field\n pattern.\n\n Spec: REQ-MVR-010 (manifest-v2-renderer) — built-in widget: card-grid\n-->\n<template>\n\t<CnWidgetWrapper\n\t\t:title=\"title\"\n\t\t:widgetId=\"widgetId\"\n\t\t:documentationUrl=\"documentationUrl\"\n\t\t:refreshing=\"epLoading\"\n\t\tflush>\n\t\t<div class=\"cn-widget-card-grid\">\n\t\t\t<CnObjectCard\n\t\t\t\tv-for=\"(item, index) in cards\"\n\t\t\t\t:key=\"item.id \|\| index\"\n\t\t\t\t:object=\"item\" />\n\t\t</div>\n\t</CnWidgetWrapper>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { inject, ref } from 'vue'\nimport CnObjectCard from '../CnObjectCard/CnObjectCard.vue'\nimport { useEndpointSource } from '../../composables/useEndpointSource.js'\nimport { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'\nimport { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'\n\n/*\n CnWidgetCardGrid — built-in v2 widget rendering a grid of CnObjectCard items.\n \n Renders the card grid on the shared CnWidgetWrapper chrome, which supplies\n * the widget title and the standard overflow Actions menu (Refresh /\n * Documentation / Request a feature). Each entry in `objects` is rendered as a\n * CnObjectCard. Without `objects`, an `endpointSource` (`{ url, method?,\n * params?, responsePath? }`, as on the object table) supplies them: the\n * payload after `responsePath` is the array of objects.\n /\nexport default {\n\tname: 'CnWidgetCardGrid',\n\n\tcomponents: { CnObjectCard, CnWidgetWrapper },\n\n\tprops: {\n\t\t/\n\t\t Widget title shown in the CnWidgetWrapper header.\n\t\t /\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: () => t('nextcloud-vue', 'Items'),\n\t\t},\n\n\t\t/\n\t\t Documentation link surfaced in the widget's overflow Actions menu.\n\t\t * Empty (the default) hides the Documentation item; the Refresh and\n\t\t * Request-a-feature items always render.\n\t\t /\n\t\tdocumentationUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Stable id forwarded to the widget chrome for the Refresh /\n\t\t * Request-a-feature payloads.\n\t\t /\n\t\twidgetId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Array of object records to render as cards. /\n\t\tobjects: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/\n\t\t Read the objects from an app endpoint: `{ url, method?, params?,\n\t\t * responsePath? }`, with the token grammar of widget filters. Ignored\n\t\t * while `objects` holds any.\n\t\t \n\t\t @type {object\|null}\n\t\t /\n\t\tendpointSource: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst objectCtxRaw = inject('cnObjectContext', null)\n\t\tconst detailCtxRaw = inject('cnDetailObjectContext', null)\n\t\tconst workspaceRaw = inject('cnWorkspaceContext', ref(null))\n\t\tconst appConfigRaw = inject('cnAppConfig', ref({}))\n\t\tconst unwrap = (v) => ((v && typeof v === 'object' && 'value' in v) ? v.value : v)\n\t\tconst { data, loading } = useEndpointSource(\n\t\t\t() => ((props.objects && props.objects.length > 0) ? null : props.endpointSource),\n\t\t\t{\n\t\t\t\tctx: () => ({\n\t\t\t\t\t...(resolveObjectTokenContext(objectCtxRaw, detailCtxRaw) \|\| {}),\n\t\t\t\t\tworkspace: unwrap(workspaceRaw) \|\| {},\n\t\t\t\t\tconfig: unwrap(appConfigRaw) \|\| {},\n\t\t\t\t}),\n\t\t\t\twidgetId: () => props.widgetId,\n\t\t\t},\n\t\t)\n\t\treturn { epData: data, epLoading: loading }\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t The objects drawn: `objects` when given, else the endpoint's array.\n\t\t \n\t\t @return {Array<object>}\n\t\t * @spec openspec/changes/endpoint-source-card-grid-record-list/specs/dashboard-page/spec.md#requirement-a-record-list-and-a-card-grid-can-read-an-endpoint\n\t\t /\n\t\tcards() {\n\t\t\tif (this.objects && this.objects.length > 0) {\n\t\t\t\treturn this.objects\n\t\t\t}\n\t\t\treturn Array.isArray(this.epData) ? this.epData : []\n\t\t},\n\t},\n}\n</script>\n\n<style>\n.cn-widget-card-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n\tgap: calc(2 var(--default-grid-baseline, 4px));\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;AAwBG,IAAA,KAAK,EAAE,MAAK,CAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/CnWidgetObjectTable/CnWidgetObjectTable.vue.js CHANGED Viewed

@@ -2,7 +2,7 @@ import script from './CnWidgetObjectTable.vue2.js';
 import { render } from './CnWidgetObjectTable.vue3.js';
 script.render = render;
-script.__scopeId = "data-v-b6ed17ee";
+script.__scopeId = "data-v-d8f8d15a";
 const __sfc_main = script;
 export { __sfc_main as default };

package/dist/esm/components/CnWidgetObjectTable/CnWidgetObjectTable.vue2.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatch
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js';
 import { pageFilter, pageSort } from '../../utils/pageControls.js';
 import { dropOptionalUnresolved, resolveFilterTokens, hasUnresolvedTokens } from '../../utils/resolveFilterTokens.js';
+import { fieldsFromSchema } from '../../utils/schema.js';
 import { readVisibleWhenPath, compareVisibleWhen } from '../../utils/visibleWhen.js';
 import __sfc_main$3 from '../CnIcon/CnIcon.vue.js';
 import __sfc_main$2 from '../CnRowActions/CnRowActions.vue.js';
@@ -150,6 +151,12 @@ var script = {
 		 * the object form (`{ key, label, sortable, width, cellClass,
 		 * formatter, widget, format, aggregate }`) both pass straight through.
 		 *
+		 * A column that holds a reference shows the referenced object's label
+		 * with `labelField` (the property to show) and/or `resolve`
+		 * (`{ register, schema, labelField? }`, where the reference points).
+		 * Without `resolve` the target is read off the source schema's `$ref`
+		 * for that property. Such a column renders as an `fkResolve` cell.
+		 *
 		 * @type {Array<object|string>}
 		 */
 		columns: {
@@ -388,6 +395,8 @@ var script = {
 			confirmAction: null,
 			/** @type {object|null} The row the pending confirm-gated action targets. */
 			confirmRow: null,
+			/** Where each label column's references point, read off the source schema, by column key. */
+			refTargets: {},
 		}
 	},
@@ -557,6 +566,57 @@ var script = {
 			return params
 		},
+		/**
+		 * Columns that ask for the label of the object they reference
+		 * (`labelField` or `resolve`) and draw no cell widget of their own.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/dashboard-table-reference-labels/specs/dashboard-page/spec.md#requirement-a-dashboard-table-shows-a-referenced-objects-label
+		 */
+		refLabelColumns() {
+			return (this.columns || []).filter((col) => col && typeof col === 'object' && !col.widget
+				&& ((typeof col.labelField === 'string' && col.labelField !== '') || (col.resolve && typeof col.resolve === 'object')))
+		},
+		/**
+		 * The columns handed to CnDataTable: a label column whose target is
+		 * known renders as an `fkResolve` cell; every other column as given.
+		 *
+		 * @return {Array<object|string>}
+		 * @spec openspec/changes/dashboard-table-reference-labels/specs/dashboard-page/spec.md#requirement-a-dashboard-table-shows-a-referenced-objects-label
+		 */
+		renderedColumns() {
+			if (this.refLabelColumns.length === 0) {
+				return this.columns
+			}
+			return this.columns.map((col) => {
+				if (!this.refLabelColumns.includes(col)) {
+					return col
+				}
+				const target = this.refTargetOf(col);
+				if (!target) {
+					return col
+				}
+				const labelField = (col.resolve && typeof col.resolve.labelField === 'string' && col.resolve.labelField) || col.labelField || 'name';
+				return { ...col, widget: 'fkResolve', widgetProps: { ...(col.widgetProps || {}), register: target.register, schema: target.schema, labelField } }
+			})
+		},
+		/**
+		 * The label columns whose target has to be read off the source schema.
+		 *
+		 * @return {string[]} Their keys.
+		 */
+		schemaRefKeys() {
+			return this.refLabelColumns.filter((col) => !this.explicitTarget(col)).map((col) => col.key)
+		},
+		/** @return {string} The label columns to look up and the source schema, to read again when either changes. */
+		refTargetsKey() {
+			const src = this.source || {};
+			return `${src.register || ''}/${src.schema || ''}:${this.schemaRefKeys.join('|')}`
+		},
 		/**
 		 * `$props` minus the chrome props (`title`, `documentationUrl`,
 		 * `widgetId`, `hideWrapper`) and the widget-only props (`source`,
@@ -588,6 +648,9 @@ var script = {
 			if (this.compiledRowClass) {
 				inner.rowClass = this.compiledRowClass;
 			}
+			if (this.refLabelColumns.length > 0) {
+				inner.columns = this.renderedColumns;
+			}
 			if (this.selfFetchActive) {
 				inner.register = this.source.register;
 				inner.schemaId = this.source.schema;
@@ -723,6 +786,16 @@ var script = {
 		},
 	},
+	watch: {
+		refTargetsKey() {
+			this.loadRefTargets();
+		},
+	},
+	mounted() {
+		this.loadRefTargets();
+	},
 	methods: {
 		/**
 		 * Entry point for every declarative action trigger (row menu or
@@ -833,6 +906,68 @@ var script = {
 			}
 		},
+		/**
+		 * Where a label column's references point when the column says so
+		 * itself (`resolve.register` and `resolve.schema`).
+		 *
+		 * @param {object} col The column.
+		 * @return {{register: string, schema: string}|null}
+		 */
+		explicitTarget(col) {
+			const r = col && col.resolve;
+			if (r && typeof r === 'object' && typeof r.register === 'string' && r.register !== '' && typeof r.schema === 'string' && r.schema !== '') {
+				return { register: r.register, schema: r.schema }
+			}
+			return null
+		},
+		/**
+		 * Where a label column's references point: the column's `resolve`, else
+		 * the source schema's `$ref` for the property, else null (the column
+		 * then shows the raw value).
+		 *
+		 * @param {object} col The column.
+		 * @return {{register: string, schema: string}|null}
+		 */
+		refTargetOf(col) {
+			return this.explicitTarget(col) || this.refTargets[col.key] || null
+		},
+		/**
+		 * Read the source schema once and note, for each label column without a
+		 * `resolve`, the register and schema its property's `$ref` names. A
+		 * failed or missing schema leaves those columns showing raw values.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/dashboard-table-reference-labels/specs/dashboard-page/spec.md#requirement-a-dashboard-table-shows-a-referenced-objects-label
+		 */
+		async loadRefTargets() {
+			const keys = this.schemaRefKeys;
+			const src = this.source;
+			if (keys.length === 0 || !src || typeof src.register !== 'string' || src.register === '' || src.register.startsWith('@') || typeof src.schema !== 'string' || src.schema === '') {
+				return
+			}
+			const store = this.getObjectStore();
+			if (!store || typeof store.fetchSchema !== 'function') {
+				return
+			}
+			const type = resolveObjectOpType(store, { register: src.register, schema: src.schema }, { exactSchema: true });
+			const schema = await store.fetchSchema(type).catch(() => null);
+			if (!schema || typeof schema !== 'object') {
+				return
+			}
+			const fields = fieldsFromSchema(schema, { includeReadOnly: true });
+			const found = {};
+			for (const key of keys) {
+				const field = fields.find((f) => f.key === key);
+				const ref = field && field.reference;
+				if (ref && ref.schema !== undefined && ref.schema !== null) {
+					found[key] = { register: ref.register || src.register, schema: String(ref.schema) };
+				}
+			}
+			this.refTargets = { ...this.refTargets, ...found };
+		},
 		/**
 		 * The shared object store instance, or null when no Pinia is active
 		 * (`dispatchAction` then warns and no-ops).