juicy-select

WebJar for juicy-select

License	MIT
GroupId	org.webjars.bowergithub.juicy
ArtifactId	juicy-select
Last Version	1.1.1
Release Date	Feb 3, 2018
Type	jar
Description	juicy-select WebJar for juicy-select
Project URL	http://webjars.org
Source Code Management	https://github.com/Juicy/juicy-select

Download juicy-select

Filename	Size
juicy-select-1.1.1.pom
juicy-select-1.1.1.jar	9 KB
juicy-select-1.1.1-sources.jar	22 bytes
juicy-select-1.1.1-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.juicy/juicy-select/ -->
<dependency>
    <groupId>org.webjars.bowergithub.juicy</groupId>
    <artifactId>juicy-select</artifactId>
    <version>1.1.1</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bowergithub.juicy/juicy-select/
implementation 'org.webjars.bowergithub.juicy:juicy-select:1.1.1'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bowergithub.juicy/juicy-select/
implementation ("org.webjars.bowergithub.juicy:juicy-select:1.1.1")

Apache Buildr

'org.webjars.bowergithub.juicy:juicy-select:jar:1.1.1'

Apache Ivy

<dependency org="org.webjars.bowergithub.juicy" name="juicy-select" rev="1.1.1">
  <artifact name="juicy-select" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bowergithub.juicy', module='juicy-select', version='1.1.1')
)

Scala SBT

libraryDependencies += "org.webjars.bowergithub.juicy" % "juicy-select" % "1.1.1"

Leiningen

[org.webjars.bowergithub.juicy/juicy-select "1.1.1"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.bowergithub.polymer : polymer	jar	[1.9,3)

Project Modules

There are no modules declared in this project.

<juicy-select>

Simple Polymer select element with multiple support.

This element is a workaround for Polymer binding issues.

1. IE11 does not support <template is="dom-repeat"> element inside <select>. See the Polymer issue #1735.
2. The initial value of a <select> is being lost when generating options with a dom-repeat.

<select value="{{model.SelectedValue::change}}">
    <template is="dom-repeat" items="{{model.Options}}">
        <option value="{{item.Value}}">{{item.Name}}</option>
    </template>
</select>

In this case the value="{{model.SelectedValue::change}}" binding is executed before options are rendered by the dom-repeat. The HTML <select> element can not contain a value which does not exists in it's options collection. This leads to the loss of the initial value.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install juicy-select --save

Or download as ZIP.

Usage

1. Import Web Components' polyfill (if needed):

   <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

2. Import Custom Element:

   <link rel="import" href="bower_components/juicy-select/juicy-select.html">

3. Start using it!

   Simple select

   <juicy-select
       caption-text="No favorite country"
       value="{{model.FavoriteCountry}}"
       options="{{model.Countries}}"
       text-property="Name"
       value-property="Name">
   </juicy-select>

   Multiple select

   <juicy-select
       multiple="true"
       options="{{model.Countries}}"
       selected-property="Selected"
       text-property="Name"
       value-property="Name">
   </juicy-select>

   Custom <select> node

   <juicy-select
       caption-text="No favorite country"
       value="{{model.FavoriteCountry}}"
       options="{{model.Countries}}"
       text-property="Name"
       value-property="Name">
       <select class="form-control"></select>
   </juicy-select>

Properties

Name	Type	Description
options	Array	Array of objects to generate select options
text-property	String	Name of the object property to take text for the options
value-property	String	Name of the object property to take value for the options
caption-text	String	Text of an empty option, empty option will not be created if the value is not set
value	String	Currently selected value, for single selection only (see the multiple property)
multiple	Boolean	Same as <select multiple>
selected-property	String	Name of the object property to indicate whether it's selected, for multiple selection only (see the multiple property)

Notes

• <juicy-select> keeps actual <select> element in the light DOM. If the <select> node is not present within <juicy-select>, it will be created.

• <juicy-select> is a hybrid element.

Contributing and Development

History

For detailed changelog, check Releases.

License

MIT

Juicy

Take a sip of fresh and tasty Custom Elements.

Versions

Version
1.1.1 Feb 3, 2018