Enhanced Checkboxes Radio Input, Component for Vue 2

Enhanced checkboxes /radio input, component for vue 2+. vue-enhanced-check

Note that unicode is used for ‘icons’. Therefore design can change according to your browser. It is still possible to override CSS style with ‘!important’ instruction (checked and hover styles)

Issue with ES2015 -> switch away in version 1.4
Issue with bootstrap 3.3 on toggle component -> style fix in version 1.5
Based on first enhancedCheck project (CSS/JS)

Global use

npm install

npm install --save vue-enhanced-check

import components

import { EnhancedCheck, EnhancedCheckGroup, EnhancedCheckRadio, EnhancedToggle } from 'vue-enhanced-check'

or only one according to your needs

import { EnhancedCheck } from 'vue-enhanced-check'

declare use or imported components in your vue script

export default {
    components: { EnhancedCheck, EnhancedCheckGroup, EnhancedCheckRadio, EnhancedToggle },
    methods: ...
}

Use components as described below

Components

Checkbox

Label is prefixed by ‘check’ icon

<enhanced-check label="Checkbox"></enhanced-check>

<enhanced-check :label="sc_label" :subClass="sc_subclass"
                v-model="sc_model" :disabled="sc_disabled"
                :rounded="sc_rounded" :animate="sc_animate"
                id="enhancedCheck" name="" value="">

</enhanced-check>

Prop	Type	Note
`label`	`String`	REQUIRED: by design, label is a main part of the display
`id`	`String`	id of input and associated label.
`name`	`String`	name of classic input. Empty by default
`value`	`String`	value of classic input. Empty by default
`subClass`	`String`	Same colors than bootstrap style, possible values are ‘default’, ‘primary’, ‘success’, ‘warning’, ‘danger’
`disabled`	`Boolean`	False by default. Prevent clic action but not direct model change
`rounded`	`Boolean`	False by default. Rounded border style
`animate`	`Boolean`	False by default. Add a transition on style

As a classic simple checkbox, model bound to check state: true or false

Checkbox group

<enhanced-check-group :label="['First', 'Second', 'Third']"></enhanced-check-group>

<enhanced-check-group :label="['First', 'Second', 'Third']"
                      :subClass="gc_subclass" v-model="gc_model"
                      :disabled="gc_disabled" :rounded="gc_rounded"
                      :animate="gc_animate" :inline="gc_inline"
                      :combine="gc_combine"
                      :value="[gc_val1, gc_val2, gc_val3]"
                      id="enhancedCheckGroup" name="">

</enhanced-check-group>

Prop	Type	Note
`label`	`Array`	REQUIRED
`value`	`Array`	Value for each input. By default equal to label
`id`	`String`/`Array`	id of input and associated label. If string provided, each element id will have a counter as suffix
`name`	`String`/`Array`	name of classic input. Use array to specify different names
`subClass`	`String`	Same than checkbox
`disabled`	`Boolean`	Same than checkbox
`rounded`	`Boolean`	Same than checkbox
`animate`	`Boolean`	Same than checkbox
`inline`	`Boolean`	False by default. Turn all input as inline-block
`combine`	`Boolean`	False by default. Turn ‘check’ icon into ‘plus’ icon

As classic multiple checkboxes, model bound to array of value from checked input

Radio

Label is prefixed by ‘dot’ icon

<enhanced-check-radio :label="['Element A', 'Element B', 'Element C']"></enhanced-check-radio>

<enhanced-check-radio :label="['Element A', 'Element B', 'Element C']"
                      name="radiotest" :subClass="rc_subclass"
                      v-model="rc_model" :disabled="rc_disabled"
                      :rounded="rc_rounded" :animate="rc_animate"
                      :inline="rc_inline" id="enhancedCheckRadio" 
                      :value="[rc_val1, rc_val2, rc_val3]">

</enhanced-check-radio>

Prop	Type	Note
`label`	`Array`	REQUIRED
`name`	`String`	name of classic input.
`id`	`String`/`Array`	id of input and associated label. If string provided, each element id will have a counter as suffix
`value`	`Array`	Value for each input. By default equal to label
`subClass`	`String`	Same than checkbox
`disabled`	`Boolean`	Same than checkbox
`rounded`	`Boolean`	Same than checkbox
`animate`	`Boolean`	Same than checkbox
`inline`	`Boolean`	Same than checkbox group

As classic radio buttons, model bound to value from checked input

Toggle button

Checkbox is replaced by 2 switching labels, for on and off states

<enhanced-toggle></enhanced-check>

<enhanced-toggle :labelOn="tc_labelOn" :labelOff="tc_labelOff"
                 :styleOn="tc_styleOn" :styleOff="tc_styleOff"
                 v-model="tc_model"
                 :disabled="tc_disabled" :rounded="tc_rounded"
                 id="enhancedToggle" name="">
