🎨 Style(custom): format with prettier

src/renderer/pages/MiniPage.vue

@@ -1,11 +1,13 @@
 <template>
-  <div
-    id="mini-page"
-  >
+  <div id="mini-page">
     <div
       id="upload-area"
-      :class="{ 'is-dragover': dragover, uploading: isShowingProgress, linux: osGlobal === 'linux' }"
-      :style="{ backgroundPosition: '0 ' + progress + '%'}"
+      :class="{
+        'is-dragover': dragover,
+        uploading: isShowingProgress,
+        linux: osGlobal === 'linux'
+      }"
+      :style="{ backgroundPosition: '0 ' + progress + '%' }"
       @drop.prevent="onDrop"
       @dragover.prevent="dragover = true"
       @dragleave.prevent="dragover = false"
@@ -13,18 +15,10 @@
       <img
         v-if="!dragover && !isShowingProgress"
         :src="logoPath ? logoPath : require('../assets/squareLogo.png')"
-        style="width: 100%; height: 100%;border-radius: 50%;"
-      >
-      <div
-        id="upload-dragger"
-        @dblclick="openUploadWindow"
-      >
-        <input
-          id="file-uploader"
-          type="file"
-          multiple
-          @change="onChange"
-        >
+        style="width: 100%; height: 100%; border-radius: 50%"
+      />
+      <div id="upload-dragger" @dblclick="openUploadWindow">
+        <input id="file-uploader" type="file" multiple @change="onChange" />
       </div>
     </div>
   </div>
@@ -32,10 +26,7 @@
 
 <script lang="ts" setup>
 import { ElMessage as $message } from 'element-plus'
-import {
-  ipcRenderer,
-  IpcRendererEvent
-} from 'electron'
+import { ipcRenderer, IpcRendererEvent } from 'electron'
 import { IConfig } from 'piclist'
 import { onBeforeUnmount, onBeforeMount, ref, watch } from 'vue'
 
@@ -57,11 +48,12 @@ const wY = ref(-1)
 const screenX = ref(-1)
 const screenY = ref(-1)
 
