CnMassCopyDialog

Two-phase mass copy dialog with naming pattern. Allows users to define a naming pattern for copied items.

Try it

Loading CnMassCopyDialog playground…

Wraps: NcDialog, NcButton, NcTextField

Props

Prop	Type	Default	Description
items	Array	[]	Items to copy ([\{ id, name \}])
nameField	String	'title'	Field to display as item name
nameFormatter	Function	null	Optional function (item) => string to format item names. Overrides nameField when provided.
dialogTitle	String	'Copy items'
patternLabel	String	'Naming pattern'
patternPlaceholder	String	'\{name\} (copy)'
emptyText	String	'No items selected for copying.'	Message shown when all items have been removed from the list
successText	String	'Items successfully copied.'	Message shown in the result phase on success
cancelLabel	String	'Cancel'
closeLabel	String	'Close'	Label for the close button shown in the result phase
confirmLabel	String	'Copy'
removeLabel	String	'Remove from list'	Tooltip/label for the per-item remove button

Events

Event	Payload	Description
confirm	\{ ids, pattern \}	Copy confirmed
close	—	Dialog closed

Public Methods

Method	Description
setResult(\{ success?, error?, results? \})	Set result per item

Live demo

<template>
  <div>
    <button @click="open = true" style="padding: 6px 16px; border-radius: 4px; background: var(--color-primary-element); color: white; border: none; cursor: pointer;">Copy selected (2)</button>
    <CnMassCopyDialog
      v-if="open"
      ref="dlg"
      :items="[{ id: 1, title: 'Report A' }, { id: 2, title: 'Report B' }]"
      @confirm="onConfirm"
      @close="open = false" />
  </div>
</template>
<script>
export default {
  data() { return { open: false } },
  methods: {
    async onConfirm(payload) {
      await new Promise(r => setTimeout(r, 800))
      this.$refs.dlg.setResult({ success: true })
    },
  },
}
</script>

Usage

<CnMassCopyDialog
  ref="massCopyDialog"
  :items="selectedItems"
  @confirm="onMassCopy"
  @close="showMassCopy = false" />

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnMassCopyDialog.vue and update automatically whenever the component changes.

Props

Name	Type	Required	Default	Description
items	array	✓	—	Items to copy. Each must have an id property.
nameField	string		'title'	Property name used for display (e.g., 'title', 'name')
nameFormatter	func		null	Optional function to format the item name. Receives the item, returns a string. Overrides nameField when provided.
dialogTitle	string		() => t('nextcloud-vue', 'Copy items')	Dialog title
patternLabel	string		() => t('nextcloud-vue', 'Naming pattern')	Label for the naming pattern selector
emptyText	string		() => t('nextcloud-vue', 'No items selected for copying.')	Text when all items removed from list
successText	string		() => t('nextcloud-vue', 'Items successfully copied.')	Success message
cancelLabel	string		() => t('nextcloud-vue', 'Cancel')
closeLabel	string		() => t('nextcloud-vue', 'Close')
confirmLabel	string		() => t('nextcloud-vue', 'Copy')
removeLabel	string		() => t('nextcloud-vue', 'Remove from list')

Events

Name	Payload	Description
close	—
confirm	—	Emitted when the user confirms copying. Payload: { ids, getName } where getName(item) returns the new name.

Methods

Name	Description
setResult	Set the result of the copy operation. Call this from the parent after the API call completes.