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:
parent
b9d50bc096
commit
970893329b
|
@ -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
|
||||||
|
|
|
@ -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!
|
||||||
|
|
|
@ -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",
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
31
package.json
31
package.json
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
|
@ -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)
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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',
|
||||||
|
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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')
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
||||||
|
|
|
@ -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',
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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'))
|
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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'))
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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},
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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},
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { themes } from '~/config/form-themes'
|
import { themes } from '~/config/form-themes.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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('&')
|
||||||
|
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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},
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
|
@ -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},
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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},
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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: { },
|
||||||
|
|
|
@ -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 },
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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: {},
|
||||||
|
|
|
@ -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: { },
|
||||||
|
|
|
@ -17,8 +17,8 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from 'vuex'
|
||||||
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 },
|
||||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue