@cypress-design/vue-accordion 0.4.3 → 0.4.5

package/.turbo/turbo-build.log

@@ -1,13 +1,14 @@
 $ yarn build:module && yarn build:types
 $ yarn vite build
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
-vite v4.3.5 building for production...
+The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
+vite v5.0.4 building for production...
 transforming...
-✓ 5 modules transformed.
+✓ 4 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.mjs  4.96 kB │ gzip: 1.84 kB │ map: 262.64 kB
-dist/index.umd.js  4.69 kB │ gzip: 1.82 kB │ map: 262.39 kB
-✓ built in 5.37s
+dist/index.es.mjs  3.88 kB │ gzip: 1.34 kB │ map: 4.73 kB
+dist/index.umd.js  3.62 kB │ gzip: 1.27 kB │ map: 4.61 kB
+✓ built in 2.88s
 $ 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

@@ -51,16 +51,17 @@
 </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,
   onMounted,
   ref,
+  toRaw,
   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()
 
@@ -111,5 +112,5 @@ onMounted(function () {
   }
 })
 
-const Icon = props.icon
+const Icon = toRaw(props.icon)
 </script>

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @cypress-design/vue-accordion
 
+## 0.4.5
+
+### Patch Changes
+
+- [#350](https://github.com/cypress-io/cypress-design/pull/350) [`abc414d`](https://github.com/cypress-io/cypress-design/commit/abc414da149eb6fe0cfa61497a0aa8630d8d8d6e) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: remove some warnings returned by Vue compiler
+
+## 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

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,7 +71,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
      * removes the content wrapper from the content.
      */
     fullWidthContent?: boolean | undefined;
-}>>>, {}>, {
+}>>>, {}, {}>, {
     iconEl?(_: {}): any;
     default?(_: {}): any;
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.vue.d.ts","sourceRoot":"","sources":["../Accordion.vue.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,mBAAmB,EACnB,aAAa,EAId,MAAM,KAAK,CAAA;;IAsDV;;;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"}
+{"version":3,"file":"Accordion.vue.d.ts","sourceRoot":"","sources":["../Accordion.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EACnB,aAAa,EAKd,MAAM,KAAK,CAAA;;IAkUV;;;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;;;;;;AAIL,wBAAwG;AACxG,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,7 @@
-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 { defineComponent as k, useSlots as x, ref as u, onMounted as g, toRaw as h, openBlock as t, createElementBlock as a, createElementVNode as n, normalizeClass as r, unref as e, renderSlot as p, createBlock as v, createCommentVNode as c, toDisplayString as d, createVNode as b } from "vue";
+import { DetailsAnimation as N } from "@cypress-design/details-animation";
+import { IconChevronDownSmall as w } from "@cypress-design/vue-icon";
+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 +14,85 @@ 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
-}) => {
-  const i = Object.keys(d).reduce(
-    (k, u) => (!B.includes(u) && u !== "name" && (k[u] = d[u]), k),
-    {}
-  ), y = {
-    width: r,
-    height: r,
-    viewBox: `0 0 ${r} ${r}`,
-    fill: "none",
-    innerHTML: e,
-    ...i
-    // 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 = {
-    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)
-    throw Error(`Icon "chevron-down-small" is not available in size ${t}`);
-  return g("svg", E({
-    ...e,
-    size: t,
-    body: l,
-    compiledClasses: r
-  }));
-}, S = { class: "flex-grow grow pr-[16px]" }, A = /* @__PURE__ */ v({
+}, D = { class: "flex-grow grow pr-[16px]" }, T = /* @__PURE__ */ k({
   __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(y) {
+    const f = x(), l = y, i = u(null), m = u(null);
+    g(function() {
+      m.value && i.value && new N(m.value, i.value);
     });
-    const d = t.icon;
-    return (i, y) => (c(), p("details", {
+    const C = h(l.icon);
+    return (o, $) => (t(), a("details", {
       ref_key: "$details",
       ref: m
     }, [
-      a("summary", {
-        class: s([o(n).summary, e.headingClassName ?? o(n).summaryColor])
+      n("summary", {
+        class: r([e(s).summary, o.headingClassName ?? e(s).summaryColor])
       }, [
-        a("span", {
-          class: s(o(n).summaryDiv)
+        n("span", {
+          class: r(e(s).summaryDiv)
         }, [
-          a("span", {
-            class: s(o(n).icon)
+          n("span", {
+            class: r(e(s).icon)
           }, [
-            f(i.$slots, "iconEl", {}, () => [
-              t.icon ? (c(), N(o(d), { key: 0 })) : C("", !0)
+            p(o.$slots, "iconEl", {}, () => [
+              l.icon ? (t(), v(e(C), { key: 0 })) : c("", !0)
             ])
           ], 2),
-          (t.icon || o(r).iconEl) && e.separator ? (c(), p("span", {
+          (l.icon || e(f).iconEl) && o.separator ? (t(), a("span", {
             key: 0,
-            class: s(o(n).separator),
+            class: r(e(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)) : c("", !0),
+          n("span", D, [
+            n("span", {
+              class: r([
+                o.titleClassName ? o.titleClassName : e(s).summaryTitleColor,
+                e(s).summaryTitle
               ])
-            }, h(e.title), 3),
-            e.description ? (c(), p("span", {
+            }, d(o.title), 3),
+            o.description ? (t(), a("span", {
               key: 0,
-              class: s([
-                o(n).summaryDescription,
-                e.descriptionClassName ?? o(n).summaryDescriptionColor
+              class: r([
+                e(s).summaryDescription,
+                o.descriptionClassName ?? e(s).summaryDescriptionColor
               ])
-            }, h(e.description), 3)) : C("", !0)
+            }, d(o.description), 3)) : c("", !0)
           ]),
-          $(o(O), {
+          b(e(w), {
             strokeColor: "gray-300",
-            class: s(["open:icon-dark-gray-500", o(n).chevron])
+            class: r(["open:icon-dark-gray-500", e(s).chevron])
           }, null, 8, ["class"])
         ], 2)
       ], 2),
-      a("div", {
+      n("div", {
         ref_key: "$content",
-        ref: l,
-        class: s(o(n).contentWrapper)
+        ref: i,
+        class: r(e(s).contentWrapper)
       }, [
-        e.fullWidthContent ? f(i.$slots, "default", { key: 0 }) : (c(), p("div", {
+        o.fullWidthContent ? p(o.$slots, "default", { key: 0 }) : (t(), a("div", {
           key: 1,
-          class: s(o(n).content)
+          class: r(e(s).content)
         }, [
-          f(i.$slots, "default")
+          p(o.$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: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]"> */