From 2749fe1ee90a18101e73fe10229266da036ff66a Mon Sep 17 00:00:00 2001
From: Jiri Zraly <jirka@blueboard.cz>
Date: Wed, 30 Nov 2022 16:54:40 +0100
Subject: [PATCH] modal: possibility to open more modals in one component

---
 components/modal/modal.js                     | 208 +++++++++---------
 components/modal/variations/default/demo.html |  35 ++-
 components/modal/variations/default/html.html |  11 +-
 dist/cdn.min.js                               |   2 +-
 package.json                                  |   2 +-
 5 files changed, 151 insertions(+), 107 deletions(-)

diff --git a/components/modal/modal.js b/components/modal/modal.js
index 533c6fa..504c13a 100644
--- a/components/modal/modal.js
+++ b/components/modal/modal.js
@@ -1,99 +1,111 @@
 export default () => ({
-	open: false,
-	originalBodyPaddingRight: null,
-	originalBodyOverflow: null,
-	style: {
-		background: "fixed top-0 left-0 flex w-screen h-screen max-w-full bg-neutral-500/50 z-50 overflow-y-auto p-3",
-		dialog: "h-auto p-6 m-auto relative w-full max-w-md bg-white rounded-lg shadow-xl",
-	  },
-	init() {
-		const style = this.style;
-		const templateContent = this.$el.querySelector("template").content;
-		const backgroundElement = templateContent.querySelector("[x-bind=background]");
-		const dialogElement = templateContent.querySelector("[x-bind=dialog]");
-		backgroundElement.className = style.background;
-		dialogElement.className = style.dialog;
-
-		this.$watch('open', value => {
-			if (value === true) {
-				this.originalBodyOverfow = window.getComputedStyle(document.body).overflow;
-				this.originalPaddingRight = document.body.style.paddingRight;
-				const originalComputedPaddingRight = window.getComputedStyle(document.body).paddingRight;
-				const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-				document.body.classList.add('overflow-hidden')
-				document.body.style.paddingRight = `${scrollBarWidth + parseFloat(originalComputedPaddingRight || 0)}px`;
-
-			} else {
-				setTimeout(() => {
-					document.body.classList.remove('overflow-hidden')
-					document.body.style.paddingRight = this.originalBodyPaddingRight || null;
-					document.body.style.overflow = this.originalBodyOverflow;
-				}, 300);
-			}
-		});
-	},
-	trigger: {
-		['@click']() {
-			this.open = ! this.open
-		},
-	},
-	background: {
-		['x-show']() {
-			return this.open
-		},
-		['x-transition:enter']() {
-			return 'transition duration-300';
-		},
-		['x-transition:enter-start']() {
-			return 'opacity-0';
-		},
-		['x-transition:enter-end']() {
-			return 'opacity-1';
-		},
-		['x-transition:leave']() {
-			return 'transition duration-300';
-		},
-		['x-transition:leave-start']() {
-			return 'opacity-1';
-		},
-		['x-transition:leave-end']() {
-			return 'opacity-0';
-		}
-	},
-	dialog: {
-		['@mistral-close-modals.window']() {
-			return this.open = false;
-		},
-		['x-show']() {
-			return this.open
-		},
-		["x-trap"]() {
-			return this.open;
-			},
-		['@keydown.escape.window']() {
-			this.open = false;
-		},
-		['@click.away']() {
-			this.open = false;
-		},
-		['x-transition:enter']() {
-            return 'transition ease-[cubic-bezier(.46,1.56,.8,1)] duration-300';
-        },
-        ['x-transition:enter-start']() {
-            return 'opacity-0 -translate-y-12';
-        },
-        ['x-transition:enter-end']() {
-            return 'opacity-1 translate-y-0';
-        },
-		['x-transition:leave']() {
-			return 'transition ease-out duration-300';
-		},
-		['x-transition:leave-start']() {
-			return 'opacity-1 translate-y-0';
-		},
-		['x-transition:leave-end']() {
-			return 'opacity-0 -translate-y-12';
-		}
-
-	}
-})
\ No newline at end of file
+  openedModalId: null,
+  originalBodyPaddingRight: null,
+  originalBodyOverflow: null,
+  style: {
+    background:
+      'fixed top-0 left-0 flex w-screen h-screen max-w-full bg-neutral-500/50 z-50 overflow-y-auto p-3',
+    dialog:
+      'h-auto p-6 m-auto relative w-full max-w-md bg-white rounded-lg shadow-xl',
+  },
+  init() {
+    const style = this.style;
+    const templateContent = this.$el.querySelector('template').content;
+    const backgroundElement = templateContent.querySelector(
+      '[x-bind=background]'
+    );
+    const dialogElements = templateContent.querySelectorAll('[x-bind=dialog]');
+    dialogElements.forEach(dialogElement => {
+      backgroundElement.className = style.background;
+      dialogElement.className = style.dialog;
+      });
+    
+    this.$watch('open', (value) => {
+      if (value !== null) {
+        this.originalBodyOverfow = window.getComputedStyle(
+          document.body
+        ).overflow;
+        this.originalPaddingRight = document.body.style.paddingRight;
+        const originalComputedPaddingRight = window.getComputedStyle(
+          document.body
+        ).paddingRight;
+        const scrollBarWidth =
+          window.innerWidth - document.documentElement.clientWidth;
+        document.body.classList.add('overflow-hidden');
+        document.body.style.paddingRight = `${
+          scrollBarWidth + parseFloat(originalComputedPaddingRight || 0)
+        }px`;
+      } else {
+        setTimeout(() => {
+          document.body.classList.remove('overflow-hidden');
+          document.body.style.paddingRight =
+            this.originalBodyPaddingRight || null;
+          document.body.style.overflow = this.originalBodyOverflow;
+        }, 300);
+      }
+    });
+  },
+  trigger: {
+    ['@click']() {
+      this.openedModalId = this.$el.dataset.mistralModalId;
+    },
+  },
+  background: {
+    ['x-show']() {
+      return this.openedModalId !== null;
+    },
+    ['x-transition:enter']() {
+      return 'transition duration-300';
+    },
+    ['x-transition:enter-start']() {
+      return 'opacity-0';
+    },
+    ['x-transition:enter-end']() {
+      return 'opacity-1';
+    },
+    ['x-transition:leave']() {
+      return 'transition duration-300';
+    },
+    ['x-transition:leave-start']() {
+      return 'opacity-1';
+    },
+    ['x-transition:leave-end']() {
+      return 'opacity-0';
+    },
+  },
+  dialog: {
+    ['@mistral-close-modals.window']() {
+      return (this.openedModalId === null);
+    },
+    ['x-show']() {
+      return this.openedModalId === this.$el.id;
+    },
+    ['x-trap']() {
+      return this.openedModalId === this.$el.id;
+    },
+    ['@keydown.escape.window']() {
+      this.openedModalId = null;
+    },
+    ['@click.away']() {
+      this.openedModalId = null;
+    },
+    ['x-transition:enter']() {
+      return 'transition ease-[cubic-bezier(.46,1.56,.8,1)] duration-300';
+    },
+    ['x-transition:enter-start']() {
+      return 'opacity-0 -translate-y-12';
+    },
+    ['x-transition:enter-end']() {
+      return 'opacity-1 translate-y-0';
+    },
+    ['x-transition:leave']() {
+      return 'transition ease-out duration-300';
+    },
+    ['x-transition:leave-start']() {
+      return 'opacity-1 translate-y-0';
+    },
+    ['x-transition:leave-end']() {
+      return 'opacity-0 -translate-y-12';
+    },
+  },
+});
diff --git a/components/modal/variations/default/demo.html b/components/modal/variations/default/demo.html
index 5fa0421..0cf8999 100644
--- a/components/modal/variations/default/demo.html
+++ b/components/modal/variations/default/demo.html
@@ -1,14 +1,20 @@
 <div x-data="modal">
   <button
     class="bg-blue-400 text-white px-4 py-2 rounded-lg font-semibold hover:brightness-110"
