@conduction/nextcloud-vue 0.1.0-beta.16 → 0.1.0-beta.18

package/l10n/en.json

@@ -370,6 +370,7 @@
     "The 'admin' group always has full access (cannot be changed)": "The 'admin' group always has full access (cannot be changed)",
     "The following items will be permanently deleted. Remove any items you want to keep.": "The following items will be permanently deleted. Remove any items you want to keep.",
     "The object owner always has full access": "The object owner always has full access",
+    "This field has been changed — save to apply": "This field has been changed — save to apply",
     "Time": "Time",
     "Title": "Title",
     "Title *": "Title *",
@@ -402,6 +403,7 @@
     "Widget not available": "Widget not available",
     "Write a note...": "Write a note...",
     "Write back": "Write back",
+    "You have unsaved changes. Save to apply them.": "You have unsaved changes. Save to apply them.",
     "{name} (Copy)": "{name} (Copy)",
     "{name} - Copy": "{name} - Copy",
     "{title} saved successfully.": "{title} saved successfully.",

package/l10n/nl.json

@@ -368,6 +368,7 @@
     "The 'admin' group always has full access (cannot be changed)": "De 'admin'-groep heeft altijd volledige toegang (kan niet worden gewijzigd)",
     "The following items will be permanently deleted. Remove any items you want to keep.": "De volgende items worden permanent verwijderd. Haal items die u wilt bewaren uit de selectie.",
     "The object owner always has full access": "De eigenaar van het object heeft altijd volledige toegang",
+    "This field has been changed — save to apply": "Dit veld is gewijzigd — sla op om toe te passen",
     "Time": "Tijd",
     "Title": "Titel",
     "Title *": "Titel *",
@@ -400,6 +401,7 @@
     "Widget not available": "Widget niet beschikbaar",
     "Write a note...": "Schrijf een notitie...",
     "Write back": "Terugschrijven",
+    "You have unsaved changes. Save to apply them.": "U heeft niet-opgeslagen wijzigingen. Sla op om ze toe te passen.",
     "{name} (Copy)": "{name} (Kopie)",
     "{name} - Copy": "{name} - Kopie",
     "{title} saved successfully.": "{title} succesvol opgeslagen.",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@conduction/nextcloud-vue",
-	"version": "0.1.0-beta.16",
+	"version": "0.1.0-beta.18",
 	"description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
 	"license": "EUPL-1.2",
 	"author": "Conduction B.V. <info@conduction.nl>",

package/src/components/CnAdvancedFormDialog/CnPropertiesTab.vue

@@ -1,125 +1,135 @@
 <template>
