How to configure the Vue component of a custom block with a SelectField?

Hi @tidyui,

I am now moving towards version 7, it’s very nice. I am stuck trying to write the Vue component of a custom block that contains both, an HtmlField and a SelectField. I have been able to add the HtmlField without any issues basing the code from the HtmlBlock, but I am stuck trying ti display the SelecField.

Do you have an example of this with Vue?

[tidyui]

Block does not export meta-data for fields atm, this means you can’t call the select-field component from your custom component. You can however add a select tag to it, for example here I have added it to the standard HtmlBlock.

HtmlBlock.cs

namespace Piranha.Extend.Blocks
{
    /// <summary>
    /// Single column HTML block.
    /// </summary>
    [BlockType(Name = "Content", Category = "Content", Icon = "fas fa-paragraph", Component = "html-block")]
    public class HtmlBlock : Block
    {
        public enum BackgroundColor {
            Black, White
        }

        public SelectField<BackgroundColor> Background { get; set; }

        /// <summary>
        /// Gets/sets the HTML body.
        /// </summary>
        public HtmlField Body { get; set; }
    }
}

html-block.js

/*global
    piranha
*/

Vue.component("html-block", {
    props: ["uid", "toolbar", "model"],
    data: function () {
        return {
            body: this.model.body.value
        };
    },
    methods: {
        onBlur: function (e) {
            this.model.body.value = e.target.innerHTML;
        }
    },
    computed: {
        isEmpty: function () {
            return piranha.utils.isEmptyHtml(this.model.body.value);
        }
    },
    mounted: function () {
        piranha.editor.addInline(this.uid, this.toolbar);
    },
    beforeDestroy: function () {
        piranha.editor.remove(this.uid);
    },
    template:
        "<div class='block-body' :class='{ empty: isEmpty }'>" +
        "  <select v-model='model.background.value'><option value='0'>Black</option><option value='1'>White</option></select>" +
        "  <div contenteditable='true' :id='uid' spellcheck='false' v-html='body' v-on:blur='onBlur'></div>" +
        "</div>"
});

Please note that in the current version you have to manually register select fields for them to work in blocks. SelectFields added to regions are automatically registered in the application by the AttributeBuilder, but this does not process blocks.

Startup.cs

App.Fields.RegisterSelect<Piranha.Extend.Blocks.HtmlBlock.BackgroundColor>();

All of this could be changed to work a bit smoother, but to make it solid it requires more changes and testing than what we have the possibility to add to this service release. Because of this I will postpone development for this issue.

[tidyui]

We try to have a fast release schedule for service releases after a new major version!