diff --git a/stanzas/pagination-table/SliderPagination.vue b/stanzas/pagination-table/SliderPagination.vue
index ce89388c..129ff01c 100644
--- a/stanzas/pagination-table/SliderPagination.vue
+++ b/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;
diff --git a/stanzas/pagination-table/app.vue b/stanzas/pagination-table/app.vue
index da7391fc..4cfa54a1 100644
--- a/stanzas/pagination-table/app.vue
+++ b/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 @@
{{ cell.value }}
+ :target="
+ cell.column.target ? `_${cell.column.target}` : '_blank'
+ "
+ >{{ cell.value }}
@@ -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,
diff --git a/stanzas/pagination-table/index.js b/stanzas/pagination-table/index.js
index 5a8f227a..fdca0189 100644
--- a/stanzas/pagination-table/index.js
+++ b/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();
}
}
diff --git a/stanzas/scroll-table/app.vue b/stanzas/scroll-table/app.vue
index 5f82d0c4..4f21f04b 100644
--- a/stanzas/scroll-table/app.vue
+++ b/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,
};
},
diff --git a/stanzas/scroll-table/index.js b/stanzas/scroll-table/index.js
index 99b9e87e..dea1e89d 100644
--- a/stanzas/scroll-table/index.js
+++ b/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();
}
}