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

package/src/utils/schema.js

@@ -1,6 +1,7 @@
 /**
  * Schema utility functions for auto-generating table columns, cell formatting,
- * and faceted filter definitions from OpenRegister schema property definitions.
+ * form field definitions, and faceted filter definitions from OpenRegister
+ * schema property definitions.
  *
  * @module utils/schema
  */
@@ -236,6 +237,136 @@ function truncateString(str, maxLength) {
 	return str.substring(0, maxLength) + '...'
 }
 
+/**
+ * Resolve the form widget type for a JSON Schema property.
+ *
+ * Resolution priority (first match wins):
+ * 1. Explicit `prop.widget` — pass-through custom widget name
+ * 2. `prop.enum` → `'select'`
+ * 3. Type-based: `boolean` → `'checkbox'`, `integer`/`number` → `'number'`,
+ *    `array` + `items.enum` → `'multiselect'`, `array` → `'tags'`
+ * 4. Format-based: `date-time` → `'datetime'`, `date` → `'date'`,
+ *    `email` → `'email'`, `uri`/`url` → `'url'`,
+ *    `markdown`/`textarea` → `'textarea'`
+ * 5. Long text: `maxLength > 255` → `'textarea'`
+ * 6. Fallback → `'text'`
+ *
+ * @param {object} prop The schema property definition (type, format, enum, widget, items, maxLength)
+ * @return {string} Widget identifier: 'text'|'email'|'url'|'number'|'checkbox'|'select'|'multiselect'|'tags'|'textarea'|'date'|'datetime' or a custom string
+ */
+function resolveWidget(prop) {
+	// Explicit widget hint takes priority
+	if (prop.widget) return prop.widget
+
+	// Enum → select
+	if (prop.enum) return 'select'
+
+	const type = prop.type || 'string'
+	const format = prop.format || ''
+
+	// Boolean → switch/checkbox
+	if (type === 'boolean') return 'checkbox'
+
+	// Number types
+	if (type === 'integer' || type === 'number') return 'number'
+
+	// Array types
+	if (type === 'array') {
+		if (prop.items && prop.items.enum) return 'multiselect'
+		return 'tags'
+	}
+
+	// Format-based widgets
+	if (format === 'date-time') return 'datetime'
+	if (format === 'date') return 'date'
+	if (format === 'email') return 'email'
+	if (format === 'uri' || format === 'url') return 'url'
+	if (format === 'markdown' || format === 'textarea') return 'textarea'
+
+	// Long text → textarea
+	if (prop.maxLength && prop.maxLength > 255) return 'textarea'
+
+	return 'text'
+}
+
+/**
+ * Generate form field definitions from a schema's properties.
+ *
+ * Reads `schema.properties` and creates field descriptor objects suitable
+ * for auto-generating form UIs. Follows the same pattern as
+ * `columnsFromSchema()` — filters, sorts, and supports overrides.
+ *
+ * @param {object} schema The schema object with a `properties` field
+ * @param {object} [options] Configuration options
+ * @param {string[]} [options.exclude] Property keys to exclude
+ * @param {string[]} [options.include] Property keys to include (whitelist mode)
+ * @param {object} [options.overrides] Per-key field overrides, e.g. `{ status: { widget: 'select' } }`
+ * @param {boolean} [options.includeReadOnly=false] Whether to include readOnly properties
+ * @return {Array<{key: string, label: string, description: string, type: string, format: string|null, widget: string, required: boolean, readOnly: boolean, default: *, enum: Array|null, items: object|null, validation: object, order: number}>}
+ */
+export function fieldsFromSchema(schema, options = {}) {
+	const { exclude = [], include = null, overrides = {}, includeReadOnly = false } = options
+
+	if (!schema || !schema.properties) {
+		return []
+	}
+
+	const requiredKeys = Array.isArray(schema.required) ? schema.required : []
+
+	const entries = Object.entries(schema.properties)
+		.filter(([key, prop]) => {
+			// Skip properties marked as not visible
+			if (prop.visible === false) return false
+			// Skip readOnly properties by default
+			if (prop.readOnly === true && !includeReadOnly) return false
+			// Apply exclude list
+			if (exclude.includes(key)) return false
+			// Apply include whitelist
+			if (include && !include.includes(key)) return false
+			// Skip complex object types (not supported in auto-form)
+			if (prop.type === 'object') return false
+			return true
+		})
+		.sort(([keyA, propA], [keyB, propB]) => {
+			// Sort by order hint first, then alphabetically
+			const orderA = typeof propA.order === 'number' ? propA.order : Infinity
+			const orderB = typeof propB.order === 'number' ? propB.order : Infinity
+			if (orderA !== orderB) return orderA - orderB
+			return keyA.localeCompare(keyB)
+		})
+
+	return entries.map(([key, prop]) => {
+		const field = {
+			key,
+			label: prop.title || key,
+			description: prop.description || '',
+			type: prop.type || 'string',
+			format: prop.format || null,
+			widget: resolveWidget(prop),
+			required: requiredKeys.includes(key),
+			readOnly: prop.readOnly || false,
+			default: prop.default !== undefined ? prop.default : null,
+			enum: prop.enum || null,
+			items: prop.items || null,
+			validation: {
+				minLength: prop.minLength,
+				maxLength: prop.maxLength,
+				minimum: prop.minimum,
+				maximum: prop.maximum,
+				pattern: prop.pattern,
+			},
+			order: typeof prop.order === 'number' ? prop.order : Infinity,
+		}
+
+		// Apply per-field overrides
+		if (overrides[key]) {
+			Object.assign(field, overrides[key])
+		}
+
+		return field
+	})
+}
+
 /**
  * Generate faceted filter definitions from a schema's facetable properties.
  *
@@ -263,6 +394,7 @@ export function filtersFromSchema(schema) {
 			const filter = {
 				key,
 				label: prop.title || key,
+				description: prop.description || '',
 				propertyType: prop.type || 'string',
 				options: [],
 				value: null,

package/src/components/CnDetailViewLayout/CnDetailViewLayout.vue

@@ -1,88 +0,0 @@
-<template>
-	<div class="cn-detail-layout">
-		<!-- Header -->
-		<div class="cn-detail-layout__header">
-			<NcButton @click="$emit('back')">
-				<template #icon>
-					<ArrowLeft :size="20" />
-				</template>
-				{{ backLabel }}
-			</NcButton>
-
-			<h2 class="cn-detail-layout__title">
-				<slot name="title">{{ title }}</slot>
-			</h2>
-
-			<div class="cn-detail-layout__actions">
-				<slot name="actions" />
-			</div>
-		</div>
-
-		<!-- Loading state -->
-		<div v-if="loading" class="cn-loading-container">
-			<NcLoadingIcon :size="32" />
-		</div>
-
-		<!-- Main content -->
-		<div v-else class="cn-detail-layout__content">
-			<slot />
-		</div>
-
-		<!-- Delete confirmation dialog -->
-		<slot name="dialogs" />
-	</div>
-</template>
-
-<script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
-import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-
-/**
- * CnDetailViewLayout — Detail page layout with back button, title, actions, and content.
- *
- * Provides the standard structure for detail/edit views: back navigation,
- * page title, action buttons, and a content area. Supports loading state
- * and a dialogs slot for modals.
- *
- * @example
- * <CnDetailViewLayout
- *   title="Client: Acme Corp"
- *   :loading="isLoading"
- *   @back="goBack">
- *   <template #actions>
- *     <NcButton @click="edit">Edit</NcButton>
- *     <NcButton type="error" @click="confirmDelete">Delete</NcButton>
- *   </template>
- *   <div class="cn-detail-grid">
- *     <div class="cn-detail-item">...</div>
- *   </div>
- * </CnDetailViewLayout>
- */
-export default {
-	name: 'CnDetailViewLayout',
-
-	components: {
-		NcButton,
-		NcLoadingIcon,
-		ArrowLeft,
-	},
-
-	props: {
-		/** Page title */
-		title: {
-			type: String,
-			default: '',
-		},
-		/** Whether data is loading */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		/** Back button label */
-		backLabel: {
-			type: String,
-			default: 'Back',
-		},
-	},
-}
-</script>

