basic-list-box - npm Package Compare versions

Comparing version 0.0.1 to 0.0.3

package.json

 {
   "name": "basic-list-box",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A single-selection list box that supports selection highlighting (using the system highlight color) and keyboard navigation.",
@@ -14,5 +14,8 @@ "homepage": "https://component.kitchen",
   "dependencies": {
-    "basic-element-base": "^0.0.1",
-    "basic-component-mixins": "^0.0.1"
+    "basic-element-base": "^0.0.3",
+    "basic-component-mixins": "^0.0.3"
+  },
+  "browserify": {
+    "transform": ["babelify"]
   }
-}
+}

README.md

@@ -1,6 +0,6 @@
-# basic-list-box
+<a name="ListBox"></a>
+## ListBox
+A single-selection list box that supports selection highlighting
+(using the system highlight color) and keyboard navigation
 
-A single-selection list box that supports selection highlighting (using the
-system highlight color) and keyboard navigation.
-
 The user can select an item with the mouse/touch or keyboard: Up/Down, Page
@@ -11,13 +11,11 @@ Up/Down, Home/End.
 include a content element inside a basic-list-box, and the list will navigate
-through the distributed content. Note: for the time being, if you do use basic-
-list-box inside your own component, it appears that you'll need to wire up your
-own keyboard navigation, and forward the list navigation keys to the basic-list-
-box.
+through the distributed content.
 
 This component includes basic ARIA support to provide a reasonable default
-experience, e.g., for screen readers. The list component itself will be assigned
-an appropriate ARIA role (default is "listbox"). The ID of the selected item
-will be reflected in an "aria-activedescendant" attribute applied to the list.
-To support this feature, all items in the list need unique IDs. If an item does
-not have an ID, basic-list-box will automatically assign a default ID.
+experience, e.g., for screen readers. The list component itself will be
+assigned an appropriate ARIA role (default is "listbox"). The ID of the
+selected item will be reflected in an "aria-activedescendant" attribute
+applied to the list. To support this feature, all items in the list need
+unique IDs. If an item does not have an ID, basic-list-box will automatically
+assign a default ID.
 
@@ -40,1 +38,24 @@ The keyboard interaction model generally follows that of Microsoft Windows'
 The user can also select an item by typing the beginning of an item's text.
+
+**Kind**: global class  
+**Mixes**: <code>ChildrenContent</code>, <code>ClickSelection</code>, <code>CollectiveMember</code>, <code>ContentItems</code>, <code>DirectionSelection</code>, <code>Generic</code>, <code>ItemsSelection</code>, <code>ItemsAccessible</code>, <code>Keyboard</code>, <code>KeyboardDirection</code>, <code>KeyboardPagedSelection</code>, <code>KeyboardPrefixSelection</code>, <code>SelectionHighlight</code>, <code>SelectionScroll</code>  
+<a name="value"></a>
+## value : <code>String</code>
+The text content of the selected item.
+
+Setting this value to a string will attempt to select the first list item
+whose text content match that string. Setting this to a string not matching
+any list item will result in no selection.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| value | 
+
+<a name="event_value-changed"></a>
+## "value-changed"
+Fires when the list's value property changes.
+
+**Kind**: event emitted  

