@dataloop-ai/components 0.19.152 → 0.19.154

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.eslintrc.js CHANGED
@@ -8,7 +8,8 @@ module.exports = {
8
8
  'plugin:@typescript-eslint/recommended',
9
9
  'plugin:vue/recommended',
10
10
  '@vue/typescript',
11
- 'plugin:storybook/recommended'
11
+ 'plugin:storybook/recommended',
12
+ 'prettier'
12
13
  ],
13
14
  plugins: ['eslint-plugin-member-order'],
14
15
  rules: {
package/.prettierrc.json CHANGED
@@ -3,5 +3,6 @@
3
3
  "tabWidth": 4,
4
4
  "semi": false,
5
5
  "singleQuote": true,
6
- "endOfLine": "auto"
6
+ "endOfLine": "auto",
7
+ "eslintIntegration": true
7
8
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dataloop-ai/components",
3
- "version": "0.19.152",
3
+ "version": "0.19.154",
4
4
  "exports": {
5
5
  ".": "./index.ts",
6
6
  "./models": "./models.ts",
@@ -187,7 +187,19 @@ export default defineComponent({
187
187
  active: { type: Boolean, default: false, required: false },
188
188
  styles: { type: [Object, String], default: null },
189
189
  shaded: { type: Boolean, default: false },
190
- outlined: Boolean
190
+ outlined: Boolean,
191
+ /**
192
+ * Overwrite default background color on hover
193
+ */
194
+ hoverBgColor: { type: String, default: null },
195
+ /**
196
+ * Overwrite default border color on hover
197
+ */
198
+ hoverBorderColor: { type: String, default: null },
199
+ /**
200
+ * Overwrite default text color on hover
201
+ */
202
+ hoverTextColor: { type: String, default: null }
191
203
  },
192
204
  emits: ['click', 'mousedown', 'dblclick'],
193
205
  setup(props) {
@@ -238,13 +250,16 @@ export default defineComponent({
238
250
  })
239
251
  }
240
252
  if (this.mouseOver) {
241
- return setColorOnHover({
242
- disabled: this.disabled,
243
- outlined: this.outlined,
244
- shaded: this.shaded,
245
- flat: this.flat,
246
- color: this.iconColor ?? this.textColor
247
- })
253
+ return (
254
+ this.hoverTextColor ??
255
+ setColorOnHover({
256
+ disabled: this.disabled,
257
+ outlined: this.outlined,
258
+ shaded: this.shaded,
259
+ flat: this.flat,
260
+ color: this.iconColor ?? this.textColor
261
+ })
262
+ )
248
263
  }
249
264
 
250
265
  if (this.iconColor) {
@@ -318,10 +333,12 @@ export default defineComponent({
318
333
  '--dl-button-bg': this.colorsObject.ACTIVE.BACKGROUND,
319
334
  '--dl-button-border': this.colorsObject.ACTIVE.BORDER,
320
335
  '--dl-button-text-color-hover':
321
- this.colorsObject.HOVER.TEXT,
336
+ this.hoverTextColor ?? this.colorsObject.HOVER.TEXT,
322
337
  '--dl-button-bg-hover':
338
+ this.hoverBgColor ??
323
339
  this.colorsObject.HOVER.BACKGROUND,
324
340
  '--dl-button-border-hover':
341
+ this.hoverBorderColor ??
325
342
  this.colorsObject.HOVER.BORDER,
326
343
  '--dl-button-text-color-pressed':
327
344
  this.colorsObject.PRESSED.TEXT,
@@ -356,27 +373,33 @@ export default defineComponent({
356
373
  color: this.color,
357
374
  outlined: this.outlined
358
375
  }),
359
- '--dl-button-text-color-hover': setColorOnHover({
360
- disabled: this.disabled,
361
- outlined: this.outlined,
362
- shaded: this.shaded,
363
- flat: this.flat,
364
- color: this.textColor
365
- }),
366
- '--dl-button-border-hover': setBorderOnHover({
367
- disabled: this.disabled,
368
- flat: this.flat,
369
- shaded: this.shaded,
370
- color: this.color
371
- }),
372
- '--dl-button-bg-hover': setBgOnHover({
373
- disabled: this.disabled,
374
- shaded: this.shaded,
375
- outlined: this.outlined,
376
- flat: this.flat,
377
- filled: this.filled,
378
- color: this.color
379
- }),
376
+ '--dl-button-text-color-hover':
377
+ this.hoverTextColor ??
378
+ setColorOnHover({
379
+ disabled: this.disabled,
380
+ outlined: this.outlined,
381
+ shaded: this.shaded,
382
+ flat: this.flat,
383
+ color: this.textColor
384
+ }),
385
+ '--dl-button-border-hover':
386
+ this.hoverBorderColor ??
387
+ setBorderOnHover({
388
+ disabled: this.disabled,
389
+ flat: this.flat,
390
+ shaded: this.shaded,
391
+ color: this.color
392
+ }),
393
+ '--dl-button-bg-hover':
394
+ this.hoverBgColor ??
395
+ setBgOnHover({
396
+ disabled: this.disabled,
397
+ shaded: this.shaded,
398
+ outlined: this.outlined,
399
+ flat: this.flat,
400
+ filled: this.filled,
401
+ color: this.color
402
+ }),
380
403
  '--dl-button-text-color-pressed': setTextOnPressed({
381
404
  shaded: this.shaded,
382
405
  outlined: this.shaded
@@ -468,13 +468,15 @@ export default defineComponent({
468
468
  emit('focus')
469
469
  }
470
470
 
471
- const processBlur = () => {
471
+ const processBlur = (force: boolean = false) => {
472
472
  input.value.scrollLeft = 0
473
473
  input.value.scrollTop = 0
474
474
  focused.value = false
475
475
  expanded.value = true
476
- updateJSONQuery()
477
- emit('blur')
476
+ if (!force) {
477
+ updateJSONQuery()
478
+ emit('blur')
479
+ }
478
480
  }
479
481
 
480
482
  const blur = (
@@ -497,7 +499,7 @@ export default defineComponent({
497
499
  return
498
500
  }
499
501
 
500
- processBlur()
502
+ processBlur(force)
501
503
  } else {
502
504
  focus()
503
505
  cancelBlur.value = cancelBlur.value - 1