zp-common-components

Josef Components for VueJS

---

Installation and Usage:

1. Just use npm install --save [INSERT PACKAGE NAME]

2. Now you can include the scripts by using following snippet in your main entry point (usually App.vue). This makes it globally available in your project.

<script>
import [INSERT PACKAGE NAME]
export default {
    name: 'App',
    components {
        //no need to declare the package's components here!
    },
    data: ()=>{
        //....
    }
}

</script>

3. Then use the components you want, in your template, by simply referring to them:

// in App.vue, after the import scri

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    //AppButton component
    <p>This will show a button</p>
    <AppButton label="CLICK ME" style="background-color: red"/>

    //InputField Component
    <p>This will show an InputField</p>
    <InputField label="Input Field" value="Josef rocks"/>
    
  </div>
</template>

Demo

Check out the demo here: https://codesandbox.io [TO BE CREATED]

Component List

You can find a list of all the components in the package here.

---

## Quick Reference Below are the configurations of some of the main components.

AppButton

Usage:

<AppButton 
    label = "Submit"
    btnStyle = "btn primary"
    zIndex = ""
/>

Props: props taken by AppButton are label (string or object), btnStyle (class names that get bound to class attribute of the componnent) andzIndex (string) for the positioning on z-axis (stack order).

InputField

Usage:

<InputField 
    disabled= "false"
    type = "text"
    value = ""
    label ="Name"
    name = "name"
    width = "100%"
    focusOnCreate = "true"
/>

props passed to this component are as above. The width prop is applied to the <div> element that wraps around the actual input field.

The heirarchy of elements in this Component are as follows:

<div> [takes the width prop]
    <div> [input label wrapper, whose for attribute = name prop, and the label applied = label prop]
    </div>
    <input> [the input field, where id attribute = name prop and value is as set by the value prop.]
    </input>
</div>

methods and handlers include inputHandlers and changeHandlers that trigfer the same function called handleUpdate. The component's events are blur and focus.

TextAreaField

usage:

<textarea
    id=""
    name=""
    rows=""
    value=""     
/>

propspassed to this component are as above. The width prop is applied to the <div> element that wraps around the actual Textarea Input field. methods and handlers include inputHandlers and changeHandlers that trigfer the same function called handleUpdate. The component's events are blur and focus.