npm package: @sourcesync/quasar-ui-profiles
Description: Quasar Component for UserProfile
Author: dev@sourcedigital.net
Latest version: 0.0.1

# Component QProfile

[![npm](https://img.shields.io/npm/v/@sourcesync/quasar-ui-profiles.svg?label=@sourcesync/quasar-ui-profiles)](https://www.npmjs.com/package/@sourcesync/quasar-ui-profiles)
[![npm](https://img.shields.io/npm/dt/@sourcesync/quasar-ui-profiles.svg)](https://www.npmjs.com/package/@sourcesync/quasar-ui-profiles)

# Usage

## Quasar CLI project

Install the [App Extension](../app-extension).

**OR**:

Create and register a boot file:

```js
import Vue from "vue";
import Plugin from "@sourcesync/quasar-ui-profiles";
import "@sourcesync/quasar-ui-profiles/dist/index.css";

Vue.use(Plugin);
```

**OR**:

```html
<style src="@sourcesync/quasar-ui-profiles/dist/index.css"></style>

<script>
  import { Component as QProfile } from "@sourcesync/quasar-ui-profiles";

  export default {
    components: {
      QProfile,
    },
  };
</script>
```

## Vue CLI project

```js
import Vue from "vue";
import Plugin from "@sourcesync/quasar-ui-profiles";
import "@sourcesync/quasar-ui-profiles/dist/index.css";

Vue.use(Plugin);
```

**OR**:

```html
<style src="@sourcesync/quasar-ui-profiles/dist/index.css"></style>

<script>
  import { Component as QProfile } from "@sourcesync/quasar-ui-profiles";

  export default {
    components: {
      QProfile,
    },
  };
</script>
```

## UMD variant

Exports `window.qProfile`.

Add the following tag(s) after the Quasar ones:

```html
<head>
  <!-- AFTER the Quasar stylesheet tags: -->
  <link
    href="https://cdn.jsdelivr.net/npm/@sourcesync/quasar-ui-profiles/dist/index.min.css"
    rel="stylesheet"
    type="text/css"
  />
</head>
<body>
  <!-- at end of body, AFTER Quasar script(s): -->
  <script src="https://cdn.jsdelivr.net/npm/@sourcesync/quasar-ui-profiles/dist/index.umd.min.js"></script>
</body>
```

If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):

```html
<link
  href="https://cdn.jsdelivr.net/npm/@sourcesync/quasar-ui-profiles/dist/index.rtl.min.css"
  rel="stylesheet"
  type="text/css"
/>
```

# Usage

```js
<template>
  <QProfile
    v-model="data"
    :schema="schema"
    :loading="loading"
    @submit="handleSubmit"
    @changePassword="handleChangePassword"
  />
</template>

<script>
export default {
  name: 'ProfilePage',
  data: () => {
    data: {
      username: '@johndoe',
      bio: 'lorem ipsum',
      email: 'someone@example.com',
      fname: 'John',
      lname: 'Doe'
    },
    loading: {
      save: false,
      changePassword: false
    },
  },
  computed: {
    /** @returns { array } */
    schema () {
      return [
        {
          "name": "username",
          "label": "Username",
          "mask" : "@xxxxxxxxxx"
        },
        {
          "name": "bio",
          "label": "Bio",
          "autogrow": true
        },
        {
          "name": "email",
          "label": "Email",
          "disable": true,
          "classes": "col-12"
        },
        {
          "name": "fname",
          "label": "First name",
          "classes": "col-md-6 col-12"
        },
         {
          "name": "lname",
          "label": "Last name",
          "classes": "col-md-6 col-12"
        }
      ]
    }
  },
  methods: {
    /** mock profile update progress */
    handleSubmit (data) {
      // your api calls here
      this.loading.save = true
      setTimeout(() => {
        this.loading.save = false
        console.log(data)
      }, 5000)
    },
    /** mock change password progress */
    handleChangePassword (data) {
      // your api calls here
      this.loading.changePassword = true
      setTimeout(() => {
        this.loading.changePassword = false
        console.log(data)
      }, 5000)
    }
  }
}
</script>
```

> Schema

| key      | value                      |
| -------- | -------------------------- |
| name     | `'username'`               |
| label    | `'Username'`               |
| mask     | `'@xxxxxxxxxx'`            |
| disable  | `false`                    |
| autogrow | `false`                    |
| classes  | `col-lg-4 col-md-6 col-12` |

> Mask

Documentation - [Quasar.dev](https://quasar.dev/vue-components/input#Mask) | [Github - Full list](https://github.com/quasarframework/quasar/blob/dev/ui/src/mixins/mask.js#L2)

| token | description                                        |
| ----- | -------------------------------------------------- |
| #     | Numeric                                            |
| S     | Letter, a to z, case insensitive                   |
| N     | Alphanumeric, case insensitive for letters         |
| A     | Letter, transformed to uppercase                   |
| a     | Letter, transformed to lowercase                   |
| X     | Alphanumeric, transformed to uppercase for letters |
| x     | Alphanumeric, transformed to lowercase for letters |

---

# Development Setup

```bash
$ yarn install // # npm install
```

# Developing

```bash
# start dev in SPA mode
$ yarn dev

# start dev in UMD mode
$ yarn dev:umd

# start dev in SSR mode
$ yarn dev:ssr

# start dev in Cordova iOS mode
$ yarn dev:ios

# start dev in Cordova Android mode
$ yarn dev:android

# start dev in Electron mode
$ yarn dev:electron
```

# Building package

```bash
$ yarn build
```

# Adding Testing Components

in the `ui/dev/src/pages` you can add Vue files to test your component/directive. When using `yarn dev` to build the UI, any pages in that location will automatically be picked up by dynamic routing and added to the test page.

# Adding Assets

If you have a component that has assets, like language or icon-sets, you will need to provide these for UMD. In the `ui/build/script.javascript.js` file, you will find a couple of commented out commands that call `addAssets`. Uncomment what you need and add your assets to have them be built and put into the `ui/dist` folder.

# Donate

If you appreciate the work that went into this, please consider [donating to Quasar](https://donate.quasar.dev).

# License

MIT (c) dev@sourcedigital.net