6.1.32 • Published 15 days ago

@dreamworld/dw-select v6.1.32

Weekly downloads
134
License
ISC
Repository
github
Last release
15 days ago

<dw-select> Published on npm

A Select is an input widget with an associated dropdown that allows users to select a value from a list of possible values.

Two types of select component: default (searchable=false), and searchable (searchable=true).

Note: dw-select internally uses dw-list-item to render items. use overide property renderItem to override items.

Installation

npm install @dreamworld/dw-select

Example usage

Default

<dw-select outlined items="${this.items}" label="outlined"></dw-select>

Searchable

<dw-select outlined items="${this.items}" label="outlined" searchable></dw-select>

Behaviour

  • Renders dw-select-trigger and dw-select-dialog
  • Triggers internal validation on blur & select.
  • Focus:
    • For searchable types, it shows a cursor. For non searchable type, doesn’t show cursor.
    • The dropdown opens when the user clicks the field using a pointing device.
  • Clear Selection:
    • Searchable: remove all input text and it will clear the selection and dispatch a clear-selection event
    • Non-Searchable: there is no way to clear the selection for non-searchable. If required, the integrator should provide an empty item for clear selection.

API

Extension Method

TODO

Properties/Attributes

NameTypeDefaultDescription
namestring""Sets the name attribute on the internal input. The name property should only be used for browser autofill as webcomponent form participation does not currently consider the name attribute.
valueobjectnullRepresents current value. Integrator may change this proprty, to change current selected Item. And when User changes selection through mouser/keyboard interaction, it's changed corresponding to the selected item by the User.
itemobjectA read-only property. Returns an Item corresponding to the current value.
highlightChangedbooleanfalseEnable highLight textfield when value is changed. It will highLight field when value and originalValue is not same
originalValueobjectnullInput property. Note: When originalValue is specified (not undefined) & its value is different than this; then highlight is shown. (Comparison is done by reference)
outlinedbooleanfalseWhether or not to show the outlined variant.
labelstring""Sets floating label value. Note: The label will not float if the selected item has a false value property.
placeholderstring""Sets disappearing input placeholder.
helperstring""Helper text to display below the input. Display default only when focused.
readOnlybooleanfalseWhether or not to show the readOnly state.
requiredbooleanfalseDisplays error state if value is empty and input is blurred.
errorMessagestringundefinedMessage to show in the error color when the textfield is invalid.
requiredMessagestringundefinedMessage to show in the error color when the required, and _requiredErrorVisible are true.
_requiredErrorVisiblebooleanfalseWhether or not to show the required error message.
validityValidityState (readonly){}The ValidityState of the textfield.
autoValidatebooleanfalseReports validity on value change rather than only on blur.
disabledbooleanfalseWhether or not to show the disabled variant.
searchablebooleanfalseWhether or not to show the searchable variant.
groupsGroup[]nullList of groups.
groupSelectorfn()returns GroupName. Group selector provides a path of groupName in Items
groupExpressionstring""
itemsobject[]undefinedList of selectable items.
prependItemsobject[]undefinedItems on top of the items. e.g. All, None etc...
valueProviderfunctionundefinedProvides Value
valueExpressionstringundefined
valueTextProviderfunctionundefinedreturns String. Provides value that represents in list item
dialogWidthnumberundefinedBy default, the pop-over dialog is rendered in the width of the host element; And the fit dialog is rendered in a fixed-width specified by –dw-select-fit-dialog-width css property. But: when this is specified, both dialogs are shown in this width. Note: BottomSheet dialog is always in full width, so this doesn’t affect it.
renderItemHTMLTemplateundefinedProvides any Block element to represent list items. Should show its hover effect, and ripple on click. Highlight text based on query. Integrator listens to the ‘click’ event to know whether the selection is changed or not. Note: It must not be focusable.
renderGroupItemHTMLTemplateundefinedProvides any Block elements to represent group items. name property should be set to input name. Should show hover & ripple effects only if it’s collapsible. Integrator listens on ‘click’ event to toggle collapsed status.
valueEquatorFunction(v1, v2) => v1 === v2Set this to configure custom logic to detect whether value is changed or not.
headingString""Set it if you would like to show a heading on the bottom-sheet dialog. By default no heading.
showClosebooleanfalseShows an icon-button with a close icon, in the top-right corner on the bottom-sheet dailog.
selectedTrailingIconstringundefinedName of trailing Icon which availble in selected item.
searchPlaceholderstring""Placeholder for fit dialog's search input
helperTextProviderfn()Helper text provider. parameters: selected item. If this is provided show helper text using this function otherwise get from the helper property.
queryFilterfunction[]A function to customize search. function has two parameters. 1. item, 2. query. Note: returns always boolean
messagesMessagesMessagesMessages of for No Records found, No Matching found, and loading state. It's showing in the dialog. Provide only the message key and value that you want to update. Select will handle it and update the message object.
errorInTooltipbooleanfalseShow error meesage in error trailling icon hover tooltip.
allowNewValuebooleanfalseWhether new value is allowed or not. Can be used only when select is searchable
newValueProviderfunction(query) => queryValue provider function. Used when allowNewValue is available, and query does not match with any options. Default it returns searched query. Note: Return value could be any except function. Including Promise.
hintInTooltipbooleanfalseAllow to show hint text in tooltip and tip trigger on info(grey) icon.
errorInTooltipbooleanfalseAllow to show error text in tooltip. It trigger on error(red) icon.
warningInTooltipbooleanfalseAllow to show warning text in tooltip. It trigger on warning(orange) icon.
hintTooltipActionsAction[]undefinedAllow to add tip action while hint text in tip. on action click event named action dispatch.
errorTooltipActionsAction[]undefinedAllow to add tip action while error text in tip. on action click event named action dispatch.
warningTooltipActionsAction[]undefinedAllow to add tip action while warning text in tip. on action click event named action dispatch.
tipPlacementstring""Tooltip placement for more see tippyJs doc.

