jsuites 5.8.5 → 5.9.0

package/dist/jsuites.js

@@ -4483,6 +4483,7 @@ function Palette() {
 
 
 
+
 function Tabs(el, options) {
     var obj = {};
     obj.options = {};
@@ -4595,12 +4596,15 @@ function Tabs(el, options) {
             }
             // Remote selected
             obj.headers.children[i].classList.remove('jtabs-selected');
+            obj.headers.children[i].removeAttribute('aria-selected')
             if (obj.content.children[i]) {
                 obj.content.children[i].classList.remove('jtabs-selected');
             }
         }
 
         obj.headers.children[index].classList.add('jtabs-selected');
+        obj.headers.children[index].setAttribute('aria-selected', 'true')
+
         if (obj.content.children[index]) {
             obj.content.children[index].classList.add('jtabs-selected');
         }
@@ -4719,11 +4723,20 @@ function Tabs(el, options) {
         }
 
         if (title) {
+            let headerId = helpers.guid();
+            let contentId = helpers.guid();
             // Add content
             var div = document.createElement('div');
+            div.setAttribute('id', contentId);
+            div.setAttribute('role', 'tabpanel');
+            div.setAttribute('aria-labelledby', headerId);
 
             // Add headers
             var h = document.createElement('div');
+            h.setAttribute('id', headerId);
+            h.setAttribute('role', 'tab');
+            h.setAttribute('aria-controls', contentId);
+
             h.innerHTML = title;
             h.content = div;
 
@@ -4832,7 +4845,10 @@ function Tabs(el, options) {
         obj.headers = document.createElement('div');
         obj.content = document.createElement('div');
         obj.headers.classList.add('jtabs-headers');
+        obj.headers.setAttribute('role', 'tablist');
         obj.content.classList.add('jtabs-content');
+        obj.content.setAttribute('role', 'region');
+        obj.content.setAttribute('aria-label', 'Tab Panels');
 
         if (obj.options.palette) {
             el.classList.add('jtabs-modern');
@@ -5500,6 +5516,11 @@ function Color(el, options) {
             input.max = 255;
             input.value = 0;
 
+            input.setAttribute('aria-label', "Color value");
+            input.setAttribute('aria-valuemin', "0");
+            input.setAttribute('aria-valuemax', "255");
+            input.setAttribute('aria-valuenow', "0");
+
             inputContainer.appendChild(label);
             subContainer.appendChild(input);
 
@@ -7788,325 +7809,334 @@ function Dropdown() {
 
 /* harmony default export */ var dropdown = (Dropdown());
 ;// CONCATENATED MODULE: ./src/plugins/picker.js
-
-
-
-function Picker(el, options) {
-    // Already created, update options
-    if (el.picker) {
-        return el.picker.setOptions(options, true);
-    }
-
-    // New instance
-    var obj = { type: 'picker' };
-    obj.options = {};
-
-    var dropdownHeader = null;
-    var dropdownContent = null;
-
-    /**
-     * The element passed is a DOM element
-     */
-    var isDOM = function(o) {
-        return (o instanceof Element || o instanceof HTMLDocument);
-    }
-
-    /**
-     * Create the content options
-     */
-    var createContent = function() {
-        dropdownContent.innerHTML = '';
-
-        // Create items
-        var keys = Object.keys(obj.options.data);
-
-        // Go though all options
-        for (var i = 0; i < keys.length; i++) {
-            // Item
-            var dropdownItem = document.createElement('div');
-            dropdownItem.classList.add('jpicker-item');
-            dropdownItem.k = keys[i];
-            dropdownItem.v = obj.options.data[keys[i]];
-            // Label
-            var item = obj.getLabel(keys[i], dropdownItem);
-            if (isDOM(item)) {
-                dropdownItem.appendChild(item);
-            } else {
-                dropdownItem.innerHTML = item;
-            }
-            // Append
-            dropdownContent.appendChild(dropdownItem);
-        }
-    }
-
-    /**
-     * Set or reset the options for the picker
-     */
-    obj.setOptions = function(options, reset) {
-        // Default configuration
-        var defaults = {
-            value: 0,
-            data: null,
-            render: null,
-            onchange: null,
-            onmouseover: null,
-            onselect: null,
-            onopen: null,
-            onclose: null,
-            onload: null,
-            width: null,
-            header: true,
-            right: false,
-            bottom: false,
-            content: false,
-            columns: null,
-            grid: null,
-            height: null,
-        }
-
-        // Legacy purpose only
-        if (options && options.options) {
-            options.data = options.options;
-        }
-
-        // Loop through the initial configuration
-        for (var property in defaults) {
-            if (options && options.hasOwnProperty(property)) {
-                obj.options[property] = options[property];
-            } else {
-                if (typeof(obj.options[property]) == 'undefined' || reset === true) {
-                    obj.options[property] = defaults[property];
-                }
-            }
-        }
-
-        // Start using the options
-        if (obj.options.header === false) {
-            dropdownHeader.style.display = 'none';
-        } else {
-            dropdownHeader.style.display = '';
-        }
-
-        // Width
-        if (obj.options.width) {
-            dropdownHeader.style.width = parseInt(obj.options.width) + 'px';
-        } else {
-            dropdownHeader.style.width = '';
-        }
-
-        // Height
-        if (obj.options.height) {
-            dropdownContent.style.maxHeight = obj.options.height + 'px';
-            dropdownContent.style.overflow = 'scroll';
-        } else {
-            dropdownContent.style.overflow = '';
-        }
-
-        if (obj.options.columns > 0) {
-            if (! obj.options.grid) {
-                dropdownContent.classList.add('jpicker-columns');
-                dropdownContent.style.width = obj.options.width ? obj.options.width : 36 * obj.options.columns + 'px';
-            } else {
-                dropdownContent.classList.add('jpicker-grid');
-                dropdownContent.style.gridTemplateColumns = 'repeat(' + obj.options.grid + ', 1fr)';
-            }
-        }
-
-        if (isNaN(parseInt(obj.options.value))) {
-            obj.options.value = 0;
-        }
-
-        // Create list from data
-        createContent();
-
-        // Set value
-        obj.setValue(obj.options.value);
-
-        // Set options all returns the own instance
-        return obj;
-    }
-
-    obj.getValue = function() {
-        return obj.options.value;
-    }
-
-    obj.setValue = function(k, e) {
-        // Set label
-        obj.setLabel(k);
-
-        // Update value
-        obj.options.value = String(k);
-
-        // Lemonade JS
-        if (el.value != obj.options.value) {
-            el.value = obj.options.value;
-            if (typeof(el.oninput) == 'function') {
-                el.oninput({
-                    type: 'input',
-                    target: el,
-                    value: el.value
-                });
-            }
-        }
-
-        if (dropdownContent.children[k] && dropdownContent.children[k].getAttribute('type') !== 'generic') {
-            obj.close();
-        }
-
-        // Call method
-        if (e) {
-            if (typeof (obj.options.onchange) == 'function') {
-                var v = obj.options.data[k];
-
-                obj.options.onchange(el, obj, v, v, k, e);
-            }
-        }
-    }
-
-    obj.getLabel = function(v, item) {
-        var label = obj.options.data[v] || null;
-        if (typeof(obj.options.render) == 'function') {
-            label = obj.options.render(label, item);
-        }
-        return label;
-    }
-
-    obj.setLabel = function(v) {
-        var item;
-
-        if (obj.options.content) {
-            item = '<i class="material-icons">' + obj.options.content + '</i>';
-        } else {
-            item = obj.getLabel(v, null);
-        }
-        // Label
-        if (isDOM(item)) {
-            dropdownHeader.innerHTML = '';
-            dropdownHeader.appendChild(item);
-        } else {
-            dropdownHeader.innerHTML = item;
-        }
-    }
-
-    obj.open = function() {
-        if (! el.classList.contains('jpicker-focus')) {
-            // Start tracking the element
-            tracking(obj, true);
-
-            // Open picker
-            el.classList.add('jpicker-focus');
-            el.focus();
-
-            var top = 0;
-            var left = 0;
-
-            dropdownContent.style.marginLeft = '';
-
-            var rectHeader = dropdownHeader.getBoundingClientRect();
-            var rectContent = dropdownContent.getBoundingClientRect();
-
-            if (window.innerHeight < rectHeader.bottom + rectContent.height || obj.options.bottom) {
-                top = -1 * (rectContent.height + 4);
-            } else {
-                top = rectHeader.height + 4;
-            }
-
-            if (obj.options.right === true) {
-                left = -1 * rectContent.width + rectHeader.width;
-            }
-
-            if (rectContent.left + left < 0) {
-                left = left + rectContent.left + 10;
-            }
-            if (rectContent.left + rectContent.width > window.innerWidth) {
-                left = -1 * (10 + rectContent.left + rectContent.width - window.innerWidth);
-            }
-
-            dropdownContent.style.marginTop = parseInt(top) + 'px';
-            dropdownContent.style.marginLeft = parseInt(left) + 'px';
-
-            //dropdownContent.style.marginTop
-            if (typeof obj.options.onopen == 'function') {
-                obj.options.onopen(el, obj);
-            }
-        }
-    }
-
-    obj.close = function() {
-        if (el.classList.contains('jpicker-focus')) {
-            el.classList.remove('jpicker-focus');
-
-            // Start tracking the element
-            tracking(obj, false);
-
-            if (typeof obj.options.onclose == 'function') {
-                obj.options.onclose(el, obj);
-            }
-        }
-    }
-
-    /**
-     * Create floating picker
-     */
-    var init = function() {
-        // Class
-        el.classList.add('jpicker');
-        el.setAttribute('tabindex', '0');
-        el.onmousedown = function(e) {
-            if (! el.classList.contains('jpicker-focus')) {
-                obj.open();
-            }
-        }
-
-        // Dropdown Header
-        dropdownHeader = document.createElement('div');
-        dropdownHeader.classList.add('jpicker-header');
-
-        // Dropdown content
-        dropdownContent = document.createElement('div');
-        dropdownContent.classList.add('jpicker-content');
-        dropdownContent.onclick = function(e) {
-            var item = helpers.findElement(e.target, 'jpicker-item');
-            if (item) {
-                if (item.parentNode === dropdownContent) {
-                    // Update label
-                    obj.setValue(item.k, e);
-                }
-            }
-        }
-        // Append content and header
-        el.appendChild(dropdownHeader);
-        el.appendChild(dropdownContent);
-
-        // Default value
-        el.value = options.value || 0;
-
-        // Set options
-        obj.setOptions(options);
-
-        if (typeof(obj.options.onload) == 'function') {
-            obj.options.onload(el, obj);
-        }
-
-        // Change
-        el.change = obj.setValue;
-
-        // Global generic value handler
-        el.val = function(val) {
-            if (val === undefined) {
-                return obj.getValue();
-            } else {
-                obj.setValue(val);
-            }
-        }
-
-        // Reference
-        el.picker = obj;
-    }
-
-    init();
-
-    return obj;
+
+
+
+function Picker(el, options) {
+    // Already created, update options
+    if (el.picker) {
+        return el.picker.setOptions(options, true);
+    }
+
+    // New instance
+    var obj = { type: 'picker' };
+    obj.options = {};
+
+    var dropdownHeader = null;
+    var dropdownContent = null;
+
+    /**
+     * The element passed is a DOM element
+     */
+    var isDOM = function(o) {
+        return (o instanceof Element || o instanceof HTMLDocument);
+    }
+
+    /**
+     * Create the content options
+     */
+    var createContent = function() {
+        dropdownContent.innerHTML = '';
+
+        // Create items
+        var keys = Object.keys(obj.options.data);
+
+        // Go though all options
+        for (var i = 0; i < keys.length; i++) {
+            // Item
+            var dropdownItem = document.createElement('div');
+            dropdownItem.classList.add('jpicker-item');
+            dropdownItem.setAttribute('role', 'option');
+            dropdownItem.k = keys[i];
+            dropdownItem.v = obj.options.data[keys[i]];
+            // Label
+            var item = obj.getLabel(keys[i], dropdownItem);
+            if (isDOM(item)) {
+                dropdownItem.appendChild(item);
+            } else {
+                dropdownItem.innerHTML = item;
+            }
+            // Append
+            dropdownContent.appendChild(dropdownItem);
+        }
+    }
+
+    /**
+     * Set or reset the options for the picker
+     */
+    obj.setOptions = function(options, reset) {
+        // Default configuration
+        var defaults = {
+            value: 0,
+            data: null,
+            render: null,
+            onchange: null,
+            onmouseover: null,
+            onselect: null,
+            onopen: null,
+            onclose: null,
+            onload: null,
+            width: null,
+            header: true,
+            right: false,
+            bottom: false,
+            content: false,
+            columns: null,
+            grid: null,
+            height: null,
+        }
+
+        // Legacy purpose only
+        if (options && options.options) {
+            options.data = options.options;
+        }
+
+        // Loop through the initial configuration
+        for (var property in defaults) {
+            if (options && options.hasOwnProperty(property)) {
+                obj.options[property] = options[property];
+            } else {
+                if (typeof(obj.options[property]) == 'undefined' || reset === true) {
+                    obj.options[property] = defaults[property];
+                }
+            }
+        }
+
+        // Start using the options
+        if (obj.options.header === false) {
+            dropdownHeader.style.display = 'none';
+        } else {
+            dropdownHeader.style.display = '';
+        }
+
+        // Width
+        if (obj.options.width) {
+            dropdownHeader.style.width = parseInt(obj.options.width) + 'px';
+        } else {
+            dropdownHeader.style.width = '';
+        }
+
+        // Height
+        if (obj.options.height) {
+            dropdownContent.style.maxHeight = obj.options.height + 'px';
+            dropdownContent.style.overflow = 'scroll';
+        } else {
+            dropdownContent.style.overflow = '';
+        }
+
+        if (obj.options.columns > 0) {
+            if (! obj.options.grid) {
+                dropdownContent.classList.add('jpicker-columns');
+                dropdownContent.style.width = obj.options.width ? obj.options.width : 36 * obj.options.columns + 'px';
+            } else {
+                dropdownContent.classList.add('jpicker-grid');
+                dropdownContent.style.gridTemplateColumns = 'repeat(' + obj.options.grid + ', 1fr)';
+            }
+        }
+
+        if (isNaN(parseInt(obj.options.value))) {
+            obj.options.value = 0;
+        }
+
+        // Create list from data
+        createContent();
+
+        // Set value
+        obj.setValue(obj.options.value);
+
+        // Set options all returns the own instance
+        return obj;
+    }
+
+    obj.getValue = function() {
+        return obj.options.value;
+    }
+
+    obj.setValue = function(k, e) {
+        // Set label
+        obj.setLabel(k);
+
+        // Update value
+        obj.options.value = String(k);
+
+        // Lemonade JS
+        if (el.value != obj.options.value) {
+            el.value = obj.options.value;
+            if (typeof(el.oninput) == 'function') {
+                el.oninput({
+                    type: 'input',
+                    target: el,
+                    value: el.value
+                });
+            }
+        }
+
+        if (dropdownContent.children[k] && dropdownContent.children[k].getAttribute('type') !== 'generic') {
+            obj.close();
+        }
+
+        // Call method
+        if (e) {
+            if (typeof (obj.options.onchange) == 'function') {
+                var v = obj.options.data[k];
+
+                obj.options.onchange(el, obj, v, v, k, e);
+            }
+        }
+    }
+
+    obj.getLabel = function(v, item) {
+        var label = obj.options.data[v] || null;
+        if (typeof(obj.options.render) == 'function') {
+            label = obj.options.render(label, item);
+        }
+        return label;
+    }
+
+    obj.setLabel = function(v) {
+        var item;
+
+        if (obj.options.content) {
+            item = '<i class="material-icons">' + obj.options.content + '</i>';
+        } else {
+            item = obj.getLabel(v, null);
+        }
+        // Label
+        if (isDOM(item)) {
+            dropdownHeader.innerHTML = '';
+            dropdownHeader.appendChild(item);
+        } else {
+            dropdownHeader.innerHTML = item;
+        }
+    }
+
+    obj.open = function() {
+        if (! el.classList.contains('jpicker-focus')) {
+            // Start tracking the element
+            tracking(obj, true);
+
+            // Open picker
+            el.classList.add('jpicker-focus');
+            el.focus();
+
+            var top = 0;
+            var left = 0;
+
+            dropdownContent.style.marginLeft = '';
+
+            var rectHeader = dropdownHeader.getBoundingClientRect();
+            var rectContent = dropdownContent.getBoundingClientRect();
+
+            if (window.innerHeight < rectHeader.bottom + rectContent.height || obj.options.bottom) {
+                top = -1 * (rectContent.height + 4);
+            } else {
+                top = rectHeader.height + 4;
+            }
+
+            if (obj.options.right === true) {
+                left = -1 * rectContent.width + rectHeader.width;
+            }
+
+            if (rectContent.left + left < 0) {
+                left = left + rectContent.left + 10;
+            }
+            if (rectContent.left + rectContent.width > window.innerWidth) {
+                left = -1 * (10 + rectContent.left + rectContent.width - window.innerWidth);
+            }
+
+            dropdownContent.style.marginTop = parseInt(top) + 'px';
+            dropdownContent.style.marginLeft = parseInt(left) + 'px';
+
+            //dropdownContent.style.marginTop
+            if (typeof obj.options.onopen == 'function') {
+                obj.options.onopen(el, obj);
+            }
+        }
+    }
+
+    obj.close = function() {
+        if (el.classList.contains('jpicker-focus')) {
+            el.classList.remove('jpicker-focus');
+
+            // Start tracking the element
+            tracking(obj, false);
+
+            if (typeof obj.options.onclose == 'function') {
+                obj.options.onclose(el, obj);
+            }
+        }
+    }
+
+    /**
+     * Create floating picker
+     */
+    var init = function() {
+        let id = helpers.guid();
+
+        // Class
+        el.classList.add('jpicker');
+        el.setAttribute('role', 'combobox');
+        el.setAttribute('aria-haspopup', 'listbox');
+        el.setAttribute('aria-expanded', 'false');
+        el.setAttribute('aria-controls', id);
+        el.setAttribute('tabindex', '0');
+        el.onmousedown = function(e) {
+            if (! el.classList.contains('jpicker-focus')) {
+                obj.open();
+            }
+        }
+
+        // Dropdown Header
+        dropdownHeader = document.createElement('div');
+        dropdownHeader.classList.add('jpicker-header');
+
+        // Dropdown content
+        dropdownContent = document.createElement('div');
+        dropdownContent.setAttribute('id', id);
+        dropdownContent.setAttribute('role', 'listbox');
+        dropdownContent.classList.add('jpicker-content');
+        dropdownContent.onclick = function(e) {
+            var item = helpers.findElement(e.target, 'jpicker-item');
+            if (item) {
+                if (item.parentNode === dropdownContent) {
+                    // Update label
+                    obj.setValue(item.k, e);
+                }
+            }
+        }
+        // Append content and header
+        el.appendChild(dropdownHeader);
+        el.appendChild(dropdownContent);
+
+        // Default value
+        el.value = options.value || 0;
+
+        // Set options
+        obj.setOptions(options);
+
+        if (typeof(obj.options.onload) == 'function') {
+            obj.options.onload(el, obj);
+        }
+
+        // Change
+        el.change = obj.setValue;
+
+        // Global generic value handler
+        el.val = function(val) {
+            if (val === undefined) {
+                return obj.getValue();
+            } else {
+                obj.setValue(val);
+            }
+        }
+
+        // Reference
+        el.picker = obj;
+    }
+
+    init();
+
+    return obj;
 }
 ;// CONCATENATED MODULE: ./src/plugins/toolbar.js
 
@@ -8225,6 +8255,7 @@ function Toolbar(el, options) {
 
             if (items[i].tooltip) {
                 toolbarItem.setAttribute('title', items[i].tooltip);
+                toolbarItem.setAttribute('aria-label', items[i].tooltip);
             }
 
             // Id
@@ -8264,6 +8295,7 @@ function Toolbar(el, options) {
                     }
                 }
                 toolbarIcon.innerHTML = items[i].content ? items[i].content : '';
+                toolbarItem.setAttribute('role', 'button');
                 toolbarItem.appendChild(toolbarIcon);
 
                 // Badge options
@@ -10185,9 +10217,16 @@ function Validations() {
     }
 
     component.textLength = function(data, options) {
-        data = data.toString();
+        let textLength;
+        if (typeof data === 'string') {
+            textLength = data.length;
+        } else if (typeof data !== 'undefined' && data !== null && typeof data.toString === 'function') {
+            textLength = data.toString().length;
+        } else {
+            textLength = 0;
+        }
 
-        return component.number(data.length, options);
+        return component.number(textLength, options);
     }
 
     return component;

package/package.json

@@ -26,7 +26,7 @@
     },
     "main": "dist/jsuites.js",
     "types": "dist/jsuites.d.ts",
-    "version": "5.8.5",
+    "version": "5.9.0",
     "bugs": "https://github.com/jsuites/jsuites/issues",
     "homepage": "https://github.com/jsuites/jsuites",
     "docs": "https://jsuites.net",