diff --git a/.changeset/slimy-terms-nail.md b/.changeset/slimy-terms-nail.md new file mode 100644 index 000000000..53f43ac3f --- /dev/null +++ b/.changeset/slimy-terms-nail.md @@ -0,0 +1,5 @@ +--- +"druxt-schema": patch +--- + +Added missing schemaType prop to DruxtSchemaMixin diff --git a/examples/nuxt/schema-component/README.md b/examples/nuxt/schema-component/README.md new file mode 100644 index 000000000..29fdef084 --- /dev/null +++ b/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 +``` diff --git a/examples/nuxt/schema-component/components/SchemaComponent.vue b/examples/nuxt/schema-component/components/SchemaComponent.vue new file mode 100644 index 000000000..55cfe8a35 --- /dev/null +++ b/examples/nuxt/schema-component/components/SchemaComponent.vue @@ -0,0 +1,27 @@ + + Loading ... + + + {{ field.id }}: + {{ JSON.stringify(data[field.id], null, ' ') }} + + Field schema + {{ JSON.stringify(field, null, ' ') }} + + + + + + + diff --git a/examples/nuxt/schema-component/nuxt.config.js b/examples/nuxt/schema-component/nuxt.config.js new file mode 100644 index 000000000..0ce947cbe --- /dev/null +++ b/examples/nuxt/schema-component/nuxt.config.js @@ -0,0 +1,4 @@ +export default { + buildModules: [['druxt-schema', { baseUrl: 'https://demo-api.druxtjs.org' }]], + components: true +} diff --git a/examples/nuxt/schema-component/package.json b/examples/nuxt/schema-component/package.json new file mode 100644 index 000000000..44b5678ea --- /dev/null +++ b/examples/nuxt/schema-component/package.json @@ -0,0 +1,11 @@ +{ + "name": "schema-component", + "scripts": { + "dev": "nuxt dev" + }, + "packageManager": "yarn@3.0.0", + "dependencies": { + "druxt-schmea": "link:../../../packages/druxt-schema", + "nuxt": "latest" + } +} diff --git a/examples/nuxt/schema-component/pages/index.vue b/examples/nuxt/schema-component/pages/index.vue new file mode 100644 index 000000000..90147c6d4 --- /dev/null +++ b/examples/nuxt/schema-component/pages/index.vue @@ -0,0 +1,14 @@ + + + Custom component using DruxtSchemaMixin + This demonstrates the ability to use Drupal Display settings, field placement and configuration, with non-Drupal data. + + + + diff --git a/examples/nuxt/schema-component/yarn.lock b/examples/nuxt/schema-component/yarn.lock new file mode 100644 index 000000000..e69de29bb diff --git a/packages/schema/src/index.js b/packages/schema/src/index.js index 3d7169dd5..dca74cad9 100644 --- a/packages/schema/src/index.js +++ b/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 * @@ -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' diff --git a/packages/schema/src/mixins/schema.js b/packages/schema/src/mixins/schema.js index b42fcde91..6e2b84dc7 100644 --- a/packages/schema/src/mixins/schema.js +++ b/packages/schema/src/mixins/schema.js @@ -7,30 +7,18 @@ import { mapActions } from 'vuex' * * @example @lang vue * - * - * @example @lang vue - * - * - * - * @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`.
{{ JSON.stringify(data[field.id], null, ' ') }}
{{ JSON.stringify(field, null, ' ') }}
This demonstrates the ability to use Drupal Display settings, field placement and configuration, with non-Drupal data.