Choosen

Choosen is select with modal dialog gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Examples

Choosen

Code

<script setup lang="ts">
import { ref } from 'vue'
const options = ref([
  {
    _id: '1',
    label: 'Jane',
    value: 'jane'
  },
  {
    _id: '2',
    label: 'John Doe',
    value: 'john-doe'
  }
])

const selected = ref()
const selectedLabel = ref('')
const selectedValue = ref('')
</script>

<template>
  <Demo is-row>
    <base-choosen title="Example" :options="options" v-model:selected="selected" v-model:selectedLabel="selectedLabel" v-model:selectedValue="selectedValue" />
    <div class="flex flex-col gap-4">
      <div><span class="font-bold">v-model = </span><span>{{ selected }}</span></div>
      <div><span class="font-bold">v-model:selectedLabel = </span><span>{{ selectedLabel }}</span></div>
      <div><span class="font-bold">v-model:selectedValue = </span><span>{{ selectedValue }}</span></div>
    </div>
  </Demo>
</template>

Choosen API

Props

Name	Type	Default	Description
v-model	string		v-model is required.
v-model:selectedLabel	string		v-model for label only.
v-model:selectedValue	string		v-model for value only.
v-model:errors	string[]		Input error message.
mode	input text	input	Choosen mode.
label	string		Choosen label.
label	string		Choosen label.
text	string		Choosen text.
description	string		Input description.
placeholder	string		Input placeholder.
layout	horizontal vertical	vertical	Input layout.
required	boolean	false	if true choosen is required.
disabled	boolean	false	if true choosen is disabled.
helpers	string[]		Input helper message.
data-testid	string		Testing ID.

Automated Test Guide

If you pass a data-testid to the <base-choosen> component, it will automatically generate unique data-testid attributes for testing:

For example, if you set data-testid="user-choosen", the component will generate the following attributes:

Element	data-testid
Input Field	user-choosen-input
Search Field	user-choosen-search
Option with _id = 1	user-choosen-1
Option with _id = 2	user-choosen-2
Clear Button	user-choosen-clear-button

Gherkin Scenario

When I click choosen input "user-choosen-input"
And I type "Durward" into "user-choosen-search"
And I click choosen option "user-choosen-option-1"
And I click choosen clear button "user-choosen-clear-button"

Step Definition

When('I click choosen input {string}', (selector: string) => {
  cy.get(`[data-testid="${selector}"]`).click()
})

When('I click choosen clear button {string}', (selector: string) => {
  cy.get(`[data-testid="${selector}"]`).click()
})

When('I type {string} into {string}', (value: string, selector: string) => {
  cy.get(`[data-testid="${selector}"]`).type(value)
})

When('I click choosen option {string}', (selector: string) => {
  cy.get(`[data-testid="${selector}"]`).click()
})

Code Implementation

<script setup>
import { ref } from 'vue'

const userOptions = [
  { _id: '1', label: 'Durward Reynolds' },
  { _id: '2', label: 'Kenton Towne' },
  { _id: '3', label: 'Therese Wunsch' },
  { _id: '4', label: 'Benedict Kessler' }
]
const userSelected = ref()
</script>

<template>
  <base-choosen v-model="userSelected" :options="userOptions" data-testid="user-choosen" />
</template>