Skip to content

Commit b108045

Browse files
committed
fix: add custom blur rendering
1 parent bc73a95 commit b108045

2 files changed

Lines changed: 4 additions & 50 deletions

File tree

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

Lines changed: 4 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -585,53 +585,7 @@ list: '@/renderers/ZeroStylesRichText.vue',
585585
586586
### Sensitive data blur
587587
588-
For fields containing sensitive data (like passwords, API keys, tokens, or other confidential values), you can create a renderer that blurs the value by default and reveals it on click.
589-
590-
Create a file `SensitiveBlurCell.vue` in your `custom` directory:
591-
592-
```html title='./custom/SensitiveBlurCell.vue'
593-
<template>
594-
<div class="inline-flex items-center gap-1">
595-
<div
596-
class="overflow-hidden max-w-[200px] max-h-[20px] rounded-default"
597-
:title="show ? $t('Click to hide') : $t('Click to show')"
598-
@click="toggle"
599-
>
600-
<span
601-
class="cursor-pointer select-none transition-all duration-200 text-lightListTableText dark:text-darkListTableText"
602-
:class="{
603-
'blur-[7px] hover:blur-[5px] brightness-50 dark:brightness-150': !show,
604-
}"
605-
>
606-
<ValueRenderer :column="column" :record="record" />
607-
</span>
608-
</div>
609-
</div>
610-
</template>
611-
612-
<script setup lang="ts">
613-
import { ref } from 'vue';
614-
import ValueRenderer from '@/components/ValueRenderer.vue';
615-
import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common';
616-
617-
const props = defineProps<{
618-
column: AdminForthResourceColumnCommon;
619-
record: any;
620-
meta: any;
621-
resource: AdminForthResourceCommon;
622-
adminUser: AdminUser;
623-
}>();
624-
625-
const show = ref(false);
626-
627-
function toggle(event: MouseEvent) {
628-
show.value = !show.value;
629-
event.stopPropagation();
630-
}
631-
</script>
632-
```
633-
634-
Now use it in your resource configuration:
588+
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.
635589
636590
```ts title='./resources/anyResource.ts'
637591
columns: [
@@ -641,15 +595,15 @@ Now use it in your resource configuration:
641595
//diff-add
642596
components: {
643597
//diff-add
644-
show: '@@/SensitiveBlurCell.vue',
598+
show: '@/renderers/SensitiveBlurCell.vue',
645599
//diff-add
646-
list: '@@/SensitiveBlurCell.vue',
600+
list: '@/renderers/SensitiveBlurCell.vue',
647601
//diff-add
648602
},
649603
...
650604
```
651605
652-
This component works with any field type — it wraps the standard `ValueRenderer` (the same renderer AdminForth would use by default) and adds a click-to-reveal blur effect. The value is blurred until the user clicks on it, and clicking again hides it.
606+
The renderer wraps the standard value output and adds a click-to-reveal blur effect. Clicking again hides the value.
653607
654608
655609
### Custom filter component for square meters
File renamed without changes.

0 commit comments

Comments
 (0)