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,60 @@
+import Component from 'vue-class-component'
+import BaseMixin from './base'
+import { Prop } from 'vue-property-decorator'
+import throttle from 'lodash.throttle'
+
+export type ResponsiveElement = {
+    width: number
+    height: number
+    is: {
+        [key: string]: boolean
+    }
+}
+
+@Component
+export default class ResponsiveMixin extends BaseMixin {
+    @Prop() protected declare breakpoints: {
+        [key: string]: (el: ResponsiveElement) => boolean
+    }
+
+    observer?: ResizeObserver
+
+    el: ResponsiveElement = {
+        width: 0,
+        height: 0,
+        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]({
+                    ...this.el,
+                    width: cr.width,
+                    height: cr.height,
+                })
+            )
+        }
+    }
+}

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>