From e966c9b01df6fbe893d93277b839960ad82950fd Mon Sep 17 00:00:00 2001 From: Yurij Finiv Date: Mon, 28 Sep 2026 19:15:48 +0300 Subject: [PATCH 001/316] Complete Lazy UI 2.x daisyUI 5 integration --- .github/workflows/frontend-tests.yml | 30 ++ README.md | 109 ++++--- config/lazy/themes.php | 53 ++-- package.json | 9 +- phpstan.neon.dist | 1 - resources/css/lazy.css | 32 +- resources/js/components/logout.js | 7 - resources/js/components/quill.js | 137 ++++---- resources/js/components/themeswitcher.js | 108 ++++++- resources/js/lazy.js | 1 - resources/views/aura.blade.php | 23 ++ resources/views/badge.blade.php | 8 +- resources/views/btn.blade.php | 15 +- resources/views/btn/logout.blade.php | 28 +- resources/views/calendar.blade.php | 21 ++ resources/views/card.blade.php | 32 ++ resources/views/carousel-item.blade.php | 5 + resources/views/carousel.blade.php | 15 + resources/views/choices.blade.php | 82 ++--- resources/views/collapse.blade.php | 19 ++ resources/views/components/drawer.blade.php | 12 - resources/views/components/hero.blade.php | 9 - .../views/components/indicator.blade.php | 6 - resources/views/countdown.blade.php | 110 +------ resources/views/diff.blade.php | 11 + resources/views/dock-item.blade.php | 22 ++ resources/views/dock.blade.php | 15 + resources/views/drawer.blade.php | 25 ++ resources/views/dropdown.blade.php | 40 +++ resources/views/fab.blade.php | 26 ++ resources/views/fieldset.blade.php | 22 ++ resources/views/file-input.blade.php | 32 ++ resources/views/filter.blade.php | 26 ++ resources/views/footer.blade.php | 13 + resources/views/hero.blade.php | 25 ++ resources/views/hover-3d.blade.php | 11 + resources/views/hover-gallery.blade.php | 5 + resources/views/indicator.blade.php | 16 + resources/views/input.blade.php | 16 +- resources/views/list-row.blade.php | 5 + resources/views/list.blade.php | 5 + resources/views/mask.blade.php | 29 ++ resources/views/megamenu.blade.php | 25 ++ resources/views/menu-list.blade.php | 20 ++ resources/views/menu.blade.php | 64 ++-- resources/views/mockup/browser.blade.php | 26 +- resources/views/mockup/code.blade.php | 33 +- resources/views/mockup/window.blade.php | 11 +- resources/views/modal.blade.php | 40 +++ resources/views/navbar.blade.php | 17 + resources/views/otp.blade.php | 41 +++ resources/views/pagination-item.blade.php | 18 ++ resources/views/pagination.blade.php | 5 + resources/views/progress.blade.php | 22 ++ resources/views/radial.blade.php | 10 +- resources/views/radio.blade.php | 2 +- resources/views/range.blade.php | 17 +- resources/views/rating.blade.php | 159 +++++----- resources/views/richtext.blade.php | 25 +- resources/views/select.blade.php | 16 +- resources/views/skeleton.blade.php | 3 + resources/views/stack.blade.php | 16 +- resources/views/stat.blade.php | 30 ++ resources/views/stats.blade.php | 13 + resources/views/status.blade.php | 22 ++ resources/views/step.blade.php | 22 ++ resources/views/steps.blade.php | 12 + resources/views/swap.blade.php | 27 ++ resources/views/table.blade.php | 21 ++ resources/views/text-rotate.blade.php | 14 + resources/views/textarea.blade.php | 16 +- resources/views/theme-controller.blade.php | 11 + resources/views/themeswitcher.blade.php | 104 +++--- resources/views/timeline-item.blade.php | 32 ++ resources/views/timeline.blade.php | 16 + resources/views/toast.blade.php | 173 +++------- resources/views/tooltip.blade.php | 8 +- src/Commands/LazyInstallCommand.php | 1 - src/Components/Alert.php | 19 +- src/Components/Aura.php | 8 + src/Components/Badge.php | 25 +- src/Components/Btn.php | 20 +- src/Components/Calendar.php | 8 + src/Components/Card.php | 8 + src/Components/Carousel.php | 8 + src/Components/CarouselItem.php | 8 + src/Components/Chat.php | 30 +- src/Components/Checkbox.php | 4 +- src/Components/Choices.php | 35 +- src/Components/Collapse.php | 8 + src/Components/Countdown.php | 17 +- src/Components/DaisyComponent.php | 16 + src/Components/DataList.php | 8 + src/Components/Diff.php | 8 + src/Components/Dock.php | 8 + src/Components/DockItem.php | 8 + src/Components/Drawer.php | 18 +- src/Components/Dropdown.php | 8 + src/Components/Fab.php | 8 + src/Components/Fieldset.php | 8 + src/Components/FileInput.php | 8 + src/Components/Filter.php | 8 + src/Components/Footer.php | 8 + src/Components/Hero.php | 24 +- src/Components/Hover3d.php | 8 + src/Components/HoverGallery.php | 8 + src/Components/Indicator.php | 24 +- src/Components/Input.php | 15 +- src/Components/InputGroup.php | 5 + src/Components/Kbd.php | 3 + src/Components/ListRow.php | 8 + src/Components/Loading.php | 4 +- src/Components/Mask.php | 8 + src/Components/Megamenu.php | 8 + src/Components/MenuList.php | 8 + src/Components/Mockup/MockupBrowser.php | 14 +- src/Components/Mockup/MockupCode.php | 14 +- src/Components/Mockup/MockupWindow.php | 12 +- src/Components/Modal.php | 8 + src/Components/Navbar.php | 8 + src/Components/Otp.php | 8 + src/Components/Pagination.php | 8 + src/Components/PaginationItem.php | 8 + src/Components/Progress.php | 8 + src/Components/Radio.php | 5 +- src/Components/Range.php | 15 +- src/Components/Rating.php | 22 +- src/Components/Richtext.php | 21 +- src/Components/Select.php | 15 +- src/Components/Skeleton.php | 8 + src/Components/Stack.php | 10 +- src/Components/Stat.php | 8 + src/Components/Stats.php | 8 + src/Components/Status.php | 8 + src/Components/Step.php | 8 + src/Components/Steps.php | 8 + src/Components/Swap.php | 8 + src/Components/Table.php | 8 + src/Components/Tabs.php | 1 + src/Components/TextRotate.php | 8 + src/Components/Textarea.php | 14 +- src/Components/ThemeController.php | 8 + src/Components/ThemeSwitcher.php | 15 +- src/Components/Timeline.php | 8 + src/Components/TimelineItem.php | 8 + src/Components/Toast.php | 6 +- src/Components/Toggle.php | 11 +- src/DTO/RichText/QuillOptions.php | 23 +- src/LazyComponent.php | 123 +++++--- src/LazyUiServiceProvider.php | 105 +++++- src/Traits/HasErrors.php | 13 - stubs/css/lazy.css | 17 + stubs/js/lazy.js | 16 +- tests/Components/DaisyUiIntegrationTest.php | 298 ++++++++++++++++++ .../Performance/CustomizationContractTest.php | 61 ++++ tests/Performance/FrontendContractTest.php | 64 ++++ tests/Performance/RenderContractTest.php | 34 ++ tests/frontend/assert-css.mjs | 113 +++++++ tests/frontend/lazy.css | 15 + tests/frontend/smoke.html | 1 + 160 files changed, 2939 insertions(+), 1006 deletions(-) create mode 100644 .github/workflows/frontend-tests.yml delete mode 100644 resources/js/components/logout.js create mode 100644 resources/views/aura.blade.php create mode 100644 resources/views/calendar.blade.php create mode 100644 resources/views/card.blade.php create mode 100644 resources/views/carousel-item.blade.php create mode 100644 resources/views/carousel.blade.php create mode 100644 resources/views/collapse.blade.php delete mode 100644 resources/views/components/drawer.blade.php delete mode 100644 resources/views/components/hero.blade.php delete mode 100644 resources/views/components/indicator.blade.php create mode 100644 resources/views/diff.blade.php create mode 100644 resources/views/dock-item.blade.php create mode 100644 resources/views/dock.blade.php create mode 100644 resources/views/drawer.blade.php create mode 100644 resources/views/dropdown.blade.php create mode 100644 resources/views/fab.blade.php create mode 100644 resources/views/fieldset.blade.php create mode 100644 resources/views/file-input.blade.php create mode 100644 resources/views/filter.blade.php create mode 100644 resources/views/footer.blade.php create mode 100644 resources/views/hero.blade.php create mode 100644 resources/views/hover-3d.blade.php create mode 100644 resources/views/hover-gallery.blade.php create mode 100644 resources/views/indicator.blade.php create mode 100644 resources/views/list-row.blade.php create mode 100644 resources/views/list.blade.php create mode 100644 resources/views/mask.blade.php create mode 100644 resources/views/megamenu.blade.php create mode 100644 resources/views/menu-list.blade.php create mode 100644 resources/views/modal.blade.php create mode 100644 resources/views/navbar.blade.php create mode 100644 resources/views/otp.blade.php create mode 100644 resources/views/pagination-item.blade.php create mode 100644 resources/views/pagination.blade.php create mode 100644 resources/views/progress.blade.php create mode 100644 resources/views/skeleton.blade.php create mode 100644 resources/views/stat.blade.php create mode 100644 resources/views/stats.blade.php create mode 100644 resources/views/status.blade.php create mode 100644 resources/views/step.blade.php create mode 100644 resources/views/steps.blade.php create mode 100644 resources/views/swap.blade.php create mode 100644 resources/views/table.blade.php create mode 100644 resources/views/text-rotate.blade.php create mode 100644 resources/views/theme-controller.blade.php create mode 100644 resources/views/timeline-item.blade.php create mode 100644 resources/views/timeline.blade.php create mode 100644 src/Components/Aura.php create mode 100644 src/Components/Calendar.php create mode 100644 src/Components/Card.php create mode 100644 src/Components/Carousel.php create mode 100644 src/Components/CarouselItem.php create mode 100644 src/Components/Collapse.php create mode 100644 src/Components/DaisyComponent.php create mode 100644 src/Components/DataList.php create mode 100644 src/Components/Diff.php create mode 100644 src/Components/Dock.php create mode 100644 src/Components/DockItem.php create mode 100644 src/Components/Dropdown.php create mode 100644 src/Components/Fab.php create mode 100644 src/Components/Fieldset.php create mode 100644 src/Components/FileInput.php create mode 100644 src/Components/Filter.php create mode 100644 src/Components/Footer.php create mode 100644 src/Components/Hover3d.php create mode 100644 src/Components/HoverGallery.php create mode 100644 src/Components/InputGroup.php create mode 100644 src/Components/ListRow.php create mode 100644 src/Components/Mask.php create mode 100644 src/Components/Megamenu.php create mode 100644 src/Components/MenuList.php create mode 100644 src/Components/Modal.php create mode 100644 src/Components/Navbar.php create mode 100644 src/Components/Otp.php create mode 100644 src/Components/Pagination.php create mode 100644 src/Components/PaginationItem.php create mode 100644 src/Components/Progress.php create mode 100644 src/Components/Skeleton.php create mode 100644 src/Components/Stat.php create mode 100644 src/Components/Stats.php create mode 100644 src/Components/Status.php create mode 100644 src/Components/Step.php create mode 100644 src/Components/Steps.php create mode 100644 src/Components/Swap.php create mode 100644 src/Components/Table.php create mode 100644 src/Components/TextRotate.php create mode 100644 src/Components/ThemeController.php create mode 100644 src/Components/Timeline.php create mode 100644 src/Components/TimelineItem.php delete mode 100644 src/Traits/HasErrors.php create mode 100644 tests/Components/DaisyUiIntegrationTest.php create mode 100644 tests/Performance/CustomizationContractTest.php create mode 100644 tests/Performance/FrontendContractTest.php create mode 100644 tests/Performance/RenderContractTest.php create mode 100644 tests/frontend/assert-css.mjs create mode 100644 tests/frontend/lazy.css create mode 100644 tests/frontend/smoke.html diff --git a/.github/workflows/frontend-tests.yml b/.github/workflows/frontend-tests.yml new file mode 100644 index 00000000..01fe24de --- /dev/null +++ b/.github/workflows/frontend-tests.yml @@ -0,0 +1,30 @@ +name: frontend-tests + +on: + push: + branches: [2.x-dev] + pull_request: + branches: [2.x-dev] + +permissions: + contents: read + +jobs: + tailwind: + name: Tailwind CSS 4 compile + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v7 + + - name: Setup Node + uses: actions/setup-node@v6 + with: + node-version: 24 + + - name: Install frontend dependencies + run: npm install --no-audit --no-fund + + - name: Compile Tailwind and verify Lazy UI classes + run: npm run test:css diff --git a/README.md b/README.md index aa57d785..d4201909 100644 --- a/README.md +++ b/README.md @@ -62,84 +62,101 @@ composer test ## 📁 List of components +Lazy UI 2.x provides wrappers for all current daisyUI 5 component families while keeping daisyUI class names internal to the package. +
show / hide - Actions - - [x] Button - - [ ] Dropdown - - [ ] Modal + - [x] Dropdown + - [x] FAB / Speed Dial + - [x] Modal - [x] Swap + - [x] Theme Controller - Data display - - - [x] Alert + - [x] Accordion - [x] Avatar + - [x] Aura - [x] Badge - - [ ] Banner - - [ ] Calendar - - [ ] Card - - [ ] Carousel + - [x] Card + - [x] Carousel - [x] Chat bubble - - [ ] Collapse - - [ ] Countdown - - [ ] Empty placeholder + - [x] Collapse + - [x] Countdown + - [x] Diff + - [x] Hover 3D + - [x] Hover Gallery - [x] Kbd + - [x] List + - [x] Stat + - [x] Status + - [x] Table + - [x] Text Rotate + - [x] Timeline + +- Navigation + - [x] Breadcrumbs + - [x] Dock + - [x] Link + - [x] Megamenu + - [x] Menu + - [x] Navbar + - [x] Pagination + - [x] Steps + - [x] Tabs + +- Feedback + - [x] Alert - [x] Loading - [x] Progress - [x] Radial progress - - [ ] Stat - - [ ] Table - - [ ] Tag - - [ ] Timeline - - [ ] Toast + - [x] Skeleton + - [x] Toast - [x] Tooltip - - [ ] Treeview - Data input + - [x] Calendar - [x] Checkbox - - [ ] File input - - [x] Text input - - [ ] Radio + - [x] Fieldset + - [x] File Input + - [x] Filter + - [x] Label + - [x] Radio - [x] Range - - [ ] Rating - - [ ] Select - - [ ] Multi select + - [x] Rating + - [x] Select + - [x] Text Input - [x] Textarea - [x] Toggle -- Layout + - [x] Validator + - [x] OTP - - [ ] Artboard - - [x] Button group +- Layout - [x] Divider - - [ ] Drawer - - [ ] Footer + - [x] Drawer + - [x] Footer + - [x] Hero + - [x] Indicator - [x] Join - - [ ] Hero - - [ ] Indicator - - [x] Input group - [x] Mask - [x] Stack -- Navigation - - - [ ] Bottom Navigation - - [x] Breadcrumbs - - [x] Link - - [ ] Menu - - [ ] Navbar - - [ ] Pagination - - [ ] Steps - - [x] Tab - - Mockup - - [ ] Browser - - [ ] Code + - [x] Browser + - [x] Code - [x] Phone - - [ ] Window + - [x] Window + +### Legacy compatibility + +- [x] Button Group → Join +- [x] `danger` → daisyUI `error` +- [x] `boxed` / `lifted` / `bordered` tab API → daisyUI 5 tab classes +- [x] Legacy square/parallelogram masks retained by Lazy UI compatibility CSS
diff --git a/config/lazy/themes.php b/config/lazy/themes.php index 762d6521..7d3835c6 100644 --- a/config/lazy/themes.php +++ b/config/lazy/themes.php @@ -6,44 +6,53 @@ * Available options: multiple, single, toggle */ 'theme_toggle' => 'multiple', + /* - * This is the list of themes that will be available for the theme switcher. - * You can add your own themes here. + * Themes displayed by the Lazy UI theme switcher. + * + * To add a custom daisyUI theme, define it in your application's + * resources/css/lazy.css and add the same theme name here. */ 'themes' => [ 'light', 'dark', - 'acid', - 'aqua', - 'autumn', - 'black', + 'cupcake', 'bumblebee', - 'business', - 'cmyk', - 'coffee', + 'emerald', 'corporate', - 'cupcake', + 'synthwave', + 'retro', 'cyberpunk', - 'dracula', - 'emerald', - 'fantasy', - 'forest', - 'garden', + 'valentine', 'halloween', - 'lemonade', + 'garden', + 'forest', + 'aqua', 'lofi', + 'pastel', + 'fantasy', + 'wireframe', + 'black', 'luxury', + 'dracula', + 'cmyk', + 'autumn', + 'business', + 'acid', + 'lemonade', 'night', - 'pastel', - 'retro', - 'synthwave', - 'valentine', + 'coffee', 'winter', - 'wireframe', + 'dim', + 'nord', + 'sunset', + 'caramellatte', + 'abyss', + 'silk', ], /* - * This is list to toggle themes. + * Themes used by the two-state theme toggle. */ 'toggle_themes' => [ 'light', diff --git a/package.json b/package.json index 2cdd6cce..11e05902 100644 --- a/package.json +++ b/package.json @@ -3,14 +3,17 @@ "version": "2.0.0-dev", "description": "TallStack components", "license": "MIT", - "keywords": ["design-system","tailwindcss","components","ui-library","component","framework","tailwind"], + "keywords": ["design-system", "tailwindcss", "components", "ui-library", "component", "framework", "tailwind"], + "scripts": { + "test:css": "tailwindcss -i ./tests/frontend/lazy.css -o ./build/lazy-ui.css --minify && node ./tests/frontend/assert-css.mjs" + }, "dependencies": { "alpinejs": "^3.13.1", "axios": "^1.6.0", - "quill": "^2.0.3", - "theme-change": "^2.5.0" + "quill": "^2.0.3" }, "devDependencies": { + "@tailwindcss/cli": "^4.3.3", "@tailwindcss/forms": "^0.5.6", "@tailwindcss/postcss": "^4.3.3", "daisyui": "^5.7.46", diff --git a/phpstan.neon.dist b/phpstan.neon.dist index cc55b688..9ca6c1d7 100644 --- a/phpstan.neon.dist +++ b/phpstan.neon.dist @@ -9,5 +9,4 @@ parameters: tmpDir: build/phpstan checkOctaneCompatibility: true checkModelProperties: true - checkMissingIterableValueType: false treatPhpDocTypesAsCertain: true diff --git a/resources/css/lazy.css b/resources/css/lazy.css index 0f47a7c2..b229762c 100644 --- a/resources/css/lazy.css +++ b/resources/css/lazy.css @@ -1,22 +1,30 @@ -@import "tailwindcss"; -@import "quill/dist/quill.snow.css"; @import "./components/toast.css"; -@source "../views/**/*.blade.php"; +.pause { + animation-play-state: paused; +} -@plugin "@tailwindcss/forms" { - strategy: "class"; +/* + * daisyUI 4 compatibility helpers. + * These mask variants were removed in daisyUI 5, but Lazy UI 2 keeps + * them so existing Lazy UI markup continues to render. + */ +.mask-square { + clip-path: inset(0); } -@plugin "daisyui" { - themes: light --default, dark --prefersdark, 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; - logs: false; +.mask-parallelogram { + clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); } -@theme { - --font-base: "Inter", sans-serif; +.mask-parallelogram-2 { + clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%); } -.pause { - animation-play-state: paused; +.mask-parallelogram-3 { + clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); +} + +.mask-parallelogram-4 { + clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%); } diff --git a/resources/js/components/logout.js b/resources/js/components/logout.js deleted file mode 100644 index 82e02bc5..00000000 --- a/resources/js/components/logout.js +++ /dev/null @@ -1,7 +0,0 @@ -let logout = document.querySelector('.logout') -if (logout) { - logout.addEventListener('click', (event) => { - event.preventDefault() - document.getElementById('logout-form').submit() - }) -} diff --git a/resources/js/components/quill.js b/resources/js/components/quill.js index 01b76558..2f72fed6 100644 --- a/resources/js/components/quill.js +++ b/resources/js/components/quill.js @@ -1,88 +1,87 @@ -import Quill from "quill"; +let quillPromise; -window.Quill = Quill; -document.addEventListener('alpine:init', () => { - Alpine.data('quill', ({__value, options, __config, onTextChange, onInit}) => { - return { - __ready: false, - __value, - __quill: undefined, - - init() { - if (typeof window.Quill !== 'function') { - throw new Error(`quill requires Quill to be loaded. See https://quilljs.com/docs/`); - } +async function loadQuill() { + if (typeof window.Quill === 'function') { + return window.Quill; + } - queueMicrotask(() => { - this.__ready = true; + quillPromise ??= Promise.all([ + import('quill'), + import('quill/dist/quill.snow.css'), + ]).then(([module]) => { + window.Quill = module.default; - this.__quill = new window.Quill(this.$refs.quill, this.__quillOptions()); + return module.default; + }); - this.__quill.root.innerHTML = this.__value; + return quillPromise; +} - this.__quill.on('text-change', () => { - if (typeof onTextChange === 'function') { - const result = onTextChange(this); +document.addEventListener('alpine:init', () => { + Alpine.data('quill', ({__value, options, __config, onTextChange, onInit}) => ({ + __ready: false, + __value, + __quill: undefined, - if (result === false) { - return; - } - } + init() { + queueMicrotask(async () => { + const Quill = await loadQuill(); - this.__value = this.__quill.root.innerHTML; + if (!this.$refs.quill?.isConnected) { + return; + } - this.$dispatch('input', this.__value); - }); + this.__quill = new Quill(this.$refs.quill, this.__quillOptions()); + this.__quill.root.innerHTML = this.__value ?? ''; - if (options.autofocus) { - this.$nextTick(() => { - this.focus(); - }); + this.__quill.on('text-change', () => { + if (typeof onTextChange === 'function' && onTextChange(this) === false) { + return; } - if (typeof onInit === 'function') { - onInit(this); - } + this.__value = this.__quill.root.innerHTML; + this.$dispatch('input', this.__value); }); - }, - focus() { - if (!this.__ready) { - return; - } - - this.__quill.focus(); - }, + this.__ready = true; - __quillOptions() { - let config = __config(this, options); - let toolbarHandlers = {}; - let modules = {}; - - if (config.hasOwnProperty('toolbarHandlers')) { - toolbarHandlers = config.toolbarHandlers; - delete config.toolbarHandlers; + if (options.autofocus) { + this.$nextTick(() => this.focus()); } - if (config.hasOwnProperty('modules')) { - modules = config.modules; - delete config.modules; + if (typeof onInit === 'function') { + onInit(this); } + }); + }, - return { - theme: options.theme, - readOnly: options.readOnly, - placeholder: options.placeholder, - modules: { - toolbar: { - container: options.toolbar, - handlers: toolbarHandlers, - }, - ...modules, + focus() { + if (this.__ready) { + this.__quill.focus(); + } + }, + + __quillOptions() { + const config = __config(this, options); + const toolbarHandlers = config.toolbarHandlers ?? {}; + const modules = config.modules ?? {}; + + delete config.toolbarHandlers; + delete config.modules; + + return { + theme: options.theme, + readOnly: options.readOnly, + placeholder: options.placeholder, + modules: { + toolbar: { + container: options.toolbar, + handlers: toolbarHandlers, }, - ...config, - }; - }, - }; - }); -}) + ...modules, + }, + ...config, + }; + }, + })); +}); diff --git a/resources/js/components/themeswitcher.js b/resources/js/components/themeswitcher.js index 5f374d3f..c320839f 100644 --- a/resources/js/components/themeswitcher.js +++ b/resources/js/components/themeswitcher.js @@ -1,17 +1,105 @@ -import { themeChange } from 'theme-change' +const storageKey = 'theme'; -themeChange() -let themeToggleBtn = document.querySelector('[data-toggle-theme]') +function toggleThemes(element) { + return (element.dataset.toggleTheme || 'light,dark') + .split(',') + .map((theme) => theme.trim()) + .filter(Boolean); +} -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') +function currentTheme() { + return document.documentElement.dataset.theme || localStorage.getItem(storageKey) || ''; +} + +function syncToggles(theme) { + document.querySelectorAll('[data-toggle-theme]').forEach((element) => { + const themes = toggleThemes(element); + element.classList.toggle('swap-active', themes.length > 1 && theme === themes[1]); + }); +} + +function syncActiveTheme(theme) { + document.querySelectorAll('[data-set-theme]').forEach((element) => { + const activeClass = element.dataset.actClass; + + if (!activeClass) { + return; } + + element.classList.toggle(activeClass, element.dataset.setTheme === theme); + }); +} + +function applyTheme(theme, persist = true) { + if (!theme) { + return; + } + + document.documentElement.dataset.theme = theme; + + if (persist) { + localStorage.setItem(storageKey, theme); + } + + syncToggles(theme); + syncActiveTheme(theme); + + window.dispatchEvent(new CustomEvent('lazy-ui:theme-changed', { + detail: {theme}, + })); +} + +function initialTheme() { + const stored = localStorage.getItem(storageKey); + + if (stored) { + return stored; + } + + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark'; } -}) + return currentTheme(); +} +document.addEventListener('click', (event) => { + const themeItem = event.target.closest('[data-set-theme]'); + + if (themeItem) { + applyTheme(themeItem.dataset.setTheme); + + return; + } + + const toggle = event.target.closest('[data-toggle-theme]'); + + if (!toggle) { + return; + } + + const themes = toggleThemes(toggle); + + if (!themes.length) { + return; + } + + const index = themes.indexOf(currentTheme()); + const nextTheme = themes[(index + 1 + themes.length) % themes.length]; + + applyTheme(nextTheme); +}); + +function bootThemeSwitcher() { + const theme = initialTheme(); + + if (theme) { + applyTheme(theme, false); + } +} +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', bootThemeSwitcher, {once: true}); +} else { + bootThemeSwitcher(); +} diff --git a/resources/js/lazy.js b/resources/js/lazy.js index 18743679..3ac1ddcb 100644 --- a/resources/js/lazy.js +++ b/resources/js/lazy.js @@ -1,4 +1,3 @@ import './components/themeswitcher' -import './components/logout' import './components/toast' import './components/quill' diff --git a/resources/views/aura.blade.php b/resources/views/aura.blade.php new file mode 100644 index 00000000..72e42777 --- /dev/null +++ b/resources/views/aura.blade.php @@ -0,0 +1,23 @@ +@props([ + 'type' => '', + 'size' => '', + 'glow' => false, + 'unstyled' => false, +]) + +
class([ + 'aura' => ! $unstyled, + 'aura-dual' => ! $unstyled && $type === 'dual', + 'aura-rainbow' => ! $unstyled && $type === 'rainbow', + 'aura-holo' => ! $unstyled && $type === 'holo', + 'aura-gold' => ! $unstyled && $type === 'gold', + 'aura-silver' => ! $unstyled && $type === 'silver', + 'aura-glow' => ! $unstyled && $glow, + 'aura-xs' => ! $unstyled && $size === 'xs', + 'aura-sm' => ! $unstyled && $size === 'sm', + 'aura-md' => ! $unstyled && $size === 'md', + 'aura-lg' => ! $unstyled && $size === 'lg', + 'aura-xl' => ! $unstyled && $size === 'xl', +]) }}> + {{ $slot }} +
diff --git a/resources/views/badge.blade.php b/resources/views/badge.blade.php index 10c2e985..7f41a6d6 100644 --- a/resources/views/badge.blade.php +++ b/resources/views/badge.blade.php @@ -1,5 +1,9 @@ @props([ 'label' => '', - 'icon' => '' + 'icon' => '', + 'unstyled' => false, ]) -merge(['class'=> ($icon ? ' gap-2' : '')]) }}>{{ $icon }}{{ $label ?: $slot }} + +merge(['class' => ! $unstyled && $icon ? 'gap-2' : '']) }}> + {{ $icon }}{{ $label ?: $slot }} + diff --git a/resources/views/btn.blade.php b/resources/views/btn.blade.php index 4fc9fc9b..f2a0d69e 100644 --- a/resources/views/btn.blade.php +++ b/resources/views/btn.blade.php @@ -1,24 +1,27 @@ @props([ 'icon' => null, 'rightIcon' => null, - 'label' => '' + 'label' => '', + 'unstyled' => false, ]) @aware([ 'join' => false, ]) -<{{ $tag }} {{ $attributes->merge(['class' => $icon || $rightIcon ? ' gap-2' : ''])->class([ - 'join-item' => $join, - 'mr-2' => ! $join, - ]) }}> +<{{ $tag }} {{ $attributes->merge([ + 'class' => ! $unstyled && ($icon || $rightIcon) ? 'gap-2' : '', +])->class([ + 'join-item' => ! $unstyled && $join, + 'mr-2' => ! $unstyled && ! $join, +]) }}> @if($icon) {{ $icon }} @endisset {{ $label }} {{ $slot }} @if($rightIcon) -
+
{{ $rightIcon }}
@endisset diff --git a/resources/views/btn/logout.blade.php b/resources/views/btn/logout.blade.php index 6592bca4..100e8777 100644 --- a/resources/views/btn/logout.blade.php +++ b/resources/views/btn/logout.blade.php @@ -1,12 +1,24 @@ @props([ - 'icon' => '' + 'icon' => '', + 'action' => null, + 'route' => 'logout', ]) -
- merge(['class'=>"logout"]) }}> + +@php + $target = $action; + + if ($target === null) { + $target = app('router')->has($route) + ? route($route) + : '#'; + } +@endphp + +
+ @csrf + + except(['action', 'route', 'href']) }}> {!! $icon !!} {{ __('Logout') }} - - - @csrf -
-
+ + diff --git a/resources/views/calendar.blade.php b/resources/views/calendar.blade.php new file mode 100644 index 00000000..b21a9f3c --- /dev/null +++ b/resources/views/calendar.blade.php @@ -0,0 +1,21 @@ +@props([ + 'driver' => 'native', + 'value' => null, + 'unstyled' => false, +]) + +@if ($driver === 'cally') + class([ + 'cally bg-base-100 border border-base-300 shadow-lg rounded-box' => ! $unstyled, + ]) }}> + + +@elseif ($driver === 'vanilla') +
class(['vc' => ! $unstyled]) }}>{{ $slot }}
+@else + class(['input' => ! $unstyled]) }} + /> +@endif diff --git a/resources/views/card.blade.php b/resources/views/card.blade.php new file mode 100644 index 00000000..221f2c0e --- /dev/null +++ b/resources/views/card.blade.php @@ -0,0 +1,32 @@ +@props([ + 'title' => '', + 'bordered' => false, + 'compact' => false, + 'side' => false, + 'imageFull' => false, + 'unstyled' => false, +]) + +
class([ + 'card' => ! $unstyled, + 'card-border' => ! $unstyled && $bordered, + 'card-sm' => ! $unstyled && $compact, + 'card-side' => ! $unstyled && $side, + 'image-full' => ! $unstyled && $imageFull, +]) }}> + @isset($figure) +
{{ $figure }}
+ @endisset + +
! $unstyled])> + @if ($title) +

