brian/laravel-stubs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: brian:0ff04a5ecdb192175a8a54bf2cc5fbadde77e6e4
Branches Tags
brian:master
..
compare: brian:e5c0eae62283224cf980f13ff3f5d3cf14eafe80
Branches Tags
brian:master

8 Commits
0ff04a5ecd ... e5c0eae622

Author SHA1 Message Date
Brian Rogers
e5c0eae622 updating how modals are done 2022-09-01 12:49:25 -06:00
Brian Rogers
2120fc8c4d rewrite to conform with latest Laravel dropdown element 2022-09-01 12:48:53 -06:00
Brian Rogers
c5612ba108 adjusting text shadow offsets 2022-09-01 12:48:23 -06:00
Brian Rogers
90e5ddee96 removing default border on gradient buttons, means the hover is broken 2022-09-01 12:48:03 -06:00
Brian Rogers
7fa9bbca77 fixing template columns for some grid extensions 2022-09-01 12:47:35 -06:00
Brian Rogers
0e325bfbca adding a select to list 2022-09-01 12:47:04 -06:00
Brian Rogers
252fab0084 adding Meilisearch master key variable 2022-09-01 12:46:32 -06:00
Brian Rogers
b11660329b changing password prompt to be secret 2022-09-01 12:46:09 -06:00
11 changed files with 373 additions and 399 deletions
Expand all files Collapse all files

3
src/.env.example
View File

@@ -29,7 +29,7 @@ QUEUE_CONNECTION=sync
SESSION_DRIVER=database SESSION_DRIVER=database
SESSION_LIFETIME=120 SESSION_LIFETIME=120
MEMCACHED_HOST=memcached MEMCACHED_HOST=memcache
REDIS_HOST=redis REDIS_HOST=redis
REDIS_PASSWORD=null REDIS_PASSWORD=null
@@ -39,6 +39,7 @@ SCOUT_DRIVER=meilisearch
SCOUT_PREFIX= SCOUT_PREFIX=
SCOUT_QUEUE=false SCOUT_QUEUE=false
MEILISEARCH_HOST=http://localhost:7700 MEILISEARCH_HOST=http://localhost:7700
MEILISEARCH_KEY=
MEILISEARCH_PRIVATE_KEY= MEILISEARCH_PRIVATE_KEY=
MEILISEARCH_PUBLIC_KEY= MEILISEARCH_PUBLIC_KEY=

2
src/app/Console/Commands/CreateUser.php
View File

