0.31.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqliteviz",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "license": "Apache-2.0",
   "private": true,
   "type": "module",

src/components/AppDiagnosticInfo.vue

@@ -11,7 +11,7 @@
         <IconButton
           icon="myicon myicon-close"
           variant="secondary"
-          :icon-size="14"
+          :iconSize="14"
           @click="$modal.hide('app-info')"
         />
       </div>

src/components/Common/IconButton.vue

@@ -59,16 +59,16 @@ export default {
     }
   },
   emits: ['click'],
+  computed: {
+    width() {
+      return this.iconSize + 8
+    }
+  },
   methods: {
     onClick() {
       this.hideTooltip()
       this.$emit('click')
     }
-  },
-  computed: {
-    width() {
-      return this.iconSize + 8
-    }
   }
 }
 </script>

src/components/Common/LoadingDialog.vue

@@ -12,7 +12,7 @@
       <IconButton
         icon="myicon myicon-close"
         variant="secondary"
-        :icon-size="14"
+        :iconSize="14"
         :disabled="loading"
         @click="cancel"
       />

src/components/Common/TextField.vue

@@ -11,8 +11,8 @@
         variant="secondary"
         class="hint"
         :tooltip="hint"
-        :max-tooltip-width="maxHintWidth"
-        :icon-size="20"
+        :maxTooltipWidth="maxHintWidth"
+        :iconSize="20"
       />
     </div>
     <input

src/components/CsvJsonImport/DelimiterSelector/index.vue

@@ -22,8 +22,8 @@
         <button
           type="button"
           :disabled="disabled"
-          @click="clear"
           class="clear-btn"
+          @click="clear"
         >
           <i class="myicon myicon-clear" />
         </button>

src/components/CsvJsonImport/index.vue

@@ -11,7 +11,7 @@
       <IconButton
         icon="myicon myicon-close"
         variant="secondary"
-        :icon-size="14"
+        :iconSize="14"
         :disabled="disableDialog"
         data-test="import-close-btn"
         @click="cancelImport"

src/components/Graph/GraphSearchPanel.vue

@@ -10,13 +10,13 @@
     />
     <div v-show="panelOpen" class="graph-search-panel--search-controls">
       <TextField
+        v-model.trim="searchQuery"
         width="250px"
         placeholder="Search nodes..."
-        v-model.trim="searchQuery"
         :errorMsg="regExpIsValid ? '' : 'Invalid regular expression'"
         class="query-input"
         @keydown.enter.prevent="search"
-        @update:modelValue="onSearchInput"
+        @update:model-value="onSearchInput"
       />
       <IconButton
         icon="myicon myicon-match-case"

src/components/MainMenu.vue

@@ -39,7 +39,7 @@
         <IconButton
           icon="myicon myicon-close"
           variant="secondary"
-          :icon-size="14"
+          :iconSize="14"
           @click="cancelSave"
         />
       </div>
@@ -75,7 +75,7 @@
         <IconButton
           icon="myicon myicon-close"
           variant="secondary"
-          :icon-size="14"
+          :iconSize="14"
           @click="cancelSave"
         />
       </div>

src/components/RunResult/Record/RowNavigator.vue

@@ -2,7 +2,7 @@
   <div class="record-navigator">
     <icon-button
       icon="myicon myicon-edge-arrow"
-      icon-color="var(--color-text-base)"
+      iconColor="var(--color-text-base)"
       :disabled="modelValue === 0"
       tooltip="First row"
       tooltipPosition="top-left"
@@ -11,7 +11,7 @@
     />
     <icon-button
       icon="myicon myicon-arrow"
-      icon-color="var(--color-text-base)"
+      iconColor="var(--color-text-base)"
       :disabled="modelValue === 0"
       tooltip="Previous row"
       tooltipPosition="top-left"
@@ -20,7 +20,7 @@
     />
     <icon-button
       icon="myicon myicon-arrow"
-      icon-color="var(--color-text-base)"
+      iconColor="var(--color-text-base)"
       :disabled="modelValue === total - 1"
       tooltip="Next row"
       tooltipPosition="top-left"
@@ -29,7 +29,7 @@
     />
     <icon-button
       icon="myicon myicon-edge-arrow"
-      icon-color="var(--color-text-base)"
+      iconColor="var(--color-text-base)"
       :disabled="modelValue === total - 1"
       tooltip="Last row"
       tooltipPosition="top-left"

src/components/Tabs.vue

@@ -16,7 +16,7 @@
         <IconButton
           icon="myicon myicon-close"
           variant="secondary"
-          :icon-size="10"
+          :iconSize="10"
           class="close-icon"
           @click="beforeCloseTab(tab)"
         />
@@ -42,7 +42,7 @@
         <IconButton
           icon="myicon myicon-close"
           variant="secondary"
-          :icon-size="14"
+          :iconSize="14"
           @click="$modal.hide('close-warn')"
         />
       </div>

src/views/Inquiries.vue

@@ -163,7 +163,7 @@
         <IconButton
           icon="myicon myicon-close"
           variant="secondary"
-          :icon-size="14"
+          :iconSize="14"
           @click="$modal.hide('rename')"
         />
       </div>
@@ -188,7 +188,7 @@
         <IconButton
           icon="myicon myicon-close"
           variant="secondary"
-          :icon-size="14"
+          :iconSize="14"
           @click="$modal.hide('delete')"
         />
       </div>