UIのカスタマイズを試す

当面の目標は「CRUDがひととおりできるようなる」ですが、それにはUIコンポーネントのカスタマイズも含まれます。あるエンティティで、一覧ビューはのCRUD操作の中心です。その見た目に少し違和感を感じました。余白が少し大きすぎる気がする。文字の色が少し薄すぎる気がする。どうやって変更するの？で、戸惑いました。一体何をどう操作すれば見た目のカスタマイズできるのか？がわからず、一旦絶望しました；

昔の Visual Basic だとか、Delphi だとかには、wysiwygなエディタが装備されていて、直感的に作業できたのです。からの20数年、自分的に状況は劣化したように思いますが、きっとそうではないのでしょう。「きっと何か操作できる」は思い込みです。ではなくて、デフォルトの定義を書き換える、あるいは書き足すというのが正解でした。nuxt/ui のコンポーネントには、uiプロパティというのがあり、デフォルトの構成をカスタマイズすることができるようになっているようです。まあ、そうですよね；

たとえば、UTableの場合、

.vueファイルの中であれば

 <UTable :rows="rows" :columns="columns" :loading="pending" 
            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'No items.' }"
            :ui="td: { color: 'text-gray-800', padding: 'px-2 py-2' }"
            >

app.config.ts の中であれば

ui: {
    table: {
      td: { color: 'text-gray-800', padding: 'px-2 py-2' },
      th: { padding: 'px-2 py-2' }  
    }

という感じで、文字の色などを変更できたました。めでたす。

とはいえ、ライブラリで提供されるもっと複雑な複合コンポーネントの場合、たとえば、いくつものボタンを内包していて、そのうちひとつのボタンだけでキャプションの色を変更したい！ということがあった場合、そのライブラリにカスタマイズのインタフェースが提供されていなければ手出しもできず絶望するということもあるんじゃないかと思うのですがどうなのでしょう。昔のwindowsコンポーネントであれば、そのボタンを外部から操作することができないということは想像できなかった気がします。