Wow Talents UI

Custom UI Vue components exclusive for WOW Talents

Installation

With npm / yarn

npm i @wow-talents/ui

or

yarn add @wow-talents/ui

import '@wow-talents/ui/lib/wow.css'
import * as WowComponent from '@wow-talents/ui'

With CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@wow-talents/ui/lib/wow.min.js"></script>

Using

Vue file

<template>
  <div id="app">
    <wow-hello />
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import {WowHello} from '@wow-talents/ui'

@Component({
  components: {WowHello},
})
export default class App extends Vue {}
</script>

Pure HTML

<meta charset="utf-8">
<title>Demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@wow-talents/ui/lib/wow.min.js"></script>

<wow-hello></wow-hello>

Customizing components in pure HTML

<meta charset="utf-8">
<title>Demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@wow-talents/ui/lib/wow.min.js"></script>

<wow-button id="btn" label="Click me" rounded />

<script>
const el = document.getElementById('btn')
// Custom component event
el.addEventListener('press', function() {
  alert('Trigger')
})
</script>

Using SDK (optional)

import {Wow, AuthRequest, Talent} from '@wow-talents/ui'

Wow.install(
/*
{
  axiosInstance?: AxiosInstance
  onRequestStart?: (reqName: string) => void
  onRequestEnd?: (reqName: string) => void
  onRequestError?: (reqName: string) => void
  baseURL?: string
  token?: string
  version?: string
  language?: AvailableLanguages
  onAxiosResponseError?: (error: AxiosError) => void | Promise<never>
}
*/
)

// Mock example. This account doesn't exist!
const request = new AuthRequest()
request.email = '[email protected]'
request.password = '123456'

try {
  const response = await request.signIn<Talent>()
  Wow.updateToken(response.token)
  console.log(response.loggedUser)
} catch (e) {
  console.error(e)
}

Using SDK with CDN

<meta charset="utf-8">
<title>wow demo</title>
<script src="https://unpkg.com/@wow-talents/ui/lib/wow.umd.min.js"></script>

<script>
const Wow = wow.default
const AuthRequest = wow.AuthRequest

Wow.install()

// Mock example. This account doesn't exist!
signIn('[email protected]', '123456')

async function signIn(email, password) {
  const request = new AuthRequest()
  request.email = email
  request.password = password

  try {
    const response = await request.signIn()
    Wow.updateToken(response.token)
    alert('Login success. See logs')
    console.log(response.loggedUser)
  } catch (e) {
    alert('Login failed')
    console.error(e)
  }
}
</script>

API

• WowButton
• WowHello

Contributing

Clone this repository then the following to initialize:

yarn bootstrap

You make changes in /src dir and test in example dir.

You may execute your demo test by running this:

yarn demo

Publish your changes if you have permission:

npm run release

Make sure you have configured your GITHUB_TOKEN