</enhanced-toggle>

Prop	Type	Note
`labelOn`	`String`	Label display for ‘on’ state (checked). Default is ‘On’
`labelOff`	`String`	Label display for ‘off’ state (unchecked). Default is ‘Off’
`styleOn`	`String`	style for ‘on’ state (checked), see checkbox’s subclass. Default is primary
`styleOff`	`String`	style for ‘off’ state (unchecked), see checkbox’s subclass. Default is default
`id`	`String`	id of input and associated label.
`name`	`String`	Same than checkbox
`value`	`String`	Same than checkbox
`disabled`	`Boolean`	Same than checkbox
`rounded`	`Boolean`	Same than checkbox

As a classic simple checkbox, model bound to check state: true or false

Override style

You can define your own check color by adding a specific style

For example, let’s define a ‘custom’ sub class.

<enhanced-check label="Custom" subClass="custom"></enhanced-check>

Checkbox will get the class ‘enhancedCheck-custom’, that you can use in your CSS. Simple override for checkboxes:

.enhancedCheck.enhancedCheck-custom input[type="checkbox"]:checked + label:before {
  background: fuchsia;
  color: white;
}
.enhancedCheck.enhancedCheck-custom input[type="checkbox"]:not(:checked) + label:hover {
  border-color: fuchsia;
}

Full less sample:

.enhancedCheck.enhancedCheck-custom {
  input[type="radio"], input[type="checkbox"] {
    &:checked + label:before {
      background: $color;
      color: white;
    }
    &:not(:checked) + label:hover {
      border: 1px solid $color;
    }
    &:checked:disabled + label:before {
      background: $color-disabled;
    }
    &:not(:checked):disabled + label:hover {
      border: 1px solid $color-disabled;
    }
  }
}

Contribution

Fork the repository
Run npm install
You can run npm run dev, site is at http://localhost:8081.
Do your stuff
When you’re done, run npm run build command and commit your work for a pull request.

GitHub

Author: Keiwen

Live Demo: https://keiwen.github.io/vue-enhancedCheck/

GitHub: https://github.com/Keiwen/vue-enhancedCheck

#vuejs #javascript #vue-js

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

1. Maska

No dependencies
Small size (~2 Kb gziped)
Ability to define custom tokens
Supports repeat symbols and dynamic masks
Works on any input (custom or native)

Maska

Demo

Download

2. v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.

v-range-flyout

Demo

Download

3. vue-tel-input

International Telephone Input with Vue.

vue-tel-input

Demo

Download

4. Restricted Input

Allow restricted character sets in input elements.

Features

Disallow arbitrary characters based on patterns
Maintains caret position
Format/Update on paste
Works in IE11+

Restricted Input

Demo

Download

5. Vue Currency Input

The Vue Currency Input plugin allows an easy input of currency formatted numbers.

Vue Currency Input

Demo

Download

6. vue-fields

Input components for vue.js.

vue-fields

Demo

Download

7. vue-material-input

Simple example of issue I am seeing with input labels.

vue-material-input

Demo

Download

8. vue-tribute

A Vue.js wrapper for Zurb’s Tribute library for native @mentions.

vue-tribute

Demo

Download

9. vue-number-smarty

Number input with rich functionality for Vue.js.

Features

integer/float
signed/unsigned
step size
increment/decrement value by scrolling when focused
align variants
min and max boundaries
max length of integer part (only for float type)
max length of float part (only for float type)
max length of string
error state
readonly state
theme options

vue-number-smarty

Demo

Download

10. Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

Vue input mask

Demo

Download

11. vue-r-mask

mask directive for vue.js

Template similar to javascript regular expression. /\d{2}/
Directive useful for your own input or textarea.
Arbitrary number of digits in template /\d{1,10}/

vue-r-mask

Demo

Download

12. Vue IP

An ip address input with port and material design support.

Vue IP

Demo

Download

13. v-money Mask for Vue.js

Tiny input/directive mask for currency

Features

Lightweight (<2KB gzipped)
Dependency free
Mobile support
Component or Directive flavors
Accept copy/paste
Editable

v-money Mask for Vue.js

Demo

Download

14. Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

Vue Masked Input

Demo

Download

15. VueJS input component

Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue’s transition-group
Flexbox

VueJS input component

Demo

I hope you like them!

#vue-js #vue-input #vue-input-component #input-vue

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Sofia Kelly

1578061020

10 Best Vue Icon Component For Your Vue.js App

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert’s fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Animated SweetAlert Icons for Vue

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

vue-svg-transition

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Vue-Awesome

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

vue-transitioning-result-icon

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

vue-zondicons

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

vicon

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

vue-svgicon

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

vue-material-design-icons