-    x-bind="trigger"
+    x-bind="trigger" data-mistral-modal-id="modal-1"
   >
-    Show modal
+    Show modal 1
+  </button>  
+  <button
+    class="bg-blue-400 text-white px-4 py-2 rounded-lg font-semibold hover:brightness-110"
+    x-bind="trigger" data-mistral-modal-id="modal-2"
+  >
+    Show modal 2
   </button>
   <template x-teleport="body">
     <div x-bind="background">
-      <div x-bind="dialog" role="dialog" aria-hidden="true">
-        <h3 class="text-lg font-bold">Modal title</h3>
+      <div x-bind="dialog" role="dialog" aria-hidden="true" id="modal-1">
+        <h3 class="text-lg font-bold">Modal 1 title</h3>
         <div class="mt-6 gap-3 flex flex-wrap">
           <div class="flex gap-3 flex-wrap">
             <div class="bg-neutral-300 rounded w-28 h-4"></div>
@@ -28,6 +34,27 @@ <h3 class="text-lg font-bold">Modal title</h3>
           </button>
         </div>
       </div>
+      <div x-bind="dialog" role="dialog" aria-hidden="true" id="modal-2">
+          <h3 class="text-lg font-bold">Modal 2 title</h3>
+          <div class="mt-6 gap-3 flex flex-wrap">
+            <div class="flex gap-3 flex-wrap">
+              <div class="bg-neutral-300 rounded w-28 h-4"></div>
+              <div class="bg-neutral-300 rounded w-16 h-4 flex-auto"></div>
+              <div class="bg-neutral-300 rounded w-20 h-4"></div>
+              <div class="bg-neutral-300 rounded w-36 h-4 flex-auto"></div>
+              <div class="bg-neutral-300 rounded w-24 h-4"></div>
+              <div class="bg-neutral-300 rounded w-12 h-4 flex-auto"></div>
+              <div class="bg-neutral-300 rounded w-12 h-4"></div>
+            </div>
+
+            <button
+              class="bg-blue-400 text-white px-4 py-2 rounded-lg font-semibold hover:brightness-110 mt-6 mx-auto"
+              @click="$data.open = false"
+            >
+              Close
+            </button>
+          </div>
+        </div>
     </div>
   </template>
 </div>