@@ -40,7 +40,7 @@ class CreateUser extends Command
if (empty($password)) { if (empty($password)) {
// TODO: have a way to hide the input and do a confirm password input // TODO: have a way to hide the input and do a confirm password input
$password = $this->ask("Please provide a password"); $password = $this->secret("Please provide a password");
} }
try { try {

16
src/resources/css/elements/buttons.css
View File

@@ -38,13 +38,13 @@
.button-sm[class*="button-gradient"], .button-sm[class*="button-gradient"],
.button[class*="button-gradient"], .button[class*="button-gradient"],
.button-lg[class*="button-gradient"] { .button-lg[class*="button-gradient"] {
@apply transition-all duration-300 ease-in-out border-2; @apply transition-all duration-300 ease-in-out;
} }
.button-gradient-primary { .button-gradient-primary {
@apply text-white; @apply text-white;
background: linear-gradient(to right, hsl(291, 95.9%, 61.8%), hsl(187, 100%, 41.6%)); background: linear-gradient(to right, hsl(291, 95.9%, 61.8%), hsl(187, 100%, 41.6%));
border-color: hsl(187, 100%, 41.6%); /*border-color: hsl(187, 100%, 41.6%);*/
box-shadow: 0 4px 12px 0 hsla(223, 15.7%, 65.1%, 0.1); box-shadow: 0 4px 12px 0 hsla(223, 15.7%, 65.1%, 0.1);
} }
.button-gradient-primary:hover { .button-gradient-primary:hover {
@@ -54,7 +54,7 @@
.button-gradient-secondary { .button-gradient-secondary {
@apply text-white; @apply text-white;
background: linear-gradient(to right, hsl(229, 75.9%, 65.9%), hsl(270, 36.7%, 46.5%) 90%); background: linear-gradient(to right, hsl(229, 75.9%, 65.9%), hsl(270, 36.7%, 46.5%) 90%);
border-color: hsl(270, 36.7%, 46.5%); /*border-color: hsl(270, 36.7%, 46.5%);*/
box-shadow: 0 4px 15px 0 hsla(265, 36%, 48.4%, 0.75); box-shadow: 0 4px 15px 0 hsla(265, 36%, 48.4%, 0.75);
} }
.button-gradient-secondary:hover { .button-gradient-secondary:hover {
@@ -64,7 +64,7 @@
.button-gradient-tertiary { .button-gradient-tertiary {
@apply text-white; @apply text-white;
background: linear-gradient(to right, hsl(212, 18.8%, 19.8%), hsl(211, 15.8%, 33.5%)); background: linear-gradient(to right, hsl(212, 18.8%, 19.8%), hsl(211, 15.8%, 33.5%));
border-color: hsl(211, 15.8%, 33.5%); /*border-color: hsl(211, 15.8%, 33.5%);*/
box-shadow: 0 4px 15px 0 hsla(213, 18.2%, 21.6%, 0.75); box-shadow: 0 4px 15px 0 hsla(213, 18.2%, 21.6%, 0.75);
} }
.button-gradient-tertiary:hover { .button-gradient-tertiary:hover {
@@ -75,7 +75,7 @@
.button-gradient-info { .button-gradient-info {
@apply text-white; @apply text-white;
background: linear-gradient(to right, hsl(198, 75.8%, 51.4%), hsl(218, 80.7%, 59.4%)); background: linear-gradient(to right, hsl(198, 75.8%, 51.4%), hsl(218, 80.7%, 59.4%));
border-color: hsl(218, 80.7%, 59.4%); /*border-color: hsl(218, 80.7%, 59.4%);*/
box-shadow: 0 4px 15px 0 hsla(216, 80.1%, 58.6%, 0.75); box-shadow: 0 4px 15px 0 hsla(216, 80.1%, 58.6%, 0.75);
} }
.button-gradient-info:hover { .button-gradient-info:hover {
@@ -85,7 +85,7 @@
.button-gradient-success { .button-gradient-success {
@apply text-white; @apply text-white;
background: linear-gradient(to right, hsl(151, 71.8%, 52.7%), hsl(151, 61.8%, 44.1%)); background: linear-gradient(to right, hsl(151, 71.8%, 52.7%), hsl(151, 61.8%, 44.1%));
border-color: hsl(151, 61.8%, 44.1%); /*border-color: hsl(151, 61.8%, 44.1%);*/
box-shadow: 0 4px 15px 0 hsla(155, 75.9%, 37.5%, 0.75); box-shadow: 0 4px 15px 0 hsla(155, 75.9%, 37.5%, 0.75);
} }
.button-gradient-success:hover { .button-gradient-success:hover {
@@ -95,7 +95,7 @@
.button-gradient-warning { .button-gradient-warning {
@apply text-white; @apply text-white;
background: linear-gradient(to right, hsl(44, 88%, 67.3%), hsl(14, 97.4%, 45.3%)); background: linear-gradient(to right, hsl(44, 88%, 67.3%), hsl(14, 97.4%, 45.3%));
border-color: hsl(14, 97.4%, 45.3%); /*border-color: hsl(14, 97.4%, 45.3%);*/
box-shadow: 0 4px 15px 0 hsla(15, 91.6%, 46.9%, 0.75); box-shadow: 0 4px 15px 0 hsla(15, 91.6%, 46.9%, 0.75);
} }
.button-gradient-warning:hover { .button-gradient-warning:hover {
@@ -105,7 +105,7 @@
.button-gradient-danger { .button-gradient-danger {
@apply text-white; @apply text-white;
background: linear-gradient(to right, hsl(357, 81.7%, 57.3%), hsl(358, 84%, 65.7%)); background: linear-gradient(to right, hsl(357, 81.7%, 57.3%), hsl(358, 84%, 65.7%));
border-color: hsl(358, 84%, 65.7%); /*border-color: hsl(358, 84%, 65.7%);*/
box-shadow: 0 5px 15px hsla(358, 96.1%, 69.8%, 0.4); box-shadow: 0 5px 15px hsla(358, 96.1%, 69.8%, 0.4);
} }
.button-gradient-danger:hover { .button-gradient-danger:hover {

3
src/resources/css/elements/forms.css
View File

@@ -19,7 +19,8 @@ input.form-input[type="textarea"],
input.form-input[type="time"], input.form-input[type="time"],
input.form-input[type="url"], input.form-input[type="url"],
input.form-input[type="week"], input.form-input[type="week"],
textarea.form-input { textarea.form-input,
select.form-input {
@apply relative px-3 py-1 border rounded focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 bg-white dark:bg-indigo-900 text-zinc-900 dark:text-zinc-100 border-stone-300 dark:border-stone-600 shadow dark:shadow-white; @apply relative px-3 py-1 border rounded focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 bg-white dark:bg-indigo-900 text-zinc-900 dark:text-zinc-100 border-stone-300 dark:border-stone-600 shadow dark:shadow-white;
} }

20
src/resources/css/extends/grid.css
View File

@@ -1,7 +1,25 @@
.auto-cols-max-fr { .auto-cols-max-fr {
grid-template-column: max-content 1fr; grid-template-columns: max-content 1fr;
} }
.auto-cols-max-fr-max {
grid-template-columns: max-content 1fr max-content;
}
.auto-cols-fr-max {
grid-template-columns: 1fr max-content;
}
.auto-cols-fr-min {
grid-template-columns: 1fr min-content;
}
.auto-cols-fr-auto {
grid-template-columns: 1fr auto;
}
/** Hexagon stuff **/
.hexagon-container { .hexagon-container {
--s: 150px; /* control the size */ --s: 150px; /* control the size */
--g: 10px; /* control the gap */ --g: 10px; /* control the gap */

440
src/resources/css/typography/text-shadows.css
View File

@@ -1,241 +1,241 @@
.text-shadow-slate-50 { text-shadow: 0 0 2px #f8fafc; } .text-shadow-slate-50 { text-shadow: 0px 0px 2px #f8fafc; }
.text-shadow-slate-100 { text-shadow: 0 0 2px #f1f5f9; } .text-shadow-slate-100 { text-shadow: 0px 0px 2px #f1f5f9; }
.text-shadow-slate-200 { text-shadow: 0 0 2px #e2e8f0; } .text-shadow-slate-200 { text-shadow: 0px 0px 2px #e2e8f0; }
.text-shadow-slate-300 { text-shadow: 0 0 2px #cbd5e1; } .text-shadow-slate-300 { text-shadow: 0px 0px 2px #cbd5e1; }
.text-shadow-slate-400 { text-shadow: 0 0 2px #94a3b8; } .text-shadow-slate-400 { text-shadow: 0px 0px 2px #94a3b8; }
.text-shadow-slate-500 { text-shadow: 0 0 2px #64748b; } .text-shadow-slate-500 { text-shadow: 0px 0px 2px #64748b; }
.text-shadow-slate-600 { text-shadow: 0 0 2px #475569; } .text-shadow-slate-600 { text-shadow: 0px 0px 2px #475569; }
.text-shadow-slate-700 { text-shadow: 0 0 2px #334155; } .text-shadow-slate-700 { text-shadow: 0px 0px 2px #334155; }
.text-shadow-slate-800 { text-shadow: 0 0 2px #1e293b; } .text-shadow-slate-800 { text-shadow: 0px 0px 2px #1e293b; }
.text-shadow-slate-900 { text-shadow: 0 0 2px #0f172a; } .text-shadow-slate-900 { text-shadow: 0px 0px 2px #0f172a; }
.text-shadow-gray-50 { text-shadow: 0 0 2px #f9fafb; } .text-shadow-gray-50 { text-shadow: 0px 0px 2px #f9fafb; }
.text-shadow-gray-100 { text-shadow: 0 0 2px #f3f4f6; } .text-shadow-gray-100 { text-shadow: 0px 0px 2px #f3f4f6; }
.text-shadow-gray-200 { text-shadow: 0 0 2px #e5e7eb; } .text-shadow-gray-200 { text-shadow: 0px 0px 2px #e5e7eb; }
.text-shadow-gray-300 { text-shadow: 0 0 2px #d1d5db; } .text-shadow-gray-300 { text-shadow: 0px 0px 2px #d1d5db; }
.text-shadow-gray-400 { text-shadow: 0 0 2px #9ca3af; } .text-shadow-gray-400 { text-shadow: 0px 0px 2px #9ca3af; }
.text-shadow-gray-500 { text-shadow: 0 0 2px #6b7280; } .text-shadow-gray-500 { text-shadow: 0px 0px 2px #6b7280; }
.text-shadow-gray-600 { text-shadow: 0 0 2px #4b5563; } .text-shadow-gray-600 { text-shadow: 0px 0px 2px #4b5563; }
.text-shadow-gray-700 { text-shadow: 0 0 2px #374151; } .text-shadow-gray-700 { text-shadow: 0px 0px 2px #374151; }
.text-shadow-gray-800 { text-shadow: 0 0 2px #1f2937; } .text-shadow-gray-800 { text-shadow: 0px 0px 2px #1f2937; }
.text-shadow-gray-900 { text-shadow: 0 0 2px #111827; } .text-shadow-gray-900 { text-shadow: 0px 0px 2px #111827; }
.text-shadow-zinc-50 { text-shadow: 0 0 2px #fafafa; } .text-shadow-zinc-50 { text-shadow: 0px 0px 2px #fafafa; }
.text-shadow-zinc-100 { text-shadow: 0 0 2px #f4f4f5; } .text-shadow-zinc-100 { text-shadow: 0px 0px 2px #f4f4f5; }
.text-shadow-zinc-200 { text-shadow: 0 0 2px #e4e4e7; } .text-shadow-zinc-200 { text-shadow: 0px 0px 2px #e4e4e7; }
.text-shadow-zinc-300 { text-shadow: 0 0 2px #d4d4d8; } .text-shadow-zinc-300 { text-shadow: 0px 0px 2px #d4d4d8; }
.text-shadow-zinc-400 { text-shadow: 0 0 2px #a1a1aa; } .text-shadow-zinc-400 { text-shadow: 0px 0px 2px #a1a1aa; }
.text-shadow-zinc-500 { text-shadow: 0 0 2px #71717a; } .text-shadow-zinc-500 { text-shadow: 0px 0px 2px #71717a; }
.text-shadow-zinc-600 { text-shadow: 0 0 2px #52525b; } .text-shadow-zinc-600 { text-shadow: 0px 0px 2px #52525b; }
.text-shadow-zinc-700 { text-shadow: 0 0 2px #3f3f46; } .text-shadow-zinc-700 { text-shadow: 0px 0px 2px #3f3f46; }
.text-shadow-zinc-800 { text-shadow: 0 0 2px #27272a; } .text-shadow-zinc-800 { text-shadow: 0px 0px 2px #27272a; }
.text-shadow-zinc-900 { text-shadow: 0 0 2px #18181b; } .text-shadow-zinc-900 { text-shadow: 0px 0px 2px #18181b; }
.text-shadow-neutral-50 { text-shadow: 0 0 2px #fafafa; } .text-shadow-neutral-50 { text-shadow: 0px 0px 2px #fafafa; }
.text-shadow-neutral-100 { text-shadow: 0 0 2px #f5f5f5; } .text-shadow-neutral-100 { text-shadow: 0px 0px 2px #f5f5f5; }
.text-shadow-neutral-200 { text-shadow: 0 0 2px #e5e5e5; } .text-shadow-neutral-200 { text-shadow: 0px 0px 2px #e5e5e5; }
.text-shadow-neutral-300 { text-shadow: 0 0 2px #d4d4d4; } .text-shadow-neutral-300 { text-shadow: 0px 0px 2px #d4d4d4; }
.text-shadow-neutral-400 { text-shadow: 0 0 2px #a3a3a3; } .text-shadow-neutral-400 { text-shadow: 0px 0px 2px #a3a3a3; }
.text-shadow-neutral-500 { text-shadow: 0 0 2px #737373; } .text-shadow-neutral-500 { text-shadow: 0px 0px 2px #737373; }
.text-shadow-neutral-600 { text-shadow: 0 0 2px #525252; } .text-shadow-neutral-600 { text-shadow: 0px 0px 2px #525252; }
.text-shadow-neutral-700 { text-shadow: 0 0 2px #404040; } .text-shadow-neutral-700 { text-shadow: 0px 0px 2px #404040; }
.text-shadow-neutral-800 { text-shadow: 0 0 2px #262626; } .text-shadow-neutral-800 { text-shadow: 0px 0px 2px #262626; }
.text-shadow-neutral-900 { text-shadow: 0 0 2px #171717; } .text-shadow-neutral-900 { text-shadow: 0px 0px 2px #171717; }
.text-shadow-stone-50 { text-shadow: 0 0 2px #fafaf9; } .text-shadow-stone-50 { text-shadow: 0px 0px 2px #fafaf9; }
.text-shadow-stone-100 { text-shadow: 0 0 2px #f5f5f4; } .text-shadow-stone-100 { text-shadow: 0px 0px 2px #f5f5f4; }
.text-shadow-stone-200 { text-shadow: 0 0 2px #e7e5e4; } .text-shadow-stone-200 { text-shadow: 0px 0px 2px #e7e5e4; }
.text-shadow-stone-300 { text-shadow: 0 0 2px #d6d3d1; } .text-shadow-stone-300 { text-shadow: 0px 0px 2px #d6d3d1; }
.text-shadow-stone-400 { text-shadow: 0 0 2px #a8a29e; } .text-shadow-stone-400 { text-shadow: 0px 0px 2px #a8a29e; }
.text-shadow-stone-500 { text-shadow: 0 0 2px #78716c; } .text-shadow-stone-500 { text-shadow: 0px 0px 2px #78716c; }
.text-shadow-stone-600 { text-shadow: 0 0 2px #57534e; } .text-shadow-stone-600 { text-shadow: 0px 0px 2px #57534e; }
.text-shadow-stone-700 { text-shadow: 0 0 2px #44403c; } .text-shadow-stone-700 { text-shadow: 0px 0px 2px #44403c; }
.text-shadow-stone-800 { text-shadow: 0 0 2px #292524; } .text-shadow-stone-800 { text-shadow: 0px 0px 2px #292524; }
.text-shadow-stone-900 { text-shadow: 0 0 2px #1c1917; } .text-shadow-stone-900 { text-shadow: 0px 0px 2px #1c1917; }
.text-shadow-red-50 { text-shadow: 0 0 2px #fef2f2; } .text-shadow-red-50 { text-shadow: 0px 0px 2px #fef2f2; }
.text-shadow-red-100 { text-shadow: 0 0 2px #fee2e2; } .text-shadow-red-100 { text-shadow: 0px 0px 2px #fee2e2; }
.text-shadow-red-200 { text-shadow: 0 0 2px #fecaca; } .text-shadow-red-200 { text-shadow: 0px 0px 2px #fecaca; }
.text-shadow-red-300 { text-shadow: 0 0 2px #fca5a5; } .text-shadow-red-300 { text-shadow: 0px 0px 2px #fca5a5; }
.text-shadow-red-400 { text-shadow: 0 0 2px #f87171; } .text-shadow-red-400 { text-shadow: 0px 0px 2px #f87171; }
.text-shadow-red-500 { text-shadow: 0 0 2px #ef4444; } .text-shadow-red-500 { text-shadow: 0px 0px 2px #ef4444; }
.text-shadow-red-600 { text-shadow: 0 0 2px #dc2626; } .text-shadow-red-600 { text-shadow: 0px 0px 2px #dc2626; }
.text-shadow-red-700 { text-shadow: 0 0 2px #b91c1c; } .text-shadow-red-700 { text-shadow: 0px 0px 2px #b91c1c; }
.text-shadow-red-800 { text-shadow: 0 0 2px #991b1b; } .text-shadow-red-800 { text-shadow: 0px 0px 2px #991b1b; }
.text-shadow-red-900 { text-shadow: 0 0 2px #7f1d1d; } .text-shadow-red-900 { text-shadow: 0px 0px 2px #7f1d1d; }
.text-shadow-orange-50 { text-shadow: 0 0 2px #fff7ed; } .text-shadow-orange-50 { text-shadow: 0px 0px 2px #fff7ed; }
.text-shadow-orange-100 { text-shadow: 0 0 2px #ffedd5; } .text-shadow-orange-100 { text-shadow: 0px 0px 2px #ffedd5; }
.text-shadow-orange-200 { text-shadow: 0 0 2px #fed7aa; } .text-shadow-orange-200 { text-shadow: 0px 0px 2px #fed7aa; }
.text-shadow-orange-300 { text-shadow: 0 0 2px #fdba74; } .text-shadow-orange-300 { text-shadow: 0px 0px 2px #fdba74; }
.text-shadow-orange-400 { text-shadow: 0 0 2px #fb923c; } .text-shadow-orange-400 { text-shadow: 0px 0px 2px #fb923c; }
.text-shadow-orange-500 { text-shadow: 0 0 2px #f97316; } .text-shadow-orange-500 { text-shadow: 0px 0px 2px #f97316; }
.text-shadow-orange-600 { text-shadow: 0 0 2px #ea580c; } .text-shadow-orange-600 { text-shadow: 0px 0px 2px #ea580c; }
.text-shadow-orange-700 { text-shadow: 0 0 2px #c2410c; } .text-shadow-orange-700 { text-shadow: 0px 0px 2px #c2410c; }
.text-shadow-orange-800 { text-shadow: 0 0 2px #9a3412; } .text-shadow-orange-800 { text-shadow: 0px 0px 2px #9a3412; }
.text-shadow-orange-900 { text-shadow: 0 0 2px #7c2d12; } .text-shadow-orange-900 { text-shadow: 0px 0px 2px #7c2d12; }
.text-shadow-amber-50 { text-shadow: 0 0 2px #fffbeb; } .text-shadow-amber-50 { text-shadow: 0px 0px 2px #fffbeb; }
.text-shadow-amber-100 { text-shadow: 0 0 2px #fef3c7; } .text-shadow-amber-100 { text-shadow: 0px 0px 2px #fef3c7; }
.text-shadow-amber-200 { text-shadow: 0 0 2px #fde68a; } .text-shadow-amber-200 { text-shadow: 0px 0px 2px #fde68a; }
.text-shadow-amber-300 { text-shadow: 0 0 2px #fcd34d; } .text-shadow-amber-300 { text-shadow: 0px 0px 2px #fcd34d; }
.text-shadow-amber-400 { text-shadow: 0 0 2px #fbbf24; } .text-shadow-amber-400 { text-shadow: 0px 0px 2px #fbbf24; }
.text-shadow-amber-500 { text-shadow: 0 0 2px #f59e0b; } .text-shadow-amber-500 { text-shadow: 0px 0px 2px #f59e0b; }
.text-shadow-amber-600 { text-shadow: 0 0 2px #d97706; } .text-shadow-amber-600 { text-shadow: 0px 0px 2px #d97706; }
.text-shadow-amber-700 { text-shadow: 0 0 2px #b45309; } .text-shadow-amber-700 { text-shadow: 0px 0px 2px #b45309; }
.text-shadow-amber-800 { text-shadow: 0 0 2px #92400e; } .text-shadow-amber-800 { text-shadow: 0px 0px 2px #92400e; }
.text-shadow-amber-900 { text-shadow: 0 0 2px #78350f; } .text-shadow-amber-900 { text-shadow: 0px 0px 2px #78350f; }
.text-shadow-yellow-50 { text-shadow: 0 0 2px #fefce8; } .text-shadow-yellow-50 { text-shadow: 0px 0px 2px #fefce8; }
.text-shadow-yellow-100 { text-shadow: 0 0 2px #fef9c3; } .text-shadow-yellow-100 { text-shadow: 0px 0px 2px #fef9c3; }
.text-shadow-yellow-200 { text-shadow: 0 0 2px #fef08a; } .text-shadow-yellow-200 { text-shadow: 0px 0px 2px #fef08a; }
.text-shadow-yellow-300 { text-shadow: 0 0 2px #fde047; } .text-shadow-yellow-300 { text-shadow: 0px 0px 2px #fde047; }
.text-shadow-yellow-400 { text-shadow: 0 0 2px #facc15; } .text-shadow-yellow-400 { text-shadow: 0px 0px 2px #facc15; }
.text-shadow-yellow-500 { text-shadow: 0 0 2px #eab308; } .text-shadow-yellow-500 { text-shadow: 0px 0px 2px #eab308; }
.text-shadow-yellow-600 { text-shadow: 0 0 2px #ca8a04; } .text-shadow-yellow-600 { text-shadow: 0px 0px 2px #ca8a04; }
.text-shadow-yellow-700 { text-shadow: 0 0 2px #a16207; } .text-shadow-yellow-700 { text-shadow: 0px 0px 2px #a16207; }
.text-shadow-yellow-800 { text-shadow: 0 0 2px #854d0e; } .text-shadow-yellow-800 { text-shadow: 0px 0px 2px #854d0e; }
.text-shadow-yellow-900 { text-shadow: 0 0 2px #713f12; } .text-shadow-yellow-900 { text-shadow: 0px 0px 2px #713f12; }
.text-shadow-lime-50 { text-shadow: 0 0 2px #f7fee7; } .text-shadow-lime-50 { text-shadow: 0px 0px 2px #f7fee7; }
.text-shadow-lime-100 { text-shadow: 0 0 2px #ecfccb; } .text-shadow-lime-100 { text-shadow: 0px 0px 2px #ecfccb; }
.text-shadow-lime-200 { text-shadow: 0 0 2px #d9f99d; } .text-shadow-lime-200 { text-shadow: 0px 0px 2px #d9f99d; }
.text-shadow-lime-300 { text-shadow: 0 0 2px #bef264; } .text-shadow-lime-300 { text-shadow: 0px 0px 2px #bef264; }
.text-shadow-lime-400 { text-shadow: 0 0 2px #a3e635; } .text-shadow-lime-400 { text-shadow: 0px 0px 2px #a3e635; }
.text-shadow-lime-500 { text-shadow: 0 0 2px #84cc16; } .text-shadow-lime-500 { text-shadow: 0px 0px 2px #84cc16; }
.text-shadow-lime-600 { text-shadow: 0 0 2px #65a30d; } .text-shadow-lime-600 { text-shadow: 0px 0px 2px #65a30d; }
.text-shadow-lime-700 { text-shadow: 0 0 2px #4d7c0f; } .text-shadow-lime-700 { text-shadow: 0px 0px 2px #4d7c0f; }
.text-shadow-lime-800 { text-shadow: 0 0 2px #3f6212; } .text-shadow-lime-800 { text-shadow: 0px 0px 2px #3f6212; }
.text-shadow-lime-900 { text-shadow: 0 0 2px #365314; } .text-shadow-lime-900 { text-shadow: 0px 0px 2px #365314; }
.text-shadow-green-50 { text-shadow: 0 0 2px #f0fdf4; } .text-shadow-green-50 { text-shadow: 0px 0px 2px #f0fdf4; }
.text-shadow-green-100 { text-shadow: 0 0 2px #dcfce7; } .text-shadow-green-100 { text-shadow: 0px 0px 2px #dcfce7; }
.text-shadow-green-200 { text-shadow: 0 0 2px #bbf7d0; } .text-shadow-green-200 { text-shadow: 0px 0px 2px #bbf7d0; }
.text-shadow-green-300 { text-shadow: 0 0 2px #86efac; } .text-shadow-green-300 { text-shadow: 0px 0px 2px #86efac; }
.text-shadow-green-400 { text-shadow: 0 0 2px #4ade80; } .text-shadow-green-400 { text-shadow: 0px 0px 2px #4ade80; }
.text-shadow-green-500 { text-shadow: 0 0 2px #22c55e; } .text-shadow-green-500 { text-shadow: 0px 0px 2px #22c55e; }
.text-shadow-green-600 { text-shadow: 0 0 2px #16a34a; } .text-shadow-green-600 { text-shadow: 0px 0px 2px #16a34a; }
.text-shadow-green-700 { text-shadow: 0 0 2px #15803d; } .text-shadow-green-700 { text-shadow: 0px 0px 2px #15803d; }
.text-shadow-green-800 { text-shadow: 0 0 2px #166534; } .text-shadow-green-800 { text-shadow: 0px 0px 2px #166534; }
.text-shadow-green-900 { text-shadow: 0 0 2px #14532d; } .text-shadow-green-900 { text-shadow: 0px 0px 2px #14532d; }
.text-shadow-emerald-50 { text-shadow: 0 0 2px #ecfdf5; } .text-shadow-emerald-50 { text-shadow: 0px 0px 2px #ecfdf5; }
.text-shadow-emerald-100 { text-shadow: 0 0 2px #d1fae5; } .text-shadow-emerald-100 { text-shadow: 0px 0px 2px #d1fae5; }
.text-shadow-emerald-200 { text-shadow: 0 0 2px #a7f3d0; } .text-shadow-emerald-200 { text-shadow: 0px 0px 2px #a7f3d0; }
.text-shadow-emerald-300 { text-shadow: 0 0 2px #6ee7b7; } .text-shadow-emerald-300 { text-shadow: 0px 0px 2px #6ee7b7; }
.text-shadow-emerald-400 { text-shadow: 0 0 2px #34d399; } .text-shadow-emerald-400 { text-shadow: 0px 0px 2px #34d399; }
.text-shadow-emerald-500 { text-shadow: 0 0 2px #10b981; } .text-shadow-emerald-500 { text-shadow: 0px 0px 2px #10b981; }
.text-shadow-emerald-600 { text-shadow: 0 0 2px #059669; } .text-shadow-emerald-600 { text-shadow: 0px 0px 2px #059669; }
.text-shadow-emerald-700 { text-shadow: 0 0 2px #047857; } .text-shadow-emerald-700 { text-shadow: 0px 0px 2px #047857; }
.text-shadow-emerald-800 { text-shadow: 0 0 2px #065f46; } .text-shadow-emerald-800 { text-shadow: 0px 0px 2px #065f46; }
.text-shadow-emerald-900 { text-shadow: 0 0 2px #064e3b; } .text-shadow-emerald-900 { text-shadow: 0px 0px 2px #064e3b; }
.text-shadow-teal-50 { text-shadow: 0 0 2px #f0fdfa; } .text-shadow-teal-50 { text-shadow: 0px 0px 2px #f0fdfa; }
.text-shadow-teal-100 { text-shadow: 0 0 2px #ccfbf1; } .text-shadow-teal-100 { text-shadow: 0px 0px 2px #ccfbf1; }
.text-shadow-teal-200 { text-shadow: 0 0 2px #99f6e4; } .text-shadow-teal-200 { text-shadow: 0px 0px 2px #99f6e4; }
.text-shadow-teal-300 { text-shadow: 0 0 2px #5eead4; } .text-shadow-teal-300 { text-shadow: 0px 0px 2px #5eead4; }
.text-shadow-teal-400 { text-shadow: 0 0 2px #2dd4bf; } .text-shadow-teal-400 { text-shadow: 0px 0px 2px #2dd4bf; }
.text-shadow-teal-500 { text-shadow: 0 0 2px #14b8a6; } .text-shadow-teal-500 { text-shadow: 0px 0px 2px #14b8a6; }
.text-shadow-teal-600 { text-shadow: 0 0 2px #0d9488; } .text-shadow-teal-600 { text-shadow: 0px 0px 2px #0d9488; }
.text-shadow-teal-700 { text-shadow: 0 0 2px #0f766e; } .text-shadow-teal-700 { text-shadow: 0px 0px 2px #0f766e; }
.text-shadow-teal-800 { text-shadow: 0 0 2px #115e59; } .text-shadow-teal-800 { text-shadow: 0px 0px 2px #115e59; }
.text-shadow-teal-900 { text-shadow: 0 0 2px #134e4a; } .text-shadow-teal-900 { text-shadow: 0px 0px 2px #134e4a; }
.text-shadow-cyan-50 { text-shadow: 0 0 2px #ecfeff; } .text-shadow-cyan-50 { text-shadow: 0px 0px 2px #ecfeff; }
.text-shadow-cyan-100 { text-shadow: 0 0 2px #cffafe; } .text-shadow-cyan-100 { text-shadow: 0px 0px 2px #cffafe; }
.text-shadow-cyan-200 { text-shadow: 0 0 2px #a5f3fc; } .text-shadow-cyan-200 { text-shadow: 0px 0px 2px #a5f3fc; }
.text-shadow-cyan-300 { text-shadow: 0 0 2px #67e8f9; } .text-shadow-cyan-300 { text-shadow: 0px 0px 2px #67e8f9; }
.text-shadow-cyan-400 { text-shadow: 0 0 2px #22d3ee; } .text-shadow-cyan-400 { text-shadow: 0px 0px 2px #22d3ee; }
.text-shadow-cyan-500 { text-shadow: 0 0 2px #06b6d4; } .text-shadow-cyan-500 { text-shadow: 0px 0px 2px #06b6d4; }
.text-shadow-cyan-600 { text-shadow: 0 0 2px #0891b2; } .text-shadow-cyan-600 { text-shadow: 0px 0px 2px #0891b2; }
.text-shadow-cyan-700 { text-shadow: 0 0 2px #0e7490; } .text-shadow-cyan-700 { text-shadow: 0px 0px 2px #0e7490; }
.text-shadow-cyan-800 { text-shadow: 0 0 2px #155e75; } .text-shadow-cyan-800 { text-shadow: 0px 0px 2px #155e75; }
.text-shadow-cyan-900 { text-shadow: 0 0 2px #164e63; } .text-shadow-cyan-900 { text-shadow: 0px 0px 2px #164e63; }
.text-shadow-sky-50 { text-shadow: 0 0 2px #f0f9ff; } .text-shadow-sky-50 { text-shadow: 0px 0px 2px #f0f9ff; }
.text-shadow-sky-100 { text-shadow: 0 0 2px #e0f2fe; } .text-shadow-sky-100 { text-shadow: 0px 0px 2px #e0f2fe; }
.text-shadow-sky-200 { text-shadow: 0 0 2px #bae6fd; } .text-shadow-sky-200 { text-shadow: 0px 0px 2px #bae6fd; }
.text-shadow-sky-300 { text-shadow: 0 0 2px #7dd3fc; } .text-shadow-sky-300 { text-shadow: 0px 0px 2px #7dd3fc; }
.text-shadow-sky-400 { text-shadow: 0 0 2px #38bdf8; } .text-shadow-sky-400 { text-shadow: 0px 0px 2px #38bdf8; }
.text-shadow-sky-500 { text-shadow: 0 0 2px #0ea5e9; } .text-shadow-sky-500 { text-shadow: 0px 0px 2px #0ea5e9; }
.text-shadow-sky-600 { text-shadow: 0 0 2px #0284c7; } .text-shadow-sky-600 { text-shadow: 0px 0px 2px #0284c7; }
.text-shadow-sky-700 { text-shadow: 0 0 2px #0369a1; } .text-shadow-sky-700 { text-shadow: 0px 0px 2px #0369a1; }
.text-shadow-sky-800 { text-shadow: 0 0 2px #075985; } .text-shadow-sky-800 { text-shadow: 0px 0px 2px #075985; }
.text-shadow-sky-900 { text-shadow: 0 0 2px #0c4a6e; } .text-shadow-sky-900 { text-shadow: 0px 0px 2px #0c4a6e; }
.text-shadow-blue-50 { text-shadow: 0 0 2px #eff6ff; } .text-shadow-blue-50 { text-shadow: 0px 0px 2px #eff6ff; }
.text-shadow-blue-100 { text-shadow: 0 0 2px #dbeafe; } .text-shadow-blue-100 { text-shadow: 0px 0px 2px #dbeafe; }
.text-shadow-blue-200 { text-shadow: 0 0 2px #bfdbfe; } .text-shadow-blue-200 { text-shadow: 0px 0px 2px #bfdbfe; }
.text-shadow-blue-300 { text-shadow: 0 0 2px #93c5fd; } .text-shadow-blue-300 { text-shadow: 0px 0px 2px #93c5fd; }
.text-shadow-blue-400 { text-shadow: 0 0 2px #60a5fa; } .text-shadow-blue-400 { text-shadow: 0px 0px 2px #60a5fa; }
.text-shadow-blue-500 { text-shadow: 0 0 2px #3b82f6; } .text-shadow-blue-500 { text-shadow: 0px 0px 2px #3b82f6; }
.text-shadow-blue-600 { text-shadow: 0 0 2px #2563eb; } .text-shadow-blue-600 { text-shadow: 0px 0px 2px #2563eb; }
.text-shadow-blue-700 { text-shadow: 0 0 2px #1d4ed8; } .text-shadow-blue-700 { text-shadow: 0px 0px 2px #1d4ed8; }
.text-shadow-blue-800 { text-shadow: 0 0 2px #1e40af; } .text-shadow-blue-800 { text-shadow: 0px 0px 2px #1e40af; }
.text-shadow-blue-900 { text-shadow: 0 0 2px #1e3a8a; } .text-shadow-blue-900 { text-shadow: 0px 0px 2px #1e3a8a; }
.text-shadow-indigo-50 { text-shadow: 0 0 2px #eef2ff; } .text-shadow-indigo-50 { text-shadow: 0px 0px 2px #eef2ff; }
.text-shadow-indigo-100 { text-shadow: 0 0 2px #e0e7ff; } .text-shadow-indigo-100 { text-shadow: 0px 0px 2px #e0e7ff; }
.text-shadow-indigo-200 { text-shadow: 0 0 2px #c7d2fe; } .text-shadow-indigo-200 { text-shadow: 0px 0px 2px #c7d2fe; }
.text-shadow-indigo-300 { text-shadow: 0 0 2px #a5b4fc; } .text-shadow-indigo-300 { text-shadow: 0px 0px 2px #a5b4fc; }
.text-shadow-indigo-400 { text-shadow: 0 0 2px #818cf8; } .text-shadow-indigo-400 { text-shadow: 0px 0px 2px #818cf8; }
.text-shadow-indigo-500 { text-shadow: 0 0 2px #6366f1; } .text-shadow-indigo-500 { text-shadow: 0px 0px 2px #6366f1; }
.text-shadow-indigo-600 { text-shadow: 0 0 2px #4f46e5; } .text-shadow-indigo-600 { text-shadow: 0px 0px 2px #4f46e5; }
.text-shadow-indigo-700 { text-shadow: 0 0 2px #4338ca; } .text-shadow-indigo-700 { text-shadow: 0px 0px 2px #4338ca; }
.text-shadow-indigo-800 { text-shadow: 0 0 2px #3730a3; } .text-shadow-indigo-800 { text-shadow: 0px 0px 2px #3730a3; }
.text-shadow-indigo-900 { text-shadow: 0 0 2px #312e81; } .text-shadow-indigo-900 { text-shadow: 0px 0px 2px #312e81; }
.text-shadow-violet-50 { text-shadow: 0 0 2px #f5f3ff; } .text-shadow-violet-50 { text-shadow: 0px 0px 2px #f5f3ff; }
.text-shadow-violet-100 { text-shadow: 0 0 2px #ede9fe; } .text-shadow-violet-100 { text-shadow: 0px 0px 2px #ede9fe; }
.text-shadow-violet-200 { text-shadow: 0 0 2px #ddd6fe; } .text-shadow-violet-200 { text-shadow: 0px 0px 2px #ddd6fe; }
.text-shadow-violet-300 { text-shadow: 0 0 2px #c4b5fd; } .text-shadow-violet-300 { text-shadow: 0px 0px 2px #c4b5fd; }
.text-shadow-violet-400 { text-shadow: 0 0 2px #a78bfa; } .text-shadow-violet-400 { text-shadow: 0px 0px 2px #a78bfa; }
.text-shadow-violet-500 { text-shadow: 0 0 2px #8b5cf6; } .text-shadow-violet-500 { text-shadow: 0px 0px 2px #8b5cf6; }
.text-shadow-violet-600 { text-shadow: 0 0 2px #7c3aed; } .text-shadow-violet-600 { text-shadow: 0px 0px 2px #7c3aed; }
.text-shadow-violet-700 { text-shadow: 0 0 2px #6d28d9; } .text-shadow-violet-700 { text-shadow: 0px 0px 2px #6d28d9; }
.text-shadow-violet-800 { text-shadow: 0 0 2px #5b21b6; } .text-shadow-violet-800 { text-shadow: 0px 0px 2px #5b21b6; }
.text-shadow-violet-900 { text-shadow: 0 0 2px #4c1d95; } .text-shadow-violet-900 { text-shadow: 0px 0px 2px #4c1d95; }
.text-shadow-purple-50 { text-shadow: 0 0 2px #faf5ff; } .text-shadow-purple-50 { text-shadow: 0px 0px 2px #faf5ff; }
.text-shadow-purple-100 { text-shadow: 0 0 2px #f3e8ff; } .text-shadow-purple-100 { text-shadow: 0px 0px 2px #f3e8ff; }
.text-shadow-purple-200 { text-shadow: 0 0 2px #e9d5ff; } .text-shadow-purple-200 { text-shadow: 0px 0px 2px #e9d5ff; }
.text-shadow-purple-300 { text-shadow: 0 0 2px #d8b4fe; } .text-shadow-purple-300 { text-shadow: 0px 0px 2px #d8b4fe; }
.text-shadow-purple-400 { text-shadow: 0 0 2px #c084fc; } .text-shadow-purple-400 { text-shadow: 0px 0px 2px #c084fc; }
.text-shadow-purple-500 { text-shadow: 0 0 2px #a855f7; } .text-shadow-purple-500 { text-shadow: 0px 0px 2px #a855f7; }
.text-shadow-purple-600 { text-shadow: 0 0 2px #9333ea; } .text-shadow-purple-600 { text-shadow: 0px 0px 2px #9333ea; }
.text-shadow-purple-700 { text-shadow: 0 0 2px #7e22ce; } .text-shadow-purple-700 { text-shadow: 0px 0px 2px #7e22ce; }
.text-shadow-purple-800 { text-shadow: 0 0 2px #6b21a8; } .text-shadow-purple-800 { text-shadow: 0px 0px 2px #6b21a8; }
.text-shadow-purple-900 { text-shadow: 0 0 2px #581c87; } .text-shadow-purple-900 { text-shadow: 0px 0px 2px #581c87; }
.text-shadow-fuchsia-50 { text-shadow: 0 0 2px #fdf4ff; } .text-shadow-fuchsia-50 { text-shadow: 0px 0px 2px #fdf4ff; }
.text-shadow-fuchsia-100 { text-shadow: 0 0 2px #fae8ff; } .text-shadow-fuchsia-100 { text-shadow: 0px 0px 2px #fae8ff; }
.text-shadow-fuchsia-200 { text-shadow: 0 0 2px #f5d0fe; } .text-shadow-fuchsia-200 { text-shadow: 0px 0px 2px #f5d0fe; }
.text-shadow-fuchsia-300 { text-shadow: 0 0 2px #f0abfc; } .text-shadow-fuchsia-300 { text-shadow: 0px 0px 2px #f0abfc; }
.text-shadow-fuchsia-400 { text-shadow: 0 0 2px #e879f9; } .text-shadow-fuchsia-400 { text-shadow: 0px 0px 2px #e879f9; }
.text-shadow-fuchsia-500 { text-shadow: 0 0 2px #d946ef; } .text-shadow-fuchsia-500 { text-shadow: 0px 0px 2px #d946ef; }
.text-shadow-fuchsia-600 { text-shadow: 0 0 2px #c026d3; } .text-shadow-fuchsia-600 { text-shadow: 0px 0px 2px #c026d3; }
.text-shadow-fuchsia-700 { text-shadow: 0 0 2px #a21caf; } .text-shadow-fuchsia-700 { text-shadow: 0px 0px 2px #a21caf; }
.text-shadow-fuchsia-800 { text-shadow: 0 0 2px #86198f; } .text-shadow-fuchsia-800 { text-shadow: 0px 0px 2px #86198f; }
.text-shadow-fuchsia-900 { text-shadow: 0 0 2px #701a75; } .text-shadow-fuchsia-900 { text-shadow: 0px 0px 2px #701a75; }
.text-shadow-pink-50 { text-shadow: 0 0 2px #fdf2f8; } .text-shadow-pink-50 { text-shadow: 0px 0px 2px #fdf2f8; }
.text-shadow-pink-100 { text-shadow: 0 0 2px #fce7f3; } .text-shadow-pink-100 { text-shadow: 0px 0px 2px #fce7f3; }
.text-shadow-pink-200 { text-shadow: 0 0 2px #fbcfe8; } .text-shadow-pink-200 { text-shadow: 0px 0px 2px #fbcfe8; }
.text-shadow-pink-300 { text-shadow: 0 0 2px #f9a8d4; } .text-shadow-pink-300 { text-shadow: 0px 0px 2px #f9a8d4; }
.text-shadow-pink-400 { text-shadow: 0 0 2px #f472b6; } .text-shadow-pink-400 { text-shadow: 0px 0px 2px #f472b6; }
.text-shadow-pink-500 { text-shadow: 0 0 2px #ec4899; } .text-shadow-pink-500 { text-shadow: 0px 0px 2px #ec4899; }
.text-shadow-pink-600 { text-shadow: 0 0 2px #db2777; } .text-shadow-pink-600 { text-shadow: 0px 0px 2px #db2777; }
.text-shadow-pink-700 { text-shadow: 0 0 2px #be185d; } .text-shadow-pink-700 { text-shadow: 0px 0px 2px #be185d; }
.text-shadow-pink-800 { text-shadow: 0 0 2px #9d174d; } .text-shadow-pink-800 { text-shadow: 0px 0px 2px #9d174d; }
.text-shadow-pink-900 { text-shadow: 0 0 2px #831843; } .text-shadow-pink-900 { text-shadow: 0px 0px 2px #831843; }
.text-shadow-rose-50 { text-shadow: 0 0 2px #fff1f2; } .text-shadow-rose-50 { text-shadow: 0px 0px 2px #fff1f2; }
.text-shadow-rose-100 { text-shadow: 0 0 2px #ffe4e6; } .text-shadow-rose-100 { text-shadow: 0px 0px 2px #ffe4e6; }
.text-shadow-rose-200 { text-shadow: 0 0 2px #fecdd3; } .text-shadow-rose-200 { text-shadow: 0px 0px 2px #fecdd3; }
.text-shadow-rose-300 { text-shadow: 0 0 2px #fda4af; } .text-shadow-rose-300 { text-shadow: 0px 0px 2px #fda4af; }
.text-shadow-rose-400 { text-shadow: 0 0 2px #fb7185; } .text-shadow-rose-400 { text-shadow: 0px 0px 2px #fb7185; }
.text-shadow-rose-500 { text-shadow: 0 0 2px #f43f5e; } .text-shadow-rose-500 { text-shadow: 0px 0px 2px #f43f5e; }
.text-shadow-rose-600 { text-shadow: 0 0 2px #e11d48; } .text-shadow-rose-600 { text-shadow: 0px 0px 2px #e11d48; }
.text-shadow-rose-700 { text-shadow: 0 0 2px #be123c; } .text-shadow-rose-700 { text-shadow: 0px 0px 2px #be123c; }
.text-shadow-rose-800 { text-shadow: 0 0 2px #9f1239; } .text-shadow-rose-800 { text-shadow: 0px 0px 2px #9f1239; }
.text-shadow-rose-900 { text-shadow: 0 0 2px #881337; } .text-shadow-rose-900 { text-shadow: 0px 0px 2px #881337; }

187
src/resources/js/Components/DropdownMenu.vue
View File

@@ -1,110 +1,95 @@
<template> <script setup>
<transition leave-active-class="duration-200"> import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
<div class="relative">
<div class="hover:cursor-pointer" @click="show = !show">
<slot name="trigger">
<svg v-show="!show" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class=""><polyline points="6 9 12 15 18 9"></polyline></svg>
<svg v-show="show" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class=""><polyline points="6 9 12 15 18 9"></polyline></svg>
</slot>
</div>
<div v-show="show" class="fixed inset-0 z-40" @click="show = false"></div> const props = defineProps({
align: {
<transition enter-active-class="ease-out duration-300" type: String,
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" default: 'right',
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<div v-show="show" @click="show = false" class="flex flex-col absolute right-0 bg-white border border-gray-300 shadow-md w-max z-50">
<slot></slot>
</div>
</transition>
</div>
</transition>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
props: {
maxWidth: {
type: String,
default: '2xl',
},
}, },
width: {
setup(props) { type: String,
let show = ref(false) default: '48',
return { show }
}, },
contentClasses: {
mounted() { type: Array,
document.addEventListener('keydown', this.closeOnEscape) default: () => ['py-1', 'bg-white'],
},
beforeDestroy() {
document.removeEventListener('keydown', this.closeOnEscape)
},
computed: {
maxWidthClass() {
return {
'sm': 'sm:max-w-sm',
'md': 'sm:max-w-md',
'lg': 'sm:max-w-lg',
'xl': 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
}[this.maxWidth]
},
},
methods: {
closeOnEscape(event) {
if (event.key === 'Escape' && this.show) {
this.show = false
}
},
}, },
}) })
// variables
let open = ref(false)
// computed properties
const widthClass = computed(() => {
return {
'48': 'w-48',
'52': 'w-52',
'56': 'w-56',
'60': 'w-60',
'64': 'w-64',
'72': 'w-72',
'80': 'w-80',
'96': 'w-96',
}[props.width.toString()]
})
const alignmentClasses = computed(() => {
if (props.align === 'left') {
return 'origin-top-left left-0'
}
if (props.align === 'right') {
return 'origin-top-right right-0'
}
return 'origin-top'
})
// lifecycle hooks
onMounted(() => {
document.addEventListener('keydown', closeOnEscape)
})
onBeforeUnmount(() => {
document.removeEventListener('keydown', closeOnEscape)
})
// methods
const closeOnEscape = (event) => {
if (open.value && event.key === 'Escape') {
open.value = false
}
}
</script> </script>
<style scoped> <template>
/*.rotate { animation: rotation 2s infinite linear; } <div class="relative">
<div @click="open = ! open">
<slot name="trigger"></slot>
</div>
@keyframes rotation { <!-- Full Screen Dropdown Overlay -->
from { transform: rotate(0deg); } <div v-show="open" class="fixed inset-0 z-40" @click="open = false"></div>
to { transform: rotate(359deg); }
}
.dropdown-menu { <transition
display: flex; enter-active-class="transition ease-out duration-200"
flex-direction: column; enter-from-class="transform opacity-0 scale-95"
position: absolute; enter-to-class="transform opacity-100 scale-100"
right: 0; leave-active-class="transition ease-in duration-75"
background-color: hsl(0, 0%, 100%); leave-from-class="transform opacity-100 scale-100"
border: 1px solid hsl(240, 4.9%, 83.9%); leave-to-class="transform opacity-0 scale-95"
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); >
width: max-content; <div
} v-show="open"
class="absolute z-50 mt-2 rounded-md shadow-lg"
.dropdown-link { :class="[widthClass, alignmentClasses]"
display: flex; style="display: none;"
padding: 1rem 0.5rem 1rem 0.5rem; @click="open = false"
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; >
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
transition-duration: 150ms; <slot name="content"></slot>
} </div>
</div>
.dropdown-link:hover { </transition>
background-color: hsl(240, 4.8%, 95.9%); </div>
} </template>
.dropdown-link:focus {
background-color: hsl(240, 4.8%, 95.9%);
outline: 2px solid transparent;
outline-offset: 2px;
}*/
</style>

20
src/resources/js/Components/Modals/Cofnirm.vue
View File

@@ -16,26 +16,19 @@ const props = defineProps({
}, },
}) })
// computed properties
// watchers
// lifecycle hooks
// methods // methods
function close() { const close = (() {
emit('close') emit('close')
} })
</script> </script>
<template> <template>
<modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close"> <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"> <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24"> <svg class="h-6 w-6 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg> </svg>
</div> </div>
@@ -52,8 +45,7 @@ function close() {
</div> </div>
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right"> <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
<slot name="footer"> <slot name="footer"></slot>
</slot>
</div> </div>
</modal> </Modal>
</template> </template>

48
src/resources/js/Components/Modals/ConfirmPassword.vue
View File

@@ -1,5 +1,8 @@
<script setup> <script setup>
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import DialogModal from './DialogModal.vue'
import InputElm from '@/Components/Input.vue'
import InputError from '@/Components/Input.vue'
const emit = defineEmits(['confirmed']) const emit = defineEmits(['confirmed'])
@@ -21,14 +24,8 @@ let form = {
error: '', error: '',
} }
// computed properties
// watchers
// lifecycle hooks
// methods // methods
function startConfirmingPassword() { const startConfirmingPassword = (() {
axios.get(route('password.confirmation')).then(resp => { axios.get(route('password.confirmation')).then(resp => {
if (resp.data.confirmed) { if (resp.data.confirmed) {
emit('confirmed') emit('confirmed')
@@ -37,10 +34,10 @@ function startConfirmingPassword() {
setTimeout(() => $refs.password.focus(), 250) setTimeout(() => $refs.password.focus(), 250)
} }
}) })
} })
function confirmPassword() { const confirmPassword = (() => {
form.processing = true; form.processing = true
axios.post(route('password.confirm'), { axios.post(route('password.confirm'), {
password: form.password, password: form.password,
@@ -53,49 +50,44 @@ function confirmPassword() {
form.error = erro.response.data.errors.password[0] form.error = erro.response.data.errors.password[0]
$refs.password.focus() $refs.password.focus()
}) })
} })
function closeModal() { const closeModal = (() => {
confirmingPassword = false confirmingPassword = false
form.password = '' form.password = ''
form.error = '' form.error = ''
} })
</script> </script>
<template> <template>
<div> <div>
<span @click="startConfirmingPassword"> <span @click="startConfirmingPassword">
<slot /> <slot></slot>
</span> </span>
<jet-dialog-modal :show="confirmingPassword" @close="closeModal"> <DialogModal :show="confirmingPassword" @close="closeModal">
<template #title> <template #title>{{ title }}</template>
{{ title }}
</template>
<template #content> <template #content>
{{ content }} {{ content }}
<div class="mt-4"> <div class="mt-4">
<jet-input type="password" class="mt-1 block w-3/4" placeholder="Password" <InputElm type="password" class="mt-1 block w-3/4" placeholder="Password"
ref="password" ref="password"
v-model="form.password" v-model="form.password"
@keyup.enter="confirmPassword" /> @keyup.enter="confirmPassword"></InputElm>
<jet-input-error :message="form.error" class="mt-2" /> <InputError :message="form.error" class="mt-2"></InputError>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<jet-secondary-button @click="closeModal"> <button type="button" class="button button-gradient-secondary" @click="closeModal">Cancel</button>
Cancel
</jet-secondary-button>
<jet-button class="ml-3" @click="confirmPassword" :class="{ 'opacity-25': form.processing }" :disabled="form.processing"> <button class="button button-gradient-primary ml-3" @click="confirmPassword" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
{{ button }} {{ button }}
</jet-button> </button>
</template> </template>
</jet-dialog-modal> </DialogModal>
</div> </div>
</template> </template>

15
src/resources/js/Components/Modals/Dialog.vue → src/resources/js/Components/Modals/DialogModal.vue
View File

@@ -16,21 +16,14 @@ const props = defineProps({
}, },
}) })
// computed properties
// watchers
// lifecycle hooks
// methods // methods
function close() { const close = (() {
emit('close') emit('close')
} })
</script> </script>
<template> <template>
<modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close"> <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
<div class="px-6 py-4"> <div class="px-6 py-4">
<div class="text-lg"> <div class="text-lg">
<slot name="title"></slot> <slot name="title"></slot>
@@ -44,5 +37,5 @@ function close() {
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right"> <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</modal> </Modal>
</template> </template>

18
src/resources/js/Components/Modals/Modal.vue
View File

@@ -34,13 +34,6 @@ watch(() => props.show, (newShow) => {
document.body.style.overflow = null document.body.style.overflow = null
} }
}) })
/*watch(props.show, (newShow) => {
if (newShow) {
document.body.style.overflow = 'hidden'
} else {
document.body.style.overflow = null
}
})*/
// lifecycle hooks // lifecycle hooks
onBeforeMount(() => { onBeforeMount(() => {
@@ -53,18 +46,17 @@ onMounted(() => {
}) })
// methods // methods
function close() { const close = (() => {
if (props.closeable) { if (props.closeable) {
emit('close') emit('close')
} }
} })
function closeOnEscape(e) { const closeOnEscape = ((event) => {
if (e.key === 'Escape' && props.show) { if (event.key === 'Escape' && props.show) {
close() close()
} }
} })
</script> </script>
<template> <template>