@cypress-design/vue-accordion 0.1.2 → 0.1.3

package/Accordion.vue

@@ -3,39 +3,41 @@
     <summary
       :class="[CssClasses.summary, headingClassName ?? CssClasses.summaryColor]"
     >
-      <span :class="CssClasses.icon">
-        <slot name="iconEl">
-          <Icon />
-        </slot>
-      </span>
-      <hr
-        v-if="(props.icon || slots.iconEl) && separator"
-        :class="CssClasses.separator"
-      />
-      <div class="flex-grow pr-16px">
-        <div
-          :class="[
-            titleClassName ? titleClassName : CssClasses.summaryTitleColor,
-            CssClasses.summaryTitle,
-          ]"
-        >
-          {{ title }}
-        </div>
-        <div
-          v-if="description"
-          :class="[
-            CssClasses.summaryDescription,
-            descriptionClassName ?? CssClasses.summaryDescriptionColor,
-          ]"
-        >
-          {{ description }}
+      <div :class="CssClasses.summaryDiv">
+        <span :class="CssClasses.icon">
+          <slot name="iconEl">
+            <Icon />
+          </slot>
+        </span>
+        <hr
+          v-if="(props.icon || slots.iconEl) && separator"
+          :class="CssClasses.separator"
+        />
+        <div class="flex-grow pr-16px">
+          <div
+            :class="[
+              titleClassName ? titleClassName : CssClasses.summaryTitleColor,
+              CssClasses.summaryTitle,
+            ]"
+          >
+            {{ title }}
+          </div>
+          <div
+            v-if="description"
+            :class="[
+              CssClasses.summaryDescription,
+              descriptionClassName ?? CssClasses.summaryDescriptionColor,
+            ]"
+          >
+            {{ description }}
+          </div>
         </div>
+        <IconChevronDownSmall
+          strokeColor="gray-300"
+          class="open:icon-dark-gray-500"
+          :class="CssClasses.chevron"
+        />
       </div>
-      <IconChevronDownSmall
-        strokeColor="gray-300"
-        class="open:icon-dark-gray-500"
-        :class="CssClasses.chevron"
-      />
     </summary>
     <div ref="content" :class="CssClasses.contentWrapper">
       <!-- @slot expandable body of the collapsible accordion -->

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/vue-accordion
 
