@adminforth/bulk-ai-flow 1.8.0 → 1.9.0

package/dist/custom/ImageGenerationCarousel.vue

@@ -1,8 +1,8 @@
 
 <template>
   <!-- Main modal -->
-  <div tabindex="-1" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 bottom-0 z-10 flex justify-center items-center w-full md:inset-0 h-full max-h-full bg-black/50 dark:bg-gray-900 dark:bg-opacity-50">
-    <div class="relative p-4 w-10/12 max-w-full max-h-full ">
+  <div tabindex="-1" class="fixed inset-0 z-10 flex justify-center items-center dark:bg-gray-900/50 overflow-y-auto">
+    <div class="relative p-4 w-full max-w-[1600px] max-h-[90vh] ">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow-xl dark:bg-gray-700">
             <!-- Modal header -->
@@ -95,20 +95,20 @@
                 </div>
 
                 
-                <div id="gallery" class="relative w-full" data-carousel="static">
+                <div id="gallery" class="relative w-full min-w-0" data-carousel="static">
                   <!-- Carousel wrapper -->
                   <div class="relative h-56 overflow-hidden rounded-lg md:h-[calc(100vh-400px)]">
                       <!-- Item 1 -->
                       <div
                         v-for="(img, index) in images"
                         :key="index"
+                        class="flex items-center justify-center w-full h-full"
                         :class="[
-                          index === 0 ? 'block' : 'hidden',
-                          'duration-700 ease-in-out'
+                          index === 0 ? 'block' : 'hidden'
                         ]"
                         data-carousel-item
                       >
-                          <img :src="img" class="absolute block max-w-full max-h-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" 
+                          <img :src="img" class="max-w-full max-h-full object-contain" 
                             :alt="`Generated image ${index + 1}`"
                           />
                       </div>
@@ -190,7 +190,7 @@ const { t: $t } = useI18n();
 
 const prompt = ref('');
 const emit = defineEmits(['close', 'selectImage', 'error', 'updateCarouselIndex']);
-const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex']);
+const props = defineProps(['meta', 'record', 'images', 'recordId', 'prompt', 'fieldName', 'isError', 'errorMessage', 'carouselImageIndex', 'regenerateImagesRefreshRate']);
 const images = ref([]);
 const loading = ref(false);
 const attachmentFiles = ref<string[]>([])
