Skip to content

Atom components #3750

Open
Open
@m0ksem

Description

@m0ksem

I've been working on VaSelect component and though that it is a pretty big thing. How about we simplify it to be made of atoms?

<div>
   <VaDropdown>
      <VaInputField #anchor="{ toggle }">
        <template #appendInner>
           <VaInputFieldClearButton v-if="..." />
           <VaInputFieldSuccessIcon v-if="success" />
           <VaInputFieldErrorIcon />
           <VaSelectDropdownIcon  @click="toggle" />
        </template>
      </VaInputField>
      
      <VaDropdownContent>
         <VaSelectOptionsList :options="options"  #option="{ text, value, selected }"> // or VaSelectOptionsListGrouped
            <VaSelectOption>
            	{{ text }}
            	<VaSelectOptionMarkIcon v-if="selected" />
            </VaSelectOption />
         </VaSelectOptionsList>
      </VaDropdownContent>
   </VaDropdown>
</div>

The idea is super simple - for small cost, we expose to user new feature, so one can construct own select, make it more complex.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions