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>
This commit is contained in:
Chirag 2023-01-21 17:27:37 +05:30 committed by GitHub
parent b9d50bc096
commit 970893329b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
488 changed files with 1397 additions and 10491 deletions

1
.gitignore vendored
View File

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

View File

@ -55,7 +55,7 @@ git clone git@github.com:JhumanJ/OpnForm.git && cd OpnForm
composer install && npm install composer install && npm install
# Compile assets (see the scripts section in package.json) # 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! 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!

View File

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

10142
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,14 +1,8 @@
{ {
"private": true, "private": true,
"scripts": { "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": { "dependencies": {
"@hcaptcha/vue-hcaptcha": "^0.3.2", "@hcaptcha/vue-hcaptcha": "^0.3.2",
@ -16,7 +10,6 @@
"@sentry/vue": "^6.11.0", "@sentry/vue": "^6.11.0",
"axios": "^0.21.1", "axios": "^0.21.1",
"chart.js": "^3.7.1", "chart.js": "^3.7.1",
"cleave.js": "^1.6.0",
"clone-deep": "^4.0.1", "clone-deep": "^4.0.1",
"date-fns": "^2.28.0", "date-fns": "^2.28.0",
"debounce": "^1.2.1", "debounce": "^1.2.1",
@ -46,29 +39,29 @@
"vuex-router-sync": "^5.0.0" "vuex-router-sync": "^5.0.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.15.0", "@babel/core": "^7.20.12",
"@babel/eslint-parser": "^7.15.0", "@babel/eslint-parser": "^7.15.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.15.0", "@babel/preset-env": "^7.15.0",
"@tailwindcss/aspect-ratio": "^0.4.2", "@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", "cross-env": "^7.0.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3", "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-node": "^11.1.0",
"eslint-plugin-promise": "^4.3.1", "eslint-plugin-promise": "^4.3.1",
"eslint-plugin-standard": "^4.1.0", "eslint-plugin-standard": "^4.1.0",
"eslint-plugin-vue": "^7.16.0", "eslint-plugin-vue": "^7.16.0",
"imagemin-webpack-plugin": "^2.4.2", "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", "sass-loader": "^10.2.0",
"tailwindcss": "^3.2.0", "tailwindcss": "^3.2.4",
"vite": "^4.0.4",
"vue-loader": "^15.9.8", "vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
} }

6
postcss.config.js vendored Normal file
View File

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

8
resources/js/app.js vendored
View File

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

View File

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

View File

@ -38,26 +38,25 @@
</template> </template>
<script> <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. // 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 => .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 { export default {
el: '#app', el: '#app',

View File

@ -18,8 +18,8 @@
<script> <script>
import { mapGetters } from 'vuex' 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 { export default {
components: { Dropdown }, components: { Dropdown },

View File

@ -132,9 +132,8 @@
<script> <script>
import {mapGetters} from 'vuex' 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 { export default {
components: { components: {

View File

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

View File

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

View File

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

View File

@ -1,8 +1,8 @@
import Vue from 'vue' 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. // Components that are registered globaly.
[ [
Card, Card,

View File

@ -13,9 +13,9 @@
</template> </template>
<script> <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 { export default {
name: 'CheckboxInput', name: 'CheckboxInput',

View File

@ -32,7 +32,7 @@ import { highlight, languages } from 'prismjs/components/prism-core'
import 'prismjs/components/prism-clike' import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-markup' import 'prismjs/components/prism-markup'
import 'prismjs/themes/prism-tomorrow.css' // import syntax highlighting styles 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 { export default {
name: 'CodeInput', name: 'CodeInput',

View File

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

View File

@ -6,15 +6,28 @@
{{ label }} {{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span> <span v-if="required" class="text-red-500 required-dot">*</span>
</label> </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"> <small v-if="help" :class="theme.default.help">
<slot name="help">{{ help }}</slot> <slot name="help">{{ help }}</slot>
</small> </small>
@ -23,91 +36,8 @@
</template> </template>
<script> <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 { export default {
name: 'DateInput', name: 'DateInput',
@ -116,18 +46,35 @@ export default {
props: { props: {
withTime: {type: Boolean, default: false}, withTime: {type: Boolean, default: false},
dateRange: {type: Boolean, default: false}, dateRange: {type: Boolean, default: false},
amPm: {type: Boolean, default: false},
disablePastDates: {type: Boolean, default: false}, disablePastDates: {type: Boolean, default: false},
disableFutureDates: {type: Boolean, default: false} disableFutureDates: {type: Boolean, default: false}
}, },
data: () => ({ data: () => ({
fixedClasses: fixedClasses fixedClasses: fixedClasses,
fromDate: null,
toDate: null
}), }),
computed: { 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() { useTime() {
return this.withTime && !this.dateRange 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() this.setInputColor()
}, },
immediate: true 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() { 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 fixedClasses.input = this.theme.default.input
this.setInputColor() this.setInputColor()
}, },
@ -160,15 +140,6 @@ export default {
const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0] const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0]
dateInput.style.setProperty('--tw-ring-color', this.color) 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;
} }
} }
} }

View File

@ -139,8 +139,8 @@
</template> </template>
<script> <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 { export default {
name: 'FileInput', name: 'FileInput',

View File

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

View File

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

View File

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

View File

@ -21,7 +21,7 @@
<script> <script>
import { VueEditor, Quill } from 'vue2-editor' 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') Quill.imports['formats/link'].PROTOCOL_WHITELIST.push('notion')

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -12,9 +12,9 @@
</template> </template>
<script> <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 { export default {
name: 'ToggleSwitchInput', name: 'ToggleSwitchInput',

View File

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

View File

@ -1,20 +1,20 @@
import Vue from 'vue' import Vue from 'vue'
import HasError from './validation/HasError.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. // Components that are registered globaly.
[ [
@ -38,7 +38,6 @@ import ToggleSwitchInput from './ToggleSwitchInput'
}) })
// Lazy load some heavy component // 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'))

View File

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

View File

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

View File

@ -2,10 +2,10 @@ import './common'
import './forms' import './forms'
import Vue from 'vue' 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. // Components that are registered globaly.
[ [
@ -17,5 +17,5 @@ import Loader from './common/Loader'
}) })
// Lazy load some heavy component // 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'))

View File

@ -122,12 +122,12 @@
<script> <script>
import Form from 'vform' 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 { export default {
components: { VTransition, VButton, OpenFormButton, OpenForm }, components: { VTransition, VButton, OpenFormButton, OpenForm },

View File

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

View File

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

View File

@ -54,17 +54,17 @@
<script> <script>
import {mapGetters} from 'vuex' 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 { export default {
name: 'FormEditor', name: 'FormEditor',

View File

@ -161,13 +161,13 @@
<script> <script>
import draggable from 'vuedraggable' 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 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 { export default {
name: 'FormFieldsEditor', name: 'FormFieldsEditor',

View File

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

View File

@ -62,10 +62,10 @@
<script> <script>
import axios from 'axios' 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 clonedeep from "clone-deep";
import VSwitch from '../../../forms/components/VSwitch' import VSwitch from '../../../forms/components/VSwitch.vue'
export default { export default {
name: 'FormSubmissions', name: 'FormSubmissions',

View File

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

View File

@ -149,9 +149,9 @@
</template> </template>
<script> <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 { export default {
components: {Collapse, ProTag, VTransition}, components: {Collapse, ProTag, VTransition},

View File

@ -26,9 +26,9 @@
</template> </template>
<script> <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 { export default {
components: { Collapse, ProTag, CodeInput }, components: { Collapse, ProTag, CodeInput },

View File

@ -75,8 +75,8 @@
</template> </template>
<script> <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 { export default {
components: { Collapse, ProTag }, components: { Collapse, ProTag },

View File

@ -62,8 +62,8 @@
</template> </template>
<script> <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 { export default {
components: { OpenCompleteForm, VSwitch }, components: { OpenCompleteForm, VSwitch },

View File

@ -70,8 +70,8 @@
</template> </template>
<script> <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 { mapState } from 'vuex'
import clonedeep from 'clone-deep' import clonedeep from 'clone-deep'

View File

@ -41,8 +41,8 @@
</template> </template>
<script> <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 { export default {
components: {Collapse, ProTag}, components: {Collapse, ProTag},

View File

@ -20,11 +20,11 @@
</template> </template>
<script> <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 { export default {
components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsOption, Collapse, ProTag }, components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsOption, Collapse, ProTag },

View File

@ -25,8 +25,8 @@
</template> </template>
<script> <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 { export default {
components: { Collapse, ProTag }, components: { Collapse, ProTag },

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -66,10 +66,10 @@
</template> </template>
<script> <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' import clonedeep from 'clone-deep'
export default { export default {

View File

@ -139,9 +139,9 @@
</template> </template>
<script> <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 { export default {
name: 'FormBlockOptionsModal', name: 'FormBlockOptionsModal',

View File

@ -150,15 +150,6 @@
<p class="text-gray-400 mb-5"> <p class="text-gray-400 mb-5">
Include time. Or not. This cannot be used with the date range option yet. Include time. Or not. This cannot be used with the date range option yet.
</p> </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" <select-input v-if="field.with_time" name="timezone" class="mt-4"
:form="field" :options="timezonesOptions" :form="field" :options="timezonesOptions"
@ -188,18 +179,6 @@
> >
Disable future dates Disable future dates
</v-checkbox> </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> </div>
<!-- select/multiselect Options --> <!-- select/multiselect Options -->
@ -264,7 +243,7 @@
:multiple="field.type==='multi_select'" :multiple="field.type==='multi_select'"
/> />
<date-input v-else-if="field.type==='date' && field.prefill_today!==true" name="prefill" class="mt-4" <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" :date-range="field.date_range===true"
label="Pre-filled value" label="Pre-filled value"
/> />
@ -370,10 +349,10 @@
<script> <script>
import timezones from '../../../../../data/timezones.json' 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 { export default {
name: 'FormFieldOptionsModal', name: 'FormFieldOptionsModal',
@ -432,16 +411,6 @@ export default {
return option.name return option.name
}).join("\n") }).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: {}, watch: {},
@ -495,7 +464,6 @@ export default {
}, },
onFieldWithTimeChange(val) { onFieldWithTimeChange(val) {
this.$set(this.field, 'with_time', val) this.$set(this.field, 'with_time', val)
this.$set(this.field, 'use_am_pm', false)
if (this.field.with_time) { if (this.field.with_time) {
this.$set(this.field, 'date_range', false) this.$set(this.field, 'date_range', false)
this.$set(this.field, 'simple_date_input', false) this.$set(this.field, 'simple_date_input', false)

View File

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

View File

@ -72,13 +72,13 @@
</template> </template>
<script> <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' import clonedeep from 'clone-deep'
const cyrb53 = function (str, seed = 0) { const cyrb53 = function (str, seed = 0) {

View File

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

View File

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

View File

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

View File

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

View File

@ -124,8 +124,8 @@
<script> <script>
import axios from 'axios' import axios from 'axios'
import {mapGetters, mapState} from 'vuex' 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 { export default {
name: 'ExtraMenu', name: 'ExtraMenu',

View File

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

View File

@ -66,10 +66,10 @@
</template> </template>
<script> <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 { export default {
name: 'UrlFormPrefill', name: 'UrlFormPrefill',

View File

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

View File

@ -19,8 +19,8 @@
</template> </template>
<script> <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 { export default {
name: 'MainLayout', name: 'MainLayout',

View File

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

View File

@ -39,9 +39,9 @@
<script> <script>
import Form from 'vform' import Form from 'vform'
import Cookies from 'js-cookie' 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 { export default {
name: 'LoginForm', name: 'LoginForm',

View File

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

View File

@ -44,9 +44,9 @@
<script> <script>
import Form from 'vform' 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 { export default {
name: 'RegisterForm', name: 'RegisterForm',

View File

@ -56,10 +56,10 @@
</template> </template>
<script> <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 { export default {
components: { components: {

View File

@ -24,8 +24,8 @@
<script> <script>
import Form from 'vform' 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 { export default {
middleware: 'guest', middleware: 'guest',

View File

@ -34,8 +34,8 @@
<script> <script>
import Form from 'vform' 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 { export default {
middleware: 'guest', middleware: 'guest',

View File

@ -56,10 +56,10 @@
</template> </template>
<script> <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 { export default {
components: { components: {

View File

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

View File

@ -28,7 +28,7 @@
<script> <script>
import axios from 'axios' 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('&') const qs = (params) => Object.keys(params).map(key => `${key}=${params[key]}`).join('&')

View File

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

View File

@ -27,9 +27,9 @@
import store from '~/store' import store from '~/store'
import Form from 'vform' import Form from 'vform'
import {mapState, mapActions} from 'vuex' 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 () { const loadTemplates = function () {
store.commit('open/templates/startLoading') store.commit('open/templates/startLoading')

View File

@ -21,8 +21,8 @@
import store from '~/store' import store from '~/store'
import Form from 'vform' import Form from 'vform'
import {mapState, mapActions} from 'vuex' 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 () { const loadTemplates = function () {
store.commit('open/templates/startLoading') store.commit('open/templates/startLoading')

View File

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

View File

@ -43,10 +43,10 @@
import axios from 'axios' import axios from 'axios'
import store from '~/store' import store from '~/store'
import { mapState } from 'vuex' 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 Cookies from 'js-cookie'
import sha256 from 'js-sha256' 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 const isFrame = window.location !== window.parent.location || window.frameElement

View File

@ -8,8 +8,8 @@
</template> </template>
<script> <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 { export default {
components: {FormStats}, components: {FormStats},

View File

@ -104,10 +104,10 @@ import axios from 'axios'
import store from '~/store' import store from '~/store'
import Form from 'vform' import Form from 'vform'
import {mapGetters, mapState} from 'vuex' 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 () { const loadForms = function () {
store.commit('open/forms/startLoading') store.commit('open/forms/startLoading')

View File

@ -13,11 +13,11 @@
</template> </template>
<script> <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 { export default {
components: { components: {

View File

@ -5,8 +5,8 @@
</template> </template>
<script> <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 { export default {
components: {FormSubmissions}, components: {FormSubmissions},

View File

@ -96,9 +96,9 @@ import store from '~/store'
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState } from 'vuex'
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import Form from 'vform' 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 () { const loadForms = function () {
store.commit('open/forms/startLoading') store.commit('open/forms/startLoading')

View File

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

View File

@ -13,8 +13,8 @@
</template> </template>
<script> <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 { export default {
components: { OpenFormFooter}, components: { OpenFormFooter},

View File

@ -13,8 +13,8 @@
</template> </template>
<script> <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 { export default {
components: { OpenFormFooter }, components: { OpenFormFooter },

View File

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

View File

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

View File

@ -16,8 +16,8 @@
<script> <script>
import axios from 'axios' 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 { export default {
components: { VButton }, components: { VButton },

View File

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

View File

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

View File

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

View File

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

Some files were not shown because too many files have changed in this diff Show More