fix lint

karma.conf.cjs

@@ -108,7 +108,7 @@ module.exports = function (config) {
     },
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['ChromiumHeadlessWebGL' /*, 'FirefoxHeadlessTouch'*/],
+    browsers: ['ChromiumHeadlessWebGL', 'FirefoxHeadlessTouch'],
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits

package.json

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

src/assets/styles/tooltips.css

@@ -10,4 +10,5 @@
   border-radius: var(--border-radius-medium);
   white-space: nowrap;
   z-index: 999;
+  pointer-events: none;
 }

src/components/Common/TextField.vue

@@ -15,15 +15,27 @@
         :iconSize="20"
       />
     </div>
-    <input
-      type="text"
-      :placeholder="placeholder"
-      :class="{ error: errorMsg }"
-      :style="{ width: width }"
-      :value="modelValue"
-      :disabled="disabled"
-      @input="$emit('update:modelValue', $event.target.value)"
-    />
+    <div :class="['text-field-container', { disabled }]">
+      <input
+        type="text"
+        :placeholder="placeholder"
+        :class="{ error: errorMsg }"
+        :style="{ width: width }"
+        :value="modelValue"
+        :disabled="disabled"
+        @input="$emit('update:modelValue', $event.target.value)"
+      />
+      <button
+        v-if="showClearButton"
+        type="button"
+        :disabled="disabled"
+        class="clear-btn"
+        @click="$emit('update:modelValue', '')"
+      >
+        <i class="myicon myicon-clear" />
+      </button>
+    </div>
+
     <div v-show="errorMsg" class="text-field-error">{{ errorMsg }}</div>
   </div>
 </template>
@@ -42,22 +54,40 @@ export default {
     width: String,
     hint: String,
     maxHintWidth: { type: String, default: '149px' },
-    disabled: Boolean
+    disabled: Boolean,
+    showClearButton: Boolean
   },
   emits: ['update:modelValue']
 }
 </script>
 
 <style scoped>
