neo.mjs 3.0.3 → 3.1.0

package/buildScripts/webpack/development/{webpack.config.appworker.js → webpack.config.appworker.mjs}

@@ -1,28 +1,30 @@
+import fs                from 'fs-extra';
+import path              from 'path';
+import webpack           from 'webpack';
+import WebpackHookPlugin from 'webpack-hook-plugin';
+
 const cwd                   = process.cwd(),
-      fs                    = require('fs-extra'),
-      path                  = require('path'),
-      buildTarget           = require('./buildTarget.json'),
-      WebpackHookPlugin     = require('webpack-hook-plugin'),
       configPath            = path.resolve(cwd, 'buildScripts/myApps.json'),
-      packageJson           = require(path.resolve(cwd, 'package.json')),
+      requireJson           = path => JSON.parse(fs.readFileSync((path))),
+      packageJson           = requireJson(path.resolve(cwd, 'package.json')),
       neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
-      filenameConfig        = require(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+      buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
+      filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       plugins               = [],
       regexIndexNodeModules = /node_modules/g,
-      regexTopLevel         = /\.\.\//g,
-      webpack               = require('webpack');
+      regexTopLevel         = /\.\.\//g;
 
 let config, examplesPath;
 
 if (fs.existsSync(configPath)) {
-    config = require(configPath);
+    config = requireJson(configPath);
 } else {
     const myAppsPath = path.resolve(neoPath, 'buildScripts/webpack/json/myApps.json');
 
     if (fs.existsSync(myAppsPath)) {
-        config = require(myAppsPath);
+        config = requireJson(myAppsPath);
     } else {
-        config = require(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
+        config = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
     }
 }
 
@@ -30,7 +32,7 @@ if (!buildTarget.folder) {
     buildTarget.folder = 'dist/development';
 }
 
-module.exports = env => {
+export default env => {
     let examples  = [],
         insideNeo = env.insideNeo == 'true',
         content, inputPath, outputPath;
@@ -63,7 +65,7 @@ module.exports = env => {
         inputPath  = path.resolve(cwd, folder, lAppName, 'neo-config.json');
         outputPath = path.resolve(cwd, buildTarget.folder, folder, lAppName, 'neo-config.json');
 
-        content = require(inputPath);
+        content = requireJson(inputPath);
 
         content.appPath = content.appPath.replace(regexTopLevel, '');
 
@@ -85,9 +87,7 @@ module.exports = env => {
         fs.writeFileSync(outputPath, content);
     };
 
-    const isFile = fileName => {
-        return fs.lstatSync(fileName).isFile()
-    };
+    const isFile = fileName => fs.lstatSync(fileName).isFile();
 
     const parseFolder = (folderPath, index, relativePath) => {
         let itemPath;
@@ -105,11 +105,9 @@ module.exports = env => {
         });
     };
 
-    if (config.apps) {
-        config.apps.forEach(key => {
-            createStartingPoint(key, key === 'Docs' ? '' : 'apps');
-        });
-    }
+    config.apps?.forEach(key => {
+        createStartingPoint(key, key === 'Docs' ? '' : 'apps');
+    });
 
     examplesPath = path.join(cwd, 'examples');
 
@@ -138,7 +136,7 @@ module.exports = env => {
                 }
             }),
             new WebpackHookPlugin({
-                onBuildEnd: ['node '+path.resolve(neoPath, 'buildScripts/copyFolder.js')+' -s '+path.resolve(neoPath, 'docs/resources')+' -t '+path.resolve(cwd, buildTarget.folder, 'docs/resources')]
+                onBuildEnd: ['node '+path.resolve(neoPath, 'buildScripts/copyFolder.mjs')+' -s '+path.resolve(neoPath, 'docs/resources')+' -t '+path.resolve(cwd, buildTarget.folder, 'docs/resources')]
             }),
             ...plugins
         ],

package/buildScripts/webpack/development/webpack.config.main.mjs

@@ -0,0 +1,24 @@
+import fs   from 'fs-extra';
+import path from 'path';
+
+const cwd            = process.cwd(),
+      requireJson    = path => JSON.parse(fs.readFileSync((path))),
+      packageJson    = requireJson(path.resolve(cwd, 'package.json')),
+      neoPath        = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
+      filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+      entry          = {main: path.resolve(neoPath, filenameConfig.mainInput)};
+
+export default {
+    mode   : 'development',
+    devtool: 'inline-source-map',
+    entry,
+    target : 'web',
+
+    output: {
+        chunkFilename: 'chunks/main/[id].js',
+        filename     : filenameConfig.mainOutput,
+        path         : path.resolve(cwd, buildTarget.folder),
+        publicPath   : ''
+    }
+};

package/buildScripts/webpack/development/{webpack.config.myapps.js → webpack.config.myapps.mjs}

@@ -1,41 +1,41 @@
+import fs      from 'fs-extra';
+import path    from 'path';
+import webpack from 'webpack';
+
 const cwd                   = process.cwd(),
-      fs                    = require('fs-extra'),
-      buildTarget           = require('./buildTarget.json'),
-      path                  = require('path'),
       configPath            = path.resolve(cwd, 'buildScripts/myApps.json'),
-      packageJson           = require(path.resolve(cwd, 'package.json')),
+      requireJson           = path => JSON.parse(fs.readFileSync((path))),
+      packageJson           = requireJson(path.resolve(cwd, 'package.json')),
       neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
-      filenameConfig        = require(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+      buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
+      filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       plugins               = [],
       regexIndexNodeModules = /node_modules/g,
-      regexTopLevel         = /\.\.\//g,
-      webpack               = require('webpack');
+      regexTopLevel         = /\.\.\//g;
 
 let config;
 
 if (fs.existsSync(configPath)) {
-    config = require(configPath);
+    config = requireJson(configPath);
 } else {
     const myAppsPath = path.resolve(neoPath, 'buildScripts/webpack/json/myApps.json');
 
     if (fs.existsSync(myAppsPath)) {
-        config = require(myAppsPath);
+        config = requireJson(myAppsPath);
     } else {
-        config = require(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
+        config = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
     }
 }
 
 let index = config.apps.indexOf('Docs');
 
-if (index > -1) {
-    config.apps.splice(index, 1);
-}
+index > -1 && config.apps.splice(index, 1);
 
 if (!buildTarget.folder) {
     buildTarget.folder = 'dist/development';
 }
 
-module.exports = env => {
+export default env => {
     let apps      = env.apps.split(','),
         insideNeo = env.insideNeo == 'true',
         buildAll  = apps.includes('all'),
@@ -75,7 +75,7 @@ module.exports = env => {
                 inputPath  = path.resolve(cwd, 'apps', lAppName, 'neo-config.json');
                 outputPath = path.resolve(cwd, buildTarget.folder, 'apps', lAppName, 'neo-config.json');
 
-                content = require(inputPath);
+                content = requireJson(inputPath);
 
                 content.appPath = content.appPath.replace(regexTopLevel, '');
 

package/buildScripts/webpack/development/{webpack.config.worker.js → webpack.config.worker.mjs}

@@ -1,13 +1,16 @@
-const path           = require('path'),
-      buildTarget    = require('./buildTarget.json'),
-      processRoot    = process.cwd(),
-      packageJson    = require(path.resolve(processRoot, 'package.json')),
+import fs      from 'fs-extra';
+import path    from 'path';
+import webpack from 'webpack';
+
+const cwd            = process.cwd(),
+      requireJson    = path => JSON.parse(fs.readFileSync((path))),
+      packageJson    = requireJson(path.resolve(cwd, 'package.json')),
       neoPath        = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
-      filenameConfig = require(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
-      entry          = {},
-      webpack        = require('webpack');
+      buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/development/buildTarget.json')),
+      filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+      entry          = {};
 
-module.exports = env => {
+export default env => {
     let insideNeo = env.insideNeo == 'true';
 
     if (filenameConfig.workers) {
@@ -43,7 +46,7 @@ module.exports = env => {
                 }
             },
 
-            path: path.resolve(processRoot, buildTarget.folder)
+            path: path.resolve(cwd, buildTarget.folder)
         }
     }
 };

package/buildScripts/webpack/production/{webpack.config.appworker.js → webpack.config.appworker.mjs}

@@ -1,31 +1,33 @@
+import fs                from 'fs-extra';
+import path              from 'path';
+import webpack           from 'webpack';
+import WebpackHookPlugin from 'webpack-hook-plugin';
+
 const cwd                   = process.cwd(),
-      fs                    = require('fs-extra'),
-      path                  = require('path'),
-      buildTarget           = require('./buildTarget.json'),
-      WebpackHookPlugin     = require('webpack-hook-plugin'),
       configPath            = path.resolve(cwd, 'buildScripts/myApps.json'),
-      packageJson           = require(path.resolve(cwd, 'package.json')),
+      requireJson           = path => JSON.parse(fs.readFileSync((path))),
+      packageJson           = requireJson(path.resolve(cwd, 'package.json')),
       neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
-      filenameConfig        = require(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+      buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
+      filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       plugins               = [],
       regexIndexNodeModules = /node_modules/g,
       regexLineBreak        = /(\r\n|\n|\r)/gm,
       regexTopLevel         = /\.\.\//g,
       regexTrimEnd          = /\s+$/gm,
-      regexTrimStart        = /^\s+/gm,
-      webpack               = require('webpack');
+      regexTrimStart        = /^\s+/gm;
 
 let config, examplesPath;
 
 if (fs.existsSync(configPath)) {
-    config = require(configPath);
+    config = requireJson(configPath);
 } else {
     const myAppsPath = path.resolve(neoPath, 'buildScripts/webpack/json/myApps.json');
 
     if (fs.existsSync(myAppsPath)) {
-        config = require(myAppsPath);
+        config = requireJson(myAppsPath);
     } else {
-        config = require(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
+        config = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
     }
 }
 
@@ -33,7 +35,7 @@ if (!buildTarget.folder) {
     buildTarget.folder = 'dist/production';
 }
 
-module.exports = env => {
+export default env => {
     let examples  = [],
         insideNeo = env.insideNeo == 'true',
         content, inputPath, outputPath;
@@ -67,7 +69,7 @@ module.exports = env => {
         inputPath  = path.resolve(cwd, folder, lAppName, 'neo-config.json');
         outputPath = path.resolve(cwd, buildTarget.folder, folder, lAppName, 'neo-config.json');
 
-        content = require(inputPath);
+        content = requireJson(inputPath);
         delete content.environment;
 
         content.appPath = content.appPath.replace(regexTopLevel, '');
@@ -94,9 +96,7 @@ module.exports = env => {
         fs.writeFileSync(outputPath, content);
     };
 
-    const isFile = fileName => {
-        return fs.lstatSync(fileName).isFile()
-    };
+    const isFile = fileName => fs.lstatSync(fileName).isFile();
 
     const parseFolder = (folderPath, index, relativePath) => {
         let itemPath;
@@ -114,11 +114,9 @@ module.exports = env => {
         });
     };
 
-    if (config.apps) {
-        config.apps.forEach(key => {
-            createStartingPoint(key, key === 'Docs' ? '' : 'apps');
-        });
-    }
+    config.apps?.forEach(key => {
+        createStartingPoint(key, key === 'Docs' ? '' : 'apps');
+    });
 
     examplesPath = path.join(cwd, 'examples');
 
@@ -142,7 +140,7 @@ module.exports = env => {
                 }
             }),
             new WebpackHookPlugin({
-                onBuildEnd: ['node '+path.resolve(neoPath, 'buildScripts/copyFolder.js')+' -s '+path.resolve(neoPath, 'docs/resources')+' -t '+path.resolve(cwd, buildTarget.folder, 'docs/resources')]
+                onBuildEnd: ['node '+path.resolve(neoPath, 'buildScripts/copyFolder.mjs')+' -s '+path.resolve(neoPath, 'docs/resources')+' -t '+path.resolve(cwd, buildTarget.folder, 'docs/resources')]
             }),
             ...plugins
         ],

package/buildScripts/webpack/production/webpack.config.main.mjs

@@ -0,0 +1,23 @@
+import fs   from 'fs-extra';
+import path from 'path';
+
+const cwd            = process.cwd(),
+      requireJson    = path => JSON.parse(fs.readFileSync((path))),
+      packageJson    = requireJson(path.resolve(cwd, 'package.json')),
+      neoPath        = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+      buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
+      filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+      entry          = {main: path.resolve(neoPath, filenameConfig.mainInput)};
+
+export default {
+    mode  : 'production',
+    entry,
+    target: 'web',
+
+    output: {
+        chunkFilename: 'chunks/main/[id].js',
+        filename     : filenameConfig.mainOutput,
+        path         : path.resolve(cwd, buildTarget.folder),
+        publicPath   : ''
+    }
+};

package/buildScripts/webpack/production/{webpack.config.myapps.js → webpack.config.myapps.mjs}

@@ -1,44 +1,44 @@
+import fs      from 'fs-extra';
+import path    from 'path';
+import webpack from 'webpack';
+
 const cwd                   = process.cwd(),
-      fs                    = require('fs-extra'),
-      path                  = require('path'),
-      buildTarget           = require('./buildTarget.json'),
       configPath            = path.resolve(cwd, 'buildScripts/myApps.json'),
-      packageJson           = require(path.resolve(cwd, 'package.json')),
+      requireJson           = path => JSON.parse(fs.readFileSync((path))),
+      packageJson           = requireJson(path.resolve(cwd, 'package.json')),
       neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
-      filenameConfig        = require(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+      buildTarget           = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
+      filenameConfig        = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
       plugins               = [],
       regexIndexNodeModules = /node_modules/g,
       regexLineBreak        = /(\r\n|\n|\r)/gm,
       regexTopLevel         = /\.\.\//g,
       regexTrimEnd          = /\s+$/gm,
-      regexTrimStart        = /^\s+/gm,
-      webpack               = require('webpack');
+      regexTrimStart        = /^\s+/gm;
 
 let config;
 
 if (fs.existsSync(configPath)) {
-    config = require(configPath);
+    config = requireJson(configPath);
 } else {
     const myAppsPath = path.resolve(neoPath, 'buildScripts/webpack/json/myApps.json');
 
     if (fs.existsSync(myAppsPath)) {
-        config = require(myAppsPath);
+        config = requireJson(myAppsPath);
     } else {
-        config = require(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
+        config = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
     }
 }
 
 let index = config.apps.indexOf('Docs');
 
-if (index > -1) {
-    config.apps.splice(index, 1);
-}
+index > -1 && config.apps.splice(index, 1);
 
 if (!buildTarget.folder) {
     buildTarget.folder = 'dist/production';
 }
 
-module.exports = env => {
+export default env => {
     let apps      = env.apps.split(','),
         insideNeo = env.insideNeo == 'true',
         buildAll  = apps.includes('all'),
@@ -80,7 +80,7 @@ module.exports = env => {
                 inputPath  = path.resolve(cwd, 'apps', lAppName, 'neo-config.json');
                 outputPath = path.resolve(cwd, buildTarget.folder, 'apps', lAppName, 'neo-config.json');
 
-                content = require(inputPath);
+                content = requireJson(inputPath);
                 delete content.environment;
 
                 content.appPath = content.appPath.replace(regexTopLevel, '');

package/buildScripts/webpack/production/{webpack.config.worker.js → webpack.config.worker.mjs}

@@ -1,13 +1,16 @@
-const path           = require('path'),
-      buildTarget    = require('./buildTarget.json'),
-      processRoot    = process.cwd(),
-      packageJson    = require(path.resolve(processRoot, 'package.json')),
+import fs      from 'fs-extra';
+import path    from 'path';
+import webpack from 'webpack';
+
+const cwd            = process.cwd(),
+      requireJson    = path => JSON.parse(fs.readFileSync((path))),
+      packageJson    = requireJson(path.resolve(cwd, 'package.json')),
       neoPath        = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
-      filenameConfig = require(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
-      entry          = {},
-      webpack        = require('webpack');
+      buildTarget    = requireJson(path.resolve(neoPath, 'buildScripts/webpack/production/buildTarget.json')),
+      filenameConfig = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/build.json')),
+      entry          = {};
 
-module.exports = env => {
+export default env => {
     let insideNeo = env.insideNeo == 'true';
 
     if (filenameConfig.workers) {
@@ -42,7 +45,7 @@ module.exports = env => {
                 }
             },
 
-            path: path.resolve(processRoot, buildTarget.folder)
+            path: path.resolve(cwd, buildTarget.folder)
         }
     }
 };

package/buildScripts/webpack/{webpack.server.config.js → webpack.server.config.mjs}

@@ -1,7 +1,7 @@
-module.exports = {
+export default {
     mode: 'production',
 
     devServer: {
         static: process.cwd()
     }
-};
+};

package/docs/app/view/classdetails/MembersList.mjs

@@ -83,9 +83,7 @@ class MembersList extends Base {
      * @protected
      */
     afterSetFilterMembersQuery(value, oldValue) {
-        if (oldValue !== undefined) {
-            this.onRefreshClassMembers();
-        }
+        oldValue !== undefined && this.onRefreshClassMembers();
     }
 
     /**
@@ -95,9 +93,7 @@ class MembersList extends Base {
      * @protected
      */
     afterSetShowProtectedMembers(value, oldValue) {
-        if (oldValue !== undefined) {
-            this.onRefreshClassMembers();
-        }
+        oldValue !== undefined && this.onRefreshClassMembers();
     }
 
     /**
@@ -107,9 +103,7 @@ class MembersList extends Base {
      * @protected
      */
     afterSetShowPrivateMembers(value, oldValue) {
-        if (oldValue !== undefined) {
-            this.onRefreshClassMembers();
-        }
+        oldValue !== undefined && this.onRefreshClassMembers();
     }
 
     /**
@@ -119,9 +113,7 @@ class MembersList extends Base {
      * @protected
      */
     afterSetShowStaticMembers(value, oldValue) {
-        if (oldValue !== undefined) {
-            this.onRefreshClassMembers();
-        }
+        oldValue !== undefined && this.onRefreshClassMembers();
     }
 
     /**
@@ -547,8 +539,10 @@ class MembersList extends Base {
 
         filters.push({
             scope   : me,
-            filterBy: function(item, filteredItems, allItems) {
+            filterBy: function(opts) {
                 let me              = this,
+                    filteredItems   = opts.filteredItems,
+                    item            = opts.item,
                     targetClassName = me.targetClassName,
                     filteredItem, i, len;
 

package/examples/list/animate/List.mjs

@@ -36,7 +36,7 @@ class List extends BaseList {
 
         return [
             {cls: ['neo-list-item-content'], id: `${id}__content`, cn: [
-                {tag: 'img', id: `${id}__image`, src: `../../../resources/examples/${record.image}`},
+                {tag: 'img', id: `${id}__image`, src: `${Neo.config.resourcesPath}examples/${record.image}`},
                 {cls: ['neo-list-item-text'], id: `${id}__content_wrapper`, cn: [
                     {html: record.firstname, id: `${id}__firstname`},
                     {cls: ['neo-lastname'],  id: `${id}__lastname`, html: record.lastname},

package/examples/list/animate/MainContainer.mjs

@@ -1,8 +1,10 @@
-import CheckBox  from '../../../src/form/field/CheckBox.mjs';
-import List      from './List.mjs';
-import MainStore from './MainStore.mjs';
-import Toolbar   from '../../../src/container/Toolbar.mjs';
-import Viewport  from '../../../src/container/Viewport.mjs';
+import CheckBox    from '../../../src/form/field/CheckBox.mjs';
+import List        from './List.mjs';
+import MainStore   from './MainStore.mjs';
+import NumberField from '../../../src/form/field/Number.mjs';
+import TextField   from '../../../src/form/field/Text.mjs';
+import Toolbar     from '../../../src/container/Toolbar.mjs';
+import Viewport    from '../../../src/container/Viewport.mjs';
 
 /**
  * @class Neo.examples.list.animate.MainContainer
@@ -54,6 +56,27 @@ class MainContainer extends Viewport {
                 listeners : {change: me.changeIsOnlineFilter.bind(me)},
                 style     : {marginLeft: '50px'}
             }]
+        }, {
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Search',
+            labelWidth: 60,
+            listeners : {change: me.changeNameFilter.bind(me)},
+            style     : {marginLeft: '10px'},
+            width     : 262
+        }, {
+            module              : NumberField,
+            clearToOriginalValue: true,
+            flex                : 'none',
+            labelText           : 'Transition Duration',
+            labelWidth          : 150,
+            listeners           : {change: me.changeTransitionDuration.bind(me)},
+            maxValue            : 5000,
+            minValue            : 100,
+            stepSize            : 100,
+            style               : {marginLeft: '10px'},
+            value               : 500,
+            width               : 262
         }, {
             module: List,
             store : MainStore
@@ -69,6 +92,15 @@ class MainContainer extends Viewport {
         store.getFilter('isOnline').disabled = !data.value;
     }
 
+    /**
+     * @param {Object} data
+     */
+    changeNameFilter(data) {
+        let store = this.down({module: List}).store;
+
+        store.getFilter('name').value = data.value;
+    }
+
     /**
      * @param {String} property
      * @param {Object} data
@@ -97,6 +129,13 @@ class MainContainer extends Viewport {
 
         me.sortBy = property;
     }
+
+    /**
+     * @param {Object} data
+     */
+    changeTransitionDuration(data) {
+        this.down({module: List}).getPlugin('animate').transitionDuration = data.value;
+    }
 }
 
 Neo.applyClassConfig(MainContainer);

package/examples/list/animate/MainStore.mjs

@@ -17,6 +17,23 @@ class MainStore extends Store {
             disabled : true,
             property : 'isOnline',
             value    : true
+        }, {
+            property : 'name',
+            value    : null,
+
+            filterBy: opts => {
+                let record = opts.item,
+                    value  = opts.value?.toLowerCase();
+
+                if (value) {
+                    return !(
+                        record.firstname.toLowerCase().includes(value) ||
+                        record.lastname .toLowerCase().includes(value)
+                    );
+                }
+
+                return false;
+            }
         }],
 
         sorters: [{