adminforth 1.5.5-next.3 → 1.5.5-next.5

package/dist/spa/src/App.vue

@@ -173,7 +173,7 @@
     </div> 
 
     <div v-else-if="routerIsReady && loginRedirectCheckIsReady && publicConfigLoaded">
-      <RouterView/>
+      <RouterView />
     </div>
 
     <div v-else class="flex items-center justify-center h-screen">
@@ -268,7 +268,7 @@ const sidebarAside = ref(null);
 const routerIsReady = ref(false);
 const loginRedirectCheckIsReady = ref(false);
 
-const loggedIn = computed(() => route.name !== 'login');
+const loggedIn = computed(() => !!coreStore?.adminUser);
 
 const theme = ref('light');
 

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex items-center h-5">
+    <input :id="id" 
+      ref="rememberInput"
+      type="checkbox"
+      :checked="props.modelValue"
+      @change="$emit('update:modelValue', $event.target.checked)"
+      class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-lightPrimary focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 checked:bg-lightPrimary checked:dark:bg-darkPrimary" /> 
+  </div>
+  <label :for="id" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+    <slot></slot>
+  </label>
+</template>
+
+<script setup lang="ts">
+
+const props = defineProps({
+  modelValue: Boolean,
+});
+
+defineEmits(['update:modelValue']);
+
+const id = `afcb-${Math.random().toString(36).substring(7)}`
+</script>

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

@@ -0,0 +1,98 @@
+<template>
+  <div class="flex items-center justify-center w-full"
+    @dragover.prevent="dragging = true"
+    @dragleave.prevent="dragging = false"
+    @drop.prevent="dragging = false; doEmit($event.dataTransfer.files)"
+  >
+      <label :id="id" class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer dark:hover:bg-gray-800 
+        hover:bg-gray-100  dark:hover:border-gray-500 dark:hover:bg-gray-600"
+        :class="{
+          'border-blue-600 dark:border-blue-400': dragging,
+          'border-gray-300 dark:border-gray-600': !dragging,
+          'bg-blue-50 dark:bg-blue-800': dragging,
+          'bg-gray-50 dark:bg-gray-800': !dragging,
+        }"
+      >
+          <div class="flex flex-col items-center justify-center pt-5 pb-6">
+              
+            
+              <svg v-if="!selectedFiles.length" class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+              </svg>
+              <div v-else class="flex items-center justify-center w-full mt-1 mb-4">
+                <template v-for="file in selectedFiles">
+                  <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1">
+                    <IconFileSolid class="w-5 h-5" />
+                    {{ file.name }} ({{ humanifySize(file.size) }})
+                  </p>
+                </template>
+
+              </div>
+
+              <p v-if="!selectedFiles.length" class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ props.extensions.join(', ').toUpperCase().replace(/\./g, '') }}
+                <template v-if="props.maxSizeBytes">
+                 (Max size: {{ humanifySize(props.maxSizeBytes) }})
+                </template>
+              </p>
+          </div>
+          <input :id="id" type="file" class="hidden" 
+            :accept="props.extensions.join(', ')"
+            @change="doEmit($event.target.files)"
+            :multiple="props.multiple || false"
+          />
+      </label>
+  </div> 
+</template>
+
+<script setup lang="ts">
+import { humanifySize } from '@/utils';
+import { ref } from 'vue';
+import { IconFileSolid } from '@iconify-prerendered/vue-flowbite';
+
+const props = defineProps<{
+  extensions: string[],
+  maxSizeBytes: number,
+  multiple: boolean,
+  modelValue: FileList,
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const id = `afcl-dropzone-${Math.random().toString(36).substring(7)}`;
+
+const selectedFiles: Ref<{
+  name: string,
+  size: number,
+  mime: string,
+}[]> = ref([]);
+
+watch(() => props.modelValue, (files) => {
+  selectedFiles.value = Array.from(files).map(file => ({
+    name: file.name,
+    size: file.size,
+    mime: file.type,
+  }));
+});
+
+function doEmit(filesIn: FileList) {
+
+  const multiple = props.multiple || false;
+  const files = Array.from(filesIn);
+  if (!files.length) return;
+  if (!multiple) {
+    files.splice(1);
+  }
+  selectedFiles.value = files.map(file => ({
+    name: file.name,
+    size: file.size,
+    mime: file.type,
+  }));
+
+  emit('update:modelValue', Array.from(files));
+}
+
+const dragging = ref(false);
+
+</script>

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

@@ -43,6 +43,11 @@
       <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
         No results found
       </div>
+
+      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-gray-400">
+        <slot name="extra-item"></slot>
+      </div>
+
     </div>
 
     <div v-if="multiple && selectedItems.length"

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

@@ -6,4 +6,6 @@ export { default as Button } from './Button.vue';
 export { default as Input } from './Input.vue';
 export { default as Tooltip } from './Tooltip.vue';
 export { default as LinkButton } from './LinkButton.vue';
-export { default as VerticalTabs } from './VerticalTabs.vue';
+export { default as VerticalTabs } from './VerticalTabs.vue';
+export { default as Checkbox } from './Checkbox.vue';
+export { default as Dropzone } from './Dropzone.vue';

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

@@ -449,7 +449,6 @@ async function deleteRecord(row) {
           primaryKey: row._primaryKeyValue,
         }
       });
