CnCopyDialog

Two-phase single-item copy dialog with naming pattern selector. User picks a naming pattern, confirms, then sees success or error.

Try it

Loading CnCopyDialog playground…

Wraps: NcDialog, NcButton, NcNoteCard, NcSelect

Props

Prop	Type	Default	Description
item	Object	(required)	Item to copy
nameField	String	'title'	Field used as display name
nameFormatter	Function	null	Optional function (item) => string to format the display name. Overrides nameField when provided.
dialogTitle	String	'Copy Item'
patternLabel	String	'Naming pattern'
successText	String	'Item successfully copied.'
cancelLabel	String
closeLabel	String
confirmLabel	String

Naming Patterns

Pattern	Example
copy-of	Copy of Contact A
name-copy	Contact A - Copy
name-parens	Contact A (Copy)

Events

Event	Payload	Description
confirm	\{ id, newName \}	Copy confirmed
close	—	Dialog closed

Public Methods

Method	Description
setResult(\{ success?, error? \})	Set operation result

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 item</button>
    <CnCopyDialog
      v-if="open"
      ref="dlg"
      :item="{ id: 1, title: 'Annual Report 2024' }"
      @confirm="onConfirm"
      @close="open = false" />
  </div>
</template>
<script>
export default {
  data() { return { open: false } },
  methods: {
    async onConfirm({ id, newName }) {
      await new Promise(r => setTimeout(r, 800))
      this.$refs.dlg.setResult({ success: true })
    },
  },
}
</script>

Reference (auto-generated)

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

Props

Name	Type	Required	Default	Description
item	object	✓	—	The item to copy. 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 item')	Dialog title
patternLabel	string		() => t('nextcloud-vue', 'Naming pattern')	Label for the naming pattern selector
successText	string		() => t('nextcloud-vue', 'Item successfully copied.')	Success message
cancelLabel	string		() => t('nextcloud-vue', 'Cancel')	Label for the cancel button (visible before the copy runs).
closeLabel	string		() => t('nextcloud-vue', 'Close')	Label for the close button (visible after copy completes).
confirmLabel	string		() => t('nextcloud-vue', 'Copy')	Label for the primary confirm button that triggers the copy.

Events

Name	Payload	Description
close	—
confirm	—

Methods

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