Vue Page

A page builder and display

Components

Vue Page Component

<template>
  <vue-page
    :form="form"
    :state="state"
    :languages="languages"
    :view="formView"
    @onFormChange="onFormChange"
    @onStateChange="onStateChange"
  />
</template>

<script>
import {VuePage} from 'vue-page';
...
</script>

Props

| Property | Type | Default | Description | | :------------------- | :--------------------------------- | :------ | :------------------------------------------------------------------------- | | form | Form | | The structure of the page including all the widgets and its configurations | | state | FormState | | The state of the form and all its widgets | | languages | Languages | | A JSON containing all locale key-values for each widget | | view | FormView | | The view to display | | widgetControls | { [key: string]: WidgetControl } | {} | Import/Override widgets to be used in form | | widgetEffectControls | { [key: string]: QuestionControl } | {} | Import/Override widget effects to be used in form | | questionControls | { [key: string]: QuestionControl } | {} | Import/Override widgets to be used in form | | plugins | Plugins | {} | Import/Override widgets to be used in form | | onFormChange | (newForm: Form) => void | | | | onStateChange | (newState: FormState) => void | | |

Built-in Widget Controls

You can view the list of built-in widget controls here

Built-in Widget Effect Controls

You can view the list of built-in widget controls here

Built-in Question Controls

You can view the list of built-in question controls here

Models

Plugins

Array<{
  widgetControls: { [widgetType: string]: WidgetControl };
  widgetEffectControls: { [widgetEffectType: string]: WidgetEffectControl };
  questionControls: { [questionType: string]: QuestionControl };
}>

Form

{
  id: string;
  widgets: Widget[];
  configs: {};
  state: FormState;
}

Widget

{
  id: string;
  type: string;
  code?: string;
  parent?: string;
  style?: string;
  reflexiveRules?: ConditionProperties[];
  validationRules?: Array<{ conditions: ConditionProperties[]; error: string }>;
  order?: number;
  properties: WidgetProperties;
}

FormState

{
  widgetState: { [widgetId: string]: any; };
  widgetCodeToIdMap: { [widgetCode: string]: string };
  reflexCodeToIdsMap: { [widgetCode: string]: string };
}

FormView

"display" | "readOnly";

WidgetControl

{
  readOnly: VueConstructor<Vue>;
  display: VueConstructor<Vue>;
  widgetItem?: typeof WidgetItem;
}

QuestionControl

{
  form?: VueConstructor<Vue>;
  display: VueConstructor<Vue>;
  readOnly: VueConstructor<Vue>;
}

Languages

{
  [(formId | widgetId | widgetEffectId): string]: {
    [localeKey: string]: string;
  }
}

Folder Structure

├── models
│   ├── FormState.ts
│   └── WidgetItem.ts
├── questionControls
│   ├── checkbox
│   ├── numberPicker
│   ├── radio
│   ├── FormControl.ts
│   └── index.ts
├── widgetControls
│   ├── header
│   ├── pages
│   ├── question
│   └── index.ts
├── widgetEffectControls
│   ├── anchor
│   ├── aspectRatio
│   ├── boxed
│   ├── gradient
│   ├── opacity
│   ├── reveal
├── index.ts
├── interfaces.ts
├── utils.ts
├── VuePage.vue
├── WidgetsLayout.vue
└── WidgetView.vue

TODO

• [ ] widgetEffects to wrap widgets

• [ ] handle theming/styling

• [ ] outside triggers/event handlers programmatically

• [ ] separate question and widget locale messages (question messages should have prefix)