tgrosinger/pines
1
0
Fork 0
Code

Adding more content for the pines UI library

Browse Source
This commit is contained in:
Tony Lea 2023-06-19 11:48:13 -04:00
parent 7c80324640
commit a4696a0c22
9 changed files with 74 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
data.json
View File

@ -13,7 +13,6 @@
"copy-to-clipboard" : "Copy to Clipboard",
"date-picker" : "Date Picker",
"dropdown-menu" : "Dropdown Menu",
"full-screen-menu" : "Full Screen Menu",
"full-screen-modal" : "Full Screen Modal",
"hover-card" : "Hover Card",
"image-gallery" : "Image Gallery",
@ -53,7 +52,6 @@
"copy-to-clipboard" : "An element that will copy text to clipboard when clicked.",
"date-picker" : "A date picker element that can be used to select a date.",
"dropdown-menu": "A simple dropdown menu element.",
"full-screen-menu" : "A full screen menu element.",
"full-screen-modal" : "A full screen modal element.",
"hover-card" : "A hover element card preview.",
"image-gallery" : "A simple image gallery element for showing images.",
@ -93,7 +91,6 @@
"copy-to-clipboard" : "w-full p-10 box-border flex items-center justify-center",
"date-picker" : "w-full p-10 box-border flex items-center justify-center",
"dropdown-menu" : "w-full p-10 box-border flex items-center justify-center",
"full-screen-menu" : "w-full p-10 box-border flex items-center justify-center",
"full-screen-modal" : "w-full p-10 box-border flex items-center justify-center",
"hover-card" : "w-full p-10 box-border flex items-center justify-center",
"image-gallery" : "w-full p-10 box-border flex items-center justify-center",

7
elements/command.json
View File

@ -16,8 +16,11 @@
"commandCategoryCapitalize(string)" : "Simple helper function to capitalize the category name.",
"commandItemsReorganize()" : "This will re-organize the commandItems on init. It will flatten them into a single dimensional array. This makes it easier to filter and iterate over the items."
},
"alert_notification" : {
"title" : "Adding items to the command",
"description" : "In order to make use of this component you can simply add your items inside of the <strong>commandItems</strong> array. Each item will have a title, value, icon, and default value. All items will be searchable, but only default items will be visible with an empty search. Learn how to get the selected item below."
},
"additional" : {
"description" : "<p>Inside the <strong>init</strong> method is a watcher for the <strong>commandItemSelected</strong> which console.logs the selected item. Replace the console.log with your own functionality you want to use when a user selects that item.</p>",
"note" : "To use this component, all you need do is add your own commandItems and add the desired functionality for when a user selects the item."
"description" : "<p>Inside the <strong>init</strong> method is a watcher for the <strong>commandItemSelected</strong> which console.logs the selected item. Replace the console.log with your own functionality you want to use when a user selects that item.</p>"
}
}

9
elements/full-screen-menu.json Normal file
View File

@ -0,0 +1,9 @@
{
"data" : {
"previewFullScreenMenu (for demo)" : "This is a preview of the full screen menu whether it's visible or not and is really only used for the purposes of this demo.",
"previewFullScreenMenu" : "This will toggle the fullscreen menu to be open or closed."
},
"additional" : {
"description" : "<p>You will most likely only want the content inside of the <code>&lt;template x-teleport=&#x22;body&#x22;&gt;</code> section. The other content outside of this element are for demo purposes.</p>"
}
}

8
elements/full-screen-modal.json Normal file
View File

@ -0,0 +1,8 @@
{
"data" : {
"fullscreenModal" : "A boolean value that will toggle the fullscreen modal to be open or closed."
},
"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>"
}
}

4
elements/hover-card.html
View File

