@cypress-design/vue-alert 0.2.0 → 0.3.0

package/Alert.rootstory.tsx

@@ -6,14 +6,14 @@ import Alert from './Alert.vue'
 export default () => {
   const displayTimedAlert = ref(false)
   return (
-    <div class="flex flex-col p-4 gap-16px">
+    <div class="flex flex-col p-4 gap-[16px]">
       <Alert type="error" detailsTitle="Stack trace" data-cy="alert-1">
         {{
           default: () => 'Spec not found',
           body: () => (
             <>
               There is no spec matching the following location:
-              <code class="bg-red-100 m-8px rounded px-2px">
+              <code class="bg-red-100 m-[8px] rounded px-[2px]">
                 path/to/spec.cy.js
               </code>
               <br />
@@ -23,7 +23,7 @@ export default () => {
             </>
           ),
           details: () => (
-            <pre class="bg-white rounded border border-red-500 px-16px py-8px overflow-x-auto">
+            <pre class="bg-white rounded border border-red-500 px-[16px] py-[8px] overflow-x-auto">
               {dedent`Uncaught Error: Error occurred in defineConfig()
             Trace: add called with  2 and 3
                 at sum (/home/dev/Documents/stacktrace.js:2:13)
@@ -62,7 +62,7 @@ export default () => {
         }}
       </Alert>
       <button
-        class="border rounded p-8px"
+        class="border rounded p-[8px]"
         onClick={() => (displayTimedAlert.value = true)}
       >
         open alert for 5 seconds

package/Alert.vue

@@ -106,7 +106,7 @@ function dismiss() {
 const computedIconProps = computed(() => {
   return {
     strokeColor: alertClasses[props.type].iconColor,
-    class: 'my-4px mr-8px',
+    class: 'my-[4px] mr-[8px]',
   }
 })
 
@@ -151,20 +151,20 @@ const sizeClasses = computed(() => {
       </div>
       <button
         v-if="dismissible"
-        class="m-4px ml-8px h-16px"
+        class="m-[4px] ml-[8px] h-[16px]"
         @click="dismiss"
         aria-label="Dismiss"
       >
         <IconActionDeleteLarge :stroke-color="typeClasses.iconCloseColor" />
       </button>
     </div>
-    <div v-if="slots.body" class="p-16px" :class="typeClasses.bodyClass">
+    <div v-if="slots.body" class="p-[16px]" :class="typeClasses.bodyClass">
       <!-- @slot body/details of the alert -->
       <slot name="body" />
     </div>
     <details
       v-if="slots.details"
-      class="p-16px border-t-1"
+      class="p-[16px] border-t-1"
       ref="detailsRef"
       :class="[typeClasses.bodyClass, typeClasses.borderClass]"
     >
@@ -174,7 +174,7 @@ const sizeClasses = computed(() => {
       >
         <IconChevronDownSmall
           :strokeColor="typeClasses.iconChevronColor"
-          class="icon my-4px mr-8px transition transform -rotate-90 open:rotate-0"
+          class="icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"
         />
         {{ props.detailsTitle }}
       </summary>

package/AlertVue.cy.tsx

@@ -5,5 +5,6 @@ import AlertStory from './Alert.rootstory'
 describe('<Alert />', { viewportHeight: 800 }, () => {
   it('renders', () => {
     mount(() => <AlertStory />)
+    cy.percySnapshot()
   })
 })

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @cypress-design/vue-alert
 
+## 0.3.0
+
+### Minor Changes
+
+- [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
+
+### Patch Changes
+
+- Updated dependencies [[`106b61a`](https://github.com/cypress-io/cypress-design/commit/106b61a97888f956a4c9d235fde5efb4243e1445), [`7b4f416`](https://github.com/cypress-io/cypress-design/commit/7b4f4162a0d150aa8cab7ec239faebb58c39464d)]:
+  - @cypress-design/vue-icon@0.18.0
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/constants.d.ts

@@ -1,10 +1,10 @@
 import type { WindiColor } from '@cypress-design/icon-registry';
 export declare type AlertType = 'info' | 'success' | 'error' | 'warning' | 'neutral';
 export declare const alertSizesClasses: {
-    readonly xs: "py-4px px-8px leading-22px text-14px";
-    readonly sm: "py-8px px-12px leading-22px text-14px";
-    readonly md: "py-12px px-16px leading-24px text-16px";
-    readonly lg: "p-16px leading-24px text-16px";
+    readonly xs: "py-[4px] px-[8px] leading-[22px] text-[14px]";
+    readonly sm: "py-[8px] px-[12px] leading-[22px] text-[14px]";
+    readonly md: "py-[12px] px-[16px] leading-[24px] text-[16px]";
+    readonly lg: "p-[16px] leading-[24px] text-[16px]";
 };
 export declare type AlertSize = keyof typeof alertSizesClasses;
 export declare const defaultAlertSize: AlertSize;

package/dist/index.es.mjs

@@ -1,4 +1,4 @@
-import { h as a, defineComponent as R, ref as z, useSlots as T, computed as f, onMounted as j, onUnmounted as I, openBlock as C, createElementBlock as x, normalizeClass as p, createElementVNode as m, unref as r, renderSlot as k, normalizeProps as A, guardReactiveProps as _, createBlock as B, resolveDynamicComponent as E, mergeProps as H, createCommentVNode as g, createVNode as S, createTextVNode as N, toDisplayString as O } from "vue";
+import { h as i, defineComponent as R, ref as z, useSlots as T, computed as f, onMounted as j, onUnmounted as I, openBlock as C, createElementBlock as x, normalizeClass as p, createElementVNode as m, unref as r, renderSlot as k, normalizeProps as A, guardReactiveProps as B, createBlock as E, resolveDynamicComponent as H, mergeProps as _, createCommentVNode as g, createVNode as S, createTextVNode as N, toDisplayString as O } from "vue";
 import * as y from "@cypress-design/icon-registry";
 import { ICON_COLOR_PROP_NAMES as P } from "@cypress-design/icon-registry";
 import { DetailsAnimation as V } from "@cypress-design/details-animation";
@@ -8,9 +8,9 @@ const v = ({
   size: e,
   class: t,
   interactiveColorsOnGroup: h,
-  ...i
+  ...d
 }) => {
-  const c = Object.keys(i).reduce((n, d) => (P.includes(d) || (n[d] = i[d]), n), {}), l = {
+  const c = Object.keys(d).reduce((a, n) => (!P.includes(n) && n !== "name" && (a[n] = d[n]), a), {}), l = {
     width: e,
     height: e,
     viewBox: `0 0 ${e} ${e}`,
@@ -26,7 +26,7 @@ const v = ({
   }[o];
   if (!t)
     throw Error(`Icon "action-delete-large" is not available in size ${o}`);
-  return a("svg", v({
+  return i("svg", v({
     ...s,
     size: o,
     body: t,
@@ -38,7 +38,7 @@ const v = ({
   }[o];
   if (!t)
     throw Error(`Icon "checkmark-outline" is not available in size ${o}`);
-  return a("svg", v({
+  return i("svg", v({
     ...s,
     size: o,
     body: t,
@@ -51,7 +51,7 @@ const v = ({
   }[o];
   if (!t)
     throw Error(`Icon "chevron-down-small" is not available in size ${o}`);
-  return a("svg", v({
+  return i("svg", v({
     ...s,
     size: o,
     body: t,
@@ -63,18 +63,18 @@ const v = ({
   }[o];
   if (!t)
     throw Error(`Icon "warning-circle" is not available in size ${o}`);
-  return a("svg", v({
+  return i("svg", v({
     ...s,
     size: o,
     body: t,
     compiledClasses: e
   }));
-}, q = {
-  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"
-}, G = "lg", D = {
+}, G = {
+  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]"
+}, U = "lg", D = {
   neutral: {
     headerClass: "text-gray-800 bg-gray-100",
     bodyClass: "bg-gray-50 text-gray-500",
@@ -120,48 +120,48 @@ const v = ({
     iconColor: "jade-500",
     iconChevronColor: "jade-300"
   }
-}, U = "info", F = "Additional details", J = { class: "flex-1 font-medium" }, ee = /* @__PURE__ */ R({
+}, q = "info", F = "Additional details", J = { class: "flex-1 font-medium" }, ee = /* @__PURE__ */ R({
   __name: "Alert",
   props: {
-    type: { default: U },
+    type: { default: q },
     detailsTitle: { default: F },
     dismissible: { type: Boolean },
     noIcon: { type: Boolean },
     notRounded: { type: Boolean },
     duration: null,
-    size: { default: G }
+    size: { default: U }
   },
   emits: ["dismiss"],
   setup(s, { emit: o }) {
-    const e = s, t = z(!1), h = T(), i = z(null), c = z(null), l = f(() => D[e.type]);
-    let n;
+    const e = s, t = z(!1), h = T(), d = z(null), c = z(null), l = f(() => D[e.type]);
+    let a;
     j(() => {
-      e.duration && (n = setTimeout(d, e.duration));
+      e.duration && (a = setTimeout(n, e.duration));
     }), j(() => {
-      i.value && c.value && new V(i.value, c.value);
+      d.value && c.value && new V(d.value, c.value);
     }), I(() => {
-      n && clearTimeout(n);
+      a && clearTimeout(a);
     });
-    function d() {
-      t.value = !0, o("dismiss"), n && (clearTimeout(n), n = void 0);
+    function n() {
+      t.value = !0, o("dismiss"), a && (clearTimeout(a), a = void 0);
     }
     const u = f(() => ({
       strokeColor: D[e.type].iconColor,
-      class: "my-4px mr-8px"
+      class: "my-[4px] mr-[8px]"
     })), w = f(() => {
       switch (e.type) {
         case "info":
           return null;
         case "success":
-          return () => a(W, u.value);
+          return () => i(W, u.value);
         case "warning":
-          return () => a($, u.value);
+          return () => i($, u.value);
         case "error":
-          return () => a($, u.value);
+          return () => i($, u.value);
         default:
           return null;
       }
-    }), M = f(() => q[e.size]);
+    }), M = f(() => G[e.size]);
     return (b, K) => t.value ? g("", !0) : (C(), x("div", {
       key: 0,
       class: p(["overflow-hidden text-left", e.notRounded ? void 0 : "rounded"])
@@ -169,16 +169,16 @@ const v = ({
       m("div", {
         class: p(["flex", [r(l).headerClass, r(M)]])
       }, [
-        k(b.$slots, "icon", A(_(r(u))), () => [
-          !e.noIcon && r(w) ? (C(), B(E(r(w)), A(H({ key: 0 }, r(u))), null, 16)) : g("", !0)
+        k(b.$slots, "icon", A(B(r(u))), () => [
+          !e.noIcon && r(w) ? (C(), E(H(r(w)), A(_({ key: 0 }, r(u))), null, 16)) : g("", !0)
         ]),
         m("div", J, [
           k(b.$slots, "default")
         ]),
         s.dismissible ? (C(), x("button", {
           key: 0,
-          class: "m-4px ml-8px h-16px",
-          onClick: d,
+          class: "m-[4px] ml-[8px] h-[16px]",
+          onClick: n,
           "aria-label": "Dismiss"
         }, [
           S(r(Z), {
@@ -188,22 +188,22 @@ const v = ({
       ], 2),
       r(h).body ? (C(), x("div", {
         key: 0,
-        class: p(["p-16px", r(l).bodyClass])
+        class: p(["p-[16px]", r(l).bodyClass])
       }, [
         k(b.$slots, "body")
       ], 2)) : g("", !0),
       r(h).details ? (C(), x("details", {
         key: 1,
-        class: p(["p-16px border-t-1", [r(l).bodyClass, r(l).borderClass]]),
+        class: p(["p-[16px] border-t-1", [r(l).bodyClass, r(l).borderClass]]),
         ref_key: "detailsRef",
-        ref: i
+        ref: d
       }, [
         m("summary", {
           class: p(["flex font-medium cursor-pointer details-none", r(l).detailsHeaderClass])
         }, [
           S(r(L), {
             strokeColor: r(l).iconChevronColor,
-            class: "icon my-4px mr-8px transition transform -rotate-90 open:rotate-0"
+            class: "icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"
           }, null, 8, ["strokeColor"]),
           N(" " + O(e.detailsTitle), 1)
         ], 2),
@@ -223,5 +223,5 @@ export {
   ee as default
 };
 
-/* <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"> */
+/* <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.es.mjs.map