From fec8fa26954b2d24b2428e9524ee2ee1227fe7ec Mon Sep 17 00:00:00 2001
From: Your Name <josip.jureta@gmail.com>
Date: Tue, 21 Jul 2026 21:05:02 -0400
Subject: [PATCH] feat(core): port DeviceSelect and DeviceQueue to Vue 3 +
 element-plus

@PropSync -> defineModel, element-ui popover -> element-plus
(v-model:visible), slot="reference" -> #reference, and webpack tilde
image paths -> ESM imports.
---
 n-link-core/components/DeviceQueue.vue  | 95 +++++++++++++------------
 n-link-core/components/DeviceSelect.vue | 84 ++++++++++++----------
 2 files changed, 95 insertions(+), 84 deletions(-)

diff --git a/n-link-core/components/DeviceQueue.vue b/n-link-core/components/DeviceQueue.vue
index d6f00ad..98209e5 100644
--- a/n-link-core/components/DeviceQueue.vue
+++ b/n-link-core/components/DeviceQueue.vue
@@ -20,25 +20,28 @@
           </div>
           <div class="ml-2 flex-shrink-0">
             <button class="focus:outline-none" :disabled="i===0" :class="i===0 && 'cursor-not-allowed'"
-                    @click="device.queue.splice(i, 1)">
-              <img src="~feather-icons/dist/icons/x-circle.svg" :class="i===0 && 'opacity-25'"/>
+                    @click="device.queue?.splice(i, 1)">
+              <img :src="xCircle" :class="i===0 && 'opacity-25'"/>
             </button>
           </div>
         </div>
       </div>
-      <svg slot="reference" viewBox="-1 -1 2 2" class="circle focus:outline-none">
-        <circle r="1" class="bg"/>
-        <path class="fg" :d="pathData"/>
-      </svg>
+      <template #reference>
+        <svg viewBox="-1 -1 2 2" class="circle focus:outline-none">
+          <circle r="1" class="bg"/>
+          <path class="fg" :d="pathData"/>
+        </svg>
+      </template>
     </el-popover>
   </div>
 </template>
 
