@cypress-design/vue-alert 0.5.5 → 1.0.0

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(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))}})});
+(function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue"),require("@cypress-design/vue-icon"),require("@cypress-design/details-animation")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon","@cypress-design/details-animation"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.Alert=r(e.Vue,e.CyIcon,e.CyDetailsAnimation))})(this,function(e,r,g){"use strict";const f={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]"},y="lg",x={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"}},u="info",b="Additional details",h={class:"flex-1 font-medium"};return e.defineComponent({__name:"Alert",props:{variant:{default:void 0},type:{default:u},detailsTitle:{default:b},dismissible:{type:Boolean},noIcon:{type:Boolean},notRounded:{type:Boolean},duration:{},size:{default:y}},emits:["dismiss"],setup(k,{emit:V}){const d=e.ref(!1),c=e.useSlots(),B=V,t=k,C=e.computed(()=>t.variant??t.type),n=e.ref(null),i=e.ref(null),o=e.computed(()=>x[C.value]??{});let a;e.onMounted(()=>{t.duration&&(a=setTimeout(m,t.duration))}),e.onMounted(()=>{n.value&&i.value&&new g.DetailsAnimation(n.value,i.value)}),e.onUnmounted(()=>{a&&clearTimeout(a)});function m(){d.value=!0,B("dismiss"),a&&(clearTimeout(a),a=void 0)}const l=e.computed(()=>({strokeColor:o.value.iconColor,class:"my-[4px] mr-[8px]"})),p=e.computed(()=>{switch(C.value){case"info":return null;case"success":return()=>e.h(r.IconCheckmarkOutline,l.value);case"warning":return()=>e.h(r.IconWarningCircle,l.value);case"error":return()=>e.h(r.IconWarningCircle,l.value);default:return null}}),N=e.computed(()=>f[t.size]??{});return(s,j)=>d.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overflow-hidden text-left",[o.value.wrapperClass,{rounded:!t.notRounded}]])},[e.createElementVNode("div",{class:e.normalizeClass(["flex",[o.value.headerClass,N.value]])},[e.renderSlot(s.$slots,"icon",e.normalizeProps(e.guardReactiveProps(l.value)),()=>[!t.noIcon&&p.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p.value),e.normalizeProps(e.mergeProps({key:0},l.value)),null,16)):e.createCommentVNode("",!0)]),e.createElementVNode("div",h,[e.renderSlot(s.$slots,"default")]),s.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,class:"m-[4px] ml-[8px] h-[16px]","aria-label":"Dismiss",onClick:m},[e.createVNode(e.unref(r.IconActionDeleteLarge),{"stroke-color":o.value.iconCloseColor},null,8,["stroke-color"])])):e.createCommentVNode("",!0)],2),e.unref(c).body?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["p-[16px]",o.value.bodyClass])},[e.renderSlot(s.$slots,"body")],2)):e.createCommentVNode("",!0),e.unref(c).details?(e.openBlock(),e.createElementBlock("details",{key:1,ref_key:"detailsRef",ref:n,class:e.normalizeClass(["p-[16px] border-t border-t-1",[o.value.bodyClass,o.value.borderClass]])},[e.createElementVNode("summary",{class:e.normalizeClass(["flex font-medium cursor-pointer details-none",o.value.detailsHeaderClass])},[e.createVNode(e.unref(r.IconChevronDownSmall),{strokeColor:o.value.iconChevronColor,class:"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"},null,8,["strokeColor"]),e.createTextVNode(" "+e.toDisplayString(t.detailsTitle),1)],2),e.createElementVNode("div",{ref_key:"contentRef",ref:i},[e.createElementVNode("div",null,[e.renderSlot(s.$slots,"details")])],512)],2)):e.createCommentVNode("",!0),s.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(o.value.bodyClass)},[e.renderSlot(s.$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 cursor-pointer 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 border-gray-50 bg-white border text-gray-700"> */
+/* <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 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"> */