From de96f13f76a313b66d31c56127d9db299d96f202 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Wed, 11 Aug 2021 10:43:59 -0700
Subject: [PATCH] Added options extension. Improved docs.

---
 ignite-html-select.js | 42 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/ignite-html-select.js b/ignite-html-select.js
index 8272637..b9db504 100644
--- a/ignite-html-select.js
+++ b/ignite-html-select.js
@@ -6,7 +6,7 @@ import { IgniteTemplate } from "../ignite-html/ignite-template.js";
  * @param {Number} to Ending year.
  * @param {String} placeholder The placeholder option, it's value will be 0, if set this text will be shown.
  * @param {Boolean} descending Whether or not the to year is first and the from year is last.
- * @returns This ignite template.
+ * @returns {IgniteTemplate} This ignite template.
  * 
  * @example
  * .years(1950, 2021, true) //Generates a select descending, 2021, 2020, 2019.. ect.
@@ -36,7 +36,7 @@ IgniteTemplate.prototype.years = function (from, to, placeholder = null, descend
  * Generates a series of months.
  * @param {String} placeholder The placeholder option, it's value will be 0, if set this text will be shown.
  * @param {Boolean} shorthand If true the option text will be the shorthand version of the month.
- * @returns This ignite template.
+ * @returns {IgniteTemplate} This ignite template.
  */
 IgniteTemplate.prototype.months = function (placeholder = null, shorthand = true) {
     //Generate html and populate the template with it.
@@ -87,6 +87,7 @@ IgniteTemplate.prototype.months = function (placeholder = null, shorthand = true
  * @param {Number} to The ending day.
  * @param {String} placeholder The placeholder option if set, it's value will be 0, this will be the text displayed.
  * @param {Boolean} descending Whether or not the to day is first and the from year is last.
+ * @returns {IgniteTemplate} This ignite template.
  */
 IgniteTemplate.prototype.days = function (from = 1, to = 31, placeholder = null, descending = false) {
     //Generate html and populate the template with it.
@@ -111,10 +112,11 @@ IgniteTemplate.prototype.days = function (from = 1, to = 31, placeholder = null,
 
 /**
  * Generates a series of numbers.
- * @param {*} from The starting number.
- * @param {*} to The ending number.
- * @param {*} placeholder The placeholder option if set, it's value will be -1, this will be the text displayed.
- * @param {*} descending Whether or not the from number if first and the to number is last.
+ * @param {Number} from The starting number.
+ * @param {Number} to The ending number.
+ * @param {String} placeholder The placeholder option if set, it's value will be -1, this will be the text displayed.
+ * @param {Boolean} descending Whether or not the from number if first and the to number is last.
+ * @returns {IgniteTemplate} This ignite template.
  */
 IgniteTemplate.prototype.numbers = function (from = 0, to = 100, placeholder = null, descending = false) {
     //Generate html and populate the template with it.
@@ -134,5 +136,33 @@ IgniteTemplate.prototype.numbers = function (from = 0, to = 100, placeholder = n
         }
     }
 
+    return this.innerHTML(html);
+}
+
+/**
+ * Generates a series of options based on key value pairs.
+ * @param {Array|Object} options An array of strings or list of key value pairs to create options from.
+ * @param {*} placeholder The placeholder option, it's value will be 0, if set this text will be shown.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.options = function (options, placeholder = null) {
+    //Generate html and populate the template with it.
+    var html = '';
+
+    if (placeholder) {
+        html += `<option value='-1'>${placeholder}</option>`;
+    }
+
+    if (Array.isArray(options)) {
+        for (var i = 0; i < options.length; i++) {
+            html += `<option value='${options[i]}'>${options[i]}</option>`;
+        }
+    } else {
+        var keys = Object.keys(options);
+        for (var i = 0; i < keys.length; i++) {
+            html += `<option value='${keys[i]}'>${options[keys[i]]}</option>`;
+        }
+    }
+
     return this.innerHTML(html);
 }
\ No newline at end of file