Migrate to Vite (#71)

* Replace DateInput

* Migrate to Vite

* Ecxluding optimize to fix notifs in dev

* Dateinput changes

* Fixs on new DateInput

* wip

* Updated date input + cleaning

* Udpated readme

Co-authored-by: Julien Nahum <julien@nahum.net>

.gitignore

@@ -2,6 +2,7 @@
 /public/hot
 /public/storage
 /storage/*.key
+/storage/clockwork
 /vendor
 .env
 .env.production

README.md

@@ -55,7 +55,7 @@ git clone git@github.com:JhumanJ/OpnForm.git && cd OpnForm
 composer install && npm install
 
 # Compile assets (see the scripts section in package.json)
-npm run dev # or prod, or watch
+npm run dev # or build
 ```
 
 Now, we can configure Laravel. We just need to prepare some vars in our `.env` file, just create it with `cp .env.example .env` then open it!

composer.json

@@ -26,7 +26,7 @@
     "guzzlehttp/guzzle": "^7.0.1",
     "jhumanj/laravel-model-stats": "^0.4.0",
     "laravel/cashier": "^13.4",
-    "laravel/framework": "^9.0",
+    "laravel/framework": "^9.19.0",
     "laravel/horizon": "^5.7",
     "laravel/socialite": "^5.2",
     "laravel/tinker": "^2.6",

package.json

@@ -1,14 +1,8 @@
 {
   "private": true,
   "scripts": {
-    "dev": "mix",
+    "dev": "vite",
-    "development": "mix",
+    "build": "vite build"
-    "watch": "mix watch",
-    "watch-poll": "mix watch -- --watch-options-poll=1000",
-    "hot": "mix watch --hot --https",
-    "prod": "mix --production",
-    "production": "mix --production",
-    "lint": "eslint --fix --ext .js,.vue resources/js"
   },
   "dependencies": {
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
@@ -16,7 +10,6 @@
     "@sentry/vue": "^6.11.0",
     "axios": "^0.21.1",
     "chart.js": "^3.7.1",
-    "cleave.js": "^1.6.0",
     "clone-deep": "^4.0.1",
     "date-fns": "^2.28.0",
     "debounce": "^1.2.1",
@@ -46,29 +39,29 @@
     "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.15.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.15.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "autoprefixer": "^10.4.12",
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-standard": "^4.1.0",
     "eslint-plugin-vue": "^7.16.0",
     "imagemin-webpack-plugin": "^2.4.2",
-    "laravel-mix": "^6.0.27",
+    "laravel-vite-plugin": "^0.7.3",
-    "laravel-mix-bundle-analyzer": "^1.0.5",
+    "postcss": "^8.4.21",
-    "laravel-mix-versionhash": "2.0.1",
+    "resolve-url-loader": "^3.1.5",
-    "postcss": "^8.4.18",
+    "sass": "^1.57.1",
-    "resolve-url-loader": "^3.1.4",
-    "sass": "^1.37.5",
     "sass-loader": "^10.2.0",
-    "tailwindcss": "^3.2.0",
+    "tailwindcss": "^3.2.4",
+    "vite": "^4.0.4",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.14"
   }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

resources/js/app.js

@@ -1,14 +1,16 @@
 import Vue from 'vue'
 import store from '~/store'
 import router from '~/router'
-import i18n from '~/plugins/i18n'
+import i18n from '~/plugins/i18n.js'
-import App from '~/components/App'
+import App from '~/components/App.vue'
 import LoadScript from 'vue-plugin-load-script'
-import Base from './base'
+import Base from './base.js'
 
 import '~/plugins'
 import '~/components'
 
+import '../sass/app.scss'
+
 Vue.config.productionTip = false
 
 Vue.mixin(Base)

resources/js/base.js

@@ -10,7 +10,7 @@ export default {
       return window.$crisp
     }
   },
-  
+
   methods: {
     /**
      * Creates a debounced function that delays invoking a callback.

resources/js/components/App.vue

@@ -38,26 +38,25 @@
 </template>
 
 <script>
-import Loading from './Loading'
+import Loading from './Loading.vue'
-import { mapState } from 'vuex'
+import Hotjar from './service/Hotjar.vue'
-import Hotjar from './service/Hotjar'
+import Amplitude from './service/Amplitude.vue'
-import Amplitude from './service/Amplitude'
+import Crisp from './service/Crisp.vue'
-import Crisp from './service/Crisp'
+import StopImpersonation from './pages/StopImpersonation.vue'
-import StopImpersonation from './pages/StopImpersonation'
+import Notifications from "./common/Notifications.vue"
-import Notifications from "./common/Notifications"
+import SeoMeta from '../mixins/seo-meta.js'
-import SeoMeta from '../mixins/seo-meta'
 
 // Load layout components dynamically.
-const requireContext = require.context('~/layouts', false, /.*\.vue$/)
+const requireContext = import.meta.glob('../layouts/**.vue')
 
-const layouts = requireContext.keys()
+const layouts = {}
+Object.keys(requireContext)
   .map(file =>
-    [file.replace(/(^.\/)|(\.vue$)/g, ''), requireContext(file)]
+    [file.match(/[^/]*(?=\.[^.]*$)/)[0], requireContext[file]]
   )
-  .reduce((components, [name, component]) => {
+  .forEach(([name, component]) => {
-    components[name] = component.default || component
+    layouts[name] = component.default || component
-    return components
+  })
-  }, {})
 
 export default {
   el: '#app',

resources/js/components/LocaleDropdown.vue

@@ -18,8 +18,8 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { loadMessages } from '~/plugins/i18n'
+import { loadMessages } from '~/plugins/i18n.js'
-import Dropdown from './common/Dropdown'
+import Dropdown from './common/Dropdown.vue'
 
 export default {
   components: { Dropdown },

resources/js/components/Navbar.vue

@@ -132,9 +132,8 @@
 
 <script>
 import {mapGetters} from 'vuex'
-import Dropdown from './common/Dropdown'
+import Dropdown from './common/Dropdown.vue'
-import axios from 'axios'
+import WorkspaceDropdown from './WorkspaceDropdown.vue'
-import WorkspaceDropdown from './WorkspaceDropdown'
 
 export default {
   components: {

resources/js/components/WorkspaceDropdown.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import Dropdown from './common/Dropdown'
+import Dropdown from './common/Dropdown.vue'
 import { mapGetters, mapState } from 'vuex'
 
 export default {

resources/js/components/common/Collapse.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import VTransition from './transitions/VTransition'
+import VTransition from './transitions/VTransition.vue'
 export default {
   name: 'Collapse',
   components: { VTransition },

resources/js/components/common/ProTag.vue

@@ -45,8 +45,7 @@
 </template>
 
 <script>
-import Modal from '../Modal'
+import Modal from '../Modal.vue'
-import axios from 'axios'
 import { mapGetters } from 'vuex'
 
 export default {

resources/js/components/common/index.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 
-import Dropdown from './Dropdown'
+import Dropdown from './Dropdown.vue'
-import Card from './Card'
+import Card from './Card.vue'
-import Button from './Button'
+import Button from './Button.vue'
 // Components that are registered globaly.
 [
   Card,

resources/js/components/forms/CheckboxInput.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
-import VCheckbox from './components/VCheckbox'
+import VCheckbox from './components/VCheckbox.vue'
 export default {
   name: 'CheckboxInput',
 

resources/js/components/forms/CodeInput.vue

@@ -32,7 +32,7 @@ import { highlight, languages } from 'prismjs/components/prism-core'
 import 'prismjs/components/prism-clike'
 import 'prismjs/components/prism-markup'
 import 'prismjs/themes/prism-tomorrow.css' // import syntax highlighting styles
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 export default {
   name: 'CodeInput',

resources/js/components/forms/ColorInput.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 export default {
   name: 'ColorInput',

resources/js/components/forms/DateInput.vue

@@ -6,15 +6,28 @@
       {{ label }}
       <span v-if="required" class="text-red-500 required-dot">*</span>
     </label>
-    <t-datepicker :id="id?id:name" ref="datepicker" v-model="compVal" class="datepicker" :disabled="disabled"
+
-                  :class="{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }"
+    <div class="flex" v-if="!dateRange">
-                  :style="inputStyle" :name="name" :fixed-classes="fixedClasses" :range="dateRange"
+      <input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :class="inputClasses" :disabled="disabled"
-                  :placeholder="placeholder" :timepicker="useTime"
+          :style="inputStyle" :name="name" data-date-format="YYYY-MM-DD"
-                  :date-format="useTime?'Z':'Y-m-d'"
+          :min="setMinDate" :max="setMaxDate"
-                  :user-format="useTime ? amPm ? 'F j, Y - G:i K' : 'F j, Y - H:i' : 'F j, Y'"
+      />
-                  :amPm="amPm"
+    </div>
-                  :disabled-dates="disabledDates"
+    <div :class="inputClasses" v-else>
-    />
+      <div class="flex -mx-2">
+      <p class="text-gray-900 px-4">From</p>
+      <input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :disabled="disabled"
+             :style="inputStyle" :name="name" data-date-format="YYYY-MM-DD" class="flex-grow border-transparent focus:outline-none "
+             :min="setMinDate" :max="setMaxDate"
+      />
+      <p class="text-gray-900 px-4">To</p>
+      <input v-if="dateRange" :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="toDate" :disabled="disabled"
+             :style="inputStyle" :name="name" class="flex-grow border-transparent focus:outline-none"
+             :min="setMinDate" :max="setMaxDate"
+      />
+      </div>
+    </div>
+
     <small v-if="help" :class="theme.default.help">
       <slot name="help">{{ help }}</slot>
     </small>
@@ -23,91 +36,8 @@
 </template>
 
 <script>
-import {fixedClasses} from '../../plugins/config/vue-tailwind/datePicker'
+import {fixedClasses} from '../../plugins/config/vue-tailwind/datePicker.js'
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
-
-import VueTailwind from 'vue-tailwind'
-import TDatepicker from 'vue-tailwind/dist/t-datepicker'
-import Vue from 'vue'
-
-const settings = {
-  't-datepicker': {
-    component: TDatepicker,
-    props: {
-      classes: {
-        dropdown: 'origin-top-left absolute rounded shadow bg-white dark:bg-notion-dark dark:border-gray-100 border overflow-hidden mt-1',
-        wrapper: 'flex flex-col',
-        dropdownWrapper: 'relative z-10',
-        enterClass: 'opacity-0 scale-95',
-        enterActiveClass: 'transition transform ease-out duration-100',
-        enterToClass: 'opacity-100 scale-100',
-        leaveClass: 'opacity-100 scale-100',
-        leaveActiveClass: 'transition transform ease-in duration-75',
-        leaveToClass: 'opacity-0 scale-95',
-        inlineWrapper: '',
-        inlineViews: 'rounded bg-white border mt-1 inline-flex',
-        inputWrapper: '',
-        input: 'text-black placeholder-gray-400 border-gray-300',
-        clearButton: 'hover:bg-gray-100 rounded transition duration-100 ease-in-out text-gray-600',
-        clearButtonIcon: '',
-        viewGroup: '',
-        view: '',
-        navigator: 'pt-2 px-3',
-        navigatorViewButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer rounded-full px-2 py-1 -ml-1 hover:bg-gray-100',
-        navigatorViewButtonIcon: 'fill-current text-gray-400',
-        navigatorViewButtonBackIcon: 'fill-current text-gray-400',
-        navigatorViewButtonMonth: 'text-gray-700 font-semibold',
-        navigatorViewButtonYear: 'text-gray-500 ml-1',
-        navigatorViewButtonYearRange: 'text-gray-500 ml-1',
-        navigatorLabel: 'py-1',
-        navigatorLabelMonth: 'text-gray-700 font-semibold',
-        navigatorLabelYear: 'text-gray-500 ml-1',
-        navigatorPrevButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 rounded-full p-1 ml-2 ml-auto disabled:opacity-50 disabled:cursor-not-allowed',
-        navigatorNextButton: 'transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 rounded-full p-1 -mr-1 disabled:opacity-50 disabled:cursor-not-allowed',
-        navigatorPrevButtonIcon: 'text-gray-400',
-        navigatorNextButtonIcon: 'text-gray-400',
-        calendarWrapper: 'px-3 pt-2',
-        calendarHeaderWrapper: '',
-        calendarHeaderWeekDay: 'uppercase text-xs text-gray-500 w-8 h-8 flex items-center justify-center',
-        calendarDaysWrapper: '',
-        calendarDaysDayWrapper: 'w-full h-8 flex flex-shrink-0 items-center',
-        otherMonthDay: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 text-gray-400 disabled:opacity-50 disabled:cursor-not-allowed',
-        emptyDay: '',
-        inRangeFirstDay: 'text-sm bg-blue-500 text-white w-full h-8 rounded-l-full',
-        inRangeLastDay: 'text-sm bg-blue-500 text-white w-full h-8 rounded-r-full',
-        inRangeDay: 'text-sm bg-blue-200 w-full h-8 disabled:opacity-50 disabled:cursor-not-allowed',
-        selectedDay: 'text-sm rounded-full w-8 h-8 mx-auto bg-blue-500 text-white disabled:opacity-50 disabled:cursor-not-allowed',
-        activeDay: 'text-sm rounded-full bg-blue-100 w-8 h-8 mx-auto disabled:opacity-50 disabled:cursor-not-allowed',
-        highlightedDay: 'text-sm rounded-full bg-blue-200 w-8 h-8 mx-auto disabled:opacity-50 disabled:cursor-not-allowed',
-        day: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed',
-        today: 'text-sm rounded-full w-8 h-8 mx-auto hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed border border-blue-500',
-        monthWrapper: 'px-3 pt-2',
-        selectedMonth: 'text-sm rounded w-full h-12 mx-auto bg-blue-500 text-white',
-        activeMonth: 'text-sm rounded w-full h-12 mx-auto bg-blue-100',
-        month: 'text-sm rounded w-full h-12 mx-auto hover:bg-blue-100',
-        yearWrapper: 'px-3 pt-2',
-        year: 'text-sm rounded w-full h-12 mx-auto hover:bg-blue-100',
-        selectedYear: 'text-sm rounded w-full h-12 mx-auto bg-blue-500 text-white',
-        activeYear: 'text-sm rounded w-full h-12 mx-auto bg-blue-100',
-        timepickerWrapper: 'flex items-center px-4 py-2 space-x-2',
-        timepickerTimeWrapper: 'flex items-center space-x-2',
-        timepickerTimeFieldsWrapper: 'bg-gray-100 dark:bg-notion-dark-light rounded-md w-full text-right flex items-center border border-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
-        timepickerOkButton: 'text-blue-600 text-sm uppercase font-semibold transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded cursor-pointer',
-        timepickerInput: 'text-center w-8 border-transparent bg-transparent dark:bg-notion-dark-light p-0 h-6 text-sm transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded',
-        timepickerTimeLabel: 'flex-grow text-sm text-gray-500',
-        timepickerAmPmWrapper: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out bg-gray-100 dark:bg-notion-dark-light border border-transparent rounded cursor-pointer focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
-        timepickerAmPmWrapperChecked: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out bg-gray-100 dark:bg-notion-dark-light border border-transparent rounded cursor-pointer focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
-        timepickerAmPmWrapperDisabled: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out opacity-50 cursor-not-allowed',
-        timepickerAmPmWrapperCheckedDisabled: 'relative inline-flex flex-shrink-0 transition duration-200 ease-in-out opacity-50 cursor-not-allowed',
-        timepickerAmPmButton: 'absolute flex items-center justify-center w-6 h-6 text-xs text-gray-800 transition duration-200 ease-in-out transform translate-x-0 bg-white rounded shadow',
-        timepickerAmPmButtonChecked: 'absolute flex items-center justify-center w-6 h-6 text-xs text-gray-800 transition duration-200 ease-in-out transform translate-x-full bg-white rounded shadow',
-        timepickerAmPmCheckedPlaceholder: 'flex items-center justify-center w-6 h-6 text-xs text-gray-500 rounded-sm',
-        timepickerAmPmUncheckedPlaceholder: 'flex items-center justify-center w-6 h-6 text-xs text-gray-500 rounded-sm'
-      }
-    }
-  }
-}
-Vue.use(VueTailwind, settings)
 
 export default {
   name: 'DateInput',
@@ -116,18 +46,35 @@ export default {
   props: {
     withTime: {type: Boolean, default: false},
     dateRange: {type: Boolean, default: false},
-    amPm: {type: Boolean, default: false},
     disablePastDates: {type: Boolean, default: false},
     disableFutureDates: {type: Boolean, default: false}
   },
 
   data: () => ({
-    fixedClasses: fixedClasses
+    fixedClasses: fixedClasses,
+    fromDate: null,
+    toDate: null
   }),
 
   computed: {
+    inputClasses (){
+      const str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700'
+      return this.dateRange ? str + ' w-50' : str + ' w-full'
+    },
     useTime() {
       return this.withTime && !this.dateRange
+    },
+    setMinDate () {
+      if (this.disablePastDates) {
+        return new Date().toISOString().split('T')[0]
+      }
+      return false
+    },
+    setMaxDate () {
+      if (this.disableFutureDates) {
+        return new Date().toISOString().split('T')[0]
+      }
+      return false
     }
   },
 
@@ -137,10 +84,43 @@ export default {
         this.setInputColor()
       },
       immediate: true
+    },
+    fromDate: {
+      handler(val) {
+        this.toDate = null
+        if(val){
+          this.compVal = (this.dateRange) ? [val] : val
+        }else{
+          this.compVal = null
+        }
+      },
+      immediate: true
+    },
+    toDate: {
+      handler(val) {
+        if(this.dateRange && val){
+          if(!Array.isArray(this.compVal)){
+            this.compVal = [null];
+          }
+          this.compVal[1] = val ?? null
+        }else{
+          this.compVal = null
+        }
+      },
+      immediate: true
     }
   },
 
   mounted() {
+    if(this.compVal){
+      if(Array.isArray(this.compVal)){
+        this.fromDate = this.compVal[0] ?? null
+        this.toDate = this.compVal[1] ?? null
+      }else{
+        this.fromDate = this.compVal
+      }
+    }
+
     fixedClasses.input = this.theme.default.input
     this.setInputColor()
   },
@@ -160,15 +140,6 @@ export default {
         const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0]
         dateInput.style.setProperty('--tw-ring-color', this.color)
       }
-    },
-    disabledDates(date) {
-      const today = new Date()
-      if (this.disablePastDates) {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate()) < new Date(today.getFullYear(), today.getMonth(), today.getDate())
-      } else if (this.disableFutureDates) {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate()) > new Date(today.getFullYear(), today.getMonth(), today.getDate())
-      }
-      return false;
     }
   }
 }

resources/js/components/forms/FileInput.vue

@@ -139,8 +139,8 @@
 </template>
 
 <script>
-import Modal from '../Modal'
+import Modal from '../Modal.vue'
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 export default {
   name: 'FileInput',

resources/js/components/forms/FlatSelectInput.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 /**
  * Options: {name,value} objects

resources/js/components/forms/ImageInput.vue

@@ -104,9 +104,9 @@
 </template>
 
 <script>
-import Modal from '../Modal'
+import Modal from '../Modal.vue'
 import axios from 'axios'
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 export default {
   name: 'ImageInput',

resources/js/components/forms/RatingInput.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 export default {
   name: 'RatingInput',

resources/js/components/forms/RichTextAreaInput.vue

@@ -21,7 +21,7 @@
 
 <script>
 import { VueEditor, Quill } from 'vue2-editor'
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')
 

resources/js/components/forms/SelectInput.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 /**
  * Options: {name,value} objects

resources/js/components/forms/SignatureInput.vue

@@ -29,7 +29,7 @@
 <script>
 import Vue from 'vue'
 import VueSignaturePad from 'vue-signature-pad'
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 Vue.use(VueSignaturePad)
 

resources/js/components/forms/SimpleDateInput.vue

@@ -1,99 +0,0 @@
-<template>
-  <div :class="wrapperClass">
-    <label v-if="label" :for="id?id:name"
-           :class="[theme.default.label,{'uppercase text-xs':uppercaseLabels, 'text-sm':!uppercaseLabels}]"
-    >
-      {{ label }}
-      <span v-if="required" class="text-red-500 required-dot">*</span>
-    </label>
-    <input :id="id?id:name" v-model="compVal" v-cleave="cleaveOptions" :disabled="disabled"
-                  :class="[theme.default.input,{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }]"
-                  :style="inputStyle" :name="name"
-                  :placeholder="placeholder"
-    />
-    <small v-if="help" :class="theme.default.help">
-    <slot name="help"><span class="field-help" v-html="help" /></slot>
-    </small>
-    <has-error v-if="hasValidation" :form="form" :field="name" />
-  </div>
-</template>
-
-<script>
-import inputMixin from '~/mixins/forms/input'
-import Cleave from 'cleave.js';
-
-export default {
-  name: 'SimpleDateInput',
-  mixins: [inputMixin],
-
-  props: {
-    dateFormat: { type: String, default: 'DD/MM/YYYY' },
-  },
-
-  directives: {
-    cleave: {
-      inserted: (el, binding) => {
-        el.cleave = new Cleave(el, binding.value || {})
-      },
-      update: (el) => {
-        const event = new Event('input', {bubbles: true});
-        setTimeout(function () {
-            el.value = el.cleave.properties.result
-            el.dispatchEvent(event)
-        }, 100);
-      }
-    }
-  },
-
-  data: () => ({
-
-  }),
-
-  computed: {
-    cleaveOptions () {
-      let datePattern = ['d','m','Y']
-      if(this.dateFormat == 'MM/DD/YYYY'){
-        datePattern = ['m','d','Y']
-      }else if(this.dateFormat == 'YYYY/MM/DD'){
-        datePattern = ['Y','m','d']
-      }
-      return {
-        date: true,
-        delimiter: '/',
-        datePattern: datePattern
-      }
-    }
-  },
-
-  watch: {
-    color: {
-      handler () {
-        this.setInputColor()
-      },
-      immediate: true
-    }
-  },
-
-  mounted () {
-    this.setInputColor()
-  },
-
-  methods: {
-    /**
-     * Pressing enter won't submit form
-     * @param event
-     * @returns {boolean}
-     */
-    onEnterPress (event) {
-      event.preventDefault()
-      return false
-    },
-    setInputColor () {
-      if (this.$refs.datepicker) {
-        const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0]
-        dateInput.style.setProperty('--tw-ring-color', this.color)
-      }
-    }
-  }
-}
-</script>

