first commit 2

VgtFilterRow.vue

@@ -0,0 +1,218 @@
+<template>
+  <tr v-if="hasFilterRow">
+    <th v-if="lineNumbers"></th>
+    <th v-if="selectable"></th>
+    <template v-for="(column, index) in columns" :key="index">
+      <th
+          v-if="!column.hidden"
+          :class="getClasses(column)"
+      >
+
+        <slot
+            name="column-filter"
+            :column="column"
+            :updateFilters="updateSlotFilter"
+        >
+
+          <div
+              v-if="isFilterable(column)">
+            <input v-if="!isDropdown(column)"
+                   :name="getName(column)"
+                   type="text"
+                   class="vgt-input"
+                   :placeholder="getPlaceholder(column)"
+                   :value="columnFilters[fieldKey(column.field)]"
+                   @keyup.enter="updateFiltersOnEnter(column, $event.target.value)"
+                   @input="updateFiltersOnKeyup(column, $event.target.value)"/>
+
+            <!-- options are a list of primitives -->
+            <select v-if="isDropdownArray(column)"
+                    :name="getName(column)"
+                    class="vgt-select"
+                    :value="columnFilters[fieldKey(column.field)]"
+                    @change="updateFiltersImmediately(column.field, $event.target.value)">
+              <option value="" key="-1">{{ getPlaceholder(column) }}</option>
+              <option
+                  v-for="(option, i) in column.filterOptions.filterDropdownItems"
+                  :key="i"
+                  :value="option">
+                {{ option }}
+              </option>
+            </select>
+
+            <!-- options are a list of objects with text and value -->
+            <select v-if="isDropdownObjects(column)"
+                    :name="getName(column)"
+                    class="vgt-select"
+                    :value="columnFilters[fieldKey(column.field)]"
+                    @change="updateFiltersImmediately(column.field, $event.target.value)">
+              <option value="" key="-1">{{ getPlaceholder(column) }}</option>
+              <option
+                  v-for="(option, i) in column.filterOptions.filterDropdownItems"
+                  :key="i"
+                  :value="option.value">{{ option.text }}
+              </option>
+            </select>
+
+          </div>
+        </slot>
+      </th>
+    </template>
+  </tr>
+</template>
+
+<script>
+
+export default {
+  name: 'VgtFilterRow',
+  emits: ['filter-changed'],
+  props: [
+    'lineNumbers',
+    'columns',
+    'typedColumns',
+    'globalSearchEnabled',
+    'selectable',
+    'mode',
+  ],
+  watch: {
+    columns: {
+      handler (newValue, oldValue) {
+        this.populateInitialFilters()
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  data () {
+    return {
+      columnFilters: {},
+      timer: null,
+    }
+  },
+  computed: {
+
+    // to create a filter row, we need to
+    // make sure that there is atleast 1 column
+    // that requires filtering
+    hasFilterRow () {
+      // if (this.mode === 'remote' || !this.globalSearchEnabled) {
+      for (let i = 0; i < this.columns.length; i++) {
+        const col = this.columns[i]
+        if (col.filterOptions && col.filterOptions.enabled) {
+          return true
+        }
+      }
+      // }
+      return false
+    },
+  },
+  methods: {
+
+    fieldKey (field) {
+      if (typeof (field) === 'function' && field.name) {
+        return field.name
+      }
+      return field
+    },
+
+    reset (emitEvent = false) {
+      this.columnFilters = {}
+
+      if (emitEvent) {
+        this.$emit('filter-changed', this.columnFilters)
+      }
+    },
+
+    isFilterable (column) {
+      return column.filterOptions
+          && column.filterOptions.enabled
+    },
+
+    isDropdown (column) {
+      return this.isFilterable(column)
+          && column.filterOptions.filterDropdownItems
+          && column.filterOptions.filterDropdownItems.length
+    },
+
+    isDropdownObjects (column) {
+      return this.isDropdown(column)
+          && typeof column.filterOptions.filterDropdownItems[0] === 'object'
+    },
+
+    isDropdownArray (column) {
+      return this.isDropdown(column)
+          && typeof column.filterOptions.filterDropdownItems[0] !== 'object'
+    },
+
+    getClasses (column) {
+      const firstClass = 'filter-th'
+      return (column.filterOptions && column.filterOptions.styleClass) ? [firstClass, ...column.filterOptions.styleClass.split(' ')].join(' ') : firstClass
+    },
+
+    // get column's defined placeholder or default one
+    getPlaceholder (column) {
+      const placeholder = (this.isFilterable(column) && column.filterOptions.placeholder) || `Filter ${column.label}`
+      return placeholder
+    },
+
+    getName (column) {
+      return `vgt-${this.fieldKey(column.field)}`
+    },
+
+    updateFiltersOnEnter (column, value) {
+      if (this.timer) clearTimeout(this.timer)
+      this.updateFiltersImmediately(column.field, value)
+    },
+
+    updateFiltersOnKeyup (column, value) {
+      // if the trigger is enter, we don't filter on keyup
+      if (column.filterOptions.trigger === 'enter') return
+      this.updateFilters(column, value)
+    },
+
+    updateSlotFilter (column, value) {
+      let fieldToFilter = column.filterOptions.slotFilterField || column.field
+      if (typeof column.filterOptions.formatValue === 'function') {
+        value = column.filterOptions.formatValue(value)
+      }
+      this.updateFiltersImmediately(fieldToFilter, value)
+    },
+
+    // since vue doesn't detect property addition and deletion, we
+    // need to create helper function to set property etc
+    updateFilters (column, value) {
+      if (this.timer) clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        this.updateFiltersImmediately(column.field, value)
+      }, 400)
+    },
+
+    updateFiltersImmediately (field, value) {
+      let key = this.fieldKey(field)
+      this.columnFilters[key] = value
+      this.$emit('filter-changed', this.columnFilters)
+    },
+
+    populateInitialFilters () {
+      for (let i = 0; i < this.columns.length; i++) {
+        const col = this.columns[i]
+        // lets see if there are initial
+        // filters supplied by user
+        if (this.isFilterable(col)
+            && typeof col.filterOptions.filterValue !== 'undefined'
+            && col.filterOptions.filterValue !== null) {
+          let key = this.fieldKey(col.field)
+          this.columnFilters[key] = col.filterOptions.filterValue
+          // this.updateFilters(col, col.filterOptions.filterValue);
+        }
+      }
+      //* lets emit event once all filters are set
+      this.$emit('filter-changed', this.columnFilters)
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

VgtGlobalSearch.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-if="showControlBar" class="vgt-global-search vgt-clearfix">
+    <div class="vgt-global-search__input vgt-pull-left">
+      <form @submit.prevent v-if="searchEnabled" role="search">
+        <label :for="id">
+          <span aria-hidden="true" class="input__icon">
+            <div class="magnifying-glass"></div>
+          </span>
+          <span class="sr-only">Search</span>
+        </label>
+        <input
+            :id="id"
+            type="text"
+            class="vgt-input vgt-pull-left"
+            :placeholder="globalSearchPlaceholder"
+            :value="value"
+            @input="updateValue($event.target.value)"
+            @keyup.enter="entered($event.target.value)"/>
+      </form>
+    </div>
+
+    <div class="vgt-global-search__actions vgt-pull-right">
+      <slot name="internal-table-actions">
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VgtGlobalSearch',
+  props: [
+    'value',
+    'searchEnabled',
+    'globalSearchPlaceholder',
+  ],
+  data () {
+    return {
+      globalSearchTerm: null,
+      id: this.getId(),
+    }
+  },
+  computed: {
+    showControlBar () {
+      if (this.searchEnabled) return true
+      if (this.$slots && this.$slots['internal-table-actions']) return true
+      return false
+    },
+  },
+  methods: {
+    updateValue (value) {
+      this.$emit('input', value)
+      this.$emit('on-keyup', value)
+    },
+    entered (value) {
+      this.$emit('on-enter', value)
+    },
+    getId () {
+      return `vgt-search-${Math.floor(Math.random() * Date.now())}`
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>