freearhey / vue2-filters Goto Github PK

I get this error when trying to use it in my Vue2 project along with Typescript on this line
import Vue2Filters from "vue2-filters";

(TS) Could not find a declaration file for module 'vue2-filters'. '/node_modules/vue2-filters/dist/vue2-filters.js' implicitly has an 'any' type. Try npm install @types/vue2-filters if it exists or add a new declaration (.d.ts) file containing `declare module 'vue2-filters

hello,

i have following

buttons

      <button @click="ordby('likes')">Sort by likes</button>
      <button>all</button>      
      <button>image</button>
      <button>video</button>

and my code is following

<div v-for="(value, key) in orderBy(obj,this.ord,-1)">
        <p>Likes: {{value.likes}}</p>
        <p>Type: {{value.type}}</p>
</div> 

so at the moment i can do the order by depend on likes when i click on the sort by likes but how i can do the filter also
is it possible to add the filterBy also in the v-for along with orderBy ??

and I have 3 conditions where I need to show all or show image or video

thanks in advance

vue2-filters/src/util/index.js
96 line
where is the range function

I think filterBy implementation is wrong. It searches a substring in a whole string instead of searching by first letters. For example, if I type "W" for ["Whatson", "Power", "Slower"] I must find Whatson only - not all of this words.

P. S. I've looked for Vue 1.0 implementation - it is the same, so... may be it's not bad. But still I think it's not what it must be. May be there must be another filter - searchBy, for example... Like google-search.

While working with a project i need to filter throw some of arguments like 'name', 'class', 'value' from one loop, so i used <div v-for="post in filterBy(projectlist, cityFilter, 'city' | localityFilter, 'city')" > , but it is not working, also i could't able to figure it out .

Hi, just wanted to know if you want to use vuejs-filters handle on npm. I made it before knowing there was a repo in github. I am about to delete it from npm as I never actually made the library (at least a working one)

let me know if you need it, so I can delete it and you can take it. I think it makes more sense to use vuejs-filters in my opinion

Aftetr install the plugin using NPM and applying it using
Vue.use(Vue2Filters);

i receive this error
Failed to resolve filter: pluralize

I tried to use this package in my SSR-based Vue project, but it not works:

   ReferenceError: window is not defined
    at Object.<anonymous> (/www/node_modules/vue2-filters/dist/vue2-filters.js:625:5)
    at __webpack_require__ (/www/node_modules/vue2-filters/dist/vue2-filters.js:30:30)
    at ArrayProto (/www/node_modules/vue2-filters/dist/vue2-filters.js:74:18)
    at /www/node_modules/vue2-filters/dist/vue2-filters.js:77:10
    at webpackUniversalModuleDefinition (/www/node_modules/vue2-filters/dist/vue2-filters.js:3:20)
    at Object.<anonymous> (/www/node_modules/vue2-filters/dist/vue2-filters.js:10:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at r (/www/node_modules/vue-server-renderer/build.js:5817:16)
    at Object.<anonymous> (__vue_ssr_bundle__:30158:18)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)

Error here because there is "if (window.Vue)" in code but window is undefined when code executes on server.

Thanks.

how to use in v-model?

Will be great if you allow to create my own custom filters, for example i want to create one filter for format date with the moment library

Example:

{{ user.created_at | date: LTS }}
// calls moment(date).format('LTS');

I got an error in IE11 and fixed it by changing:

var Vue2Filters = {
install(Vue) {

to:

var Vue2Filters = {
install: function(Vue) {

Just wanted to let you know!

how use currency in method vue?
row.push(item.price);

Version 4.0 with Nuxt 2.3.4 SSR ReferenceError window is not defined on node_modules\vue2-filters\dist\vue2-filters.js line 10.

Like mentioned in #43, there is no way to change default values, these are hard coded. A possible workaround is to define your own filter.

Could you please define defaults which you can overwrite on demand?

By older I mean android 5. The fix is to replace const with var in concurrency.js and orderBy.js .

Cheers

atm it ordersBy the number only, but is there a way to add the extra condition of kb / mb to the filter ?

Hello,

Hello,
I would like on the action 'click' of a button executed action / filter "filberBy ()".

Do you have a complete example to provide me?

Here is a part of my code (but it does not work) :

<b-checkbox @input="filterBy(this.liste,'str_search','lib_name')"  v-model="search" >esrs</b-checkbox> 
<article  v-for="item in filterBy(this.liste)" :key="item.id"  :id="item.lib">
...
</article>

Thank you.

Hi thanks and congratulations for your work =)
I have one doubt.
Sometimes i need order by name and age for example. How i can do this?
Have something like this? orderBy(users, ['name', 'age'], -1)

It's possible make this with the plugin in any other form?

Thanks again.

The array filters are implemented as methods in a mixin, which can cause problems if the names collide with methods in other components or mixins. (I just spent a couple hours tracking down why a 3rd party component wasn't working, and turned out they had a prop named filterBy that was getting clobbered by the filterBy method from vue-filters.

The names used are pretty common, so this is likely to cause many issues when you mix in the filters globally (as you do in Nuxt with a plugin).

Probably the best solution would be to namespace all the methods so they are unlikely to collide. E.g. vfOrderBy instead of orderBy. This could be optional so those who don't need it (they're using filters locally in a component instead of globally in an app) wouldn't have to use it.

As per the docs, the capitalize function should capitalize every separate word in the string. By default, our item.supplier is all capitals. I use the lowercase filter to lowercase everything, and use capitalize to capitalize the words.

So in short:
Initial string: "SOME STRING"
After lowercase: "some string"
After capitalize: "Some string"

I tried setting the prop onlyFirstLetter to false, but that doesn't work.

annotations.push({
  icon: 'briefcase',
  title: this.$options.filters.capitalize(
    this.$options.filters.lowercase(item.supplier),
  ),
});

https://github.com/freearhey/vue2-filters/blob/dev/src/array/filterBy.js#L49

for (let key in val) {
  if (contains(val[key], search)) {
    return true
  }
}

sample data :
{{fieldItem.value | placeholder('Not Specified')}}

When including via CDN (https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.min.js or https://cdn.jsdelivr.net/npm/vue2-filters/dist/vue2-filters.js), IE11 is showing a syntax error at line 215, which is as follows:

eval("__webpack_require__.r(__webpack_exports__);\n/**\n * Converts a string into Capitalize\n * \n * 'abc' => 'Abc'\n * \n * @param {Object} options\n */\n\nfunction capitalize (value, options) {\n options = options || {}\n var onlyFirstLetter = options.onlyFirstLetter != null ? options.onlyFirstLetter : false\n if (!value && value !== 0) return ''\n if(onlyFirstLetter === true) {\n return value.charAt(0).toUpperCase() + value.slice(1)\n } else {\n value = value.toString().toLowerCase().split(' ')\n return value.map( item => {\n return item.charAt(0).toUpperCase() + item.slice(1)\n }).join(' ')\n }\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (capitalize);\n\n\n//# sourceURL=webpack:///./src/string/capitalize.js?");

Thoughts on what the issue might be?

Thanks in advance!

As in a quantity-unit string, eg. "discance of 10 km", the string "need 10 items" is a value-label pair, and it is very commom... Need only a simple return value + ' ' + pluralize(value), or

function pluralize_qt (value) {
  var args = util.toArray(arguments, 1)
  var label = args.length > 1
    ? (args[value % 10 - 1] || args[args.length - 1])
    : (args[0] + (value === 1 ? '' : 's'));
  return value + ' '+ label;
}

function limitBy (arr, n, offset) {
offset = offset ? parseInt(offset, 10) : 0
n = WEBPACK_IMPORTED_MODULE_0__util_index["a" /* default */].toNumber(n)
return typeof n === 'number'
? arr.slice(offset, offset + n)
: arr
}

error
500 (Cannot read property 'slice' of undefined)

Hi!
I checked the source for the currency filter and realized that there is no way to specify the position of the
currency sign or specify if delimiters should be dots or commas.

In some locales like Swedish the rules for currency presentation is different e.g.
given 123456789 | currency('kr')
The filter produces:
kr1,234,567.89
But according to Swedish standard the formatting should be:
1 234 567,89 kr

In other words, I'd like to submit a feature-request to be able to control the decimal-separator and the thousand-separator and of course placement of currency-sign.

vue2-filters doesn't work with a secure/strong CSP.
Currently, vue2-filters only works if you add the unsafe-eval CSP directive. Bad practice and unsafe!

I have to use version 0.3.0 because multiple eval()'s are used in newer versions.

Example:

I have installed the vue2-filters in nuxt like described in the docs. The filters are working in my component template like this {{ someVaue | capitalize }}.

How can I use these filters in my component inside methods? Something like this for example:

<script>
export default {
  methods: {
    someMethod () {
      this.value = someValue | capitalize
    },
  }
}
</script>

I have come up to that you can access your filters trough this.$options.filters. But in case of my component this.$options.filters returns and empty object {}?

so i do know that we can do it like this in filters

// in my app.js
Vue.filter('date', function(value){
    return window.moment(value).format('DD-MM-YYYY');
});

and i just create a function in my component

// in my component
formatDate(value){
 return Vue.filter('date')(value);
}

and back to the same place i can just do like this

<div v-tooltip:top=" formatDate(props.value)"> // working fine
{{ props.value | date) }} // working fine
</div>

but i tried the same way as

// in my component
formatCurrency(value){
 return Vue.filter('currency')(value)('',0,{ thousandsSeparator: '.'});
}

and then

<div v-tooltip:top=" formatCurrencyprops.value)"> // not working
{{ props.value | currency('',0,{ thousandsSeparator: '.'}) }} // working fine
</div>

so how to fix it? i need the same filters in there

It's possible change the default options to a filter? Like Router Construction Options

Example:

import Vue from 'vue'
import Vue2Filters from 'vue2-filters'

Vue.use(Vue2Filters)

declare type Vue2FiltersConfig = {
  currency: {
        'R$ ',
        { thousandsSeparator: '.', decimalSeparator: ',' }
   }
}

Using...

{{ 12345 | currency }} // => R$ 12.345,00 (default)

I am trying to write unit tests for a component that uses the pluralize filter, but I cannot seem to get it to work. I came here looking for some examples on how to import it as part of a test, but there seems to be no documentation on how to properly mock it out. If you could add some testing examples to your documentation, it would be greatly appreciated. Thanks

I would love a filter to show only one match if there are multiples.

I am getting this error when I try to npm run build:

ERROR in build.js from UglifyJs Unexpected token: punc (() [./~/vue2-filters/dist/vue2-filters.js:294,0][build.js:50404,9]

Help =(

Pluralize does not appear to be working with a value of 0
https://jsfiddle.net/2v1wurca/

Hi,

Is it possible to get the currency euro-style, f.x. 1.000 instead of 1,000 ? I mean swapping the comma with a dot? :)

Heres the code that should work according to the documentation:
<li v-for="user in orderBy(users, 'name')">
but the sort will not work with this setup. But if we add another argument it will work:
<li v-for="user in orderBy(users, 'name', 'name')">

Same for the reverse sorting:
<li v-for="user in orderBy(users, 'name', -1)"> - doesnt work
<li v-for="user in orderBy(users, 'name', 'name', '-1')"> - works

I`ve checked the code for the orderBy filter. Seems the problem is in the way how the sortorder is retrieved and args array is adjusted after that and how the sortKey is retrieved after that. I can submit a pull request if needed.

