From 60876e97422f927371611be129b7b9ee66505ffd Mon Sep 17 00:00:00 2001 From: carry0987 Date: Wed, 14 Feb 2024 14:28:52 +0800 Subject: [PATCH] Update interface --- dist/radioBox.d.ts | 8 ++++---- dist/radioBox.esm.js | 22 ++++++++++------------ dist/radioBox.min.js | 2 +- package.json | 6 +++--- src/interface/interfaces.ts | 6 +++--- src/module/config.ts | 8 ++++---- src/radioBox.ts | 10 +++++----- 7 files changed, 30 insertions(+), 32 deletions(-) diff --git a/dist/radioBox.d.ts b/dist/radioBox.d.ts index ad5aa0e..f8e061d 100644 --- a/dist/radioBox.d.ts +++ b/dist/radioBox.d.ts @@ -5,11 +5,11 @@ interface OnLoadCallback { (radioBox: any): void; } interface RadioBoxOption { - checked?: string | number; + checked: string | number | null; + bindLabel: boolean; + styles: object; onChange?: OnChangeCallback; onLoad?: OnLoadCallback; - bindLabel?: boolean; - styles?: object; } interface RadioInputElement extends HTMLInputElement { withID: boolean; @@ -28,7 +28,7 @@ declare class RadioBox { private groupName; private onChangeCallback?; private onLoadCallback?; - constructor(element: string | HTMLInputElement, option?: RadioBoxOption); + constructor(element: string | HTMLInputElement, option: Partial); private init; private injectStyles; private setupCallbacks; diff --git a/dist/radioBox.esm.js b/dist/radioBox.esm.js index f96a6ee..c240fc5 100644 --- a/dist/radioBox.esm.js +++ b/dist/radioBox.esm.js @@ -126,12 +126,10 @@ function generateRandom(length = 8) { return Math.random().toString(36).substring(2, 2 + length); } -function addEventListener(...params) { - const [element, eventName, handler, options] = params; +function addEventListener(element, eventName, handler, options) { element.addEventListener(eventName, handler, options); } -function removeEventListener(...params) { - const [element, eventName, handler, options] = params; +function removeEventListener(element, eventName, handler, options) { element.removeEventListener(eventName, handler, options); } function createEvent(eventName, detail, options) { @@ -292,11 +290,11 @@ const reportInfo = (vars, showType = false) => { }; const defaults = { - checked: undefined, - onChange: undefined, - onLoad: undefined, + checked: null, bindLabel: true, - styles: {} + styles: {}, + onLoad: undefined, + onChange: undefined }; function styleInject(css, ref) { @@ -331,17 +329,17 @@ styleInject(css_248z); class RadioBox { static instances = []; - static version = '2.0.2'; + static version = '2.0.3'; static firstLoad = true; element = null; - options; + options = defaults; id = 0; allElement = []; groupName = ''; // Methods for external use onChangeCallback; onLoadCallback; - constructor(element, option = {}) { + constructor(element, option) { this.init(element, option, RadioBox.instances.length); RadioBox.instances.push(this); if (RadioBox.instances.length === 1 && RadioBox.firstLoad === true) { @@ -445,7 +443,7 @@ class RadioBox { }); // Reset instance variables this.element = null; - this.options = {}; + this.options = defaults; this.allElement = []; // Remove any injected stylesheets Utils.removeStylesheet(this.id.toString()); diff --git a/dist/radioBox.min.js b/dist/radioBox.min.js index 7acaedc..9e088d8 100644 --- a/dist/radioBox.min.js +++ b/dist/radioBox.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).RadioBox=t()}(this,(function(){"use strict";function e(e){throw new Error(e)}function t(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 n(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 o="utils-style";const i={from:".utils",to:".utils-"};function s(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 i=n[t],l=t;"object"!=typeof(o=i)||null===o||Array.isArray(o)?e[l]=i:(e[l]&&"object"==typeof e[l]||(e[l]={}),s(e[l],i))}var o;return s(e,...t)}function l(e){o=e}function a(e,t){i.from=e,i.to=t}function r(e,t=null){t=u(t)?"":t;let i=n("style");i.id=o+t,i.textContent="",document.head.append(i);let s=i.sheet;for(let n in e)e.hasOwnProperty(n)&&d(s,n,c(e[n]),t)}function c(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 d(e,t,n,o=null){o=u(o)?"":o;let s=t.replace(i.from,i.to+o);e.insertRule(s+"{"+n+"}",0)}function h(e=null){const n=u(e)?"":e;let i=t("#"+o+n);i&&i.parentNode&&i.parentNode.removeChild(i)}function u(e){return"number"!=typeof e&&(!e||"string"==typeof e&&0===e.length)}function p(e=8){return Math.random().toString(36).substring(2,2+e)}function f(e,t,n){return new CustomEvent(e,{detail:t,...n})}var m=Object.freeze({__proto__:null,addEventListener:function(...e){const[t,n,o,i]=e;t.addEventListener(n,o,i)},createEvent:f,dispatchEvent:function(t,n=document,o,i){try{if("string"==typeof t){let e=f(t,o,i);return n.dispatchEvent(e)}if(t instanceof Event)return n.dispatchEvent(t);e("Invalid event type")}catch(e){return function(...e){console.error(...e)}("Dispatch Event Error:",e),!1}},removeEventListener:function(...e){const[t,n,o,i]=e;t.removeEventListener(n,o,i)}});class b{static throwError=e;static getElem=t;static deepMerge=s;static generateRandom=p;static injectStylesheet=r;static removeStylesheet=h;static setStylesheetId=l;static setReplaceRule=a;static isEmpty=u;static createEvent=m.createEvent;static dispatchEvent=m.dispatchEvent;static getTemplate(e){return`\n
\n \n
\n `}static handleRadioboxTitle(e,t){let n,o=e.title||e.dataset.radioboxTitle||null,i=!1,s=null,l=!1;if(t instanceof HTMLLabelElement){const a=t.htmlFor,r=t.dataset.radioFor,c=e.dataset.radioId;i=!u(e.id)&&a===e.id,l=!u(e.id)&&r===e.id,u(c)||r!==c||(s=u(e.id)&&u(a)?"radio-"+p(6):null,l=!0),(l||i)&&(n=t.cloneNode(!0),o=o||t.textContent,t.parentNode.removeChild(t))}return{title:o,remainLabel:i,randomID:s,labelToRestore:n}}static insertRadiobox(e,o,i,s){let l=b.getTemplate(e),a=n("div");a.innerHTML=l.trim();let r=t("label",a),c=o.cloneNode(!0);return c.withID=!0,i&&(c.id=i,c.withID=!1),!0===s&&(r.htmlFor=c.id),r.parentNode&&r.parentNode.insertBefore(c,r),o.parentNode.replaceChild(a.firstElementChild||a,o),{cloneEle:c,templateNode:a,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)}}b.setStylesheetId("radiobox-style"),b.setReplaceRule(".radio-box",".radio-box-");const g={checked:void 0,onChange:void 0,onLoad:void 0,bindLabel:!0,styles:{}};class E{static instances=[];static version="2.0.2";static firstLoad=!0;element=null;options;id=0;allElement=[];groupName="";onChangeCallback;onLoadCallback;constructor(e,t={}){this.init(e,t,E.instances.length),E.instances.push(this),1===E.instances.length&&!0===E.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: ${E.version}`),E.firstLoad=!1}init(e,t,n){let o=b.getElem(e,"all");return(!o||o.length<1)&&b.throwError("Cannot find elements : "+e),this.id=n,this.element=e,this.options=b.deepMerge({},g,t),this.injectStyles(),this.setupCallbacks(),o.forEach(((e,t)=>this.processRadiobox(e,t))),this.onLoadCallback?.(this),this}injectStyles(){let e={};this.options?.styles&&Object.keys(this.options.styles).length>0&&(e=b.deepMerge({},this.options.styles,e)),e&&b.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"),b.isEmpty(this.groupName)&&(this.groupName=e.name),e.name!==this.groupName&&b.throwError("All radioboxes must belong to the same group");let n=e.nextElementSibling,o=this.options.bindLabel??!1,{title:i,remainLabel:s,randomID:l,labelToRestore:a}=b.handleRadioboxTitle(e,n);o=!!s||o,this.options.checked&&this.updateRadioboxCheckedStatus(e,t);let{cloneEle:r,labelNode:c}=b.insertRadiobox(this.id.toString(),e,l,s);b.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=a}updateRadioboxCheckedStatus(e,t){const n=this.options.checked;("string"==typeof n&&e.value===n||"number"==typeof n&&t===n)&&(this.allElement.forEach((t=>t!==e&&b.toggleCheckStatus(t,!1))),b.toggleCheckStatus(e,!0))}updateAllRadioboxesCheckedStatus(e,t){this.allElement.forEach(((n,o)=>{const i=n===e||t===o;b.toggleCheckStatus(n,i)}))}radioBoxChange(e=null){this.onChangeCallback?.(e),e&&this.updateAllRadioboxesCheckedStatus(e,this.allElement.indexOf(e))}destroy(){E.firstLoad=!1,this.allElement.forEach((e=>{b.restoreElement(e)})),this.element=null,this.options={},this.allElement=[],b.removeStylesheet(this.id.toString());const e=E.instances.indexOf(this);-1!==e&&E.instances.splice(e,1)}set onChange(e){this.onChangeCallback=e}get elements(){return this.allElement}get value(){let e=this.allElement.find((e=>e.checked));return e?e.value:null}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(;E.instances.length;){E.instances[0].destroy()}}}return E})); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).RadioBox=t()}(this,(function(){"use strict";function e(e){throw new Error(e)}function t(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 n(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 o="utils-style";const i={from:".utils",to:".utils-"};function l(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 i=n[t],s=t;"object"!=typeof(o=i)||null===o||Array.isArray(o)?e[s]=i:(e[s]&&"object"==typeof e[s]||(e[s]={}),l(e[s],i))}var o;return l(e,...t)}function s(e){o=e}function a(e,t){i.from=e,i.to=t}function r(e,t=null){t=u(t)?"":t;let i=n("style");i.id=o+t,i.textContent="",document.head.append(i);let l=i.sheet;for(let n in e)e.hasOwnProperty(n)&&c(l,n,d(e[n]),t)}function d(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 c(e,t,n,o=null){o=u(o)?"":o;let l=t.replace(i.from,i.to+o);e.insertRule(l+"{"+n+"}",0)}function h(e=null){const n=u(e)?"":e;let i=t("#"+o+n);i&&i.parentNode&&i.parentNode.removeChild(i)}function u(e){return"number"!=typeof e&&(!e||"string"==typeof e&&0===e.length)}function p(e=8){return Math.random().toString(36).substring(2,2+e)}function f(e,t,n){return new CustomEvent(e,{detail:t,...n})}var m=Object.freeze({__proto__:null,addEventListener:function(e,t,n,o){e.addEventListener(t,n,o)},createEvent:f,dispatchEvent:function(t,n=document,o,i){try{if("string"==typeof t){let e=f(t,o,i);return n.dispatchEvent(e)}if(t instanceof Event)return n.dispatchEvent(t);e("Invalid event type")}catch(e){return function(...e){console.error(...e)}("Dispatch Event Error:",e),!1}},removeEventListener:function(e,t,n,o){e.removeEventListener(t,n,o)}});class b{static throwError=e;static getElem=t;static deepMerge=l;static generateRandom=p;static injectStylesheet=r;static removeStylesheet=h;static setStylesheetId=s;static setReplaceRule=a;static isEmpty=u;static createEvent=m.createEvent;static dispatchEvent=m.dispatchEvent;static getTemplate(e){return`\n
\n \n
\n `}static handleRadioboxTitle(e,t){let n,o=e.title||e.dataset.radioboxTitle||null,i=!1,l=null,s=!1;if(t instanceof HTMLLabelElement){const a=t.htmlFor,r=t.dataset.radioFor,d=e.dataset.radioId;i=!u(e.id)&&a===e.id,s=!u(e.id)&&r===e.id,u(d)||r!==d||(l=u(e.id)&&u(a)?"radio-"+p(6):null,s=!0),(s||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,o,i,l){let s=b.getTemplate(e),a=n("div");a.innerHTML=s.trim();let r=t("label",a),d=o.cloneNode(!0);return d.withID=!0,i&&(d.id=i,d.withID=!1),!0===l&&(r.htmlFor=d.id),r.parentNode&&r.parentNode.insertBefore(d,r),o.parentNode.replaceChild(a.firstElementChild||a,o),{cloneEle:d,templateNode:a,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)}}b.setStylesheetId("radiobox-style"),b.setReplaceRule(".radio-box",".radio-box-");const g={checked:null,bindLabel:!0,styles:{},onLoad:void 0,onChange:void 0};class E{static instances=[];static version="2.0.3";static firstLoad=!0;element=null;options=g;id=0;allElement=[];groupName="";onChangeCallback;onLoadCallback;constructor(e,t){this.init(e,t,E.instances.length),E.instances.push(this),1===E.instances.length&&!0===E.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: ${E.version}`),E.firstLoad=!1}init(e,t,n){let o=b.getElem(e,"all");return(!o||o.length<1)&&b.throwError("Cannot find elements : "+e),this.id=n,this.element=e,this.options=b.deepMerge({},g,t),this.injectStyles(),this.setupCallbacks(),o.forEach(((e,t)=>this.processRadiobox(e,t))),this.onLoadCallback?.(this),this}injectStyles(){let e={};this.options?.styles&&Object.keys(this.options.styles).length>0&&(e=b.deepMerge({},this.options.styles,e)),e&&b.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"),b.isEmpty(this.groupName)&&(this.groupName=e.name),e.name!==this.groupName&&b.throwError("All radioboxes must belong to the same group");let n=e.nextElementSibling,o=this.options.bindLabel??!1,{title:i,remainLabel:l,randomID:s,labelToRestore:a}=b.handleRadioboxTitle(e,n);o=!!l||o,this.options.checked&&this.updateRadioboxCheckedStatus(e,t);let{cloneEle:r,labelNode:d}=b.insertRadiobox(this.id.toString(),e,s,l);b.insertRadioboxTitle(i,o,d,r);let c=this.radioBoxChange.bind(this,r);r.addEventListener("change",c),r.radioBoxChange=c,this.allElement.push(r),r.labelToRestore=a}updateRadioboxCheckedStatus(e,t){const n=this.options.checked;("string"==typeof n&&e.value===n||"number"==typeof n&&t===n)&&(this.allElement.forEach((t=>t!==e&&b.toggleCheckStatus(t,!1))),b.toggleCheckStatus(e,!0))}updateAllRadioboxesCheckedStatus(e,t){this.allElement.forEach(((n,o)=>{const i=n===e||t===o;b.toggleCheckStatus(n,i)}))}radioBoxChange(e=null){this.onChangeCallback?.(e),e&&this.updateAllRadioboxesCheckedStatus(e,this.allElement.indexOf(e))}destroy(){E.firstLoad=!1,this.allElement.forEach((e=>{b.restoreElement(e)})),this.element=null,this.options=g,this.allElement=[],b.removeStylesheet(this.id.toString());const e=E.instances.indexOf(this);-1!==e&&E.instances.splice(e,1)}set onChange(e){this.onChangeCallback=e}get elements(){return this.allElement}get value(){let e=this.allElement.find((e=>e.checked));return e?e.value:null}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(;E.instances.length;){E.instances[0].destroy()}}}return E})); diff --git a/package.json b/package.json index 92014e2..ad4d1ed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@carry0987/radio-box", - "version": "2.0.2", + "version": "2.0.3", "description": "A library for create radio type check box", "type": "module", "main": "dist/radioBox.min.js", @@ -29,12 +29,12 @@ }, "homepage": "https://github.com/carry0987/RadioBox-JS#readme", "devDependencies": { - "@carry0987/utils": "^3.2.6", + "@carry0987/utils": "^3.2.8", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-replace": "^5.0.5", "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-typescript": "^11.1.6", - "rollup": "^4.9.6", + "rollup": "^4.10.0", "rollup-plugin-delete": "^2.0.0", "rollup-plugin-dts": "^6.1.0", "rollup-plugin-postcss": "^4.0.2", diff --git a/src/interface/interfaces.ts b/src/interface/interfaces.ts index 68217e9..9af9779 100644 --- a/src/interface/interfaces.ts +++ b/src/interface/interfaces.ts @@ -7,11 +7,11 @@ export interface OnLoadCallback { } export interface RadioBoxOption { - checked?: string | number; + checked: string | number | null; + bindLabel: boolean; + styles: object; onChange?: OnChangeCallback; onLoad?: OnLoadCallback; - bindLabel?: boolean; - styles?: object; } export interface RadioboxTitleDetail { diff --git a/src/module/config.ts b/src/module/config.ts index 246c5f9..19fabfd 100644 --- a/src/module/config.ts +++ b/src/module/config.ts @@ -1,9 +1,9 @@ import { RadioBoxOption } from '../interface/interfaces'; export const defaults: RadioBoxOption = { - checked: undefined, - onChange: undefined, - onLoad: undefined, + checked: null, bindLabel: true, - styles: {} + styles: {}, + onLoad: undefined, + onChange: undefined }; diff --git a/src/radioBox.ts b/src/radioBox.ts index 9966d9b..faa6356 100644 --- a/src/radioBox.ts +++ b/src/radioBox.ts @@ -9,7 +9,7 @@ class RadioBox { private static version: string = '__version__'; private static firstLoad: boolean = true; private element: string | HTMLInputElement | null = null; - private options!: RadioBoxOption; + private options: RadioBoxOption = defaults; private id: number = 0; private allElement: RadioInputElement[] = []; private groupName: string = ''; @@ -18,7 +18,7 @@ class RadioBox { private onChangeCallback?: OnChangeCallback; private onLoadCallback?: OnLoadCallback; - constructor(element: string | HTMLInputElement, option: RadioBoxOption = {}) { + constructor(element: string | HTMLInputElement, option: Partial) { this.init(element, option, RadioBox.instances.length); RadioBox.instances.push(this); @@ -30,12 +30,12 @@ class RadioBox { RadioBox.firstLoad = false; } - private init(elements: string | HTMLInputElement, option: RadioBoxOption, id: number) { + private init(elements: string | HTMLInputElement, option: Partial, id: number) { let elem = Utils.getElem(elements, 'all'); if (!elem || elem.length < 1) Utils.throwError('Cannot find elements : ' + elements); this.id = id; this.element = elements; - this.options = Utils.deepMerge({}, defaults, option); + this.options = Utils.deepMerge({} as RadioBoxOption, defaults, option); // Inject stylesheet this.injectStyles(); @@ -138,7 +138,7 @@ class RadioBox { // Reset instance variables this.element = null; - this.options = {}; + this.options = defaults; this.allElement = []; // Remove any injected stylesheets