builder-settings-types 0.0.114 → 0.0.116

package/dist/builder-settings-types.cjs.js

@@ -94,7 +94,7 @@
         }
       `,document.head.appendChild(l)}return i.appendChild(s),i.appendChild(n),t.appendChild(i),t}setDetectChange(t){this.detectChangeCallback=t}}const tt=`<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`;class et extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const s=document.createElement("div");s.classList.add("gap-label-container");const n=document.createElement("div");n.classList.add("gap-setting-icon"),n.innerHTML=this.props.icon||tt,s.appendChild(n);const a=document.createElement("label");a.classList.add("gap-input-label"),a.textContent=t,s.appendChild(a),i.appendChild(s);const o=u=>{this.props.minValue!==void 0&&(u.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(u.max=String(this.props.maxValue)),this.props.className&&u.classList.add(this.props.className),u.addEventListener("input",()=>{var f;const p=this.props.minValue??0,g=this.props.maxValue??100;let d=Number(u.value);d<p&&(d=p),d>g&&(d=g),u.value=String(d),this.value=d,this.inputValues[t]=d,console.log(`Gap Setting (${t}): ${d}${this.props.suffix||""}`),(f=this.onChange)==null||f.call(this,d)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:o});if(!this.props.suffix||this.props.suffix==="none")return i.appendChild(l),i;l.classList.add("suffix-wrapper");const c=l.querySelector("input.gap-setting-input");c&&(c.style.paddingRight="35px");const r=document.createElement("span");return r.className="suffix-label",r.textContent=this.props.suffix,l.appendChild(r),i.appendChild(l),i}}class it extends m{constructor(t){var e;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");super(t),this.inputType="tabs",this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainer=null,this.previousTabId="",this.tabValues=new Map,this.settingGroups=new Map,this.tabs=t.tabs,this.activeTabId=t.activeTabId||((e=this.tabs[0])==null?void 0:e.id)||"",this.previousTabId=this.activeTabId,this.onStateChangeCallback=t.onStateChange,this.value={},this.tabs.forEach(i=>{if(i.custom){const s={};Object.entries(i.settings).forEach(([n,a])=>{a instanceof m?s[n]=a.value:a instanceof C&&(s[n]=a.getValues())}),this.tabValues.set(i.id,s),this.value[i.id]=s}else{const s=new C({title:i.title||i.label,collapsed:i.collapsed,settings:i.settings,description:i.description,icon:i.icon,main:i.main,custom:i.custom,hideCondition:i.hideCondition,onBlur:i.onBlur});this.settingGroups.set(i.id,s);const n=s.getValues();this.tabValues.set(i.id,n),this.value[i.id]=n}}),t.onChange&&this.setOnChange(t.onChange)}draw(){const t=document.createElement("div");t.classList.add("tabs-settings-container"),this.props.className&&t.classList.add(this.props.className);const e=document.createElement("div");e.classList.add("tabs-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)}),t.appendChild(e);const i=document.createElement("div");return i.classList.add("tab-content"),this.contentContainer=i,this.tabs.forEach(s=>{const n=document.createElement("div");if(n.classList.add("tab-panel"),s.id===this.activeTabId&&n.classList.add("active"),s.custom)Object.entries(s.settings).forEach(([a,o])=>{if(o instanceof m)n.appendChild(o.draw()),o.setOnChange(()=>{this.updateTabValues(s.id),this.handleTabChange(s.id)});else if(o instanceof C){const l=o.draw();n.appendChild(l),this.addChangeListeners(o,s.id)}});else{const a=this.settingGroups.get(s.id);if(a){const o=a.draw();n.appendChild(o),this.addChangeListeners(a,s.id)}}i.appendChild(n)}),t.appendChild(i),t}addChangeListeners(t,e){const i=t.settings;Object.values(i).forEach(s=>{s instanceof C?this.addChangeListeners(s,e):s.setOnChange(()=>{this.updateTabValues(e),this.handleTabChange(e)})})}updateTabValues(t){const e=this.tabs.find(i=>i.id===t);if(e)if(e.custom){const i={};Object.entries(e.settings).forEach(([s,n])=>{n instanceof m?i[s]=n.value:n instanceof C&&(i[s]=n.getValues())}),this.tabValues.set(t,i),this.value={...this.value,[t]:i}}else{const i=this.settingGroups.get(t);if(i){const s=i.getValues();this.tabValues.set(t,s),this.value={...this.value,[t]:s}}}}handleTabChange(t){var i,s;const e=this.tabValues.get(t)||{};(i=this.onStateChangeCallback)==null||i.call(this,t,e),(s=this.onChangeCallback)==null||s.call(this,{tabId:t,contentValues:e,previousTabId:this.previousTabId})}handleTabClick(t){var i;if(t===this.activeTabId)return;this.previousTabId=this.activeTabId,this.activeTabId=t;const e=(i=this.tabsContainer)==null?void 0:i.querySelectorAll(".tab-button");if(e==null||e.forEach(s=>{var n;s instanceof HTMLElement&&s.classList.toggle("active",s.textContent===((n=this.tabs.find(a=>a.id===t))==null?void 0:n.label))}),this.contentContainer){const s=this.contentContainer.querySelectorAll(".tab-panel"),n=this.tabs.findIndex(o=>o.id===this.previousTabId),a=this.tabs.findIndex(o=>o.id===t);s.forEach((o,l)=>{o instanceof HTMLElement&&(l===a?(o.classList.add("active"),o.classList.remove("slide-left","slide-right")):l===n?(o.classList.remove("active"),o.classList.add(a>n?"slide-left":"slide-right")):o.classList.remove("active","slide-left","slide-right"))})}this.handleTabChange(t)}setOnChange(t){return this.onChangeCallback=t,this}setOnStateChange(t){return this.onStateChangeCallback=t,this}}const st=`
