tgrosinger/pines
1
0
Fork 0
Code

Adding a few more final updates

Browse Source
This commit is contained in:
Tony Lea 2023-06-07 10:19:52 -04:00
parent dbc7633b8a
commit adb058d313
10 changed files with 330 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
data.json
View File

@ -110,6 +110,7 @@
"slide-over" : "w-full p-10 box-border flex items-center justify-center",
"switch" : "w-full p-10 box-border flex items-center justify-center",
"tabs" : "w-full p-10 box-border flex items-center justify-center",
"table" : "w-full",
"textarea" : "w-full py-10 px-48 box-border flex items-center justify-center",
"textarea-auto-resize" : "w-full py-10 px-48 box-border flex items-center justify-center",
"text-animation" : "w-full py-10 box-border flex items-center justify-center",

2
elements/command-examples/example-02.html
View File

@ -167,7 +167,7 @@
@keydown.enter="commandItemSelected=commandItemActive;"
@command-input-focus.window="$refs.commandInput.focus();"
class="flex min-h-[370px] justify-center w-full max-w-xl items-start relative" x-cloak>
<div class="box-border flex flex-col w-full h-full overflow-hidden bg-white rounded-lg shadow-md bg-opacity-80 drop-shadow-md backdrop-blur-sm">
<div class="box-border flex flex-col w-full h-full overflow-hidden bg-white rounded-md shadow-md bg-opacity-90 drop-shadow-md backdrop-blur-sm">
<div class="flex items-center px-3 border-b border-gray-300">
<svg class="w-4 h-4 mr-0 text-neutral-400 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line></svg>
<input type="text" x-ref="commandInput" x-model="commandSearch" class="flex w-full px-2 py-3 text-sm bg-transparent border-0 rounded-md outline-none focus:outline-none focus:ring-0 focus:border-0 placeholder:text-neutral-400 h-11 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Type a command or search..." autocomplete="off" autocorrect="off" spellcheck="false">

40
elements/hover-card.html Normal file
View File

@ -0,0 +1,40 @@
<div x-data="{
hoverCardHovered: false,
hoverCardTimout: null,
hoverCardLeaveTimeout: null,
hoverCardDelay: 1000,
hoverCardLeaveDelay: 500,
hoverCardEnter () {
clearTimeout(this.hoverCardLeaveTimeout);
if(this.hoverCardHovered) return;
clearTimeout(this.hoverCardTimout);
this.hoverCardTimout = setTimeout(() => {
this.hoverCardHovered = true;
}, this.hoverCardDelay);
},
hoverCardLeave () {
clearTimeout(this.hoverCardTimout);
if(!this.hoverCardHovered) return;
clearTimeout(this.hoverCardLeaveTimeout);
this.hoverCardLeaveTimeout = setTimeout(() => {
this.hoverCardHovered = false;
}, this.hoverCardLeaveDelay);
}
}" class="relative" @mouseover="hoverCardEnter()" @mouseleave="hoverCardLeave()">
<a href="#_" class="hover:underline">@thedevdojo</a>
<div x-show="hoverCardHovered" class="absolute top-0 w-[365px] max-w-lg mt-5 z-30 -translate-x-1/2 translate-y-3 left-1/2" x-cloak>
<div x-show="hoverCardHovered" class="w-[full] h-auto bg-white space-x-3 p-5 flex items-start rounded-md shadow-sm border border-neutral-200/70" x-transition>
<img src="https://cdn.devdojo.com/users/June2022/devdojo.jpg" alt="devdojo image" class="rounded-full w-14 h-14" />
<div class="relative">
<p class="mb-1 font-bold">@thedevdojo</p>
<p class="mb-1 text-sm text-gray-600">The creative platform for developers. Community, tools, products, and more</p>
<p class="flex items-center space-x-1 text-xs text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
</svg>
<span>Joined June 2020</span>
</p>
</div>
</div>
</div>
</div>

86
elements/image-gallery.html Normal file
View File

