diff --git a/dist/radioBox.esm.js b/dist/radioBox.esm.js index 308e294..81ffce5 100644 --- a/dist/radioBox.esm.js +++ b/dist/radioBox.esm.js @@ -331,7 +331,7 @@ const reportInfo = (vars, showType = false) => { class RadioBox { static instances = []; - static version = '2.1.1'; + static version = '2.1.2'; static firstLoad = true; element = null; options = defaults; @@ -409,7 +409,7 @@ class RadioBox { let { title, remainLabel, randomID, labelToRestore } = Utils.handleRadioboxTitle(ele, labelSibling); bindLabel = remainLabel ? true : bindLabel; // Handle radiobox checked status - if (this.options.checked || this.options.checked === 0 || ele.checked) { + if (this.options.checked !== null || ele.checked) { // Initialize radiobox checked status based on options this.updateRadioboxCheckedStatus(ele, index); } diff --git a/dist/radioBox.min.js b/dist/radioBox.min.js index ddc099b..6674929 100644 --- a/dist/radioBox.min.js +++ b/dist/radioBox.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).radioBoxjs={})}(this,(function(e){"use strict";const t={checked:null,bindLabel:!0,styles:{},onLoad:void 0,onChange:void 0};function n(e){throw new Error(e)}function o(e,t,n){if("string"!=typeof e)return e;let o=document;return null===t&&n?o=n:t&&t instanceof Node&&"querySelector"in t?o=t:n&&n instanceof Node&&"querySelector"in n&&(o=n),"all"===t?o.querySelectorAll(e):o.querySelector(e)}function i(e,t={},n=""){let o=document.createElement(e);for(let e in t)Object.prototype.hasOwnProperty.call(t,e)&&("textContent"===e||"innerText"===e?o.textContent=t[e]:o.setAttribute(e,t[e]));return n&&(o.textContent=n),o}let l="utils-style";const a={from:".utils",to:".utils-"};function s(e){return"object"==typeof e&&null!==e&&!r(e)}function r(e){return Array.isArray(e)}function c(e){return"number"!=typeof e&&("string"==typeof e&&0===e.length||(!(!r(e)||0!==e.length)||(!(!s(e)||0!==Object.keys(e).length)||!e)))}function d(e,...t){if(!t.length)return e;const n=t.shift();if(n)for(const t in n)if(Object.prototype.hasOwnProperty.call(n,t)){const o=n[t],i=t;s(o)||r(o)?(e[i]&&"object"==typeof e[i]||(e[i]=r(o)?[]:{}),d(e[i],o)):e[i]=o}return d(e,...t)}function h(e){l=e}function u(e,t){a.from=e,a.to=t}function f(e,t=null){t=c(t)?"":t;let n=i("style");n.id=l+t,n.textContent="",document.head.append(n);let o=n.sheet;for(let n in e)e.hasOwnProperty(n)&&m(o,n,p(e[n]),t)}function p(e){let t="";for(let[n,o]of Object.entries(e))n=n.replace(/([A-Z])/g,(e=>`-${e[0].toLowerCase()}`)),t+=`${n}:${o};`;return t}function m(e,t,n,o=null){o=c(o)?"":o;let i=t.replace(a.from,a.to+o);e.insertRule(i+"{"+n+"}",0)}function b(e=null){const t=c(e)?"":e;let n=o("#"+l+t);n&&n.parentNode&&n.parentNode.removeChild(n)}function g(e=8){let t="";const n="abcdefghijklmnopqrstuvwxyz0123456789";for(let o=0;o\n \n \n `}static handleRadioboxTitle(e,t){let n,o=e.title||e.dataset.radioboxTitle||null,i=!1,l=null,a=!1;if(t instanceof HTMLLabelElement){const s=t.htmlFor,r=t.dataset.radioFor,d=e.dataset.radioId;i=!c(e.id)&&s===e.id,a=!c(e.id)&&r===e.id,c(d)||r!==d||(l=c(e.id)&&c(s)?"radio-"+g(6):null,a=!0),(a||i)&&(n=t.cloneNode(!0),o=o||t.textContent,t.parentNode.removeChild(t))}return{title:o,remainLabel:i,randomID:l,labelToRestore:n}}static insertRadiobox(e,t,n,l){let a=v.getTemplate(e),s=i("div");s.innerHTML=a.trim();let r=o("label",s),c=t.cloneNode(!0);return c.withID=!0,n&&(c.id=n,c.withID=!1),!0===l&&(r.htmlFor=c.id),r.parentNode&&r.parentNode.insertBefore(c,r),t.parentNode.replaceChild(s.firstElementChild||s,t),{cloneEle:c,templateNode:s,labelNode:r}}static insertRadioboxTitle(e,t,n,o){e?(n.textContent=e,!0===t&&(n.classList.add("radio-labeled"),n.addEventListener("click",(e=>{e.preventDefault(),o.click()})))):n.parentNode.removeChild(n)}static toggleCheckStatus(e,t){t?(e.checked=!0,e.setAttribute("checked","checked")):(e.checked=!1,e.removeAttribute("checked"))}static restoreElement(e){if("function"==typeof e.radioBoxChange&&e.removeEventListener("change",e.radioBoxChange),!1===e.withID&&e.removeAttribute("id"),e.radioBoxChange=void 0,e.removeAttribute("data-radiobox"),e.parentNode){e.parentNode.replaceWith(e)}let t=e.labelToRestore;t&&t.nodeType===Node.ELEMENT_NODE&&e.parentNode?.insertBefore(t,e.nextSibling)}static validRadioBoxStatus(e){return e.filter((e=>e.checked)).length<=1}}v.setStylesheetId("radiobox-style"),v.setReplaceRule(".radio-box",".radio-box-");class x{static instances=[];static version="2.1.1";static firstLoad=!0;element=null;options=t;id=0;allElement=[];groupName="";onChangeCallback;onLoadCallback;constructor(e,t){this.init(e,t,x.instances.length),x.instances.push(this),1===x.instances.length&&!0===x.firstLoad&&((e,t=!1)=>{!0===t?console.log("Data Type : "+typeof e,"\nValue : "+e):"boolean"!=typeof t?console.log(t):console.log(e)})(`RadioBox is loaded, version: ${x.version}`),x.firstLoad=!1}init(e,n,o){let i=null;return"string"==typeof e?i=v.getElem(e,"all"):e instanceof NodeList||e instanceof Array?i=e:e instanceof HTMLInputElement&&(i=[e]),i?(this.id=o,this.element=e,this.options=v.deepMerge({},t,n),this.injectStyles(),this.setupCallbacks(),i.forEach(((e,t)=>this.processRadiobox(e,t))),this.onLoadCallback?.(this),this):v.throwError("Cannot find elements : "+e)}injectStyles(){let e={};this.options?.styles&&Object.keys(this.options.styles).length>0&&(e=v.deepMerge({},this.options.styles,e)),e&&v.injectStylesheet(e,this.id.toString())}setupCallbacks(){this.onChange=e=>{this.options?.onChange&&this.options.onChange(e)},this.onLoadCallback=this.options?.onLoad}processRadiobox(e,t){if("radio"!==e.type)return;if(e.hasAttribute("data-radiobox"))return;e.setAttribute("data-radiobox","true"),v.isEmpty(this.groupName)&&(this.groupName=e.name),e.name!==this.groupName&&v.throwError("All radioboxes must belong to the same group");let n=e.nextElementSibling,o=this.options.bindLabel??!1,{title:i,remainLabel:l,randomID:a,labelToRestore:s}=v.handleRadioboxTitle(e,n);o=!!l||o,(this.options.checked||0===this.options.checked||e.checked)&&this.updateRadioboxCheckedStatus(e,t);let{cloneEle:r,labelNode:c}=v.insertRadiobox(this.id.toString(),e,a,l);v.insertRadioboxTitle(i,o,c,r);let d=this.radioBoxChange.bind(this,r);r.addEventListener("change",d),r.radioBoxChange=d,this.allElement.push(r),r.labelToRestore=s}updateRadioboxCheckedStatus(e,t){const n=this.options.checked;if("string"==typeof n&&e.value===n||"number"==typeof n&&t===n)return this.allElement.forEach((t=>t!==e&&v.toggleCheckStatus(t,!1))),void v.toggleCheckStatus(e,!0);e.checked&&v.validRadioBoxStatus(this.allElement)&&v.toggleCheckStatus(e,!0)}updateAllRadioboxesCheckedStatus(e,t){this.allElement.forEach(((n,o)=>{const i=n===e||t===o;v.toggleCheckStatus(n,i)}))}radioBoxChange(e){this.onChangeCallback?.(e),e&&this.updateAllRadioboxesCheckedStatus(e,this.allElement.indexOf(e))}destroy(){x.firstLoad=!1,this.allElement.forEach((e=>{v.restoreElement(e)})),this.element=null,this.options=t,this.allElement=[],v.removeStylesheet(this.id.toString());const e=x.instances.indexOf(this);-1!==e&&x.instances.splice(e,1)}set onChange(e){this.onChangeCallback=e}set value(e){this.setValue(e)}get elements(){return this.allElement}get value(){let e=this.allElement.find((e=>e.checked));return e?e.value:null}setValue(e){e=e.toString(),this.allElement.forEach((t=>{t.value===e&&!t.checked&&(t.checked=!0,this.radioBoxChange(t))}))}setChecked(e){this.allElement.forEach(((t,n)=>{("number"==typeof e&&e===n||"string"==typeof e&&t.value===e)&&!t.checked&&(t.checked=!0,this.radioBoxChange(t))}))}empty(){return this.allElement.forEach((e=>{e.checked=!1,e.removeAttribute("checked")})),this.allElement=[],this}refresh(){this.element&&this.init(this.element,this.options,this.id)}static destroyAll(){for(;x.instances.length;){x.instances[0].destroy()}}}var C=Object.freeze({__proto__:null}),k=Object.freeze({__proto__:null});e.RadioBox=x,e.RadioBoxInterface=C,e.RadioBoxType=k})); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).radioBoxjs={})}(this,(function(e){"use strict";const t={checked:null,bindLabel:!0,styles:{},onLoad:void 0,onChange:void 0};function n(e){throw new Error(e)}function o(e,t,n){if("string"!=typeof e)return e;let o=document;return null===t&&n?o=n:t&&t instanceof Node&&"querySelector"in t?o=t:n&&n instanceof Node&&"querySelector"in n&&(o=n),"all"===t?o.querySelectorAll(e):o.querySelector(e)}function i(e,t={},n=""){let o=document.createElement(e);for(let e in t)Object.prototype.hasOwnProperty.call(t,e)&&("textContent"===e||"innerText"===e?o.textContent=t[e]:o.setAttribute(e,t[e]));return n&&(o.textContent=n),o}let l="utils-style";const a={from:".utils",to:".utils-"};function s(e){return"object"==typeof e&&null!==e&&!r(e)}function r(e){return Array.isArray(e)}function c(e){return"number"!=typeof e&&("string"==typeof e&&0===e.length||(!(!r(e)||0!==e.length)||(!(!s(e)||0!==Object.keys(e).length)||!e)))}function d(e,...t){if(!t.length)return e;const n=t.shift();if(n)for(const t in n)if(Object.prototype.hasOwnProperty.call(n,t)){const o=n[t],i=t;s(o)||r(o)?(e[i]&&"object"==typeof e[i]||(e[i]=r(o)?[]:{}),d(e[i],o)):e[i]=o}return d(e,...t)}function h(e){l=e}function u(e,t){a.from=e,a.to=t}function f(e,t=null){t=c(t)?"":t;let n=i("style");n.id=l+t,n.textContent="",document.head.append(n);let o=n.sheet;for(let n in e)e.hasOwnProperty(n)&&m(o,n,p(e[n]),t)}function p(e){let t="";for(let[n,o]of Object.entries(e))n=n.replace(/([A-Z])/g,(e=>`-${e[0].toLowerCase()}`)),t+=`${n}:${o};`;return t}function m(e,t,n,o=null){o=c(o)?"":o;let i=t.replace(a.from,a.to+o);e.insertRule(i+"{"+n+"}",0)}function b(e=null){const t=c(e)?"":e;let n=o("#"+l+t);n&&n.parentNode&&n.parentNode.removeChild(n)}function g(e=8){let t="";const n="abcdefghijklmnopqrstuvwxyz0123456789";for(let o=0;o\n \n \n `}static handleRadioboxTitle(e,t){let n,o=e.title||e.dataset.radioboxTitle||null,i=!1,l=null,a=!1;if(t instanceof HTMLLabelElement){const s=t.htmlFor,r=t.dataset.radioFor,d=e.dataset.radioId;i=!c(e.id)&&s===e.id,a=!c(e.id)&&r===e.id,c(d)||r!==d||(l=c(e.id)&&c(s)?"radio-"+g(6):null,a=!0),(a||i)&&(n=t.cloneNode(!0),o=o||t.textContent,t.parentNode.removeChild(t))}return{title:o,remainLabel:i,randomID:l,labelToRestore:n}}static insertRadiobox(e,t,n,l){let a=v.getTemplate(e),s=i("div");s.innerHTML=a.trim();let r=o("label",s),c=t.cloneNode(!0);return c.withID=!0,n&&(c.id=n,c.withID=!1),!0===l&&(r.htmlFor=c.id),r.parentNode&&r.parentNode.insertBefore(c,r),t.parentNode.replaceChild(s.firstElementChild||s,t),{cloneEle:c,templateNode:s,labelNode:r}}static insertRadioboxTitle(e,t,n,o){e?(n.textContent=e,!0===t&&(n.classList.add("radio-labeled"),n.addEventListener("click",(e=>{e.preventDefault(),o.click()})))):n.parentNode.removeChild(n)}static toggleCheckStatus(e,t){t?(e.checked=!0,e.setAttribute("checked","checked")):(e.checked=!1,e.removeAttribute("checked"))}static restoreElement(e){if("function"==typeof e.radioBoxChange&&e.removeEventListener("change",e.radioBoxChange),!1===e.withID&&e.removeAttribute("id"),e.radioBoxChange=void 0,e.removeAttribute("data-radiobox"),e.parentNode){e.parentNode.replaceWith(e)}let t=e.labelToRestore;t&&t.nodeType===Node.ELEMENT_NODE&&e.parentNode?.insertBefore(t,e.nextSibling)}static validRadioBoxStatus(e){return e.filter((e=>e.checked)).length<=1}}v.setStylesheetId("radiobox-style"),v.setReplaceRule(".radio-box",".radio-box-");class x{static instances=[];static version="2.1.2";static firstLoad=!0;element=null;options=t;id=0;allElement=[];groupName="";onChangeCallback;onLoadCallback;constructor(e,t){this.init(e,t,x.instances.length),x.instances.push(this),1===x.instances.length&&!0===x.firstLoad&&((e,t=!1)=>{!0===t?console.log("Data Type : "+typeof e,"\nValue : "+e):"boolean"!=typeof t?console.log(t):console.log(e)})(`RadioBox is loaded, version: ${x.version}`),x.firstLoad=!1}init(e,n,o){let i=null;return"string"==typeof e?i=v.getElem(e,"all"):e instanceof NodeList||e instanceof Array?i=e:e instanceof HTMLInputElement&&(i=[e]),i?(this.id=o,this.element=e,this.options=v.deepMerge({},t,n),this.injectStyles(),this.setupCallbacks(),i.forEach(((e,t)=>this.processRadiobox(e,t))),this.onLoadCallback?.(this),this):v.throwError("Cannot find elements : "+e)}injectStyles(){let e={};this.options?.styles&&Object.keys(this.options.styles).length>0&&(e=v.deepMerge({},this.options.styles,e)),e&&v.injectStylesheet(e,this.id.toString())}setupCallbacks(){this.onChange=e=>{this.options?.onChange&&this.options.onChange(e)},this.onLoadCallback=this.options?.onLoad}processRadiobox(e,t){if("radio"!==e.type)return;if(e.hasAttribute("data-radiobox"))return;e.setAttribute("data-radiobox","true"),v.isEmpty(this.groupName)&&(this.groupName=e.name),e.name!==this.groupName&&v.throwError("All radioboxes must belong to the same group");let n=e.nextElementSibling,o=this.options.bindLabel??!1,{title:i,remainLabel:l,randomID:a,labelToRestore:s}=v.handleRadioboxTitle(e,n);o=!!l||o,(null!==this.options.checked||e.checked)&&this.updateRadioboxCheckedStatus(e,t);let{cloneEle:r,labelNode:c}=v.insertRadiobox(this.id.toString(),e,a,l);v.insertRadioboxTitle(i,o,c,r);let d=this.radioBoxChange.bind(this,r);r.addEventListener("change",d),r.radioBoxChange=d,this.allElement.push(r),r.labelToRestore=s}updateRadioboxCheckedStatus(e,t){const n=this.options.checked;if("string"==typeof n&&e.value===n||"number"==typeof n&&t===n)return this.allElement.forEach((t=>t!==e&&v.toggleCheckStatus(t,!1))),void v.toggleCheckStatus(e,!0);e.checked&&v.validRadioBoxStatus(this.allElement)&&v.toggleCheckStatus(e,!0)}updateAllRadioboxesCheckedStatus(e,t){this.allElement.forEach(((n,o)=>{const i=n===e||t===o;v.toggleCheckStatus(n,i)}))}radioBoxChange(e){this.onChangeCallback?.(e),e&&this.updateAllRadioboxesCheckedStatus(e,this.allElement.indexOf(e))}destroy(){x.firstLoad=!1,this.allElement.forEach((e=>{v.restoreElement(e)})),this.element=null,this.options=t,this.allElement=[],v.removeStylesheet(this.id.toString());const e=x.instances.indexOf(this);-1!==e&&x.instances.splice(e,1)}set onChange(e){this.onChangeCallback=e}set value(e){this.setValue(e)}get elements(){return this.allElement}get value(){let e=this.allElement.find((e=>e.checked));return e?e.value:null}setValue(e){e=e.toString(),this.allElement.forEach((t=>{t.value===e&&!t.checked&&(t.checked=!0,this.radioBoxChange(t))}))}setChecked(e){this.allElement.forEach(((t,n)=>{("number"==typeof e&&e===n||"string"==typeof e&&t.value===e)&&!t.checked&&(t.checked=!0,this.radioBoxChange(t))}))}empty(){return this.allElement.forEach((e=>{e.checked=!1,e.removeAttribute("checked")})),this.allElement=[],this}refresh(){this.element&&this.init(this.element,this.options,this.id)}static destroyAll(){for(;x.instances.length;){x.instances[0].destroy()}}}var C=Object.freeze({__proto__:null}),k=Object.freeze({__proto__:null});e.RadioBox=x,e.RadioBoxInterface=C,e.RadioBoxType=k})); diff --git a/package.json b/package.json index cb06e70..31ed84a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@carry0987/radio-box", - "version": "2.1.1", + "version": "2.1.2", "description": "A library for create radio type check box", "type": "module", "main": "dist/radioBox.min.js",