Merge branch 'vue-3' into vue-3

JhumanJ · Dec 1, 2023 · 49abf43 · 49abf43
2 parents 0466978 + 0eea59c
commit 49abf43
Show file tree

Hide file tree

Showing 33 changed files with 285 additions and 383 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "vue-signature-pad": "^3.0.2",
     "vue3-editor": "^0.1.1",
     "vue3-vt-notifications": "^1.0.0",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "next"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

diff --git a/resources/js/components/common/Button.vue b/resources/js/components/common/Button.vue
@@ -2,7 +2,7 @@
   <a v-if="href" :class="btnClasses" :href="href" :target="target">
     <slot />
   </a>
-  <button v-else-if="!to" :type="nativeType" :disabled="loading" :class="btnClasses"
+  <button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses"
           @click="onClick($event)"
   >
     <template v-if="!loading">

diff --git a/resources/js/components/forms/CheckboxInput.vue b/resources/js/components/forms/CheckboxInput.vue
@@ -1,10 +1,10 @@
 <template>
-  <input-wrapper v-bind="$props">
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <span />
     </template>
 
-    <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name">
+    <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled?true:null" :name="name">
       <slot name="label">
         {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
       </slot>
@@ -34,18 +34,8 @@ export default {
   },
 
   setup (props, context) {
-    const {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
-    } = useFormInput(props, context)
-
     return {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
+      ...useFormInput(props, context)
     }
   },
 

diff --git a/resources/js/components/forms/CodeInput.vue b/resources/js/components/forms/CodeInput.vue
@@ -1,6 +1,6 @@
 <template>
   <input-wrapper
-    v-bind="$props"
+    v-bind="inputWrapperProps"
   >
     <template #label>
       <slot name="label" />
@@ -13,7 +13,7 @@
     <div
       :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
     >
-      <codemirror :id="id?id:name" v-model="compVal" :disabled="disabled"
+      <codemirror :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
                   :options="cmOptions"
                   :style="inputStyle" :name="name"
                   :placeholder="placeholder"
@@ -44,18 +44,8 @@ export default {
   },
 
   setup (props, context) {
-    const {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
-    } = useFormInput(props, context)
-
     return {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
+      ...useFormInput(props, context)
     }
   },
 

diff --git a/resources/js/components/forms/ColorInput.vue b/resources/js/components/forms/ColorInput.vue
@@ -1,11 +1,11 @@
 <template>
-  <input-wrapper v-bind="$props">
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <span />
     </template>
 
     <div class="flex items-center">
-      <input :id="id?id:name" v-model="compVal" :disabled="disabled"
+      <input :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
              type="color" class="mr-2"
              :name="name"
       >
@@ -37,13 +37,8 @@ export default {
   },
 
   setup (props, context) {
-    const { compVal, inputStyle, hasValidation, hasError } = useFormInput(props, context)
-
     return {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
+      ...useFormInput(props, context)
     }
   }
 }

diff --git a/resources/js/components/forms/DateInput.vue b/resources/js/components/forms/DateInput.vue
@@ -1,32 +1,36 @@
 <template>
   <input-wrapper
-    v-bind="$props"
+    v-bind="inputWrapperProps"
   >
     <template #label>
       <slot name="label" />
     </template>
 
-    <div class="flex" v-if="!dateRange">
-      <input :type="useTime ? 'datetime-local' : 'date'" :id="id?id:name" v-model="fromDate" :class="inputClasses"
-             :disabled="disabled"
+    <div v-if="!dateRange" class="flex">
+      <input :id="id?id:name" v-model="fromDate" :type="useTime ? 'datetime-local' : 'date'" :class="inputClasses"
+             :disabled="disabled?true:null"
              :style="inputStyle" :name="name" data-date-format="YYYY-MM-DD"
              :min="setMinDate" :max="setMaxDate"
-      />
+      >
     </div>
-    <div :class="inputClasses" v-else>
+    <div v-else :class="inputClasses">
       <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"
+        <p class="text-gray-900 px-4">
+          From
+        </p>
+        <input :id="id?id:name" v-model="fromDate" :type="useTime ? 'datetime-local' : 'date'" :disabled="disabled?true:null"
                :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"
+        >
+        <p class="text-gray-900 px-4">
+          To
+        </p>
+        <input v-if="dateRange" :id="id?id:name" v-model="toDate" :type="useTime ? 'datetime-local' : 'date'"
+               :disabled="disabled?true:null"
                :style="inputStyle" :name="name" class="flex-grow border-transparent focus:outline-none"
                :min="setMinDate" :max="setMaxDate"
-        />
+        >
       </div>
     </div>
 
@@ -42,7 +46,7 @@
 <script>
 import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
