@cypress-design/vue-accordion 0.4.2 → 0.4.4

package/.turbo/turbo-build.log

@@ -1,13 +1,13 @@
 $ yarn build:module && yarn build:types
 $ yarn vite build
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
-vite v4.2.2 building for production...
+vite v4.3.9 building for production...
 transforming...
 ✓ 5 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.mjs  4.96 kB │ gzip: 1.84 kB │ map: 262.63 kB
-dist/index.umd.js  4.68 kB │ gzip: 1.81 kB │ map: 262.39 kB
-✓ built in 5.32s
+dist/index.es.mjs  5.00 kB │ gzip: 1.86 kB │ map: 292.50 kB
+dist/index.umd.js  4.69 kB │ gzip: 1.82 kB │ map: 292.24 kB
+✓ built in 4.56s
 $ yarn vue-tsc --project ./tsconfig.build.json
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/Accordion.rootstory.tsx

@@ -15,12 +15,13 @@ export default (options: AccordionStoryOptions = {}) => {
   } = options
 
   return (
-    <div className="m-[16px]">
+    <div class="m-[16px]">
       <Accordion
         title={title}
         separator={separator}
         description={description}
         icon={icon}
+        // @ts-expect-error volar is a little too strict for tsx html attributes. Only do this for tests
         open={open}
         fullWidthContent={fullWidthContent}
         headingClassName={headingClassName}

package/Accordion.vue

@@ -14,7 +14,7 @@
           :class="CssClasses.separator"
           role="separator"
         />
-        <span class="flex-grow pr-[16px]">
+        <span class="flex-grow grow pr-[16px]">
           <span
             :class="[
               titleClassName ? titleClassName : CssClasses.summaryTitleColor,
@@ -51,9 +51,6 @@
 </template>
 
 <script lang="ts" setup>
-import { CssClasses } from '@cypress-design/constants-accordion'
-import { DetailsAnimation } from '@cypress-design/details-animation'
-import { IconChevronDownSmall } from '@cypress-design/vue-icon'
 import {
   FunctionalComponent,
   SVGAttributes,
@@ -61,6 +58,9 @@ import {
   ref,
   useSlots,
 } from 'vue'
+import { CssClasses } from '@cypress-design/constants-accordion'
+import { DetailsAnimation } from '@cypress-design/details-animation'
+import { IconChevronDownSmall } from '@cypress-design/vue-icon'
 
 const slots = useSlots()
 

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @cypress-design/vue-accordion
 
+## 0.4.4
+
+### Patch Changes
+
+- [#245](https://github.com/cypress-io/cypress-design/pull/245) [`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171) Thanks [@elevatebart](https://github.com/elevatebart)! - use tailwind to rollup classes in the final package
+
+- Updated dependencies [[`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171)]:
+  - @cypress-design/vue-icon@0.23.1
+
+## 0.4.3
+
+### Patch Changes
+
+- [`4917933`](https://github.com/cypress-io/cypress-design/commit/4917933c82078090c7c29e94a090737e0427821d) Thanks [@elevatebart](https://github.com/elevatebart)! - make accordion compatible with tw
+
 ## 0.4.2
 
 ### Patch Changes

package/dist/Accordion.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.
      */
-    icon?: FunctionalComponent<SVGAttributes, {}> | undefined;
+    icon?: FunctionalComponent<SVGAttributes, {}, any> | undefined;
     /**
      * Should we add a vertical separator between the icon and the text.
      */
@@ -48,7 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
      * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.
      */
-    icon?: FunctionalComponent<SVGAttributes, {}> | undefined;
+    icon?: FunctionalComponent<SVGAttributes, {}, any> | undefined;
     /**
      * Should we add a vertical separator between the icon and the text.
      */
@@ -71,9 +71,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * removes the content wrapper from the content.
      */
     fullWidthContent?: boolean | undefined;
-}>>>, {}>, {
-    iconEl: (_: {}) => any;
-    default: (_: {}) => any;
+}>>>, {}, {}>, {
+    iconEl?(_: {}): any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/Accordion.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.vue.d.ts","sourceRoot":"","sources":["../Accordion.vue.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,mBAAmB,EACnB,aAAa,EAId,MAAM,KAAK,CAAA;;IAwDV;;;OAGG;WACI,MAAM;IACb;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;IAjCH;;;OAGG;WACI,MAAM;IACb;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;uBA2K0B,GAAG;wBACF,GAAG;;AAnQnC,wBAuRc;AACd,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAAE,MAAM,EAAE,CAAC,CAAA;KAAE,CAAA;CAAE,CAAC"}
+{"version":3,"file":"Accordion.vue.d.ts","sourceRoot":"","sources":["../Accordion.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EACnB,aAAa,EAId,MAAM,KAAK,CAAA;;IA0DV;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;IAjCH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;;;;;AAiOL,wBAA8G;AAE9G,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/index.es.mjs

@@ -1,8 +1,8 @@
-import { h as g, defineComponent as v, useSlots as b, ref as x, onMounted as w, openBlock as c, createElementBlock as p, createElementVNode as a, normalizeClass as s, unref as o, renderSlot as f, createBlock as N, createCommentVNode as C, toDisplayString as h, createVNode as $ } 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 B } from "@cypress-design/icon-registry";
-const n = {
+import { h, defineComponent as g, useSlots as v, ref as C, onMounted as x, openBlock as d, createElementBlock as u, createElementVNode as c, normalizeClass as n, unref as o, renderSlot as y, createBlock as b, createCommentVNode as f, toDisplayString as k, createVNode as w } from "vue";
+import { DetailsAnimation as N } from "@cypress-design/details-animation";
+import * as $ from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as D } from "@cypress-design/icon-registry";
+const s = {
   summary: "details-none card open:rounded-b-none",
   summaryDiv: "flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px]",
   summaryColor: "bg-white",
@@ -15,119 +15,124 @@ const n = {
   chevron: "flex-shrink-0 transition transform rotate-0 open:rotate-180",
   contentWrapper: "border border-gray-100 rounded-b-md border-t-0",
   content: "px-[24px] py-[16px]"
-}, E = ({
-  body: e,
-  compiledClasses: t,
-  size: r,
-  class: l,
-  interactiveColorsOnGroup: m,
-  ...d
+}, O = ({
+  body: m,
+  compiledClasses: a,
+  size: l,
+  ...r
 }) => {
-  const i = Object.keys(d).reduce(
-    (k, u) => (!B.includes(u) && u !== "name" && (k[u] = d[u]), k),
+  const t = Object.keys(r).reduce(
+    (e, p) => (!D.includes(
+      p
+    ) && p !== "name" && (e[p] = r[p]), e),
     {}
-  ), y = {
-    width: r,
-    height: r,
-    viewBox: `0 0 ${r} ${r}`,
+  ), i = {
+    width: l,
+    height: l,
+    viewBox: `0 0 ${l} ${l}`,
     fill: "none",
-    innerHTML: e,
-    ...i
+    innerHTML: m,
+    class: void 0,
+    ...t
     // add all standard attributes back to the svg tag
   };
-  return t.length && (y.class = t.join(" ")), y;
-}, O = (e) => {
-  const { sizeWithDefault: t, compiledClasses: r } = z.getComponentAttributes({ ...e, availableSizes: ["8", "16"] }), l = {
+  return a.length && (i.class = a.join(" ")), i;
+}, z = (m) => {
+  const { interactiveColorsOnGroup: a, name: l, ...r } = m, { sizeWithDefault: t, compiledClasses: i } = $.getComponentAttributes({
+    ...r,
+    availableSizes: ["8", "16"],
+    interactiveColorsOnGroup: a
+  }), e = {
     8: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 2.5 3 3 3-3" class="icon-dark"/>',
     16: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 6 4 4 4-4" class="icon-dark"/>'
   }[t];
-  if (!l)
+  if (!e)
     throw Error(`Icon "chevron-down-small" is not available in size ${t}`);
-  return g("svg", E({
-    ...e,
+  return h("svg", O({
+    ...r,
     size: t,
-    body: l,
-    compiledClasses: r
+    body: e,
+    compiledClasses: i
   }));
-}, S = { class: "flex-grow pr-[16px]" }, A = /* @__PURE__ */ v({
+}, B = { class: "flex-grow grow pr-[16px]" }, T = /* @__PURE__ */ g({
   __name: "Accordion",
   props: {
-    title: null,
-    description: null,
-    icon: null,
+    title: {},
+    description: {},
+    icon: { type: [Function, Object] },
     separator: { type: Boolean },
-    titleClassName: null,
-    descriptionClassName: null,
-    headingClassName: null,
+    titleClassName: {},
+    descriptionClassName: {},
+    headingClassName: {},
     fullWidthContent: { type: Boolean }
   },
-  setup(e) {
-    const t = e, r = b(), l = x(null), m = x(null);
-    w(function() {
-      m.value && l.value && new D(m.value, l.value);
+  setup(m) {
+    const a = m, l = v(), r = C(null), t = C(null);
+    x(function() {
+      t.value && r.value && new N(t.value, r.value);
     });
-    const d = t.icon;
-    return (i, y) => (c(), p("details", {
+    const i = a.icon;
+    return (e, p) => (d(), u("details", {
       ref_key: "$details",
-      ref: m
+      ref: t
     }, [
-      a("summary", {
-        class: s([o(n).summary, e.headingClassName ?? o(n).summaryColor])
+      c("summary", {
+        class: n([o(s).summary, e.headingClassName ?? o(s).summaryColor])
       }, [
-        a("span", {
-          class: s(o(n).summaryDiv)
+        c("span", {
+          class: n(o(s).summaryDiv)
         }, [
-          a("span", {
-            class: s(o(n).icon)
+          c("span", {
+            class: n(o(s).icon)
           }, [
-            f(i.$slots, "iconEl", {}, () => [
-              t.icon ? (c(), N(o(d), { key: 0 })) : C("", !0)
+            y(e.$slots, "iconEl", {}, () => [
+              a.icon ? (d(), b(o(i), { key: 0 })) : f("", !0)
             ])
           ], 2),
-          (t.icon || o(r).iconEl) && e.separator ? (c(), p("span", {
+          (a.icon || o(l).iconEl) && e.separator ? (d(), u("span", {
             key: 0,
-            class: s(o(n).separator),
+            class: n(o(s).separator),
             role: "separator"
-          }, null, 2)) : C("", !0),
-          a("span", S, [
-            a("span", {
-              class: s([
-                e.titleClassName ? e.titleClassName : o(n).summaryTitleColor,
-                o(n).summaryTitle
+          }, null, 2)) : f("", !0),
+          c("span", B, [
+            c("span", {
+              class: n([
+                e.titleClassName ? e.titleClassName : o(s).summaryTitleColor,
+                o(s).summaryTitle
               ])
-            }, h(e.title), 3),
-            e.description ? (c(), p("span", {
+            }, k(e.title), 3),
+            e.description ? (d(), u("span", {
               key: 0,
-              class: s([
-                o(n).summaryDescription,
-                e.descriptionClassName ?? o(n).summaryDescriptionColor
+              class: n([
+                o(s).summaryDescription,
+                e.descriptionClassName ?? o(s).summaryDescriptionColor
               ])
-            }, h(e.description), 3)) : C("", !0)
+            }, k(e.description), 3)) : f("", !0)
           ]),
-          $(o(O), {
+          w(o(z), {
             strokeColor: "gray-300",
-            class: s(["open:icon-dark-gray-500", o(n).chevron])
+            class: n(["open:icon-dark-gray-500", o(s).chevron])
           }, null, 8, ["class"])
         ], 2)
       ], 2),
-      a("div", {
+      c("div", {
         ref_key: "$content",
-        ref: l,
-        class: s(o(n).contentWrapper)
+        ref: r,
+        class: n(o(s).contentWrapper)
       }, [
-        e.fullWidthContent ? f(i.$slots, "default", { key: 0 }) : (c(), p("div", {
+        e.fullWidthContent ? y(e.$slots, "default", { key: 0 }) : (d(), u("div", {
           key: 1,
-          class: s(o(n).content)
+          class: n(o(s).content)
         }, [
-          f(i.$slots, "default")
+          y(e.$slots, "default")
         ], 2))
       ], 2)
     ], 512));
   }
 });
 export {
-  A as default
+  T as default
 };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-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-[63px] bg-white text-[18px] leading-[28px] font-medium text-indigo-500 block 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]"> */
+/* <wind-keep class="flex-grow grow pr-[16px] open:rounded-b-none flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px] bg-white text-[18px] leading-[28px] font-medium text-indigo-500 block 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]"> */