Return query from options

Kirby 3 Questions 🤔
,
1

Hi Guys,

I’m stuck as I dont’ understand the logic here. I’m trying to build a field plugin, but it seems I can’t make it work with query options params. Feel free to help! Thanks

index.php

  <?php
  Kirby::plugin('julienmillies/color-selector', [
      'fields' => [
      	'colorselector' => [
      		'extends' => 'select',
          'props' => [
            'options' => function ($options = []) {
              if($options == 'query') {
                // What should I do Here ????
              }
              return $options;
            }
          ]
      ]
    ]
  ]);

colorfield.vue

<script>
export default {
  inheritAttrs: false,
  props: {
    label       : String,
    help        : String,
    value       : String,
    background  : String,
    options     : [Object, Array],
    query       : Array
  },
  computed: {
    colors() {
        if(this.isQueryOptions(this.options)) {
          // What should I do Here ?
        }
        else return this.options
    }
  },
  methods: {
    isQueryOptions(options) {
      // What should I do Here ?
    }
  }
};
</script>

index.js (loading the vue file)

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

.yaml file

sitecolors:
    label: Colors
    type: colorselector
    background: green
    options: query
    query:
      fetch: site.find('preferences').sitecolors.toStructure
      text: "{{ structureItem.colorname }}"
      value: "{{ structureItem.colorhex }}"

Thanks guys.

2

Hello Julien

I’ve been racking my brains over this for a while. The solution is so simple that I can’t believe it myself. There is a field mixing called option.

After this long time, I’m sure you’ve already found a solution. Is it about the color palette plugin? Is it yours?

Kirby::plugin('julienmillies/color-selector', [
    'fields' => [
        'colorselector' => [
      		'extends' => 'select',
      		'mixins' => ['options']
        ]
    ],
]);