npm - @cypress-design/vue-alert - Versions diffs - 1.0.0 → 2.0.0-next.0 - Mend

@cypress-design/vue-alert 1.0.0 → 2.0.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/.turbo/turbo-build.log CHANGED Viewed

@@ -1,3 +1,4 @@
+yarn run v1.22.22
 $ yarn build:module && yarn build:types
 $ yarn vite build
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
@@ -7,8 +8,9 @@ transforming...
 [32m✓[39m 4 modules transformed.
 rendering chunks...
 computing gzip size...
-[2mdist/[22m[36mindex.es.mjs  [39m[1m[2m7.83 kB[22m[1m[22m[2m │ gzip: 2.13 kB[22m[2m │ map: 11.41 kB[22m
-[2mdist/[22m[36mindex.umd.js  [39m[1m[2m6.23 kB[22m[1m[22m[2m │ gzip: 1.92 kB[22m[2m │ map: 10.97 kB[22m
-[32m✓ built in 3.71s[39m
+[2mdist/[22m[36mindex.es.mjs  [39m[1m[2m6.68 kB[22m[1m[22m[2m │ gzip: 1.89 kB[22m[2m │ map: 11.92 kB[22m
+[2mdist/[22m[36mindex.umd.js  [39m[1m[2m5.89 kB[22m[1m[22m[2m │ gzip: 1.73 kB[22m[2m │ map: 11.57 kB[22m
+[32m✓ built in 4.43s[39m
 $ yarn vue-tsc --project ./tsconfig.build.json
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json
+Done in 20.35s.

package/Alert.vue CHANGED Viewed

@@ -10,12 +10,12 @@ import {
 import { DetailsAnimation } from '@cypress-design/details-animation'
 import {
   AlertSize,
-  alertSizesClasses,
+  CssAlertSizesClasses,
   AlertVariant,
   defaultAlertSize,
   defaultAlertTitle,
   defaultAlertVariant,
-  alertClasses,
+  CssAlertClasses,
 } from '@cypress-design/constants-alert'
 const dismissed = ref(false)
@@ -81,7 +81,7 @@ const detailsRef = ref(null)
 const contentRef = ref(null)
 const variantClasses = computed(() => {
-  return alertClasses[variant.value] ?? {}
+  return CssAlertClasses[variant.value] ?? {}
 })
 let timeout: number | undefined
@@ -136,7 +136,7 @@ const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
 })
 const sizeClasses = computed(() => {
-  return alertSizesClasses[props.size] ?? {}
+  return CssAlertSizesClasses[props.size] ?? {}
 })
 </script>

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,16 @@
 # @cypress-design/vue-alert
+## 2.0.0-next.0
+### Major Changes
+- [#468](https://github.com/cypress-io/cypress-design/pull/468) [`3236662`](https://github.com/cypress-io/cypress-design/commit/3236662fdecd5abbceadce750098a75301d48f88) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use tailwind components to manage specificity of styles
+### Patch Changes
+- Updated dependencies [[`3236662`](https://github.com/cypress-io/cypress-design/commit/3236662fdecd5abbceadce750098a75301d48f88)]:
+  - @cypress-design/vue-icon@2.0.0-next.0
 ## 1.0.0
 ### Major Changes

package/dist/index.es.mjs CHANGED Viewed

@@ -1,86 +1,68 @@
-import { defineComponent as T, ref as m, useSlots as B, computed as i, onMounted as k, onUnmounted as D, h as v, openBlock as a, createElementBlock as d, normalizeClass as l, createElementVNode as c, renderSlot as u, normalizeProps as j, guardReactiveProps as S, createBlock as $, resolveDynamicComponent as V, mergeProps as N, createCommentVNode as t, createVNode as w, unref as C, createTextVNode as P, toDisplayString as _ } from "vue";
-import { IconWarningCircle as z, IconCheckmarkOutline as E, IconActionDeleteLarge as L, IconChevronDownSmall as M } from "@cypress-design/vue-icon";
+import { defineComponent as B, ref as v, useSlots as D, computed as n, onMounted as w, onUnmounted as S, h as f, openBlock as r, createElementBlock as d, normalizeClass as o, createElementVNode as i, renderSlot as u, normalizeProps as x, guardReactiveProps as $, createBlock as V, resolveDynamicComponent as N, mergeProps as P, createCommentVNode as t, createVNode as z, unref as C, createTextVNode as j, toDisplayString as _ } from "vue";
+import { IconWarningCircle as A, IconCheckmarkOutline as E, IconActionDeleteLarge as L, IconChevronDownSmall as M } from "@cypress-design/vue-icon";
 import { DetailsAnimation as O } from "@cypress-design/details-animation";
 const U = {
-  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]"
+  xs: "cyds-alert-alertsizesclasses-xs",
+  sm: "cyds-alert-alertsizesclasses-sm",
+  md: "cyds-alert-alertsizesclasses-md",
+  lg: "cyds-alert-alertsizesclasses-lg"
 }, W = "lg", q = {
   neutral: {
-    headerClass: "text-gray-800 bg-gray-100",
-    bodyClass: "bg-gray-50 text-gray-500",
-    borderClass: "border-gray-100",
-    detailsHeaderClass: "text-gray-600",
-    /* <tw-keep strokeColor="gray-600"/> */
+    headerClass: "cyds-alert-alertclasses-neutral-headerclass",
+    bodyClass: "cyds-alert-alertclasses-neutral-bodyclass",
+    borderClass: "cyds-alert-alertclasses-neutral-borderclass",
+    detailsHeaderClass: "cyds-alert-alertclasses-neutral-detailsheaderclass",
     iconCloseColor: "gray-600",
-    /* <tw-keep strokeColor="gray-500"/> */
     iconColor: "gray-500",
-    /* <tw-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",
-    /* <tw-keep strokeColor="indigo-500"/> */
+    headerClass: "cyds-alert-alertclasses-info-headerclass",
+    bodyClass: "cyds-alert-alertclasses-info-bodyclass",
+    borderClass: "cyds-alert-alertclasses-info-borderclass",
+    detailsHeaderClass: "cyds-alert-alertclasses-info-detailsheaderclass",
     iconCloseColor: "indigo-500",
-    /* <tw-keep strokeColor="indigo-500"/> */
     iconColor: "indigo-500",
-    /* <tw-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",
-    /* <tw-keep strokeColor="orange-500"/> */
+    headerClass: "cyds-alert-alertclasses-warning-headerclass",
+    bodyClass: "cyds-alert-alertclasses-warning-bodyclass",
+    borderClass: "cyds-alert-alertclasses-warning-borderclass",
+    detailsHeaderClass: "cyds-alert-alertclasses-warning-detailsheaderclass",
     iconCloseColor: "orange-500",
-    /* <tw-keep strokeColor="orange-400"/> */
     iconColor: "orange-400",
-    /* <tw-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",
-    /* <tw-keep strokeColor="red-500"/> */
+    headerClass: "cyds-alert-alertclasses-error-headerclass",
+    bodyClass: "cyds-alert-alertclasses-error-bodyclass",
+    borderClass: "cyds-alert-alertclasses-error-borderclass",
+    detailsHeaderClass: "cyds-alert-alertclasses-error-detailsheaderclass",
     iconCloseColor: "red-500",
-    /* <tw-keep strokeColor="red-400"/> */
     iconColor: "red-400",
-    /* <tw-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",
-    /* <tw-keep strokeColor="jade-600"/> */
+    headerClass: "cyds-alert-alertclasses-success-headerclass",
+    bodyClass: "cyds-alert-alertclasses-success-bodyclass",
+    borderClass: "cyds-alert-alertclasses-success-borderclass",
+    detailsHeaderClass: "cyds-alert-alertclasses-success-detailsheaderclass",
     iconCloseColor: "jade-600",
-    /* <tw-keep strokeColor="jade-500"/> */
     iconColor: "jade-500",
-    /* <tw-keep strokeColor="jade-300"/> */
     iconChevronColor: "jade-300"
   },
   clear: {
-    wrapperClass: "border-gray-50 bg-white border text-gray-700",
+    wrapperClass: "cyds-alert-alertclasses-clear-wrapperclass",
     headerClass: "",
-    bodyClass: "border-gray-50 border-t",
-    borderClass: "border-gray-50",
-    detailsHeaderClass: "text-gray-700",
-    /* <tw-keep strokeColor="gray-600"/> */
+    bodyClass: "cyds-alert-alertclasses-clear-bodyclass",
+    borderClass: "cyds-alert-alertclasses-clear-borderclass",
+    detailsHeaderClass: "cyds-alert-alertclasses-clear-detailsheaderclass",
     iconCloseColor: "gray-600",
-    /* <tw-keep strokeColor="gray-500"/> */
     iconColor: "gray-500",
-    /* <tw-keep strokeColor="gray-300"/> */
     iconChevronColor: "gray-300"
   }
-}, F = "info", G = "Additional details", J = { class: "flex-1 font-medium" }, Z = /* @__PURE__ */ T({
+}, F = "info", G = "Additional details", J = { class: "flex-1 font-medium" }, Z = /* @__PURE__ */ B({
   __name: "Alert",
   props: {
     variant: { default: void 0 },
@@ -93,95 +75,95 @@ const U = {
     size: { default: W }
   },
   emits: ["dismiss"],
-  setup(A, { emit: H }) {
-    const x = m(!1), y = B(), I = H, o = A, b = i(() => o.variant ?? o.type), p = m(null), g = m(null), e = i(() => q[b.value] ?? {});
-    let s;
-    k(() => {
-      o.duration && (s = setTimeout(f, o.duration));
-    }), k(() => {
-      p.value && g.value && new O(p.value, g.value);
-    }), D(() => {
-      s && clearTimeout(s);
+  setup(H, { emit: I }) {
+    const p = v(!1), b = D(), R = I, s = H, h = n(() => s.variant ?? s.type), y = v(null), m = v(null), e = n(() => q[h.value] ?? {});
+    let a;
+    w(() => {
+      s.duration && (a = setTimeout(g, s.duration));
+    }), w(() => {
+      y.value && m.value && new O(y.value, m.value);
+    }), S(() => {
+      a && clearTimeout(a);
     });
-    function f() {
-      x.value = !0, I("dismiss"), s && (clearTimeout(s), s = void 0);
+    function g() {
+      p.value = !0, R("dismiss"), a && (clearTimeout(a), a = void 0);
     }
-    const n = i(() => ({
+    const c = n(() => ({
       strokeColor: e.value.iconColor,
       class: "my-[4px] mr-[8px]"
-    })), h = i(() => {
-      switch (b.value) {
+    })), k = n(() => {
+      switch (h.value) {
         case "info":
           return null;
         case "success":
-          return () => v(E, n.value);
+          return () => f(E, c.value);
         case "warning":
-          return () => v(z, n.value);
+          return () => f(A, c.value);
         case "error":
-          return () => v(z, n.value);
+          return () => f(A, c.value);
         default:
           return null;
       }
-    }), R = i(() => U[o.size] ?? {});
-    return (r, K) => x.value ? t("", !0) : (a(), d("div", {
+    }), T = n(() => U[s.size] ?? {});
+    return (l, K) => p.value ? t("", !0) : (r(), d("div", {
       key: 0,
-      class: l(["overflow-hidden text-left", [e.value.wrapperClass, { rounded: !o.notRounded }]])
+      class: o(["overflow-hidden text-left", [e.value.wrapperClass, { rounded: !s.notRounded }]])
     }, [
-      c("div", {
-        class: l(["flex", [e.value.headerClass, R.value]])
+      i("div", {
+        class: o(["flex", [e.value.headerClass, T.value]])
       }, [
-        u(r.$slots, "icon", j(S(n.value)), () => [
-          !o.noIcon && h.value ? (a(), $(V(h.value), j(N({ key: 0 }, n.value)), null, 16)) : t("", !0)
+        u(l.$slots, "icon", x($(c.value)), () => [
+          !s.noIcon && k.value ? (r(), V(N(k.value), x(P({ key: 0 }, c.value)), null, 16)) : t("", !0)
         ]),
-        c("div", J, [
-          u(r.$slots, "default")
+        i("div", J, [
+          u(l.$slots, "default")
         ]),
-        r.dismissible ? (a(), d("button", {
+        l.dismissible ? (r(), d("button", {
           key: 0,
           class: "m-[4px] ml-[8px] h-[16px]",
           "aria-label": "Dismiss",
-          onClick: f
+          onClick: g
         }, [
-          w(C(L), {
+          z(C(L), {
             "stroke-color": e.value.iconCloseColor
           }, null, 8, ["stroke-color"])
         ])) : t("", !0)
       ], 2),
-      C(y).body ? (a(), d("div", {
+      C(b).body ? (r(), d("div", {
         key: 0,
-        class: l(["p-[16px]", e.value.bodyClass])
+        class: o(["p-[16px]", e.value.bodyClass])
       }, [
-        u(r.$slots, "body")
+        u(l.$slots, "body")
       ], 2)) : t("", !0),
-      C(y).details ? (a(), d("details", {
+      C(b).details ? (r(), d("details", {
         key: 1,
         ref_key: "detailsRef",
-        ref: p,
-        class: l(["p-[16px] border-t border-t-1", [e.value.bodyClass, e.value.borderClass]])
+        ref: y,
+        class: o(["p-[16px] border-t border-t-1", [e.value.bodyClass, e.value.borderClass]])
       }, [
-        c("summary", {
-          class: l(["flex font-medium cursor-pointer details-none", e.value.detailsHeaderClass])
+        i("summary", {
+          class: o(["flex font-medium cursor-pointer details-none", e.value.detailsHeaderClass])
         }, [
-          w(C(M), {
+          z(C(M), {
             strokeColor: e.value.iconChevronColor,
             class: "icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"
           }, null, 8, ["strokeColor"]),
-          P(" " + _(o.detailsTitle), 1)
+          j(" " + _(s.detailsTitle), 1)
         ], 2),
-        c("div", {
+        i("div", {
           ref_key: "contentRef",
-          ref: g
+          ref: m
         }, [
-          c("div", null, [
-            u(r.$slots, "details")
+          i("div", null, [
+            u(l.$slots, "details")
           ])
         ], 512)
       ], 2)) : t("", !0),
-      r.$slots.footer ? (a(), d("div", {
+      l.$slots.footer ? (r(), d("div", {
         key: 2,
-        class: l(e.value.bodyClass)
+        class: o(e.value.bodyClass)
       }, [
-        u(r.$slots, "footer")
+        u(l.$slots, "footer")
       ], 2)) : t("", !0)
     ], 2));
   }
@@ -191,4 +173,4 @@ export {
 };
 //# sourceMappingURL=index.es.mjs.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 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"> */
+/* <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"> */

package/dist/index.es.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../Alert.vue"],"sourcesContent":["export const alertSizesClasses = {\n xs: 'py-[4px] px-[8px] leading-[22px] text-[14px]',\n sm: 'py-[8px] px-[12px] leading-[22px] text-[14px]',\n md: 'py-[12px] px-[16px] leading-[24px] text-[16px]',\n lg: 'p-[16px] leading-[24px] text-[16px]',\n};\nexport const defaultAlertSize = 'lg';\nexport const alertClasses = {\n neutral: {\n headerClass: 'text-gray-800 bg-gray-100',\n bodyClass: 'bg-gray-50 text-gray-500',\n borderClass: 'border-gray-100',\n detailsHeaderClass: 'text-gray-600',\n /* <tw-keep strokeColor=\"gray-600\"/> /\n iconCloseColor: 'gray-600',\n / <tw-keep strokeColor=\"gray-500\"/> /\n iconColor: 'gray-500',\n / <tw-keep strokeColor=\"gray-300\"/> /\n iconChevronColor: 'gray-300',\n },\n info: {\n headerClass: 'text-indigo-700 bg-indigo-100',\n bodyClass: 'bg-indigo-50 text-indigo-500',\n borderClass: 'border-indigo-100',\n detailsHeaderClass: 'text-indigo-600',\n / <tw-keep strokeColor=\"indigo-500\"/> /\n iconCloseColor: 'indigo-500',\n / <tw-keep strokeColor=\"indigo-500\"/> /\n iconColor: 'indigo-500',\n / <tw-keep strokeColor=\"indigo-300\"/> /\n iconChevronColor: 'indigo-300',\n },\n warning: {\n headerClass: 'text-orange-700 bg-orange-100',\n bodyClass: 'bg-orange-50 text-orange-500',\n borderClass: 'border-orange-100',\n detailsHeaderClass: 'text-orange-600',\n / <tw-keep strokeColor=\"orange-500\"/> /\n iconCloseColor: 'orange-500',\n / <tw-keep strokeColor=\"orange-400\"/> /\n iconColor: 'orange-400',\n / <tw-keep strokeColor=\"orange-300\"/> /\n iconChevronColor: 'orange-300',\n },\n error: {\n headerClass: 'text-red-700 bg-red-100',\n bodyClass: 'bg-red-50 text-red-500',\n borderClass: 'border-red-100',\n detailsHeaderClass: 'text-red-600',\n / <tw-keep strokeColor=\"red-500\"/> /\n iconCloseColor: 'red-500',\n / <tw-keep strokeColor=\"red-400\"/> /\n iconColor: 'red-400',\n / <tw-keep strokeColor=\"red-300\"/> /\n iconChevronColor: 'red-300',\n },\n success: {\n headerClass: 'text-jade-700 bg-jade-100',\n bodyClass: 'bg-jade-50 text-jade-600',\n borderClass: 'border-jade-100',\n detailsHeaderClass: 'text-jade-600',\n / <tw-keep strokeColor=\"jade-600\"/> /\n iconCloseColor: 'jade-600',\n / <tw-keep strokeColor=\"jade-500\"/> /\n iconColor: 'jade-500',\n / <tw-keep strokeColor=\"jade-300\"/> /\n iconChevronColor: 'jade-300',\n },\n clear: {\n wrapperClass: 'border-gray-50 bg-white border text-gray-700',\n headerClass: '',\n bodyClass: 'border-gray-50 border-t',\n borderClass: 'border-gray-50',\n detailsHeaderClass: 'text-gray-700',\n / <tw-keep strokeColor=\"gray-600\"/> /\n iconCloseColor: 'gray-600',\n / <tw-keep strokeColor=\"gray-500\"/> /\n iconColor: 'gray-500',\n / <tw-keep strokeColor=\"gray-300\"/> /\n iconChevronColor: 'gray-300',\n },\n};\nexport const defaultAlertVariant = 'info';\nexport const defaultAlertTitle = 'Additional details';\n","<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue'\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n IconChevronDownSmall,\n IconActionDeleteLarge,\n IconWarningCircle,\n IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport {\n AlertSize,\n alertSizesClasses,\n AlertVariant,\n defaultAlertSize,\n defaultAlertTitle,\n defaultAlertVariant,\n alertClasses,\n} from '@cypress-design/constants-alert'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n /\n Clicking on the dismiss button or dismissed after a timeout\n /\n (event: 'dismiss'): void\n}>()\n\nconst props = withDefaults(\n defineProps<{\n /\n Color scheme\n /\n variant?: AlertVariant\n /\n Color scheme\n * @deprecated use `variant` instead\n /\n type?: AlertVariant\n /\n If details are provided,text used in the toggle button\n /\n detailsTitle?: string\n /\n Show the dismiss button\n /\n dismissible?: boolean\n /\n When an icon is displayed by default, use this to remove it\n /\n noIcon?: boolean\n /\n If you need square corners\n /\n notRounded?: boolean\n /\n Dismiss the alert after a delay (in ms)\n /\n duration?: number\n /\n Size of the alert\n */\n size?: typeof defaultAlertSize \| AlertSize\n }>(),\n {\n variant: undefined,\n type: defaultAlertVariant,\n detailsTitle: defaultAlertTitle,\n size: defaultAlertSize,\n },\n)\n\nconst variant = computed(() => {\n return props.variant ?? props.type\n})\n\nconst detailsRef = ref(null)\nconst contentRef = ref(null)\n\nconst variantClasses = computed(() => {\n return alertClasses[variant.value] ?? {}\n})\n\nlet timeout: number \| undefined\n\nonMounted(() => {\n if (props.duration) {\n timeout = setTimeout(dismiss, props.duration)\n }\n})\n\nonMounted(() => {\n if (detailsRef.value && contentRef.value) {\n new DetailsAnimation(detailsRef.value, contentRef.value)\n }\n})\n\nonUnmounted(() => {\n if (timeout) {\n clearTimeout(timeout)\n }\n})\n\nfunction dismiss() {\n dismissed.value = true\n emit('dismiss')\n if (timeout) {\n clearTimeout(timeout)\n timeout = undefined\n }\n}\n\nconst computedIconProps = computed(() => {\n return {\n strokeColor: variantClasses.value.iconColor,\n class: 'my-[4px] mr-[8px]',\n }\n})\n\nconst icon: ComputedRef<FunctionalComponent \| null> = computed(() => {\n switch (variant.value) {\n case 'info':\n return null\n case 'success':\n return () => h(IconCheckmarkOutline, computedIconProps.value)\n case 'warning':\n return () => h(IconWarningCircle, computedIconProps.value)\n case 'error':\n return () => h(IconWarningCircle, computedIconProps.value)\n default:\n return null\n }\n})\n\nconst sizeClasses = computed(() => {\n return alertSizesClasses[props.size] ?? {}\n})\n</script>\n\n<template>\n <div\n v-if=\"!dismissed\"\n class=\"overflow-hidden text-left\"\n :class=\"[variantClasses.wrapperClass, { rounded: !props.notRounded }]\"\n >\n <div class=\"flex\" :class=\"[variantClasses.headerClass, sizeClasses]\">\n <!--\n @slot replace the default left icon here\n @binding strokeColor - a windicolor that to be passed to `strokeColor`\n @binding class - the class this icon should have (for utility css purposes)\n\t\t\t-->\n <slot name=\"icon\" v-bind=\"computedIconProps\">\n <component\n :is=\"icon\"\n v-if=\"!props.noIcon && icon\"\n v-bind=\"computedIconProps\"\n />\n </slot>\n <div class=\"flex-1 font-medium\">\n <!-- @slot title of the alert -->\n <slot />\n </div>\n <button\n v-if=\"dismissible\"\n class=\"m-[4px] ml-[8px] h-[16px]\"\n aria-label=\"Dismiss\"\n @click=\"dismiss\"\n >\n <IconActionDeleteLarge :stroke-color=\"variantClasses.iconCloseColor\" />\n </button>\n </div>\n <div v-if=\"slots.body\" class=\"p-[16px]\" :class=\"variantClasses.bodyClass\">\n <!-- @slot body/details of the alert -->\n <slot name=\"body\" />\n </div>\n <details\n v-if=\"slots.details\"\n ref=\"detailsRef\"\n class=\"p-[16px] border-t border-t-1\"\n :class=\"[variantClasses.bodyClass, variantClasses.borderClass]\"\n >\n <summary\n class=\"flex font-medium cursor-pointer details-none\"\n :class=\"variantClasses.detailsHeaderClass\"\n >\n <IconChevronDownSmall\n :strokeColor=\"variantClasses.iconChevronColor\"\n class=\"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0\"\n />\n {{ props.detailsTitle }}\n </summary>\n <div ref=\"contentRef\">\n <div>\n <!--@slot Togglable additional details-->\n <slot name=\"details\" />\n </div>\n </div>\n </details>\n <template v-if=\"$slots.footer\">\n <div :class=\"variantClasses.bodyClass\">\n <!--@slot A box to add buttons or additional content -->\n <slot name=\"footer\" />\n </div>\n </template>\n </div>\n</template>\n"],"names":["alertSizesClasses","defaultAlertSize","alertClasses","defaultAlertVariant","defaultAlertTitle","dismissed","ref","slots","useSlots","emit","__emit","props","__props","variant","computed","detailsRef","contentRef","variantClasses","timeout","onMounted","dismiss","DetailsAnimation","onUnmounted","computedIconProps","icon","h","IconCheckmarkOutline","IconWarningCircle","sizeClasses"],"mappings":"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"}
1	+ {"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.es.mjs","../Alert.vue"],"sourcesContent":["/* <tw-keep strokeColor=\"gray-600\"/> /\n/ <tw-keep strokeColor=\"gray-500\"/> /\n/ <tw-keep strokeColor=\"gray-300\"/> /\n/ <tw-keep strokeColor=\"indigo-500\"/> /\n/ <tw-keep strokeColor=\"indigo-500\"/> /\n/ <tw-keep strokeColor=\"indigo-300\"/> /\n/ <tw-keep strokeColor=\"orange-500\"/> /\n/ <tw-keep strokeColor=\"orange-400\"/> /\n/ <tw-keep strokeColor=\"orange-300\"/> /\n/ <tw-keep strokeColor=\"red-500\"/> /\n/ <tw-keep strokeColor=\"red-400\"/> /\n/ <tw-keep strokeColor=\"red-300\"/> /\n/ <tw-keep strokeColor=\"jade-600\"/> /\n/ <tw-keep strokeColor=\"jade-500\"/> /\n/ <tw-keep strokeColor=\"jade-300\"/> /\n/ <tw-keep strokeColor=\"gray-600\"/> /\n/ <tw-keep strokeColor=\"gray-500\"/> /\n/ <tw-keep strokeColor=\"gray-300\"/> /\n\nconst CssAlertSizesClasses = {\n xs: \"cyds-alert-alertsizesclasses-xs\",\n sm: \"cyds-alert-alertsizesclasses-sm\",\n md: \"cyds-alert-alertsizesclasses-md\",\n lg: \"cyds-alert-alertsizesclasses-lg\"\n};\n\nconst defaultAlertSize = \"lg\";\n\nconst CssAlertClasses = {\n neutral: {\n headerClass: \"cyds-alert-alertclasses-neutral-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-neutral-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-neutral-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-neutral-detailsheaderclass\",\n iconCloseColor: \"gray-600\",\n iconColor: \"gray-500\",\n iconChevronColor: \"gray-300\"\n },\n\n info: {\n headerClass: \"cyds-alert-alertclasses-info-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-info-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-info-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-info-detailsheaderclass\",\n iconCloseColor: \"indigo-500\",\n iconColor: \"indigo-500\",\n iconChevronColor: \"indigo-300\"\n },\n\n warning: {\n headerClass: \"cyds-alert-alertclasses-warning-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-warning-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-warning-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-warning-detailsheaderclass\",\n iconCloseColor: \"orange-500\",\n iconColor: \"orange-400\",\n iconChevronColor: \"orange-300\"\n },\n\n error: {\n headerClass: \"cyds-alert-alertclasses-error-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-error-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-error-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-error-detailsheaderclass\",\n iconCloseColor: \"red-500\",\n iconColor: \"red-400\",\n iconChevronColor: \"red-300\"\n },\n\n success: {\n headerClass: \"cyds-alert-alertclasses-success-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-success-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-success-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-success-detailsheaderclass\",\n iconCloseColor: \"jade-600\",\n iconColor: \"jade-500\",\n iconChevronColor: \"jade-300\"\n },\n\n clear: {\n wrapperClass: \"cyds-alert-alertclasses-clear-wrapperclass\",\n headerClass: \"\",\n bodyClass: \"cyds-alert-alertclasses-clear-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-clear-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-clear-detailsheaderclass\",\n iconCloseColor: \"gray-600\",\n iconColor: \"gray-500\",\n iconChevronColor: \"gray-300\"\n }\n};\n\nconst defaultAlertVariant = \"info\";\nconst defaultAlertTitle = \"Additional details\";\n\nexport { CssAlertClasses, CssAlertSizesClasses, defaultAlertSize, defaultAlertTitle, defaultAlertVariant };\n//# sourceMappingURL=index.es.mjs.map\n","<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue'\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n IconChevronDownSmall,\n IconActionDeleteLarge,\n IconWarningCircle,\n IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport {\n AlertSize,\n CssAlertSizesClasses,\n AlertVariant,\n defaultAlertSize,\n defaultAlertTitle,\n defaultAlertVariant,\n CssAlertClasses,\n} from '@cypress-design/constants-alert'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n /\n Clicking on the dismiss button or dismissed after a timeout\n /\n (event: 'dismiss'): void\n}>()\n\nconst props = withDefaults(\n defineProps<{\n /\n Color scheme\n /\n variant?: AlertVariant\n /\n Color scheme\n * @deprecated use `variant` instead\n /\n type?: AlertVariant\n /\n If details are provided,text used in the toggle button\n /\n detailsTitle?: string\n /\n Show the dismiss button\n /\n dismissible?: boolean\n /\n When an icon is displayed by default, use this to remove it\n /\n noIcon?: boolean\n /\n If you need square corners\n /\n notRounded?: boolean\n /\n Dismiss the alert after a delay (in ms)\n /\n duration?: number\n /\n Size of the alert\n */\n size?: typeof defaultAlertSize \| AlertSize\n }>(),\n {\n variant: undefined,\n type: defaultAlertVariant,\n detailsTitle: defaultAlertTitle,\n size: defaultAlertSize,\n },\n)\n\nconst variant = computed(() => {\n return props.variant ?? props.type\n})\n\nconst detailsRef = ref(null)\nconst contentRef = ref(null)\n\nconst variantClasses = computed(() => {\n return CssAlertClasses[variant.value] ?? {}\n})\n\nlet timeout: number \| undefined\n\nonMounted(() => {\n if (props.duration) {\n timeout = setTimeout(dismiss, props.duration)\n }\n})\n\nonMounted(() => {\n if (detailsRef.value && contentRef.value) {\n new DetailsAnimation(detailsRef.value, contentRef.value)\n }\n})\n\nonUnmounted(() => {\n if (timeout) {\n clearTimeout(timeout)\n }\n})\n\nfunction dismiss() {\n dismissed.value = true\n emit('dismiss')\n if (timeout) {\n clearTimeout(timeout)\n timeout = undefined\n }\n}\n\nconst computedIconProps = computed(() => {\n return {\n strokeColor: variantClasses.value.iconColor,\n class: 'my-[4px] mr-[8px]',\n }\n})\n\nconst icon: ComputedRef<FunctionalComponent \| null> = computed(() => {\n switch (variant.value) {\n case 'info':\n return null\n case 'success':\n return () => h(IconCheckmarkOutline, computedIconProps.value)\n case 'warning':\n return () => h(IconWarningCircle, computedIconProps.value)\n case 'error':\n return () => h(IconWarningCircle, computedIconProps.value)\n default:\n return null\n }\n})\n\nconst sizeClasses = computed(() => {\n return CssAlertSizesClasses[props.size] ?? {}\n})\n</script>\n\n<template>\n <div\n v-if=\"!dismissed\"\n class=\"overflow-hidden text-left\"\n :class=\"[variantClasses.wrapperClass, { rounded: !props.notRounded }]\"\n >\n <div class=\"flex\" :class=\"[variantClasses.headerClass, sizeClasses]\">\n <!--\n @slot replace the default left icon here\n @binding strokeColor - a windicolor that to be passed to `strokeColor`\n @binding class - the class this icon should have (for utility css purposes)\n\t\t\t-->\n <slot name=\"icon\" v-bind=\"computedIconProps\">\n <component\n :is=\"icon\"\n v-if=\"!props.noIcon && icon\"\n v-bind=\"computedIconProps\"\n />\n </slot>\n <div class=\"flex-1 font-medium\">\n <!-- @slot title of the alert -->\n <slot />\n </div>\n <button\n v-if=\"dismissible\"\n class=\"m-[4px] ml-[8px] h-[16px]\"\n aria-label=\"Dismiss\"\n @click=\"dismiss\"\n >\n <IconActionDeleteLarge :stroke-color=\"variantClasses.iconCloseColor\" />\n </button>\n </div>\n <div v-if=\"slots.body\" class=\"p-[16px]\" :class=\"variantClasses.bodyClass\">\n <!-- @slot body/details of the alert -->\n <slot name=\"body\" />\n </div>\n <details\n v-if=\"slots.details\"\n ref=\"detailsRef\"\n class=\"p-[16px] border-t border-t-1\"\n :class=\"[variantClasses.bodyClass, variantClasses.borderClass]\"\n >\n <summary\n class=\"flex font-medium cursor-pointer details-none\"\n :class=\"variantClasses.detailsHeaderClass\"\n >\n <IconChevronDownSmall\n :strokeColor=\"variantClasses.iconChevronColor\"\n class=\"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0\"\n />\n {{ props.detailsTitle }}\n </summary>\n <div ref=\"contentRef\">\n <div>\n <!--@slot Togglable additional details-->\n <slot name=\"details\" />\n </div>\n </div>\n </details>\n <template v-if=\"$slots.footer\">\n <div :class=\"variantClasses.bodyClass\">\n <!--@slot A box to add buttons or additional content -->\n <slot name=\"footer\" />\n </div>\n </template>\n </div>\n</template>\n"],"names":["CssAlertSizesClasses","defaultAlertSize","CssAlertClasses","defaultAlertVariant","defaultAlertTitle","dismissed","ref","slots","useSlots","emit","__emit","props","__props","variant","computed","detailsRef","contentRef","variantClasses","timeout","onMounted","dismiss","DetailsAnimation","onUnmounted","computedIconProps","icon","h","IconCheckmarkOutline","IconWarningCircle","sizeClasses"],"mappings":"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"}

package/dist/index.umd.js CHANGED Viewed

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

package/dist/index.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.js","../Alert.vue"],"sourcesContent":["export const alertSizesClasses = {\n xs: 'py-[4px] px-[8px] leading-[22px] text-[14px]',\n sm: 'py-[8px] px-[12px] leading-[22px] text-[14px]',\n md: 'py-[12px] px-[16px] leading-[24px] text-[16px]',\n lg: 'p-[16px] leading-[24px] text-[16px]',\n};\nexport const defaultAlertSize = 'lg';\nexport const alertClasses = {\n neutral: {\n headerClass: 'text-gray-800 bg-gray-100',\n bodyClass: 'bg-gray-50 text-gray-500',\n borderClass: 'border-gray-100',\n detailsHeaderClass: 'text-gray-600',\n /* <tw-keep strokeColor=\"gray-600\"/> /\n iconCloseColor: 'gray-600',\n / <tw-keep strokeColor=\"gray-500\"/> /\n iconColor: 'gray-500',\n / <tw-keep strokeColor=\"gray-300\"/> /\n iconChevronColor: 'gray-300',\n },\n info: {\n headerClass: 'text-indigo-700 bg-indigo-100',\n bodyClass: 'bg-indigo-50 text-indigo-500',\n borderClass: 'border-indigo-100',\n detailsHeaderClass: 'text-indigo-600',\n / <tw-keep strokeColor=\"indigo-500\"/> /\n iconCloseColor: 'indigo-500',\n / <tw-keep strokeColor=\"indigo-500\"/> /\n iconColor: 'indigo-500',\n / <tw-keep strokeColor=\"indigo-300\"/> /\n iconChevronColor: 'indigo-300',\n },\n warning: {\n headerClass: 'text-orange-700 bg-orange-100',\n bodyClass: 'bg-orange-50 text-orange-500',\n borderClass: 'border-orange-100',\n detailsHeaderClass: 'text-orange-600',\n / <tw-keep strokeColor=\"orange-500\"/> /\n iconCloseColor: 'orange-500',\n / <tw-keep strokeColor=\"orange-400\"/> /\n iconColor: 'orange-400',\n / <tw-keep strokeColor=\"orange-300\"/> /\n iconChevronColor: 'orange-300',\n },\n error: {\n headerClass: 'text-red-700 bg-red-100',\n bodyClass: 'bg-red-50 text-red-500',\n borderClass: 'border-red-100',\n detailsHeaderClass: 'text-red-600',\n / <tw-keep strokeColor=\"red-500\"/> /\n iconCloseColor: 'red-500',\n / <tw-keep strokeColor=\"red-400\"/> /\n iconColor: 'red-400',\n / <tw-keep strokeColor=\"red-300\"/> /\n iconChevronColor: 'red-300',\n },\n success: {\n headerClass: 'text-jade-700 bg-jade-100',\n bodyClass: 'bg-jade-50 text-jade-600',\n borderClass: 'border-jade-100',\n detailsHeaderClass: 'text-jade-600',\n / <tw-keep strokeColor=\"jade-600\"/> /\n iconCloseColor: 'jade-600',\n / <tw-keep strokeColor=\"jade-500\"/> /\n iconColor: 'jade-500',\n / <tw-keep strokeColor=\"jade-300\"/> /\n iconChevronColor: 'jade-300',\n },\n clear: {\n wrapperClass: 'border-gray-50 bg-white border text-gray-700',\n headerClass: '',\n bodyClass: 'border-gray-50 border-t',\n borderClass: 'border-gray-50',\n detailsHeaderClass: 'text-gray-700',\n / <tw-keep strokeColor=\"gray-600\"/> /\n iconCloseColor: 'gray-600',\n / <tw-keep strokeColor=\"gray-500\"/> /\n iconColor: 'gray-500',\n / <tw-keep strokeColor=\"gray-300\"/> /\n iconChevronColor: 'gray-300',\n },\n};\nexport const defaultAlertVariant = 'info';\nexport const defaultAlertTitle = 'Additional details';\n","<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue'\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n IconChevronDownSmall,\n IconActionDeleteLarge,\n IconWarningCircle,\n IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport {\n AlertSize,\n alertSizesClasses,\n AlertVariant,\n defaultAlertSize,\n defaultAlertTitle,\n defaultAlertVariant,\n alertClasses,\n} from '@cypress-design/constants-alert'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n /\n Clicking on the dismiss button or dismissed after a timeout\n /\n (event: 'dismiss'): void\n}>()\n\nconst props = withDefaults(\n defineProps<{\n /\n Color scheme\n /\n variant?: AlertVariant\n /\n Color scheme\n * @deprecated use `variant` instead\n /\n type?: AlertVariant\n /\n If details are provided,text used in the toggle button\n /\n detailsTitle?: string\n /\n Show the dismiss button\n /\n dismissible?: boolean\n /\n When an icon is displayed by default, use this to remove it\n /\n noIcon?: boolean\n /\n If you need square corners\n /\n notRounded?: boolean\n /\n Dismiss the alert after a delay (in ms)\n /\n duration?: number\n /\n Size of the alert\n */\n size?: typeof defaultAlertSize \| AlertSize\n }>(),\n {\n variant: undefined,\n type: defaultAlertVariant,\n detailsTitle: defaultAlertTitle,\n size: defaultAlertSize,\n },\n)\n\nconst variant = computed(() => {\n return props.variant ?? props.type\n})\n\nconst detailsRef = ref(null)\nconst contentRef = ref(null)\n\nconst variantClasses = computed(() => {\n return alertClasses[variant.value] ?? {}\n})\n\nlet timeout: number \| undefined\n\nonMounted(() => {\n if (props.duration) {\n timeout = setTimeout(dismiss, props.duration)\n }\n})\n\nonMounted(() => {\n if (detailsRef.value && contentRef.value) {\n new DetailsAnimation(detailsRef.value, contentRef.value)\n }\n})\n\nonUnmounted(() => {\n if (timeout) {\n clearTimeout(timeout)\n }\n})\n\nfunction dismiss() {\n dismissed.value = true\n emit('dismiss')\n if (timeout) {\n clearTimeout(timeout)\n timeout = undefined\n }\n}\n\nconst computedIconProps = computed(() => {\n return {\n strokeColor: variantClasses.value.iconColor,\n class: 'my-[4px] mr-[8px]',\n }\n})\n\nconst icon: ComputedRef<FunctionalComponent \| null> = computed(() => {\n switch (variant.value) {\n case 'info':\n return null\n case 'success':\n return () => h(IconCheckmarkOutline, computedIconProps.value)\n case 'warning':\n return () => h(IconWarningCircle, computedIconProps.value)\n case 'error':\n return () => h(IconWarningCircle, computedIconProps.value)\n default:\n return null\n }\n})\n\nconst sizeClasses = computed(() => {\n return alertSizesClasses[props.size] ?? {}\n})\n</script>\n\n<template>\n <div\n v-if=\"!dismissed\"\n class=\"overflow-hidden text-left\"\n :class=\"[variantClasses.wrapperClass, { rounded: !props.notRounded }]\"\n >\n <div class=\"flex\" :class=\"[variantClasses.headerClass, sizeClasses]\">\n <!--\n @slot replace the default left icon here\n @binding strokeColor - a windicolor that to be passed to `strokeColor`\n @binding class - the class this icon should have (for utility css purposes)\n\t\t\t-->\n <slot name=\"icon\" v-bind=\"computedIconProps\">\n <component\n :is=\"icon\"\n v-if=\"!props.noIcon && icon\"\n v-bind=\"computedIconProps\"\n />\n </slot>\n <div class=\"flex-1 font-medium\">\n <!-- @slot title of the alert -->\n <slot />\n </div>\n <button\n v-if=\"dismissible\"\n class=\"m-[4px] ml-[8px] h-[16px]\"\n aria-label=\"Dismiss\"\n @click=\"dismiss\"\n >\n <IconActionDeleteLarge :stroke-color=\"variantClasses.iconCloseColor\" />\n </button>\n </div>\n <div v-if=\"slots.body\" class=\"p-[16px]\" :class=\"variantClasses.bodyClass\">\n <!-- @slot body/details of the alert -->\n <slot name=\"body\" />\n </div>\n <details\n v-if=\"slots.details\"\n ref=\"detailsRef\"\n class=\"p-[16px] border-t border-t-1\"\n :class=\"[variantClasses.bodyClass, variantClasses.borderClass]\"\n >\n <summary\n class=\"flex font-medium cursor-pointer details-none\"\n :class=\"variantClasses.detailsHeaderClass\"\n >\n <IconChevronDownSmall\n :strokeColor=\"variantClasses.iconChevronColor\"\n class=\"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0\"\n />\n {{ props.detailsTitle }}\n </summary>\n <div ref=\"contentRef\">\n <div>\n <!--@slot Togglable additional details-->\n <slot name=\"details\" />\n </div>\n </div>\n </details>\n <template v-if=\"$slots.footer\">\n <div :class=\"variantClasses.bodyClass\">\n <!--@slot A box to add buttons or additional content -->\n <slot name=\"footer\" />\n </div>\n </template>\n </div>\n</template>\n"],"names":["alertSizesClasses","defaultAlertSize","alertClasses","defaultAlertVariant","defaultAlertTitle","dismissed","ref","slots","useSlots","emit","__emit","props","__props","variant","computed","detailsRef","contentRef","variantClasses","timeout","onMounted","dismiss","DetailsAnimation","onUnmounted","computedIconProps","icon","h","IconCheckmarkOutline","IconWarningCircle","sizeClasses"],"mappings":"oaAAO,MAAMA,EAAoB,CAC7B,GAAI,+CACJ,GAAI,gDACJ,GAAI,iDACJ,GAAI,qCACR,EACaC,EAAmB,KACnBC,EAAe,CACxB,QAAS,CACL,YAAa,4BACb,UAAW,2BACX,YAAa,kBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UACrB,EACD,KAAM,CACF,YAAa,gCACb,UAAW,+BACX,YAAa,oBACb,mBAAoB,kBAEpB,eAAgB,aAEhB,UAAW,aAEX,iBAAkB,YACrB,EACD,QAAS,CACL,YAAa,gCACb,UAAW,+BACX,YAAa,oBACb,mBAAoB,kBAEpB,eAAgB,aAEhB,UAAW,aAEX,iBAAkB,YACrB,EACD,MAAO,CACH,YAAa,0BACb,UAAW,yBACX,YAAa,iBACb,mBAAoB,eAEpB,eAAgB,UAEhB,UAAW,UAEX,iBAAkB,SACrB,EACD,QAAS,CACL,YAAa,4BACb,UAAW,2BACX,YAAa,kBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UACrB,EACD,MAAO,CACH,aAAc,+CACd,YAAa,GACb,UAAW,0BACX,YAAa,iBACb,mBAAoB,gBAEpB,eAAgB,WAEhB,UAAW,WAEX,iBAAkB,UACrB,CACL,EACaC,EAAsB,OACtBC,EAAoB,oTC/D3B,MAAAC,EAAYC,MAAI,EAAK,EAErBC,EAAQC,EAAAA,WAERC,EAAOC,EAOPC,EAAQC,EA4CRC,EAAUC,EAAAA,SAAS,IAChBH,EAAM,SAAWA,EAAM,IAC/B,EAEKI,EAAaT,MAAI,IAAI,EACrBU,EAAaV,MAAI,IAAI,EAErBW,EAAiBH,EAAAA,SAAS,IACvBZ,EAAaW,EAAQ,KAAK,GAAK,CAAA,CACvC,EAEG,IAAAK,EAEJC,EAAAA,UAAU,IAAM,CACVR,EAAM,WACEO,EAAA,WAAWE,EAAST,EAAM,QAAQ,EAC9C,CACD,EAEDQ,EAAAA,UAAU,IAAM,CACVJ,EAAW,OAASC,EAAW,OACjC,IAAIK,EAAiB,iBAAAN,EAAW,MAAOC,EAAW,KAAK,CACzD,CACD,EAEDM,EAAAA,YAAY,IAAM,CACZJ,GACF,aAAaA,CAAO,CACtB,CACD,EAED,SAASE,GAAU,CACjBf,EAAU,MAAQ,GAClBI,EAAK,SAAS,EACVS,IACF,aAAaA,CAAO,EACVA,EAAA,OAEd,CAEM,MAAAK,EAAoBT,EAAAA,SAAS,KAC1B,CACL,YAAaG,EAAe,MAAM,UAClC,MAAO,mBAAA,EAEV,EAEKO,EAAgDV,EAAAA,SAAS,IAAM,CACnE,OAAQD,EAAQ,MAAO,CACrB,IAAK,OACI,OAAA,KACT,IAAK,UACH,MAAO,IAAMY,EAAAA,EAAEC,EAAAA,qBAAsBH,EAAkB,KAAK,EAC9D,IAAK,UACH,MAAO,IAAME,EAAAA,EAAEE,EAAAA,kBAAmBJ,EAAkB,KAAK,EAC3D,IAAK,QACH,MAAO,IAAME,EAAAA,EAAEE,EAAAA,kBAAmBJ,EAAkB,KAAK,EAC3D,QACS,OAAA,IACX,CAAA,CACD,EAEKK,EAAcd,EAAAA,SAAS,IACpBd,EAAkBW,EAAM,IAAI,GAAK,CAAA,CACzC"}
1	+ {"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.es.mjs","../Alert.vue"],"sourcesContent":["/* <tw-keep strokeColor=\"gray-600\"/> /\n/ <tw-keep strokeColor=\"gray-500\"/> /\n/ <tw-keep strokeColor=\"gray-300\"/> /\n/ <tw-keep strokeColor=\"indigo-500\"/> /\n/ <tw-keep strokeColor=\"indigo-500\"/> /\n/ <tw-keep strokeColor=\"indigo-300\"/> /\n/ <tw-keep strokeColor=\"orange-500\"/> /\n/ <tw-keep strokeColor=\"orange-400\"/> /\n/ <tw-keep strokeColor=\"orange-300\"/> /\n/ <tw-keep strokeColor=\"red-500\"/> /\n/ <tw-keep strokeColor=\"red-400\"/> /\n/ <tw-keep strokeColor=\"red-300\"/> /\n/ <tw-keep strokeColor=\"jade-600\"/> /\n/ <tw-keep strokeColor=\"jade-500\"/> /\n/ <tw-keep strokeColor=\"jade-300\"/> /\n/ <tw-keep strokeColor=\"gray-600\"/> /\n/ <tw-keep strokeColor=\"gray-500\"/> /\n/ <tw-keep strokeColor=\"gray-300\"/> /\n\nconst CssAlertSizesClasses = {\n xs: \"cyds-alert-alertsizesclasses-xs\",\n sm: \"cyds-alert-alertsizesclasses-sm\",\n md: \"cyds-alert-alertsizesclasses-md\",\n lg: \"cyds-alert-alertsizesclasses-lg\"\n};\n\nconst defaultAlertSize = \"lg\";\n\nconst CssAlertClasses = {\n neutral: {\n headerClass: \"cyds-alert-alertclasses-neutral-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-neutral-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-neutral-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-neutral-detailsheaderclass\",\n iconCloseColor: \"gray-600\",\n iconColor: \"gray-500\",\n iconChevronColor: \"gray-300\"\n },\n\n info: {\n headerClass: \"cyds-alert-alertclasses-info-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-info-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-info-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-info-detailsheaderclass\",\n iconCloseColor: \"indigo-500\",\n iconColor: \"indigo-500\",\n iconChevronColor: \"indigo-300\"\n },\n\n warning: {\n headerClass: \"cyds-alert-alertclasses-warning-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-warning-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-warning-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-warning-detailsheaderclass\",\n iconCloseColor: \"orange-500\",\n iconColor: \"orange-400\",\n iconChevronColor: \"orange-300\"\n },\n\n error: {\n headerClass: \"cyds-alert-alertclasses-error-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-error-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-error-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-error-detailsheaderclass\",\n iconCloseColor: \"red-500\",\n iconColor: \"red-400\",\n iconChevronColor: \"red-300\"\n },\n\n success: {\n headerClass: \"cyds-alert-alertclasses-success-headerclass\",\n bodyClass: \"cyds-alert-alertclasses-success-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-success-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-success-detailsheaderclass\",\n iconCloseColor: \"jade-600\",\n iconColor: \"jade-500\",\n iconChevronColor: \"jade-300\"\n },\n\n clear: {\n wrapperClass: \"cyds-alert-alertclasses-clear-wrapperclass\",\n headerClass: \"\",\n bodyClass: \"cyds-alert-alertclasses-clear-bodyclass\",\n borderClass: \"cyds-alert-alertclasses-clear-borderclass\",\n detailsHeaderClass: \"cyds-alert-alertclasses-clear-detailsheaderclass\",\n iconCloseColor: \"gray-600\",\n iconColor: \"gray-500\",\n iconChevronColor: \"gray-300\"\n }\n};\n\nconst defaultAlertVariant = \"info\";\nconst defaultAlertTitle = \"Additional details\";\n\nexport { CssAlertClasses, CssAlertSizesClasses, defaultAlertSize, defaultAlertTitle, defaultAlertVariant };\n//# sourceMappingURL=index.es.mjs.map\n","<script lang=\"ts\" setup>\nimport type { FunctionalComponent, ComputedRef } from 'vue'\nimport { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'\nimport {\n IconChevronDownSmall,\n IconActionDeleteLarge,\n IconWarningCircle,\n IconCheckmarkOutline,\n} from '@cypress-design/vue-icon'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport {\n AlertSize,\n CssAlertSizesClasses,\n AlertVariant,\n defaultAlertSize,\n defaultAlertTitle,\n defaultAlertVariant,\n CssAlertClasses,\n} from '@cypress-design/constants-alert'\n\nconst dismissed = ref(false)\n\nconst slots = useSlots()\n\nconst emit = defineEmits<{\n /\n Clicking on the dismiss button or dismissed after a timeout\n /\n (event: 'dismiss'): void\n}>()\n\nconst props = withDefaults(\n defineProps<{\n /\n Color scheme\n /\n variant?: AlertVariant\n /\n Color scheme\n * @deprecated use `variant` instead\n /\n type?: AlertVariant\n /\n If details are provided,text used in the toggle button\n /\n detailsTitle?: string\n /\n Show the dismiss button\n /\n dismissible?: boolean\n /\n When an icon is displayed by default, use this to remove it\n /\n noIcon?: boolean\n /\n If you need square corners\n /\n notRounded?: boolean\n /\n Dismiss the alert after a delay (in ms)\n /\n duration?: number\n /\n Size of the alert\n */\n size?: typeof defaultAlertSize \| AlertSize\n }>(),\n {\n variant: undefined,\n type: defaultAlertVariant,\n detailsTitle: defaultAlertTitle,\n size: defaultAlertSize,\n },\n)\n\nconst variant = computed(() => {\n return props.variant ?? props.type\n})\n\nconst detailsRef = ref(null)\nconst contentRef = ref(null)\n\nconst variantClasses = computed(() => {\n return CssAlertClasses[variant.value] ?? {}\n})\n\nlet timeout: number \| undefined\n\nonMounted(() => {\n if (props.duration) {\n timeout = setTimeout(dismiss, props.duration)\n }\n})\n\nonMounted(() => {\n if (detailsRef.value && contentRef.value) {\n new DetailsAnimation(detailsRef.value, contentRef.value)\n }\n})\n\nonUnmounted(() => {\n if (timeout) {\n clearTimeout(timeout)\n }\n})\n\nfunction dismiss() {\n dismissed.value = true\n emit('dismiss')\n if (timeout) {\n clearTimeout(timeout)\n timeout = undefined\n }\n}\n\nconst computedIconProps = computed(() => {\n return {\n strokeColor: variantClasses.value.iconColor,\n class: 'my-[4px] mr-[8px]',\n }\n})\n\nconst icon: ComputedRef<FunctionalComponent \| null> = computed(() => {\n switch (variant.value) {\n case 'info':\n return null\n case 'success':\n return () => h(IconCheckmarkOutline, computedIconProps.value)\n case 'warning':\n return () => h(IconWarningCircle, computedIconProps.value)\n case 'error':\n return () => h(IconWarningCircle, computedIconProps.value)\n default:\n return null\n }\n})\n\nconst sizeClasses = computed(() => {\n return CssAlertSizesClasses[props.size] ?? {}\n})\n</script>\n\n<template>\n <div\n v-if=\"!dismissed\"\n class=\"overflow-hidden text-left\"\n :class=\"[variantClasses.wrapperClass, { rounded: !props.notRounded }]\"\n >\n <div class=\"flex\" :class=\"[variantClasses.headerClass, sizeClasses]\">\n <!--\n @slot replace the default left icon here\n @binding strokeColor - a windicolor that to be passed to `strokeColor`\n @binding class - the class this icon should have (for utility css purposes)\n\t\t\t-->\n <slot name=\"icon\" v-bind=\"computedIconProps\">\n <component\n :is=\"icon\"\n v-if=\"!props.noIcon && icon\"\n v-bind=\"computedIconProps\"\n />\n </slot>\n <div class=\"flex-1 font-medium\">\n <!-- @slot title of the alert -->\n <slot />\n </div>\n <button\n v-if=\"dismissible\"\n class=\"m-[4px] ml-[8px] h-[16px]\"\n aria-label=\"Dismiss\"\n @click=\"dismiss\"\n >\n <IconActionDeleteLarge :stroke-color=\"variantClasses.iconCloseColor\" />\n </button>\n </div>\n <div v-if=\"slots.body\" class=\"p-[16px]\" :class=\"variantClasses.bodyClass\">\n <!-- @slot body/details of the alert -->\n <slot name=\"body\" />\n </div>\n <details\n v-if=\"slots.details\"\n ref=\"detailsRef\"\n class=\"p-[16px] border-t border-t-1\"\n :class=\"[variantClasses.bodyClass, variantClasses.borderClass]\"\n >\n <summary\n class=\"flex font-medium cursor-pointer details-none\"\n :class=\"variantClasses.detailsHeaderClass\"\n >\n <IconChevronDownSmall\n :strokeColor=\"variantClasses.iconChevronColor\"\n class=\"icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0\"\n />\n {{ props.detailsTitle }}\n </summary>\n <div ref=\"contentRef\">\n <div>\n <!--@slot Togglable additional details-->\n <slot name=\"details\" />\n </div>\n </div>\n </details>\n <template v-if=\"$slots.footer\">\n <div :class=\"variantClasses.bodyClass\">\n <!--@slot A box to add buttons or additional content -->\n <slot name=\"footer\" />\n </div>\n </template>\n </div>\n</template>\n"],"names":["CssAlertSizesClasses","defaultAlertSize","CssAlertClasses","defaultAlertVariant","defaultAlertTitle","dismissed","ref","slots","useSlots","emit","__emit","props","__props","variant","computed","detailsRef","contentRef","variantClasses","timeout","onMounted","dismiss","DetailsAnimation","onUnmounted","computedIconProps","icon","h","IconCheckmarkOutline","IconWarningCircle","sizeClasses"],"mappings":"oaAmBA,MAAMA,EAAuB,CACzB,GAAI,kCACJ,GAAI,kCACJ,GAAI,kCACJ,GAAI,iCACR,EAEMC,EAAmB,KAEnBC,EAAkB,CACpB,QAAS,CACL,YAAa,8CACb,UAAW,4CACX,YAAa,8CACb,mBAAoB,qDACpB,eAAgB,WAChB,UAAW,WACX,iBAAkB,UACrB,EAED,KAAM,CACF,YAAa,2CACb,UAAW,yCACX,YAAa,2CACb,mBAAoB,kDACpB,eAAgB,aAChB,UAAW,aACX,iBAAkB,YACrB,EAED,QAAS,CACL,YAAa,8CACb,UAAW,4CACX,YAAa,8CACb,mBAAoB,qDACpB,eAAgB,aAChB,UAAW,aACX,iBAAkB,YACrB,EAED,MAAO,CACH,YAAa,4CACb,UAAW,0CACX,YAAa,4CACb,mBAAoB,mDACpB,eAAgB,UAChB,UAAW,UACX,iBAAkB,SACrB,EAED,QAAS,CACL,YAAa,8CACb,UAAW,4CACX,YAAa,8CACb,mBAAoB,qDACpB,eAAgB,WAChB,UAAW,WACX,iBAAkB,UACrB,EAED,MAAO,CACH,aAAc,6CACd,YAAa,GACb,UAAW,0CACX,YAAa,4CACb,mBAAoB,mDACpB,eAAgB,WAChB,UAAW,WACX,iBAAkB,UACrB,CACL,EAEMC,EAAsB,OACtBC,EAAoB,oTCxEpB,MAAAC,EAAYC,MAAI,EAAK,EAErBC,EAAQC,EAAAA,WAERC,EAAOC,EAOPC,EAAQC,EA4CRC,EAAUC,EAAAA,SAAS,IAChBH,EAAM,SAAWA,EAAM,IAC/B,EAEKI,EAAaT,MAAI,IAAI,EACrBU,EAAaV,MAAI,IAAI,EAErBW,EAAiBH,EAAAA,SAAS,IACvBZ,EAAgBW,EAAQ,KAAK,GAAK,CAAA,CAC1C,EAEG,IAAAK,EAEJC,EAAAA,UAAU,IAAM,CACVR,EAAM,WACEO,EAAA,WAAWE,EAAST,EAAM,QAAQ,EAC9C,CACD,EAEDQ,EAAAA,UAAU,IAAM,CACVJ,EAAW,OAASC,EAAW,OACjC,IAAIK,EAAiB,iBAAAN,EAAW,MAAOC,EAAW,KAAK,CACzD,CACD,EAEDM,EAAAA,YAAY,IAAM,CACZJ,GACF,aAAaA,CAAO,CACtB,CACD,EAED,SAASE,GAAU,CACjBf,EAAU,MAAQ,GAClBI,EAAK,SAAS,EACVS,IACF,aAAaA,CAAO,EACVA,EAAA,OAEd,CAEM,MAAAK,EAAoBT,EAAAA,SAAS,KAC1B,CACL,YAAaG,EAAe,MAAM,UAClC,MAAO,mBAAA,EAEV,EAEKO,EAAgDV,EAAAA,SAAS,IAAM,CACnE,OAAQD,EAAQ,MAAO,CACrB,IAAK,OACI,OAAA,KACT,IAAK,UACH,MAAO,IAAMY,EAAAA,EAAEC,EAAAA,qBAAsBH,EAAkB,KAAK,EAC9D,IAAK,UACH,MAAO,IAAME,EAAAA,EAAEE,EAAAA,kBAAmBJ,EAAkB,KAAK,EAC3D,IAAK,QACH,MAAO,IAAME,EAAAA,EAAEE,EAAAA,kBAAmBJ,EAAkB,KAAK,EAC3D,QACS,OAAA,IACX,CAAA,CACD,EAEKK,EAAcd,EAAAA,SAAS,IACpBd,EAAqBW,EAAM,IAAI,GAAK,CAAA,CAC5C"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cypress-design/vue-alert",
-  "version": "1.0.0",
+  "version": "2.0.0-next.0",
   "files": [
     "*"
   ],
@@ -24,12 +24,12 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/constants-alert": "^1.0.0",
     "@cypress-design/details-animation": "^1.0.0",
-    "@cypress-design/vue-icon": "^1.0.0"
+    "@cypress-design/vue-icon": "^2.0.0-next.0"
   },
   "devDependencies": {
-    "@cypress-design/rollup-plugin-tailwind-keep": "*"
+    "@cypress-design/constants-alert": "2.0.0-next.0",
+    "@cypress-design/rollup-plugin-tailwind-keep": "1.0.1-next.0"
   },
   "license": "MIT"
 }

package/vite.config.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as path from 'path'
-import generateViteConfig from '../../root.vite.config'
+import generateViteConfig from '../../vue.vite.config'
 export default generateViteConfig({
   entry: path.resolve(__dirname, './index.ts'),