@ -0,0 +1,86 @@
<div x-data="{
imageGalleryShow: false,
activeImageUrl: null,
index: null,
imageGalleryOpen(event) {
this.index = event.target.dataset.index;
this.activeImageUrl = event.target.src;
this.imageGalleryShow = true;
},
imageGalleryClose() {
this.imageGalleryShow = false;
setTimeout(() => this.activeImageUrl = null, 300);
},
imageGalleryNext(){
if(this.index == 10){
this.index = 1;
} else {
this.index = parseInt(this.index) + 1;
}
this.activeImageUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.index + '\']').src;
},
imageGalleryPrev() {
if(this.index == 1){
this.index = 10;
} else {
this.index = parseInt(this.index) - 1;
}
this.activeImageUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.index + '\']').src;
}
}"
@image-gallery-next.window="imageGalleryNext()"
@image-gallery-prev.window="imageGalleryPrev()"
@keyup.right.window="imageGalleryNext();"
@keyup.left.window="imageGalleryPrev();"
x-init="
imageGalleryPhotos = $refs.gallery.querySelectorAll('img');
for(let i=0; i<imageGalleryPhotos.length; i++){
imageGalleryPhotos[i].setAttribute('data-index', i+1);
}
"
class="w-full h-full select-none">
<div class="max-w-6xl mx-auto duration-1000 delay-300 opacity-0 select-none ease animate-fade-in-view" style="translate: none; rotate: none; scale: none; opacity: 1; transform: translate(0px, 0px);">
<ul x-ref="gallery" id="gallery" class="grid grid-cols-2 gap-5 lg:grid-cols-5">
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-01.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 01"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-02.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 02"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-03.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 03"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-04.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 04"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-05.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 05"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-06.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 06"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-07.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 07"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-08.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 08"></li>
<li><img x-on:click="imageGalleryOpen" src="https://cdn.devdojo.com/images/june2023/mountains-09.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 09"></li>
<li><img x-on:click="imageGalleryOpen"" src="https://cdn.devdojo.com/images/june2023/mountains-10.jpeg" class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]" alt="photo gallery image 10"></li>
</ul>
</div>
<template x-teleport="body">
<div
x-show="imageGalleryShow"
x-transition:enter="transition ease-in-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:leave="transition ease-in-in duration-300"
x-transition:leave-end="opacity-0"
@click="imageGalleryClose"
@keydown.window.escape="imageGalleryClose"
x-trap.inert.noscroll="imageGalleryShow"
class="fixed inset-0 z-[99] flex items-center justify-center bg-black bg-opacity-50 select-none cursor-zoom-out" x-cloak>
<div class="relative flex items-center justify-center w-11/12 xl:w-4/5 h-11/12">
<div @click="$event.stopPropagation(); $dispatch('image-gallery-prev')" class="absolute left-0 flex items-center justify-center text-white translate-x-10 rounded-full cursor-pointer xl:-translate-x-24 2xl:-translate-x-32 bg-white/10 w-14 h-14 hover:bg-white/20">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
</div>
<img
x-show="imageGalleryShow"
x-transition:enter="transition ease-in-out duration-300"
x-transition:enter-start="opacity-0 transform scale-50"
x-transition:leave="transition ease-in-in duration-300"
x-transition:leave-end="opacity-0 transform scale-50"
class="object-contain object-center w-full h-full select-none cursor-zoom-out" :src="activeImageUrl" alt="" style="display: none;">
<div @click="$event.stopPropagation(); $dispatch('image-gallery-next');" class="absolute right-0 flex items-center justify-center text-white -translate-x-10 rounded-full cursor-pointer xl:translate-x-24 2xl:translate-x-32 bg-white/10 w-14 h-14 hover:bg-white/20">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
</div>
</div>
</div>
</template>
</div>

2
elements/progress.html
View File