Action

{
  name: string,
  lable: string,
  danger: boolean
}

Group

Object

KeyTypeDescription
namestringName of the group.
titlestringTitile of the group.
collapsiblebooleanWhether group is collapsible or not.
collapsedbooleanWhether group is collapsed or not.
iconstringname of Material icon. It's optional property.

Example

{
  name: "BANKS",
  titile: "Banks",
  collapsible: true,
  collapsed: false
}

ValueProvider and ValueExpression

  • Provides a value based on the input received from either the valueProvider function or the valueExpression.
  • If neither of these inputs are provided, the original item will be passed as the default value.
  • If only one of these inputs is provided, the value will be computed based on that input.
  • If both inputs are provided, the value will be computed from the valueExpression, and the valueProvider function will be ignored.

Messages

Object

keyTypeDefaultDescription
noRecordsstringNo RecordsShow meesage on dialog when no records found.
noMatchingstringNo matching records found!Show when query does not match with any item.
loadingstringLoading...Show when items is undefined.

Utils Functions

NameArgumentsRetuensDescription
queryFilterGeneratorkeys (string[])FunctionQuery function Generator

Events

Event NameTargetDetailDescription
selecteddw-list-itemnoneFired when the user changed selection. It’s NOT dispatched when user selects the same value as the current. DEPRECATED! use change instead.
changedw-list-itemnoneFired when the user changed selection. It’s NOT dispatched when user selects the same value as the current.
invaliddw-selectvalidityFired when checkValidity() call and value is does not pass validation, On blur, as checkValidity() is called internally.
validdw-selectvalidityFired when checkValidity() call and value pass validation, On blur, as checkValidity() is called internally.
clear-selectiondw-selectIt is fired when the user explicitly clears the selection by removing all input text.

Methods

NameDescription
checkValidity() => booleanReturns true if the textfield passes validity checks and fires an valid. Returns false and fires an invalid event on the textfield otherwise.
reportValidity() => booleanRuns checkValidity() method, and if it returns false, then it reports to the user that the input is invalid.
validate() => booleanCall this to validate input. Returns false if value is invalid.

CSS Custom Properties

