Usage with AlpineJS
Tindome opened this issue · comments
Hye
I just try to use alpine.js combined with webscript there seem to be some weird behavior
by example @ tag isn't accepted, neither x-data
any clue of how to achieve it ?
thanks
Can you give me a snippet of HTML/Alpine that you want to convert and I'll show you how I would go about converting it?
yes,
this is a part of a popup, which i inject on a webpage : the 'x-' and '@' part are problematics
<div id="facturier__popup"
x-data="{
open: true
}"
x-init="
$watch('open', value => {
const body = document.body;
if(!open) {
body.classList.remove('h-screen');
return body.classList.remove('overflow-hidden');
return;
} else {
body.classList.add('h-screen');
body.classList.add('overflow-hidden');
return;
}
});
"
@evtfacturierpopupinit.window="open = $event.detail.open;"
>
<!-- Make sure to add the requisite CSS for x-cloak: https://github.com/alpinejs/alpine#x-cloak -->
<div x-cloak x-ref="modal" x-show.transition.opacity="open" style="z-index:1060;" class="fixed z-20 top-0 left-0 w-screen h-screen bg-gray-500 bg-opacity-25 flex items-center justify-center" role="dialog" aria-modal="true">
<!--<div @mousedown.away="open = false" @keydown.window.escape="open = false" class="w-full max-w-screen-sm bg-white rounded shadow-xl flex flex-col absolute divide-y divide-gray-200">-->
<div @mousedown.away="open = false" @keydown.window.escape="open = false" class="w-full max-w-screen-xl h-95vh h-screen bg-white rounded shadow-xl flex flex-col absolute divide-y divide-gray-200">
<!-- header -->
<div class="px-5 py-4 flex items-center justify-between">
<h2 class="text-xl leading-tight text-gray-700">
Are you sure?
</h2>
<div class="absolute right-0 top-0 -mr-2 -mt-2 border cursor-pointer shadow-lg bg-white z-10 p-1 rounded-full p-2" @click="open = false">
<img src="https://image.flaticon.com/icons/svg/151/151882.svg"/ class="w-2 h-2">
</div>
</div>
<div class="p-5">
<p class="text-sm text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde at omnis voluptas quo eum aspernatur nesciunt accusamus voluptates aliquid animi architecto quasi illo similique, nobis corporis excepturi? Maiores, iusto eveniet.</p>
</div>
<div class="flex items-center justify-end px-5 py-4 space-x-2">
<button @click="open = false" class="rounded px-5 py-2 rounded-sm border border-gray-300 text-gray-600 font-semibold transition duration-150 hover:border-gray-400 hover:text-gray-900 focus:outline-none focus:shadow-outline">Cancel</button>
<button class="rounded px-5 py-2 rounded-sm bg-indigo-600 text-white font-semibold transition duration-150 hover:bg-indigo-500 focus:outline-none focus:shadow-outline">Action</button>
</div>
</div>
</div>
</div>
or a shorter one extracted from alpine demo-test
<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul
x-show="open"
@click.away="open = false"
>
Dropdown Body
</ul>
</div>
For the x-data
webscript supports https://mudgen.github.io/webscript/docs/#hyphens-in-property-names
So that would be x·data
.
For the following use cases:
@click.away
:class
- attributes with
:
likexml:lang
There is currently no official syntax because they are invalid variable names in JS.
One solution is creating a custom builder https://mudgen.github.io/webscript/docs/#webscript-builders
that takes a special property name and convert it to the alpine format.
Example
import builders from 'webscript'
import { createElement } from 'webscript/dist/createAlpineElement.js'
const { div, ul } = builders(createElement);
const out = div.x·data`{open:false}`(
ul
.x·show`open`
.click`away`("open = false")("Dropdown Body")
)