Merge branch 'develop'

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     AppColorPicker: typeof import('./src/components/ui/AppColorPicker.vue')['default']
     AppColumnPicker: typeof import('./src/components/ui/AppColumnPicker.vue')['default']
     AppDialog: typeof import('./src/components/ui/AppDialog.vue')['default']
+    AppDraggable: typeof import('./src/components/ui/AppDraggable.vue')['default']
     AppDragOverlay: typeof import('./src/components/ui/AppDragOverlay.vue')['default']
     AppFocusableContainer: typeof import('./src/components/ui/AppFocusableContainer.vue')['default']
     AppFooter: typeof import('./src/components/layout/AppFooter.vue')['default']

package-lock.json

@@ -33,7 +33,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@ctrl/tinycolor": "^3.6.0",
+    "@ctrl/tinycolor": "^4.0.2",
     "@fontsource/raleway": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@jaames/iro": "^5.5.2",
@@ -43,7 +43,7 @@
     "dompurify": "^3.0.5",
     "echarts": "^5.4.3",
     "echarts-gl": "^2.0.9",
-    "hls.js": "^1.4.10",
+    "hls.js": "^1.4.12",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
@@ -68,7 +68,6 @@
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.6.5",
     "vue-virtual-scroller": "^1.1.2",
-    "vuedraggable": "^2.24.3",
     "vuetify": "^2.7.1",
     "vuetify-confirm": "^2.0.6",
     "vuex": "^3.6.2"
@@ -77,21 +76,21 @@
     "@mdi/js": "^7.2.96",
     "@originjs/vite-plugin-content": "^1.0.3",
     "@types/dompurify": "^3.0.2",
-    "@types/jsdom": "^21.1.1",
-    "@types/lodash-es": "^4.17.8",
+    "@types/jsdom": "^21.1.2",
+    "@types/lodash-es": "^4.17.9",
     "@types/md5": "^2.3.2",
-    "@types/node": "^18.17.4",
-    "@types/semver": "^7.5.0",
-    "@types/sortablejs": "^1.15.1",
-    "@types/uuid": "^9.0.2",
+    "@types/node": "^18.17.15",
+    "@types/semver": "^7.5.1",
+    "@types/sortablejs": "^1.15.2",
+    "@types/uuid": "^9.0.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^1.3.6",
     "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.46.0",
+    "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
@@ -101,17 +100,17 @@
     "sass": "~1.32",
     "shx": "^0.3.4",
     "standard-version": "^9.5.0",
-    "typescript": "^5.1.6",
-    "unplugin-vue-components": "^0.25.1",
+    "typescript": "^5.2.2",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.9",
-    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-checker": "^0.6.2",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-plugin-pwa": "^0.16.4",
-    "vitest": "^0.34.1",
+    "vite-plugin-pwa": "^0.16.5",
+    "vitest": "^0.34.4",
     "vue-debounce-decorator": "^1.0.1",
     "vue-i18n-extract": "^2.0.7",
     "vue-template-compiler": "^2.7.14",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^1.8.10"
   },
   "_id": "fluidd@0.0.3",
   "bugs": {

package.json

@@ -55,16 +55,21 @@
       </app-setting>
 
       <v-divider />
-      <draggable
+
+      <app-draggable
         v-model="macros"
-        v-bind="dragOptions"
+        :options="{
+          animation: 200,
+          handle: '.handle',
+          group: `macro-settings-${category.name}`,
+          ghostClass: 'ghost'
+        }"
       >
         <section
           v-for="(macro, i) in macros"
           :key="macro.name"
         >
           <app-setting
-            :key="`macro-${macro.name}`"
             :accent-color="macro.color"
             :r-cols="2"
             @click="handleSettingsDialog(macro)"
@@ -101,10 +106,9 @@
 
           <v-divider
             v-if="i < macros.length - 1 && macros.length > 0"
-            :key="`divider-${macro.name}`"
           />
         </section>
-      </draggable>
+      </app-draggable>
     </v-card>
 
     <macro-settings-dialog
@@ -117,7 +121,6 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import draggable from 'vuedraggable'
 import MacroSettingsDialog from './MacroSettingsDialog.vue'
 import { Macro, MacroCategory } from '@/store/macros/types'
 import store from '@/store'
