upgrade draggable to vue3

Author: Kenneth Cheng

package-lock.json

@@ -2,11 +2,12 @@
   "name": "vue3-excel-editor",
   "email": "apple.6502@gmail.com",
   "description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "main": "src/main.js",
   "dependencies": {
     "@vuepic/vue-datepicker": "^3.3.0",
     "moment": "^2.29.1",
+    "vuedraggable": "^4.1.0",
     "xlsx": "^0.18.5"
   },
   "repository": {

package.json

@@ -19,14 +19,14 @@
         </div>
         <div>
           <div ref="panelList" class="panel-list">
-            <!-- draggable v-model="fields" draggable=".panel-list-item" item-key="fields">
-              <div v-for="(item, k) in fields" :key="k"
-                   class="panel-list-item"
-                   @click.prevent="columnLabelClick($event, item)">
-                <input type="checkbox" :checked="!item.invisible" :disabled="true" class="panel-checkbox">
-                <span>{{ item.label }}</span>
-              </div>
-            </draggable-->
+            <draggable v-model="fields" draggable=".panel-list-item" item-key="fields">
+              <template #item="{element}">
+                <div class="panel-list-item" @click.prevent="columnLabelClick($event, element)">
+                  <input type="checkbox" v-model="element.invisible" class="panel-checkbox" :true-value="false" :false-value="true">
+                  <span>{{ element.label }}</span>
+                </div>
+              </template>
+            </draggable>
           </div>
         </div>
       </div>
@@ -46,12 +46,12 @@
 </template>
 
 <script>
-// import draggable from 'vuedraggable'
+import draggable from 'vuedraggable'
 
 export default {
-  // components: {
-  //   'draggable': draggable
-  // },
+  components: {
+    'draggable': draggable
+  },
   props: {
     modelValue: Array,
     localizedLabel: {

src/PanelSetting.vue

@@ -281,6 +281,7 @@ import PanelSetting from './PanelSetting.vue'
 import PanelFind from './PanelFind.vue'
 import DatePicker from '@vuepic/vue-datepicker'
 import {read, writeFile, utils} from 'xlsx'
+import moment from 'moment'
 
 import '@vuepic/vue-datepicker/dist/main.css'
 
@@ -1053,9 +1054,25 @@ export default {
       })
     },
     datepickerClick () {
-      this.inputBox.value = this.inputDateTime
+      const m = moment(this.inputDateTime)
+      switch(this.currentField.type) {
+        case 'date':
+          this.inputBox.value = m.format('YYYY-MM-DD')
+          break
+        case 'datetime':
+          this.inputBox.value = m.format('YYYY-MM-DD hh:mn:00')
+          break
+	case 'datetimesec':
+          this.inputBox.value = m.format('YYYY-MM-DD hh:mn:ss')
+          break
+	case 'datetick':
+	case 'datetimetick':
+	case 'datetimesectick':
+          this.inputBox.value = m.valueOf()
+          break
+      }
       this.inputBoxShow = 0
-      this.inputCellWrite(this.inputDateTime)
+      this.inputCellWrite(this.inputBox.value)
       this.showDatePicker = false
       this.focused = true
     },