feat: add responsive component

package.json

@@ -40,9 +40,11 @@
         "echarts": "^5.2.2",
         "echarts-gl": "^2.0.8",
         "js-sha256": "^0.9.0",
+        "lodash.throttle": "^4.1.1",
         "overlayscrollbars": "^1.13.1",
         "overlayscrollbars-vue": "^0.2.2",
         "regenerator-runtime": "^0.13.9",
+        "resize-observer-polyfill": "^1.5.1",
         "semver": "^7.3.5",
         "uuid": "^8.3.2",
         "vue": "^2.6.14",
@@ -61,6 +63,7 @@
     "devDependencies": {
         "@intlify/vite-plugin-vue-i18n": "^2.5.0",
         "@mdi/js": "^6.5.95",
+        "@types/lodash.throttle": "^4.1.6",
         "@types/semver": "^7.3.8",
         "@types/uuid": "^8.3.1",
         "@typescript-eslint/eslint-plugin": "^5.11.0",

src/components/mixins/responsive.ts

@@ -0,0 +1,48 @@
+import Component from 'vue-class-component'
+import BaseMixin from './base'
+import { Prop } from 'vue-property-decorator'
+import throttle from 'lodash.throttle'
+
+export type ResponsiveElement = {
+    is: {
+        [key: string]: boolean
+    }
+}
+
+@Component
+export default class ResponsiveMixin extends BaseMixin {
+    @Prop() protected declare breakpoints: {
+        [key: string]: (el: DOMRect) => boolean
+    }
+
+    observer?: ResizeObserver
+
+    el: ResponsiveElement = {
+        is: {},
+    }
+
+    mounted() {
+        if (this.breakpoints) {
+            this.$nextTick(() => {
+                this.observer = new ResizeObserver(throttle(this.onResize, 50))
+                if (this.$el instanceof Element) {
+                    this.observer.observe(this.$el)
+                }
+            })
+        }
+    }
+
+    beforeDestroy() {
+        if (this.$el instanceof Element) {
+            this.observer?.unobserve(this.$el)
+        }
+    }
+
+    private onResize(entries: ResizeObserverEntry[]) {
+        const cr = entries[0].contentRect
+        const conds = this.breakpoints
+        for (const breakpoint in conds) {
+            this.$set(this.el.is, breakpoint, conds[breakpoint](cr))
+        }
+    }
+}

src/components/panels/GcodefilesPanel.vue

@@ -561,6 +561,7 @@ import {
     mdiPencil,
     mdiDelete,
     mdiCloseThick,
+    mdiClose,
 } from '@mdi/js'
 
 interface draggingFile {
@@ -609,6 +610,7 @@ export default class GcodefilesPanel extends Mixins(BaseMixin) {
     mdiPlay = mdiPlay
     mdiPlaylistPlus = mdiPlaylistPlus
     mdiFire = mdiFire
+    mdiClose = mdiClose
     mdiVideo3d = mdiVideo3d
     mdiCloudDownload = mdiCloudDownload
     mdiRenameBox = mdiRenameBox

src/components/ui/Responsive.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <div v-if="!noHide && !init" style="visibility: hidden">
+            <slot :el="el"></slot>
+        </div>
+
+        <slot :el="el"></slot>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import ResponsiveMixin from '@/components/mixins/responsive'
+
+@Component
+export default class Responsive extends Mixins(ResponsiveMixin) {
+    @Prop({ default: false }) protected declare noHide: boolean
+
+    init = false
+
+    mounted() {
+        this.init = true
+    }
+}
+</script>

src/directives/responsive-class.ts

@@ -0,0 +1,16 @@
+import throttle from 'lodash.throttle'
+import Vue from 'vue'
+
+Vue.directive('responsive-class', {
+    inserted(el, conds) {
+        const handleResize = throttle((entries: ResizeObserverEntry[]) => {
+            const cr = entries[0].contentRect
+            for (const breakpoint in conds.value) {
+                el.classList.toggle(breakpoint, conds.value[breakpoint](cr))
+            }
+        }, 50)
+
+        const observer = new ResizeObserver(handleResize)
+        observer.observe(el)
+    },
+})

src/main.ts

@@ -1,10 +1,10 @@
 import 'regenerator-runtime' // async polyfill used by the gcodeviewer
+import 'resize-observer-polyfill' // polyfill needed by the responsive class detection
 
 import Vue from 'vue'
 import App from '@/App.vue'
 import vuetify from '@/plugins/vuetify'
 import i18n from '@/plugins/i18n'
-import './plugins/longpress'
 import store from '@/store'
 import router from '@/plugins/router'
 
@@ -50,6 +50,11 @@ Vue.use(OverlayScrollbarsPlugin, {
     },
 })
 
+// Directives
+
+import './directives/longpress'
+import './directives/responsive-class'
+
 // Echarts
 import ECharts from 'vue-echarts'
 import { use } from 'echarts/core'

tsconfig.json

@@ -11,6 +11,7 @@
         "allowSyntheticDefaultImports": true,
         "experimentalDecorators": true,
         "sourceMap": true,
+        "skipLibCheck": true,
         "baseUrl": ".",
         "types": [
             "cypress",