Adding latest content

Author: tnylea

elements/full-screen-modal.json

@@ -2,6 +2,10 @@
     "data" : {
         "fullscreenModal" : "A boolean value that will toggle the fullscreen modal to be open or closed."
     },
+    "alert_notification" : {
+        "title" : "Alpine Teleport Directive",
+        "description" : "This element uses the <a href=\"https://alpinejs.dev/directives/teleport\" target=\"_blank\" class=\"underline\">AlpineJS teleport directive</a>, which will teleport the Full-screen modal to be a child of the body element. This allows the modal to be full-screen and prevents any display issues with its parent elements."
+    },
     "additional" : {
         "description" : "<p>The first <code>&lt;button&gt;</code> element can be any button or element you choose as long as it has the <code>@click=&#x22;fullscreenModal=true&#x22;</code> attribute it will work the same and show the full screen modal when it is clicked.</p>"
     }

elements/image-gallery.json

@@ -10,7 +10,10 @@
 
     },
     "alert_notification" : {
-        "title" : "Add or remove images",
-        "description" : "Simply add or remove your own <strong><code>&lt;li&gt;&lt;img src='...' /&gt;&lt;/li&gt;</code></strong> elements to the image gallery, and it will automatically be reflected in the gallery."
+        "title" : "Alpine Teleport Directive",
+        "description" : "This element uses the <a href=\"https://alpinejs.dev/directives/teleport\" target=\"_blank\" class=\"underline\">AlpineJS teleport directive</a>, which will teleport the Image Gallery to be a child of the body element. This allows the gallery to be full-screen and prevents any display issues with its parent elements."
+    },
+    "additional" : {
+        "description" : "<p>Adding or removing your own images is as simple as adding or removing the <strong><code>&lt;li&gt;&lt;img src='...' /&gt;&lt;/li&gt;</code></strong> elements inside of the image gallery element (this is the same element that contains the <code>x-ref=&#x22;gallery&#x22;</code> reference).</p>"
     }
 }

elements/menubar.html

@@ -42,9 +42,9 @@
                             </div>
                             <div data-submenu="" class="absolute top-0 right-0 invisible mr-1 duration-200 ease-out translate-x-full opacity-0 group-hover:mr-0 group-hover:visible group-hover:opacity-100">
                                 <div class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 shadow-md animate-in slide-in-from-left-1 w-32">
-                                    <div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Email link</div>
-                                    <div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Messages</div>
-                                    <div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Notes</div>
+                                    <div @click="menuBarOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Email link</div>
+                                    <div @click="menuBarOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Messages</div>
+                                    <div @click="menuBarOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Notes</div>
                                 </div>
                             </div>
                         </button>
@@ -87,11 +87,11 @@
                             </div>
                             <div data-submenu="" class="absolute top-0 right-0 invisible mr-1 duration-200 ease-out translate-x-full opacity-0 group-hover:mr-0 group-hover:visible group-hover:opacity-100">
                                 <div class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 shadow-md animate-in slide-in-from-left-1 w-32">
-                                    <div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Search the web</div>
+                                    <div @click="menuBarOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Search the web</div>
                                     <div class="h-px my-1 -mx-1 bg-neutral-200"></div>
-                                    <div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Find...</div>
-                                    <div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Find Next</div>
-                                    <div @click="contextMenuOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Find Previous</div>
+                                    <div @click="menuBarOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Find...</div>
+                                    <div @click="menuBarOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Find Next</div>
+                                    <div @click="menuBarOpen=false" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">Find Previous</div>
                                 </div>
                             </div>
                         </button>
@@ -164,17 +164,15 @@
                         class="absolute top-0 z-50 min-w-[8rem] text-neutral-800 rounded-md border border-neutral-200/70 bg-white mt-10 text-sm p-1 shadow-md w-48 -translate-x-0.5"
                         x-cloak>
 
-                        <div x-data="{ contextMenuPeople: 'taylor' }" class="relative w-full">
-                            <button @click="contextMenuPeople='taylor'; contextMenuOpen=false" class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
-                                <span x-show="contextMenuPeople=='taylor'" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><svg 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" class="w-2 h-2 fill-current"><circle cx="12" cy="12" r="10"></circle></svg></span>
+                        <div class="relative w-full">
+                            <button @click="menuBarOpen=false" class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
+                                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><svg 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" class="w-2 h-2 fill-current"><circle cx="12" cy="12" r="10"></circle></svg></span>
                                 <span>Taylor Otwell</span>
                             </button>