diff --git a/components/modal/variations/default/html.html b/components/modal/variations/default/html.html
index 5fa16e2..c5486cb 100644
--- a/components/modal/variations/default/html.html
+++ b/components/modal/variations/default/html.html
@@ -1,9 +1,14 @@
 <div x-data="modal">
-  <button class="btn" x-bind="trigger">Show modal</button>
+  <button class="btn" x-bind="trigger" data-mistral-modal-id="modal-1">Show modal 1</button>
+  <button class="btn" x-bind="trigger" data-mistral-modal-id="modal-2">Show modal 2</button>
   <template x-teleport="body">
     <div x-bind="background">
-      <div x-bind="dialog" role="dialog" aria-hidden="true">
-        <h3 class="text-lg font-bold">Modal title</h3>
+      <div x-bind="dialog" role="dialog" aria-hidden="true" id="modal-1">
+        <h3 class="text-lg font-bold">Modal 1 title</h3>
+        <div class="mt-6">Content</div>
+      </div>
+      <div x-bind="dialog" role="dialog" aria-hidden="true" id="modal-2">
+        <h3 class="text-lg font-bold">Modal 2 title</h3>
         <div class="mt-6">Content</div>
       </div>
     </div>
diff --git a/dist/cdn.min.js b/dist/cdn.min.js
index 905c0a6..08b96c5 100644
--- a/dist/cdn.min.js
+++ b/dist/cdn.min.js
@@ -1 +1 @@
-(()=>{var v=()=>({style:{wrapper:"w-full relative",select:"border w-full border-gray-300 rounded-lg py-2 px-2 text-sm flex gap-2 items-center cursor-pointer bg-white",menuWrapper:"w-full rounded-lg py-1.5 text-sm mt-1 shadow-lg absolute bg-white z-10",menu:"max-h-52 overflow-y-auto",textList:"overflow-x-hidden text-ellipsis grow whitespace-nowrap",trigger:"px-2 py-2 rounded bg-neutral-100",badge:"py-1.5 px-3 rounded-full bg-neutral-100",search:"px-3 py-2 w-full border-0 border-b-2 border-neutral-100 pb-3 outline-0 mb-1",optionGroupTitle:"px-3 py-2 text-neutral-400 uppercase font-bold text-xs sticky top-0 bg-white",clearSearchBtn:"absolute p-3 right-0 top-1 text-neutral-600",label:"hover:bg-neutral-100 cursor-pointer flex py-2 px-3",focusedItem:"bg-neutral-100"},icons:{times:'<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><g xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M6 18L18 6M18 18L6 6"/></g></svg>',arrowDown:'<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-width="2" d="M5 10l7 7 7-7"/></svg>'},init(){let e=this.style,t=this.$el;t.classList.add("hidden");let i=document.createElement("div");i.className=e.wrapper,i.setAttribute("x-data","newSelect");let o=document.createElement("div");o.className=e.select,o.setAttribute("x-bind","selectTrigger");let a=document.createElement("span");a.className=e.textList;let l=document.createElement("button");l.className=e.trigger,l.innerHTML=this.icons.arrowDown;let d=document.createElement("span");d.className=e.badge,d.setAttribute("x-bind","countBadge"),o.append(a),o.append(d),o.append(l);let u=document.createElement("div");u.className=e.menuWrapper,u.setAttribute("x-bind","selectMenu");let h=document.createElement("div");h.className=e.menu;let m=document.createElement("input");m.className=e.search,m.setAttribute("x-bind","search"),m.setAttribute("placeholder","filter");let g=document.createElement("button");g.className=e.clearSearchBtn,g.setAttribute("x-bind","clearSearchBtn"),g.innerHTML=this.icons.times,u.append(m),u.append(h),u.append(g),t.parentNode.insertBefore(i,t.nextSibling);let y=t.querySelectorAll("optgroup");y.length>0?y.forEach(n=>b(n)):b(t);function b(n){let p=n.querySelectorAll("option"),w=document.createElement("ul"),f=n.getAttribute("label")||null;if(f){let s=document.createElement("h5");s.className=e.optionGroupTitle,s.innerText=f,s.setAttribute("x-bind","groupTitle"),h.appendChild(s)}p.forEach(s=>{let x=document.createElement("li");x.setAttribute("x-bind","listItem");let r=document.createElement("input");r.classList.add("mr-3","mt-1"),r.type="checkbox",r.value=s.value,r.id=t.name+"_"+s.value;let c=document.createElement("label");c.className=e.label,c.setAttribute("for",r.id),c.innerText=s.innerText,r.addEventListener("focus",()=>{c.classList.add(e.focusedItem)}),r.addEventListener("blur",()=>{c.classList.remove(e.focusedItem)}),r.setAttribute("x-bind","checkBox"),s.hasAttribute("selected")&&(r.checked=!0),c.prepend(r),x.append(c),w.appendChild(x)}),h.appendChild(w)}i.appendChild(o),i.appendChild(u),Alpine.data("newSelect",()=>({open:!1,showCountBadge:!1,items:[],selectedItems:[],filterBy:"",init(){this.regenerateTextItems()},regenerateTextItems(){this.selectedItems=[],this.items.forEach(n=>{let p=n.querySelector("input[type=checkbox]"),w=n.querySelector("label").innerText;p.checked&&this.selectedItems.push(w)}),this.selectedItems.length>1?this.showCountBadge=!0:this.showCountBadge=!1,this.selectedItems.length===0?a.innerHTML='<span class="text-neutral-400">select</span>':a.innerText=this.selectedItems.join(", ")},selectTrigger:{["@click"](){this.open=!this.open,this.open&&this.$nextTick(()=>this.$root.querySelector("input[x-bind=search]").focus())}},selectMenu:{["x-show"](){return this.open},["x-trap.noscroll"](){return this.open},["@keydown.down"](){this.$focus.wrap().next()},["@keydown.up"](){this.$focus.wrap().previous()},["x-transition"](){},["@keydown.escape.window"](){this.open=!1},["@click.away"](){this.open=!1},["x-init"](){this.items=this.$el.querySelectorAll("li"),this.regenerateTextItems()}},checkBox:{["@change"](){let n=this.$el;n.checked?t.querySelector("option[value='"+n.value+"']").setAttribute("selected",!0):t.querySelector("option[value='"+n.value+"']").removeAttribute("selected"),this.regenerateTextItems()}},countBadge:{["x-show"](){return this.showCountBadge},["x-text"](){return this.selectedItems.length}},search:{["@keydown.escape.stop"](){this.filterBy="",this.$el.blur()},["@keyup"](){this.filterBy=this.$el.value},["x-model"](){return this.filterBy}},clearSearchBtn:{["@click"](){this.filterBy=""},["x-show"](){return this.filterBy.length>0}},listItem:{["x-show"](){return this.filterBy===""||this.$el.innerText.toLowerCase().startsWith(this.filterBy.toLowerCase())}},groupTitle:{["x-show"](){if(this.filterBy==="")return!0;let n=!1;return this.$el.nextElementSibling.querySelectorAll("li").forEach(p=>{console.log(this.filterBy),p.innerText.toLowerCase().startsWith(this.filterBy.toLowerCase())&&(n=!0)}),n}}}))}});var k=()=>({open:!1,originalBodyPaddingRight:null,originalBodyOverflow:null,style:{background:"fixed top-0 left-0 flex w-screen h-screen max-w-full bg-neutral-500/50 z-50 overflow-y-auto p-3",dialog:"h-auto p-6 m-auto relative w-full max-w-md bg-white rounded-lg shadow-xl"},init(){let e=this.style,t=this.$el.querySelector("template").content,i=t.querySelector("[x-bind=background]"),o=t.querySelector("[x-bind=dialog]");i.className=e.background,o.className=e.dialog,this.$watch("open",a=>{if(a===!0){this.originalBodyOverfow=window.getComputedStyle(document.body).overflow,this.originalPaddingRight=document.body.style.paddingRight;let l=window.getComputedStyle(document.body).paddingRight,d=window.innerWidth-document.documentElement.clientWidth;document.body.classList.add("overflow-hidden"),document.body.style.paddingRight=`${d+parseFloat(l||0)}px`}else setTimeout(()=>{document.body.classList.remove("overflow-hidden"),document.body.style.paddingRight=this.originalBodyPaddingRight||null,document.body.style.overflow=this.originalBodyOverflow},300)})},trigger:{["@click"](){this.open=!this.open}},background:{["x-show"](){return this.open},["x-transition:enter"](){return"transition duration-300"},["x-transition:enter-start"](){return"opacity-0"},["x-transition:enter-end"](){return"opacity-1"},["x-transition:leave"](){return"transition duration-300"},["x-transition:leave-start"](){return"opacity-1"},["x-transition:leave-end"](){return"opacity-0"}},dialog:{["x-show"](){return this.open},["x-trap"](){return this.open},["@keydown.escape.window"](){this.open=!1},["@click.away"](){this.open=!1},["x-transition:enter"](){return"transition ease-[cubic-bezier(.46,1.56,.8,1)] duration-300"},["x-transition:enter-start"](){return"opacity-0 -translate-y-12"},["x-transition:enter-end"](){return"opacity-1 translate-y-0"},["x-transition:leave"](){return"transition ease-out duration-300"},["x-transition:leave-start"](){return"opacity-1 translate-y-0"},["x-transition:leave-end"](){return"opacity-0 -translate-y-12"}}});var B=()=>({style:{wrapper:"relative",menu:{bottom:"absolute bg-white rounded-lg shadow-lg py-3 w-max mt-3",top:"absolute bg-white rounded-lg shadow-lg py-3 w-max -translate-y-full -mt-3 top-0"},menuItem:"px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap"},position:"bottom",open:!1,init(){let e=this.style,t=this.$el;this.position=t.dataset.position==="top"?"top":"bottom",t.className=e.wrapper;let i=this.$el.querySelector("[x-bind=trigger]"),o=this.$el.querySelector("[x-bind=menu]");o.className=e.menu[this.position],this.$el.querySelectorAll("[x-bind=menu] > li > a").forEach(l=>{l.className=e.menuItem})},trigger:{["@click.prevent"](){this.open=!this.open}},menu:{["x-show"](){return this.open},["x-trap"](){return this.open},["@keydown.escape.window"](){this.open=!1},["@click.away"](){this.open=!1},["@keydown.prevent.down"](){this.$focus.wrap().next()},["@keydown.prevent.up"](){this.$focus.wrap().previous()},["x-transition:enter"](){return"ease-[cubic-bezier(.3,2.3,.6,1)] duration-200"},["x-transition:enter-start"](){return this.position==="bottom","!opacity-0 !mt-0"},["x-transition:enter-end"](){return this.position==="bottom"?"!opacity-1 !mt-3":"!opacity-1 !-mt-3"},["x-transition:leave"](){return"ease-out duration-200"},["x-transition:leave-start"](){return this.position==="bottom"?"!opacity-1 !mt-3":"!opacity-1 !-mt-3"},["x-transition:leave-end"](){return this.position==="bottom","!opacity-0 !mt-0"}}});window.Mistral={multiselect:v,modal:k,dropdown:B};})();
+(()=>{var v=()=>({style:{wrapper:"w-full relative",select:"border w-full border-gray-300 rounded-lg py-2 px-2 text-sm flex gap-2 items-center cursor-pointer bg-white",menuWrapper:"w-full rounded-lg py-1.5 text-sm mt-1 shadow-lg absolute bg-white z-10",menu:"max-h-52 overflow-y-auto",textList:"overflow-x-hidden text-ellipsis grow whitespace-nowrap",trigger:"px-2 py-2 rounded bg-neutral-100",badge:"py-1.5 px-3 rounded-full bg-neutral-100",search:"px-3 py-2 w-full border-0 border-b-2 border-neutral-100 pb-3 outline-0 mb-1",optionGroupTitle:"px-3 py-2 text-neutral-400 uppercase font-bold text-xs sticky top-0 bg-white",clearSearchBtn:"absolute p-3 right-0 top-1 text-neutral-600",label:"hover:bg-neutral-100 cursor-pointer flex py-2 px-3",focusedItem:"bg-neutral-100"},icons:{times:'<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><g xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M6 18L18 6M18 18L6 6"/></g></svg>',arrowDown:'<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-4 h-4"><path xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-width="2" d="M5 10l7 7 7-7"/></svg>'},init(){let e=this.style,t=this.$el;t.classList.add("hidden");let l=document.createElement("div");l.className=e.wrapper,l.setAttribute("x-data","newSelect");let r=document.createElement("div");r.className=e.select,r.setAttribute("x-bind","selectTrigger");let s=document.createElement("span");s.className=e.textList;let a=document.createElement("button");a.className=e.trigger,a.innerHTML=this.icons.arrowDown;let u=document.createElement("span");u.className=e.badge,u.setAttribute("x-bind","countBadge"),r.append(s),r.append(u),r.append(a);let d=document.createElement("div");d.className=e.menuWrapper,d.setAttribute("x-bind","selectMenu");let h=document.createElement("div");h.className=e.menu;let m=document.createElement("input");m.className=e.search,m.setAttribute("x-bind","search"),m.setAttribute("placeholder","filter");let g=document.createElement("button");g.className=e.clearSearchBtn,g.setAttribute("x-bind","clearSearchBtn"),g.innerHTML=this.icons.times,d.append(m),d.append(h),d.append(g),t.parentNode.insertBefore(l,t.nextSibling);let y=t.querySelectorAll("optgroup");y.length>0?y.forEach(n=>b(n)):b(t);function b(n){let p=n.querySelectorAll("option"),w=document.createElement("ul"),f=n.getAttribute("label")||null;if(f){let i=document.createElement("h5");i.className=e.optionGroupTitle,i.innerText=f,i.setAttribute("x-bind","groupTitle"),h.appendChild(i)}p.forEach(i=>{let x=document.createElement("li");x.setAttribute("x-bind","listItem");let o=document.createElement("input");o.classList.add("mr-3","mt-1"),o.type="checkbox",o.value=i.value,o.id=t.name+"_"+i.value;let c=document.createElement("label");c.className=e.label,c.setAttribute("for",o.id),c.innerText=i.innerText,o.addEventListener("focus",()=>{c.classList.add(e.focusedItem)}),o.addEventListener("blur",()=>{c.classList.remove(e.focusedItem)}),o.setAttribute("x-bind","checkBox"),i.hasAttribute("selected")&&(o.checked=!0),c.prepend(o),x.append(c),w.appendChild(x)}),h.appendChild(w)}l.appendChild(r),l.appendChild(d),Alpine.data("newSelect",()=>({open:!1,showCountBadge:!1,items:[],selectedItems:[],filterBy:"",init(){this.regenerateTextItems()},regenerateTextItems(){this.selectedItems=[],this.items.forEach(n=>{let p=n.querySelector("input[type=checkbox]"),w=n.querySelector("label").innerText;p.checked&&this.selectedItems.push(w)}),this.selectedItems.length>1?this.showCountBadge=!0:this.showCountBadge=!1,this.selectedItems.length===0?s.innerHTML='<span class="text-neutral-400">select</span>':s.innerText=this.selectedItems.join(", ")},selectTrigger:{["@click"](){this.open=!this.open,this.open&&this.$nextTick(()=>this.$root.querySelector("input[x-bind=search]").focus())}},selectMenu:{["x-show"](){return this.open},["x-trap.noscroll"](){return this.open},["@keydown.down"](){this.$focus.wrap().next()},["@keydown.up"](){this.$focus.wrap().previous()},["x-transition"](){},["@keydown.escape.window"](){this.open=!1},["@click.away"](){this.open=!1},["x-init"](){this.items=this.$el.querySelectorAll("li"),this.regenerateTextItems()}},checkBox:{["@change"](){let n=this.$el;n.checked?t.querySelector("option[value='"+n.value+"']").setAttribute("selected",!0):t.querySelector("option[value='"+n.value+"']").removeAttribute("selected"),this.regenerateTextItems()}},countBadge:{["x-show"](){return this.showCountBadge},["x-text"](){return this.selectedItems.length}},search:{["@keydown.escape.stop"](){this.filterBy="",this.$el.blur()},["@keyup"](){this.filterBy=this.$el.value},["x-model"](){return this.filterBy}},clearSearchBtn:{["@click"](){this.filterBy=""},["x-show"](){return this.filterBy.length>0}},listItem:{["x-show"](){return this.filterBy===""||this.$el.innerText.toLowerCase().startsWith(this.filterBy.toLowerCase())}},groupTitle:{["x-show"](){if(this.filterBy==="")return!0;let n=!1;return this.$el.nextElementSibling.querySelectorAll("li").forEach(p=>{console.log(this.filterBy),p.innerText.toLowerCase().startsWith(this.filterBy.toLowerCase())&&(n=!0)}),n}}}))}});var k=()=>({openedModalId:null,originalBodyPaddingRight:null,originalBodyOverflow:null,style:{background:"fixed top-0 left-0 flex w-screen h-screen max-w-full bg-neutral-500/50 z-50 overflow-y-auto p-3",dialog:"h-auto p-6 m-auto relative w-full max-w-md bg-white rounded-lg shadow-xl"},init(){let e=this.style,t=this.$el.querySelector("template").content,l=t.querySelector("[x-bind=background]");t.querySelectorAll("[x-bind=dialog]").forEach(s=>{l.className=e.background,s.className=e.dialog}),this.$watch("open",s=>{if(s!==null){this.originalBodyOverfow=window.getComputedStyle(document.body).overflow,this.originalPaddingRight=document.body.style.paddingRight;let a=window.getComputedStyle(document.body).paddingRight,u=window.innerWidth-document.documentElement.clientWidth;document.body.classList.add("overflow-hidden"),document.body.style.paddingRight=`${u+parseFloat(a||0)}px`}else setTimeout(()=>{document.body.classList.remove("overflow-hidden"),document.body.style.paddingRight=this.originalBodyPaddingRight||null,document.body.style.overflow=this.originalBodyOverflow},300)})},trigger:{["@click"](){this.openedModalId=this.$el.dataset.mistralModalId}},background:{["x-show"](){return this.openedModalId!==null},["x-transition:enter"](){return"transition duration-300"},["x-transition:enter-start"](){return"opacity-0"},["x-transition:enter-end"](){return"opacity-1"},["x-transition:leave"](){return"transition duration-300"},["x-transition:leave-start"](){return"opacity-1"},["x-transition:leave-end"](){return"opacity-0"}},dialog:{["@mistral-close-modals.window"](){return this.openedModalId===null},["x-show"](){return this.openedModalId===this.$el.id},["x-trap"](){return this.openedModalId===this.$el.id},["@keydown.escape.window"](){this.openedModalId=null},["@click.away"](){this.openedModalId=null},["x-transition:enter"](){return"transition ease-[cubic-bezier(.46,1.56,.8,1)] duration-300"},["x-transition:enter-start"](){return"opacity-0 -translate-y-12"},["x-transition:enter-end"](){return"opacity-1 translate-y-0"},["x-transition:leave"](){return"transition ease-out duration-300"},["x-transition:leave-start"](){return"opacity-1 translate-y-0"},["x-transition:leave-end"](){return"opacity-0 -translate-y-12"}}});var B=()=>({style:{wrapper:"relative",menu:{bottom:"absolute bg-white rounded-lg shadow-lg py-3 w-max mt-3",top:"absolute bg-white rounded-lg shadow-lg py-3 w-max -translate-y-full -mt-3 top-0"},menuItem:"px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap"},position:"bottom",open:!1,init(){let e=this.style,t=this.$el;this.position=t.dataset.position==="top"?"top":"bottom",t.className=e.wrapper;let l=this.$el.querySelector("[x-bind=trigger]"),r=this.$el.querySelector("[x-bind=menu]");r.className=e.menu[this.position],this.$el.querySelectorAll("[x-bind=menu] > li > a").forEach(a=>{a.className=e.menuItem})},trigger:{["@click.prevent"](){this.open=!this.open}},menu:{["x-show"](){return this.open},["x-trap"](){return this.open},["@keydown.escape.window"](){this.open=!1},["@click.away"](){this.open=!1},["@keydown.prevent.down"](){this.$focus.wrap().next()},["@keydown.prevent.up"](){this.$focus.wrap().previous()},["x-transition:enter"](){return"ease-[cubic-bezier(.3,2.3,.6,1)] duration-200"},["x-transition:enter-start"](){return this.position==="bottom","!opacity-0 !mt-0"},["x-transition:enter-end"](){return this.position==="bottom"?"!opacity-1 !mt-3":"!opacity-1 !-mt-3"},["x-transition:leave"](){return"ease-out duration-200"},["x-transition:leave-start"](){return this.position==="bottom"?"!opacity-1 !mt-3":"!opacity-1 !-mt-3"},["x-transition:leave-end"](){return this.position==="bottom","!opacity-0 !mt-0"}}});window.Mistral={multiselect:v,modal:k,dropdown:B};})();
diff --git a/package.json b/package.json
index 81fe735..2458ece 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mistral-ui",
-  "version": "1.2.27",
+  "version": "1.3.0",
   "description": "Tailwind CSS + Alpine.js components",
   "homepage": "https://mistralui.com",
   "main": "index.js",