Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frankflitton/vuejs-typography-filters
WIP A collection of typography Vue.JS filters to control your type and own your layout!
https://github.com/frankflitton/vuejs-typography-filters
filters layout typeography vue2 vuejs
Last synced: 3 days ago
JSON representation
WIP A collection of typography Vue.JS filters to control your type and own your layout!
- Host: GitHub
- URL: https://github.com/frankflitton/vuejs-typography-filters
- Owner: FrankFlitton
- License: mit
- Created: 2018-10-03T15:19:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-10-10T20:28:07.000Z (almost 6 years ago)
- Last Synced: 2024-09-30T10:21:49.552Z (3 days ago)
- Topics: filters, layout, typeography, vue2, vuejs
- Language: JavaScript
- Homepage: https://rawcdn.githack.com/FrankFlitton/vuejs-typography-filters/master/example/index.html
- Size: 147 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# VuejsTypographyFilters
[](https://www.npmjs.com/package/vuejs-typography-filters) [](https://vuejs.org/)
This package is WIP.
A collection of filters to help you control your type and own your layout.
These practical and lightweight filters will help you deliver your interface without compromising on typographic handling.
Make those typos vanish from your app!
## Filters
- [typoJsonRichText](#typoJsonRichText)
- [typoLowerCase](#typoLowerCase)
- [typoSmartTypeSet](#typoSmartTypeSet)
- [typoStripTags](#typoStripTags)
- [typoTitleCase](#typoTitleCase)
- [typoUpperCase](#typoUpperCase)
- [typoWidow](#typoWidow)
## Installation
```bash
npm install --save vuejs-typography-filters
```
## Usage
```javascript
import Vue from 'vue';
import VuejsTypographyFilters from 'vuejs-typography-filters'
// Use all filters and directives.
Vue.use(VuejsTypographyFilters);
```
**or**
```javascript
import Vue from 'vue';
import { typoJsonRichText, typoWidow, typoStripTags } from 'vuejs-typography-filters';
// Import only what you need.
Vue.use(typoJsonRichText);
Vue.use(typoWidow);
Vue.use(typoStripTags);
```
# Typeogrphy Control Filters
## Filters
### typoJsonRichText
> `import { typoJsonRichText } from 'vuejs-typography-filters';`
This filter converts URI encoded JSON to HTML rich text.
*Syntax*
`typoJsonRichText`
```html
{{ '%3Cp%3EDesign%20to%20create%20a%20truly%20unique%20experience.%3C%2Fp%3E' | typoJsonRichText }}
```
```javascript
const msg1 = this.$typoJsonRichText('%3Cp%3EDesign%20to%20create%20a%20truly%20unique%20experience.%3C%2Fp%3E')
console.log(msg1) //
Design to create a truly unique experience.
```
------
### typoLowerCase
> `import { typoLowerCase } from 'vuejs-typography-filters';`
This filter converts the input to lowercase and trims the text.
*Syntax*
`typoLowerCase`
```html
{{ 'LoWERcase StrInG' | typoLowerCase }}
```
```javascript
const msg1 = this.$typoLowerCase('LoWERcase StrInG')
console.log(msg1) // lowercase string
```
------
### typoSmartTypeSet
> `import { typoSmartTypeSet } from 'vuejs-typography-filters';`
This filter converts single and double quotes to curly opening and closing quotes, 3 periods to an elipsis and multiple dashes to an en dash.
Inspired by tools like SmartyPants.
*Syntax*
`typoSmartTypeSet`
```html
{{ '\'Some curly... "quotes" for this quote.\' -- Some Guy' | typoSmartTypeSet }}
```
```javascript
const msg1 = this.$typoLowerCase('\'Some curly... "quotes" for this quote.\' -- Some Guy')
console.log(msg1) // ‘Some curly… “quotes” for this quote.’ — Some Guy
```
------
### typoStripTags
> `import { typoStripTags } from 'vuejs-typography-filters';`
This filter converts URI encoded JSON to HTML rich text.
*Syntax*
`typoStripTags`
```html
{{ 'This text should not have bolded characters from spans.' | typoStripTags }}
```
```javascript
const msg1 = this.$typoStripTags('This text should not have bolded characters from spans.')
console.log(msg1) //
This text should not have bolded characters from spans.
```
------
### typoTitleCase
> `import { typoTitleCase } from 'vuejs-typography-filters';`
This filter converts the first character of every word to uppercase and all remainder to lowercase.
*Syntax*
`typoTitleCase`
```html
{{ 'My amazing tItLe' | typoTitleCase }}
```
```javascript
const msg1 = this.$typoTitleCase('My amazing tItLe')
console.log(msg1) // My Amazing Title
```
------
### typoUpperCase
> `import { typoUpperCase } from 'vuejs-typography-filters';`
This filter converts the input to lowercase and trims the text.
*Syntax*
`typoUpperCase`
```html
{{ 'I need attention!' | typoUpperCase }}
```
```javascript
const msg1 = this.$typoUpperCase('I need attention!')
console.log(msg1) // I NEED ATTENTION!
```
------
### typoWidow
> `import { typoWidow } from 'vuejs-typography-filters';`
This filter adds a non-breaking space before the last word of a block of block of text only if the last word is larger than `n`.
*Syntax*
`typoWidow(length)`
```html
{{ 'This text has a typoWidow at the end' | typoWidow }}
{{ 'This text has a typoWidow at the end' | typoWidow(3) }}
```
```javascript
const msg1 = this.$typoWidow('This text has a typoWidow at the end.')
const msg2 = this.$typoWidow('This text has a typoWidow at the end.', 3, 'end')
console.log(msg1) // This text has a typoWidow at the end.
console.log(msg2) // This text has a typoWidow at the end.
```
**API**
**option** | **value** | **default** | **required** | **description**
--- | --- | --- | --- | ---
`length` | any number | -1 | NO | Indicates the length of the string to be chopped off.
------
## License
[MIT](http://opensource.org/licenses/MIT)