tgrosinger/pines
1
0
Fork 0
Code

Adding latest content

Browse Source
This commit is contained in:
Tony Lea 2023-06-20 09:56:18 -04:00
parent a4696a0c22
commit a66b70ac94
10 changed files with 83 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
elements/full-screen-modal.json
View File

@ -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>"
}

7
elements/image-gallery.json
View File

@ -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>"
}
}

26
elements/menubar.html
View File

@ -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>

10
elements/menubar.json Normal file
View File

@ -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."
}
}

9
elements/modal.json Normal file
View File

@ -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."
}
}

4
elements/navigation-menu.html
View File

@ -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(() => {

12
elements/navigation-menu.json Normal file
View File

@ -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."
}
}

15
elements/popover.html
View File

@ -1,18 +1,19 @@
<div x-data="{
popoverOpen: false,
popoverHeight: 0,
popoverPosition: 'bottom',
popoverOffset: 8,
popoverArrow: true,
popoverPosition: 'bottom',
popoverHeight: 0,
popoverOffset: 8,
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"

15
elements/popover.json Normal file
View File

@ -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."
}
}

6
elements/radio-group.json Normal file
View File

@ -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."
}
}