@ -11,5 +11,5 @@
}, 100);
"
class="relative w-full h-3 overflow-hidden rounded-full bg-neutral-100">
<span :style="'width:' + progress + '%'" class="absolute w-24 h-full duration-300 ease bg-neutral-900"></span>
<span :style="'width:' + progress + '%'" class="absolute w-24 h-full duration-300 ease-linear bg-neutral-900" x-cloak></span>
</div>

10
elements/quotes.html
View File

@ -1,22 +1,22 @@
<blockquote class="relative">
<blockquote class="relative w-full max-w-2xl mx-auto">
<svg class="absolute top-0 left-0 w-16 h-16 text-gray-100 transform -translate-x-6 -translate-y-8 dark:text-gray-700" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M7.39762 10.3C7.39762 11.0733 7.14888 11.7 6.6514 12.18C6.15392 12.6333 5.52552 12.86 4.76621 12.86C3.84979 12.86 3.09047 12.5533 2.48825 11.94C1.91222 11.3266 1.62421 10.4467 1.62421 9.29999C1.62421 8.07332 1.96459 6.87332 2.64535 5.69999C3.35231 4.49999 4.33418 3.55332 5.59098 2.85999L6.4943 4.25999C5.81354 4.73999 5.26369 5.27332 4.84476 5.85999C4.45201 6.44666 4.19017 7.12666 4.05926 7.89999C4.29491 7.79332 4.56983 7.73999 4.88403 7.73999C5.61716 7.73999 6.21938 7.97999 6.69067 8.45999C7.16197 8.93999 7.39762 9.55333 7.39762 10.3ZM14.6242 10.3C14.6242 11.0733 14.3755 11.7 13.878 12.18C13.3805 12.6333 12.7521 12.86 11.9928 12.86C11.0764 12.86 10.3171 12.5533 9.71484 11.94C9.13881 11.3266 8.85079 10.4467 8.85079 9.29999C8.85079 8.07332 9.19117 6.87332 9.87194 5.69999C10.5789 4.49999 11.5608 3.55332 12.8176 2.85999L13.7209 4.25999C13.0401 4.73999 12.4903 5.27332 12.0713 5.85999C11.6786 6.44666 11.4168 7.12666 11.2858 7.89999C11.5215 7.79332 11.7964 7.73999 12.1106 7.73999C12.8437 7.73999 13.446 7.97999 13.9173 8.45999C14.3886 8.93999 14.6242 9.55333 14.6242 10.3Z" fill="currentColor"/>
</svg>
<div class="relative z-10">
<p class="text-gray-800 sm:text-xl dark:text-white"><em>
I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.
These are some of the sleakest looking designs built for Alpine and Tailwind. I will definitely be using these in my next project.
</em></p>
</div>
<footer class="mt-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Image Description">
<img class="w-10 h-10 rounded-full" src="https://cdn.devdojo.com/images/june2023/johndoe.png" alt="John Doe">
</div>
<div class="ml-4">
<div class="text-base font-semibold text-gray-800 dark:text-gray-400">Josh Grazioso</div>
<div class="text-xs text-gray-500">Source title</div>
<div class="text-base font-semibold text-gray-800 dark:text-gray-400">John Doe</div>
<div class="text-xs text-gray-500">Web Designer</div>
</div>
</div>
</footer>

30
elements/radio-group.html Normal file
View File

@ -0,0 +1,30 @@
<div x-data="{
radioGroupSelectedValue: null,
radioGroupOptions: [
{
title: 'Tailwind CSS',
description: 'A utility-first CSS framework for rapid UI development.',
value: 'tailwind'
},
{
title: 'Alpine JS',
description: 'A rugged and lightweight JavaScript framework.',
value: 'alpine'
},
{
title: 'Laravel',
description: 'The PHP Framework for Web Artisans.',
value: 'laravel'
}
]
}" class="space-y-3">
<template x-for="(option, index) in radioGroupOptions" :key="index">
<label @click="radioGroupSelectedValue=option.value" class="flex items-start p-5 space-x-3 bg-white border rounded-md shadow-sm hover:bg-gray-50 border-neutral-200/70">
<input type="radio" name="radio-group" :value="option.value" class="translate-y-px" />
<span class="relative flex flex-col space-y-1.5 leading-none">
<span x-text="option.title" class="font-semibold"></span>
<span x-text="option.description" class="text-sm opacity-50"></span>
</span>
</label>
</template>
</div>