package/src/components/CnDetailViewLayout/index.js

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

package/src/components/CnEmptyState/CnEmptyState.vue

@@ -1,78 +0,0 @@
-<template>
-	<NcEmptyContent :name="title" :description="description">
-		<template #icon>
-			<slot name="icon">
-				<component :is="icon" v-if="icon" :size="64" />
-			</slot>
-		</template>
-		<template v-if="actionLabel" #action>
-			<slot name="action">
-				<NcButton :type="actionType" @click="$emit('action')">
-					{{ actionLabel }}
-				</NcButton>
-			</slot>
-		</template>
-	</NcEmptyContent>
-</template>
-
-<script>
-import { NcEmptyContent, NcButton } from '@nextcloud/vue'
-
-/**
- * CnEmptyState — Consistent empty state display wrapping NcEmptyContent.
- *
- * Provides a unified empty state pattern with icon, title, description,
- * and optional action button. Used across all list views.
- *
- * @example
- * <CnEmptyState
- *   title="No clients yet"
- *   description="Create your first client to get started"
- *   action-label="New Client"
- *   @action="createClient" />
- *
- * @example
- * <!-- With custom icon -->
- * <CnEmptyState title="No results">
- *   <template #icon>
- *     <Magnify :size="64" />
- *   </template>
- * </CnEmptyState>
- */
-export default {
-	name: 'CnEmptyState',
-
-	components: {
-		NcEmptyContent,
-		NcButton,
-	},
-
-	props: {
-		/** Main title text */
-		title: {
-			type: String,
-			required: true,
-		},
-		/** Description text below the title */
-		description: {
-			type: String,
-			default: '',
-		},
-		/** Vue component for the icon (e.g., imported material design icon) */
-		icon: {
-			type: [Object, null],
-			default: null,
-		},
-		/** Action button label. If empty, no button is shown. */
-		actionLabel: {
-			type: String,
-			default: '',
-		},
-		/** NcButton type for the action button */
-		actionType: {
-			type: String,
-			default: 'primary',
-		},
-	},
-}
-</script>

package/src/components/CnEmptyState/index.js

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

package/src/components/CnListViewLayout/CnListViewLayout.vue

@@ -1,80 +0,0 @@
-<template>
-	<div class="cn-list-layout">
-		<!-- Header -->
-		<div class="cn-list-layout__header">
-			<div class="cn-list-layout__title">
-				<h2>{{ title }}</h2>
-				<span v-if="totalItems > 0" class="cn-list-layout__count">({{ totalItems }})</span>
-			</div>
-			<div class="cn-list-layout__actions">
-				<slot name="actions" />
-			</div>
-		</div>
-
-		<!-- Filters slot -->
-		<slot name="filters" />
-
-		<!-- Loading state -->
-		<div v-if="loading" class="cn-loading-container">
-			<NcLoadingIcon :size="32" />
-		</div>
-
-		<!-- Main content (table area) -->
-		<template v-else>
-			<slot />
-		</template>
-
-		<!-- Pagination slot -->
-		<slot name="pagination" />
-	</div>
-</template>
-
-<script>
-import { NcLoadingIcon } from '@nextcloud/vue'
-
-/**
- * CnListViewLayout — Full list page layout wrapping header, filters, table, and pagination.
- *
- * Provides the standard page structure used by every list view: a header with
- * title + action buttons, a filter/search area, the main content (table), and pagination.
- *
- * @example
- * <CnListViewLayout title="Clients" :total-items="clients.length" :loading="isLoading">
- *   <template #actions>
- *     <NcButton type="primary" @click="createClient">New client</NcButton>
- *   </template>
- *   <template #filters>
- *     <CnFilterBar ... />
- *   </template>
- *   <CnDataTable :columns="columns" :rows="clients" />
- *   <template #pagination>
- *     <CnPagination ... />
- *   </template>
- * </CnListViewLayout>
- */
-export default {
-	name: 'CnListViewLayout',
-
-	components: {
-		NcLoadingIcon,
-	},
-
-	props: {
-		/** Page title */
-		title: {
-			type: String,
-			required: true,
-		},
-		/** Total items count (shown next to title) */
-		totalItems: {
-			type: Number,
-			default: 0,
-		},
-		/** Whether data is loading */
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-	},
-}
-</script>

package/src/components/CnListViewLayout/index.js

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

package/src/components/CnViewModeToggle/CnViewModeToggle.vue

@@ -1,77 +0,0 @@
-<template>
-	<div class="cn-view-mode-toggle" role="group" :aria-label="ariaLabel">
-		<NcButton
-			:type="value === 'cards' ? 'primary' : 'secondary'"
-			:aria-pressed="String(value === 'cards')"
-			@click="$emit('input', 'cards')">
-			<template #icon>
-				<ViewGrid :size="20" />
-			</template>
-			{{ cardsLabel }}
-		</NcButton>
-		<NcButton
-			:type="value === 'table' ? 'primary' : 'secondary'"
-			:aria-pressed="String(value === 'table')"
-			@click="$emit('input', 'table')">
-			<template #icon>
-				<ViewList :size="20" />
-			</template>
-			{{ tableLabel }}
-		</NcButton>
-	</div>
-</template>
-
-<script>
-import { NcButton } from '@nextcloud/vue'
-import ViewGrid from 'vue-material-design-icons/ViewGrid.vue'
-import ViewList from 'vue-material-design-icons/ViewList.vue'
-
-/**
- * CnViewModeToggle — Cards/Table view mode toggle.
- *
- * @example
- * <CnViewModeToggle v-model="viewMode" />
- */
-export default {
-	name: 'CnViewModeToggle',
-
-	components: {
-		NcButton,
-		ViewGrid,
-		ViewList,
-	},
-
-	props: {
-		/** Current view mode: 'cards' or 'table' */
-		value: {
-			type: String,
-			default: 'table',
-			validator: (v) => ['cards', 'table'].includes(v),
-		},
-		/** Label for cards button */
-		cardsLabel: {
-			type: String,
-			default: 'Cards',
-		},
-		/** Label for table button */
-		tableLabel: {
-			type: String,
-			default: 'Table',
-		},
-		/** Aria label for the toggle group */
-		ariaLabel: {
-			type: String,
-			default: 'View mode',
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-view-mode-toggle {
-	display: inline-flex;
-	gap: 0;
-	border-radius: var(--border-radius-pill, 20px);
-	overflow: hidden;
-}
-</style>

package/src/components/CnViewModeToggle/index.js

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