Refactored 'HasModels' trait and improved styling setup

.gitignore

@@ -3,9 +3,9 @@
 build
 composer.lock
 coverage
-docs
 phpunit.xml
 phpstan.neon
 testbench.yaml
 vendor
 node_modules
+package-lock.json

composer.json

@@ -2,11 +2,18 @@
     "name": "step2dev/lazy-ui",
     "description": "Lazy UI is a Laravel package that provides a set of Blade components to rapidly build forms with Tailwind CSS and Daisy UI.",
     "keywords": [
-        "lazy ui",
+        "component",
+        "components",
+        "daisy ui",
+        "design-system",
+        "framework",
         "laravel",
         "lazy component ui",
         "lazy form",
-        "daisy ui"
+        "lazy ui",
+        "tailwind",
+        "tailwindcss",
+        "ui-library"
     ],
     "homepage": "https://github.com/step2dev/lazy-ui",
     "license": "MIT",

package.json

@@ -0,0 +1,24 @@
+{
+    "name": "lazy-component",
+    "version": "1.0.0",
+    "description": "TallStack components",
+    "license": "MIT",
+    "keywords": [
+        "design-system",
+        "tailwindcss",
+        "components",
+        "ui-library",
+        "component",
+        "framework",
+        "tailwind"
+    ],
+    "dependencies": {
+        "alpinejs": "^3.13.0",
+        "theme-change": "^2.5.0"
+    },
+    "devDependencies": {
+        "daisyui": "^3.6.3",
+        "sanitize-html": "^2.11.0",
+        "tailwindcss": "^3.3.3"
+    }
+}

resources/css/lazy.scss

@@ -1 +1,2 @@
+@import "tailwind";
 @import "./components/toast";

resources/css/tailwind.scss

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .pause {
+    animation-play-state: paused;
+  }
+}

resources/js/components/themeswitcher.js

@@ -0,0 +1,17 @@
+import { themeChange } from 'theme-change'
+
+themeChange()
+let themeToggleBtn = document.querySelector('[data-toggle-theme]')
+
+document.addEventListener('DOMContentLoaded', () => {
+    if (themeToggleBtn) {
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            themeToggleBtn.classList.add('swap-active')
+        } else {
+            themeToggleBtn.classList.remove('swap-active')
+        }
+    }
+})
+
+
+

resources/tailwind.lazy.config.js

@@ -0,0 +1,85 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+const colors = require("tailwindcss/colors");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: ['class', '[data-mode="dark"]'],
+    presets: [
+        //
+    ],
+    content: [
+        './storage/framework/views/*.php',
+        './resources/views/**/*.blade.php',
+        './app/View/**/*.php',
+        './vendor/step2dev/lazy-ui/src/Component/**/*.blade.php',
+        './vendor/step2dev/lazy-ui/resources/views/*.blade.php',
+        './app/Livewire/**/*Table.php',
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                'sans': ['Nunito', ...defaultTheme.fontFamily.sans],
+                //         'serif': ['Roboto', ...defaultTheme.fontFamily.serif],
+                //         'mono': ['Roboto', ...defaultTheme.fontFamily.mono],
+                //         'body': ['Roboto'],
+            },
+            transitionProperty: {
+                multiple: "width, height, backgroundColor, border-radius"
+            }
+        }
+    },
+    variants: {
+        extend: {
+            opacity: ['disabled']
+        }
+    },
+    plugins: [
+        // require('@tailwindcss/typography'),
+        require('@tailwindcss/forms')({
+            strategy: 'class',
+        }),
+        // require('@tailwindcss/aspect-ratio'),
+        // require('@tailwindcss/typography'),
+        require('daisyui')
+    ],
+    daisyui: {
+        themes: [
+            "light",
+            "dark",
+            "cupcake",
+            "bumblebee",
+            "emerald",
+            "corporate",
+            "synthwave",
+            "retro",
+            "cyberpunk",
+            "valentine",
+            "halloween",
+            "garden",
+            "forest",
+            "aqua",
+            "lofi",
+            "pastel",
+            "fantasy",
+            "wireframe",
+            "black",
+            "luxury",
+            "dracula",
+            "cmyk",
+            "autumn",
+            "business",
+            "acid",
+            "lemonade",
+            "night",
+            "coffee",
+            "winter",
+        ],// true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
+        darkTheme: "dark", // name of one of the included themes for dark mode
+        base: false, // applies background color and foreground color for root element by default
+        styled: true, // include daisyUI colors and design decisions for all components
+        utils: true, // adds responsive and modifier utility classes
+        rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
+        prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+        logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+    },
+}

resources/views/badge.blade.php

@@ -2,4 +2,4 @@
     'label' => '',
     'icon' => ''
 ])
-<span {{ $attributes->merge(['class'=> 'badge'.($icon ? ' gap-2' : '')]) }}>{{ $icon }}{{ $label ?: $slot }}</span>
+<span {{ $attributes->merge(['class'=> ($icon ? ' gap-2' : '')]) }}>{{ $icon }}{{ $label ?: $slot }}</span>

resources/views/btn/create.blade.php

@@ -3,5 +3,5 @@
 ])
 
 <x-lazy-btn xs light :href="$href" {{ $attributes }}>
-    <i class="bx bxs-plus-square"></i> {!! $slot !!}
+    {{ $slot ?: __('lazy::buttons.create') }}
 </x-lazy-btn>

src/Traits/HasModels.php

@@ -8,18 +8,8 @@ trait HasModels
 
     private ?bool $hasAlpineModel = null;
 
-    final public function hasBoundModel(): bool
-    {
-        return $this->hasLivewireModel() || $this->hasAlpineModel();
-    }
-
     final public function hasLivewireModel(): bool
     {
         return $this->hasLivewireModel ??= $this->attributes->whereStartsWith('wire:model')->first();
     }
-
-    final public function hasAlpineModel(): bool
-    {
-        return $this->hasAlpineModel ??= $this->attributes->whereStartsWith('x-model')->first();
-    }
 }