@xuda.io/xuda-widget-plugin-xuda-drive 1.0.113 → 1.0.114

package/src/runtime.mjs

@@ -1,39 +1,39 @@
-import * as FilePond from "filepond";
-import "filepond/dist/filepond.min.css";
+import * as FilePond from 'filepond';
+import 'filepond/dist/filepond.min.css';
 
 window.FilePond = FilePond;
 
-import FilePondPluginFilePoster from "filepond-plugin-file-poster";
-import "filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css";
+import FilePondPluginFilePoster from 'filepond-plugin-file-poster';
+import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';
 
-import FilePondPluginMediaPreview from "filepond-plugin-media-preview";
-import "filepond-plugin-media-preview/dist/filepond-plugin-media-preview.css";
+import FilePondPluginMediaPreview from 'filepond-plugin-media-preview';
+import 'filepond-plugin-media-preview/dist/filepond-plugin-media-preview.css';
 
-import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
+import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
 
-import * as pintura from "./vendors/pintura/pintura/pintura.js";
-import "./vendors/pintura/pintura/pintura.css";
+import * as pintura from './vendors/pintura/pintura/pintura.js';
+import './vendors/pintura/pintura/pintura.css';
 
-import FilePondPluginImageEditor from "./vendors/pintura/filepond-plugin-image-editor";
+import FilePondPluginImageEditor from './vendors/pintura/filepond-plugin-image-editor';
 
-import moment from "moment";
-import { createApp } from "vue/dist/vue.esm-bundler";
-import "./vendors/tailwind.cdn.js";
-import Swiper from "swiper/bundle";
-import "swiper/css/bundle";
+import moment from 'moment';
+import { createApp } from 'vue/dist/vue.esm-bundler';
+import './vendors/tailwind.cdn.js';
+import Swiper from 'swiper/bundle';
+import 'swiper/css/bundle';
 
-import "swiper/css/navigation";
-import "swiper/css";
+import 'swiper/css/navigation';
+import 'swiper/css';
 
-import FloatingVue from "floating-vue";
-import "floating-vue/dist/style.css";
-import * as fs from "./vendors/fs-lightbox.js";
+import FloatingVue from 'floating-vue';
+import 'floating-vue/dist/style.css';
+import * as fs from './vendors/fs-lightbox.js';
 
