@conduction/nextcloud-vue 0.1.0-beta.3 → 0.1.0-beta.4

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,211 @@
+<!--
+  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" :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="header-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>
+/**
+ * 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: 'Widget',
+		},
+		/** Whether to show the header with title */
+		showTitle: {
+			type: Boolean,
+			default: true,
+		},
+		/** 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__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,29 +1,43 @@
-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 { 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 { 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 { 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 { 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'

package/src/composables/index.js

@@ -1,3 +1,4 @@
-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'