search

symfony / webpack-encore

A simple but powerful API for processing & compiling assets built around Webpack
https://symfony.com/doc/current/frontend.html
MIT License
2.23k stars 198 forks source link

Component template requires a root element, rather than just text. #664

Open naive17 opened 5 years ago

naive17 commented 5 years ago

I updated Encore to last version and vue-loader to ^15 and this error throws on every .vue template with lang="pug"

 error  in ./assets/js/vue/schemaform.vue?vue&type=template&id=ed2834d4&scoped=true&lang=html&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Component template requires a root element, rather than just text.

This is my Encore conf

/* eslint-disable */
let Encore = require('@symfony/webpack-encore');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Encore

    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .autoProvidejQuery()
    .addEntry('app', './assets/js/app.js')
    .addStyleEntry('style', './assets/css/app.less')
    .addLoader({
        test: /\.ya?ml$/,
        use: 'webpack-yaml-loader',
    })
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableVersioning(Encore.isProduction())
    .enableLessLoader()
    .enableVueLoader()
    .addLoader({
        test: /\.pug$/,
        oneOf: [
          {
            resourceQuery: /^\?vue/,
            use: ['pug-plain-loader']
          },
          {
            use: ['raw-loader', 'pug-plain-loader']
          }
        ]
      })
    .configureBabel((babelConfig) => {
        babelConfig.presets = ['@babel/preset-env'];
        babelConfig.plugins = ['@babel/plugin-syntax-flow', '@babel/plugin-transform-flow-strip-types', '@babel/plugin-transform-runtime',
            ['wildcard', {
                exts: ['js', 'es6', 'es', 'jsx'],
            }]];
    })

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })

;

const webpackConfig = Encore.getWebpackConfig();

console.log(webpackConfig.plugins);
/*
webpackConfig.plugins = webpackConfig.plugins.filter(
    plugin => !(plugin instanceof webpack.optimize.UglifyJsPlugin)
);*/

/*
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
*/
webpackConfig.resolve.alias = {
    vue$: 'vue/dist/vue.esm.js',
};

if (Encore.isProduction()) {
    Encore.cleanupOutputBeforeBuild();
    webpackConfig.plugins.push(new UglifyJsPlugin(
        {   cache: true,
            parallel: true
        }
    ));
}

if (!Encore.isProduction()) {
    webpackConfig.devtool = 'cheap-module-source-map';
}

if (Encore.isDevServer()) {
    Encore.disableCssExtraction();
}

webpackConfig.devServer = {
    contentBase: path.join(__dirname, 'public/'),
    //watchContentBase: true,
    compress: true,
    host : '0.0.0.0',
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
      },  
    //open: true,
    disableHostCheck: true,
    progress: true,
    /*watchOptions: {
      watch: true,
      poll: true
    }*/
  };
console.log(webpackConfig)
module.exports = webpackConfig;
Lyrkan commented 5 years ago

Hi @koso00,

Could you also give us the content of ./assets/js/vue/schemaform.vue?

Was it working before you upgraded Encore/vue-loader? If yes, which versions were you using back then? And which versions are you using now?

naive17 commented 5 years ago

before i was using vue-loader ^14, schemaform is a normal vue component built with pug templating, here the code 

