@dbetka/vue-atomic v0.0.6

vue-atomic (pre-alpha version)

The most flexible Vue UI Library. Link to npm package.

Installation

npm i -D @dbetka/vue-atomic

Usage

Full Bundle

import VueAtomic from '@dbetka/vue-atomic'
import '@dbetka/vue-atomic/dist/theme/light.css'
import '@dbetka/vue-atomic/dist/index.css'

Vue.use(VueAtomic)

Individual components

with default name

import { MInput } from '@dbetka/vue-atomic'
import '@dbetka/vue-atomic/dist/theme/light.css'
import '@dbetka/vue-atomic/dist/molecules/input.css'

Vue.component(MInput.name, MInput) // component name is m-input

with own name

import { MInput } from '@dbetka/vue-atomic'
import '@dbetka/vue-atomic/dist/theme/light.css'
import '@dbetka/vue-atomic/dist/molecules/input.css'

Vue.component('new-input', MInput) // component name is new-input

List of widgets

• MInput
• MTextarea

Details for each widget

MInput

<template>
  <div>
    <m-input v-model="initial" />
    
    <m-input 
      v-model="initial" 
      placeholder="Disabled" 
      disabled
    />

    <m-input 
      v-model="assist" 
      placeholder="Assist"
      assist="Some text"
    />

    <m-input 
      v-model="correct" 
      placeholder="Correct"
      correct
    />

    <m-input 
      v-model="error" 
      placeholder="Error"
      error
      assist="Some text tells where you've made mistake"
    />

    <m-input 
      v-model="password" 
      type="password"
      placeholder="Password"
    />

  </div>
</template>

<script>
  export default {
    name: 'o-form',
    data: () => ({
      initial: 'Initial Value',
      assist: null,
      correct: null,
      error: null,
      password: null,
    })
  }
</script>

Props

Classes

Events

MTextarea

<template>
  <div>
    <m-textarea v-model="initial" />
    
    <m-textarea 
      v-model="initial" 
      placeholder="Disabled" 
      disabled
    />

    <m-textarea 
      v-model="assist" 
      placeholder="Assist"
      assist="Some text"
    />

    <m-textarea 
      v-model="correct" 
      placeholder="Correct"
      correct
    />

    <m-textarea 
      v-model="error" 
      placeholder="Error"
      error
      assist="Some text tells where you've made mistake"
    />

  </div>
</template>

<script>
  export default {
    name: 'o-form',
    data: () => ({
      initial: 'Initial Value',
      assist: null,
      correct: null,
      error: null,
    })
  }
</script>

Props

Classes

Events

Project maintenance

Scripts used in package.json has own docs here