+</svg>`;class et extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const s=document.createElement("div");s.classList.add("gap-label-container");const n=document.createElement("div");n.classList.add("gap-setting-icon"),n.innerHTML=this.props.icon||tt,s.appendChild(n);const a=document.createElement("label");a.classList.add("gap-input-label"),a.textContent=t,s.appendChild(a),i.appendChild(s);const o=u=>{this.props.minValue!==void 0&&(u.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(u.max=String(this.props.maxValue)),this.props.className&&u.classList.add(this.props.className),u.addEventListener("input",()=>{var f;const p=this.props.minValue??0,g=this.props.maxValue??100;let d=Number(u.value);d<p&&(d=p),d>g&&(d=g),u.value=String(d),this.value=d,this.inputValues[t]=d,console.log(`Gap Setting (${t}): ${d}${this.props.suffix||""}`),(f=this.onChange)==null||f.call(this,d)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:o});if(!this.props.suffix||this.props.suffix==="none")return i.appendChild(l),i;l.classList.add("suffix-wrapper");const c=l.querySelector("input.gap-setting-input");c&&(c.style.paddingRight="35px");const r=document.createElement("span");return r.className="suffix-label",r.textContent=this.props.suffix,l.appendChild(r),i.appendChild(l),i}}class it extends m{constructor(t){var e;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");super(t),this.inputType="tabs",this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainer=null,this.previousTabId="",this.tabValues=new Map,this.settingGroups=new Map,this.tabs=t.tabs,this.activeTabId=t.activeTabId||((e=this.tabs[0])==null?void 0:e.id)||"",this.previousTabId=this.activeTabId,this.onStateChangeCallback=t.onStateChange,this.value={},this.tabs.forEach(i=>{if(i.custom){const s={};Object.entries(i.settings).forEach(([n,a])=>{a instanceof m?s[n]=a.value:a instanceof C&&(s[n]=a.getValues())}),this.tabValues.set(i.id,s),this.value[i.id]=s}else{const s=new C({title:i.title||i.label,collapsed:i.collapsed,settings:i.settings,description:i.description,icon:i.icon,main:i.main,custom:i.custom,hideCondition:i.hideCondition,onBlur:i.onBlur});this.settingGroups.set(i.id,s);const n=s.getValues();this.tabValues.set(i.id,n),this.value[i.id]=n}}),t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}draw(){const t=document.createElement("div");t.classList.add("tabs-settings-container"),this.props.className&&t.classList.add(this.props.className);const e=document.createElement("div");e.classList.add("tabs-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)}),t.appendChild(e);const i=document.createElement("div");return i.classList.add("tab-content"),this.contentContainer=i,this.tabs.forEach(s=>{const n=document.createElement("div");if(n.classList.add("tab-panel"),s.id===this.activeTabId&&n.classList.add("active"),s.custom)Object.entries(s.settings).forEach(([a,o])=>{if(o instanceof m)n.appendChild(o.draw()),o.setOnChange(()=>{this.updateTabValues(s.id),this.handleTabChange(s.id)});else if(o instanceof C){const l=o.draw();n.appendChild(l),this.addChangeListeners(o,s.id)}});else{const a=this.settingGroups.get(s.id);if(a){const o=a.draw();n.appendChild(o),this.addChangeListeners(a,s.id)}}i.appendChild(n)}),t.appendChild(i),t}addChangeListeners(t,e){const i=t.settings;Object.values(i).forEach(s=>{s instanceof C?this.addChangeListeners(s,e):s.setOnChange(()=>{this.updateTabValues(e),this.handleTabChange(e)})})}updateTabValues(t){const e=this.tabs.find(i=>i.id===t);if(e){if(e.custom){const i={};Object.entries(e.settings).forEach(([s,n])=>{n instanceof m?i[s]=n.value:n instanceof C&&(i[s]=n.getValues())}),this.tabValues.set(t,i),this.value={...this.value,[t]:i}}else{const i=this.settingGroups.get(t);if(i){const s=i.getValues();this.tabValues.set(t,s),this.value={...this.value,[t]:s}}}this.detectChangeCallback&&this.detectChangeCallback(t)}}handleTabChange(t){var s,n;const e=this.tabValues.get(t)||{};(s=this.onStateChangeCallback)==null||s.call(this,t,e);const i={tabId:t,contentValues:e,previousTabId:this.previousTabId};(n=this.onChangeCallback)==null||n.call(this,i)}handleTabClick(t){var i;if(t===this.activeTabId)return;this.previousTabId=this.activeTabId,this.activeTabId=t;const e=(i=this.tabsContainer)==null?void 0:i.querySelectorAll(".tab-button");if(e==null||e.forEach(s=>{var n;s instanceof HTMLElement&&s.classList.toggle("active",s.textContent===((n=this.tabs.find(a=>a.id===t))==null?void 0:n.label))}),this.contentContainer){const s=this.contentContainer.querySelectorAll(".tab-panel"),n=this.tabs.findIndex(o=>o.id===this.previousTabId),a=this.tabs.findIndex(o=>o.id===t);s.forEach((o,l)=>{o instanceof HTMLElement&&(l===a?(o.classList.add("active"),o.classList.remove("slide-left","slide-right")):l===n?(o.classList.remove("active"),o.classList.add(a>n?"slide-left":"slide-right")):o.classList.remove("active","slide-left","slide-right"))})}this.detectChangeCallback&&this.detectChangeCallback(t),this.handleTabChange(t)}setOnChange(t){return this.onChangeCallback=t,this}setDetectChange(t){return this.detectChangeCallback=t,this}setOnStateChange(t){return this.onStateChangeCallback=t,this}}const st=`
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/dist/builder-settings-types.es.js

