inkline
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)
- feat: provide root schema to validators and improve validator typing 29f0621b
- 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
- feat: add support for async validators e1031a92
- fix: fix array schema validation state computation 4d67e9f2
- fix: fix toast and modal event bus resolving to different instances in ssr 6e5131c6
- feat: change color theme target to
<html>tag 0f0f019e - feat: add consistent type imports eslint rule ecf7f8d7
Relevant Changes
- The color mode classes
light-themeanddark-themeare now applied to the<html>instead of<body>element
- chore: add engines.node and engines.npm aca02d0d
- feat: update dependencies 469a6576
- feat: upgrade storybook to 7.5.3 859babe0
- feat: add Select render label component example be223283
- fix: remove console.log from render-component.vue example b5124535
- fix: fix render resolver render prop name in jsdoc 2b696364
- feat: generate manifest for render resolver 0c173dcd
- fix: update checkable button group examples d27197c3
- fix: add
nativeprop and fixoptionrender slot for checkbox and radio groups b8387685
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
Commits
- Merge pull request #395 from inkline/form-element-improvements 0f728a60
- feat: unify render functions for checkboxes, radios, and select options ddb3f8c0
- feat: add support for options array to CheckboxGroup and RadioGroup 380b2615
- Sidebar now renders correctly on load when using SSR
- Toast service is usable outside of Vue components and has been moved to dedicated
servicesdir - Toast service is now at 100% test coverage
- Modal service is usable outside of Vue components and has been moved to dedicated
servicesdir - Modal service is now at 100% test coverage
- Layout component no longer sets
box-sizingon all children
- fix: update validation stories 88d96e63
- The
useFormcomposable is now type safe and requires a base type that determines the shape of your form - There are three values now being returned by the
useFormcomposable:-
schema- the resolved schema with all validation fields -
form- the serialized form values, computed based on the schema -
validate- a function to validate the schema on demand
-
- The form will now set all the schema values to
touchedwhen submitting. - The
usePromptpromise now resolves to the serializedforminstead of the schema - Improved
useModalandusePrompt - Updated button structure and loading state, added icon slot
- Changed block button to
display: flex - Refactored all symbols to avoid nuxt SSR import issues
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'
}
}
]
});
- Merge pull request #390 from inkline/form-validation-update 489325a1
- Merge pull request #389 from inkline/all-contributors/add-Timbological 5365ce63
- Merge pull request #388 from inkline/bugfixes b93f4c75
- feat: add toast container offsets as css variables e7228bdc
- test: add modal container tests e817480a
- feat: add IToast position prop for documentation purposes 5fa05f94
- fix: remove search event from ISelect 75fa0c66
- feat: add modal builder with several built-ins and useModal composable 3b053bc7
- feat: add e2e integration workflow using playwright b4de4ad8
- feat: add toast container injection 2e159538
- fix: update ISelect props e242d6ab
Breaking changes
-
IToastContainerno longer needs to be added manually
- fix: fix injection key path resolution in ssr 607c0159
- fix: update password toggleable condition to no longer take readonly and disabled into account 7b2cb0eb
- fix: update manifest generation 56231199
- refactor: renamed composables files to reflect the composable function they're exporting a85bd392
- fix: fix using props.name directly in setup() 2c0ec28d
- feat: add manifest merging support c0f35a40
- feat: update storybook to latest version 2a9b4ce7
- refactor: use IInput to render INumberInput e88efae7
- feat: add showPasswordToggle and textarea type 0f3d3bc9
- feat: add eye, eye-off, clear icons a0dd1883
- fix: fix breadcrumb color 2c841502
- refactor: reuse IInput with type textarea to render ITextarea 7e4c8df6
- fix: fix radio buttons expected modelValue type 05896e10
Package Rankings
Top 24.46% on Packagist.org
Top 2.49% on Npmjs.org
Top 13.08% on Bower.io