@cypress-design/vue-alert 0.5.2 → 0.5.4

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@cypress-design/icon-registry"),require("@cypress-design/details-animation")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/icon-registry","@cypress-design/details-animation"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.Alert=a(e.Vue,e.CyIconRegistry,e.CyDetailsAnimation))})(this,function(e,a,b){"use strict";function k(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>t[o]})}}return r.default=t,Object.freeze(r)}const m=k(a),C=({body:t,compiledClasses:r,size:o,class:s,interactiveColorsOnGroup:u,...d})=>{const c=Object.keys(d).reduce((l,i)=>(!a.ICON_COLOR_PROP_NAMES.includes(i)&&i!=="name"&&(l[i]=d[i]),l),{}),n={width:o,height:o,viewBox:`0 0 ${o} ${o}`,fill:"none",innerHTML:t,...c};return r.length&&(n.class=r.join(" ")),n},h=t=>{const{sizeWithDefault:r,compiledClasses:o}=m.getComponentAttributes({...t,availableSizes:["16","24"]}),s={16:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13 13 3M3 3l10 10" class="icon-dark"/>',24:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20 20 4M4 4l16 16" class="icon-dark"/>'}[r];if(!s)throw Error(`Icon "action-delete-large" is not available in size ${r}`);return e.h("svg",C({...t,size:r,body:s,compiledClasses:o}))},x=t=>{const{sizeWithDefault:r,compiledClasses:o}=m.getComponentAttributes({...t,availableSizes:["16"]}),s={16:'<path stroke="currentColor" stroke-width="2" d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" class="icon-dark"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 8 1.5 2L10 6" class="icon-dark"/>'}[r];if(!s)throw Error(`Icon "checkmark-outline" is not available in size ${r}`);return e.h("svg",C({...t,size:r,body:s,compiledClasses:o}))},z=t=>{const{sizeWithDefault:r,compiledClasses:o}=m.getComponentAttributes({...t,availableSizes:["8","16"]}),s={8:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 2.5 3 3 3-3" class="icon-dark"/>',16:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 6 4 4 4-4" class="icon-dark"/>'}[r];if(!s)throw Error(`Icon "chevron-down-small" is not available in size ${r}`);return e.h("svg",C({...t,size:r,body:s,compiledClasses:o}))},g=t=>{const{sizeWithDefault:r,compiledClasses:o}=m.getComponentAttributes({...t,availableSizes:["16"]}),s={16:'<path fill="currentColor" fill-rule="evenodd" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm1 5a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V5Zm-1 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="icon-dark" clip-rule="evenodd"/>'}[r];if(!s)throw Error(`Icon "warning-circle" is not available in size ${r}`);return e.h("svg",C({...t,size:r,body:s,compiledClasses:o}))},j={xs:"py-[4px] px-[8px] leading-[22px] text-[14px]",sm:"py-[8px] px-[12px] leading-[22px] text-[14px]",md:"py-[12px] px-[16px] leading-[24px] text-[16px]",lg:"p-[16px] leading-[24px] text-[16px]"},w="lg",N={neutral:{headerClass:"text-gray-800 bg-gray-100",bodyClass:"bg-gray-50 text-gray-500",borderClass:"border-gray-100",detailsHeaderClass:"text-gray-600",iconCloseColor:"gray-600",iconColor:"gray-500",iconChevronColor:"gray-300"},info:{headerClass:"text-indigo-700 bg-indigo-100",bodyClass:"bg-indigo-50 text-indigo-500",borderClass:"border-indigo-100",detailsHeaderClass:"text-indigo-600",iconCloseColor:"indigo-500",iconColor:"indigo-500",iconChevronColor:"indigo-300"},warning:{headerClass:"text-orange-700 bg-orange-100",bodyClass:"bg-orange-50 text-orange-500",borderClass:"border-orange-100",detailsHeaderClass:"text-orange-600",iconCloseColor:"orange-500",iconColor:"orange-400",iconChevronColor:"orange-300"},error:{headerClass:"text-red-700 bg-red-100",bodyClass:"bg-red-50 text-red-500",borderClass:"border-red-100",detailsHeaderClass:"text-red-600",iconCloseColor:"red-500",iconColor:"red-400",iconChevronColor:"red-300"},success:{headerClass:"text-jade-700 bg-jade-100",bodyClass:"bg-jade-50 text-jade-600",borderClass:"border-jade-100",detailsHeaderClass:"text-jade-600",iconCloseColor:"jade-600",iconColor:"jade-500",iconChevronColor:"jade-300"}},A="info",S="Additional details",V={class:"flex-1 font-medium"};return e.defineComponent({__name:"Alert",props:{type:{default:A},detailsTitle:{default:S},dismissible:{type:Boolean},noIcon:{type:Boolean},notRounded:{type:Boolean},duration:null,size:{default:w}},emits:["dismiss"],setup(t,{emit:r}){const o=t,s=e.ref(!1),u=e.useSlots(),d=e.ref(null),c=e.ref(null),n=e.computed(()=>N[o.type]??{});let l;e.onMounted(()=>{o.duration&&(l=setTimeout(i,o.duration))}),e.onMounted(()=>{d.value&&c.value&&new b.DetailsAnimation(d.value,c.value)}),e.onUnmounted(()=>{l&&clearTimeout(l)});function i(){s.value=!0,r("dismiss"),l&&(clearTimeout(l),l=void 0)}const p=e.computed(()=>({strokeColor:n.value.iconColor,class:"my-[4px] mr-[8px]"})),y=e.computed(()=>{switch(o.type){case"info":return null;case"success":return()=>e.h(x,p.value);case"warning":return()=>e.h(g,p.value);case"error":return()=>e.h(g,p.value);default:return null}}),B=e.computed(()=>j[o.size]??{});return(f,D)=>s.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overflow-hidden text-left",o.notRounded?void 0:"rounded"])},[e.createElementVNode("div",{class:e.normalizeClass(["flex",[e.unref(n).headerClass,e.unref(B)]])},[e.renderSlot(f.$slots,"icon",e.normalizeProps(e.guardReactiveProps(e.unref(p))),()=>[!o.noIcon&&e.unref(y)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(y)),e.normalizeProps(e.mergeProps({key:0},e.unref(p))),null,16)):e.createCommentVNode("",!0)]),e.createElementVNode("div",V,[e.renderSlot(f.$slots,"default")]),t.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,class:"m-[4px] ml-[8px] h-[16px]",onClick:i,"aria-label":"Dismiss"},[e.createVNode(e.unref(h),{"stroke-color":e.unref(n).iconCloseColor},null,8,["stroke-color"])])):e.createCommentVNode("",!0)],2),e.unref(u).body?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["p-[16px]",e.unref(n).bodyClass])},[e.renderSlot(f.$slots,"body")],2)):e.createCommentVNode("",!0),e.unref(u).details?(e.openBlock(),e.createElementBlock("details",{key:1,class:e.normalizeClass(["p-[16px] border-t border-t-1",[e.unref(n).bodyClass,e.unref(n).borderClass]]),ref_key:"detailsRef",ref:d},[e.createElementVNode("summary",{class:e.normalizeClass(["flex font-medium cursor-pointer details-none",e.unref(n).detailsHeaderClass])},[e.createVNode(e.unref(z),{strokeColor:e.unref(n).iconChevronColor,class:"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"},null,8,["strokeColor"]),e.createTextVNode(" "+e.toDisplayString(o.detailsTitle),1)],2),e.createElementVNode("div",{ref_key:"contentRef",ref:c},[e.createElementVNode("div",null,[e.renderSlot(f.$slots,"details")])],512)],2)):e.createCommentVNode("",!0)],2))}})});
+(function(e,C){typeof exports=="object"&&typeof module<"u"?module.exports=C(require("vue"),require("@cypress-design/icon-registry"),require("@cypress-design/details-animation")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/icon-registry","@cypress-design/details-animation"],C):(e=typeof globalThis<"u"?globalThis:e||self,e.Alert=C(e.Vue,e.CyIconRegistry,e.CyDetailsAnimation))})(this,function(e,C,k){"use strict";function h(n){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const o in n)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(a,o,r.get?r:{enumerable:!0,get:()=>n[o]})}}return a.default=n,Object.freeze(a)}const u=h(C),g=({body:n,compiledClasses:a,size:o,...r})=>{const t=Object.keys(r).reduce((s,d)=>(!C.ICON_COLOR_PROP_NAMES.includes(d)&&d!=="name"&&(s[d]=r[d]),s),{}),l={width:o,height:o,viewBox:`0 0 ${o} ${o}`,fill:"none",innerHTML:n,class:void 0,...t};return a.length&&(l.class=a.join(" ")),l},x=n=>{const{interactiveColorsOnGroup:a,name:o,...r}=n,{sizeWithDefault:t,compiledClasses:l}=u.getComponentAttributes({...r,availableSizes:["16","24"],interactiveColorsOnGroup:a}),s={16:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13 13 3M3 3l10 10" class="icon-dark"/>',24:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20 20 4M4 4l16 16" class="icon-dark"/>'}[t];if(!s)throw Error(`Icon "action-delete-large" is not available in size ${t}`);return e.h("svg",g({...r,size:t,body:s,compiledClasses:l}))},z=n=>{const{interactiveColorsOnGroup:a,name:o,...r}=n,{sizeWithDefault:t,compiledClasses:l}=u.getComponentAttributes({...r,availableSizes:["16"],interactiveColorsOnGroup:a}),s={16:'<path stroke="currentColor" stroke-width="2" d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" class="icon-dark"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 8 1.5 2L10 6" class="icon-dark"/>'}[t];if(!s)throw Error(`Icon "checkmark-outline" is not available in size ${t}`);return e.h("svg",g({...r,size:t,body:s,compiledClasses:l}))},w=n=>{const{interactiveColorsOnGroup:a,name:o,...r}=n,{sizeWithDefault:t,compiledClasses:l}=u.getComponentAttributes({...r,availableSizes:["8","16"],interactiveColorsOnGroup:a}),s={8:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 2.5 3 3 3-3" class="icon-dark"/>',16:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 6 4 4 4-4" class="icon-dark"/>'}[t];if(!s)throw Error(`Icon "chevron-down-small" is not available in size ${t}`);return e.h("svg",g({...r,size:t,body:s,compiledClasses:l}))},f=n=>{const{interactiveColorsOnGroup:a,name:o,...r}=n,{sizeWithDefault:t,compiledClasses:l}=u.getComponentAttributes({...r,availableSizes:["16"],interactiveColorsOnGroup:a}),s={16:'<path fill="currentColor" fill-rule="evenodd" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm1 5a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V5Zm-1 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="icon-dark" clip-rule="evenodd"/>'}[t];if(!s)throw Error(`Icon "warning-circle" is not available in size ${t}`);return e.h("svg",g({...r,size:t,body:s,compiledClasses:l}))},j={xs:"py-[4px] px-[8px] leading-[22px] text-[14px]",sm:"py-[8px] px-[12px] leading-[22px] text-[14px]",md:"py-[12px] px-[16px] leading-[24px] text-[16px]",lg:"p-[16px] leading-[24px] text-[16px]"},O="lg",N={neutral:{headerClass:"text-gray-800 bg-gray-100",bodyClass:"bg-gray-50 text-gray-500",borderClass:"border-gray-100",detailsHeaderClass:"text-gray-600",iconCloseColor:"gray-600",iconColor:"gray-500",iconChevronColor:"gray-300"},info:{headerClass:"text-indigo-700 bg-indigo-100",bodyClass:"bg-indigo-50 text-indigo-500",borderClass:"border-indigo-100",detailsHeaderClass:"text-indigo-600",iconCloseColor:"indigo-500",iconColor:"indigo-500",iconChevronColor:"indigo-300"},warning:{headerClass:"text-orange-700 bg-orange-100",bodyClass:"bg-orange-50 text-orange-500",borderClass:"border-orange-100",detailsHeaderClass:"text-orange-600",iconCloseColor:"orange-500",iconColor:"orange-400",iconChevronColor:"orange-300"},error:{headerClass:"text-red-700 bg-red-100",bodyClass:"bg-red-50 text-red-500",borderClass:"border-red-100",detailsHeaderClass:"text-red-600",iconCloseColor:"red-500",iconColor:"red-400",iconChevronColor:"red-300"},success:{headerClass:"text-jade-700 bg-jade-100",bodyClass:"bg-jade-50 text-jade-600",borderClass:"border-jade-100",detailsHeaderClass:"text-jade-600",iconCloseColor:"jade-600",iconColor:"jade-500",iconChevronColor:"jade-300"},clear:{wrapperClass:"border-gray-50 bg-white border text-gray-700",headerClass:"",bodyClass:"border-gray-50 border-t",borderClass:"border-gray-50",detailsHeaderClass:"text-gray-700",iconCloseColor:"gray-600",iconColor:"gray-500",iconChevronColor:"gray-300"}},V="info",B="Additional details",S={class:"flex-1 font-medium"};return e.defineComponent({__name:"Alert",props:{variant:{default:void 0},type:{default:V},detailsTitle:{default:B},dismissible:{type:Boolean},noIcon:{type:Boolean},notRounded:{type:Boolean},duration:{},size:{default:O}},emits:["dismiss"],setup(n,{emit:a}){const o=n,r=e.ref(!1),t=e.useSlots(),l=e.computed(()=>o.variant??o.type),s=e.ref(null),d=e.ref(null),i=e.computed(()=>N[l.value]??{});let p;e.onMounted(()=>{o.duration&&(p=setTimeout(y,o.duration))}),e.onMounted(()=>{s.value&&d.value&&new k.DetailsAnimation(s.value,d.value)}),e.onUnmounted(()=>{p&&clearTimeout(p)});function y(){r.value=!0,a("dismiss"),p&&(clearTimeout(p),p=void 0)}const m=e.computed(()=>({strokeColor:i.value.iconColor,class:"my-[4px] mr-[8px]"})),b=e.computed(()=>{switch(l.value){case"info":return null;case"success":return()=>e.h(z,m.value);case"warning":return()=>e.h(f,m.value);case"error":return()=>e.h(f,m.value);default:return null}}),A=e.computed(()=>j[o.size]??{});return(c,v)=>r.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overflow-hidden text-left",[i.value.wrapperClass,{rounded:!o.notRounded}]])},[e.createElementVNode("div",{class:e.normalizeClass(["flex",[i.value.headerClass,A.value]])},[e.renderSlot(c.$slots,"icon",e.normalizeProps(e.guardReactiveProps(m.value)),()=>[!o.noIcon&&b.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(b.value),e.normalizeProps(e.mergeProps({key:0},m.value)),null,16)):e.createCommentVNode("",!0)]),e.createElementVNode("div",S,[e.renderSlot(c.$slots,"default")]),c.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,class:"m-[4px] ml-[8px] h-[16px]",onClick:y,"aria-label":"Dismiss"},[e.createVNode(e.unref(x),{"stroke-color":i.value.iconCloseColor},null,8,["stroke-color"])])):e.createCommentVNode("",!0)],2),e.unref(t).body?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["p-[16px]",i.value.bodyClass])},[e.renderSlot(c.$slots,"body")],2)):e.createCommentVNode("",!0),e.unref(t).details?(e.openBlock(),e.createElementBlock("details",{key:1,class:e.normalizeClass(["p-[16px] border-t border-t-1",[i.value.bodyClass,i.value.borderClass]]),ref_key:"detailsRef",ref:s},[e.createElementVNode("summary",{class:e.normalizeClass(["flex font-medium cursor-pointer details-none",i.value.detailsHeaderClass])},[e.createVNode(e.unref(w),{strokeColor:i.value.iconChevronColor,class:"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"},null,8,["strokeColor"]),e.createTextVNode(" "+e.toDisplayString(o.detailsTitle),1)],2),e.createElementVNode("div",{ref_key:"contentRef",ref:d},[e.createElementVNode("div",null,[e.renderSlot(c.$slots,"details")])],512)],2)):e.createCommentVNode("",!0),c.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(i.value.bodyClass)},[e.renderSlot(c.$slots,"footer")],2)):e.createCommentVNode("",!0)],2))}})});
 //# sourceMappingURL=index.umd.js.map
 
-/* <wind-keep class="my-[4px] mr-[8px] overflow-hidden text-left rounded flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t border-t-1 cursor-pointer details-none transition transform -rotate-90 open:rotate-0 py-[4px] px-[8px] leading-[22px] text-[14px] py-[8px] px-[12px] py-[12px] px-[16px] leading-[24px] text-[16px] text-gray-800 bg-gray-100 bg-gray-50 text-gray-500 border-gray-100 text-gray-600 text-indigo-700 bg-indigo-100 bg-indigo-50 text-indigo-500 border-indigo-100 text-indigo-600 text-orange-700 bg-orange-100 bg-orange-50 text-orange-500 border-orange-100 text-orange-600 text-red-700 bg-red-100 bg-red-50 text-red-500 border-red-100 text-red-600 text-jade-700 bg-jade-100 bg-jade-50 text-jade-600 border-jade-100 icon-dark-gray-600 icon-dark-gray-500 icon-dark-gray-300 icon-dark-indigo-500 icon-dark-indigo-300 icon-dark-orange-500 icon-dark-orange-400 icon-dark-orange-300 icon-dark-red-500 icon-dark-red-400 icon-dark-red-300 icon-dark-jade-600 icon-dark-jade-500 icon-dark-jade-300"> */
+/* <wind-keep class="my-[4px] mr-[8px] overflow-hidden text-left flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t border-t-1 cursor-pointer details-none transition transform -rotate-90 open:rotate-0 py-[4px] px-[8px] leading-[22px] text-[14px] py-[8px] px-[12px] py-[12px] px-[16px] leading-[24px] text-[16px] text-gray-800 bg-gray-100 bg-gray-50 text-gray-500 border-gray-100 text-gray-600 text-indigo-700 bg-indigo-100 bg-indigo-50 text-indigo-500 border-indigo-100 text-indigo-600 text-orange-700 bg-orange-100 bg-orange-50 text-orange-500 border-orange-100 text-orange-600 text-red-700 bg-red-100 bg-red-50 text-red-500 border-red-100 text-red-600 text-jade-700 bg-jade-100 bg-jade-50 text-jade-600 border-jade-100 border-gray-50 bg-white border text-gray-700 icon-dark-gray-600 icon-dark-gray-500 icon-dark-gray-300 icon-dark-indigo-500 icon-dark-indigo-300 icon-dark-orange-500 icon-dark-orange-400 icon-dark-orange-300 icon-dark-red-500 icon-dark-red-400 icon-dark-red-300 icon-dark-jade-600 icon-dark-jade-500 icon-dark-jade-300"> */