adminforth 1.5.11-next.1 → 1.5.11

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

@@ -116,8 +116,12 @@ const options = computed(() => {
 
   // for each of  ...props.options  merge on lowest level. so if { chart: {height : 2} }, it should not replace chart level, only height level
   function mergeOptions(options: any, newOptions: any) {
+    if (!newOptions) {
+      return;
+    }
     for (const key in newOptions) {
-      if (typeof newOptions[key] === 'object') {
+      // and is not array
+      if (typeof newOptions[key] === 'object' && !Array.isArray(newOptions[key])) {
         if (!options[key]) {
           options[key] = {};
         }

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

@@ -128,8 +128,12 @@ const options = computed(() => {
 
   // for each of  ...props.options  merge on lowest level. so if { chart: {height : 2} }, it should not replace chart level, only height level
   function mergeOptions(options: any, newOptions: any) {
+    if (!newOptions) {
+      return;
+    }
     for (const key in newOptions) {
-      if (typeof newOptions[key] === 'object') {
+      // and is not array
+      if (typeof newOptions[key] === 'object' && !Array.isArray(newOptions[key])) {
         if (!options[key]) {
           options[key] = {};
         }

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

@@ -42,7 +42,7 @@ const optionsBase = {
     chart: {
       height: 400,
       width: "100%",
-      type: "donut",
+      type: "pie",
     },
     stroke: {
       colors: ["transparent"],
@@ -137,7 +137,8 @@ const options = computed(() => {
       return;
     }
     for (const key in newOptions) {
-      if (typeof newOptions[key] === 'object') {
+      // and is not array
+      if (typeof newOptions[key] === 'object' && !Array.isArray(newOptions[key])) {
         if (!options[key]) {
           options[key] = {};
         }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative inline-block afcl-select">
+  <div class="relative inline-block afcl-select" ref="internalSelect">
     <div class="relative">
       <input
         ref="inputEl"
@@ -89,7 +89,6 @@ import { ref, computed, onMounted, onUnmounted, watch, type Ref } from 'vue';
 import { IconCaretDownSolid } from '@iconify-prerendered/vue-flowbite';
 import { useElementSize } from '@vueuse/core'
 
-
 const props = defineProps({
   options: Array,
   modelValue: {
@@ -123,6 +122,7 @@ const dropdownStyle = ref<{ top?: string; }>({
 });
 
 const selectedItems: Ref<any[]> = ref([]);
+const internalSelect = ref<HTMLElement | null>(null);
 
 function inputInput() {
   if (!props.multiple && selectedItems.value.length) {
@@ -147,15 +147,12 @@ function updateFromProps() {
 }
 
 function inputClick() {
-  if (props.isReadonly) {
-    return;
-  }
-  if (!showDropdown.value) {
-    showDropdown.value = true;
-  } else {
-    if (!search.value) {
-      showDropdown.value = false;
-    }
+  if (props.isReadonly) return;
+  // Toggle local dropdown
+  showDropdown.value = !showDropdown.value;
+  // If the dropdown is about to close, reset the search
+  if (!showDropdown.value && !search.value) {
+    search.value = '';
   }
 }
 
@@ -198,10 +195,12 @@ const filteredItems = computed(() => {
   );
 });
 
-const handleClickOutside = (event) => {
-  if (!event.target.closest('.afcl-select')) {
+
+const handleClickOutside = (event: MouseEvent) => {
+  const targetEl = event.target as HTMLElement | null;
+  const closestSelect = targetEl?.closest('.afcl-select');
+  if (closestSelect !== internalSelect.value)
     showDropdown.value = false;
-  }
 };
 
 const addClickListener = () => {
@@ -228,7 +227,7 @@ const toogleItem = (item) => {
   if (!props.multiple && search.value) {
     search.value = '';
   }
-  
+
   const list = selectedItems.value.map(item => item.value);
   const updValue = list.length ? list : null;
   let emitValue;
@@ -238,13 +237,10 @@ const toogleItem = (item) => {
     emitValue = updValue;
   }
   emit('update:modelValue', emitValue);
-
 };
 
-
 onUnmounted(() => {
   removeClickListener();
 });
 
-
 </script>

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

@@ -0,0 +1,116 @@
+<template>
+
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+  <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          <th scope="col" class="px-6 py-3"
+            v-for="column in columns"
+          >
+            <slot v-if="$slots[`header:${column.fieldName}`]" :name="`header:${column.fieldName}`" :column="column" />
+            
+            <span v-else>
+              {{ column.label }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(item, index) in dataPage"
+          :class="{
+            'odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800': evenHighlights,
+            'border-b dark:border-gray-700': index !== dataPage.length - 1 || totalPages > 1,
+          }"
+        >
+          <td class="px-6 py-4" 
+            v-for="column in props.columns"
+          >
+            <slot v-if="$slots[`cell:${column.fieldName}`]" 
+              :name="`cell:${column.fieldName}`" 
+              :item="item" :column="column"
+            >
+            </slot>
+            <span v-else>
+              {{ item[column.fieldName] }}
+            </span>
+          </td>
+        </tr>
+      </tbody>
+  </table>
+  <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between p-4" 
+    v-if="totalPages > 1"
+    :aria-label="$t('Table navigation')">
+    <i18n-t 
+      keypath="Showing {from} to {to} of {total}" tag="span" class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"
+    >
+      <template #from><span class="font-semibold text-gray-900 dark:text-white">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
+      <template #to><span class="font-semibold text-gray-900 dark:text-white">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
+      <template #total><span class="font-semibold text-gray-900 dark:text-white">{{ props.data.length }}</span></template>
+    </i18n-t>
+
+    <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
+      <li v-for="page in totalPages" :key="page">
+        <a href="#" 
+          @click.prevent="switchPage(page)"
+          :aria-current="page === page ? 'page' : undefined"
+          :class='{
+            "text-blue-600 bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast hover:opacity-90": page === currentPage,
+            "text-gray-500 border bg-white border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white": page !== currentPage,
+            "rounded-s-lg ms-0": page === 1,
+            "rounded-e-lg": page === totalPages,
+          }'
+          class="flex items-center justify-center px-3 h-8 leading-tight ">
+          {{ page }}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+
+  
+</template>
+
+<script setup lang="ts">
+  import { ref, type Ref, computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      columns: {
+        label: string,
+        fieldName: string,
+      }[],
+      data: {
+        [key: string]: any,
+      }[],
+      evenHighlights?: boolean,
+      pageSize?: number,
+    }>(), {
+      evenHighlights: true,
+      pageSize: 10,
+    }
+  );
+
+  const currentPage = ref(1);
+
+  const totalPages = computed(() => {
+    return Math.ceil(props.data.length / props.pageSize);
+  });
+
+  const dataPage = computed(() => {
+    const start = (currentPage.value - 1) * props.pageSize;
+    const end = start + props.pageSize;
+    return props.data.slice(start, end);
+  });
+
+  function switchPage(p: number) {
+    currentPage.value = p;
+  }
+
+  const emites = defineEmits([
+    'update:activeTab',
+  ]);
+  
+
+</script>

package/dist/spa/src/afcl/index.ts

@@ -12,4 +12,7 @@ export { default as Dropzone } from './Dropzone.vue';
 export { default as AreaChart } from './AreaChart.vue';
 export { default as BarChart } from './BarChart.vue';
 export { default as PieChart } from './PieChart.vue';
+export { default as Table } from './Table.vue';
+
+
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.5.11-next.1",
+  "version": "1.5.11",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",