{{--
    テーブル内ソート項目タイトルを生成する
    @props key ソート項目キー
    @props text 項目タイトル
    @see Action Component.listSortTitle
--}}
@props(['key', 'text'=>null])
<div class=" flex items-center justify-between">
    <a href="javascript:void(0)" class="flex-1 text-center"
        @click="sort('{{$key}}')">{{$text?? $slot}}</a>
    <span>
        <i class="fa-solid fa-caret-up" 
            x-show="($refs.sortkey.value=='{{$key}}' && $refs.sorttype.value=='asc')"></i>
        <i class="fa-solid fa-caret-down" 
            x-show="($refs.sortkey.value=='{{$key}}' && $refs.sorttype.value=='desc')"></i>
    </span>
</div>