@cypress-design/vue-alert 0.1.1 → 0.1.2

package/Alert.vue

@@ -1,15 +1,28 @@
 <template>
-  <div v-if="!dismissed" class="overflow-hidden text-left" :class="props.notRounded ? undefined : 'rounded'">
+  <div
+    v-if="!dismissed"
+    class="overflow-hidden text-left"
+    :class="props.notRounded ? undefined : 'rounded'"
+  >
     <div class="flex p-16px" :class="typeClasses.headerClass">
       <!-- @slot replace the default left icon here -->
       <slot name="icon" v-bind="computedIconProps">
-        <component v-if="!props.noIcon && icon" :is="icon" v-bind="computedIconProps" />
+        <component
+          v-if="!props.noIcon && icon"
+          :is="icon"
+          v-bind="computedIconProps"
+        />
       </slot>
       <div class="flex-1 font-medium">
         <!-- @slot title of the alert -->
         <slot />
       </div>
-      <button v-if="dismissible" class="m-4px ml-8px h-16px" @click="dismiss" aria-label="Dismiss">
+      <button
+        v-if="dismissible"
+        class="m-4px ml-8px h-16px"
+        @click="dismiss"
+        aria-label="Dismiss"
+      >
         <IconActionDeleteLarge :stroke-color="typeClasses.iconCloseColor" />
       </button>
     </div>
@@ -17,26 +30,42 @@
       <!-- @slot body/details of the alert -->
       <slot name="body" />
     </div>
-    <details v-if="slots.details" class="p-16px border-t-1" :class="[typeClasses.bodyClass, typeClasses.borderClass]">
-      <summary class="flex font-medium cursor-pointer" :class="typeClasses.detailsHeaderClass">
-        <IconChevronDownSmall :strokeColor="typeClasses.iconChevronColor" class="icon my-4px mr-8px" />
+    <details
+      v-if="slots.details"
+      class="p-16px border-t-1"
+      ref="detailsRef"
+      :class="[typeClasses.bodyClass, typeClasses.borderClass]"
+    >
+      <summary
+        class="flex font-medium cursor-pointer details-none"
+        :class="typeClasses.detailsHeaderClass"
+      >
+        <IconChevronDownSmall
+          :strokeColor="typeClasses.iconChevronColor"
+          class="icon my-4px mr-8px transition transform -rotate-90 open:rotate-0"
+        />
         {{ props.detailsTitle }}
       </summary>
-      <div class="mt-16px">
-        <!--@slot Togglable additional details-->
-        <slot name="details" />
+      <div ref="contentRef">
+        <div class="mt-16px">
+          <!--@slot Togglable additional details-->
+          <slot name="details" />
+        </div>
       </div>
     </details>
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { FunctionalComponent, ComputedRef } from 'vue';
+import type { FunctionalComponent, ComputedRef } from 'vue'
 import { computed, useSlots, h, ref, onMounted, onUnmounted } from 'vue'
 import {
-  IconChevronDownSmall, IconActionDeleteLarge,
-  IconWarningCircle, IconCheckmarkOutline,
+  IconChevronDownSmall,
+  IconActionDeleteLarge,
+  IconWarningCircle,
+  IconCheckmarkOutline,
 } from '@cypress-design/vue-icon'
+import { DetailsAnimation } from '@cypress-design/details-animation'
 import type { AlertType } from '../constants'
 import { alertClasses } from '../constants'
 
@@ -48,38 +77,44 @@ const emit = defineEmits<{
   /**
    * Clicking on the dismiss button or dismissed after a timeout
    */
-  (event: 'dismiss'): void,
+  (event: 'dismiss'): void
 }>()
 
