@cypress-design/vue-accordion 1.0.0 → 1.1.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.
- package/.turbo/turbo-build.log +5 -10
- package/Accordion.rootstory.tsx +8 -1
- package/Accordion.vue +51 -11
- package/CHANGELOG.md +6 -0
- package/dist/Accordion.vue.d.ts +25 -3
- package/dist/Accordion.vue.d.ts.map +1 -1
- package/dist/index.es.mjs +66 -47
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +5 -5
- package/vite.config.ts +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
|
|
4
|
-
[33mThe CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.[39m
|
|
5
|
-
[36mvite v5.2.12 [32mbuilding for production...[36m[39m
|
|
1
|
+
[33mThe CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.[39m
|
|
2
|
+
[36mvite v5.4.19 [32mbuilding for production...[36m[39m
|
|
6
3
|
transforming...
|
|
7
4
|
[32m✓[39m 4 modules transformed.
|
|
8
5
|
rendering chunks...
|
|
9
6
|
computing gzip size...
|
|
10
|
-
[2mdist/[22m[36mindex.es.mjs [39m[1m[
|
|
11
|
-
[2mdist/[22m[36mindex.umd.js [39m[1m[2m3.
|
|
12
|
-
[32m✓ built in 3.
|
|
13
|
-
$ yarn vue-tsc --project ./tsconfig.build.json
|
|
14
|
-
$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json
|
|
7
|
+
[2mdist/[22m[36mindex.es.mjs [39m[1m[2m4.16 kB[22m[1m[22m[2m │ gzip: 1.52 kB[22m[2m │ map: 6.63 kB[22m
|
|
8
|
+
[2mdist/[22m[36mindex.umd.js [39m[1m[2m3.71 kB[22m[1m[22m[2m │ gzip: 1.43 kB[22m[2m │ map: 6.49 kB[22m
|
|
9
|
+
[32m✓ built in 3.16s[39m
|
package/Accordion.rootstory.tsx
CHANGED
|
@@ -12,6 +12,10 @@ export default (options: AccordionStoryOptions = {}) => {
|
|
|
12
12
|
open = false,
|
|
13
13
|
fullWidthContent = false,
|
|
14
14
|
headingClassName,
|
|
15
|
+
titleClassName,
|
|
16
|
+
descriptionClassName,
|
|
17
|
+
onClickSummary,
|
|
18
|
+
onToggle,
|
|
15
19
|
} = options
|
|
16
20
|
|
|
17
21
|
return (
|
|
@@ -21,10 +25,13 @@ export default (options: AccordionStoryOptions = {}) => {
|
|
|
21
25
|
separator={separator}
|
|
22
26
|
description={description}
|
|
23
27
|
icon={icon}
|
|
24
|
-
// @ts-expect-error volar is a little too strict for tsx html attributes. Only do this for tests
|
|
25
28
|
open={open}
|
|
26
29
|
fullWidthContent={fullWidthContent}
|
|
27
30
|
headingClassName={headingClassName}
|
|
31
|
+
titleClassName={titleClassName}
|
|
32
|
+
descriptionClassName={descriptionClassName}
|
|
33
|
+
onClickSummary={onClickSummary}
|
|
34
|
+
onToggle={onToggle}
|
|
28
35
|
>
|
|
29
36
|
{{
|
|
30
37
|
default: () => (
|
package/Accordion.vue
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<details ref="$details">
|
|
2
|
+
<details ref="$details" :open="openState">
|
|
3
3
|
<summary
|
|
4
|
+
ref="$summary"
|
|
4
5
|
:class="[CssClasses.summary, headingClassName ?? CssClasses.summaryColor]"
|
|
5
6
|
>
|
|
6
7
|
<span :class="CssClasses.summaryDiv">
|
|
@@ -51,14 +52,7 @@
|
|
|
51
52
|
</template>
|
|
52
53
|
|
|
53
54
|
<script lang="ts" setup>
|
|
54
|
-
import {
|
|
55
|
-
FunctionalComponent,
|
|
56
|
-
SVGAttributes,
|
|
57
|
-
onMounted,
|
|
58
|
-
ref,
|
|
59
|
-
toRaw,
|
|
60
|
-
useSlots,
|
|
61
|
-
} from 'vue'
|
|
55
|
+
import { Component, onMounted, ref, toRaw, useSlots } from 'vue'
|
|
62
56
|
import { CssClasses } from '@cypress-design/constants-accordion'
|
|
63
57
|
import { DetailsAnimation } from '@cypress-design/details-animation'
|
|
64
58
|
import { IconChevronDownSmall } from '@cypress-design/vue-icon'
|
|
@@ -78,7 +72,7 @@ const props = defineProps<{
|
|
|
78
72
|
/**
|
|
79
73
|
* Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.
|
|
80
74
|
*/
|
|
81
|
-
icon?:
|
|
75
|
+
icon?: Component
|
|
82
76
|
/**
|
|
83
77
|
* Should we add a vertical separator between the icon and the text.
|
|
84
78
|
*/
|
|
@@ -101,16 +95,62 @@ const props = defineProps<{
|
|
|
101
95
|
* removes the content wrapper from the content.
|
|
102
96
|
*/
|
|
103
97
|
fullWidthContent?: boolean
|
|
98
|
+
open?: boolean
|
|
99
|
+
/**
|
|
100
|
+
* Provides access to the onClick event of the summary element.
|
|
101
|
+
* Allows for custom handling or cancellation of the default behavior.
|
|
102
|
+
*/
|
|
103
|
+
onClickSummary?: (event: MouseEvent) => boolean | undefined
|
|
104
|
+
/**
|
|
105
|
+
* Callback triggered when the accordion toggles open or closed.
|
|
106
|
+
* @param open - The new open state of the accordion.
|
|
107
|
+
*/
|
|
108
|
+
onToggle?: (open: boolean) => void
|
|
104
109
|
}>()
|
|
105
110
|
|
|
106
111
|
const $content = ref(null)
|
|
107
|
-
const $details = ref(null)
|
|
112
|
+
const $details = ref<HTMLDetailsElement | null>(null)
|
|
113
|
+
const $summary = ref<HTMLElement | null>(null)
|
|
114
|
+
const openState = ref(props.open ?? false)
|
|
108
115
|
|
|
109
116
|
onMounted(function () {
|
|
110
117
|
if ($details.value && $content.value) {
|
|
111
118
|
new DetailsAnimation($details.value, $content.value)
|
|
112
119
|
}
|
|
120
|
+
|
|
121
|
+
if ($details.value) {
|
|
122
|
+
$details.value.addEventListener('toggle', handleToggle)
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
if ($summary.value) {
|
|
126
|
+
$summary.value.addEventListener('click', handleSummaryClick, {
|
|
127
|
+
capture: true,
|
|
128
|
+
})
|
|
129
|
+
}
|
|
113
130
|
})
|
|
114
131
|
|
|
115
132
|
const Icon = toRaw(props.icon)
|
|
133
|
+
|
|
134
|
+
function handleSummaryClick(event: MouseEvent) {
|
|
135
|
+
if (props.onClickSummary) {
|
|
136
|
+
const result = props.onClickSummary(event)
|
|
137
|
+
if (result === false) {
|
|
138
|
+
event.preventDefault()
|
|
139
|
+
event.stopPropagation()
|
|
140
|
+
return
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
openState.value = !openState.value
|
|
145
|
+
if (props.onToggle) {
|
|
146
|
+
props.onToggle(openState.value)
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
function handleToggle() {
|
|
151
|
+
openState.value = $details.value?.open ?? false
|
|
152
|
+
if (props.onToggle) {
|
|
153
|
+
props.onToggle(openState.value)
|
|
154
|
+
}
|
|
155
|
+
}
|
|
116
156
|
</script>
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @cypress-design/vue-accordion
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#733](https://github.com/cypress-io/cypress-design/pull/733) [`5e916fb`](https://github.com/cypress-io/cypress-design/commit/5e916fbe2b83d1503ed80820a85a8705bdcaeef1) Thanks [@jennifer-shehane](https://github.com/jennifer-shehane)! - Depend on `@cypress-design/vue-icon` and `@cypress-design/react-icon` 3.x. These packages were last published against icon 1.x, so installs stayed on 1.x and missed the 3.x fixes, including tree-shakable named icon imports. None of the icons these components use were renamed or removed in 2.0 or 3.0, so there are no API changes. `@cypress-design/vue-modal` now also lists `@cypress-design/vue-icon` as a dependency instead of a devDependency, since its build imports it at runtime.
|
|
8
|
+
|
|
3
9
|
## 1.0.0
|
|
4
10
|
|
|
5
11
|
### Major Changes
|
package/dist/Accordion.vue.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Component } from 'vue';
|
|
2
2
|
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
|
|
3
3
|
/**
|
|
4
4
|
* Main indigo title.
|
|
@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
12
12
|
/**
|
|
13
13
|
* Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.
|
|
14
14
|
*/
|
|
15
|
-
icon?:
|
|
15
|
+
icon?: Component | undefined;
|
|
16
16
|
/**
|
|
17
17
|
* Should we add a vertical separator between the icon and the text.
|
|
18
18
|
*/
|
|
@@ -35,6 +35,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
35
35
|
* removes the content wrapper from the content.
|
|
36
36
|
*/
|
|
37
37
|
fullWidthContent?: boolean | undefined;
|
|
38
|
+
open?: boolean | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* Provides access to the onClick event of the summary element.
|
|
41
|
+
* Allows for custom handling or cancellation of the default behavior.
|
|
42
|
+
*/
|
|
43
|
+
onClickSummary?: ((event: MouseEvent) => boolean | undefined) | undefined;
|
|
44
|
+
/**
|
|
45
|
+
* Callback triggered when the accordion toggles open or closed.
|
|
46
|
+
* @param open - The new open state of the accordion.
|
|
47
|
+
*/
|
|
48
|
+
onToggle?: ((open: boolean) => void) | undefined;
|
|
38
49
|
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
|
|
39
50
|
/**
|
|
40
51
|
* Main indigo title.
|
|
@@ -48,7 +59,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
48
59
|
/**
|
|
49
60
|
* Icon to be displayed on the left of the the heading. Overridden by the iconEl slot, if one is provided.
|
|
50
61
|
*/
|
|
51
|
-
icon?:
|
|
62
|
+
icon?: Component | undefined;
|
|
52
63
|
/**
|
|
53
64
|
* Should we add a vertical separator between the icon and the text.
|
|
54
65
|
*/
|
|
@@ -71,6 +82,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
71
82
|
* removes the content wrapper from the content.
|
|
72
83
|
*/
|
|
73
84
|
fullWidthContent?: boolean | undefined;
|
|
85
|
+
open?: boolean | undefined;
|
|
86
|
+
/**
|
|
87
|
+
* Provides access to the onClick event of the summary element.
|
|
88
|
+
* Allows for custom handling or cancellation of the default behavior.
|
|
89
|
+
*/
|
|
90
|
+
onClickSummary?: ((event: MouseEvent) => boolean | undefined) | undefined;
|
|
91
|
+
/**
|
|
92
|
+
* Callback triggered when the accordion toggles open or closed.
|
|
93
|
+
* @param open - The new open state of the accordion.
|
|
94
|
+
*/
|
|
95
|
+
onToggle?: ((open: boolean) => void) | undefined;
|
|
74
96
|
}>>>, {}, {}>, {
|
|
75
97
|
iconEl?(_: {}): any;
|
|
76
98
|
default?(_: {}): any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.vue.d.ts","sourceRoot":"","sources":["../Accordion.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Accordion.vue.d.ts","sourceRoot":"","sources":["../Accordion.vue"],"names":[],"mappings":"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"}
|
package/dist/index.es.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { DetailsAnimation as
|
|
3
|
-
import { IconChevronDownSmall as
|
|
4
|
-
const
|
|
1
|
+
import { defineComponent as D, useSlots as N, ref as m, onMounted as T, toRaw as b, createElementBlock as p, openBlock as i, createElementVNode as l, normalizeClass as t, unref as o, createCommentVNode as d, createVNode as w, renderSlot as y, createBlock as S, toDisplayString as f } from "vue";
|
|
2
|
+
import { DetailsAnimation as $ } from "@cypress-design/details-animation";
|
|
3
|
+
import { IconChevronDownSmall as B } from "@cypress-design/vue-icon";
|
|
4
|
+
const n = {
|
|
5
5
|
summary: "details-none card open:rounded-b-none",
|
|
6
6
|
summaryDiv: "flex flex-row py-[12px] px-[24px] flex-nowrap items-center min-h-[63px]",
|
|
7
7
|
summaryColor: "bg-white",
|
|
@@ -14,85 +14,104 @@ const s = {
|
|
|
14
14
|
chevron: "flex-shrink-0 transition transform rotate-0 open:rotate-180",
|
|
15
15
|
contentWrapper: "border border-gray-100 rounded-b-md border-t-0",
|
|
16
16
|
content: "px-[24px] py-[16px]"
|
|
17
|
-
},
|
|
17
|
+
}, E = ["open"], W = { class: "flex-grow grow pr-[16px]" }, I = /* @__PURE__ */ D({
|
|
18
18
|
__name: "Accordion",
|
|
19
19
|
props: {
|
|
20
20
|
title: {},
|
|
21
21
|
description: {},
|
|
22
|
-
icon: {
|
|
22
|
+
icon: {},
|
|
23
23
|
separator: { type: Boolean },
|
|
24
24
|
titleClassName: {},
|
|
25
25
|
descriptionClassName: {},
|
|
26
26
|
headingClassName: {},
|
|
27
|
-
fullWidthContent: { type: Boolean }
|
|
27
|
+
fullWidthContent: { type: Boolean },
|
|
28
|
+
open: { type: Boolean },
|
|
29
|
+
onClickSummary: { type: Function },
|
|
30
|
+
onToggle: { type: Function }
|
|
28
31
|
},
|
|
29
|
-
setup(
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
setup(g) {
|
|
33
|
+
const C = N(), a = g, c = m(null), r = m(null), u = m(null), s = m(a.open ?? !1);
|
|
34
|
+
T(function() {
|
|
35
|
+
r.value && c.value && new $(r.value, c.value), r.value && r.value.addEventListener("toggle", h), u.value && u.value.addEventListener("click", k, {
|
|
36
|
+
capture: !0
|
|
37
|
+
});
|
|
33
38
|
});
|
|
34
|
-
const
|
|
35
|
-
|
|
39
|
+
const v = b(a.icon);
|
|
40
|
+
function k(e) {
|
|
41
|
+
if (a.onClickSummary && a.onClickSummary(e) === !1) {
|
|
42
|
+
e.preventDefault(), e.stopPropagation();
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
s.value = !s.value, a.onToggle && a.onToggle(s.value);
|
|
46
|
+
}
|
|
47
|
+
function h() {
|
|
48
|
+
var e;
|
|
49
|
+
s.value = ((e = r.value) == null ? void 0 : e.open) ?? !1, a.onToggle && a.onToggle(s.value);
|
|
50
|
+
}
|
|
51
|
+
return (e, x) => (i(), p("details", {
|
|
36
52
|
ref_key: "$details",
|
|
37
|
-
ref:
|
|
53
|
+
ref: r,
|
|
54
|
+
open: s.value
|
|
38
55
|
}, [
|
|
39
|
-
|
|
40
|
-
|
|
56
|
+
l("summary", {
|
|
57
|
+
ref_key: "$summary",
|
|
58
|
+
ref: u,
|
|
59
|
+
class: t([o(n).summary, e.headingClassName ?? o(n).summaryColor])
|
|
41
60
|
}, [
|
|
42
|
-
|
|
43
|
-
class:
|
|
61
|
+
l("span", {
|
|
62
|
+
class: t(o(n).summaryDiv)
|
|
44
63
|
}, [
|
|
45
|
-
|
|
46
|
-
class:
|
|
64
|
+
l("span", {
|
|
65
|
+
class: t(o(n).icon)
|
|
47
66
|
}, [
|
|
48
|
-
|
|
49
|
-
|
|
67
|
+
y(e.$slots, "iconEl", {}, () => [
|
|
68
|
+
a.icon ? (i(), S(o(v), { key: 0 })) : d("", !0)
|
|
50
69
|
])
|
|
51
70
|
], 2),
|
|
52
|
-
(
|
|
71
|
+
(a.icon || o(C).iconEl) && e.separator ? (i(), p("span", {
|
|
53
72
|
key: 0,
|
|
54
|
-
class:
|
|
73
|
+
class: t(o(n).separator),
|
|
55
74
|
role: "separator"
|
|
56
|
-
}, null, 2)) :
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
class:
|
|
60
|
-
|
|
61
|
-
|
|
75
|
+
}, null, 2)) : d("", !0),
|
|
76
|
+
l("span", W, [
|
|
77
|
+
l("span", {
|
|
78
|
+
class: t([
|
|
79
|
+
e.titleClassName ? e.titleClassName : o(n).summaryTitleColor,
|
|
80
|
+
o(n).summaryTitle
|
|
62
81
|
])
|
|
63
|
-
},
|
|
64
|
-
|
|
82
|
+
}, f(e.title), 3),
|
|
83
|
+
e.description ? (i(), p("span", {
|
|
65
84
|
key: 0,
|
|
66
|
-
class:
|
|
67
|
-
|
|
68
|
-
|
|
85
|
+
class: t([
|
|
86
|
+
o(n).summaryDescription,
|
|
87
|
+
e.descriptionClassName ?? o(n).summaryDescriptionColor
|
|
69
88
|
])
|
|
70
|
-
},
|
|
89
|
+
}, f(e.description), 3)) : d("", !0)
|
|
71
90
|
]),
|
|
72
|
-
|
|
91
|
+
w(o(B), {
|
|
73
92
|
strokeColor: "gray-300",
|
|
74
|
-
class:
|
|
93
|
+
class: t(["open:icon-dark-gray-500", o(n).chevron])
|
|
75
94
|
}, null, 8, ["class"])
|
|
76
95
|
], 2)
|
|
77
96
|
], 2),
|
|
78
|
-
|
|
97
|
+
l("div", {
|
|
79
98
|
ref_key: "$content",
|
|
80
|
-
ref:
|
|
81
|
-
class:
|
|
99
|
+
ref: c,
|
|
100
|
+
class: t(o(n).contentWrapper)
|
|
82
101
|
}, [
|
|
83
|
-
|
|
102
|
+
e.fullWidthContent ? y(e.$slots, "default", { key: 0 }) : (i(), p("div", {
|
|
84
103
|
key: 1,
|
|
85
|
-
class:
|
|
104
|
+
class: t(o(n).content)
|
|
86
105
|
}, [
|
|
87
|
-
|
|
106
|
+
y(e.$slots, "default")
|
|
88
107
|
], 2))
|
|
89
108
|
], 2)
|
|
90
|
-
],
|
|
109
|
+
], 8, E));
|
|
91
110
|
}
|
|
92
111
|
});
|
|
93
112
|
export {
|
|
94
|
-
|
|
113
|
+
I as default
|
|
95
114
|
};
|
|
96
115
|
//# sourceMappingURL=index.es.mjs.map
|
|
97
116
|
|
|
98
|
-
/* <wind-keep class="flex-grow grow pr-[16px] open:icon-dark-gray-500 icon-dark-gray-300
|
|
117
|
+
/* <wind-keep class="flex-grow grow pr-[16px] open:icon-dark-gray-500 icon-dark-gray-300"> */
|
package/dist/index.es.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.
|
|
1
|
+
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.es.mjs","../Accordion.vue"],"sourcesContent":["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\nexport { CssClasses };\n//# sourceMappingURL=index.es.mjs.map\n","<template>\n <details ref=\"$details\" :open=\"openState\">\n <summary\n ref=\"$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 { Component, onMounted, ref, toRaw, useSlots } 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?: Component\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 open?: boolean\n /**\n * Provides access to the onClick event of the summary element.\n * Allows for custom handling or cancellation of the default behavior.\n */\n onClickSummary?: (event: MouseEvent) => boolean | undefined\n /**\n * Callback triggered when the accordion toggles open or closed.\n * @param open - The new open state of the accordion.\n */\n onToggle?: (open: boolean) => void\n}>()\n\nconst $content = ref(null)\nconst $details = ref<HTMLDetailsElement | null>(null)\nconst $summary = ref<HTMLElement | null>(null)\nconst openState = ref(props.open ?? false)\n\nonMounted(function () {\n if ($details.value && $content.value) {\n new DetailsAnimation($details.value, $content.value)\n }\n\n if ($details.value) {\n $details.value.addEventListener('toggle', handleToggle)\n }\n\n if ($summary.value) {\n $summary.value.addEventListener('click', handleSummaryClick, {\n capture: true,\n })\n }\n})\n\nconst Icon = toRaw(props.icon)\n\nfunction handleSummaryClick(event: MouseEvent) {\n if (props.onClickSummary) {\n const result = props.onClickSummary(event)\n if (result === false) {\n event.preventDefault()\n event.stopPropagation()\n return\n }\n }\n\n openState.value = !openState.value\n if (props.onToggle) {\n props.onToggle(openState.value)\n }\n}\n\nfunction handleToggle() {\n openState.value = $details.value?.open ?? false\n if (props.onToggle) {\n props.onToggle(openState.value)\n }\n}\n</script>\n"],"names":["CssClasses","slots","useSlots","props","__props","$content","ref","$details","$summary","openState","onMounted","DetailsAnimation","handleToggle","handleSummaryClick","Icon","toRaw","event","_a"],"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;;;;;;;;;;;;;;;;AC8CA,UAAMC,IAAQC,EAAA,GAERC,IAAQC,GAiDRC,IAAWC,EAAI,IAAI,GACnBC,IAAWD,EAA+B,IAAI,GAC9CE,IAAWF,EAAwB,IAAI,GACvCG,IAAYH,EAAIH,EAAM,QAAQ,EAAK;AAEzC,IAAAO,EAAU,WAAY;AACpB,MAAIH,EAAS,SAASF,EAAS,SAC7B,IAAIM,EAAiBJ,EAAS,OAAOF,EAAS,KAAK,GAGjDE,EAAS,SACXA,EAAS,MAAM,iBAAiB,UAAUK,CAAY,GAGpDJ,EAAS,SACXA,EAAS,MAAM,iBAAiB,SAASK,GAAoB;AAAA,QAC3D,SAAS;AAAA,MAAA,CACV;AAAA,IAEL,CAAC;AAED,UAAMC,IAAOC,EAAMZ,EAAM,IAAI;AAE7B,aAASU,EAAmBG,GAAmB;AAC7C,UAAIb,EAAM,kBACOA,EAAM,eAAea,CAAK,MAC1B,IAAO;AACpB,QAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA;AACN;AAAA,MACF;AAGF,MAAAP,EAAU,QAAQ,CAACA,EAAU,OACzBN,EAAM,YACRA,EAAM,SAASM,EAAU,KAAK;AAAA,IAElC;AAEA,aAASG,IAAe;;AACtB,MAAAH,EAAU,UAAQQ,IAAAV,EAAS,UAAT,gBAAAU,EAAgB,SAAQ,IACtCd,EAAM,YACRA,EAAM,SAASM,EAAU,KAAK;AAAA,IAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,
|
|
1
|
+
(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(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"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.Accordion=a(e.Vue,e.CyDetailsAnimation,e.Icon))})(this,function(e,a,c){"use strict";const o={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]"},m=["open"],p={class:"flex-grow grow pr-[16px]"};return e.defineComponent({__name:"Accordion",props:{title:{},description:{},icon:{},separator:{type:Boolean},titleClassName:{},descriptionClassName:{},headingClassName:{},fullWidthContent:{type:Boolean},open:{type:Boolean},onClickSummary:{type:Function},onToggle:{type:Function}},setup(d){const f=e.useSlots(),r=d,l=e.ref(null),t=e.ref(null),i=e.ref(null),s=e.ref(r.open??!1);e.onMounted(function(){t.value&&l.value&&new a.DetailsAnimation(t.value,l.value),t.value&&t.value.addEventListener("toggle",C),i.value&&i.value.addEventListener("click",u,{capture:!0})});const y=e.toRaw(r.icon);function u(n){if(r.onClickSummary&&r.onClickSummary(n)===!1){n.preventDefault(),n.stopPropagation();return}s.value=!s.value,r.onToggle&&r.onToggle(s.value)}function C(){var n;s.value=((n=t.value)==null?void 0:n.open)??!1,r.onToggle&&r.onToggle(s.value)}return(n,g)=>(e.openBlock(),e.createElementBlock("details",{ref_key:"$details",ref:t,open:s.value},[e.createElementVNode("summary",{ref_key:"$summary",ref:i,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(y),{key:0})):e.createCommentVNode("",!0)])],2),(r.icon||e.unref(f).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",p,[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:l,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)],8,m))}})});
|
|
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
|
|
4
|
+
/* <wind-keep class="flex-grow grow pr-[16px] open:icon-dark-gray-500 icon-dark-gray-300"> */
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.es.mjs","../Accordion.vue"],"sourcesContent":["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\nexport { CssClasses };\n//# sourceMappingURL=index.es.mjs.map\n","<template>\n <details ref=\"$details\" :open=\"openState\">\n <summary\n ref=\"$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 { Component, onMounted, ref, toRaw, useSlots } 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?: Component\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 open?: boolean\n /**\n * Provides access to the onClick event of the summary element.\n * Allows for custom handling or cancellation of the default behavior.\n */\n onClickSummary?: (event: MouseEvent) => boolean | undefined\n /**\n * Callback triggered when the accordion toggles open or closed.\n * @param open - The new open state of the accordion.\n */\n onToggle?: (open: boolean) => void\n}>()\n\nconst $content = ref(null)\nconst $details = ref<HTMLDetailsElement | null>(null)\nconst $summary = ref<HTMLElement | null>(null)\nconst openState = ref(props.open ?? false)\n\nonMounted(function () {\n if ($details.value && $content.value) {\n new DetailsAnimation($details.value, $content.value)\n }\n\n if ($details.value) {\n $details.value.addEventListener('toggle', handleToggle)\n }\n\n if ($summary.value) {\n $summary.value.addEventListener('click', handleSummaryClick, {\n capture: true,\n })\n }\n})\n\nconst Icon = toRaw(props.icon)\n\nfunction handleSummaryClick(event: MouseEvent) {\n if (props.onClickSummary) {\n const result = props.onClickSummary(event)\n if (result === false) {\n event.preventDefault()\n event.stopPropagation()\n return\n }\n }\n\n openState.value = !openState.value\n if (props.onToggle) {\n props.onToggle(openState.value)\n }\n}\n\nfunction handleToggle() {\n openState.value = $details.value?.open ?? false\n if (props.onToggle) {\n props.onToggle(openState.value)\n }\n}\n</script>\n"],"names":["CssClasses","slots","useSlots","props","__props","$content","ref","$details","$summary","openState","onMounted","DetailsAnimation","handleToggle","handleSummaryClick","Icon","toRaw","event","_a"],"mappings":"saAAA,MAAMA,EAAa,CACf,QAAS,wCACT,WAAY,0EACZ,aAAc,WACd,aAAc,yCACd,kBAAmB,wBACnB,mBAAoB,+CACpB,wBAAyB,gBACzB,KAAM,0BACN,UAAW,yCACX,QAAS,8DACT,eAAgB,iDAChB,QAAS,qBACb,mVC8CA,MAAMC,EAAQC,EAAAA,SAAA,EAERC,EAAQC,EAiDRC,EAAWC,EAAAA,IAAI,IAAI,EACnBC,EAAWD,EAAAA,IAA+B,IAAI,EAC9CE,EAAWF,EAAAA,IAAwB,IAAI,EACvCG,EAAYH,EAAAA,IAAIH,EAAM,MAAQ,EAAK,EAEzCO,EAAAA,UAAU,UAAY,CAChBH,EAAS,OAASF,EAAS,OAC7B,IAAIM,EAAAA,iBAAiBJ,EAAS,MAAOF,EAAS,KAAK,EAGjDE,EAAS,OACXA,EAAS,MAAM,iBAAiB,SAAUK,CAAY,EAGpDJ,EAAS,OACXA,EAAS,MAAM,iBAAiB,QAASK,EAAoB,CAC3D,QAAS,EAAA,CACV,CAEL,CAAC,EAED,MAAMC,EAAOC,EAAAA,MAAMZ,EAAM,IAAI,EAE7B,SAASU,EAAmBG,EAAmB,CAC7C,GAAIb,EAAM,gBACOA,EAAM,eAAea,CAAK,IAC1B,GAAO,CACpBA,EAAM,eAAA,EACNA,EAAM,gBAAA,EACN,MACF,CAGFP,EAAU,MAAQ,CAACA,EAAU,MACzBN,EAAM,UACRA,EAAM,SAASM,EAAU,KAAK,CAElC,CAEA,SAASG,GAAe,OACtBH,EAAU,QAAQQ,EAAAV,EAAS,QAAT,YAAAU,EAAgB,OAAQ,GACtCd,EAAM,UACRA,EAAM,SAASM,EAAU,KAAK,CAElC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cypress-design/vue-accordion",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"*"
|
|
6
6
|
],
|
|
@@ -16,16 +16,16 @@
|
|
|
16
16
|
},
|
|
17
17
|
"scripts": {
|
|
18
18
|
"build": "yarn build:module && yarn build:types",
|
|
19
|
-
"build:module": "yarn vite build",
|
|
20
|
-
"build:types": "yarn vue-tsc --project ./tsconfig.build.json"
|
|
19
|
+
"build:module": "yarn exec vite build",
|
|
20
|
+
"build:types": "yarn exec vue-tsc --project ./tsconfig.build.json"
|
|
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": "^
|
|
25
|
+
"@cypress-design/vue-icon": "^3.3.2"
|
|
27
26
|
},
|
|
28
27
|
"devDependencies": {
|
|
28
|
+
"@cypress-design/constants-accordion": "*",
|
|
29
29
|
"@cypress-design/rollup-plugin-tailwind-keep": "*"
|
|
30
30
|
}
|
|
31
31
|
}
|
package/vite.config.ts
CHANGED