@ -1,9 +1,9 @@
<div x-data="{
hoverCardHovered: false,
hoverCardTimout: null,
hoverCardLeaveTimeout: null,
hoverCardDelay: 600,
hoverCardLeaveDelay: 500,
hoverCardTimout: null,
hoverCardLeaveTimeout: null,
hoverCardEnter () {
clearTimeout(this.hoverCardLeaveTimeout);
if(this.hoverCardHovered) return;

11
elements/hover-card.json Normal file
View File

@ -0,0 +1,11 @@
{
"data" : {
"hoverCardHovered" : "A boolean value that will show or hide the card.",
"hoverCardDelay" : "When the user hovers, how long (in milliseconds) should the hover card be shown",
"hoverCardLeaveDelay" : "When the users mouse leaves, how long (in milliseconds) should the hover card be hidden",
"hoverCardTimout" : "The timeout for the hover event, leave this set to null.",
"hoverCardLeaveTimeout" : "The timeout for the mouse leave event, leave this set to null.",
"hoverCardEnter()" : "The method that handles the hover event.",
"hoverCardLeave()" : "The method that handles the mouse leave event."
}
}

42
elements/image-gallery.html
View File

@ -1,32 +1,32 @@
<div x-data="{
imageGalleryShow: false,
activeImageUrl: null,
index: null,
imageGalleryOpened: false,
imageGalleryActiveUrl: null,
imageGalleryImageIndex: null,
imageGalleryOpen(event) {
this.index = event.target.dataset.index;
this.activeImageUrl = event.target.src;
this.imageGalleryShow = true;
this.imageGalleryImageIndex = event.target.dataset.index;
this.imageGalleryActiveUrl = event.target.src;
this.imageGalleryOpened = true;
},
imageGalleryClose() {
this.imageGalleryShow = false;
setTimeout(() => this.activeImageUrl = null, 300);
this.imageGalleryOpened = false;
setTimeout(() => this.imageGalleryActiveUrl = null, 300);
},
imageGalleryNext(){
if(this.index == 10){
this.index = 1;
if(this.imageGalleryImageIndex == this.$refs.gallery.childElementCount){
this.imageGalleryImageIndex = 1;
} else {
this.index = parseInt(this.index) + 1;
this.imageGalleryImageIndex = parseInt(this.imageGalleryImageIndex) + 1;
}
this.activeImageUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.index + '\']').src;
this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
},
imageGalleryPrev() {
if(this.index == 1){
this.index = 10;
if(this.imageGalleryImageIndex == 1){
this.imageGalleryImageIndex = this.$refs.gallery.childElementCount;
} else {
this.index = parseInt(this.index) - 1;
this.imageGalleryImageIndex = parseInt(this.imageGalleryImageIndex) - 1;
}
this.activeImageUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.index + '\']').src;
this.imageGalleryActiveUrl = this.$refs.gallery.querySelector('[data-index=\'' + this.imageGalleryImageIndex + '\']').src;
}
}"
@ -52,31 +52,31 @@
<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>
<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-show="imageGalleryOpened"
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"
x-trap.inert.noscroll="imageGalleryOpened"
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-show="imageGalleryOpened"
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;">
class="object-contain object-center w-full h-full select-none cursor-zoom-out" :src="imageGalleryActiveUrl" 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>

16
elements/image-gallery.json Normal file
View File

@ -0,0 +1,16 @@
{
"data" : {
"imageGalleryOpened" : "A boolean value to determine if the image gallery is opened or closed.",
"imageGalleryActiveUrl" : "The src URL of the image that is currently active.",
"imageGalleryImageIndex" : "When the image gallery is initialized we'll add an data-index incrementor (1, 2, 3, ... etc.) to all the images in the gallery.",
"imageGalleryOpen(event)" : "The method that can be called to open the image gallery.",
"imageGalleryClose()" : "The method that can be called to close the image gallery.",
"imageGalleryNext()" : "The method that will be called to load the next image in the gallery.",
"imageGalleryPrev()" : "The method that will be called to load the previous image in the gallery."
},
"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."
}
}

4
elements/radio-group.html
View File

@ -20,8 +20,8 @@
}" 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">
<input type="radio" name="radio-group" :value="option.value" class="text-gray-900 translate-y-px focus:ring-gray-700" />
<span class="relative flex flex-col text-left 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>