Support partial update for stanzas built with Vue

[darashi]

This requires that the Vue component is reactive against params (props).
Otherwise, some features may be broken.

[reika0717]

@darashi ご対応頂きありがとうございます。
こちら一通り動作確認して動きに問題はなさそうなのですが、それでも以前の打合せで教えていただいたように toRefs の追加対応した方が良いでしょうか。

[darashi]

@reika0717 こちら、例えば

1. Pagination Table を表示する
2. Customize タブの page-slider を true から false に変更する

という操作をしても、page-slider の表示/非表示が切り替わらない状態になっているかと思います。全ては確認していませんが、多くのパラメータでも同様のことが起こるかと思います。ご確認いただけますでしょうか。

[reika0717]

@darashi パラメーターの変更がリアルタイムで反映されるかですね。
再現し、確かに反映されないことを確認しました。ご教示ありがとうございます。

[darashi]

@reika0717 はい、そのとおりです！

[reika0717]

@darashi tableにおけるすべてのparameterを toRefs を使用してreactiveにしたと思うのですが、それでもリアルタイムに反映されません…
お手数ですが、一度見ていただけないでしょうか。

[darashi]

取り急ぎ page-slider だけ動作するようにしてみました。 params.pageSlider.value のように .value を取得してしまうと、そこで reactiveness が失われてしまいます。また、 params = toRefs(params) とするよりは、 params を分割しつつ使ったほうがよいかと思います。伝わりますでしょうか...?（ちょっとややこしそうな気もするので、後ほど他の場所も見てみます）

[darashi]

つづいて page-size-option を動作するようにしてみました。

    const pageSizeOption = params.pageSizeOption.value.split(",").map(Number);

としてしまうと、pageSizeOption がこの時点の値に固定されてしまいます。ここで pageSizeOption は params.pageSizeOption が更新されるたびに計算しなおしてほしいので、computed() を使います。

ところで、

        perPage: pageSizeOption.value[0],

においては perPage はデフォルト値を与えているだけなので、ここは導出された値でなくてもよいかなと思いました。

ただ、この実装だと、 perPage で 10 を選んだ状態で page-size-option から 10 を消すと、空白を選択したような表示になってしまい、ややおかしな状態になります。ちゃんと対応するには、選択された perPage が page-size-option に無いケースの仕様のほうをより詳細に検討する必要がありそうです。今回のケースだと、リストには perPage で指定された値は常に存在するようにする、とかでしょうか。

[darashi]

padding の変更に追従するようにしました。 padding は Vue の外側にあるノードの padding を書き換えているようなので、 Vue ではなく index.js のほうで対応するようにしました。

[darashi]

data-url と data-type の変更に対応しました。

data-url と data-type の変更を監視し、変更があれば fetch し（初回は必ず fetch する）、完了後にその結果を state.reseponseJSON にセットします（computed ではなく watch を使ったのは、 computed は非同期処理ができないからです）。

status.columns と status.allRows はそれぞれ responseJSON や params から導出される値なので（status.allRows の計算にはstatus.columns が必要で、そのために結果的に params に依存している）、それぞれを computed にしました。

この変更の副作用として、columnsパラメータが設定されているときは、テーブルヘッダだけ先に表示されるようになりました。というのは、columns パラメータが設定されている場合には、データの取得完了を待たずにテーブルヘッダの表示に必要な情報が揃っているからです。

toRefs は params 全体に適用するのをやめ、必要なものだけを toRefs の結果から取り出すようにしました。

[darashi]

#49 で再度実装してみました