feat: refactor maxHeight to max_options

Author: MHA

README.md

@@ -2,7 +2,14 @@
 
 [![hacs_badge](https://img.shields.io/badge/HACS-Custom-orange.svg?style=for-the-badge)](https://github.com/custom-components/hacs)
 
-Display an input_select entity as a list
+Display the options of an input_select entity as a clickable list card.   
+In other words: the content of the dropdown menu is displayed as a card.  
+
+Some use cases:
+* Select with (too) many options
+* Options with long titles
+* Have all options directly shown 
+* You dont't want the extra click to open the dropdown menu  
 
 ## Usage
 
@@ -25,14 +32,14 @@ entity: input_select.scenes
 
 ## Options
 
-| Name              | Type    | Requirement  | Description                                 | Default             |
-| ----------------- | ------- | ------------ | ------------------------------------------- | ------------------- |
-| type              | string  | **Required** | `custom:select-list-card`                   |
-| entity            | string  | **Required** | Home Assistant input_select ID.             | `none`              |
-| name              | string  | **Optional** | Card name                                   | ``                  |
-| truncate          | boolean | **Optional** | Truncate option text                        | `true`              |
-| scrollInToView    | boolean | **Optional** | Scroll active item in to view               | `true`              |
-| maxHeight         | string  | **Optional** | Max height of the list                      | `350`               |
+| Name               | Type    | Requirement  | Description                                 | Default             |
+| ------------------ | ------- | ------------ | ------------------------------------------- | ------------------- |
+| type               | string  | **Required** | `custom:select-list-card`                   |                     |
+| entity             | string  | **Required** | Entity id of an input_select                |                     |
+| name               | string  | **Optional** | Card name                                   | ``                  |
+| truncate           | boolean | **Optional** | Truncate option text                        | `true`              |
+| scroll_to_selected | boolean | **Optional** | Scroll to selected option                   | `true`              |
+| max_options        | number  | **Optional** | Max options before scroll bar shows         | `5`                 |
 
 
 ## Installation

dist/select-list-card.js

@@ -1,6 +1,6 @@
 {
   "name": "select-list-card",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Lovelace select-list-card",
   "keywords": [
     "home-assistant",

package.json

@@ -1 +1 @@
-export const CARD_VERSION = '0.2.0';
+export const CARD_VERSION = '0.2.1';

src/const.ts

@@ -52,19 +52,19 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
     return true;
   }
 
-  get _scrollInToView(): boolean {
+  get _scroll_to_selected(): boolean {
     if (this._config) {
-      return this._config.scrollInToView || true;
+      return this._config.scroll_to_selected || true;
     }
 
     return true;
   }
 
-  get _maxHeight(): string {
+  get _max_options(): number {
     if (this._config) {
-      return this._config.maxHeight || '350';
+      return this._config.max_options || 5;
     }
-    return '350';
+    return 5;
   }
 
   protected render(): TemplateResult | void {
@@ -103,9 +103,9 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
           </div>
           <div class="row">
             <paper-input
-              label="Max height (0 = no max)"
-              .value=${this._maxHeight}
-              .configValue=${'maxHeight'}
+              label="Max options (0 = show all)"
+              .value=${this._max_options}
+              .configValue=${'max_options'}
               type="number"
               @value-changed=${this._valueChanged}
             ></paper-input>
@@ -121,11 +121,11 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
           </div>
           <div class="row">
             <ha-switch
-              aria-label=${`Toggle scroll in to view ${this._truncate ? 'off' : 'on'}`}
-              .checked=${this._scrollInToView}
-              .configValue=${'scrollInToView'}
+              aria-label=${`Toggle scroll to selected ${this._truncate ? 'off' : 'on'}`}
+              .checked=${this._scroll_to_selected}
+              .configValue=${'scroll_to_selected'}
               @change=${this._valueChanged}
-              >Scroll selected in to view?</ha-switch
+              >Scroll to selected?</ha-switch
             >
           </div>
         </div>
@@ -151,16 +151,17 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
       return;
     }
     const target = ev.target;
-    if (this[`_${target.configValue}`] === target.value) {
+    const value = target.configValue === 'max_options' ? parseInt(target.value) : target.value;
+    if (this[`_${target.configValue}`] === value) {
       return;
     }
     if (target.configValue) {
-      if (target.value === '') {
+      if (value === '') {
         delete this._config[target.configValue];
       } else {
         this._config = {
           ...this._config,
-          [target.configValue]: target.checked !== undefined ? target.checked : target.value,
+          [target.configValue]: target.checked !== undefined ? target.checked : value,
         };
       }
     }
@@ -170,11 +171,10 @@ export class SelectListCardEditor extends LitElement implements LovelaceCardEdit
   static get styles(): CSSResult {
     return css`
       .row {
-        margin-bottom: 15px;
+        margin-bottom: 5px;
       }
       .values {
         padding-left: 0px;
-        background: var(--secondary-background-color);
       }
       paper-dropdown-menu {
         width: 100%;

src/editor.ts

@@ -53,7 +53,8 @@ export class SelectListCard extends LitElement {
     this.config = {
       name: '',
       truncate: true,
-      scrollInToView: true,
+      scroll_to_selected: true,
+      max_options: 5,
       ...config,
     };
   }
@@ -65,7 +66,7 @@ export class SelectListCard extends LitElement {
   protected render(): TemplateResult | void {
     const selected = this.hass.states[this.config.entity].state;
     const options = this.hass.states[this.config.entity].attributes.options;
-    const style = this.config.maxHeight !== '0' ? `max-height: ${this.config.maxHeight}px` : '';
+    const style = this.config.max_options === 0 ? '' : `max-height: ${(this.config.max_options || 5) * 48}px`;
     return html`
       <ha-card .header=${this.config.name} aria-label=${`Select list card: ${this.config.entity}`}>
         <paper-listbox
@@ -109,13 +110,12 @@ export class SelectListCard extends LitElement {
   private async _selectedOptionChanged(ev: any): Promise<any> {
     const option = ev.detail.item.innerText.trim();
     const selected = this.hass.states[this.config.entity].state;
-    if (this.config.scrollInToView) {
+    if (this.config.scroll_to_selected) {
       ev.path[0].scrollTop = ev.detail.item.offsetTop - (ev.path[0].offsetTop + 8);
     }
     if (option === selected) {
       return;
     }
-    console.log('EV', ev);
     await this.setInputSelectOption(this.hass, this.config.entity, option);
   }
 

src/select-list-card.ts

@@ -5,7 +5,7 @@ export interface SelectListCardConfig extends LovelaceCardConfig {
   name?: string;
   entity: string;
   truncate?: boolean;
-  scrollInToView?: boolean;
-  maxHeight: string;
+  scroll_to_selected?: boolean;
+  max_options?: number;
   test_gui?: boolean;
 }