@@ -370,26 +370,24 @@ async function generateImages() {
   let error = null;
   try {
     resp = await callAdminForthApi({
-      path: `/plugin/${props.meta.pluginInstanceId}/regenerate_images`,
+      path: `/plugin/${props.meta.pluginInstanceId}/create-job`,
       method: 'POST',
       body: {
-        prompt: prompt.value,
+        actionType: 'regenerate_images',
         recordId: props.recordId,
-        fieldName: props.fieldName,
+        prompt: prompt.value,
+        fieldName: props.fieldName
       },
     });
   } catch (e) {
     console.error(e);
-  } finally {
-    clearInterval(ticker);
-    loadingTimer.value = null;
-    loading.value = false;
   }
+
   if (resp?.error) {
     error = resp.error;
   }
   if (!resp) {
-    error = $t('Error generating images, something went wrong');
+    error = $t('Error creating image generation job');
   }
 
   if (error) {
@@ -401,19 +399,50 @@ async function generateImages() {
         variant: 'danger',
         timeout: 'unlimited',
       });
-    emit('error', {
-      isError: true,
-      errorMessage: "Error re-generating images"
+    }
+    return;
+  }
+
+  const jobId = resp.jobId;
+  let jobStatus = null;
+  let jobResponse = null;
+  while (jobStatus !== 'completed' && jobStatus !== 'failed') {
+    jobResponse = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get-job-status`,
+      method: 'POST',
+      body: { jobId },
     });
+    if (jobResponse?.error) {
+      error = jobResponse.error;
+      break;
+    };
+    jobStatus = jobResponse?.job?.status;
+    if (jobStatus === 'failed') {
+      error = jobResponse?.job?.error || $t('Image generation job failed');
     }
+    await new Promise((resolve) => setTimeout(resolve, props.regenerateImagesRefreshRate));
+  }
+
+  if (error) {
+      adminforth.alert({
+        message: error,
+        variant: 'danger',
+        timeout: 'unlimited',
+      });
     return;
   }
 
+  const respImages = jobResponse?.job?.result[props.fieldName] || [];
+
   images.value = [
     ...images.value,
-    ...resp.images,
+    ...respImages,
   ];
 
+  clearInterval(ticker);
+  loadingTimer.value = null;
+  loading.value = false;
+
   await nextTick();
 
 

package/dist/custom/VisionAction.vue

@@ -5,61 +5,39 @@
     </div>
     <p class="text-justify max-h-[18px] truncate max-w-[60vw] md:max-w-none">{{ props.meta.actionName }}</p>
   </div>
-  <Dialog ref="confirmDialog">
-    <div
-      class="fixed inset-0 z-20 flex items-center justify-center bg-black/40"
-    >
-      <div
-        class="bulk-vision-dialog flex items-center justify-center relative w-[100vw] h-[100vh] max-h-[100vh] md:w-auto md:max-w-[95vw] md:min-w-[640px] md:h-auto md:max-h-[90vh] bg-white dark:bg-gray-900 rounded-none md:rounded-md shadow-2xl overflow-hidden"
-      >
-        <div class="bulk-vision-table flex flex-col items-center justify-evenly md:max-h-[90vh] gap-3 md:gap-4 w-full h-full p-4 md:p-6 overflow-y-auto overflow-x-auto">
-          <button type="button" 
-            @click="closeDialog"
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
-              <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-              </svg>
-          </button>
-
-          <div v-if="records && props.checkboxes.length" class="w-full overflow-x-auto">
-            <VisionTable
-              :checkbox="props.checkboxes"
-              :records="records"
-              :meta="props.meta"
-              :images="images"
-              :tableHeaders="tableHeaders"
-              :tableColumns="tableColumns"
-              :customFieldNames="customFieldNames"
-              :tableColumnsIndexes="tableColumnsIndexes"
-              :selected="selected"
-              :isAiResponseReceivedAnalize="isAiResponseReceivedAnalize"
-              :isAiResponseReceivedImage="isAiResponseReceivedImage"
-              :primaryKey="primaryKey"
-              :openGenerationCarousel="openGenerationCarousel"
-              @error="handleTableError"
-              :carouselSaveImages="carouselSaveImages"
-              :carouselImageIndex="carouselImageIndex"
-            />
-          </div>
-          <div class="flex w-full flex-col md:flex-row items-stretch md:items-end justify-end gap-3 md:gap-4">
-            <div class="h-full text-red-600 font-semibold flex items-center justify-center md:mb-2">
-              <p v-if="isError === true">{{ errorMessage }}</p>
-            </div>
-            <button type="button" class="w-full md:w-auto py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
-              @click="closeDialog"
-            >
-              {{'Cancel'}}
-            </button>
-            <Button 
-              class="w-full md:w-64"
-              @click="saveData"
-              :disabled="isLoading || checkedCount < 1 || isCriticalError || isFetchingRecords"
-              :loader="isLoading"
-            >
-            {{ checkedCount > 1 ? 'Save fields' : 'Save field' }}
-            </Button>
-          </div>
-        </div>
+  <Dialog 
+    ref="confirmDialog"
+    header="Bulk AI Flow"
+    class="!max-w-full w-full lg:w-[1600px] !lg:max-w-[1600px]"
+    :buttons="[
+      { label: checkedCount > 1 ? 'Save fields' : 'Save field', options: { disabled: isLoading || checkedCount < 1 || isCriticalError || isFetchingRecords || isGeneratingImages || isAnalizingFields || isAnalizingImages, loader: isLoading, class: 'w-fit sm:w-40' }, onclick: (dialog) => { saveData(); dialog.hide(); } },
+      { label: 'Cancel', onclick: (dialog) => dialog.hide() },
+    ]"
+  >
+    <div class="bulk-vision-table flex flex-col items-center max-w-[1560px] md:max-h-[90vh] gap-3 md:gap-4 w-full h-full overflow-y-auto">
+      <div v-if="records && props.checkboxes.length" class="w-full overflow-x-auto">
+        <VisionTable
+          :checkbox="props.checkboxes"
+          :records="records"
+          :meta="props.meta"
+          :images="images"
+          :tableHeaders="tableHeaders"
+          :tableColumns="tableColumns"
+          :customFieldNames="customFieldNames"
+          :tableColumnsIndexes="tableColumnsIndexes"
+          :selected="selected"
+          :isAiResponseReceivedAnalize="isAiResponseReceivedAnalize"
+          :isAiResponseReceivedImage="isAiResponseReceivedImage"
+          :primaryKey="primaryKey"
+          :openGenerationCarousel="openGenerationCarousel"
+          @error="handleTableError"
+          :carouselSaveImages="carouselSaveImages"
+          :carouselImageIndex="carouselImageIndex"
+          :regenerateImagesRefreshRate="props.meta.refreshRates?.regenerateImages"
+        />
+      </div>
+      <div class="text-red-600 flex items-center w-full">
+        <p v-if="isError === true">{{ errorMessage }}</p>
       </div>
     </div>
   </Dialog>
@@ -111,9 +89,14 @@ const isCriticalError = ref(false);
 const isImageGenerationError = ref(false);
 const errorMessage = ref('');
 const checkedCount = ref(0);
+const isGeneratingImages = ref(false);
+const isAnalizingFields = ref(false);
+const isAnalizingImages = ref(false);
+
 
 const openDialog = async () => {
   confirmDialog.value.open();
+  isFetchingRecords.value = true;
   await getRecords();
   if (props.meta.isAttachFiles) {
     await getImages();
@@ -124,42 +107,41 @@ const openDialog = async () => {
   tableColumnsIndexes.value = result.indexes;
   customFieldNames.value = tableHeaders.value.slice((props.meta.isAttachFiles) ? 3 : 2).map(h => h.fieldName);
   setSelected();
+  if (props.meta.isImageGeneration) {
+    fillCarouselSaveImages();
+  }
   for (let i = 0; i < selected.value?.length; i++) {
     openGenerationCarousel.value[i] = props.meta.outputImageFields?.reduce((acc,key) =>{
       acc[key] = false;
       return acc;
     },{[primaryKey]: records.value[i][primaryKey]} as Record<string, boolean>);
   }
-  isFetchingRecords.value = true;
-  const tasks = [];
+  isFetchingRecords.value = false;
+  
+  if (props.meta.isImageGeneration) {
+    isGeneratingImages.value = true;
+    runAiAction({
+      endpoint: 'initial_image_generate',
+      actionType: 'generate_images',
+      responseFlag: isAiResponseReceivedImage,
+    });
+  }
   if (props.meta.isFieldsForAnalizeFromImages) {
-    tasks.push(runAiAction({
+    isAnalizingImages.value = true;
+    runAiAction({
       endpoint: 'analyze',
       actionType: 'analyze',
       responseFlag: isAiResponseReceivedAnalize,
-    }));
+    });
   }
   if (props.meta.isFieldsForAnalizePlain) {
-    tasks.push(runAiAction({
+    isAnalizingFields.value = true;
+    runAiAction({
       endpoint: 'analyze_no_images',
       actionType: 'analyze_no_images',
       responseFlag: isAiResponseReceivedAnalize,
-    }));
-  }
-  if (props.meta.isImageGeneration) {
-    tasks.push(runAiAction({
-      endpoint: 'initial_image_generate',
-      actionType: 'generate_images',
-      responseFlag: isAiResponseReceivedImage,
-    }));
-  }
-  await Promise.all(tasks);
-
-  if (props.meta.isImageGeneration) {
-    fillCarouselSaveImages();
+    });
   }
-  
-  isFetchingRecords.value = false;
 }
  
 watch(selected, (val) => {
@@ -167,39 +149,22 @@ watch(selected, (val) => {
   checkedCount.value = val.filter(item => item.isChecked === true).length;
 }, { deep: true });
 
-const closeDialog = () => {
-  confirmDialog.value.close();
-  isAiResponseReceivedAnalize.value = [];
-  isAiResponseReceivedImage.value = [];
-
-  records.value = [];
-  images.value = [];
-  selected.value = [];
-  tableColumns.value = [];
-  tableColumnsIndexes.value = [];
-  isError.value = false;
-  isCriticalError.value = false;
-  isImageGenerationError.value = false;
-  errorMessage.value = '';
-  carouselSaveImages.value = [];
-  carouselImageIndex.value = [];
-}
-
 function fillCarouselSaveImages() {
   for (const item of selected.value) {
     const tempItem: any = {};
     const tempItemIndex: any = {};
     for (const [key, value] of Object.entries(item)) {
-        if (props.meta.outputImageFields?.includes(key)) {
-          tempItem[key] = [value];
-          tempItemIndex[key] = 0;
-        }
+      if (props.meta.outputImageFields?.includes(key)) {
+        tempItem[key] = [];
+        tempItemIndex[key] = 0;
+      }
     }
     carouselSaveImages.value.push(tempItem);
     carouselImageIndex.value.push(tempItemIndex);
   }
 }
 
+
 function formatLabel(str) {
   return str
     .split('_')                   
@@ -438,38 +403,129 @@ async function runAiAction({
   responseFlag: Ref<boolean[]>;
   updateOnSuccess?: boolean;
 }) {
-  let res: any;
-  let error: any = null;
-
-  try {
-    responseFlag.value = props.checkboxes.map(() => false);
+  let hasError = false;
+  let errorMessage = '';
+  const jobsIds: { jobId: any; recordId: any; }[] = [];
+  responseFlag.value = props.checkboxes.map(() => false);
+
+  //creating jobs
+  const tasks = props.checkboxes.map(async (checkbox, i) => {
+    try {
+      const res = await callAdminForthApi({
+        path: `/plugin/${props.meta.pluginInstanceId}/create-job`,
+        method: 'POST',
+        body: {
+          actionType: actionType,
+          recordId: checkbox,
+        },
+      });
 
-    res = await callAdminForthApi({
-      path: `/plugin/${props.meta.pluginInstanceId}/${endpoint}`,
-      method: 'POST',
-      body: {
-        selectedIds: props.checkboxes,
-      },
-    });
+      if (res?.error) {
+        throw new Error(res.error);
+      }
+      
+      if (!res) {
+        throw new Error(`${actionType} request returned empty response.`);
+      }
 
-    if (actionType !== 'analyze_no_images' || !props.meta.isFieldsForAnalizeFromImages) {
-      responseFlag.value = props.checkboxes.map(() => true);
+      jobsIds.push({ jobId: res.jobId, recordId: checkbox });
+    } catch (e) {
+      console.error(`Error during ${actionType} for item ${i}:`, e);
+      hasError = true;
+      errorMessage = `Failed to ${actionType.replace('_', ' ')}. Please, try to re-run the action.`;
+      return { success: false, index: i, error: e };
     }
-  } catch (e) {
-    console.error(`Error during ${actionType}:`, e);
-    error = `Failed to ${actionType.replace('_', ' ')}. Please, try to re-run the action.`;
-  }
+  });
+  await Promise.all(tasks);
 
-  if (res?.error) {
-    error = res.error;
-  }
-  if (!res && !error) {
-    error = `Error: ${actionType} request returned empty response.`;
+  //polling jobs
+  let isInProgress = true;
+  //if no jobs were created, skip polling
+  while (isInProgress) {
+    //check if at least one job is still in progress
+    let isAtLeastOneInProgress = false;
+    //checking status of each job
+    for (const { jobId, recordId } of jobsIds) {
+      //check job status
+      const jobResponse = await callAdminForthApi({
+        path: `/plugin/${props.meta.pluginInstanceId}/get-job-status`,
+        method: 'POST',
+        body: { jobId },
+      });
+      //check for errors
+      if (jobResponse?.error) {
+        console.error(`Error during ${actionType}:`, jobResponse.error);
+        break;
+      };
+      // extract job status
+      let jobStatus = jobResponse?.job?.status;
+      // check if job is still in progress. If in progress - skip to next job
+      if (jobStatus === 'in_progress') {
+        isAtLeastOneInProgress = true;
+      //if job is completed - update record data
+      } else if (jobStatus === 'completed') {
+        // finding index of the record in selected array
+        const index = selected.value.findIndex(item => String(item[primaryKey]) === String(recordId));
+        //if we are generating images - update carouselSaveImages with new image
+        if (actionType === 'generate_images') {
+          for (const [key, value] of Object.entries(carouselSaveImages.value[index])) {
+            if (props.meta.outputImageFields?.includes(key)) {
+              carouselSaveImages.value[index][key] = [jobResponse.job.result[key]];
+            }
+          }
+        }
+        //marking that we received response for this record
+        if (actionType !== 'analyze_no_images' || !props.meta.isFieldsForAnalizeFromImages) {
+          responseFlag.value[index] = true;
+        }
+        //updating selected with new data from AI
+        const pk = selected.value[index]?.[primaryKey];
+        if (pk) {
+          selected.value[index] = {
+            ...selected.value[index],
+            ...jobResponse.job.result,
+            isChecked: true,
+            [primaryKey]: pk,
+          };
+        }
+        //removing job from jobsIds
+        if (index !== -1) {
+          jobsIds.splice(jobsIds.findIndex(j => j.jobId === jobId), 1);
+        }
+        // checking one more time if we have in progress jobs
+        isAtLeastOneInProgress = true;
+        // if job is failed - set error
+      } else if (jobStatus === 'failed') {
+        const index = selected.value.findIndex(item => String(item[primaryKey]) === String(recordId));
+        if (actionType !== 'analyze_no_images' || !props.meta.isFieldsForAnalizeFromImages) {
+          responseFlag.value[index] = true;
+        }
+        adminforth.alert({
+          message: `Generation action "${actionType.replace('_', ' ')}" failed for record: ${recordId}. Error: ${jobResponse.job?.error || 'Unknown error'}`,
+          variant: 'danger',
+          timeout: 'unlimited',
+        });
+      }
+    }
+    if (!isAtLeastOneInProgress) {
+      isInProgress = false;
+    }
+    if (jobsIds.length > 0) {
+      if (actionType === 'generate_images') {
+        await new Promise(resolve => setTimeout(resolve, props.meta.refreshRates?.generateImages));
+      } else if (actionType === 'analyze') {
+        await new Promise(resolve => setTimeout(resolve, props.meta.refreshRates?.fillFieldsFromImages));
+      } else if (actionType === 'analyze_no_images') {
+        await new Promise(resolve => setTimeout(resolve, props.meta.refreshRates?.fillPlainFields));
+      } else {
+        await new Promise(resolve => setTimeout(resolve, 2000));
+      }
+    }
   }
 
-  if (error) {
+  if (hasError) {
     adminforth.alert({
-      message: error,
+      message: errorMessage,
       variant: 'danger',
       timeout: 'unlimited',
     });
@@ -477,26 +533,19 @@ async function runAiAction({
     if (actionType === 'generate_images') {
       isImageGenerationError.value = true;
     }
-    errorMessage.value = error;
+    this.errorMessage.value = errorMessage;
     return;
   }
 
-  if (updateOnSuccess) {
-    res.result.forEach((item: any, idx: number) => {
-      const pk = selected.value[idx]?.[primaryKey];
-      if (pk) {
-        selected.value[idx] = {
-          ...selected.value[idx],
-          ...item,
-          isChecked: true,
-          [primaryKey]: pk,
-        };
-      }
-    });
+  if (actionType === 'generate_images') {
+    isGeneratingImages.value = false;
+  } else if (actionType === 'analyze') {
+    isAnalizingImages.value = false;
+  } else if (actionType === 'analyze_no_images') {
+    isAnalizingFields.value = false;
   }
 }
 
-
 async function uploadImage(imgBlob, id, fieldName) {
   const file = new File([imgBlob], `generated_${fieldName}_${id}.${imgBlob.type.split('/').pop()}`, { type: imgBlob.type });
   const { name, size, type } = file;

package/dist/custom/VisionTable.vue

@@ -1,9 +1,8 @@
 <template>
-  <div>
     <Table
       :columns="tableHeaders"
       :data="tableColumns"
-      :pageSize="8"
+      :pageSize="6"
       >
       <!-- HEADER TEMPLATE -->
       <template #header:checkboxes="{ item }">
@@ -11,7 +10,7 @@
       </template>
       <!-- CHECKBOX CELL TEMPLATE -->
       <template #cell:checkboxes="{ item }">
-        <div class="flex items-center justify-center">
+        <div class="max-w-[100px] flex items-center justify-center">
           <Checkbox
             v-model="selected[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])].isChecked"
           />
@@ -28,18 +27,22 @@
                   @click="zoomImage(image)"
               />
             </div>
+          </div>
+          <transition name="fade">
             <div
               v-if="zoomedImage"
               class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
               @click.self="closeZoom"
             >
-              <img
-                :src="zoomedImage"
-                ref="zoomedImg"
-                class="max-w-full max-h-full rounded-lg object-contain cursor-grab z-75"
-              />
+              <transition name="zoom">
+                <img
+                  v-if="zoomedImage"
+                  :src="zoomedImage"
+                  class="max-w-full max-h-full rounded-lg object-contain cursor-grab z-75"
+                />
+              </transition>
             </div>
-          </div>
+          </transition>
         </div>
       </template>
       <!-- CUSTOM FIELD TEMPLATES -->
@@ -96,6 +99,7 @@
                 :meta="props.meta"
                 :fieldName="n"
                 :carouselImageIndex="carouselImageIndex[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n]"
+                :regenerateImagesRefreshRate="regenerateImagesRefreshRate"
                 @error="handleError"
                 @close="openGenerationCarousel[tableColumnsIndexes.findIndex(el => el[primaryKey] === item[primaryKey])][n] = false"
                 @selectImage="updateSelectedImage"
@@ -114,12 +118,10 @@
         </div>
       </template>
     </Table>
-  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, nextTick, watch } from 'vue'
-import mediumZoom from 'medium-zoom'
+import { ref } from 'vue'
 import { Select, Input, Textarea, Table, Checkbox, Skeleton, Toggle } from '@/afcl'
 import GenerationCarousel from './ImageGenerationCarousel.vue'
 
@@ -138,12 +140,12 @@ const props = defineProps<{
   errorMessage: string
   carouselSaveImages: any[]
   carouselImageIndex: any[]
+  regenerateImagesRefreshRate: number
 }>();
 const emit = defineEmits(['error']);
 
 
 const zoomedImage = ref(null)
-const zoomedImg = ref(null)
 
 
 function zoomImage(img) {
@@ -154,17 +156,6 @@ function closeZoom() {
   zoomedImage.value = null
 }
 
-watch(zoomedImage, async (val) => {
-  await nextTick()
-  if (val && zoomedImg.value) {
-    mediumZoom(zoomedImg.value, {
-      margin: 24,
-      background: 'rgba(0, 0, 0, 0.9)',
-      scrollOffset: 150
-    }).show()
-  }
-})
-
 function isInColumnEnum(key: string): boolean {
   const colEnum = props.meta.columnEnums?.find(c => c.name === key);
   if (!colEnum) {
@@ -201,4 +192,21 @@ function updateActiveIndex(newIndex: number, id: any, fieldName: string) {
   props.carouselImageIndex[props.tableColumnsIndexes.findIndex(el => el[props.primaryKey] === id)][fieldName] = newIndex;
 }
 
-</script>
+</script>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.zoom-enter-active, .zoom-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.zoom-enter-from, .zoom-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}
+</style>