aepp-components-davidyuk v0.0.4

aeternity aepp components

aeternity aepp components aims to provide aepp developers with reusable Vue components. All elements are from our styleguide. You need some kind of build process (webpack, browserify, ...) there is no bundled js file yet.

installation and usage

Install aeternity aepp components via npm

npm install @aeternity/aepp-components

Import Vue and aeternity aepp components:

import Vue from 'vue'
import VueRouter from 'vue-router'
import AeppComponents, { AeButton } from '@aeternity/aepp-components'

Vue.use(VueRouter)
Vue.use(AeppComponents)

// OR single components

Vue.use(AeppComponents.AeButton)

// OR

new Vue({
  components: {
    AeButton
  }
});

<template>
  <div id="app">
    <ae-button @click="buttonPress()">My Button</ae-button>
  </div>
</template>

use the helperMixin

import { aeHelperMixin } from '@aeternity/aepp-components'

{
  ...
  mixins: [aeHelperMixin],
}

contributing

If you wrote a neat looking, reusable component matching our styleguide please fork this project and send us a merge request. Thanks!

example

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import AeppComponents from '@aeternity/aepp-components'

Vue.use(VueRouter)
Vue.use(AeppComponents)

const routes = [
  // { path: '/foo', component: Foo },
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

app.vue

<template>
  <div id="app">
    <ae-main>
      <div class="example">
        <ae-amount :value="1.337" :isFullWidth="true"></ae-amount>
      </div>

      <div class="example">
        <ae-balance :value="1.337" :size="'large'" :color="'dark'"></ae-balance>
      </div>

      <div class="example">
        <ae-button :label="'button'" :size="'large'" :color="'pink'">Button</ae-button>
      </div>

      <div class="example">
        <ae-button2 @click="buttonPress('button2')" :secondary="false">Button2</ae-button2>
      </div>

      <div class="example">
        <ae-category>Category</ae-category>
      </div>

      <div class="example">
        <ae-close-button @click="buttonPress('closeButton')"></ae-close-button>
      </div>

      <div class="example">
        <ae-filter-list :active="false">
          <ae-filter-item :active="false" :to="'/'">Filter Item in List</ae-filter-item>
          <ae-filter-separator></ae-filter-separator>
          <ae-filter-item :active="true" :to="'/'">Filter Item  in List</ae-filter-item>
        </ae-filter-list>
      </div>

      <div class="example">
        <ae-header :name="'Header'">
          <ae-header-button @click="buttonPress('header button')" :icon="false" :secondary="false">Header Button</ae-header-button>
          <ae-header-button @click="buttonPress('header button')" :icon="true" :secondary="true">Æ</ae-header-button>
        </ae-header>
      </div>

      <div class="example">
        <ae-header-alert @close="buttonPress('alert close')">Alert</ae-header-alert>
      </div>

      <div class="example" v-if="showModal">
        <ae-modal @close="showModal = false">Modal</ae-modal>
      </div>

      <div class="example">
        <ae-button2 @click="showModal = true" :secondary="false">
          Modal
        </ae-button2>
      </div>

      <div class="example">
        <ae-identity :active="true" :address="identity.address" :balance="identity.balance" :collapsed="false"></ae-identity>
      </div>

      <div class="example">
        <ae-identity :active="false" :address="identity.address" :balance="identity.balance" :collapsed="true"></ae-identity>
      </div>

      <div class="example">
        <ae-identity :active="true" :address="identity.address" :balance="identity.balance" :collapsed="false">
          <ae-button2 @click="buttonPress('button2')" :secondary="false">Button2</ae-button2>
          <ae-button2 @click="buttonPress('button2')" :secondary="false">Button2</ae-button2>
        </ae-identity>
      </div>

      <div class="example">
        Mixin Function readableEther: {{readableEther(identity.balance)}}
      </div>
    </ae-main>
  </div>
</template>

<script>
import { aeHelperMixin } from '@aeternity/aepp-components'

export default {
  name: 'app',
  data () {
    return {
      showModal: false,
      identity: {
        balance: '1337210000000000000', // wei as string, int or BN
        address: '0x1234567890987654321'
      }
    }
  },
  mixins: [
    aeHelperMixin
  ],
  methods: {
    buttonPress: function(what) {
      console.log("button pressed", what);
    }
  }
}
</script>

<style>
  div.example {
    margin-bottom: 40px;
  }
</style>

components

• aeButton
• aeIdentity
• ...

aeButton

A Button... Insert description about props needed and so on, example code and also add an image probably

aeIdentity

A Button...