feature(filtering & searching): slots render functions in searching and filtering

[cbrgpl]

Slots render functions in searching and filtering

What types of changes does your code introduce?

• Add using of slots render function when searching or filtering are happen
• Modify FilterOption - provide criteriaRegExp when comparison is a function for better filtering
• Fix regular expression creation when inputs special symbols( \ [ ] { } . etc.)
• Change computed functions(itemsSearching, itemsFiltering) in useTotalItems.ts to pairs (watcher and ref), because of vue bug(totalItems computed before itemsSearching and itemsFiltering)
• When no slot render function provided used old getItemValue function

Put an x in the boxes that apply_

• [ ] Fix
• [X] Feature

Example:

const countries = [
  { name: 'USA', id: 0 },
  { name: 'Greece', id: 1 }
]

const items = ref<Item[]>([
  { name: "Stephen Curry", firstName: "GSW",  number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: countries[0]['id']},
  { name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: countries[0]['id']},
  { name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: countries[0]['id']},
  { name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: countries[1]['id']},
  { name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: countries[1]['id']},
]);

<DataTable ... >

  <template #item-country="item">
        <span style="color: red">
          <div>
            {{ countries.find( country => country.id === item.country )?.name ?? null }}
          </div>
        </span>
      </template>

</DataTable>

Before the revision, when the user entered the name of the country, there was no item of the array in result, because the value of "country" stored as a number, not a string. Now it will work correctly.