+## 0.1.3
+
+### Patch Changes
+
+- [`6cece49`](https://github.com/cypress-io/cypress-design/commit/6cece49fc60db7046df81a3f77e9a696326e55a9) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: adapt accordion to safari 14
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const CssClasses: {
-    details: string;
     summary: string;
+    summaryDiv: string;
     summaryColor: string;
     summaryTitle: string;
     summaryTitleColor: string;

package/dist/index.es.mjs

@@ -1,10 +1,10 @@
-import { h as g, defineComponent as b, useSlots as w, ref as x, onMounted as N, openBlock as p, createElementBlock as y, createElementVNode as m, normalizeClass as r, unref as o, renderSlot as C, createVNode as h, createCommentVNode as k, toDisplayString as v } from "vue";
+import { h as g, defineComponent as b, useSlots as w, ref as x, onMounted as N, openBlock as p, createElementBlock as y, createElementVNode as i, normalizeClass as s, unref as o, renderSlot as C, createVNode as h, createCommentVNode as k, toDisplayString as v } from "vue";
 import { DetailsAnimation as D } from "@cypress-design/details-animation";
 import * as z from "@cypress-design/icon-registry";
 import { ICON_COLOR_PROP_NAMES as E } from "@cypress-design/icon-registry";
 const t = {
-  details: "",
-  summary: "details-none min-h-65px py-12px card open:rounded-b-none px-24px flex flex-row flex-nowrap items-center",
+  summary: "details-none card open:rounded-b-none",
+  summaryDiv: "flex flex-row py-12px px-24px flex-nowrap items-center min-h-65px",
   summaryColor: "bg-white",
   summaryTitle: "text-18px leading-28px font-medium",
   summaryTitleColor: "text-indigo-500",
@@ -18,22 +18,22 @@ const t = {
 }, O = ({
   body: e,
   compiledClasses: n,
-  size: s,
+  size: r,
   class: l,
   interactiveColorsOnGroup: d,
   ...u
 }) => {
-  const i = Object.keys(u).reduce((c, a) => (E.includes(a) || (c[a] = u[a]), c), {}), f = {
-    width: s,
-    height: s,
-    viewBox: `0 0 ${s} ${s}`,
+  const c = Object.keys(u).reduce((m, a) => (E.includes(a) || (m[a] = u[a]), m), {}), f = {
+    width: r,
+    height: r,
+    viewBox: `0 0 ${r} ${r}`,
     fill: "none",
     innerHTML: e,
-    ...i
+    ...c
   };
   return n.length && (f.class = n.join(" ")), f;
 }, $ = (e) => {
-  const { sizeWithDefault: n, compiledClasses: s } = z.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
+  const { sizeWithDefault: n, compiledClasses: r } = z.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
     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"/>'
   }[n];
@@ -43,7 +43,7 @@ const t = {
     ...e,
     size: n,
     body: l,
-    compiledClasses: s
+    compiledClasses: r
   }));
 }, B = { class: "flex-grow pr-16px" }, j = /* @__PURE__ */ b({
   __name: "Accordion",
@@ -58,61 +58,65 @@ const t = {
     fullWidthContent: { type: Boolean }
   },
   setup(e) {
-    const n = e, s = w(), l = x(null), d = x(null);
+    const n = e, r = w(), l = x(null), d = x(null);
     N(function() {
       d.value && l.value && new D(d.value, l.value);
     });
     const u = n.icon;
-    return (i, f) => {
-      var c, a;
+    return (c, f) => {
+      var m, a;
       return p(), y("details", {
         ref_key: "details",
         ref: d
       }, [
-        m("summary", {
-          class: r([o(t).summary, (c = e.headingClassName) != null ? c : o(t).summaryColor])
+        i("summary", {
+          class: s([o(t).summary, (m = e.headingClassName) != null ? m : o(t).summaryColor])
         }, [
-          m("span", {
-            class: r(o(t).icon)
+          i("div", {
+            class: s(o(t).summaryDiv)
           }, [
-            C(i.$slots, "iconEl", {}, () => [
-              h(o(u))
-            ])
-          ], 2),
-          (n.icon || o(s).iconEl) && e.separator ? (p(), y("hr", {
-            key: 0,
-            class: r(o(t).separator)
-          }, null, 2)) : k("", !0),
-          m("div", B, [
-            m("div", {
-              class: r([
-                e.titleClassName ? e.titleClassName : o(t).summaryTitleColor,
-                o(t).summaryTitle
+            i("span", {
+              class: s(o(t).icon)
+            }, [
+              C(c.$slots, "iconEl", {}, () => [
+                h(o(u))
               ])
-            }, v(e.title), 3),
-            e.description ? (p(), y("div", {
+            ], 2),
+            (n.icon || o(r).iconEl) && e.separator ? (p(), y("hr", {
               key: 0,
-              class: r([
-                o(t).summaryDescription,
-                (a = e.descriptionClassName) != null ? a : o(t).summaryDescriptionColor
-              ])
-            }, v(e.description), 3)) : k("", !0)
-          ]),
-          h(o($), {
-            strokeColor: "gray-300",
-            class: r(["open:icon-dark-gray-500", o(t).chevron])
-          }, null, 8, ["class"])
+              class: s(o(t).separator)
+            }, null, 2)) : k("", !0),
+            i("div", B, [
+              i("div", {
+                class: s([
+                  e.titleClassName ? e.titleClassName : o(t).summaryTitleColor,
+                  o(t).summaryTitle
+                ])
+              }, v(e.title), 3),
+              e.description ? (p(), y("div", {
+                key: 0,
+                class: s([
+                  o(t).summaryDescription,
+                  (a = e.descriptionClassName) != null ? a : o(t).summaryDescriptionColor
+                ])
+              }, v(e.description), 3)) : k("", !0)
+            ]),
+            h(o($), {
+              strokeColor: "gray-300",
+              class: s(["open:icon-dark-gray-500", o(t).chevron])
+            }, null, 8, ["class"])
+          ], 2)
         ], 2),
-        m("div", {
+        i("div", {
           ref_key: "content",
           ref: l,
-          class: r(o(t).contentWrapper)
+          class: s(o(t).contentWrapper)
         }, [
-          e.fullWidthContent ? C(i.$slots, "default", { key: 0 }) : (p(), y("div", {
+          e.fullWidthContent ? C(c.$slots, "default", { key: 0 }) : (p(), y("div", {
             key: 1,
-            class: r(o(t).content)
+            class: s(o(t).content)
           }, [
-            C(i.$slots, "default")
+            C(c.$slots, "default")
           ], 2))
         ], 2)
       ], 512);
@@ -123,5 +127,5 @@ export {
   j as default
 };
 
-/* <windicss-keep class="flex-grow pr-16px open:icon-dark-gray-500 icon-dark-gray-300 details-none min-h-65px py-12px card open:rounded-b-none px-24px flex flex-row flex-nowrap items-center bg-white text-18px leading-28px font-medium text-indigo-500 text-14px leading-20px font-normal text-gray-700 mr-24px flex-shrink-0 w-1px h-40px bg-gray-100 mr-16px transition transform rotate-0 open:rotate-180 border border-gray-100 rounded-b-md border-t-0 py-16px"> */
+/* <windicss-keep class="flex-grow pr-16px open:icon-dark-gray-500 icon-dark-gray-300 details-none card open:rounded-b-none flex flex-row py-12px px-24px flex-nowrap items-center min-h-65px bg-white text-18px leading-28px font-medium text-indigo-500 text-14px leading-20px font-normal text-gray-700 mr-24px flex-shrink-0 w-1px h-40px bg-gray-100 mr-16px transition transform rotate-0 open:rotate-180 border border-gray-100 rounded-b-md border-t-0 py-16px"> */
 //# sourceMappingURL=index.es.mjs.map