✨ unistra-formbuilder is now a Vuejs plugin

.eslintrc.js

+module.exports = {
+  extends: [
+    'airbnb-base',
+    'plugin:vue/recommended',
+  ],
+};

.gitignore

+.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

README.md

+# unistra-formbuilder
+
+A Vuejs plugin that provides form builder and renderer components.

bili.config.js

+module.exports = {
+  input: 'src/index.js',
+  output: {
+    extractCSS: false,
+  },
+  externals: [
+    'vue',
+    'vuex',
+    'vuetify/lib',
+  ],
+  plugins: {
+    vue: {
+      css: false,
+    },
+    vuetify: true,
+  },
+};

package.json

+{
+  "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"
+  }
+}

src/components/fields/inputs/UsfCheckboxSwitch.vue → src/components/fields/UsfCheckboxSwitch/UsfCheckboxSwitch.vue

@@ -35,7 +35,7 @@
 import {
   usfFieldMixin,
   usfHandleConditional,
-} from '@/mixins';
+} from '../../../mixins';
 
 export default {
   name: 'UsfCheckboxSwitch',

src/components/fields/UsfCheckboxSwitch/index.js

+import UsfCheckboxSwitch from './UsfCheckboxSwitch.vue';
+
+export { UsfCheckboxSwitch };
+export default UsfCheckboxSwitch;

src/components/fields/layouts/UsfCol.vue → src/components/fields/UsfCol/UsfCol.vue

 <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 {

src/components/fields/UsfCol/index.js

+import UsfCol from './UsfCol.vue';
+
+export { UsfCol };
+export default UsfCol;

src/components/fields/layouts/UsfContent.vue → src/components/fields/UsfContent/UsfContent.vue

 <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);
     },
   },
 };

src/components/fields/UsfContent/index.js

+import UsfContent from './UsfContent.vue';
+
+export { UsfContent };
+export default UsfContent;

src/components/fields/inputs/UsfDateTime.vue → src/components/fields/UsfDateTime/UsfDateTime.vue

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

src/components/fields/UsfDateTime/index.js

+import UsfDateTime from './UsfDateTime.vue';
+
+export { UsfDateTime };
+export default UsfDateTime;

src/components/fields/UsfField.vue → src/components/fields/UsfField/UsfField.vue

 <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;

src/components/fields/UsfField/index.js

+import UsfField from './UsfField.vue';
+
+export { UsfField };
+export default UsfField;

src/components/fields/inputs/UsfFile.vue → src/components/fields/UsfFile/UsfFile.vue

 <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}`
     },
   },
 };

src/components/fields/UsfFile/index.js

+import UsfFile from './UsfFile.vue';
+
+export { UsfFile };
+export default UsfFile;

src/components/fields/inputs/UsfRadioGroup.vue → src/components/fields/UsfRadioGroup/UsfRadioGroup.vue

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

src/components/fields/UsfRadioGroup/index.js

+import UsfRadioGroup from './UsfRadioGroup.vue';
+
+export { UsfRadioGroup };
+export default UsfRadioGroup;

src/components/fields/layouts/UsfRow.vue → src/components/fields/UsfRow/UsfRow.vue

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