-import {fixedClasses} from '../../plugins/config/vue-tailwind/datePicker.js'
+import { fixedClasses } from '../../plugins/config/vue-tailwind/datePicker.js'
 
 export default {
   name: 'DateInput',
@@ -51,25 +55,15 @@ export default {
 
   props: {
     ...inputProps,
-    withTime: {type: Boolean, default: false},
-    dateRange: {type: Boolean, default: false},
-    disablePastDates: {type: Boolean, default: false},
-    disableFutureDates: {type: Boolean, default: false}
+    withTime: { type: Boolean, default: false },
+    dateRange: { type: Boolean, default: false },
+    disablePastDates: { type: Boolean, default: false },
+    disableFutureDates: { type: Boolean, default: false }
   },
 
   setup (props, context) {
-    const {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
-    } = useFormInput(props, context)
-
     return {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
+      ...useFormInput(props, context)
     }
   },
 
@@ -80,22 +74,22 @@ export default {
   }),
 
   computed: {
-    inputClasses() {
+    inputClasses () {
       let 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'
       str += this.dateRange ? ' w-50' : ' w-full'
       str += this.disabled ? ' !cursor-not-allowed !bg-gray-200' : ''
       return str
     },
-    useTime() {
+    useTime () {
       return this.withTime && !this.dateRange
     },
-    setMinDate() {
+    setMinDate () {
       if (this.disablePastDates) {
         return new Date().toISOString().split('T')[0]
       }
       return false
     },
-    setMaxDate() {
+    setMaxDate () {
       if (this.disableFutureDates) {
         return new Date().toISOString().split('T')[0]
       }
@@ -105,16 +99,16 @@ export default {
 
   watch: {
     color: {
-      handler() {
+      handler () {
         this.setInputColor()
       },
       immediate: true
     },
     fromDate: {
-      handler(val) {
+      handler (val) {
         if (this.dateRange) {
           if (!Array.isArray(this.compVal)) {
-            this.compVal = [];
+            this.compVal = []
           }
           this.compVal[0] = this.dateToUTC(val)
         } else {
@@ -124,10 +118,10 @@ export default {
       immediate: false
     },
     toDate: {
-      handler(val) {
+      handler (val) {
         if (this.dateRange) {
           if (!Array.isArray(this.compVal)) {
-            this.compVal = [null];
+            this.compVal = [null]
           }
           this.compVal[1] = this.dateToUTC(val)
         } else {
@@ -138,7 +132,7 @@ export default {
     }
   },
 
-  mounted() {
+  mounted () {
     if (this.compVal) {
       if (Array.isArray(this.compVal)) {
         this.fromDate = this.compVal[0] ?? null
@@ -158,17 +152,17 @@ export default {
      * @param event
      * @returns {boolean}
      */
-    onEnterPress(event) {
+    onEnterPress (event) {
       event.preventDefault()
       return false
     },
-    setInputColor() {
+    setInputColor () {
       if (this.$refs.datepicker) {
         const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0]
         dateInput.style.setProperty('--tw-ring-color', this.color)
       }
     },
-    dateToUTC(val) {
+    dateToUTC (val) {
       if (!val) {
         return null
       }
@@ -177,7 +171,7 @@ export default {
       }
       return new Date(val).toISOString()
     },
-    dateToLocal(val) {
+    dateToLocal (val) {
       if (!val) {
         return null
       }
@@ -187,7 +181,7 @@ export default {
         String(dateObj.getDate()).padStart(2, '0')
       if (this.useTime) {
         dateStr += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
-          String(dateObj.getMinutes()).padStart(2, '0');
+          String(dateObj.getMinutes()).padStart(2, '0')
       }
       return dateStr
     }

diff --git a/resources/js/components/forms/FileInput.vue b/resources/js/components/forms/FileInput.vue
@@ -1,6 +1,6 @@
 <template>
   <input-wrapper
-    v-bind="$props"
+    v-bind="inputWrapperProps"
   >
     <template #label>
       <slot name="label" />
@@ -94,18 +94,8 @@ export default {
   },
 
   setup (props, context) {
-    const {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
-    } = useFormInput(props, context)
-
     return {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
+      ...useFormInput(props, context)
     }
   },
 

diff --git a/resources/js/components/forms/FlatSelectInput.vue b/resources/js/components/forms/FlatSelectInput.vue
@@ -1,6 +1,6 @@
 <template>
   <input-wrapper
-    v-bind="$props"
+    v-bind="inputWrapperProps"
   >
     <template #label>
       <slot name="label" />
@@ -51,18 +51,8 @@ export default {
     multiple: { type: Boolean, default: false }
   },
   setup (props, context) {
-    const {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
-    } = useFormInput(props, context)
-
     return {
-      compVal,
-      inputStyle,
-      hasValidation,
-      hasError
+      ...useFormInput(props, context)
     }
   },
   data () {
@@ -71,10 +61,10 @@ export default {
   computed: {},
   methods: {
     onSelect (value) {
-      if(this.disabled){
+      if (this.disabled) {
         return
       }
-      
+
       if (this.multiple) {
         const emitValue = Array.isArray(this.compVal) ? [...this.compVal] : []