adminforth 2.57.0 → 2.57.2

package/dist/spa/src/afcl/AreaChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
 
@@ -137,15 +139,22 @@ const options = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
-watch(() => [options.value, chart.value], (value) => {
+watch(() => [options.value, chart.value], async (value) => {
   if (!value || !chart.value) {
     return;
   }
+
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
+
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {
-    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart = new ApexChartsCtor(chart.value, options.value);
     apexChart.render();
   }
 });

package/dist/spa/src/afcl/BarChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
 
@@ -150,15 +152,22 @@ const options = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
-watch(() => [options.value, chart.value], (value) => {
+watch(() => [options.value, chart.value], async (value) => {
   if (!value || !chart.value) {
     return;
   }
+
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
+
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {
-    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart = new ApexChartsCtor(chart.value, options.value);
     apexChart.render();
   }
 });

package/dist/spa/src/afcl/JsonViewer.vue

@@ -10,15 +10,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { JsonViewer } from 'vue3-json-viewer'
+import { computed, defineAsyncComponent } from 'vue'
 import { useCoreStore } from '@/stores/core'
+import "vue3-json-viewer/dist/vue3-json-viewer.css";
 
 defineProps<{
   value: any
   expandDepth?: number
 }>()
 
+const JsonViewer = defineAsyncComponent(() => import('vue3-json-viewer').then(module => module.JsonViewer))
 const coreStore = useCoreStore()
 
 const currentTheme = computed(() => (coreStore.theme === 'dark' ? 'dark' : 'light'))

package/dist/spa/src/afcl/MixedChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, onUnmounted, watch, computed } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const props = defineProps<{
   data: {
@@ -103,17 +105,23 @@ const chartOptions = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
 
-watch(() => [chartOptions.value, chart.value], ([newOptions, newRef]) => {
+watch(() => [chartOptions.value, chart.value], async ([newOptions, newRef]) => {
   if (!newOptions || !newRef) {
     return;
   }
+
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
   
   if (apexChart) {
     apexChart.updateOptions(newOptions);
   } else if (chart.value) {
-    apexChart = new ApexCharts(chart.value, newOptions);
+    apexChart = new ApexChartsCtor(chart.value, newOptions);
     apexChart.render();
   }
 }, { deep: true });

package/dist/spa/src/afcl/PieChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: any) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
 
@@ -154,15 +156,22 @@ const options = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
-watch(() => [options.value, chart.value], (value) => {
+watch(() => [options.value, chart.value], async (value) => {
   if (!value || !chart.value) {
     return;
   }
+
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
+
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {
-    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart = new ApexChartsCtor(chart.value, options.value);
     apexChart.render();
   }
 });

package/dist/spa/src/afcl/TreeMapChart.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import ApexCharts, { type ApexOptions } from 'apexcharts';
+import type ApexCharts from 'apexcharts';
+import { type ApexOptions } from 'apexcharts';
 import { ref, type Ref, watch, computed, onUnmounted } from 'vue';
+type ApexChartsConstructor = new (el: Element, options: ApexOptions) => ApexCharts;
 
 const chart: Ref<HTMLDivElement | null> = ref(null);
 
@@ -94,16 +96,22 @@ const options = computed(() => {
 });
 
 let apexChart: ApexCharts | null = null;
+let ApexChartsCtor: ApexChartsConstructor | null = null;
 
-watch(() => [options.value, chart.value], (value) => {
+watch(() => [options.value, chart.value], async (value) => {
   if (!value || !chart.value) {
     return;
   }
 
+  if (!ApexChartsCtor) {
+    const module = await import('apexcharts') as { default: ApexChartsConstructor };
+    ApexChartsCtor = module.default;
+  }
+
   if (apexChart) {
     apexChart.updateOptions(options.value);
   } else {
-    apexChart = new ApexCharts(chart.value, options.value);
+    apexChart = new ApexChartsCtor(chart.value, options.value);
     apexChart.render();
   }
 });

package/dist/spa/src/components/ResourceForm.vue

@@ -308,6 +308,9 @@ onMounted(() => {
     if (column.type === 'json' && currentValues.value) {
       if (column.isArray?.enabled) {
         // if value is null or undefined, we should set it to empty array
+        if (column.showIn?.[mode.value] === false) {
+          return; 
+        }
         if (!currentValues.value[column.name]) {
           currentValues.value[column.name] = [];
         } else {

package/dist/spa/src/components/ResourceListTable.vue

@@ -340,7 +340,7 @@
         </span> 
       </template>
     </span>
-    <div v-if="totalRows > 0 && pageSizeOptionsComputed?.length" 
+    <div v-if="totalRows > 0 && resource?.options?.listPageSizeOptions?.length" 
       class="flex items-center gap-2 ml-auto" > 
       <span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText whitespace-nowrap"> 
         {{ $t('Rows per page') }} 

package/dist/spa/src/components/ValueRenderer.vue

@@ -117,9 +117,10 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import { JsonViewer } from "vue3-json-viewer";
 import "vue3-json-viewer/dist/vue3-json-viewer.css";
+import { defineAsyncComponent } from 'vue';
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
+const JsonViewer = defineAsyncComponent(() => import('vue3-json-viewer').then(module => module.JsonViewer))
 
 import { useCoreStore } from '@/stores/core';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.57.0",
+  "version": "2.57.2",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",