Extending k-select-field

Kirby 3 Questions 🤔
,
1

Hi guys,

I’m really struggling as I can’t find enough documentation to help me solve that one. I’m pretty sure it’s an easy one but I can’t figure it out (not familiar with vue nor kirby plugins)
My question is how do I send the array from the php to the vue js template and props?

vue.js file

<template>
  <k-field
    :input="_uid"
    v-bind="$props"
    class="k-select-field">
    <k-input
      ref="input"
      :id="_uid"
      :options="[
        { value: options.value, text: options.text }
      ]"
      theme="field"
      v-on="$listeners"
      type="select"
    />
  </k-field>
</template>

<script>
export default {
  props: {
    label: String,
    help: String,
    value: String,
    background: String,
    options: Array
  },
  methods: {
    onInput(value) {
      this.$emit("input", value);
    }
  }
};
</script>

<style lang="scss">
/** put your css here **/
</style>

index.php

Kirby::plugin('julienmillies/color-selector', [
    'fields' => [
    	'colorselector' => [
    		'extends' => 'select',
        'props' => [
          'options' => function (array $options) {
              return $options;
          }
        ]
    	]
    ]
]);
2

I’m missing the index.js with the JS part of the plugin definition? https://getkirby.com/docs/reference/plugins/extensions/fields#extending-existing-fields__extending-the-frontend

3

sorry… here it is :slight_smile:

import ColorSelectorField from "./components/ColorSelectorField.vue";
panel.plugin("julienmillies/color-selector", {
  fields: {
    colorselector : ColorSelectorField
  }
});

Just to be clear, the plugin is based on the online tutorial by Bastian Alggeier, here:https://www.youtube.com/watch?v=NTCIKDalRis

Thanks for helping.

4

Well I managed to make it work (a bit) and have asked a related question Return query from options