-      console.log('safsa', res)
       if (!res.error){
         emits('update:records', true)
         showSuccesTost('Record deleted successfully')

package/dist/spa/src/stores/core.ts

@@ -49,6 +49,7 @@ export const useCoreStore = defineStore('core', () => {
       path: '/get_base_config',
       method: 'GET',
     });
+
     if(!resp){
       return
     }

package/dist/spa/src/utils.ts

@@ -24,7 +24,7 @@ export async function callApi({path, method, body=undefined}: {
   const r = await fetch(fullPath, options);
   if (r.status == 401 ) {
     useUserStore().unauthorize();
-    router.push({ name: 'login' });
+    await router.push({ name: 'login' });
     return null;
   } 
   return await r.json();
@@ -161,4 +161,17 @@ export function setQuery(query: any) {
 
 export function verySimpleHash(str: string): string {
   return `${str.split('').reduce((a, b)=>{a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)}`;
-}
+}
+
+export function humanifySize(size) {
+  if (!size) {
+    return '';
+  }
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let i = 0
+  while (size >= 1024 && i < units.length - 1) {
+    size /= 1024
+    i++
+  }
+  return `${size.toFixed(1)} ${units[i]}`
+}

package/dist/spa/src/views/CreateView.vue

@@ -108,7 +108,6 @@ const initalValues = computed(() => {
 });
 
 
-
 async function onUpdateRecord(newRecord) {
   console.log('newRecord', newRecord);
   record.value = newRecord;

package/dist/spa/src/views/LoginView.vue

@@ -65,14 +65,10 @@
                             class="flex items-start mb-5"
                             :title="`Stay logged in for ${coreStore.config.rememberMeDays} days`"
                         >
-                          <div class="flex items-center h-5">
-                            <input id="remember" 
-                              ref="rememberInput"
-                              type="checkbox" 
-                              value="" 
-                              class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-lightPrimary focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 checked:bg-lightPrimary checked:dark:bg-darkPrimary" /> 
-                          </div>
-                          <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
+                          <Checkbox v-model="rememberMeValue" class="mr-2">
+                            Remember me
+                          </Checkbox>
+                          
                         </div>
                         
                         <component 
@@ -123,11 +119,11 @@ import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
-import { Button } from '@/afcl';
+import { Button, Checkbox } from '@/afcl';
 
 const passwordInput = ref(null);
 const usernameInput = ref(null);
-const rememberInput = ref(null);
+const rememberMeValue= ref(false);
 
 const router = useRouter();
 const inProgress = ref(false);
@@ -172,7 +168,7 @@ async function login() {
     body: {
       username,
       password,
-      rememberMe: rememberInput.value?.checked,
+      rememberMe: rememberMeValue.value,
     }
   });
   if (resp.error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.5.5-next.3",
+  "version": "1.5.5-next.5",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -22,8 +22,8 @@
     "rollout-next": "npm run build && npm version prerelease --preid=next && npm publish --tag next && npm run put-git-tag",
     "rollout-doc": "cd documentation && npm run build && npm run deploy",
     "docs": "typedoc",
-    "--comment_postinstall": "postinstall executed after package installed in other project package",
-    "postinstall": "cd ./dist/spa/ && npm ci && echo 'installed spa dependencies'",
+    "--comment_postinstall": "postinstall executed after package installed in other project package and when we do npm ci in the package",
+    "postinstall": "if test -d ./dist/spa/; then cd ./dist/spa/ && npm ci && echo 'installed spa dependencies'; fi",
     "ci-plugins": "for d in plugins/*; do cd $d && npm ci && cd ../..; done"
   },
   "exports": {