-                            <button @click="contextMenuPeople='adam'; contextMenuOpen=false" class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
-                                <span x-show="contextMenuPeople=='adam'" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><svg 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" class="w-2 h-2 fill-current"><circle cx="12" cy="12" r="10"></circle></svg></span>
+                            <button @click="menuBarOpen=false" class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
                                 <span>Adam Wathan</span>
                             </button>
-                            <button @click="contextMenuPeople='caleb'; contextMenuOpen=false" class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
-                                <span x-show="contextMenuPeople=='caleb'" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"><svg 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" class="w-2 h-2 fill-current"><circle cx="12" cy="12" r="10"></circle></svg></span>
+                            <button @click="menuBarOpen=false" class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50">
                                 <span>Caleb Porzio</span>
                             </button>
                         </div>

elements/menubar.json

@@ -0,0 +1,10 @@
+{
+    "data" : {
+        "menuBarOpen" : "A boolean value that signifies whether the menu bar is opened or closed.",
+        "menuBarMenu" : "The menu bar that is currently opened. (example: 'file', 'edit', etc.)"
+    },
+    "alert_notification" : {
+        "title" : "Create your own menu",
+        "description" : "You can define your own menu by duplicating one of the existing menus and changing the name. You can then add your own menu items."
+    }
+}

elements/modal.json

@@ -0,0 +1,9 @@
+{
+    "data" : {
+        "modalOpen" : "A boolean value that will toggle the modal open or close."
+    },
+    "alert_notification" : {
+        "title" : "Alpine Teleport Directive",
+        "description" : "This element uses the <a href=\"https://alpinejs.dev/directives/teleport\" target=\"_blank\" class=\"underline\">AlpineJS teleport directive</a>, which will teleport the Modal element to be a child of the body element. This allows the modal to be full-screen and prevents any display issues with its parent elements."
+    }
+}

elements/navigation-menu.html

@@ -1,8 +1,8 @@
 <nav x-data="{
         navigationMenuOpen: false,
-        navigationMenuCloseTimeout: null,
-        navibationMenuCloseDelay: 300,
         navigationMenu: '',
