From e69bc5f4aaf9fda85cc6ab248da59daaacc02d1c Mon Sep 17 00:00:00 2001 From: developermithu Date: Sat, 10 Aug 2024 06:33:35 +0600 Subject: [PATCH] refactor code & modified tallcraftui config --- config/tallcraftui.php | 115 +++++++++++++++++++++++++---- src/Helpers/BorderRadiusHelper.php | 24 ++++++ src/TallCraftUiServiceProvider.php | 40 +++++----- src/Traits/HasCheckboxColors.php | 67 +++++++++++++++++ src/View/Components/Alert.php | 17 +---- src/View/Components/Badge.php | 18 +---- src/View/Components/Button.php | 41 +++++----- src/View/Components/Checkbox.php | 105 +++++++------------------- src/View/Components/Dropdown.php | 31 ++++---- src/View/Components/Input.php | 17 +---- src/View/Components/Modal.php | 85 ++++++++++++--------- src/View/Components/Radio.php | 88 ++++++---------------- src/View/Components/Select.php | 17 +---- src/View/Components/Textarea.php | 17 +---- src/View/Components/Toggle.php | 98 ++---------------------- 15 files changed, 370 insertions(+), 410 deletions(-) create mode 100644 src/Helpers/BorderRadiusHelper.php create mode 100644 src/Traits/HasCheckboxColors.php diff --git a/config/tallcraftui.php b/config/tallcraftui.php index 4dc3dee..a82f519 100644 --- a/config/tallcraftui.php +++ b/config/tallcraftui.php @@ -2,35 +2,118 @@ return [ /** + * + * ================================== * Default prefix for all components + * ================================== * * Note: After changing the prefix, clear the view cache * using `php artisan view:clear` * * Examples: - * prefix => '' // - * prefix => 'tc-' // + * + * prefix => '' // + * prefix => 'tc-' // + * */ 'prefix' => '', /** - * Icons configuration + * + * type => Allowed: heroicons + * style => Allowed: outline, solid + * */ 'icons' => [ - /** - * --------------------------- - * Allowed icons: heroicons, - * --------------------------- - */ 'type' => 'heroicons', - - /** - * -------------------- - * Default icon style - * -------------------- - * - * Allowed values: outline, solid - */ 'style' => 'outline', ], + + /** + * + * border-radius => Allowed: rounded, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full, rounded-none + * + */ + 'alert' => [ + 'border-radius' => 'rounded', + ], + + 'badge' => [ + 'border-radius' => 'rounded', + ], + + 'breadcrumb' => [ + 'border-radius' => 'rounded', + ], + + /** + * + * size => Allowed: sm, md, lg, xl, 2xl + * + */ + 'button' => [ + 'border-radius' => 'rounded', + 'size' => 'md', + ], + + /** + * + * size => Allowed: sm, md, lg, xl, 2xl + * + */ + 'checkbox' => [ + 'border-radius' => 'rounded', + 'size' => 'md', + ], + + /** + * + * position => Allowed: top, bottom, left, right + * size => Allowed: w-20, w-24, w-28, w-32, w-36, w-40, w-44, w-48, w-52, w-56, w-60, w-64, w-72, w-80, w-96, w-full + * + */ + 'dropdown' => [ + 'border-radius' => 'rounded', + 'position' => 'top', + 'size' => 'w-48', + ], + + 'input' => [ + 'border-radius' => 'rounded', + ], + + /** + * + * size => Allowed: sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full + * blur => Allowed: true, false + * position => Allowed: top, bottom, left, right, center + * + */ + 'modal' => [ + 'border-radius' => 'rounded-lg', + 'size' => 'lg', + 'blur' => false, + 'position' => 'top', + ], + + /** + * + * size => Allowed: sm, md, lg, xl, 2xl + * + */ + 'radio' => [ + 'size' => 'md', + ], + + 'select' => [ + 'border-radius' => 'rounded', + ], + + 'textarea' => [ + 'border-radius' => 'rounded', + ], + + 'toggle' => [ + 'border-radius' => 'rounded', + ], ]; diff --git a/src/Helpers/BorderRadiusHelper.php b/src/Helpers/BorderRadiusHelper.php new file mode 100644 index 0000000..fd198a5 --- /dev/null +++ b/src/Helpers/BorderRadiusHelper.php @@ -0,0 +1,24 @@ +get('rounded') => 'rounded', + $attributes->get('rounded-sm') => 'rounded-sm', + $attributes->get('rounded-md') => 'rounded-md', + $attributes->get('rounded-lg') => 'rounded-lg', + $attributes->get('rounded-xl') => 'rounded-xl', + $attributes->get('rounded-2xl') => 'rounded-2xl', + $attributes->get('rounded-3xl') => 'rounded-3xl', + $attributes->get('rounded-full') => 'rounded-full', + $attributes->get('rounded-none') => 'rounded-none', + default => config("tallcraftui.{$componentName}.border-radius", 'rounded'), + }; + } +} diff --git a/src/TallCraftUiServiceProvider.php b/src/TallCraftUiServiceProvider.php index 35293a0..a5c3518 100644 --- a/src/TallCraftUiServiceProvider.php +++ b/src/TallCraftUiServiceProvider.php @@ -3,25 +3,23 @@ namespace Developermithu\Tallcraftui; use Developermithu\Tallcraftui\Console\Commands\InstallTallcraftuiCommand; -use Developermithu\Tallcraftui\View\Components\{ - Alert, - Badge, - Breadcrumb, - BreadcrumbItem, - Button, - Checkbox, - Dropdown, - DropdownItem, - Hint, - Icon, - Input, - Label, - Modal, - Radio, - Select, - Textarea, - Toggle -}; +use Developermithu\Tallcraftui\View\Components\Alert; +use Developermithu\Tallcraftui\View\Components\Badge; +use Developermithu\Tallcraftui\View\Components\Breadcrumb; +use Developermithu\Tallcraftui\View\Components\BreadcrumbItem; +use Developermithu\Tallcraftui\View\Components\Button; +use Developermithu\Tallcraftui\View\Components\Checkbox; +use Developermithu\Tallcraftui\View\Components\Dropdown; +use Developermithu\Tallcraftui\View\Components\DropdownItem; +use Developermithu\Tallcraftui\View\Components\Hint; +use Developermithu\Tallcraftui\View\Components\Icon; +use Developermithu\Tallcraftui\View\Components\Input; +use Developermithu\Tallcraftui\View\Components\Label; +use Developermithu\Tallcraftui\View\Components\Modal; +use Developermithu\Tallcraftui\View\Components\Radio; +use Developermithu\Tallcraftui\View\Components\Select; +use Developermithu\Tallcraftui\View\Components\Textarea; +use Developermithu\Tallcraftui\View\Components\Toggle; use Illuminate\Support\Facades\Blade; use Illuminate\Support\ServiceProvider; @@ -34,7 +32,7 @@ public function boot(): void $this->registerComponents(); $this->publishes([ - __DIR__ . '/../config/tallcraftui.php' => config_path('tallcraftui.php'), + __DIR__.'/../config/tallcraftui.php' => config_path('tallcraftui.php'), ], 'tallcraftui-config'); // Register the application's commands. @@ -68,7 +66,7 @@ private function registerComponents(): void ]; foreach ($components as $name => $class) { - Blade::component($prefix . $name, $class); + Blade::component($prefix.$name, $class); } // TallCraftUI internal components diff --git a/src/Traits/HasCheckboxColors.php b/src/Traits/HasCheckboxColors.php new file mode 100644 index 0000000..909b5c9 --- /dev/null +++ b/src/Traits/HasCheckboxColors.php @@ -0,0 +1,67 @@ +attributes->has('secondary') => 'text-secondary/90 focus:ring-secondary/90', + $this->attributes->has('black') => 'text-black focus:ring-black', + $this->attributes->has('white') => 'text-white focus:ring-white !border-gray-200', + $this->attributes->has('slate') => 'text-slate-600 focus:ring-slate-600', + $this->attributes->has('gray') => 'text-gray-600 focus:ring-gray-600', + $this->attributes->has('zinc') => 'text-zinc-600 focus:ring-zinc-600', + $this->attributes->has('neutral') => 'text-neutral-600 focus:ring-neutral-600', + $this->attributes->has('stone') => 'text-stone-600 focus:ring-stone-600', + $this->attributes->has('red') => 'text-red-600 focus:ring-red-600', + $this->attributes->has('orange') => 'text-orange-600 focus:ring-orange-600', + $this->attributes->has('amber') => 'text-amber-600 focus:ring-amber-600', + $this->attributes->has('yellow') => 'text-yellow-600 focus:ring-yellow-600', + $this->attributes->has('lime') => 'text-lime-600 focus:ring-lime-600', + $this->attributes->has('green') => 'text-green-600 focus:ring-green-600', + $this->attributes->has('emerald') => 'text-emerald-600 focus:ring-emerald-600', + $this->attributes->has('teal') => 'text-teal-600 focus:ring-teal-600', + $this->attributes->has('cyan') => 'text-cyan-600 focus:ring-cyan-600', + $this->attributes->has('sky') => 'text-sky-600 focus:ring-sky-600', + $this->attributes->has('blue') => 'text-blue-600 focus:ring-blue-600', + $this->attributes->has('indigo') => 'text-indigo-600 focus:ring-indigo-600', + $this->attributes->has('violet') => 'text-violet-600 focus:ring-violet-600', + $this->attributes->has('purple') => 'text-purple-600 focus:ring-purple-600', + $this->attributes->has('fuchsia') => 'text-fuchsia-600 focus:ring-fuchsia-600', + $this->attributes->has('pink') => 'text-pink-600 focus:ring-pink-600', + $this->attributes->has('rose') => 'text-rose-600 focus:ring-rose-600', + default => 'text-primary/90 focus:ring-primary/90', // primary + }; + } +} diff --git a/src/View/Components/Alert.php b/src/View/Components/Alert.php index 416e7d9..2a30329 100644 --- a/src/View/Components/Alert.php +++ b/src/View/Components/Alert.php @@ -3,6 +3,7 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; use Illuminate\Contracts\View\View; use Illuminate\View\Component; @@ -120,19 +121,9 @@ public function descriptionClasses(): string }; } - public function roundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded', - }; + return BorderRadiusHelper::getRoundedClass('alert', $this->attributes); } public function actionColors(): string @@ -182,7 +173,7 @@ public function render(): View|Closure|string {{ $attributes->withoutTwMergeClasses()->twMerge([ "p-4 text-sm transition duration-300 border", $alertClasses(), - $roundClasses() + $roundedClass() ]) }} > diff --git a/src/View/Components/Badge.php b/src/View/Components/Badge.php index 1b15bfe..30ba3b4 100644 --- a/src/View/Components/Badge.php +++ b/src/View/Components/Badge.php @@ -3,6 +3,7 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; use Illuminate\Contracts\View\View; use Illuminate\View\Component; @@ -168,20 +169,9 @@ public function iconSize(): string }; } - public function roundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded') => 'rounded', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded', - }; + return BorderRadiusHelper::getRoundedClass('badge', $this->attributes); } public function render(): View|Closure|string @@ -192,7 +182,7 @@ public function render(): View|Closure|string $badgeSize(), $colorClasses(), $outlineClasses(), - $roundClasses(), + $roundedClass(), ]) }} > diff --git a/src/View/Components/Button.php b/src/View/Components/Button.php index f1dfc38..406ba3f 100644 --- a/src/View/Components/Button.php +++ b/src/View/Components/Button.php @@ -3,6 +3,7 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; use Illuminate\Contracts\View\View; use Illuminate\View\Component; @@ -231,28 +232,28 @@ public function circleIconSize(): string public function sizeClasses(): string { - return match (true) { - $this->attributes->get('sm') => 'px-3 py-1.5', - $this->attributes->get('lg') => 'px-5 py-2.5', - $this->attributes->get('xl') => 'px-6 py-3', - $this->attributes->get('2xl') => 'px-7 py-3.5', - default => 'px-4 py-2', - }; + $sizes = [ + 'sm' => 'px-3 py-1.5', + 'md' => 'px-4 py-2', + 'lg' => 'px-5 py-2.5', + 'xl' => 'px-6 py-3', + '2xl' => 'px-7 py-3.5', + ]; + + foreach ($sizes as $key => $class) { + if ($this->attributes->has($key)) { + return $class; + } + } + + $defaultSize = config('tallcraftui.button.size', 'md'); + + return $sizes[$defaultSize] ?? $sizes['md']; } - public function roundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded', - }; + return BorderRadiusHelper::getRoundedClass('button', $this->attributes); } public function getSpinner(): string @@ -296,7 +297,7 @@ public function render(): View|Closure|string $sizeClasses(), $outlineClasses(), $flatClasses(), - $roundClasses(), + $roundedClass(), $circleClasses(), ]) }} diff --git a/src/View/Components/Checkbox.php b/src/View/Components/Checkbox.php index 4c06a05..3387ac7 100644 --- a/src/View/Components/Checkbox.php +++ b/src/View/Components/Checkbox.php @@ -3,105 +3,49 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; +use Developermithu\Tallcraftui\Traits\HasCheckboxColors; use Illuminate\Contracts\View\View; use Illuminate\View\Component; class Checkbox extends Component { + use HasCheckboxColors; + public string $uuid; public function __construct( public ?string $label = null, public ?string $hint = null, public ?bool $textLeft = false, - - // Checkbox types - public bool $primary = true, - public bool $secondary = false, - public bool $black = false, - public bool $white = false, - public bool $slate = false, - public bool $gray = false, - public bool $zinc = false, - public bool $neutral = false, - public bool $stone = false, - public bool $red = false, - public bool $orange = false, - public bool $amber = false, - public bool $yellow = false, - public bool $lime = false, - public bool $green = false, - public bool $emerald = false, - public bool $teal = false, - public bool $cyan = false, - public bool $sky = false, - public bool $blue = false, - public bool $indigo = false, - public bool $violet = false, - public bool $purple = false, - public bool $fuchsia = false, - public bool $pink = false, - public bool $rose = false, ) { $this->uuid = md5(serialize($this)); } - public function colorClasses(): string - { - return match (true) { - $this->secondary => 'text-secondary/90 focus:ring-secondary/90', - $this->black => 'text-black focus:ring-black', - $this->white => 'text-white focus:ring-white !border-gray-200', - $this->slate => 'text-slate-600 focus:ring-slate-600', - $this->gray => 'text-gray-600 focus:ring-gray-600', - $this->zinc => 'text-zinc-600 focus:ring-zinc-600', - $this->neutral => 'text-neutral-600 focus:ring-neutral-600', - $this->stone => 'text-stone-600 focus:ring-stone-600', - $this->red => 'text-red-600 focus:ring-red-600', - $this->orange => 'text-orange-600 focus:ring-orange-600', - $this->amber => 'text-amber-600 focus:ring-amber-600', - $this->yellow => 'text-yellow-600 focus:ring-yellow-600', - $this->lime => 'text-lime-600 focus:ring-lime-600', - $this->green => 'text-green-600 focus:ring-green-600', - $this->emerald => 'text-emerald-600 focus:ring-emerald-600', - $this->teal => 'text-teal-600 focus:ring-teal-600', - $this->cyan => 'text-cyan-600 focus:ring-cyan-600', - $this->sky => 'text-sky-600 focus:ring-sky-600', - $this->blue => 'text-blue-600 focus:ring-blue-600', - $this->indigo => 'text-indigo-600 focus:ring-indigo-600', - $this->violet => 'text-violet-600 focus:ring-violet-600', - $this->purple => 'text-purple-600 focus:ring-purple-600', - $this->fuchsia => 'text-fuchsia-600 focus:ring-fuchsia-600', - $this->pink => 'text-pink-600 focus:ring-pink-600', - $this->rose => 'text-rose-600 focus:ring-rose-600', - default => 'text-primary/90 focus:ring-primary/90', // primary - }; - } - public function sizeClasses(): string { - return match (true) { - $this->attributes->get('sm') => 'size-4', - $this->attributes->get('lg') => 'size-6', - $this->attributes->get('xl') => 'size-7', - $this->attributes->get('2xl') => 'size-8', - default => 'size-[18px]', - }; + $sizes = [ + 'sm' => 'size-4', + 'md' => 'size-[18px]', + 'lg' => 'size-6', + 'xl' => 'size-7', + '2xl' => 'size-8', + ]; + + foreach ($sizes as $key => $class) { + if ($this->attributes->has($key)) { + return $class; + } + } + + $defaultSize = config('tallcraftui.checkbox.size', 'md'); + + return $sizes[$defaultSize] ?? $sizes['md']; } - public function roundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded', - }; + return BorderRadiusHelper::getRoundedClass('checkbox', $this->attributes); } public function disabledAndReadonlyClass(): string @@ -140,13 +84,14 @@ public function render(): View|Closure|string
except($colorAttributes) ->twMerge([ "border-gray-300", $sizeClasses(), $colorClasses(), $errorClass, $disabledAndReadonlyClass(), - $roundClasses(), + $roundedClass(), ]) }} /> diff --git a/src/View/Components/Dropdown.php b/src/View/Components/Dropdown.php index bcbf7f1..fc1e024 100644 --- a/src/View/Components/Dropdown.php +++ b/src/View/Components/Dropdown.php @@ -3,6 +3,7 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; use Illuminate\Contracts\View\View; use Illuminate\View\Component; @@ -30,33 +31,33 @@ public function sizeClasses() $this->attributes->get('w-72') => 'w-72', $this->attributes->get('w-80') => 'w-80', $this->attributes->get('w-96') => 'w-96', - default => 'w-48', + $this->attributes->get('w-full') => 'w-full', + default => config('tallcraftui.dropdown.size', 'w-48'), }; } public function dropdownPosition() { + $defaultPosition = config('tallcraftui.dropdown.position'); + return match (true) { $this->attributes->get('top') => 'origin-top', $this->attributes->get('bottom') => 'origin-bottom', $this->attributes->get('left') => 'origin-top-left left-0', $this->attributes->get('right') => 'origin-top-right right-0', - default => 'origin-top', // top + + default => match ($defaultPosition) { + 'bottom' => 'origin-bottom', + 'left' => 'origin-top-left left-0', + 'right' => 'origin-top-right right-0', + default => 'origin-top', + }, }; } - public function roundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded-md', - }; + return BorderRadiusHelper::getRoundedClass('dropdown', $this->attributes); } public function render(): View|Closure|string @@ -91,7 +92,7 @@ class="relative w-fit" @class([ "absolute bg-white dark:bg-gray-800 z-50 mt-3 shadow-lg", $sizeClasses(), - $roundClasses(), + $roundedClass(), $dropdownPosition(), ]) @@ -104,7 +105,7 @@ class="relative w-fit"
twMerge([ "ring-1 ring-black ring-opacity-5 dark:bg-gray-800 dark:text-gray-100", - $roundClasses(), + $roundedClass(), ]) }} > diff --git a/src/View/Components/Input.php b/src/View/Components/Input.php index 9e7378f..b43c215 100644 --- a/src/View/Components/Input.php +++ b/src/View/Components/Input.php @@ -3,6 +3,7 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; use Illuminate\Contracts\View\View; use Illuminate\View\Component; @@ -32,19 +33,9 @@ public function __construct( $this->uuid = md5(serialize($this)); } - public function inputRoundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded', - }; + return BorderRadiusHelper::getRoundedClass('input', $this->attributes); } public function prefixRoundClasses() @@ -176,7 +167,7 @@ public function render(): View|Closure|string $fileInputClass(), $disableClass(), $readonlyClass(), - $inputRoundClasses(), + $roundedClass(), $errorClass, ]) }} diff --git a/src/View/Components/Modal.php b/src/View/Components/Modal.php index 27c7d9d..b3e1955 100644 --- a/src/View/Components/Modal.php +++ b/src/View/Components/Modal.php @@ -3,6 +3,7 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; use Illuminate\Contracts\View\View; use Illuminate\View\Component; @@ -15,24 +16,35 @@ public function __construct( public function sizeClasses() { - return match (true) { - $this->attributes->get('sm') => 'w-full sm:max-w-sm', - $this->attributes->get('md') => 'w-full sm:max-w-md', - $this->attributes->get('lg') => 'w-full sm:max-w-lg', - $this->attributes->get('xl') => 'w-full sm:max-w-xl', - $this->attributes->get('2xl') => 'w-full sm:max-w-2xl', - $this->attributes->get('3xl') => 'w-full sm:mx-6 md:mx-8 lg:mx-0 sm:max-w-3xl', - $this->attributes->get('4xl') => 'w-full sm:mx-6 md:mx-8 lg:mx-0 sm:max-w-4xl', - $this->attributes->get('5xl') => 'w-full sm:mx-6 md:mx-8 lg:mx-0 sm:max-w-5xl', - $this->attributes->get('6xl') => 'w-full sm:mx-6 md:mx-8 xl:mx-0 sm:max-w-6xl', - $this->attributes->get('7xl') => 'w-full sm:mx-6 md:mx-8 2xl:mx-0 sm:max-w-7xl', - $this->attributes->get('full') => 'w-full mx-4 sm:mx-6 md:mx-8 lg:mx-14 xl:mx-20 sm:max-w-full', - default => 'w-full sm:max-w-lg', // default lg - }; + $sizes = [ + 'sm' => 'w-full sm:max-w-sm', + 'md' => 'w-full sm:max-w-md', + 'lg' => 'w-full sm:max-w-lg', + 'xl' => 'w-full sm:max-w-xl', + '2xl' => 'w-full sm:max-w-2xl', + '3xl' => 'w-full sm:mx-6 md:mx-8 lg:mx-0 sm:max-w-3xl', + '4xl' => 'w-full sm:mx-6 md:mx-8 lg:mx-0 sm:max-w-4xl', + '5xl' => 'w-full sm:mx-6 md:mx-8 lg:mx-0 sm:max-w-5xl', + '6xl' => 'w-full sm:mx-6 md:mx-8 xl:mx-0 sm:max-w-6xl', + '7xl' => 'w-full sm:mx-6 md:mx-8 2xl:mx-0 sm:max-w-7xl', + 'full' => 'w-full mx-4 sm:mx-6 md:mx-8 lg:mx-14 xl:mx-20 sm:max-w-full', + ]; + + foreach ($sizes as $key => $class) { + if ($this->attributes->has($key)) { + return $class; + } + } + + $defaultSize = config('tallcraftui.modal.size', 'lg'); + + return $sizes[$defaultSize] ?? $sizes['lg']; } public function bgBlurClasses() { + $isDefaultBlur = config('tallcraftui.modal.blur', false); + return match (true) { $this->attributes->get('blur') => 'backdrop-blur', $this->attributes->get('blur-sm') => 'backdrop-blur-sm', @@ -41,33 +53,38 @@ public function bgBlurClasses() $this->attributes->get('blur-xl') => 'backdrop-blur-xl', $this->attributes->get('blur-2xl') => 'backdrop-blur-2xl', $this->attributes->get('blur-3xl') => 'backdrop-blur-3xl', - default => '', + + default => match ($isDefaultBlur) { + true => 'backdrop-blur-sm', + default => '', + }, }; } public function modalPosition() { - return match (true) { - $this->attributes->get('center') => 'flex items-center h-screen justify-center', - $this->attributes->get('bottom') => 'flex items-end h-screen justify-center', - $this->attributes->get('left') => 'flex items-center w-screen h-screen justify-start !pl-10', - $this->attributes->get('right') => 'flex items-center w-screen h-screen justify-end !pr-10', - default => 'flex items-start h-screen justify-center', // default top - }; + $positions = [ + 'top' => 'flex items-start justify-center h-screen', + 'bottom' => 'flex items-end justify-center h-screen', + 'left' => 'flex items-center justify-start w-screen h-screen !pl-10', + 'right' => 'flex items-center justify-end w-screen h-screen !pr-10', + 'center' => 'flex items-center justify-center w-screen h-screen', + ]; + + foreach ($positions as $key => $class) { + if ($this->attributes->has($key)) { + return $class; + } + } + + $defaultPosition = config('tallcraftui.modal.position', 'top'); + + return $positions[$defaultPosition] ?? $positions['top']; } - public function roundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded-lg', - }; + return BorderRadiusHelper::getRoundedClass('modal', $this->attributes); } public function render(): View|Closure|string @@ -131,7 +148,7 @@ class="fixed inset-0 transition-all transform" ->twMerge([ "overflow-hidden transition-all transform bg-white dark:bg-gray-900 shadow-xl", $sizeClasses(), - $roundClasses(), + $roundedClass(), ]) }} > diff --git a/src/View/Components/Radio.php b/src/View/Components/Radio.php index 7fa13aa..6ce02e6 100644 --- a/src/View/Components/Radio.php +++ b/src/View/Components/Radio.php @@ -3,90 +3,43 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Traits\HasCheckboxColors; use Illuminate\Contracts\View\View; use Illuminate\View\Component; class Radio extends Component { + use HasCheckboxColors; + public string $uuid; public function __construct( public ?string $label = null, public ?string $hint = null, public ?bool $textLeft = false, - - // Radio types - public bool $primary = true, - public bool $secondary = false, - public bool $black = false, - public bool $white = false, - public bool $slate = false, - public bool $gray = false, - public bool $zinc = false, - public bool $neutral = false, - public bool $stone = false, - public bool $red = false, - public bool $orange = false, - public bool $amber = false, - public bool $yellow = false, - public bool $lime = false, - public bool $green = false, - public bool $emerald = false, - public bool $teal = false, - public bool $cyan = false, - public bool $sky = false, - public bool $blue = false, - public bool $indigo = false, - public bool $violet = false, - public bool $purple = false, - public bool $fuchsia = false, - public bool $pink = false, - public bool $rose = false, ) { $this->uuid = md5(serialize($this)); } - public function colorClasses(): string - { - return match (true) { - $this->secondary => 'text-secondary/90 focus:ring-secondary/90', - $this->black => 'text-black focus:ring-black', - $this->white => 'text-white focus:ring-white !border-gray-200', - $this->slate => 'text-slate-600 focus:ring-slate-600', - $this->gray => 'text-gray-600 focus:ring-gray-600', - $this->zinc => 'text-zinc-600 focus:ring-zinc-600', - $this->neutral => 'text-neutral-600 focus:ring-neutral-600', - $this->stone => 'text-stone-600 focus:ring-stone-600', - $this->red => 'text-red-600 focus:ring-red-600', - $this->orange => 'text-orange-600 focus:ring-orange-600', - $this->amber => 'text-amber-600 focus:ring-amber-600', - $this->yellow => 'text-yellow-600 focus:ring-yellow-600', - $this->lime => 'text-lime-600 focus:ring-lime-600', - $this->green => 'text-green-600 focus:ring-green-600', - $this->emerald => 'text-emerald-600 focus:ring-emerald-600', - $this->teal => 'text-teal-600 focus:ring-teal-600', - $this->cyan => 'text-cyan-600 focus:ring-cyan-600', - $this->sky => 'text-sky-600 focus:ring-sky-600', - $this->blue => 'text-blue-600 focus:ring-blue-600', - $this->indigo => 'text-indigo-600 focus:ring-indigo-600', - $this->violet => 'text-violet-600 focus:ring-violet-600', - $this->purple => 'text-purple-600 focus:ring-purple-600', - $this->fuchsia => 'text-fuchsia-600 focus:ring-fuchsia-600', - $this->pink => 'text-pink-600 focus:ring-pink-600', - $this->rose => 'text-rose-600 focus:ring-rose-600', - default => 'text-primary/90 focus:ring-primary/90', // primary - }; - } - public function sizeClasses(): string { - return match (true) { - $this->attributes->get('sm') => 'size-4', - $this->attributes->get('lg') => 'size-6', - $this->attributes->get('xl') => 'size-7', - $this->attributes->get('2xl') => 'size-8', - default => 'size-[18px]', - }; + $sizes = [ + 'sm' => 'size-4', + 'md' => 'size-[18px]', + 'lg' => 'size-6', + 'xl' => 'size-7', + '2xl' => 'size-8', + ]; + + foreach ($sizes as $key => $class) { + if ($this->attributes->has($key)) { + return $class; + } + } + + $defaultSize = config('tallcraftui.radio.size', 'md'); + + return $sizes[$defaultSize] ?? $sizes['md']; } public function disabledAndReadonlyClass(): string @@ -125,6 +78,7 @@ public function render(): View|Closure|string
except($colorAttributes) ->twMerge([ "border-gray-300", $sizeClasses(), diff --git a/src/View/Components/Select.php b/src/View/Components/Select.php index ef48156..48673a1 100644 --- a/src/View/Components/Select.php +++ b/src/View/Components/Select.php @@ -3,6 +3,7 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; use Illuminate\Contracts\View\View; use Illuminate\Support\Collection; use Illuminate\View\Component; @@ -20,19 +21,9 @@ public function __construct( $this->uuid = md5(serialize($this)); } - public function roundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded', - }; + return BorderRadiusHelper::getRoundedClass('select', $this->attributes); } public function render(): View|Closure|string @@ -65,7 +56,7 @@ public function render(): View|Closure|string $errorClass, $disabledClass, $readonlyClass, - $roundClasses(), + $roundedClass(), ]) }}> diff --git a/src/View/Components/Textarea.php b/src/View/Components/Textarea.php index b723b98..76f3b0e 100644 --- a/src/View/Components/Textarea.php +++ b/src/View/Components/Textarea.php @@ -3,6 +3,7 @@ namespace Developermithu\Tallcraftui\View\Components; use Closure; +use Developermithu\Tallcraftui\Helpers\BorderRadiusHelper; use Illuminate\Contracts\View\View; use Illuminate\View\Component; @@ -22,19 +23,9 @@ public function __construct( $this->uuid = md5(serialize($this)); } - public function roundClasses() + public function roundedClass(): string { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded', - }; + return BorderRadiusHelper::getRoundedClass('textarea', $this->attributes); } public function render(): View|Closure|string @@ -85,7 +76,7 @@ public function render(): View|Closure|string "border-red-500 dark:border-red-500 focus:border-red-500 focus:ring-red-500" => $error, "bg-gray-200 opacity-80 cursor-not-allowed" => $attributes->get('disabled'), "bg-gray-200 opacity-80 border-gray-400 border-dashed pointer-events-none" => $attributes->get('readonly'), - $roundClasses(), + $roundedClass(), ]) }} > diff --git a/src/View/Components/Toggle.php b/src/View/Components/Toggle.php index 32b78c2..56bfce2 100644 --- a/src/View/Components/Toggle.php +++ b/src/View/Components/Toggle.php @@ -13,94 +13,8 @@ public function __construct( public ?string $hint = null, public ?bool $textLeft = false, public bool $required = false, - - // Toggle types - public bool $primary = true, - public bool $secondary = false, - public bool $black = false, - public bool $white = false, - public bool $slate = false, - public bool $gray = false, - public bool $zinc = false, - public bool $neutral = false, - public bool $stone = false, - public bool $red = false, - public bool $orange = false, - public bool $amber = false, - public bool $yellow = false, - public bool $lime = false, - public bool $green = false, - public bool $emerald = false, - public bool $teal = false, - public bool $cyan = false, - public bool $sky = false, - public bool $blue = false, - public bool $indigo = false, - public bool $violet = false, - public bool $purple = false, - public bool $fuchsia = false, - public bool $pink = false, - public bool $rose = false, ) {} - public function colorClasses(): string - { - return match (true) { - $this->secondary => 'text-secondary/90 focus:ring-secondary/90', - $this->black => 'text-black focus:ring-black', - $this->white => 'text-white focus:ring-white !border-gray-200', - $this->slate => 'text-slate-600 focus:ring-slate-600', - $this->gray => 'text-gray-600 focus:ring-gray-600', - $this->zinc => 'text-zinc-600 focus:ring-zinc-600', - $this->neutral => 'text-neutral-600 focus:ring-neutral-600', - $this->stone => 'text-stone-600 focus:ring-stone-600', - $this->red => 'text-red-600 focus:ring-red-600', - $this->orange => 'text-orange-600 focus:ring-orange-600', - $this->amber => 'text-amber-600 focus:ring-amber-600', - $this->yellow => 'text-yellow-600 focus:ring-yellow-600', - $this->lime => 'text-lime-600 focus:ring-lime-600', - $this->green => 'text-green-600 focus:ring-green-600', - $this->emerald => 'text-emerald-600 focus:ring-emerald-600', - $this->teal => 'text-teal-600 focus:ring-teal-600', - $this->cyan => 'text-cyan-600 focus:ring-cyan-600', - $this->sky => 'text-sky-600 focus:ring-sky-600', - $this->blue => 'text-blue-600 focus:ring-blue-600', - $this->indigo => 'text-indigo-600 focus:ring-indigo-600', - $this->violet => 'text-violet-600 focus:ring-violet-600', - $this->purple => 'text-purple-600 focus:ring-purple-600', - $this->fuchsia => 'text-fuchsia-600 focus:ring-fuchsia-600', - $this->pink => 'text-pink-600 focus:ring-pink-600', - $this->rose => 'text-rose-600 focus:ring-rose-600', - default => 'text-primary/90 focus:ring-primary/90', // primary - }; - } - - public function sizeClasses(): string - { - return match (true) { - $this->attributes->get('sm') => 'size-4', - $this->attributes->get('lg') => 'size-6', - $this->attributes->get('xl') => 'size-7', - $this->attributes->get('2xl') => 'size-8', - default => 'size-[18px]', - }; - } - - public function roundClasses() - { - return match (true) { - $this->attributes->get('rounded-none') => 'rounded-none', - $this->attributes->get('rounded-sm') => 'rounded-sm', - $this->attributes->get('rounded-md') => 'rounded-md', - $this->attributes->get('rounded-lg') => 'rounded-lg', - $this->attributes->get('rounded-xl') => 'rounded-xl', - $this->attributes->get('rounded-2xl') => 'rounded-2xl', - $this->attributes->get('rounded-3xl') => 'rounded-3xl', - $this->attributes->get('rounded-full') => 'rounded-full', - default => 'rounded', - }; - } - public function render(): View|Closure|string { return <<<'HTML' @@ -127,19 +41,21 @@ public function render(): View|Closure|string x-ref="switchButton" type="button" @click="switchOn = ! switchOn" - :class="switchOn ? '!bg-blue-600' : 'bg-neutral-200'" + :class="switchOn ? '!bg-primary' : 'bg-neutral-200'" @class([ "relative inline-flex h-6 py-0.5 ml-4 focus:outline-none rounded-full w-10", "!bg-red-500" => $error, ]) - x-cloak> - + x-cloak + > +