! $unstyled])>{{ $title }}

+ @endif + + {{ $slot }} + + @isset($actions) +
! $unstyled])>{{ $actions }}
+ @endisset +
+
diff --git a/resources/views/carousel-item.blade.php b/resources/views/carousel-item.blade.php new file mode 100644 index 00000000..3b0511a1 --- /dev/null +++ b/resources/views/carousel-item.blade.php @@ -0,0 +1,5 @@ +@props(['unstyled' => false]) + +
class(['carousel-item' => ! $unstyled]) }}> + {{ $slot }} +
diff --git a/resources/views/carousel.blade.php b/resources/views/carousel.blade.php new file mode 100644 index 00000000..34a2f52a --- /dev/null +++ b/resources/views/carousel.blade.php @@ -0,0 +1,15 @@ +@props([ + 'vertical' => false, + 'center' => false, + 'end' => false, + 'unstyled' => false, +]) + +
class([ + 'carousel' => ! $unstyled, + 'carousel-vertical' => ! $unstyled && $vertical, + 'carousel-center' => ! $unstyled && $center, + 'carousel-end' => ! $unstyled && $end, +]) }}> + {{ $slot }} +
diff --git a/resources/views/choices.blade.php b/resources/views/choices.blade.php index ea7f352f..1eedda8e 100644 --- a/resources/views/choices.blade.php +++ b/resources/views/choices.blade.php @@ -1,57 +1,41 @@ @props([ - 'options' => null, + 'options' => [], 'label' => '', 'placeholder' => 'Please select a value', -// 'value'=> null ]) -@php - $model = $attributes->wire('model'); - $lazy = $model->hasModifier('lazy'); - $parameter = $model->value(); +@php + $unstyled = $attributes->has('unstyled'); + $selectAttributes = $attributes->except('unstyled')->class([ + 'select w-full' => ! $unstyled, + ]); @endphp -{{--@dd($attributes,$model, $lazy, $parameter)--}} -
-
-
- -
- -
    - -
-
-
-
+
! $unstyled])> + @if ($label) + + @endif + +
diff --git a/resources/views/collapse.blade.php b/resources/views/collapse.blade.php new file mode 100644 index 00000000..d0728b0d --- /dev/null +++ b/resources/views/collapse.blade.php @@ -0,0 +1,19 @@ +@props([ + 'title' => '', + 'open' => false, + 'arrow' => true, + 'plus' => false, + 'unstyled' => false, +]) + +
class([ + 'collapse' => ! $unstyled, + 'collapse-arrow' => ! $unstyled && $arrow && ! $plus, + 'collapse-plus' => ! $unstyled && $plus, + ]) }} + @if ($open) open @endif +> + ! $unstyled])>{{ $title }} +
! $unstyled])>{{ $slot }}
+
diff --git a/resources/views/components/drawer.blade.php b/resources/views/components/drawer.blade.php deleted file mode 100644 index 32503d80..00000000 --- a/resources/views/components/drawer.blade.php +++ /dev/null @@ -1,12 +0,0 @@ -
merge(['class' => 'drawer']) }}> - -
- {{ $slot }} -
-
- -
    - {{ $drawerContent }} -
