Adding a few more final updates

uhurun · Jun 7, 2023 · adb058d · adb058d
1 parent dbc7633
commit adb058d
Show file tree

Hide file tree

Showing 10 changed files with 330 additions and 11 deletions.
diff --git a/data.json b/data.json
@@ -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",

diff --git a/elements/command-examples/example-02.html b/elements/command-examples/example-02.html
@@ -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">

diff --git a/elements/hover-card.html b/elements/hover-card.html
@@ -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>
diff --git a/elements/image-gallery.html b/elements/image-gallery.html
@@ -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>
diff --git a/elements/progress.html b/elements/progress.html
@@ -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>
diff --git a/elements/quotes.html b/elements/quotes.html
@@ -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>

diff --git a/elements/radio-group.html b/elements/radio-group.html
@@ -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>