Merge pull request #663 from devforth/feature/AdminForth/1711/add-new-renderer-for-fields-wh

fix: add custom blur rendering

Author: SerVitasik

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

@@ -583,6 +583,29 @@ list: '@/renderers/ZeroStylesRichText.vue',
 `ZeroStyleRichText` fits well for tasks like email templates preview fields.
 
 
+### Sensitive data blur
+
+For fields containing sensitive data (like passwords, API keys, tokens, or other confidential values), use the `SensitiveBlurCell` renderer. It blurs the value by default and reveals it on click.
+
+```ts title='./resources/anyResource.ts'
+  columns: [
+    ...
+    {
+      name: 'api_key',
+  //diff-add
+      components: {
+  //diff-add
+        show: '@/renderers/SensitiveBlurCell.vue',
+  //diff-add
+        list: '@/renderers/SensitiveBlurCell.vue',
+  //diff-add
+      },
+    ...
+```
+
+The renderer wraps the standard value output and adds a click-to-reveal blur effect. Clicking again hides the value.
+
+
 ### Custom filter component for square meters
 
 

adminforth/spa/src/renderers/SensitiveBlurCell.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="inline-flex items-center gap-1">
+    <div
+      class="overflow-hidden max-w-[200px] 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,
+        }"
+      >
+        <ValueRenderer :column="column" :record="record" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import ValueRenderer from '@/components/ValueRenderer.vue';
+import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
+
+const props = defineProps<{
+  column: AdminForthResourceColumnCommon;
+  record: any;
+  meta: any;
+  resource: AdminForthResourceCommon;
+  adminUser: AdminUser;
+}>();
+
+const show = ref(false);
+
+function toggle(event: MouseEvent) {
+  show.value = !show.value;
+  event.stopPropagation();
+}
+</script>