-
-
\ No newline at end of file diff --git a/resources/views/components/hero.blade.php b/resources/views/components/hero.blade.php deleted file mode 100644 index bbbf2b18..00000000 --- a/resources/views/components/hero.blade.php +++ /dev/null @@ -1,9 +0,0 @@ -
merge(['class' => 'hero bg-base-200']) }}> -
-
-

{{ $title }}

-

{{ $description }}

- {{ $slot }} -
-
-
\ No newline at end of file diff --git a/resources/views/components/indicator.blade.php b/resources/views/components/indicator.blade.php deleted file mode 100644 index 28dfb226..00000000 --- a/resources/views/components/indicator.blade.php +++ /dev/null @@ -1,6 +0,0 @@ -
merge(['class' => 'indicator']) }}> - @if($indicator) - {{ $indicator }} - @endif - {{ $slot }} -
\ No newline at end of file diff --git a/resources/views/countdown.blade.php b/resources/views/countdown.blade.php index 23fb1319..ba7192da 100644 --- a/resources/views/countdown.blade.php +++ b/resources/views/countdown.blade.php @@ -1,101 +1,9 @@ -# Countdown - - - -Large text - - - -Clock countdown - - h - m - s - -Clock countdown with colons - - : - : - - -Large text with labels -
-
- - - - days -
-
- - - - hours -
-
- - - - min -
-
- - - - sec -
-
-Large text with labels under -
-
- - - - days -
-
- - - - hours -
-
- - - - min -
-
- - - - sec -
-
-In boxes -
-
- - - - days -
-
- - - - hours -
-
- - - - min -
-
- - - - sec -
-
+@props([ + 'value' => 0, + 'label' => '', + 'unstyled' => false, +]) + +class(['countdown' => ! $unstyled]) }}> + +@if($label){{ $label }}@endif diff --git a/resources/views/diff.blade.php b/resources/views/diff.blade.php new file mode 100644 index 00000000..2ef84b45 --- /dev/null +++ b/resources/views/diff.blade.php @@ -0,0 +1,11 @@ +@props(['unstyled' => false]) + +
class(['diff' => ! $unstyled]) }}> +
! $unstyled])> + {{ $before ?? '' }} +
+
! $unstyled])> + {{ $after ?? $slot }} +
+
! $unstyled])>
+
diff --git a/resources/views/dock-item.blade.php b/resources/views/dock-item.blade.php new file mode 100644 index 00000000..604626c3 --- /dev/null +++ b/resources/views/dock-item.blade.php @@ -0,0 +1,22 @@ +@props([ + 'href' => null, + 'label' => '', + 'active' => false, + 'unstyled' => false, +]) + +@if ($href) + class(['dock-active' => ! $unstyled && $active]) }}> + {{ $slot }} + @if ($label) + ! $unstyled])>{{ $label }} + @endif + +@else + +@endif diff --git a/resources/views/dock.blade.php b/resources/views/dock.blade.php new file mode 100644 index 00000000..ec44910c --- /dev/null +++ b/resources/views/dock.blade.php @@ -0,0 +1,15 @@ +@props([ + 'size' => '', + 'unstyled' => false, +]) + +
class([ + 'dock' => ! $unstyled, + 'dock-xs' => ! $unstyled && $size === 'xs', + 'dock-sm' => ! $unstyled && $size === 'sm', + 'dock-md' => ! $unstyled && $size === 'md', + 'dock-lg' => ! $unstyled && $size === 'lg', + 'dock-xl' => ! $unstyled && $size === 'xl', +]) }}> + {{ $slot }} +
diff --git a/resources/views/drawer.blade.php b/resources/views/drawer.blade.php new file mode 100644 index 00000000..56f1a456 --- /dev/null +++ b/resources/views/drawer.blade.php @@ -0,0 +1,25 @@ +@props([ + 'drawerContent' => null, + 'id' => 'lazy-drawer', + 'open' => false, + 'end' => false, + 'unstyled' => false, +]) + +
class([ + 'drawer' => ! $unstyled, + 'drawer-end' => ! $unstyled && $end, +]) }}> + ! $unstyled]) @checked($open) /> + +
! $unstyled])> + {{ $slot }} +
+ +
! $unstyled])> + +
! $unstyled])> + {{ $side ?? $drawerContent }} +
+
+
diff --git a/resources/views/dropdown.blade.php b/resources/views/dropdown.blade.php new file mode 100644 index 00000000..d86e60dc --- /dev/null +++ b/resources/views/dropdown.blade.php @@ -0,0 +1,40 @@ +@props([ + 'label' => 'Menu', + 'hover' => false, + 'open' => false, + 'close' => false, + 'start' => false, + 'center' => false, + 'end' => false, + 'top' => false, + 'bottom' => false, + 'left' => false, + 'right' => false, + 'unstyled' => false, +]) + +
class([ + 'dropdown' => ! $unstyled, + 'dropdown-hover' => ! $unstyled && $hover, + 'dropdown-open' => ! $unstyled && $open, + 'dropdown-close' => ! $unstyled && $close, + 'dropdown-start' => ! $unstyled && $start, + 'dropdown-center' => ! $unstyled && $center, + 'dropdown-end' => ! $unstyled && $end, + 'dropdown-top' => ! $unstyled && $top, + 'dropdown-bottom' => ! $unstyled && $bottom, + 'dropdown-left' => ! $unstyled && $left, + 'dropdown-right' => ! $unstyled && $right, +]) }}> + @isset($trigger) + {{ $trigger }} + @else + + @endisset + +
! $unstyled, + ])> + {{ $slot }} +
+
diff --git a/resources/views/fab.blade.php b/resources/views/fab.blade.php new file mode 100644 index 00000000..557cfcf8 --- /dev/null +++ b/resources/views/fab.blade.php @@ -0,0 +1,26 @@ +@props([ + 'flower' => false, + 'label' => 'Menu', + 'unstyled' => false, +]) + +
class([ + 'fab' => ! $unstyled, + 'fab-flower' => ! $unstyled && $flower, +]) }}> + @isset($trigger) + {{ $trigger }} + @else +
! $unstyled])>{{ $label }}
+ @endisset + + {{ $slot }} + + @isset($close) +
! $unstyled])>{{ $close }}
+ @endisset + + @isset($main) +
! $unstyled])>{{ $main }}
+ @endisset +
diff --git a/resources/views/fieldset.blade.php b/resources/views/fieldset.blade.php new file mode 100644 index 00000000..ee157156 --- /dev/null +++ b/resources/views/fieldset.blade.php @@ -0,0 +1,22 @@ +@props([ + 'legend' => '', + 'label' => '', + 'hint' => '', + 'unstyled' => false, +]) + +
class(['fieldset' => ! $unstyled]) }}> + @if ($legend) + ! $unstyled])>{{ $legend }} + @endif + + @if ($label) + + @endif + + {{ $slot }} + + @if ($hint) +