src/ListBox.js

 /**
- * A single-selection list box that supports selection highlighting (using the
- * system highlight color) and keyboard navigation.
+ * @class ListBox
+ * @classdesc A single-selection list box that supports selection highlighting
+ * (using the system highlight color) and keyboard navigation
  *
@@ -10,13 +11,11 @@ * The user can select an item with the mouse/touch or keyboard: Up/Down, Page
  * include a content element inside a basic-list-box, and the list will navigate
- * through the distributed content. Note: for the time being, if you do use basic-
- * list-box inside your own component, it appears that you'll need to wire up your
- * own keyboard navigation, and forward the list navigation keys to the basic-list-
- * box.
+ * through the distributed content.
  *
  * This component includes basic ARIA support to provide a reasonable default
- * experience, e.g., for screen readers. The list component itself will be assigned
- * an appropriate ARIA role (default is "listbox"). The ID of the selected item
- * will be reflected in an "aria-activedescendant" attribute applied to the list.
- * To support this feature, all items in the list need unique IDs. If an item does
- * not have an ID, basic-list-box will automatically assign a default ID.
+ * experience, e.g., for screen readers. The list component itself will be
+ * assigned an appropriate ARIA role (default is "listbox"). The ID of the
+ * selected item will be reflected in an "aria-activedescendant" attribute
+ * applied to the list. To support this feature, all items in the list need
+ * unique IDs. If an item does not have an ID, basic-list-box will automatically
+ * assign a default ID.
  *
@@ -40,3 +39,16 @@ * The keyboard interaction model generally follows that of Microsoft Windows'
  *
- * @class ListBox
+ * @mixes ChildrenContent
+ * @mixes ClickSelection
+ * @mixes CollectiveMember
+ * @mixes ContentItems
+ * @mixes DirectionSelection
+ * @mixes Generic
+ * @mixes ItemsSelection
+ * @mixes ItemsAccessible
+ * @mixes Keyboard
+ * @mixes KeyboardDirection
+ * @mixes KeyboardPagedSelection
+ * @mixes KeyboardPrefixSelection
+ * @mixes SelectionHighlight
+ * @mixes SelectionScroll
  */
@@ -48,7 +60,7 @@
 import ClickSelection from '../../basic-component-mixins/src/ClickSelection';
-import CollectiveElement from '../../basic-component-mixins/src/CollectiveElement';
+import CollectiveMember from '../../basic-component-mixins/src/CollectiveMember';
 import ContentItems from '../../basic-component-mixins/src/ContentItems';
 import DirectionSelection from '../../basic-component-mixins/src/DirectionSelection';
 import Generic from '../../basic-component-mixins/src/Generic';
-import ItemSelection from '../../basic-component-mixins/src/ItemSelection';
+import ItemsSelection from '../../basic-component-mixins/src/ItemsSelection';
 import ItemsAccessible from '../../basic-component-mixins/src/ItemsAccessible';
@@ -66,7 +78,7 @@ import Keyboard from '../../basic-component-mixins/src/Keyboard';
     ClickSelection,
-    CollectiveElement,
+    CollectiveMember,
     ContentItems,
     DirectionSelection,
     Generic,
-    ItemSelection,
+    ItemsSelection,
     ItemsAccessible,
@@ -130,2 +142,44 @@ Keyboard,
 
+  /**
+   * The text content of the selected item.
+   *
+   * Setting this value to a string will attempt to select the first list item
+   * whose text content match that string. Setting this to a string not matching
+   * any list item will result in no selection.
+   *
+   * @property value
+   * @type String
+   */
+  get value() {
+    return this.selectedItem == null || this.selectedItem.textContent == null ?
+      '' :
+      this.selectedItem.textContent;
+  }
+  set value(text) {
+
+    let currentIndex = this.selectedIndex;
+    let newIndex = -1; // Assume we won't find the text.
+
+    // Find the item with the indicated text.
+    let items = this.items;
+    for (let i = 0, length = items.length; i < length; i++) {
+      if (items[i].textContent === text) {
+        newIndex = i;
+        break;
+      }
+    }
+
+    if (newIndex !== currentIndex) {
+      this.selectedIndex = newIndex;
+      let event = new CustomEvent('value-changed');
+      this.dispatchEvent(event);
+    }
+  }
+
+
+  /**
+   * Fires when the list's value property changes.
+   *
+   * @event value-changed
+   */
 }
@@ -132,0 +186,0 @@

No alert changes

Improved metrics

Total package byte prevSize

297134

increased by10.28%

Number of package files

6

increased by20%

Lines of code

3035

increased by7.36%

Number of lines in readme file

60

increased by53.85%

Dependency changes

• + Addedbasic-component-mixins@0.0.3(transitive)

• + Addedbasic-element-base@0.0.3(transitive)

• - Removedbasic-component-mixins@0.0.1(transitive)

• - Removedbasic-element-base@0.0.1(transitive)

• Updatedbasic-component-mixins@^0.0.3

• Updatedbasic-element-base@^0.0.3