@conduction/nextcloud-vue 0.1.0-beta.11 → 0.1.0-beta.12

package/src/components/CnConfigurationCard/CnConfigurationCard.vue

@@ -1,77 +1,77 @@
-<template>
-	<div class="cn-card">
-		<div class="cn-card-header">
-			<h3>
-				<slot name="icon" />
-				{{ title }}
-			</h3>
-			<div class="cn-card-header__actions">
-				<slot name="actions" />
-			</div>
-		</div>
-
-		<!-- Status badges -->
-		<div v-if="$slots.status" class="cn-config-card__status">
-			<slot name="status" />
-		</div>
-
-		<!-- Main content -->
-		<div class="cn-config-card__content">
-			<slot />
-		</div>
-
-		<!-- Footer -->
-		<div v-if="$slots.footer" class="cn-config-card__footer">
-			<slot name="footer" />
-		</div>
-	</div>
-</template>
-
-<script>
-/**
- * CnConfigurationCard — Configuration card with title, actions, status, and content.
- *
- * Decoupled from OpenRegister's ConfigurationCard. All data is provided via
- * props and slots — no store dependencies. Consumer wraps this and handles
- * navigation/store logic.
- *
- * @example
- * <CnConfigurationCard title="Database Configuration">
- *   <template #actions>
- *     <NcActions><NcActionButton @click="edit">Edit</NcActionButton></NcActions>
- *   </template>
- *   <template #status>
- *     <CnStatusBadge label="Connected" variant="success" />
- *   </template>
- *   <p>PostgreSQL 15.2 on localhost:5432</p>
- * </CnConfigurationCard>
- */
-export default {
-	name: 'CnConfigurationCard',
-
-	props: {
-		/** Card title */
-		title: {
-			type: String,
-			default: '',
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-config-card__status {
-	display: flex;
-	gap: 8px;
-	margin-bottom: 12px;
-}
-
-.cn-config-card__content {
-	margin-bottom: 8px;
-}
-
-.cn-config-card__footer {
-	padding-top: 12px;
-	border-top: 1px solid var(--color-border);
-}
-</style>
+<template>
+	<div class="cn-card">
+		<div class="cn-card-header">
+			<h3>
+				<slot name="icon" />
+				{{ title }}
+			</h3>
+			<div class="cn-card-header__actions">
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<!-- Status badges -->
+		<div v-if="$slots.status" class="cn-config-card__status">
+			<slot name="status" />
+		</div>
+
+		<!-- Main content -->
+		<div class="cn-config-card__content">
+			<slot />
+		</div>
+
+		<!-- Footer -->
+		<div v-if="$slots.footer" class="cn-config-card__footer">
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnConfigurationCard — Configuration card with title, actions, status, and content.
+ *
+ * Decoupled from OpenRegister's ConfigurationCard. All data is provided via
+ * props and slots — no store dependencies. Consumer wraps this and handles
+ * navigation/store logic.
+ *
+ * @example
+ * <CnConfigurationCard title="Database Configuration">
+ *   <template #actions>
+ *     <NcActions><NcActionButton @click="edit">Edit</NcActionButton></NcActions>
+ *   </template>
+ *   <template #status>
+ *     <CnStatusBadge label="Connected" variant="success" />
+ *   </template>
+ *   <p>PostgreSQL 15.2 on localhost:5432</p>
+ * </CnConfigurationCard>
+ */
+export default {
+	name: 'CnConfigurationCard',
+
+	props: {
+		/** Card title */
+		title: {
+			type: String,
+			default: '',
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-config-card__status {
+	display: flex;
+	gap: 8px;
+	margin-bottom: 12px;
+}
+
+.cn-config-card__content {
+	margin-bottom: 8px;
+}
+
+.cn-config-card__footer {
+	padding-top: 12px;
+	border-top: 1px solid var(--color-border);
+}
+</style>

package/src/components/CnContextMenu/CnContextMenu.vue

@@ -1,142 +1,142 @@
-<template>
-	<NcActions
-		:open.sync="internalOpen"
-		:manual-open="true"
-		:force-menu="true"
-		class="cn-context-menu"
-		container="body"
-		@close="onClose">
-		<!-- Dynamic actions from array prop -->
-		<NcActionButton
-			v-for="action in actions"
-			:key="action.label"
-			:disabled="resolveDisabled(action)"
-			:class="{ 'cn-row-action--destructive': action.destructive }"
-			close-after-click
-			@click="onAction(action)">
-			<template v-if="action.icon" #icon>
-				<component :is="action.icon" :size="20" />
-			</template>
-			{{ action.label }}
-		</NcActionButton>
-
-		<!-- Custom content slot (for hardcoded buttons) -->
-		<slot />
-	</NcActions>
-</template>
-
-<script>
-import { NcActions, NcActionButton } from '@nextcloud/vue'
-
-/**
- * CnContextMenu — Right-click context menu wrapper around NcActions.
- *
- * Provides a pre-configured NcActions instance that positions itself at the
- * cursor via the `useContextMenu` composable's CSS custom properties. Accepts
- * an `actions` array for the common dynamic case (like CnRowActions), and a
- * default slot for hardcoded NcActionButton content.
- *
- * Pair with `useContextMenu()` for state management (open/close, target item,
- * cursor positioning). The composable handles the DOM attributes; this component
- * handles the NcActions template boilerplate.
- *
- * @example Dynamic actions (CnIndexPage pattern)
- * <CnContextMenu
- *   :open.sync="contextMenuOpen"
- *   :actions="mergedActions"
- *   :target-item="contextMenuRow"
- *   @action="$emit('action', $event)"
- *   @close="closeContextMenu" />
- *
- * @example Custom buttons via slot (Doriath pattern)
- * <CnContextMenu
- *   :open.sync="contextMenuOpen"
- *   @close="closeContextMenu">
- *   <NcActionButton close-after-click @click="onRename">
- *     <template #icon><PencilIcon :size="20" /></template>
- *     Rename
- *   </NcActionButton>
- * </CnContextMenu>
- */
-export default {
-	name: 'CnContextMenu',
-
-	components: {
-		NcActions,
-		NcActionButton,
-	},
-
-	props: {
-		/**
-		 * Whether the context menu is open. Use with `.sync` modifier.
-		 * Bind to `useContextMenu().isOpen`.
-		 */
-		open: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Action definitions rendered as NcActionButton items.
-		 * Same format as CnRowActions: `{ label, icon?, handler?, disabled?, destructive? }`.
-		 * When empty, only the default slot content is rendered.
-		 * @type {Array<{label: string, icon?: Component, handler?: Function, disabled?: boolean | Function, destructive?: boolean}>}
-		 */
-		actions: {
-			type: Array,
-			default: () => [],
-		},
-		/**
-		 * The right-clicked item (row, folder, etc.). Passed to action `handler`
-		 * and `disabled` callbacks, and included in the `action` event payload.
-		 * Bind to `useContextMenu().targetItem`.
-		 */
-		targetItem: {
-			type: [Object, String, Number],
-			default: null,
-		},
-	},
-
-	data() {
-		return {
-			internalOpen: this.open,
-		}
-	},
-
-	watch: {
-		open(val) {
-			this.internalOpen = val
-		},
-		internalOpen(val) {
-			this.$emit('update:open', val)
-		},
-	},
-
-	methods: {
-		resolveDisabled(action) {
-			if (typeof action.disabled === 'function') {
-				return action.disabled(this.targetItem)
-			}
-			return !!action.disabled
-		},
-
-		onAction(action) {
-			if (action.handler && typeof action.handler === 'function') {
-				action.handler(this.targetItem)
-			}
-			this.$emit('action', { action: action.label, row: this.targetItem })
-		},
-
-		onClose() {
-			this.internalOpen = false
-			this.$emit('close')
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-context-menu {
-	/* Hide the NcActions trigger button — menu opens only via right-click */
-	display: none;
-}
-</style>
+<template>
+	<NcActions
+		:open.sync="internalOpen"
+		:manual-open="true"
+		:force-menu="true"
+		class="cn-context-menu"
+		container="body"
+		@close="onClose">
+		<!-- Dynamic actions from array prop -->
+		<NcActionButton
+			v-for="action in actions"
+			:key="action.label"
+			:disabled="resolveDisabled(action)"
+			:class="{ 'cn-row-action--destructive': action.destructive }"
+			close-after-click
+			@click="onAction(action)">
+			<template v-if="action.icon" #icon>
+				<component :is="action.icon" :size="20" />
+			</template>
+			{{ action.label }}
+		</NcActionButton>
+
+		<!-- Custom content slot (for hardcoded buttons) -->
+		<slot />
+	</NcActions>
+</template>
+
+<script>
+import { NcActions, NcActionButton } from '@nextcloud/vue'
+
+/**
+ * CnContextMenu — Right-click context menu wrapper around NcActions.
+ *
+ * Provides a pre-configured NcActions instance that positions itself at the
+ * cursor via the `useContextMenu` composable's CSS custom properties. Accepts
+ * an `actions` array for the common dynamic case (like CnRowActions), and a
+ * default slot for hardcoded NcActionButton content.
+ *
+ * Pair with `useContextMenu()` for state management (open/close, target item,
+ * cursor positioning). The composable handles the DOM attributes; this component
+ * handles the NcActions template boilerplate.
+ *
+ * @example Dynamic actions (CnIndexPage pattern)
+ * <CnContextMenu
+ *   :open.sync="contextMenuOpen"
+ *   :actions="mergedActions"
+ *   :target-item="contextMenuRow"
+ *   @action="$emit('action', $event)"
+ *   @close="closeContextMenu" />
+ *
+ * @example Custom buttons via slot (Doriath pattern)
+ * <CnContextMenu
+ *   :open.sync="contextMenuOpen"
+ *   @close="closeContextMenu">
+ *   <NcActionButton close-after-click @click="onRename">
+ *     <template #icon><PencilIcon :size="20" /></template>
+ *     Rename
+ *   </NcActionButton>
+ * </CnContextMenu>
+ */
+export default {
+	name: 'CnContextMenu',
+
+	components: {
+		NcActions,
+		NcActionButton,
+	},
+
+	props: {
+		/**
+		 * Whether the context menu is open. Use with `.sync` modifier.
+		 * Bind to `useContextMenu().isOpen`.
+		 */
+		open: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Action definitions rendered as NcActionButton items.
+		 * Same format as CnRowActions: `{ label, icon?, handler?, disabled?, destructive? }`.
+		 * When empty, only the default slot content is rendered.
+		 * @type {Array<{label: string, icon?: Component, handler?: Function, disabled?: boolean | Function, destructive?: boolean}>}
+		 */
+		actions: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * The right-clicked item (row, folder, etc.). Passed to action `handler`
+		 * and `disabled` callbacks, and included in the `action` event payload.
+		 * Bind to `useContextMenu().targetItem`.
+		 */
+		targetItem: {
+			type: [Object, String, Number],
+			default: null,
+		},
+	},
+
+	data() {
+		return {
+			internalOpen: this.open,
+		}
+	},
+
+	watch: {
+		open(val) {
+			this.internalOpen = val
+		},
+		internalOpen(val) {
+			this.$emit('update:open', val)
+		},
+	},
+
+	methods: {
+		resolveDisabled(action) {
+			if (typeof action.disabled === 'function') {
+				return action.disabled(this.targetItem)
+			}
+			return !!action.disabled
+		},
+
+		onAction(action) {
+			if (action.handler && typeof action.handler === 'function') {
+				action.handler(this.targetItem)
+			}
+			this.$emit('action', { action: action.label, row: this.targetItem })
+		},
+
+		onClose() {
+			this.internalOpen = false
+			this.$emit('close')
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-context-menu {
+	/* Hide the NcActions trigger button — menu opens only via right-click */
+	display: none;
+}
+</style>