<template lang="html">
  div(style="width : 100%; position : relative;",:style="properties.style || {}")
      div(key="schema",v-if="properties != undefined",style="display : inherit;flex-flow : inherit;height:inherit;justify-content :inherit")
        label(v-if="type!= 'boolean' && nolabel == undefined && properties.title != ''", v-html='properties.title', style='display : block;')

        div.container(:class="type",v-if='properties != undefined')
          div(v-if="type == 'group'",v-for="(item,index) in group",:style="properties.groupStyle || {}",style="width: 100%; display: flex; align-items : center;padding-bottom : 8px;")
            span.material-icons(style="color : red; ",v-if="group.length > 1 && properties.attr != undefined && properties.attr.todo_style",@click="group.splice(index,1)") delete
            schemaform(v-for="(children,key) in properties.childrens",v-if="children.if == undefined || (children.if != undefined && group[index][children.if.split(' ')[0]] == children.if.split(' ')[1])",:key="key",:properties="children",v-model="group[index][key]")
          button.btn.btn-primary(v-if="type == 'group' && properties.attr != undefined && properties.attr.todo_style",@click="group.push({})")
            span.material-icons() add
          codemirror(v-if="type == 'code'",
                      @ready="onCmReady",
                      :options="codemirrorOptions",
                      ref="codemirror",
                      style="max-height : 100%",
                      :value='value',
                      @input='update')
          //Testo
          textarea.form-control(
                              :autofocus="$props.autofocus",
                              rows="1",
                              v-autosize="",
                              v-if="type == 'text'",
                             tabindex="0",
                              ref='text',
                              :value='value',
                              v-bind="properties.attr || {}", 
                              @input='update',
                              :maxlength='nomaxlenght == undefined ? properties.maxLength : false',
                              v-bind:required='properties.required == true',
                              type='text',
                              :placeholder='properties.title'
                              style="resize: none;padding : 8px 16px 8px 16px;min-height : 20px !important;max-height : 300px;",
                              :style="leftBorder")

          input.form-control(:autofocus="$props.autofocus",v-if="type == 'number'",v-bind="properties.attr || {}", ref='text', :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='number', :placeholder='properties.title')

          //Integer
          input.form-control(:autofocus="$props.autofocus",
                              v-if="type == 'integer'",
                              v-bind="properties.attr || {}",
                              ref='integer', 
                              value='value', 
                              @input='update',
                              :maxlength='properties.maxLength',
                              v-bind:required='properties.required == true',
                              type='integer',
                              :placeholder='properties.title',
                              :style="leftBorder")

          .ranger(v-if="type == 'range'",:style="{left : `${_value}%`}") {{_value}}
          input.slider(v-if="type == 'range'",
                              v-bind="properties.attr || {}", 
                              ref='range',
                              :value='value',
                              @input='update',
                              min="0",
                              max="100",
                              v-bind:required='properties.required == true', 
                              type='range')
          //mapdraw
          input.form-control.mapdraw(v-if="type == 'mapdraw'",:style="leftBorder",  v-bind="properties.attr || {}",  ref='integer', :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true',v-mapdraw="", type='integer', :placeholder='properties.title')
          span.mapdraw(v-if="type == 'mapdraw' && value != ''") 
            i.fa.fa-edit.pr-1
            | edit
          //typeahead
          //div.typeahead(v-if="type == 'typeahead'",v-click-outside="typeaheadClose")
            input.form-control( ref='typeahead',@focus="typeahead",@input='typeahead', v-model='typeaheadModel',:maxlength='properties.maxLength', v-bind:required='properties.required == true', type='integer', :placeholder='properties.title')
            .form-control-feedback(v-if='busy && value.length > 0', style='position : absolute;right : 0px;')
              i.icon-spinner2.spinner
            div.typeahead_container(v-if="typeaheadResults.length > 0",@scroll="typeaheadScroll($event)")
              div.typeahead_item(v-for="(item,index) in typeaheadResults",:key="index",@click="selectTypeahead(item)")
                p {{item.title}}
          // Testo unico
          //.position-relative.unique(v-if="type == 'uniquetext' && _value!= undefined")
              .input-group
                input.form-control(ref='uniquetext', :class="[valid && _value.length > 0 ? 'border-success' : '',!valid && _value.length > 0 ? 'border-danger' : '']", :value='_value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='text', :placeholder='properties.title')
              .form-control-feedback(v-if='!busy && _value.length > 0', style='position : absolute;right : 0px;', :class="valid ? 'text-success' : 'text-danger'")
                i(:class="valid ? 'icon-checkmark-circle' : 'icon-cancel-circle2'")
              .form-control-feedback(v-if='busy && _value.length > 0', style='position : absolute;right : 0px;')
                i.icon-spinner2.spinner
          // SELECT
          select.form-control(ref='select',:style="leftBorder", @input='update', :value='value', v-if="type=='select'",v-bind="properties.attr || {}", )
            option(value='')
            option(v-for='(e,enum_index) in properties.enum', :key='enum_index', v-bind:value='e', v-html='properties.enum_titles[enum_index]')
          // CHECKBOX
          div.apple-switch-container(v-if="type=='boolean'")
            input.apple-switch(type='checkbox', ref='checkbox', :value='value',:checked="value == true ? true : false" @input='update')
            | {{properties.title}}
          div(ref='radio', @input='update', :value='value', v-if="type=='radio'", style="display : inherit;height : 100%; flex-flow : column; justify-content :space-between" )
            div(v-for='(e,enum_index) in properties.enum', :key='enum_index', v-bind:value='e')
              input(:id="`radio${e}`",:name="uuid",type="radio",:value="e",@input='update(e)',:checked="value == e ? true : false")
              label(:for="`radio${e}`") {{properties.enum_titles[enum_index]}}

          //DATETIME
          input.form-control(:autofocus="$props.autofocus",:style="leftBorder",v-if="type == 'date'", ref='text', locale="it", v-datepicker="" ,dateformat="dd-mm-yyyy", :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='integer', :placeholder='properties.title')

          vue-instant(v-if="type == 'typeahead'"
                      suggestion-attribute='label',
                      v-model='value',
                      :disabled='false',
                      @input='changed',
                      @selected='selected',
                      :show-autocomplete='true', 
                      :autofocus='false' , 
                      :suggestions='suggestions', 
                      name='customName', 
                      placeholder='custom placeholder', 
                      type='google')

      div.shine(key="shimmer",v-if="properties == undefined || loading == true")

</template>

<script>
import DatePicker from "vue2-datepicker";
import autosize from "v-autosize";

export default {
  directives: {
    autosize
  },
  components: {
    DatePicker
  },
  name: "schemaform",
  props: [
    "properties",
    "value",
    "nolabel",
    "button",
    "name",
    "options",
    "nomaxlenght",
    "noleftborder",
    "autofocus",
  ],
  data() {
    return {
      codemirrorOptions:
        this.properties.codemirrorOptions == undefined
          ? {
              styleActiveLine: true,
              lineNumbers: true,
              autoCloseTags: true,
              line: true,
              lint: true,
              hint : true,
              gutters: ["CodeMirror-lint-markers"],
              mode: "text/x-php",
              theme: "one-dark"
            }
          : this.properties.codemirrorOptions,
      uuid: this.$webilly.utils.rfcUUID(),
      group: [],
      datetime: "",
      valid: false,
      busy: false,
      loading: false,
      inverseDatepicker: false
    };
  },
  computed: {
    leftBorder : function(){
      if (this.$props.noleftborder === true) {
        return {
          "border-top-left-radius" : "0px",
          "border-bottom-left-radius" : "0px"
        }
      }else{
        return {}
      }
    },
    _value: function() {
      return this.value ? this.value : "";
    },
    type: function() {
      if (this.properties == undefined) {
        return false;
      }
      if (this.properties.type == "integer") {
        if (this.properties.widget == "range") {
          return "range";
        } else {
          return "integer";
        }
      }
      if (this.properties.type == "radio") {
        return "radio";
      }
      if (this.properties.type == "typeahead") {
        return "typeahead";
      }
      if (this.properties.type == "number") {
        return "number";
      }
      if (this.properties.type == "code") {
        return "code";
      }
      if (this.properties.type == "group") {
        return "group";
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget != "date" &&
        this.properties.enum == undefined
      ) {
        if (
          this.properties.attr != undefined &&
          this.properties.attr.type == "typeahead"
        ) {
          return "typeahead";
        } else {
          if (this.properties.unique) {
            return "uniquetext";
          } else {
            if (
              this.properties.attr != undefined &&
              this.properties.attr.type == "mapdraw"
            ) {
              return "mapdraw";
            } else {
              return "text";
            }
          }
        }
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget != "date" &&
        this.properties.enum != undefined
      ) {
        return "select";
      }
      if (this.properties.type == "boolean") {
        return "boolean";
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget == "date"
      ) {
        return "date";
      }
      return false;
    }
  },
  mounted: function() {
    //this.instantiateTypeahead();
    this.$nextTick(() => {
      window.addEventListener("resize", () => {
        if (this.type == "date" || this.type == "typeahead") {
          this.computePosition();
        }
      });
      if (this.type != "code" && this.type != "group" && this.type != "radio") {
        this.update();
      }
      if (this.type == "group") {
        if (this.value == undefined || this.value == "") {
          this.group.push({});
        } else {
          this.group = this.value;
        }
      }
      this.$forceUpdate();
    });
  },
  methods: {
    onCmReady(cm) {
      cm.setSize("100%", null);
    },
    computePosition: function() {
      try {
        let el = this.$refs[this.type].$el;
        var rect = el.getBoundingClientRect();
        if (rect.top > window.innerHeight / 2) {
          this.inverseDatepicker = true;
        } else {
          this.inverseDatepicker = false;
        }
      } catch (e) {}

      //console.log(rect.top, window.innerHeight);
    },
    update: async function(input) {
      try {
        switch (this.type) {
          case "typeahead":
            if (input == undefined) {
              return;
            }
            this.$emit("input", input);
            break;
          case "group":
            let group = _.flatten(input.map(v => Object.values(v))).filter(
              v => v != "" && v != undefined
            );
            console.log(group);
            if (group.length == 0) {
              this.$emit("input", "");
            } else {
              this.$emit("input", input);
            }

            break;
          case "text":
            this.$emit("input", this.$refs.text.value);
            break;
          case "radio":
            this.$emit("input", input.srcElement.value);
            break;
          case "code":
            this.$emit("input", input);
            break;
          case "number":
            this.$emit("input", this.$refs.text.value);
            break;
          case "integer":
            this.$emit("input", this.$refs.integer.value);
            break;
          case "range":
            this.$emit(
              "input",
              new Number(`${this.$refs.range.value}`)
            ); /*
            this.$forceUpdate();*/
            console.log(this.$refs.range.value);
            break;
          case "uniquetext":
            this.$emit("input", this.$refs.uniquetext.value);

            if (!this.$refs.uniquetext.value) {
              return;
            }
            console.log(
              "CONSOLE LOG UNIQUE",
              `${this.properties.path}/${this.$refs.uniquetext.value}`
            );

            let r = await this.$http.get(
              `${this.properties.path}/${this.$refs.uniquetext.value}`
            );
            //console.log(`${this.properties.path}/${this.$refs.uniquetext.value}`);
            if (!r.body.exists) {
              this.valid = true;
            } else {
              if (r.body.owner != undefined && r.body.owner == this.$root.id) {
                this.valid = true;
              } else {
                this.valid = false;
              }
            }

            break;
          case "select":
            this.$emit("input", this.$refs.select.value);
            break;
          case "boolean":
            this.$emit("input", this.$refs.checkbox.checked);
            break;
          case "date":
            this.$emit("input", this.$refs.text.value);
            break;
        }
      } catch (e) {
        console.log(e);
      }
    },

    search: function() {}
  },
  created: function() {
    VueCodemirror.CodeMirror.defineMode("htmltwig", function(
      config,
      parserConfig
    ) {
      return VueCodemirror.CodeMirror.overlayMode(
        VueCodemirror.CodeMirror.getMode(config, "twig"),
        VueCodemirror.CodeMirror.getMode(
          config,
          parserConfig.backdrop || "text/html"
        )
      );
    });
  },
  watch: {
    value: function(v) {
      if (this.type == "uniquetext") {
        if (!this.$refs.uniquetext.value) {
          console.log("HAHAHAHAHHAHHAHAAHAHH", v);
          this.$nextTick(() => {
            this.update();
          });
        }
        //this.update();
      }
    },
    group: {
      deep: true,
      handler(v) {
        this.update(v);
      }
    }
  }
};
</script>
Lyrkan commented 5 years ago

You are not using the right lang attribute there:

<template lang="html">
naive17 commented 5 years ago

nono, i tried to change to html before to see what could happen but it's pug, error of mine, with pug doesn't work too, let me correct it.

<template lang="pug">
  div(style="width : 100%; position : relative;",:style="properties.style || {}")
      div(key="schema",v-if="properties != undefined",style="display : inherit;flex-flow : inherit;height:inherit;justify-content :inherit")
        label(v-if="type!= 'boolean' && nolabel == undefined && properties.title != ''", v-html='properties.title', style='display : block;')

        div.container(:class="type",v-if='properties != undefined')
          div(v-if="type == 'group'",v-for="(item,index) in group",:style="properties.groupStyle || {}",style="width: 100%; display: flex; align-items : center;padding-bottom : 8px;")
            span.material-icons(style="color : red; ",v-if="group.length > 1 && properties.attr != undefined && properties.attr.todo_style",@click="group.splice(index,1)") delete
            schemaform(v-for="(children,key) in properties.childrens",v-if="children.if == undefined || (children.if != undefined && group[index][children.if.split(' ')[0]] == children.if.split(' ')[1])",:key="key",:properties="children",v-model="group[index][key]")
          button.btn.btn-primary(v-if="type == 'group' && properties.attr != undefined && properties.attr.todo_style",@click="group.push({})")
            span.material-icons() add
          codemirror(v-if="type == 'code'",
                      @ready="onCmReady",
                      :options="codemirrorOptions",
                      ref="codemirror",
                      style="max-height : 100%",
                      :value='value',
                      @input='update')
          //Testo
          textarea.form-control(
                              :autofocus="$props.autofocus",
                              rows="1",
                              v-autosize="",
                              v-if="type == 'text'",
                             tabindex="0",
                              ref='text',
                              :value='value',
                              v-bind="properties.attr || {}", 
                              @input='update',
                              :maxlength='nomaxlenght == undefined ? properties.maxLength : false',
                              v-bind:required='properties.required == true',
                              type='text',
                              :placeholder='properties.title'
                              style="resize: none;padding : 8px 16px 8px 16px;min-height : 20px !important;max-height : 300px;",
                              :style="leftBorder")

          input.form-control(:autofocus="$props.autofocus",v-if="type == 'number'",v-bind="properties.attr || {}", ref='text', :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='number', :placeholder='properties.title')

          //Integer
          input.form-control(:autofocus="$props.autofocus",
                              v-if="type == 'integer'",
                              v-bind="properties.attr || {}",
                              ref='integer', 
                              value='value', 
                              @input='update',
                              :maxlength='properties.maxLength',
                              v-bind:required='properties.required == true',
                              type='integer',
                              :placeholder='properties.title',
                              :style="leftBorder")

          .ranger(v-if="type == 'range'",:style="{left : `${_value}%`}") {{_value}}
          input.slider(v-if="type == 'range'",
                              v-bind="properties.attr || {}", 
                              ref='range',
                              :value='value',
                              @input='update',
                              min="0",
                              max="100",
                              v-bind:required='properties.required == true', 
                              type='range')
          //mapdraw
          input.form-control.mapdraw(v-if="type == 'mapdraw'",:style="leftBorder",  v-bind="properties.attr || {}",  ref='integer', :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true',v-mapdraw="", type='integer', :placeholder='properties.title')
          span.mapdraw(v-if="type == 'mapdraw' && value != ''") 
            i.fa.fa-edit.pr-1
            | edit
          //typeahead
          //div.typeahead(v-if="type == 'typeahead'",v-click-outside="typeaheadClose")
            input.form-control( ref='typeahead',@focus="typeahead",@input='typeahead', v-model='typeaheadModel',:maxlength='properties.maxLength', v-bind:required='properties.required == true', type='integer', :placeholder='properties.title')
            .form-control-feedback(v-if='busy && value.length > 0', style='position : absolute;right : 0px;')
              i.icon-spinner2.spinner
            div.typeahead_container(v-if="typeaheadResults.length > 0",@scroll="typeaheadScroll($event)")
              div.typeahead_item(v-for="(item,index) in typeaheadResults",:key="index",@click="selectTypeahead(item)")
                p {{item.title}}
          // Testo unico
          //.position-relative.unique(v-if="type == 'uniquetext' && _value!= undefined")
              .input-group
                input.form-control(ref='uniquetext', :class="[valid && _value.length > 0 ? 'border-success' : '',!valid && _value.length > 0 ? 'border-danger' : '']", :value='_value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='text', :placeholder='properties.title')
              .form-control-feedback(v-if='!busy && _value.length > 0', style='position : absolute;right : 0px;', :class="valid ? 'text-success' : 'text-danger'")
                i(:class="valid ? 'icon-checkmark-circle' : 'icon-cancel-circle2'")
              .form-control-feedback(v-if='busy && _value.length > 0', style='position : absolute;right : 0px;')
                i.icon-spinner2.spinner
          // SELECT
          select.form-control(ref='select',:style="leftBorder", @input='update', :value='value', v-if="type=='select'",v-bind="properties.attr || {}", )
            option(value='')
            option(v-for='(e,enum_index) in properties.enum', :key='enum_index', v-bind:value='e', v-html='properties.enum_titles[enum_index]')
          // CHECKBOX
          div.apple-switch-container(v-if="type=='boolean'")
            input.apple-switch(type='checkbox', ref='checkbox', :value='value',:checked="value == true ? true : false" @input='update')
            | {{properties.title}}
          div(ref='radio', @input='update', :value='value', v-if="type=='radio'", style="display : inherit;height : 100%; flex-flow : column; justify-content :space-between" )
            div(v-for='(e,enum_index) in properties.enum', :key='enum_index', v-bind:value='e')
              input(:id="`radio${e}`",:name="uuid",type="radio",:value="e",@input='update(e)',:checked="value == e ? true : false")
              label(:for="`radio${e}`") {{properties.enum_titles[enum_index]}}

          //DATETIME
          input.form-control(:autofocus="$props.autofocus",:style="leftBorder",v-if="type == 'date'", ref='text', locale="it", v-datepicker="" ,dateformat="dd-mm-yyyy", :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='integer', :placeholder='properties.title')

          vue-instant(v-if="type == 'typeahead'"
                      suggestion-attribute='label',
                      v-model='value',
                      :disabled='false',
                      @input='changed',
                      @selected='selected',
                      :show-autocomplete='true', 
                      :autofocus='false' , 
                      :suggestions='suggestions', 
                      name='customName', 
                      placeholder='custom placeholder', 
                      type='google')

      div.shine(key="shimmer",v-if="properties == undefined || loading == true")

</template>

<script>
import DatePicker from "vue2-datepicker";
import autosize from "v-autosize";

export default {
  directives: {
    autosize
  },
  components: {
    DatePicker
  },
  name: "schemaform",
  props: [
    "properties",
    "value",
    "nolabel",
    "button",
    "name",
    "options",
    "nomaxlenght",
    "noleftborder",
    "autofocus",
  ],
  data() {
    return {
      codemirrorOptions:
        this.properties.codemirrorOptions == undefined
          ? {
              styleActiveLine: true,
              lineNumbers: true,
              autoCloseTags: true,
              line: true,
              lint: true,
              hint : true,
              gutters: ["CodeMirror-lint-markers"],
              mode: "text/x-php",
              theme: "one-dark"
            }
          : this.properties.codemirrorOptions,
      uuid: this.$webilly.utils.rfcUUID(),
      group: [],
      datetime: "",
      valid: false,
      busy: false,
      loading: false,
      inverseDatepicker: false
    };
  },
  computed: {
    leftBorder : function(){
      if (this.$props.noleftborder === true) {
        return {
          "border-top-left-radius" : "0px",
          "border-bottom-left-radius" : "0px"
        }
      }else{
        return {}
      }
    },
    _value: function() {
      return this.value ? this.value : "";
    },
    type: function() {
      if (this.properties == undefined) {
        return false;
      }
      if (this.properties.type == "integer") {
        if (this.properties.widget == "range") {
          return "range";
        } else {
          return "integer";
        }
      }
      if (this.properties.type == "radio") {
        return "radio";
      }
      if (this.properties.type == "typeahead") {
        return "typeahead";
      }
      if (this.properties.type == "number") {
        return "number";
      }
      if (this.properties.type == "code") {
        return "code";
      }
      if (this.properties.type == "group") {
        return "group";
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget != "date" &&
        this.properties.enum == undefined
      ) {
        if (
          this.properties.attr != undefined &&
          this.properties.attr.type == "typeahead"
        ) {
          return "typeahead";
        } else {
          if (this.properties.unique) {
            return "uniquetext";
          } else {
            if (
              this.properties.attr != undefined &&
              this.properties.attr.type == "mapdraw"
            ) {
              return "mapdraw";
            } else {
              return "text";
            }
          }
        }
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget != "date" &&
        this.properties.enum != undefined
      ) {
        return "select";
      }
      if (this.properties.type == "boolean") {
        return "boolean";
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget == "date"
      ) {
        return "date";
      }
      return false;
    }
  },
  mounted: function() {
    //this.instantiateTypeahead();
    this.$nextTick(() => {
      window.addEventListener("resize", () => {
        if (this.type == "date" || this.type == "typeahead") {
          this.computePosition();
        }
      });
      if (this.type != "code" && this.type != "group" && this.type != "radio") {
        this.update();
      }
      if (this.type == "group") {
        if (this.value == undefined || this.value == "") {
          this.group.push({});
        } else {
          this.group = this.value;
        }
      }
      this.$forceUpdate();
    });
  },
  methods: {
    onCmReady(cm) {
      cm.setSize("100%", null);
    },
    computePosition: function() {
      try {
        let el = this.$refs[this.type].$el;
        var rect = el.getBoundingClientRect();
        if (rect.top > window.innerHeight / 2) {
          this.inverseDatepicker = true;
        } else {
          this.inverseDatepicker = false;
        }
      } catch (e) {}

      //console.log(rect.top, window.innerHeight);
    },
    update: async function(input) {
      try {
        switch (this.type) {
          case "typeahead":
            if (input == undefined) {
              return;
            }
            this.$emit("input", input);
            break;
          case "group":
            let group = _.flatten(input.map(v => Object.values(v))).filter(
              v => v != "" && v != undefined
            );
            console.log(group);
            if (group.length == 0) {
              this.$emit("input", "");
            } else {
              this.$emit("input", input);
            }

            break;
          case "text":
            this.$emit("input", this.$refs.text.value);
            break;
          case "radio":
            this.$emit("input", input.srcElement.value);
            break;
          case "code":
            this.$emit("input", input);
            break;
          case "number":
            this.$emit("input", this.$refs.text.value);
            break;
          case "integer":
            this.$emit("input", this.$refs.integer.value);
            break;
          case "range":
            this.$emit(
              "input",
              new Number(`${this.$refs.range.value}`)
            ); /*
            this.$forceUpdate();*/
            console.log(this.$refs.range.value);
            break;
          case "uniquetext":
            this.$emit("input", this.$refs.uniquetext.value);

            if (!this.$refs.uniquetext.value) {
              return;
            }
            console.log(
              "CONSOLE LOG UNIQUE",
              `${this.properties.path}/${this.$refs.uniquetext.value}`
            );

            let r = await this.$http.get(
              `${this.properties.path}/${this.$refs.uniquetext.value}`
            );
            //console.log(`${this.properties.path}/${this.$refs.uniquetext.value}`);
            if (!r.body.exists) {
              this.valid = true;
            } else {
              if (r.body.owner != undefined && r.body.owner == this.$root.id) {
                this.valid = true;
              } else {
                this.valid = false;
              }
            }

            break;
          case "select":
            this.$emit("input", this.$refs.select.value);
            break;
          case "boolean":
            this.$emit("input", this.$refs.checkbox.checked);
            break;
          case "date":
            this.$emit("input", this.$refs.text.value);
            break;
        }
      } catch (e) {
        console.log(e);
      }
    },

    search: function() {}
  },
  created: function() {
    VueCodemirror.CodeMirror.defineMode("htmltwig", function(
      config,
      parserConfig
    ) {
      return VueCodemirror.CodeMirror.overlayMode(
        VueCodemirror.CodeMirror.getMode(config, "twig"),
        VueCodemirror.CodeMirror.getMode(
          config,
          parserConfig.backdrop || "text/html"
        )
      );
    });
  },
  watch: {
    value: function(v) {
      if (this.type == "uniquetext") {
        if (!this.$refs.uniquetext.value) {
          console.log("HAHAHAHAHHAHHAHAAHAHH", v);
          this.$nextTick(() => {
            this.update();
          });
        }
        //this.update();
      }
    },
    group: {
      deep: true,
      handler(v) {
        this.update(v);
      }
    }
  }
};
</script>
Lyrkan commented 5 years ago

But what's the error message with lang="pug" then? Because the one you put in your initial post clearly indicates that you had lang="html":

error  in ./assets/js/vue/schemaform.vue?vue&type=template&id=ed2834d4&scoped=true&lang=html&
naive17 commented 5 years ago

It's the same, i pasted here the lang="html" by error, the error message is related to lang="pug" only

Lyrkan commented 5 years ago

So, can you copy/paste the right one?

naive17 commented 5 years ago

I already done it

nono, i tried to change to html before to see what could happen but it's pug, error of mine, with pug doesn't work too, let me correct it.

<template lang="pug">
  div(style="width : 100%; position : relative;",:style="properties.style || {}")
      div(key="schema",v-if="properties != undefined",style="display : inherit;flex-flow : inherit;height:inherit;justify-content :inherit")
        label(v-if="type!= 'boolean' && nolabel == undefined && properties.title != ''", v-html='properties.title', style='display : block;')

        div.container(:class="type",v-if='properties != undefined')
          div(v-if="type == 'group'",v-for="(item,index) in group",:style="properties.groupStyle || {}",style="width: 100%; display: flex; align-items : center;padding-bottom : 8px;")
            span.material-icons(style="color : red; ",v-if="group.length > 1 && properties.attr != undefined && properties.attr.todo_style",@click="group.splice(index,1)") delete
            schemaform(v-for="(children,key) in properties.childrens",v-if="children.if == undefined || (children.if != undefined && group[index][children.if.split(' ')[0]] == children.if.split(' ')[1])",:key="key",:properties="children",v-model="group[index][key]")
          button.btn.btn-primary(v-if="type == 'group' && properties.attr != undefined && properties.attr.todo_style",@click="group.push({})")
            span.material-icons() add
          codemirror(v-if="type == 'code'",
                      @ready="onCmReady",
                      :options="codemirrorOptions",
                      ref="codemirror",
                      style="max-height : 100%",
                      :value='value',
                      @input='update')
          //Testo
          textarea.form-control(
                              :autofocus="$props.autofocus",
                              rows="1",
                              v-autosize="",
                              v-if="type == 'text'",
                             tabindex="0",
                              ref='text',
                              :value='value',
                              v-bind="properties.attr || {}", 
                              @input='update',
                              :maxlength='nomaxlenght == undefined ? properties.maxLength : false',
                              v-bind:required='properties.required == true',
                              type='text',
                              :placeholder='properties.title'
                              style="resize: none;padding : 8px 16px 8px 16px;min-height : 20px !important;max-height : 300px;",
                              :style="leftBorder")

          input.form-control(:autofocus="$props.autofocus",v-if="type == 'number'",v-bind="properties.attr || {}", ref='text', :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='number', :placeholder='properties.title')

          //Integer
          input.form-control(:autofocus="$props.autofocus",
                              v-if="type == 'integer'",
                              v-bind="properties.attr || {}",
                              ref='integer', 
                              value='value', 
                              @input='update',
                              :maxlength='properties.maxLength',
                              v-bind:required='properties.required == true',
                              type='integer',
                              :placeholder='properties.title',
                              :style="leftBorder")

          .ranger(v-if="type == 'range'",:style="{left : `${_value}%`}") {{_value}}
          input.slider(v-if="type == 'range'",
                              v-bind="properties.attr || {}", 
                              ref='range',
                              :value='value',
                              @input='update',
                              min="0",
                              max="100",
                              v-bind:required='properties.required == true', 
                              type='range')
          //mapdraw
          input.form-control.mapdraw(v-if="type == 'mapdraw'",:style="leftBorder",  v-bind="properties.attr || {}",  ref='integer', :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true',v-mapdraw="", type='integer', :placeholder='properties.title')
          span.mapdraw(v-if="type == 'mapdraw' && value != ''") 
            i.fa.fa-edit.pr-1
            | edit
          //typeahead
          //div.typeahead(v-if="type == 'typeahead'",v-click-outside="typeaheadClose")
            input.form-control( ref='typeahead',@focus="typeahead",@input='typeahead', v-model='typeaheadModel',:maxlength='properties.maxLength', v-bind:required='properties.required == true', type='integer', :placeholder='properties.title')
            .form-control-feedback(v-if='busy && value.length > 0', style='position : absolute;right : 0px;')
              i.icon-spinner2.spinner
            div.typeahead_container(v-if="typeaheadResults.length > 0",@scroll="typeaheadScroll($event)")
              div.typeahead_item(v-for="(item,index) in typeaheadResults",:key="index",@click="selectTypeahead(item)")
                p {{item.title}}
          // Testo unico
          //.position-relative.unique(v-if="type == 'uniquetext' && _value!= undefined")
              .input-group
                input.form-control(ref='uniquetext', :class="[valid && _value.length > 0 ? 'border-success' : '',!valid && _value.length > 0 ? 'border-danger' : '']", :value='_value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='text', :placeholder='properties.title')
              .form-control-feedback(v-if='!busy && _value.length > 0', style='position : absolute;right : 0px;', :class="valid ? 'text-success' : 'text-danger'")
                i(:class="valid ? 'icon-checkmark-circle' : 'icon-cancel-circle2'")
              .form-control-feedback(v-if='busy && _value.length > 0', style='position : absolute;right : 0px;')
                i.icon-spinner2.spinner
          // SELECT
          select.form-control(ref='select',:style="leftBorder", @input='update', :value='value', v-if="type=='select'",v-bind="properties.attr || {}", )
            option(value='')
            option(v-for='(e,enum_index) in properties.enum', :key='enum_index', v-bind:value='e', v-html='properties.enum_titles[enum_index]')
          // CHECKBOX
          div.apple-switch-container(v-if="type=='boolean'")
            input.apple-switch(type='checkbox', ref='checkbox', :value='value',:checked="value == true ? true : false" @input='update')
            | {{properties.title}}
          div(ref='radio', @input='update', :value='value', v-if="type=='radio'", style="display : inherit;height : 100%; flex-flow : column; justify-content :space-between" )
            div(v-for='(e,enum_index) in properties.enum', :key='enum_index', v-bind:value='e')
              input(:id="`radio${e}`",:name="uuid",type="radio",:value="e",@input='update(e)',:checked="value == e ? true : false")
              label(:for="`radio${e}`") {{properties.enum_titles[enum_index]}}

          //DATETIME
          input.form-control(:autofocus="$props.autofocus",:style="leftBorder",v-if="type == 'date'", ref='text', locale="it", v-datepicker="" ,dateformat="dd-mm-yyyy", :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='integer', :placeholder='properties.title')

          vue-instant(v-if="type == 'typeahead'"
                      suggestion-attribute='label',
                      v-model='value',
                      :disabled='false',
                      @input='changed',
                      @selected='selected',
                      :show-autocomplete='true', 
                      :autofocus='false' , 
                      :suggestions='suggestions', 
                      name='customName', 
                      placeholder='custom placeholder', 
                      type='google')

      div.shine(key="shimmer",v-if="properties == undefined || loading == true")

</template>

<script>
import DatePicker from "vue2-datepicker";
import autosize from "v-autosize";

export default {
  directives: {
    autosize
  },
  components: {
    DatePicker
  },
  name: "schemaform",
  props: [
    "properties",
    "value",
    "nolabel",
    "button",
    "name",
    "options",
    "nomaxlenght",
    "noleftborder",
    "autofocus",
  ],
  data() {
    return {
      codemirrorOptions:
        this.properties.codemirrorOptions == undefined
          ? {
              styleActiveLine: true,
              lineNumbers: true,
              autoCloseTags: true,
              line: true,
              lint: true,
              hint : true,
              gutters: ["CodeMirror-lint-markers"],
              mode: "text/x-php",
              theme: "one-dark"
            }
          : this.properties.codemirrorOptions,
      uuid: this.$webilly.utils.rfcUUID(),
      group: [],
      datetime: "",
      valid: false,
      busy: false,
      loading: false,
      inverseDatepicker: false
    };
  },
  computed: {
    leftBorder : function(){
      if (this.$props.noleftborder === true) {
        return {
          "border-top-left-radius" : "0px",
          "border-bottom-left-radius" : "0px"
        }
      }else{
        return {}
      }
    },
    _value: function() {
      return this.value ? this.value : "";
    },
    type: function() {
      if (this.properties == undefined) {
        return false;
      }
      if (this.properties.type == "integer") {
        if (this.properties.widget == "range") {
          return "range";
        } else {
          return "integer";
        }
      }
      if (this.properties.type == "radio") {
        return "radio";
      }
      if (this.properties.type == "typeahead") {
        return "typeahead";
      }
      if (this.properties.type == "number") {
        return "number";
      }
      if (this.properties.type == "code") {
        return "code";
      }
      if (this.properties.type == "group") {
        return "group";
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget != "date" &&
        this.properties.enum == undefined
      ) {
        if (
          this.properties.attr != undefined &&
          this.properties.attr.type == "typeahead"
        ) {
          return "typeahead";
        } else {
          if (this.properties.unique) {
            return "uniquetext";
          } else {
            if (
              this.properties.attr != undefined &&
              this.properties.attr.type == "mapdraw"
            ) {
              return "mapdraw";
            } else {
              return "text";
            }
          }
        }
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget != "date" &&
        this.properties.enum != undefined
      ) {
        return "select";
      }
      if (this.properties.type == "boolean") {
        return "boolean";
      }
      if (
        this.properties.type == "string" &&
        this.properties.widget == "date"
      ) {
        return "date";
      }
      return false;
    }
  },
  mounted: function() {
    //this.instantiateTypeahead();
    this.$nextTick(() => {
      window.addEventListener("resize", () => {
        if (this.type == "date" || this.type == "typeahead") {
          this.computePosition();
        }
      });
      if (this.type != "code" && this.type != "group" && this.type != "radio") {
        this.update();
      }
      if (this.type == "group") {
        if (this.value == undefined || this.value == "") {
          this.group.push({});
        } else {
          this.group = this.value;
        }
      }
      this.$forceUpdate();
    });
  },
  methods: {
    onCmReady(cm) {
      cm.setSize("100%", null);
    },
    computePosition: function() {
      try {
        let el = this.$refs[this.type].$el;
        var rect = el.getBoundingClientRect();
        if (rect.top > window.innerHeight / 2) {
          this.inverseDatepicker = true;
        } else {
          this.inverseDatepicker = false;
        }
      } catch (e) {}

      //console.log(rect.top, window.innerHeight);
    },
    update: async function(input) {
      try {
        switch (this.type) {
          case "typeahead":
            if (input == undefined) {
              return;
            }
            this.$emit("input", input);
            break;
          case "group":
            let group = _.flatten(input.map(v => Object.values(v))).filter(
              v => v != "" && v != undefined
            );
            console.log(group);
            if (group.length == 0) {
              this.$emit("input", "");
            } else {
              this.$emit("input", input);
            }

            break;
          case "text":
            this.$emit("input", this.$refs.text.value);
            break;
          case "radio":
            this.$emit("input", input.srcElement.value);
            break;
          case "code":
            this.$emit("input", input);
            break;
          case "number":
            this.$emit("input", this.$refs.text.value);
            break;
          case "integer":
            this.$emit("input", this.$refs.integer.value);
            break;
          case "range":
            this.$emit(
              "input",
              new Number(`${this.$refs.range.value}`)
            ); /*
            this.$forceUpdate();*/
            console.log(this.$refs.range.value);
            break;
          case "uniquetext":
            this.$emit("input", this.$refs.uniquetext.value);

            if (!this.$refs.uniquetext.value) {
              return;
            }
            console.log(
              "CONSOLE LOG UNIQUE",
              `${this.properties.path}/${this.$refs.uniquetext.value}`
            );

            let r = await this.$http.get(
              `${this.properties.path}/${this.$refs.uniquetext.value}`
            );
            //console.log(`${this.properties.path}/${this.$refs.uniquetext.value}`);
            if (!r.body.exists) {
              this.valid = true;
            } else {
              if (r.body.owner != undefined && r.body.owner == this.$root.id) {
                this.valid = true;
              } else {
                this.valid = false;
              }
            }

            break;
          case "select":
            this.$emit("input", this.$refs.select.value);
            break;
          case "boolean":
            this.$emit("input", this.$refs.checkbox.checked);
            break;
          case "date":
            this.$emit("input", this.$refs.text.value);
            break;
        }
      } catch (e) {
        console.log(e);
      }
    },

    search: function() {}
  },
  created: function() {
    VueCodemirror.CodeMirror.defineMode("htmltwig", function(
      config,
      parserConfig
    ) {
      return VueCodemirror.CodeMirror.overlayMode(
        VueCodemirror.CodeMirror.getMode(config, "twig"),
        VueCodemirror.CodeMirror.getMode(
          config,
          parserConfig.backdrop || "text/html"
        )
      );
    });
  },
  watch: {
    value: function(v) {
      if (this.type == "uniquetext") {
        if (!this.$refs.uniquetext.value) {
          console.log("HAHAHAHAHHAHHAHAAHAHH", v);
          this.$nextTick(() => {
            this.update();
          });
        }
        //this.update();
      }
    },
    group: {
      deep: true,
      handler(v) {
        this.update(v);
      }
    }
  }
};
</script>
Lyrkan commented 5 years ago

I was talking about the error message. The one you put in your first post is not related to that code.

naive17 commented 5 years ago

You just need to swap html with pug, it throws the same error

Lyrkan commented 5 years ago

You just need to swap html with pug, it throws the same error

@koso00 I was asking that because I can't reproduce your issue using that same .vue file with lang="pug", everything compiles just fine: https://github.com/Lyrkan/repro-encore-664

However if I change lang="pug" to lang="html" I get a similar error (which is expected):

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Component template requires a root element, rather than just text.

  1  |  
     |   
  2  |  div(style="width : 100%; position : relative;",:style="properties.style || {}")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3  |      div(key="schema",v-if="properties != undefined",style="display : inherit;flex-flow : inherit;height:inherit;justify-content :inherit")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4  |        label(v-if="type!= 'boolean' && nolabel == undefined && properties.title != ''", v-html='properties.title', style='display : block;')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5  |  
     |  
  6  |        div.container(:class="type",v-if='properties != undefined')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  7  |          div(v-if="type == 'group'",v-for="(item,index) in group",:style="properties.groupStyle || {}",style="width: 100%; display: flex; align-items : center;padding-bottom : 8px;")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  8  |            span.material-icons(style="color : red; ",v-if="group.length > 1 && properties.attr != undefined && properties.attr.todo_style",@click="group.splice(index,1)") delete
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  9  |            schemaform(v-for="(children,key) in properties.childrens",v-if="children.if == undefined || (children.if != undefined && group[index][children.if.split(' ')[0]] == children.if.split(' ')[1])",:key="key",:properties="children",v-model="group[index][key]")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  10 |          button.btn.btn-primary(v-if="type == 'group' && properties.attr != undefined && properties.attr.todo_style",@click="group.push({})")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  11 |            span.material-icons() add
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  12 |          codemirror(v-if="type == 'code'",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 |                      @ready="onCmReady",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  14 |                      :options="codemirrorOptions",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  15 |                      ref="codemirror",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  16 |                      style="max-height : 100%",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  17 |                      :value='value',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  18 |                      @input='update')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  19 |          //Testo
     |  ^^^^^^^^^^^^^^^
  20 |          textarea.form-control(
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  21 |                              :autofocus="$props.autofocus",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  22 |                              rows="1",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  23 |                              v-autosize="",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  24 |                              v-if="type == 'text'",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  25 |                             tabindex="0",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  26 |                              ref='text',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  27 |                              :value='value',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  28 |                              v-bind="properties.attr || {}", 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  29 |                              @input='update',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  30 |                              :maxlength='nomaxlenght == undefined ? properties.maxLength : false',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  31 |                              v-bind:required='properties.required == true',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  32 |                              type='text',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  33 |                              :placeholder='properties.title'
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  34 |                              style="resize: none;padding : 8px 16px 8px 16px;min-height : 20px !important;max-height : 300px;",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  35 |                              :style="leftBorder")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  36 |          
     |  ^^^^^^^^
  37 |          input.form-control(:autofocus="$props.autofocus",v-if="type == 'number'",v-bind="properties.attr || {}", ref='text', :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='number', :placeholder='properties.title')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  38 |  
     |  
  39 |          //Integer
     |  ^^^^^^^^^^^^^^^^^
  40 |          input.form-control(:autofocus="$props.autofocus",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  41 |                              v-if="type == 'integer'",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  42 |                              v-bind="properties.attr || {}",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  43 |                              ref='integer', 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  44 |                              value='value', 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  45 |                              @input='update',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  46 |                              :maxlength='properties.maxLength',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  47 |                              v-bind:required='properties.required == true',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  48 |                              type='integer',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  49 |                              :placeholder='properties.title',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  50 |                              :style="leftBorder")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  51 |          
     |  ^^^^^^^^
  52 |          .ranger(v-if="type == 'range'",:style="{left : `${_value}%`}") {{_value}}
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  53 |          input.slider(v-if="type == 'range'",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  54 |                              v-bind="properties.attr || {}", 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  55 |                              ref='range',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  56 |                              :value='value',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  57 |                              @input='update',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  58 |                              min="0",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  59 |                              max="100",
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  60 |                              v-bind:required='properties.required == true', 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  61 |                              type='range')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  62 |          //mapdraw
     |  ^^^^^^^^^^^^^^^^^
  63 |          input.form-control.mapdraw(v-if="type == 'mapdraw'",:style="leftBorder",  v-bind="properties.attr || {}",  ref='integer', :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true',v-mapdraw="", type='integer', :placeholder='properties.title')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  64 |          span.mapdraw(v-if="type == 'mapdraw' && value != ''") 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  65 |            i.fa.fa-edit.pr-1
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  66 |            | edit
     |  ^^^^^^^^^^^^^^^^
  67 |          //typeahead
     |  ^^^^^^^^^^^^^^^^^^^
  68 |          //div.typeahead(v-if="type == 'typeahead'",v-click-outside="typeaheadClose")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  69 |            input.form-control( ref='typeahead',@focus="typeahead",@input='typeahead', v-model='typeaheadModel',:maxlength='properties.maxLength', v-bind:required='properties.required == true', type='integer', :placeholder='properties.title')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  70 |            .form-control-feedback(v-if='busy && value.length > 0', style='position : absolute;right : 0px;')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  71 |              i.icon-spinner2.spinner
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  72 |            div.typeahead_container(v-if="typeaheadResults.length > 0",@scroll="typeaheadScroll($event)")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  73 |              div.typeahead_item(v-for="(item,index) in typeaheadResults",:key="index",@click="selectTypeahead(item)")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  74 |                p {{item.title}}
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  75 |          // Testo unico
     |  ^^^^^^^^^^^^^^^^^^^^^^
  76 |          //.position-relative.unique(v-if="type == 'uniquetext' && _value!= undefined")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  77 |              .input-group
     |  ^^^^^^^^^^^^^^^^^^^^^^^^
  78 |                input.form-control(ref='uniquetext', :class="[valid && _value.length > 0 ? 'border-success' : '',!valid && _value.length > 0 ? 'border-danger' : '']", :value='_value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='text', :placeholder='properties.title')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  79 |              .form-control-feedback(v-if='!busy && _value.length > 0', style='position : absolute;right : 0px;', :class="valid ? 'text-success' : 'text-danger'")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  80 |                i(:class="valid ? 'icon-checkmark-circle' : 'icon-cancel-circle2'")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  81 |              .form-control-feedback(v-if='busy && _value.length > 0', style='position : absolute;right : 0px;')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  82 |                i.icon-spinner2.spinner
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  83 |          // SELECT
     |  ^^^^^^^^^^^^^^^^^
  84 |          select.form-control(ref='select',:style="leftBorder", @input='update', :value='value', v-if="type=='select'",v-bind="properties.attr || {}", )
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  85 |            option(value='')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^
  86 |            option(v-for='(e,enum_index) in properties.enum', :key='enum_index', v-bind:value='e', v-html='properties.enum_titles[enum_index]')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  87 |          // CHECKBOX
     |  ^^^^^^^^^^^^^^^^^^^
  88 |          div.apple-switch-container(v-if="type=='boolean'")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  89 |            input.apple-switch(type='checkbox', ref='checkbox', :value='value',:checked="value == true ? true : false" @input='update')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  90 |            | {{properties.title}}
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  91 |          div(ref='radio', @input='update', :value='value', v-if="type=='radio'", style="display : inherit;height : 100%; flex-flow : column; justify-content :space-between" )
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  92 |            div(v-for='(e,enum_index) in properties.enum', :key='enum_index', v-bind:value='e')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  93 |              input(:id="`radio${e}`",:name="uuid",type="radio",:value="e",@input='update(e)',:checked="value == e ? true : false")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  94 |              label(:for="`radio${e}`") {{properties.enum_titles[enum_index]}}
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  95 |          
     |  ^^^^^^^^
  96 |          //DATETIME
     |  ^^^^^^^^^^^^^^^^^^
  97 |          input.form-control(:autofocus="$props.autofocus",:style="leftBorder",v-if="type == 'date'", ref='text', locale="it", v-datepicker="" ,dateformat="dd-mm-yyyy", :value='value', @input='update', :maxlength='properties.maxLength', v-bind:required='properties.required == true', type='integer', :placeholder='properties.title')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  98 |          
     |  ^^^^^^^^
  99 |          vue-instant(v-if="type == 'typeahead'"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  100|                      suggestion-attribute='label',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  101|                      v-model='value',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  102|                      :disabled='false',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  103|                      @input='changed',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  104|                      @selected='selected',
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  105|                      :show-autocomplete='true', 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  106|                      :autofocus='false' , 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  107|                      :suggestions='suggestions', 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  108|                      name='customName', 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  109|                      placeholder='custom placeholder', 
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  110|                      type='google')
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  111|  
     |  
  112|      div.shine(key="shimmer",v-if="properties == undefined || loading == true")
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  113|  
     |  
  114|  
     |  

 @ ./src/component.vue?vue&type=template&id=a8ea6a18&lang=html& 1:0-211 1:0-211
 @ ./src/component.vue
 @ ./src/index.js

Maybe you could try comparing the dependencies of that example (more specifically their versions) to yours... but unless you can provide a repro I'm not sure I'll be able to help you.