+        navibationMenuCloseDelay: 200,
+        navigationMenuCloseTimeout: null,
         navigationMenuLeave() {
             let that = this;
             this.navigationMenuCloseTimeout = setTimeout(() => {

elements/navigation-menu.json

@@ -0,0 +1,12 @@
+{
+    "data" : {
+        "navigationMenuOpen" : "A boolean value that signifies whether the menu is opened or closed.",
+        "navigationMenu" : "The menu that is currently opened. (example: 'getting-started', 'learn-more', etc.)",
+        "navibationMenuCloseDelay" : "The delay in milliseconds before the menu closes after the mouse leaves the menu.",
+        "navigationMenuCloseTimeout" : "The timeout for the menu mouse leave event, leave this set to null.",
+        "navigationMenuLeave()" : "This method will trigger the menu to close after the mouse leaves.",
+        "navigationMenuReposition(navElement)" : "This method will position the menu to be centered aligned to the navigation item that is hovered.",
+        "navigationMenuClearCloseTimeout()" : "This method will clear the close timeout for the menu. This might occur if the user hovers back over a navigation item.",
+        "navigationMenuClose()" : "This method will close the menu by setting navigationMenuOpen to false, and clearing the value of navigationMenu."
+    }
+}

elements/popover.html

@@ -1,18 +1,19 @@
 <div x-data="{
         popoverOpen: false,
-        popoverHeight: 0,
+        popoverArrow: true,
         popoverPosition: 'bottom',
+        popoverHeight: 0,
         popoverOffset: 8,
-        popoverArrow: true,
         popoverHeightCalculate() {
             this.$refs.popover.classList.add('invisible'); 
             this.popoverOpen=true; 
             let that=this;
             $nextTick(function(){ 
-                that.popoverHeight = that.$refs.popover.offsetHeight; 
+                that.popoverHeight = that.$refs.popover.offsetHeight;
                 that.popoverOpen=false; 
                 that.$refs.popover.classList.remove('invisible');
                 that.$refs.popoverInner.setAttribute('x-transition', '');
+                that.popoverPositionCalculate();
             });
         },
         popoverPositionCalculate(){
@@ -29,18 +30,18 @@
             popoverPositionCalculate();
         });
         $watch('popoverOpen', function(value){
-            if(value){ popoverPositionCalculate(); }
+            if(value){ popoverPositionCalculate(); document.getElementById('width').focus();  }
         });
     "
     class="relative">
 
-    <button x-ref="popoverButton" @click="popoverOpen=!popoverOpen" class="flex items-center justify-center w-10 h-10 bg-white border rounded-full shadow-sm cursor-pointer hover:bg-neutral-100 active:bg-white border-neutral-200/70">
+    <button x-ref="popoverButton" @click="popoverOpen=!popoverOpen" class="flex items-center justify-center w-10 h-10 bg-white border rounded-full shadow-sm cursor-pointer hover:bg-neutral-100 focus-visible:ring-gray-400 focus-visible:ring-2 focus-visible:outline-none active:bg-white border-neutral-200/70">
         <svg class="w-4 h-4" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 3C4.67157 3 4 3.67157 4 4.5C4 5.32843 4.67157 6 5.5 6C6.32843 6 7 5.32843 7 4.5C7 3.67157 6.32843 3 5.5 3ZM3 5C3.01671 5 3.03323 4.99918 3.04952 4.99758C3.28022 6.1399 4.28967 7 5.5 7C6.71033 7 7.71978 6.1399 7.95048 4.99758C7.96677 4.99918 7.98329 5 8 5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H8C7.98329 4 7.96677 4.00082 7.95048 4.00242C7.71978 2.86009 6.71033 2 5.5 2C4.28967 2 3.28022 2.86009 3.04952 4.00242C3.03323 4.00082 3.01671 4 3 4H1.5C1.22386 4 1 4.22386 1 4.5C1 4.77614 1.22386 5 1.5 5H3ZM11.9505 10.9976C11.7198 12.1399 10.7103 13 9.5 13C8.28967 13 7.28022 12.1399 7.04952 10.9976C7.03323 10.9992 7.01671 11 7 11H1.5C1.22386 11 1 10.7761 1 10.5C1 10.2239 1.22386 10 1.5 10H7C7.01671 10 7.03323 10.0008 7.04952 10.0024C7.28022 8.8601 8.28967 8 9.5 8C10.7103 8 11.7198 8.8601 11.9505 10.0024C11.9668 10.0008 11.9833 10 12 10H13.5C13.7761 10 14 10.2239 14 10.5C14 10.7761 13.7761 11 13.5 11H12C11.9833 11 11.9668 10.9992 11.9505 10.9976ZM8 10.5C8 9.67157 8.67157 9 9.5 9C10.3284 9 11 9.67157 11 10.5C11 11.3284 10.3284 12 9.5 12C8.67157 12 8 11.3284 8 10.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
     </button>
 
     <div x-ref="popover"
         x-show="popoverOpen"
-        x-init="popoverHeightCalculate()"
+        x-init="setTimeout(function(){ popoverHeightCalculate(); }, 100);"
         x-trap.inert="popoverOpen"
         @click.away="popoverOpen=false;"
         @keydown.escape.window="popoverOpen=false"

elements/popover.json

@@ -0,0 +1,15 @@
+{
+    "data" : {
+        "popoverOpen" : "A boolean value that will toggle the popover open or close.",
+        "popoverArrow": "A boolean value that will show or hide the popover arrow",
+        "popoverPosition" : "A value that will indicate whether the popover should be at the bottom or top.",
+        "popoverHeight" : "The height of the popover. This will be calculated on initialize.",
+        "popoverOffset" : "An offset value in pixels that will be applied to the popover position.",
+        "popoverHeightCalculate()" : "A method that will calculate the height of the popover.",
+        "popoverPositionCalculate()" : "A method that will calculate whether the popover should be at top or bottom."
+    },
+    "alert_notification" : {
+        "title" : "Alpine Focus Plugin",
+        "description" : "This element uses the <a href=\"https://alpinejs.dev/plugins/focus\" target=\"_blank\" class=\"underline\">AlpineJS focus plug-in</a>, which will trap the focus inside the popover when opened and return focus to the trigger when closed."
+    }
+}

elements/radio-group.json

@@ -0,0 +1,6 @@
+{
+    "data" : {
+        "radioGroupSelectedValue" : "The value of the current selected radio button.",
+        "radioGroupOptions": "An array of radio group options containing the title, description, and value."
+    }
+}