@cypress-design/vue-accordion 1.0.0 → 2.0.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
+ yarn run v1.22.22
1
2
  $ yarn build:module && yarn build:types
2
3
  $ yarn vite build
3
4
  $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
@@ -7,8 +8,9 @@ transforming...
7
8
  ✓ 4 modules transformed.
8
9
  rendering chunks...
9
10
  computing gzip size...
10
- dist/index.es.mjs 3.88 kB │ gzip: 1.35 kB │ map: 4.73 kB
11
- dist/index.umd.js 3.62 kB │ gzip: 1.28 kB │ map: 4.61 kB
12
- ✓ built in 3.57s
11
+ dist/index.es.mjs 3.39 kB │ gzip: 1.16 kB │ map: 4.72 kB
12
+ dist/index.umd.js 3.12 kB │ gzip: 1.09 kB │ map: 4.61 kB
13
+ ✓ built in 3.83s
13
14
  $ yarn vue-tsc --project ./tsconfig.build.json
14
15
  $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json
16
+ Done in 18.86s.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @cypress-design/vue-accordion
2
2
 
3
+ ## 2.0.0-next.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#468](https://github.com/cypress-io/cypress-design/pull/468) [`3236662`](https://github.com/cypress-io/cypress-design/commit/3236662fdecd5abbceadce750098a75301d48f88) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use tailwind components to manage specificity of styles
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [[`3236662`](https://github.com/cypress-io/cypress-design/commit/3236662fdecd5abbceadce750098a75301d48f88)]:
12
+ - @cypress-design/vue-icon@2.0.0-next.0
13
+
3
14
  ## 1.0.0
4
15
 
5
16
  ### Major Changes
package/dist/index.es.mjs CHANGED
@@ -1,20 +1,20 @@
1
- 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";
2
- import { DetailsAnimation as N } from "@cypress-design/details-animation";
1
+ import { defineComponent as k, useSlots as v, ref as p, onMounted as h, toRaw as N, openBlock as n, createElementBlock as t, createElementVNode as a, normalizeClass as r, unref as o, renderSlot as m, createBlock as D, createCommentVNode as d, toDisplayString as u, createVNode as g } from "vue";
2
+ import { DetailsAnimation as $ } from "@cypress-design/details-animation";
3
3
  import { IconChevronDownSmall as w } from "@cypress-design/vue-icon";
4
- const s = {
5
- summary: "details-none card open:rounded-b-none",
6
- summaryDiv: "flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px]",
7
- summaryColor: "bg-white",
8
- summaryTitle: "text-[18px] leading-[28px] font-medium",
9
- summaryTitleColor: "text-indigo-500 block",
10
- summaryDescription: "text-[14px] leading-[20px] font-normal block",
11
- summaryDescriptionColor: "text-gray-700",
4
+ const e = {
5
+ summary: "cyds-accordion-summary",
6
+ summaryDiv: "cyds-accordion-summarydiv",
7
+ summaryColor: "cyds-accordion-summarycolor",
8
+ summaryTitle: "cyds-accordion-summarytitle",
9
+ summaryTitleColor: "cyds-accordion-summarytitlecolor",
10
+ summaryDescription: "cyds-accordion-summarydescription",
11
+ summaryDescriptionColor: "cyds-accordion-summarydescriptioncolor",
12
12
  icon: "mr-[24px] flex-shrink-0",
13
- separator: "w-[1px] h-[40px] bg-gray-100 mr-[16px]",
14
- chevron: "flex-shrink-0 transition transform rotate-0 open:rotate-180",
15
- contentWrapper: "border border-gray-100 rounded-b-md border-t-0",
16
- content: "px-[24px] py-[16px]"
17
- }, D = { class: "flex-grow grow pr-[16px]" }, T = /* @__PURE__ */ k({
13
+ separator: "cyds-accordion-separator",
14
+ chevron: "cyds-accordion-chevron",
15
+ contentWrapper: "cyds-accordion-contentwrapper",
16
+ content: "cyds-accordion-content"
17
+ }, B = { class: "flex-grow grow pr-[16px]" }, V = /* @__PURE__ */ k({
18
18
  __name: "Accordion",
19
19
  props: {
20
20
  title: {},
@@ -27,72 +27,72 @@ const s = {
27
27
  fullWidthContent: { type: Boolean }
28
28
  },
29
29
  setup(y) {
30
- const f = x(), l = y, i = u(null), m = u(null);
31
- g(function() {
32
- m.value && i.value && new N(m.value, i.value);
30
+ const C = v(), c = y, l = p(null), i = p(null);
31
+ h(function() {
32
+ i.value && l.value && new $(i.value, l.value);
33
33
  });
34
- const C = h(l.icon);
35
- return (o, $) => (t(), a("details", {
34
+ const f = N(c.icon);
35
+ return (s, E) => (n(), t("details", {
36
36
  ref_key: "$details",
37
- ref: m
37
+ ref: i
38
38
  }, [
39
- n("summary", {
40
- class: r([e(s).summary, o.headingClassName ?? e(s).summaryColor])
39
+ a("summary", {
40
+ class: r([o(e).summary, s.headingClassName ?? o(e).summaryColor])
41
41
  }, [
42
- n("span", {
43
- class: r(e(s).summaryDiv)
42
+ a("span", {
43
+ class: r(o(e).summaryDiv)
44
44
  }, [
45
- n("span", {
46
- class: r(e(s).icon)
45
+ a("span", {
46
+ class: r(o(e).icon)
47
47
  }, [
48
- p(o.$slots, "iconEl", {}, () => [
49
- l.icon ? (t(), v(e(C), { key: 0 })) : c("", !0)
48
+ m(s.$slots, "iconEl", {}, () => [
49
+ c.icon ? (n(), D(o(f), { key: 0 })) : d("", !0)
50
50
  ])
51
51
  ], 2),
52
- (l.icon || e(f).iconEl) && o.separator ? (t(), a("span", {
52
+ (c.icon || o(C).iconEl) && s.separator ? (n(), t("span", {
53
53
  key: 0,
54
- class: r(e(s).separator),
54
+ class: r(o(e).separator),
55
55
  role: "separator"
56
- }, null, 2)) : c("", !0),
57
- n("span", D, [
58
- n("span", {
56
+ }, null, 2)) : d("", !0),
57
+ a("span", B, [
58
+ a("span", {
59
59
  class: r([
60
- o.titleClassName ? o.titleClassName : e(s).summaryTitleColor,
61
- e(s).summaryTitle
60
+ s.titleClassName ? s.titleClassName : o(e).summaryTitleColor,
61
+ o(e).summaryTitle
62
62
  ])
63
- }, d(o.title), 3),
64
- o.description ? (t(), a("span", {
63
+ }, u(s.title), 3),
64
+ s.description ? (n(), t("span", {
65
65
  key: 0,
66
66
  class: r([
67
- e(s).summaryDescription,
68
- o.descriptionClassName ?? e(s).summaryDescriptionColor
67
+ o(e).summaryDescription,
68
+ s.descriptionClassName ?? o(e).summaryDescriptionColor
69
69
  ])
70
- }, d(o.description), 3)) : c("", !0)
70
+ }, u(s.description), 3)) : d("", !0)
71
71
  ]),
72
- b(e(w), {
72
+ g(o(w), {
73
73
  strokeColor: "gray-300",
74
- class: r(["open:icon-dark-gray-500", e(s).chevron])
74
+ class: r(["open:icon-dark-gray-500", o(e).chevron])
75
75
  }, null, 8, ["class"])
76
76
  ], 2)
77
77
  ], 2),
78
- n("div", {
78
+ a("div", {
79
79
  ref_key: "$content",
80
- ref: i,
81
- class: r(e(s).contentWrapper)
80
+ ref: l,
81
+ class: r(o(e).contentWrapper)
82
82
  }, [
83
- o.fullWidthContent ? p(o.$slots, "default", { key: 0 }) : (t(), a("div", {
83
+ s.fullWidthContent ? m(s.$slots, "default", { key: 0 }) : (n(), t("div", {
84
84
  key: 1,
85
- class: r(e(s).content)
85
+ class: r(o(e).content)
86
86
  }, [
87
- p(o.$slots, "default")
87
+ m(s.$slots, "default")
88
88
  ], 2))
89
89
  ], 2)
90
90
  ], 512));
91
91
  }
92
92
  });
93
93
  export {
94
- T as default
94
+ V as default
95
95
  };
96
96
  //# sourceMappingURL=index.es.mjs.map
97
97
 
98
- /* <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]"> */
98
+ /* <wind-keep class="flex-grow grow pr-[16px] open:icon-dark-gray-500 icon-dark-gray-300"> */
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../Accordion.vue"],"sourcesContent":["export const CssClasses = {\n summary: 'details-none card open:rounded-b-none',\n summaryDiv: 'flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px]',\n summaryColor: 'bg-white',\n summaryTitle: 'text-[18px] leading-[28px] font-medium',\n summaryTitleColor: 'text-indigo-500 block',\n summaryDescription: 'text-[14px] leading-[20px] font-normal block',\n summaryDescriptionColor: 'text-gray-700',\n icon: 'mr-[24px] flex-shrink-0',\n separator: 'w-[1px] h-[40px] bg-gray-100 mr-[16px]',\n chevron: 'flex-shrink-0 transition transform rotate-0 open:rotate-180',\n contentWrapper: 'border border-gray-100 rounded-b-md border-t-0',\n content: 'px-[24px] py-[16px]',\n};\n","<template>\n <details ref=\"$details\">\n <summary\n :class=\"[CssClasses.summary, headingClassName ?? CssClasses.summaryColor]\"\n >\n <span :class=\"CssClasses.summaryDiv\">\n <span :class=\"CssClasses.icon\">\n <slot name=\"iconEl\">\n <Icon v-if=\"props.icon\" />\n </slot>\n </span>\n <span\n v-if=\"(props.icon || slots.iconEl) && separator\"\n :class=\"CssClasses.separator\"\n role=\"separator\"\n />\n <span class=\"flex-grow grow pr-[16px]\">\n <span\n :class=\"[\n titleClassName ? titleClassName : CssClasses.summaryTitleColor,\n CssClasses.summaryTitle,\n ]\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[\n CssClasses.summaryDescription,\n descriptionClassName ?? CssClasses.summaryDescriptionColor,\n ]\"\n >\n {{ description }}\n </span>\n </span>\n <IconChevronDownSmall\n strokeColor=\"gray-300\"\n class=\"open:icon-dark-gray-500\"\n :class=\"CssClasses.chevron\"\n />\n </span>\n </summary>\n <div ref=\"$content\" :class=\"CssClasses.contentWrapper\">\n <!-- @slot expandable body of the collapsible accordion -->\n <slot v-if=\"fullWidthContent\" />\n <div v-else :class=\"CssClasses.content\">\n <slot />\n </div>\n </div>\n </details>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n FunctionalComponent,\n SVGAttributes,\n onMounted,\n ref,\n toRaw,\n useSlots,\n} from 'vue'\nimport { CssClasses } from '@cypress-design/constants-accordion'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\n\nconst slots = useSlots()\n\nconst props = defineProps<{\n /**\n * Main indigo title.\n * [NOTE] Its color and font can be customized using `titleClassName`.\n */\n title: string\n /**\n * Second line in the heading.\n */\n description?: string\n /**\n * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.\n */\n icon?: FunctionalComponent<SVGAttributes>\n /**\n * Should we add a vertical separator between the icon and the text.\n */\n separator?: boolean\n /**\n * Change the font and color of the heading title\n */\n titleClassName?: string\n /**\n * Change the font and color of the heading description\n */\n descriptionClassName?: string\n /**\n * Additional classes to add to the header of the accordion\n * > [NOTE] useful to change the background color of the header\n */\n headingClassName?: string\n /**\n * When using content that needs ti be edge to edge,\n * removes the content wrapper from the content.\n */\n fullWidthContent?: boolean\n}>()\n\nconst $content = ref(null)\nconst $details = ref(null)\n\nonMounted(function () {\n if ($details.value && $content.value) {\n new DetailsAnimation($details.value, $content.value)\n }\n})\n\nconst Icon = toRaw(props.icon)\n</script>\n"],"names":["CssClasses","slots","useSlots","props","__props","$content","ref","$details","onMounted","DetailsAnimation","Icon","toRaw"],"mappings":";;;AAAO,MAAMA,IAAa;AAAA,EACtB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,SAAS;AACb;;;;;;;;;;;;;ACoDA,UAAMC,IAAQC,KAERC,IAAQC,GAsCRC,IAAWC,EAAI,IAAI,GACnBC,IAAWD,EAAI,IAAI;AAEzB,IAAAE,EAAU,WAAY;AAChB,MAAAD,EAAS,SAASF,EAAS,SAC7B,IAAII,EAAiBF,EAAS,OAAOF,EAAS,KAAK;AAAA,IACrD,CACD;AAEK,UAAAK,IAAOC,EAAMR,EAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.es.mjs","../Accordion.vue"],"sourcesContent":["const CssClasses = {\n summary: \"cyds-accordion-summary\",\n summaryDiv: \"cyds-accordion-summarydiv\",\n summaryColor: \"cyds-accordion-summarycolor\",\n summaryTitle: \"cyds-accordion-summarytitle\",\n summaryTitleColor: \"cyds-accordion-summarytitlecolor\",\n summaryDescription: \"cyds-accordion-summarydescription\",\n summaryDescriptionColor: \"cyds-accordion-summarydescriptioncolor\",\n icon: \"mr-[24px] flex-shrink-0\",\n separator: \"cyds-accordion-separator\",\n chevron: \"cyds-accordion-chevron\",\n contentWrapper: \"cyds-accordion-contentwrapper\",\n content: \"cyds-accordion-content\"\n};\n\nexport { CssClasses };\n//# sourceMappingURL=index.es.mjs.map\n","<template>\n <details ref=\"$details\">\n <summary\n :class=\"[CssClasses.summary, headingClassName ?? CssClasses.summaryColor]\"\n >\n <span :class=\"CssClasses.summaryDiv\">\n <span :class=\"CssClasses.icon\">\n <slot name=\"iconEl\">\n <Icon v-if=\"props.icon\" />\n </slot>\n </span>\n <span\n v-if=\"(props.icon || slots.iconEl) && separator\"\n :class=\"CssClasses.separator\"\n role=\"separator\"\n />\n <span class=\"flex-grow grow pr-[16px]\">\n <span\n :class=\"[\n titleClassName ? titleClassName : CssClasses.summaryTitleColor,\n CssClasses.summaryTitle,\n ]\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[\n CssClasses.summaryDescription,\n descriptionClassName ?? CssClasses.summaryDescriptionColor,\n ]\"\n >\n {{ description }}\n </span>\n </span>\n <IconChevronDownSmall\n strokeColor=\"gray-300\"\n class=\"open:icon-dark-gray-500\"\n :class=\"CssClasses.chevron\"\n />\n </span>\n </summary>\n <div ref=\"$content\" :class=\"CssClasses.contentWrapper\">\n <!-- @slot expandable body of the collapsible accordion -->\n <slot v-if=\"fullWidthContent\" />\n <div v-else :class=\"CssClasses.content\">\n <slot />\n </div>\n </div>\n </details>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n FunctionalComponent,\n SVGAttributes,\n onMounted,\n ref,\n toRaw,\n useSlots,\n} from 'vue'\nimport { CssClasses } from '@cypress-design/constants-accordion'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\n\nconst slots = useSlots()\n\nconst props = defineProps<{\n /**\n * Main indigo title.\n * [NOTE] Its color and font can be customized using `titleClassName`.\n */\n title: string\n /**\n * Second line in the heading.\n */\n description?: string\n /**\n * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.\n */\n icon?: FunctionalComponent<SVGAttributes>\n /**\n * Should we add a vertical separator between the icon and the text.\n */\n separator?: boolean\n /**\n * Change the font and color of the heading title\n */\n titleClassName?: string\n /**\n * Change the font and color of the heading description\n */\n descriptionClassName?: string\n /**\n * Additional classes to add to the header of the accordion\n * > [NOTE] useful to change the background color of the header\n */\n headingClassName?: string\n /**\n * When using content that needs ti be edge to edge,\n * removes the content wrapper from the content.\n */\n fullWidthContent?: boolean\n}>()\n\nconst $content = ref(null)\nconst $details = ref(null)\n\nonMounted(function () {\n if ($details.value && $content.value) {\n new DetailsAnimation($details.value, $content.value)\n }\n})\n\nconst Icon = toRaw(props.icon)\n</script>\n"],"names":["CssClasses","slots","useSlots","props","__props","$content","ref","$details","onMounted","DetailsAnimation","Icon","toRaw"],"mappings":";;;AAAA,MAAMA,IAAa;AAAA,EACf,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,yBAAyB;AAAA,EACzB,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,SAAS;AACb;;;;;;;;;;;;;ACoDA,UAAMC,IAAQC,KAERC,IAAQC,GAsCRC,IAAWC,EAAI,IAAI,GACnBC,IAAWD,EAAI,IAAI;AAEzB,IAAAE,EAAU,WAAY;AAChB,MAAAD,EAAS,SAASF,EAAS,SAC7B,IAAII,EAAiBF,EAAS,OAAOF,EAAS,KAAK;AAAA,IACrD,CACD;AAEK,UAAAK,IAAOC,EAAMR,EAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(e,r){typeof exports=="object"&&typeof module<"u"?module.exports=r(require("vue"),require("@cypress-design/details-animation"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/details-animation","@cypress-design/vue-icon"],r):(e=typeof globalThis<"u"?globalThis:e||self,e.Accordion=r(e.Vue,e.CyDetailsAnimation,e.CyIcon))})(this,function(e,r,l){"use strict";const n={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",summaryTitle:"text-[18px] leading-[28px] font-medium",summaryTitleColor:"text-indigo-500 block",summaryDescription:"text-[14px] leading-[20px] font-normal block",summaryDescriptionColor:"text-gray-700",icon:"mr-[24px] flex-shrink-0",separator:"w-[1px] h-[40px] bg-gray-100 mr-[16px]",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]"},i={class:"flex-grow grow pr-[16px]"};return e.defineComponent({__name:"Accordion",props:{title:{},description:{},icon:{type:[Function,Object]},separator:{type:Boolean},titleClassName:{},descriptionClassName:{},headingClassName:{},fullWidthContent:{type:Boolean}},setup(c){const m=e.useSlots(),s=c,t=e.ref(null),a=e.ref(null);e.onMounted(function(){a.value&&t.value&&new r.DetailsAnimation(a.value,t.value)});const p=e.toRaw(s.icon);return(o,f)=>(e.openBlock(),e.createElementBlock("details",{ref_key:"$details",ref:a},[e.createElementVNode("summary",{class:e.normalizeClass([e.unref(n).summary,o.headingClassName??e.unref(n).summaryColor])},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(n).summaryDiv)},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(n).icon)},[e.renderSlot(o.$slots,"iconEl",{},()=>[s.icon?(e.openBlock(),e.createBlock(e.unref(p),{key:0})):e.createCommentVNode("",!0)])],2),(s.icon||e.unref(m).iconEl)&&o.separator?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(n).separator),role:"separator"},null,2)):e.createCommentVNode("",!0),e.createElementVNode("span",i,[e.createElementVNode("span",{class:e.normalizeClass([o.titleClassName?o.titleClassName:e.unref(n).summaryTitleColor,e.unref(n).summaryTitle])},e.toDisplayString(o.title),3),o.description?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([e.unref(n).summaryDescription,o.descriptionClassName??e.unref(n).summaryDescriptionColor])},e.toDisplayString(o.description),3)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(l.IconChevronDownSmall),{strokeColor:"gray-300",class:e.normalizeClass(["open:icon-dark-gray-500",e.unref(n).chevron])},null,8,["class"])],2)],2),e.createElementVNode("div",{ref_key:"$content",ref:t,class:e.normalizeClass(e.unref(n).contentWrapper)},[o.fullWidthContent?e.renderSlot(o.$slots,"default",{key:0}):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(n).content)},[e.renderSlot(o.$slots,"default")],2))],2)],512))}})});
1
+ (function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue"),require("@cypress-design/details-animation"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/details-animation","@cypress-design/vue-icon"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.Accordion=s(e.Vue,e.CyDetailsAnimation,e.CyIcon))})(this,function(e,s,c){"use strict";const o={summary:"cyds-accordion-summary",summaryDiv:"cyds-accordion-summarydiv",summaryColor:"cyds-accordion-summarycolor",summaryTitle:"cyds-accordion-summarytitle",summaryTitleColor:"cyds-accordion-summarytitlecolor",summaryDescription:"cyds-accordion-summarydescription",summaryDescriptionColor:"cyds-accordion-summarydescriptioncolor",icon:"mr-[24px] flex-shrink-0",separator:"cyds-accordion-separator",chevron:"cyds-accordion-chevron",contentWrapper:"cyds-accordion-contentwrapper",content:"cyds-accordion-content"},i={class:"flex-grow grow pr-[16px]"};return e.defineComponent({__name:"Accordion",props:{title:{},description:{},icon:{type:[Function,Object]},separator:{type:Boolean},titleClassName:{},descriptionClassName:{},headingClassName:{},fullWidthContent:{type:Boolean}},setup(l){const m=e.useSlots(),r=l,a=e.ref(null),t=e.ref(null);e.onMounted(function(){t.value&&a.value&&new s.DetailsAnimation(t.value,a.value)});const d=e.toRaw(r.icon);return(n,y)=>(e.openBlock(),e.createElementBlock("details",{ref_key:"$details",ref:t},[e.createElementVNode("summary",{class:e.normalizeClass([e.unref(o).summary,n.headingClassName??e.unref(o).summaryColor])},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(o).summaryDiv)},[e.createElementVNode("span",{class:e.normalizeClass(e.unref(o).icon)},[e.renderSlot(n.$slots,"iconEl",{},()=>[r.icon?(e.openBlock(),e.createBlock(e.unref(d),{key:0})):e.createCommentVNode("",!0)])],2),(r.icon||e.unref(m).iconEl)&&n.separator?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(e.unref(o).separator),role:"separator"},null,2)):e.createCommentVNode("",!0),e.createElementVNode("span",i,[e.createElementVNode("span",{class:e.normalizeClass([n.titleClassName?n.titleClassName:e.unref(o).summaryTitleColor,e.unref(o).summaryTitle])},e.toDisplayString(n.title),3),n.description?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([e.unref(o).summaryDescription,n.descriptionClassName??e.unref(o).summaryDescriptionColor])},e.toDisplayString(n.description),3)):e.createCommentVNode("",!0)]),e.createVNode(e.unref(c.IconChevronDownSmall),{strokeColor:"gray-300",class:e.normalizeClass(["open:icon-dark-gray-500",e.unref(o).chevron])},null,8,["class"])],2)],2),e.createElementVNode("div",{ref_key:"$content",ref:a,class:e.normalizeClass(e.unref(o).contentWrapper)},[n.fullWidthContent?e.renderSlot(n.$slots,"default",{key:0}):(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(e.unref(o).content)},[e.renderSlot(n.$slots,"default")],2))],2)],512))}})});
2
2
  //# sourceMappingURL=index.umd.js.map
