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

package/src/components/CnColorPicker/CnColorPicker.vue

@@ -0,0 +1,251 @@
+<template>
+	<NcPopover
+		:shown.sync="open"
+		:disabled="disabled"
+		:triggers="[]"
+		popup-role="dialog"
+		popover-base-class="cn-color-picker__popper">
+		<template #trigger>
+			<button
+				type="button"
+				class="cn-color-picker__swatch"
+				:class="{ 'cn-color-picker__swatch--disabled': disabled }"
+				:style="swatchStyle"
+				:disabled="disabled"
+				:title="t('nextcloud-vue', 'Open color picker')"
+				:aria-label="t('nextcloud-vue', 'Open color picker')"
+				@click="open = !open" />
+		</template>
+		<ChromeColorPicker
+			ref="picker"
+			v-bind="$attrs"
+			class="cn-color-picker__chrome"
+			:class="{ 'cn-color-picker__chrome--locked-mode': mode !== null }"
+			:value="value"
+			v-on="$listeners" />
+	</NcPopover>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcPopover } from '@nextcloud/vue'
+import { Chrome as ChromeColorPicker } from 'vue-color'
+
+/**
+ * CnColorPicker — A swatch-button trigger that opens a themed `Chrome` color
+ * picker (vue-color) inside a popover.
+ *
+ * The active color is shown as a square swatch (with a checker pattern behind
+ * it so alpha colors render correctly). Clicking the swatch toggles the
+ * popover. All props and listeners except `value` and `disabled` are
+ * forwarded to the underlying `Chrome` picker, so the full vue-color API
+ * stays available (`disable-alpha`, `disable-fields`, `@input`, etc.).
+ *
+ * The `value` prop accepts any of vue-color's color formats: a CSS color
+ * string (`'#abcdef'`, `'rgba(...)'`, ...) or a color object.
+ *
+ * @event input Forwarded from `Chrome`. Payload: vue-color color object
+ *              `{ hex, hex8, rgba, hsl, hsv, a, source }`.
+ */
+export default {
+	name: 'CnColorPicker',
+
+	components: {
+		NcPopover,
+		ChromeColorPicker,
+	},
+
+	inheritAttrs: false,
+
+	props: {
+		/**
+		 * Current color. Accepts any of vue-color's input formats: CSS color
+		 * string or color object. `null`/empty renders a transparent swatch.
+		 */
+		value: {
+			type: [String, Object],
+			default: null,
+		},
+		/** Disables the swatch trigger and prevents the popover from opening. */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Lock the picker's numeric input fields to a single mode and hide the
+		 * mode-toggle button. One of `'hex'`, `'rgb'`, `'hsl'`. When `null`
+		 * (default) the user can switch modes themselves. The actual fields
+		 * shown for `'rgb'`/`'hsl'` include alpha when `disable-alpha` is
+		 * `false` (i.e. they become RGBA / HSLA).
+		 */
+		mode: {
+			type: String,
+			default: null,
+			validator: (v) => v === null || ['hex', 'rgb', 'hsl'].includes(v),
+		},
+	},
+
+	data() {
+		return {
+			open: false,
+		}
+	},
+
+	computed: {
+		/**
+		 * CSS background for the swatch. Layers a solid color over a checker
+		 * pattern so alpha values are visible. Falls back to just the checker
+		 * when no value is set.
+		 */
+		swatchStyle() {
+			const c = typeof this.value === 'string'
+				? this.value
+				: (this.value?.hex8 || this.value?.hex)
+			if (!c) return {}
+			// Layer the solid fill on top of the four-gradient checker. Each
+			// checker layer needs its own offset so the squares alternate; if
+			// they all share `0 0` the pattern collapses to a single square.
+			const fill = `linear-gradient(${c}, ${c})`
+			return {
+				backgroundImage: `${fill}, var(--cn-color-picker-checker)`,
+				backgroundSize: '100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px',
+				backgroundPosition: '0 0, 0 0, 0 4px, 4px -4px, -4px 0',
+			}
+		},
+	},
+
+	watch: {
+		mode: {
+			immediate: true,
+			handler() {
+				// Wait for the picker ref to exist (initial mount + when the
+				// popover first renders the picker).
+				this.$nextTick(() => this.applyMode())
+			},
+		},
+		open(isOpen) {
+			// Re-apply on every open: vue-color resets `fieldsIndex` if the
+			// component is unmounted/remounted by the popover.
+			if (isOpen) this.$nextTick(() => this.applyMode())
+		},
+	},
+
+	methods: {
+		t,
+
+		/** Pin the Chrome picker's `fieldsIndex` to the requested mode. */
+		applyMode() {
+			if (!this.mode) return
+			const idx = { hex: 0, rgb: 1, hsl: 2 }[this.mode]
+			const picker = this.$refs.picker
+			if (picker && picker.fieldsIndex !== idx) {
+				picker.fieldsIndex = idx
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-color-picker__swatch {
+	--cn-color-picker-checker:
+		linear-gradient(45deg, var(--color-background-dark) 25%, transparent 25%),
+		linear-gradient(-45deg, var(--color-background-dark) 25%, transparent 25%),
+		linear-gradient(45deg, transparent 75%, var(--color-background-dark) 75%),
+		linear-gradient(-45deg, transparent 75%, var(--color-background-dark) 75%);
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	flex-shrink: 0;
+	padding: 0;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	cursor: pointer;
+	background-image: var(--cn-color-picker-checker);
+	background-size: 8px 8px;
+	background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+	overflow: hidden;
+	position: relative;
+}
+
+.cn-color-picker__swatch:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+.cn-color-picker__swatch--disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+/* Strip Chrome's hardcoded light-mode palette so it adopts the active theme.
+   The class lands on the picker's root via Vue's class merging, so target it
+   directly — NOT as a descendant. */
+.cn-color-picker__chrome {
+	background: var(--color-main-background);
+	background-color: var(--color-main-background);
+	box-shadow: none;
+	color: var(--color-main-text);
+	font-family: var(--font-face);
+	overflow: hidden;
+}
+
+.cn-color-picker__chrome :deep(.vc-chrome-body),
+.cn-color-picker__chrome :deep(.vc-chrome-saturation-wrap),
+.cn-color-picker__chrome :deep(.vc-chrome-color-wrap),
+.cn-color-picker__chrome :deep(.vc-chrome-active-color) {
+	background-color: var(--color-main-background);
+}
+
+.cn-color-picker__chrome :deep(.vc-chrome-toggle-icon-highlight) {
+	background: var(--color-background-hover);
+}
+
+.cn-color-picker__chrome :deep(.vc-hue-picker),
+.cn-color-picker__chrome :deep(.vc-alpha-picker) {
+	background-color: var(--color-main-background);
+	box-shadow: 0 1px 4px 0 var(--color-box-shadow);
+}
+
+.cn-color-picker__chrome :deep(.vc-chrome-fields .vc-input__input) {
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+	box-shadow: inset 0 0 0 1px var(--color-border);
+}
+
+.cn-color-picker__chrome :deep(.vc-chrome-fields .vc-input__label) {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-color-picker__chrome :deep(.vc-chrome-toggle-icon svg path) {
+	fill: var(--color-main-text);
+}
+
+/* When `mode` is set, lock the field-mode toggle so the user can't switch
+   between hex/rgb/hsl. */
+.cn-color-picker__chrome--locked-mode :deep(.vc-chrome-toggle-btn) {
+	display: none;
+}
+</style>
+
+<!-- Non-scoped overrides: NcPopover renders into a portal at document.body,
+     so scoped styles can't reach it. Targeted by `popoverBaseClass`. -->
+<style>
+.cn-color-picker__popper .v-popper__inner,
+.cn-color-picker__popper .v-popper__wrapper {
+	background: var(--color-main-background);
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.cn-color-picker__popper .v-popper__arrow-inner,
+.cn-color-picker__popper .v-popper__arrow-outer {
+	border-color: var(--color-main-background);
+}
+
+/* Default NcPopover style sets `top: -9px` with specificity (0,4,1) using a
+   hashed class name; bump with !important rather than depend on the hash. */
+.cn-color-picker__popper .v-popper__arrow-container {
+	top: -10px !important;
+}
+</style>

package/src/components/CnColorPicker/index.js

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

package/src/components/CnContextMenu/CnContextMenu.vue

@@ -8,8 +8,9 @@
 		@close="onClose">
 		<!-- Dynamic actions from array prop -->
 		<NcActionButton
-			v-for="action in actions"
+			v-for="action in visibleActions"
 			:key="action.label"
+			:title="resolveTitle(action)"
 			:disabled="resolveDisabled(action)"
 			:class="{ 'cn-row-action--destructive': action.destructive }"
 			close-after-click
@@ -77,9 +78,13 @@ export default {
 		},
 		/**
 		 * 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?: object, handler?: Function, disabled?: boolean | Function, destructive?: boolean}>}
+		 * Same format as CnRowActions: `{ label, icon?, handler?, disabled?, visible?, title?, destructive? }`.
+		 * `visible` (boolean | (targetItem) => boolean) hides the entry when falsy
+		 * (default: shown). `title` (string | (targetItem) => string) renders as
+		 * a native tooltip — useful for explaining why an entry is disabled.
+		 * When the entire array is empty (or all entries are filtered out), only
+		 * the default slot content is rendered.
+		 * @type {Array<{label: string, icon?: object, handler?: Function, disabled?: boolean | Function, visible?: boolean | Function, title?: string | Function, destructive?: boolean}>}
 		 */
 		actions: {
 			type: Array,
@@ -102,6 +107,23 @@ export default {
 		}
 	},
 
+	computed: {
+		/**
+		 * Filter actions by their `visible` predicate. Entries without
+		 * `visible` are always shown (backwards compatible).
+		 * @return {Array} Visible actions for the current targetItem.
+		 */
+		visibleActions() {
+			return this.actions.filter((action) => {
+				if (action.visible === undefined) return true
+				if (typeof action.visible === 'function') {
+					return !!action.visible(this.targetItem)
+				}
+				return !!action.visible
+			})
+		},
+	},
+
 	watch: {
 		open(val) {
 			this.internalOpen = val
@@ -119,6 +141,21 @@ export default {
 			return !!action.disabled
 		},
 
+		/**
+		 * Resolve the `title` field on an action descriptor — supports both
+		 * a static string and a function `(targetItem) => string`. Returns
+		 * undefined when no title is provided so the attribute isn't rendered.
+		 *
+		 * @param {object} action The action descriptor.
+		 * @return {string|undefined} The tooltip text, or undefined.
+		 */
+		resolveTitle(action) {
+			if (typeof action.title === 'function') {
+				return action.title(this.targetItem) || undefined
+			}
+			return action.title || undefined
+		},
+
 		onAction(action) {
 			if (action.handler && typeof action.handler === 'function') {
 				action.handler(this.targetItem)

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -22,6 +22,14 @@
 				</p>
 			</div>
 			<div class="cn-dashboard-page__header-actions">
+				<!-- Public slot. Documented in CLAUDE.md and used by every
+				     existing consumer (decidesk, mydash, opencatalogi,
+				     pipelinq, procest). -->
+				<slot name="header-actions" />
+				<!-- Back-compat alias: original slot name shipped before
+				     CLAUDE.md was updated. Render alongside so any
+				     stragglers still work; consumers should prefer
+				     #header-actions. -->
 				<slot name="actions" />
 				<NcButton
 					v-if="allowEdit"

package/src/components/CnDependencyMissing/CnDependencyMissing.vue

@@ -0,0 +1,152 @@
+<!--
+  CnDependencyMissing — full-page screen shown when one or more apps
+  declared in `manifest.dependencies` are not installed or not enabled.
+
+  CnAppRoot mounts this in its dependency-check phase (between loading
+  and shell). Apps can override CnAppRoot's #dependency-missing slot to
+  customise the screen.
+
+  See REQ-JMR-011 of the json-manifest-renderer specification.
+-->
+<template>
+	<div class="cn-dependency-missing">
+		<div class="cn-dependency-missing__inner">
+			<h1 class="cn-dependency-missing__heading">
+				{{ heading }}
+			</h1>
+			<p class="cn-dependency-missing__intro">
+				{{ intro }}
+			</p>
+			<ul class="cn-dependency-missing__list">
+				<li
+					v-for="dep in dependencies"
+					:key="dep.id"
+					class="cn-dependency-missing__item">
+					<span class="cn-dependency-missing__item-name">{{ dep.name || dep.id }}</span>
+					<a
+						class="cn-dependency-missing__item-link"
+						:href="resolveLink(dep)"
+						target="_self">
+						{{ dep.enabled === false ? enableLabel : installLabel }}
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CnDependencyMissing',
+
+	props: {
+		/**
+		 * Array of missing dependencies. Each entry:
+		 *   { id, name?, installUrl?, enabled? }
+		 * - `id` is the Nextcloud app id (matches the entries in
+		 *   manifest.dependencies)
+		 * - `name` is a human-readable label; `id` is used as a fallback
+		 * - `installUrl` overrides the default install/enable URL when
+		 *   set; otherwise the default Nextcloud apps page is used
+		 * - `enabled` discriminates the link label: `false` means the
+		 *   app is installed but disabled; otherwise it's not installed
+		 *
+		 * @type {Array<{id: string, name?: string, installUrl?: string, enabled?: boolean}>}
+		 */
+		dependencies: {
+			type: Array,
+			required: true,
+		},
+		/**
+		 * Optional name of the host app, included in the default heading.
+		 *
+		 * @type {string}
+		 */
+		appName: {
+			type: String,
+			default: '',
+		},
+		/** Heading text. Override for localisation. */
+		heading: {
+			type: String,
+			default: 'Required apps are missing',
+		},
+		/** Introductory text under the heading. */
+		intro: {
+			type: String,
+			default: 'This app needs the following Nextcloud apps to be installed and enabled.',
+		},
+		/** Label for the install link. */
+		installLabel: {
+			type: String,
+			default: 'Install',
+		},
+		/** Label for the enable link (used when dep.enabled === false). */
+		enableLabel: {
+			type: String,
+			default: 'Enable',
+		},
+	},
+
+	methods: {
+		resolveLink(dep) {
+			if (dep.installUrl) return dep.installUrl
+			return '/index.php/settings/apps'
+		},
+	},
+}
+</script>
+
+<style>
+.cn-dependency-missing {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	min-height: 100vh;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.cn-dependency-missing__inner {
+	max-width: 600px;
+	padding: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-dependency-missing__heading {
+	margin: 0 0 calc(2 * var(--default-grid-baseline));
+	font-size: 1.5em;
+}
+
+.cn-dependency-missing__intro {
+	margin: 0 0 calc(3 * var(--default-grid-baseline));
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-dependency-missing__list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-dependency-missing__item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: calc(2 * var(--default-grid-baseline)) 0;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-dependency-missing__item:last-child {
+	border-bottom: 0;
+}
+
+.cn-dependency-missing__item-name {
+	font-weight: bold;
+}
+
+.cn-dependency-missing__item-link {
+	color: var(--color-primary-element);
+	text-decoration: underline;
+}
+</style>

package/src/components/CnDependencyMissing/index.js

@@ -0,0 +1,3 @@
+import CnDependencyMissing from './CnDependencyMissing.vue'
+export default CnDependencyMissing
+export { CnDependencyMissing }

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -24,23 +24,34 @@
 	<div class="cn-detail-page" :style="{ maxWidth: maxWidth }">
 		<!-- Header -->
 		<div class="cn-detail-page__header">
-			<div class="cn-detail-page__header-left">
-				<slot name="icon">
-					<CnIcon
-						v-if="icon"
-						:name="icon"
-						:size="iconSize"
-						class="cn-detail-page__icon" />
-				</slot>
-				<div class="cn-detail-page__header-text">
-					<h2 v-if="title" class="cn-detail-page__title">
-						{{ title }}
-					</h2>
-					<p v-if="description" class="cn-detail-page__description">
-						{{ description }}
-					</p>
+			<!-- Header (left block) — overridable via #header slot. Default
+			     renders the icon + title + description. The right-hand
+			     #actions slot remains separate so headerComponent and
+			     actionsComponent can be replaced independently. -->
+			<slot
+				name="header"
+				:title="title"
+				:description="description"
+				:icon="icon"
+				:icon-size="iconSize">
+				<div class="cn-detail-page__header-left">
+					<slot name="icon">
+						<CnIcon
+							v-if="icon"
+							:name="icon"
+							:size="iconSize"
+							class="cn-detail-page__icon" />
+					</slot>
+					<div class="cn-detail-page__header-text">
+						<h2 v-if="title" class="cn-detail-page__title">
+							{{ title }}
+						</h2>
+						<p v-if="description" class="cn-detail-page__description">
+							{{ description }}
+						</p>
+					</div>
 				</div>
-			</div>
+			</slot>
 			<div class="cn-detail-page__header-actions">
 				<slot name="actions" />
 			</div>

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1,11 +1,19 @@
 <template>
 	<div class="cn-index-page">
-		<!-- Header (hidden by default — shown in sidebar instead) -->
-		<CnPageHeader
-			v-if="showTitle"
+		<!-- Header — overridable via #header slot. Default renders CnPageHeader
+		     when showTitle is true (existing behaviour, hidden by default). -->
+		<slot
+			name="header"
 			:title="title"
 			:description="description"
-			:icon="resolvedIcon" />
+			:icon="resolvedIcon"
+			:show-title="showTitle">
+			<CnPageHeader
+				v-if="showTitle"
+				:title="title"
+				:description="description"
+				:icon="resolvedIcon" />
+		</slot>
 
 		<!-- Optional content below header, above actions bar -->
 		<div v-if="$scopedSlots['below-header']" class="cn-index-page__below-header">
@@ -548,6 +556,17 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Whether to add a View action to row actions. The action emits a
+		 * dedicated `view` event — independent of `row-click`. Bind `@view`
+		 * to handle "open detail" and `@row-click` to handle row click
+		 * (selection, expand, etc.); they may share a handler when the app
+		 * wants click-to-view, but they are conceptually distinct.
+		 */
+		showViewAction: {
+			type: Boolean,
+			default: true,
+		},
 		/** Whether to add an Edit action to row actions */
 		showEditAction: {
 			type: Boolean,
@@ -670,12 +689,12 @@ export default {
 		/** Built-in row actions based on show*Action props */
 		defaultActions() {
 			const builtIn = []
-			if (this.$listeners && this.$listeners['row-click']) {
+			if (this.showViewAction) {
 				builtIn.push({
 					label: 'View',
 					icon: this.schemaIconComponent,
 					handler: (row) => {
-						this.onRowClick(row)
+						this.onView(row)
 					},
 				})
 			}
@@ -765,6 +784,17 @@ export default {
 			this.$emit('row-click', row)
 		},
 
+		/**
+		 * Handle the built-in View action — emits a dedicated `view` event.
+		 * Kept distinct from `row-click` because the two are conceptually
+		 * different: a row click might mean select/expand/drilldown, while
+		 * View always means "open the detail view of this row".
+		 * @param {object} row The row whose View action was triggered
+		 */
+		onView(row) {
+			this.$emit('view', row)
+		},
+
 		/**
 		 * Handle the Add button click. If the consumer listens to @add,
 		 * emit the event (backward compatible). Otherwise open the form dialog.