resources/js/components/forms/TextAreaInput.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 
 export default {
   name: 'TextAreaInput',

resources/js/components/forms/TextInput.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input'
+import inputMixin from '~/mixins/forms/input.js'
 export default {
   name: 'TextInput',
 

resources/js/components/forms/ToggleSwitchInput.vue

@@ -12,9 +12,9 @@
   </template>
   
   <script>
-  import inputMixin from '~/mixins/forms/input'
+  import inputMixin from '~/mixins/forms/input.js'
   
-  import VSwitch from './components/VSwitch'
+  import VSwitch from './components/VSwitch.vue'
   export default {
     name: 'ToggleSwitchInput',
   

resources/js/components/forms/components/VSelect.vue

@@ -78,9 +78,9 @@
 
 <script>
 import { directive as onClickaway } from 'vue-clickaway'
-import TextInput from '../TextInput'
+import TextInput from '../TextInput.vue'
 import Fuse from 'fuse.js'
-import { themes } from '~/config/form-themes'
+import { themes } from '~/config/form-themes.js'
 import debounce from 'debounce'
 
 export default {

resources/js/components/forms/index.js

@@ -1,20 +1,20 @@
 import Vue from 'vue'
 
 import HasError from './validation/HasError.vue'
-import AlertError from './validation/AlertError'
+import AlertError from './validation/AlertError.vue'
-import AlertSuccess from './validation/AlertSuccess'
+import AlertSuccess from './validation/AlertSuccess.vue'
-import VCheckbox from './components/VCheckbox'
+import VCheckbox from './components/VCheckbox.vue'
-import TextInput from './TextInput'
+import TextInput from './TextInput.vue'
-import TextAreaInput from './TextAreaInput'
+import TextAreaInput from './TextAreaInput.vue'
-import VSelect from './components/VSelect'
+import VSelect from './components/VSelect.vue'
-import CheckboxInput from './CheckboxInput'
+import CheckboxInput from './CheckboxInput.vue'
-import SelectInput from './SelectInput'
+import SelectInput from './SelectInput.vue'
-import ColorInput from './ColorInput'
+import ColorInput from './ColorInput.vue'
-import FileInput from './FileInput'
+import FileInput from './FileInput.vue'
-import ImageInput from './ImageInput'
+import ImageInput from './ImageInput.vue'
-import RatingInput from './RatingInput'
+import RatingInput from './RatingInput.vue'
-import FlatSelectInput from './FlatSelectInput'
+import FlatSelectInput from './FlatSelectInput.vue'
-import ToggleSwitchInput from './ToggleSwitchInput'
+import ToggleSwitchInput from './ToggleSwitchInput.vue'
 
 // Components that are registered globaly.
 [
@@ -38,7 +38,6 @@ import ToggleSwitchInput from './ToggleSwitchInput'
 })
 
 // Lazy load some heavy component
-Vue.component('SignatureInput', () => import('./SignatureInput'))
+Vue.component('SignatureInput', () => import('./SignatureInput.vue'))
-Vue.component('RichTextAreaInput', () => import('./RichTextAreaInput'))
+Vue.component('RichTextAreaInput', () => import('./RichTextAreaInput.vue'))
-Vue.component('DateInput', () => import('./DateInput'))
+Vue.component('DateInput', () => import('./DateInput.vue'))
-Vue.component('SimpleDateInput', () => import('./SimpleDateInput'))

resources/js/components/forms/validation/AlertError.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Alert from './Alert'
+import Alert from './Alert.js'
 
 export default {
   name: 'AlertError',

resources/js/components/forms/validation/AlertSuccess.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import Alert from './Alert'
+import Alert from './Alert.js'
 
 export default {
   name: 'AlertSuccess',

resources/js/components/index.js

@@ -2,10 +2,10 @@ import './common'
 import './forms'
 
 import Vue from 'vue'
-import Child from './Child'
+import Child from './Child.vue'
-import Modal from './Modal'
+import Modal from './Modal.vue'
 
-import Loader from './common/Loader'
+import Loader from './common/Loader.vue'
 
 // Components that are registered globaly.
 [
@@ -17,5 +17,5 @@ import Loader from './common/Loader'
 })
 
 // Lazy load some heavy component
-Vue.component('FormEditor', () => import('./open/forms/components/FormEditor'))
+Vue.component('FormEditor', () => import('./open/forms/components/FormEditor.vue'))
-Vue.component('NotionPage', () => import('./open/NotionPage'))
+Vue.component('NotionPage', () => import('./open/NotionPage.vue'))

resources/js/components/open/forms/OpenCompleteForm.vue

@@ -122,12 +122,12 @@
 
 <script>
 import Form from 'vform'
-import OpenForm from './OpenForm'
+import OpenForm from './OpenForm.vue'
-import OpenFormButton from './OpenFormButton'
+import OpenFormButton from './OpenFormButton.vue'
-import { themes } from '~/config/form-themes'
+import { themes } from '~/config/form-themes.js'
-import VButton from '../../common/Button'
+import VButton from '../../common/Button.vue'
-import VTransition from '../../common/transitions/VTransition'
+import VTransition from '../../common/transitions/VTransition.vue'
-import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key'
+import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
 
 export default {
   components: { VTransition, VButton, OpenFormButton, OpenForm },

resources/js/components/open/forms/OpenForm.vue

@@ -63,12 +63,12 @@
 <script>
 import axios from 'axios'
 import Form from 'vform'
-import OpenFormButton from './OpenFormButton'
+import OpenFormButton from './OpenFormButton.vue'
 import clonedeep from 'clone-deep'
-import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver'
+import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
 
 const VueHcaptcha = () => import('@hcaptcha/vue-hcaptcha')
-import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key'
+import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
 
 export default {
   name: 'OpenForm',
@@ -381,9 +381,6 @@ export default {
       if (field.type === 'signature') {
         return 'SignatureInput'
       }
-      if (field.type === 'date' && field.simple_date_input) {
-        return 'SimpleDateInput'
-      }
       return this.fieldComponents[field.type]
     },
     getFieldClasses(field) {
@@ -444,9 +441,6 @@ export default {
         } else if (field.disable_future_dates) {
           inputProperties.disableFutureDates = true
         }
-        if (field.simple_date_input && field.simple_date_input_format) {
-          inputProperties.dateFormat = field.simple_date_input_format
-        }
       } else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
         inputProperties.multiple = (field.multiple !== undefined && field.multiple)
         inputProperties.mbLimit = 5

resources/js/components/open/forms/OpenFormButton.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { themes } from '~/config/form-themes'
+import { themes } from '~/config/form-themes.js'
 
 export default {
   name: 'OpenFormButton',

resources/js/components/open/forms/components/FormEditor.vue

@@ -54,17 +54,17 @@
 
 <script>
 import {mapGetters} from 'vuex'
-import FormErrorModal from './form-components/FormErrorModal'
+import FormErrorModal from './form-components/FormErrorModal.vue'
-import FormInformation from './form-components/FormInformation'
+import FormInformation from './form-components/FormInformation.vue'
-import FormStructure from './form-components/FormStructure'
+import FormStructure from './form-components/FormStructure.vue'
-import FormCustomization from './form-components/FormCustomization'
+import FormCustomization from './form-components/FormCustomization.vue'
-import FormCustomCode from './form-components/FormCustomCode'
+import FormCustomCode from './form-components/FormCustomCode.vue'
-import FormAboutSubmission from './form-components/FormAboutSubmission'
+import FormAboutSubmission from './form-components/FormAboutSubmission.vue'
-import FormNotifications from './form-components/FormNotifications'
+import FormNotifications from './form-components/FormNotifications.vue'
-import FormIntegrations from './form-components/FormIntegrations'
+import FormIntegrations from './form-components/FormIntegrations.vue'
-import FormEditorPreview from './form-components/FormEditorPreview'
+import FormEditorPreview from './form-components/FormEditorPreview.vue'
-import FormSecurityPrivacy from './form-components/FormSecurityPrivacy'
+import FormSecurityPrivacy from './form-components/FormSecurityPrivacy.vue'
-import saveUpdateAlert from '../../../../mixins/forms/saveUpdateAlert'
+import saveUpdateAlert from '../../../../mixins/forms/saveUpdateAlert.js'
 
 export default {
   name: 'FormEditor',

resources/js/components/open/forms/components/FormFieldsEditor.vue

@@ -161,13 +161,13 @@
 
 <script>
 import draggable from 'vuedraggable'
-import FormFieldOptionsModal from '../fields/FormFieldOptionsModal'
+import FormFieldOptionsModal from '../fields/FormFieldOptionsModal.vue'
-import AddFormBlockModal from './form-components/AddFormBlockModal'
+import AddFormBlockModal from './form-components/AddFormBlockModal.vue'
-import FormBlockOptionsModal from '../fields/FormBlockOptionsModal'
+import FormBlockOptionsModal from '../fields/FormBlockOptionsModal.vue'
-import ProTag from '../../../common/ProTag'
+import ProTag from '../../../common/ProTag.vue'
 import clonedeep from 'clone-deep'
-import EditableDiv from '../../../common/EditableDiv'
+import EditableDiv from '../../../common/EditableDiv.vue'
-import VButton from "../../../common/Button";
+import VButton from "../../../common/Button.vue";
 
 export default {
   name: 'FormFieldsEditor',

resources/js/components/open/forms/components/FormStats.vue

@@ -39,7 +39,7 @@ import {
   CategoryScale,
   PointElement
 } from 'chart.js'
-import ProTag from '../../../common/ProTag'
+import ProTag from '../../../common/ProTag.vue'
 
 ChartJS.register(
   Title,

resources/js/components/open/forms/components/FormSubmissions.vue

@@ -62,10 +62,10 @@
 
 <script>
 import axios from 'axios'
-import ScrollShadow from '../../../common/ScrollShadow'
+import ScrollShadow from '../../../common/ScrollShadow.vue'
-import OpenTable from '../../tables/OpenTable'
+import OpenTable from '../../tables/OpenTable.vue'
 import clonedeep from "clone-deep";
-import VSwitch from '../../../forms/components/VSwitch'
+import VSwitch from '../../../forms/components/VSwitch.vue'
 
 export default {
   name: 'FormSubmissions',

resources/js/components/open/forms/components/form-components/AddFormBlockModal.vue

@@ -229,7 +229,7 @@
 <script>
 
 import Form from 'vform'
-import VButton from '../../../../common/Button'
+import VButton from '../../../../common/Button.vue'
 
 export default {
   name: 'AddFormBlockModal',

resources/js/components/open/forms/components/form-components/FormAboutSubmission.vue

@@ -149,9 +149,9 @@
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse'
+import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag'
+import ProTag from '../../../../common/ProTag.vue'
-import VTransition from '../../../../common/transitions/VTransition'
+import VTransition from '../../../../common/transitions/VTransition.vue'
 
 export default {
   components: {Collapse, ProTag, VTransition},

resources/js/components/open/forms/components/form-components/FormCustomCode.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse'
+import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag'
+import ProTag from '../../../../common/ProTag.vue'
-import CodeInput from '../../../../forms/CodeInput'
+import CodeInput from '../../../../forms/CodeInput.vue'
 
 export default {
   components: { Collapse, ProTag, CodeInput },

resources/js/components/open/forms/components/form-components/FormCustomization.vue

@@ -75,8 +75,8 @@
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse'
+import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag'
+import ProTag from '../../../../common/ProTag.vue'
 
 export default {
   components: { Collapse, ProTag },

resources/js/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -62,8 +62,8 @@
 </template>
 
 <script>
-import VSwitch from '../../../../forms/components/VSwitch'
+import VSwitch from '../../../../forms/components/VSwitch.vue'
-import OpenCompleteForm from '../../OpenCompleteForm'
+import OpenCompleteForm from '../../OpenCompleteForm.vue'
 
 export default {
   components: { OpenCompleteForm, VSwitch },

resources/js/components/open/forms/components/form-components/FormInformation.vue

@@ -70,8 +70,8 @@
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse'
+import Collapse from '../../../../common/Collapse.vue'
-import SelectInput from '../../../../forms/SelectInput'
+import SelectInput from '../../../../forms/SelectInput.vue'
 import { mapState } from 'vuex'
 import clonedeep from 'clone-deep'
 

resources/js/components/open/forms/components/form-components/FormIntegrations.vue

@@ -41,8 +41,8 @@
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse'
+import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag'
+import ProTag from '../../../../common/ProTag.vue'
 
 export default {
   components: {Collapse, ProTag},

resources/js/components/open/forms/components/form-components/FormNotifications.vue

@@ -20,11 +20,11 @@
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse'
+import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag'
+import ProTag from '../../../../common/ProTag.vue'
-import FormNotificationsOption from './components/FormNotificationsOption'
+import FormNotificationsOption from './components/FormNotificationsOption.vue'
-import FormNotificationsSlack from './components/FormNotificationsSlack'
+import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
-import FormNotificationsSubmissionConfirmation from './components/FormNotificationsSubmissionConfirmation'
+import FormNotificationsSubmissionConfirmation from './components/FormNotificationsSubmissionConfirmation.vue'
 
 export default {
   components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsOption, Collapse, ProTag },

resources/js/components/open/forms/components/form-components/FormSecurityPrivacy.vue

@@ -25,8 +25,8 @@
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse'
+import Collapse from '../../../../common/Collapse.vue'
-import ProTag from '../../../../common/ProTag'
+import ProTag from '../../../../common/ProTag.vue'
 
 export default {
   components: { Collapse, ProTag },

resources/js/components/open/forms/components/form-components/FormStructure.vue

@@ -15,8 +15,8 @@
 </template>
 
 <script>
-import Collapse from '../../../../common/Collapse'
+import Collapse from '../../../../common/Collapse.vue'
-import FormFieldsEditor from '../FormFieldsEditor'
+import FormFieldsEditor from '../FormFieldsEditor.vue'
 
 export default {
   components: { Collapse, FormFieldsEditor },

resources/js/components/open/forms/components/form-components/components/FormNotificationsOption.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import ProTag from '../../../../../common/ProTag'
+import ProTag from '../../../../../common/ProTag.vue'
 
 export default {
   components: { ProTag },

resources/js/components/open/forms/components/form-components/components/FormNotificationsSlack.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import ProTag from '../../../../../common/ProTag'
+import ProTag from '../../../../../common/ProTag.vue'
 
 export default {
   components: { ProTag },

resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import ProTag from '../../../../../common/ProTag'
+import ProTag from '../../../../../common/ProTag.vue'
 
 export default {
   components: { ProTag },

resources/js/components/open/forms/components/form-logic-components/ConditionEditor.vue

@@ -32,9 +32,9 @@
 
 <script>
 import QueryBuilder from 'query-builder-vue'
-import ColumnCondition from './ColumnCondition'
+import ColumnCondition from './ColumnCondition.vue'
 import Vue from 'vue'
-import GroupControlSlot from './GroupControlSlot'
+import GroupControlSlot from './GroupControlSlot.vue'
 
 export default {
 

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -66,10 +66,10 @@
 </template>
 
 <script>
-import ProTag from '../../../../common/ProTag'
+import ProTag from '../../../../common/ProTag.vue'
-import ConditionEditor from './ConditionEditor'
+import ConditionEditor from './ConditionEditor.vue'
-import Modal from '../../../../Modal'
+import Modal from '../../../../Modal.vue'
-import SelectInput from '../../../../forms/SelectInput'
+import SelectInput from '../../../../forms/SelectInput.vue'
 import clonedeep from 'clone-deep'
 
 export default {

resources/js/components/open/forms/fields/FormBlockOptionsModal.vue

@@ -139,9 +139,9 @@
 </template>
 
 <script>
-import ProTag from '../../../common/ProTag'
+import ProTag from '../../../common/ProTag.vue'
-const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor')
+const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
-import CodeInput from '../../../forms/CodeInput'
+import CodeInput from '../../../forms/CodeInput.vue'
 
 export default {
   name: 'FormBlockOptionsModal',

resources/js/components/open/forms/fields/FormFieldOptionsModal.vue

@@ -150,15 +150,6 @@
         <p class="text-gray-400 mb-5">
           Include time. Or not. This cannot be used with the date range option yet.
         </p>
-        <v-checkbox v-if="field.with_time"
-                    v-model="field.use_am_pm"
-                    name="use_am_pm"
-        >
-          Use 12h AM/PM format
-        </v-checkbox>
-        <p v-if="field.with_time" class="text-gray-400 mb-5">
-          By default, input uses the 24 hours format
-        </p>
 
         <select-input v-if="field.with_time" name="timezone" class="mt-4"
                       :form="field" :options="timezonesOptions"
@@ -188,18 +179,6 @@
         >
           Disable future dates
         </v-checkbox>
-
-        <v-checkbox v-model="field.simple_date_input"
-                    name="simple_date_input" class="mb-3"
-                    @input="onFieldSimpleDateInputChange"
-        >
-          Simple date input
-        </v-checkbox>
-        <select-input v-if="field.simple_date_input" v-model="field.simple_date_input_format"
-                      name="simple_date_input_format"
-                      class="mt-4" :form="field" :options="dateFormatOptions"
-                      label="Date format"
-        />
       </div>
 
       <!-- select/multiselect Options   -->
@@ -264,7 +243,7 @@
                       :multiple="field.type==='multi_select'"
         />
         <date-input v-else-if="field.type==='date' && field.prefill_today!==true" name="prefill" class="mt-4"
-                    :form="field" :with-time="field.with_time===true" :am-pm="field.use_am_pm===true"
+                    :form="field" :with-time="field.with_time===true"
                     :date-range="field.date_range===true"
                     label="Pre-filled value"
         />
@@ -370,10 +349,10 @@
 <script>
 
 import timezones from '../../../../../data/timezones.json'
-import ProTag from "../../../common/ProTag"
+import ProTag from "../../../common/ProTag.vue"
 
-const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor')
+const FormBlockLogicEditor = () => import('../components/form-logic-components/FormBlockLogicEditor.vue')
-import ChangeFieldType from "./components/ChangeFieldType"
+import ChangeFieldType from "./components/ChangeFieldType.vue"
 
 export default {
   name: 'FormFieldOptionsModal',
@@ -432,16 +411,6 @@ export default {
         return option.name
       }).join("\n")
     },
-    dateFormatOptions() {
-      if (this.field.type !== 'date') return []
-      let formats = ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY/MM/DD']
-      return formats.map((format) => {
-        return {
-          name: format,
-          value: format
-        }
-      })
-    }
   },
 
   watch: {},
@@ -495,7 +464,6 @@ export default {
     },
     onFieldWithTimeChange(val) {
       this.$set(this.field, 'with_time', val)
-      this.$set(this.field, 'use_am_pm', false)
       if (this.field.with_time) {
         this.$set(this.field, 'date_range', false)
         this.$set(this.field, 'simple_date_input', false)

resources/js/components/open/forms/fields/components/ChangeFieldType.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Dropdown from '../../../../common/Dropdown'
+import Dropdown from '../../../../common/Dropdown.vue'
 
 export default {
   name: 'ChangeFieldType',

resources/js/components/open/tables/OpenTable.vue

@@ -72,13 +72,13 @@
 </template>
 
 <script>
-import OpenText from './components/OpenText'
+import OpenText from './components/OpenText.vue'
-import OpenUrl from './components/OpenUrl'
+import OpenUrl from './components/OpenUrl.vue'
-import OpenSelect from './components/OpenSelect'
+import OpenSelect from './components/OpenSelect.vue'
-import OpenDate from './components/OpenDate'
+import OpenDate from './components/OpenDate.vue'
-import OpenFile from './components/OpenFile'
+import OpenFile from './components/OpenFile.vue'
-import OpenCheckbox from './components/OpenCheckbox'
+import OpenCheckbox from './components/OpenCheckbox.vue'
-import ResizableTh from './components/ResizableTh'
+import ResizableTh from './components/ResizableTh.vue'
 import clonedeep from 'clone-deep'
 
 const cyrb53 = function (str, seed = 0) {

resources/js/components/open/tables/components/OpenSelect.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import OpenTag from './OpenTag'
+import OpenTag from './OpenTag.vue'
 
 export default {
   components: { OpenTag },

resources/js/components/pages/forms/CreateTemplateModal.vue

@@ -35,7 +35,7 @@
   
 <script>
 import Form from 'vform'
-import QuestionsEditor from '../../templates/QuestionsEditor';
+import QuestionsEditor from '../../templates/QuestionsEditor.vue';
 
 export default {
     name: 'CreateTemplateModal',

resources/js/components/pages/forms/NewFeatures.vue

@@ -64,7 +64,7 @@
 <script>
 import axios from 'axios'
 import { mapGetters } from 'vuex'
-import VTransition from '../../common/transitions/VTransition'
+import VTransition from '../../common/transitions/VTransition.vue'
 
 export default {
   components: { VTransition },

resources/js/components/pages/forms/show/EmbedCode.vue

@@ -17,7 +17,7 @@
 </template>
     
 <script>
-import CopyContent from '../../../open/forms/components/CopyContent'
+import CopyContent from '../../../open/forms/components/CopyContent.vue'
 
 export default {
     name: 'EmbedCode',

resources/js/components/pages/forms/show/ExtraMenu.vue

@@ -124,8 +124,8 @@
 <script>
 import axios from 'axios'
 import {mapGetters, mapState} from 'vuex'
-import Dropdown from '../../../common/Dropdown'
+import Dropdown from '../../../common/Dropdown.vue'
-import CreateTemplateModal from '../CreateTemplateModal'
+import CreateTemplateModal from '../CreateTemplateModal.vue'
 
 export default {
     name: 'ExtraMenu',

resources/js/components/pages/forms/show/ShareLink.vue

@@ -18,7 +18,7 @@
 </template>
     
 <script>
-import CopyContent from '../../../open/forms/components/CopyContent'
+import CopyContent from '../../../open/forms/components/CopyContent.vue'
 
 export default {
     name: 'ShareLink',

resources/js/components/pages/forms/show/UrlFormPrefill.vue

@@ -66,10 +66,10 @@
 </template>
 
 <script>
-import FormUrlPrefill from '../../../open/forms/components/FormUrlPrefill'
+import FormUrlPrefill from '../../../open/forms/components/FormUrlPrefill.vue'
-import ProTag from '../../../common/ProTag'
+import ProTag from '../../../common/ProTag.vue'
-import OpenForm from '../../../open/forms/OpenForm'
+import OpenForm from '../../../open/forms/OpenForm.vue'
-import { themes } from '~/config/form-themes'
+import { themes } from '~/config/form-themes.js'
 
 export default {
   name: 'UrlFormPrefill',

resources/js/components/templates/QuestionsEditor.vue

@@ -35,7 +35,7 @@
   </template>
   
   <script>
-  import inputMixin from '~/mixins/forms/input'
+  import inputMixin from '~/mixins/forms/input.js'
   import Form from 'vform'
 
   export default {

resources/js/layouts/default.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import Navbar from '~/components/Navbar'
+import Navbar from '~/components/Navbar.vue'
-import Alert from '../components/common/Alert'
+import Alert from '../components/common/Alert.vue'
 
 export default {
   name: 'MainLayout',

resources/js/mixins/forms/input.js

@@ -1,4 +1,4 @@
-import { themes } from '~/config/form-themes'
+import { themes } from '~/config/form-themes.js'
 
 export default {
   props: {

resources/js/pages/auth/components/LoginForm.vue

@@ -39,9 +39,9 @@
 <script>
 import Form from 'vform'
 import Cookies from 'js-cookie'
-import OpenFormFooter from '../../../components/pages/OpenFormFooter'
+import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
-import Testimonials from '../../../components/pages/welcome/Testimonials'
+import Testimonials from '../../../components/pages/welcome/Testimonials.vue'
-import ForgotPasswordModal from '../ForgotPasswordModal'
+import ForgotPasswordModal from '../ForgotPasswordModal.vue'
 
 export default {
   name: 'LoginForm',

resources/js/pages/auth/components/QuickRegister.vue

@@ -35,8 +35,8 @@
 </template>
 
 <script>
-import LoginForm from './LoginForm'
+import LoginForm from './LoginForm.vue'
-import RegisterForm from './RegisterForm'
+import RegisterForm from './RegisterForm.vue'
 
 export default {
   name: 'QuickRegister',

resources/js/pages/auth/components/RegisterForm.vue

@@ -44,9 +44,9 @@
 
 <script>
 import Form from 'vform'
-import LoginWithGithub from '~/components/LoginWithGithub'
+import LoginWithGithub from '~/components/LoginWithGithub.vue'
-import SelectInput from '../../../components/forms/SelectInput'
+import SelectInput from '../../../components/forms/SelectInput.vue'
-import { initCrisp } from '../../../middleware/check-auth'
+import { initCrisp } from '../../../middleware/check-auth.js'
 
 export default {
   name: 'RegisterForm',

resources/js/pages/auth/login.vue

@@ -56,10 +56,10 @@
 </template>
 
 <script>
-import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
-import Testimonials from '../../components/pages/welcome/Testimonials'
+import Testimonials from '../../components/pages/welcome/Testimonials.vue'
-import LoginForm from './components/LoginForm'
+import LoginForm from './components/LoginForm.vue'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   components: {

resources/js/pages/auth/password/email.vue

@@ -24,8 +24,8 @@
 
 <script>
 import Form from 'vform'
-import OpenFormFooter from '../../../components/pages/OpenFormFooter'
+import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
-import SeoMeta from '../../../mixins/seo-meta'
+import SeoMeta from '../../../mixins/seo-meta.js'
 
 export default {
   middleware: 'guest',

resources/js/pages/auth/password/reset.vue

@@ -34,8 +34,8 @@
 
 <script>
 import Form from 'vform'
-import OpenFormFooter from '../../../components/pages/OpenFormFooter'
+import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
-import SeoMeta from '../../../mixins/seo-meta'
+import SeoMeta from '../../../mixins/seo-meta.js'
 
 export default {
   middleware: 'guest',

resources/js/pages/auth/register.vue

@@ -56,10 +56,10 @@
 </template>
 
 <script>
-import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
-import Testimonials from '../../components/pages/welcome/Testimonials'
+import Testimonials from '../../components/pages/welcome/Testimonials.vue'
-import RegisterForm from './components/RegisterForm'
+import RegisterForm from './components/RegisterForm.vue'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   components: {

resources/js/pages/auth/verification/resend.vue

@@ -25,7 +25,7 @@
 
 <script>
 import Form from 'vform'
-import SeoMeta from '../../../mixins/seo-meta'
+import SeoMeta from '../../../mixins/seo-meta.js'
 
 export default {
   middleware: 'guest',

resources/js/pages/auth/verification/verify.vue

@@ -28,7 +28,7 @@
 
 <script>
 import axios from 'axios'
-import SeoMeta from '../../../mixins/seo-meta'
+import SeoMeta from '../../../mixins/seo-meta.js'
 
 const qs = (params) => Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
 

resources/js/pages/community/students-academics-ngos.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 
 export default {
   components: { OpenFormFooter },

resources/js/pages/forms/create-guest.vue

@@ -27,9 +27,9 @@
 import store from '~/store'
 import Form from 'vform'
 import {mapState, mapActions} from 'vuex'
-import QuickRegister from '../auth/components/QuickRegister'
+import QuickRegister from '../auth/components/QuickRegister.vue'
-import initForm from "../../mixins/form_editor/initForm"
+import initForm from "../../mixins/form_editor/initForm.js"
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 const loadTemplates = function () {
   store.commit('open/templates/startLoading')

resources/js/pages/forms/create.vue

@@ -21,8 +21,8 @@
 import store from '~/store'
 import Form from 'vform'
 import {mapState, mapActions} from 'vuex'
-import initForm from "../../mixins/form_editor/initForm";
+import initForm from "../../mixins/form_editor/initForm.js";
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 const loadTemplates = function () {
   store.commit('open/templates/startLoading')

resources/js/pages/forms/edit.vue

@@ -19,10 +19,10 @@
 <script>
 import axios from 'axios'
 import store from '~/store'
-import Breadcrumb from '../../components/common/Breadcrumb'
+import Breadcrumb from '../../components/common/Breadcrumb.vue'
 import Form from 'vform'
 import { mapState } from 'vuex'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 const loadForms = function () {
   store.commit('open/forms/startLoading')

resources/js/pages/forms/show-public.vue

@@ -43,10 +43,10 @@
 import axios from 'axios'
 import store from '~/store'
 import { mapState } from 'vuex'
-import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm'
+import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
 import Cookies from 'js-cookie'
 import sha256 from 'js-sha256'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 const isFrame = window.location !== window.parent.location || window.frameElement
 

resources/js/pages/forms/show/analytics.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import FormStats from '../../../components/open/forms/components/FormStats'
+import FormStats from '../../../components/open/forms/components/FormStats.vue'
-import SeoMeta from '../../../mixins/seo-meta'
+import SeoMeta from '../../../mixins/seo-meta.js'
 
 export default {
   components: {FormStats},

resources/js/pages/forms/show/index.vue

@@ -104,10 +104,10 @@ import axios from 'axios'
 import store from '~/store'
 import Form from 'vform'
 import {mapGetters, mapState} from 'vuex'
-import ProTag from '../../../components/common/ProTag'
+import ProTag from '../../../components/common/ProTag.vue'
-import VButton from "../../../components/common/Button";
+import VButton from "../../../components/common/Button.vue";
-import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu'
+import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu.vue'
-import SeoMeta from '../../../mixins/seo-meta'
+import SeoMeta from '../../../mixins/seo-meta.js'
 
 const loadForms = function () {
   store.commit('open/forms/startLoading')

resources/js/pages/forms/show/share.vue

@@ -13,11 +13,11 @@
 </template>
 
 <script>
-import ShareLink from '../../../components/pages/forms/show/ShareLink'
+import ShareLink from '../../../components/pages/forms/show/ShareLink.vue'
-import EmbedCode from '../../../components/pages/forms/show/EmbedCode'
+import EmbedCode from '../../../components/pages/forms/show/EmbedCode.vue'
-import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill'
+import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill.vue'
-import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink'
+import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue'
-import SeoMeta from '../../../mixins/seo-meta'
+import SeoMeta from '../../../mixins/seo-meta.js'
 
 export default {
   components: {

resources/js/pages/forms/show/submissions.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script>
-import FormSubmissions from '../../../components/open/forms/components/FormSubmissions'
+import FormSubmissions from '../../../components/open/forms/components/FormSubmissions.vue'
-import SeoMeta from '../../../mixins/seo-meta'
+import SeoMeta from '../../../mixins/seo-meta.js'
 
 export default {
   components: {FormSubmissions},

resources/js/pages/home.vue

@@ -96,9 +96,9 @@ import store from '~/store'
 import { mapGetters, mapState } from 'vuex'
 import Fuse from 'fuse.js'
 import Form from 'vform'
-import TextInput from '../components/forms/TextInput'
+import TextInput from '../components/forms/TextInput.vue'
-import OpenFormFooter from '../components/pages/OpenFormFooter'
+import OpenFormFooter from '../components/pages/OpenFormFooter.vue'
-import ExtraMenu from '../components/pages/forms/show/ExtraMenu'
+import ExtraMenu from '../components/pages/forms/show/ExtraMenu.vue'
 
 const loadForms = function () {
   store.commit('open/forms/startLoading')

resources/js/pages/integrations.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import OpenFormFooter from '../components/pages/OpenFormFooter'
+import OpenFormFooter from '../components/pages/OpenFormFooter.vue'
 
 export default {
   components: { OpenFormFooter },

resources/js/pages/legal-help/privacy-policy.vue

@@ -13,8 +13,8 @@
 </template>
 
 <script>
-import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   components: { OpenFormFooter},

resources/js/pages/legal-help/terms-conditions.vue

@@ -13,8 +13,8 @@
 </template>
 
 <script>
-import OpenFormFooter from '../../components/pages/OpenFormFooter'
+import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   components: { OpenFormFooter },

resources/js/pages/settings/account.vue

@@ -18,7 +18,7 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   scrollToTop: false,

resources/js/pages/settings/admin.vue

@@ -37,7 +37,7 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   components: { },

resources/js/pages/settings/billing.vue

@@ -16,8 +16,8 @@
 
 <script>
 import axios from 'axios'
-import VButton from '../../components/common/Button'
+import VButton from '../../components/common/Button.vue'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   components: { VButton },

resources/js/pages/settings/password.vue

@@ -24,7 +24,7 @@
 
 <script>
 import Form from 'vform'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   scrollToTop: false,

resources/js/pages/settings/profile.vue

@@ -21,7 +21,7 @@
 <script>
 import Form from 'vform'
 import { mapGetters } from 'vuex'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   scrollToTop: false,

resources/js/pages/settings/workspace.vue

@@ -75,7 +75,7 @@
 <script>
 import Form from 'vform'
 import {mapActions, mapState} from 'vuex'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   components: {},

resources/js/pages/subscriptions/error.vue

@@ -2,7 +2,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import SeoMeta from '../../mixins/seo-meta'
+import SeoMeta from '../../mixins/seo-meta.js'
 
 export default {
   components: { },