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

package/src/components/CnAdvancedFormDialog/CnDataTab.vue

@@ -1,217 +1,217 @@
-<template>
-	<div class="cn-advanced-form-dialog__json-editor">
-		<div :class="['cn-advanced-form-dialog__codemirror-container', dark ? 'cn-advanced-form-dialog__codemirror-container--dark' : 'cn-advanced-form-dialog__codemirror-container--light']">
-			<CodeMirror
-				v-model="localValue"
-				:basic="true"
-				placeholder="{ &quot;key&quot;: &quot;value&quot; }"
-				:dark="dark"
-				:linter="jsonLinterExtension"
-				:lang="jsonLangExtension"
-				:extensions="[jsonLangExtension]"
-				:tab-size="2"
-				style="height: 400px" />
-			<NcButton
-				class="cn-advanced-form-dialog__format-btn"
-				type="secondary"
-				size="small"
-				@click="formatJson">
-				Format JSON
-			</NcButton>
-		</div>
-		<span v-if="!isValidJson(value)" class="cn-advanced-form-dialog__json-error">
-			Invalid JSON format
-		</span>
-	</div>
-</template>
-
-<script>
-import { NcButton } from '@nextcloud/vue'
-import CodeMirror from 'vue-codemirror6'
-import { json as jsonLang, jsonParseLinter as jsonLinter } from '@codemirror/lang-json'
-
-export default {
-	name: 'CnDataTab',
-
-	components: {
-		NcButton,
-		CodeMirror,
-	},
-
-	props: {
-		/** Current JSON string value */
-		value: { type: String, default: '' },
-		/** Use dark theme for the editor */
-		dark: { type: Boolean, default: false },
-	},
-
-	data() {
-		return {
-			jsonLangExtension: jsonLang(),
-			jsonLinterExtension: jsonLinter(),
-		}
-	},
-
-	computed: {
-		localValue: {
-			get() { return this.value },
-			set(v) { this.$emit('update:value', v) },
-		},
-	},
-
-	methods: {
-		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
-			}
-		},
-
-		isValidJson(str) {
-			if (!str || !str.trim()) return false
-			try {
-				JSON.parse(str)
-				return true
-			} catch {
-				return false
-			}
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-advanced-form-dialog__json-editor {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.cn-advanced-form-dialog__codemirror-container {
-	margin-top: 6px;
-	border: 1px solid var(--color-border);
-	border-radius: var(--border-radius);
-	position: relative;
-}
-
-.cn-advanced-form-dialog__codemirror-container :deep(.cm-editor) {
-	height: 100%;
-}
-
-.cn-advanced-form-dialog__codemirror-container :deep(.cm-scroller) {
-	overflow: auto;
-}
-
-.cn-advanced-form-dialog__codemirror-container :deep(.cm-content) {
-	border-radius: 0 !important;
-	border: none !important;
-}
-
-.cn-advanced-form-dialog__codemirror-container :deep(.cm-editor) {
-	outline: none !important;
-}
-
-.cn-advanced-form-dialog__codemirror-container--light > .vue-codemirror {
-	border: 1px dotted silver;
-}
-
-.cn-advanced-form-dialog__codemirror-container--dark > .vue-codemirror {
-	border: 1px dotted grey;
-}
-
-/* value text color */
-/* string */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.ͼe) {
-	color: #448c27;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.ͼe) {
-	color: #88c379;
-}
-
-/* boolean */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.ͼc) {
-	color: #221199;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.ͼc) {
-	color: #8d64f7;
-}
-
-/* null */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.ͼb) {
-	color: #770088;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.ͼb) {
-	color: #be55cd;
-}
-
-/* number */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.ͼd) {
-	color: #d19a66;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.ͼd) {
-	color: #9d6c3a;
-}
-
-/* text cursor */
-.cn-advanced-form-dialog__codemirror-container :deep(.cm-content) * {
-	cursor: text !important;
-}
-
-/* selection color */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line)::selection,
-.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line) ::selection {
-	background-color: #d7eaff !important;
-	color: black;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line)::selection,
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line) ::selection {
-	background-color: #8fb3e6 !important;
-	color: black;
-}
-
-/* string selection */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line .ͼe)::selection {
-	color: #2d770f;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line .ͼe)::selection {
-	color: #104e0c;
-}
-
-/* boolean selection */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line .ͼc)::selection {
-	color: #221199;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line .ͼc)::selection {
-	color: #4026af;
-}
-
-/* null selection */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line .ͼb)::selection {
-	color: #770088;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line .ͼb)::selection {
-	color: #770088;
-}
-
-/* number selection */
-.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line .ͼd)::selection {
-	color: #8c5c2c;
-}
-.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line .ͼd)::selection {
-	color: #623907;
-}
-
-.cn-advanced-form-dialog__format-btn {
-	margin-top: 8px;
-}
-
-.cn-advanced-form-dialog__json-error {
-	color: var(--color-error);
-	font-size: 14px;
-}
-</style>
+<template>
+	<div class="cn-advanced-form-dialog__json-editor">
+		<div :class="['cn-advanced-form-dialog__codemirror-container', dark ? 'cn-advanced-form-dialog__codemirror-container--dark' : 'cn-advanced-form-dialog__codemirror-container--light']">
+			<CodeMirror
+				v-model="localValue"
+				:basic="true"
+				placeholder="{ &quot;key&quot;: &quot;value&quot; }"
+				:dark="dark"
+				:linter="jsonLinterExtension"
+				:lang="jsonLangExtension"
+				:extensions="[jsonLangExtension]"
+				:tab-size="2"
+				style="height: 400px" />
+			<NcButton
+				class="cn-advanced-form-dialog__format-btn"
+				type="secondary"
+				size="small"
+				@click="formatJson">
+				Format JSON
+			</NcButton>
+		</div>
+		<span v-if="!isValidJson(value)" class="cn-advanced-form-dialog__json-error">
+			Invalid JSON format
+		</span>
+	</div>
+</template>
+
+<script>
+import { NcButton } from '@nextcloud/vue'
+import CodeMirror from 'vue-codemirror6'
+import { json as jsonLang, jsonParseLinter as jsonLinter } from '@codemirror/lang-json'
+
+export default {
+	name: 'CnDataTab',
+
+	components: {
+		NcButton,
+		CodeMirror,
+	},
+
+	props: {
+		/** Current JSON string value */
+		value: { type: String, default: '' },
+		/** Use dark theme for the editor */
+		dark: { type: Boolean, default: false },
+	},
+
+	data() {
+		return {
+			jsonLangExtension: jsonLang(),
+			jsonLinterExtension: jsonLinter(),
+		}
+	},
+
+	computed: {
+		localValue: {
+			get() { return this.value },
+			set(v) { this.$emit('update:value', v) },
+		},
+	},
+
+	methods: {
+		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
+			}
+		},
+
+		isValidJson(str) {
+			if (!str || !str.trim()) return false
+			try {
+				JSON.parse(str)
+				return true
+			} catch {
+				return false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-advanced-form-dialog__json-editor {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.cn-advanced-form-dialog__codemirror-container {
+	margin-top: 6px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius);
+	position: relative;
+}
+
+.cn-advanced-form-dialog__codemirror-container :deep(.cm-editor) {
+	height: 100%;
+}
+
+.cn-advanced-form-dialog__codemirror-container :deep(.cm-scroller) {
+	overflow: auto;
+}
+
+.cn-advanced-form-dialog__codemirror-container :deep(.cm-content) {
+	border-radius: 0 !important;
+	border: none !important;
+}
+
+.cn-advanced-form-dialog__codemirror-container :deep(.cm-editor) {
+	outline: none !important;
+}
+
+.cn-advanced-form-dialog__codemirror-container--light > .vue-codemirror {
+	border: 1px dotted silver;
+}
+
+.cn-advanced-form-dialog__codemirror-container--dark > .vue-codemirror {
+	border: 1px dotted grey;
+}
+
+/* value text color */
+/* string */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.ͼe) {
+	color: #448c27;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.ͼe) {
+	color: #88c379;
+}
+
+/* boolean */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.ͼc) {
+	color: #221199;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.ͼc) {
+	color: #8d64f7;
+}
+
+/* null */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.ͼb) {
+	color: #770088;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.ͼb) {
+	color: #be55cd;
+}
+
+/* number */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.ͼd) {
+	color: #d19a66;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.ͼd) {
+	color: #9d6c3a;
+}
+
+/* text cursor */
+.cn-advanced-form-dialog__codemirror-container :deep(.cm-content) * {
+	cursor: text !important;
+}
+
+/* selection color */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line)::selection,
+.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line) ::selection {
+	background-color: #d7eaff !important;
+	color: black;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line)::selection,
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line) ::selection {
+	background-color: #8fb3e6 !important;
+	color: black;
+}
+
+/* string selection */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line .ͼe)::selection {
+	color: #2d770f;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line .ͼe)::selection {
+	color: #104e0c;
+}
+
+/* boolean selection */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line .ͼc)::selection {
+	color: #221199;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line .ͼc)::selection {
+	color: #4026af;
+}
+
+/* null selection */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line .ͼb)::selection {
+	color: #770088;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line .ͼb)::selection {
+	color: #770088;
+}
+
+/* number selection */
+.cn-advanced-form-dialog__codemirror-container--light :deep(.cm-line .ͼd)::selection {
+	color: #8c5c2c;
+}
+.cn-advanced-form-dialog__codemirror-container--dark :deep(.cm-line .ͼd)::selection {
+	color: #623907;
+}
+
+.cn-advanced-form-dialog__format-btn {
+	margin-top: 8px;
+}
+
+.cn-advanced-form-dialog__json-error {
+	color: var(--color-error);
+	font-size: 14px;
+}
+</style>

