Laravelでcolumn-sortableとtailwindcss-iconsを組み合わせた際にアイコンが描画されない
Laravelで作っていた管理画面でソート機能が必要になったのでcolumn-sortable
を入れる
sail composer require kyslik/column-sortable
コンフィグファイル生成する
sail artisan vendor:publish --provider="Kyslik\ColumnSortable\ColumnSortableServiceProvider" --tag="config"
tailwindcss-icons
いれる
https://icones.js.org で探した所、アイコンはCarbon
が良さげだったのでいれる
npm i @egoist/tailwindcss-icons -D
npm i @iconify-json/carbon -D
tailwind.config.js
修正
他のアイコンは使用予定がなかったのでcarbonのみ指定
...
plugins: [
forms,
iconsPlugin({
// Select the icon collections you want to use
// You can also ignore this option to automatically discover all individual icon packages you have installed
// If you install @iconify/json, you should explicitly specify the collections you want to use, like this:
collections: getIconCollections(['carbon']),
// If you want to use all icons from @iconify/json, you can do this:
// collections: getIconCollections("all"),
// and the more recommended way is to use `dynamicIconsPlugin`, see below.
}),
],
...
src/config/columnsortable.php
の編集してfont awesomeではなくcarbonのアイコンを使うように指定
...
/*
spec columns
*/
'columns' => [
'alpha' => [
'rows' => ['description', 'email', 'name', 'slug'],
'class' => 'i-carbon-caret',
],
'amount' => [
'rows' => ['amount', 'price'],
'class' => 'i-carbon-caret',
],
'numeric' => [
'rows' => ['created_at', 'updated_at', 'level', 'id', 'phone_number', 'area_id'],
'class' => 'i-carbon-caret',
],
],
...
/*
suffix class that is appended when ascending direction is applied
*/
'asc_suffix' => '-up',
/*
suffix class that is appended when descending direction is applied
*/
'desc_suffix' => '-down',
...
アイコンはここから探す
アイコンクリック時にアイコン名の書式が選べるのでi-{シリーズ名}-{アイコン名}
のフォーマットにするとコピペが楽
ModelにTrait追記
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;
+ use Kyslik\ColumnSortable\Sortable;
/**
* @method static where(string $string, string $string1, $area_id)
*/
class Areas extends Model
{
use HasFactory;
+ use Sortable;
...
ControllerのEloquent使用箇所にsortable()
を挟む
...
$areas = Areas::sortable()->where('pref_code', '=', $pref_code)->get();
...
View編集
tableにオレオレコンポーネントを使っていたためreadme抜粋
第一引数がDB上のカラム
第二引数が表示テキスト
@sortablelink('id', 'ID')
カラム名がクエリストリングに露呈するのが気持ち悪いなと思っていたけど第三引数で差し替えられそうなのでこれは後でやる(ちゃんと読んでなかった)
第三引数で差し替えられそう
嘘をつくな
array() parameter (3rd) is default (GET) query strings parameter
カラム名クリックしたらソート中のアイコンが…でませんね…
徐ろにlayout開いて下記追加したらアイコン出たけど絶対違うだろと思いつつ寝た
{{-- tailwind認識用 --}}
...
<div class="hidden">
<i class="i-carbon-caret-up"></i>
<i class="i-carbon-caret-down"></i>
<i class="i-carbon-caret-sort"></i>
<i class="i-carbon-caret-sort-up"></i>
<i class="i-carbon-caret-sort-down"></i>
</div>
...
寝る直前に気づいた(けどそのまま寝た)
tailwindのクラス名をコンフィグファイルに書いていたので多分検出されていない
config/columnsortable.php
を認識出来るよう追記
...
@@ -6,8 +6,8 @@ import {getIconCollections, iconsPlugin} from "@egoist/tailwindcss-icons";
export default {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
+ './config/*.php'
],
...
表示されるようになった
ソートも機能している
けどソート中のカラムのアイコン定義がsuffix形式でフル表記がないのでやはり出ない
どうしたものか(CSSは書きたくない)
どうにもならなさそうだったのでsafelistに入れた
safelist: [
{
pattern: /i-carbon-caret-(up|down)/,
},
{
pattern: /i-carbon-caret-sort(up|down)/,
},
],
なんか敗北感はあるがとりあえずソート時にもアイコン出し分けされるようになった
正攻法かどうかはわからないがbladeに非表示でアイコン設置するよりはましだと思うのでbladeからは削除しておわり