fix: added update:dsData event

docs/.vuepress/components/Example2.vue

@@ -82,6 +82,7 @@
       :ds-sortby="[sortFirstName]"
       :ds-search-in="['balance', 'birthdate', 'name', 'company', 'email', 'phone', 'address', 'favoriteAnimal']"
       :ds-search-as="{ birthdate: searchAsEuroDate }"
+      @update:dsData="onUpdate"
     >
       <div class="row mb-2" :data-page-count="ds.dsPagecount">
         <div class="col-md-6 mb-2 mb-md-0">
@@ -168,6 +169,9 @@ export default {
     },
     startsWithFilter(value) {
       return value.toLowerCase().startsWith(this.startsWith.toLowerCase())
+    },
+    onUpdate(data) {
+      console.log('Filtered data:', data)
     }
   }
 }

docs/components/index.md

@@ -1,32 +1,37 @@
 ## Dataset
+
 The `dataset` component acts as the provider component of all the data and methods `vue-dataset` needs to function.
 It does so by using the provide/inject mechanism of Vue so that data is also accessible in nested levels down the component tree.
 
 Dataset takes the original data object as a prop and also some useful props as options that dictate how the data will be filtered, searched and sorted.
 
 ### Example
+
 ```vue
-    <dataset
-      v-slot="{ ds }"
-      :ds-data="users"
-      :ds-filter-fields="{ firstName: 'John' }"
-      :ds-sortby="['lastName']"
-      :ds-search-in="['firstName', 'lastName']"
-      :ds-search-as="{ birthDate: searchAsEuroDate }"
-      :ds-sort-as="{ birthDate: sortAsDate }"
-    >
+<dataset
+  v-slot="{ ds }"
+  :ds-data="users"
+  :ds-filter-fields="{ firstName: 'John' }"
+  :ds-sortby="['lastName']"
+  :ds-search-in="['firstName', 'lastName']"
+  :ds-search-as="{ birthDate: searchAsEuroDate }"
+  :ds-sort-as="{ birthDate: sortAsDate }"
+>
     ...
-    </dataset>
+</dataset>
 ```
 
 ### Props
+
 #### ds-data
+
 Type: `Array of Objects`  
 Default: <em>Empty Array</em>
 
 This is the data object that `vue-dataset` will operate on.  
