安裝 wireui/wireui 與 Icon 測試

This commit is contained in:
allen.yan 2025-04-22 14:20:21 +08:00
parent a863ce23a4
commit bc5e75f151
6 changed files with 268 additions and 16 deletions

View File

@ -11,7 +11,8 @@
"laravel/tinker": "^2.10.1",
"livewire/livewire": "^3.4",
"livewire/volt": "^1.7.0",
"spatie/laravel-permission": "^6.17"
"spatie/laravel-permission": "^6.17",
"wireui/wireui": "^2.4"
},
"require-dev": {
"fakerphp/faker": "^1.23",

131
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "50b5ae6f549fbdc743dd6abf2feebb9f",
"content-hash": "288b2a039ced0d4d9f18d54dac1710ec",
"packages": [
{
"name": "brick/math",
@ -6015,6 +6015,135 @@
"source": "https://github.com/webmozarts/assert/tree/1.11.0"
},
"time": "2022-06-03T18:03:27+00:00"
},
{
"name": "wireui/heroicons",
"version": "v2.9.0",
"source": {
"type": "git",
"url": "https://github.com/wireui/heroicons.git",
"reference": "ccd2ab94293d6f231271c0847c1db34305313c6f"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/wireui/heroicons/zipball/ccd2ab94293d6f231271c0847c1db34305313c6f",
"reference": "ccd2ab94293d6f231271c0847c1db34305313c6f",
"shasum": ""
},
"require": {
"laravel/framework": "^9.16|^10.0|^11.0|^12.0",
"php": "^8.1|^8.2|^8.3|^8.4"
},
"require-dev": {
"larastan/larastan": "^3.0",
"laravel/pint": "^1.6",
"orchestra/testbench": "^10.0",
"pestphp/pest": "^3.0"
},
"type": "library",
"extra": {
"aliases": [],
"laravel": {
"providers": [
"WireUi\\Heroicons\\HeroiconsServiceProvider"
]
}
},
"autoload": {
"psr-4": {
"WireUi\\Heroicons\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Pedro Oliveira",
"email": "pedrolivertwd@gmail.com"
}
],
"description": "The Tailwind Heroicons for laravel blade by WireUI",
"keywords": [
"blade components",
"blade heroicons",
"laravel components",
"livewire icons",
"livewire icons components",
"wireui"
],
"support": {
"issues": "https://github.com/wireui/heroicons/issues",
"source": "https://github.com/wireui/heroicons/tree/v2.9.0"
},
"time": "2025-03-02T22:06:22+00:00"
},
{
"name": "wireui/wireui",
"version": "v2.4.2",
"source": {
"type": "git",
"url": "https://github.com/wireui/wireui.git",
"reference": "fad14ea639322432fa24bb7e61f644a17b503582"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/wireui/wireui/zipball/fad14ea639322432fa24bb7e61f644a17b503582",
"reference": "fad14ea639322432fa24bb7e61f644a17b503582",
"shasum": ""
},
"require": {
"laravel/framework": "^10.0|^11.0|^12.0",
"php": "^8.2|^8.3|^8.4",
"wireui/heroicons": "^2.8"
},
"require-dev": {
"laravel/pint": "^1.19",
"livewire/livewire": "^3.6",
"orchestra/testbench": "^10.0",
"orchestra/testbench-dusk": "^10.0",
"pestphp/pest": "^3.0",
"pestphp/pest-plugin-laravel": "^3.0",
"pestphp/pest-plugin-livewire": "^3.0"
},
"type": "library",
"extra": {
"laravel": {
"aliases": [],
"providers": [
"WireUi\\ServiceProvider"
]
}
},
"autoload": {
"psr-4": {
"WireUi\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Pedro Oliveira",
"email": "pedrolivertwd@gmail.com"
}
],
"description": "TallStack components",
"keywords": [
"blade components",
"laravel components",
"livewire components",
"livewire-ui",
"wireui"
],
"support": {
"issues": "https://github.com/wireui/wireui/issues",
"source": "https://github.com/wireui/wireui/tree/v2.4.2"
},
"time": "2025-04-16T17:33:35+00:00"
}
],
"packages-dev": [

126
config/wireui.php Normal file
View File

@ -0,0 +1,126 @@
<?php
use WireUi\Components;
use WireUi\Enum\Packs;
use WireUi\WireUiConfig as Config;
return [
/*
|--------------------------------------------------------------------------
| Prefix
|--------------------------------------------------------------------------
|
| This option controls the prefix for WireUI components. Examples:
|
| 'wireui-' => 'x-wireui-button'
| 'wireui:' => 'x-wireui:button'
|
*/
'prefix' => null,
/*
|--------------------------------------------------------------------------
| Global Styles
|--------------------------------------------------------------------------
|
| This option controls the global styles for WireUI components.
|
*/
'style' => [
'shadow' => Packs\Shadow::BASE,
'rounded' => Packs\Rounded::MD,
'color' => Packs\Color::PRIMARY,
],
/*
|--------------------------------------------------------------------------
| Default Configuration
|--------------------------------------------------------------------------
|
| This option controls the default configuration for WireUI components.
|
*/
'alert' => Config::alert(),
'avatar' => Config::avatar(),
'badge' => Config::badge(),
'mini-badge' => Config::miniBadge(),
'button' => Config::button(),
'mini-button' => Config::miniButton(),
'card' => Config::card(),
'checkbox' => Config::checkbox(),
'color-picker' => Config::wrapper(),
'datetime-picker' => Config::dateTimePicker(),
'dialog' => Config::dialog(),
'dropdown' => Config::dropdown(),
'icon' => Config::icon(),
'input' => Config::wrapper(),
'currency' => Config::wrapper(),
'maskable' => Config::wrapper(),
'number' => Config::wrapper(),
'password' => Config::wrapper(),
'phone' => Config::wrapper(),
'link' => Config::link(),
'modal' => Config::modal(),
'modal-card' => Config::modal(),
'native-select' => Config::wrapper(),
'notifications' => Config::notifications(),
'radio' => Config::radio(),
'select' => Config::wrapper(),
'textarea' => Config::wrapper(),
'time-picker' => Config::timePicker(),
'time-selector' => Config::timeSelector(),
'toggle' => Config::toggle(),
/*
|--------------------------------------------------------------------------
| WireUI Components
|--------------------------------------------------------------------------
|
| Change the alias to call the component with a different name.
| Extend the component and replace your changes in this file.
|
*/
'components' => Config::defaultComponents([
// 'button' => [
// 'alias' => 'new-button',
// ],
// 'mini-button' => [
// 'class' => Components\Button\Mini::class,
// 'alias' => 'new-mini-button',
// ],
]),
];

View File

@ -7,23 +7,14 @@
<title>{{ config('app.name', 'Laravel Admin') }}</title>
<!-- 字型 & CSS -->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-----------------------------------------------------------
-- animate.min.css by Daniel Eden (https://animate.style)
-- is required for the animation of notifications and slide out panels
-- you can ignore this step if you already have this file in your project
--------------------------------------------------------------------------->
<link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />
<link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />
<script src="{{ asset('vendor/bladewind/js/helpers.js') }}"></script>
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
<wireui:scripts />
</head>
<body class="bg-gray-100 text-gray-800">
@auth

View File

@ -16,9 +16,7 @@
@if (!$menu['permission'] || Auth::user()->can($menu['permission']))
<a href="{{ route($menu['route']) }}"
class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 {{ request()->routeIs($menu['route']) ? 'bg-gray-100 font-semibold' : '' }}">
<span class="material-icons-outlined mr-2">
{{ $menu['icon'] }}
</span>
<x-icon name="{{ $menu['icon'] }}" class="w-5 h-5" />
{{ $menu['label'] }}
</a>

View File

@ -3,10 +3,17 @@ import forms from '@tailwindcss/forms';
/** @type {import('tailwindcss').Config} */
export default {
presets: [
require("./vendor/wireui/wireui/tailwind.config.js")
],
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
"./vendor/wireui/wireui/src/*.php",
"./vendor/wireui/wireui/ts/**/*.ts",
"./vendor/wireui/wireui/src/WireUi/**/*.php",
"./vendor/wireui/wireui/src/Components/**/*.php",
],
theme: {