Vue Morphling
Last updated
Last updated
A collection of standard and custom VueJs filters and directives.
It's MORPHLING time! *plays power ranger theme song. pun intended 😂
Installation
Usage
Filters
Directives
Updates (Breaking update - Dec 20, 2019 PHT)
Debug
morph-age
morph-capitalize
morph-chop
morph-currency
morph-date REMOVED
morph-date-format NEW
morph-file-size
morph-json
morph-lowercase
morph-object-size
morph-placeholder
morph-replace
morph-reverse
morph-sandwich
morph-truncate
morph-uppercase
morph-url (exprimental | read limitations)
morph-highlight NEW
NPM
npm install vue-morphling --save
Yarn
yarn add vue-morphling
CDN
https://unpkg.com/vue-morphling/dist/vue-morphling.js
or
or
All filters are available in the Vue instance as well, so they can d as vm.$morphCapitalize
or this.$morphCapitalize
if you are using single-file component.
All directive names should be prepended with v-
, v-morph-url
like so.
import { morphAge } from 'vue-morphling';
Back to top
import { morphCapitalize } from 'vue-morphling';
Back to top
import { morphChop } from 'vue-morphling';
This filter chops off a n
length of character in a given string using the length
option.
Syntax
morph-chop(length, location)
API
option
value
default
required
description
length
any number
N/A
YES
Indicates the length of the string to be chopped off.
location
'start'
, 'end'
'end'
NO
If NOT specified, morph-chop
will chop off the string from the end.
Back to top
import { morphCurrency } from 'vue-morphling';
Prepend a currency symbol to a value.
Syntax
morph-currency(code)
API
option
description
code
Currency code of a country e.g. 'PHP', 'USD', 'AUD', 'GBP'. Default is $
if not provided.
See currencies.js from lib
folder.
Back to top
morph-date
has been removed see morph-date-format for the updated date formatting method. I removed this to give way to futuremorph-date-[foo]
methods such as e.g.morph-date-diff-minutes
.
import { morphDateFormat } from 'vue-morphling';
Format any valid date using date-fns' format()
function.
Syntax
morph-date-format(format)
Note - morph-date-format
is now using using date-fns@v1.30.1
.
API
All formats are available of course in the date-fns format documentation, but here are some common examples.
Back to top
import { morphFileSize } from 'vue-morphling';
Converts any number (as bytes) to its equivalent, KB
, MB
, GB
, TB
, PB
, EB
, ZB
and YB
.
Options
For setting decimal places use { base: number }
. More options here.
import { morphJson } from 'vue-morphling';
Pretty print JSON objects inside the <pre>
tag.
Syntax
morph-json(indent)
API
option
value
default
required
description
indent
any number or "\t"
N/A
Not really
The value indicates the number of indent using spaces. If "\t" is used, the json will be indented using tab.
Back to top
import { morphLowerCase } from 'vue-morphling';
Back to top
import { morphObjectSize } from 'vue-morphling';
Gets the bytes size (number) of any javascript object and converts it to it's equivalent KB
, MB
, GB
, TB
, PB
, EB
, ZB
and YB
.
Options
For setting decimal places use { base: number }
. More options here.
import { morphPlaceholder } from 'vue-morphling';
Replaces the value with a given placeholder.
Syntax
morph-placeholder(placeholder)
this.$morphPlaceholder(value, placeholder)
Back to top
import { morphReplace } from 'vue-morphling';
Replaces character/s on a string with a given 'replacer' string. Accepts RegEx
for better matching.
Syntax
morph-replace(replacee|regex, replacer)
this.$morphReplace(value, replacee|regex, replacer)
Back to top
import { morphReverse } from 'vue-morphling';
Back to top
import { morphSandwich } from 'vue-morphling';
Prepend and append data around a given value.
If only a single argument is given, it is used to surround the sandwiched content by matching open brackets for closed brackets, and so on.
Syntax
morph-sandwich(start, end)
Back to top
import { morphTruncate } from 'vue-morphling';
Back to top
import { morphUpperCase } from 'vue-morphling';
Back to top
import { vMorphUrl } from 'vue-morphling';
morph-url is currently in experimental stage. The current version has some limitations:
When a link/url appears twice in the string it will mess up the tags.
morph-url
directive converts every link in a given element to an <a>
tag.
Usage
v-morph-url
, prepend v-
to any directive name.
Before morphling
After morphling
import { vMorphHighlight } from 'vue-morphling';
This directive will highlight the any matching string with a color of your choice! Yep, just like a highlighter pen.
Usage
v-morph-highlight
, prepend v-
to any directive name.
Pass the params as string, like, 'cats::#7fad33'
use ::
as separator for the string to be highlighted and color. Syntax 'string::color'
where string is any string and color is any color, hex color, rgb and rgba.
Before morphling
After morphling
1.0.0 and up - Dec. 20, 2019 PHT
morph-date
replaced with morph-date-format
.
Test scripts are now inside its respective filter folder.
Update build strategy
From webpack to rollup
Update all babel related dependencies
Update date-fns to v1.30.1
0.8.0-alpha.1 - May 17, 2018 PHT
Updated the way filters are imported for tree shaking purposes. See usage.
0.7.4 - May 15, 2018 PHT
Added morph-highlight
0.7.x - March 7, 2018 PHT
I'm sorry for the trouble. But I had to depricate morphling
and rename it to vue-morphling
because I am working on a different version of this library. The new mophling.js
is pure javascript version of this plugin which you can use in both nodejs or vanilla. See updates here
0.6.0 - Feb 21, 2018 PHT
Replaced moment with date-fns. I replaced moment with date-fns because these reasons. There are no breaking changes in terms of using morph-date
.
0.5.0 - Oct 26, 2017 PHT
Added morph-file-size.
Added morph-object-size.
Used webpack
AGAIN to build the dist.
Removed babel
.
Added var
build version for CDN.
Sept 26, 2017 PHT
Replaced webpack
with plain babel
Changed indetion from 4 spaces to 2 spaces.
Fixed export error.
Fixed moment import bug.
July 29, 2017 PHT
Added v-morph-url directive.
morphs
folder remaned to filters
.
July 28, 2017 PHT
Updated morph-sandwich filter.
Added morph-replace filter.
Added morph-truncate filter.
Added morph-placeholder filter.
Added morph-curreny filter.
Added morph-sandwich filter.
ERROR in build.js from UglifyJs
There is a known error when building a vue cli x webpack project that is using morphling
.
ERROR in build.js from UglifyJs
Unexpected token: punc (() [../morphling/index.js:5,4][build.js:15630,10]
Fix:
Add es2015
and stage-2
presets to the .babelrc
Include morphling
to the babel-loader
in build/webpack.base.conf.js
build/webpack.base.conf.js
Helpful links :
"When my time comes, Forget the wrong that I've done, Help me leave behind some, Reasons to be missed, Don't resent me, And when you're feeling empty, Keep me in your memory, Leave out all the rest..."
In Memory of Chester Bennington (1976-2017)
I used Linkin Park songs as example strings to pay tribute to the death of Chester Bennington. One of my inspirations in music. Depression is very real, we may not fully understand it but it is very, very real. Talk to your loved ones, and cherish every moment with them. Happy coding.
Made with ❤️ by Jofferson Ramirez Tiquez