-input {
+.text-field-container {
   background: var(--color-white);
   border: 1px solid var(--color-border);
-  color: var(--color-text-base);
   border-radius: var(--border-radius-medium-2);
   height: 36px;
   padding: 0 8px;
   font-size: 13px;
   box-sizing: border-box;
+  display: flex;
+  align-items: center;
+}
+
+.text-field-container.disabled {
+  background: var(--color-bg-light);
+}
+
+.text-field-container.error {
+  border-color: var(--color-text-error);
+}
+
+input {
+  background: inherit;
+  border: none;
+  color: var(--color-text-base);
+  height: 100%;
+  padding: 0;
   display: block;
 }
 
@@ -70,15 +100,10 @@ input:focus {
 }
 
 input:disabled {
-  background: var(--color-bg-light);
   color: var(--color-text-light-2);
   cursor: default;
 }
 
-input.error {
-  border-color: var(--color-text-error);
-}
-
 .text-field-label {
   font-size: 12px;
   color: var(--color-text-base);
@@ -121,4 +146,22 @@ input.error {
   padding: 6px;
   box-sizing: border-box;
 }
+
+.clear-btn {
+  background: transparent;
+  border: none;
+  padding: 0;
+  height: 20px;
+  width: 20px;
+  color: var(--color-border);
+  font-size: 20px;
+}
+
+.clear-btn i {
+  display: block;
+}
+
+.clear-btn:not(:disabled):hover {
+  color: var(--color-danger);
+}
 </style>

src/components/Graph/GraphSearchPanel.vue

@@ -14,6 +14,7 @@
         width="250px"
         placeholder="Search nodes..."
         :errorMsg="regExpIsValid ? '' : 'Invalid regular expression'"
+        showClearButton
         class="query-input"
         @keydown.enter.prevent="search"
         @update:model-value="onSearchInput"
@@ -199,6 +200,7 @@ export default {
   border-style: solid;
   border-color: var(--color-border-light);
   border-radius: 0 0 0 4px;
+  display: flex;
 }
 
 .graph-search-panel--search-controls {
@@ -213,7 +215,7 @@ export default {
 .close-search-panel :deep(i) {
   transform: scaleX(-1);
 }
-.query-input :deep(input) {
+.query-input :deep(.text-field-container) {
   height: 26px;
 }
 

src/tooltipMixin.js

@@ -3,7 +3,8 @@ export default {
     return {
       tooltipStyle: {
         visibility: 'hidden'
-      }
+      },
+      showTooltipTimeout: null
     }
   },
   computed: {
@@ -13,27 +14,30 @@ export default {
   },
   methods: {
     showTooltip(e, tooltipPosition) {
-      const position = tooltipPosition
-        ? tooltipPosition.split('-')
-        : ['top', 'right']
-      const offset = 12
+      this.showTooltipTimeout = setTimeout(() => {
+        const position = tooltipPosition
+          ? tooltipPosition.split('-')
+          : ['top', 'right']
+        const offset = 12
 
-      if (position[0] === 'top') {
-        this.tooltipStyle.top = e.clientY - offset + 'px'
-      } else {
-        this.tooltipStyle.top = e.clientY + offset + 'px'
-      }
+        if (position[0] === 'top') {
+          this.tooltipStyle.top = e.clientY - offset + 'px'
+        } else {
+          this.tooltipStyle.top = e.clientY + offset + 'px'
+        }
 
-      if (position[1] === 'right') {
-        this.tooltipStyle.left = e.clientX + offset + 'px'
-      } else {
-        this.tooltipStyle.left =
-          e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
-      }
+        if (position[1] === 'right') {
+          this.tooltipStyle.left = e.clientX + offset + 'px'
+        } else {
+          this.tooltipStyle.left =
+            e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
+        }
 
-      this.tooltipStyle.visibility = 'visible'
+        this.tooltipStyle.visibility = 'visible'
+      }, 500)
     },
     hideTooltip() {
+      this.showTooltipTimeout && clearTimeout(this.showTooltipTimeout)
       this.tooltipStyle.visibility = 'hidden'
     }
   }

tests/components/Common/TextField.spec.js

@@ -0,0 +1,99 @@
+import { expect } from 'chai'
+import { mount } from '@vue/test-utils'
+import TextField from '@/components/Common/TextField'
+
+describe('TextField.vue', () => {
+  it('renders the model value, placeholder, and configured width', () => {
+    const wrapper = mount(TextField, {
+      props: {
+        modelValue: 'initial value',
+        placeholder: 'Enter a value',
+        width: '240px'
+      }
+    })
+    const input = wrapper.find('input')
+
+    expect(input.element.value).to.equal('initial value')
+    expect(input.attributes('placeholder')).to.equal('Enter a value')
+    expect(input.element.style.width).to.equal('240px')
+    expect(wrapper.find('.text-field-label').exists()).to.equal(false)
+    expect(wrapper.find('.clear-btn').exists()).to.equal(false)
+  })
+
+  it('emits update:modelValue when the input changes', async () => {
+    const wrapper = mount(TextField, {
+      props: { modelValue: 'before' }
+    })
+
+    await wrapper.find('input').setValue('after')
+
+    expect(wrapper.emitted('update:modelValue')).to.eql([['after']])
+  })
+
+  it('renders label and hint with the configured tooltip width', () => {
+    const wrapper = mount(TextField, {
+      props: {
+        label: 'Name',
+        hint: 'A helpful hint',
+        maxHintWidth: '200px'
+      }
+    })
+
+    expect(wrapper.find('.text-field-label').text()).to.include('Name')
+    expect(wrapper.find('.icon-tooltip').text()).to.equal('A helpful hint')
+    expect(wrapper.find('.icon-tooltip').element.style.maxWidth).to.equal(
+      '200px'
+    )
+  })
+
+  it('shows the error message and applies error classes', () => {
+    const wrapper = mount(TextField, {
+      props: {
+        label: 'Name',
+        errorMsg: 'A value is required'
+      }
+    })
+
+    expect(wrapper.find('.text-field-label').classes()).to.include('error')
+    expect(wrapper.find('input').classes()).to.include('error')
+    expect(wrapper.find('.text-field-error').isVisible()).to.equal(true)
+    expect(wrapper.find('.text-field-error').text()).to.equal(
+      'A value is required'
+    )
+  })
+
+  it('hides the error message when there is no error', () => {
+    const wrapper = mount(TextField)
+
+    expect(wrapper.find('.text-field-error').element.style.display).to.equal(
+      'none'
+    )
+  })
+
+  it('emits an empty value when the clear button is clicked', async () => {
+    const wrapper = mount(TextField, {
+      props: { modelValue: 'to clear', showClearButton: true }
+    })
+
+    await wrapper.find('.clear-btn').trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).to.eql([['']])
+  })
+
+  it('disables the input and clear button', () => {
+    const wrapper = mount(TextField, {
+      props: {
+        disabled: true,
+        label: 'Name',
+        showClearButton: true
+      }
+    })
+
+    expect(wrapper.find('input').element.disabled).to.equal(true)
+    expect(wrapper.find('.clear-btn').element.disabled).to.equal(true)
+    expect(wrapper.find('.text-field-container').classes()).to.include(
+      'disabled'
+    )
+    expect(wrapper.find('.text-field-label').classes()).to.include('disabled')
+  })
+})

tests/tooltipMixin.spec.js

@@ -1,6 +1,7 @@
 import { expect } from 'chai'
 import { mount } from '@vue/test-utils'
 import tooltipMixin from '@/tooltipMixin'
+import sinon from 'sinon'
 
 describe('tooltipMixin.js', () => {
   let container
@@ -23,6 +24,7 @@ describe('tooltipMixin.js', () => {
   })
 
   it('tooltipStyle is correct when showTooltip: top-right', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template:
         '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
@@ -38,15 +40,18 @@ describe('tooltipMixin.js', () => {
         clientY: 20
       })
     )
+    await clock.tick(500)
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
       top: '8px',
       left: '22px'
     })
     expect(wrapper.find('div').isVisible()).to.equal(true)
+    clock.restore()
   })
 
   it('tooltipStyle is correct when showTooltip: top-left', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template:
         '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
@@ -61,6 +66,7 @@ describe('tooltipMixin.js', () => {
       }),
       'top-left'
     )
+    await clock.tick(500)
 
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
@@ -69,9 +75,11 @@ describe('tooltipMixin.js', () => {
     })
 
     expect(wrapper.find('div').isVisible()).to.equal(true)
+    clock.restore()
   })
 
   it('tooltipStyle is correct when showTooltip: bottom-right', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template:
         '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
@@ -86,15 +94,18 @@ describe('tooltipMixin.js', () => {
       }),
       'bottom-right'
     )