-import { useDropZone, useDebounceFn } from "@vueuse/core";
+import { useDropZone, useDebounceFn } from '@vueuse/core';
 
 export async function upload(fields, e) {
   return new Promise(async (resolve, reject) => {
-    var overrideAction = "replace";
+    var overrideAction = 'replace';
     var existingFiles = {};
     fields.method = e.method;
 
@@ -53,7 +53,7 @@ export async function upload(fields, e) {
         init_files.push({
           source: val,
           options: {
-            type: "local",
+            type: 'local',
           },
         });
       });
@@ -61,10 +61,8 @@ export async function upload(fields, e) {
 
     // init files from predefined array
     if (!_.isEmpty(fields.file_upload_init_file_array)) {
-      if (typeof fields.file_upload_init_file_array === "string") {
-        fields.file_upload_init_file_array = eval(
-          fields.file_upload_init_file_array
-        );
+      if (typeof fields.file_upload_init_file_array === 'string') {
+        fields.file_upload_init_file_array = eval(fields.file_upload_init_file_array);
       }
       if (fields.file_upload_init_file_array?.length) {
         init_files_fn(fields.file_upload_init_file_array);
@@ -74,11 +72,11 @@ export async function upload(fields, e) {
     // init files from bind
     var initialBindValue;
 
-    if (!_.isEmpty(fields["xu-bind"])) {
-      initialBindValue = await e.api_utils.get_field_value(fields["xu-bind"]);
+    if (!_.isEmpty(fields['xu-bind'])) {
+      initialBindValue = await e.api_utils.get_field_value(fields['xu-bind']);
       let value = initialBindValue;
-      if (typeof value === "string") {
-        value = value.split(",").filter((e) => e);
+      if (typeof value === 'string') {
+        value = value.split(',').filter((e) => e);
       }
       if (value?.length) {
         init_files_fn(value);
@@ -105,41 +103,32 @@ export async function upload(fields, e) {
           // }
         });
 
-        if (!_.isEmpty(fields["xu-bind"])) {
+        if (!_.isEmpty(fields['xu-bind'])) {
           var ret = ret_obj.app_files;
-          if (typeof initialBindValue === "string")
-            ret = ret_obj.app_files.map((f) => f.server_fileName).join(",");
+          if (typeof initialBindValue === 'string') ret = ret_obj.app_files.map((f) => f.server_fileName).join(',');
 
-          await e.api_utils.set_field_value(fields["xu-bind"], ret);
+          await e.api_utils.set_field_value(fields['xu-bind'], ret);
         }
 
         if (is_remove && fields.event_name_for_successful_remove_callback) {
-          await e.api_utils.invoke_event(
-            fields.event_name_for_successful_remove_callback
-          );
+          await e.api_utils.invoke_event(fields.event_name_for_successful_remove_callback);
         }
 
         if (!is_remove && fields.event_name_for_successful_callback) {
-          await e.api_utils.invoke_event(
-            fields.event_name_for_successful_callback
-          );
+          await e.api_utils.invoke_event(fields.event_name_for_successful_callback);
         }
 
         if (fields.clear_on_file_upload) {
           pond.removeFiles();
-          e.api_utils.set_field_value(fields["xu-bind"], []);
+          e.api_utils.set_field_value(fields['xu-bind'], []);
         }
       }, 100);
     };
 
-    var $pallet_wrapper = $(
-      `<div class="image_wrapper" style="border: none !important;">`
-    );
+    var $pallet_wrapper = $(`<div class="image_wrapper" style="border: none !important;">`);
 
     var input_id = new Date().valueOf();
-    var $imgInp = $(
-      `<input   class="filepond ${widget_cssClass}"  id="${input_id}" />`
-    ).appendTo($pallet_wrapper);
+    var $imgInp = $(`<input   class="filepond ${widget_cssClass}"  id="${input_id}" />`).appendTo($pallet_wrapper);
 
     e.$containerP.html($pallet_wrapper);
 
@@ -158,7 +147,7 @@ export async function upload(fields, e) {
         </mask>
         <rect fill="rgba(255,255,255,.3125)" x="0" y="0" width="100%" height="100%" mask="url(#my-mask)"/>
         <circle cx="50%" cy="50%" r="50%" fill="transparent" stroke-width="1" stroke="#fff"/>
-      `
+      `,
       );
     };
 
@@ -170,10 +159,10 @@ export async function upload(fields, e) {
       });
 
       fetch(url, {
-        method: "POST",
+        method: 'POST',
         body: e,
       }).then((res) => {
-        console.log("Request complete! response:", res);
+        console.log('Request complete! response:', res);
       });
     };
 
@@ -191,12 +180,7 @@ export async function upload(fields, e) {
       imageEditorSupportImage: (file) => {
         // return /^image/.test(file);
 
-        return (
-          file.type !== "image/svg+xml" &&
-          file.type !== "image/gif" &&
-          !file.type.includes("audio") &&
-          !file.type.includes("video")
-        );
+        return file.type !== 'image/svg+xml' && file.type !== 'image/gif' && !file.type.includes('audio') && !file.type.includes('video');
       },
 
       imageEditor: {
@@ -219,7 +203,7 @@ export async function upload(fields, e) {
               .then(function (response) {
                 try {
                   if (response.ok) return response.blob();
-                  throw new Error("bad image");
+                  throw new Error('bad image');
                 } catch (err) {
                   error({});
                 }
@@ -238,41 +222,26 @@ export async function upload(fields, e) {
             },
           };
         },
-        process: (
-          fieldName,
-          file,
-          metadata,
-          load,
-          error,
-          progress,
-          abort,
-          transfer,
-          options
-        ) => {
+        process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
           let formData = new FormData();
-          formData.append("file", file, file.name);
+          formData.append('file', file, file.name);
           const { app_id, gtp_token, app_token } = e._session;
 
-          formData.append(
-            "app_id_reference",
-            APP_OBJ?.[app_id]?.app_id_reference
-          );
-          formData.append("app_id", app_id);
-          formData.append("gtp_token", gtp_token);
-          formData.append("app_token", app_token);
-          formData.append("drive_type", "workspace");
-          if (fields.file_upload_folder)
-            formData.append("folder", fields.file_upload_folder);
-          if (fields.public_file)
-            formData.append("make_public", fields.public_file);
+          formData.append('app_id_reference', APP_OBJ?.[app_id]?.app_id_reference);
+          formData.append('app_id', app_id);
+          formData.append('gtp_token', gtp_token);
+          formData.append('app_token', app_token);
+          formData.append('drive_type', 'workspace');
+          if (fields.file_upload_folder) formData.append('folder', fields.file_upload_folder);
+          if (fields.public_file) formData.append('make_public', fields.public_file);
 
           let tags = fields.assign_file_tags || [];
 
           let file_tags = [];
           if (fields.auto_tag_generator) {
-            let identifier = fields.auto_tag_identifier || " ";
+            let identifier = fields.auto_tag_identifier || ' ';
 
-            const filename = file.name.split(".").slice(0, -1).join(".");
+            const filename = file.name.split('.').slice(0, -1).join('.');
             file_tags = filename.split(identifier);
             if (fields.auto_tag_translation) {
               for (let tag of file_tags) {
@@ -282,34 +251,25 @@ export async function upload(fields, e) {
               }
             }
           }
-          formData.append("tags", [...tags, ...file_tags]);
+          formData.append('tags', [...tags, ...file_tags]);
 
           const request = new XMLHttpRequest();
 
           let _domain = e._session.domain;
           if (e._session.is_deployment) {
-            _domain =
-              e._session.opt.regional_server === "dev.xuda.io"
-                ? "dev.xuda.io"
-                : "xuda.io";
+            _domain = e._session.opt.regional_server === 'dev.xuda.io' ? 'dev.xuda.io' : 'xuda.io';
           }
 
-          if (overrideAction === "replace" && file.name in existingFiles) {
-            formData.append("file_path", "/" + file.name);
-            formData.append("file_name", file.name);
-            request.open(
-              "POST",
-              `https://${_domain}/cpi/update_drive_file_workspace`
-            );
+          if (overrideAction === 'replace' && file.name in existingFiles) {
+            formData.append('file_path', '/' + file.name);
+            formData.append('file_name', file.name);
+            request.open('POST', `https://${_domain}/cpi/update_drive_file_workspace`);
           } else {
-            request.open(
-              "POST",
-              `https://${_domain}/cpi/upload_drive_file_workspace`
-            );
+            request.open('POST', `https://${_domain}/cpi/upload_drive_file_workspace`);
           }
 
-          request.setRequestHeader("xu-gtp-token", gtp_token);
-          request.setRequestHeader("xu-app-token", app_token);
+          request.setRequestHeader('xu-gtp-token', gtp_token);
+          request.setRequestHeader('xu-app-token', app_token);
 
           // request.open("POST", `https://${_domain}/rpi/runtime_upload_file`);
 
@@ -345,7 +305,7 @@ export async function upload(fields, e) {
             var res = JSON.parse(request.responseText);
 
             error(res.data);
-            this.$emit("error", error);
+            this.$emit('error', error);
           };
 
           request.send(formData);
@@ -376,36 +336,26 @@ export async function upload(fields, e) {
           let app_id = e._session.app_id;
           let app_id_reference = APP_OBJ[app_id].app_id_reference;
 
-          axios_ajax(
-            func.common.get_url(
-              e.SESSION_ID,
-              "rpi",
-              "runtime_delete_file_bulk"
-            ),
-            {
-              app_id,
-              server_files: ret_obj.deletedArr,
-              app_id_reference: app_id_reference,
-              gtp_token: e._session.gtp_token,
-            }
-          );
+          axios_ajax(func.common.get_url(e.SESSION_ID, 'rpi', 'runtime_delete_file_bulk'), {
+            app_id,
+            server_files: ret_obj.deletedArr,
+            app_id_reference: app_id_reference,
+            gtp_token: e._session.gtp_token,
+          });
           load();
         },
         remove: (source, load, error) => {
-          var source_clean = source.split("/").pop();
+          var source_clean = source.split('/').pop();
 
           ret_obj.deletedArr.push(source_clean);
 
-          var myIndex = ret_obj.app_files.indexOf(
-            (file) => file.server_fileName === source
-          );
+          var myIndex = ret_obj.app_files.indexOf((file) => file.server_fileName === source);
           if (myIndex !== -1) {
             ret_obj.app_files.splice(myIndex, 1);
           }
 
           ////////////// CALLBACK
-          if (fields.instant_file_upload === "N" ? false : true)
-            do_callback(true);
+          if (fields.instant_file_upload === 'N' ? false : true) do_callback(true);
           // Can call the error method if something is wrong, should exit after
           // error('oh my goodness');
 
@@ -426,45 +376,45 @@ export async function upload(fields, e) {
       opt.files = init_files;
     }
 
-    opt.instantUpload = fields.instant_file_upload === "N" ? false : true;
+    opt.instantUpload = fields.instant_file_upload === 'N' ? false : true;
 
     if (fields.file_upload_mime_type_preset) {
       switch (fields.file_upload_mime_type_preset) {
-        case "image":
-          opt.acceptedFileTypes = ["image/*"];
+        case 'image':
+          opt.acceptedFileTypes = ['image/*'];
           break;
-        case "video":
-          opt.acceptedFileTypes = ["video/*"];
+        case 'video':
+          opt.acceptedFileTypes = ['video/*'];
           break;
-        case "audio":
-          opt.acceptedFileTypes = ["audio/*"];
+        case 'audio':
+          opt.acceptedFileTypes = ['audio/*'];
           break;
         default:
-          opt.acceptedFileTypes = ["image/*"];
+          opt.acceptedFileTypes = ['image/*'];
       }
     } else {
       if (fields.file_upload_custom_mime_types) {
-        opt.acceptedFileTypes = fields.file_upload_custom_mime_types.split(",");
+        opt.acceptedFileTypes = fields.file_upload_custom_mime_types.split(',');
       } else {
         opt.allowFileTypeValidation = false;
       }
     }
 
-    if (fields.file_upload_mask === "circle") {
+    if (fields.file_upload_mask === 'circle') {
       opt.imagePreviewHeight = 170;
-      opt.imageCropAspectRatio = "1:1";
+      opt.imageCropAspectRatio = '1:1';
       opt.imageResizeTargetWidth = 200;
       opt.imageResizeTargetHeight = 200;
-      opt.stylePanelLayout = "compact circle";
-      opt.styleLoadIndicatorPosition = "center bottom";
-      opt.styleProgressIndicatorPosition = "right bottom";
-      opt.styleButtonRemoveItemPosition = "left bottom";
-      opt.styleButtonProcessItemPosition = "right bottom";
+      opt.stylePanelLayout = 'compact circle';
+      opt.styleLoadIndicatorPosition = 'center bottom';
+      opt.styleProgressIndicatorPosition = 'right bottom';
+      opt.styleButtonRemoveItemPosition = 'left bottom';
+      opt.styleButtonProcessItemPosition = 'right bottom';
     }
 
     pond = FilePond.create($imgInp[0], opt);
 
-    pond.on("processfiles", (e) => {
+    pond.on('processfiles', (e) => {
       do_callback();
     });
 
@@ -531,7 +481,7 @@ export async function viewer(fields, e) {
   };
 
   var segmentComponent = {
-    props: ["options", "modelValue"],
+    props: ['options', 'modelValue'],
     computed: {
       model: {
         get() {
@@ -540,7 +490,7 @@ export async function viewer(fields, e) {
           return value;
         },
         set(v) {
-          this.$emit("update:modelValue", v);
+          this.$emit('update:modelValue', v);
         },
       },
       segmentActive() {
@@ -568,7 +518,7 @@ export async function viewer(fields, e) {
   };
 
   var imagePreview = {
-    props: ["file", "size"],
+    props: ['file', 'size'],
     template: `
 
   
@@ -902,12 +852,12 @@ export async function viewer(fields, e) {
     opt.app_id = app_id;
 
     const response = await fetch(`https://${_domain}/cpi/${service}`, {
-      method: "POST",
+      method: 'POST',
       headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        "xu-gtp-token": gtp_token,
-        "xu-app-token": app_token,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'xu-gtp-token': gtp_token,
+        'xu-app-token': app_token,
       },
       body: JSON.stringify(opt),
     });
@@ -923,18 +873,18 @@ export async function viewer(fields, e) {
 
   const formatBytes = function (bytes) {
     if (bytes < 1024) {
-      return bytes + " Bytes"; // Less than 1 KB
+      return bytes + ' Bytes'; // Less than 1 KB
     } else if (bytes < 1024 * 1024) {
-      return (bytes / 1024).toFixed(2) + " KB"; // Less than 1 MB
+      return (bytes / 1024).toFixed(2) + ' KB'; // Less than 1 MB
     } else if (bytes < 1024 * 1024 * 1024) {
-      return (bytes / (1024 * 1024)).toFixed(2) + " MB"; // Less than 1 GB
+      return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; // Less than 1 GB
     } else {
-      return (bytes / (1024 * 1024 * 1024)).toFixed(2) + " GB"; // 1 GB or more
+      return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB'; // 1 GB or more
     }
   };
 
   var containerId = crypto.randomUUID();
-  e.$containerP.attr("widget-id", containerId);
+  e.$containerP.attr('widget-id', containerId);
 
   var app = createApp({
     template: html,
@@ -946,27 +896,27 @@ export async function viewer(fields, e) {
     data() {
       return {
         replaceOptions: [
-          { label: "Replace existing items", value: "replace" },
-          { label: "Keep all items", value: "keep" },
+          { label: 'Replace existing items', value: 'replace' },
+          { label: 'Keep all items', value: 'keep' },
         ],
         sortDirOptions: [
           {
-            label: "Ascending",
-            value: "asc",
+            label: 'Ascending',
+            value: 'asc',
           },
           {
-            label: "Descending",
-            value: "desc",
+            label: 'Descending',
+            value: 'desc',
           },
         ],
         sortOptions: [
           {
-            label: "Date",
-            value: "date",
+            label: 'Date',
+            value: 'date',
           },
           {
-            label: "Name",
-            value: "name",
+            label: 'Name',
+            value: 'name',
           },
         ],
         viewOptions: [
@@ -978,8 +928,8 @@ export async function viewer(fields, e) {
                 clip-rule="evenodd"
               ></path>
             </svg>`,
-            label: "",
-            value: "gallery",
+            label: '',
+            value: 'gallery',
           },
           {
             icon: ` <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -989,22 +939,22 @@ export async function viewer(fields, e) {
                 clip-rule="evenodd"
               ></path>
             </svg>`,
-            label: "",
-            value: "list",
+            label: '',
+            value: 'list',
           },
           {
             icon: ` <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256">
                 <path d="M200,64V192a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H192A8,8,0,0,1,200,64Z" opacity="0.2"></path>
                 <path d="M192,48H64A16,16,0,0,0,48,64V192a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64A16,16,0,0,0,192,48Zm0,144H64V64H192V192ZM240,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0ZM32,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0Z"></path>
               </svg>`,
-            label: "",
-            value: "slider",
+            label: '',
+            value: 'slider',
           },
         ],
         options: fields,
         folders: [],
         files: [],
-        view: fields.default_view_type || "gallery",
+        view: fields.default_view_type || 'gallery',
         uploadModal: false,
         uploaderLoading: false,
         loadingSearch: false,
@@ -1012,33 +962,33 @@ export async function viewer(fields, e) {
         formatBytes,
         initUploader: upload,
         swiper: null,
-        existingTags: "",
+        existingTags: '',
         showSearchPopper: false,
         isOverDropZone: false,
         removeChipCount: 0,
         searchOptions: [
           {
-            label: "Filename",
-            tag: "name",
-            modifier: "contains",
+            label: 'Filename',
+            tag: 'name',
+            modifier: 'contains',
           },
           {
-            label: "Tag",
-            tag: "tag",
-            modifier: "equals",
+            label: 'Tag',
+            tag: 'tag',
+            modifier: 'equals',
           },
           {
-            label: "Content",
-            tag: "any",
-            modifier: "contains",
+            label: 'Content',
+            tag: 'any',
+            modifier: 'contains',
           },
         ],
         opts: {
           app_id,
-          path: "/",
-          search_string: "",
-          sort_by: fields.sort_by || "date",
-          sort_dir: fields.sort_dir || "asc",
+          path: '/',
+          search_string: '',
+          sort_by: fields.sort_by || 'date',
+          sort_dir: fields.sort_dir || 'asc',
           ...(fields.filter_tags?.length ? { tags: fields.filter_tags } : {}),
           // ...filter_tags
         },
@@ -1047,14 +997,14 @@ export async function viewer(fields, e) {
         existingFiles: {},
         allLoading: false,
         showExistModal: false,
-        overrideAction: "replace",
+        overrideAction: 'replace',
         pond: null,
         processFiles: null,
       };
     },
     methods: {
       async refreshDirectory(all, bypassFolders = false) {
-        if (this.view === "slider") bypassFolders = true;
+        if (this.view === 'slider') bypassFolders = true;
 
         this.loadingSearch = true;
 
@@ -1065,17 +1015,17 @@ export async function viewer(fields, e) {
         }
 
         if (!bypassFolders) {
-          const folders = await this.fetcher("get_drive_files_workspace", {
+          const folders = await this.fetcher('get_drive_files_workspace', {
             ...this.opts,
-            type: "directory",
+            type: 'directory',
           });
           this.folders = folders.data.children || [];
         }
 
-        const files = await this.fetcher("get_drive_files_workspace", {
+        const files = await this.fetcher('get_drive_files_workspace', {
           ...this.opts,
           ...(all ? {} : { from: 0, to: this.limit }),
-          type: "file",
+          type: 'file',
         });
 
         this.files = files.data.children || [];
@@ -1118,17 +1068,15 @@ export async function viewer(fields, e) {
           let promises = [];
           this.existingFiles = {};
 
-          var filesMapped = this.pond
-            .getFiles()
-            .map((e) => ({ id: e.id, filename: e.file.name }));
+          var filesMapped = this.pond.getFiles().map((e) => ({ id: e.id, filename: e.file.name }));
 
           filesMapped.forEach(({ filename }) => {
             promises.push(
               new Promise((resolve, reject) => {
                 this.fetcher(`check_drive_file_workspace`, {
-                  file_path: "/" + filename,
+                  file_path: '/' + filename,
                   file_name: filename,
-                  type: "file",
+                  type: 'file',
                 })
                   .then((e) => {
                     resolve(e);
@@ -1144,7 +1092,7 @@ export async function viewer(fields, e) {
 
                     reject(err);
                   });
-              })
+              }),
             );
           });
 
@@ -1156,9 +1104,7 @@ export async function viewer(fields, e) {
               }
 
               filesMapped
-                .filter(
-                  (e) => !Object.keys(this.existingFiles).includes(e.filename)
-                )
+                .filter((e) => !Object.keys(this.existingFiles).includes(e.filename))
                 .forEach((e) => {
                   this.processFiles(e.id);
                 });
@@ -1177,10 +1123,10 @@ export async function viewer(fields, e) {
             this.opts.search_string = this.opts.search_string
               .replaceAll(
                 this.opts.search_string
-                  .split(" ")
-                  .filter((e) => e.includes(":"))
+                  .split(' ')
+                  .filter((e) => e.includes(':'))
                   .at(-1),
-                ""
+                '',
               )
               .trim();
             this.removeChipCount = 0;
@@ -1189,12 +1135,11 @@ export async function viewer(fields, e) {
           }
         }
       },
-      // hideSearchPopper() {
-      //   debugger;
-      // setTimeout(() => {
-      // this.showSearchPopper = false;
-      // }, 100);
-      // },
+      hideSearchPopper() {
+        setTimeout(() => {
+          this.showSearchPopper = false;
+        }, 100);
+      },
       searchDebounce: _.debounce(async function ($event) {
         await this.refreshDirectory();
       }, 400),
@@ -1202,7 +1147,7 @@ export async function viewer(fields, e) {
     },
     mounted() {
       var onDrop = (files) => {
-        if (this.view === "slider") return;
+        if (this.view === 'slider') return;
         this.uploadModal = true;
         this.pond.addFiles(files);
       };
@@ -1215,31 +1160,23 @@ export async function viewer(fields, e) {
     },
     computed: {
       searchTags() {
-        return this.opts.search_string
-          .split(" ")
-          .filter((e) => e.includes(":"));
+        return this.opts.search_string.split(' ').filter((e) => e.includes(':'));
       },
       search: {
         get() {
           return this.opts.search_string
-            .split(" ")
-            .filter((e) => !e.includes(":"))
+            .split(' ')
+            .filter((e) => !e.includes(':'))
             .filter((e) => e)
-            .join(" ")
+            .join(' ')
             .trim();
         },
 
         set(value) {
           // debugger;
-          var existingTags = this.opts.search_string
-            .split(" ")
-            .filter((e) => e.includes(":"));
+          var existingTags = this.opts.search_string.split(' ').filter((e) => e.includes(':'));
 
-          this.opts.search_string = (
-            existingTags.join(" ") +
-            " " +
-            value
-          ).trim();
+          this.opts.search_string = (existingTags.join(' ') + ' ' + value).trim();
 
           console.log(value);
 
@@ -1247,7 +1184,7 @@ export async function viewer(fields, e) {
             this.showSearchPopper = true;
           }
 
-          if (value.includes(":")) {
+          if (value.includes(':')) {
             setTimeout(() => {
               this.showSearchPopper = false;
             }, 50);
@@ -1264,10 +1201,10 @@ export async function viewer(fields, e) {
       },
       view: {
         handler(val) {
-          if (val === "slider") {
+          if (val === 'slider') {
             this.$nextTick(() => {
               // setTimeout(() => {
-              this.swiper = new Swiper(this.$refs["swiper-container"], {
+              this.swiper = new Swiper(this.$refs['swiper-container'], {
                 loop: true,
                 slidesPerView: 1,
                 spaceBetween: 20,
@@ -1277,13 +1214,8 @@ export async function viewer(fields, e) {
                 // ...(fields?.direction === "rtl" ? { reverseDirection: true } : {})
               });
 
-              this.swiper.on("slideChange", (event) => {
-                if (
-                  event.activeIndex >= 5 &&
-                  !this.isEndOfList &&
-                  !this.loadingSearch &&
-                  !this.allLoading
-                ) {
+              this.swiper.on('slideChange', (event) => {
+                if (event.activeIndex >= 5 && !this.isEndOfList && !this.loadingSearch && !this.allLoading) {
                   this.refreshDirectory(true);
                 }
               });
@@ -1309,10 +1241,7 @@ export async function viewer(fields, e) {
 
       this.$nextTick(async () => {
         // debugger;
-        var { pond, processFiles } = await this.initUploader(
-          { ...fields, instant_file_upload: "N" },
-          { ...e, $containerP: $("#imageUploaderComponent") }
-        );
+        var { pond, processFiles } = await this.initUploader({ ...fields, instant_file_upload: 'N' }, { ...e, $containerP: $('#imageUploaderComponent') });
 
         this.pond = pond;
         this.processFiles = processFiles;
@@ -1321,8 +1250,8 @@ export async function viewer(fields, e) {
           this.refreshDirectory(false, true);
         }, 2500);
 
-        this.pond.on("processfile", (e, { id }) => {
-          if (!e?.type !== "error") {
+        this.pond.on('processfile', (e, { id }) => {
+          if (!e?.type !== 'error') {
             this.pond.removeFiles(id);
           }
 
@@ -1335,12 +1264,12 @@ export async function viewer(fields, e) {
           refreshThrottled();
         });
 
-        this.pond.on("processfiles", (a, b) => {
-          console.log("Finished all");
+        this.pond.on('processfiles', (a, b) => {
+          console.log('Finished all');
         });
       });
 
-      this.$watch("opts", (value) => {
+      this.$watch('opts', (value) => {
         this.refreshDirectory();
       });
     },