base-selector

[element]

name is used to internally store the state of the selector. If not provided, the default name of "base" will be used.

label is the label shown to the left of the dropdown box. If not provided "Base" is used.

defaultValue is the initial value assigned to state. If not provided, the value of the first visible selection will be used.

selection elements are the items in the dropdown box. They should each have a unique value to assist the UI. If they have a filter attribute, that filter will apply to the page's xtable.

<!-- example -->
<base-selector label="Base" defaultValue="1">
    <selection value="1" filter="purch_1==1" label="Purchased Longboard" />
    <selection value="2" filter="purch_2==1" label="Purchased Surfboard" />
    <selection value="3" filter="purch_3==1" label="Purchased Skateboard" />
    <selection value="4" filter="purch_4==1" label="Purchased OneWheel(TM)" />
</base-selector>

<!-- multiple allowed -->
<base-selector name="brand" label="Brand">
    <selection value="1" filter="brand==1" label="Brand A" />
    <selection value="2" filter="brand==2" label="Brand B" />
    <selection value="3" filter="brand==3" label="Brand C" />
    <selection value="4" filter="brand==4" label="Brand D" />
</base-selector>

<!-- nested with conditional visibility -->
<base-selector name="product" label="Product">
    <selection showIf="base.brand=='1'" value="101" filter="product==101" label="Brand A Skateboard 1" />
    <selection showIf="base.brand=='1'" value="102" filter="product==102" label="Brand A Skateboard 2" />
    <selection showIf="base.brand=='1'" value="103" filter="product==103" label="Brand A Skateboard 3" />
    <selection showIf="base.brand=='1'" value="104" filter="product==104" label="Brand A Skateboard 4" />
    ...
</base-selector>