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>

resources/js/components/forms/CheckboxInput.vue

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

resources/js/components/forms/CodeInput.vue

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

resources/js/components/forms/ColorInput.vue

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

resources/js/components/forms/DateInput.vue

@@ -6,15 +6,28 @@
       {{ label }}
       <span v-if="required" class="text-red-500 required-dot">*</span>
     </label>
-    <t-datepicker :id="id?id:name" ref="datepicker" v-model="compVal" class="datepicker" :disabled="disabled"
-                  :class="{ 'ring-red-500 ring-2': hasValidation && form.errors.has(name), 'cursor-not-allowed bg-gray-200':disabled }"
-                  :style="inputStyle" :name="name" :fixed-classes="fixedClasses" :range="dateRange"
-                  :placeholder="placeholder" :timepicker="useTime"
-                  :date-format="useTime?'Z':'Y-m-d'"
-                  :user-format="useTime ? amPm ? 'F j, Y - G:i K' : 'F j, Y - H:i' : 'F j, Y'"
-                  :amPm="amPm"
-                  :disabled-dates="disabledDates"
-    />
+
+    <div class="flex" v-if="!dateRange">
+      <input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :class="inputClasses" :disabled="disabled"
+          :style="inputStyle" :name="name" data-date-format="YYYY-MM-DD"
+          :min="setMinDate" :max="setMaxDate"
+      />
+    </div>
+    <div :class="inputClasses" v-else>
+      <div class="flex -mx-2">
+      <p class="text-gray-900 px-4">From</p>
+      <input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :disabled="disabled"
+             :style="inputStyle" :name="name" data-date-format="YYYY-MM-DD" class="flex-grow border-transparent focus:outline-none "
+             :min="setMinDate" :max="setMaxDate"
+      />
+      <p class="text-gray-900 px-4">To</p>
+      <input v-if="dateRange" :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="toDate" :disabled="disabled"
+             :style="inputStyle" :name="name" class="flex-grow border-transparent focus:outline-none"
+             :min="setMinDate" :max="setMaxDate"
+      />
+      </div>
+    </div>
+
     <small v-if="help" :class="theme.default.help">
       <slot name="help">{{ help }}</slot>
     </small>
@@ -23,91 +36,8 @@
 </template>
 
 <script>
-import {fixedClasses} from '../../plugins/config/vue-tailwind/datePicker'
-import inputMixin from '~/mixins/forms/input'
-
-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)
+import {fixedClasses} from '../../plugins/config/vue-tailwind/datePicker.js'
+import inputMixin from '~/mixins/forms/input.js'
 
 export default {
   name: 'DateInput',
@@ -116,18 +46,35 @@ export default {
   props: {
     withTime: {type: Boolean, default: false},
     dateRange: {type: Boolean, default: false},
-    amPm: {type: Boolean, default: false},
     disablePastDates: {type: Boolean, default: false},
     disableFutureDates: {type: Boolean, default: false}
   },
 
   data: () => ({
-    fixedClasses: fixedClasses
+    fixedClasses: fixedClasses,
+    fromDate: null,
+    toDate: null
   }),
 
   computed: {
+    inputClasses (){
+      const str = 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700'
+      return this.dateRange ? str + ' w-50' : str + ' w-full'
+    },
     useTime() {
       return this.withTime && !this.dateRange
+    },
+    setMinDate () {
+      if (this.disablePastDates) {
+        return new Date().toISOString().split('T')[0]
+      }
+      return false
+    },
+    setMaxDate () {
+      if (this.disableFutureDates) {
+        return new Date().toISOString().split('T')[0]
+      }
+      return false
     }
   },
 
@@ -137,10 +84,43 @@ export default {
         this.setInputColor()
       },
       immediate: true
+    },
+    fromDate: {
+      handler(val) {
+        this.toDate = null
+        if(val){
+          this.compVal = (this.dateRange) ? [val] : val
+        }else{
+          this.compVal = null
+        }
+      },
+      immediate: true
+    },
+    toDate: {
+      handler(val) {
+        if(this.dateRange && val){
+          if(!Array.isArray(this.compVal)){
+            this.compVal = [null];
+          }
+          this.compVal[1] = val ?? null
+        }else{
+          this.compVal = null
+        }
+      },
+      immediate: true
     }
   },
 
   mounted() {
+    if(this.compVal){
+      if(Array.isArray(this.compVal)){
+        this.fromDate = this.compVal[0] ?? null
+        this.toDate = this.compVal[1] ?? null
+      }else{
+        this.fromDate = this.compVal
+      }
+    }
+
     fixedClasses.input = this.theme.default.input
     this.setInputColor()
   },
@@ -160,15 +140,6 @@ export default {
         const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0]
         dateInput.style.setProperty('--tw-ring-color', this.color)
       }
-    },
-    disabledDates(date) {
-      const today = new Date()
-      if (this.disablePastDates) {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate()) < new Date(today.getFullYear(), today.getMonth(), today.getDate())
-      } else if (this.disableFutureDates) {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate()) > new Date(today.getFullYear(), today.getMonth(), today.getDate())
-      }
-      return false;
     }
   }
 }

resources/js/components/forms/FileInput.vue

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

resources/js/components/forms/FlatSelectInput.vue

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

resources/js/components/forms/ImageInput.vue

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

resources/js/components/forms/RatingInput.vue

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

resources/js/components/forms/RichTextAreaInput.vue

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

resources/js/components/forms/SelectInput.vue

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

resources/js/components/forms/SignatureInput.vue

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

resources/js/components/forms/SimpleDateInput.vue

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

resources/js/components/forms/TextAreaInput.vue

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

resources/js/components/forms/TextInput.vue

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

resources/js/components/forms/ToggleSwitchInput.vue

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

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

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

resources/js/components/forms/index.js

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

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

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

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

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