! $unstyled])>{{ $hint }}

+ @endif +
diff --git a/resources/views/file-input.blade.php b/resources/views/file-input.blade.php new file mode 100644 index 00000000..3e9ce1b3 --- /dev/null +++ b/resources/views/file-input.blade.php @@ -0,0 +1,32 @@ +@props([ + 'color' => '', + 'size' => '', + 'ghost' => false, + 'unstyled' => false, +]) + +@aware([ + 'join' => false, +]) + +class([ + 'file-input' => ! $unstyled, + 'join-item' => ! $unstyled && $join, + 'file-input-ghost' => ! $unstyled && $ghost, + 'file-input-primary' => ! $unstyled && $color === 'primary', + 'file-input-secondary' => ! $unstyled && $color === 'secondary', + 'file-input-accent' => ! $unstyled && $color === 'accent', + 'file-input-neutral' => ! $unstyled && $color === 'neutral', + 'file-input-info' => ! $unstyled && $color === 'info', + 'file-input-success' => ! $unstyled && $color === 'success', + 'file-input-warning' => ! $unstyled && $color === 'warning', + 'file-input-error' => ! $unstyled && $color === 'error', + 'file-input-xs' => ! $unstyled && $size === 'xs', + 'file-input-sm' => ! $unstyled && $size === 'sm', + 'file-input-md' => ! $unstyled && $size === 'md', + 'file-input-lg' => ! $unstyled && $size === 'lg', + 'file-input-xl' => ! $unstyled && $size === 'xl', + ]) }} +/> diff --git a/resources/views/filter.blade.php b/resources/views/filter.blade.php new file mode 100644 index 00000000..2a4b6751 --- /dev/null +++ b/resources/views/filter.blade.php @@ -0,0 +1,26 @@ +@props([ + 'options' => [], + 'name' => 'filter', + 'resetLabel' => '×', + 'unstyled' => false, +]) + +
class(['filter' => ! $unstyled]) }}> + ! $unstyled]) + /> + + @foreach ($options as $value => $label) + ! $unstyled]) + /> + @endforeach + + {{ $slot }} +
diff --git a/resources/views/footer.blade.php b/resources/views/footer.blade.php new file mode 100644 index 00000000..7676fe6d --- /dev/null +++ b/resources/views/footer.blade.php @@ -0,0 +1,13 @@ +@props([ + 'horizontal' => false, + 'center' => false, + 'unstyled' => false, +]) + +
class([ + 'footer' => ! $unstyled, + 'footer-horizontal' => ! $unstyled && $horizontal, + 'footer-center' => ! $unstyled && $center, +]) }}> + {{ $slot }} +
diff --git a/resources/views/hero.blade.php b/resources/views/hero.blade.php new file mode 100644 index 00000000..c76577cc --- /dev/null +++ b/resources/views/hero.blade.php @@ -0,0 +1,25 @@ +@props([ + 'title' => '', + 'description' => '', + 'center' => true, + 'unstyled' => false, +]) + +
class(['hero' => ! $unstyled]) }}> +
! $unstyled, + 'text-center' => ! $unstyled && $center, + ])> +
+ @if ($title) +

