Commit 6a9397c7 authored by MARCO Jonathan's avatar MARCO Jonathan
Browse files

馃攢 Merge branch 'release/3.0.20'

parents 946e330a 0059294d
Pipeline #61789 passed with stage
in 13 seconds
......@@ -26,3 +26,6 @@ yarn-error.log*
# tests
coverage
.nyc_output
# doc
public/
pages:
stage: deploy
variables:
CONF_PATH: "tests/conf"
tags:
- python3.8
script:
- pip install -U sphinx
- pip install -U sphinx_rtd_theme
- sphinx-build -b html docs public/en -D language='en'
- sphinx-build -b html docs public/fr -D language='fr'
artifacts:
paths:
- public
......@@ -2,199 +2,30 @@
A Vuejs plugin that provides form builder and renderer components.
## How to install
#### modalTabs
### Requirements
> * vue: ^2.6.12
> * vuetify: ^2.2.18
> * vuex: ^3.0.1
### Installation
As this library isn't hosted on the npmjs registry but on our gitlab npm registry, we need to configure npm.
#### NPM configuration
```javascript
// .npmrc
@vue
-unistra
:
registry = https
://git.unistra.fr/api/v4/packages/npm/
```
#### Install
```
npm install --save @vue-unistra/formbuilder
```
#### Configuration
##### Webpack:
Add `@vue-unistra/formbuilder` to the `transpileDependencies` array, and configure webpack to load only the host
application webpack `vue` and `vuetify` instances (prevents the `$attrs is readonly` and `$listeners is readonly` error
messages)
```javascript
// vue.config.js
const path = require('path');
module.exports = {
lintOnSave: false,
transpileDependencies: [
'vuetify',
'@vue-unistra/formbuilder',
],
configureWebpack: {
resolve: {
symlinks: false,
alias: {
'vue$': path.resolve(__dirname, './node_modules/vue/dist/vue.esm.js'),
'^vuetify': path.resolve(__dirname, './node_modules/vuetify'),
},
},
},
};
```
##### Vuetify
`VCard` component and `Ripple` directive have to be manually imported.
```javascript
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify, { VCard } from 'vuetify/lib';
import Ripple from 'vuetify/lib/directives/ripple';
import fr from 'vuetify/es5/locale/fr';
Vue.use(Vuetify, {
components: {
VCard,
},
directives: {
Ripple,
},
});
export default new Vuetify({
lang: {
locales: { fr },
current: 'fr',
},
});
```
You can customize the color of the light theme light or of the dark theme, with the `VuetifyThemeVariant` format:
```javascript
const light: VuetifyThemeVariant = {
accent: '#84E5E8',
error: '#FF7E75',
info: '#62B3FF',
primary: '#105E82',
secondary: '#FF7700',
success: '#75D96C',
warning: '#FFAF57',
}
new Vuetify({
theme: {
options: {
customProperties: true,
},
themes: {
light,
},
},
});
```
If you use custom colours, you can set the font colour with an option in the Unistra formbuilder plugin.
## Add the Unistra formbuilder plugin:
### Add the plugin
Create the file `src/plugins/formbuilder.js`:
```javascript
// src/plugins/formbuilder.js
import Vue from 'vue';
import { vueUnistraFormbuilder } from '@vue-unistra/formbuilder';
import store from '../store';
Vue.use(vueUnistraFormbuilder, { store });
```
The `store` key is the only required key in the configuration object.
And import import it in `/src/main.js` just after the vuetify import:
```javascript
// src/main.js
import Vue from 'vue';
import vuetify from './plugins/vuetify';
import './plugins/formbuilder';
import App from './App.vue';
import store from './store';
Vue.config.productionTip = false;
new Vue({
store,
vuetify,
render: (h) => h(App),
}).$mount('#app');
```
### Options
You can add a list of options to customize the plugin.
#### internationalization
The plugin is internationalised. The default locale is the french.
```javascript
// src/plugins/formbuilder.js
import store from '@/store';
import {fr} from '@vue-unistra/formbuilder/src/locales/fr';
Vue.use(unistraFormbuilder, {
store,
internationalization: {
auto: true,
locale: 'fr',
messages: { fr },
},
});
```
The modalTabs function add the tabs on the field settings.
- api (*no param*): tab to add the name of the field
- conditional (*no param*): conditional module to set if the field is displayed, if the field is required and/or if the field exists.
- data (hasContent: boolean [false], hasMultiple: boolean [false], hasOptions: boolean [false]): sets the data linked
- hasContent: used in the rich text field to add a "rich text editor" in the data tab
- hasMultiple: for fields that have options, set whether it is a single choice or a multiple choice
- hasOptions: sets if the field has options (select, radio...)
- display:
### usf-formbuilder
The `usf-formbuilder` component is used to create and edit forms. It is a drag and drop tool consisting of an editor on
the left side and a control panel on the right side. Fields are added by dragging them from the control panel and
dropping them into the editor. The order of the fields can be rearranged by drag and drop. Each field can be edited (
display, validation, internationalisation, ...) or deleted. When working with authenticated forms, fields can also react
to user properties.
The `usf-formbuilder` component is used to create and edit forms. It is a drag and drop tool consisting of an editor on the left side and a control panel on the right side. Fields are added by dragging them from the control panel and dropping them into the editor. The order of the fields can be rearranged by drag and drop. Each field can be edited (display, validation, internationalisation, ...) or deleted. When working with authenticated forms, fields can also react to user properties.
#### Props
| Props | Type | Default | Description |
| :------------ | :------ |:------- | :------------------------------------------------------------------------------------------------------------------------------------- |
| fields | Array | [ ] | The array of fields to display. Contains field objects. |
You can find the format of the object in the typescript description files, in the `./types` directory.
| Props | Type | Default | Description |
| :------------ | :------ |:------- |:------- |
| fields | Array | [ ] | The array of fields to display. Contains field objects. |
| messages | Object | { } | The internationalization object. Contains for each localization the translations of fields properties (label, hint, placeholder, ...). |
| userTemplates | Object | { } | The user properties templates object. To react to user properties, fields need to know what properties are availabe |
| admin | Boolean | false | Admin users can protect fields (not editable/removable by regular users |
......@@ -204,18 +35,3 @@ to user properties.
| Name | Return | Description |
| :--- | :------------------------------------------- | :----------------------------------- |
| save | `{ fields: [ ], internationalization: { } }` | Emits when `SAVE` button is clicked. |
// TODO: compl茅ter la doc
### Internationalization du plugin
-> passer les trad
-> choisir la locale
-> ajouter des trads
### COLOR
-> faire la doc pour la couleur
-> Options pour l'installateur
......@@ -19,7 +19,8 @@ module.exports = {
alias: {
resolve: ['.js', '.vue', '.ts', 'json'],
entries: [
{ find: /^@\/(.*)/, replacement: path.resolve(projectRoot, 'src/$1') }
{ find: /^#form-plugin\/(.*)/, replacement: path.resolve(projectRoot, 'types/$1') },
{ find: /^@form-plugin\/(.*)/, replacement: path.resolve(projectRoot, 'src/$1') },
]
}
}
......
# Makefile for Sphinx documentation
#
# You can set these variables from the command line.
SPHINXOPTS =
SPHINXBUILD = sphinx-build
PAPER =
BUILDDIR = _build
# User-friendly check for sphinx-build
ifeq ($(shell which $(SPHINXBUILD) >/dev/null 2>&1; echo $$?), 1)
$(error The '$(SPHINXBUILD)' command was not found. Make sure you have Sphinx installed, then set the SPHINXBUILD environment variable to point to the full path of the '$(SPHINXBUILD)' executable. Alternatively you can add the directory with the executable to your PATH. If you don't have Sphinx installed, grab it from http://sphinx-doc.org/)
endif
# Internal variables.
PAPEROPT_a4 = -D latex_paper_size=a4
PAPEROPT_letter = -D latex_paper_size=letter
ALLSPHINXOPTS = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) .
# the i18n builder cannot share the environment and doctrees with the others
I18NSPHINXOPTS = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) .
.PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext
help:
@echo "Please use \`make <target>' where <target> is one of"
@echo " html to make standalone HTML files"
@echo " dirhtml to make HTML files named index.html in directories"
@echo " singlehtml to make a single large HTML file"
@echo " pickle to make pickle files"
@echo " json to make JSON files"
@echo " htmlhelp to make HTML files and a HTML help project"
@echo " qthelp to make HTML files and a qthelp project"
@echo " devhelp to make HTML files and a Devhelp project"
@echo " epub to make an epub"
@echo " latex to make LaTeX files, you can set PAPER=a4 or PAPER=letter"
@echo " latexpdf to make LaTeX files and run them through pdflatex"
@echo " latexpdfja to make LaTeX files and run them through platex/dvipdfmx"
@echo " text to make text files"
@echo " man to make manual pages"
@echo " texinfo to make Texinfo files"
@echo " info to make Texinfo files and run them through makeinfo"
@echo " gettext to make PO message catalogs"
@echo " changes to make an overview of all changed/added/deprecated items"
@echo " xml to make Docutils-native XML files"
@echo " pseudoxml to make pseudoxml-XML files for display purposes"
@echo " linkcheck to check all external links for integrity"
@echo " doctest to run all doctests embedded in the documentation (if enabled)"
clean:
rm -rf $(BUILDDIR)/*
html:
$(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
@echo
@echo "Build finished. The HTML pages are in $(BUILDDIR)/html."
dirhtml:
$(SPHINXBUILD) -b dirhtml $(ALLSPHINXOPTS) $(BUILDDIR)/dirhtml
@echo
@echo "Build finished. The HTML pages are in $(BUILDDIR)/dirhtml."
singlehtml:
$(SPHINXBUILD) -b singlehtml $(ALLSPHINXOPTS) $(BUILDDIR)/singlehtml
@echo
@echo "Build finished. The HTML page is in $(BUILDDIR)/singlehtml."
pickle:
$(SPHINXBUILD) -b pickle $(ALLSPHINXOPTS) $(BUILDDIR)/pickle
@echo
@echo "Build finished; now you can process the pickle files."
json:
$(SPHINXBUILD) -b json $(ALLSPHINXOPTS) $(BUILDDIR)/json
@echo
@echo "Build finished; now you can process the JSON files."
htmlhelp:
$(SPHINXBUILD) -b htmlhelp $(ALLSPHINXOPTS) $(BUILDDIR)/htmlhelp
@echo
@echo "Build finished; now you can run HTML Help Workshop with the" \
".hhp project file in $(BUILDDIR)/htmlhelp."
qthelp:
$(SPHINXBUILD) -b qthelp $(ALLSPHINXOPTS) $(BUILDDIR)/qthelp
@echo
@echo "Build finished; now you can run "qcollectiongenerator" with the" \
".qhcp project file in $(BUILDDIR)/qthelp, like this:"
@echo "# qcollectiongenerator $(BUILDDIR)/qthelp/dynamicforms.qhcp"
@echo "To view the help file:"
@echo "# assistant -collectionFile $(BUILDDIR)/qthelp/dynamicforms.qhc"
devhelp:
$(SPHINXBUILD) -b devhelp $(ALLSPHINXOPTS) $(BUILDDIR)/devhelp
@echo
@echo "Build finished."
@echo "To view the help file:"
@echo "# mkdir -p $$HOME/.local/share/devhelp/dynamicforms"
@echo "# ln -s $(BUILDDIR)/devhelp $$HOME/.local/share/devhelp/dynamicforms"
@echo "# devhelp"
epub:
$(SPHINXBUILD) -b epub $(ALLSPHINXOPTS) $(BUILDDIR)/epub
@echo
@echo "Build finished. The epub file is in $(BUILDDIR)/epub."
latex:
$(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex
@echo
@echo "Build finished; the LaTeX files are in $(BUILDDIR)/latex."
@echo "Run \`make' in that directory to run these through (pdf)latex" \
"(use \`make latexpdf' here to do that automatically)."
latexpdf:
$(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex
@echo "Running LaTeX files through pdflatex..."
$(MAKE) -C $(BUILDDIR)/latex all-pdf
@echo "pdflatex finished; the PDF files are in $(BUILDDIR)/latex."
latexpdfja:
$(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex
@echo "Running LaTeX files through platex and dvipdfmx..."
$(MAKE) -C $(BUILDDIR)/latex all-pdf-ja
@echo "pdflatex finished; the PDF files are in $(BUILDDIR)/latex."
text:
$(SPHINXBUILD) -b text $(ALLSPHINXOPTS) $(BUILDDIR)/text
@echo
@echo "Build finished. The text files are in $(BUILDDIR)/text."
man:
$(SPHINXBUILD) -b man $(ALLSPHINXOPTS) $(BUILDDIR)/man
@echo
@echo "Build finished. The manual pages are in $(BUILDDIR)/man."
texinfo:
$(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo
@echo
@echo "Build finished. The Texinfo files are in $(BUILDDIR)/texinfo."
@echo "Run \`make' in that directory to run these through makeinfo" \
"(use \`make info' here to do that automatically)."
info:
$(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo
@echo "Running Texinfo files through makeinfo..."
make -C $(BUILDDIR)/texinfo info
@echo "makeinfo finished; the Info files are in $(BUILDDIR)/texinfo."
gettext:
$(SPHINXBUILD) -b gettext $(I18NSPHINXOPTS) $(BUILDDIR)/locale
@echo
@echo "Build finished. The message catalogs are in $(BUILDDIR)/locale."
changes:
$(SPHINXBUILD) -b changes $(ALLSPHINXOPTS) $(BUILDDIR)/changes
@echo
@echo "The overview file is in $(BUILDDIR)/changes."
linkcheck:
$(SPHINXBUILD) -b linkcheck $(ALLSPHINXOPTS) $(BUILDDIR)/linkcheck
@echo
@echo "Link check complete; look for any errors in the above output " \
"or in $(BUILDDIR)/linkcheck/output.txt."
doctest:
$(SPHINXBUILD) -b doctest $(ALLSPHINXOPTS) $(BUILDDIR)/doctest
@echo "Testing of doctests in the sources finished, look at the " \
"results in $(BUILDDIR)/doctest/output.txt."
xml:
$(SPHINXBUILD) -b xml $(ALLSPHINXOPTS) $(BUILDDIR)/xml
@echo
@echo "Build finished. The XML files are in $(BUILDDIR)/xml."
pseudoxml:
$(SPHINXBUILD) -b pseudoxml $(ALLSPHINXOPTS) $(BUILDDIR)/pseudoxml
@echo
@echo "Build finished. The pseudo-XML files are in $(BUILDDIR)/pseudoxml."
# SOME DESCRIPTIVE TITLE.
# Copyright (C) 2021, Direction du Num茅rique
# This file is distributed under the same license as the formbuilder plugin package.
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
#
#, fuzzy
msgid ""
msgstr ""
"Project-Id-Version: formbuilder plugin 0.1\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2021-09-28 16:50+0200\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
#: ../../configuration/customField.rst:2
msgid "Add a custom field"
msgstr ""
#: ../../configuration/customField.rst:4
msgid "To add a custom field we add the key ``customFields`` in the options param:"
msgstr ""
#: ../../configuration/customField.rst:22
msgid "``Field`` format"
msgstr ""
#: ../../configuration/customField.rst:25
msgid "id"
msgstr ""
#: ../../configuration/customField.rst:28
#: ../../configuration/customField.rst:39
#: ../../configuration/customField.rst:50
#: ../../configuration/customField.rst:63
#: ../../configuration/customField.rst:103
#: ../../configuration/customField.rst:130
#: ../../configuration/customField.rst:143
#: ../../configuration/customField.rst:222
#: ../../configuration/customField.rst:241
msgid "type"
msgstr ""
#: ../../configuration/customField.rst:28
#: ../../configuration/customField.rst:39
#: ../../configuration/customField.rst:50
#: ../../configuration/customField.rst:63
#: ../../configuration/customField.rst:103
#: ../../configuration/customField.rst:130
#: ../../configuration/customField.rst:143
#: ../../configuration/customField.rst:241
msgid "required"
msgstr ""
#: ../../configuration/customField.rst:30
#: ../../configuration/customField.rst:41
#: ../../configuration/customField.rst:52
msgid "string"
msgstr ""
#: ../../configuration/customField.rst:30
#: ../../configuration/customField.rst:41
#: ../../configuration/customField.rst:52
#: ../../configuration/customField.rst:145
#: ../../configuration/customField.rst:243
msgid "鉁"
msgstr ""
#: ../../configuration/customField.rst:33
msgid "Is the unique value to identify the field type. Format: Usf<FieldType>, e.g.: ``UsftText``, ``UstSelect``..."
msgstr ""
#: ../../configuration/customField.rst:36
msgid "name"
msgstr ""
#: ../../configuration/customField.rst:44
msgid "Is the name of the field. Is the key for translation. Is the english text in the fields list."
msgstr ""
#: ../../configuration/customField.rst:47
msgid "icon"
msgstr ""
#: ../../configuration/customField.rst:55
msgid "Is the name for the icon. Format: mdi-<iconName>. The icon name can be found on the `mdi icons website <https://materialdesignicons.com/>`_. e.g.: ``mdi-comment-text``, ``mdi-table-column``..."
msgstr ""
#: ../../configuration/customField.rst:60
msgid "types"
msgstr ""
#: ../../configuration/customField.rst:65
#: ../../configuration/customField.rst:105
msgid "{ label: string, value: string }"
msgstr ""
#: ../../configuration/customField.rst:65
#: ../../configuration/customField.rst:105
#: ../../configuration/customField.rst:132
msgid "x"
msgstr ""
#: ../../configuration/customField.rst:68
msgid "List the possible types for the field. e.g.: for the text field:"
msgstr ""
#: ../../configuration/customField.rst:70
msgid "Linked of the option ``type`` in the `usfSubtypes`_ key."
msgstr ""
#: ../../configuration/customField.rst:100
msgid "styles"
msgstr ""
#: ../../configuration/customField.rst:108
msgid "List the possible styles for the field. e.g.: for the date field:"
msgstr ""
#: ../../configuration/customField.rst:110
msgid "Linked of the option ``style`` in the `usfSubtypes`_ key."
msgstr ""
#: ../../configuration/customField.rst:127
msgid "nested"
msgstr ""
#: ../../configuration/customField.rst:132
#: ../../configuration/customField.rst:145
msgid "Array<string>"
msgstr ""
#: ../../configuration/customField.rst:135
msgid "List the nested component ``id``."
msgstr ""
#: ../../configuration/customField.rst:140
msgid "usfSubtypes"
msgstr ""
#: ../../configuration/customField.rst:151
msgid "accordion"
msgstr ""
#: ../../configuration/customField.rst:153
msgid "Accesses a specific `display tab <display-tab_>`_ for the accordion layout, including visibility and panel management settings (add, delete, move)."
msgstr ""
#: ../../configuration/customField.rst:158
msgid "boxInput"
msgstr ""
#: ../../configuration/customField.rst:160
msgid "In the `display tab <display-tab_>`_, adds the possibility to fill in the ``placeholder``, ``prefix`` and ``suffix`` and displays the switch buttons to activate the default style for the field."
msgstr ""
#: ../../configuration/customField.rst:165
msgid "dateTime"
msgstr ""
#: ../../configuration/customField.rst:167
msgid "In the `validation tab <validation-tab_>`_ adds the inputs minimum date & the maximal date."
msgstr ""
#: ../../configuration/customField.rst:172
msgid "defaultValue"
msgstr ""
#: ../../configuration/customField.rst:174
msgid "In the `validation tab <validation-tab_>`_ adds a input to set a default value for this field."