動作ページ

https://playcss.dev/box-shadow

カンマ区切りで複数の影を追加できるので、「add shadow」ボタンで複数の値を追加できるようにした。

実装

縦に長くなるので、縮められるようにしてみた、

heightを変えているけれど、カラーピッカーの時には、overflowをvisibleにする必要があるので、カラーピッカーを表示したときに変化させる形になってる。

追加部分は、コンポーネント分割をして、v-forで回す感じにしてる。

<transition-groupname="side"><templatev-for="(box, index) in boxShadow"><box-shadowsv-model="boxShadow[index]":key="box.id":index="index"@delete="deleteBox"/></template></transition-group>

border-radiusとかもコンポーネント分割して、値だけを返すようにしてどのページでも追加できるようにしていきたい。

valuesの部分のスタイルにfieldset要素がちょうどよかったので、使ってみてる。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset