Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.
path and schema in the options argument, allowing for more complex real-time validations<html> tag 0f0f019eRelevant Changes
light-theme and dark-theme are now applied to the <html> instead of <body> elementnative prop and fix option render slot for checkbox and radio groups b8387685Form 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>
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:
Label
{{address.country}}
(option: FormOption) => Hello ${option.id}`(option: FormOption) => h('strong', {}, option.id)
markRaw(MyComponent)
label prop now uses the format above, meaning that if you were referencing a path, you'll need to switch to the expression syntaxoptions to render inner ICheckbox componentsoptions to render inner IRadio componentsservices dirservices dirbox-sizing on all children