adminforth 3.6.4-next.1 → 3.6.4-next.10

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

@@ -5,7 +5,7 @@
     @dragleave.prevent="dragging = false"
     @drop.prevent="dragging = false; doEmit(($event.dataTransfer as DataTransfer).files)"
   >
-      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-lg cursor-pointer
+      <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-default cursor-pointer
         hover:bg-lightDropzoneBackgroundHover hover:border-lightDropzoneBorderHover  dark:hover:border-darkDropzoneBorderHover dark:hover:bg-darkDropzoneBackgroundHover"
         :class="{
           'border-lightDropzoneBorderDragging dark:border-darkDropzoneBorderDragging': dragging,
@@ -50,7 +50,7 @@
           >
             <template v-for="(file, index) in selectedFiles" :key="index">
               <div
-                class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon  bg-lightDropzoneBackgroundHover dark:bg-darkDropzoneBackgroundHover rounded-md 
+                class="text-sm text-lightDropzoneIcon dark:text-darkDropzoneIcon  bg-lightDropzoneBackgroundHover dark:bg-darkDropzoneBackgroundHover rounded-default 
                       flex items-center gap-1 px-2 py-1 group"
               >
                 <IconFileSolid class="w-4 h-4 flex-shrink-0" />

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

@@ -1,16 +1,16 @@
 <template>
   <div class="relative w-full bg-lightProgressBarUnfilledColor rounded-full h-2.5 dark:bg-darkProgressBarUnfilledColor" :class="props.height ? `h-${props.height}` : ''">
-    <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ leftLabel }}</span>
-    <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ rightLabel }}</span>
-    <div 
+    <span v-if="leftLabel" class="absolute -top-6 left-0 text-sm" :class="textClass">{{ leftLabel }}</span>
+    <span v-if="rightLabel" class="absolute -top-6 right-0 text-sm" :class="textClass">{{ rightLabel }}</span>
+    <div
       class="bg-lightPrimary dark:bg-darkPrimary h-2.5 rounded-full transition-all duration-300 ease-in-out"
-      :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"  
+      :class="{ 'progress-bar': showAnimation, [`h-${props.height}`]: props.height }"
       :style="{ width: `${percentage}%` }"
     ></div>
     <div v-if="showValues || showProgress" class="flex justify-between mt-2">
-      <span v-if="showValues" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(minValue) }}</span>
-      <span v-if="showProgress" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ progressText }}</span>
-      <span v-if="showValues" class="text-sm text-lightProgressBarText dark:text-darkProgressBarText">{{ formatValue(maxValue) }}</span>
+      <span v-if="showValues" class="text-sm" :class="textClass">{{ formatValue(minValue) }}</span>
+      <span v-if="showProgress" class="text-sm" :class="textClass">{{ progressText }}</span>
+      <span v-if="showValues" class="text-sm" :class="textClass">{{ formatValue(maxValue) }}</span>
     </div>
   </div>
 </template>
