import { Select } from '@frontile/forms';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { array } from '@ember/helper';
import { Select } from '@frontile/forms';
import { Divider } from '@frontile/utilities';
const animals = [
'cheetah',
'crocodile',
'elephant',
'giraffe',
'kangaroo',
'koala',
'lemming',
'lemur',
'lion',
'lobster',
'panda',
'penguin',
'tiger',
'zebra'
];
const animalsAsOject = [
{ key: 'cheetah', label: 'Cheetah' },
{ key: 'crocodile', label: 'Crocodile' },
{ key: 'elephant', label: 'Elephant' },
{ key: 'giraffe', label: 'Giraffe' },
{ key: 'kangaroo', label: 'Kangaroo' },
{ key: 'koala', label: 'Koala' },
{ key: 'lemming', label: 'Lemming' },
{ key: 'lemur', label: 'Lemur' },
{ key: 'lion', label: 'Lion' },
{ key: 'lobster', label: 'Lobster' },
{ key: 'panda', label: 'Panda' },
{ key: 'penguin', label: 'Penguin' },
{ key: 'tiger', label: 'Tiger' },
{ key: 'zebra', label: 'Zebra' }
];
export default class Example extends Component {
@tracked selectedKeys: string[] = [];
@tracked selectedKeys2: string[] = ['elephant'];
@tracked selectedKeys3: string[] = [];
@action
onChange(value: boolean): void {
this.isSelected = value;
}
@action
onAction(key: string) {
// eslint-disable-next-line
console.log('Click on key', key);
}
@action
onSelectionChange(keys: string[]) {
this.selectedKeys = keys;
}
@action
onSelectionChange2(keys: string[]) {
this.selectedKeys2 = keys;
}
@action
onSelectionChange3(keys: string[]) {
this.selectedKeys3 = keys;
}
<template>
<Select
@selectionMode="multiple"
@items={{animals}}
@onAction={{this.onAction}}
@selectedKeys={{this.selectedKeys}}
@onSelectionChange={{this.onSelectionChange}}
>
<:item as |o|>
<o.Item @key={{o.item}} @intent="default" @appearance="faded">
{{o.item}}
</o.Item>
</:item>
</Select>
Values:
{{this.selectedKeys}}
<Divider @class="my-8" />
<Select
@placeholder="select an option my friend"
@allowEmpty={{true}}
@selectionMode="single"
@items={{animalsAsOject}}
@intent="primary"
@selectedKeys={{this.selectedKeys2}}
@onAction={{this.onAction}}
@onSelectionChange={{this.onSelectionChange2}}
/>
Values:
{{this.selectedKeys2}}
<Divider @class="my-8" />
<Select
@disableTransitions={{true}}
@onAction={{this.onAction}}
@disabledKeys={{(array "notifications")}}
@selectedKeys={{this.selectedKeys3}}
@onSelectionChange={{this.onSelectionChange3}}
as |l|
>
<l.Item @key="profile" @description="View my profile">
My Provile
</l.Item>
<l.Item @key="settings" @shortcut="⌘⇧S">Settings</l.Item>
<l.Item @key="notifications" @shortcut="⌘⇧N" @withDivider={{true}}>
Notifications
</l.Item>
<l.Item @key="reset" @intent="danger" @class="text-danger">
<:start>
<div>Start</div>
</:start>
<:default>
Reset Settings
</:default>
</l.Item>
<l.Item
@key="delete"
@shortcut="⌘⇧D"
@intent="danger"
@appearance="faded"
@class="text-danger"
>
Delete Account
</l.Item>
</Select>
Values:
{{this.selectedKeys3}}
</template>
}
Element: HTMLDivElement
Name | Type | Default | Description |
---|---|---|---|
allowEmpty
|
boolean
|
- | |
appearance
|
enum
|
'default'
|
The appearance of each item |
backdrop
|
enum
|
- | |
backdropTransition
|
Object
|
- | |
blockScroll
|
boolean
|
true
|
|
classes
|
SlotsToClasses<'base' | 'icon' | 'trigger' | 'placeholder' | 'listbox'>
|
- | |
closeOnEscapeKey
|
boolean
|
true
|
Whether to close when the escape key is pressed |
closeOnItemSelect
|
boolean
|
true
|
Whether the select should close upon selecting an item. |
closeOnOutsideClick
|
boolean
|
true
|
Whether to close when the area outside (the backdrop) is clicked |
description
|
string
|
- | |
destinationElementId
|
string
|
undefined
|
The destination where the overlay will be inserted, defaults to `document.body` |
didClose
|
function
|
- | |
disabledKeys
|
Array
|
- | |
disableFocusTrap
|
boolean
|
false
|
|
disableTransitions
|
boolean
|
false
|
Disable css transitions |
errors
|
enum
|
- | |
flipOptions
|
any
|
- | |
focusTrapOptions
|
unknown
|
{ clickOutsideDeactivates: true, allowOutsideClick: true }
|
Focus trap options |
id
|
string
|
- | |
inputSize
|
enum
|
- | |
intent
|
enum
|
- | The intent of each item |
isDisabled
|
boolean
|
- | |
isInvalid
|
boolean
|
- | |
isRequired
|
boolean
|
- | |
items
|
Array
|
- | |
label
|
string
|
- | |
middleware
|
Array
|
- | |
name
|
string
|
- | |
offsetOptions
|
any
|
5
|
|
onAction
|
function
|
- | |
onSelectionChange
|
function
|
- | |
placeholder
|
string
|
- | |
placement
|
enum
|
'bottom-start'
|
Placement of the menu when open |
popoverSize
|
enum
|
- | |
renderInPlace
|
boolean
|
false
|
Whether to render in place or in the specified/default destination |
selectedKeys
|
Array
|
- | |
selectionMode
|
enum
|
- | |
shiftOptions
|
any
|
- | |
strategy
|
enum
|
'absolute'
|
|
transition
|
Object
|
{name: 'overlay-transition--scale'}
|
The transition to be used in the Modal. |
transitionDuration
|
number
|
200
|
Duration of the animation |
Name | Type | Default | Description |
---|---|---|---|
item
*
|
Array
|
- | |
default
*
|
Array
|
- |
Name | Type | Default | Description |
---|
Element: <span class="hljs-built_in">Array</span>
Name | Type | Default | Description |
---|---|---|---|
allowEmpty
|
boolean
|
- | |
classes
|
SlotsToClasses<'base' | 'input' | 'innerContainer' | 'startContent' | 'endContent'>
|
- | |
description
|
string
|
- | |
disabledKeys
|
Array
|
- | |
errors
|
enum
|
- | |
id
|
string
|
- | |
isInvalid
|
boolean
|
- | |
isRequired
|
boolean
|
- | |
items
|
Array
|
- | |
label
|
string
|
- | |
name
|
string
|
- | |
onAction
|
function
|
- | |
onItemsChange
|
function
|
- | |
onSelectionChange
|
function
|
- | |
placeholder
|
string
|
- | Placeholder text used when `allowEmpty` is set to `true`. |
selectedKeys
|
Array
|
- | |
selectionMode
|
enum
|
- | |
size
|
enum
|
- |
Name | Type | Default | Description |
---|---|---|---|
item
*
|
Array
|
- | |
default
*
|
Array
|
- |
Element: HTMLOptionElement
Name | Type | Default | Description |
---|---|---|---|
key
*
|
string
|
- | |
manager
*
|
ListManager
|
- | |
textValue
|
string
|
- |
Name | Type | Default | Description |
---|---|---|---|
default
*
|
Array
|
- | |
selectedIcon
*
|
Array
|
- | |
start
*
|
Array
|
- | |
end
*
|
Array
|
- |