-<script lang="ts">
-import {Component, Prop, Vue} from 'vue-property-decorator';
-import ElPopover from 'element-ui/packages/popover/src/main.vue';
-import 'element-ui/lib/theme-chalk/popover.css';
-import type {Device} from "./devices";
+<script setup lang="ts">
+import {computed} from 'vue';
+import {ElPopover} from 'element-plus';
+import 'element-plus/es/components/popover/style/css';
+import type {Device} from './devices';
+import xCircle from 'feather-icons/dist/icons/x-circle.svg';
 
 function getCoordinatesForPercent(percent: number) {
   const x = Math.cos(2 * Math.PI * percent);
@@ -51,45 +54,45 @@ function trimPath(path: string) {
   return path.split(/[\\/]/).pop() as string;
 }
 
-@Component({components: {ElPopover}})
-export default class FileView extends Vue {
-  @Prop({type: Object, required: true}) private device!: Device;
+const props = defineProps<{
+  device: Device;
+}>();
 
-  get pathData() {
-    const {progress, queue} = this.device;
-    const length = (queue?.length || 0);
-    let percent = progress ? (1 - progress.remaining / progress.total) : 1 / (length);
-    if (!Number.isFinite(percent)) percent = 0;
+const pathData = computed(() => {
+  const {progress, queue} = props.device;
+  const length = (queue?.length || 0);
+  let percent = progress ? (1 - progress.remaining / progress.total) : 1 / (length);
+  if (!Number.isFinite(percent)) percent = 0;
 
-    const [startX, startY] = getCoordinatesForPercent(0);
-    const [endX, endY] = getCoordinatesForPercent(percent);
+  const [startX, startY] = getCoordinatesForPercent(0);
+  const [endX, endY] = getCoordinatesForPercent(percent);
 
-    const largeArcFlag = percent > .5 ? 1 : 0;
-    return [
-      `M ${startX} ${startY}`,
-      `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`,
-      `L 0 0`,
-    ].join(' ');
-  }
+  const largeArcFlag = percent > .5 ? 1 : 0;
+  return [
+    `M ${startX} ${startY}`,
+    `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+    `L 0 0`,
+  ].join(' ');
+});
 
-  get queue() {
-    if (!this.device.queue) return [];
-    return this.device.queue.map(item => {
-      let desc = '';
-      if (item.action === 'download') desc = `Download ${trimPath(item.path[0])}`;
-      else if (item.action === 'upload') desc = `Upload ${'src' in item ? trimPath(item.src) : item.file.name}`;
-      else if (item.action === 'uploadOs') desc = 'Upload OS';
-      else if (item.action === 'deleteFile') desc = `Delete file ${item.path}`;
-      else if (item.action === 'deleteDir') desc = `Delete directory ${item.path}`;
-      else if (item.action === 'createDir') desc = `Create directory ${item.path}`;
-      else if (item.action === 'copy') desc = `Copy file ${item.src} to ${item.dest}`;
-      else if (item.action === 'move') desc = `Move file ${item.src} to ${item.dest}`;
-      return {
-        desc,
-      };
-    });
-  }
-}
+const queue = computed(() => {
+  if (!props.device.queue) return [];
+  return props.device.queue.map(item => {
+    let desc = '';
+    if (item.action === 'download') desc = `Download ${trimPath(item.path[0])}`;
+    else if (item.action === 'upload') desc = `Upload ${'src' in item ? trimPath(item.src) : item.file.name}`;
+    else if (item.action === 'uploadOs') desc = 'Upload OS';
+    else if (item.action === 'deleteFile') desc = `Delete file ${item.path}`;
+    else if (item.action === 'deleteDir') desc = `Delete directory ${item.path}`;
+    else if (item.action === 'createDir') desc = `Create directory ${item.path}`;
+    else if (item.action === 'copy') desc = `Copy file ${item.src} to ${item.dest}`;
+    else if (item.action === 'move') desc = `Move file ${item.src} to ${item.dest}`;
+    return {
+      id: item.id,
+      desc,
+    };
+  });
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/n-link-core/components/DeviceSelect.vue b/n-link-core/components/DeviceSelect.vue
index a4d5fe9..46799b4 100644
--- a/n-link-core/components/DeviceSelect.vue
+++ b/n-link-core/components/DeviceSelect.vue
@@ -2,31 +2,33 @@
   <div class="header border-b px-2 py-2 flex w-full">
     <button @click="$devices.enumerate()" class="flex-shrink-0 mr-2 focus:outline-none"
             :class="$devices.enumerating && 'cursor-not-allowed opacity-25'" :disabled="$devices.enumerating">
-      <img src="~feather-icons/dist/icons/refresh-cw.svg" class="w-5"/>
+      <img :src="refreshCw" class="w-5"/>
       <div v-if="scanHint && Object.keys($devices.devices).length === 0" class="p-4 refresh-popup">
         Click to connect a device
       </div>
     </button>
-    <el-popover width="239" :visible-arrow="false" popper-class="focus:outline-none dev-select-pop" v-model="active"
+    <el-popover width="239" :show-arrow="false" popper-class="focus:outline-none dev-select-pop" v-model:visible="active"
                 class="w-full overflow-hidden">
-      <div slot="reference" class="relative w-full focus:outline-none">
-        <div
-            class="block w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-3/2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline h-8 truncate">
-          <span v-if="selectedCalculator">
-            <small class="tabular-nums">{{ selectedCalculator }}</small>
-            <span v-if="calc && calc.info"> {{ calc.info.name }}</span>
-            <span v-else> {{ calc.name }}</span>
-          </span>
-          <span v-else class="text-gray-700 text-sm">
-            Select a device...
-          </span>
+      <template #reference>
+        <div class="relative w-full focus:outline-none">
+          <div
+              class="block w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-3/2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline h-8 truncate">
+            <span v-if="selectedCalculator">
+              <small class="tabular-nums">{{ selectedCalculator }}</small>
+              <span v-if="calc && calc.info"> {{ calc.info.name }}</span>
+              <span v-else> {{ calc!.name }}</span>
+            </span>
+            <span v-else class="text-gray-700 text-sm">
+              Select a device...
+            </span>
+          </div>
+          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+              <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
+            </svg>
+          </div>
         </div>
-        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
-          </svg>
-        </div>
-      </div>
+      </template>
       <ul>
         <li v-for="(device, id) in $devices.devices" :key="id"
             class="p-2 hover:bg-blue-500 hover:text-white w-full cursor-pointer" @click="select(id)">
@@ -42,30 +44,36 @@
   </div>
 </template>
 
-<script lang="ts">
-import {Component, Prop, PropSync, Vue} from 'vue-property-decorator';
-import ElPopover from 'element-ui/packages/popover/src/main.vue';
-import 'element-ui/lib/theme-chalk/popover.css';
+<script setup lang="ts">
+import {computed, inject, ref} from 'vue';
+import {ElPopover} from 'element-plus';
+import 'element-plus/es/components/popover/style/css';
+import {DEVICES_KEY, type GenericDevices} from './devices';
+import refreshCw from 'feather-icons/dist/icons/refresh-cw.svg';
 
-@Component({components: {ElPopover}})
-export default class DeviceSelect extends Vue {
-  @PropSync('selected', {type: [String]}) selectedCalculator!: string | null;
-  @Prop({type: Boolean, default: false}) scanHint!: boolean;
-  active = false;
+withDefaults(defineProps<{
+  scanHint?: boolean;
+}>(), {
+  scanHint: false,
+});
 
-  select(dev: string) {
-    this.selectedCalculator = dev;
-    this.active = false;
-  }
+const selectedCalculator = defineModel<string | null>('selected');
 
-  get calc() {
-    return this.selectedCalculator && this.$devices.devices[this.selectedCalculator];
-  }
+const devices = inject(DEVICES_KEY) as GenericDevices;
 
-  get anyCalcs() {
-    return !!Object.keys(this.$devices.devices).length;
-  }
+const active = ref(false);
+
+function select(dev: string) {
+  selectedCalculator.value = dev;
+  active.value = false;
 }
+
+const calc = computed(() => {
+  const id = selectedCalculator.value;
+  return id ? devices.devices[id] : undefined;
+});
+
+const anyCalcs = computed(() => !!Object.keys(devices.devices).length);
 </script>
 
 <style scoped lang="scss">