first

documentation/plugins/filepond/v-filepond-documentation.md

@@ -0,0 +1,129 @@
+---
+state:
+  flipped: false
+---
+
+### VFilePond
+
+Vuero ships with the `<VFilePond />` component, a custom file upload component.
+It is based on the [FilePond](https://pqina.nl/filepond/) library.
+Check the code for more details.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const onAddFile = (error: any, fileInfo: any) => {
+  if (error) {
+    console.error(error)
+    return
+  }
+
+  const _file = fileInfo.file as File
+  if (_file) {
+    wizardData.logo = _file
+  }
+}
+
+const onRemoveFile = (error: any, fileInfo: any) => {
+  if (error) {
+    console.error(error)
+    return
+  }
+
+  console.log(fileInfo)
+
+  wizardData.logo = null
+}
+</script>
+
+<template>
+  <VField>
+    <VControl>
+      <VFilePond
+        class="profile-filepond"
+        name="profile_filepond"
+        :chunk-retry-delays="[500, 1000, 3000]"
+        label-idle="<i class='lnil lnil-cloud-upload'></i>"
+        :accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
+        :image-preview-height="140"
+        :image-resize-target-width="140"
+        :image-resize-target-height="140"
+        image-crop-aspect-ratio="1:1"
+        style-panel-layout="compact circle"
+        style-load-indicator-position="center bottom"
+        style-progress-indicator-position="right bottom"
+        style-button-remove-item-position="left bottom"
+        style-button-process-item-position="right bottom"
+        @addfile="onAddFile"
+        @removefile="onRemoveFile"
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField grouped>
+  <VControl>
+    <VFilePond
+      class="profile-filepond"
+      name="profile_filepond"
+      :chunk-retry-delays="[500, 1000, 3000]"
+      label-idle="<i class='lnil lnil-cloud-upload'></i>"
+      :accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
+      :image-preview-height="140"
+      :image-resize-target-width="140"
+      :image-resize-target-height="140"
+      image-crop-aspect-ratio="1:1"
+      style-panel-layout="compact circle"
+      style-load-indicator-position="center bottom"
+      style-progress-indicator-position="right bottom"
+      style-button-remove-item-position="left bottom"
+      style-button-process-item-position="right bottom"
+    />
+  </VControl>
+  <VControl>
+    <VFilePond
+      size="small"
+      class="profile-filepond"
+      name="profile_filepond"
+      :chunk-retry-delays="[500, 1000, 3000]"
+      label-idle="<i class='lnil lnil-cloud-upload'></i>"
+      :accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
+      :image-preview-height="140"
+      :image-resize-target-width="140"
+      :image-resize-target-height="140"
+      image-crop-aspect-ratio="1:1"
+      style-panel-layout="compact circle"
+      style-load-indicator-position="center bottom"
+      style-progress-indicator-position="right bottom"
+      style-button-remove-item-position="left bottom"
+      style-button-process-item-position="right bottom"
+    />
+  </VControl>
+  <VControl>
+    <VFilePond
+      size="tiny"
+      class="profile-filepond"
+      name="profile_filepond"
+      :chunk-retry-delays="[500, 1000, 3000]"
+      label-idle="<i class='lnil lnil-cloud-upload'></i>"
+      :accepted-file-types="['image/png', 'image/jpeg', 'image/gif']"
+      :image-preview-height="140"
+      :image-resize-target-width="140"
+      :image-resize-target-height="140"
+      image-crop-aspect-ratio="1:1"
+      style-panel-layout="compact circle"
+      style-load-indicator-position="center bottom"
+      style-progress-indicator-position="right bottom"
+      style-button-remove-item-position="left bottom"
+      style-button-process-item-position="right bottom"
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/plugins/filepond/v-filepond-props-documentation.md

@@ -0,0 +1,13 @@
+---
+disable_code: true
+slimscroll: true
+---
+
+### VFilePond Props
+
+Here is the props added for `<VFilePond />` component,
+you can check all options available on [filepond official documentation](https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#properties):
+
+| Props | Default                               | Type            |
+| ----- | ------------------------------------- | --------------- |
+| size  | <span class="is-string">`grey`</span> | `small`, `tiny` |