# @bcwdev/quickvue

> Common easy to use vue components for vue 3

Latest version **1.0.16** (published 2023-02-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install @bcwdev/quickvue
pnpm add @bcwdev/quickvue
yarn add @bcwdev/quickvue
bun add @bcwdev/quickvue
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.16 |
| Published | 2023-02-08 |
| First published | 2019-10-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 133.4 KB |
| Known vulnerabilities | 0 (+21 in 2 direct dependencies) |
| Install scripts | no |
| Author | Jake Overall |
| Maintainers | joverall22 |

## Links

- npm: https://www.npmjs.com/package/@bcwdev/quickvue
- npm.io page: https://npm.io/package/@bcwdev/quickvue

## Dependencies (9)

- [vue](https://npm.io/package/vue.md) 3.2.47
- [jszip](https://npm.io/package/jszip.md) ^3.10.1
- [marked](https://npm.io/package/marked.md) 4.2.12
- [@mdi/font](https://npm.io/package/@mdi/font.md) 7.1.96
- [dompurify](https://npm.io/package/dompurify.md) 2.4.3
- [sweetalert2](https://npm.io/package/sweetalert2.md) 11.4.8
- [highlight.js](https://npm.io/package/highlight.js.md) 11.7.0
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) 2.11.6
- [browser-image-compression](https://npm.io/package/browser-image-compression.md) 2.0.0

## Recent versions

- 1.0.16 (latest) — 2023-02-08
- 1.0.15 — 2022-11-06
- 1.0.14-1 — 2022-07-26
- 1.0.14 — 2022-01-25
- 1.0.13 — 2021-10-19
- 1.0.12-3 — 2021-10-19
- 1.0.12-2 — 2021-10-19
- 1.0.12-1 — 2021-10-19
- 1.0.12 — 2021-10-19
- 1.0.11 — 2021-10-19
- 1.0.10 — 2021-10-19
- 1.0.9 — 2021-10-19
- 1.0.8 — 2021-10-19
- 1.0.7 — 2021-10-19
- 1.0.6 — 2021-10-19
- … 65 more at https://npm.io/package/@bcwdev/quickvue/versions

## README

### Install QuickVue

```shell
npm i @bcwdev/quickvue
```

**_app.js_**

```html
<template>
  <div id="app">
    <!-- 
      location="top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center" 
      -->
    <toaster location="top-right" />
    <div class="loader" v-if="loading"></div>
    <router-view />
  </div>
</template>
```

### Demo
```html
<template>
  <div class="home container text-left">
    <h1>QuickVue Component Use Demo</h1>

    <div>
      <p>Bound Input: {{ state.text }}</p>
      <QInput v-model="state.text" label="the label" hint="you can add some hint text" />
    </div>

    <Lockable permissions="view:experimental" color="var(--danger)" title="Experimental" icon="mdi-flask">
      <div class="row my-3">
        <div class="col-md-4" v-for="n in 3" :key="n">
          <div class="card p-2 skeleton-loader">
            <div class="img skeleton-loader"></div>
            <div class="card-title p-2">
              <div class="d-flex align-items-center">
                <div class="skeleton-loader avatar"></div>
                <div class="skeleton-loader text mx-2"></div>
              </div>
            </div>
            <div class="card-body border-top">
              <div class="skeleton-loader text block"></div>
              <div class="skeleton-loader text block"></div>
              <div class="skeleton-loader text"></div>
            </div>
          </div>
        </div>
      </div>
    </Lockable>
    <QMenu>
      <template #trigger>
        <QBtn class="btn-dark text-white">
          button with menu
        </QBtn>
      </template>
      <QList>
        <QListItem
          v-for="n in 5"
          :key="n"
        >
          <div>{{ n }}</div>
        </QListItem>
      </QList>
    </QMenu>

    <QBtn bottom="55px" right="15px" class="fab btn-primary elevation-4" @click="state.openModal = !state.openModal">
      <QIcon icon="mdi-cog" />
    </QBtn>

    <QDialog title="Device Settings"
             :transition="UTILS.isMobile ? 'slideY': 'fade'"
             :fullscreen="UTILS.isMobile"
             :open="state.openModal"
             @close="state.openModal = false"
    >
      <div>
        <h1>Here is some more content</h1>
        <QList>
          <QListItem>
            <QSelect
              class="btn pl-5 btn-primary text-dark text-left"
              :items="state.mics"
              @select="setAudioDevice"
              :selected="state.selected.audio"
              inset-icon-p
              prepend-icon="mdi-microphone bg-primary text-white h-100 px-2 rounded-left square-right"
              label="Microphone"
              item-text="label"
            />
          </QListItem>
          <QListItem>
            <QSelect
              class="btn btn-primary text-dark pl-5 text-left"
              :items="state.cameras"
              @select="setVideoDevice"
              :selected="state.selected.video"
              inset-icon-p
              prepend-icon="mdi-video bg-primary text-white h-100 px-2 rounded-left square-right"
              label="Camera"
              hint="by default items with a name property don't need to specify the label property"
            />
          </QListItem>
        </QList>
      </div>
    </QDialog>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { UTILS } from '@bcwdev/quickvue'

export default {
  name: 'Home',
  setup() {
    const state = reactive({
      text: 'a simple message',
      mics: [{ label: 'mic 1' }, { label: 'mic 2' }],
      cameras: [{ name: 'cam 1' }, { name: 'cam 2' }],
      selected: {
        audio: {},
        video: {}
      },
      openModal: false
    })
    return {
      state,
      UTILS,
      setAudioDevice(device) {
        state.selected.audio = device
      },
      setVideoDevice(device) {
        state.selected.video = device
      }
    }
  }
}
</script>
```

AutoComplete
```html
<template>
  <div>
    <QAutoComplete v-model="search"
                   @change="searchEmails"
                   :items="items"
                   label="User Search:"
                   placeholder="Search by name or email"
                   prepend-icon="mdi-account-search ml-2 text-muted"
                   :append-icon="isLoading ? 'mdi-spin mdi-loading text-dark':'mdi-spin mdi-loading text-white'"
                   inset-icon-a
                   inset-icon-p
    >
      <template #item="data">
        <div class="d-flex action selectable p-1 rounded align-items-center" @click="select(data.item)">
          <img :src="data.item.picture" height="45" class="rounded ml-1 elevation-2" />

          <div class="ml-2 border-left">
            <h6 class="m-0 border-bottom pl-1 pt-1">
              {{ data.item.name }}
            </h6>
            <sup class="pl-1 text-muted">{{ data.item.email }}</sup>
          </div>
        </div>
      </template>
    </QAutoComplete>
  </div>
</template>

<script>
import { profileService } from '../../services/ProfileService'
export default {
  props: {
    label: { type: String, default: 'Find User' },
    size: { type: String, default: '45px' }
  },
  emits: ['submit', 'select'],
  data() {
    return {
      search: '',
      isLoading: false,
      items: []
    }
  },
  methods: {
    async searchEmails() {
      if (!this.search) {
        return
      }
      this.isLoading = true
      this.items = await profileService.findProfiles(this.search)
      this.isLoading = false
    },
    select(user) {
      this.search = user.name
      this.$emit('select', user)
    },
    submit() {
      if (this.search) {
        this.$emit('submit', this.search)
      }
    }
  }
}
</script>
```

---
_Source: https://npm.io/package/@bcwdev/quickvue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._