chore(webui): Migrate to Quasar 2.x and Vue.js 3.x

webui/src/components/_commons/BooleanState.vue

@@ -1,18 +1,36 @@
 <template>
   <div class="block-right-text">
-    <q-avatar :color="value ? 'positive' : 'negative'" text-color="white">
-      <q-icon v-if="value" name="eva-toggle-right" />
-      <q-icon v-if="!value" name="eva-toggle-left" />
+    <q-avatar
+      :color="value ? 'positive' : 'negative'"
+      text-color="white"
+    >
+      <q-icon
+        v-if="value"
+        name="eva-toggle-right"
+      />
+      <q-icon
+        v-if="!value"
+        name="eva-toggle-left"
+      />
     </q-avatar>
-    <div v-bind:class="['block-right-text-label', `block-right-text-label-${!!value}`]">{{value ? 'True' : 'False'}}</div>
+    <div :class="['block-right-text-label', `block-right-text-label-${!!value}`]">
+      {{ value ? 'True' : 'False' }}
+    </div>
   </div>
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'BooleanState',
-  props: ['value']
-}
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    }
+  }
+})
 </script>
 
 <style scoped lang="scss">