Skip to content

Commit 05c72f1

Browse files
committed
feat: code-snippet prop passed to Example is now an Object instead of an Array
more code snippets can be passed as children of the Example component but only the snippet passed as the code-snippet prop will be reactive
1 parent dd5b580 commit 05c72f1

File tree

2 files changed

+45
-30
lines changed

2 files changed

+45
-30
lines changed

docs/.vitepress/components/Example.vue

Lines changed: 39 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
11
<script setup>
2+
/// <reference lib="es2021" />
23
import Container from './Container.vue';
34
import Button from './Button.vue';
45
import Content from './Content.vue';
56
import AnimationForm from './AnimationForm.vue';
67
import CodeSnippet from './CodeSnippet.vue';
78
import { onMounted, ref } from 'vue';
89
9-
const props = defineProps({
10-
animationApi: Function,
11-
animationFn: Function,
12-
animationName: String,
13-
title: String,
14-
btnList: Array,
15-
contentList: Array,
16-
animOpts: Object,
17-
fieldsList: Array,
18-
codeSnippet: Array,
19-
});
20-
21-
const codeSnippetRef = ref(props.codeSnippet?.at(0));
10+
/**
11+
* @type {{
12+
* animationApi?: Function,
13+
* animationFn?: Function,
14+
* animationName?: String,
15+
* title?: String,
16+
* btnList?: Array.<{text: string[], class: string, targetSelector: string}>,
17+
* contentList?: Object[],
18+
* animOpts?: Object,
19+
* fieldsList?: string[],
20+
* codeSnippet?: Object
21+
* }}
22+
*/
23+
const props = defineProps([
24+
'animationApi',
25+
'animationFn',
26+
'animationName',
27+
'title',
28+
'btnList',
29+
'contentList',
30+
'animOpts',
31+
'fieldsList',
32+
'codeSnippet',
33+
]);
34+
35+
const codeSnippetRef = ref(props.codeSnippet);
2236
const codeSnippetKey = ref(`${props.animationName}-0`);
2337
2438
onMounted(() => {
@@ -43,6 +57,8 @@
4357
const keyId = +(codeSnippetKey.value.match(/(\d+)$/g)?.at(0) ?? '0') + 1;
4458
codeSnippetKey.value = codeSnippetKey.value.replace(/\d+$/, `${keyId}`);
4559
};
60+
/** @type {Object} */
61+
const codeSnippetRefVal = codeSnippetRef.value;
4662
4763
if (opts[fieldLabel] !== '') {
4864
const newValue =
@@ -62,7 +78,7 @@
6278
6379
let newSnippet = '';
6480
let match = false;
65-
for (const str of codeSnippetRef.value.code.split(/\n/)) {
81+
for (const str of codeSnippetRefVal.code.split(/\n/)) {
6682
if (str.match(fieldLabel)) {
6783
newSnippet += newField;
6884
match = true;
@@ -73,10 +89,10 @@
7389
newSnippet += `${str}\n`;
7490
}
7591
}
76-
codeSnippetRef.value.code = newSnippet;
92+
codeSnippetRefVal.code = newSnippet;
7793
reloadSnippet();
7894
} else {
79-
codeSnippetRef.value.code = codeSnippetRef.value.code.replaceAll(
95+
codeSnippetRefVal.code = codeSnippetRefVal.code.replaceAll(
8096
new RegExp(`\n.+${fieldLabel}:.+\n`, 'g'),
8197
'\n'
8298
);
@@ -91,7 +107,7 @@
91107
defaultValue,
92108
});
93109
} else if (
94-
codeSnippetRef.value.code.match('dimensionsTransition: false')
110+
codeSnippetRefVal.code.match('dimensionsTransition: false')
95111
) {
96112
updateSnippet({
97113
opts: { dimensionsTransition: true },
@@ -100,7 +116,7 @@
100116
});
101117
}
102118
}
103-
} else if (codeSnippetRef.value.code.match(fieldLabel)) {
119+
} else if (codeSnippetRefVal.code.match(fieldLabel)) {
104120
updateSnippet({
105121
opts: { [fieldLabel]: defaultValue[fieldLabel] },
106122
fieldLabel,
@@ -148,13 +164,12 @@
148164
<section>
149165
<CodeSnippet
150166
v-if="codeSnippet"
151-
v-for="(snippet, i) in codeSnippet"
152167
:key="codeSnippetKey"
153-
:snippet-id="`code-snippet__${animationName}-${i}`"
154-
:code="codeSnippetRef.code"
155-
:highlight="snippet.highlight"
156-
:langs="snippet.langs"
157-
:lang="snippet.lang"
168+
:snippet-id="`code-snippet__${animationName}-0`"
169+
:code="codeSnippetRef?.code"
170+
:highlight="codeSnippet.highlight"
171+
:langs="codeSnippet.langs"
172+
:lang="codeSnippet.lang"
158173
/>
159174
<slot />
160175
</section>

docs/examples/index.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ aside: false
132132
:anim-opts="{}"
133133
@reset-animation="(opts) => {resetAnimation('slide', opts);}"
134134
:fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'overflowHidden']"
135-
:code-snippet="[{
135+
:code-snippet="{
136136
code: `jsCssAnimations.init.slideUp({
137137
trigger: '.slide-up--btn',
138138
targetSelector: '.example__slide',
@@ -151,7 +151,7 @@ jsCssAnimations.init.slideRight({
151151
targetSelector: '.example__slide',
152152
});`,
153153
highlight: [4]
154-
}]"
154+
}"
155155
/>
156156

157157
<Example
@@ -164,14 +164,14 @@ highlight: [4]
164164
:anim-opts="fadeOpts"
165165
:fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'blur', 'dimensionsTransition', 'iteration', 'direction']"
166166
@reset-animation="(opts) => {resetAnimation('fade', opts);}"
167-
:code-snippet="[{
167+
:code-snippet="{
168168
code: `// When 'trigger' option is omitted, .init will look for
169169
// any element(s) that have the 'js-anim--trigger' class
170170
jsCssAnimations.init.fade({
171171
maintainSpace: true,
172172
});`,
173173
highlight: [4],
174-
}]">
174+
}">
175175

176176
```html{1}
177177
<button class="js-anim--trigger" target-selector=".fade__example">
@@ -192,15 +192,15 @@ highlight: [4],
192192
:anim-opts="collapseOpts"
193193
:fields-list="['duration', 'delay', 'staggerDelay', 'maintainSpace', 'easing', 'dimensionsTransition', 'transfOrigin']"
194194
@reset-animation="(opts) => {resetAnimation('collapse', opts);}"
195-
:code-snippet="[{
195+
:code-snippet="{
196196
code: `jsCssAnimations.init.collapse({
197197
trigger: '.collapse--btn',
198198
targetSelector: '.example__collapse',
199199
staggerDelay: 500, // '0.5s' or '500ms' would also work
200200
});
201201
`,
202202
highlight: [4]
203-
}]"/>
203+
}"/>
204204

205205
<style>
206206
</style>

0 commit comments

Comments
 (0)