# mv-template-page

> ``` yarn add mv-template-page or npm i mv-template-page ```

Latest version **0.0.42** (published 2021-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install mv-template-page
pnpm add mv-template-page
yarn add mv-template-page
bun add mv-template-page
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.42 |
| Published | 2021-09-16 |
| First published | 2021-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 58 |
| Unpacked size | 61.7 MB |
| Known vulnerabilities | 0 (+39 in 9 direct dependencies) |
| Install scripts | no |
| Author | dyvapandhu |
| Maintainers | dyvapandhu |
| Keywords | mv-template |

## Links

- npm: https://www.npmjs.com/package/mv-template-page
- Repository: https://gitlab.com/mv-lanius/products/mes/mes-template-page
- Homepage: https://gitlab.com/mv-lanius/products/mes/mes-template-page#readme
- Issues: https://gitlab.com/mv-lanius/products/mes/mes-template-page/issues
- npm.io page: https://npm.io/package/mv-template-page

## Dependencies (58)

- [vue](https://npm.io/package/vue.md) 2.6.12
- [uuid](https://npm.io/package/uuid.md) 8.3.2
- [vuex](https://npm.io/package/vuex.md) 3.6.0
- [axios](https://npm.io/package/axios.md) 0.21.1
- [swiper](https://npm.io/package/swiper.md) 5.4.5
- [bpmn-js](https://npm.io/package/bpmn-js.md) ^8.6.1
- [core-js](https://npm.io/package/core-js.md) 3.8.1
- [echarts](https://npm.io/package/echarts.md) 4.8.0
- [leaflet](https://npm.io/package/leaflet.md) 1.6.0
- [prismjs](https://npm.io/package/prismjs.md) 1.19.0
- [chart.js](https://npm.io/package/chart.js.md) 2.9.4
- [vue-i18n](https://npm.io/package/vue-i18n.md) 8.22.2
- [vue-tour](https://npm.io/package/vue-tour.md) 1.5.0
- [@casl/vue](https://npm.io/package/@casl/vue.md) 1.1.1
- [bootstrap](https://npm.io/package/bootstrap.md) 4.6.0
- [apexcharts](https://npm.io/package/apexcharts.md) 3.23.0
- [portal-vue](https://npm.io/package/portal-vue.md) 2.1.7
- [vue-router](https://npm.io/package/vue-router.md) 3.4.9
- [vue-select](https://npm.io/package/vue-select.md) 3.11.2
- [animate.css](https://npm.io/package/animate.css.md) 4.1.1
- [postcss-rtl](https://npm.io/package/postcss-rtl.md) 1.7.3
- [vue-chartjs](https://npm.io/package/vue-chartjs.md) 3.5.0
- [vue-context](https://npm.io/package/vue-context.md) 6.0.0
- [vue-echarts](https://npm.io/package/vue-echarts.md) 5.0.0-beta.0
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) 4.0.0
- [jsonwebtoken](https://npm.io/package/jsonwebtoken.md) 8.5.1
- [vee-validate](https://npm.io/package/vee-validate.md) 3.4.5
- [vue2-leaflet](https://npm.io/package/vue2-leaflet.md) 2.5.2
- [vuedraggable](https://npm.io/package/vuedraggable.md) 2.24.3
- [@casl/ability](https://npm.io/package/@casl/ability.md) 4.1.6
- [bootstrap-vue](https://npm.io/package/bootstrap-vue.md) 2.21.1
- [mv-cms-render](https://npm.io/package/mv-cms-render.md) ^0.1.15
- [vue-apexcharts](https://npm.io/package/vue-apexcharts.md) 1.6.0
- [vue-clipboard2](https://npm.io/package/vue-clipboard2.md) 0.3.1
- [vue-good-table](https://npm.io/package/vue-good-table.md) 2.21.0
- [vue-autosuggest](https://npm.io/package/vue-autosuggest.md) 2.2.0
- [vue-form-wizard](https://npm.io/package/vue-form-wizard.md) 0.8.4
- [vue-grid-layout](https://npm.io/package/vue-grid-layout.md) ^2.3.12
- [vue-sweetalert2](https://npm.io/package/vue-sweetalert2.md) 4.1.1
- [vue-quill-editor](https://npm.io/package/vue-quill-editor.md) 3.0.6
- [vue-tree-halower](https://npm.io/package/vue-tree-halower.md) 1.8.3
- [@fullcalendar/vue](https://npm.io/package/@fullcalendar/vue.md) 5.5.0
- [vue-feather-icons](https://npm.io/package/vue-feather-icons.md) 5.1.0
- [@fullcalendar/list](https://npm.io/package/@fullcalendar/list.md) 5.5.0
- [axios-mock-adapter](https://npm.io/package/axios-mock-adapter.md) 1.19.0
- [vue-awesome-swiper](https://npm.io/package/vue-awesome-swiper.md) 4.1.1
- [vue-toastification](https://npm.io/package/vue-toastification.md) 1.7.8
- [vue-prism-component](https://npm.io/package/vue-prism-component.md) 1.1.1
- [@vue/composition-api](https://npm.io/package/@vue/composition-api.md) 1.0.0-beta.22
- [vue-cleave-component](https://npm.io/package/vue-cleave-component.md) 2.1.3
- [vue-ripple-directive](https://npm.io/package/vue-ripple-directive.md) 2.0.1
- [vue-slider-component](https://npm.io/package/vue-slider-component.md) 3.2.11
- [@fullcalendar/daygrid](https://npm.io/package/@fullcalendar/daygrid.md) 5.5.0
- [vue-perfect-scrollbar](https://npm.io/package/vue-perfect-scrollbar.md) 0.2.1
- [@fullcalendar/timegrid](https://npm.io/package/@fullcalendar/timegrid.md) 5.5.0
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) 8.1.6
- [@fullcalendar/interaction](https://npm.io/package/@fullcalendar/interaction.md) 5.5.0
- [@syncfusion/ej2-vue-kanban](https://npm.io/package/@syncfusion/ej2-vue-kanban.md) ^19.2.56

## Recent versions

- 0.0.42 (latest) — 2021-09-16
- 0.0.41 — 2021-09-08
- 0.0.40 — 2021-09-08
- 0.0.39 — 2021-09-07
- 0.0.38 — 2021-08-31
- 0.0.37 — 2021-08-18
- 0.0.36 — 2021-08-16
- 0.0.35 — 2021-08-16
- 0.0.34 — 2021-08-09
- 0.0.33 — 2021-08-09
- 0.0.32 — 2021-08-09
- 0.0.31 — 2021-08-06
- 0.0.30 — 2021-08-06
- 0.0.29 — 2021-08-06
- 0.0.28 — 2021-08-06
- … 25 more at https://npm.io/package/mv-template-page/versions

## README

# MV Template Page

## Installation

```
yarn add mv-template-page
or
npm i mv-template-page
```

## Example

```
<template>
  <mv-template
    :title="title"
    :dashboard-ids="dashboardIds"
    :token="configToken"
    :is-dark="isDark"
    :filters.sync="filters"
    :update-filters.sync="updateFilters"
    :code="code"
  />
</template>
<script>
import MvTemplate from 'mv-template-page'

export default {
  components: {
    MvTemplate,
  },
  data() {
    return {
      title: 'Dev Test Page',
      configToken: `Bearer ${localStorage.getItem('accessToken')}`,
      isDark: false,
      dashboardIds: [
        {
          title: 'Summary',
          id: '60dad4302722b900132f807e',
        },
        {
          title: 'Analytics',
          id: '60ebc0914a0a130012db902b',
        },
      ],
      filters: [
        {
          name: 'Filter-1',
          operator: '=',
          property: 'group_exams_gender',
          propertyType: 'string',
          value: 'male',
          widgets: ['60c18c69c65520001422e662'],
          _id: '60c61f3a471c96001211a619',
        },
      ],
      updateFilters: [
        {
          name: 'Filter-1',
          value: 'male',
          operator: '=',
        },
      ],
      code: 'PAGE-1',
    }
  },
}
</script>
```
## Add New Page
1. Create new folder under 'components' folder using this format 'page-[code]'
2. Create 'MainComponent.vue' into component folder that you have already created. If you want to create other component for your new page, make sure it registered in this 'MainComponent.vue'
3. 'MainComponent.vue' must have this props:
    - title
    - token
    - dashboardIds
    - isDark
    - filters
    - updateFilters
4. Import your 'MainComponent.vue' into 'MVTemplate.vue' and create new code for  your new component
5. Register your new code in MES swagger (temporary) :
    https://mes.machinevision.global:4600/mes/api/menu

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