Support partial update for stanzas built with Vue

stanzas/pagination-table/SliderPagination.vue

@@ -123,6 +123,10 @@ export default defineComponent({
     const paginationNumList = ref(null);
     function drawKnobArrow() {
       setTimeout(() => {
+        if (!canvas.value) {
+          return;
+        }
+
         const totalPages = props.totalPages;
         if (totalPages <= 5) {
           return;

stanzas/pagination-table/app.vue

@@ -201,7 +201,7 @@
                   { hide: cell.hide },
                   cell.column.align,
                   { fixed: cell.column.fixed },
-                  cell.column.class
+                  cell.column.class,
                 ]"
                 :style="
                   cell.column.fixed
@@ -212,15 +212,20 @@
                 <span v-if="cell.href && cell.column.unescape">
                   <a
                     :href="cell.href"
-                    :target="cell.column.target ? `_${cell.column.target}` : '_blank'"
+                    :target="
+                      cell.column.target ? `_${cell.column.target}` : '_blank'
+                    "
                     v-html="cell.value"
                   ></a>
                 </span>
                 <span v-else-if="cell.href">
                   <a
                     :href="cell.href"
-                    :target="cell.column.target ? `_${cell.column.target}` : '_blank'"
-                  >{{ cell.value }}</a>
+                    :target="
+                      cell.column.target ? `_${cell.column.target}` : '_blank'
+                    "
+                    >{{ cell.value }}</a
+                  >
                 </span>
                 <span v-else-if="cell.column.unescape" v-html="cell.value">
                 </span>
@@ -255,8 +260,8 @@ import {
   ref,
   computed,
   watch,
-  onMounted,
   onRenderTriggered,
+  toRefs,
 } from "vue";
 
 import SliderPagination from "./SliderPagination.vue";
@@ -291,8 +296,16 @@ export default defineComponent({
   props: metadata["stanza:parameter"].map((p) => p["stanza:key"]),
 
   setup(params) {
+    const {
+      pageSlider,
+      pageSizeOption: pageSizeOptionStr,
+      dataUrl,
+      dataType,
+    } = toRefs(params);
     const sliderPagination = ref();
-    const pageSizeOption = params.pageSizeOption.split(",").map(Number);
+    const pageSizeOption = computed(() =>
+      pageSizeOptionStr.value.split(",").map(Number)
+    );
 
     const state = reactive({
       responseJSON: null, // for download. may consume extra memory
@@ -308,8 +321,8 @@ export default defineComponent({
 
       pagination: {
         currentPage: 1,
-        perPage: pageSizeOption[0],
-        isSliderOn: params.pageSlider,
+        perPage: pageSizeOption.value[0],
+        isSliderOn: pageSlider,
       },
 
       isMenuOn: false,
@@ -414,8 +427,8 @@ export default defineComponent({
       const reversedRows = rows.reverse().map((row, rowIndex) => {
         return row.map((cell, colIndex) => {
           if (cell.column.rowspan) {
-            delete cell.hide
-            delete cell.rowspanCount
+            delete cell.hide;
+            delete cell.rowspanCount;
             const aboveValue = rows[rowIndex + 1]
               ? rows[rowIndex + 1][colIndex].value
               : null;
@@ -475,10 +488,18 @@ export default defineComponent({
       state.pagination.currentPage = currentPage;
     }
 
-    async function fetchData() {
-      const data = await loadData(params.dataUrl, params.dataType);
+    watch(
+      [dataUrl, dataType],
+      async ([dataUrl, dataType]) => {
+        state.responseJSON = null;
+        state.responseJSON = await loadData(dataUrl, dataType);
+      },
+      { immediate: true }
+    );
+
+    state.columns = computed(() => {
+      const data = state.responseJSON || [];
 
-      state.responseJSON = data;
       let columns;
       if (params.columns) {
         columns = JSON.parse(params.columns).map((column, index) => {
@@ -498,12 +519,16 @@ export default defineComponent({
         columns = [];
       }
 
-      state.columns = columns.map((column) => {
+      return columns.map((column) => {
         const values = data.map((obj) => obj[column.id]);
         return createColumnState(column, values);
       });
+    });
+
+    state.allRows = computed(() => {
+      const data = state.responseJSON || [];
 
-      state.allRows = data.map((row) => {
+      return data.map((row) => {
         return state.columns.map((column) => {
           return {
             column,
@@ -512,9 +537,7 @@ export default defineComponent({
           };
         });
       });
-    }
-
-    onMounted(fetchData);
+    });
 
     const thead = ref(null);
     onRenderTriggered(() => {
@@ -525,7 +548,7 @@ export default defineComponent({
     });
 
     return {
-      width: params.width ? params.width + 'px' : '100%',
+      width: computed(() => (params.width ? params.width + "px" : "100%")),
       sliderPagination,
       pageSizeOption,
       state,

stanzas/pagination-table/index.js

@@ -1,5 +1,5 @@
 import Stanza from "togostanza/stanza";
-import { createApp } from "vue";
+import { createApp, h } from "vue";
 import App from "./app.vue";
 
 import { appendCustomCss } from "@/lib/metastanza_utils.js";
@@ -11,10 +11,26 @@ export default class PaginationTable extends Stanza {
     const main = this.root.querySelector("main");
     main.parentNode.style.backgroundColor =
       "var(--togostanza-background-color)";
+    this._setMainPadding();
+
+    const self = this;
+    this._app = createApp({
+      render() {
+        return h(App, self.params);
+      },
+    });
+    this._component = this._app.mount(main);
+  }
+
+  _setMainPadding() {
+    const main = this.root.querySelector("main");
     main.parentNode.style.padding = this.params["padding"];
+  }
 
-    this._app?.unmount();
-    this._app = createApp(App, this.params);
-    this._app.mount(main);
+  handleAttributeChange(name) {
+    if (name === "padding") {
+      this._setMainPadding();
+    }
+    this._component?.$forceUpdate();
   }
 }

stanzas/scroll-table/app.vue

@@ -60,6 +60,7 @@ import {
   onMounted,
   onRenderTriggered,
   ref,
+  toRefs,
 } from "vue";
 
 import loadData from "@/lib/load-data";
@@ -70,6 +71,7 @@ export default defineComponent({
   props: metadata["stanza:parameter"].map((p) => p["stanza:key"]),
 
   setup(params) {
+    params = toRefs(params)
     const state = reactive({
       columns: [],
       allRows: [],
@@ -84,20 +86,20 @@ export default defineComponent({
     async function fetchData() {
       state.isFetching = true;
       let urlParams = {
-        limit: params.pageSize,
+        limit: params.pageSize.value,
         offset: state.offset,
       };
       urlParams = new URLSearchParams(urlParams);
-      const { dataUrl } = params;
+      const dataUrl = params.dataUrl.value;
       const connectCharacter = new URL(dataUrl) ? "&" : "?";
       const data = await loadData(
         `${dataUrl}${connectCharacter}${urlParams}`,
-        params.dataType
+        params.dataType.value
       );
 
-      if (params.columns) {
-        state.columns = JSON.parse(params.columns).map((column, index) => {
-          column.fixed = index < params.fixedColumns;
+      if (params.columns.value) {
+        state.columns = JSON.parse(params.columns.value).map((column, index) => {
+          column.fixed = index < params.fixedColumns.value;
           return column;
         });
       } else if (data.length > 0) {
@@ -106,7 +108,7 @@ export default defineComponent({
           return {
             id: key,
             label: key,
-            fixed: index < params.fixedColumns,
+            fixed: index < params.fixedColumns.value,
           };
         });
       } else {
@@ -137,7 +139,7 @@ export default defineComponent({
           e.path[0].firstChild.clientHeight - e.path[0].clientHeight &&
         !state.isFetching
       ) {
-        state.offset = state.offset + params.pageSize;
+        state.offset = state.offset + params.pageSize.value;
         fetchData();
       }
     }
@@ -157,9 +159,9 @@ export default defineComponent({
     return {
       state,
       handleScroll,
-      width: params.width,
-      height: params.height,
-      padding: params.padding,
+      width: params.width.value,
+      height: params.height.value,
+      padding: params.padding.value,
       thead,
     };
   },

stanzas/scroll-table/index.js

@@ -2,7 +2,7 @@ import Stanza from "togostanza/stanza";
 
 import { appendCustomCss } from "@/lib/metastanza_utils.js";
 
-import { createApp } from "vue";
+import { createApp, h } from "vue";
 import App from "./app.vue";
 
 export default class ScrollTable extends Stanza {
@@ -14,8 +14,16 @@ export default class ScrollTable extends Stanza {
       "var(--togostanza-background-color)";
     main.parentNode.style.padding = this.params["padding"];
 
-    this._app?.unmount();
-    this._app = createApp(App, this.params);
-    this._app.mount(main);
+    const self = this;
+    this._app = createApp({
+      render() {
+        return h(App, self.params);
+      },
+    });
+    this._component = this._app.mount(main);
+  }
+
+  handleAttributeChange() {
+    this._component?.$forceUpdate();
   }
 }