Extending k-select-field/k-multiselect-field

Kirby 3 Solved ✅
#1

Hi forum

I’m new to Vue.js and try to extend kirby’s fields k-select-field/k-multiselect-field.

Basically, I’d like to reuse k-select-field/k-multiselect-field but I’d like to serve the available options by a custom implementation.

This is what I did so far:

index.js:

panel.plugin('steineri/kirby-plugin-feg-visp', {
  fields: {
    PCOEvent: {
      extends: 'k-select-field'
    }
  }
});

config.php

<?php

Kirby::plugin('steineri/kirby-plugin-feg-visp', [
    'fields' => [
        'PCOEvent' => [
            'props' => [
                'options' => function () {
                    return [
                        ['value' => 'abc', 'text' => 'Option A'],
                        ['value' => 'xyz', 'text' => 'Option X']
                    ];
                }
            ]
        ]
    ]
]);

This is an excerpt of my test blueprint:

  content:
    type: fields
    fields:
      title:
        label: Name
        type:  text
      pcoSource:
        type: PCOEvent
        label: pcoSource
      Categories:
        label: Select
        type: select
        options:
          abc: Option A
          xyz: Option X

I observe these custom options getting successfully served to the panel. Apparently, the options are served in the exact same way for both, Select and the extended field pcoSource:

01
01.png864×531 82.2 KB

While field Select works as expected, field pcoSource is empty and the panel looks like this:

02
02.png755×212 2.09 KB

Finally, that’ how the generated HTML code looks like:
03

Do I miss something? Does extension/inheritance not work the way I imagine it does? Or is this related to the bug described here?

Thank you very much!

#2

Kirby uses your type: PCOEvent declaration to build the field (here). Because type is not a select input, that component is not loaded.

If you compare what is inside

<div data-theme="field" data-type="PCOEvent" class="k-input">...</div>

to

<div data-theme="field" data-type="select" class="k-input">...</div>

you’ll see that in your custom field there was never a select field rendered.

You can copy the k-select-field template and add type="select" to the attributes in k-input what seems to give you all the functionality of a select field back.

// index.js
panel.plugin('steineri/kirby-plugin-feg-visp', {
    fields: {
        PCOEvent: {
            extends: 'k-select-field',
            template: `
              <k-field :input="_uid" v-bind="$props" class="k-select-field">
                <k-input
                  ref="input"
                  :id="_uid"
                  v-bind="$props"
                  theme="field"
                  v-on="$listeners"
                  type="select"
                />
            </k-field>
            `
        }
    }
});

If you want to customize k-select-input at the same time, I think you run in to the nesting issue.

Btw: If you only want to serve custom options you could use query with a custom page method in your blueprint

#3

Hi moeli

thank you very much for these valuable inputs.

I also thought about the solutions you proposed (copy the template / use a custom page method).

I decided against the custom page method because I prefer a dedicated field. Furthermore, I was not willing to copy the template since this is against my understanding of extension/inheritance in the object-oriented sense.

Is this a peculiarity of Vue.js that templates are not inherited in conjunction with extends or is it Kirby-specific?

#4

Templates are extended just fine. In your case we need to adapt the template to load the correct sub component. It is more the Kirby way of defining which Input component to load than a problem with inheritance.

Do you need to edit the vue part of your field or is it only about an own field and specific options?

#5

I do not intent do change the templates. But possibly, I will have to extent some computed values.

Anyways, you helped me very much!