Merge branch 'prod'

primefaces · Aug 29, 2024 · dcd66c1 · dcd66c1
2 parents 6111e80 + 372cad4
commit dcd66c1
Show file tree

Hide file tree

Showing 6 changed files with 513 additions and 180 deletions.
diff --git a/apps/showcase/doc/dataview/BasicDoc.vue b/apps/showcase/doc/dataview/BasicDoc.vue
@@ -7,9 +7,9 @@
             <template #list="slotProps">
                 <div class="flex flex-col">
                     <div v-for="(item, index) in slotProps.items" :key="index">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
+                        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
                             <div class="md:w-40 relative">
-                                <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                <img class="rounded w-36" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <div class="dark:bg-surface-900 absolute rounded-border" style="left: 4px; top: 4px">
                                     <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
                                 </div>

diff --git a/apps/showcase/doc/fileupload/CustomUploadDoc.vue b/apps/showcase/doc/fileupload/CustomUploadDoc.vue
@@ -1,9 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Uploading implementation can be overridden by enabling <i>customUpload</i> property and defining a custom <i>uploader</i> handler event.</p>
+        <p>Uploading implementation can be overridden by enabling <i>customUpload</i> property. This sample, displays the image on the client side with a grayscale filter.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
+    <div class="card flex flex-col items-center gap-6">
+        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
+        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,70 +13,80 @@
 export default {
     data() {
         return {
+            src: null,
             code: {
                 basic: `
-<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
+<FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
+<img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
+    <div class="card flex flex-col items-center gap-6">
+        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
+        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
     </div>
 </template>
 
 <script>
 export default {
+    data() {
+        return {
+            src: null
+        }
+    },
     methods: {
-        async customBase64Uploader(event) {
+        onFileSelect(event) {
             const file = event.files[0];
             const reader = new FileReader();
-            let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
 
-            reader.readAsDataURL(blob);
-
-            reader.onloadend = function () {
-                const base64data = reader.result;
+            reader.onload = async (e) => {
+                this.src = e.target.result;
             };
+
+            reader.readAsDataURL(file);
         }
     }
 };
 <\/script>
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload @uploader="customBase64Uploader" />
+    <div class="card flex flex-col items-center gap-6">
+        <FileUpload mode="basic" @select="onFileSelect" customUpload auto severity="secondary" class="p-button-outlined" />
+        <img v-if="src" :src="src" alt="Image" class="shadow-md rounded-xl w-full sm:w-64" style="filter: grayscale(100%)" />
     </div>
 </template>
 
 <script setup>
-const customBase64Uploader = async (event) => {
+import { ref } from "vue";
+
+const src = ref(null);
+
+function onFileSelect(event) {
     const file = event.files[0];
     const reader = new FileReader();
-    let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
-
-    reader.readAsDataURL(blob);
 
-    reader.onloadend = function () {
-        const base64data = reader.result;
+    reader.onload = async (e) => {
+        src.value = e.target.result;
     };
-};
+
+    reader.readAsDataURL(file);
+}
 <\/script>
 `
             }
         };
     },
     methods: {
-        async customBase64Uploader(event) {
+        onFileSelect(event) {
             const file = event.files[0];
             const reader = new FileReader();
-            let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
-
-            reader.readAsDataURL(blob);
 
-            reader.onloadend = function () {
-                const base64data = reader.result;
+            reader.onload = async (e) => {
+                this.src = e.target.result;
             };
+
+            reader.readAsDataURL(file);
         }
     }
 };