A pattern-placeholder for Vue that changes based on input text.

Last update: Apr 19, 2022

Vue-pattern-placeholder

This plugin provides a placeholder component for Vue.js. It uses canvas to render patterns from input string like URL.

NPM version Dependencies Maintenance PRs Welcome MIT license

Table of contents

Demo

Sample images

Recent updates

  • 2019-05-04 Import format changed, refer to usage section.

Installation

To install this plugin, open terminal in your Vue project directory and type:

npm i --save-dev vue-pattern-placeholder

This command will install the plugin in your project node_modules dir and add it as a project development dependency in project's package.json file.

If you need this plugin as a generic dependency, type this command instead:

npm i --save-dev vue-pattern-placeholder

Usage

To import a component, write:

import patternPlaceholder from 'vue-pattern-placeholder'

Add it to the components property

components: {
    patternPlaceholder
},

Now you can use it in your template:


I recommend to start playing with hue_range and lightness_range properties to reach the best look.

API

For now, none of the parameters are required.

Option Data-type(s) Description Default
width Number width of an image 250
height Number height of an image 250
input String this text will be converted to a pattern Hi there! :-)
label String text label to show No label
label_style String canvas font style. Example: 900 30px Arial 20px Helvetica bold
label_color String color of a label. Example: #777 #777
metric String metric, used to create a pattern. Examples: Euclidean, Manhattan, Minkovski Manhattan
debug Boolean allows to show center points for a Voronoi pattern false
hue_range Array sets a color range in degrees. Example: [0, 359] [0, 359]
lightness_range Array lightness range for pattern pieces in percents. Example: [0, 100] [0, 100]

Warning

Please be aware that this project is still in a testing stage. Use at your own risk. Ideas and bug reports are welcome.

Inspiration

I thought about converting text to an image and I remembered Voronoi patterns: these are easy to implement and look very nice.

Voronoi pattern animation

Then I had an idea:

  • take a string, process it using a SHA-256 hash function
  • extract hash bytes
  • use pairs of bytes, converting each to a float value between 0 and 1 to place X and Y points
  • count pattern segments, use numbers to set each one's hue in HSV color palette
  • calculate pattern areas
  • use areas to determine lightness of a pattern segment in HSV

TODO

  • Overlay text
  • Fix wrong color representation in overlay text
  • Autoreload fix (probably needs a destructor)
  • Fix empty canvas on width / height change
  • Fixed beforeDestroy bug
  • Added demo
  • Consider integrating label style and color into one parameter
  • Label style settings in key-value format
  • Extend hue setting to a list of several possible hues

Acknowledgements

Thanks to AnatolV from RosettaCode for a nice Voronoi diagram implementation.

Thanks to emn178 for js-sha256 library. It is easy to use and helps a lot.

GitHub

https://github.com/6r1d/pattern-placeholder
You might also like...

A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

Jul 24, 2022

🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Jul 28, 2020

Tiny (2k gzipped) and dependency free mask input for Vue.js

Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Aug 15, 2022

Easy input of currency formatted numbers for Vue.js.

Easy input of currency formatted numbers for Vue.js.

Vue Currency Input The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (currenc

Aug 6, 2022

A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Jul 10, 2022

International Telephone Input with Vue.

International Telephone Input with Vue.

International Telephone Input with Vue

Aug 7, 2022

A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Jun 9, 2022

Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Aug 15, 2022

🔡 Tiny input mask library for Vue.js (directive)

🔡 Tiny input mask library for Vue.js (directive)

Aug 7, 2022
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Apr 24, 2022
Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Nov 19, 2021
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Dec 9, 2021
Vue Currency Input component allows an easy input of currency formatted numbers
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

May 25, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Jul 26, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Jul 25, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Jul 28, 2022
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

Aug 1, 2022
Input mask for React, Angular, Ember, Vue, & plain JavaScript
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Aug 17, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

Jul 28, 2022