diff --git a/.gitignore b/.gitignore index 1a843e7..f5899da 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ .DS_Store node_modules/ -/dist/ +#/dist/ npm-debug.log* yarn-debug.log* yarn-error.log* diff --git a/README.md b/README.md index ba2c2ef..b5324df 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,30 @@ - - +# 0. How this repo differs from original as of September, 8th 2020 +- Fixed issue with per_page_pesc locale string. In original repo this functionality was added by separate PR and applied only to card_mode. Also data() variable was not initialized +- MultiSelect filter here has following features: if filter.search_filter_input is set - render special input to filter options (easily find needed option in long list), completely rewritten MultiSelect - originally it uses indexes of options in array for work. Now we have array of selected objects (options) and do all finds by value attribute. filter.search_filter_input = { visibility: true, text: 'placeholder text' } +- That means that value attribute in options list is absolutely required. +- Also filter.init.value now has to contain value strings (values) instead of indexes as of in original repo. Values that are not found in options array are ignored +filter.init.value has to be array when it's multi mode, string if isSingleMode +- "Select all" checkbox on MultiSelect filter now has indeterminate state. Expected behavoir: if no option is selected "Select all" is unchecked; if all existing options are selected - it is checked; if some option(s) selected - checkbox is indeterminate. When user filters options and clicks "Select all" - only filtered options are selected leading to indeterminate checkbox state if there are unchecked filtered out options. +- Redesigned logic of footer and header in both modes (regular and card). Use following syntax to configure footer within config object +```vue + boxes: { + bottom: [ + { class: 'col-md-4', contents: ['pagination'] }, + { class: 'col-md-4', contents: ['pagination_info'] }, + { class: 'col-md-4 text-right', contents: ['selected_rows_info', 'selected_rows_action'] } // custom slot + ], + top: [ + ], + } +``` +We have some predefined content boxes: pagination, pagination_info, selected_rows_info, vbt-action-buttons, global_search, refresh_reset_buttons. +BREAKING CHANGE: slot in footer and header no receive only prop - data_object, which contains all previously known props +You can override them as you wish +Also see App.vue for example of disabling and enabling action buttons in footer + +- New feature: if row object contains 'subrow_data' property, additional subrow (tr) will be rendered. subrow_data property can be subset of data or simply boolean just to indicate that we need subrow here. This subrow (tr) contains slot named "subrow" (receives row prop), which is rendering td with colspan columns.length+1, but can be easily overridden but specifing slot with another set of columns or the same with any html markup inside (bootstrap columns wrapped in for example) +- Expand/collapse subrow trigger is specified in table config as class name for any element you put inside your columns. Default is toggle_subrow element +- sticky_footer option in config. When sticky_footer: true & card_mode: true - footer becomes sticky diff --git a/dist/vue-bootstrap4-table.esm.js b/dist/vue-bootstrap4-table.esm.js new file mode 100644 index 0000000..6c24ce1 --- /dev/null +++ b/dist/vue-bootstrap4-table.esm.js @@ -0,0 +1 @@ +import Vue from"vue";function baseFindIndex(t,e,n,r){for(var i=t.length,o=n+(r?1:-1);r?o--:++o-1}var _listCacheHas=listCacheHas;function listCacheSet(t,e){var n=this.__data__,r=_assocIndexOf(n,t);return r<0?(++this.size,n.push([t,e])):n[r][1]=e,this}var _listCacheSet=listCacheSet;function ListCache(t){var e=-1,n=null==t?0:t.length;for(this.clear();++ea))return!1;var c=o.get(t),u=o.get(e);if(c&&u)return c==e&&u==t;var d=-1,p=!0,h=n&COMPARE_UNORDERED_FLAG?new _SetCache:void 0;for(o.set(t,e),o.set(e,t);++d-1&&t%1==0&&t-1&&t%1==0&&t<=MAX_SAFE_INTEGER$1}var isLength_1=isLength,argsTag$1="[object Arguments]",arrayTag="[object Array]",boolTag$1="[object Boolean]",dateTag$1="[object Date]",errorTag$1="[object Error]",funcTag$1="[object Function]",mapTag$1="[object Map]",numberTag$1="[object Number]",objectTag="[object Object]",regexpTag$1="[object RegExp]",setTag$1="[object Set]",stringTag$1="[object String]",weakMapTag="[object WeakMap]",arrayBufferTag$1="[object ArrayBuffer]",dataViewTag$1="[object DataView]",float32Tag="[object Float32Array]",float64Tag="[object Float64Array]",int8Tag="[object Int8Array]",int16Tag="[object Int16Array]",int32Tag="[object Int32Array]",uint8Tag="[object Uint8Array]",uint8ClampedTag="[object Uint8ClampedArray]",uint16Tag="[object Uint16Array]",uint32Tag="[object Uint32Array]",typedArrayTags={};function baseIsTypedArray(t){return isObjectLike_1(t)&&isLength_1(t.length)&&!!typedArrayTags[_baseGetTag(t)]}typedArrayTags[float32Tag]=typedArrayTags[float64Tag]=typedArrayTags[int8Tag]=typedArrayTags[int16Tag]=typedArrayTags[int32Tag]=typedArrayTags[uint8Tag]=typedArrayTags[uint8ClampedTag]=typedArrayTags[uint16Tag]=typedArrayTags[uint32Tag]=!0,typedArrayTags[argsTag$1]=typedArrayTags[arrayTag]=typedArrayTags[arrayBufferTag$1]=typedArrayTags[boolTag$1]=typedArrayTags[dataViewTag$1]=typedArrayTags[dateTag$1]=typedArrayTags[errorTag$1]=typedArrayTags[funcTag$1]=typedArrayTags[mapTag$1]=typedArrayTags[numberTag$1]=typedArrayTags[objectTag]=typedArrayTags[regexpTag$1]=typedArrayTags[setTag$1]=typedArrayTags[stringTag$1]=typedArrayTags[weakMapTag]=!1;var _baseIsTypedArray=baseIsTypedArray;function baseUnary(t){return function(e){return t(e)}}var _baseUnary=baseUnary,_nodeUtil=createCommonjsModule(function(t,e){var n=e&&!e.nodeType&&e,r=n&&t&&!t.nodeType&&t,i=r&&r.exports===n&&_freeGlobal.process,o=function(){try{var t=r&&r.require&&r.require("util").types;return t||i&&i.binding&&i.binding("util")}catch(t){}}();t.exports=o}),nodeIsTypedArray=_nodeUtil&&_nodeUtil.isTypedArray,isTypedArray=nodeIsTypedArray?_baseUnary(nodeIsTypedArray):_baseIsTypedArray,isTypedArray_1=isTypedArray,objectProto$7=Object.prototype,hasOwnProperty$5=objectProto$7.hasOwnProperty;function arrayLikeKeys(t,e){var n=isArray_1(t),r=!n&&isArguments_1(t),i=!n&&!r&&isBuffer_1(t),o=!n&&!r&&!i&&isTypedArray_1(t),s=n||r||i||o,a=s?_baseTimes(t.length,String):[],l=a.length;for(var c in t)!e&&!hasOwnProperty$5.call(t,c)||s&&("length"==c||i&&("offset"==c||"parent"==c)||o&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||_isIndex(c,l))||a.push(c);return a}var _arrayLikeKeys=arrayLikeKeys,objectProto$8=Object.prototype;function isPrototype(t){var e=t&&t.constructor;return t===("function"==typeof e&&e.prototype||objectProto$8)}var _isPrototype=isPrototype;function overArg(t,e){return function(n){return t(e(n))}}var _overArg=overArg,nativeKeys=_overArg(Object.keys,Object),_nativeKeys=nativeKeys,objectProto$9=Object.prototype,hasOwnProperty$6=objectProto$9.hasOwnProperty;function baseKeys(t){if(!_isPrototype(t))return _nativeKeys(t);var e=[];for(var n in Object(t))hasOwnProperty$6.call(t,n)&&"constructor"!=n&&e.push(n);return e}var _baseKeys=baseKeys;function isArrayLike(t){return null!=t&&isLength_1(t.length)&&!isFunction_1(t)}var isArrayLike_1=isArrayLike;function keys(t){return isArrayLike_1(t)?_arrayLikeKeys(t):_baseKeys(t)}var keys_1=keys;function getAllKeys(t){return _baseGetAllKeys(t,keys_1,_getSymbols)}var _getAllKeys=getAllKeys,COMPARE_PARTIAL_FLAG$2=1,objectProto$a=Object.prototype,hasOwnProperty$7=objectProto$a.hasOwnProperty;function equalObjects(t,e,n,r,i,o){var s=n&COMPARE_PARTIAL_FLAG$2,a=_getAllKeys(t),l=a.length;if(l!=_getAllKeys(e).length&&!s)return!1;for(var c=l;c--;){var u=a[c];if(!(s?u in e:hasOwnProperty$7.call(e,u)))return!1}var d=o.get(t),p=o.get(e);if(d&&p)return d==e&&p==t;var h=!0;o.set(t,e),o.set(e,t);for(var f=s;++c-1:!!i&&_baseIndexOf(t,e,n)>-1}var includes_1=includes;function baseMap(t,e){var n=-1,r=isArrayLike_1(t)?Array(t.length):[];return _baseEach(t,function(t,i,o){r[++n]=e(t,i,o)}),r}var _baseMap=baseMap;function map(t,e){return(isArray_1(t)?_arrayMap:_baseMap)(t,_baseIteratee(e,3))}var map_1=map,spreadableSymbol=_Symbol?_Symbol.isConcatSpreadable:void 0;function isFlattenable(t){return isArray_1(t)||isArguments_1(t)||!!(spreadableSymbol&&t&&t[spreadableSymbol])}var _isFlattenable=isFlattenable;function baseFlatten(t,e,n,r,i){var o=-1,s=t.length;for(n||(n=_isFlattenable),i||(i=[]);++o0&&n(a)?e>1?baseFlatten(a,e-1,n,r,i):_arrayPush(i,a):r||(i[i.length]=a)}return i}var _baseFlatten=baseFlatten;function flatten(t){return(null==t?0:t.length)?_baseFlatten(t,1):[]}var flatten_1=flatten,objectProto$c=Object.prototype,hasOwnProperty$9=objectProto$c.hasOwnProperty;function baseHas(t,e){return null!=t&&hasOwnProperty$9.call(t,e)}var _baseHas=baseHas;function has(t,e){return null!=t&&_hasPath(t,e,_baseHas)}var has_1=has,defineProperty=function(){try{var t=_getNative(Object,"defineProperty");return t({},"",{}),t}catch(t){}}(),_defineProperty=defineProperty;function baseAssignValue(t,e,n){"__proto__"==e&&_defineProperty?_defineProperty(t,e,{configurable:!0,enumerable:!0,value:n,writable:!0}):t[e]=n}var _baseAssignValue=baseAssignValue,objectProto$d=Object.prototype,hasOwnProperty$a=objectProto$d.hasOwnProperty;function assignValue(t,e,n){var r=t[e];hasOwnProperty$a.call(t,e)&&eq_1(r,n)&&(void 0!==n||e in t)||_baseAssignValue(t,e,n)}var _assignValue=assignValue;function copyObject(t,e,n,r){var i=!n;n||(n={});for(var o=-1,s=e.length;++o0){if(++e>=HOT_COUNT)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}var _shortOut=shortOut,setToString=_shortOut(_baseSetToString),_setToString=setToString;function baseRest(t,e){return _setToString(_overRest(t,e,identity_1),t+"")}var _baseRest=baseRest;function createAssigner(t){return _baseRest(function(e,n){var r=-1,i=n.length,o=i>1?n[i-1]:void 0,s=i>2?n[2]:void 0;for(o=t.length>3&&"function"==typeof o?(i--,o):void 0,s&&_isIterateeCall(n[0],n[1],s)&&(o=i<3?void 0:o,i=1),e=Object(e);++r=e||n<0||d&&t-c>=o}function _(){var t=now_1();if(f(t))return g(t);a=setTimeout(_,function(t){var n=e-(t-l);return d?nativeMin(n,o-(t-c)):n}(t))}function g(t){return a=void 0,p&&r?h(t):(r=i=void 0,s)}function m(){var t=now_1(),n=f(t);if(r=arguments,i=this,l=t,n){if(void 0===a)return function(t){return c=t,a=setTimeout(_,e),u?h(t):s}(l);if(d)return clearTimeout(a),a=setTimeout(_,e),h(l)}return void 0===a&&(a=setTimeout(_,e)),s}return e=toNumber_1(e)||0,isObject_1(n)&&(u=!!n.leading,o=(d="maxWait"in n)?nativeMax$4(toNumber_1(n.maxWait)||0,e):o,p="trailing"in n?!!n.trailing:p),m.cancel=function(){void 0!==a&&clearTimeout(a),c=0,r=l=i=a=void 0},m.flush=function(){return void 0===a?s:g(now_1())},m}var debounce_1=debounce;function arrayEach(t,e){for(var n=-1,r=null==t?0:t.length;++n-1}var _arrayIncludes=arrayIncludes;function arrayIncludesWith(t,e,n){for(var r=-1,i=null==t?0:t.length;++r=LARGE_ARRAY_SIZE$1&&(o=_cacheHas,s=!1,e=new _SetCache(e));t:for(;++i=120&&u.length>=120)?new _SetCache(s&&u):void 0}u=t[0];var d=-1,p=a[0];t:for(;++de||o&&s&&l&&!a&&!c||r&&s&&l||!n&&l||!i)return 1;if(!r&&!o&&!c&&t=a?l:l*("desc"==n[r]?-1:1)}return t.index-e.index}var _compareMultiple=compareMultiple;function baseOrderBy(t,e,n){e=e.length?_arrayMap(e,function(t){return isArray_1(t)?function(e){return _baseGet(e,1===t.length?t[0]:t)}:t}):[identity_1];var r=-1;e=_arrayMap(e,_baseUnary(_baseIteratee));var i=_baseMap(t,function(t,n,i){return{criteria:_arrayMap(e,function(e){return e(t)}),index:++r,value:t}});return _baseSortBy(i,function(t,e){return _compareMultiple(t,e,n)})}var _baseOrderBy=baseOrderBy;function orderBy(t,e,n,r){return null==t?[]:(isArray_1(e)||(e=null==e?[]:[e]),isArray_1(n=r?void 0:n)||(n=null==n?[]:[n]),_baseOrderBy(t,e,n))}var orderBy_1=orderBy;function baseSlice(t,e,n){var r=-1,i=t.length;e<0&&(e=-e>i?0:i+e),(n=n>i?i:n)<0&&(n+=i),i=e>n?0:n-e>>>0,e>>>=0;for(var o=Array(i);++r1),e}),_copyObject(t,_getAllKeysIn(t),n),r&&(n=_baseClone(n,CLONE_DEEP_FLAG$2|CLONE_FLAT_FLAG$1|CLONE_SYMBOLS_FLAG$2,_customOmitClone));for(var i=e.length;i--;)_baseUnset(n,e[i]);return n}),omit_1=omit,CLONE_SYMBOLS_FLAG$3=4;function clone(t){return _baseClone(t,CLONE_SYMBOLS_FLAG$3)}var clone_1=clone,script={name:"CheckBox",props:{rowsSelectable:{type:Boolean,default:!1},rowSelected:{type:Boolean,required:!0}},data:function(){return{checkboxSelected:!1}},methods:{selectCheckbox:function(t){this.checkboxSelected?this.$emit("remove-row",t.shiftKey):this.$emit("add-row",t.shiftKey)}},watch:{rowSelected:function(t,e){this.checkboxSelected=t}}};function normalizeComponent(t,e,n,r,i,o,s,a,l,c){"boolean"!=typeof s&&(l=a,a=s,s=!1);var u,d="function"==typeof n?n.options:n;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),r&&(d._scopeId=r),o?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=u):e&&(u=s?function(){e.call(this,c(this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),u)if(d.functional){var p=d.render;d.render=function(t,e){return u.call(e),p(t,e)}}else{var h=d.beforeCreate;d.beforeCreate=h?[].concat(h,u):[u]}return n}var normalizeComponent_1=normalizeComponent,isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(t){return function(t,e){return addStyle(t,e)}}var HEAD=document.head||document.getElementsByTagName("head")[0],styles={};function addStyle(t,e){var n=isOldIE?e.media||"default":t,r=styles[n]||(styles[n]={ids:new Set,styles:[]});if(!r.ids.has(t)){r.ids.add(t);var i=e.source;if(e.map&&(i+="\n/*# sourceURL="+e.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",e.media&&r.element.setAttribute("media",e.media),HEAD.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(i),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{var o=r.ids.size-1,s=document.createTextNode(i),a=r.element.childNodes;a[o]&&r.element.removeChild(a[o]),a.length?r.element.insertBefore(s,a[o]):r.element.appendChild(s)}}}var browser=createInjector,__vue_script__=script,__vue_render__=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("td",t._g({staticClass:"text-center"},t.rowsSelectable?{}:{click:function(e){return t.selectCheckbox(e)}}),[n("div",{staticClass:"custom-control custom-checkbox"},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.checkboxSelected,expression:"checkboxSelected"}],staticClass:"custom-control-input vbt-checkbox",attrs:{type:"checkbox"},domProps:{checked:Array.isArray(t.checkboxSelected)?t._i(t.checkboxSelected,null)>-1:t.checkboxSelected},on:{change:function(e){var n=t.checkboxSelected,r=e.target,i=!!r.checked;if(Array.isArray(n)){var o=t._i(n,null);r.checked?o<0&&(t.checkboxSelected=n.concat([null])):o>-1&&(t.checkboxSelected=n.slice(0,o).concat(n.slice(o+1)))}else t.checkboxSelected=i}}}),t._v(" "),n("label",{staticClass:"custom-control-label"})])])},__vue_staticRenderFns__=[];__vue_render__._withStripped=!0;var __vue_inject_styles__=function(t){t&&t("data-v-8fd02b20_0",{source:"\n.custom-control-label[data-v-8fd02b20] {\r\n vertical-align: top;\n}\r\n\r\n",map:{version:3,sources:["/mnt/e/Laravel/forks/vue-bootstrap4-table/src/components/CheckBox.vue"],names:[],mappings:";AA8CA;EACA,mBAAA;AACA",file:"CheckBox.vue",sourcesContent:['\r\n\r\n\r\n diff --git a/src/components/ConditionalSlot.vue b/src/components/ConditionalSlot.vue new file mode 100644 index 0000000..2650a96 --- /dev/null +++ b/src/components/ConditionalSlot.vue @@ -0,0 +1,210 @@ + + + + + \ No newline at end of file diff --git a/src/components/Filters/MultiSelect.vue b/src/components/Filters/MultiSelect.vue index 51e55a2..bf94c2e 100644 --- a/src/components/Filters/MultiSelect.vue +++ b/src/components/Filters/MultiSelect.vue @@ -5,8 +5,29 @@ {{title}} @@ -16,7 +37,9 @@ import findIndex from "lodash/findIndex"; import range from "lodash/range"; import filter from "lodash/filter"; +import find from "lodash/find"; import includes from "lodash/includes"; +import some from "lodash/some"; import map from "lodash/map"; import join from "lodash/join"; import has from "lodash/has"; @@ -25,6 +48,8 @@ import cloneDeep from "lodash/cloneDeep"; import MultiSelectItem from "./MultiSelectItem.vue"; import MultiSelectAllItem from "./MultiSelectAllItem.vue"; +import jQuery from 'jquery' + import { EventBus } from '../../event-bus.js'; @@ -49,8 +74,9 @@ export default { }, data: function () { return { - selected_option_indexes: [], - canEmit: false + selected_options: [], + canEmit: false, + search_filter_term: '' }; }, mounted() { @@ -60,22 +86,40 @@ export default { },false); } + jQuery('body').on('shown.bs.dropdown', (e) => { + jQuery('input[type="text"]', e.target).focus() + }) + EventBus.$on('reset-query', () => { - this.selected_option_indexes = []; + this.selected_options = []; }); let lastIndex = this.optionsCount - 1; if (has(this.column,'filter.init.value')) { + // gets array of "value"s if (this.isSingleMode) { - let index = this.column.filter.init.value; - if (index > lastIndex || index < 0) return; - this.addOption(index) + if(typeof this.column.filter.init.value != 'string'){ + console.log('Got array instead of string in init value of '+this.column.label) + return false + } + let selected_option = find(this.options, option => { + return option.value == this.column.filter.init.value + }) + + if(selected_option){ + this.addOption(selected_option) + } } else { if (Array.isArray(this.column.filter.init.value)) { - this.column.filter.init.value.forEach(index => { - if (index > lastIndex || index < 0) return; - this.addOption(index) + this.column.filter.init.value.forEach(value => { + let selected_option = find(this.options, option => { + return option.value == value + }) + + if(selected_option){ + this.addOption(selected_option) + } }); } else { console.log("Initial value for 'multi' mode should be an array"); @@ -86,38 +130,39 @@ export default { this.$nextTick(() => { this.canEmit = true }); }, methods: { - addOption(index) { + addOption(option) { if (this.isSingleMode) { this.resetSelectedOptions(); - this.selected_option_indexes.push(index); + this.selected_options.push(option); } else { - let res = findIndex(this.selected_option_indexes, function (option_index) { - return option_index == index; + let res = findIndex(this.selected_options, function (listed_option) { + return listed_option.value == option.value; }); + if (res == -1) { - this.selected_option_indexes.push(index); + this.selected_options.push(option); } } }, selectAllOptions() { this.resetSelectedOptions(); - this.selected_option_indexes = range(this.options.length); + this.selected_options = this.filteredOptions; }, - removeOption(index) { + removeOption(option) { if (this.isSingleMode) { this.resetSelectedOptions(); } else { - let res = findIndex(this.selected_option_indexes, function (option_index) { - return option_index == index; + let res = findIndex(this.selected_options, function (listed_option) { + return listed_option.value == option.value; }); if (res > -1) { - this.selected_option_indexes.splice(res, 1); + this.selected_options.splice(res, 1); } } }, resetSelectedOptions() { - this.selected_option_indexes = []; + this.selected_options = []; } }, components: { @@ -128,15 +173,30 @@ export default { optionsCount() { return this.options.length; }, + filteredOptions(){ + if(!this.search_filter_term){ + return this.options + } + + return filter(this.options, option => { + return option.name.toLowerCase().indexOf(this.search_filter_term.toLowerCase()) > -1; + +/* if(option.name.toLowerCase().indexOf(this.search_filter_term.toLowerCase()) > -1){ + option.visibility = true + } else { + option.visibility = false + }*/ + }); + }, title() { let title = (this.column.filter.placeholder) ? (this.column.filter.placeholder) : "Select options"; - if (this.selected_option_indexes.length === 0) { + if (this.selected_options.length === 0) { return title; } - if (this.selected_option_indexes.length > 0 && this.selected_option_indexes.length <= 1) { - return this.options[this.selected_option_indexes[0]].name; + if (this.selected_options.length > 0 && this.selected_options.length <= 1) { + return this.selected_options[0].name; // let filtered_options = filter(this.options, (option, index) => { // return includes(this.selected_option_indexes, index) // }); @@ -145,7 +205,10 @@ export default { // }); // return join(names, ", "); } else { - return this.column.filter.selectedText.replace('{number}', this.selected_option_indexes.length); + if(!this.column.filter.selectedText){ + return 'Selected: '+this.selected_options.length; + } + return this.column.filter.selectedText.replace('{number}', this.selected_options.length); } }, @@ -163,7 +226,13 @@ export default { }, isAllOptionsSelected() { - return this.options.length === this.selected_option_indexes.length; + return this.options.length === this.selected_options.length; + }, + notAllOptionsSelected(){ + if(this.options.length === this.selected_options.length){ + return false + } + return this.selected_options.length > 0; }, showSelectAllCheckbox() { @@ -173,22 +242,35 @@ export default { return this.column.filter.select_all_checkbox.visibility; } }, - selectAllCheckboxText() { if (!has(this.column.filter,"select_all_checkbox")) { return "Select All"; } else { return (has(this.column.filter.select_all_checkbox,"text")) ? this.column.filter.select_all_checkbox.text : "Select All" } - } + }, + showSearchFilterInput(){ + if (!has(this.column.filter,"search_filter_input")) { + return false; + } else { + return this.column.filter.search_filter_input.visibility || true; + } + }, + showSearchFilterInputPlaceholder() { + if (!has(this.column.filter,"search_filter_input")) { + return "Filter list"; + } else { + return (has(this.column.filter.search_filter_input,"text")) ? this.column.filter.search_filter_input.text : "Filter list" + } + }, }, watch: { - selected_option_indexes(newVal, oldVal) { + selected_options(newVal, oldVal) { if (!this.canEmit) return; let filtered_options = filter(this.options, (option, index) => { - return includes(newVal, index) + return some(newVal, option) }); let payload = {}; @@ -211,4 +293,7 @@ export default { max-height: 200px; overflow-x: hidden; } +.vtb-search-filter-input{ + padding: 0px 10px 5px 10px; +} diff --git a/src/components/Filters/MultiSelectAllItem.vue b/src/components/Filters/MultiSelectAllItem.vue index 0301941..6ddc364 100644 --- a/src/components/Filters/MultiSelectAllItem.vue +++ b/src/components/Filters/MultiSelectAllItem.vue @@ -2,7 +2,7 @@
- +
@@ -17,6 +17,10 @@ type: Boolean, default: false }, + notAllOptionsSelected: { + type: Boolean, + default: false + }, text: { type: String, default: "Any" diff --git a/src/components/Filters/MultiSelectItem.vue b/src/components/Filters/MultiSelectItem.vue index a9dc271..5b5c7e8 100644 --- a/src/components/Filters/MultiSelectItem.vue +++ b/src/components/Filters/MultiSelectItem.vue @@ -15,7 +15,7 @@