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.
MIT License
Bot releases are hidden (Show)
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 childrenuseForm
composable is now type safe and requires a base type that determines the shape of your formuseForm
composable:
schema
- the resolved schema with all validation fieldsform
- the serialized form values, computed based on the schemavalidate
- a function to validate the schema on demandtouched
when submitting.usePrompt
promise now resolves to the serialized form
instead of the schemauseModal
and usePrompt
display: flex
const { form, schema, validate } = useForm<{
field: string;
group: {
nested: number;
};
array: string[];
arrayGroup: Array<{ field: string }>;
}>({
field: {
value: 'abc',
validators: ['required']
},
group: {
nested: {
value: 123,
validators: []
}
},
array: [
{ value: 'abc' }
],
arrayGroup: [
{
field: {
value: 'abc'
}
}
]
});
Breaking changes
IToastContainer
no longer needs to be added manually