|
1 | 1 | <script setup>
|
| 2 | + /// <reference lib="es2021" /> |
2 | 3 | import Container from './Container.vue';
|
3 | 4 | import Button from './Button.vue';
|
4 | 5 | import Content from './Content.vue';
|
5 | 6 | import AnimationForm from './AnimationForm.vue';
|
6 | 7 | import CodeSnippet from './CodeSnippet.vue';
|
7 | 8 | import { onMounted, ref } from 'vue';
|
8 | 9 |
|
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); |
22 | 36 | const codeSnippetKey = ref(`${props.animationName}-0`);
|
23 | 37 |
|
24 | 38 | onMounted(() => {
|
|
43 | 57 | const keyId = +(codeSnippetKey.value.match(/(\d+)$/g)?.at(0) ?? '0') + 1;
|
44 | 58 | codeSnippetKey.value = codeSnippetKey.value.replace(/\d+$/, `${keyId}`);
|
45 | 59 | };
|
| 60 | + /** @type {Object} */ |
| 61 | + const codeSnippetRefVal = codeSnippetRef.value; |
46 | 62 |
|
47 | 63 | if (opts[fieldLabel] !== '') {
|
48 | 64 | const newValue =
|
|
62 | 78 |
|
63 | 79 | let newSnippet = '';
|
64 | 80 | let match = false;
|
65 |
| - for (const str of codeSnippetRef.value.code.split(/\n/)) { |
| 81 | + for (const str of codeSnippetRefVal.code.split(/\n/)) { |
66 | 82 | if (str.match(fieldLabel)) {
|
67 | 83 | newSnippet += newField;
|
68 | 84 | match = true;
|
|
73 | 89 | newSnippet += `${str}\n`;
|
74 | 90 | }
|
75 | 91 | }
|
76 |
| - codeSnippetRef.value.code = newSnippet; |
| 92 | + codeSnippetRefVal.code = newSnippet; |
77 | 93 | reloadSnippet();
|
78 | 94 | } else {
|
79 |
| - codeSnippetRef.value.code = codeSnippetRef.value.code.replaceAll( |
| 95 | + codeSnippetRefVal.code = codeSnippetRefVal.code.replaceAll( |
80 | 96 | new RegExp(`\n.+${fieldLabel}:.+\n`, 'g'),
|
81 | 97 | '\n'
|
82 | 98 | );
|
|
91 | 107 | defaultValue,
|
92 | 108 | });
|
93 | 109 | } else if (
|
94 |
| - codeSnippetRef.value.code.match('dimensionsTransition: false') |
| 110 | + codeSnippetRefVal.code.match('dimensionsTransition: false') |
95 | 111 | ) {
|
96 | 112 | updateSnippet({
|
97 | 113 | opts: { dimensionsTransition: true },
|
|
100 | 116 | });
|
101 | 117 | }
|
102 | 118 | }
|
103 |
| - } else if (codeSnippetRef.value.code.match(fieldLabel)) { |
| 119 | + } else if (codeSnippetRefVal.code.match(fieldLabel)) { |
104 | 120 | updateSnippet({
|
105 | 121 | opts: { [fieldLabel]: defaultValue[fieldLabel] },
|
106 | 122 | fieldLabel,
|
|
148 | 164 | <section>
|
149 | 165 | <CodeSnippet
|
150 | 166 | v-if="codeSnippet"
|
151 |
| - v-for="(snippet, i) in codeSnippet" |
152 | 167 | :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" |
158 | 173 | />
|
159 | 174 | <slot />
|
160 | 175 | </section>
|
|
0 commit comments