@@ -134,8 +137,7 @@ const routeGuard = (to: any) => {
 
 @Component({
   components: {
-    MacroSettingsDialog,
-    draggable
+    MacroSettingsDialog
   }
 })
 export default class MacroSettings extends Vue {
@@ -147,15 +149,6 @@ export default class MacroSettings extends Vue {
     macro: null
   }
 
-  get dragOptions () {
-    return {
-      animation: 200,
-      handle: '.handle',
-      group: `macro-settings-${this.category.name}`,
-      ghostClass: 'ghost'
-    }
-  }
-
   get macros () {
     const id = this.categoryId
     const macros = this.$store.getters['macros/getMacrosByCategory'](id)

src/components/settings/macros/MacroSettings.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, VModel, Vue, Watch } from 'vue-property-decorator'
+import Sortable from 'sortablejs'
+
+const instanceKey = Symbol('instanceKey')
+
+type TargetHtmlElement = HTMLElement & {
+  [instanceKey]: AppDraggable | null
+}
+
+const isTargetHtmlElement = (element: HTMLElement): element is TargetHtmlElement => instanceKey in element
+
+@Component({})
+export default class AppDraggable extends Vue {
+  @VModel({ type: Array, default: [] })
+    items!: unknown[]
+
+  @Prop({ type: Object })
+  readonly options?: Sortable.Options
+
+  @Prop({ type: String })
+  readonly target?: string
+
+  @Watch('options')
+  onOptions (value: Sortable.Options) {
+    if (this.sortable) {
+      for (const prop in value) {
+        const propAsOptionsKey = prop as keyof Sortable.Options
+
+        this.sortable.option(propAsOptionsKey, value[propAsOptionsKey])
+      }
+    }
+  }
+
+  @Watch('target')
+  onTarget () {
+    this.dettach()
+    this.attach()
+  }
+
+  sortable: Sortable | null = null
+
+  handleStart (event: Sortable.SortableEvent) {
+    this.$emit('start', event)
+  }
+
+  handleAdd (event: Sortable.SortableEvent) {
+    const { oldIndex, newIndex, from } = event
+
+    if (
+      oldIndex === undefined ||
+      newIndex === undefined ||
+      !isTargetHtmlElement(from) ||
+      from[instanceKey] === null
+    ) {
+      return
+    }
+
+    const fromInstance = from[instanceKey]
+
+    const items = [...this.items]
+
+    items.splice(newIndex, 0, fromInstance.items[oldIndex])
+
+    this.items = items
+
+    this.$emit('add', event)
+  }
+
+  handleRemove (event: Sortable.SortableEvent) {
+    const { oldIndex } = event
+
+    if (oldIndex === undefined) {
+      return
+    }
+
+    const items = [...this.items]
+
+    items.splice(oldIndex, 1)
+
+    this.items = items
+
+    this.$emit('remove', event)
+  }
+
+  handleUpdate (event: Sortable.SortableEvent) {
+    const { oldIndex, newIndex } = event
+
+    if (
+      oldIndex === undefined ||
+      newIndex === undefined
+    ) {
+      return
+    }
+
+    const items = [...this.items]
+
+    const movedItem = items.splice(oldIndex, 1)[0]
+    items.splice(newIndex, 0, movedItem)
+
+    this.items = items
+
+    this.$emit('update', event)
+  }
+
+  handleEnd (event: Sortable.SortableEvent) {
+    this.$emit('end', event)
+  }
+
+  attach () {
+    const targetElement = (
+      this.target &&
+      this.$el.querySelector<TargetHtmlElement>(this.target)
+    ) || this.$el as TargetHtmlElement
+
+    targetElement[instanceKey] = this
+
+    const options: Sortable.Options = {
+      ...this.options,
+      onStart: this.handleStart,
+      onAdd: this.handleAdd,
+      onRemove: this.handleRemove,
+      onUpdate: this.handleUpdate,
+      onEnd: this.handleEnd
+    }
+
+    this.sortable = Sortable.create(targetElement, options)
+  }
+
+  dettach () {
+    const targetElement = this.sortable?.el
+
+    if (targetElement && isTargetHtmlElement(targetElement)) {
+      targetElement[instanceKey] = null
+    }
+
+    this.sortable?.destroy()
+    this.sortable = null
+  }
+
+  mounted () {
+    this.attach()
+  }
+
+  unmounted () {
+    this.dettach()
+  }
+}
+</script>

src/components/ui/AppDraggable.vue

@@ -288,6 +288,7 @@ import { AppTableHeader } from '@/types'
 import FilesMixin from '@/mixins/files'
 
 import FileRowItem from './FileRowItem.vue'
+import { SupportedImageFormats, SupportedVideoFormats } from '@/globals'
 
 @Component({
   components: {
@@ -406,20 +407,15 @@ export default class FileSystemBrowser extends Mixins(FilesMixin) {
     )
 
     if (item.type === 'file') {
-      switch (item.extension) {
-        case 'bmp':
-        case 'gif':
-        case 'jpg':
-        case 'jpeg':
-        case 'png':
-        case 'tif':
-        case 'tiff':
-        case 'webp':
-          return readonly ? '$fileImageLock' : '$fileImage'
-        case 'zip':
-          return readonly ? '$fileZipLock' : '$fileZip'
-        default:
-          return readonly ? '$fileLock' : '$file'
+      if (item.extension === 'zip') {
+        return readonly ? '$fileZipLock' : '$fileZip'
+      } else if (
+        SupportedImageFormats.includes(`.${item.extension}`) ||
+            SupportedVideoFormats.includes(`.${item.extension}`)
+      ) {
+        return readonly ? '$fileImageLock' : '$fileImage'
+      } else {
+        return readonly ? '$fileLock' : '$file'
       }
     } else if (item.name === '..') {
       return '$folderUp'

src/components/widgets/filesystem/FileSystemBrowser.vue

@@ -229,10 +229,9 @@ export default class FileSystemContextMenu extends Mixins(StateMixin, FilesMixin
     return (
       !Array.isArray(this.file) &&
       this.file.type !== 'directory' &&
-      !this.rootProperties.readonly &&
       (
         this.file.permissions === undefined ||
-        this.file.permissions.includes('w')
+        this.file.permissions.includes('r')
       )
     )
   }