├── .gitignore
├── LICENSE
├── README.md
├── assets
    ├── alpine-transitions.gif
    ├── github.png
    └── tailwindui-formatting.gif
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .idea*


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 David Hallin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Alpine Transitions Previewer
 2 | 
 3 | [Github Pages Deployment](https://hallindavid.github.io/alpine-transition-preview/)
 4 | 
 5 | If you use Alpine.js and Tailwindcss, this can fit in really nicely to your design process, but if you also have
 6 | a <a href="https://tailwindui.com" target="_blank">TailwindUI</a> license, there is a bit more value.
 7 | 
 8 | alpine-transitions-preview is an open-source (MIT) one-page alpine.js/tailwindcss application which is designed to
 9 | perform primarily two functions. it is not affiliated or supported by alpine.js or tailwindcss
10 | 
11 | 1. It allows you to preview your alpinejs transitions so you can preview & tweak them easily before moving them to your
12 |    application. (see below)
13 | 
14 | <img src="assets/alpine-transitions.gif" class="mx-auto my-4 w-3/4"/><br />
15 | 
16 | 2. It allows you to copy/paste blocks of transition code (like for modals/dropdowns/other js components in TailwindUI)
17 |    into the page, and it will output the proper alpine.js transitions markup (see below)
18 | 
19 | <img src="assets/tailwindui-formatting.gif" class="mx-auto my-4 w-3/4"/>
20 | <br />
21 | 
22 | [Github Pages Deployment](https://hallindavid.github.io/alpine-transition-preview/)
23 | 
24 | ## Issues
25 | 
26 | Please report all issues in the GitHub Issue tracker
27 | 
28 | ## Contributing
29 | 
30 | Shoot me an email, or DM me on Twitter and I am happy to allow other contributors.
31 | 


--------------------------------------------------------------------------------
/assets/alpine-transitions.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hallindavid/alpine-transition-preview/91783e13a073ed3a9150e6a0dea4745e3e63aa6c/assets/alpine-transitions.gif


--------------------------------------------------------------------------------
/assets/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hallindavid/alpine-transition-preview/91783e13a073ed3a9150e6a0dea4745e3e63aa6c/assets/github.png


--------------------------------------------------------------------------------
/assets/tailwindui-formatting.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hallindavid/alpine-transition-preview/91783e13a073ed3a9150e6a0dea4745e3e63aa6c/assets/tailwindui-formatting.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8"/>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  7 |     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  8 |     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
  9 | </head>
 10 | 
 11 | <body>
 12 | 
 13 | <div class="min-h-screen bg-gray-100" x-data="app_init()"
 14 |      x-init="window.setInterval(() => toggle_preview(), 3000)">
 15 |     <header class="pb-24 bg-gradient-to-r from-light-blue-800 to-cyan-600">
 16 |         <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
 17 |             <div class="relative flex flex-wrap items-center justify-center lg:justify-between">
 18 |                 <!-- Logo -->
 19 |                 <div class="absolute left-0 py-5 flex-shrink-0 lg:static">
 20 |                     Alpine.js Transitions Previewer
 21 |                 </div>
 22 |             </div>
 23 |         </div>
 24 |     </header>
 25 |     <main class="-mt-24 pb-8">
 26 |         <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
 27 |             <!-- Main 2 column grid -->
 28 |             <div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-2 lg:gap-8">
 29 |                 <section>
 30 |                     <div class="rounded-lg bg-gray-200 overflow-hidden shadow">
 31 |                         <div class="rounded-tr-lg relative bg-white p-6">
 32 |                             <label class="block text-sm font-medium text-gray-700">
 33 |                                 Alpine Transition Code
 34 |                             </label>
 35 | 
 36 |                             <div>
 37 |                                 <label for="trEnter" class="block text-sm font-medium text-gray-700">
 38 |                                     x-transition:enter
 39 |                                 </label>
 40 |                                 <div class="mt-1">
 41 |                                     <input type="text" x-model="trEnter" id="trEnter"
 42 |                                            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">
 43 |                                 </div>
 44 |                             </div>
 45 | 
 46 |                             <div>
 47 |                                 <label for="trEnterStart" class="block text-sm font-medium text-gray-700">
 48 |                                     x-transition:enter-start
 49 |                                 </label>
 50 |                                 <div class="mt-1">
 51 |                                     <input type="text" x-model="trEnterStart" id="trEnterStart"
 52 |                                            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">
 53 |                                 </div>
 54 |                             </div>
 55 | 
 56 |                             <div>
 57 |                                 <label for="trEnterEnd" class="block text-sm font-medium text-gray-700">
 58 |                                     x-transition:enter-end
 59 |                                 </label>
 60 |                                 <div class="mt-1">
 61 |                                     <input type="text" x-model="trEnterEnd" id="trEnterEnd"
 62 |                                            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">
 63 |                                 </div>
 64 |                             </div>
 65 | 
 66 |                             <div>
 67 |                                 <label for="trLeave" class="block text-sm font-medium text-gray-700">
 68 |                                     x-transition:leave
 69 |                                 </label>
 70 |                                 <div class="mt-1">
 71 |                                     <input type="text" x-model="trLeave" id="trLeave"
 72 |                                            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">
 73 |                                 </div>
 74 |                             </div>
 75 | 
 76 |                             <div>
 77 |                                 <label for="trLeave" class="block text-sm font-medium text-gray-700">
 78 |                                     x-transition:leave-start
 79 |                                 </label>
 80 |                                 <div class="mt-1">
 81 |                                     <input type="text" x-model="trLeaveStart" id="trLeaveStart"
 82 |                                            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">
 83 |                                 </div>
 84 |                             </div>
 85 | 
 86 |                             <div>
 87 |                                 <label for="trLeave" class="block text-sm font-medium text-gray-700">
 88 |                                     x-transition:leave-end
 89 |                                 </label>
 90 |                                 <div class="mt-1">
 91 |                                     <input type="text" x-model="trLeaveEnd" id="trLeaveEnd"
 92 |                                            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">
 93 |                                 </div>
 94 |                             </div>
 95 | 
 96 |                             <div class="flex flex-row justify-end mt-2 space-x-1">
 97 |                                 <button type="button" @click="clear_fields()"
 98 |                                         class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 justify-center">
 99 |                                     Clear
100 |                                 </button>
101 |                                 <button type="button" @click="update_preview()"
102 |                                         class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 justify-center">
103 |                                     Submit
104 |                                 </button>
105 |                             </div>
106 |                         </div>
107 |                     </div>
108 |                 </section>
109 |                 <section>
110 |                     <div class="rounded-lg bg-gray-200 overflow-hidden shadow">
111 |                         <div
112 |                                 class="rounded-tr-lg relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500">
113 |                             <div class="flex flex-row justify-between items-center">
114 |                                 <label class="block text-sm font-medium text-gray-700">
115 |                                     Preview Transition
116 |                                 </label>
117 | 
118 |                                 <div class="">
119 |                                     <template x-if="!autoToggle">
120 |                                         <button type="button" @click="autoToggle=!autoToggle"
121 |                                                 class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 justify-center">
122 |                                             <template x-if="autoToggle">Disable AutoToggle</template>
123 |                                             Enable AutoToggle
124 |                                         </button>
125 |                                     </template>
126 |                                     <template x-if="autoToggle">
127 |                                         <button type="button" @click="autoToggle=!autoToggle"
128 |                                                 class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
129 |                                             Disable AutoToggle
130 |                                         </button>
131 |                                     </template>
132 |                                     <button type="button" @click="showPreview=!showPreview"
133 |                                             class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
134 |                                         Manual Toggle
135 |                                     </button>
136 |                                 </div>
137 |                             </div>
138 | 
139 |                             <div
140 |                                     class="bg-gray-200 border-gray-400 border mt-3 rounded-md h-80 w-full"
141 |                                     x-ref="preview">
142 |                                 <div class="origin-top-left absolute left-1/3 h-20 w-1/3 top-1/2 -mt-6 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 text-center py-6"
143 |                                      x-show="showPreview"
144 |                                      x-transition:enter="transition ease-out duration-100"
145 |                                      x-transition:enter-start="transform opacity-0 scale-95"
146 |                                      x-transition:enter-end="transform opacity-100 scale-100"
147 |                                      x-transition:leave="transition ease-in duration-75"
148 |                                      x-transition:leave-start="transform opacity-100 scale-100"
149 |                                      x-transition:leave-end="transform opacity-0 scale-95">
150 |                                     Hello world
151 |                                 </div>
152 | 
153 |                             </div>
154 |                         </div>
155 |                     </div>
156 |                 </section>
157 | 
158 |                 <section>
159 |                     <div class="rounded-lg bg-gray-200 overflow-hidden shadow">
160 |                         <div class="rounded-tr-lg relative bg-white p-6">
161 |                             <div>
162 |                                 <label for="trParse" class="block text-sm font-medium text-gray-700">
163 |                                     Transition Block eg. see below
164 |                                 </label>
165 |                                 <div class="mt-1">
166 |                                             <textarea x-model="trParse" id="trParse" rows="8"
167 |                                                       class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md"></textarea>
168 |                                 </div>
169 |                                 <p class="mt-2 text-sm text-gray-500">Copy & paste a block of transition statements from
170 |                                     tailwind ui eg..<br/><br/>
171 |                                     Entering: "ease-out duration-300"<br/>
172 |                                     From: "opacity-0"<br/>
173 |                                     To: "opacity-100"<br/>
174 |                                     Leaving: "ease-in duration-200"<br/>
175 |                                     From: "opacity-100"<br/>
176 |                                     To: "opacity-0"</p>
177 |                             </div>
178 |                             <div class="flex flex-row justify-end mt-2">
179 |                                 <button type="button" @click="try_parse()"
180 |                                         class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
181 |                                     Try Parsing
182 |                                 </button>
183 |                             </div>
184 |                         </div>
185 |                     </div>
186 |                 </section>
187 | 
188 | 
189 |                 <section>
190 |                     <div class="rounded-lg bg-gray-200 overflow-hidden shadow">
191 |                         <div class="rounded-tr-lg relative bg-white p-6">
192 |                             <div>
193 |                                 <label for="trOutput" class="block text-sm font-medium text-gray-700">
194 |                                     Transition output
195 |                                 </label>
196 |                                 <div class="mt-1">
197 |                                             <textarea name="transition-output" rows="10"
198 |                                                       x-model="trOutput" id="trOutput"
199 |                                                       class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 block w-full sm:text-sm border border-gray-300 rounded-md"></textarea>
200 |                                 </div>
201 |                             </div>
202 |                         </div>
203 |                     </div>
204 |                 </section>
205 |             </div>
206 |         </div>
207 |     </main>
208 |     <footer>
209 |         <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
210 |             <div class="border-t border-gray-200 py-8 text-sm text-gray-500 text-center sm:text-left flex flex-row justify-between">
211 |                 <div class="flex flex-row justify-start space-x-3">
212 |                     <span>Created using</span>
213 |                     <a href="https://tailwindcss.com/" target="_blank">
214 |                         <svg viewBox="0 0 247 31" class="w-auto h-5">
215 |                             <path fill-rule="evenodd" clip-rule="evenodd"
216 |                                   d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z"
217 |                                   fill="#06B6D4"></path>
218 |                             <path fill-rule="evenodd" clip-rule="evenodd"
219 |                                   d="M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z"
220 |                                   fill="#000"></path>
221 |                         </svg>
222 |                     </a>
223 |                     <a href="https://github.com/alpinejs/alpine" target="_blank" class="text-indigo-500 font-semibold">Alpine.js</a>
224 |                     <p>Not affiliated with alpine.js or tailwindcss at all. Just fantastic products</p>
225 |                 </div>
226 |                 <div class="flex flex-row space-x-3">
227 |                     <span>Created by
228 |                         <a class="text-indigo-500 font-semibold" target="_blank" href="https://davidhallin.com/">David Hallin</a>
229 |                     </span>
230 |                     <a href="https://github.com/hallindavid/alpine-transition-preview" target="_blank"><img
231 |                             src="./assets/github.png" class="h-5"/></a>
232 | 
233 | 
234 |                 </div>
235 |             </div>
236 |         </div>
237 |     </footer>
238 | </div>
239 | 
240 | <script>
241 | 
242 |     function app_init() {
243 |         return {
244 |             showPreview: true,
245 |             autoToggle: true,
246 |             trEnter: 'transition ease-out duration-100',
247 |             trEnterStart: 'transform opacity-0 scale-95',
248 |             trEnterEnd: 'transform opacity-100 scale-100',
249 |             trLeave: 'transition ease-in duration-75',
250 |             trLeaveStart: 'transform opacity-100 scale-100',
251 |             trLeaveEnd: 'transform opacity-0 scale-95',
252 |             trParse: '',
253 |             trOutput: '',
254 |             try_parse() {
255 |                 var lines = this.trParse.split("\n");
256 |                 if (lines.length > 0) {
257 |                     for (var i = 0; i < lines.length; i++) {
258 |                         var lineParts = lines[i].split(":");
259 |                         if (lineParts.length == 2) {
260 |                             // Line has : seperating the items
261 |                             var newClasses = lineParts[1].replace(/['"]+/g, '').trim();
262 | 
263 |                             switch (i) {
264 |                                 case 0:
265 |                                     this.trEnter = newClasses;
266 |                                     break;
267 |                                 case 1:
268 |                                     this.trEnterStart = newClasses;
269 |                                     break;
270 |                                 case 2:
271 |                                     this.trEnterEnd = newClasses;
272 |                                     break;
273 |                                 case 3:
274 |                                     this.trLeave = newClasses;
275 |                                     break;
276 |                                 case 4:
277 |                                     this.trLeaveStart = newClasses;
278 |                                     break;
279 |                                 case 5:
280 |                                     this.trLeaveEnd = newClasses;
281 |                                     break;
282 |                             }
283 |                         }
284 |                     }
285 |                 }
286 |                 this.update_preview();
287 |             },
288 |             update_preview() {
289 |                 this.$refs.preview.innerHTML = make_preview(this.trEnter, this.trEnterStart, this.trEnterEnd, this.trLeave, this.trLeaveStart, this.trLeaveEnd);
290 |                 this.update_output();
291 |             },
292 |             update_output() {
293 |                 this.trOutput = make_output(this.trEnter, this.trEnterStart, this.trEnterEnd, this.trLeave, this.trLeaveStart, this.trLeaveEnd);
294 |             },
295 |             clear_fields() {
296 |                 this.trEnter = '';
297 |                 this.trEnterStart = '';
298 |                 this.trEnterEnd = '';
299 |                 this.trLeave = '';
300 |                 this.trLeaveStart = '';
301 |                 this.trLeaveEnd = '';
302 |             },
303 |             toggle_preview() {
304 |                 if (this.autoToggle) {
305 |                     this.showPreview = !this.showPreview;
306 |                 }
307 |             }
308 |         }
309 |     }
310 | 
311 |     function make_preview(e, ef, et, l, lf, lt) {
312 |         return `<div class="origin-top-left absolute left-1/3 h-20 w-1/3 top-1/2 -mt-6 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 text-center py-6"
313 |                                      x-show="showPreview"
314 |                                      x-transition:enter="${e}"
315 |                                      x-transition:enter-start="${ef}"
316 |                                      x-transition:enter-end="${et}"
317 |                                      x-transition:leave="${l}"
318 |                                      x-transition:leave-start="${lf}"
319 |                                      x-transition:leave-end="${lt}">
320 |                                     Hello world
321 |                                 </div>`;
322 |     }
323 | 
324 |     function make_output(e, ef, et, l, lf, lt) {
325 |         return `<div x-transition:enter="${e}"
326 |         x-transition:enter-start="${ef}"
327 |         x-transition:enter-end="${et}"
328 |         x-transition:leave="${l}"
329 |         x-transition:leave-start="${lf}"
330 |         x-transition:leave-end="${lt}"
331 |         x-show="showPreview">Hello world!</div>`;
332 |     }
333 | 
334 | 
335 | </script>
336 | </body>
337 | 
338 | </html>


--------------------------------------------------------------------------------