tgrosinger/pines
1
0
Fork 0
Code

Adding some more content to drop

Browse Source
This commit is contained in:
Tony Lea 2023-06-17 19:30:04 -04:00
parent da13765e46
commit 047480ab2f
9 changed files with 85 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
elements/command-examples/example-01.html
View File

@ -124,6 +124,11 @@
commandItemsFiltered = commandItems;
commandItemActive=commandItems[0];
$watch('commandSearch', value => commandSearchItems());
$watch('commandItemSelected', function(item){
if(item){
console.log('item:', item);
}
});
"
@keydown.down="event.preventDefault(); commandItemActiveNext();"
@keydown.up="event.preventDefault(); commandItemActivePrevious()"
@ -146,7 +151,7 @@
<template x-if="(item.default && commandSearchIsEmpty()) || !commandSearchIsEmpty()">
<div class="px-1">
<div :id="item.value + '-' + commandId" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" @mousemove="commandItemActive=item" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<div :id="item.value + '-' + commandId" @click="commandItemSelected=item" @mousemove="commandItemActive=item" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<span x-html="item.icon"></span>
<span x-text="item.title"></span>
<template x-if="item.right">

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

@ -161,6 +161,11 @@
commandItemsFiltered = commandItems;
commandItemActive=commandItems[0];
$watch('commandSearch', value => commandSearchItems());
$watch('commandItemSelected', function(item){
if(item){
console.log('item:', item);
}
});
"
@keydown.down="event.preventDefault(); commandItemActiveNext();"
@keydown.up="event.preventDefault(); commandItemActivePrevious()"
@ -184,7 +189,7 @@
<template x-if="(item.default && commandSearchIsEmpty()) || !commandSearchIsEmpty()">
<div class="px-1">
<div :id="item.value + '-' + commandId" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" @mousemove="commandItemActive=item" class="relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<div :id="item.value + '-' + commandId" @click="commandItemSelected=item" @mousemove="commandItemActive=item" :class="{ 'bg-blue-600 text-white' : commandItemIsActive(item) }" class="relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<span x-html="item.icon"></span>
<span x-text="item.title"></span>
<template x-if="item.right">

7
elements/command.html
View File

@ -123,6 +123,11 @@
commandItemsReorganize();
commandSearchItems();
$watch('commandSearch', value => commandSearchItems());
$watch('commandItemSelected', function(item){
if(item){
console.log('item:', item);
}
});
"
@keydown.down="event.preventDefault(); commandItemActiveNext();"
@keydown.up="event.preventDefault(); commandItemActivePrevious()"
@ -145,7 +150,7 @@
<template x-if="(item.default && commandSearchIsEmpty()) || !commandSearchIsEmpty()">
<div class="px-1">
<div :id="item.value + '-' + commandId" :class="{ 'bg-neutral-100 text-gray-900' : commandItemIsActive(item) }" @mousemove="commandItemActive=item" class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<div :id="item.value + '-' + commandId" @click="commandItemSelected=item" @mousemove="commandItemActive=item" :class="{ 'bg-neutral-100 text-gray-900' : commandItemIsActive(item) }" class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
<span x-html="item.icon"></span>
<span x-text="item.title"></span>
<template x-if="item.right">

23
elements/command.json Normal file
View File

@ -0,0 +1,23 @@
{
"data" : {
"commandItems" : "The items inside the command, each object will contain a category of items. Each item includes a title, value, icon, and default value. All items will be searchable, but only default items will be visible with an empty search.",
"commandItemsFiltered" : "A filtered array of all the items. Updated on initialize and as the user types in the search field.",
"commandItemActive" : "A command item being hovered by the mouse or highlighted by the keyboard.",
"commandItemSelected" : "A command item that has been selected by the user via mouse click or enter on keyboard.",
"commandId" : "Each item will have a unique ID, which is used to scroll to element in the event of an overflow of items in the command menu.",
"commandSearch" : "The search term entered by the user.",
"commandSearchIsEmpty()" : "A boolean value indicating if the search field is empty or not.",
"commandItemIsActive(item)" : "A boolean value indicating if the command item is active or not.",
"commandItemActiveNext()" : "Based on the current active item, this will be the next item in the list.",
"commandItemActivePrevious()" : "Based on the current active item, this will be the previous item in the list.",
"commandScrollToActiveItem()" : "If there are more commands than can fit in the menu, this will scroll the menu to the active item.",
"commandSearchItems()" : "This will filter the command items based on the search term.",
"commandShowCategory(item, index)" : "When the user searches, this function will determine if the filtered items contain a category that should be shown.",
"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."
},
"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."
}
}

7
elements/copy-to-clipboard.json Normal file
View File