! $unstyled])>{{ $title }}

+ @endif + + @if ($description) +

! $unstyled])>{{ $description }}

+ @endif + + {{ $slot }} +
+
+
diff --git a/resources/views/hover-3d.blade.php b/resources/views/hover-3d.blade.php new file mode 100644 index 00000000..53b2bb34 --- /dev/null +++ b/resources/views/hover-3d.blade.php @@ -0,0 +1,11 @@ +@props(['unstyled' => false]) + +
class(['hover-3d' => ! $unstyled]) }}> + {{ $slot }} + + @unless ($unstyled) + @for ($zone = 0; $zone < 8; $zone++) + + @endfor + @endunless +
diff --git a/resources/views/hover-gallery.blade.php b/resources/views/hover-gallery.blade.php new file mode 100644 index 00000000..3831c688 --- /dev/null +++ b/resources/views/hover-gallery.blade.php @@ -0,0 +1,5 @@ +@props(['unstyled' => false]) + +
class(['hover-gallery' => ! $unstyled]) }}> + {{ $slot }} +
diff --git a/resources/views/indicator.blade.php b/resources/views/indicator.blade.php new file mode 100644 index 00000000..7a53e6ab --- /dev/null +++ b/resources/views/indicator.blade.php @@ -0,0 +1,16 @@ +@props([ + 'indicator' => null, + 'indicatorClass' => 'badge badge-secondary', + 'unstyled' => false, +]) + +
class(['indicator' => ! $unstyled]) }}> + @if ($indicator !== null) + ! $unstyled, + $indicatorClass => ! $unstyled, + ])>{{ $indicator }} + @endif + + {{ $slot }} +
diff --git a/resources/views/input.blade.php b/resources/views/input.blade.php index 73720f55..e6589215 100644 --- a/resources/views/input.blade.php +++ b/resources/views/input.blade.php @@ -1,10 +1,22 @@ @props([ 'placeholder' => '', 'hasError' => false, + 'hint' => '', + 'unstyled' => false, ]) -merge([ - 'class' => 'w-full'.($hasError ? ' text-error input-error' : ''), +@aware([ + 'join' => false, +]) + +class([ + 'join-item' => ! $unstyled && $join, +])->merge([ + 'class' => $unstyled ? '' : 'w-full'.($hasError ? ' text-error input-error' : ''), 'type' => 'text', 'placeholder' => $placeholder, ]) }} /> + +@if ($hint) +

