@phoenix-cg/v-filters 0.2.0-beta.8 → 0.2.0

package/.browserslistrc

@@ -1,3 +1,3 @@
-> 1%
-last 2 versions
-not dead
+> 1%
+last 2 versions
+not dead

package/.eslintrc.js

@@ -1,26 +1,26 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  extends: ["plugin:vue/essential", "eslint:recommended"],
-  parserOptions: {
-    parser: "babel-eslint"
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    'quotes': ['error', 'single']
-  },
-  overrides: [
-    {
-      files: [
-        "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)"
-      ],
-      env: {
-        jest: true
-      }
-    }
-  ]
-};
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended"],
+  parserOptions: {
+    parser: "babel-eslint"
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'quotes': ['error', 'single']
+  },
+  overrides: [
+    {
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+};

package/README.md

@@ -1,40 +1,40 @@
-# v-filters
-
-## Project setup
-```
-npm install @phoenix-cg/v-filters
-```
-
-## Props
-
-| Props              | Description                                                                                                                      | Default value  |
-|--------------------|----------------------------------------------------------------------------------------------------------------------------------|----------------|
-| componentsMap      | [Object], required. Object with components name mapping to field types                                                           | none           |
-| fieldComponentName | [String] Component for field rendering. Should has "title" prop and a slot for field component                                   | v-filter-field |
-| fields             | [Array], required. Array with fields                                                                                             | none           |
-| showWords          | [Array] Array with words to put before found result count. First element should be in future tense and a last one in past tense. | []             |
-| notFoundTitle      | [String] Will be shown in button if count is 0                                                                                   | ''             |
-| declensionWords    | [Array] Array of words to put after found result count.                                                                          | []             |
-| count              | [Number] Found count                                                                                                             | 0              |
-| showParams         | [Boolean] If true current filters state will be reflected in page query params.                                                  | true           |
-| isResultShown      | [Boolean] If true action button title will be constructed in past tense                                                          | false          |
-| humanLink          | [String] Human link feature                                                                                                      | ''             |
-| editedOutside      | [Boolean] If true reset button will be shown even if the v-filters itself is untouched.                                          | false          |
-| immediate          | [Boolean] If true action button will not be shown and show-result event will fire immediately after change                       | false          |
-
-## Slots
-
-| Slot          | Description                             | Scope                                                  |
-|---------------|-----------------------------------------|--------------------------------------------------------|
-| before-fields | Slot to place anything before fields    | none                                                   |
-| after-fields  | Slot to place anything after fields     | none                                                   |
-| actions       | Slot for actions. Displays after fields | { showResult, resetFilters, count, immediate, edited } |
-| actions-after | Slot for actions. Displays after fields | { showResult, resetFilters, count, immediate, edited } |
-
-## Events
-
-| Event         | Description         | Payload                                 |
-|---------------|---------------------|-----------------------------------------|
-| request-count | Request count event | flatFilters: { ..., name: [1, 2] ,... } |
-| show-result   | Show result event   | flatFilters: { ..., name: [1, 2],...  } |
+# v-filters
+
+## Project setup
+```
+npm install @phoenix-cg/v-filters
+```
+
+## Props
+
+| Props              | Description                                                                                                                      | Default value  |
+|--------------------|----------------------------------------------------------------------------------------------------------------------------------|----------------|
+| componentsMap      | [Object], required. Object with components name mapping to field types                                                           | none           |
+| fieldComponentName | [String] Component for field rendering. Should has "title" prop and a slot for field component                                   | v-filter-field |
+| fields             | [Array], required. Array with fields                                                                                             | none           |
+| showWords          | [Array] Array with words to put before found result count. First element should be in future tense and a last one in past tense. | []             |
+| notFoundTitle      | [String] Will be shown in button if count is 0                                                                                   | ''             |
+| declensionWords    | [Array] Array of words to put after found result count.                                                                          | []             |
+| count              | [Number] Found count                                                                                                             | 0              |
+| showParams         | [Boolean] If true current filters state will be reflected in page query params.                                                  | true           |
+| isResultShown      | [Boolean] If true action button title will be constructed in past tense                                                          | false          |
+| humanLink          | [String] Human link feature                                                                                                      | ''             |
+| editedOutside      | [Boolean] If true reset button will be shown even if the v-filters itself is untouched.                                          | false          |
+| immediate          | [Boolean] If true action button will not be shown and show-result event will fire immediately after change                       | false          |
+
+## Slots
+
+| Slot          | Description                             | Scope                                                  |
+|---------------|-----------------------------------------|--------------------------------------------------------|
+| before-fields | Slot to place anything before fields    | none                                                   |
+| after-fields  | Slot to place anything after fields     | none                                                   |
+| actions       | Slot for actions. Displays after fields | { showResult, resetFilters, count, immediate, edited } |
+| actions-after | Slot for actions. Displays after fields | { showResult, resetFilters, count, immediate, edited } |
+
+## Events
+
+| Event         | Description         | Payload                                 |
+|---------------|---------------------|-----------------------------------------|
+| request-count | Request count event | flatFilters: { ..., name: [1, 2] ,... } |
+| show-result   | Show result event   | flatFilters: { ..., name: [1, 2],...  } |
 | reset-filters | Reset filters event | none                                    |

package/babel.config.js

@@ -1,3 +1,3 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

package/dist/v-filters.common.js

@@ -539,6 +539,39 @@ $({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') },
 });
 
 
+/***/ }),
+
+/***/ "25f0":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var redefine = __webpack_require__("6eeb");
+var anObject = __webpack_require__("825a");
+var fails = __webpack_require__("d039");
+var flags = __webpack_require__("ad6d");
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var nativeToString = RegExpPrototype[TO_STRING];
+
+var NOT_GENERIC = fails(function () { return nativeToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = nativeToString.name != TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  redefine(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject(this);
+    var p = String(R.source);
+    var rf = R.flags;
+    var f = String(rf === undefined && R instanceof RegExp && !('flags' in RegExpPrototype) ? flags.call(R) : rf);
+    return '/' + p + '/' + f;
+  }, { unsafe: true });
+}
+
+
 /***/ }),
 
 /***/ "2a62":
