Commit e51e26e6 authored by Yoran Hillion's avatar Yoran Hillion
Browse files

unistra-formbuilder is now a Vuejs plugin

parent 69146be1
module.exports = {
extends: [
'airbnb-base',
'plugin:vue/recommended',
],
};
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
# tests
coverage
.nyc_output
# unistra-formbuilder
A Vuejs plugin that provides form builder and renderer components.
module.exports = {
input: 'src/index.js',
output: {
extractCSS: false,
},
externals: [
'vue',
'vuex',
'vuetify/lib',
],
plugins: {
vue: {
css: false,
},
vuetify: true,
},
};
{
"name": "@vuenistra/unistra-formbuilder",
"version": "2.0.6",
"main": "dist/index.js",
"files": [
"dist/*",
"src/*"
],
"license": "MIT",
"scripts": {
"build": "bili"
},
"dependencies": {
"lodash": "^4.17.20",
"moment": "^2.24.0",
"normalizr": "^3.5.0",
"tiptap": "^1.26.6",
"tiptap-extensions": "^1.28.6",
"vuedraggable": "^2.23.2"
},
"devDependencies": {
"bili": "^5.0.5",
"eslint": "^7.13.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-vue": "^7.1.0",
"rollup-plugin-vue": "5.1.9",
"rollup-plugin-vuetify": "^0.2.4",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.4.3"
},
"peerDependencies": {
"vue": "2.6.11",
"vuetify": "^2.2.18",
"vuex": "^3.0.1"
}
}
......@@ -35,7 +35,7 @@
import {
usfFieldMixin,
usfHandleConditional,
} from '@/mixins';
} from '../../../mixins';
export default {
name: 'UsfCheckboxSwitch',
......
import UsfCheckboxSwitch from './UsfCheckboxSwitch.vue';
export { UsfCheckboxSwitch };
export default UsfCheckboxSwitch;
<template>
<v-col v-if="editorMode"
:cols="field.width"
class="col-editor pa-1">
<usf-drop-zone :fields="field.fields"
:draggable="draggable"
@update-fields="updateFields">
</usf-drop-zone>
<v-col
v-if="editorMode"
:cols="field.width"
class="col-editor pa-1"
>
<usf-drop-zone
:fields="field.fields"
:draggable="draggable"
@update-fields="updateFields"
/>
</v-col>
<v-col v-else
:cols="field.width">
<usf-field v-for="(field, index) in field.fields"
:key="index"
:field-id="field">
</usf-field>
<v-col
v-else
:cols="field.width"
>
<usf-field
v-for="(field, index) in field.fields"
:key="index"
:field-id="field"
/>
</v-col>
</template>
<script>
import { usfFieldMixin } from '@/mixins';
import { usfFieldMixin } from '../../../mixins';
export default {
name: 'UsfCol',
components: {
UsfDropZone: () => import('../../').then(({ UsfDropZone }) => UsfDropZone),
UsfField: () => import('../').then(({ UsfField }) => UsfField),
},
mixins: [
usfFieldMixin,
],
......@@ -31,10 +41,6 @@ export default {
required: false,
},
},
components: {
UsfDropZone: () => import('@/components/formbuilder/editor/UsfDropZone.vue'),
UsfField: () => import('@/components/fields/UsfField.vue'),
},
computed: {
draggable() {
return {
......
import UsfCol from './UsfCol.vue';
export { UsfCol };
export default UsfCol;
<template>
<v-row v-if="editorMode || exist"
v-show="editorMode || visible">
<v-col v-html="editorMode ? field.content : content"
:class="editorMode ? 'mx-2' : ''">
</v-col>
<v-row
v-if="editorMode || exist"
v-show="editorMode || visible"
>
<v-col
:class="editorMode ? 'mx-2' : ''"
v-html="editorMode ? field.content : content"
/>
</v-row>
</template>
......@@ -11,8 +14,8 @@
import {
usfFieldMixin,
usfHandleConditional,
} from '@/mixins';
import { interpolate } from '@/components/fields/utils';
} from '../../../mixins';
import utils from '../utils';
export default {
name: 'UsfContent',
......@@ -33,7 +36,7 @@ export default {
computed: {
content() {
const that = this;
return interpolate(this.field.content, that);
return utils.interpolate(this.field.content, that);
},
},
};
......
import UsfContent from './UsfContent.vue';
export { UsfContent };
export default UsfContent;
<template>
<v-menu v-model="menu.isVisible"
v-if="editorMode || exist"
v-show="editorMode || visible"
offset-y
:close-on-content-click="menu.closeOnContentClick"
:min-width="menu.minWidth">
<template v-slot:activator="{ on }">
<v-text-field :value="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
v-on="on"
:rules="[handleRequired]"
<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"
>
<template #activator="{ on }">
<v-text-field
:value="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"
>
<template v-slot:append-outer>
<v-icon v-if="field.repeatable" @click="repeat">mdi-plus</v-icon>
<template #append-outer>
<v-icon
v-if="field.repeatable"
@click="repeat"
>
mdi-plus
</v-icon>
</template>
</v-text-field>
</template>
<v-date-picker v-model="value"
v-if="field.type === 'date'"
:ref="pickerRef"
:locale="field.locale"
:min="dateMin"
:max="dateMax"
no-title
@input="menu.isVisible = false"
<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"
/>
<v-time-picker v-model="value"
v-if="field.type === 'time'"
:ref="pickerRef"
:locale="field.locale"
@input="menu.isVisible = false"
<v-time-picker
v-if="field.type === 'time'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
@input="menu.isVisible = false"
/>
</v-menu>
</template>
......@@ -47,7 +57,7 @@ import moment from 'moment';
import {
usfFieldMixin,
usfHandleConditional,
} from '@/mixins';
} from '../../../mixins';
export default {
name: 'UsfDateTime',
......
import UsfDateTime from './UsfDateTime.vue';
export { UsfDateTime };
export default UsfDateTime;
<template>
<component :is="component"
:field-id="fieldId"
:field-index="fieldIndex"
:editor-mode="editorMode"
<component
:is="component"
:field-id="fieldId"
:field-index="fieldIndex"
:editor-mode="editorMode"
/>
</template>
......@@ -10,6 +11,20 @@
export default {
name: 'UsfField',
components: {
UsfSection: () => import('../').then(({ UsfSection }) => UsfSection),
UsfRow: () => import('../').then(({ UsfRow }) => UsfRow),
UsfContent: () => import('../').then(({ UsfContent }) => UsfContent),
UsfCol: () => import('../').then(({ UsfCol }) => UsfCol),
UsfText: () => import('../').then(({ UsfText }) => UsfText),
UsfTextArea: () => import('../').then(({ UsfTextArea }) => UsfTextArea),
UsfSelect: () => import('../').then(({ UsfSelect }) => UsfSelect),
UsfCheckboxSwitch: () => import('../').then(({ UsfCheckboxSwitch }) => UsfCheckboxSwitch),
UsfRadioGroup: () => import('../').then(({ UsfRadioGroup }) => UsfRadioGroup),
UsfDateTime: () => import('../').then(({ UsfDateTime }) => UsfDateTime),
UsfFile: () => import('../').then(({ UsfFile }) => UsfFile),
},
props: {
fieldId: {
type: String,
......@@ -27,20 +42,6 @@ export default {
},
},
components: {
UsfSection: () => import('@/components/fields/layouts/UsfSection.vue'),
UsfRow: () => import('@/components/fields/layouts/UsfRow.vue'),
UsfContent: () => import('@/components/fields/layouts/UsfContent.vue'),
UsfCol: () => import('@/components/fields/layouts/UsfCol.vue'),
UsfText: () => import('@/components/fields/inputs/UsfText.vue'),
UsfTextArea: () => import('@/components/fields/inputs/UsfTextArea.vue'),
UsfSelect: () => import('@/components/fields/inputs/UsfSelect.vue'),
UsfCheckboxSwitch: () => import('@/components/fields/inputs/UsfCheckboxSwitch.vue'),
UsfRadioGroup: () => import('@/components/fields/inputs/UsfRadioGroup.vue'),
UsfDateTime: () => import('@/components/fields/inputs/UsfDateTime.vue'),
UsfFile: () => import('@/components/fields/inputs/UsfFile.vue'),
},
computed: {
component() {
return this.$store.getters['form/getFieldById'](this.fieldId).component;
......
import UsfField from './UsfField.vue';
export { UsfField };
export default UsfField;
<template>
<v-file-input v-model="value"
:key="key"
v-if="editorMode || exist"
v-show="editorMode || visible"
:class="editorMode ? 'mx-2' : ''"
:id="field.id"
:label="`${label} (${maxFileSize}${fileSizeUnit})`"
:placeholder="translated(fieldId, 'placeholder')"
:hint="translated(fieldId, 'hint')"
:persistent-hint="field.persistentHint"
:prefix="translated(fieldId, 'prefix')"
:suffix="translated(fieldId, 'suffix')"
:prepend-icon="field.prependIcon"
:append-icon="field.appendIcon"
:filled="field.filled"
:outlined="field.outlined"
:rounded="field.rounded"
:shaped="field.shaped"
:clearable="field.clearable"
show-size
:rules="[handleRequired, handleMax]"
<v-file-input
v-if="editorMode || exist"
v-show="editorMode || visible"
:id="field.id"
:key="key"
v-model="value"
:class="editorMode ? 'mx-2' : ''"
:label="`${label} (${maxFileSize}${fileSizeUnit})`"
:placeholder="translated(fieldId, 'placeholder')"
:hint="translated(fieldId, 'hint')"
:persistent-hint="field.persistentHint"
:prefix="translated(fieldId, 'prefix')"
:suffix="translated(fieldId, 'suffix')"
:prepend-icon="field.prependIcon"
:append-icon="field.appendIcon"
:filled="field.filled"
:outlined="field.outlined"
:rounded="field.rounded"
:shaped="field.shaped"
:clearable="field.clearable"
show-size
:rules="[handleRequired, handleMax]"
>
<template v-slot:append-outer>
<v-icon v-if="field.repeatable" @click="repeat">mdi-plus</v-icon>
<template #append-outer>
<v-icon
v-if="field.repeatable"
@click="repeat"
>
mdi-plus
</v-icon>
</template>
</v-file-input>
</template>
......@@ -31,7 +37,7 @@
import {
usfFieldMixin,
usfHandleConditional,
} from '@/mixins';
} from '../../../mixins';
export default {
name: 'UsfFile',
......@@ -72,9 +78,9 @@ export default {
methods: {
handleMax() {
return this.editorMode
|| !this.value
|| this.value && this.value.size < this.field.max
|| `La taille du fichier doit être inférieure à ${this.maxFileSize}${this.fileSizeUnit}`
|| !this.value
|| this.value && this.value.size < this.field.max
|| `La taille du fichier doit être inférieure à ${this.maxFileSize}${this.fileSizeUnit}`
},
},
};
......
import UsfFile from './UsfFile.vue';
export { UsfFile };
export default UsfFile;
<template>
<v-radio-group v-model="value"
:key="key"
v-if="editorMode || exist"
v-show="editorMode || visible"
:class="editorMode ? 'mx-2' : ''"
:id="field.id"
:hint="translated(fieldId, 'hint')"
:persistent-hint="field.persistentHint"
:row="field.horizontal"
:rules="[handleRequired]">
<template v-slot:append>
<v-icon v-if="field.repeatable" @click="repeat">mdi-plus</v-icon>
<v-radio-group
v-if="editorMode || exist"
v-show="editorMode || visible"
:id="field.id"
:key="key"
v-model="value"
:class="editorMode ? 'mx-2' : ''"
:hint="translated(fieldId, 'hint')"
:persistent-hint="field.persistentHint"
:row="field.horizontal"
:rules="[handleRequired]"
>
<template #append>
<v-icon
v-if="field.repeatable"
@click="repeat"
>
mdi-plus
</v-icon>
</template>
<template v-slot:label>
<template #label>
<span v-html="label" />
</template>
<v-radio v-for="option in fieldOptions"
:key=option.id
:label="option.label"
:value="option.id"
<v-radio
v-for="option in fieldOptions"
:key="option.id"
:label="option.label"
:value="option.id"
/>
</v-radio-group>
</template>
......@@ -27,7 +35,7 @@ import {
usfFieldMixin,
usfFieldWithOptions,
usfHandleConditional,
} from '@/mixins';
} from '../../../mixins';
export default {
name: 'UsfRadioGroup',
......
import UsfRadioGroup from './UsfRadioGroup.vue';
export { UsfRadioGroup };
export default UsfRadioGroup;
<template>
<v-row v-if="editorMode"
:class="`ma-0 pa-1 ${field.vertical ? 'flex-column' : ''}`">
<usf-field v-for="(colId, index) in field.fields"
:key="index"
:field-id="colId"
:editor-mode="editorMode">
</usf-field>
<v-row
v-if="editorMode"
:class="`ma-0 pa-1 ${field.vertical ? 'flex-column' : ''}`"
>
<usf-field
v-for="(colId, index) in field.fields"
:key="index"
:field-id="colId"
:editor-mode="editorMode"
/>
</v-row>
<v-row v-else
:class="`${field.vertical ? 'flex-column' : ''}`">
<usf-field v-for="(fieldId, index) in field.fields"
:key="index"
:field-id="fieldId">
</usf-field>
<v-row
v-else
:class="`${field.vertical ? 'flex-column' : ''}`"
>
<usf-field
v-for="(fieldId, index) in field.fields"
:key="index"
:field-id="fieldId"
/>
</v-row>
</template>
<script>
import { usfFieldMixin } from '@/mixins';
import { usfFieldMixin } from '../../../mixins';
export default {
name: 'UsfRow',
components: {
UsfField: () => import('../').then(({ UsfField }) => UsfField),
},
mixins: [
usfFieldMixin,
],
......@@ -31,9 +40,6 @@ export default {
required: false,
},
},
components: {
UsfField: () => import('@/components/fields/UsfField.vue'),
},
};
</script>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment