wemake-services / vue-material-input Goto Github PK

View Code? Open in Web Editor NEW

24.0 4.0 12.0 1.29 MB

Simple implementation of Material Input with no dependencies

Home Page: http://wemake.services/vue-material-input

License: MIT License

JavaScript 36.75% Vue 63.25%

material vue-material showcase

vue-material-input's Introduction

vue-material-input

Simple implementation of Material Input with no dependencies.

Showcase

Installation

npm install vue-material-input

Usage

Example with v-model:

import Vue from 'Vue'
import MaterialInput from 'vue-material-input'

const vm = new Vue({
  el: '#app', // note that `#app` must be presented in the html
  template: (
    '<form><p>Hello, {{ username }}</p>' +
      '<MaterialInput name="name" v-model="username">Your name</MaterialInput>' +
    '</form>'
  ),
  data () {
    return {
      username: 'admin'
    }
  },
  components: {
    MaterialInput
  }
})

For more examples, please check /play folder and the project's website.

vue-material-input's People

Contributors

Stargazers

Watchers

Forkers

chrisbethelepb qin-mx simon-woo feluxmaj cavanmflynn sevneoy hansfelix hokaso lasseslambertsen asaoluelijah akenclub xihao-own

vue-material-input's Issues

placeholder support

add properties documentation

add custom validation

For now, there's a problem that iOS devices do not handle html5 form validation.
This can be fixed by using https://github.com/logaretm/vee-validate

This also integrates well with the validation message on bottom.

add style reset to the examples

To illustrate how it is done

disabled input should have dotted border

yarn and publish-please do not play well together

See inikulin/publish-please#42

Temporary fix:

removing the line "prepublish": "publish-please guard", from the config
adding "ppublish": "publish-please guard && npm run publish-please",

We still don't use npm publish.

invalid rendering of non-empty but invalid input

Fix: http://stackoverflow.com/questions/8639282/notempty-css-selector-is-not-working

support textarea

add usage animation to the README.md

animation is not optimized

Due to https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29#.fyjvcy79p we need to change width animation to scale() animation.

support `autocomplete` property

Sometimes it is not required.

add removeEventListener on beforeDestroy

Clean up is important: http://vuejs.org/api/#beforeDestroy

add tests

change `/dev` folder in the README.md to `/play`

think of possible events we want to handle

vue-dev-server generates non-responsive layout

See paulpflug/vue-dev-server#3

It affects the demo page.

add license, changelog and contributing files

add keywords to package.json

add icons

W could choose from several icons as default ones.

e._h is not a function

Any ideas?

add single sass mixin to fix all the styles at once

for now it is overcomplicated

:errorMessages could be a single String

Right now it raises a TypeError

add `inline` version

support `window` export

add `tel` input type support

add `publish-please`

wrong description in the package.json

Should be copied from the repo's description.

On mobile border-radius does not reset

border-radius: 0; to input solves the issue.

add features

Such as:

supports vue2
lightweight and simple
has validation support
has customizable styles
supports server side rendering
any others?

think of lernajs integration

I guess vue-material-* is a perfect usecase for lerna. All components are isolated and it won't change. But having all of the components in a single repo might have a lot of benefits.

Pros are:

I really like that we will have meta repository for all the components, providing docs and examples here seems natural
It would be much easier to fix issues with readmes, versions, and other meta-information (now, I have to create 4 separate issues for each component sharing the same bug)

Cons are: