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

package/src/components/CnInfoWidget/CnInfoWidget.vue

@@ -0,0 +1,219 @@
+<!--
+  CnInfoWidget — Renders label-value pairs in a responsive CSS grid.
+
+  Supports two modes:
+  1. Manual: provide `fields` prop with `[{ label, value }]` objects
+  2. Auto-generated: provide `object` + `schema` props to generate from JSON Schema properties
+
+  Used in dashboard and detail page grid layouts to display entity metadata.
+-->
+<template>
+	<div
+		class="cn-info-widget"
+		:style="gridStyle">
+		<div
+			v-for="(field, index) in displayFields"
+			:key="index"
+			class="cn-info-widget__field">
+			<dt class="cn-info-widget__label">
+				{{ field.label }}
+			</dt>
+			<dd class="cn-info-widget__value">
+				{{ field.value || '—' }}
+			</dd>
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnInfoWidget — Renders label-value pairs in a responsive CSS grid.
+ *
+ * @example Manual fields
+ * <CnInfoWidget :fields="[
+ *   { label: 'Email', value: 'test@example.com' },
+ *   { label: 'Phone', value: '+31 6 12345678' },
+ * ]" :columns="2" />
+ *
+ * @example Auto-generated from schema
+ * <CnInfoWidget :object="myObject" :schema="mySchema" :columns="3" />
+ */
+export default {
+	name: 'CnInfoWidget',
+
+	props: {
+		/**
+		 * Manual field definitions. Array of `{ label, value }` objects.
+		 * Takes precedence over object+schema auto-generation.
+		 *
+		 * @type {{ label: string, value: string|number }[]}
+		 */
+		fields: {
+			type: Array,
+			default: null,
+		},
+		/**
+		 * Object data for auto-generation mode. Properties are extracted
+		 * based on the schema definition.
+		 *
+		 * @type {object}
+		 */
+		object: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * JSON Schema for auto-generation mode. Each schema property
+		 * generates a label:value pair using the property title as label.
+		 *
+		 * @type {object}
+		 */
+		schema: {
+			type: Object,
+			default: null,
+		},
+		/**
+		 * Number of columns for the grid layout.
+		 *
+		 * @type {number}
+		 */
+		columns: {
+			type: Number,
+			default: 2,
+		},
+		/**
+		 * Fields to include (by key). If provided, only these fields are shown.
+		 * Only applies in auto-generation mode.
+		 *
+		 * @type {string[]}
+		 */
+		includeFields: {
+			type: Array,
+			default: null,
+		},
+		/**
+		 * Fields to exclude (by key). Only applies in auto-generation mode.
+		 *
+		 * @type {string[]}
+		 */
+		excludeFields: {
+			type: Array,
+			default: () => [],
+		},
+	},
+
+	computed: {
+		/**
+		 * Resolved fields to display. Manual fields take precedence;
+		 * otherwise generates from object + schema.
+		 *
+		 * @return {{ label: string, value: string|number }[]}
+		 */
+		displayFields() {
+			if (this.fields) {
+				return this.fields
+			}
+
+			if (this.object && this.schema && this.schema.properties) {
+				return this.generateFieldsFromSchema()
+			}
+
+			return []
+		},
+
+		/**
+		 * CSS grid style based on column count.
+		 *
+		 * @return {object}
+		 */
+		gridStyle() {
+			return {
+				gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
+			}
+		},
+	},
+
+	methods: {
+		/**
+		 * Generate label-value field definitions from object + schema.
+		 *
+		 * @return {{ label: string, value: string|number }[]}
+		 */
+		generateFieldsFromSchema() {
+			const properties = this.schema.properties || {}
+			const keys = this.includeFields || Object.keys(properties)
+
+			return keys
+				.filter(key => !this.excludeFields.includes(key))
+				.filter(key => properties[key])
+				.map(key => ({
+					label: properties[key].title || key,
+					value: this.formatFieldValue(this.object[key], properties[key]),
+				}))
+		},
+
+		/**
+		 * Format a field value for display based on its schema type.
+		 *
+		 * @param {*} value - The raw value.
+		 * @param {object} schemaProp - The JSON Schema property definition.
+		 * @return {string} Formatted display value.
+		 */
+		formatFieldValue(value) {
+			if (value === null || value === undefined) {
+				return ''
+			}
+
+			if (Array.isArray(value)) {
+				return value.join(', ')
+			}
+
+			if (typeof value === 'object') {
+				return JSON.stringify(value)
+			}
+
+			if (typeof value === 'boolean') {
+				return value ? 'Yes' : 'No'
+			}
+
+			return String(value)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-info-widget {
+	display: grid;
+	gap: 12px 24px;
+}
+
+.cn-info-widget__field {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.cn-info-widget__label {
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	margin: 0;
+}
+
+.cn-info-widget__value {
+	font-size: 14px;
+	color: var(--color-main-text);
+	margin: 0;
+	word-break: break-word;
+}
+
+/* Responsive: single column on small screens */
+@media (max-width: 600px) {
+	.cn-info-widget {
+		grid-template-columns: 1fr !important;
+	}
+}
+</style>

package/src/components/CnInfoWidget/index.js

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

package/src/components/CnItemCard/CnItemCard.vue

@@ -0,0 +1,134 @@
+<template>
+	<div class="cn-item-card" @click="$emit('click', $event)">
+		<div class="cn-item-card__header">
+			<div class="cn-item-card__title-row">
+				<slot name="icon">
+					<component :is="icon" v-if="icon" :size="iconSize" />
+				</slot>
+				<div class="cn-item-card__title-content">
+					<h3 class="cn-item-card__title">
+						{{ title }}
+					</h3>
+					<span v-if="subtitle" class="cn-item-card__subtitle">{{ subtitle }}</span>
+				</div>
+			</div>
+			<div v-if="$slots.actions || $scopedSlots.actions" class="cn-item-card__actions">
+				<slot name="actions" />
+			</div>
+		</div>
+		<div v-if="$slots.default || $scopedSlots.default" class="cn-item-card__content">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnItemCard — Compact card for displaying an item in a sidebar list.
+ *
+ * Provides a card with a header (icon + title + optional actions) and
+ * a flexible content area. Designed for use in sidebar lists such as
+ * schema listings, source listings, etc.
+ *
+ * @example Basic usage
+ * <CnItemCard title="My Schema" :icon="FileCodeOutline">
+ *   <p>Schema content here</p>
+ * </CnItemCard>
+ *
+ * @example With actions and stats
+ * <CnItemCard title="My Schema" :icon="FileCodeOutline" subtitle="v1.0">
+ *   <template #actions>
+ *     <NcActions>
+ *       <NcActionButton @click="edit">Edit</NcActionButton>
+ *     </NcActions>
+ *   </template>
+ *   <CnKpiGrid :columns="2">
+ *     <CnStatsBlock title="Objects" :count="42" />
+ *     <CnStatsBlock title="Size" :count="0" :breakdown="{ size: '1.2 MB' }" />
+ *   </CnKpiGrid>
+ * </CnItemCard>
+ */
+export default {
+	name: 'CnItemCard',
+
+	props: {
+		/** Card title */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Optional subtitle below the title */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+		/** Icon component (e.g., imported MDI icon) */
+		icon: {
+			type: [Object, Function],
+			default: null,
+		},
+		/** Icon size in pixels */
+		iconSize: {
+			type: Number,
+			default: 20,
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-item-card {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 10px);
+	padding: 12px;
+	margin-bottom: 12px;
+}
+
+.cn-item-card:last-child {
+	margin-bottom: 0;
+}
+
+.cn-item-card__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.cn-item-card__title-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	flex: 1;
+}
+
+.cn-item-card__title-content {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.cn-item-card__title {
+	margin: 0;
+	font-size: 1em;
+	font-weight: 600;
+	color: var(--color-main-text);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-item-card__subtitle {
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-item-card__actions {
+	flex-shrink: 0;
+}
+
+.cn-item-card__content {
+	margin-top: 8px;
+}
+</style>

package/src/components/CnItemCard/index.js

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

package/src/components/CnJsonViewer/CnJsonViewer.vue

@@ -0,0 +1,312 @@
+<!--
+  CnJsonViewer — Syntax-highlighted code viewer/editor powered by CodeMirror.
+
+  Supports multiple languages (JSON, XML, HTML, plain text) with optional
+  auto-detection. Use `readOnly` for display-only mode.
+-->
+<template>
+	<div class="cn-json-viewer">
+		<div :class="['cn-json-viewer__codemirror', isDark ? 'cn-json-viewer__codemirror--dark' : 'cn-json-viewer__codemirror--light']">
+			<CodeMirror
+				v-model="localValue"
+				:basic="true"
+				:placeholder="resolvedLanguage === 'json' ? '{ &quot;key&quot;: &quot;value&quot; }' : ''"
+				:dark="isDark"
+				:readonly="readOnly"
+				:linter="linterExtension"
+				:lang="langExtension"
+				:extensions="editorExtensions"
+				:tab-size="2"
+				:style="{ height }" />
+			<NcButton
+				v-if="!readOnly && resolvedLanguage === 'json'"
+				class="cn-json-viewer__format-btn"
+				type="secondary"
+				size="small"
+				@click="formatJson">
+				Format JSON
+			</NcButton>
+		</div>
+		<span v-if="shouldShowError" class="cn-json-viewer__error">
+			{{ resolvedErrorText }}
+		</span>
+	</div>
+</template>
+
+<script>
+import { NcButton } from '@nextcloud/vue'
+import CodeMirror from 'vue-codemirror6'
+import { githubLight, githubDark } from '@uiw/codemirror-theme-github'
+import { json as jsonLang, jsonParseLinter as jsonLinter } from '@codemirror/lang-json'
+import { xml as xmlLang } from '@codemirror/lang-xml'
+import { html as htmlLang } from '@codemirror/lang-html'
+import { getTheme } from '../../utils/getTheme.js'
+
+/**
+ * CnJsonViewer — Syntax-highlighted code viewer/editor.
+ *
+ * Wraps CodeMirror 6 with support for JSON, XML, HTML, and plain text.
+ * Includes syntax highlighting, and optional formatting/validation for JSON.
+ * Use `readOnly` for display-only mode.
+ *
+ * @example Read-only JSON display (default)
+ * <CnJsonViewer :value="jsonString" :read-only="true" />
+ *
+ * @example Auto-detect language from content
+ * <CnJsonViewer :value="responseBody" :read-only="true" language="auto" />
+ *
+ * @example Explicit XML mode
+ * <CnJsonViewer :value="xmlString" :read-only="true" language="xml" />
+ *
+ * @example Editable JSON with custom height
+ * <CnJsonViewer :value="jsonString" height="500px" @update:value="onUpdate" />
+ */
+export default {
+	name: 'CnJsonViewer',
+
+	components: {
+		NcButton,
+		CodeMirror,
+	},
+
+	props: {
+		/** JSON string to display or edit */
+		value: { type: String, default: '' },
+		/** When true, the editor is non-editable and hides format button and validation */
+		readOnly: { type: Boolean, default: false },
+		/** CSS height for the editor container */
+		height: { type: String, default: '300px' },
+		/**
+		 * Content language for syntax highlighting.
+		 * - 'auto': Auto-detect from content (JSON → xml → text) (default)
+		 * - 'json': JSON with validation and formatting
+		 * - 'xml': XML/HTML tag highlighting
+		 * - 'html': Alias for XML highlighting
+		 * - 'text': Plain text, no highlighting
+		 */
+		language: {
+			type: String,
+			default: 'auto',
+			validator: (v) => ['json', 'xml', 'html', 'text', 'auto'].includes(v),
+		},
+		/**
+		 * Custom text for the error banner rendered below the editor.
+		 * - `null` (default): the built-in "Invalid JSON format" banner renders
+		 *   whenever `language === 'json'` and the content fails to parse.
+		 * - Any string: the caller owns the banner — it renders when this
+		 *   string is non-empty, and is hidden when empty. Use this to surface
+		 *   a richer parse error (e.g. the exception message).
+		 */
+		errorText: { type: String, default: null },
+	},
+
+	data() {
+		return {
+			githubLight,
+			githubDark,
+		}
+	},
+
+	computed: {
+		localValue: {
+			get() { return this.value },
+			set(v) { this.$emit('update:value', v) },
+		},
+		isDark: {
+			get() { return getTheme() === 'dark' },
+		},
+		theme: {
+			get() { return this.isDark ? githubDark : githubLight },
+		},
+		/**
+		 * Resolve 'auto' language to a concrete language based on content.
+		 * @return {string} Resolved language: 'json', 'xml', or 'text'
+		 */
+		resolvedLanguage() {
+			if (this.language !== 'auto') {
+				return this.language
+			}
+			const trimmed = (this.value || '').trim()
+			if (!trimmed) return 'text'
+			try {
+				JSON.parse(trimmed)
+				return 'json'
+			} catch {
+				// not JSON
+			}
+			if (trimmed.charAt(0) === '<' && trimmed.includes('>')) {
+				// Detect HTML by doctype or common HTML tags
+				if (/<!doctype\s+html/i.test(trimmed) || /<(?:html|head|body|div|span|p|a|script|style|link|meta|form|input|button|table|ul|ol|li|h[1-6]|img|nav|header|footer|main|section|article)\b/i.test(trimmed)) {
+					return 'html'
+				}
+				return 'xml'
+			}
+			return 'text'
+		},
+		/**
+		 * CodeMirror language extension based on resolved language.
+		 * @return {object|null} Language extension or null for plain text
+		 */
+		langExtension() {
+			switch (this.resolvedLanguage) {
+			case 'json':
+				return jsonLang()
+			case 'html':
+				return htmlLang()
+			case 'xml':
+				return xmlLang()
+			case 'text':
+			default:
+				return null
+			}
+		},
+		/**
+		 * CodeMirror linter extension (only active for JSON in edit mode).
+		 * @return {object|null} Linter extension or null
+		 */
+		linterExtension() {
+			if (this.readOnly) return null
+			if (this.resolvedLanguage === 'json') return jsonLinter()
+			return null
+		},
+		/**
+		 * Combined CodeMirror extensions array.
+		 * @return {Array} Extensions including theme and optional language
+		 */
+		editorExtensions() {
+			const exts = [this.theme]
+			if (this.langExtension) exts.push(this.langExtension)
+			return exts
+		},
+		/**
+		 * Error text displayed in the banner. Caller-provided `errorText` wins;
+		 * otherwise falls back to the built-in "Invalid JSON format" message.
+		 * @return {string} Message to show.
+		 */
+		resolvedErrorText() {
+			if (this.errorText !== null) return this.errorText
+			return 'Invalid JSON format'
+		},
+		/**
+		 * Whether to show the error banner.
+		 * - If `errorText` is supplied, the caller controls visibility via its
+		 *   emptiness.
+		 * - Otherwise, show iff the content is editable JSON and fails to parse.
+		 * @return {boolean} Visibility flag.
+		 */
+		shouldShowError() {
+			if (this.errorText !== null) return this.errorText !== ''
+			return !this.readOnly
+				&& this.resolvedLanguage === 'json'
+				&& !this.isValidJson(this.value)
+		},
+	},
+
+	methods: {
+		/**
+		 * Format the current JSON value with 2-space indentation.
+		 * Emits 'update:value' with the formatted string and 'format' with the parsed object.
+		 */
+		formatJson() {
+			try {
+				if (this.value) {
+					const parsed = JSON.parse(this.value)
+					this.$emit('update:value', JSON.stringify(parsed, null, 2))
+					this.$emit('format', parsed)
+				}
+			} catch {
+				// Keep invalid JSON as-is
+			}
+		},
+
+		/**
+		 * Check if a string is valid JSON.
+		 * @param {string} str - String to validate
+		 * @return {boolean} True if valid JSON
+		 */
+		isValidJson(str) {
+			if (!str || !str.trim()) return false
+			try {
+				JSON.parse(str)
+				return true
+			} catch {
+				return false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-json-viewer {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.cn-json-viewer__codemirror {
+	position: relative;
+}
+
+.cn-json-viewer__codemirror :deep(.cm-editor) {
+	height: 100%;
+	outline: none !important;
+}
+
+.cn-json-viewer__codemirror :deep(.cm-scroller) {
+	overflow: auto;
+}
+
+.cn-json-viewer__codemirror :deep(.cm-content) {
+	border-radius: 0 !important;
+	border: none !important;
+}
+
+.cn-json-viewer__codemirror--light > .vue-codemirror {
+	border: 1px dotted silver;
+}
+
+.cn-json-viewer__codemirror--dark > .vue-codemirror {
+	border: 1px dotted grey;
+}
+
+/* Text cursor */
+.cn-json-viewer__codemirror :deep(.cm-content) * {
+	cursor: text !important;
+}
+
+/* PATCH SELECTION COLOR - default selection system does not work */
+/* Selection background — CodeMirror uses .cm-selectionBackground instead of ::selection */
+.cn-json-viewer__codemirror--light :deep(.cm-selectionBackground) {
+	background: #3390ff !important;
+}
+
+.cn-json-viewer__codemirror--light :deep(.cm-selectionBackground) + .cm-selectionBackground,
+.cn-json-viewer__codemirror--light :deep(.cm-line ::selection) {
+	color: white !important;
+}
+
+.cn-json-viewer__codemirror--dark :deep(.cm-selectionBackground) {
+	background: #3390ff !important;
+}
+
+/* Selected text color */
+.cn-json-viewer__codemirror--light :deep(.cm-content ::selection) {
+	background: #3390ff !important;
+	color: white !important;
+}
+
+.cn-json-viewer__codemirror--dark :deep(.cm-content ::selection) {
+	background: #3390ff !important;
+	color: white !important;
+}
+
+.cn-json-viewer__format-btn {
+	margin-top: 8px;
+}
+
+.cn-json-viewer__error {
+	color: var(--color-error);
+	font-size: 14px;
+}
+</style>

package/src/components/CnJsonViewer/index.js

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