Skip to content

feat: Form element rendering improvements and alignments #395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 31, 2023

Conversation

alexgrozav
Copy link
Member

  • Please check if the PR fulfills these requirements

    • The commit message follows our guidelines
    • Tests for the changes have been added (for bug fixes / features)
    • Docs have been added / updated (for bug fixes / features)
  • What kind of change does this PR introduce?
    Feature.

  • What is the current behavior?
    Form elements that rendered multiple options, such as Select, CheckboxGroup, RadioGroup, CheckboxButtons and RadioButtons did not use the same API. The rendering mechanism was individual to each of them as well, not providing an optimal DX.

  • What is the new behavior?
    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>

    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)
  • Does this PR introduce a breaking change?
    The ISelect, ICheckboxGroup and IRadioGroup will need to be updated to use the format above.

@vercel
Copy link

vercel bot commented Oct 31, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
next-storybook-inkline-io ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 31, 2023 6:30am
storybook-inkline-io ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 31, 2023 6:30am
v3-storybook-inkline-io ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 31, 2023 6:30am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant