morphling - npm Package Compare versions

Comparing version 0.0.1 to 0.1.1

index.js

 import morphs from './morphs';
 
-console.log('morphs', morphs)
-
-const VueFilterStash = {
+const Morphling = {
     install(Vue, options) {
@@ -11,2 +9,2 @@ morphs(Vue, options);
 
-export default VueFilterStash;
+export default Morphling;

morphs/chop/index.js

 export default (Vue) => {
-    Vue.filter('morph-chop', (value, length, direction) => {
-        return chop(value, length, direction);
+    Vue.filter('morph-chop', (value, length, location) => {
+        return chop(value, length, location);
     });
 
-    Vue.prototype.$morphChop = (value, length, direction) => {
-        return chop(value, length, direction);
+    Vue.prototype.$morphChop = (value, length, location) => {
+        return chop(value, length, location);
     };
 
-    function chop(value, length, direction) {
-        if(!length) return 'Warn: argument length (number) is required. morph-chop(length, direction)'
-        if(!direction) direction = 'end';
+    function chop(value, length, location) {
+        if(!length) return 'Warn: option length (number) is required. morph-chop(length, location)'
+        if(!location) location = 'end';
         if(typeof value !== 'string') value = value.toString();
-        if(direction === 'end')
+        if(location === 'end')
             return value.toString().slice(0, ~length+1)
-        if(direction === 'start')
+        if(location === 'start')
             return value.toString().substring(length);
     }
 };

morphs/json/index.js

@@ -6,3 +6,3 @@ export default (Vue) => {
 
-    Vue.prototype.$morphJson = (value) => {
+    Vue.prototype.$morphJson = (value, indent) => {
         return json(value, indent);
@@ -9,0 +9,0 @@ };

package.json

@@ -6,3 +6,3 @@ {
   "name": "morphling",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "A collection of VueJs filters.",
@@ -9,0 +9,0 @@ "main": "index.js",

README.md

@@ -1,37 +0,270 @@
-## Welcome to GitHub Pages
+# Mophling
 
-You can use the [editor on GitHub](https://github.com/jofftiquez/vue-filter-stash/edit/master/README.md) to maintain and preview the content for your website in Markdown files.
+A collection of VueJs filters.
 
-Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
+## Filters
 
-### Markdown
+- [morph-capitalize](#morph-capitalize)
+- [morph-chop](#morph-chop)
+- [morph-date](#morph-date)
+- [morph-json](#morph-json)
+- [morph-lowercase](#morph-lowercase)
+- [morph-reverse](#morph-reverse)
+- [morph-uppercase](#morph-uppercase)
+- [License](#License)
 
-Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
+## Installation
 
-```markdown
-Syntax highlighted code block
+**NPM**
 
-# Header 1
-## Header 2
-### Header 3
+`npm install morphling --save`
 
-- Bulleted
-- List
+**Yarn**
 
-1. Numbered
-2. List
+`yarn add morphling`
 
-**Bold** and _Italic_ and `Code` text
+## Usage
 
-[Link](url) and ![Image](src)
 ```
+import Vue from 'vue';
+import Morphling from 'morphling';
 
-For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
+Vue.use(Morphling);
+```
 
-### Jekyll Themes
+All filters are available in the Vue instance as well, so they can be use as `vm.$morphCapitalize` or `this.$morphCapitalize` if you are using single file component.
 
-Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/jofftiquez/vue-filter-stash/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
+------
 
-### Support or Contact
+### morph-capitalize
 
-Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out.
+```html
+<p>{{ 'numb' | morph-capitalize }}</p>
+<!-- Numb -->
+```
+
+```javascript
+const msg = this.$morphCapitalize('numb');
+console.log(msg); // Numb
+```
+
+[Back to top](#filters)
+
+------
+
+### morph-chop
+
+This filter chops off a `n` length of character in a give string using the `length` option.
+
+*Syntax* 
+
+`morph-chop(length, location)`
+
+
+```html
+<p>{{ 'Papercut' | morph-chop(2) }}</p>
+<!-- Paperc -->
+
+<p>{{ 'Papercut' | morph-chop(3, 'end') }}</p>
+<!-- Paper -->
+
+<p>{{ 'Papercut' | morph-chop(2, 'start') }}</p>
+<!-- percut -->
+
+<p>{{ 'Papercut' | morph-chop(3, 'start') }}</p>
+<!-- ercut -->
+```
+
+```javascript
+const msg1 = this.$morphChop('Papercut', 2);
+const msg2 = this.$morphChop('Papercut', 3, 'end');
+const msg3 = this.$morphChop('Papercut', 2, 'start');
+const msg4 = this.$morphChop('Papercut', 2, 'start');
+
+console.log(msg1); // Paperc
+console.log(msg2); // Paper
+console.log(msg3); // percut
+console.log(msg4); // ercut
+```
+
+**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](#filters)
+
+------
+
+### morph-date
+
+Format any valid date using moment's `format()` function. 
+
+*Syntax*
+
+`morph-date(format)`
+
+```html
+<p>{{ new Date() | morph-date('MMM DD, YYYY') }}</p>
+<!-- Jul 26, 2017 -->
+
+<p>{{ new Date() | morph-date('YYYY') }}</p>
+<!-- 2017 -->
+```
+
+```javascript
+const date = new Date('1976-03-20');
+
+const formatted = this.$morphDate(date, 'MMM DD, YYYY');
+const year = this.$morphDate(date, 'YYYY');
+const time = this.$morphDate(new Date(), 'hh:mm A');
+
+console.log(formatted); // Mar 20, 1976
+console.log(year); // 1976
+console.log(time); // 11:00 PM
+```
+
+**API**
+
+All formats are available of course in the [moment documentation](https://momentjs.com/docs/#/parsing/string-format/), but here are some common examples.
+
+[Back to top](#filters)
+
+------
+
+### morph-json
+
+Pretty print JSON objects inside the `<pre>` tag.
+
+*Syntax*
+
+`morph-json(indent)`
+
+```html
+<pre>{{ {"favoriteBand":"Linkin Park"} | morph-json(2) }}</pre>
+<!--
+{
+  "favoriteBand": "Linkin Park"
+}
+-->
+<pre>{{ {"favoriteBand":"Linkin Park"} | morph-json('\t') }}</pre>
+<!--
+{
+    "favoriteBand": "Linkin Park"
+}
+-->
+```
+
+```javascript
+const msg = this.$morphJson({"favoriteBand":"Linkin Park", 4})
+console.log(msg);
+// {
+//    "favoriteBand": "Linkin Park"
+// }
+```
+
+**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](#filters)
+
+------
+
+### morph-lowercase
+
+```html
+<p>{{ "LOST IN THE ECHO" | morph-lowercase}}</p>
+<!-- lost in the echo  -->
+```
+
+```javascript
+const msg = this.$morphLowercase('LOST IN THE ECHO');
+console.log(msg); // lost in the echo
+```
+
+[Back to top](#filters)
+
+------
+
+### morph-reverse
+
+```html
+<p>{{ 'Shadow of the day' | morph-reverse}}</p>
+<!-- yad eht fo wodahS  -->
+```
+
+```javascript
+const msg = this.$morphReverse('Shadow of the day');
+console.log(msg); // yad eht fo wodahS
+```
+
+[Back to top](#filters)
+
+------
+
+### morph-uppercase
+
+```html
+<p>{{ "somewhere i belong" | morph-uppercase}}</p>
+<!-- SOMEWHERE I BELONG  -->
+```
+
+```javascript
+const msg = this.$morphUppercase('somewhere i belong');
+console.log(msg); // SOMEWHERE I BELONG
+```
+
+[Back to top](#filters)
+
+------
+
+*"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 love ones, and cherish every moment with them. Happy coding.
+
+### License 
+
+**MIT**
+
+Copyright (c) 2017 Jofferson R Tiquez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+`< >` with ❤️ by Jofferson Ramirez Tiquez
+
+
+
+
+
+
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10175

increased by84.06%

Number of lines in readme file

271

increased by613.16%

Worsened metrics

Lines of code

98

decreased by-1.01%

No dependency changes