70
elements/select.html
View File

@ -59,6 +59,10 @@
],
selectableItemActive: null,
selectId: $id('select'),
selectKeydownValue: '',
selectKeydownClearTimeout: null,
selectKeydownTimeout: 1000,
selectDropdownPosition: 'bottom',
selectableItemIsActive(item) {
return this.selectableItemActive && this.selectableItemActive.value==item.value;
},
@ -87,28 +91,85 @@
this.$refs.selectableItemsList.scrollTop=0;
}
}
// 224px;
},
selectKeydown(event){
if (event.keyCode >= 65 && event.keyCode <= 90) {
this.selectKeydownValue += event.key;
selectedItemBestMatch = this.selectItemsFindBestMath();
if(selectedItemBestMatch){
if(this.selectableItemsOpen){
this.selectableItemActive = selectedItemBestMatch;
this.selectScrollToActiveItem();
} else {
this.selectedItem = this.selectableItemActive = selectedItemBestMatch;
}
}
console.log(this.selectItemsFindBestMath());
if(this.selectKeydownValue != ''){
clearTimeout(this.selectKeydownClearTimeout);
this.selectKeydownClearTimeout = setTimeout(() => {
this.selectKeydownValue = '';
}, this.selectKeydownTimeout);
}
}
},
selectItemsFindBestMath(){
typedValue = this.selectKeydownValue.toLowerCase();
var bestMatch = null;
var bestMatchIndex = -1;
for (var i = 0; i < this.selectableItems.length; i++) {
var title = this.selectableItems[i].title.toLowerCase();
var index = title.indexOf(typedValue);
if (index > -1 && (bestMatchIndex == -1 || index < bestMatchIndex)) {
bestMatch = this.selectableItems[i];
bestMatchIndex = index;
}
}
return bestMatch;
},
selectPositionUpdate(){
selectDropdownBottomPos = this.$refs.selectButton.getBoundingClientRect().top + this.$refs.selectButton.offsetHeight + parseInt(window.getComputedStyle(this.$refs.selectableItemsList).maxHeight);
if(window.innerHeight < selectDropdownBottomPos){
this.selectDropdownPosition = 'top';
} else {
this.selectDropdownPosition = 'bottom';
}
console.log(selectDropdownBottomPos);
//console.log(this.$refs.selectButton.getBoundingClientRect().top + this.$refs.selectButton.offsetHeight);
//console.log(this.$refs.selectableItemsList.getBoundingClientRect().top);
//console.log(parseInt(window.getComputedStyle(this.$refs.selectableItemsList).marginTop));
// console.log(window.getComputedStyle(this.$refs.selectableItemsList).maxHeight);
}
}"
x-init="
$watch('selectableItemsOpen', function(){
if(!selectedItem){
selectableItemActive=selectableItems[0];
selectableItemActive=selectableItems[0];
} else {
selectableItemActive=selectedItem;
}
selectScrollToActiveItem();
setTimeout(function(){
selectScrollToActiveItem();
}, 10);
selectPositionUpdate();
window.addEventListener('resize', (event) => { selectPositionUpdate(); });
});
"
@keydown.escape="if(selectableItemsOpen){ selectableItemsOpen=false; }"
@keydown.down="if(selectableItemsOpen){ selectableItemActiveNext(); } else { selectableItemsOpen=true; } event.preventDefault();"
@keydown.up="event.preventDefault(); selectableItemActivePrevious()"
@keydown.up="if(selectableItemsOpen){ selectableItemActivePrevious(); } else { selectableItemsOpen=true; } event.preventDefault();"
@keydown.enter="selectedItem=selectableItemActive; selectableItemsOpen=false;"
@keydown="selectKeydown($event);"
class="relative w-64">
<button x-ref="selectButton" @click="selectableItemsOpen=!selectableItemsOpen"
:class="{ 'focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400' : !selectableItemsOpen }"
class="relative min-h-[38px] flex items-center justify-between w-full py-2 pl-3 pr-10 text-left bg-white border rounded-md shadow-sm cursor-default border-neutral-200/70 focus:outline-none sm:text-sm">
<span x-text="selectedItem ? selectedItem.title : 'Select Item'" class="truncate"></span>
<span x-text="selectedItem ? selectedItem.title : 'Select Item'" class="truncate">Select Item</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5 text-gray-400"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path></svg>
</span>
@ -120,6 +181,7 @@
x-transition:enter="transition ease-out duration-50"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100"
:class="{ 'bottom-0 mb-10' : selectDropdownPosition == 'top', 'top-0 mt-10' : selectDropdownPosition == 'bottom' }"
class="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
x-cloak>