-const props = withDefaults(defineProps<{
-  /**
-   * Color scheme
-   */
-  type?: AlertType
-  /**
-   * If details are provided,text used in the toggle button
-   */
-  detailsTitle?: string
-  /**
-   * Show the dismiss button
-   */
-  dismissible?: boolean
-  /**
-   * When an icon is displayed by default, use this to remove it
-   */
-  noIcon?: boolean
-  /**
-   * If you need square corners
-   */
-  notRounded?: boolean
-  /**
-   * Dismiss the alert after a delay (in ms)
-   */
-  duration?: number
-}>(), {
-  type: 'info',
-  detailsTitle: 'Additional details',
-})
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Color scheme
+     */
+    type?: AlertType
+    /**
+     * If details are provided,text used in the toggle button
+     */
+    detailsTitle?: string
+    /**
+     * Show the dismiss button
+     */
+    dismissible?: boolean
+    /**
+     * When an icon is displayed by default, use this to remove it
+     */
+    noIcon?: boolean
+    /**
+     * If you need square corners
+     */
+    notRounded?: boolean
+    /**
+     * Dismiss the alert after a delay (in ms)
+     */
+    duration?: number
+  }>(),
+  {
+    type: 'info',
+    detailsTitle: 'Additional details',
+  }
+)
+
+const detailsRef = ref(null)
+const contentRef = ref(null)
 
 const typeClasses = computed(() => {
   return alertClasses[props.type]
@@ -93,6 +128,12 @@ onMounted(() => {
   }
 })
 
+onMounted(() => {
+  if (detailsRef.value && contentRef.value) {
+    new DetailsAnimation(detailsRef.value, contentRef.value)
+  }
+})
+
 onUnmounted(() => {
   if (timeout) {
     clearTimeout(timeout)
@@ -111,14 +152,14 @@ function dismiss() {
 const computedIconProps = computed(() => {
   return {
     strokeColor: alertClasses[props.type].iconColor,
-    class: 'my-4px mr-8px'
+    class: 'my-4px mr-8px',
   }
 })
 
 const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
   switch (props.type) {
     case 'info':
-      return null;
+      return null
     case 'success':
       return () => h(IconCheckmarkOutline, computedIconProps.value)
     case 'warning':
@@ -126,23 +167,7 @@ const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
     case 'error':
       return () => h(IconWarningCircle, computedIconProps.value)
     default:
-      return null;
+      return null
   }
 })
-
 </script>
-
-<style scoped>
-details :deep(summary::-webkit-details-marker) {
-  display: none;
-}
-
-details summary .icon {
-  transform: rotate(-90deg);
-  transition: transform 0.2s;
-}
-
-details[open] summary .icon {
-  transform: rotate(0);
-}
-</style>

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @cypress-design/vue-alert
 
+## 0.1.2
+
+### Patch Changes
+
+- [#74](https://github.com/cypress-io/cypress-design/pull/74) [`6d8b6fd`](https://github.com/cypress-io/cypress-design/commit/6d8b6fd763b0389d748884c35f4ff6dd73724977) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor to remove need for custom css
+
+- Updated dependencies [[`6d8b6fd`](https://github.com/cypress-io/cypress-design/commit/6d8b6fd763b0389d748884c35f4ff6dd73724977)]:
+  - @cypress-design/details-animation@0.0.1
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/index.es.mjs

@@ -1,72 +1,73 @@
-import { h as n, defineComponent as j, ref as A, useSlots as I, computed as f, onMounted as D, onUnmounted as S, openBlock as C, createElementBlock as b, normalizeClass as p, createElementVNode as v, unref as t, renderSlot as y, normalizeProps as x, guardReactiveProps as $, createBlock as E, resolveDynamicComponent as H, mergeProps as M, createCommentVNode as m, createVNode as _, createTextVNode as N, toDisplayString as O } from "vue";
-import * as h from "@cypress-design/icon-registry";
-import { ICON_COLOR_PROP_NAMES as T } from "@cypress-design/icon-registry";
-const k = ({
+import { h as i, defineComponent as I, ref as x, useSlots as S, computed as z, onMounted as j, onUnmounted as $, openBlock as C, createElementBlock as f, normalizeClass as m, createElementVNode as p, unref as t, renderSlot as v, normalizeProps as A, guardReactiveProps as E, createBlock as H, resolveDynamicComponent as M, mergeProps as N, createCommentVNode as g, createVNode as D, createTextVNode as T, toDisplayString as B } from "vue";
+import * as y from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as O } from "@cypress-design/icon-registry";
+import { DetailsAnimation as P } from "@cypress-design/details-animation";
+const h = ({
   body: s,
   compiledClasses: e,
   size: o,
   class: r,
-  interactiveColorsOnGroup: c,
-  ...l
+  interactiveColorsOnGroup: k,
+  ...n
 }) => {
-  const a = Object.keys(l).reduce((i, d) => (T.includes(d) || (i[d] = l[d]), i), {}), u = {
+  const c = Object.keys(n).reduce((a, d) => (O.includes(d) || (a[d] = n[d]), a), {}), l = {
     width: o,
     height: o,
     fill: "none",
     innerHTML: s,
-    ...a
+    ...c
   };
-  return e.length && (u.class = e.join(" ")), u;
-}, B = (s) => {
-  const { sizeWithDefault: e, compiledClasses: o } = h.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
+  return e.length && (l.class = e.join(" ")), l;
+}, V = (s) => {
+  const { sizeWithDefault: e, compiledClasses: o } = y.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
     16: '<path d="M3 13 13 3M3 3l10 10" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
   }[e];
   if (!r)
     throw Error(`Icon "action-delete-large" is not available in size ${e}`);
-  return n("svg", k({
+  return i("svg", h({
     ...s,
     size: e,
     body: r,
     compiledClasses: o
   }));
-}, P = (s) => {
-  const { sizeWithDefault: e, compiledClasses: o } = h.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
+}, Z = (s) => {
+  const { sizeWithDefault: e, compiledClasses: o } = y.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
     16: '<path d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" stroke="currentColor" stroke-width="2" class="icon-dark"/><path d="m6 8 1.5 2L10 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>'
   }[e];
   if (!r)
     throw Error(`Icon "checkmark-outline" is not available in size ${e}`);
-  return n("svg", k({
+  return i("svg", h({
     ...s,
     size: e,
     body: r,
     compiledClasses: o
   }));
-}, R = (s) => {
-  const { sizeWithDefault: e, compiledClasses: o } = h.getComponentAttributes({ ...s, availableSizes: ["8", "16"] }), r = {
+}, W = (s) => {
+  const { sizeWithDefault: e, compiledClasses: o } = y.getComponentAttributes({ ...s, availableSizes: ["8", "16"] }), r = {
     8: '<path d="m1 2.5 3 3 3-3" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
     16: '<path d="m4 6 4 4 4-4" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
   }[e];
   if (!r)
     throw Error(`Icon "chevron-down-small" is not available in size ${e}`);
-  return n("svg", k({
+  return i("svg", h({
     ...s,
     size: e,
     body: r,
     compiledClasses: o
   }));
-}, z = (s) => {
-  const { sizeWithDefault: e, compiledClasses: o } = h.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
+}, R = (s) => {
+  const { sizeWithDefault: e, compiledClasses: o } = y.getComponentAttributes({ ...s, availableSizes: ["16"] }), r = {
     16: '<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm1 5a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V5Zm-1 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor" class="icon-dark"/>'
   }[e];
   if (!r)
     throw Error(`Icon "warning-circle" is not available in size ${e}`);
-  return n("svg", k({
+  return i("svg", h({
     ...s,
     size: e,
     body: r,
     compiledClasses: o
   }));
-}, w = {
+}, _ = {
   neutral: {
     headerClass: "text-gray-800 bg-gray-100",
     bodyClass: "bg-gray-50 text-gray-500",
@@ -112,13 +113,7 @@ const k = ({
     iconColor: "jade-500",
     iconChevronColor: "jade-300"
   }
-};
-const V = (s, e) => {
-  const o = s.__vccOpts || s;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-}, Z = { class: "flex-1 font-medium" }, W = { class: "mt-16px" }, L = /* @__PURE__ */ j({
+}, L = { class: "flex-1 font-medium" }, G = { class: "mt-16px" }, K = /* @__PURE__ */ I({
   __name: "Alert",
   props: {
     type: { default: "info" },
@@ -130,86 +125,95 @@ const V = (s, e) => {
   },
   emits: ["dismiss"],
   setup(s, { emit: e }) {
-    const o = s, r = A(!1), c = I(), l = f(() => w[o.type]);
+    const o = s, r = x(!1), k = S(), n = x(null), c = x(null), l = z(() => _[o.type]);
     let a;
-    D(() => {
-      o.duration && (a = setTimeout(u, o.duration));
-    }), S(() => {
+    j(() => {
+      o.duration && (a = setTimeout(d, o.duration));
+    }), j(() => {
+      n.value && c.value && new P(n.value, c.value);
+    }), $(() => {
       a && clearTimeout(a);
     });
-    function u() {
+    function d() {
       r.value = !0, e("dismiss"), a && (clearTimeout(a), a = void 0);
     }
-    const i = f(() => ({
-      strokeColor: w[o.type].iconColor,
+    const u = z(() => ({
+      strokeColor: _[o.type].iconColor,
       class: "my-4px mr-8px"
-    })), d = f(() => {
+    })), w = z(() => {
       switch (o.type) {
         case "info":
           return null;
         case "success":
-          return () => n(P, i.value);
+          return () => i(Z, u.value);
         case "warning":
-          return () => n(z, i.value);
+          return () => i(R, u.value);
         case "error":
-          return () => n(z, i.value);
+          return () => i(R, u.value);
         default:
           return null;
       }
     });
-    return (g, G) => r.value ? m("", !0) : (C(), b("div", {
+    return (b, U) => r.value ? g("", !0) : (C(), f("div", {
       key: 0,
-      class: p(["overflow-hidden text-left", o.notRounded ? void 0 : "rounded"])
+      class: m(["overflow-hidden text-left", o.notRounded ? void 0 : "rounded"])
     }, [
-      v("div", {
-        class: p(["flex p-16px", t(l).headerClass])
+      p("div", {
+        class: m(["flex p-16px", t(l).headerClass])
       }, [
-        y(g.$slots, "icon", x($(t(i))), () => [
-          !o.noIcon && t(d) ? (C(), E(H(t(d)), x(M({ key: 0 }, t(i))), null, 16)) : m("", !0)
-        ], !0),
-        v("div", Z, [
-          y(g.$slots, "default", {}, void 0, !0)
+        v(b.$slots, "icon", A(E(t(u))), () => [
+          !o.noIcon && t(w) ? (C(), H(M(t(w)), A(N({ key: 0 }, t(u))), null, 16)) : g("", !0)
         ]),
-        s.dismissible ? (C(), b("button", {
+        p("div", L, [
+          v(b.$slots, "default")
+        ]),
+        s.dismissible ? (C(), f("button", {
           key: 0,
           class: "m-4px ml-8px h-16px",
-          onClick: u,
+          onClick: d,
           "aria-label": "Dismiss"
         }, [
-          _(t(B), {
+          D(t(V), {
             "stroke-color": t(l).iconCloseColor
           }, null, 8, ["stroke-color"])
-        ])) : m("", !0)
+        ])) : g("", !0)
       ], 2),
-      t(c).body ? (C(), b("div", {
+      t(k).body ? (C(), f("div", {
         key: 0,
-        class: p(["p-16px", t(l).bodyClass])
+        class: m(["p-16px", t(l).bodyClass])
       }, [
-        y(g.$slots, "body", {}, void 0, !0)
-      ], 2)) : m("", !0),
-      t(c).details ? (C(), b("details", {
+        v(b.$slots, "body")
+      ], 2)) : g("", !0),
+      t(k).details ? (C(), f("details", {
         key: 1,
-        class: p(["p-16px border-t-1", [t(l).bodyClass, t(l).borderClass]])
+        class: m(["p-16px border-t-1", [t(l).bodyClass, t(l).borderClass]]),
+        ref_key: "detailsRef",
+        ref: n
       }, [
-        v("summary", {
-          class: p(["flex font-medium cursor-pointer", t(l).detailsHeaderClass])
+        p("summary", {
+          class: m(["flex font-medium cursor-pointer details-none", t(l).detailsHeaderClass])
         }, [
-          _(t(R), {
+          D(t(W), {
             strokeColor: t(l).iconChevronColor,
-            class: "icon my-4px mr-8px"
+            class: "icon my-4px mr-8px transition transform -rotate-90 open:rotate-0"
           }, null, 8, ["strokeColor"]),
-          N(" " + O(o.detailsTitle), 1)
+          T(" " + B(o.detailsTitle), 1)
         ], 2),
-        v("div", W, [
-          y(g.$slots, "details", {}, void 0, !0)
-        ])
-      ], 2)) : m("", !0)
+        p("div", {
+          ref_key: "contentRef",
+          ref: c
+        }, [
+          p("div", G, [
+            v(b.$slots, "details")
+          ])
+        ], 512)
+      ], 2)) : g("", !0)
     ], 2));
   }
-}), F = /* @__PURE__ */ V(L, [["__scopeId", "data-v-5e7e1d8e"]]);
+});
 export {
-  F as default
+  K as default
 };
 
-/* <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"> */
+/* <windicss-keep class="overflow-hidden text-left rounded flex p-16px flex-1 font-medium m-4px ml-8px h-16px border-t-1 cursor-pointer details-none my-4px mr-8px transition transform -rotate-90 open:rotate-0 mt-16px text-gray-800 bg-gray-100 bg-gray-50 text-gray-500 border-gray-100 text-gray-600 text-indigo-700 bg-indigo-100 bg-indigo-50 text-indigo-500 border-indigo-100 text-indigo-600 text-orange-700 bg-orange-100 bg-orange-50 text-orange-500 border-orange-100 text-orange-600 text-red-700 bg-red-100 bg-red-50 text-red-500 border-red-100 text-red-600 text-jade-700 bg-jade-100 bg-jade-50 text-jade-600 border-jade-100 icon-dark-gray-600 icon-dark-gray-500 icon-dark-gray-300 icon-dark-indigo-500 icon-dark-indigo-300 icon-dark-orange-500 icon-dark-orange-400 icon-dark-orange-300 icon-dark-red-500 icon-dark-red-400 icon-dark-red-300 icon-dark-jade-600 icon-dark-jade-500 icon-dark-jade-300"> */
 //# sourceMappingURL=index.es.mjs.map