@cypress-design/vue-alert 0.1.2 → 0.2.0

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(e,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(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"],i):(e=typeof globalThis<"u"?globalThis:e||self,e.Alert=i(e.Vue,e.CyIconRegistry,e.CyDetailsAnimation))})(this,function(e,i,h){"use strict";function k(o){if(o&&o.__esModule)return o;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:()=>o[t]})}}return r.default=o,Object.freeze(r)}const m=k(i),p=({body:o,compiledClasses:r,size:t,class:s,interactiveColorsOnGroup:u,...a})=>{const c=Object.keys(a).reduce((l,d)=>(i.ICON_COLOR_PROP_NAMES.includes(d)||(l[d]=a[d]),l),{}),n={width:t,height:t,fill:"none",innerHTML:o,...c};return r.length&&(n.class=r.join(" ")),n},x=o=>{const{sizeWithDefault:r,compiledClasses:t}=m.getComponentAttributes({...o,availableSizes:["16"]}),s={16:'<path d="M3 13 13 3M3 3l10 10" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'}[r];if(!s)throw Error(`Icon "action-delete-large" is not available in size ${r}`);return e.h("svg",p({...o,size:r,body:s,compiledClasses:t}))},z=o=>{const{sizeWithDefault:r,compiledClasses:t}=m.getComponentAttributes({...o,availableSizes:["16"]}),s={16:'<path d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" stroke="currentColor" stroke-width="2" class="icon-dark"/><path d="m6 8 1.5 2L10 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>'}[r];if(!s)throw Error(`Icon "checkmark-outline" is not available in size ${r}`);return e.h("svg",p({...o,size:r,body:s,compiledClasses:t}))},j=o=>{const{sizeWithDefault:r,compiledClasses:t}=m.getComponentAttributes({...o,availableSizes:["8","16"]}),s={8:'<path d="m1 2.5 3 3 3-3" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',16:'<path d="m4 6 4 4 4-4" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'}[r];if(!s)throw Error(`Icon "chevron-down-small" is not available in size ${r}`);return e.h("svg",p({...o,size:r,body:s,compiledClasses:t}))},g=o=>{const{sizeWithDefault:r,compiledClasses:t}=m.getComponentAttributes({...o,availableSizes:["16"]}),s={16:'<path fill-rule="evenodd" clip-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" fill="currentColor" class="icon-dark"/>'}[r];if(!s)throw Error(`Icon "warning-circle" is not available in size ${r}`);return e.h("svg",p({...o,size:r,body:s,compiledClasses:t}))},y={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"}},w={class:"flex-1 font-medium"},N={class:"mt-16px"};return e.defineComponent({__name:"Alert",props:{type:{default:"info"},detailsTitle:{default:"Additional details"},dismissible:{type:Boolean},noIcon:{type:Boolean},notRounded:{type:Boolean},duration:null},emits:["dismiss"],setup(o,{emit:r}){const t=o,s=e.ref(!1),u=e.useSlots(),a=e.ref(null),c=e.ref(null),n=e.computed(()=>y[t.type]);let l;e.onMounted(()=>{t.duration&&(l=setTimeout(d,t.duration))}),e.onMounted(()=>{a.value&&c.value&&new h.DetailsAnimation(a.value,c.value)}),e.onUnmounted(()=>{l&&clearTimeout(l)});function d(){s.value=!0,r("dismiss"),l&&(clearTimeout(l),l=void 0)}const C=e.computed(()=>({strokeColor:y[t.type].iconColor,class:"my-4px mr-8px"})),b=e.computed(()=>{switch(t.type){case"info":return null;case"success":return()=>e.h(z,C.value);case"warning":return()=>e.h(g,C.value);case"error":return()=>e.h(g,C.value);default:return null}});return(f,V)=>s.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overflow-hidden text-left",t.notRounded?void 0:"rounded"])},[e.createElementVNode("div",{class:e.normalizeClass(["flex p-16px",e.unref(n).headerClass])},[e.renderSlot(f.$slots,"icon",e.normalizeProps(e.guardReactiveProps(e.unref(C))),()=>[!t.noIcon&&e.unref(b)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(b)),e.normalizeProps(e.mergeProps({key:0},e.unref(C))),null,16)):e.createCommentVNode("",!0)]),e.createElementVNode("div",w,[e.renderSlot(f.$slots,"default")]),o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,class:"m-4px ml-8px h-16px",onClick:d,"aria-label":"Dismiss"},[e.createVNode(e.unref(x),{"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-1",[e.unref(n).bodyClass,e.unref(n).borderClass]]),ref_key:"detailsRef",ref:a},[e.createElementVNode("summary",{class:e.normalizeClass(["flex font-medium cursor-pointer details-none",e.unref(n).detailsHeaderClass])},[e.createVNode(e.unref(j),{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(t.detailsTitle),1)],2),e.createElementVNode("div",{ref_key:"contentRef",ref:c},[e.createElementVNode("div",N,[e.renderSlot(f.$slots,"details")])],512)],2)):e.createCommentVNode("",!0)],2))}})});
+(function(e,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(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"],i):(e=typeof globalThis<"u"?globalThis:e||self,e.Alert=i(e.Vue,e.CyIconRegistry,e.CyDetailsAnimation))})(this,function(e,i,k){"use strict";function h(r){if(r&&r.__esModule)return r;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const o in r)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(r,o);Object.defineProperty(t,o,s.get?s:{enumerable:!0,get:()=>r[o]})}}return t.default=r,Object.freeze(t)}const C=h(i),m=({body:r,compiledClasses:t,size:o,class:s,interactiveColorsOnGroup:u,...a})=>{const c=Object.keys(a).reduce((l,d)=>(i.ICON_COLOR_PROP_NAMES.includes(d)||(l[d]=a[d]),l),{}),n={width:o,height:o,viewBox:`0 0 ${o} ${o}`,fill:"none",innerHTML:r,...c};return t.length&&(n.class=t.join(" ")),n},x=r=>{const{sizeWithDefault:t,compiledClasses:o}=C.getComponentAttributes({...r,availableSizes:["16","24"]}),s={16:'<path d="M3 13 13 3M3 3l10 10" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',24:'<path d="M4 20 20 4M4 4l16 16" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'}[t];if(!s)throw Error(`Icon "action-delete-large" is not available in size ${t}`);return e.h("svg",m({...r,size:t,body:s,compiledClasses:o}))},z=r=>{const{sizeWithDefault:t,compiledClasses:o}=C.getComponentAttributes({...r,availableSizes:["16"]}),s={16:'<path d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" stroke="currentColor" stroke-width="2" class="icon-dark"/><path d="m6 8 1.5 2L10 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>'}[t];if(!s)throw Error(`Icon "checkmark-outline" is not available in size ${t}`);return e.h("svg",m({...r,size:t,body:s,compiledClasses:o}))},j=r=>{const{sizeWithDefault:t,compiledClasses:o}=C.getComponentAttributes({...r,availableSizes:["8","16"]}),s={8:'<path d="m1 2.5 3 3 3-3" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',16:'<path d="m4 6 4 4 4-4" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'}[t];if(!s)throw Error(`Icon "chevron-down-small" is not available in size ${t}`);return e.h("svg",m({...r,size:t,body:s,compiledClasses:o}))},g=r=>{const{sizeWithDefault:t,compiledClasses:o}=C.getComponentAttributes({...r,availableSizes:["16"]}),s={16:'<path fill-rule="evenodd" clip-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" fill="currentColor" class="icon-dark"/>'}[t];if(!s)throw Error(`Icon "warning-circle" is not available in size ${t}`);return e.h("svg",m({...r,size:t,body:s,compiledClasses:o}))},w={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"},N="lg",y={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:N}},emits:["dismiss"],setup(r,{emit:t}){const o=r,s=e.ref(!1),u=e.useSlots(),a=e.ref(null),c=e.ref(null),n=e.computed(()=>y[o.type]);let l;e.onMounted(()=>{o.duration&&(l=setTimeout(d,o.duration))}),e.onMounted(()=>{a.value&&c.value&&new k.DetailsAnimation(a.value,c.value)}),e.onUnmounted(()=>{l&&clearTimeout(l)});function d(){s.value=!0,t("dismiss"),l&&(clearTimeout(l),l=void 0)}const p=e.computed(()=>({strokeColor:y[o.type].iconColor,class:"my-4px mr-8px"})),b=e.computed(()=>{switch(o.type){case"info":return null;case"success":return()=>e.h(z,p.value);case"warning":return()=>e.h(g,p.value);case"error":return()=>e.h(g,p.value);default:return null}}),_=e.computed(()=>w[o.size]);return(f,E)=>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(_)]])},[e.renderSlot(f.$slots,"icon",e.normalizeProps(e.guardReactiveProps(e.unref(p))),()=>[!o.noIcon&&e.unref(b)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(b)),e.normalizeProps(e.mergeProps({key:0},e.unref(p))),null,16)):e.createCommentVNode("",!0)]),e.createElementVNode("div",V,[e.renderSlot(f.$slots,"default")]),r.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,class:"m-4px ml-8px h-16px",onClick:d,"aria-label":"Dismiss"},[e.createVNode(e.unref(x),{"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-1",[e.unref(n).bodyClass,e.unref(n).borderClass]]),ref_key:"detailsRef",ref:a},[e.createElementVNode("summary",{class:e.normalizeClass(["flex font-medium cursor-pointer details-none",e.unref(n).detailsHeaderClass])},[e.createVNode(e.unref(j),{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))}})});
 
-/* <windicss-keep class="overflow-hidden text-left rounded flex p-16px flex-1 font-medium m-4px ml-8px h-16px border-t-1 cursor-pointer details-none my-4px mr-8px transition transform -rotate-90 open:rotate-0 mt-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"> */
+/* <windicss-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-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"> */
 //# sourceMappingURL=index.umd.js.map