@@ -4374,8 +4407,8 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3db49b26-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/VFilters.vue?vue&type=template&id=37f7dd45&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"v-filters"},[_c('div',{staticClass:"v-filters_fields"},[_vm._t("before-fields"),_vm._l((_vm.fields),function(field){return _c(_vm.fieldComponentName,{key:field._name,tag:"component",attrs:{"title":field.title}},[_c(_vm.componentsMap[field._type],_vm._b({key:_vm.fieldKey,tag:"component",on:{"input":function($event){return _vm.handleFieldChange(field._name)}},model:{value:(_vm.filters[field._name]),callback:function ($$v) {_vm.$set(_vm.filters, field._name, $$v)},expression:"filters[field._name]"}},'component',field._fieldProps || {},false))],1)}),_vm._t("after-fields"),_vm._t("actions",[_c(_vm.fieldComponentName,{tag:"component"},[(!_vm.immediate)?_c('button',{staticClass:"v-button v-filters_button",on:{"click":_vm.showResult}},[_vm._v(" "+_vm._s(_vm.actionTitle)+" ")]):_vm._e(),(_vm.edited)?_c('button',{staticClass:"v-button v-filters_button __reset",on:{"click":_vm.resetFilters}},[_vm._v(" Сбросить параметры ")]):_vm._e()])],null,{
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"48b26f89-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/VFilters.vue?vue&type=template&id=0eb82076&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"v-filters"},[_c('div',{staticClass:"v-filters_fields"},[_vm._t("before-fields"),_vm._l((_vm.fields),function(field){return _c(_vm.fieldComponentName,{key:field._name,tag:"component",class:[("__" + (field._name))],attrs:{"title":field.title}},[_c(_vm.componentsMap[field._type],_vm._b({key:_vm.fieldKey,tag:"component",on:{"input":function($event){return _vm.handleFieldChange(field._name, $event)}},model:{value:(_vm.filters[field._name]),callback:function ($$v) {_vm.$set(_vm.filters, field._name, $$v)},expression:"filters[field._name]"}},'component',field._fieldProps || {},false))],1)}),_vm._t("after-fields"),_vm._t("actions",[_c(_vm.fieldComponentName,{tag:"component"},[(!_vm.immediate)?_c('button',{staticClass:"v-button v-filters_button",on:{"click":_vm.showResult}},[_vm._v(" "+_vm._s(_vm.actionTitle)+" ")]):_vm._e(),(_vm.edited)?_c('button',{staticClass:"v-button v-filters_button __reset",on:{"click":_vm.resetFilters}},[_vm._v(" Сбросить параметры ")]):_vm._e()])],null,{
         showResult: _vm.showResult,
         resetFilters: _vm.resetFilters,
         count: _vm.count,
@@ -4391,7 +4424,7 @@ var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._sel
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/VFilters.vue?vue&type=template&id=37f7dd45&
+// CONCATENATED MODULE: ./src/components/VFilters.vue?vue&type=template&id=0eb82076&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.keys.js
 var es_object_keys = __webpack_require__("b64b");
@@ -4617,6 +4650,9 @@ var es_array_map = __webpack_require__("d81d");
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
 var es_array_reduce = __webpack_require__("13d5");
 
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.to-string.js
+var es_regexp_to_string = __webpack_require__("25f0");
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.find.js
 var es_array_find = __webpack_require__("7db0");
 
@@ -5125,6 +5161,8 @@ _curry2(function equals(a, b) {
 
 
 
+
+
 //
 //
 //
@@ -5246,7 +5284,7 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
       default: false
     },
     humanLink: {
-      type: String
+      type: Object
     },
     editedOutside: {
       type: Boolean,
@@ -5265,6 +5303,18 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
       default: function _default() {
         return [];
       }
+    },
+    paramsToInclude: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    notArrayValueFields: {
+      type: Array,
+      default: function _default() {
+        return ['select', 'tab'];
+      }
     }
   },
   data: function data() {
@@ -5314,6 +5364,13 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
       handler: function handler() {
         this.setFilters(true);
       }
+    },
+    paramsToInclude: {
+      deep: true,
+      handler: function handler(newVal, oldVal) {
+        console.log(newVal, oldVal);
+        this.setUrlParams(true);
+      }
     }
   },
   created: function created() {
@@ -5326,7 +5383,8 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
       var params = this.getUrlParams();
       this.fields.forEach(function (field) {
         var value = field._type === 'range' ? field.value : [];
-        var valueNotArray = ['select', 'tab'].includes(field._type);
+
+        var valueNotArray = _this2.notArrayValueFields.includes(field._type);
 
         if (valueNotArray) {
           var _field$value = _slicedToArray(field.value, 1);
@@ -5341,12 +5399,20 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
             value = field.data.reduce(function (acc, item) {
               var itemVal = item._id || item;
 
-              if (paramsValue.indexOf(itemVal) > -1) {
+              if (paramsValue.includes(itemVal.toString())) {
                 acc.push(item);
               }
 
               return acc;
             }, []);
+
+            if (valueNotArray) {
+              var _value = value;
+
+              var _value2 = _slicedToArray(_value, 1);
+
+              value = _value2[0];
+            }
           } else {
             value = paramsValue;
           }
@@ -5408,11 +5474,12 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
 
         _this2.$set(_this2.filters, field._name, value);
       });
-      this.setUrlParams(isUpdate);
+      !isUpdate && this.setUrlParams();
       !isUpdate && this.doAction(true);
     },
     resetFilters: function resetFilters() {
       this.editedFields = [];
+      this.setUrlParams(true, {});
       this.$emit('reset-filters', this.flatFilters);
     },
     addEditedField: function addEditedField(name) {
@@ -5420,6 +5487,11 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
         this.editedFields.push(name);
       }
     },
+    removeEditedField: function removeEditedField(name) {
+      this.editedFields = this.editedFields.filter(function (fieldName) {
+        return fieldName !== name;
+      });
+    },
     removeDependentFieldsFromEdited: function removeDependentFieldsFromEdited(name) {
       var field = this.fields.find(function (field) {
         return field._name === name;
@@ -5437,10 +5509,9 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
       }
     },
     doAction: function doAction() {
-      var both = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var showResult = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
-      if (both) {
-        this.requestCount();
+      if (showResult) {
         this.showResult();
       } else {
         this.immediate ? this.showResult() : this.requestCount();
@@ -5450,36 +5521,20 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
       this.$emit('request-count', this.flatFilters);
     },
     showResult: function showResult() {
+      this.setUrlParams();
       this.$emit('show-result', this.flatFilters);
     },
     getUrlParams: function getUrlParams() {
       return VFiltersvue_type_script_lang_js_unserialize(window.location.search);
     },
-    setUrlParams: function setUrlParams(reset) {
+    setUrlParams: function setUrlParams(isUpdate, rewriteParams) {
       if (this.showParams) {
-        var params = this.getUrlParams();
-
-        for (var name in this.filters) {
-          var filterValue = this.filters[name];
-
-          if (this.editedFields.includes(name)) {
-            if (Array.isArray(filterValue) && filterValue.length > 0) {
-              params[name] = filterValue.map(function (val) {
-                return val._id || val;
-              });
-            } else if (filterValue instanceof Object) {
-              filterValue = _objectSpread2({}, filterValue);
-              params[name] = [filterValue._id];
-            }
-          } else {
-            delete params[name];
-          }
-        }
+        var params = rewriteParams || _objectSpread2(_objectSpread2({}, this.flatFilters), this.paramsToInclude);
 
         var currentParams = this.getUrlParams();
         var newParamsLength = Object.keys(params).length;
 
-        if ((newParamsLength && !es_equals(params, currentParams) || reset) && !this.humanLink) {
+        if ((newParamsLength && !es_equals(params, currentParams) || isUpdate || rewriteParams) && !this.humanLink) {
           var query = VFiltersvue_type_script_lang_js_serialize(params);
           var url = window.location.origin + window.location.pathname + "".concat(newParamsLength ? '?' : '').concat(query);
           history.replaceState({
@@ -5488,10 +5543,14 @@ var VFiltersvue_type_script_lang_js_unserialize = function unserialize(input) {
         }
       }
     },
-    handleFieldChange: function handleFieldChange(name) {
-      this.addEditedField(name);
-      this.removeDependentFieldsFromEdited(name);
-      this.setUrlParams();
+    handleFieldChange: function handleFieldChange(name, value) {
+      if (value !== null) {
+        this.addEditedField(name);
+        this.removeDependentFieldsFromEdited(name);
+      } else {
+        this.removeEditedField(name);
+      }
+
       this.doAction();
     }
   }