chore(#128): add missing schemaType to mixin (#350)

.changeset/slimy-terms-nail.md

@@ -0,0 +1,5 @@
+---
+"druxt-schema": patch
+---
+
+Added missing schemaType prop to DruxtSchemaMixin

examples/nuxt/schema-component/README.md

@@ -0,0 +1,10 @@
+# schema-component
+
+This directory contains an example component using a Druxt Schema to render non-Drupal entity data.
+
+
+## Setup
+
+```
+yarn && yarn dev
+```

examples/nuxt/schema-component/components/SchemaComponent.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-if="$fetchState.pending">Loading ...</div>
+  <div v-else>
+    <div v-for="field of schema.fields.filter((o) => data[o.id])" :key="field.id">
+      <strong>{{ field.id }}:</strong>
+      <pre><code>{{ JSON.stringify(data[field.id], null, '  ') }}</code></pre>
+      <details>
+        <summary><strong>Field schema</strong></summary>
+        <pre><code>{{ JSON.stringify(field, null, '  ') }}</code></pre>
+      </details>
+      <br />
+    </div>
+  </div>
+</template>
+
+<script>
+import { DruxtSchemaMixin } from 'druxt-schema'
+export default {
+  mixins: [DruxtSchemaMixin],
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+}
+</script>

examples/nuxt/schema-component/nuxt.config.js

@@ -0,0 +1,4 @@
+export default {
+  buildModules: [['druxt-schema', { baseUrl: 'https://demo-api.druxtjs.org' }]],
+  components: true
+}

examples/nuxt/schema-component/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "schema-component",
+  "scripts": {
+    "dev": "nuxt dev"
+  },
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "druxt-schmea": "link:../../../packages/druxt-schema",
+    "nuxt": "latest"
+  }
+}

examples/nuxt/schema-component/pages/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>Custom component using DruxtSchemaMixin</h1>
+    <p>This demonstrates the ability to use Drupal Display settings, field placement and configuration, with non-Drupal data.</p>
+    <hr />
+    <SchemaComponent
+      type="node--page"
+      :data="{
+        body: 'Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat.',
+        links: ['https://druxtjs.org']
+      }"
+    />
+  </div>
+</template>

packages/schema/src/index.js

@@ -7,7 +7,7 @@ import { DruxtSchemaNuxtModule } from './nuxtModule'
  *
  * @type class
  * @exports DruxtSchema
- * @see {@link ./schema|DruxtSchema}
+ * @see {@link /api/packages/schema/schema|DruxtSchema}
  *
  * @example @lang js
  * import { DruxtSchema } from 'druxt-schema'
@@ -22,14 +22,12 @@ export { DruxtSchema } from './schema'
  *
  * @exports DruxtSchemaMixin
  * @type {object}
- * @see {@link ./mixins/schema|DruxtSchemaMixin}
+ * @see {@link /api/packages/schema/mixins/schema|DruxtSchemaMixin}
  *
  * @example @lang vue
  * <script>
  * import { DruxtSchemaMixin } from 'druxt-schema'
- *
  * export default {
- *   name: 'CustomComponent',
  *   mixins: [DruxtSchemaMixin]
  * }
  * </script>
@@ -43,7 +41,7 @@ export { DruxtSchemaMixin } from './mixins/schema'
  *
  * @exports DruxtSchemaStore
  * @type {Function}
- * @see {@link ./store/schema|DruxtSchemaStore}
+ * @see {@link /api/packages/schema/store/schema|DruxtSchemaStore}
  */
 export { DruxtSchemaStore } from './stores/schema'
 

packages/schema/src/mixins/schema.js

@@ -7,30 +7,18 @@ import { mapActions } from 'vuex'
  *
  * @example @lang vue
  * <script>
- * // Import mixin.
  * import { DruxtSchemaMixin } from 'druxt-schema'
- *
  * export default {
- *   name: 'CustomComponent',
- *
- *   // Register mixin.
  *   mixins: [DruxtSchemaMixin],
  * }
  * </script>
- *
- * @example @lang vue
- * <!-- Render component with lazy loaded Default View mode Page schema. -->
- * <CustomComponent type="node--page" mode="default" />
- *
- * @todo Add schemaType property to Mixin.
  */
 const DruxtSchemaMixin = {
-  /**
-   * Vue.js Properties.
-   */
+  /** */
   props: {
     /**
      * The Drupal Display mode.
+     *
      * @type {string}
      * @default default
      */
@@ -39,35 +27,46 @@ const DruxtSchemaMixin = {
       default: 'default'
     },
 
+    /**
+     * Drupal display schema type, 'view' or 'form'.
+     *
+     * @type {('view'|'form')}
+     */
+     schemaType: {
+      type: String,
+      default: undefined,
+    },
+
     /**
      * The JSON:API Resource type.
+     *
      * @type {string}
      */
     type: {
       type: String,
       required: true
-    }
+    },
   },
 
   /**
    * Loads the Schema from the Vuex store.
    */
   async fetch() {
-    this.schema = await this.getSchema({ resourceType: this.type, mode: this.mode })
+    this.schema = await this.getSchema({
+      resourceType: this.type,
+      mode: this.mode,
+      schemaType: this.schemaType || 'view'
+    })
   },
 
   /**
-   * Vue.js Data object.
-   *
    * @property {object} schema - The Drupal Schema data.
    */
   data: () => ({
     schema: false
   }),
 
-  /**
-   * Vue.js methods.
-   */
+  /** */
   methods: {
     /**
      * Maps `druxtSchema/get` Vuex action to `this.getSchema`.