-	<div class="cn-advanced-form-dialog__table-container">
-		<table class="cn-advanced-form-dialog__table">
-			<thead>
-				<tr class="cn-advanced-form-dialog__table-row">
-					<th class="cn-advanced-form-dialog__table-col-constrained">
-						{{ t('nextcloud-vue', 'Property') }}
-					</th>
-					<th class="cn-advanced-form-dialog__table-col-expanded">
-						{{ t('nextcloud-vue', 'Value') }}
-					</th>
-					<th
-						v-if="hasRowActionsSlot"
-						class="cn-advanced-form-dialog__table-col-actions">
-						<slot name="row-actions-header" />
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr
-					v-for="([key, value]) in objectProperties"
-					:key="key"
-					class="cn-advanced-form-dialog__table-row"
-					:class="{
-						'cn-advanced-form-dialog__table-row--selected': selectedProperty === key,
-						'cn-advanced-form-dialog__table-row--edited': isValueChanged(key),
-						'cn-advanced-form-dialog__table-row--non-editable': !isPropertyEditable(key, resolvedValue(key, value)),
-						[getPropertyValidationClass(key, value)]: validationDisplay === 'indicator',
-					}"
-					@click="handleRowClick(key, $event)">
-					<td class="cn-advanced-form-dialog__table-col-constrained cn-advanced-form-dialog__prop-cell"
-						:style="getPropCellStyle(key, value)">
-						<div class="cn-advanced-form-dialog__prop-cell-content">
-							<AlertCircle
-								v-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'invalid'"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--error"
-								:size="16"
-								:title="getPropertyErrorMessage(key, resolvedValue(key, value))" />
-							<Alert
-								v-else-if="validationDisplay === 'indicator' && isValueChanged(key) && getPropertyValidationState(key, resolvedValue(key, value)) !== 'invalid'"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--edited"
-								:size="16"
-								:title="t('nextcloud-vue', 'This field has been changed')" />
-							<Alert
-								v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'warning'"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--warning"
-								:size="16"
-								:title="getPropertyWarningMessage(key, resolvedValue(key, value))" />
-							<Plus
-								v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'new'"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--new"
-								:size="16"
-								:title="getPropertyNewMessage(key)" />
-							<LockOutline
-								v-else-if="!isPropertyEditable(key, resolvedValue(key, value))"
-								class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--lock"
-								:size="16"
-								:title="getEditabilityWarning(key, resolvedValue(key, value)) || ''" />
-							<span :title="getPropertyTooltip(key)">{{ getPropertyDisplayName(key) }}</span>
-							<span
-								v-if="isRequired(key)"
-								class="cn-advanced-form-dialog__required-indicator"
-								:title="t('nextcloud-vue', 'Required')"
-								aria-label="required">*</span>
-							<span
-								v-if="isImmutableHint(key)"
-								class="cn-advanced-form-dialog__immutable-badge"
-								:title="t('nextcloud-vue', 'This value can be set on creation but cannot be changed afterwards.')">
-								{{ t('nextcloud-vue', 'Set once') }}
-							</span>
-						</div>
-					</td>
-					<td class="cn-advanced-form-dialog__table-col-expanded cn-advanced-form-dialog__value-cell">
-						<slot
-							name="value-cell"
-							:property-key="key"
-							:value="value"
-							:resolved-value="resolvedValue(key, value)"
-							:is-editing="selectedProperty === key"
-							:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
-							:display-name="getPropertyDisplayName(key)"
-							:schema-prop="schema && schema.properties && schema.properties[key]"
-							:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
-							:on-update="(v) => onPropertyValueUpdate(key, v)">
-							<CnPropertyValueCell
-								:ref="'cell-' + key"
+	<div>
+		<NcNoteCard
+			v-if="hasUnsavedChanges"
+			type="warning"
+			class="cn-advanced-form-dialog__unsaved-note">
+			{{ t('nextcloud-vue', 'You have unsaved changes. Save to apply them.') }}
+		</NcNoteCard>
+		<div class="cn-advanced-form-dialog__table-container">
+			<table class="cn-advanced-form-dialog__table">
+				<thead>
+					<tr class="cn-advanced-form-dialog__table-row">
+						<th class="cn-advanced-form-dialog__table-col-constrained">
+							{{ t('nextcloud-vue', 'Property') }}
+						</th>
+						<th class="cn-advanced-form-dialog__table-col-expanded">
+							{{ t('nextcloud-vue', 'Value') }}
+						</th>
+						<th
+							v-if="hasRowActionsSlot"
+							class="cn-advanced-form-dialog__table-col-actions">
+							<slot name="row-actions-header" />
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr
+						v-for="([key, value]) in objectProperties"
+						:key="key"
+						class="cn-advanced-form-dialog__table-row"
+						:class="{
+							'cn-advanced-form-dialog__table-row--selected': selectedProperty === key,
+							'cn-advanced-form-dialog__table-row--edited': isValueChanged(key),
+							'cn-advanced-form-dialog__table-row--non-editable': !isPropertyEditable(key, resolvedValue(key, value)),
+							[getPropertyValidationClass(key, value)]: validationDisplay === 'indicator',
+						}"
+						@click="handleRowClick(key, $event)">
+						<td class="cn-advanced-form-dialog__table-col-constrained cn-advanced-form-dialog__prop-cell"
+							:style="getPropCellStyle(key, value)">
+							<div class="cn-advanced-form-dialog__prop-cell-content">
+								<AlertCircle
+									v-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'invalid'"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--error"
+									:size="16"
+									:title="getPropertyErrorMessage(key, resolvedValue(key, value))" />
+								<PencilOutline
+									v-else-if="validationDisplay === 'indicator' && isValueChanged(key) && getPropertyValidationState(key, resolvedValue(key, value)) !== 'invalid'"
+									v-tooltip="t('nextcloud-vue', 'This field has been changed — save to apply')"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--edited"
+									:size="16" />
+								<Alert
+									v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'warning'"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--warning"
+									:size="16"
+									:title="getPropertyWarningMessage(key, resolvedValue(key, value))" />
+								<Plus
+									v-else-if="validationDisplay === 'indicator' && getPropertyValidationState(key, resolvedValue(key, value)) === 'new'"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--new"
+									:size="16"
+									:title="getPropertyNewMessage(key)" />
+								<LockOutline
+									v-else-if="!isPropertyEditable(key, resolvedValue(key, value))"
+									class="cn-advanced-form-dialog__validation-icon cn-advanced-form-dialog__validation-icon--lock"
+									:size="16"
+									:title="getEditabilityWarning(key, resolvedValue(key, value)) || ''" />
+								<span :title="getPropertyTooltip(key)">{{ getPropertyDisplayName(key) }}</span>
+								<span
+									v-if="isRequired(key)"
+									class="cn-advanced-form-dialog__required-indicator"
+									:title="t('nextcloud-vue', 'Required')"
+									aria-label="required">*</span>
+								<span
+									v-if="isImmutableHint(key)"
+									class="cn-advanced-form-dialog__immutable-badge"
+									:title="t('nextcloud-vue', 'This value can be set on creation but cannot be changed afterwards.')">
+									{{ t('nextcloud-vue', 'Set once') }}
+								</span>
+							</div>
+						</td>
+						<td class="cn-advanced-form-dialog__table-col-expanded cn-advanced-form-dialog__value-cell">
+							<slot
+								name="value-cell"
 								:property-key="key"
