@conduction/nextcloud-vue 0.1.0-beta.1 → 0.1.0-beta.10

package/src/components/CnMassCopyDialog/CnMassCopyDialog.vue

@@ -72,6 +72,7 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -132,30 +133,35 @@ export default {
 			type: String,
 			default: 'title',
 		},
+		/** Optional function to format the item name. Receives the item, returns a string. Overrides nameField when provided. */
+		nameFormatter: {
+			type: Function,
+			default: null,
+		},
 		/** Dialog title */
 		dialogTitle: {
 			type: String,
-			default: 'Copy Items',
+			default: () => t('nextcloud-vue', 'Copy items'),
 		},
 		/** Label for the naming pattern selector */
 		patternLabel: {
 			type: String,
-			default: 'Naming pattern',
+			default: () => t('nextcloud-vue', 'Naming pattern'),
 		},
 		/** Text when all items removed from list */
 		emptyText: {
 			type: String,
-			default: 'No items selected for copying.',
+			default: () => t('nextcloud-vue', 'No items selected for copying.'),
 		},
 		/** Success message */
 		successText: {
 			type: String,
-			default: 'Items successfully copied.',
+			default: () => t('nextcloud-vue', 'Items successfully copied.'),
 		},
-		cancelLabel: { type: String, default: 'Cancel' },
-		closeLabel: { type: String, default: 'Close' },
-		confirmLabel: { type: String, default: 'Copy' },
-		removeLabel: { type: String, default: 'Remove from list' },
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
+		confirmLabel: { type: String, default: () => t('nextcloud-vue', 'Copy') },
+		removeLabel: { type: String, default: () => t('nextcloud-vue', 'Remove from list') },
 	},
 
 	data() {
@@ -190,6 +196,7 @@ export default {
 
 	methods: {
 		getItemName(item) {
+			if (this.nameFormatter) return this.nameFormatter(item)
 			return item[this.nameField] || item.name || item.title || item.id
 		},
 
@@ -240,7 +247,7 @@ export default {
 		 * Set the result of the copy operation. Call this from the parent
 		 * after the API call completes.
 		 *
-		 * @param {{ success?: boolean, error?: string }} resultData
+		 * @param {{ success?: boolean, error?: string }} resultData - Result data to pass to the dialog
 		 * @public
 		 */
 		setResult(resultData) {

package/src/components/CnMassCopyDialog/index.js

@@ -1 +1 @@
-export { default as CnMassCopyDialog } from './CnMassCopyDialog.vue'
+export { default as CnMassCopyDialog } from './CnMassCopyDialog.vue'

package/src/components/CnMassDeleteDialog/CnMassDeleteDialog.vue

@@ -64,6 +64,7 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon } from '@nextcloud/vue'
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -119,30 +120,35 @@ export default {
 			type: String,
 			default: 'title',
 		},
+		/** Optional function to format the item name. Receives the item, returns a string. Overrides nameField when provided. */
+		nameFormatter: {
+			type: Function,
+			default: null,
+		},
 		/** Dialog title */
 		dialogTitle: {
 			type: String,
-			default: 'Delete Items',
+			default: () => t('nextcloud-vue', 'Delete items'),
 		},
 		/** Warning text shown above the item list */
 		warningText: {
 			type: String,
-			default: 'The following items will be permanently deleted. Remove any items you want to keep.',
+			default: () => t('nextcloud-vue', 'The following items will be permanently deleted. Remove any items you want to keep.'),
 		},
 		/** Text when all items removed from list */
 		emptyText: {
 			type: String,
-			default: 'No items selected for deletion.',
+			default: () => t('nextcloud-vue', 'No items selected for deletion.'),
 		},
 		/** Success message */
 		successText: {
 			type: String,
-			default: 'Items successfully deleted.',
+			default: () => t('nextcloud-vue', 'Items successfully deleted.'),
 		},
-		cancelLabel: { type: String, default: 'Cancel' },
-		closeLabel: { type: String, default: 'Close' },
-		confirmLabel: { type: String, default: 'Delete' },
-		removeLabel: { type: String, default: 'Remove from list' },
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
+		confirmLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },
+		removeLabel: { type: String, default: () => t('nextcloud-vue', 'Remove from list') },
 	},
 
 	data() {
@@ -166,6 +172,7 @@ export default {
 
 	methods: {
 		getItemName(item) {
+			if (this.nameFormatter) return this.nameFormatter(item)
 			return item[this.nameField] || item.name || item.title || item.id
 		},
 
@@ -187,7 +194,7 @@ export default {
 		 * Set the result of the delete operation. Call this from the parent
 		 * after the API call completes.
 		 *
-		 * @param {{ success?: boolean, error?: string }} resultData
+		 * @param {{ success?: boolean, error?: string }} resultData - Result data to pass to the dialog
 		 * @public
 		 */
 		setResult(resultData) {

package/src/components/CnMassDeleteDialog/index.js

@@ -1 +1 @@
-export { default as CnMassDeleteDialog } from './CnMassDeleteDialog.vue'
+export { default as CnMassDeleteDialog } from './CnMassDeleteDialog.vue'

package/src/components/CnMassExportDialog/CnMassExportDialog.vue

@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import ExportIcon from 'vue-material-design-icons/Export.vue'
 
@@ -101,7 +102,7 @@ export default {
 		/** Dialog title */
 		dialogTitle: {
 			type: String,
-			default: 'Export Objects',
+			default: () => t('nextcloud-vue', 'Export objects'),
 		},
 		/** Description text shown above the format selector */
 		description: {
@@ -124,12 +125,12 @@ export default {
 		/** Success message */
 		successText: {
 			type: String,
-			default: 'Export completed successfully.',
+			default: () => t('nextcloud-vue', 'Export completed successfully.'),
 		},
-		formatLabel: { type: String, default: 'Export format' },
-		cancelLabel: { type: String, default: 'Cancel' },
-		closeLabel: { type: String, default: 'Close' },
-		confirmLabel: { type: String, default: 'Export' },
+		formatLabel: { type: String, default: () => t('nextcloud-vue', 'Export format') },
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
+		confirmLabel: { type: String, default: () => t('nextcloud-vue', 'Export') },
 	},
 
 	data() {
@@ -156,7 +157,7 @@ export default {
 
 		/**
 		 * Set the result of the export operation.
-		 * @param {{ success?: boolean, error?: string }} resultData
+		 * @param {{ success?: boolean, error?: string }} resultData - Result data to pass to the dialog
 		 * @public
 		 */
 		setResult(resultData) {

package/src/components/CnMassExportDialog/index.js

@@ -1 +1 @@
-export { default as CnMassExportDialog } from './CnMassExportDialog.vue'
+export { default as CnMassExportDialog } from './CnMassExportDialog.vue'

package/src/components/CnMassImportDialog/CnMassImportDialog.vue

@@ -32,7 +32,9 @@
 				<tbody>
 					<template v-for="(sheet, key) in result.summary">
 						<tr :key="key">
-							<td class="cn-mass-import__sheet-name">{{ key }}</td>
+							<td class="cn-mass-import__sheet-name">
+								{{ key }}
+							</td>
 							<td class="cn-mass-import__stat cn-mass-import__stat--found">
 								{{ sheet.found || 0 }}
 							</td>
@@ -161,6 +163,7 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import { NcDialog, NcButton, NcNoteCard, NcLoadingIcon, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import Upload from 'vue-material-design-icons/Upload.vue'
 import ImportIcon from 'vue-material-design-icons/Import.vue'
@@ -254,30 +257,30 @@ export default {
 		/** Success text when all rows imported without errors */
 		successText: {
 			type: String,
-			default: 'Import completed successfully!',
+			default: () => t('nextcloud-vue', 'Import completed successfully!'),
 		},
 		/** Text when import partially succeeded */
 		partialSuccessText: {
 			type: String,
-			default: 'Import completed with errors. Check the details below.',
+			default: () => t('nextcloud-vue', 'Import completed with errors. Check the details below.'),
 		},
 		/** Text shown while importing */
 		loadingText: {
 			type: String,
-			default: 'Importing data — this may take a moment for large files...',
+			default: () => t('nextcloud-vue', 'Importing data — this may take a moment for large files...'),
 		},
-		summaryTitle: { type: String, default: 'Import Summary' },
-		supportedFormatsLabel: { type: String, default: 'Supported file types:' },
-		selectFileLabel: { type: String, default: 'Select File' },
-		cancelLabel: { type: String, default: 'Cancel' },
-		closeLabel: { type: String, default: 'Close' },
-		confirmLabel: { type: String, default: 'Import' },
-		sheetLabel: { type: String, default: 'Sheet' },
-		foundLabel: { type: String, default: 'Found' },
-		createdLabel: { type: String, default: 'Created' },
-		updatedLabel: { type: String, default: 'Updated' },
-		unchangedLabel: { type: String, default: 'Unchanged' },
-		errorsLabel: { type: String, default: 'Errors' },
+		summaryTitle: { type: String, default: () => t('nextcloud-vue', 'Import summary') },
+		supportedFormatsLabel: { type: String, default: () => t('nextcloud-vue', 'Supported file types:') },
+		selectFileLabel: { type: String, default: () => t('nextcloud-vue', 'Select File') },
+		cancelLabel: { type: String, default: () => t('nextcloud-vue', 'Cancel') },
+		closeLabel: { type: String, default: () => t('nextcloud-vue', 'Close') },
+		confirmLabel: { type: String, default: () => t('nextcloud-vue', 'Import') },
+		sheetLabel: { type: String, default: () => t('nextcloud-vue', 'Sheet') },
+		foundLabel: { type: String, default: () => t('nextcloud-vue', 'Found') },
+		createdLabel: { type: String, default: () => t('nextcloud-vue', 'Created') },
+		updatedLabel: { type: String, default: () => t('nextcloud-vue', 'Updated') },
+		unchangedLabel: { type: String, default: () => t('nextcloud-vue', 'Unchanged') },
+		errorsLabel: { type: String, default: () => t('nextcloud-vue', 'Errors') },
 	},
 
 	data() {
@@ -341,7 +344,7 @@ export default {
 
 		/**
 		 * Set the result of the import operation.
-		 * @param {{ success?: boolean, error?: string, summary?: object }} resultData
+		 * @param {{ success?: boolean, error?: string, summary?: object }} resultData - Result data to pass to the dialog
 		 * @public
 		 */
 		setResult(resultData) {

package/src/components/CnMassImportDialog/index.js

@@ -1 +1 @@
-export { default as CnMassImportDialog } from './CnMassImportDialog.vue'
+export { default as CnMassImportDialog } from './CnMassImportDialog.vue'

package/src/components/CnNoteCard/CnNoteCard.vue

@@ -0,0 +1,149 @@
+<!--
+    This code was taken from nextcloud-vue due to certain changes being required but unable to be done as a patch.
+
+    https://github.com/nextcloud-libraries/nextcloud-vue/blob/main/src/components/NcNoteCard/NcNoteCard.vue
+-->
+<template>
+	<div
+		class="notecard"
+		:class="{
+			[`notecard--${type}`]: type,
+		}"
+		:role="shouldShowAlert ? 'alert' : 'note'">
+		<slot name="icon">
+			<NcIconSvgWrapper
+				:path="iconPath"
+				class="notecard__icon"
+				:class="{ 'notecard__icon--heading': heading }"
+				inline />
+		</slot>
+		<div>
+			<p v-if="heading" class="notecard__heading">
+				{{ heading }}
+			</p>
+			<slot>
+				<p class="notecard__text">
+					{{ text }}
+				</p>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcIconSvgWrapper } from '@nextcloud/vue'
+
+// hardcoded @mdi/js icons to avoid unnececary package and bundlesize
+// we are only doing this to patch NcNoteCard anyway
+const mdiAlert = 'M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'
+const mdiAlertDecagram = 'M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z'
+const mdiCheckboxMarkedCircle = 'M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'
+const mdiInformation = 'M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 12,2Z'
+
+export default {
+	name: 'CnNoteCard',
+	components: {
+		NcIconSvgWrapper,
+	},
+	props: {
+		/** Optional text to show as a heading of the note card */
+		heading: {
+			type: String,
+			default: undefined,
+		},
+		/**
+		 * Enforce the `alert` role on the note card.
+		 *
+		 * The alert role should only be used for information that requires the user's immediate attention.
+		 *
+		 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
+		 */
+		showAlert: {
+			type: Boolean,
+			default: undefined,
+		},
+		/** The message text of the note card */
+		text: {
+			type: String,
+			default: undefined,
+		},
+		/** Type or severity of the message */
+		type: {
+			type: String,
+			default: 'warning',
+			validator: (value) =>
+				['success', 'info', 'warning', 'error'].includes(value),
+		},
+	},
+	computed: {
+		shouldShowAlert() {
+			return this.showAlert || this.type === 'error'
+		},
+		iconPath() {
+			switch (this.type) {
+			case 'error':
+				return mdiAlertDecagram
+			case 'success':
+				return mdiCheckboxMarkedCircle
+			case 'info':
+				return mdiInformation
+			case 'warning':
+			default:
+				return mdiAlert
+			}
+		},
+	},
+}
+</script>
+
+<!-- we do not have support for scss so this has been translated to css -->
+<!-- @TODO add scss support -->
+<style scoped>
+.notecard {
+  --note-card-icon-size: 20px;
+  --note-card-padding: calc(2 * var(--default-grid-baseline));
+  color: var(--color-main-text) !important;
+  background-color: var(--note-background) !important;
+  border-inline-start: var(--default-grid-baseline) solid var(--note-theme);
+  border-radius: var(--border-radius-small);
+  margin: 1rem 0;
+  padding: var(--note-card-padding);
+  display: flex;
+  flex-direction: row;
+  gap: var(--note-card-padding);
+}
+
+.notecard__heading {
+  font-size: var(--note-card-icon-size); /* Same as icon */
+  font-weight: 600;
+}
+
+.notecard__icon {
+  color: var(--note-theme);
+}
+.notecard__icon--heading {
+  font-size: var(--note-card-icon-size);
+  /* Ensure icon is on the same height as the heading */
+  margin-block: calc((1lh - 1em) / 2) auto;
+}
+
+.notecard--success {
+    --note-background: var(--color-success);
+    --note-theme: var(--color-success-text);
+  }
+
+.notecard--info {
+    --note-background: var(--color-info);
+    --note-theme: var(--color-info-text);
+  }
+
+.notecard--error {
+    --note-background: var(--color-error);
+    --note-theme: var(--color-error-text);
+  }
+
+.notecard--warning {
+    --note-background: var(--color-warning);
+    --note-theme: var(--color-warning-text);
+  }
+</style>

package/src/components/CnNoteCard/index.js

@@ -0,0 +1 @@
+export { default as CnNoteCard } from './CnNoteCard.vue'