API Documentation

DruxtField

entity

Modules

DruxtField: Renders a Drupal Field using Drupals by field type and formatter settings.

Typedefs

ComponentOptions : Array.<array>: Provides the available naming options for the Wrapper component.
PropsData : object: Provides propsData for use in the Wrapper component.
ScopedSlots : object: Provides scoped slots for use in the Wrapper component.

DruxtField

Renders a Drupal Field using Drupals by field type and formatter settings.

Example

<DruxtField
  :schema="{
    id: 'field_summary',
    label: {
      position: 'above',
      text: 'Summary',
    },
    type: 'basic_string'
  }"
  value="A wholesome pasta bake is the ultimate comfort food. This delicious bake is super quick to prepare and an ideal midweek meal for all the family."
/>

DruxtField
- .props
  - .errors : Array.<object>
  - .relationship : boolean
  - .schema : object
  - ~~.options~~
  - .value : array | boolean | number | object | string
  - .langcode
  - .v-model
  - .wrapper
- .computed
  - .data : array | boolean | number | object | string
  - .isBoolean : boolean
  - .isDateTime : boolean
  - .isFile : boolean
  - .isImage : boolean
  - .isLink : boolean
  - .isMultiple : boolean
  - .isText : boolean
  - .label : object
- .druxt
  - .template
  - .componentOptions(context) ⇒ ComponentOptions
  - .propsData(context) ⇒ PropsData
  - .slots() ⇒ ScopedSlots
- .data()

.props

Kind: static property of DruxtField

.props
- .errors : Array.<object>
- .relationship : boolean
- .schema : object
- ~~.options~~
- .value : array | boolean | number | object | string
- .langcode
- .v-model
- .wrapper

.errors : `Array.<object>`

JSON:API errors.

Kind: static property of props

.relationship : `boolean`

true if this field is a JSON:API relationship.

Kind: static property of props
Default: false

.schema : `object`

Drupal Field schema object.

Kind: static property of props

.options

Deprecated

Kind: static property of props

.value : `array` | `boolean` | `number` | `object` | `string`

The Field value.

Kind: static property of props
Model:

.langcode

The resource langcode.

Kind: static property of props
Example

<DruxtField langcode="en" />

.v-model

The Field value.

Kind: static property of props

.wrapper

The wrapper component configuration.

Used to set the wrapper component, class, style and propsData.

Kind: static property of props
Example

<DruxtField
  :wrapper="{
    component: 'MyWrapper',
    class: 'wrapper',
    propsData: { foo: 'bar' }
  }"
/>

.computed

Kind: static property of DruxtField

.computed
- .data : array | boolean | number | object | string
- .isBoolean : boolean
- .isDateTime : boolean
- .isFile : boolean
- .isImage : boolean
- .isLink : boolean
- .isMultiple : boolean
- .isText : boolean
- .label : object

.data : `array` | `boolean` | `number` | `object` | `string`

The Field data.

Kind: static property of computed

.isBoolean : `boolean`

Field is Boolean?

Kind: static property of computed

.isDateTime : `boolean`

Field is DateTime?

Kind: static property of computed

.isFile : `boolean`

Field is File?

Kind: static property of computed

.isImage : `boolean`

Field is Image?

Kind: static property of computed

.isLink : `boolean`

Field is Link?

Kind: static property of computed

.isMultiple : `boolean`

Field is multi-cardinality.

Kind: static property of computed

.isText : `boolean`

Field is Text?

Kind: static property of computed

.label : `object`

The Field label display settings.

Kind: static property of computed
Default: { position: 'hidden' }

.druxt

DruxtModule settings

Kind: static property of DruxtField

.druxt
- .template
- .componentOptions(context) ⇒ ComponentOptions
- .propsData(context) ⇒ PropsData
- .slots() ⇒ ScopedSlots

.template

Druxt development template tool configuration.

Kind: static property of druxt

.componentOptions(context) ⇒ `ComponentOptions`

Provides the available component naming options for the Druxt Wrapper.

Kind: static method of druxt

Param	Type	Description
context	`object`	The module component ViewModel.

.propsData(context) ⇒ `PropsData`

Provides propsData for the DruxtWrapper.

Kind: static method of druxt

Param	Type	Description
context	`object`	The module component ViewModel.

.slots() ⇒ `ScopedSlots`

Provides the scoped slots object for the Module render function.

A scoped slot per field item is provided, with support for:

File, Image, Link, Number, Text and other View fields.
Boolean, Date/Time, Text and other Form fields.
Entitiy references.

A scoped slot is provided for the label, as well as label-above and label-inline depending on the field schema.

A default slot is provided with debug information if Nuxt is in development mode.

Kind: static method of druxt
Returns: ScopedSlots - The Scoped slots object.
Example (DruxtFieldSchemaType.vue)

<template>
  <div>
    <slot name="label" />
    <slot name="field-0" />
  </div>
</template>

.data()

Kind: static method of DruxtField
Properties

Name	Type	Description
model	`object`	The model object.

ComponentOptions : `Array.<array>`

Provides the available naming options for the Wrapper component.

Kind: global typedef
Example

[
  'DruxtField[Type][Id][SchemaType][Langcode]',
  'DruxtField[Type][Id][SchemaType]',
  'DruxtField[Type][Id][Langcode]',
  'DruxtField[Type][Id]',
  'DruxtField[Type][SchemaType][Langcode]',
  'DruxtField[Type][SchemaType]',
  'DruxtField[Default][SchemaType][Langcode]',
  'DruxtField[Default][SchemaType]',
  'DruxtField[Type][Langcode]',
  'DruxtField[Type]',
  'DruxtField[Default][Langcode]',
  'DruxtField[Default]',
]

Example (Media field)

[
  'DruxtFieldEntityReferenceEntityViewFieldMediaImageViewEn',
  'DruxtFieldEntityReferenceEntityViewFieldMediaImageView',
  'DruxtFieldEntityReferenceEntityViewFieldMediaImageEn',
  'DruxtFieldEntityReferenceEntityViewFieldMediaImage',
  'DruxtFieldEntityReferenceEntityViewViewEn',
  'DruxtFieldEntityReferenceEntityViewView',
  'DruxtFieldDefaultViewEn',
  'DruxtFieldDefaultView',
  'DruxtFieldEntityReferenceEntityViewEn',
  'DruxtFieldEntityReferenceEntityView',
  'DruxtFieldDefaultEn',
  'DruxtFieldDefault',
]

PropsData : `object`

Provides propsData for use in the Wrapper component.

Kind: global typedef

Param	Type	Description
errors	`Array.<object>`	JSON:API errors.
relationship	`boolean`	Field relationship status.
schema	`object`	Drupal Field schema information.
value	`object`	The Field value.

Example

{
  errors: [],
  relationship: true,
  schema: {
    config: {},
    description: '',
    id: 'field_media_image',
    label: {},
    required: true,
    settings: {},
    thirdPartySettings: [],
    type: 'entity_reference_entity_view',
    weight: 4,
  },
  value: {
    data: {
      id: '71a90e86-55b6-40fe-b77d-552dca1bee77',
      type: 'media--image',
    },
    links: {},
  },
}

ScopedSlots : `object`

Provides scoped slots for use in the Wrapper component.

Kind: global typedef

Param	Type	Description
field-#	`function`	A slot per field item, e.g. `field-0`.
label	`function`	The field label.
label-above	`function`	The field label, if label position is 'above'.
label-inline	`function`	The field label, if label position is 'inline'.
default	`function`	The appropriate label and fields.