Style select field query text in blueprint

Kirby 3 Solved ✅
10

Good news @jaro.io,

mystructure:
  label: 'Structure Test'
  type: structure
  fields:
    multiselect:
      type: multiselect
      options:
        type: query
        query: site.find('notes').children.listed
        value: '{{ item.id }}'
        text: '{{ item.title }} <span style="color:gray;">{{ item.id }}</span>'

// site/plugins/kirby-multiselect-preview/src/index.js
import MultiselectPreview  from './components/MultiselectPreview.vue'

window.panel.plugin('k-community/multiselectpreview', {
  components: {
    'k-multiselect-field-preview': MultiselectPreview
  }
});

// site/plugins/kirby-multiselect-preview/src/components/MultiselectPreview.vue
<template>
  <div class="k-multiselect-field-preview">
      <div class="k-multiselect-entries">
        <template v-for="(entry, index) in previews">
          <template v-if="index > 0">, </template>
          <span class="k-multiselect-entry" v-html="entry.text"></span>
        </template>
      </div>
    </div>
</template>

<script>
export default {
    props: {
      value: [Array, Object, String],
      field: [Array, Object, String],
    },
    
    computed: {
      previews(){
        let result = [];
        this.value.forEach((val, k) => {
            result[k] = Object.values(this.field.options)
                        .find((o) => (o.value === val));
        });
        return result;
      },
    }
};
</script>

I’ve found a solution.
All infos we need are in the field and value props.
So all we need to do, is filtering the field.options by the stored values and return the option’s text.
If You don’t wish a comma separted list, just remove this line:
<template v-if="index > 0">, </template>

Again, try and adjust it to Your needs (Tipps for a panel plugin setup).

Until I find time to put it on github, You can download it from here.

All the best,

Cris