feat: upload contentEditable done.

src/stores/files.js

@@ -4,6 +4,7 @@ import moment from 'moment';
 import apiError from '@/module/apiError.js';
 import Swal from 'sweetalert2';
 import { uploadFailed, uploadloader, uploadSuccess } from '@/module/alertModal.js'
+import { registerRuntimeCompiler } from "vue";
 
 export default defineStore('filesStore', {
   state: () => ({

src/views/Upload/index.vue

@@ -3,7 +3,7 @@
     <!-- Upload Content -->
     <div class="w-full h-[calc(100%_-_64px)]">
       <!-- File name -->
-      <p id="uploadFileName" class="font-bold text-base leading-[48px] border-b border-neutral-300 cursor-pointer focus-visible:outline-primary/50 focus-visible:outline-0 " contentEditable="true">{{ uploadFileName }}<span class="material-symbols-outlined align-text-bottom text-lg" contentEditable="false">stylus</span></p>
+      <div id="uploadFileName" class="font-bold text-base leading-[48px] border-b border-neutral-300 cursor-pointer focus-visible:outline-primary/50 focus-visible:outline-0 group whitespace-nowrap break-keep overflow-hidden text-ellipsis" contentEditable="true" @focusout="onFocusout($event)" @paste="onPaste" @click="showEdit = false" placeholder="File's name">{{ fileName }}<span class="material-symbols-outlined align-text-bottom text-lg group-hover:animate-edit" contentEditable="false" :class="showEdit ? '' : 'hidden'" >stylus</span></div>
       <!-- Upload notification -->
       <div class="flex justify-start items-center space-x-2 ml-2 py-2">
         <span class="material-symbols-outlined text-neutral-700 cursor-pointer" v-tooltip.right="tooltipUpload">info</span>
@@ -122,6 +122,8 @@ export default {
       informData: [], // 紅字提示，尚未選擇的 type
       repeatedData: [], // 紅字提示，重複選擇的 type
       baseTypeData: ['Case ID*', 'Timestamp*', 'Status*', 'Activity*', 'Activity Instance ID*'],
+      showEdit: true,
+      fileName: this.uploadFileName,
     };
   },
   computed: {
@@ -145,6 +147,19 @@ export default {
     uploadFailed,
     uploadSuccess,
     uploadConfirm,
+    onFocusout(e){
+      console.log('onFocusout:', e);
+      // 刪除換行
+      let node = e.target.childNodes;
+      for(let i = node.length - 1; i >= 0; i--) {
+        if(node[i].nodeName === 'BR') e.target.removeChild(node[i]);
+      }
+      this.showEdit = true;
+    },
+    onPaste(e) {
+      e.preventDefault();
+      this.fileName = e.clipboardData.getData('text/plain').replace(/<br\s*\/?>/gi, '').replace(/\n/g, '');
+    },
     /**
      * 驗證，根據新的 selectedColumns 更新 isInform、informData 和 repeatedData
      * @param {Array} data
@@ -212,6 +227,8 @@ export default {
 
       // 取得欲更改的檔名
       this.uploadFileName = document.querySelector('#uploadFileName').firstChild.textContent;
+      // console.log(this.uploadFileName);
+      // this.FilesStore.rename();
       // 設定第二階段上傳的 data
       haveValueData.forEach(column => {
         switch (column.code) {
@@ -237,15 +254,15 @@ export default {
             break;
         }
       });
-      this.uploadConfirm(fetchData);
+      // this.uploadConfirm(fetchData);
     },
   },
   mounted() {
     // 要有 uploadID 才能進來
     this.isInform = true; // 初始為藍字提示
-    console.log(this.uploadId);
+    this.showEdit = true;
-    this.uploadId = 770170340
+    this.fileName = 'abc'
-    this.uploadFileName = 'abc'
+    this.uploadFileName = 'kmu_log_without_attribute';
     this.filesStore.getUploadDetail();
     this.isLoading = false;
   },

tailwind.config.js

@@ -57,9 +57,15 @@ module.exports = {
           '50%': { opacity: '0.5' },
           '100%': { opacity: '1' },
         },
+        'edit': {
+          '0%, 100%': { transform: 'rotate(0deg)' },
+          '25%': { transform: 'rotate(9deg)' },
+          '75%': { transform: 'rotate(-9deg)' },
+        },
       },
       animation: {
         'fadein': 'fadein 1s ease-in-out',
+        'edit': 'edit 0.6s ease'
       },
     },
   },