Releases: inkline/inkline
Releases · inkline/inkline
v4.7.2
- fix: press enter in form input trigger ISelect button action 9089665
v4.7.1
- feat: provide root schema to validators and improve validator typing 29f0621
- Each validator is now typed
- Each validator now gets the
pathandschemain the options argument, allowing for more complex real-time validations - Each validator provides an error message in the console if there are missing configuration options
v4.7.0
v4.6.6
- fix: fix toast and modal event bus resolving to different instances in ssr 6e5131c
v4.6.5
v4.6.4
v4.6.3
v4.6.2
v4.6.1
- fix: add
nativeprop and fixoptionrender slot for checkbox and radio groups b838768
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
labelprop 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
optionsto render inner ICheckbox components - IRadioGroup now uses
optionsto render inner IRadio components