@it-enterprise/page-player

Page player

Проигрыватель декларативных моделей для Vuetify framework

Установка

npm install @it-enterprise/page-player

Использование

Импорт стилей

Необходимо импортировать стили Page Player в своем приложении.

import '@it-enterprise/page-player/dist/page-player.css'

Импорт скриптов

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')

Использование в шаблоне

<template>
  <div id="app">
    <dr-page-player :editorMode="false" v-model="model"/>
  </div>
</template>

Создание пользовательских виджетов

Виджет состоит из 2х частей:

1. Схема виджета
2. vue компонент

Схема виджета

Схема виджета это простой JSON объект, описанный по стандарту JSON Schema

Пример схемы виджета:

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 - этот виджет будет доступен на панели виджетов в редакторе. Если false, виджет может быть использован в модели, но на панели виджетов он будет не доступен (пример: колонки и строли Grid Layout widget )
name	да	Имя виджета, отображаемое в панели виджетов редактора
group	да	Имя группы виджетов, в которой данный виджет будет находиться в панели виджетов редактора
icon	да	Ключ fontAwesome иконки, которая будет отображаться возле этого виджета в списке виджетов в редакторе