@ -0,0 +1,7 @@
{
"data" : {
"copyText" : "The text to be copied to the clipboard",
"copyNotification" : "Boolean value that will show whether or not the text has been copied",
"copyToClipboard()" : "The function that will copy the value inside of copyText to the clipboard"
}
}

34
elements/dropdown-menu.html
View File

@ -1,9 +1,33 @@
<div x-data="{
dropdownOpen: false
dropdownOpen: false,
dropdownPosition: 'bottom',
dropdownPositionUpdate(){
if(!this.dropdownOpen){
let that = this;
this.dropdownOpen = true;
this.$refs.dropdown.classList.add('invisible');
setTimeout(function(){
that.dropdownPositionUpdate();
}, 100);
return;
}
dropdownBottomPos = this.$refs.dropdownButton.getBoundingClientRect().top + this.$refs.dropdownButton.offsetHeight + parseInt(window.getComputedStyle(this.$refs.dropdown).maxHeight);
if(window.innerHeight < dropdownBottomPos){
this.dropdownPosition = 'top';
} else {
this.dropdownPosition = 'bottom';
}
this.dropdownOpen = false;
this.$refs.dropdown.classList.remove('invisible');
}
}"
x-init="
dropdownPositionUpdate();
window.addEventListener('resize', (event) => { dropdownPositionUpdate(); });
"
class="relative">
<button @click="dropdownOpen=true" class="inline-flex items-center justify-center h-12 py-2 pl-3 pr-12 text-sm font-medium transition-colors bg-white border rounded-md text-neutral-700 hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<button @click="dropdownOpen=true" x-ref="dropdownButton" class="inline-flex items-center justify-center h-12 py-2 pl-3 pr-12 text-sm font-medium transition-colors bg-white border rounded-md text-neutral-700 hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
<img src="https://cdn.devdojo.com/images/may2023/adam.jpeg" class="object-cover w-8 h-8 border rounded-full border-neutral-200" />
<span class="flex flex-col items-start flex-shrink-0 h-full ml-2 leading-none translate-y-px">
<span>Adam Wathan</span>
@ -12,12 +36,14 @@
<svg class="absolute right-0 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" /></svg>
</button>
<div x-show="dropdownOpen"
<div x-show="dropdownOpen"
x-ref="dropdown"
@click.away="dropdownOpen=false"
x-transition:enter="ease-out duration-200"
x-transition:enter-start="-translate-y-2"
x-transition:enter-end="translate-y-0"
class="absolute top-0 z-50 w-56 mt-12 -translate-x-1/2 left-1/2"
:class="{ 'top-0' : dropdownPosition == 'top', 'bottom-0' : dropdownPosition == 'bottom' }"
class="absolute top-0 z-50 invisible w-56 mt-12 -translate-x-1/2 left-1/2"
x-cloak>
<div class="p-1 mt-1 bg-white border rounded-md shadow-md border-neutral-200/70 text-neutral-700">
<div class="px-2 py-1.5 text-sm font-semibold">My Account</div>

5
elements/dropdown-menu.json Normal file
View File

@ -0,0 +1,5 @@
{
"data" : {
"dropdownOpen" : "Boolean value that will toggle whether or not the dropdown is open"
}
}

2
getting-started/how-to-use.html
View File

@ -48,4 +48,4 @@
<div class="text-sm [&_p]:leading-relaxed">By doing this, you can include multiple tooltips in your application and modify the appearance and functionionality in one place.</div>
</div>
<p class="text-gray-500">In the next section you will learn how simple it can be to extract an element into its own plugin.</p>
<p class="text-gray-500">In the next section you will learn how to extract an element into its own plugin.</p>

2
getting-started/introduction.html
View File

@ -1,7 +1,7 @@
<div class="not-prose">
<h2 class="pt-0 mb-2 text-3xl font-bold tracking-tight select-none not-prose custom-font">Introduction</h2>
</div>
<p class="text-gray-500">The team over here at <a href="https://devdojo.com" class="relative text-indigo-600 group"><span>DevDojo</span><span class="absolute bottom-0 left-0 w-0 h-px duration-300 ease-out bg-indigo-500 group-hover:w-full"></span></a> are huge fans of Alpine and Tailwind 🤩 We love it so much that we are open-sourcing our library of UI elements that we've been crafting over the years.</p>
<p class="text-gray-500">The team over here at <a href="https://devdojo.com" class="relative text-indigo-600 group"><span>DevDojo</span><span class="absolute bottom-0 left-0 w-0 h-px duration-300 ease-out bg-indigo-500 group-hover:w-full"></span></a> are huge fans of Alpine and Tailwind 🤩 We love it so much that we are fine-tuning and open-sourcing our library of UI elements that we've been crafting over the years.</p>
<hr>