optimize subscription model bug fixes

src/vueLib/buttons/DataTypes.vue

@@ -0,0 +1,32 @@
+<template>
+  <q-card>
+    <div class="text-primary q-ma-md">Datatypes *</div>
+    <div>
+      <div class="row q-gutter-sm q-ml-sm">
+        <q-card-section class="items-between">
+          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="None" hint="none">
+          </RadioButton>
+          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="String" hint="Text">
+          </RadioButton>
+          <RadioButton class="q-ma-xs" v-model:opt="datatype" text="Bool" hint="On / Off">
+          </RadioButton>
+        </q-card-section>
+        <RadioButton v-model:opt="datatype" text="Uint8" hint="0 - 255"> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Uint16" hint="0 - 65535"> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Uint32" hint="0 - 429496..."> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Int8" hint="-128 - 127"> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Int16" hint="-32768 - 3..."> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Int32" hint="-21474836..."> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="Int32" hint="-2^63 - (2^...)"> </RadioButton>
+        <RadioButton v-model:opt="datatype" text="double" hint="1.7E 1/- 3..."> </RadioButton>
+      </div>
+    </div>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import RadioButton from './RadioButton.vue';
+import { ref } from 'vue';
+
+const datatype = ref('none');
+</script>

src/vueLib/buttons/RadioButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <q-btn style="border-radius: 8px" no-caps
+    ><q-radio v-model="opt" :val="props.text"></q-radio>
+    <div class="column items-start q-mx-md">
+      <div class="text-body1 text-black">{{ props.text }}</div>
+      <div class="text-caption text-grey">{{ props.hint }}</div>
+    </div>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from 'vue';
+
+const opt = defineModel('opt');
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  hint: {
+    type: String,
+  },
+});
+
+const localOption = ref('');
+
+const emit = defineEmits(['update:option']);
+
+watch(localOption, (val) => emit('update:option', val));
+</script>

src/vueLib/dialog/DialogFrame.vue

@@ -0,0 +1,65 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    :maximized="minMaxState"
+    :full-width="minMaxState"
+    :no-focus="!minMaxState"
+    :no-refocus="!minMaxState"
+    :seamless="!minMaxState"
+  >
+    <q-card class="layout" :style="cardStyle" v-touch-pan.mouse.prevent.stop="handlePan">
+      <div class="row justify-end q-mx-sm q-mt-xs">
+        <q-btn dense flat :icon="minMaxIcon" size="md" @click="minMax()"></q-btn>
+        <q-btn dense flat icon="close" size="md" v-close-popup></q-btn>
+      </div>
+      <q-separator color="black" class="q-my-none" />
+      <slot />
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const dialogRef = ref();
+const open = () => dialogRef.value?.show();
+
+const minMaxIcon = ref('fullscreen');
+const minMaxState = ref(false);
+function minMax() {
+  if (minMaxState.value) {
+    minMaxIcon.value = 'fullscreen';
+  } else {
+    minMaxIcon.value = 'fullscreen_exit';
+  }
+  minMaxState.value = !minMaxState.value;
+}
+
+const props = defineProps({
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+const position = ref({ x: 0, y: 0 });
+
+// This makes the dialog draggable
+const handlePan = (details: { delta: { x: number; y: number } }) => {
+  position.value.x += details.delta.x;
+  position.value.y += details.delta.y;
+};
+
+const cardStyle = computed(() => ({
+  width: props.width,
+  transform: `translate(${position.value.x}px, ${position.value.y}px)`,
+}));
+
+defineExpose({ open });
+</script>
+
+<style scoped>
+.layout {
+  border-radius: 10px;
+}
+</style>