@ipaat/vue3-tailwind3-cookie-comply/dist/vue3-tailwind3-cookie-comply.umd.js

A Vue 3 compatible component to handle cookie consent styled with Tailwind CSS 3.

(function(e,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(e=typeof globalThis<"u"?globalThis:e||self,e.VueCookieComply=d(e.Vue))})(this,function(e){"use strict";const d=["for"],N=["id","checked","disabled","value"],B=e.createElementVNode("div",{class:"w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"},null,-1),E={__name:"CookieToggle",props:{value:{type:String,required:!0},isRequired:{type:Boolean,default:!1}},emits:["update:checkbox"],setup(t,{emit:o}){const s=t,r=e.ref(!1);e.onMounted(()=>{s.isRequired&&(r.value=!0,o("update:checkbox",{value:s.value,isEnabled:!0}))});const l=n=>{r.value=!r.value,o("update:checkbox",{value:n,isEnabled:r.value})};return(n,g)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass([{"cursor-pointer":!t.isRequired,"cursor-not-allowed":t.isRequired},"inline-flex relative items-center"]),for:"toggle_"+t.value},[e.createElementVNode("input",{id:"toggle_"+t.value,checked:t.isRequired,disabled:t.isRequired,value:t.value,class:"sr-only peer",type:"checkbox",onInput:g[0]||(g[0]=p=>l(p.target.value))},null,40,N),B],10,d))}},i={__name:"CookieButton",props:{color:{type:String,default:"primary",validator:t=>["primary","secondary","danger","danger-o","success"].includes(t)},paddingClasses:{type:[String,Array],default:()=>["py-2.5","px-5"]}},setup(t){const o=t,s=e.computed(()=>{switch(o.color){case"secondary":return"border text-gray-900 bg-white border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700";case"danger":return"text-white bg-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900";case"danger-o":return"text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900";case"success":return"text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800";case"primary":return"text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";default:return"text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"}});return(r,l)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass([[e.unref(s),t.paddingClasses],"text-sm font-medium focus:outline-none rounded-lg focus:z-10 focus:ring-4 transition duration-150 ease-in-out"]),type:"button"},[e.renderSlot(r.$slots,"default")],2))}},T={class:"font-semibold"},D={class:"ml-auto flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3"},A={class:"fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-[1000] flex items-center"},q={class:"fixed inset-0 transform transition-all"},$=[e.createElementVNode("div",{class:"absolute inset-0 bg-gray-500 opacity-90 dark:bg-gray-900 dark:opacity-80"},null,-1)],_={class:"relative bg-white dark:bg-gray-800 rounded-lg"},z={class:"p-6 bg-gray-50 dark:bg-gray-700 rounded-t-lg"},L={class:"text-xl font-medium text-gray-900 dark:text-white"},M=e.createElementVNode("svg",{class:"h-[12px] w-[12px]",viewPort:"0 0 12 12",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("line",{stroke:"currentColor","stroke-width":"2",x1:"1",x2:"11",y1:"11",y2:"1"}),e.createElementVNode("line",{stroke:"currentColor","stroke-width":"2",x1:"1",x2:"11",y1:"1",y2:"11"})],-1),R={class:"px-6 overflow-y-auto py-6"},W={class:"text-semibold text-gray-800 dark:text-gray-200"},O={class:"text-sm text-gray-600 dark:text-gray-400"},P={class:"space-y-2 mt-6"},I={class:"text-gray-800 dark:text-gray-200"},j={key:0,class:"border-t border-gray-100 dark:border-gray-700 my-6"},J={class:"p-6 bg-gray-50 dark:bg-gray-700 rounded-b-lg"},F={class:"flex items-center justify-end space-x-3"},U={__name:"VueCookieComply",props:{bannerTitle:{type:String,default:"Cookie settings"},bannerDescription:{type:String,default:"We use cookies and similar technologies to help personalize content and offer a better experience. You can opt to customize them by clicking the preferences button."},preferencesBtnLabel:{type:String,default:"Preferences"},acceptAllBtnLabel:{type:String,default:"Accept All"},declineAllBtnLabel:{type:String,default:"Decline All"},savePreferencesBtnLabel:{type:String,default:"Save"},modalTitle:{type:String,default:"Your cookie settings"},preferences:{type:Array,default:()=>[]},target:{type:String,default:"body"},bannerBackgroundColor:{type:[String,Array],default:()=>["bg-gray-200","dark:bg-gray-800"]},bannerTextColor:{type:[String,Array],default:()=>["text-gray-800","dark:text-gray-200"]},bannerDescriptionTextColor:{type:[String,Array],default:()=>["text-gray-600","dark:text-gray-400"]},modalMaxWidth:{type:String,default:"xl"},bannerMaxWidth:{type:String,default:"5xl"}},emits:["on-accept-all","on-decline-all","on-save-preferences"],setup(t,{emit:o}){const s=t,r=e.ref(!0),l=e.ref(!1),n=e.ref([]),g=e.computed(()=>({xs:"sm:max-w-xs",sm:"sm:max-w-sm",md:"sm:max-w-md",lg:"sm:max-w-lg",xl:"sm:max-w-xl","2xl":"sm:max-w-2xl","3xl":"sm:max-w-3xl","4xl":"sm:max-w-4xl","5xl":"sm:max-w-5xl","6xl":"sm:max-w-6xl","7xl":"sm:max-w-7xl"})[s.modalMaxWidth]),p=e.computed(()=>({xs:"sm:max-w-xs",sm:"sm:max-w-sm",md:"sm:max-w-md",lg:"sm:max-w-lg",xl:"sm:max-w-xl","2xl":"sm:max-w-2xl","3xl":"sm:max-w-3xl","4xl":"sm:max-w-4xl","5xl":"sm:max-w-5xl","6xl":"sm:max-w-6xl","7xl":"sm:max-w-7xl"})[s.bannerMaxWidth]),h=e.computed(()=>s.preferences.map(a=>a.items.map(c=>c.isRequired?c.value:null)).flat().filter(a=>a)),w=e.computed(()=>s.preferences.map(a=>a.items.map(c=>c.value)).flat().filter(a=>a)),m=e.computed(()=>h.value.length===s.preferences.length);e.onMounted(()=>{localStorage.getItem("cookie-comply")&&(r.value=!1)});const f=()=>{r.value=!1,l.value=!1,localStorage.setItem("cookie-comply",JSON.stringify(w.value)),o("on-accept-all",w.value)},C=()=>{r.value=!1,l.value=!1,localStorage.setItem("cookie-comply",JSON.stringify(h.value)),o("on-decline-all",h.value)},S=()=>{r.value=!1,l.value=!1,localStorage.setItem("cookie-comply",JSON.stringify(n.value)),o("on-save-preferences",n.value)},V=()=>{l.value=!0},b=()=>{l.value=!1},u=({value:a,isEnabled:c})=>{c?n.value.push(a):n.value.splice(n.value.indexOf(a),1)};return(a,c)=>(e.openBlock(),e.createBlock(e.Teleport,{to:t.target},[r.value?(e.openBlock(),e.createElementBlock("aside",{key:0,class:e.normalizeClass([[t.bannerBackgroundColor,e.unref(p)],"fixed px-6 py-4 bottom-0 left-0 right-0 sm:bottom-6 sm:left-16 sm:right-16 sm:rounded-md mx-auto"])},[e.createElementVNode("div",{class:e.normalizeClass([[t.bannerTextColor],"flex items-center justify-between space-x-6"])},[e.createElementVNode("div",null,[e.renderSlot(a.$slots,"banner-text",{description:t.bannerDescription,title:t.bannerTitle},()=>[e.createElementVNode("h3",T,e.toDisplayString(t.bannerTitle),1),e.createElementVNode("p",{class:e.normalizeClass([[t.bannerDescriptionTextColor],"text-sm"])},e.toDisplayString(t.bannerDescription),3)])]),e.createElementVNode("div",D,[e.renderSlot(a.$slots,"banner-actions",{onAccept:f,onPreferences:V},()=>[e.createVNode(i,{class:"whitespace-nowrap",color:"secondary",onClick:V},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.preferencesBtnLabel),1)]),_:1}),e.createVNode(i,{class:"whitespace-nowrap",color:"success",onClick:f},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.acceptAllBtnLabel),1)]),_:1})])])],2),e.createVNode(e.Transition,{"leave-active-class":"duration-200"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",A,[e.createVNode(e.Transition,{"enter-active-class":"ease-out duration-300","enter-from-class":"opacity-0","enter-to-class":"opacity-100","leave-active-class":"ease-in duration-200","leave-from-class":"opacity-100","leave-to-class":"opacity-0"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",q,$,512),[[e.vShow,l.value]])]),_:1}),e.createVNode(e.Transition,{"enter-active-class":"ease-out duration-300","enter-from-class":"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95","enter-to-class":"opacity-100 translate-y-0 sm:scale-100","leave-active-class":"ease-in duration-200","leave-from-class":"opacity-100 translate-y-0 sm:scale-100","leave-to-class":"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass([e.unref(g),"mb-6 shadow-xl transform transition-all sm:w-full sm:mx-auto"])},[e.createElementVNode("div",_,[e.renderSlot(a.$slots,"modal-header",{modalTitle:t.modalTitle,onClose:b},()=>[e.createElementVNode("header",z,[e.renderSlot(a.$slots,"modal-title",{},()=>[e.createElementVNode("h3",L,e.toDisplayString(t.modalTitle),1)]),e.renderSlot(a.$slots,"modal-close-button",{onClose:b},()=>[e.createVNode(i,{class:"absolute top-6 right-6",color:"danger-o","padding-classes":"p-1.5",onClick:b},{default:e.withCtx(()=>[M]),_:1})])])]),e.renderSlot(a.$slots,"modal-body",{preferences:t.preferences,onToggle:u},()=>[e.createElementVNode("main",R,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.preferences,(x,k)=>(e.openBlock(),e.createElementBlock("div",{key:k},[e.renderSlot(a.$slots,"modal-preference-item",{index:k,preference:x,onToggle:u},()=>[e.createElementVNode("h5",W,e.toDisplayString(x.title),1),e.createElementVNode("p",O,e.toDisplayString(x.description),1),e.createElementVNode("div",P,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(x.items,y=>(e.openBlock(),e.createElementBlock("div",{key:y.value,class:"flex justify-between items-center"},[e.createElementVNode("h6",I,e.toDisplayString(y.label),1),e.createVNode(E,{"is-required":y.isRequired,value:y.value,"onUpdate:checkbox":u},null,8,["is-required","value"])]))),128))]),k!==t.preferences.length-1?(e.openBlock(),e.createElementBlock("hr",j)):e.createCommentVNode("",!0)])]))),128))])]),e.renderSlot(a.$slots,"modal-footer",{hasOnlyRequired:e.unref(m),onAccept:f,onDecline:C,onSave:S},()=>[e.createElementVNode("footer",J,[e.createElementVNode("div",F,[e.createElementVNode("div",{class:e.normalizeClass([{"mr-auto":!e.unref(m),"ml-auto":e.unref(m)},"space-x-3"])},[e.unref(m)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(i,{key:0,class:"whitespace-nowrap",color:"danger",onClick:C},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.declineAllBtnLabel),1)]),_:1})),e.createVNode(i,{class:"whitespace-nowrap",color:"success",onClick:f},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.acceptAllBtnLabel),1)]),_:1})],2),e.unref(m)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(i,{key:0,class:"whitespace-nowrap",onClick:S},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.savePreferencesBtnLabel),1)]),_:1}))])])])])],2),[[e.vShow,l.value]])]),_:3})],512),[[e.vShow,l.value]])]),_:3})],2)):e.createCommentVNode("",!0)],8,["to"]))}};return(()=>{const t=U;return t.install=o=>{o.component("VueCookieComply",t)},t})()});