Skip to content

Commit 4bcef0e

Browse files
NoOne7135NoOne7135
committed
Merge branch 'main' of github.com:devforth/adminforth
2 parents abeaf84 + 4d5e282 commit 4bcef0e

14 files changed

Lines changed: 137 additions & 9094 deletions

File tree

‎adminforth/spa/src/afcl/AreaChart.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
</template>
44

55
<script setup lang="ts">
6-
import ApexCharts, { type ApexOptions } from 'apexcharts';
6+
import type ApexCharts from 'apexcharts';
7+
import { type ApexOptions } from 'apexcharts';
78
import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
9+
type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
810
911
const chart: Ref<HTMLDivElement | null> = ref(null);
1012
@@ -137,15 +139,22 @@ const options = computed(() => {
137139
});
138140
139141
let apexChart: ApexCharts | null = null;
142+
let ApexChartsCtor: ApexChartsConstructor | null = null;
140143
141-
watch(() => [options.value, chart.value], (value) => {
144+
watch(() => [options.value, chart.value], async (value) => {
142145
if (!value || !chart.value) {
143146
return;
144147
}
148+
149+
if (!ApexChartsCtor) {
150+
const module = await import('apexcharts') as { default: ApexChartsConstructor };
151+
ApexChartsCtor = module.default;
152+
}
153+
145154
if (apexChart) {
146155
apexChart.updateOptions(options.value);
147156
} else {
148-
apexChart = new ApexCharts(chart.value, options.value);
157+
apexChart = new ApexChartsCtor(chart.value, options.value);
149158
apexChart.render();
150159
}
151160
});

‎adminforth/spa/src/afcl/BarChart.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
</template>
44

55
<script setup lang="ts">
6-
import ApexCharts, { type ApexOptions } from 'apexcharts';
6+
import type ApexCharts from 'apexcharts';
7+
import { type ApexOptions } from 'apexcharts';
78
import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
9+
type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
810
911
const chart: Ref<HTMLDivElement | null> = ref(null);
1012
@@ -150,15 +152,22 @@ const options = computed(() => {
150152
});
151153
152154
let apexChart: ApexCharts | null = null;
155+
let ApexChartsCtor: ApexChartsConstructor | null = null;
153156
154-
watch(() => [options.value, chart.value], (value) => {
157+
watch(() => [options.value, chart.value], async (value) => {
155158
if (!value || !chart.value) {
156159
return;
157160
}
161+
162+
if (!ApexChartsCtor) {
163+
const module = await import('apexcharts') as { default: ApexChartsConstructor };
164+
ApexChartsCtor = module.default;
165+
}
166+
158167
if (apexChart) {
159168
apexChart.updateOptions(options.value);
160169
} else {
161-
apexChart = new ApexCharts(chart.value, options.value);
170+
apexChart = new ApexChartsCtor(chart.value, options.value);
162171
apexChart.render();
163172
}
164173
});

‎adminforth/spa/src/afcl/JsonViewer.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,16 @@
1010
</template>
1111

1212
<script setup lang="ts">
13-
import { computed } from 'vue'
14-
import { JsonViewer } from 'vue3-json-viewer'
13+
import { computed, defineAsyncComponent } from 'vue'
1514
import { useCoreStore } from '@/stores/core'
15+
import "vue3-json-viewer/dist/vue3-json-viewer.css";
1616
1717
defineProps<{
1818
value: any
1919
expandDepth?: number
2020
}>()
2121
22+
const JsonViewer = defineAsyncComponent(() => import('vue3-json-viewer').then(module => module.JsonViewer))
2223
const coreStore = useCoreStore()
2324
2425
const currentTheme = computed(() => (coreStore.theme === 'dark' ? 'dark' : 'light'))

‎adminforth/spa/src/afcl/MixedChart.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
</template>
44

55
<script setup lang="ts">
6-
import ApexCharts, { type ApexOptions } from 'apexcharts';
6+
import type ApexCharts from 'apexcharts';
7+
import { type ApexOptions } from 'apexcharts';
78
import { ref, onUnmounted, watch, computed } from 'vue';
9+
type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
810
911
const props = defineProps<{
1012
data: {
@@ -103,17 +105,23 @@ const chartOptions = computed(() => {
103105
});
104106
105107
let apexChart: ApexCharts | null = null;
108+
let ApexChartsCtor: ApexChartsConstructor | null = null;
106109
107110
108-
watch(() => [chartOptions.value, chart.value], ([newOptions, newRef]) => {
111+
watch(() => [chartOptions.value, chart.value], async ([newOptions, newRef]) => {
109112
if (!newOptions || !newRef) {
110113
return;
111114
}
115+
116+
if (!ApexChartsCtor) {
117+
const module = await import('apexcharts') as { default: ApexChartsConstructor };
118+
ApexChartsCtor = module.default;
119+
}
112120
113121
if (apexChart) {
114122
apexChart.updateOptions(newOptions);
115123
} else if (chart.value) {
116-
apexChart = new ApexCharts(chart.value, newOptions);
124+
apexChart = new ApexChartsCtor(chart.value, newOptions);
117125
apexChart.render();
118126
}
119127
}, { deep: true });

‎adminforth/spa/src/afcl/PieChart.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
</template>
44

55
<script setup lang="ts">
6-
import ApexCharts, { type ApexOptions } from 'apexcharts';
6+
import type ApexCharts from 'apexcharts';
7+
import { type ApexOptions } from 'apexcharts';
78
import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
9+
type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
810
911
const chart: Ref<HTMLDivElement | null> = ref(null);
1012
@@ -154,15 +156,22 @@ const options = computed(() => {
154156
});
155157
156158
let apexChart: ApexCharts | null = null;
159+
let ApexChartsCtor: ApexChartsConstructor | null = null;
157160
158-
watch(() => [options.value, chart.value], (value) => {
161+
watch(() => [options.value, chart.value], async (value) => {
159162
if (!value || !chart.value) {
160163
return;
161164
}
165+
166+
if (!ApexChartsCtor) {
167+
const module = await import('apexcharts') as { default: ApexChartsConstructor };
168+
ApexChartsCtor = module.default;
169+
}
170+
162171
if (apexChart) {
163172
apexChart.updateOptions(options.value);
164173
} else {
165-
apexChart = new ApexCharts(chart.value, options.value);
174+
apexChart = new ApexChartsCtor(chart.value, options.value);
166175
apexChart.render();
167176
}
168177
});

‎adminforth/spa/src/afcl/TreeMapChart.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
</template>
44

55
<script setup lang="ts">
6-
import ApexCharts, { type ApexOptions } from 'apexcharts';
6+
import type ApexCharts from 'apexcharts';
7+
import { type ApexOptions } from 'apexcharts';
78
import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
9+
type ApexChartsConstructor = new (el: Element, options: ApexOptions) => ApexCharts;
810
911
const chart: Ref<HTMLDivElement | null> = ref(null);
1012
@@ -94,16 +96,22 @@ const options = computed(() => {
9496
});
9597
9698
let apexChart: ApexCharts | null = null;
99+
let ApexChartsCtor: ApexChartsConstructor | null = null;
97100
98-
watch(() => [options.value, chart.value], (value) => {
101+
watch(() => [options.value, chart.value], async (value) => {
99102
if (!value || !chart.value) {
100103
return;
101104
}
102105
106+
if (!ApexChartsCtor) {
107+
const module = await import('apexcharts') as { default: ApexChartsConstructor };
108+
ApexChartsCtor = module.default;
109+
}
110+
103111
if (apexChart) {
104112
apexChart.updateOptions(options.value);
105113
} else {
106-
apexChart = new ApexCharts(chart.value, options.value);
114+
apexChart = new ApexChartsCtor(chart.value, options.value);
107115
apexChart.render();
108116
}
109117
});

‎adminforth/spa/src/components/ResourceForm.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,9 @@ onMounted(() => {
308308
if (column.type === 'json' && currentValues.value) {
309309
if (column.isArray?.enabled) {
310310
// if value is null or undefined, we should set it to empty array
311+
if (column.showIn?.[mode.value] === false) {
312+
return;
313+
}
311314
if (!currentValues.value[column.name]) {
312315
currentValues.value[column.name] = [];
313316
} else {

‎adminforth/spa/src/components/ResourceListTable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,7 @@
340340
</span>
341341
</template>
342342
</span>
343-
<div v-if="totalRows > 0 && pageSizeOptionsComputed?.length"
343+
<div v-if="totalRows > 0 && resource?.options?.listPageSizeOptions?.length"
344344
class="flex items-center gap-2 ml-auto" >
345345
<span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText whitespace-nowrap">
346346
{{ $t('Rows per page') }}

‎adminforth/spa/src/components/ValueRenderer.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,10 @@ import utc from 'dayjs/plugin/utc';
117117
import timezone from 'dayjs/plugin/timezone';
118118
import {checkEmptyValues} from '@/utils';
119119
import { useRoute, useRouter } from 'vue-router';
120-
import { JsonViewer } from "vue3-json-viewer";
121120
import "vue3-json-viewer/dist/vue3-json-viewer.css";
121+
import { defineAsyncComponent } from 'vue';
122122
import type { AdminForthResourceColumnCommon } from '@/types/Common';
123+
const JsonViewer = defineAsyncComponent(() => import('vue3-json-viewer').then(module => module.JsonViewer))
123124
124125
import { useCoreStore } from '@/stores/core';
125126

0 commit comments

Comments
 (0)