-It must be an Array of Objects. 
-``` js
+It must be an Array of Objects.
+
+```js
 [
   {
     firstName: 'John',
@@ -38,22 +43,22 @@ It must be an Array of Objects.
     lastName: 'Adams',
     birthDate: '2003-07-28'
   },
-  ... 
+  ...
 ]
 ```
 
 #### ds-filter-fields
+
 Type: `Object`  
 Default: <em>Empty Object</em>
 
 It defines how certain properties of the data object will be filtered.
 The object key denotes the data object property and the object value is a `value` or a `function` that will be used to filter
-that data property.  
+that data property.
 
-For example this will filter the data by 
+For example this will filter the data by
 firstName "John" and all lastNames that start with the letter "D"
 
-
 ```js
 {
   firstName: 'John',
@@ -62,13 +67,15 @@ firstName "John" and all lastNames that start with the letter "D"
 ```
 
 `startsWithD` can be a function defined in your instance methods
+
 ```js
 startsWithD (value) {
   return value.toLowerCase().startsWith('D')
 }
 ```
 
 #### ds-sortby
+
 Type: `Array`  
 Default: <em>Empty Array</em>
 
@@ -77,11 +84,12 @@ If a property is prefixed by `-` it will be sorted with descending order.
 
 For example this will sort the data by lastName
 
-```js
+```html
 ['lastName']
 ```
 
 #### ds-search-in
+
 Type: `Array`  
 Default: <em>Empty Array</em>
 
@@ -90,29 +98,33 @@ If the `ds-search-in` array is empty (default), then all object properties will
 
 For example this will tell `Dataset` to perform search **only** in the `firstName` and `lastName` data object properties.
 
-```js
+```html
 ['firstName', 'lastName']
 ```
 
 #### ds-search-as
+
 Type: `Object`  
 Default: <em>Empty Object</em>
 
 It defines how certain properties of the data object will be searched.
 The object key denotes the data object property and the object value is a predicate `Function` that will be used to search
-that data property. The predicate function has access to the column value, the search string and the current row data.  
- 
+that data property. The predicate function has access to the column value, the search string and the current row data.
+
 This is useful in situations when you are displaying a formatted value and you want the user to be able to search
 it inside the data object with the same format as it appears on-screen.
 
 For example this will set the birthDate attribute searchable by `searchAsEuroDate` method
 and will allow birthdate dates defined as YYYY-MM-DD format to be searched as DD.MM.YYYY format.
 
 ```js
-{ birthDate: searchAsEuroDate }
+{
+  birthDate: searchAsEuroDate
+}
 ```
 
 Inside your instance methods
+
 ```js
 searchAsEuroDate: function (value, searchString, rowData) {
   const parts = searchString.split('.')
@@ -122,6 +134,7 @@ searchAsEuroDate: function (value, searchString, rowData) {
 ```
 
 #### ds-sort-as
+
 Type: `Object`  
 Default: <em>Empty Object</em>
 
@@ -134,10 +147,13 @@ For example this will apply the `sortAsDate` method to the birthDate attribute s
 correctly.
 
 ```js
-{ birthDate: sortAsDate }
+{
+  birthDate: sortAsDate
+}
 ```
 
 Inside your instance methods
+
 ```js
 sortAsDate: function (isoDate) {
   return new Date(isoDate)
@@ -150,6 +166,7 @@ Dataset `provides` functions that return computed data, data and methods to the
 You can leverage these using `inject` to create your own **custom child components**.
 
 ##### Functions that return computed data
+
 <table class="table table-bordered">
   <thead>
     <tr>
@@ -211,18 +228,20 @@ You can leverage these using `inject` to create your own **custom child componen
 > as the example below.
 
 Example:
-``` js
+
+```js
   ...
   inject: ['rdsPage'],
   computed: {
     dsPage () {
       return this.rdsPage()
     }
   }
-  ... 
+  ...
 ```
 
 ##### Data
+
 <table class="table table-bordered">
   <thead>
     <tr>
@@ -238,9 +257,10 @@ Example:
       <td>An object containing translation strings</td>
     </tr>    
   </tbody>
-</table>  
+</table>
 
 ##### Methods
+
 <table class="table table-bordered w-100 d-block d-md-table">
   <thead>
     <tr>
@@ -268,11 +288,31 @@ Example:
   </tbody>
 </table>
 
+### Events
+
+<table class="table table-bordered w-100 d-block d-md-table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Emits</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>update:dsData</td>
+      <td>Array of Objects</td>
+      <td>Emits the <strong>filtered</strong> <code>dsData</code> items, every time the internal computed results is changed.</td>
+    </tr>
+  </tbody>
+</table>
+
 ### Scoped slot
 
 Dataset also provides several data via a `ds` object exposed from a a scoped slot.
 
 #### The scoped slot ds object
+
 <table class="table table-bordered">
   <thead>
     <tr>
@@ -338,13 +378,14 @@ Dataset also provides several data via a `ds` object exposed from a a scoped slo
 ## DatasetItem
 
 The `dataset-item` component is responsible for displaying the item rows of the dataset.
-Since it's a dynamic component it can take the form of any tag like `div`, `li`, `tr` etc. 
+Since it's a dynamic component it can take the form of any tag like `div`, `li`, `tr` etc.
 
 DatasetItem must be nested inside the Dataset component in order to work.
 It exposes one scoped slot with the the row's data and index and also one slot for the customization
 of the "no data found" message.
 
 ### Example
+
 ```vue
 <dataset-item>
   <template v-slot="{ row, rowIndex }">
@@ -359,9 +400,11 @@ of the "no data found" message.
 ```
 
 ### Props
+
 #### tag
+
 Type: `String`  
-Default: <em>div</em>  
+Default: <em>div</em>
 
 The HTML tag to render.
 
@@ -371,6 +414,7 @@ DatasetItem also provides the row's data via a `row` object exposed from a a sco
 It also provides the row's original index, useful e.g if you want to delete an item.
 
 #### The scoped slot object
+
 <table class="table table-bordered w-100 d-block d-md-table">
   <thead>
     <tr>
@@ -409,6 +453,7 @@ The `dataset-info` component displays information about the range of items being
 and the total number of items in the dataset.
 
 ### Example
+
 ```vue
 <dataset-info class="my-custom-class" />
 ```
@@ -418,29 +463,35 @@ and the total number of items in the dataset.
 The `dataset-pager` component displays the pagination controls.
 
 ### Example
+
 ```vue
 <dataset-pager />
 ```
+
 ## DatasetShow
 
 The `dataset-show` component displays a select that is used to control how many items are visible simultaneously.
 Props can be used to customize the default number of visible items as well as the list for the select control.
 
 ### Example
+
 ```vue
 <dataset-show />
 ```
 
 ### Props
+
 #### ds-show-entries
+
 Type: `Number`  
-Default: <em>10</em>  
+Default: <em>10</em>
 
 The selected number of items to show.
 
 #### ds-show-entries-lovs
+
 Type: `Array of Objects`  
-Default: `[{ value: 5, text: 5 }, { value: 10, text: 10 }, { value: 25, text: 25 }, { value: 50, text: 50 }, { value: 100, text: 100 }]`  
+Default: `[{ value: 5, text: 5 }, { value: 10, text: 10 }, { value: 25, text: 25 }, { value: 50, text: 50 }, { value: 100, text: 100 }]`
 
 The list of options for the select element.
 
@@ -450,19 +501,23 @@ The `dataset-search` component displays an input search form control used to sea
 Props can be used to customize the placeholder text as well as the debounce wait time.
 
 ### Example
+
 ```vue
 <dataset-search ds-search-placeholder="Search..." />
 ```
 
 ### Props
+
 #### ds-search-placeholder
+
 Type: `String`  
-Default: <em>Empty String</em>  
+Default: <em>Empty String</em>
 
 The placeholder text of the input control.
 
 #### wait
+
 Type: `Number`  
-Default: <em>0</em>  
+Default: <em>0</em>
 
-The amount of time the debounce function waits after the last received input action before executing the search.
+The amount of time the debounce function waits after the last received input action before executing the search.