! $unstyled])>{{ $hint }}

+@endif diff --git a/resources/views/list-row.blade.php b/resources/views/list-row.blade.php new file mode 100644 index 00000000..fe7c6a4b --- /dev/null +++ b/resources/views/list-row.blade.php @@ -0,0 +1,5 @@ +@props(['unstyled' => false]) + +
  • class(['list-row' => ! $unstyled]) }}> + {{ $slot }} +
    • diff --git a/resources/views/list.blade.php b/resources/views/list.blade.php new file mode 100644 index 00000000..29784f79 --- /dev/null +++ b/resources/views/list.blade.php @@ -0,0 +1,5 @@ +@props(['unstyled' => false]) + +
      class(['list' => ! $unstyled]) }}> + {{ $slot }} +
    diff --git a/resources/views/mask.blade.php b/resources/views/mask.blade.php new file mode 100644 index 00000000..ce135da4 --- /dev/null +++ b/resources/views/mask.blade.php @@ -0,0 +1,29 @@ +@props([ + 'shape' => 'squircle', + 'unstyled' => false, +]) + +
    class([ + 'mask' => ! $unstyled, + 'mask-squircle' => ! $unstyled && $shape === 'squircle', + 'mask-heart' => ! $unstyled && $shape === 'heart', + 'mask-hexagon' => ! $unstyled && $shape === 'hexagon', + 'mask-hexagon-2' => ! $unstyled && $shape === 'hexagon-2', + 'mask-decagon' => ! $unstyled && $shape === 'decagon', + 'mask-pentagon' => ! $unstyled && $shape === 'pentagon', + 'mask-diamond' => ! $unstyled && $shape === 'diamond', + 'mask-circle' => ! $unstyled && $shape === 'circle', + 'mask-star' => ! $unstyled && $shape === 'star', + 'mask-star-2' => ! $unstyled && $shape === 'star-2', + 'mask-triangle' => ! $unstyled && $shape === 'triangle', + 'mask-triangle-2' => ! $unstyled && $shape === 'triangle-2', + 'mask-triangle-3' => ! $unstyled && $shape === 'triangle-3', + 'mask-triangle-4' => ! $unstyled && $shape === 'triangle-4', + 'mask-square' => ! $unstyled && $shape === 'square', + 'mask-parallelogram' => ! $unstyled && $shape === 'parallelogram', + 'mask-parallelogram-2' => ! $unstyled && $shape === 'parallelogram-2', + 'mask-parallelogram-3' => ! $unstyled && $shape === 'parallelogram-3', + 'mask-parallelogram-4' => ! $unstyled && $shape === 'parallelogram-4', +]) }}> + {{ $slot }} +
    diff --git a/resources/views/megamenu.blade.php b/resources/views/megamenu.blade.php new file mode 100644 index 00000000..835dbdd9 --- /dev/null +++ b/resources/views/megamenu.blade.php @@ -0,0 +1,25 @@ +@props([ + 'wide' => false, + 'full' => false, + 'vertical' => false, + 'size' => '', + 'unstyled' => false, +]) + +
    class([ + 'megamenu' => ! $unstyled, + 'megamenu-wide' => ! $unstyled && $wide, + 'megamenu-full' => ! $unstyled && $full, + 'megamenu-vertical' => ! $unstyled && $vertical, + 'megamenu-xs' => ! $unstyled && $size === 'xs', + 'megamenu-sm' => ! $unstyled && $size === 'sm', + 'megamenu-md' => ! $unstyled && $size === 'md', + 'megamenu-lg' => ! $unstyled && $size === 'lg', + 'megamenu-xl' => ! $unstyled && $size === 'xl', +]) }}> + @isset($active) + ! $unstyled])>{{ $active }} + @endisset + + {{ $slot }} +
    diff --git a/resources/views/menu-list.blade.php b/resources/views/menu-list.blade.php new file mode 100644 index 00000000..1c0de527 --- /dev/null +++ b/resources/views/menu-list.blade.php @@ -0,0 +1,20 @@ +@props([ + 'size' => '', + 'horizontal' => false, + 'paged' => false, + 'unstyled' => false, +]) + +
      class([ + 'menu' => ! $unstyled, + 'menu-vertical' => ! $unstyled && ! $horizontal, + 'menu-horizontal' => ! $unstyled && $horizontal, + 'menu-paged' => ! $unstyled && $paged, + 'menu-xs' => ! $unstyled && $size === 'xs', + 'menu-sm' => ! $unstyled && $size === 'sm', + 'menu-md' => ! $unstyled && $size === 'md', + 'menu-lg' => ! $unstyled && $size === 'lg', + 'menu-xl' => ! $unstyled && $size === 'xl', +]) }}> + {{ $slot }} +
    diff --git a/resources/views/menu.blade.php b/resources/views/menu.blade.php index 80aeccad..1f35e69d 100644 --- a/resources/views/menu.blade.php +++ b/resources/views/menu.blade.php @@ -9,6 +9,9 @@ 'inlineIcon' => '', 'indicator' => '', 'toggle' => false, + 'active' => false, + 'disabled' => false, + 'focus' => false, ]) @php @@ -19,6 +22,7 @@ $routePath = $route ? route($route, [], false) : $href; $path = trim($routePath !== '/admin' ? $routePath.'*' : $routePath, '/'); $count = (int) $count > 99 ? '99+' : $count; + $isActive = $active || request()->is($path); @endphp @if ($title) @@ -27,19 +31,27 @@ @endif -
  • - class([ - 'menu-active' => request()->is($path), +
  • + class([ + 'menu-active' => $isActive, + 'menu-disabled' => $disabled, + 'menu-focus' => $focus, + 'menu-dropdown-toggle' => $toggle, ]) }} - @if ($toggle) - @click="open = ! open" - @endif + @if ($toggle) + @click="open = ! open" + :aria-expanded="open" + @endif > -
    - @if ($inlineIcon || $icon) + @if ($inlineIcon || $icon) +
    @if ($inlineIcon) @else @@ -47,19 +59,22 @@ {!! $icon !!}
    @endif - @endif -
    +
    • + @endif +
    {{ $label }}
    + @if ($indicator) {{ $indicator }} @endif + @if ($count) {{ $count }} @endif + @if ($toggle) - + @@ -67,14 +82,15 @@     @if ($slot->isNotEmpty()) -