Merge branch 'vue-3' into vue-3

2023-12-02 01:54:48 +05:30
parent 0466978a6e 0eea59c5ba
commit 49abf435a6
33 changed files with 285 additions and 383 deletions
--- a/resources/js/components/open/forms/OpenFormButton.vue
+++ b/resources/js/components/open/forms/OpenFormButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button :type="nativeType" :disabled="loading" :class="`py-${sizes['p-y']} px-${sizes['p-x']} text-${sizes['font']} ${theme.Button.body}`" :style="buttonStyle"
+  <button :type="nativeType" :disabled="loading?true:null" :class="`py-${sizes['p-y']} px-${sizes['p-x']} text-${sizes['font']} ${theme.Button.body}`" :style="buttonStyle"
          class="btn" @click="$emit('click',$event)"
  >
    <template v-if="!loading">
--- a/resources/js/components/open/forms/OpenFormField.vue
+++ b/resources/js/components/open/forms/OpenFormField.vue
@@ -12,8 +12,9 @@
               @click.prevent="openAddFieldSidebar"
          >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
-                 stroke="currentColor" class="w-5 h-5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+                 stroke="currentColor" class="w-5 h-5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
            </svg>
          </div>
          <div class="p-2 text-gray-300 hover:text-blue-500 cursor-pointer" role="button"
@@ -50,7 +51,7 @@
      </div>
      <component :is="getFieldComponents" v-if="getFieldComponents"
                 v-bind="inputProperties(field)" :required="isFieldRequired"
-                 :disabled="isFieldDisabled"
+                 :disabled="isFieldDisabled?true:null"
      />
      <template v-else>
        <div v-if="field.type === 'nf-text' && field.content" :id="field.id" :key="field.id"
@@ -79,7 +80,7 @@

 <script>
 import { computed } from 'vue'
-import { useWorkingFormStore } from '../../../stores/working_form';
+import { useWorkingFormStore } from '../../../stores/working_form'
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'

@@ -112,24 +113,24 @@ export default {
      type: Object,
      required: true
    },
-    adminPreview: {type: Boolean, default: false} // If used in FormEditorPreview
+    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
  },

  setup () {
    const workingFormStore = useWorkingFormStore()
    return {
      workingFormStore,
-      selectedFieldIndex : computed(() => workingFormStore.selectedFieldIndex),
-      showEditFieldSidebar : computed(() => workingFormStore.showEditFieldSidebar)
+      selectedFieldIndex: computed(() => workingFormStore.selectedFieldIndex),
+      showEditFieldSidebar: computed(() => workingFormStore.showEditFieldSidebar)
    }
  },