NameDefaultDescription
--dw-select-item-selected-bg-color#6200eeBackground color of the selected item
--dw-select-shimmer-gradientlinear-gradient(to right, #f1efef, #f9f8f8, #e7e5e5)Shimmer linear gradient when items is being loaded.
6.1.32

15 days ago

6.1.31

16 days ago

6.1.30

21 days ago

6.1.29

1 month ago

6.1.28

1 month ago

6.1.27

1 month ago

6.1.26

1 month ago

6.1.25

1 month ago

6.1.24

2 months ago

6.1.23

2 months ago

6.1.22

2 months ago

6.1.21

2 months ago

6.1.19

2 months ago

6.1.20

2 months ago

6.1.17

2 months ago

6.1.16

2 months ago

6.1.15

2 months ago

6.1.14

2 months ago

6.1.18

2 months ago

6.1.13

2 months ago

6.1.12

2 months ago

6.1.11

2 months ago

6.1.9

2 months ago

6.1.10

2 months ago

6.1.8

2 months ago

6.1.6

2 months ago

6.1.5

2 months ago

6.1.7

2 months ago

6.1.4

2 months ago

6.1.3

2 months ago

6.1.2

3 months ago

6.1.0

3 months ago

6.1.1

3 months ago

6.0.10

4 months ago

6.0.9

5 months ago

6.0.8

5 months ago

6.0.9-formating.1

5 months ago

6.0.7

5 months ago

6.0.6

5 months ago

6.0.5

5 months ago

6.0.4

5 months ago

6.0.3

5 months ago

6.0.2

5 months ago

6.0.1

6 months ago

5.32.5

11 months ago

6.0.0

6 months ago

5.33.1

10 months ago

5.33.2

10 months ago

5.33.0

11 months ago

5.34.6

8 months ago

5.34.7

7 months ago

5.34.4

10 months ago

5.34.5

9 months ago

5.34.2

10 months ago

5.34.3

10 months ago

5.34.0

10 months ago

5.34.1

10 months ago

5.35.3

7 months ago

5.35.4

6 months ago

5.35.1

7 months ago

5.35.2

7 months ago

5.35.0

7 months ago

5.33.1-vkb-issue.1

10 months ago

5.30.0

1 year ago

5.31.4

1 year ago

5.31.3

1 year ago

5.31.2

1 year ago

5.31.1

1 year ago

5.31.0

1 year ago

5.20.0

1 year ago

5.32.4

12 months ago

5.32.2

12 months ago

5.32.3

12 months ago

5.32.0

1 year ago

5.32.1

12 months ago

5.21.1

1 year ago

5.21.0

1 year ago

5.22.0

1 year ago

5.27.0

1 year ago

5.15.0

1 year ago

5.16.0

1 year ago

5.28.1

1 year ago

5.28.0

1 year ago

5.17.2

1 year ago

5.17.1

1 year ago

5.17.0

1 year ago

5.29.0

1 year ago

5.18.0

1 year ago

5.19.0

1 year ago

5.23.7

1 year ago

5.23.6

1 year ago

5.23.5

1 year ago

5.23.4

1 year ago

5.23.3

1 year ago

5.23.2

1 year ago

5.23.1

1 year ago

5.23.0

1 year ago

5.24.0

1 year ago

5.25.0

1 year ago

5.26.2

1 year ago

5.26.1

1 year ago

5.26.0

1 year ago

5.8.0

1 year ago

5.9.0

1 year ago

5.10.0

1 year ago

5.11.0

1 year ago

5.12.0

1 year ago

5.5.4

1 year ago

5.13.0

1 year ago

5.6.0

1 year ago

5.14.0

1 year ago

5.7.0

1 year ago

4.9.0

2 years ago

4.0.0

2 years ago

5.0.1

1 year ago

5.0.0

2 years ago

4.8.1

2 years ago

4.8.0

2 years ago

4.8.2

2 years ago

4.7.0

2 years ago

5.1.0

1 year ago

4.7.2

2 years ago

4.7.1

2 years ago

4.6.0

2 years ago

5.2.0

1 year ago

4.5.0

2 years ago

5.3.0

1 year ago

4.0.0-v2-init.1

2 years ago

4.0.0-v2-init.4

2 years ago

4.0.0-v2-init.5

2 years ago

4.0.0-v2-init.2

2 years ago

4.0.0-v2-init.3

2 years ago

4.0.0-v2-init.6

2 years ago

4.4.0

2 years ago

4.10.1

2 years ago

4.10.0

2 years ago

5.4.0

1 year ago

3.5.0

2 years ago

4.3.0

2 years ago

5.5.3

1 year ago

5.5.2

1 year ago

5.5.1

1 year ago

5.5.0

1 year ago

4.2.0

2 years ago

4.1.0

2 years ago

4.11.0

2 years ago

4.11.1

2 years ago

3.4.0

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.3.2

2 years ago

3.2.2

2 years ago

3.2.1

2 years ago

3.2.3

2 years ago

3.2.0

3 years ago

3.1.6

3 years ago

3.1.5

3 years ago

3.1.4

3 years ago

3.1.3

3 years ago

3.1.2

3 years ago

3.0.12

3 years ago

3.0.10

3 years ago

3.0.11

3 years ago

3.1.1

3 years ago

3.1.0

3 years ago

3.0.9

3 years ago

3.0.8

3 years ago

3.0.7

3 years ago

3.0.6

3 years ago

3.0.5

3 years ago

3.0.4-fix-jerk.1

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.1.0

3 years ago

1.11.0-t1.4

3 years ago

1.11.0-t1.3

3 years ago

1.11.0-t1.2

3 years ago

1.11.0-t1.1

3 years ago

1.10.0

3 years ago

1.9.1

3 years ago

1.8.1-fix-typo.1

3 years ago

1.9.0

3 years ago

1.8.3

4 years ago

1.8.2

4 years ago

1.8.1

4 years ago

1.8.0

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.6.0

4 years ago

1.5.0

4 years ago

1.4.0

4 years ago

1.3.0

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.7

5 years ago