v4.7.2

• fix: press enter in form input trigger ISelect button action 9089665

v4.7.1...v4.7.2

v4.7.1

• feat: provide root schema to validators and improve validator typing 29f0621
  • Each validator is now typed
  • Each validator now gets the path and schema in 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.7.1

v4.7.0

• feat: add support for async validators e1031a9
• fix: fix array schema validation state computation 4d67e9f

v4.6.6...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.6

v4.6.5

• feat: change color theme target to <html> tag 0f0f019
• feat: add consistent type imports eslint rule ecf7f8d

Relevant Changes

• The color mode classes light-theme and dark-theme are now applied to the <html> instead of <body> element

v4.6.4...v4.6.5

v4.6.4

• chore: add engines.node and engines.npm aca02d0
• feat: update dependencies 469a657
• feat: upgrade storybook to 7.5.3 859babe

v4.6.3...v4.6.4

v4.6.3

• feat: add Select render label component example be22328
• fix: remove console.log from render-component.vue example b512453
• fix: fix render resolver render prop name in jsdoc 2b69636

v4.6.2...v4.6.3

v4.6.2

• feat: generate manifest for render resolver 0c173dc
• fix: update checkable button group examples d27197c

v4.6.1...v4.6.2

v4.6.1

• fix: add native prop and fix option render slot for checkbox and radio groups b838768

v4.6.0...v4.6.1

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