-  data() {
+  data () {
    return {}
  },

  computed: {
-    fieldComponents() {
+    fieldComponents () {
      return {
        text: 'TextInput',
        number: 'TextInput',
@@ -146,7 +147,7 @@ export default {
    /**
     * Get the right input component for the field/options combination
     */
-    getFieldComponents() {
+    getFieldComponents () {
      const field = this.field
      if (field.type === 'text' && field.multi_lines) {
        return 'TextAreaInput'
@@ -174,27 +175,27 @@ export default {
      }
      return this.fieldComponents[field.type]
    },
-    isPublicFormPage() {
+    isPublicFormPage () {
      return this.$route.name === 'forms.show_public'
    },
-    isFieldHidden() {
+    isFieldHidden () {
      return !this.showHidden && this.shouldBeHidden
    },
-    shouldBeHidden() {
+    shouldBeHidden () {
      return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isHidden()
    },
-    isFieldRequired() {
+    isFieldRequired () {
      return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isRequired()
    },
-    isFieldDisabled() {
+    isFieldDisabled () {
      return (new FormLogicPropertyResolver(this.field, this.dataFormValue)).isDisabled()
    },
-    beingEdited() {
+    beingEdited () {
      return this.adminPreview && this.showEditFieldSidebar && this.form.properties.findIndex((item) => {
        return item.id === this.field.id
      }) === this.selectedFieldIndex
    },
-    selectionFieldsOptions() {
+    selectionFieldsOptions () {
      // For auto update hidden options
      let fieldsOptions = []

@@ -209,27 +210,27 @@ export default {

      return fieldsOptions
    },
-    fieldSideBarOpened() {
+    fieldSideBarOpened () {
      return this.adminPreview && (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
    }
  },

  watch: {},

-  mounted() {
+  mounted () {
  },

  methods: {
-    editFieldOptions() {
+    editFieldOptions () {
      this.workingFormStore.openSettingsForField(this.field)
    },
-    openAddFieldSidebar() {
+    openAddFieldSidebar () {
      this.workingFormStore.openAddFieldSidebar(this.field)
    },
    /**
     * Get the right input component for the field/options combination
     */
-    getFieldClasses() {
+    getFieldClasses () {
      let classes = ''
      if (this.adminPreview) {
        classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative transition-colors'
@@ -240,7 +241,7 @@ export default {
      }
      return classes
    },
-    getFieldWidthClasses(field) {
+    getFieldWidthClasses (field) {
      if (!field.width || field.width === 'full') return 'w-full px-2'
      else if (field.width === '1/2') {
        return 'w-full sm:w-1/2 px-2'
@@ -254,7 +255,7 @@ export default {
        return 'w-full sm:w-3/4 px-2'
      }
    },
-    getFieldAlignClasses(field) {
+    getFieldAlignClasses (field) {
      if (!field.align || field.align === 'left') return 'text-left'
      else if (field.align === 'right') {
        return 'text-right'
@@ -267,7 +268,7 @@ export default {
    /**
     * Get the right input component options for the field/options
     */
-    inputProperties(field) {
+    inputProperties (field) {
      const inputProperties = {
        key: field.id,
        name: field.id,
@@ -277,7 +278,7 @@ export default {
        placeholder: field.placeholder,
        help: field.help,
        helpPosition: (field.help_position) ? field.help_position : 'below_input',
-        uppercaseLabels: this.form.uppercase_labels  == 1 || this.form.uppercase_labels == true,
+        uppercaseLabels: this.form.uppercase_labels == 1 || this.form.uppercase_labels == true,
        theme: this.theme,
        maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
        showCharLimit: field.show_char_limit || false
@@ -309,7 +310,7 @@ export default {
      } else if (field.type === 'files' || (field.type === 'url' && field.file_upload)) {
        inputProperties.multiple = (field.multiple !== undefined && field.multiple)
        inputProperties.mbLimit = 5
-        inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ""
+        inputProperties.accept = (this.form.is_pro && field.allowed_file_types) ? field.allowed_file_types : ''
      } else if (field.type === 'number' && field.is_rating) {
        inputProperties.numberOfStars = parseInt(field.rating_max_value)
      } else if (field.type === 'number' && field.is_scale) {
@@ -323,7 +324,7 @@ export default {
      }

      return inputProperties
-    },
+    }
  }
 }
 </script>
--- a/resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue
+++ b/resources/js/components/open/forms/components/AdvancedFormUrlSettings.vue
@@ -11,7 +11,7 @@
    </template>
    <toggle-switch-input :value="value.hide_title" name="hide_title" class="mt-4"
                         label="Hide Form Title"
-                         :disabled="form.hide_title===true"
+                         :disabled="(form.hide_title===true)?true:null"
                         :help="hideTitleHelp"
                         @update:model-value="onChangeHideTitle"
    />
--- a/resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue
+++ b/resources/js/components/open/forms/components/form-components/components/FormNotificationsSubmissionConfirmation.vue
@@ -27,7 +27,7 @@
        Submission confirmation
        <pro-tag />
      </h2>
-      <toggle-switch-input :disabled="emailSubmissionConfirmationField===null" name="send_submission_confirmation"
+      <toggle-switch-input :disabled="(emailSubmissionConfirmationField===null)?true:null" name="send_submission_confirmation"
                           :form="form" class="mt-4"
                           label="Send submission confirmation" :help="emailSubmissionConfirmationHelp"
      />
--- a/resources/js/components/open/forms/components/form-logic-components/ColumnCondition.vue
+++ b/resources/js/components/open/forms/components/form-logic-components/ColumnCondition.vue
@@ -10,8 +10,8 @@
    />

    <template v-if="hasInput">
-      <component :is="inputComponentData.component" v-model="content.value" class="w-full"
-                 :name="'value_'+property.id" v-bind="inputComponentData" placeholder="Filter Value"
+      <component v-bind="inputComponentData" :is="inputComponentData.component" v-model="content.value" class="w-full"
+                 :name="'value_'+property.id" placeholder="Filter Value"
                 @input="$emit('input',castContent(content))"
      />
    </template>
@@ -62,7 +62,7 @@ export default {
      }

      if (['select', 'multi_select'].includes(this.property.type)) {
-        componentData.multiple = false;
+        componentData.multiple = false
        componentData.options = this.property[this.property.type].options.map(option => {
          return {
            name: option.name,
@@ -97,7 +97,7 @@ export default {

    this.content.property_meta = {
      id: this.property.id,
-      type: this.property.type,
+      type: this.property.type
    }
    this.isMounted = true
  },
--- a/resources/js/components/open/forms/components/form-logic-components/GroupControlSlot.vue
+++ b/resources/js/components/open/forms/components/form-logic-components/GroupControlSlot.vue
@@ -7,7 +7,7 @@
                  option-key="identifier"
                  name="group-control-slot-rule"
    />
-    <v-button class="ml-1 mt-1" color="blue" size="small" :disabled="selectedRule === ''" @click="addRule">
+    <v-button class="ml-1 mt-1" color="blue" size="small" :disabled="(selectedRule === '')?true:null" @click="addRule">
      Add Condition
    </v-button>
    <v-button class="ml-1 mt-1" color="outline-blue" size="small" @click="groupCtrl.newGroup">