@@ -1153,7 +1153,7 @@ class ut extends m {
         const n = s.getValues();
         this.tabValues.set(i.id, n), this.value[i.id] = n;
       }
-    }), t.onChange && this.setOnChange(t.onChange);
+    }), t.onChange && this.setOnChange(t.onChange), t.detectChange && (this.detectChangeCallback = t.detectChange);
   }
   draw() {
     const t = document.createElement("div");
@@ -1197,7 +1197,7 @@ class ut extends m {
   }
   updateTabValues(t) {
     const e = this.tabs.find((i) => i.id === t);
-    if (e)
+    if (e) {
       if (e.custom) {
         const i = {};
         Object.entries(e.settings).forEach(([s, n]) => {
@@ -1216,15 +1216,19 @@ class ut extends m {
           };
         }
       }
+      this.detectChangeCallback && this.detectChangeCallback(t);
+    }
   }
   handleTabChange(t) {
-    var i, s;
+    var s, n;
     const e = this.tabValues.get(t) || {};
-    (i = this.onStateChangeCallback) == null || i.call(this, t, e), (s = this.onChangeCallback) == null || s.call(this, {
+    (s = this.onStateChangeCallback) == null || s.call(this, t, e);
+    const i = {
       tabId: t,
       contentValues: e,
       previousTabId: this.previousTabId
-    });
+    };
+    (n = this.onChangeCallback) == null || n.call(this, i);
   }
   handleTabClick(t) {
     var i;
@@ -1247,11 +1251,14 @@ class ut extends m {
         )) : o.classList.remove("active", "slide-left", "slide-right"));
       });
     }
-    this.handleTabChange(t);
+    this.detectChangeCallback && this.detectChangeCallback(t), this.handleTabChange(t);
   }
   setOnChange(t) {
     return this.onChangeCallback = t, this;
   }
+  setDetectChange(t) {
+    return this.detectChangeCallback = t, this;
+  }
   setOnStateChange(t) {
     return this.onStateChangeCallback = t, this;
   }

package/dist/index.d.ts

@@ -537,6 +537,7 @@ export declare class TabsSettings<T = any> extends Setting<T, TabsSettingsProps<
     private contentContainer;
     private onChangeCallback?;
     private onStateChangeCallback?;
+    private detectChangeCallback?;
     private previousTabId;
     private tabValues;
     private settingGroups;
@@ -547,6 +548,7 @@ export declare class TabsSettings<T = any> extends Setting<T, TabsSettingsProps<
     private handleTabChange;
     private handleTabClick;
     setOnChange(onChange: (value: T) => void): this;
+    setDetectChange(detectChange: (value: T | undefined) => void): this;
     setOnStateChange(onStateChange: (tabId: string, values: Record<string, any>) => void): this;
 }
 
@@ -554,6 +556,7 @@ declare interface TabsSettingsProps<T = TabChangeValue> extends SettingProps<T>
     tabs: TabItem[];
     activeTabId?: string;
     onChange?: (value: T) => void;
+    detectChange?: (value: T | undefined) => void;
     onStateChange?: (tabId: string, values: Record<string, any>) => void;
     className?: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "builder-settings-types",
   "description": "builder settings",
-  "version": "0.0.114",
+  "version": "0.0.116",
   "type": "module",
   "main": "dist/builder-settings-types.cjs.js",
   "module": "dist/builder-settings-types.es.js",