50
elements/slide-over-examples/example-01.html Normal file
View File

@ -0,0 +1,50 @@
<div x-data="{
slideOverOpen: false
}"
class="relative z-50 w-auto h-auto">
<button @click="slideOverOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
<template x-teleport="body">
<div
x-show="slideOverOpen"
@keydown.window.escape="slideOverOpen=false"
class="relative z-[99]">
<div x-show="slideOverOpen" x-transition.opacity.duration.600ms @click="slideOverOpen = false" class="fixed inset-0 bg-black bg-opacity-10"></div>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
<div
x-show="slideOverOpen"
@click.away="slideOverOpen = false"
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
class="w-screen max-w-full">
<div class="flex flex-col h-full py-5 overflow-y-scroll bg-white border-l shadow-lg border-neutral-100/70">
<div class="px-4 sm:px-5">
<div class="flex items-start justify-between pb-1">
<h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">Full-screen Slide Over Title</h2>
<div class="flex items-center h-auto ml-3">
<button @click="slideOverOpen=false" class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-5 space-x-1 text-xs font-medium uppercase border rounded-md border-neutral-200 text-neutral-600 hover:bg-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
<span>Close</span>
</button>
</div>
</div>
</div>
<div class="relative flex-1 px-4 mt-5 sm:px-5">
<div class="absolute inset-0 px-4 sm:px-5">
<div class="relative h-full overflow-hidden border border-dashed rounded-md border-neutral-300"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>

50
elements/slide-over.html Normal file
View File

@ -0,0 +1,50 @@
<div x-data="{
slideOverOpen: false
}"
class="relative z-50 w-auto h-auto">
<button @click="slideOverOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
<template x-teleport="body">
<div
x-show="slideOverOpen"
@keydown.window.escape="slideOverOpen=false"
class="relative z-[99]">
<div x-show="slideOverOpen" x-transition.opacity.duration.600ms @click="slideOverOpen = false" class="fixed inset-0 bg-black bg-opacity-10"></div>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
<div
x-show="slideOverOpen"
@click.away="slideOverOpen = false"
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
class="w-screen max-w-md">
<div class="flex flex-col h-full py-5 overflow-y-scroll bg-white border-l shadow-lg border-neutral-100/70">
<div class="px-4 sm:px-5">
<div class="flex items-start justify-between pb-1">
<h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">Slide Over Title</h2>
<div class="flex items-center h-auto ml-3">
<button @click="slideOverOpen=false" class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-5 space-x-1 text-xs font-medium uppercase border rounded-md border-neutral-200 text-neutral-600 hover:bg-neutral-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
<span>Close</span>
</button>
</div>
</div>
</div>
<div class="relative flex-1 px-4 mt-5 sm:px-5">
<div class="absolute inset-0 px-4 sm:px-5">
<div class="relative h-full overflow-hidden border border-dashed rounded-md border-neutral-300"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</div>