fix: support image preview

Author: cafadev

demo-element-plus/src/viewer/FTableViewer.vue

@@ -76,6 +76,12 @@ const table = useTable({
   filterParams: {
     gender: '',
   },
+  settings: {
+    url: form.settings.url,
+    modal: {
+      title: 'Crear record',
+    },
+  },
   buttons: {
     edit: {
       // onClick(row) {

demo-quasar/src/plugins/fancy-crud.ts

@@ -2,7 +2,7 @@ import { defineConfig } from '@fancy-crud/vue'
 import axios from 'axios'
 
 import { components, styles, toast } from '@fancy-crud/wrapper-quasar'
-import { valibotSafeParser as parser } from '@fancy-crud/plugin-rule-parsers'
+import { zodSafeParser as parser } from '@fancy-crud/plugin-rule-parsers'
 
 axios.defaults.baseURL = 'http://localhost:9000/api/'
 

demo-quasar/src/viewer/FTableViewer.vue

@@ -13,6 +13,7 @@
 
 <script lang='ts' setup>
 import { FieldType, useForm, useTable } from '@fancy-crud/vue'
+import { z } from 'zod';
 
 const r = ref(1)
 
@@ -26,13 +27,24 @@ const form = useForm({
       wrapper: {
         class: 'col-span-12',
       },
-      parseModelValue: Number,
+
     },
     gender: {
-      type: FieldType.text,
+      type: FieldType.select,
       label: 'Gender',
+      rules: value => ({ value, rule: z.string().nonempty() }),
+      multiple: true,
+      exclude: true,
       wrapper: {
-        class: 'col-span-12',
+        class: 'col-span-6',
+      },
+    },
+    image2: {
+      type: FieldType.file,
+      label: 'Imagen',
+      preview: true,
+      wrapper: {
+        class: 'col-span-6',
       },
     },
     created_at: {
@@ -45,6 +57,14 @@ const form = useForm({
         class: 'col-span-12',
       },
     },
+    is_active: {
+      type: FieldType.checkbox,
+      label: 'Is active',
+      modelValue: false,
+      wrapper: {
+        class: 'col-span-12',
+      },
+    },
   },
   settings: {
     url: 'artists/',
@@ -55,17 +75,26 @@ const form = useForm({
 const table = useTable({
   form,
   columns: {
+    name: {
+    },
     gender: {
       format: (value: unknown) => value === 'm' ? 'Male' : 'Female',
     },
-    created_at: {
-      format: (value: unknown) => 'Lo que sea',
+    image2: {
+      label: 'Image',
       input: {
         isEnable: true,
+        type: FieldType.image,
       },
     },
+    created_at: {
+      format: (value: unknown) => 'Lo que sea',
+    },
     is_active: {
-      input: { isEnable: true, type: FieldType.checkbox },
+      input: {
+        type: FieldType.checkbox,
+        isEnable: true,
+      },
     },
     actions: { value: 'actions', label: '', align: 'right' },
   },

demo-vuetify/src/viewer/FTableViewer.vue

@@ -31,6 +31,13 @@ const form = useForm({
         class: 'col-span-12',
       },
     },
+    image2: {
+      type: FieldType.image,
+      label: 'Imagen',
+      wrapper: {
+        class: 'col-span-6',
+      },
+    },
     created_at: {
       type: FieldType.text,
       label: 'Created at',
@@ -46,14 +53,6 @@ const form = useForm({
     url: 'artists/',
     title: '{{ Crear artista | Actualizar artista }}',
   },
-  buttons: {
-    main: {
-      onClick(a: number, b: number) {
-
-      },
-      chubaca: '',
-    },
-  },
 })
 
 const table = useTable({
@@ -65,6 +64,11 @@ const table = useTable({
     created_at: {
       format: (value: unknown) => 'Lo que sea',
     },
+    image2: {
+      input: {
+        isEnable: true,
+      },
+    },
     actions: { value: 'actions', label: '' },
   },
   settings: {

packages/core/src/forms/axioma/typing/form.ts

@@ -23,6 +23,7 @@ export interface BaseRawField extends Record<string, any> {
   modelValue?: unknown
   fileUrl?: string | null
   multiple?: boolean
+  preview?: boolean
   rules?: Rule
   recordValue?: (value: any) => unknown
   interceptOptions?: (options: any[]) => unknown[]

packages/plugin-rule-parsers/src/valibot.ts

@@ -2,6 +2,9 @@ import type { AnySchema } from 'valibot'
 import { safeParse } from 'valibot'
 
 export function valibotSafeParser(raw: { value: unknown; rule: AnySchema }) {
+  if (typeof raw === 'string' || typeof raw === 'boolean')
+    return raw
+
   const { value, rule } = raw
   const result = safeParse(rule, value)
 

packages/vue/src/forms/components/FFileReveal.vue

@@ -0,0 +1,124 @@
+<template>
+  <a
+    @mouseenter="togglePreview"
+    ref="previewRef"
+    target="_blank"
+    :href="fileUrl"
+    class="f-preview-trigger"
+    :class="{ 'f-preview-trigger--disabled': !hasFile }"
+  >
+    <svg v-if="isImage" class="w-6 h-6 text-primary" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+      <path fill-rule="evenodd" d="M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-7Zm.394 9.553a1 1 0 0 0-1.817.062l-2.5 6A1 1 0 0 0 8 19h8a1 1 0 0 0 .894-1.447l-2-4A1 1 0 0 0 13.2 13.4l-.53.706-1.276-2.553ZM13 9.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" clip-rule="evenodd" />
+    </svg>
+    <svg v-else class="w-6 h-6 text-primary" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+      <path fill-rule="evenodd" d="M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-7Z" clip-rule="evenodd" />
+    </svg>
+    <span style="width: 100%" />
+    <teleport to="body">
+      <div
+        @mouseleave="togglePreview"
+        class="shadow-black f-preview shadow-2xl -translate-y-1/2"
+        :class="displayPreview" :style="{ top: state.axis.y, left: state.axis.x }"
+      >
+        <a :href="fileUrl" target="_blank">
+          <figure class="f-preview-img">
+            <img :src="fileUrl" alt="">
+          </figure>
+        </a>
+      </div>
+    </teleport>
+  </a>
+</template>
+
+<script lang="ts" setup>
+import type { NormalizedField } from '@fancy-crud/core'
+
+const props = defineProps<{
+  formId: symbol
+  field: NormalizedField
+}>()
+
+const state = reactive({
+  isHover: false,
+  axis: {
+    x: '0px',
+    y: '0px',
+  },
+})
+
+const previewRef = ref<HTMLElement | null>(null)
+const fileUrl = computed(() => {
+  return props.field.fileUrl || undefined
+})
+const displayPreview = computed(() => state.isHover ? 'f-preview--scale-100' : 'f-preview--scale-0')
+const hasFile = computed(() => {
+  return !!fileUrl.value
+})
+const isImage = computed(() => checkIfFileIsImage(props.field.type, fileUrl.value))
+
+onMounted(() => {
+  setPreviewPosition()
+
+  window.addEventListener('resize', () => {
+    setPreviewPosition()
+  })
+})
+
+function checkIfFileIsImage(fieldType: string, url?: string | null) {
+  if (fieldType === 'image')
+    return true
+
+  const IMAGE_EXTENSIONS = /\.(jpeg|jpg|gif|png|webp)$/
+  const result = props.field.fileUrl?.match(IMAGE_EXTENSIONS) !== null
+  return result
+}
+
+function togglePreview() {
+  state.isHover = !state.isHover
+}
+
+function setPreviewPosition() {
+  setTimeout(() => {
+    if (!previewRef.value)
+      return
+
+    const { top, left } = previewRef.value.getBoundingClientRect()
+    state.axis.x = `${left}px`
+    state.axis.y = `${top}px`
+  }, 1000)
+}
+</script>
+
+<style lang="sass">
+.f-preview
+  position: absolute
+  max-height: 250px
+  max-width: 250px
+  min-height: fit-content
+  height: fit-content
+  width: fit-content
+  overflow: hidden
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15)
+  transform-origin: top left
+  z-index: 9999
+  transition: transform 0.5s ease
+
+.f-preview-img
+  width: 100%
+  height: 100%
+  background-size: contain
+  background-position: 0 0
+  background-repeat: no-repeat
+  background-color: white
+
+.f-preview--scale-0
+  @extends .f-preview
+  transform: scale(0) translateY(-50%)
+
+.f-preview--scale-100
+  @extends .f-preview
+  transform: scale(1) translateY(-50%)
+
+.f-preview-trigger--disabled
+  opacity: 0.3
+</style>

packages/vue/src/forms/components/FFormBody.vue

@@ -53,6 +53,7 @@ const defaultControls: Record<string, any> = {
   file: FFile,
   datepicker: FDatepicker,
   text: FText,
+  image: FFile,
   ...components,
 }
 

packages/vue/src/forms/components/index.ts

@@ -8,10 +8,12 @@ import FCheckbox from './FCheckbox.vue'
 import FText from './FText.vue'
 import FColor from './FColor.vue'
 import FDatepicker from './FDatepicker.vue'
+import FPassword from './FPassword.vue'
 import FFile from './FFile.vue'
 import FRadio from './FRadio.vue'
 import FSelect from './FSelect.vue'
 import FTextarea from './FTextarea.vue'
+import FFileReveal from './FFileReveal.vue'
 
 export {
   FForm,
@@ -27,4 +29,6 @@ export {
   FRadio,
   FSelect,
   FTextarea,
+  FFileReveal,
+  FPassword,
 }

packages/vue/src/forms/typing/form.ts

@@ -42,6 +42,7 @@ export enum FieldType {
   select = 'select',
   file = 'file',
   datepicker = 'datepicker',
+  image = 'image',
 }
 
 export interface RawTextField extends BaseRawField {