+    await clock.tick(500)
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
       top: '32px',
       left: '22px'
     })
     expect(wrapper.find('div').isVisible()).to.equal(true)
+    clock.restore()
   })
 
   it('tooltipStyle is correct when showTooltip: bottom-left', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template:
         '<div :style="{...tooltipStyle, width: \'100px\'}" ref="tooltip"></div>',
@@ -109,6 +120,7 @@ describe('tooltipMixin.js', () => {
       }),
       'bottom-left'
     )
+    await clock.tick(500)
 
     expect(wrapper.vm.tooltipStyle).to.eql({
       visibility: 'visible',
@@ -116,9 +128,11 @@ describe('tooltipMixin.js', () => {
       left: '100px'
     })
     expect(wrapper.find('div').isVisible()).to.equal(true)
+    clock.restore()
   })
 
   it('tooltip is not visible after hideTooltip', async () => {
+    const clock = sinon.useFakeTimers()
     const component = {
       template: '<div :style="tooltipStyle"></div>',
       mixins: [tooltipMixin]
@@ -131,6 +145,8 @@ describe('tooltipMixin.js', () => {
       })
     )
     await wrapper.vm.hideTooltip()
+    await clock.tick(500)
     expect(wrapper.find('div').isVisible()).to.equal(false)
+    clock.restore()
   })
 })