Unexpected token: punc (() [./~/vue2-filters/dist/vue2-filters.js:294,0]

Hi @freearhey great plugin !. I have my models like this:
person: {"name": {"first": "Mark", "last": "Twain"}

Im using the filterBy method
person in filterBy (people, searchQuery, 'name.first', 'name.last')

It works great with single first name or last name, but when the searchQuery data model has a blank space for example: "Mark Twain" it wont return any result. So te exact match its not working. Couldnt find a workaround this. Maybe you can help me. Thanks

maybe like

import {filterBy, orderBy} from 'vue2-filters'
Vue.use(orderBy, filterBy)

Hello, i think there is some bug in using filterBy prop on the package... i am using it with vue-select and this error come out... is there any solution that the prop is not using that? so i can use it with vue-select?

This isn't an issue, more a question - I can use orderBy quite easily when using it on a v-for, but how do I run this programmatically in a method?

ERROR in static/js/vendor.ec67e09dea199da20c96.js from UglifyJs
Unexpected token: punc (() [./node_modules/vue2-filters/dist/vue2-filters.js:477,0][static/js/vendor.ec67e09dea199da20c96.js:49045,9]

This repository's README.md is broken. :c

Install as it pointed in docs.

Got

Uncaught TypeError: plugin.apply is not a function

Great module to easily grab some simple vue1 filters.. Works as expected, but how can we chain several filters. Specifically I'm working with an array,

<li v-for="workOrder in orderBy(workOrders, orderTerm, orderDesc)">

works great but I also need to add a "filterBy".. I tried pipes but no go.. Please let me know what the correct sintax would be!

Thanks

New release throwing this error on every instance.

ReferenceError: orderBy is not defined.

Error disappears when orderBy is replaced with Vue2Filters.mixin.methods.orderBy in template.

Error log is attached below:
v4.0.0_error.log

Hello,

is there any way to use different kinds of currencies on the currency filter?
For instance, {{ data.result | currency | € }} to display the currency in euros?

Thank you

lets say we have a list of 10 items, now when we use orderBy the list order will change but as the filter use a cloned list its not possible to make any operations on the original list as the index will be wrong.

so is there a way i could get that cloned list made by the filter ?
or better yet mutate the original list instead ?
or if neither is good, maybe the filter could fire an event with the new list then i can use it to make operations without mutating the original list ?

For example filterBy and limitBy, I didn't use Vue 1
but know there was such a oportunity, am I right?
Thank you!

Is there room to change the Pluralize filter?
My thoughts would be to make it use the following package
https://github.com/blakeembrey/pluralize

And split of the Ordinal's option(st, nd, rd, th) into another filter using this package
https://github.com/marlun78/number-to-words

Also exposing each filter to make them able to be imported individualy.

I don't want to bother forking and making a start without knowing that it could be something you are interested in.