-								:schema="schema"
-								:value="resolvedValue(key, value)"
-								:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+								:value="value"
+								:resolved-value="resolvedValue(key, value)"
 								:is-editing="selectedProperty === key"
+								:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
 								:display-name="getPropertyDisplayName(key)"
+								:schema-prop="schema && schema.properties && schema.properties[key]"
 								:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
-								:widget="(propertyOverrides[key] && propertyOverrides[key].widget) || null"
-								:select-options="(propertyOverrides[key] && propertyOverrides[key].selectOptions) || null"
-								:select-multiple="propertyOverrides[key] ? propertyOverrides[key].selectMultiple !== false : true"
-								:textarea-rows="(propertyOverrides[key] && propertyOverrides[key].textareaRows) || 4"
-								@update:value="onPropertyValueUpdate(key, $event)" />
-						</slot>
-					</td>
-					<td
-						v-if="hasRowActionsSlot"
-						class="cn-advanced-form-dialog__table-col-actions"
-						@click.stop>
-						<slot
-							name="row-actions"
-							:property-key="key"
-							:value="value"
-							:resolved-value="resolvedValue(key, value)"
-							:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
-							:is-schema-property="!!(schema && schema.properties && Object.prototype.hasOwnProperty.call(schema.properties, key))" />
-					</td>
-				</tr>
-			</tbody>
-		</table>
+								:on-update="(v) => onPropertyValueUpdate(key, v)">
+								<CnPropertyValueCell
+									:ref="'cell-' + key"
+									:property-key="key"
+									:schema="schema"
+									:value="resolvedValue(key, value)"
+									:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+									:is-editing="selectedProperty === key"
+									:display-name="getPropertyDisplayName(key)"
+									:editability-warning="getPropertyEditabilityWarning(key, resolvedValue(key, value))"
+									:widget="(propertyOverrides[key] && propertyOverrides[key].widget) || null"
+									:select-options="(propertyOverrides[key] && propertyOverrides[key].selectOptions) || null"
+									:select-multiple="propertyOverrides[key] ? propertyOverrides[key].selectMultiple !== false : true"
+									:textarea-rows="(propertyOverrides[key] && propertyOverrides[key].textareaRows) || 4"
+									@update:value="onPropertyValueUpdate(key, $event)" />
+							</slot>
+						</td>
+						<td
+							v-if="hasRowActionsSlot"
+							class="cn-advanced-form-dialog__table-col-actions"
+							@click.stop>
+							<slot
+								name="row-actions"
+								:property-key="key"
+								:value="value"
+								:resolved-value="resolvedValue(key, value)"
+								:is-editable="isPropertyEditable(key, resolvedValue(key, value))"
+								:is-schema-property="!!(schema && schema.properties && Object.prototype.hasOwnProperty.call(schema.properties, key))" />
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 	</div>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import { NcNoteCard } from '@nextcloud/vue'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import LockOutline from 'vue-material-design-icons/LockOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import CnPropertyValueCell from './CnPropertyValueCell.vue'
@@ -128,8 +138,10 @@ export default {
 	name: 'CnPropertiesTab',
 
 	components: {
+		NcNoteCard,
 		AlertCircle,
 		Alert,
+		PencilOutline,
 		LockOutline,
 		Plus,
 		CnPropertyValueCell,
@@ -166,9 +178,14 @@ export default {
 		 * Any other CSS color string is applied directly.
 		 */
 		propCellColor: { type: String, default: null },
+		isNew: { type: Boolean, default: false },
 	},
 
 	computed: {
+		hasUnsavedChanges() {
+			if (this.isNew) return false
+			return Object.keys(this.formData).some(key => this.isValueChanged(key))
+		},
 		propCellStyle() {
 			if (this.propCellColor === null) return undefined
 			if (this.propCellColor === 'none') return { boxShadow: 'none' }
@@ -255,7 +272,7 @@ export default {
 				return { boxShadow: 'inset 3px 0 0 0 var(--color-error)' }
 			}
 			if (this.isValueChanged(key)) {
-				return { boxShadow: 'inset 3px 0 0 0 var(--color-warning)' }
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-primary-element)' }
 			}
 			if (state === 'valid') {
 				return { boxShadow: 'inset 3px 0 0 0 var(--color-success)' }
@@ -264,7 +281,7 @@ export default {
 				return { boxShadow: 'inset 3px 0 0 0 var(--color-warning)' }
 			}
 			if (state === 'new') {
-				return { boxShadow: 'inset 3px 0 0 0 var(--color-primary-element)' }
+				return { boxShadow: 'inset 3px 0 0 0 var(--color-new)' }
 			}
 			return this.propCellStyle
 		},
@@ -590,10 +607,6 @@ export default {
 	box-shadow: inset 3px 0 0 0 var(--color-primary);
 }
 
-.cn-advanced-form-dialog__table-row--edited {
-	background-color: var(--color-warning-light);
-}
-
 .cn-advanced-form-dialog__table-row--non-editable {
 	background-color: var(--color-background-dark);
 	cursor: not-allowed;
@@ -661,7 +674,7 @@ export default {
 }
 
 .cn-advanced-form-dialog__validation-icon--edited {
-	color: var(--color-warning);
+	color: var(--color-primary-element);
 }
 
 .cn-advanced-form-dialog__validation-icon--warning {
@@ -673,7 +686,7 @@ export default {
 }
 
 .cn-advanced-form-dialog__validation-icon--new {
-	color: var(--color-primary-element);
+	color: var(--color-new);
 }
 
 .cn-advanced-form-dialog__required-indicator {
@@ -695,4 +708,8 @@ export default {
 	cursor: help;
 	white-space: nowrap;
 }
+
+.cn-advanced-form-dialog__unsaved-note {
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+}
 </style>

package/src/components/CnAdvancedFormDialog/CnPropertyValueCell.vue

@@ -551,6 +551,15 @@ export default {
 		datetimeValue() {
 			const v = this.value
 			if (!v) return null
+			// Date-only strings (YYYY-MM-DD) are parsed as UTC midnight by the spec,
+			// which shifts to the previous day in positive-UTC-offset timezones when
+			// fed to a picker that renders in local time. Parse them as local midnight.
+			if (this.schemaProp?.format === 'date'
+				&& typeof v === 'string'
+				&& /^\d{4}-\d{2}-\d{2}$/.test(v)) {
+				const [year, month, day] = v.split('-').map(Number)
+				return new Date(year, month - 1, day)
+			}
 			const d = new Date(v)
 			return Number.isNaN(d.getTime()) ? null : d
 		},
@@ -594,6 +603,11 @@ export default {
 			const v = this.value
 			if (!v) return ''
 			const fmt = this.schemaProp?.format
+			// Same local-midnight parse as datetimeValue to avoid UTC-shift in display.
+			if (fmt === 'date' && typeof v === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(v)) {
+				const [year, month, day] = v.split('-').map(Number)
+				return new Date(year, month - 1, day).toLocaleDateString()
+			}
 			const d = new Date(v)
 			if (Number.isNaN(d.getTime())) return String(v)
 			if (fmt === 'date') return d.toLocaleDateString()
@@ -663,7 +677,12 @@ export default {
 			}
 			const fmt = this.schemaProp?.format
 			if (fmt === 'date') {
-				this.$emit('update:value', date.toISOString().slice(0, 10))
+				// Use local-time accessors — toISOString() converts to UTC first,
+				// which shifts midnight local time to the previous day in UTC+n zones.
+				const year = date.getFullYear()
+				const month = String(date.getMonth() + 1).padStart(2, '0')
+				const day = String(date.getDate()).padStart(2, '0')
+				this.$emit('update:value', `${year}-${month}-${day}`)
 				return
 			}
 			if (fmt === 'time') {

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -83,7 +83,13 @@
 						:borderless="item.showTitle === false"
 						:flush="item.flush === true"
 						:buttons="getWidgetButtons(item)"
-						:style-config="item.styleConfig || {}">
+						:style-config="item.styleConfig || {}"
+						:title-icon-position="getWidgetTitleIconPosition(item)"
+						:title-icon-color="getWidgetTitleIconColor(item)">
+						<!-- Per-widget title icon (e.g. #widget-my-work-title-icon) -->
+						<template v-if="$slots['widget-' + item.widgetId + '-title-icon']" #title-icon>
+							<slot :name="'widget-' + item.widgetId + '-title-icon'" :item="item" :widget="getWidgetDef(item.widgetId)" />
+						</template>
 						<!-- Per-widget header actions (e.g. #widget-my-work-actions) -->
 						<template v-if="$slots['widget-' + item.widgetId + '-actions']" #actions>
 							<slot :name="'widget-' + item.widgetId + '-actions'" :item="item" :widget="getWidgetDef(item.widgetId)" />
@@ -320,6 +326,16 @@ export default {
 			return def?.buttons || []
 		},
 
+		getWidgetTitleIconPosition(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.titleIconPosition || 'right'
+		},
+
+		getWidgetTitleIconColor(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return def?.titleIconColor || null
+		},
+
 		isTile(item) {
 			const def = this.getWidgetDef(item.widgetId)
 			return def?.type === 'tile'

package/src/components/CnDeleteDialog/CnDeleteDialog.vue

@@ -128,7 +128,7 @@ export default {
 	computed: {
 		itemName() {
 			if (this.nameFormatter) return this.nameFormatter(this.item)
-			return this.item[this.nameField] || this.item.name || this.item.title || this.item.id
+			return this.item[this.nameField] || this.item.name || this.item.naam || this.item.title || this.item.id
 		},
 		resolvedWarningText() {
 			return this.warningText.replace('{name}', this.itemName)

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -15,6 +15,12 @@
 		:style="wrapperStyles">
 		<!-- Header -->
 		<div v-if="showTitle" class="cn-widget-wrapper__header">
+			<!-- Title icon — left: rendered before the title group -->
+			<div v-if="$slots['title-icon'] && titleIconPosition === 'left'"
+				class="cn-widget-wrapper__title-icon"
+				:style="titleIconColor ? { color: titleIconColor } : {}">
+				<slot name="title-icon" />
+			</div>
 			<div class="cn-widget-wrapper__header-left">
 				<img
 					v-if="iconUrl"
@@ -32,6 +38,12 @@
 			<div class="cn-widget-wrapper__actions">
 				<slot name="actions" />
 			</div>
+			<!-- Title icon — right: rendered after actions, far right -->
+			<div v-if="$slots['title-icon'] && titleIconPosition === 'right'"
+				class="cn-widget-wrapper__title-icon"
+				:style="titleIconColor ? { color: titleIconColor } : {}">
+				<slot name="title-icon" />
+			</div>
 		</div>
 
 		<!-- Content -->
@@ -114,6 +126,20 @@ export default {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Position of the title-icon slot in the header.
+		 * 'left' places it before the title; 'right' places it after the actions.
+		 */
+		titleIconPosition: {
+			type: String,
+			default: 'right',
+			validator: (v) => ['left', 'right'].includes(v),
+		},
+		/** CSS color value applied to the title-icon slot container */
+		titleIconColor: {
+			type: String,
+			default: null,
+		},
 		/** Footer action buttons: [{ text, link }] */
 		buttons: {
 			type: Array,
@@ -227,6 +253,12 @@ export default {
 	flex-shrink: 0;
 }
 
+.cn-widget-wrapper__title-icon {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
 .cn-widget-wrapper__footer {
 	display: flex;
 	justify-content: flex-end;

package/src/css/index.css

@@ -1,4 +1,5 @@
 /* @conduction/nextcloud-vue — Main CSS entry point */
+@import './main.css';
 @import './table.css';
 @import './card.css';
 @import './pagination.css';

package/src/css/main.css

@@ -0,0 +1,3 @@
+:root {
+  --color-new: var(--color-text-maxcontrast-default);
+}

package/src/store/plugins/files.js

@@ -9,7 +9,7 @@ import { parseResponseError, networkError } from '../../utils/errors.js'
  * upload (multipart), publish, unpublish, and delete.
  *
  * State: files, filesLoading, filesError, tags, tagsLoading, tagsError
- * Actions: fetchFiles, uploadFiles, publishFile, unpublishFile, deleteFile, clearFiles, fetchTags
+ * Actions: fetchFiles, uploadFiles, publishFile, unpublishFile, deleteFile, batchFiles, clearFiles, fetchTags
  * Getters: getFiles, isFilesLoading, getFilesError, getTags, isTagsLoading, getTagsError
  *
  * @param {object} [options={}] Plugin options
@@ -245,6 +245,58 @@ export function filesPlugin(options = {}) {
 					this.filesLoading = false
 				}
 			},
+
+			/**
+			 * Apply a batch action across multiple files in ONE request.
+			 *
+			 * Replaces the N-sequential-call pattern (loop calling
+			 * publishFile/unpublishFile/deleteFile per id) with a single POST
+			 * to /files/batch. The backend returns 200 when every operation
+			 * succeeds, or 207 (multi-status) when some fail; the per-file
+			 * outcomes live in `data.results` and the aggregate counts in
+			 * `data.summary` (`{ succeeded, failed, total }`).
+			 *
+			 * @param {string} type The registered object type slug
+			 * @param {string} objectId The parent object ID
+			 * @param {('publish'|'depublish'|'delete'|'label')} action The batch action to apply
+			 * @param {(string|number)[]} fileIds File IDs to act on (max 100, validated server-side)
+			 * @param {object} [params={}] Action-specific parameters (e.g. labels for the 'label' action)
+			 * @return {Promise<object|null>} Response body `{ results, summary }`, or null on transport error
+			 */
+			async batchFiles(type, objectId, action, fileIds, params = {}) {
+				this.filesLoading = true
+				this.filesError = null
+
+				try {
+					const url = this._buildUrl(type, objectId) + '/files/batch'
+
+					const response = await fetch(url, {
+						method: 'POST',
+						headers: buildHeaders(),
+						body: JSON.stringify({
+							action,
+							fileIds,
+							...params,
+						}),
+					})
+
+					// 200 = all succeeded, 207 = partial success — both are
+					// valid responses; the caller inspects data.summary.
+					if (!response.ok && response.status !== 207) {
+						this.filesError = await parseResponseError(response, 'files')
+						return null
+					}
+
+					const data = await response.json()
+					await this.fetchFiles(type, objectId)
+					return data
+				} catch (error) {
+					this.filesError = networkError(error)
+					return null
+				} finally {
+					this.filesLoading = false
+				}
+			},
 		},
 	}
 }