Adding a few more elements and making updates
This commit is contained in:
Tony Lea
parent
3d96fdc80e
commit
dbc7633b8a
84
data.json
84
data.json
@ -8,33 +8,39 @@
|
||||
"button" : "Button",
|
||||
"card" : "Card",
|
||||
"checkbox" : "Checkbox",
|
||||
"command" : "Command",
|
||||
"context-menu" : "Context Menu",
|
||||
"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",
|
||||
"menubar" : "Menu Bar",
|
||||
"modal" : "Modal",
|
||||
"navigation-menu" : "Navigation Menu",
|
||||
"pagination" : "Pagination",
|
||||
"popover" : "Popover",
|
||||
"progress" : "Progress",
|
||||
"quotes" : "Quotes",
|
||||
"radio-group": "Radio Group",
|
||||
"range-slider": "Range Slider",
|
||||
"select" : "Select",
|
||||
"slide-over" : "Slide-over",
|
||||
"switch" : "Switch",
|
||||
"table" : "Table",
|
||||
"table-of-contents" : "Table of Contents",
|
||||
"tabs" : "Tabs",
|
||||
"text-animation" : "Text Animation",
|
||||
"text-input" : "Text Input",
|
||||
"textarea" : "Textarea",
|
||||
"textarea-auto-resize" : "Textarea (auto-resize)",
|
||||
"tooltip" : "Tooltip",
|
||||
"typing-effect" : "Typing Effect",
|
||||
"video" : "Video"
|
||||
},
|
||||
"description" : {
|
||||
"accordion" : "A simple accordion element that can be used to show and hide content.",
|
||||
"accordion" : "An accordion element to show and hide content.",
|
||||
"alert" : "An alert element that is used to draw attention.",
|
||||
"badge" : "A badge element used to highlight new or updated content, indicate status, or convey additional information.",
|
||||
"banner" : "Call to action banner that stick to the top or bottom of the page.",
|
||||
@ -42,22 +48,31 @@
|
||||
"button" : "A button element that can be used to trigger an action.",
|
||||
"card" : "A card element that can be used to display content.",
|
||||
"checkbox" : "A checkbox element that can be used to select one or more options.",
|
||||
"command" : "A simple and searchable command menu element.",
|
||||
"context-menu" : "A context menu element that can be used to show a menu of actions for functions.",
|
||||
"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.",
|
||||
"modal" : "A simple modal element that can be used to show and hide content.",
|
||||
"menubar" : "A visually persistent menu common in desktop applications, offering convenient access to a consistent set of commands.",
|
||||
"navigation-menu" : "A simple navigation menu element",
|
||||
"pagination" : "A pagination element that can be used to navigate through pages of content.",
|
||||
"popover" : "A popover element that can display rich content in a portal, triggered by a button.",
|
||||
"progress" : "A progress element that can be used to show the progress of a task.",
|
||||
"quotes" : "A blockquote element that can be used to display a quote.",
|
||||
"radio-group" : "A radio selection element that can be used to select one option.",
|
||||
"range-slider" : "A range slider element that uses the input type range.",
|
||||
"select" : "A custom select input element that can be used to select an option.",
|
||||
"slide-over" : "A slide-over element that can be used to show content from the side.",
|
||||
"switch" : "A simple toggle switch element to enable or disable an option.",
|
||||
"tabs" : "A tab element that can be used to show and hide content.",
|
||||
"table-of-contents" : "This element will generate a TOC from an HTML string.",
|
||||
"table" : "A table element for displaying tabular data.",
|
||||
"textarea" : "A textarea form input element for collecting long user info.",
|
||||
"textarea-auto-resize" : "A textarea form input element that automatically resizes to fit the content.",
|
||||
"text-animation" : "Simple text animation elements.",
|
||||
"text-input" : "A form input element that can be used to collect user input.",
|
||||
"tooltip": "A simple tooltip element that can be used to show additional information.",
|
||||
@ -65,34 +80,42 @@
|
||||
"video" : "A customized video element that can be used to display a video."
|
||||
},
|
||||
"container" : {
|
||||
"accordion" : "p-10 box-border flex items-start justify-start max-w-lg mx-auto",
|
||||
"alert" : "p-10 box-border flex flex-col space-y-5 items-center justify-center max-w-3xl mx-auto",
|
||||
"badge" : "p-10 box-border flex items-center justify-center space-x-2",
|
||||
"banner" : "relative overflow-hidden",
|
||||
"breadcrumbs" : "p-10 box-border flex items-center justify-center mx-auto",
|
||||
"button" : "p-10 box-border flex space-x-3 items-center justify-center mx-auto",
|
||||
"card" : "p-10 box-border flex items-center justify-center mx-auto",
|
||||
"checkbox" : "p-10 box-border flex items-center justify-center mx-auto",
|
||||
"context-menu" : "p-10 box-border flex items-center justify-center",
|
||||
"copy-to-clipboard" : "p-10 box-border flex items-center justify-center",
|
||||
"date-picker" : "p-10 box-border flex items-center justify-center",
|
||||
"dropdown-menu" : "p-10 box-border flex items-center justify-center",
|
||||
"full-screen-menu" : "p-10 box-border flex items-center justify-center",
|
||||
"full-screen-modal" : "rounded-md overflow-hidden",
|
||||
"modal" : "p-10 box-border flex items-center justify-center",
|
||||
"menubar" : "p-10 box-border flex items-center justify-center",
|
||||
"navigation-menu" : "p-10 box-border flex items-center justify-center",
|
||||
"pagination" : "flex items-end justify-center",
|
||||
"popover" : "p-10 box-border flex items-center justify-center",
|
||||
"accordion" : "w-full p-10 box-border flex items-start justify-start max-w-lg mx-auto",
|
||||
"alert" : "w-full p-10 box-border flex flex-col space-y-5 items-center justify-center max-w-3xl mx-auto",
|
||||
"badge" : "w-full p-10 box-border flex items-center justify-center space-x-2",
|
||||
"banner" : "w-full relative overflow-hidden",
|
||||
"breadcrumbs" : "w-full p-10 box-border flex items-center justify-center mx-auto",
|
||||
"button" : "w-full p-10 box-border flex space-x-3 items-center justify-center mx-auto",
|
||||
"card" : "w-full p-10 box-border flex items-center justify-center mx-auto",
|
||||
"checkbox" : "w-full p-10 box-border flex items-center justify-center mx-auto",
|
||||
"command" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"context-menu" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"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",
|
||||
"modal" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"menubar" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"navigation-menu" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"pagination" : "w-full flex items-end justify-center",
|
||||
"popover" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"progress" : "w-full max-w-sm mx-auto p-10 box-border flex items-center justify-center",
|
||||
"quotes" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"radio-group" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"range-slider" : "p-10 box-border flex items-center justify-center",
|
||||
"select" : "p-10 box-border flex items-center justify-center",
|
||||
"switch" : "p-10 box-border flex items-center justify-center",
|
||||
"tabs" : "p-10 box-border flex items-center justify-center",
|
||||
"table-of-contents" : "p-10 box-border flex items-center justify-center",
|
||||
"text-animation" : "py-10 box-border flex items-center justify-center",
|
||||
"text-input" : "py-10 px-48 box-border flex items-center justify-center",
|
||||
"tooltip" : "p-10 box-border flex items-center justify-center",
|
||||
"typing-effect" : "p-10 flex items-center justify-center",
|
||||
"select" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"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",
|
||||
"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",
|
||||
"text-input" : "w-full py-10 px-48 box-border flex items-center justify-center",
|
||||
"tooltip" : "w-full p-10 box-border flex items-center justify-center",
|
||||
"typing-effect" : "w-full p-10 flex items-center justify-center",
|
||||
"video" : "py-10 w-[640px] mx-auto box-border flex items-center justify-center"
|
||||
},
|
||||
"tailwind_only" : [
|
||||
@ -102,6 +125,7 @@
|
||||
"button",
|
||||
"card",
|
||||
"checkbox",
|
||||
"quotes",
|
||||
"range-slider",
|
||||
"table",
|
||||
"text-input",
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
"activeAccordion" : "This will contain the string of the active accordion item (example: 'accordion-1')",
|
||||
"setActiveAccordion(id)" : "This will set the active accordion with the associated id"
|
||||
},
|
||||
"additional_info" : "",
|
||||
"explanation" : "The accordion UI element on a website is like a digital filing cabinet, revealing and concealing sections of information with a click, granting users the power to navigate the web's vastness while maintaining order and harmony.",
|
||||
"alert_notification" : {
|
||||
"title" : "Not seeing the animation?",
|
||||
"description" : "We are using the <a href=\"https://alpinejs.dev/plugins/collapse\" target=\"_blank\" class=\"underline\">AlpineJS collapse plug-in</a> in this example. Simply, include it in your project and you will see the collapse plug-in in action."
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="flex items-center h-5">
|
||||
<input name="custom-checkbox" id="custom-checkbox" type="checkbox" class="hidden peer" required>
|
||||
<label for="custom-checkbox" class="peer-checked:[&_svg]:scale-100 text-sm font-medium text-neutral-600 peer-checked:text-blue-600 [&_svg]:scale-0 peer-checked:[&_.custom-checkbox]:border-blue-500 peer-checked:[&_.custom-checkbox]:bg-blue-500 select-none flex items-center space-x-2">
|
||||
<span class="flex items-center justify-center w-5 h-5 border-2 rounded-md custom-checkbox text-neutral-900">
|
||||
<span class="flex items-center justify-center w-5 h-5 border-2 rounded custom-checkbox text-neutral-900">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-3 h-3 text-white duration-300 ease-out">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
||||
</svg>
|
||||
|
||||
94
elements/combobox.html
Normal file
94
elements/combobox.html
Normal file
@ -0,0 +1,94 @@
|
||||
<div x-data="{
|
||||
selectedItem: '',
|
||||
selectableItems: [
|
||||
{
|
||||
title: 'Milk',
|
||||
value: 'milk',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Eggs',
|
||||
value: 'eggs',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Cheese',
|
||||
value: 'cheese',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Bread',
|
||||
value: 'bread',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Apples',
|
||||
value: 'apples',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Bananas',
|
||||
value: 'bananas',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Yogurt',
|
||||
value: 'yogurt',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Sugar',
|
||||
value: 'sugar',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Salt',
|
||||
value: 'salt',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Coffee',
|
||||
value: 'coffee',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
title: 'Tea',
|
||||
value: 'tea',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
selectableItemsOpen: false,
|
||||
}"
|
||||
class="relative w-64">
|
||||
|
||||
<button @click="selectableItemsOpen=!selectableItemsOpen" class="relative min-h-[38px] flex items-center justify-between w-full py-2 pl-3 pr-10 text-left bg-white border rounded-md shadow-sm cursor-default border-neutral-200/70 focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
|
||||
<span x-text="selectedItem ? selectedItem.title : 'Select Item'" class="truncate"></span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5 text-gray-400"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<ul x-show="selectableItemsOpen"
|
||||
@click.away="selectableItemsOpen = false"
|
||||
x-transition:enter="transition ease-out duration-50"
|
||||
x-transition:enter-start="opacity-0 -translate-y-1"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-out duration-50"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0 -translate-y-1"
|
||||
class="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
x-cloak>
|
||||
|
||||
<template x-for="item in selectableItems" :key="item.value">
|
||||
<li
|
||||
@click="selectedItem=item; selectableItemsOpen=false"
|
||||
:disabled="item-disabled"
|
||||
class="relative flex items-center h-full py-2 pl-8 text-gray-700 cursor-default select-none hover:bg-neutral-100 hover:text-gray-900">
|
||||
<svg x-show="selectedItem.value==item.value" class="absolute left-0 w-4 h-4 ml-2 stroke-current text-neutral-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span class="block font-medium truncate" x-text="item.title"></span>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
163
elements/command-examples/example-01.html
Normal file
163
elements/command-examples/example-01.html
Normal file
@ -0,0 +1,163 @@
|
||||
<div x-data="{
|
||||
commandItems: {
|
||||
suggestions : [
|
||||
{
|
||||
title: 'Calendar',
|
||||
value: 'calendar',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'18\' height=\'18\' x=\'3\' y=\'4\' rx=\'2\' ry=\'2\'></rect><line x1=\'16\' x2=\'16\' y1=\'2\' y2=\'6\'></line><line x1=\'8\' x2=\'8\' y1=\'2\' y2=\'6\'></line><line x1=\'3\' x2=\'21\' y1=\'10\' y2=\'10\'></line></svg>',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Search Emoji',
|
||||
value: 'emoji',
|
||||
icon: '<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-4 h-4 mr-2\'><circle cx=\'12\' cy=\'12\' r=\'10\'></circle><path d=\'M8 14s1.5 2 4 2 4-2 4-2\'></path><line x1=\'9\' x2=\'9.01\' y1=\'9\' y2=\'9\'></line><line x1=\'15\' x2=\'15.01\' y1=\'9\' y2=\'9\'></line></svg>',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Calculator',
|
||||
value: 'calculator',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'16\' height=\'20\' x=\'4\' y=\'2\' rx=\'2\'></rect><line x1=\'8\' x2=\'16\' y1=\'6\' y2=\'6\'></line><line x1=\'16\' x2=\'16\' y1=\'14\' y2=\'18\'></line><path d=\'M16 10h.01\'></path><path d=\'M12 10h.01\'></path><path d=\'M8 10h.01\'></path><path d=\'M12 14h.01\'></path><path d=\'M8 14h.01\'></path><path d=\'M12 18h.01\'></path><path d=\'M8 18h.01\'></path></svg>',
|
||||
default: true,
|
||||
}
|
||||
],
|
||||
settings: [
|
||||
{
|
||||
title: 'Profile',
|
||||
value: 'profile',
|
||||
icon: '<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-4 h-4 mr-2\'><path d=\'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\'></path><circle cx=\'12\' cy=\'7\' r=\'4\'></circle></svg>',
|
||||
right: '⌘P',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Billing',
|
||||
value: 'billing',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'20\' height=\'14\' x=\'2\' y=\'5\' rx=\'2\'></rect><line x1=\'2\' x2=\'22\' y1=\'10\' y2=\'10\'></line></svg>',
|
||||
right: '⌘B',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
value: 'settings',
|
||||
icon: '<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-4 h-4 mr-2\'><path d=\'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\'></path><circle cx=\'12\' cy=\'12\' r=\'3\'></circle></svg>',
|
||||
right: '⌘S',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Keyboard Settings',
|
||||
value: 'keyboard-settngs',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'20\' height=\'16\' x=\'2\' y=\'4\' rx=\'2\' ry=\'2\'></rect><path d=\'M6 8h.001\'></path><path d=\'M10 8h.001\'></path><path d=\'M14 8h.001\'></path><path d=\'M18 8h.001\'></path><path d=\'M8 12h.001\'></path><path d=\'M12 12h.001\'></path><path d=\'M16 12h.001\'></path><path d=\'M7 16h10\'></path></svg>',
|
||||
right: '⌘K',
|
||||
default: false,
|
||||
},
|
||||
]
|
||||
},
|
||||
commandItemsFiltered: [],
|
||||
commandItemActive: null,
|
||||
commandItemSelected: null,
|
||||
commandId: $id('command'),
|
||||
commandSearch: '',
|
||||
commandSearchIsEmpty() {
|
||||
return this.commandSearch.length == 0;
|
||||
},
|
||||
commandItemIsActive(item) {
|
||||
return this.commandItemActive && this.commandItemActive.value==item.value;
|
||||
},
|
||||
commandItemActiveNext(){
|
||||
let index = this.commandItemsFiltered.indexOf(this.commandItemActive);
|
||||
if(index < this.commandItemsFiltered.length-1){
|
||||
this.commandItemActive = this.commandItemsFiltered[index+1];
|
||||
this.commandScrollToActiveItem();
|
||||
}
|
||||
},
|
||||
commandItemActivePrevious(){
|
||||
let index = this.commandItemsFiltered.indexOf(this.commandItemActive);
|
||||
if(index > 0){
|
||||
this.commandItemActive = this.commandItemsFiltered[index-1];
|
||||
this.commandScrollToActiveItem();
|
||||
}
|
||||
},
|
||||
commandScrollToActiveItem(){
|
||||
if(this.commandItemActive){
|
||||
activeElement = document.getElementById(this.commandItemActive.value + '-' + this.commandId)
|
||||
if(!activeElement) return;
|
||||
|
||||
newScrollPos = (activeElement.offsetTop + activeElement.offsetHeight) - this.$refs.commandItemsList.offsetHeight;
|
||||
if(newScrollPos > 0){
|
||||
this.$refs.commandItemsList.scrollTop=newScrollPos;
|
||||
} else {
|
||||
this.$refs.commandItemsList.scrollTop=0;
|
||||
}
|
||||
}
|
||||
},
|
||||
commandSearchItems() {
|
||||
if(!this.commandSearchIsEmpty()){
|
||||
searchTerm = this.commandSearch.replace(/\*/g, '').toLowerCase();
|
||||
this.commandItemsFiltered = this.commandItems.filter(item => item.title.toLowerCase().startsWith(searchTerm));
|
||||
|
||||
this.commandScrollToActiveItem();
|
||||
} else {
|
||||
this.commandItemsFiltered = this.commandItems.filter(item => item.default);
|
||||
}
|
||||
this.commandItemActive = this.commandItemsFiltered[0];
|
||||
},
|
||||
commandShowCategory(item, index){
|
||||
if(index == 0) return true;
|
||||
if(typeof this.commandItems[index-1] === 'undefined') return false;
|
||||
return item.category != this.commandItems[index-1].category;
|
||||
},
|
||||
commandCategoryCapitalize(string){
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
commandItemsReorganize(){
|
||||
commandItemsOriginal = this.commandItems;
|
||||
keys = Object.keys(this.commandItems);
|
||||
this.commandItems = [];
|
||||
keys.forEach((key, index) => {
|
||||
for(i=0; i<commandItemsOriginal[key].length; i++){
|
||||
commandItemsOriginal[key][i].category = key;
|
||||
this.commandItems.push( commandItemsOriginal[key][i] );
|
||||
}
|
||||
});
|
||||
}
|
||||
}" x-init="
|
||||
commandItemsReorganize();
|
||||
commandItemsFiltered = commandItems;
|
||||
commandItemActive=commandItems[0];
|
||||
$watch('commandSearch', value => commandSearchItems());
|
||||
"
|
||||
@keydown.down="event.preventDefault(); commandItemActiveNext();"
|
||||
@keydown.up="event.preventDefault(); commandItemActivePrevious()"
|
||||
@keydown.enter="commandItemSelected=commandItemActive;"
|
||||
class="flex min-h-[370px] justify-center w-full max-w-xl items-start" x-cloak>
|
||||
<div class="flex flex-col w-full h-full overflow-hidden bg-white border rounded-lg shadow-md">
|
||||
<div class="flex items-center px-3 border-b">
|
||||
<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">
|
||||
</div>
|
||||
<div x-ref="commandItemsList" class="max-h-[320px] overflow-y-auto overflow-x-hidden">
|
||||
<template x-for="(item, index) in commandItemsFiltered" :key="'item-' + index">
|
||||
|
||||
<div class="pb-1 space-y-1">
|
||||
<template x-if="commandShowCategory(item, index)">
|
||||
<div class="px-1 overflow-hidden text-gray-700">
|
||||
<div class="px-2 py-1 my-1 text-xs font-medium text-neutral-500" x-text="commandCategoryCapitalize(item.category)"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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">
|
||||
<span x-html="item.icon"></span>
|
||||
<span x-text="item.title"></span>
|
||||
<template x-if="item.right">
|
||||
<span class="ml-auto text-xs tracking-widest text-muted-foreground" x-text="item.right"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
204
elements/command-examples/example-02.html
Normal file
204
elements/command-examples/example-02.html
Normal file
@ -0,0 +1,204 @@
|
||||
<div x-data="{
|
||||
commandOpen: false,
|
||||
}"
|
||||
x-init="
|
||||
$watch('commandOpen', function(value){
|
||||
if(value === true){
|
||||
document.body.classList.add('overflow-hidden');
|
||||
$nextTick(() => { window.dispatchEvent(new CustomEvent('command-input-focus', {})); });
|
||||
}else{
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
}
|
||||
})
|
||||
"
|
||||
@keydown.escape.window="commandOpen = false"
|
||||
class="relative z-50 w-auto h-auto">
|
||||
<button @click="commandOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
|
||||
<template x-teleport="body">
|
||||
|
||||
<div x-show="commandOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" x-cloak>
|
||||
<div x-show="commandOpen"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="commandOpen=false" class="absolute inset-0 w-full h-full bg-black bg-opacity-40">
|
||||
</div>
|
||||
<div
|
||||
x-show="commandOpen"
|
||||
x-trap.inert.noscroll="commandOpen"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
x-data="{
|
||||
commandItems: {
|
||||
suggestions : [
|
||||
{
|
||||
title: 'Calendar',
|
||||
value: 'calendar',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'18\' height=\'18\' x=\'3\' y=\'4\' rx=\'2\' ry=\'2\'></rect><line x1=\'16\' x2=\'16\' y1=\'2\' y2=\'6\'></line><line x1=\'8\' x2=\'8\' y1=\'2\' y2=\'6\'></line><line x1=\'3\' x2=\'21\' y1=\'10\' y2=\'10\'></line></svg>',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Search Emoji',
|
||||
value: 'emoji',
|
||||
icon: '<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-4 h-4 mr-2\'><circle cx=\'12\' cy=\'12\' r=\'10\'></circle><path d=\'M8 14s1.5 2 4 2 4-2 4-2\'></path><line x1=\'9\' x2=\'9.01\' y1=\'9\' y2=\'9\'></line><line x1=\'15\' x2=\'15.01\' y1=\'9\' y2=\'9\'></line></svg>',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Calculator',
|
||||
value: 'calculator',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'16\' height=\'20\' x=\'4\' y=\'2\' rx=\'2\'></rect><line x1=\'8\' x2=\'16\' y1=\'6\' y2=\'6\'></line><line x1=\'16\' x2=\'16\' y1=\'14\' y2=\'18\'></line><path d=\'M16 10h.01\'></path><path d=\'M12 10h.01\'></path><path d=\'M8 10h.01\'></path><path d=\'M12 14h.01\'></path><path d=\'M8 14h.01\'></path><path d=\'M12 18h.01\'></path><path d=\'M8 18h.01\'></path></svg>',
|
||||
default: false,
|
||||
}
|
||||
],
|
||||
settings: [
|
||||
{
|
||||
title: 'Profile',
|
||||
value: 'profile',
|
||||
icon: '<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-4 h-4 mr-2\'><path d=\'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\'></path><circle cx=\'12\' cy=\'7\' r=\'4\'></circle></svg>',
|
||||
right: '⌘P',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Billing',
|
||||
value: 'billing',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'20\' height=\'14\' x=\'2\' y=\'5\' rx=\'2\'></rect><line x1=\'2\' x2=\'22\' y1=\'10\' y2=\'10\'></line></svg>',
|
||||
right: '⌘B',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
value: 'settings',
|
||||
icon: '<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-4 h-4 mr-2\'><path d=\'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\'></path><circle cx=\'12\' cy=\'12\' r=\'3\'></circle></svg>',
|
||||
right: '⌘S',
|
||||
default: false,
|
||||
},
|
||||
{
|
||||
title: 'Keyboard Settings',
|
||||
value: 'keyboard-settngs',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'20\' height=\'16\' x=\'2\' y=\'4\' rx=\'2\' ry=\'2\'></rect><path d=\'M6 8h.001\'></path><path d=\'M10 8h.001\'></path><path d=\'M14 8h.001\'></path><path d=\'M18 8h.001\'></path><path d=\'M8 12h.001\'></path><path d=\'M12 12h.001\'></path><path d=\'M16 12h.001\'></path><path d=\'M7 16h10\'></path></svg>',
|
||||
right: '⌘K',
|
||||
default: false,
|
||||
},
|
||||
]
|
||||
},
|
||||
commandItemsFiltered: [],
|
||||
commandItemActive: null,
|
||||
commandItemSelected: null,
|
||||
commandId: $id('command'),
|
||||
commandSearch: '',
|
||||
commandSearchIsEmpty() {
|
||||
return this.commandSearch.length == 0;
|
||||
},
|
||||
commandItemIsActive(item) {
|
||||
return this.commandItemActive && this.commandItemActive.value==item.value;
|
||||
},
|
||||
commandItemActiveNext(){
|
||||
let index = this.commandItemsFiltered.indexOf(this.commandItemActive);
|
||||
if(index < this.commandItemsFiltered.length-1){
|
||||
this.commandItemActive = this.commandItemsFiltered[index+1];
|
||||
this.commandScrollToActiveItem();
|
||||
}
|
||||
},
|
||||
commandItemActivePrevious(){
|
||||
let index = this.commandItemsFiltered.indexOf(this.commandItemActive);
|
||||
if(index > 0){
|
||||
this.commandItemActive = this.commandItemsFiltered[index-1];
|
||||
this.commandScrollToActiveItem();
|
||||
}
|
||||
},
|
||||
commandScrollToActiveItem(){
|
||||
if(this.commandItemActive){
|
||||
activeElement = document.getElementById(this.commandItemActive.value + '-' + this.commandId)
|
||||
if(!activeElement) return;
|
||||
|
||||
newScrollPos = (activeElement.offsetTop + activeElement.offsetHeight) - this.$refs.commandItemsList.offsetHeight;
|
||||
if(newScrollPos > 0){
|
||||
this.$refs.commandItemsList.scrollTop=newScrollPos;
|
||||
} else {
|
||||
this.$refs.commandItemsList.scrollTop=0;
|
||||
}
|
||||
}
|
||||
},
|
||||
commandSearchItems() {
|
||||
if(!this.commandSearchIsEmpty()){
|
||||
searchTerm = this.commandSearch.replace(/\*/g, '').toLowerCase();
|
||||
this.commandItemsFiltered = this.commandItems.filter(item => item.title.toLowerCase().startsWith(searchTerm));
|
||||
|
||||
this.commandScrollToActiveItem();
|
||||
} else {
|
||||
this.commandItemsFiltered = this.commandItems.filter(item => item.default);
|
||||
}
|
||||
this.commandItemActive = this.commandItemsFiltered[0];
|
||||
},
|
||||
commandShowCategory(item, index){
|
||||
if(index == 0) return true;
|
||||
if(typeof this.commandItems[index-1] === 'undefined') return false;
|
||||
return item.category != this.commandItems[index-1].category;
|
||||
},
|
||||
commandCategoryCapitalize(string){
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
commandItemsReorganize(){
|
||||
commandItemsOriginal = this.commandItems;
|
||||
keys = Object.keys(this.commandItems);
|
||||
this.commandItems = [];
|
||||
keys.forEach((key, index) => {
|
||||
for(i=0; i<commandItemsOriginal[key].length; i++){
|
||||
commandItemsOriginal[key][i].category = key;
|
||||
this.commandItems.push( commandItemsOriginal[key][i] );
|
||||
}
|
||||
});
|
||||
}
|
||||
}" x-init="
|
||||
commandItemsReorganize();
|
||||
commandItemsFiltered = commandItems;
|
||||
commandItemActive=commandItems[0];
|
||||
$watch('commandSearch', value => commandSearchItems());
|
||||
"
|
||||
@keydown.down="event.preventDefault(); commandItemActiveNext();"
|
||||
@keydown.up="event.preventDefault(); commandItemActivePrevious()"
|
||||
@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="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">
|
||||
</div>
|
||||
<div x-ref="commandItemsList" class="max-h-[320px] overflow-y-auto overflow-x-hidden">
|
||||
<template x-for="(item, index) in commandItemsFiltered" :key="'item-' + index">
|
||||
|
||||
<div class="pb-1 space-y-1">
|
||||
<template x-if="commandShowCategory(item, index)">
|
||||
<div class="px-1 overflow-hidden text-gray-700">
|
||||
<div class="px-2 py-1 my-1 text-xs font-medium text-neutral-500" x-text="commandCategoryCapitalize(item.category)"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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">
|
||||
<span x-html="item.icon"></span>
|
||||
<span x-text="item.title"></span>
|
||||
<template x-if="item.right">
|
||||
<span class="ml-auto text-xs tracking-widest text-muted-foreground" x-text="item.right"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
162
elements/command.html
Normal file
162
elements/command.html
Normal file
@ -0,0 +1,162 @@
|
||||
<div x-data="{
|
||||
commandItems: {
|
||||
suggestions : [
|
||||
{
|
||||
title: 'Calendar',
|
||||
value: 'calendar',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'18\' height=\'18\' x=\'3\' y=\'4\' rx=\'2\' ry=\'2\'></rect><line x1=\'16\' x2=\'16\' y1=\'2\' y2=\'6\'></line><line x1=\'8\' x2=\'8\' y1=\'2\' y2=\'6\'></line><line x1=\'3\' x2=\'21\' y1=\'10\' y2=\'10\'></line></svg>',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Search Emoji',
|
||||
value: 'emoji',
|
||||
icon: '<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-4 h-4 mr-2\'><circle cx=\'12\' cy=\'12\' r=\'10\'></circle><path d=\'M8 14s1.5 2 4 2 4-2 4-2\'></path><line x1=\'9\' x2=\'9.01\' y1=\'9\' y2=\'9\'></line><line x1=\'15\' x2=\'15.01\' y1=\'9\' y2=\'9\'></line></svg>',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Calculator',
|
||||
value: 'calculator',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'16\' height=\'20\' x=\'4\' y=\'2\' rx=\'2\'></rect><line x1=\'8\' x2=\'16\' y1=\'6\' y2=\'6\'></line><line x1=\'16\' x2=\'16\' y1=\'14\' y2=\'18\'></line><path d=\'M16 10h.01\'></path><path d=\'M12 10h.01\'></path><path d=\'M8 10h.01\'></path><path d=\'M12 14h.01\'></path><path d=\'M8 14h.01\'></path><path d=\'M12 18h.01\'></path><path d=\'M8 18h.01\'></path></svg>',
|
||||
default: true,
|
||||
}
|
||||
],
|
||||
settings: [
|
||||
{
|
||||
title: 'Profile',
|
||||
value: 'profile',
|
||||
icon: '<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-4 h-4 mr-2\'><path d=\'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\'></path><circle cx=\'12\' cy=\'7\' r=\'4\'></circle></svg>',
|
||||
right: '⌘P',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Billing',
|
||||
value: 'billing',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'20\' height=\'14\' x=\'2\' y=\'5\' rx=\'2\'></rect><line x1=\'2\' x2=\'22\' y1=\'10\' y2=\'10\'></line></svg>',
|
||||
right: '⌘B',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
value: 'settings',
|
||||
icon: '<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-4 h-4 mr-2\'><path d=\'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\'></path><circle cx=\'12\' cy=\'12\' r=\'3\'></circle></svg>',
|
||||
right: '⌘S',
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
title: 'Keyboard Settings',
|
||||
value: 'keyboard-settngs',
|
||||
icon: '<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-4 h-4 mr-2\'><rect width=\'20\' height=\'16\' x=\'2\' y=\'4\' rx=\'2\' ry=\'2\'></rect><path d=\'M6 8h.001\'></path><path d=\'M10 8h.001\'></path><path d=\'M14 8h.001\'></path><path d=\'M18 8h.001\'></path><path d=\'M8 12h.001\'></path><path d=\'M12 12h.001\'></path><path d=\'M16 12h.001\'></path><path d=\'M7 16h10\'></path></svg>',
|
||||
right: '⌘K',
|
||||
default: false,
|
||||
},
|
||||
]
|
||||
},
|
||||
commandItemsFiltered: [],
|
||||
commandItemActive: null,
|
||||
commandItemSelected: null,
|
||||
commandId: $id('command'),
|
||||
commandSearch: '',
|
||||
commandSearchIsEmpty() {
|
||||
return this.commandSearch.length == 0;
|
||||
},
|
||||
commandItemIsActive(item) {
|
||||
return this.commandItemActive && this.commandItemActive.value==item.value;
|
||||
},
|
||||
commandItemActiveNext(){
|
||||
let index = this.commandItemsFiltered.indexOf(this.commandItemActive);
|
||||
if(index < this.commandItemsFiltered.length-1){
|
||||
this.commandItemActive = this.commandItemsFiltered[index+1];
|
||||
this.commandScrollToActiveItem();
|
||||
}
|
||||
},
|
||||
commandItemActivePrevious(){
|
||||
let index = this.commandItemsFiltered.indexOf(this.commandItemActive);
|
||||
if(index > 0){
|
||||
this.commandItemActive = this.commandItemsFiltered[index-1];
|
||||
this.commandScrollToActiveItem();
|
||||
}
|
||||
},
|
||||
commandScrollToActiveItem(){
|
||||
if(this.commandItemActive){
|
||||
activeElement = document.getElementById(this.commandItemActive.value + '-' + this.commandId)
|
||||
if(!activeElement) return;
|
||||
|
||||
newScrollPos = (activeElement.offsetTop + activeElement.offsetHeight) - this.$refs.commandItemsList.offsetHeight;
|
||||
if(newScrollPos > 0){
|
||||
this.$refs.commandItemsList.scrollTop=newScrollPos;
|
||||
} else {
|
||||
this.$refs.commandItemsList.scrollTop=0;
|
||||
}
|
||||
}
|
||||
},
|
||||
commandSearchItems() {
|
||||
if(!this.commandSearchIsEmpty()){
|
||||
searchTerm = this.commandSearch.replace(/\*/g, '').toLowerCase();
|
||||
this.commandItemsFiltered = this.commandItems.filter(item => item.title.toLowerCase().startsWith(searchTerm));
|
||||
|
||||
this.commandScrollToActiveItem();
|
||||
} else {
|
||||
this.commandItemsFiltered = this.commandItems.filter(item => item.default);
|
||||
}
|
||||
this.commandItemActive = this.commandItemsFiltered[0];
|
||||
},
|
||||
commandShowCategory(item, index){
|
||||
if(index == 0) return true;
|
||||
if(typeof this.commandItems[index-1] === 'undefined') return false;
|
||||
return item.category != this.commandItems[index-1].category;
|
||||
},
|
||||
commandCategoryCapitalize(string){
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
},
|
||||
commandItemsReorganize(){
|
||||
commandItemsOriginal = this.commandItems;
|
||||
keys = Object.keys(this.commandItems);
|
||||
this.commandItems = [];
|
||||
keys.forEach((key, index) => {
|
||||
for(i=0; i<commandItemsOriginal[key].length; i++){
|
||||
commandItemsOriginal[key][i].category = key;
|
||||
this.commandItems.push( commandItemsOriginal[key][i] );
|
||||
}
|
||||
});
|
||||
}
|
||||
}" x-init="
|
||||
commandItemsReorganize();
|
||||
commandSearchItems();
|
||||
$watch('commandSearch', value => commandSearchItems());
|
||||
"
|
||||
@keydown.down="event.preventDefault(); commandItemActiveNext();"
|
||||
@keydown.up="event.preventDefault(); commandItemActivePrevious()"
|
||||
@keydown.enter="commandItemSelected=commandItemActive;"
|
||||
class="flex min-h-[370px] justify-center w-full max-w-xl items-start" x-cloak>
|
||||
<div class="flex flex-col w-full h-full overflow-hidden bg-white border rounded-lg shadow-md">
|
||||
<div class="flex items-center px-3 border-b">
|
||||
<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">
|
||||
</div>
|
||||
<div x-ref="commandItemsList" class="max-h-[320px] overflow-y-auto overflow-x-hidden">
|
||||
<template x-for="(item, index) in commandItemsFiltered" :key="'item-' + index">
|
||||
|
||||
<div class="pb-1 space-y-1">
|
||||
<template x-if="commandShowCategory(item, index)">
|
||||
<div class="px-1 overflow-hidden text-gray-700">
|
||||
<div class="px-2 py-1 my-1 text-xs font-medium text-neutral-500" x-text="commandCategoryCapitalize(item.category)"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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">
|
||||
<span x-html="item.icon"></span>
|
||||
<span x-text="item.title"></span>
|
||||
<template x-if="item.right">
|
||||
<span class="ml-auto text-xs tracking-widest text-muted-foreground" x-text="item.right"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
2
elements/explanation_generation.txt
Normal file
2
elements/explanation_generation.txt
Normal file
@ -0,0 +1,2 @@
|
||||
The ChatGPT prompt that is used to get the explanation for the UI element is:
|
||||
Can you give a concise paragraph explanation of what an [element] UI element is and how it's used on a website in the tone of Mark Twain.
|
||||
@ -1,37 +1,73 @@
|
||||
<div x-data="{ fullscreenMenu: false }" class="relative inset-0 w-full h-full">
|
||||
<div class="absolute top-0 left-0 w-full h-full">
|
||||
<button class="absolute top-0 z-30 w-6 h-5 mt-5 mr-5 transition duration-300 transform -translate-x-1/2 cursor-pointer left-1/2 group" @click="fullscreenMenu=!fullscreenMenu">
|
||||
<div :class="{ 'rotate-45 translate-y-[2px] duration-300' : fullscreenMenu, 'group-hover:-translate-y-[1px] duration-300' : !fullscreenMenu }" class="h-[2px] bg-black w-full rounded-full transform transition ease-out"></div>
|
||||
<div :class="{ 'hidden' : fullscreenMenu }" class="h-[2px] bg-black w-full my-[5px]"></div>
|
||||
<div :class="{ '-rotate-45 duration-300' : fullscreenMenu, 'group-hover:translate-y-[1px] duration-300' : !fullscreenMenu }" class="h-[2px] bg-black w-full rounded-full transform transition ease-out"></div>
|
||||
</button>
|
||||
<div x-show="fullscreenMenu" class="absolute inset-0 z-20 flex items-center justify-center w-screen h-screen bg-gray-50 text-neutral-500" x-cloak>
|
||||
<ul class="space-y-2 text-center">
|
||||
<li>
|
||||
<a href="#_" class="relative inline-flex font-medium duration-300 ease-out hover:text-neutral-800 group">
|
||||
<span>Home</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 duration-300 ease-out group-hover:w-full bg-neutral-800"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#_" class="relative inline-flex font-medium duration-300 ease-out hover:text-neutral-800 group">
|
||||
<span>Features</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 duration-300 ease-out group-hover:w-full bg-neutral-800"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#_" class="relative inline-flex font-medium duration-300 ease-out hover:text-neutral-800 group">
|
||||
<span>Pricing</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 duration-300 ease-out group-hover:w-full bg-neutral-800"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#_" class="relative inline-flex font-medium duration-300 ease-out hover:text-neutral-800 group">
|
||||
<span>About</span>
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 duration-300 ease-out group-hover:w-full bg-neutral-800"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
x-data="{ fullscreenModal: false }"
|
||||
x-init="
|
||||
$watch('fullscreenModal', function(value){
|
||||
if(value === true){
|
||||
document.body.classList.add('overflow-hidden');
|
||||
}else{
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
}
|
||||
})
|
||||
"
|
||||
@keydown.escape="fullscreenModal=false"
|
||||
>
|
||||
<button @click="fullscreenModal=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Preview</button>
|
||||
<template x-teleport="body">
|
||||
|
||||
<div
|
||||
x-show="fullscreenModal"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="translate-y-full"
|
||||
class="flex fixed inset-0 z-[99] w-screen h-screen bg-white"
|
||||
>
|
||||
<button @click="fullscreenModal=false" class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-3 mr-3 space-x-1 text-xs font-medium uppercase border rounded-md border-neutral-200 lg:border-white/20 lg:bg-black/10 hover:lg:bg-black/30 text-neutral-600 lg:text-white hover:bg-neutral-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
<span>Close</span>
|
||||
</button>
|
||||
|
||||
<div class="relative flex flex-wrap items-center w-full h-full px-8">
|
||||
|
||||
<div class="relative w-full max-w-sm mx-auto lg:mb-0">
|
||||
<div class="relative text-center">
|
||||
|
||||
<div class="flex flex-col mb-6 space-y-2">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
|
||||
<p class="text-sm text-neutral-500">Enter your email below to create your account</p>
|
||||
</div>
|
||||
<form onsubmit="event.preventDefault();" class="space-y-2">
|
||||
<input type="text" placeholder="name@example.com" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50">
|
||||
<button type="button" class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">
|
||||
Sign up with Email
|
||||
</button>
|
||||
<div class="relative py-6">
|
||||
<div class="absolute inset-0 flex items-center"><span class="w-full border-t"></span></div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="px-2 bg-white text-neutral-500">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none border-input hover:bg-neutral-100" type="button">
|
||||
<svg viewBox="0 0 438.549 438.549" class="w-4 h-4 mr-2"><path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>
|
||||
<span>Github</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<p class="mt-6 text-sm text-center text-neutral-500">Already have an account? <a href="#_" class="relative font-medium text-blue-600 group"><span>Login here</span><span class="absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600"></span></a></p>
|
||||
<p class="px-8 mt-1 text-sm text-center text-neutral-500">By continuing, you agree to our <a class="underline underline-offset-4 hover:text-primary" href="/terms">Terms</a> and <a class="underline underline-offset-4 hover:text-primary" href="/privacy">Policy</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative top-0 bottom-0 right-0 flex-shrink-0 hidden w-1/3 overflow-hidden bg-cover lg:block">
|
||||
<a href="#_" class="absolute bottom-0 right-0 z-30 inline-flex items-end mb-4 mr-3 font-sans text-2xl font-extrabold text-left text-white no-underline bg-transparent cursor-pointer group focus:no-underline">
|
||||
<svg class="w-auto h-4 text-white fill-current lg:h-5" viewBox="0 0 355 99" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M119.1 87V66.4h19.8c34.3 0 34.2-49.5 0-49.5-11 0-22 .1-33 .1v70h13.2zm19.8-32.7h-19.8V29.5h19.8c16.8 0 16.9 24.8 0 24.8zm32.6-30.5c0 9.5 14.4 9.5 14.4 0s-14.4-9.5-14.4 0zM184.8 87V37.5h-12.2V87h12.2zm22.8 0V61.8c0-7.5 5.1-13.8 12.6-13.8 7.8 0 11.9 5.7 11.9 13.2V87h12.2V61.1c0-15.5-9.3-24.2-20.9-24.2-6.2 0-11.2 2.5-16.2 7.4l-.8-6.7h-10.9V87h12.1zm72.1 1.3c7.5 0 16-2.6 21.2-8l-7.8-7.7c-2.8 2.9-8.7 4.6-13.2 4.6-8.6 0-13.9-4.4-14.7-10.5h38.5c1.9-20.3-8.4-30.5-24.9-30.5-16 0-26.2 10.8-26.2 25.8 0 15.8 10.1 26.3 27.1 26.3zM292 56.6h-26.6c1.8-6.4 7.2-9.6 13.8-9.6 7 0 12 3.2 12.8 9.6zm41.2 32.1c14.1 0 21.2-7.5 21.2-16.2 0-13.1-11.8-15.2-21.1-15.8-6.3-.4-9.2-2.2-9.2-5.4 0-3.1 3.2-4.9 9-4.9 4.7 0 8.7 1.1 12.2 4.4l6.8-8c-5.7-5-11.5-6.5-19.2-6.5-9 0-20.8 4-20.8 15.4 0 11.2 11.1 14.6 20.4 15.3 7 .4 9.8 1.8 9.8 5.2 0 3.6-4.3 6-8.9 5.9-5.5-.1-13.5-3-17-6.9l-6 8.7c7.2 7.5 15 8.8 22.8 8.8z" id="a"></path></defs><g fill="none" fill-rule="evenodd"><g fill="currentColor"><path d="M19.742 49h28.516L68 83H0l19.742-34z"></path><path d="M26 69h14v30H26V69zM4 50L33.127 0 63 50H4z"></path></g><g fill-rule="nonzero"><use fill="currentColor" xlink:href="#a"></use><use fill="currentColor" xlink:href="#a"></use></g></g></svg>
|
||||
<span class="flex opacity-90 group-hover:scale-150 group-hover:opacity-100 items-center h-full group-hover:-rotate-6 ease-out duration-500 px-0.5 py-px ml-2 -translate-x-px text-[0.6rem] font-bold leading-none border-[2px] rounded border-white -translate-y-px">UI</span>
|
||||
</a>
|
||||
<div class="absolute inset-0 z-20 w-full h-full opacity-70 bg-gradient-to-t from-black"></div>
|
||||
<img src="https://cdn.devdojo.com/images/may2023/pines-bg-2.png" class="z-10 object-cover w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,72 @@
|
||||
<div x-data="{ fullscreenMenu: false }" class="relative inset-0 w-full h-full">
|
||||
<div class="absolute top-0 left-0 w-full h-full">
|
||||
<button class="absolute top-0 left-0 z-30 w-6 h-5 mt-5 ml-5 transition duration-300 transform cursor-pointer group" @click="fullscreenMenu=!fullscreenMenu">
|
||||
<div :class="{ 'rotate-45 translate-y-[2px] duration-300' : fullscreenMenu, 'group-hover:-translate-y-[1px] duration-300' : !fullscreenMenu }" class="h-[2px] bg-black w-full rounded-full transform transition ease-out"></div>
|
||||
<div :class="{ 'hidden' : fullscreenMenu }" class="h-[2px] bg-black w-full my-[5px]"></div>
|
||||
<div :class="{ '-rotate-45 duration-300' : fullscreenMenu, 'group-hover:translate-y-[1px] duration-300' : !fullscreenMenu }" class="h-[2px] bg-black w-full rounded-full transform transition ease-out"></div>
|
||||
</button>
|
||||
<div x-show="fullscreenMenu" class="absolute inset-0 z-20 flex items-center justify-center w-screen h-screen text-sm bg-gray-50 text-neutral-500" x-cloak>
|
||||
Add your menu here
|
||||
<div
|
||||
x-data="{ fullscreenModal: false }"
|
||||
x-init="
|
||||
$watch('fullscreenModal', function(value){
|
||||
if(value === true){
|
||||
document.body.classList.add('overflow-hidden');
|
||||
}else{
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
}
|
||||
})
|
||||
"
|
||||
@keydown.escape="fullscreenModal=false"
|
||||
>
|
||||
<button @click="fullscreenModal=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Preview</button>
|
||||
<template x-teleport="body">
|
||||
|
||||
<div
|
||||
x-show="fullscreenModal"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-100"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="flex fixed inset-0 z-[99] w-screen h-screen bg-white"
|
||||
>
|
||||
<button @click="fullscreenModal=false" class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-3 mr-3 space-x-1 text-xs font-medium uppercase border rounded-md border-neutral-200 text-neutral-600 hover:bg-neutral-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
<span>Close</span>
|
||||
</button>
|
||||
<div class="relative top-0 bottom-0 right-0 flex-shrink-0 hidden w-1/3 overflow-hidden bg-cover lg:block">
|
||||
<a href="#_" class="absolute bottom-0 left-0 z-30 inline-flex items-end mb-4 ml-3 font-sans text-2xl font-extrabold text-left text-white no-underline bg-transparent cursor-pointer group focus:no-underline">
|
||||
<svg class="w-auto h-4 text-white fill-current lg:h-5" viewBox="0 0 355 99" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M119.1 87V66.4h19.8c34.3 0 34.2-49.5 0-49.5-11 0-22 .1-33 .1v70h13.2zm19.8-32.7h-19.8V29.5h19.8c16.8 0 16.9 24.8 0 24.8zm32.6-30.5c0 9.5 14.4 9.5 14.4 0s-14.4-9.5-14.4 0zM184.8 87V37.5h-12.2V87h12.2zm22.8 0V61.8c0-7.5 5.1-13.8 12.6-13.8 7.8 0 11.9 5.7 11.9 13.2V87h12.2V61.1c0-15.5-9.3-24.2-20.9-24.2-6.2 0-11.2 2.5-16.2 7.4l-.8-6.7h-10.9V87h12.1zm72.1 1.3c7.5 0 16-2.6 21.2-8l-7.8-7.7c-2.8 2.9-8.7 4.6-13.2 4.6-8.6 0-13.9-4.4-14.7-10.5h38.5c1.9-20.3-8.4-30.5-24.9-30.5-16 0-26.2 10.8-26.2 25.8 0 15.8 10.1 26.3 27.1 26.3zM292 56.6h-26.6c1.8-6.4 7.2-9.6 13.8-9.6 7 0 12 3.2 12.8 9.6zm41.2 32.1c14.1 0 21.2-7.5 21.2-16.2 0-13.1-11.8-15.2-21.1-15.8-6.3-.4-9.2-2.2-9.2-5.4 0-3.1 3.2-4.9 9-4.9 4.7 0 8.7 1.1 12.2 4.4l6.8-8c-5.7-5-11.5-6.5-19.2-6.5-9 0-20.8 4-20.8 15.4 0 11.2 11.1 14.6 20.4 15.3 7 .4 9.8 1.8 9.8 5.2 0 3.6-4.3 6-8.9 5.9-5.5-.1-13.5-3-17-6.9l-6 8.7c7.2 7.5 15 8.8 22.8 8.8z" id="a"></path></defs><g fill="none" fill-rule="evenodd"><g fill="currentColor"><path d="M19.742 49h28.516L68 83H0l19.742-34z"></path><path d="M26 69h14v30H26V69zM4 50L33.127 0 63 50H4z"></path></g><g fill-rule="nonzero"><use fill="currentColor" xlink:href="#a"></use><use fill="currentColor" xlink:href="#a"></use></g></g></svg>
|
||||
<span class="flex opacity-90 group-hover:scale-150 group-hover:opacity-100 items-center h-full group-hover:-rotate-6 ease-out duration-500 px-0.5 py-px ml-2 -translate-x-px text-[0.6rem] font-bold leading-none border-[2px] rounded border-white -translate-y-px">UI</span>
|
||||
</a>
|
||||
<div class="absolute inset-0 z-20 w-full h-full opacity-70 bg-gradient-to-t from-black"></div>
|
||||
<img src="https://cdn.devdojo.com/images/may2023/pines-bg-1.png" class="z-10 object-cover w-full h-full" />
|
||||
</div>
|
||||
<div class="relative flex flex-wrap items-center w-full h-full px-8">
|
||||
|
||||
<div class="relative w-full max-w-sm mx-auto lg:mb-0">
|
||||
<div class="relative text-center">
|
||||
|
||||
<div class="flex flex-col mb-6 space-y-2">
|
||||
<h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
|
||||
<p class="text-sm text-neutral-500">Enter your email below to create your account</p>
|
||||
</div>
|
||||
<form onsubmit="event.preventDefault();" class="space-y-2">
|
||||
<input type="text" placeholder="name@example.com" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50">
|
||||
<button type="button" class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">
|
||||
Sign up with Email
|
||||
</button>
|
||||
<div class="relative py-6">
|
||||
<div class="absolute inset-0 flex items-center"><span class="w-full border-t"></span></div>
|
||||
<div class="relative flex justify-center text-xs uppercase">
|
||||
<span class="px-2 bg-white text-neutral-500">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="inline-flex items-center justify-center w-full h-10 px-4 py-2 text-sm font-medium border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none border-input hover:bg-neutral-100" type="button">
|
||||
<svg viewBox="0 0 438.549 438.549" class="w-4 h-4 mr-2"><path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>
|
||||
<span>Github</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<p class="mt-6 text-sm text-center text-neutral-500">Already have an account? <a href="#_" class="relative font-medium text-blue-600 group"><span>Login here</span><span class="absolute bottom-0 left-0 w-0 group-hover:w-full ease-out duration-300 h-0.5 bg-blue-600"></span></a></p>
|
||||
<p class="px-8 mt-1 text-sm text-center text-neutral-500">By continuing, you agree to our <a class="underline underline-offset-4 hover:text-primary" href="/terms">Terms</a> and <a class="underline underline-offset-4 hover:text-primary" href="/privacy">Policy</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -1,31 +1,19 @@
|
||||
<div x-data="{
|
||||
modalOpen: false,
|
||||
}"
|
||||
x-init="
|
||||
$watch('modalOpen', function(value){
|
||||
if(value === true){
|
||||
document.body.classList.add('overflow-hidden');
|
||||
}else{
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
}
|
||||
})
|
||||
"
|
||||
<div x-data="{ modalOpen: false }"
|
||||
@keydown.escape.window="modalOpen = false"
|
||||
:class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
|
||||
|
||||
<button @click="modalOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
|
||||
<template x-teleport="body">
|
||||
<div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" x-cloak>
|
||||
<div x-show="modalOpen"
|
||||
x-transition:enter="ease-out duration-200"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave="ease-in duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="modalOpen=false" class="absolute inset-0 w-full h-full bg-white backdrop-blur-sm bg-opacity-70"></div>
|
||||
<div x-show="modalOpen"
|
||||
x-trap.inert.noscroll="show"
|
||||
x-trap.inert.noscroll="modalOpen"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
|
||||
@ -1,37 +1,26 @@
|
||||
<div x-data="{
|
||||
modalOpen: false,
|
||||
}"
|
||||
x-init="
|
||||
$watch('modalOpen', function(value){
|
||||
if(value === true){
|
||||
document.body.classList.add('overflow-hidden');
|
||||
}else{
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
}
|
||||
})
|
||||
"
|
||||
<div x-data="{ modalOpen: false }"
|
||||
@keydown.escape.window="modalOpen = false"
|
||||
:class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
|
||||
<button @click="modalOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
|
||||
<template x-teleport="body">
|
||||
<div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" x-cloak>
|
||||
<div x-show="modalOpen"
|
||||
x-transition:enter="ease-out duration-200"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave="ease-in duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="modalOpen=false" class="absolute inset-0 w-full h-full bg-gray-900 bg-opacity-50 backdrop-blur-sm"></div>
|
||||
<div x-show="modalOpen"
|
||||
x-trap.inert.noscroll="show"
|
||||
x-trap.inert.noscroll="modalOpen"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-90"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90"
|
||||
class="relative w-full py-6 bg-white border shadow-lg px-7 border-neutral-400 sm:max-w-lg sm:rounded-lg">
|
||||
class="relative w-full py-6 bg-white shadow-md px-7 bg-opacity-90 drop-shadow-md backdrop-blur-sm sm:max-w-lg sm:rounded-lg">
|
||||
<div class="flex items-center justify-between pb-3">
|
||||
<h3 class="text-lg font-semibold">Modal Title</h3>
|
||||
<button @click="modalOpen=false" class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50">
|
||||
|
||||
@ -1,30 +1,19 @@
|
||||
<div x-data="{
|
||||
modalOpen: false,
|
||||
}"
|
||||
x-init="
|
||||
$watch('modalOpen', function(value){
|
||||
if(value === true){
|
||||
document.body.classList.add('overflow-hidden');
|
||||
}else{
|
||||
document.body.classList.remove('overflow-hidden');
|
||||
}
|
||||
})
|
||||
"
|
||||
<div x-data="{ modalOpen: false }"
|
||||
@keydown.escape.window="modalOpen = false"
|
||||
class="relative z-50 w-auto h-auto">
|
||||
<button @click="modalOpen=true" class="inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors bg-white border rounded-md hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none">Open</button>
|
||||
<template x-teleport="body">
|
||||
<div x-show="modalOpen" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" x-cloak>
|
||||
<div x-show="modalOpen"
|
||||
x-transition:enter="ease-out duration-200"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave="ease-in duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="modalOpen=false" class="absolute inset-0 w-full h-full bg-black bg-opacity-40"></div>
|
||||
<div x-show="modalOpen"
|
||||
x-trap.inert.noscroll="show"
|
||||
x-trap.inert.noscroll="modalOpen"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
|
||||
@ -56,10 +56,10 @@
|
||||
<p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<div class="grid items-center grid-cols-3 gap-4"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="width">Width</label><input class="flex w-full h-8 col-span-2 px-3 py-2 text-sm bg-transparent border rounded-md border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="width" value="100%"></div>
|
||||
<div class="grid items-center grid-cols-3 gap-4"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="maxWidth">Max. width</label><input class="flex w-full h-8 col-span-2 px-3 py-2 text-sm bg-transparent border rounded-md border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="maxWidth" value="300px"></div>
|
||||
<div class="grid items-center grid-cols-3 gap-4"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="height">Height</label><input class="flex w-full h-8 col-span-2 px-3 py-2 text-sm bg-transparent border rounded-md border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="height" value="25px"></div>
|
||||
<div class="grid items-center grid-cols-3 gap-4"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="maxHeight">Max. height</label><input class="flex w-full h-8 col-span-2 px-3 py-2 text-sm bg-transparent border rounded-md border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="maxHeight" value="none"></div>
|
||||
<div class="grid items-center grid-cols-3 gap-4"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="width">Width</label><input class="flex w-full h-8 col-span-2 px-3 py-2 text-sm bg-transparent border rounded-md border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="width" value="100%"></div>
|
||||
<div class="grid items-center grid-cols-3 gap-4"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="maxWidth">Max. width</label><input class="flex w-full h-8 col-span-2 px-3 py-2 text-sm bg-transparent border rounded-md border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="maxWidth" value="300px"></div>
|
||||
<div class="grid items-center grid-cols-3 gap-4"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="height">Height</label><input class="flex w-full h-8 col-span-2 px-3 py-2 text-sm bg-transparent border rounded-md border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="height" value="25px"></div>
|
||||
<div class="grid items-center grid-cols-3 gap-4"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="maxHeight">Max. height</label><input class="flex w-full h-8 col-span-2 px-3 py-2 text-sm bg-transparent border rounded-md border-input ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="maxHeight" value="none"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
15
elements/progress-examples/example-01.html
Normal file
15
elements/progress-examples/example-01.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div x-data="{
|
||||
progress: 0,
|
||||
progressInterval: null,
|
||||
}"
|
||||
x-init="
|
||||
progressInterval = setInterval(() => {
|
||||
progress = progress + 1;
|
||||
if (progress >= 100) {
|
||||
clearInterval(progressInterval);
|
||||
}
|
||||
}, 100);
|
||||
"
|
||||
class="relative w-full h-2 overflow-hidden bg-gray-100 rounded-full">
|
||||
<span :style="'width:' + progress + '%'" class="absolute w-24 h-full duration-300 bg-blue-600 ease"></span>
|
||||
</div>
|
||||
15
elements/progress.html
Normal file
15
elements/progress.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div x-data="{
|
||||
progress: 0,
|
||||
progressInterval: null,
|
||||
}"
|
||||
x-init="
|
||||
progressInterval = setInterval(() => {
|
||||
progress = progress + 1;
|
||||
if (progress >= 100) {
|
||||
clearInterval(progressInterval);
|
||||
}
|
||||
}, 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>
|
||||
</div>
|
||||
6
elements/progress.json
Normal file
6
elements/progress.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"data" : {
|
||||
"progress" : "The progress percentage of the progress bar",
|
||||
"progressInterval" : "The interval of the progress bar, will be cleared after reaching 100%"
|
||||
}
|
||||
}
|
||||
23
elements/quotes.html
Normal file
23
elements/quotes.html
Normal file
@ -0,0 +1,23 @@
|
||||
<blockquote class="relative">
|
||||
<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.
|
||||
</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">
|
||||
</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>
|
||||
</div>
|
||||
</footer>
|
||||
</blockquote>
|
||||
@ -1,5 +1,5 @@
|
||||
<div x-data="{
|
||||
selectedValue: '',
|
||||
selectedItem: '',
|
||||
selectableItems: [
|
||||
{
|
||||
title: 'Milk',
|
||||
@ -57,38 +57,82 @@
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
selectableItemActive: null,
|
||||
selectId: $id('select'),
|
||||
selectableItemIsActive(item) {
|
||||
return this.selectableItemActive && this.selectableItemActive.value==item.value;
|
||||
},
|
||||
selectableItemActiveNext(){
|
||||
let index = this.selectableItems.indexOf(this.selectableItemActive);
|
||||
if(index < this.selectableItems.length-1){
|
||||
this.selectableItemActive = this.selectableItems[index+1];
|
||||
this.selectScrollToActiveItem();
|
||||
}
|
||||
},
|
||||
selectableItemActivePrevious(){
|
||||
let index = this.selectableItems.indexOf(this.selectableItemActive);
|
||||
if(index > 0){
|
||||
this.selectableItemActive = this.selectableItems[index-1];
|
||||
this.selectScrollToActiveItem();
|
||||
}
|
||||
},
|
||||
selectableItemsOpen: false,
|
||||
selectScrollToActiveItem(){
|
||||
if(this.selectableItemActive){
|
||||
activeElement = document.getElementById(this.selectableItemActive.value + '-' + this.selectId)
|
||||
newScrollPos = (activeElement.offsetTop + activeElement.offsetHeight) - this.$refs.selectableItemsList.offsetHeight;
|
||||
if(newScrollPos > 0){
|
||||
this.$refs.selectableItemsList.scrollTop=newScrollPos;
|
||||
} else {
|
||||
this.$refs.selectableItemsList.scrollTop=0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}"
|
||||
x-init="
|
||||
$watch('selectableItemsOpen', function(){
|
||||
if(!selectedItem){
|
||||
selectableItemActive=selectableItems[0];
|
||||
} else {
|
||||
selectableItemActive=selectedItem;
|
||||
}
|
||||
selectScrollToActiveItem();
|
||||
});
|
||||
"
|
||||
@keydown.escape="if(selectableItemsOpen){ selectableItemsOpen=false; }"
|
||||
@keydown.down="if(selectableItemsOpen){ selectableItemActiveNext(); } else { selectableItemsOpen=true; } event.preventDefault();"
|
||||
@keydown.up="event.preventDefault(); selectableItemActivePrevious()"
|
||||
@keydown.enter="selectedItem=selectableItemActive; selectableItemsOpen=false;"
|
||||
class="relative w-64">
|
||||
|
||||
<button @click="selectableItemsOpen=!selectableItemsOpen" class="relative flex items-center justify-between w-full py-2 pl-3 pr-10 text-left bg-white border rounded-md shadow-sm cursor-default border-neutral-200/70 focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
|
||||
<span x-text="selectedValue ? selectedValue.title : 'Select Item'" class="truncate"></span>
|
||||
<button x-ref="selectButton" @click="selectableItemsOpen=!selectableItemsOpen"
|
||||
:class="{ 'focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400' : !selectableItemsOpen }"
|
||||
class="relative min-h-[38px] flex items-center justify-between w-full py-2 pl-3 pr-10 text-left bg-white border rounded-md shadow-sm cursor-default border-neutral-200/70 focus:outline-none sm:text-sm">
|
||||
<span x-text="selectedItem ? selectedItem.title : 'Select Item'" class="truncate"></span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="w-5 h-5 text-gray-400"><path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<ul x-show="selectableItemsOpen"
|
||||
x-ref="selectableItemsList"
|
||||
@click.away="selectableItemsOpen = false"
|
||||
x-transition:enter="transition ease-out duration-50"
|
||||
x-transition:enter-start="opacity-0 -translate-y-1"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-out duration-50"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0 -translate-y-1"
|
||||
class="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-md max-h-56 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
x-cloak>
|
||||
|
||||
<template x-for="item in selectableItems" :key="item.value">
|
||||
<li
|
||||
@click="selectedValue=item; selectableItemsOpen=false"
|
||||
x-text="item.title"
|
||||
:disabled="item-disabled"
|
||||
class="relative py-2 pl-4 pr-10 text-gray-700 cursor-default select-none hover:bg-neutral-100 hover:text-gray-900">
|
||||
@click="selectedItem=item; selectableItemsOpen=false; $refs.selectButton.focus();"
|
||||
:id="item.value + '-' + selectId"
|
||||
:disabled="item.disabled"
|
||||
:class="{ 'bg-neutral-100 text-gray-900' : selectableItemIsActive(item), '' : !selectableItemIsActive(item) }"
|
||||
@mousemove="selectableItemActive=item"
|
||||
class="relative flex items-center h-full py-2 pl-8 text-gray-700 cursor-default select-none">
|
||||
<svg x-show="selectedItem.value==item.value" class="absolute left-0 w-4 h-4 ml-2 stroke-current text-neutral-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
<span class="block font-medium truncate" x-text="item.title"></span>
|
||||
<span x-show="selectedValue==item.value" class="absolute inset-y-0 right-0 flex items-center pr-3 text-amber-600">
|
||||
<svg 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="M4.5 12.75l6 6 9-13.5" /></svg>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
||||
20
elements/switch-examples/example-01.html
Normal file
20
elements/switch-examples/example-01.html
Normal file
@ -0,0 +1,20 @@
|
||||
<div x-data="{ switchOn: false }" class="flex items-center justify-center space-x-2">
|
||||
<input id="thisId" type="checkbox" name="switch" class="hidden" :checked="switchOn">
|
||||
|
||||
<button
|
||||
x-ref="switchButton"
|
||||
type="button"
|
||||
@click="switchOn = ! switchOn"
|
||||
:class="switchOn ? 'bg-neutral-900' : 'bg-neutral-200'"
|
||||
class="relative inline-flex h-4 py-0.5 ml-4 rounded-full focus:outline-none w-7"
|
||||
x-cloak>
|
||||
<span :class="switchOn ? 'translate-x-[14px]' : 'translate-x-0.5'" class="w-3 h-3 duration-200 ease-in-out bg-white rounded-full shadow-md"></span>
|
||||
</button>
|
||||
|
||||
<label @click="$refs.switchButton.click(); $refs.switchButton.focus()" :id="$id('switch')"
|
||||
:class="{ 'text-neutral-900': switchOn, 'text-gray-400': ! switchOn }"
|
||||
class="text-xs font-medium select-none"
|
||||
x-cloak>
|
||||
Enable Feature
|
||||
</label>
|
||||
</div>
|
||||
@ -1,5 +1,5 @@
|
||||
<div x-data="{ switchOn: false }" class="flex items-center justify-center space-x-2" x-id="['switch']">
|
||||
<input type="hidden" name="switch" :value="switchOn">
|
||||
<div x-data="{ switchOn: false }" class="flex items-center justify-center space-x-2">
|
||||
<input id="thisId" type="checkbox" name="switch" class="hidden" :checked="switchOn">
|
||||
|
||||
<button
|
||||
x-ref="switchButton"
|
||||
@ -8,7 +8,7 @@
|
||||
:class="switchOn ? 'bg-blue-600' : 'bg-neutral-200'"
|
||||
class="relative inline-flex h-6 py-0.5 ml-4 focus:outline-none rounded-full w-10"
|
||||
x-cloak>
|
||||
<span :class="switchOn ? 'translate-x-[18px]' : 'translate-x-0.5'" class="w-5 h-5 duration-200 ease-in-out bg-white rounded-full shadow-md" aria-hidden="true"></span>
|
||||
<span :class="switchOn ? 'translate-x-[18px]' : 'translate-x-0.5'" class="w-5 h-5 duration-200 ease-in-out bg-white rounded-full shadow-md"></span>
|
||||
</button>
|
||||
|
||||
<label @click="$refs.switchButton.click(); $refs.switchButton.focus()" :id="$id('switch')"
|
||||
|
||||
60
elements/table-examples/example-01.html
Normal file
60
elements/table-examples/example-01.html
Normal file
@ -0,0 +1,60 @@
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-neutral-200/70">
|
||||
<thead>
|
||||
<tr class="text-neutral-800">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200/70">
|
||||
<tr class="text-neutral-600 bg-neutral-50">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800 bg-neutral-50">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800 bg-neutral-50">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
62
elements/table-examples/example-02.html
Normal file
62
elements/table-examples/example-02.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="p-10">
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden border rounded-lg">
|
||||
<table class="min-w-full divide-y divide-neutral-200">
|
||||
<thead class="bg-neutral-50">
|
||||
<tr class="text-neutral-500">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
60
elements/table.html
Normal file
60
elements/table.html
Normal file
@ -0,0 +1,60 @@
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-neutral-200">
|
||||
<thead>
|
||||
<tr class="text-neutral-500">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200">
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
62
elements/tabs-examples/example-01.html
Normal file
62
elements/tabs-examples/example-01.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div
|
||||
x-data="{
|
||||
tabSelected: 1,
|
||||
tabButtonClicked(tabButton){
|
||||
this.tabSelected = tabButton.id.replace('tab-button-example-', '');
|
||||
this.tabRepositionMarker(tabButton);
|
||||
},
|
||||
tabButtonActive(tabButton){
|
||||
return this.tabSelected == tabButton.id.replace('tab-button-example-', '');
|
||||
},
|
||||
tabContentActive(tabContent){
|
||||
return this.tabSelected == tabContent.id.replace('tab-content-example-', '');
|
||||
},
|
||||
tabRepositionMarker(el){
|
||||
this.$refs.tabMarker.style.width=el.offsetWidth + 'px';
|
||||
this.$refs.tabMarker.style.height=el.offsetHeight + 'px';
|
||||
this.$refs.tabMarker.style.left=el.offsetLeft + 'px';
|
||||
},
|
||||
}"
|
||||
|
||||
x-init="tabRepositionMarker($refs.tabButtons.firstElementChild);" class="relative w-full max-w-sm">
|
||||
|
||||
<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-2 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none">
|
||||
<button :id="$id('tab-button-example')" type="button" @click="tabButtonClicked($el);" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Account</button>
|
||||
<button :id="$id('tab-button-example')" type="button" @click="tabButtonClicked($el);" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Password</button>
|
||||
<div x-ref="tabMarker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak><div class="w-full h-full bg-gray-100 rounded-md shadow-sm"></div></div>
|
||||
</div>
|
||||
<div class="relative w-full mt-2 content">
|
||||
<div :id="$id('tab-content-example')" x-show="tabContentActive($el)" class="relative">
|
||||
<!-- Tab Content 1 - Replace with your content -->
|
||||
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
<h3 class="text-lg font-semibold leading-none tracking-tight">Account</h3>
|
||||
<p class="text-sm text-neutral-500">Make changes to your account here. Click save when you're done.</p>
|
||||
</div>
|
||||
<div class="p-6 pt-0 space-y-2">
|
||||
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name-example">Name</label><input type="text" placeholder="Name" id="name-example" value="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
|
||||
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username-example">Username</label><input type="text" placeholder="Username" id="username-example" value="@adamwathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
|
||||
</div>
|
||||
<div class="flex items-center p-6 pt-0"><button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">Save changes</button></div>
|
||||
</div>
|
||||
<!-- End Tab Content 1 -->
|
||||
</div>
|
||||
|
||||
<div :id="$id('tab-content-example')" x-show="tabContentActive($el)" class="relative" x-cloak>
|
||||
<!-- Tab Content 2 - Replace with your content -->
|
||||
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
<h3 class="text-lg font-semibold leading-none tracking-tight">Password</h3>
|
||||
<p class="text-sm text-neutral-500">Change your password here. After saving, you'll be logged out.</p>
|
||||
</div>
|
||||
<div class="p-6 pt-0 space-y-2">
|
||||
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="password_example">Current Password</label><input type="password" placeholder="Current Password" id="password_example" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
|
||||
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="password_new_example">New Password</label><input type="password" placeholder="New Password" id="password_new_example" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
|
||||
</div>
|
||||
<div class="flex items-center p-6 pt-0"><button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">Save password</button></div>
|
||||
</div>
|
||||
<!-- End Tab Content 2 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -1,13 +1,62 @@
|
||||
<div x-data="{
|
||||
repositionTabMarker(el){
|
||||
this.$refs.marker.style.width=el.offsetWidth + 'px';
|
||||
this.$refs.marker.style.height=el.offsetHeight + 'px';
|
||||
this.$refs.marker.style.left=el.offsetLeft + 'px';
|
||||
}
|
||||
}" x-init="repositionTabMarker($el.firstElementChild);" class="relative inline-grid items-center justify-center w-auto h-10 grid-cols-2 p-1 text-gray-500 bg-gray-100 rounded-lg select-none">
|
||||
<button type="button" @click="repositionTabMarker($el); preview=true;" class="relative z-20 inline-flex items-center justify-center h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap ring-offset-background">Preview</button>
|
||||
<button type="button" @click="repositionTabMarker($el); preview=false" class="relative z-20 inline-flex items-center justify-center h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap ring-offset-background">Code</button>
|
||||
<div x-ref="marker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" style="width: 76px; height: 32px; left: 4px;">
|
||||
<div class="w-full h-full bg-white rounded-md shadow-sm"></div>
|
||||
</div>
|
||||
<div
|
||||
x-data="{
|
||||
tabSelected: 1,
|
||||
tabButtonClicked(tabButton){
|
||||
this.tabSelected = tabButton.id.replace('tab-button-', '');
|
||||
this.tabRepositionMarker(tabButton);
|
||||
},
|
||||
tabButtonActive(tabButton){
|
||||
return this.tabSelected == tabButton.id.replace('tab-button-', '');
|
||||
},
|
||||
tabContentActive(tabContent){
|
||||
return this.tabSelected == tabContent.id.replace('tab-content-', '');
|
||||
},
|
||||
tabRepositionMarker(el){
|
||||
this.$refs.tabMarker.style.width=el.offsetWidth + 'px';
|
||||
this.$refs.tabMarker.style.height=el.offsetHeight + 'px';
|
||||
this.$refs.tabMarker.style.left=el.offsetLeft + 'px';
|
||||
},
|
||||
}"
|
||||
|
||||
x-init="tabRepositionMarker($refs.tabButtons.firstElementChild);" class="relative w-full max-w-sm">
|
||||
|
||||
<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-2 p-1 text-gray-500 bg-gray-100 rounded-lg select-none">
|
||||
<button :id="$id('tab-button')" type="button" @click="tabButtonClicked($el); " class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Account</button>
|
||||
<button :id="$id('tab-button')" type="button" @click="tabButtonClicked($el);" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Password</button>
|
||||
<div x-ref="tabMarker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak><div class="w-full h-full bg-white rounded-md shadow-sm"></div></div>
|
||||
</div>
|
||||
<div class="relative w-full mt-2 content">
|
||||
<div :id="$id('tab-content')" x-show="tabContentActive($el)" class="relative">
|
||||
<!-- Tab Content 1 - Replace with your content -->
|
||||
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
<h3 class="text-lg font-semibold leading-none tracking-tight">Account</h3>
|
||||
<p class="text-sm text-neutral-500">Make changes to your account here. Click save when you're done.</p>
|
||||
</div>
|
||||
<div class="p-6 pt-0 space-y-2">
|
||||
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label><input type="text" placeholder="Name" id="name" value="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
|
||||
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Username</label><input type="text" placeholder="Username" id="username" value="@adamwathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
|
||||
</div>
|
||||
<div class="flex items-center p-6 pt-0"><button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">Save changes</button></div>
|
||||
</div>
|
||||
<!-- End Tab Content 1 -->
|
||||
</div>
|
||||
|
||||
<div :id="$id('tab-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
|
||||
<!-- Tab Content 2 - Replace with your content -->
|
||||
<div class="border rounded-lg shadow-sm bg-card text-neutral-900">
|
||||
<div class="flex flex-col space-y-1.5 p-6">
|
||||
<h3 class="text-lg font-semibold leading-none tracking-tight">Password</h3>
|
||||
<p class="text-sm text-neutral-500">Change your password here. After saving, you'll be logged out.</p>
|
||||
</div>
|
||||
<div class="p-6 pt-0 space-y-2">
|
||||
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="password">Current Password</label><input type="password" placeholder="Current Password" id="password" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
|
||||
<div class="space-y-1"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="password_new">New Password</label><input type="password" placeholder="New Password" id="password_new" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" /></div>
|
||||
</div>
|
||||
<div class="flex items-center p-6 pt-0"><button type="button" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition-colors duration-200 rounded-md bg-neutral-950 hover:bg-neutral-900 focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900 focus:shadow-outline focus:outline-none">Save password</button></div>
|
||||
</div>
|
||||
<!-- End Tab Content 2 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -1,3 +1,3 @@
|
||||
<input type="text"
|
||||
placeholder="Name"
|
||||
class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" />
|
||||
<div class="w-full max-w-xs mx-auto">
|
||||
<input type="text" placeholder="Name" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" />
|
||||
</div>
|
||||
15
elements/textarea-auto-resize-examples/example-01.html
Normal file
15
elements/textarea-auto-resize-examples/example-01.html
Normal file
@ -0,0 +1,15 @@
|
||||
<div class="relative w-full max-w-xs mx-auto">
|
||||
<textarea x-data="{
|
||||
resize () {
|
||||
$el.style.height = '0px';
|
||||
$el.style.height = $el.scrollHeight + 'px'
|
||||
}
|
||||
}"
|
||||
x-init="resize()"
|
||||
@input="resize()"
|
||||
type="text"
|
||||
placeholder="Type your message here. I will resize based on the height content."
|
||||
class="flex relative z-20 peer w-full h-auto min-h-[80px] px-3 py-2 text-sm bg-white border-2 border-neutral-900 placeholder:text-neutral-500 focus:text-neutral-800 focus:border-neutral-900 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
></textarea>
|
||||
<div class="absolute inset-0 z-10 w-full h-full -m-1 duration-300 ease-out translate-x-2 translate-y-2 bg-black peer-focus:m-0 peer-focus:translate-x-0 peer-focus:translate-y-0"></div>
|
||||
</div>
|
||||
14
elements/textarea-auto-resize.html
Normal file
14
elements/textarea-auto-resize.html
Normal file
@ -0,0 +1,14 @@
|
||||
<div class="w-full max-w-xs mx-auto">
|
||||
<textarea x-data="{
|
||||
resize () {
|
||||
$el.style.height = '0px';
|
||||
$el.style.height = $el.scrollHeight + 'px'
|
||||
}
|
||||
}"
|
||||
x-init="resize()"
|
||||
@input="resize()"
|
||||
type="text"
|
||||
placeholder="Type your message here. I will resize based on the height content."
|
||||
class="flex w-full h-auto min-h-[80px] px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
></textarea>
|
||||
</div>
|
||||
4
elements/textarea-examples/example-01.html
Normal file
4
elements/textarea-examples/example-01.html
Normal file
@ -0,0 +1,4 @@
|
||||
<div class="relative w-full max-w-xs mx-auto">
|
||||
<textarea type="text" placeholder="Type your message here." class="flex relative z-20 peer w-full h-auto min-h-[80px] px-3 py-2 text-sm bg-white border-2 border-neutral-900 placeholder:text-neutral-500 focus:text-neutral-800 focus:border-neutral-900 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50"></textarea>
|
||||
<div class="absolute inset-0 z-10 w-full h-full -m-1 duration-300 ease-out translate-x-2 translate-y-2 bg-black peer-focus:m-0 peer-focus:translate-x-0 peer-focus:translate-y-0"></div>
|
||||
</div>
|
||||
3
elements/textarea.html
Normal file
3
elements/textarea.html
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="w-full max-w-xs mx-auto">
|
||||
<textarea type="text" placeholder="Type your message here." class="flex w-full h-auto min-h-[80px] px-3 py-2 text-sm bg-white border rounded-md border-neutral-300 placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"></textarea>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user