open-index/open-npm huggingface dataset:
npm package: @it-enterprise/page-player
Description: [![npm](https://img.shields.io/npm/v/@it-enterprise/page-player.svg)](https://www.npmjs.com/package/@it-enterprise/page-player)
Latest version: 0.2.113

[![npm](https://img.shields.io/npm/v/@it-enterprise/page-player.svg)](https://www.npmjs.com/package/@it-enterprise/page-player)


# Page player

> Проигрыватель декларативных моделей для Vuetify framework

## Установка 

```bash
npm install @it-enterprise/page-player
```

## Использование 

### Импорт стилей

Необходимо импортировать стили Page Player в своем приложении.

```javascript
import '@it-enterprise/page-player/dist/page-player.css'
```

### Импорт скриптов


```javascript

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import customWidgets from './customWidgets/index'
import pagePlayerPlugin from '@it-enterprise/page-player'

Vue.use(pagePlayerPlugin, {
  datasources: {
    ArticlesDataSource: () => import('@/datasources/articles-datasource.js')
  },
  widgets: customWidgets
})

new Vue({
  vuetify,
  render: h => h(App),
}).$mount('#app')


```


### Использование в шаблоне

```html
<template>
  <div id="app">
    <dr-page-player :editorMode="false" v-model="model"/>
  </div>
</template>
```



### Создание пользовательских виджетов

Виджет состоит из 2х частей: 
1. Схема виджета
2. vue компонент

#### Схема виджета

Схема виджета это простой JSON объект, описанный по стандарту JSON Schema

Пример схемы виджета:

```javascript

const schema = {
  allowInToolbox: true,
  $Type: 'dr-anchor',
  name: 'Anchor',
  group: 'My widgets',
  icon: 'link',
  properties: {
    $ID: { 
      name: 'Идентификатор',
      type: 'string'
    },
    Text: {
      name: 'Текст',
      type: 'string'
    },
    Href: {
      name: 'Ссылка',
      type: 'string'
    }
  }
}
```

#### Описание полей схемы виджета

  | Свойство | Обязательный | Описание |
  |--|--|--|
  |`$Type`|да|Идентификатор типа виджета|
  |  `allowInToolbox` | нет |  Если `true` - этот виджет будет  доступен на панели виджетов в редакторе. <br> Если `false`, виджет   может быть использован в модели, но на панели виджетов он будет не  доступен (пример: колонки и строли Grid Layout widget )  |
  |`name`| да | Имя виджета, отображаемое в панели виджетов   редактора|
  |`group`| да | Имя группы виджетов, в которой данный виджет будет   находиться в панели виджетов редактора|
  |`icon`| да | Ключ fontAwesome иконки, которая будет отображаться   возле этого виджета в списке виджетов в редакторе|
npm package: @it-enterprise/vue-common
Description: ``` npm install ```
Latest version: 1.0.19

# vue-common

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @it-enterprise/web-app-common
Description: ``` npm install ```
Latest version: 1.0.61-alpha.4

# web-app-common

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).