@bagelink/vue 1.4.101 → 1.4.103
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/package.json
CHANGED
|
@@ -65,14 +65,12 @@ function toggle() {
|
|
|
65
65
|
<template>
|
|
66
66
|
<div class="accordion-item txt-start" :class="[{ flat }]">
|
|
67
67
|
<button
|
|
68
|
-
:aria-expanded="isOpen ? 'true' : 'false'"
|
|
69
|
-
|
|
70
|
-
:aria-controls="`accordion-body-${id}`"
|
|
71
|
-
@click="toggle()"
|
|
68
|
+
:aria-expanded="isOpen ? 'true' : 'false'" class="accordion-head"
|
|
69
|
+
:aria-controls="`accordion-body-${id}`" @click="toggle()"
|
|
72
70
|
>
|
|
73
71
|
<span
|
|
74
|
-
v-if="iconPosition === 'start'"
|
|
75
|
-
|
|
72
|
+
v-if="iconPosition === 'start'" class="accordion-icon"
|
|
73
|
+
:class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
|
|
76
74
|
>
|
|
77
75
|
<Icon :icon="computedIcon" />
|
|
78
76
|
</span>
|
|
@@ -84,17 +82,15 @@ function toggle() {
|
|
|
84
82
|
</slot>
|
|
85
83
|
|
|
86
84
|
<span
|
|
87
|
-
v-if="iconPosition === 'end'"
|
|
88
|
-
|
|
85
|
+
v-if="iconPosition === 'end'" class="accordion-icon"
|
|
86
|
+
:class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
|
|
89
87
|
>
|
|
90
88
|
<Icon :icon="computedIcon" />
|
|
91
89
|
</span>
|
|
92
90
|
</button>
|
|
93
91
|
<Transition name="expand">
|
|
94
92
|
<div
|
|
95
|
-
v-if="isOpen"
|
|
96
|
-
:id="`accordion-body-${id}`"
|
|
97
|
-
class="accordion-body"
|
|
93
|
+
v-if="isOpen" :id="`accordion-body-${id}`" class="accordion-body"
|
|
98
94
|
:aria-hidden="isOpen ? 'false' : 'true'"
|
|
99
95
|
>
|
|
100
96
|
<slot />
|
|
@@ -107,9 +103,9 @@ function toggle() {
|
|
|
107
103
|
.accordion-item {
|
|
108
104
|
border-bottom: 1px solid var(--border-color);
|
|
109
105
|
transition: all 0.2s;
|
|
110
|
-
cursor: pointer;
|
|
111
106
|
overflow: hidden;
|
|
112
107
|
}
|
|
108
|
+
|
|
113
109
|
.accordion-item button {
|
|
114
110
|
cursor: pointer;
|
|
115
111
|
}
|
|
@@ -130,14 +126,14 @@ function toggle() {
|
|
|
130
126
|
display: flex;
|
|
131
127
|
align-items: center;
|
|
132
128
|
flex-shrink: 0;
|
|
133
|
-
width: calc(
|
|
134
|
-
height: calc(
|
|
129
|
+
width: calc(var(--btn-height) / 1.5);
|
|
130
|
+
height: calc(var(--btn-height) / 1.5);
|
|
135
131
|
padding-inline: calc(var(--btn-padding) / 3);
|
|
136
132
|
justify-content: center;
|
|
137
133
|
}
|
|
138
134
|
|
|
139
|
-
[aria-expanded="true"] .accordion-icon
|
|
140
|
-
|
|
135
|
+
[aria-expanded="true"] .accordion-icon {
|
|
136
|
+
transform: rotate(180deg);
|
|
141
137
|
}
|
|
142
138
|
|
|
143
139
|
.accordion-label {
|