v4.6.0

Form Options

Form elements that render multiple options, such as Select, CheckboxGroup, RadioGroup, CheckboxButtons and RadioButtons now use an options prop, where each option uses the following format:

export interface FormOption {
    id: string | number;
    label?: Renderable;
    value?: FormValue;
    disabled?: boolean;
    readonly?: boolean;
    [key: string]: any;
}

The id is required and will be always used to set the modelValue of the form element. The options array usage would look as follows:

<script lang="ts" setup>
    const selected = ref('apple');
    const options = ref<FormOption[]>([
        { id: 'apple', label: 'Apple' },
        { id: 'banana', label: 'Banana' },
        { id: 'strawberry', label: 'Strawberry' }
    ]);
</script>
<template>
    <IRadioGroup v-model="selected" :options="options" />
</template>

Renderable

Each of the above mentioned components now also has a label prop that is used as fallback if the option item does not provide a label field. The component label prop and option label field introduce a new concept called Renderable to Inkline. Which can be one of the following:

• a string i.e. Label
• an expression that can reference any field of the options array item i.e. {{address.country}}
• a render function returning a string i.e. (option: FormOption) => Hello ${option.id}`
• a render function returning a hoisted element i.e. (option: FormOption) => h('strong', {}, option.id)
• a Vue component (needs to be marked as raw to disable reactivity) i.e. markRaw(MyComponent)

Breaking changes

• ISelect label prop now uses the format above, meaning that if you were referencing a path, you'll need to switch to the expression syntax
• ICheckboxGroup now uses options to render inner ICheckbox components
• IRadioGroup now uses options to render inner IRadio components

Commits

• Merge pull request #395 from inkline/form-element-improvements 0f728a6
• feat: unify render functions for checkboxes, radios, and select options ddb3f8c
• feat: add support for options array to CheckboxGroup and RadioGroup 380b261

v4.5.0...v4.6.0