Commit 1975babb authored by MARCO Jonathan's avatar MARCO Jonathan
Browse files

🔀 Merge branch 'release/3.0.23'

parents 143ebc2d 9ad86deb
Pipeline #62960 passed with stage
in 13 seconds
......@@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: formbuilder plugin 0.1\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2021-09-21 16:34+0200\n"
"POT-Creation-Date: 2021-10-12 09:47+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"
......@@ -33,17 +33,17 @@ msgid "If you customize the color in Vuetify, you can define if your primary col
msgstr ""
#: ../../configuration/options.rst:27
#: ../../configuration/options.rst:55
#: ../../configuration/options.rst:56
msgid "option"
msgstr ""
#: ../../configuration/options.rst:27
#: ../../configuration/options.rst:55
#: ../../configuration/options.rst:56
msgid "type"
msgstr ""
#: ../../configuration/options.rst:27
#: ../../configuration/options.rst:55
#: ../../configuration/options.rst:56
msgid "default"
msgstr ""
......@@ -53,7 +53,7 @@ msgstr ""
#: ../../configuration/options.rst:29
#: ../../configuration/options.rst:31
#: ../../configuration/options.rst:57
#: ../../configuration/options.rst:58
msgid "boolean"
msgstr ""
......@@ -75,13 +75,17 @@ msgid "In the builder component you have a \"preview button\". This button displ
msgstr ""
#: ../../configuration/options.rst:38
msgid "The option ``previewIsSave`` set if this button save the form before the displaying or not."
msgid "The option ``previewIsSave`` set if this button saves the form before the displaying or not."
msgstr ""
#: ../../configuration/options.rst:57
#: ../../configuration/options.rst:39
msgid "The option ``hasPreviewButton`` defines if the button is displayed or not."
msgstr ""
#: ../../configuration/options.rst:58
msgid "previewIsSave"
msgstr ""
#: ../../configuration/options.rst:57
#: ../../configuration/options.rst:58
msgid "true"
msgstr ""
......@@ -35,7 +35,8 @@ Preview button action
---------------------
| In the builder component you have a "preview button". This button displays the form as if the user where using it.
| The option ``previewIsSave`` set if this button save the form before the displaying or not.
| The option ``previewIsSave`` set if this button saves the form before the displaying or not.
| The option ``hasPreviewButton`` defines if the button is displayed or not.
.. code-block:: javascript
......
......@@ -9,7 +9,7 @@ msgid ""
msgstr ""
"Project-Id-Version: formbuilder plugin 0.1\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2021-09-21 16:34+0200\n"
"POT-Creation-Date: 2021-10-12 09:47+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"
......@@ -37,65 +37,70 @@ msgid ""
"the font color is the white, or if the color is light, the font color is "
"the black."
msgstr ""
"Si vous personnalisez les couleurs de Vuetify, vous pouvez définir si la couleur primaire "
"ou la couleur secondaire sont claire ou foncée. Si la couleur est foncée, "
"le text sera en blanc, et si la couleur est claire, le text sera "
"en noir."
"Si vous personnalisez les couleurs de Vuetify, vous pouvez définir si la "
"couleur primaire ou la couleur secondaire sont claire ou foncée. Si la "
"couleur est foncée, le text sera en blanc, et si la couleur est claire, "
"le text sera en noir."
#: ../../configuration/options.rst:26 ../../configuration/options.rst:53
#: ../../configuration/options.rst:27 ../../configuration/options.rst:56
msgid "option"
msgstr ""
#: ../../configuration/options.rst:26 ../../configuration/options.rst:53
#: ../../configuration/options.rst:27 ../../configuration/options.rst:56
msgid "type"
msgstr ""
#: ../../configuration/options.rst:26 ../../configuration/options.rst:53
#: ../../configuration/options.rst:27 ../../configuration/options.rst:56
msgid "default"
msgstr "défaut"
#: ../../configuration/options.rst:28
#: ../../configuration/options.rst:29
msgid "primaryIsDark"
msgstr ""
#: ../../configuration/options.rst:28 ../../configuration/options.rst:30
#: ../../configuration/options.rst:55
#: ../../configuration/options.rst:29 ../../configuration/options.rst:31
#: ../../configuration/options.rst:58
msgid "boolean"
msgstr ""
#: ../../configuration/options.rst:28 ../../configuration/options.rst:30
#: ../../configuration/options.rst:29 ../../configuration/options.rst:31
msgid "false"
msgstr ""
#: ../../configuration/options.rst:30
#: ../../configuration/options.rst:31
msgid "secondaryIsDark"
msgstr ""
#: ../../configuration/options.rst:34
#: ../../configuration/options.rst:35
msgid "Preview button action"
msgstr "Bouton \"Prévisualisation\""
#: ../../configuration/options.rst:36
#: ../../configuration/options.rst:37
msgid ""
"In the builder component you have a \"preview button\". This button "
"displays the form as if the user where using it."
msgstr ""
"Dans l'interface de construction on retrouve un bouton de prévisualisation. Ce bouton "
"affiche le formulaire quand on clique dessus."
"Dans l'interface de construction on retrouve un bouton de "
"prévisualisation. Ce bouton affiche le formulaire quand on clique dessus."
#: ../../configuration/options.rst:37
#: ../../configuration/options.rst:38
msgid ""
"The option ``previewIsSave`` set if this button save the form before the "
"displaying or not."
"The option ``previewIsSave`` set if this button saves the form before the"
" displaying or not."
msgstr ""
"L'option ``previewIsSave`` modifie si ce bouton sauvegarde le formulaire "
"avant de l'afficher ou non."
#: ../../configuration/options.rst:39
msgid "The option ``hasPreviewButton`` defines if the button is displayed or not."
msgstr ""
"L'option ``previewIsSave`` modifie si ce bouton sauvegarde le formulaire avant "
"de l'afficher ou non."
"L'option ``hasPreviewButton`` modifie si ce bouton est affiché ou non."
#: ../../configuration/options.rst:55
#: ../../configuration/options.rst:58
msgid "previewIsSave"
msgstr ""
#: ../../configuration/options.rst:55
#: ../../configuration/options.rst:58
msgid "true"
msgstr ""
{
"name": "@vue-unistra/formbuilder",
"version": "3.0.22",
"version": "3.0.23",
"main": "dist/index.js",
"files": [
"dist/*",
......
<template>
<v-menu
v-show="editorMode || visible"
v-if="editorMode || exist"
v-model="menu.isVisible"
offset-y
:close-on-content-click="menu.closeOnContentClick"
:min-width="menu.minWidth"
v-show="editorMode || visible"
v-if="editorMode || exist"
v-model="menu.isVisible"
offset-y
:close-on-content-click="menu.closeOnContentClick"
:min-width="menu.minWidth"
>
<template #activator="{ on }">
<v-text-field
:value="getDateOrTimeFormat(value)"
:class="editorMode ? 'picker-text-field mx-2' : 'picker-text-field'"
:label="label"
:hint="translated(fieldId, 'hint')"
:persistent-hint="field.persistentHint"
:prepend-icon="textFieldPrependIcon"
readonly
clearable
:rules="[handleRequired]"
v-on="on"
:value="getDateOrTimeFormat(value)"
:class="editorMode ? 'picker-text-field mx-2' : 'picker-text-field'"
:label="label"
:hint="translated(fieldId, 'hint')"
:persistent-hint="field.persistentHint"
:prepend-icon="textFieldPrependIcon"
readonly
clearable
:rules="[handleRequired]"
:disabled="fieldOnReadOnly"
v-on="on"
>
<template #append-outer>
<v-icon
v-if="field.repeatable"
@click="repeat"
v-if="field.repeatable"
@click="repeat"
>
mdi-plus
</v-icon>
......@@ -32,33 +33,35 @@
</template>
<v-date-picker
v-if="field.type === 'date'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
:min="dateMin"
:max="dateMax"
no-title
@input="menu.isVisible = false"
color="primary"
v-if="field.type === 'date'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
:min="dateMin"
:max="dateMax"
no-title
@input="menu.isVisible = false"
color="primary"
/>
<v-time-picker
v-if="field.type === 'time'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
@input="menu.isVisible = false"
:format="timeFormat"
color="primary"
v-if="field.type === 'time'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
@input="menu.isVisible = false"
:format="timeFormat"
color="primary"
/>
</v-menu>
</template>
<script lang="ts">
import {usfFieldMixin, usfHandleConditional} from '../../../mixins'
import dayjs from '../../../utils/dayjs'
import Vue from 'vue'
import {UnitTypeLongPlural} from 'dayjs';
import { usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin } from '@form-plugin/mixins';
import dayjs from '@form-plugin/utils/dayjs';
import Vue from 'vue';
import { UnitTypeLongPlural } from 'dayjs';
import { Field } from '#form-plugin/models/form';
import { mapGetters } from 'vuex';
interface ComponentData {
menu: {
......@@ -74,6 +77,7 @@ export default Vue.extend({
mixins: [
usfFieldMixin,
usfHandleConditional,
usfDefaultTokenMixin,
],
props: {
......@@ -93,33 +97,34 @@ export default Vue.extend({
}),
computed: {
...mapGetters('form', ['getFieldById']),
textFieldPrependIcon(): string {
return this.field.type === 'date' ? 'mdi-calendar-outline' : 'mdi-clock-outline'
return this.field.type === 'date' ? 'mdi-calendar-outline' : 'mdi-clock-outline';
},
pickerRef(): string {
return `${this.field.type}Picker`
return `${this.field.type}Picker`;
},
dateMin(): undefined | string {
return this.getDateFromDelta(this.field.minValue, this.field.minUnit, 'min')
return this.getDateFromDelta(this.field.minValue, this.field.minUnit, 'min');
},
dateMax() {
return this.getDateFromDelta(this.field.maxValue, this.field.maxUnit, 'max')
return this.getDateFromDelta(this.field.maxValue, this.field.maxUnit, 'max');
},
timeFormat() {
return this._globaleLocale === 'fr' ? '24hr' : 'ampm'
return this._globaleLocale === 'fr' ? '24hr' : 'ampm';
},
},
watch: {
'field.type': function () {
this.field.value = ''
'field.type': function() {
this.field.value = '';
},
'menu.isVisible': function (val) {
'menu.isVisible': function(val) {
if (val && this.field.type === 'date' && this.field.style === 'standard') {
setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'DATE'))
setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'DATE'));
}
if (val && this.field.type === 'date' && this.field.style === 'birthday') {
setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'YEAR'))
setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'YEAR'));
}
},
},
......@@ -134,42 +139,42 @@ export default Vue.extend({
* @return {string | undefined}
*/
getDateFromDelta(
delta: number | undefined,
unit: UnitTypeLongPlural | undefined,
type: 'max' | 'min',
delta: number | undefined,
unit: UnitTypeLongPlural | undefined,
type: 'max' | 'min',
): undefined | string {
if (unit) {
const now = dayjs()
const now = dayjs();
if (delta === 0) {
return now.toISOString()
return now.toISOString();
}
return (type === 'max' && this.field.maxDateFuture) || (type === 'min' && this.field.minDateFuture)
? now.add(delta, unit)
.toISOString()
: now.subtract(delta, unit)
.toISOString()
? now.add(delta, unit)
.toISOString()
: now.subtract(delta, unit)
.toISOString();
}
return undefined
return undefined;
},
getDateOrTimeFormat(dateOrTime: string): string {
if (!dateOrTime) return dateOrTime
if (!dateOrTime) return dateOrTime;
if (this.field.type === 'time') {
return this._globaleLocale === 'fr'
? dayjs(dateOrTime, 'HH:mm').format('HH:mm')
: dayjs(dateOrTime, 'h:mm').format('hh:mm a')
? dayjs(dateOrTime, 'HH:mm').format('HH:mm')
: dayjs(dateOrTime, 'h:mm').format('hh:mm a');
}
const format = this._globaleLocale === 'fr'
? 'DD/MM/YYYY'
: 'YYYY-MM-DD'
return dayjs(dateOrTime).format(format)
? 'DD/MM/YYYY'
: 'YYYY-MM-DD';
return dayjs(dateOrTime).format(format);
},
},
})
});
</script>
<style lang="scss" scoped>
......
......@@ -35,14 +35,13 @@
</template>
<script lang="ts">
import { usfFieldMixin, usfHandleConditional } from '../../../mixins';
import { usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin } from '@form-plugin/mixins';
import Vue from 'vue';
import { mapGetters } from 'vuex';
export default Vue.extend({
name: 'UsfText',
mixins: [usfFieldMixin, usfHandleConditional],
mixins: [usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin],
props: {
editorMode: {
......@@ -53,7 +52,6 @@ export default Vue.extend({
},
computed: {
...mapGetters('form', ['autoCompletionIsActive']),
rules(): (boolean | string)[] {
const rules = [
this.handleRequired,
......@@ -78,9 +76,6 @@ export default Vue.extend({
? `${this.field.label} doit être inférieur ou égal à ${this.field.max}`
: `${this.field.label} doit comporter ${this.field.max} caractères ou moins`;
},
fieldOnReadOnly(): boolean {
return !!this.field.defaultTokenValue && this.autoCompletionIsActive;
},
},
mounted() {
......@@ -89,17 +84,6 @@ export default Vue.extend({
}
},
watch: {
autoCompletionIsActive: function() {
if (this.autoCompletionIsActive) {
this.$store.dispatch('submission/updateValue', {
key: this.field.name,
value: this.user[this.field.defaultTokenValue],
});
}
},
},
methods: {
handleMin(): boolean | string {
const test = this.field.type === 'number'
......
<template>
<div id="UsfActionButtonsContainer">
<v-tooltip bottom v-if="previewIsSave || !hasFields">
<template v-slot:activator="{on, attrs}">
<div v-on="on" :class="{save_disabled: !hasFields}">
<v-btn
v-bind="attrs"
outlined
block
small
tile
color="primary"
:disabled="!hasFields"
>
{{ _uct('builder.actionButtons.preview') }}
<v-icon right>mdi-tooltip-image</v-icon>
</v-btn>
</div>
</template>
<span v-if="hasFields">{{ _uct('builder.actionButtons.previewInfo') }}</span>
<span v-else>{{ _uct('builder.actionButtons.previewDisabled') }}</span>
</v-tooltip>
<div v-if="hasPreviewButton">
<v-tooltip bottom v-if="previewIsSave || !hasFields">
<template v-slot:activator="{on, attrs}">
<div v-on="on" :class="{save_disabled: !hasFields}">
<v-btn
v-bind="attrs"
outlined
block
small
tile
color="primary"
:disabled="!hasFields"
@click.stop="onPreview"
>
{{ _uct('builder.actionButtons.preview') }}
<v-icon right>mdi-tooltip-image</v-icon>
</v-btn>
</div>
</template>
<span v-if="hasFields">{{ _uct('builder.actionButtons.previewInfo') }}</span>
<span v-else>{{ _uct('builder.actionButtons.previewDisabled') }}</span>
</v-tooltip>
<v-btn
v-else
outlined
block
small
tile
color="primary"
@click.stop="onPreview"
>
{{ _uct('builder.actionButtons.preview') }}{{ !hasFields }}
<v-icon right>mdi-tooltip-image</v-icon>
</v-btn>
</div>
<v-btn
v-else
outlined
block
small
tile
color="primary"
@click.stop="$emit('preview', { fields: denormalizedFields, messages })"
>
{{ _uct('builder.actionButtons.preview') }}{{ !hasFields }}
<v-icon right>mdi-tooltip-image</v-icon>
</v-btn>
<v-btn
outlined
block
......@@ -93,19 +97,24 @@ export default Vue.extend({
]),
...mapState('form', ['messages']),
},
methods: {
onPreview() {
if (this.hasFields) {
this.$emit('preview', { fields: this.denormalizedFields, messages: this.messages });
}
},
},
});
</script>
<style lang="scss" scoped>
#UsfActionButtonsContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 24px;
display: flex;
flex-direction: column;
@media all and (max-width: 1800px) {
display: flex;
flex-wrap: wrap;
grid-gap: 10px;
> div, > button {
margin-bottom: 15px;
}
.v-btn {
......
......@@ -15,7 +15,7 @@
<template v-if="!field.protected || admin">
<v-spacer />
<v-dialog
v-model="duplicateDialog"
v-model="duplicateDialogDisplayed"
persistent
scrollable
width="400"
......@@ -35,7 +35,7 @@
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="primary" outlined elevation="0" @click.stop="duplicateDialog = false">
<v-btn color="primary" outlined elevation="0" @click.stop="duplicateDialogDisplayed = false">
{{ _uct('builder.duplicate.dialog.buttons.cancel') }}
</v-btn>
<v-btn color="primary" elevation="0" @click="onDuplicateThisField">
......@@ -61,9 +61,32 @@
@close-settings-modal="closeSettingsModal"
/>
</v-dialog>
<v-btn icon x-small @click="removeField">
<v-icon>mdi-close</v-icon>
</v-btn>
<v-dialog
v-model="deleteDialogDisplayed"
persistent
scrollable
width="400"
>
<template v-slot:activator="{on, attrs}">
<v-btn icon x-small v-on="on" v-bind="attrs">
<v-icon>mdi-close</v-icon>