@@ -31,6 +31,7 @@ interface Props {
   showProgress?: boolean
   showAnimation?: boolean
   height?: number
+  textClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -39,7 +40,8 @@ const props = withDefaults(defineProps<Props>(), {
   formatter: (value: number) => `${value}`,
   progressFormatter: (value: number, percentage: number) => `${value}`,
   showValues: true,
-  showProgress: true
+  showProgress: true,
+  textClass: 'text-lightProgressBarText dark:text-darkProgressBarText',
 })
 
 const percentage = computed((): number => {

package/dist/spa/src/renderers/SensitiveBlurCell.vue

@@ -1,39 +1,89 @@
 <template>
   <div class="inline-flex items-center gap-1">
-    <div
-      class="overflow-hidden max-h-[20px] rounded-default"
-      :title="show ? $t('Click to hide') : $t('Click to show')"
-      @click="toggle"
-    >
-      <span
-        class="cursor-pointer select-none transition-all duration-200 text-lightListTableText dark:text-darkListTableText"
-        :class="{
-          'blur-[7px] hover:blur-[5px] brightness-50 dark:brightness-150': !show,
-        }"
+    <Tooltip>
+      <div
+        class="overflow-hidden max-h-[20px] rounded-default"
+        :class="{ 'shrink-0 w-[90px]': compact }"
+        @click="toggle"
       >
-        <ValueRenderer :column="column" :record="record" />
-      </span>
-    </div>
+        <span
+          class="cursor-pointer select-none transition-all duration-200 text-lightListTableText dark:text-darkListTableText"
+          :class="{
+            'block truncate': compact,
+            'blur-[7px] hover:blur-[5px] brightness-50 dark:brightness-150': !show,
+          }"
+        >
+          <template v-if="compact">{{ visualValue }}</template>
+          <ValueRenderer v-else :column="column" :record="record" />
+        </span>
+      </div>
+      <template #tooltip>
+        <span class="whitespace-nowrap">{{ tooltipText }}</span>
+      </template>
+    </Tooltip>
+
+    <span v-if="showCopy && rawValue" class="shrink-0 w-5 h-5">
+      <IconFileCopyAltSolid
+        v-if="show"
+        @click.stop="copyToCB"
+        class="w-5 h-5 cursor-pointer text-lightPrimary dark:text-darkPrimary"
+      />
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
 import ValueRenderer from '@/components/ValueRenderer.vue';
+import Tooltip from '@/afcl/Tooltip.vue';
+import { useAdminforth } from '@/adminforth';
 import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
 
 const props = defineProps<{
   column: AdminForthResourceColumnCommon;
   record: any;
-  meta: any;
+  meta: { compact?: boolean; copy?: boolean } | any;
   resource: AdminForthResourceCommon;
   adminUser: AdminUser;
 }>();
 
+const { t } = useI18n();
+const { alert } = useAdminforth();
+
 const show = ref(false);
 
+const rawValue = computed(() => props.record[props.column.name]);
+
+const compact = computed(() => props.meta?.compact);
+const showCopy = computed(() => compact.value && props.meta?.copy);
+const visualValue = computed(() => {
+  const val = rawValue.value;
+  if (val && String(val).length > 8) {
+    const s = String(val);
+    return `${s.slice(0, 4)}...${s.slice(-4)}`;
+  }
+  return val;
+});
+
+const tooltipText = computed(() => {
+  if (compact.value && show.value) {
+    return rawValue.value;
+  }
+  return show.value ? t('Click to hide') : t('Click to show');
+});
+
 function toggle(event: MouseEvent) {
   show.value = !show.value;
   event.stopPropagation();
 }
+
+function copyToCB() {
+  navigator.clipboard.writeText(rawValue.value);
+  alert({
+    message: t('Copied to clipboard'),
+    variant: 'success',
+  });
+}
 </script>

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

@@ -1,6 +1,7 @@
 import { ref, watch, type Ref } from 'vue'
 import { defineStore } from 'pinia'
 import { useRoute } from 'vue-router';
+import { randomBrowserUUID } from '@/utils/browserUuid';
 
 
 
@@ -22,7 +23,7 @@ export const useToastStore = defineStore('toast', () => {
         buttons?: { value: any; label: string }[];
         onResolve?: (value?: any) => void;
     }): string => {
-        const toastId = crypto.randomUUID();
+        const toastId = randomBrowserUUID();
         toasts.value.push({
             ...toast,
             id: toastId,
@@ -45,4 +46,4 @@ export const useToastStore = defineStore('toast', () => {
     };
 
     return { toasts, addToast, removeToast, resolveToast };
-});
+});

package/dist/spa/src/utils/browserUuid.ts

@@ -0,0 +1,42 @@
+const UUID_BYTE_LENGTH = 16;
+
+const UUID_HEX = Array.from(
+  { length: 256 },
+  (_, index) => index.toString(16).padStart(2, '0'),
+);
+
+export function randomBrowserUUID(): string {
+  if (typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+
+  const bytes = crypto.getRandomValues(
+    new Uint8Array(UUID_BYTE_LENGTH),
+  );
+
+  bytes[6] = (bytes[6] & 0x0f) | 0x40;
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+
+  return [
+    UUID_HEX[bytes[0]],
+    UUID_HEX[bytes[1]],
+    UUID_HEX[bytes[2]],
+    UUID_HEX[bytes[3]],
+    '-',
+    UUID_HEX[bytes[4]],
+    UUID_HEX[bytes[5]],
+    '-',
+    UUID_HEX[bytes[6]],
+    UUID_HEX[bytes[7]],
+    '-',
+    UUID_HEX[bytes[8]],
+    UUID_HEX[bytes[9]],
+    '-',
+    UUID_HEX[bytes[10]],
+    UUID_HEX[bytes[11]],
+    UUID_HEX[bytes[12]],
+    UUID_HEX[bytes[13]],
+    UUID_HEX[bytes[14]],
+    UUID_HEX[bytes[15]],
+  ].join('');
+}

package/dist/spa/src/utils/clientId.ts

@@ -1,3 +1,5 @@
+import { randomBrowserUUID } from './browserUuid';
+
 const ADMINFORTH_CLIENT_ID_STORAGE_KEY = 'adminforthClientId';
 
 export const ADMINFORTH_CLIENT_ID_HEADER = 'x-adminforth-client-id';
@@ -8,7 +10,7 @@ export function getAdminForthClientId(): string {
     return existingClientId;
   }
 
-  const clientId = crypto.randomUUID();
+  const clientId = randomBrowserUUID();
   sessionStorage.setItem(ADMINFORTH_CLIENT_ID_STORAGE_KEY, clientId);
   return clientId;
 }

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

@@ -32,7 +32,7 @@
       overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-h-full max-w-[400px]">
             <!-- Modal content -->
-            <div class="af-login-popup af-login-modal-content relative bg-lightLoginViewBackground rounded-lg shadow dark:bg-darkLoginViewBackground dark:shadow-black" :class=" { 'rounded-b-none  overflow-hidden': error } ">
+            <div class="af-login-popup af-login-modal-content relative bg-lightLoginViewBackground rounded-default shadow dark:bg-darkLoginViewBackground dark:shadow-black" :class=" { 'rounded-b-none  overflow-hidden': error } ">
                 <!-- Modal header -->
                 <div class="af-login-modal-header flex items-center justify-between flex-col p-4 md:p-5 border-b rounded-t dark:border-gray-600">
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "3.6.4-next.1",
+  "version": "3.6.4-next.10",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",