Components.popover?
scottwater opened this issue · 5 comments
I just synced TailwindUI for a fist time in a while it looks like I am missing a reference for Components.popover (at least in flyover's simple)
Is there a library I need to add now in addition to Aplinejs?
Thanks.
Hi @scottwater can you provide a little more detail? What component are you referring to?
Also, is this the preview page you're asking about or the final transformed component?
Sorry for the crappy bug report.
Here are the steps and the results:
- Grab latest from tailindui-crawler
- yarn start
- starter a server in the output directory
- Grab the code for the "simple" flyout menu
Here are my configuration settings (minus email/password)
OUTPUT=../tailwindui
HTMLMODE=alpine
TRANSFORMERS=addTailwindCss,prefixSrc,useInter
BUILDINDEX=1
The output it generated is the following. Note the Components.popover on the third line. Looking at the live source on TailwindUI.com this looks like a component they are using on site.
<div class="bg-white" style="min-height: 648px;">
<div class="flex items-center justify-center p-8">
<div class="relative" x-data="Components.popover({ open: true, focus: false })" x-init="init()" @keydown.escape="onEscape" @close-popover-group.window="onClosePopoverGroup">
<button type="button" x-state:on="Item active" x-state:off="Item inactive" class="text-gray-500 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" :class="{ 'text-gray-900': open, 'text-gray-500': !(open) }" @click="toggle" @mousedown="if (open) $event.preventDefault()" aria-expanded="false" :aria-expanded="open.toString()">
<span>Solutions</span>
<svg x-state:on="Item active" x-state:off="Item inactive" class="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500" :class="{ 'text-gray-600': open, 'text-gray-400': !(open) }" x-description="Heroicon name: solid/chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1" x-description="Flyout menu, show/hide based on flyout menu state." class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0" x-ref="panel" @click.away="open = false">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
<a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900">
Blog
</p>
<p class="mt-1 text-sm text-gray-500">
Learn about tips, product updates and company culture.
</p>
</a>
<a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900">
Help Center
</p>
<p class="mt-1 text-sm text-gray-500">
Get all of your questions answered in our forums of contact support.
</p>
</a>
<a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900">
Guides
</p>
<p class="mt-1 text-sm text-gray-500">
Learn how to maximize our platform to get the most out of it.
</p>
</a>
<a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900">
Events
</p>
<p class="mt-1 text-sm text-gray-500">
Check out webinars with experts and learn about our annual conference.
</p>
</a>
<a href="#" class="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900">
Security
</p>
<p class="mt-1 text-sm text-gray-500">
Understand how we take your privacy seriously.
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Ah, thanks. Now I understand. The current version of the HTML preview is busted. Because Tailwind Labs doesn't expect you to use the preview code directly, it's not a 100% translation from the design HTML. They added Alpine.js to show an example of how to use it interactively. They are relying on custom components that they import into their preview to support this that are not a part of TailwindUI.
Anyway, to get around this limitation, I'm now saving the preview HTML (from the <iframe/>) directly as the preview and downloading the css and script files and saving them locally. This way you get an exact replica of the preview.
The drawback is that you won't get any of the customizations, like color and logo, as those transformers are only applied to the clean component files.
I'm doing a little cleanup, of the new preview code and I'll push an update.
Anyway, if you're interested in the component file, it's here:
https://tailwindui.com/js/components-v2.js?id=a5b939e76670659191b6
With the new preview code, it works as intended.
After clicking, menu now toggles and fades in and out.
I've been cleaning up the preview section and it now functions the same locally as it does on the TWUI site.
The crawler downloads the js and css referenced in the preview HTML, so it's all served locally.
The new preview even supports resizing by dragging now.
This is fixed in v2.5 5c72189
