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

package/src/components/CnWidgetRenderer/CnWidgetRenderer.vue

@@ -0,0 +1,180 @@
+<!--
+  CnWidgetRenderer — Renders Nextcloud Dashboard API widgets (v1/v2).
+
+  Loads widget items from the Nextcloud widget API and displays them
+  using NcDashboardWidget. Supports auto-refresh for widgets that
+  define a reload interval.
+-->
+<template>
+	<div class="cn-widget-renderer">
+		<!-- API Widget V1 or V2 -->
+		<NcDashboardWidget
+			v-if="isApiWidget"
+			:items="widgetItems"
+			:show-more-url="widget.widgetUrl"
+			:loading="loading"
+			:item-menu="false"
+			:round-icons="widget.itemIconsRound">
+			<template #empty-content>
+				<NcEmptyContent
+					v-if="emptyMessage"
+					:description="emptyMessage">
+					<template #icon>
+						<span v-if="widget.iconClass" :class="widget.iconClass" />
+					</template>
+				</NcEmptyContent>
+			</template>
+		</NcDashboardWidget>
+
+		<!-- Loading state -->
+		<div v-else-if="loading" class="cn-widget-renderer__loading">
+			<NcLoadingIcon :size="32" />
+		</div>
+
+		<!-- Fallback for unknown widget types -->
+		<NcEmptyContent
+			v-else
+			:description="unavailableText">
+			<template #icon>
+				<AlertCircleOutline :size="48" />
+			</template>
+		</NcEmptyContent>
+	</div>
+</template>
+
+<script>
+import { NcDashboardWidget, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
+import axios from '@nextcloud/axios'
+import { generateOcsUrl } from '@nextcloud/router'
+
+/**
+ * CnWidgetRenderer — Renders Nextcloud Dashboard API widgets.
+ *
+ * Fetches widget items from the OCS Dashboard API and displays them
+ * using the standard NcDashboardWidget component.
+ *
+ * @example
+ * <CnWidgetRenderer :widget="ncWidget" />
+ */
+export default {
+	name: 'CnWidgetRenderer',
+
+	components: {
+		NcDashboardWidget,
+		NcEmptyContent,
+		NcLoadingIcon,
+		AlertCircleOutline,
+	},
+
+	props: {
+		/**
+		 * Nextcloud widget object from the Dashboard API.
+		 * @type {{ id: string, title: string, iconClass?: string, iconUrl?: string, widgetUrl?: string, itemIconsRound?: boolean, itemApiVersions?: number[], reloadInterval?: number, buttons?: Array }}
+		 */
+		widget: {
+			type: Object,
+			required: true,
+		},
+		/** Text shown when widget is not available */
+		unavailableText: {
+			type: String,
+			default: 'Widget not available',
+		},
+	},
+
+	data() {
+		return {
+			loading: false,
+			items: [],
+			emptyMessage: '',
+			refreshInterval: null,
+		}
+	},
+
+	computed: {
+		isApiWidgetV2() {
+			return this.widget?.itemApiVersions?.includes(2)
+		},
+
+		isApiWidgetV1() {
+			return this.widget?.itemApiVersions?.includes(1)
+		},
+
+		isApiWidget() {
+			return this.isApiWidgetV1 || this.isApiWidgetV2
+		},
+
+		widgetItems() {
+			return this.items.map(item => ({
+				id: item.sinceId || item.id || String(Math.random()),
+				targetUrl: item.link || item.targetUrl || '',
+				avatarUrl: item.iconUrl || item.avatarUrl || '',
+				avatarUsername: item.avatarUsername || '',
+				overlayIconUrl: item.overlayIconUrl || '',
+				mainText: item.title || item.mainText || '',
+				subText: item.subtitle || item.subText || '',
+			}))
+		},
+	},
+
+	async mounted() {
+		if (this.isApiWidget) {
+			await this.loadItems()
+
+			if (this.widget.reloadInterval && this.widget.reloadInterval > 0) {
+				this.refreshInterval = setInterval(
+					() => this.loadItems(),
+					this.widget.reloadInterval * 1000,
+				)
+			}
+		}
+	},
+
+	beforeDestroy() {
+		if (this.refreshInterval) {
+			clearInterval(this.refreshInterval)
+		}
+	},
+
+	methods: {
+		async loadItems() {
+			this.loading = true
+			try {
+				const version = this.isApiWidgetV2 ? 2 : 1
+				const url = generateOcsUrl(
+					`/apps/dashboard/api/v${version}/widget-items`,
+				)
+				const response = await axios.get(url, {
+					params: { widgets: [this.widget.id] },
+				})
+
+				const data = response.data?.ocs?.data
+				if (data && data[this.widget.id]) {
+					const widgetData = data[this.widget.id]
+					this.items = widgetData.items || widgetData || []
+					this.emptyMessage = widgetData.emptyContentMessage || ''
+				}
+			} catch (error) {
+				console.error(`[CnWidgetRenderer] Failed to load items for ${this.widget.id}:`, error)
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-widget-renderer {
+	height: 100%;
+	padding: 8px;
+}
+
+.cn-widget-renderer__loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+}
+</style>

package/src/components/CnWidgetRenderer/index.js

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

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -0,0 +1,248 @@
+<!--
+  CnWidgetWrapper — Container shell around a dashboard widget.
+
+  Provides header (icon + title), scrollable content area, and optional
+  footer with action buttons. Applies style configuration for borders,
+  backgrounds, and padding.
+-->
+<template>
+	<div
+		class="cn-widget-wrapper"
+		:class="{
+			'cn-widget-wrapper--borderless': borderless,
+			'cn-widget-wrapper--flush': flush,
+		}"
+		:style="wrapperStyles">
+		<!-- Header -->
+		<div v-if="showTitle" class="cn-widget-wrapper__header">
+			<div class="cn-widget-wrapper__header-left">
+				<img
+					v-if="iconUrl"
+					:src="iconUrl"
+					:alt="displayTitle"
+					class="cn-widget-wrapper__icon">
+				<span
+					v-else-if="iconClass"
+					:class="iconClass"
+					class="cn-widget-wrapper__icon" />
+				<h3 class="cn-widget-wrapper__title">
+					{{ displayTitle }}
+				</h3>
+			</div>
+			<div class="cn-widget-wrapper__actions">
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<!-- Content -->
+		<div class="cn-widget-wrapper__content">
+			<slot />
+		</div>
+
+		<!-- Footer -->
+		<div v-if="$slots.footer || (buttons && buttons.length > 0)" class="cn-widget-wrapper__footer">
+			<slot name="footer">
+				<a
+					v-for="button in buttons"
+					:key="button.link"
+					:href="button.link"
+					class="cn-widget-wrapper__footer-link">
+					{{ button.text }}
+				</a>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+
+/**
+ * CnWidgetWrapper — Widget container with header, content, and footer.
+ *
+ * @example
+ * <CnWidgetWrapper title="My Cases" :icon-url="casesIconUrl">
+ *   <MyCasesChart :data="chartData" />
+ * </CnWidgetWrapper>
+ *
+ * @example With NC widget object
+ * <CnWidgetWrapper
+ *   :title="widget.title"
+ *   :icon-url="widget.iconUrl"
+ *   :icon-class="widget.iconClass"
+ *   :buttons="widget.buttons">
+ *   <CnWidgetRenderer :widget="widget" />
+ * </CnWidgetWrapper>
+ */
+export default {
+	name: 'CnWidgetWrapper',
+
+	props: {
+		/** Widget title */
+		title: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Widget'),
+		},
+		/** Whether to show the header with title */
+		showTitle: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Remove border and background — makes the wrapper transparent.
+		 * Useful for widgets that are self-contained cards (e.g. CnStatsBlock).
+		 */
+		borderless: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Remove content padding — allows content to go edge-to-edge.
+		 * Useful for list-style widgets where items should span the full width.
+		 */
+		flush: {
+			type: Boolean,
+			default: false,
+		},
+		/** Icon URL (image) */
+		iconUrl: {
+			type: String,
+			default: null,
+		},
+		/** Icon CSS class (e.g., Nextcloud icon class) */
+		iconClass: {
+			type: String,
+			default: null,
+		},
+		/** Footer action buttons: [{ text, link }] */
+		buttons: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Style configuration for the wrapper.
+		 * @type {{ backgroundColor?: string, borderStyle?: string, borderWidth?: number, borderColor?: string, borderRadius?: number, padding?: { top: number, right: number, bottom: number, left: number } }}
+		 */
+		styleConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	computed: {
+		displayTitle() {
+			return this.title || 'Widget'
+		},
+
+		wrapperStyles() {
+			const styles = {}
+
+			if (this.styleConfig.backgroundColor) {
+				styles.backgroundColor = this.styleConfig.backgroundColor
+			}
+
+			if (this.styleConfig.borderStyle && this.styleConfig.borderStyle !== 'none') {
+				styles.border = `${this.styleConfig.borderWidth || 1}px ${this.styleConfig.borderStyle} ${this.styleConfig.borderColor || 'var(--color-border)'}`
+			}
+
+			if (this.styleConfig.borderRadius !== undefined) {
+				styles.borderRadius = `${this.styleConfig.borderRadius}px`
+			}
+
+			if (this.styleConfig.padding) {
+				const p = this.styleConfig.padding
+				styles.padding = `${p.top || 0}px ${p.right || 0}px ${p.bottom || 0}px ${p.left || 0}px`
+			}
+
+			return styles
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-widget-wrapper {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	overflow: hidden;
+}
+
+.cn-widget-wrapper--borderless {
+	border: none;
+	background: transparent;
+}
+
+.cn-widget-wrapper--borderless .cn-widget-wrapper__content {
+	padding: 0;
+}
+
+.cn-widget-wrapper--flush .cn-widget-wrapper__content {
+	padding: 0;
+}
+
+.cn-widget-wrapper__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 16px;
+	border-bottom: 1px solid var(--color-border);
+	flex-shrink: 0;
+}
+
+.cn-widget-wrapper__header-left {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+
+.cn-widget-wrapper__icon {
+	width: 24px;
+	height: 24px;
+	flex-shrink: 0;
+}
+
+.cn-widget-wrapper__title {
+	font-weight: 600;
+	font-size: 14px;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-widget-wrapper__content {
+	flex: 1;
+	overflow: auto;
+	min-height: 0;
+	padding: 16px;
+}
+
+.cn-widget-wrapper__actions {
+	display: flex;
+	gap: 4px;
+	flex-shrink: 0;
+}
+
+.cn-widget-wrapper__footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 8px 16px;
+	border-top: 1px solid var(--color-border);
+	flex-shrink: 0;
+}
+
+.cn-widget-wrapper__footer-link {
+	font-size: 13px;
+	color: var(--color-primary-element);
+	text-decoration: none;
+}
+
+.cn-widget-wrapper__footer-link:hover {
+	text-decoration: underline;
+}
+</style>

package/src/components/CnWidgetWrapper/index.js

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

package/src/components/index.js

@@ -1,25 +1,57 @@
-export { CnDataTable } from './CnDataTable/index.js'
-export { CnFilterBar } from './CnFilterBar/index.js'
-export { CnListViewLayout } from './CnListViewLayout/index.js'
-export { CnDetailViewLayout } from './CnDetailViewLayout/index.js'
-export { CnStatusBadge } from './CnStatusBadge/index.js'
-export { CnEmptyState } from './CnEmptyState/index.js'
-export { CnPagination } from './CnPagination/index.js'
-export { CnSettingsCard } from './CnSettingsCard/index.js'
-export { CnSettingsSection } from './CnSettingsSection/index.js'
-export { CnStatsBlock } from './CnStatsBlock/index.js'
-export { CnConfigurationCard } from './CnConfigurationCard/index.js'
-export { CnVersionInfoCard } from './CnVersionInfoCard/index.js'
-export { CnCellRenderer } from './CnCellRenderer/index.js'
-export { CnObjectCard } from './CnObjectCard/index.js'
-export { CnCardGrid } from './CnCardGrid/index.js'
-export { CnFacetSidebar } from './CnFacetSidebar/index.js'
-export { CnViewModeToggle } from './CnViewModeToggle/index.js'
-export { CnRowActions } from './CnRowActions/index.js'
-export { CnIndexPage } from './CnIndexPage/index.js'
-export { CnMassActionBar } from './CnMassActionBar/index.js'
-export { CnMassDeleteDialog } from './CnMassDeleteDialog/index.js'
-export { CnMassCopyDialog } from './CnMassCopyDialog/index.js'
-export { CnKpiGrid } from './CnKpiGrid/index.js'
-export { CnMassExportDialog } from './CnMassExportDialog/index.js'
-export { CnMassImportDialog } from './CnMassImportDialog/index.js'
+export { CnDataTable } from './CnDataTable/index.js'
+export { CnFilterBar } from './CnFilterBar/index.js'
+export { CnStatusBadge } from './CnStatusBadge/index.js'
+export { CnPagination } from './CnPagination/index.js'
+export { CnSettingsCard } from './CnSettingsCard/index.js'
+export { CnSettingsSection } from './CnSettingsSection/index.js'
+export { CnStatsBlock } from './CnStatsBlock/index.js'
+export { CnConfigurationCard } from './CnConfigurationCard/index.js'
+export { CnVersionInfoCard } from './CnVersionInfoCard/index.js'
+export { CnCellRenderer } from './CnCellRenderer/index.js'
+export { CnObjectCard } from './CnObjectCard/index.js'
+export { CnCardGrid } from './CnCardGrid/index.js'
+export { CnFacetSidebar } from './CnFacetSidebar/index.js'
+export { CnRowActions } from './CnRowActions/index.js'
+export { CnContextMenu } from './CnContextMenu/index.js'
+export { CnIndexPage } from './CnIndexPage/index.js'
+export { CnMassActionBar } from './CnMassActionBar/index.js'
+export { CnDeleteDialog } from './CnDeleteDialog/index.js'
+export { CnCopyDialog } from './CnCopyDialog/index.js'
+export { CnFormDialog } from './CnFormDialog/index.js'
+export { CnAdvancedFormDialog } from './CnAdvancedFormDialog/index.js'
+export { CnMassDeleteDialog } from './CnMassDeleteDialog/index.js'
+export { CnMassCopyDialog } from './CnMassCopyDialog/index.js'
+export { CnKpiGrid } from './CnKpiGrid/index.js'
+export { CnMassExportDialog } from './CnMassExportDialog/index.js'
+export { CnMassImportDialog } from './CnMassImportDialog/index.js'
+export { CnIndexSidebar } from './CnIndexSidebar/index.js'
+export { CnRegisterMapping } from './CnRegisterMapping/index.js'
+export { CnIcon, ICON_MAP, registerIcons } from './CnIcon/index.js'
+export { CnPageHeader } from './CnPageHeader/index.js'
+export { CnActionsBar } from './CnActionsBar/index.js'
+export { CnDetailPage } from './CnDetailPage/index.js'
+export { CnDashboardPage } from './CnDashboardPage/index.js'
+export { CnDashboardGrid } from './CnDashboardGrid/index.js'
+export { CnWidgetWrapper } from './CnWidgetWrapper/index.js'
+export { CnWidgetRenderer } from './CnWidgetRenderer/index.js'
+export { CnTileWidget } from './CnTileWidget/index.js'
+export { CnItemCard } from './CnItemCard/index.js'
+export { CnSchemaFormDialog } from './CnSchemaFormDialog/index.js'
+export { CnTabbedFormDialog } from './CnTabbedFormDialog/index.js'
+export { CnTimelineStages } from './CnTimelineStages/index.js'
+export { CnUserActionMenu } from './CnUserActionMenu/index.js'
+export { CnNotesCard } from './CnNotesCard/index.js'
+export { CnTasksCard } from './CnTasksCard/index.js'
+export { CnDetailCard } from './CnDetailCard/index.js'
+export { CnCard } from './CnCard/index.js'
+export { CnStatsPanel } from './CnStatsPanel/index.js'
+export { CnJsonViewer } from './CnJsonViewer/index.js'
+export { CnDetailGrid } from './CnDetailGrid/index.js'
+export { CnProgressBar } from './CnProgressBar/index.js'
+export { CnChartWidget } from './CnChartWidget/index.js'
+export { CnObjectSidebar } from './CnObjectSidebar/index.js'
+export { CnInfoWidget } from './CnInfoWidget/index.js'
+export { CnTableWidget } from './CnTableWidget/index.js'
+export { CnNoteCard } from './CnNoteCard/index.js'
+export { CnObjectDataWidget } from './CnObjectDataWidget/index.js'
+export { CnObjectMetadataWidget } from './CnObjectMetadataWidget/index.js'

package/src/composables/index.js

@@ -1,3 +1,5 @@
-export { useListView } from './useListView.js'
-export { useDetailView } from './useDetailView.js'
-export { useSubResource } from './useSubResource.js'
+export { useListView } from './useListView.js'
+export { useDetailView } from './useDetailView.js'
+export { useSubResource } from './useSubResource.js'
+export { useDashboardView } from './useDashboardView.js'
+export { useContextMenu } from './useContextMenu.js'

package/src/composables/useContextMenu.js

@@ -0,0 +1,126 @@
+import { ref, onBeforeUnmount } from 'vue'
+
+const CSS_VAR_X = '--cn-ctx-menu-x'
+const CSS_VAR_Y = '--cn-ctx-menu-y'
+const DATA_ATTR = 'data-cn-ctx-menu'
+
+/**
+ * Composable for managing a right-click context menu positioned at the cursor.
+ *
+ * Handles cursor-based positioning through CSS custom properties and a data
+ * attribute on `document.documentElement`. The `<NcActions>` template stays in
+ * the consuming component — this composable only manages open/close state,
+ * the target item reference, and action helpers.
+ *
+ * Pair with the shared CSS in `src/css/context-menu.css` (auto-imported via
+ * `src/css/index.css`) which overrides `.v-popper__popper` transforms when
+ * the data attribute is present.
+ *
+ * @example In a Vue Options API component with setup()
+ * ```js
+ * import { useContextMenu } from '@conduction/nextcloud-vue'
+ *
+ * export default {
+ *   setup() {
+ *     const ctx = useContextMenu()
+ *     return {
+ *       contextMenuOpen: ctx.isOpen,
+ *       contextMenuRow: ctx.targetItem,
+ *       openContextMenu: ctx.open,
+ *       closeContextMenu: ctx.close,
+ *       isContextActionDisabled: ctx.isActionDisabled,
+ *       triggerContextAction: ctx.triggerAction,
+ *     }
+ *   },
+ * }
+ * ```
+ *
+ * @return {{
+ *   isOpen: import('vue').Ref<boolean>,
+ *   targetItem: import('vue').Ref<any>,
+ *   open: (params: { item: any, event: MouseEvent }) => void,
+ *   close: () => void,
+ *   isActionDisabled: (action: { disabled?: boolean | ((item: any) => boolean) }) => boolean,
+ *   triggerAction: (action: { label: string, handler?: (item: any) => void }) => { action: string, row: any },
+ * }}
+ */
+export function useContextMenu() {
+	const isOpen = ref(false)
+	const targetItem = ref(null)
+
+	/**
+	 * Open the context menu at the cursor position.
+	 *
+	 * Sets CSS custom properties for x/y coordinates and a data attribute on
+	 * `document.documentElement` so the shared CSS can override Popper positioning.
+	 *
+	 * @param {object} params
+	 * @param {any} params.item The item associated with the right-click (row, folder, etc.)
+	 * @param {MouseEvent} params.event The native contextmenu event
+	 */
+	function open({ item, event }) {
+		document.documentElement.style.setProperty(CSS_VAR_X, event.clientX + 'px')
+		document.documentElement.style.setProperty(CSS_VAR_Y, event.clientY + 'px')
+		document.documentElement.setAttribute(DATA_ATTR, '')
+		targetItem.value = item
+		isOpen.value = true
+	}
+
+	/**
+	 * Close the context menu and clean up DOM attributes.
+	 * Use as the `@close` handler on `<NcActions>`.
+	 */
+	function close() {
+		isOpen.value = false
+		document.documentElement.style.removeProperty(CSS_VAR_X)
+		document.documentElement.style.removeProperty(CSS_VAR_Y)
+		document.documentElement.removeAttribute(DATA_ATTR)
+		targetItem.value = null
+	}
+
+	/**
+	 * Resolve whether an action is disabled for the current target item.
+	 * Supports both a static boolean and a function `(item) => boolean`.
+	 *
+	 * @param {object} action Action definition with optional `disabled` field
+	 * @return {boolean}
+	 */
+	function isActionDisabled(action) {
+		if (typeof action.disabled === 'function') {
+			return action.disabled(targetItem.value)
+		}
+		return !!action.disabled
+	}
+
+	/**
+	 * Execute a context menu action.
+	 *
+	 * Calls `action.handler(targetItem)` if a handler exists, then returns a
+	 * payload object the caller can pass to `$emit('action', payload)`.
+	 *
+	 * @param {object} action Action definition with `label` and optional `handler`
+	 * @return {{ action: string, row: any }}
+	 */
+	function triggerAction(action) {
+		if (action.handler && typeof action.handler === 'function') {
+			action.handler(targetItem.value)
+		}
+		return { action: action.label, row: targetItem.value }
+	}
+
+	// Clean up DOM if the component unmounts while the menu is open
+	onBeforeUnmount(() => {
+		if (isOpen.value) {
+			close()
+		}
+	})
+
+	return {
+		isOpen,
+		targetItem,
+		open,
+		close,
+		isActionDisabled,
+		triggerAction,
+	}
+}