Extending Text field in plugin

Kirby 3 Solved ✅
1

Hello,

according to the docs it should be possible to create custom fields simply by extending existing ones.
Extending the text field (like in the doc example) doesn’t seem to work however.

Example:

<?php

Kirby::plugin('rasteiner/k3-query-field', [
  'fields' => [
    'query' => [
      'extends' => 'text',
    ]
  ]
]);

panel.plugin('rasteiner/k3-query-field', {
  fields: {
    query: {
      extends: 'k-text-field'
    }
  }
})

Kirby and Vue then try to create a <k-query-input> element / component (and that doesn’t exist).

I guess the kirby panel is trying to choose the correct “input component” for the field based on the field type, but that doesn’t work with custom fields. Or at least not by “simply extending a field”.

Am I missing something? Like is there a simple way to tell k-text-field "hey, please use a k-text-input"?

2

Like, this hacky workaround seems to do it:

panel.plugin('rasteiner/k3-query-field', {
  use: [
    function(Vue) {
      /* copy k-text-input component with name k-query-input */
      Vue.component(
        'k-query-input', Vue.options.components['k-text-input'].options
      )
    }
  ],
  fields: {
    query: {
      extends: 'k-text-field'
    }
  }
})

But I’d prefer a clean API if possible

3

This also works:

panel.plugin('rasteiner/k3-query-field', {
  components: { 'k-query-input': { extends: 'k-text-input'} },
  fields: {
    query: {
      extends: 'k-text-field',
    },
  }
})