-async function initLogoPath () {
+async function initLogoPath() {
   const config = await getConfig<IConfig>()
   if (config) {
     if (config.settings?.isCustomMiniIcon && config.settings?.customMiniIcon) {
-      logoPath.value = 'data:image/jpg;base64,' + await invokeToMain('convertPathToBase64', config.settings.customMiniIcon)
+      logoPath.value =
+        'data:image/jpg;base64,' + (await invokeToMain('convertPathToBase64', config.settings.customMiniIcon))
     }
   }
 }
@@ -84,7 +76,7 @@ onBeforeMount(async () => {
   window.addEventListener('mouseup', handleMouseUp, false)
 })
 
-watch(progress, (val) => {
+watch(progress, val => {
   if (val === 100) {
     setTimeout(() => {
       isShowingProgress.value = false
@@ -95,17 +87,16 @@ watch(progress, (val) => {
   }
 })
 
-function onDrop (e: DragEvent) {
+function onDrop(e: DragEvent) {
   dragover.value = false
-  const items = e.dataTransfer?.items!
-  const files = e.dataTransfer?.files!
 
   // send files first
-  if (files?.length) {
-    ipcSendFiles(e.dataTransfer?.files!)
-  } else {
+  if (e.dataTransfer?.files?.length) {
+    ipcSendFiles(e.dataTransfer.files)
+  } else if (e.dataTransfer?.items) {
+    const items = e.dataTransfer.items
     if (items.length === 2 && items[0].type === 'text/uri-list') {
-      handleURLDrag(items, e.dataTransfer!)
+      handleURLDrag(items, e.dataTransfer)
     } else if (items[0].type === 'text/plain') {
       const str = e.dataTransfer!.getData(items[0].type)
       if (isUrl(str)) {
@@ -117,7 +108,7 @@ function onDrop (e: DragEvent) {
   }
 }
 
-function handleURLDrag (items: DataTransferItemList, dataTransfer: DataTransfer) {
+function handleURLDrag(items: DataTransferItemList, dataTransfer: DataTransfer) {
   // text/html
   // Use this data to get a more precise URL
   const urlString = dataTransfer.getData(items[1].type)
@@ -133,20 +124,20 @@ function handleURLDrag (items: DataTransferItemList, dataTransfer: DataTransfer)
   }
 }
 
-function openUploadWindow () {
-  // @ts-ignore
+function openUploadWindow() {
+  // @ts-expect-error file-uploader
   document.getElementById('file-uploader').click()
 }
 
-function onChange (e: any) {
+function onChange(e: any) {
   ipcSendFiles(e.target.files)
-  // @ts-ignore
+  // @ts-expect-error file-uploader
   document.getElementById('file-uploader').value = ''
 }
 
-function ipcSendFiles (files: FileList) {
+function ipcSendFiles(files: FileList) {
   const sendFiles: IFileWithPath[] = []
-  Array.from(files).forEach((item) => {
+  Array.from(files).forEach(item => {
     const obj = {
       name: item.name,
       path: item.path
@@ -156,7 +147,7 @@ function ipcSendFiles (files: FileList) {
   sendRPC(IRPCActionType.UPLOAD_CHOOSED_FILES, sendFiles)
 }
 
-function handleMouseDown (e: MouseEvent) {
+function handleMouseDown(e: MouseEvent) {
   draggingState.value = true
   wX.value = e.pageX
   wY.value = e.pageY
@@ -164,7 +155,7 @@ function handleMouseDown (e: MouseEvent) {
   screenY.value = e.screenY
 }
 
-function handleMouseMove (e: MouseEvent) {
+function handleMouseMove(e: MouseEvent) {
   e.preventDefault()
   e.stopPropagation()
   if (draggingState.value) {
@@ -179,10 +170,11 @@ function handleMouseMove (e: MouseEvent) {
   }
 }
 
-function handleMouseUp (e: MouseEvent) {
+function handleMouseUp(e: MouseEvent) {
   draggingState.value = false
   if (screenX.value === e.screenX && screenY.value === e.screenY) {
-    if (e.button === 0) { // left mouse
+    if (e.button === 0) {
+      // left mouse
       openUploadWindow()
     } else {
       openContextMenu()
@@ -190,7 +182,7 @@ function handleMouseUp (e: MouseEvent) {
   }
 }
 
-function openContextMenu () {
+function openContextMenu() {
   sendRPC(IRPCActionType.SHOW_MINI_PAGE_MENU)
 }
 
@@ -201,47 +193,46 @@ onBeforeUnmount(() => {
   window.removeEventListener('mousemove', handleMouseMove, false)
   window.removeEventListener('mouseup', handleMouseUp, false)
 })
-
 </script>
 <script lang="ts">
 export default {
   name: 'MiniPage'
 }
 </script>
-<style lang='stylus'>
-  #mini-page
-    background #409EFF
-    color #FFF
-    height 100vh
-    width 100vw
+<style lang="stylus">
+#mini-page
+  background #409EFF
+  color #FFF
+  height 100vh
+  width 100vw
+  border-radius 50%
+  text-align center
+  line-height 100vh
+  font-size 40px
+  background-size 90vh 90vw
+  background-position center center
+  background-repeat no-repeat
+  position relative
+  border 4px solid #fff
+  box-sizing border-box
+  cursor pointer
+  &.linux
+    border-radius 0
+    background-size 100vh 100vw
+  #upload-area
+    height 100%
+    width 100%
     border-radius 50%
-    text-align center
-    line-height 100vh
-    font-size 40px
-    background-size 90vh 90vw
-    background-position center center
-    background-repeat no-repeat
-    position relative
-    border 4px solid #fff
-    box-sizing border-box
-    cursor pointer
+    transition all .2s ease-in-out
     &.linux
       border-radius 0
-      background-size 100vh 100vw
-    #upload-area
+    &.uploading
+      background: linear-gradient(to top, #409EFF 50%, #fff 51%)
+      background-size 200%
+    #upload-dragger
       height 100%
-      width 100%
-      border-radius 50%
-      transition all .2s ease-in-out
-      &.linux
-        border-radius 0
-      &.uploading
-        background: linear-gradient(to top, #409EFF 50%, #fff 51%)
-        background-size 200%
-      #upload-dragger
-        height 100%
-      &.is-dragover
-        background rgba(0,0,0,0.3)
-    #file-uploader
-      display none
+    &.is-dragover
+      background rgba(0,0,0,0.3)
+  #file-uploader
+    display none
 </style>