Merge pull request #704 from devforth/feature/AdminForth/1823/update-blur-cell-renderer

feat: enhance SensitiveBlurCell with eye button for toggling blur effect

Author: NoOne7135

adminforth/documentation/docs/tutorial/03-Customization/02-customFieldRendering.md

@@ -605,7 +605,7 @@ For fields containing sensitive data (like passwords, API keys, tokens, or other
 
 The renderer wraps the standard value output and adds a click-to-reveal blur effect. Clicking again hides the value.
 
-For long values (like API keys) you can enable compact mode by passing `compact: true` via `meta`. When set, the value is shortened the same way as the `CompactUUID` renderer (first 4 + `...` + last 4 characters). In compact mode you can additionally pass `copy: true` to render a copy-to-clipboard button next to the value. The copy button is only shown once the value is revealed (blur removed):
+For long values (like API keys) you can enable compact mode by passing `compact: true` via `meta`. When set, the value is shortened the same way as the `CompactUUID` renderer (first 4 + `...` + last 4 characters). You can additionally pass `copy: true` to render a copy-to-clipboard button next to the value, and `eyeButton: true` to render an eye icon that also toggles the blur. `compact`, `copy` and `eyeButton` are independent of each other and can be combined in any way:
 
 ```ts title='./resources/anyResource.ts'
   columns: [
@@ -617,13 +617,13 @@ For long values (like API keys) you can enable compact mode by passing `compact:
   //diff-add
           file: '@/renderers/SensitiveBlurCell.vue',
   //diff-add
-          meta: { compact: true, copy: true },
+          meta: { compact: true, copy: true, eyeButton: true },
         },
         list: {
   //diff-add
           file: '@/renderers/SensitiveBlurCell.vue',
   //diff-add
-          meta: { compact: true, copy: true },
+          meta: { compact: true, copy: true, eyeButton: true },
         },
       },
     ...

adminforth/spa/src/renderers/SensitiveBlurCell.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inline-flex items-center gap-1">
-    <Tooltip>
+    <Tooltip v-if="tooltipText">
       <div
         class="overflow-hidden max-h-[20px] rounded-default"
         :class="{ 'shrink-0 w-[90px]': compact }"
@@ -21,10 +21,39 @@
         <span class="whitespace-nowrap">{{ tooltipText }}</span>
       </template>
     </Tooltip>
+    <div
+      v-else
+      class="overflow-hidden max-h-[20px] rounded-default"
+      :class="{ 'shrink-0 w-[90px]': compact }"
+      @click="toggle"
+    >
+      <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>
+
+    <span v-if="eyeButton" class="shrink-0 w-5 h-5">
+      <IconEyeSolid
+        v-if="!show"
+        @click.stop="toggle"
+        class="w-5 h-5 cursor-pointer text-lightPrimary dark:text-darkPrimary"
+      />
+      <IconEyeSlashSolid
+        v-else
+        @click.stop="toggle"
+        class="w-5 h-5 cursor-pointer text-lightPrimary dark:text-darkPrimary"
+      />
+    </span>
 
     <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"
       />
@@ -35,7 +64,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { IconFileCopyAltSolid } from '@iconify-prerendered/vue-flowbite';
+import { IconFileCopyAltSolid, IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import ValueRenderer from '@/components/ValueRenderer.vue';
 import Tooltip from '@/afcl/Tooltip.vue';
 import { useAdminforth } from '@/adminforth';
@@ -44,7 +73,7 @@ import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUse
 const props = defineProps<{
   column: AdminForthResourceColumnCommon;
   record: any;
-  meta: { compact?: boolean; copy?: boolean } | any;
+  meta: { compact?: boolean; copy?: boolean; eyeButton?: boolean } | any;
   resource: AdminForthResourceCommon;
   adminUser: AdminUser;
 }>();
@@ -57,7 +86,8 @@ 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 showCopy = computed(() => props.meta?.copy);
+const eyeButton = computed(() => props.meta?.eyeButton);
 const visualValue = computed(() => {
   const val = rawValue.value;
   if (val && String(val).length > 8) {
@@ -71,6 +101,9 @@ const tooltipText = computed(() => {
   if (compact.value && show.value) {
     return rawValue.value;
   }
+  if (eyeButton.value) {
+    return '';
+  }
   return show.value ? t('Click to hide') : t('Click to show');
 });