package/src/components/CnAdvancedFormDialog/CnMetadataTab.vue

@@ -1,121 +1,121 @@
-<template>
-	<div class="cn-advanced-form-dialog__table-container">
-		<table class="cn-advanced-form-dialog__table">
-			<thead>
-				<tr class="cn-advanced-form-dialog__table-row">
-					<th class="cn-advanced-form-dialog__table-col-constrained">
-						Metadata
-					</th>
-					<th class="cn-advanced-form-dialog__table-col-expanded">
-						Value
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr class="cn-advanced-form-dialog__table-row">
-					<td class="cn-advanced-form-dialog__table-col-constrained">
-						ID
-					</td>
-					<td class="cn-advanced-form-dialog__table-col-expanded">
-						{{ metadataId }}
-					</td>
-				</tr>
-				<tr class="cn-advanced-form-dialog__table-row">
-					<td class="cn-advanced-form-dialog__table-col-constrained">
-						Created
-					</td>
-					<td class="cn-advanced-form-dialog__table-col-expanded">
-						{{ metadataCreated }}
-					</td>
-				</tr>
-				<tr class="cn-advanced-form-dialog__table-row">
-					<td class="cn-advanced-form-dialog__table-col-constrained">
-						Updated
-					</td>
-					<td class="cn-advanced-form-dialog__table-col-expanded">
-						{{ metadataUpdated }}
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'CnMetadataTab',
-
-	props: {
-		item: { type: Object, default: null },
-		formData: { type: Object, default: () => ({}) },
-	},
-
-	computed: {
-		metadataId() {
-			const o = this.item?.['@self']
-			return o?.id ?? this.item?.id ?? '—'
-		},
-
-		metadataCreated() {
-			const o = this.item?.['@self']
-			const v = o?.created
-			return v ? new Date(v).toLocaleString() : '—'
-		},
-
-		metadataUpdated() {
-			const o = this.item?.['@self']
-			const v = o?.updated
-			return v ? new Date(v).toLocaleString() : '—'
-		},
-	},
-}
-</script>
-
-<style scoped>
-.cn-advanced-form-dialog__table-container {
-	background: var(--color-main-background);
-	border-radius: var(--border-radius);
-	overflow: hidden;
-	box-shadow: 0 2px 4px var(--color-box-shadow);
-	border: 1px solid var(--color-border);
-	margin-bottom: calc(5 * var(--default-grid-baseline));
-}
-
-.cn-advanced-form-dialog__table {
-	width: 100%;
-	border-collapse: collapse;
-	background-color: var(--color-main-background);
-}
-
-.cn-advanced-form-dialog__table th,
-.cn-advanced-form-dialog__table td {
-	padding: calc(3 * var(--default-grid-baseline));
-	text-align: left;
-	border-bottom: 1px solid var(--color-border);
-	vertical-align: middle;
-}
-
-.cn-advanced-form-dialog__table th {
-	background: var(--color-background-dark);
-	font-weight: 500;
-	color: var(--color-text-maxcontrast);
-}
-
-.cn-advanced-form-dialog__table-row {
-	cursor: default;
-	background-color: var(--color-main-background);
-}
-
-.cn-advanced-form-dialog__table-col-constrained {
-	width: 150px;
-	max-width: 150px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.cn-advanced-form-dialog__table-col-expanded {
-	width: auto;
-	min-width: 200px;
-}
-</style>
+<template>
+	<div class="cn-advanced-form-dialog__table-container">
+		<table class="cn-advanced-form-dialog__table">
+			<thead>
+				<tr class="cn-advanced-form-dialog__table-row">
+					<th class="cn-advanced-form-dialog__table-col-constrained">
+						Metadata
+					</th>
+					<th class="cn-advanced-form-dialog__table-col-expanded">
+						Value
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr class="cn-advanced-form-dialog__table-row">
+					<td class="cn-advanced-form-dialog__table-col-constrained">
+						ID
+					</td>
+					<td class="cn-advanced-form-dialog__table-col-expanded">
+						{{ metadataId }}
+					</td>
+				</tr>
+				<tr class="cn-advanced-form-dialog__table-row">
+					<td class="cn-advanced-form-dialog__table-col-constrained">
+						Created
+					</td>
+					<td class="cn-advanced-form-dialog__table-col-expanded">
+						{{ metadataCreated }}
+					</td>
+				</tr>
+				<tr class="cn-advanced-form-dialog__table-row">
+					<td class="cn-advanced-form-dialog__table-col-constrained">
+						Updated
+					</td>
+					<td class="cn-advanced-form-dialog__table-col-expanded">
+						{{ metadataUpdated }}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CnMetadataTab',
+
+	props: {
+		item: { type: Object, default: null },
+		formData: { type: Object, default: () => ({}) },
+	},
+
+	computed: {
+		metadataId() {
+			const o = this.item?.['@self']
+			return o?.id ?? this.item?.id ?? '—'
+		},
+
+		metadataCreated() {
+			const o = this.item?.['@self']
+			const v = o?.created
+			return v ? new Date(v).toLocaleString() : '—'
+		},
+
+		metadataUpdated() {
+			const o = this.item?.['@self']
+			const v = o?.updated
+			return v ? new Date(v).toLocaleString() : '—'
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-advanced-form-dialog__table-container {
+	background: var(--color-main-background);
+	border-radius: var(--border-radius);
+	overflow: hidden;
+	box-shadow: 0 2px 4px var(--color-box-shadow);
+	border: 1px solid var(--color-border);
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-advanced-form-dialog__table {
+	width: 100%;
+	border-collapse: collapse;
+	background-color: var(--color-main-background);
+}
+
+.cn-advanced-form-dialog__table th,
+.cn-advanced-form-dialog__table td {
+	padding: calc(3 * var(--default-grid-baseline));
+	text-align: left;
+	border-bottom: 1px solid var(--color-border);
+	vertical-align: middle;
+}
+
+.cn-advanced-form-dialog__table th {
+	background: var(--color-background-dark);
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-advanced-form-dialog__table-row {
+	cursor: default;
+	background-color: var(--color-main-background);
+}
+
+.cn-advanced-form-dialog__table-col-constrained {
+	width: 150px;
+	max-width: 150px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-advanced-form-dialog__table-col-expanded {
+	width: auto;
+	min-width: 200px;
+}
+</style>