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(); } }