3
3
 
4
- /* <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]"> */
4
+ /* <wind-keep class="flex-grow grow pr-[16px] open:icon-dark-gray-500 icon-dark-gray-300"> */
@@ -1 +1 @@
1
- {"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.js","../Accordion.vue"],"sourcesContent":["export const CssClasses = {\n summary: 'details-none card open:rounded-b-none',\n summaryDiv: 'flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px]',\n summaryColor: 'bg-white',\n summaryTitle: 'text-[18px] leading-[28px] font-medium',\n summaryTitleColor: 'text-indigo-500 block',\n summaryDescription: 'text-[14px] leading-[20px] font-normal block',\n summaryDescriptionColor: 'text-gray-700',\n icon: 'mr-[24px] flex-shrink-0',\n separator: 'w-[1px] h-[40px] bg-gray-100 mr-[16px]',\n chevron: 'flex-shrink-0 transition transform rotate-0 open:rotate-180',\n contentWrapper: 'border border-gray-100 rounded-b-md border-t-0',\n content: 'px-[24px] py-[16px]',\n};\n","<template>\n <details ref=\"$details\">\n <summary\n :class=\"[CssClasses.summary, headingClassName ?? CssClasses.summaryColor]\"\n >\n <span :class=\"CssClasses.summaryDiv\">\n <span :class=\"CssClasses.icon\">\n <slot name=\"iconEl\">\n <Icon v-if=\"props.icon\" />\n </slot>\n </span>\n <span\n v-if=\"(props.icon || slots.iconEl) && separator\"\n :class=\"CssClasses.separator\"\n role=\"separator\"\n />\n <span class=\"flex-grow grow pr-[16px]\">\n <span\n :class=\"[\n titleClassName ? titleClassName : CssClasses.summaryTitleColor,\n CssClasses.summaryTitle,\n ]\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[\n CssClasses.summaryDescription,\n descriptionClassName ?? CssClasses.summaryDescriptionColor,\n ]\"\n >\n {{ description }}\n </span>\n </span>\n <IconChevronDownSmall\n strokeColor=\"gray-300\"\n class=\"open:icon-dark-gray-500\"\n :class=\"CssClasses.chevron\"\n />\n </span>\n </summary>\n <div ref=\"$content\" :class=\"CssClasses.contentWrapper\">\n <!-- @slot expandable body of the collapsible accordion -->\n <slot v-if=\"fullWidthContent\" />\n <div v-else :class=\"CssClasses.content\">\n <slot />\n </div>\n </div>\n </details>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n FunctionalComponent,\n SVGAttributes,\n onMounted,\n ref,\n toRaw,\n useSlots,\n} from 'vue'\nimport { CssClasses } from '@cypress-design/constants-accordion'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\n\nconst slots = useSlots()\n\nconst props = defineProps<{\n /**\n * Main indigo title.\n * [NOTE] Its color and font can be customized using `titleClassName`.\n */\n title: string\n /**\n * Second line in the heading.\n */\n description?: string\n /**\n * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.\n */\n icon?: FunctionalComponent<SVGAttributes>\n /**\n * Should we add a vertical separator between the icon and the text.\n */\n separator?: boolean\n /**\n * Change the font and color of the heading title\n */\n titleClassName?: string\n /**\n * Change the font and color of the heading description\n */\n descriptionClassName?: string\n /**\n * Additional classes to add to the header of the accordion\n * > [NOTE] useful to change the background color of the header\n */\n headingClassName?: string\n /**\n * When using content that needs ti be edge to edge,\n * removes the content wrapper from the content.\n */\n fullWidthContent?: boolean\n}>()\n\nconst $content = ref(null)\nconst $details = ref(null)\n\nonMounted(function () {\n if ($details.value && $content.value) {\n new DetailsAnimation($details.value, $content.value)\n }\n})\n\nconst Icon = toRaw(props.icon)\n</script>\n"],"names":["CssClasses","slots","useSlots","props","__props","$content","ref","$details","onMounted","DetailsAnimation","Icon","toRaw"],"mappings":"waAAO,MAAMA,EAAa,CACtB,QAAS,wCACT,WAAY,0EACZ,aAAc,WACd,aAAc,yCACd,kBAAmB,wBACnB,mBAAoB,+CACpB,wBAAyB,gBACzB,KAAM,0BACN,UAAW,yCACX,QAAS,8DACT,eAAgB,iDAChB,QAAS,qBACb,kRCoDA,MAAMC,EAAQC,EAAAA,WAERC,EAAQC,EAsCRC,EAAWC,MAAI,IAAI,EACnBC,EAAWD,MAAI,IAAI,EAEzBE,EAAAA,UAAU,UAAY,CAChBD,EAAS,OAASF,EAAS,OAC7B,IAAII,EAAiB,iBAAAF,EAAS,MAAOF,EAAS,KAAK,CACrD,CACD,EAEK,MAAAK,EAAOC,EAAAA,MAAMR,EAAM,IAAI"}
1
+ {"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.es.mjs","../Accordion.vue"],"sourcesContent":["const CssClasses = {\n summary: \"cyds-accordion-summary\",\n summaryDiv: \"cyds-accordion-summarydiv\",\n summaryColor: \"cyds-accordion-summarycolor\",\n summaryTitle: \"cyds-accordion-summarytitle\",\n summaryTitleColor: \"cyds-accordion-summarytitlecolor\",\n summaryDescription: \"cyds-accordion-summarydescription\",\n summaryDescriptionColor: \"cyds-accordion-summarydescriptioncolor\",\n icon: \"mr-[24px] flex-shrink-0\",\n separator: \"cyds-accordion-separator\",\n chevron: \"cyds-accordion-chevron\",\n contentWrapper: \"cyds-accordion-contentwrapper\",\n content: \"cyds-accordion-content\"\n};\n\nexport { CssClasses };\n//# sourceMappingURL=index.es.mjs.map\n","<template>\n <details ref=\"$details\">\n <summary\n :class=\"[CssClasses.summary, headingClassName ?? CssClasses.summaryColor]\"\n >\n <span :class=\"CssClasses.summaryDiv\">\n <span :class=\"CssClasses.icon\">\n <slot name=\"iconEl\">\n <Icon v-if=\"props.icon\" />\n </slot>\n </span>\n <span\n v-if=\"(props.icon || slots.iconEl) && separator\"\n :class=\"CssClasses.separator\"\n role=\"separator\"\n />\n <span class=\"flex-grow grow pr-[16px]\">\n <span\n :class=\"[\n titleClassName ? titleClassName : CssClasses.summaryTitleColor,\n CssClasses.summaryTitle,\n ]\"\n >\n {{ title }}\n </span>\n <span\n v-if=\"description\"\n :class=\"[\n CssClasses.summaryDescription,\n descriptionClassName ?? CssClasses.summaryDescriptionColor,\n ]\"\n >\n {{ description }}\n </span>\n </span>\n <IconChevronDownSmall\n strokeColor=\"gray-300\"\n class=\"open:icon-dark-gray-500\"\n :class=\"CssClasses.chevron\"\n />\n </span>\n </summary>\n <div ref=\"$content\" :class=\"CssClasses.contentWrapper\">\n <!-- @slot expandable body of the collapsible accordion -->\n <slot v-if=\"fullWidthContent\" />\n <div v-else :class=\"CssClasses.content\">\n <slot />\n </div>\n </div>\n </details>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n FunctionalComponent,\n SVGAttributes,\n onMounted,\n ref,\n toRaw,\n useSlots,\n} from 'vue'\nimport { CssClasses } from '@cypress-design/constants-accordion'\nimport { DetailsAnimation } from '@cypress-design/details-animation'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\n\nconst slots = useSlots()\n\nconst props = defineProps<{\n /**\n * Main indigo title.\n * [NOTE] Its color and font can be customized using `titleClassName`.\n */\n title: string\n /**\n * Second line in the heading.\n */\n description?: string\n /**\n * Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.\n */\n icon?: FunctionalComponent<SVGAttributes>\n /**\n * Should we add a vertical separator between the icon and the text.\n */\n separator?: boolean\n /**\n * Change the font and color of the heading title\n */\n titleClassName?: string\n /**\n * Change the font and color of the heading description\n */\n descriptionClassName?: string\n /**\n * Additional classes to add to the header of the accordion\n * > [NOTE] useful to change the background color of the header\n */\n headingClassName?: string\n /**\n * When using content that needs ti be edge to edge,\n * removes the content wrapper from the content.\n */\n fullWidthContent?: boolean\n}>()\n\nconst $content = ref(null)\nconst $details = ref(null)\n\nonMounted(function () {\n if ($details.value && $content.value) {\n new DetailsAnimation($details.value, $content.value)\n }\n})\n\nconst Icon = toRaw(props.icon)\n</script>\n"],"names":["CssClasses","slots","useSlots","props","__props","$content","ref","$details","onMounted","DetailsAnimation","Icon","toRaw"],"mappings":"waAAA,MAAMA,EAAa,CACf,QAAS,yBACT,WAAY,4BACZ,aAAc,8BACd,aAAc,8BACd,kBAAmB,mCACnB,mBAAoB,oCACpB,wBAAyB,yCACzB,KAAM,0BACN,UAAW,2BACX,QAAS,yBACT,eAAgB,gCAChB,QAAS,wBACb,kRCoDA,MAAMC,EAAQC,EAAAA,WAERC,EAAQC,EAsCRC,EAAWC,MAAI,IAAI,EACnBC,EAAWD,MAAI,IAAI,EAEzBE,EAAAA,UAAU,UAAY,CAChBD,EAAS,OAASF,EAAS,OAC7B,IAAII,EAAiB,iBAAAF,EAAS,MAAOF,EAAS,KAAK,CACrD,CACD,EAEK,MAAAK,EAAOC,EAAAA,MAAMR,EAAM,IAAI"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cypress-design/vue-accordion",
3
- "version": "1.0.0",
3
+ "version": "2.0.0-next.0",
4
4
  "files": [
5
5
  "*"
6
6
  ],
@@ -21,11 +21,11 @@
21
21
  },
22
22
  "license": "MIT",
23
23
  "dependencies": {
24
- "@cypress-design/constants-accordion": "^1.0.0",
25
24
  "@cypress-design/details-animation": "^1.0.0",
26
- "@cypress-design/vue-icon": "^1.0.0"
25
+ "@cypress-design/vue-icon": "^2.0.0-next.0"
27
26
  },
28
27
  "devDependencies": {
29
- "@cypress-design/rollup-plugin-tailwind-keep": "*"
28
+ "@cypress-design/constants-accordion": "2.0.0-next.0",
29
+ "@cypress-design/rollup-plugin-tailwind-keep": "1.0.1-next.0"
30
30
  }
31
31
  }
package/vite.config.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as path from 'path'
2
- import generateViteConfig from '../../root.vite.config'
2
+ import generateViteConfig from '../../vue.vite.config'
3
3
 
4
4
  export default generateViteConfig({
5
5
  entry: path.resolve(__dirname, './index.ts'),