@cypress-design/vue-alert 0.0.2 → 0.1.0

package/dist/index.umd.js

@@ -1,225 +1,4 @@
-'use strict';
+(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@cypress-design/icon-registry")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/icon-registry"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.Alert=a(e.Vue,e.IconRegistry))})(this,function(e,a){"use strict";function b(o){if(o&&o.__esModule)return o;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const r in o)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(o,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>o[r]})}}return t.default=o,Object.freeze(t)}const m=b(a),p=({body:o,compiledClasses:t,size:r,class:s,interactiveColorsOnGroup:c,...n})=>{const l=Object.keys(n).reduce((i,d)=>(a.ICON_COLOR_PROP_NAMES.includes(d)||(i[d]=n[d]),i),{}),C={width:r,height:r,fill:"none",innerHTML:o,...l};return t.length&&(C.class=t.join(" ")),C},y=o=>{const{sizeWithDefault:t,compiledClasses:r}=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"/>'}[t];if(!s)throw Error(`Icon "action-delete-large" is not available in size ${t}`);return e.h("svg",p({...o,size:t,body:s,compiledClasses:r}))},h=o=>{const{sizeWithDefault:t,compiledClasses:r}=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="#1B1E2E" stroke-width="2" class="icon-dark"/><path d="m6 8 1.5 2L10 6" stroke="#1B1E2E" 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",p({...o,size:t,body:s,compiledClasses:r}))},k=o=>{const{sizeWithDefault:t,compiledClasses:r}=m.getComponentAttributes({...o,availableSizes:["8","16"]}),s={8:'<path d="m1 2.5 3 3 3-3" stroke="#1B1E2E" 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",p({...o,size:t,body:s,compiledClasses:r}))},u=o=>{const{sizeWithDefault:t,compiledClasses:r}=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="#DB7903" class="icon-dark"/>'}[t];if(!s)throw Error(`Icon "warning-circle" is not available in size ${t}`);return e.h("svg",p({...o,size:t,body:s,compiledClasses:r}))},g={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"}},j="",x=(o,t)=>{const r=o.__vccOpts||o;for(const[s,c]of t)r[s]=c;return r},_={class:"flex-1 font-medium"},z={class:"mt-16px"};return x(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:t}){const r=o,s=e.ref(!1),c=e.useSlots(),n=e.computed(()=>g[r.type]);let l;e.onMounted(()=>{r.duration&&(l=setTimeout(C,r.duration))}),e.onUnmounted(()=>{l&&clearTimeout(l)});function C(){s.value=!0,t("dismiss"),l&&(clearTimeout(l),l=void 0)}const i=e.computed(()=>({strokeColor:g[r.type].iconColor,class:"my-4px mr-8px"})),d=e.computed(()=>{switch(r.type){case"info":return null;case"success":return()=>e.h(h,i.value);case"warning":return()=>e.h(u,i.value);case"error":return()=>e.h(u,i.value);default:return null}});return(f,B)=>s.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overflow-hidden text-left",r.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(i))),()=>[!r.noIcon&&e.unref(d)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),e.normalizeProps(e.mergeProps({key:0},e.unref(i))),null,16)):e.createCommentVNode("",!0)],!0),e.createElementVNode("div",_,[e.renderSlot(f.$slots,"default",{},void 0,!0)]),o.dismissible?(e.openBlock(),e.createElementBlock("button",{key:0,class:"m-4px ml-8px h-16px",onClick:C,"aria-label":"Dismiss"},[e.createVNode(e.unref(y),{"stroke-color":e.unref(n).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",e.unref(n).bodyClass])},[e.renderSlot(f.$slots,"body",{},void 0,!0)],2)):e.createCommentVNode("",!0),e.unref(c).details?(e.openBlock(),e.createElementBlock("details",{key:1,class:e.normalizeClass(["p-16px border-t-1",[e.unref(n).bodyClass,e.unref(n).borderClass]])},[e.createElementVNode("summary",{class:e.normalizeClass(["flex font-medium cursor-pointer",e.unref(n).detailsHeaderClass])},[e.createVNode(e.unref(k),{strokeColor:e.unref(n).iconChevronColor,class:"icon my-4px mr-8px"},null,8,["strokeColor"]),e.createTextVNode(" "+e.toDisplayString(r.detailsTitle),1)],2),e.createElementVNode("div",z,[e.renderSlot(f.$slots,"details",{},void 0,!0)])],2)):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-5e7e1d8e"]])});
+/* <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 my-4px mr-8px mt-16px transform 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"> */
 
-var vue = require('vue');
-var vueIcon = require('@cypress-design/vue-icon');
-
-const alertClasses = {
-    neutral: {
-        headerClass: 'text-gray-800 bg-gray-100',
-        bodyClass: 'bg-gray-50 text-gray-500',
-        borderClass: 'border-gray-100',
-        detailsHeaderClass: 'text-gray-600',
-        /* <windi-keep strokeColor="gray-600"/> */
-        iconCloseColor: 'gray-600',
-        /* <windi-keep strokeColor="gray-500"/> */
-        iconColor: 'gray-500',
-        /* <windi-keep strokeColor="gray-300"/> */
-        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',
-        /* <windi-keep strokeColor="indigo-500"/> */
-        iconCloseColor: 'indigo-500',
-        /* <windi-keep strokeColor="indigo-500"/> */
-        iconColor: 'indigo-500',
-        /* <windi-keep strokeColor="indigo-300"/> */
-        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',
-        /* <windi-keep strokeColor="orange-500"/> */
-        iconCloseColor: 'orange-500',
-        /* <windi-keep strokeColor="orange-400"/> */
-        iconColor: 'orange-400',
-        /* <windi-keep strokeColor="orange-300"/> */
-        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',
-        /* <windi-keep strokeColor="red-500"/> */
-        iconCloseColor: 'red-500',
-        /* <windi-keep strokeColor="red-400"/> */
-        iconColor: 'red-400',
-        /* <windi-keep strokeColor="red-300"/> */
-        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',
-        /* <windi-keep strokeColor="jade-600"/> */
-        iconCloseColor: 'jade-600',
-        /* <windi-keep strokeColor="jade-500"/> */
-        iconColor: 'jade-500',
-        /* <windi-keep strokeColor="jade-300"/> */
-        iconChevronColor: 'jade-300',
-    },
-};
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = "\ndetails summary .icon[data-v-836252c4] {\n  transform: rotate(-90deg);\n}\ndetails[open] summary .icon[data-v-836252c4] {\n  transform: rotate(0);\n}\n";
-styleInject(css_248z);
-
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-const _hoisted_1 = { class: "flex-1 font-medium" };
-const _hoisted_2 = { class: "mt-16px" };
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "Alert",
-  props: {
-    type: { type: null, required: false, default: "info" },
-    detailsTitle: { type: String, required: false, default: "Additional details" },
-    dismissible: { type: Boolean, required: false },
-    noIcon: { type: Boolean, required: false },
-    notRounded: { type: Boolean, required: false },
-    duration: { type: Number, required: false }
-  },
-  emits: ["dismiss"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const dismissed = vue.ref(false);
-    const slots = vue.useSlots();
-    const typeClasses = vue.computed(() => {
-      return alertClasses[props.type];
-    });
-    let timeout;
-    vue.onMounted(() => {
-      if (props.duration) {
-        timeout = setTimeout(dismiss, props.duration);
-      }
-    });
-    vue.onUnmounted(() => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    });
-    function dismiss() {
-      dismissed.value = true;
-      emit("dismiss");
-      if (timeout) {
-        clearTimeout(timeout);
-        timeout = void 0;
-      }
-    }
-    const computedIconProps = vue.computed(() => {
-      return {
-        strokeColor: alertClasses[props.type].iconColor,
-        class: "my-4px mr-8px"
-      };
-    });
-    const icon = vue.computed(() => {
-      switch (props.type) {
-        case "info":
-          return null;
-        case "success":
-          return () => vue.h(vueIcon.IconCheckmarkOutline, computedIconProps.value);
-        case "warning":
-          return () => vue.h(vueIcon.IconWarningCircle, computedIconProps.value);
-        case "error":
-          return () => vue.h(vueIcon.IconWarningCircle, computedIconProps.value);
-        default:
-          return null;
-      }
-    });
-    return (_ctx, _cache) => {
-      return !dismissed.value ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
-        class: vue.normalizeClass(["overflow-hidden text-left", props.notRounded ? void 0 : "rounded"])
-      }, [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(["flex p-16px", vue.unref(typeClasses).headerClass])
-        }, [
-          vue.createCommentVNode(" @slot replace the default left icon here "),
-          vue.renderSlot(_ctx.$slots, "icon", vue.normalizeProps(vue.guardReactiveProps(vue.unref(computedIconProps))), () => [
-            !props.noIcon && vue.unref(icon) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(icon)), vue.normalizeProps(vue.mergeProps({ key: 0 }, vue.unref(computedIconProps))), null, 16)) : vue.createCommentVNode("v-if", true)
-          ], true),
-          vue.createElementVNode("div", _hoisted_1, [
-            vue.createCommentVNode(" @slot title of the alert "),
-            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          __props.dismissible ? (vue.openBlock(), vue.createElementBlock("button", {
-            key: 0,
-            class: "m-4px ml-8px h-16px",
-            onClick: dismiss,
-            "aria-label": "Dismiss"
-          }, [
-            vue.createVNode(vue.unref(vueIcon.IconActionDeleteLarge), {
-              "stroke-color": vue.unref(typeClasses).iconCloseColor
-            }, null, 8, ["stroke-color"])
-          ])) : vue.createCommentVNode("v-if", true)
-        ], 2),
-        vue.unref(slots).body ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass(["p-16px", vue.unref(typeClasses).bodyClass])
-        }, [
-          vue.createCommentVNode(" @slot body/details of the alert "),
-          vue.renderSlot(_ctx.$slots, "body", {}, void 0, true)
-        ], 2)) : vue.createCommentVNode("v-if", true),
-        vue.unref(slots).details ? (vue.openBlock(), vue.createElementBlock("details", {
-          key: 1,
-          class: vue.normalizeClass(["p-16px border-t-1", [vue.unref(typeClasses).bodyClass, vue.unref(typeClasses).borderClass]])
-        }, [
-          vue.createElementVNode("summary", {
-            class: vue.normalizeClass(["flex font-medium cursor-pointer", vue.unref(typeClasses).detailsHeaderClass])
-          }, [
-            vue.createVNode(vue.unref(vueIcon.IconChevronDownSmall), {
-              strokeColor: vue.unref(typeClasses).iconChevronColor,
-              class: "icon my-4px mr-8px"
-            }, null, 8, ["strokeColor"]),
-            vue.createTextVNode(" " + vue.toDisplayString(props.detailsTitle), 1)
-          ], 2),
-          vue.createElementVNode("div", _hoisted_2, [
-            vue.createCommentVNode("@slot Togglable additional details"),
-            vue.renderSlot(_ctx.$slots, "details", {}, void 0, true)
-          ])
-        ], 2)) : vue.createCommentVNode("v-if", true)
-      ], 2)) : vue.createCommentVNode("v-if", true);
-    };
-  }
-});
-var Alert = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-836252c4"], ["__file", "/home/runner/work/cypress-design/cypress-design/components/Alert/vue/Alert.vue"]]);
-
-module.exports = Alert;
 //# sourceMappingURL=index.umd.js.map