Merge pull request #755 from devhus/main

BTable event filter, BFormInput highlighting animation

Author: VividLemon

packages/bootstrap-vue-3/src/components/BFormInput/BFormInput.vue

@@ -25,9 +25,9 @@
 </template>
 
 <script lang="ts">
-import type {InputType} from '../../types'
-import {computed, defineComponent, PropType} from 'vue'
+import {computed, defineComponent, PropType, ref} from 'vue'
 import {COMMON_INPUT_PROPS, useFormInput} from '../../composables'
+import type {InputType} from '../../types'
 
 const allowedTypes = [
   'text',
@@ -59,13 +59,15 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'change', 'blur', 'input'],
   setup(props, {emit}) {
-    const {input, computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur} =
-      useFormInput(props, emit)
+    const {input, computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur} = useFormInput(props, emit)
+  
+    const isHighlighted = ref(false)
 
     const computedClasses = computed(() => {
       const isRange = props.type === 'range'
       const isColor = props.type === 'color'
       return {
+        'form-control-highlighted': isHighlighted.value,
         'form-range': isRange,
         'form-control': isColor || (!props.plaintext && !isRange),
         'form-control-color': isColor,
@@ -80,6 +82,14 @@ export default defineComponent({
       allowedTypes.includes(props.type) ? props.type : 'text'
     )
 
+    const highlight = () => {
+      if (isHighlighted.value === true) return
+      isHighlighted.value = true
+      setTimeout(() => {
+        isHighlighted.value = false
+      }, 2000)
+    }
+
     return {
       computedClasses,
       localType,
@@ -91,6 +101,7 @@ export default defineComponent({
       onBlur,
       focus,
       blur,
+      highlight,
     }
   },
 })

packages/bootstrap-vue-3/src/components/BFormInput/_form-input.scss

@@ -0,0 +1,25 @@
+.form-control-highlighted {
+  border-color: $input-focus-border-color;
+
+  transition: box-shadow 0.3s ease-in-out;
+  animation: form-control-highlighted-blink 1s infinite;
+}
+
+@keyframes form-control-highlighted-blink {
+  0% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+
+  50% {
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}

packages/bootstrap-vue-3/src/components/BTable/BTable.vue

@@ -72,10 +72,10 @@
       <template v-for="(item, itemIndex) in computedItems" :key="itemIndex">
         <tr
           :class="getRowClasses(item)"
-          @click="onRowClick(item, itemIndex, $event)"
-          @dblclick="onRowDblClick(item, itemIndex, $event)"
-          @mouseenter="onRowMouseEnter(item, itemIndex, $event)"
-          @mouseleave="onRowMouseLeave(item, itemIndex, $event)"
+          @click="!filterEvent($event) && onRowClick(item, itemIndex, $event)"
+          @dblclick="!filterEvent($event) && onRowDblClick(item, itemIndex, $event)"
+          @mouseenter="!filterEvent($event) && onRowMouseEnter(item, itemIndex, $event)"
+          @mouseleave="!filterEvent($event) && onRowMouseLeave(item, itemIndex, $event)"
         >
           <td
             v-if="addSelectableCell"
@@ -181,6 +181,7 @@ import {useBooleanish} from '../../composables'
 import {cloneDeepAsync} from '../../utils/object'
 import {titleCase} from '../../utils/stringUtils'
 import BSpinner from '../BSpinner.vue'
+
 import type {
   Booleanish,
   ColorVariant,
@@ -191,6 +192,7 @@ import type {
 } from '../../types'
 import type {BTableProvider, BTableSortCompare} from '../../types/components'
 import BTableSimple from './BTableSimple.vue'
+import {filterEvent} from './helpers/filter-event'
 import useItemHelper from './itemHelper'
 
 type NoProviderTypes = 'paging' | 'sorting' | 'filtering'
@@ -297,7 +299,6 @@ interface BTableEmits {
 }
 
 const emit = defineEmits<BTableEmits>()
-
 const slots = useSlots()
 
 const itemHelper = useItemHelper()
@@ -314,7 +315,17 @@ const noProviderSortingBoolean = useBooleanish(toRef(props, 'showEmpty'))
 const noProviderFilteringBoolean = useBooleanish(toRef(props, 'showEmpty'))
 
 const internalBusyFlag = ref(busyBoolean.value)
+itemHelper.filterEvent.value = async (items) => {
+  if (usesProvider.value) {
+    await callItemsProvider()
+    return
+  }
+  const clone = await cloneDeepAsync(items)
+  emit('filtered', clone)
+}
+
 const selectedItems = ref<Set<TableItem>>(new Set([]))
+const isSelecting = computed(() => selectedItems.value.size > 0)
 
 const tableClasses = computed(() => ({
   [`align-${props.align}`]: props.align !== undefined,
@@ -348,11 +359,18 @@ const computedFieldsTotal = computed(
 )
 
 const isFilterableTable = computed(() => props.filter !== undefined && props.filter !== '')
-
 const usesProvider = computed(() => props.provider !== undefined)
 
-const requireItemsMapping = computed(() => isSortable.value && sortInternalBoolean.value === true)
+const addSelectableCell = computed(
+  () => selectableBoolean.value && (!!props.selectHead || slots.selectHead !== undefined)
+)
+
+const isSortable = computed(
+  () =>
+    props.fields.filter((field) => (typeof field === 'string' ? false : field.sortable)).length > 0
+)
 
+const requireItemsMapping = computed(() => isSortable.value && sortInternalBoolean.value === true)
 const computedItems = computed(() => {
   if (usesProvider.value) return itemHelper.internalItems.value
   return requireItemsMapping.value
@@ -364,53 +382,6 @@ const computedItems = computed(() => {
     : props.items
 })
 
-const addSelectableCell = computed(
-  () => selectableBoolean.value && (!!props.selectHead || slots.selectHead !== undefined)
-)
-const isSortable = computed(
-  () =>
-    props.fields.filter((field) => (typeof field === 'string' ? false : field.sortable)).length > 0
-)
-const isSelecting = computed(() => selectedItems.value.size > 0)
-
-watch(
-  () => props.filter,
-  (filter, oldFilter) => {
-    if (filter === oldFilter || usesProvider.value) return
-    if (!filter) {
-      cloneDeepAsync(props.items).then((item) => emit('filtered', item))
-    }
-  }
-)
-watch(
-  () => internalBusyFlag.value,
-  () => internalBusyFlag.value !== busyBoolean.value && emit('update:busy', internalBusyFlag.value)
-)
-watch(
-  () => busyBoolean.value,
-  () => internalBusyFlag.value !== busyBoolean.value && (internalBusyFlag.value = busyBoolean.value)
-)
-watch(
-  () => props.filter,
-  (val, oldVal) => providerPropsWatch('filter', val, oldVal)
-)
-watch(
-  () => props.currentPage,
-  (val, oldVal) => providerPropsWatch('currentPage', val, oldVal)
-)
-watch(
-  () => props.perPage,
-  (val, oldVal) => providerPropsWatch('perPage', val, oldVal)
-)
-watch(
-  () => props.sortBy,
-  (val, oldVal) => providerPropsWatch('sortBy', val, oldVal)
-)
-watch(
-  () => props.sortDesc,
-  (val, oldVal) => providerPropsWatch('sortDesc', val, oldVal)
-)
-
 const getFieldHeadLabel = (field: TableField) => {
   if (typeof field === 'string') return titleCase(field)
   if (field.label !== undefined) return field.label
@@ -430,7 +401,6 @@ const onRowClick = (row: TableItem, index: number, e: MouseEvent) => {
 
   handleRowSelection(row, index, e.shiftKey)
 }
-
 const onRowDblClick = (row: TableItem, index: number, e: MouseEvent) =>
   emit('rowDblClicked', row, index, e)
 
@@ -440,15 +410,6 @@ const onRowMouseEnter = (row: TableItem, index: number, e: MouseEvent) =>
 const onRowMouseLeave = (row: TableItem, index: number, e: MouseEvent) =>
   emit('rowUnhovered', row, index, e)
 
-itemHelper.filterEvent.value = async (items) => {
-  if (usesProvider.value) {
-    await callItemsProvider()
-    return
-  }
-  const clone = await cloneDeepAsync(items)
-  emit('filtered', clone)
-}
-
 const handleFieldSorting = (field: TableField) => {
   if (!isSortable.value) return
 
@@ -554,29 +515,32 @@ const toggleRowDetails = (tr: TableItem) => {
 const getFieldColumnClasses = (field: TableFieldObject) => [
   field.class,
   field.thClass,
+  field.variant ? `table-${field.variant}` : undefined,
   {
-    [`table-${field.variant}`]: field.variant !== undefined,
     'b-table-sortable-column': isSortable.value && field.sortable,
     'b-table-sticky-column': field.stickyColumn,
   },
 ]
+
 const getFieldRowClasses = (field: TableFieldObject, tr: TableItem) => [
   field.class,
   field.tdClass,
+  field.variant ? `table-${field.variant}` : undefined,
   tr?._cellVariants && tr?._cellVariants[field.key]
     ? `table-${tr?._cellVariants[field.key]}`
     : undefined,
   {
-    [`table-${field.variant}`]: field.variant !== undefined,
     'b-table-sticky-column': field.stickyColumn,
   },
 ]
 
-const getRowClasses = (item: TableItem) => ({
-  [`table-${item._rowVariant}`]: item._rowVariant !== undefined,
-  [`selected table-${props.selectionVariant}`]:
-    selectableBoolean.value && selectedItems.value.has(item),
-})
+const getRowClasses = (item: TableItem) => [
+  item._rowVariant ? `table-${item._rowVariant}` : null,
+  item._rowVariant ? `table-${item._rowVariant}` : null,
+  selectableBoolean.value && selectedItems.value.has(item)
+    ? `selected table-${props.selectionVariant}`
+    : null,
+]
 
 const selectAllRows = () => {
   if (!selectableBoolean.value) return
@@ -638,6 +602,45 @@ const providerPropsWatch = async (prop: string, val: any, oldVal: any) => {
   await callItemsProvider()
 }
 
+watch(
+  () => props.filter,
+  (filter, oldFilter) => {
+    if (filter === oldFilter || usesProvider.value) return
+    if (!filter) {
+      cloneDeepAsync(props.items).then((item) => emit('filtered', item))
+    }
+  }
+)
+
+watch(
+  () => internalBusyFlag.value,
+  () => internalBusyFlag.value !== busyBoolean.value && emit('update:busy', internalBusyFlag.value)
+)
+watch(
+  () => busyBoolean.value,
+  () => internalBusyFlag.value !== busyBoolean.value && (internalBusyFlag.value = busyBoolean.value)
+)
+watch(
+  () => props.filter,
+  (val, oldVal) => providerPropsWatch('filter', val, oldVal)
+)
+watch(
+  () => props.currentPage,
+  (val, oldVal) => providerPropsWatch('currentPage', val, oldVal)
+)
+watch(
+  () => props.perPage,
+  (val, oldVal) => providerPropsWatch('perPage', val, oldVal)
+)
+watch(
+  () => props.sortBy,
+  (val, oldVal) => providerPropsWatch('sortBy', val, oldVal)
+)
+watch(
+  () => props.sortDesc,
+  (val, oldVal) => providerPropsWatch('sortDesc', val, oldVal)
+)
+
 onMounted(() => {
   if (usesProvider.value) {
     callItemsProvider()

packages/bootstrap-vue-3/src/components/BTable/helpers/filter-event.ts

@@ -0,0 +1,54 @@
+import {closest, getAttr, getById, matches, select} from '../../../utils/dom'
+
+const TABLE_TAG_NAMES = ['TD', 'TH', 'TR']
+
+// Filter CSS selector for click/dblclick/etc. events
+// If any of these selectors match the clicked element, we ignore the event
+export const EVENT_FILTER = [
+  'a',
+  'a *', // Include content inside links
+  'button',
+  'button *', // Include content inside buttons
+  'input:not(.disabled):not([disabled])',
+  'select:not(.disabled):not([disabled])',
+  'textarea:not(.disabled):not([disabled])',
+  '[role="link"]',
+  '[role="link"] *',
+  '[role="button"]',
+  '[role="button"] *',
+  '[tabindex]:not(.disabled):not([disabled])',
+].join(',')
+
+// Returns `true` if we should ignore the click/double-click/keypress event
+// Avoids having the user need to use `@click.stop` on the form control
+export const filterEvent = (event: Event) => {
+  // Exit early when we don't have a target element
+  if (!event || !event.target) {
+    /* istanbul ignore next */
+    return false
+  }
+  const el = event.target as HTMLElement
+  // Exit early when element is disabled or a table element
+  if (('disabled' in el && (el as any).disabled) || TABLE_TAG_NAMES.indexOf(el.tagName) !== -1) {
+    return false
+  }
+  // Ignore the click when it was inside a dropdown menu
+  if (closest('.dropdown-menu', el)) {
+    return true
+  }
+  const label = el.tagName === 'LABEL' ? el : closest('label', el)
+  // If the label's form control is not disabled then we don't propagate event
+  // Modern browsers have `label.control` that references the associated input, but IE 11
+  // does not have this property on the label element, so we resort to DOM lookups
+  if (label) {
+    const labelFor = getAttr(label, 'for')
+    const input = labelFor ? getById(labelFor) : select('input, select, textarea', label)
+    if (input && !input.disabled) {
+      return true
+    }
+  }
+  // Otherwise check if the event target matches one of the selectors in the
+  // event filter (i.e. anchors, non disabled inputs, etc.)
+  // Return `true` if we should ignore the event
+  return matches(el, EVENT_FILTER)
+}