Workaround for issue vuejs/vue-cli#6225

Author: m-mohr

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+- `JsonSchema` and `ObjectTree` show all details when used as Web Component [vue-cli#6225](https://github.com/vuejs/vue-cli/issues/6225)
+
+
 ## [2.0.0-beta.1] - 2020-01-20
 
 This release contains a large number of changes. It lists only the major changes that may need users to adapt their code. Bug fixes or minor improvements are not listed in detail.

components/JsonSchema.vue

@@ -17,15 +17,15 @@
 					<template v-if="hasReturns">
 						<Description v-if="schema.returns.description" :description="schema.returns.description" :processUrl="processUrl" />
 						<div class="json-schema-container" v-if="schema.returns.schema">
-							<JsonSchema :schema="schema.returns.schema" />
+							<openeo-json-schema :schema="schema.returns.schema" />
 						</div>
 					</template>
 					<p v-else>No constraints defined.</p>
 				</div>
 			</div>
 			<div v-else-if="showRow('object')" class="schemaObjectElement">
 				<div class="inline-schema-attrs">
-					<JsonSchema v-if="filteredObjectSchema !== null" :schema="filteredObjectSchema" :nestingLevel="nestingLevel+1" />
+					<openeo-json-schema v-if="filteredObjectSchema !== null" :schema="filteredObjectSchema" :nestingLevel="nestingLevel+1" />
 					<table class="object-properties">
 						<tr>
 							<th colspan="2" class="object-prop-heading">Object Properties:</th>
@@ -36,7 +36,7 @@
 								<strong class="required" v-if="schema.required && schema.required.indexOf(key) !== -1" title="required">*</strong>
 							</td>
 							<td class="value">
-								<JsonSchema :schema="val" :nestingLevel="nestingLevel+1" :processUrl="processUrl" />
+								<openeo-json-schema :schema="val" :nestingLevel="nestingLevel+1" :processUrl="processUrl" />
 							</td>
 						</tr>
 					</table>
@@ -59,7 +59,7 @@
 					</tr>
 					<tr>
 						<td colspan="2" class="schema-container data-types-container">
-							<JsonSchema v-for="(v, k) in compositeTypes" :key="k" :schema="v" :nestingLevel="nestingLevel+1" :processUrl="processUrl" />
+							<openeo-json-schema v-for="(v, k) in compositeTypes" :key="k" :schema="v" :nestingLevel="nestingLevel+1" :processUrl="processUrl" />
 						</td>
 					</tr>
 				</template>
@@ -70,7 +70,7 @@
 							<td class="value">
 								<span v-if="key == 'type'" class="data-type">{{ formatType() }}</span>
 								<div v-else-if="key == 'allOf' && Array.isArray(val)" class="schema-container">
-									<JsonSchema v-for="(v, k) in val" :key="k" :schema="v" :nestingLevel="nestingLevel+1" :processUrl="processUrl" />
+									<openeo-json-schema v-for="(v, k) in val" :key="k" :schema="v" :nestingLevel="nestingLevel+1" :processUrl="processUrl" />
 								</div>
 								<span v-else-if="key != 'default' && key != 'examples' && val === true" title="true">✓ Yes</span>
 								<span v-else-if="key != 'default' && key != 'examples' && val === false" title="false">✕ No</span>
@@ -85,7 +85,7 @@
 								<em v-else-if="key == 'default' && val === ''">Empty string</em>
 								<code v-else-if="key == 'default' && (typeof val === 'object' || typeof val === 'boolean')">{{ JSON.stringify(val) }}</code>
 								<code v-else-if="key == 'pattern'">{{ val }}</code>
-								<JsonSchema v-else-if="typeof val === 'object'" :schema="val" :initShown="nestingLevel < 3" :nestingLevel="nestingLevel+1" :processUrl="processUrl" />
+								<openeo-json-schema v-else-if="typeof val === 'object'" :schema="val" :initShown="nestingLevel < 3" :nestingLevel="nestingLevel+1" :processUrl="processUrl" />
 								<span v-else>{{ val }}</span>
 							</td>
 						</template>
@@ -124,7 +124,9 @@ export default Utils.enableHtmlProps({
 		};
 	},
 	components: {
-		Description: () => import('./Description.vue')
+		Description: () => import('./Description.vue'),
+		// Workaround for issue https://github.com/vuejs/vue-cli/issues/6225
+		'openeo-json-schema': () => import('./JsonSchema.vue')
 	},
 	beforeCreate() {
 		// See https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

components/ObjectTree.vue

@@ -4,7 +4,7 @@
 		<template v-else-if="Array.isArray(data)">
 			<ol>
 				<li v-for="i in indicesShown" :key="i">
-					<ObjectTree v-if="isStructured(data[i])" :data="data[i]"></ObjectTree>
+					<openeo-object-tree v-if="isStructured(data[i])" :data="data[i]"></openeo-object-tree>
 					<a v-else-if="isUrl(data[i])" :href="data[i]" target="_blank">{{ data[i] }}</a>
 					<em v-else-if="format(data[i])">{{ format(data[i]) }}</em>
 					<template v-else>{{ data[i] }}</template>
@@ -15,7 +15,7 @@
 		<ul v-else-if="typeof data === 'object'">
 			<li v-for="(value, key) in data" :key="key">
 				<template><strong>{{ prettifyKey(key) }}</strong>: </template>
-				<ObjectTree v-if="isStructured(value)" :data="value"></ObjectTree>
+				<openeo-object-tree v-if="isStructured(value)" :data="value"></openeo-object-tree>
 				<a v-else-if="isUrl(value)" :href="value" target="_blank">{{ value }}</a>
 				<em v-else-if="format(value)">{{ format(value) }}</em>
 				<template v-else>{{ value }}</template>
@@ -29,7 +29,11 @@
 import Utils from '../utils.js';
 
 export default Utils.enableHtmlProps({
-    name: 'ObjectTree',
+	name: 'ObjectTree',
+	components: {
+		// Workaround for issue https://github.com/vuejs/vue-cli/issues/6225
+		'openeo-object-tree': () => import('./ObjectTree.vue')
+	},
 	props: {
 		data: {
 			type: [Object, Array],

utils.js

@@ -19,6 +19,7 @@ class Utils extends CommonUtils {
                 }
                 else if (types.includes('Boolean')) {
                     // Functions for default are not executed for Boolean, so remove the type
+                    // PR to solve this issue: https://github.com/vuejs/vue-web-component-wrapper/pull/58
                     delete vue.props[key].type;
                 }
                 let defaultValue = vue.props[key].default;