Object.hasOwn & hasOwnProperty replace with lodash has (#367)

* Object.hasOwn & hasOwnProperty replace with lodash has

* fix _has

client/components/forms/useFormInput.js

@@ -2,6 +2,7 @@ import { ref, computed, watch } from 'vue'
 import { themes } from '~/lib/forms/form-themes.js'
 import {default as _get} from 'lodash/get'
 import {default as _set} from 'lodash/set'
+import { default as _has } from 'lodash/has'
 
 export const inputProps = {
   id: { type: String, default: null },
@@ -31,7 +32,7 @@ export function useFormInput (props, context, formPrefixKey = null) {
   })
 
   const hasValidation = computed(() => {
-    return props.form !== null && props.form !== undefined && props.form.hasOwnProperty('errors')
+    return props.form !== null && props.form !== undefined && _has(props.form, 'errors')
   })
 
   const hasError = computed(() => {

client/components/global/Badge.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script setup>
+import { default as _has } from 'lodash/has'
 
 const props = defineProps({
   color: {
@@ -36,7 +37,7 @@ const iconBaseClasses = {
 }
 
 const activeColor = computed(() => {
-  return Object.hasOwn(baseClasses, props.color) ? props.color : 'gray'
+  return _has(baseClasses, props.color) ? props.color : 'gray'
 })
 
 const classes = computed(() => {

client/components/global/Modal.vue

@@ -20,9 +20,9 @@
             </button>
           </div>
           <div class="flex border-b pb-4"
-               v-if="$slots.hasOwnProperty('icon') || $slots.hasOwnProperty('title')"
+               v-if="_has($slots,'icon') || _has($slots,'title')"
                :class="[{'flex-col sm:items-start':!compactHeader, 'items-center justify-center py-6 gap-x-4':compactHeader},headerInnerPadding]">
-            <div v-if="$slots.hasOwnProperty('icon')" :class="{'w-full mb-4 flex justify-center':!compactHeader}">
+            <div v-if="_has($slots,'icon')" :class="{'w-full mb-4 flex justify-center':!compactHeader}">
               <div class="w-14 h-14 rounded-full flex justify-center items-center"
                    :class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'"
               >
@@ -30,7 +30,7 @@
               </div>
             </div>
             <div class="mt-3 text-center sm:mt-0" :class="{'w-full':!compactHeader}">
-              <h2 v-if="$slots.hasOwnProperty('title')"
+              <h2 v-if="_has($slots,'title')"
                   class="text-2xl font-semibold text-center text-gray-900"
               >
                 <slot name="title"/>
@@ -42,7 +42,7 @@
             <slot/>
           </div>
 
-          <div v-if="$slots.hasOwnProperty('footer')" class="bg-gray-50 border-t rounded-b-xl text-right" :class="footerInnerPadding">
+          <div v-if="_has($slots,'footer')" class="bg-gray-50 border-t rounded-b-xl text-right" :class="footerInnerPadding">
             <slot name="footer"/>
           </div>
         </div>
@@ -53,6 +53,7 @@
 
 <script setup>
 import {watch} from "vue";
+import { default as _has } from 'lodash/has'
 
 const props = defineProps({
   show: {

client/components/open/forms/OpenCompleteForm.vue

@@ -118,6 +118,7 @@ import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
 import VTransition from '~/components/global/transitions/VTransition.vue'
 import {pendingSubmission} from "~/composables/forms/pendingSubmission.js";
 import clonedeep from "clone-deep";
+import { default as _has } from 'lodash/has'
 
 export default {
   components: { VTransition, VButton, OpenFormButton, OpenForm, FormCleanings },
@@ -155,7 +156,7 @@ export default {
       return import.meta.client && window.location.href.includes('popup=true')
     },
     theme () {
-      return this.themes[this.themes.hasOwnProperty(this.form.theme) ? this.form.theme : 'default']
+      return this.themes[_has(this.themes, this.form.theme) ? this.form.theme : 'default']
     },
     isPublicFormPage () {
       return this.$route.name === 'forms-slug'

client/components/open/forms/OpenFormField.vue

@@ -56,6 +56,7 @@
 <script>
 import { computed } from 'vue'
 import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
+import { default as _has } from 'lodash/has'
 
 export default {
   name: 'OpenFormField',
@@ -248,7 +249,7 @@ export default {
       }
 
       if (['select', 'multi_select'].includes(field.type)) {
-        inputProperties.options = (field.hasOwnProperty(field.type))
+        inputProperties.options = (_has(field, field.type))
           ? field[field.type].options.map(option => {
             return {
               name: option.name,

client/components/open/forms/components/FormUrlPrefill.vue

@@ -19,6 +19,7 @@
 
 <script setup>
 import { defineProps, computed } from 'vue'
+import { default as _has } from 'lodash/has'
 const { copy } = useClipboard()
 
 const props = defineProps({
@@ -40,7 +41,7 @@ const preFillUrl = computed(() => {
   const url = props.form.share_url
   const uriComponents = new URLSearchParams()
   props.form.properties.filter((property) => {
-    return props.formData.hasOwnProperty(property.id) && props.formData[property.id] !== null
+    return _has(props.formData, property.id) && props.formData[property.id] !== null
   }).forEach((property) => {
     if (Array.isArray(props.formData[property.id])) {
       props.formData[property.id].forEach((value) => {

client/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -62,6 +62,7 @@
 import VSwitch from '../../../../forms/components/VSwitch.vue'
 import OpenCompleteForm from '../../OpenCompleteForm.vue'
 import {handleDarkMode} from "~/lib/forms/public-page.js"
+import { default as _has } from 'lodash/has'
 
 export default {
   components: { OpenCompleteForm, VSwitch },
@@ -89,7 +90,7 @@ export default {
       }
     },
     creating () { // returns true if we are creating a form
-      return !this.form.hasOwnProperty('id')
+      return !_has(this.form, 'id')
     }
   },
 

client/components/open/forms/components/form-components/FormInformation.vue

@@ -66,10 +66,10 @@
 </template>
 
 <script>
-import { computed } from 'vue'
 import clonedeep from 'clone-deep'
 import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
 import SelectInput from '../../../../forms/SelectInput.vue'
+import { default as _has } from 'lodash/has'
 
 export default {
   components: { SelectInput, EditorOptionsPanel },
@@ -152,7 +152,7 @@ export default {
       ['title', 'description', 'properties', 'cleanings', 'views_count', 'submissions_count', 'workspace', 'workspace_id', 'updated_at',
         'share_url', 'slug', 'notion_database_url', 'id', 'database_id', 'database_fields_update', 'creator',
         'created_at', 'deleted_at', 'last_edited_human'].forEach((property) => {
-        if (copyForm.hasOwnProperty(property)) {
+        if (_has(copyForm, property)) {
           delete copyForm[property]
         }
       })

client/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -70,6 +70,7 @@
 import ConditionEditor from './ConditionEditor.client.vue'
 import Modal from '../../../../global/Modal.vue'
 import clonedeep from 'clone-deep'
+import { default as _has } from 'lodash/has'
 
 export default {
   name: 'FormBlockLogicEditor',
@@ -100,7 +101,7 @@ export default {
   computed: {
     copyFromOptions () {
       return this.form.properties.filter((field) => {
-        return field.id !== this.field.id && field.hasOwnProperty('logic') && field.logic !== null && field.logic !== {}
+        return field.id !== this.field.id && _has(field, 'logic') && field.logic !== null && field.logic !== {}
       }).map((field) => {
         return { name: field.name, value: field.id }
       })
@@ -166,7 +167,7 @@ export default {
   },
 
   mounted () {
-    if (!this.field.hasOwnProperty('logic')) {
+    if (!_has(this.field, 'logic')) {
       this.field.logic = this.logic
     }
   },

client/components/open/forms/fields/components/FieldOptions.vue

@@ -316,6 +316,7 @@ import timezones from '~/data/timezones.json'
 import countryCodes from '~/data/country_codes.json'
 import CountryFlag from 'vue-country-flag-next'
 import FormBlockLogicEditor from '../../components/form-logic-components/FormBlockLogicEditor.vue'
+import { default as _has } from 'lodash/has'
 
 export default {
   name: 'FieldOptions',
@@ -556,7 +557,7 @@ export default {
       }
       if (this.field.type in defaultFieldValues) {
         Object.keys(defaultFieldValues[this.field.type]).forEach(key => {
-          if (!Object.hasOwn(this.field,key)) {
+          if (!_has(this.field,key)) {
             this.field[key] = defaultFieldValues[this.field.type][key]
           }
         })

client/components/open/tables/OpenTable.vue

@@ -21,7 +21,7 @@
       </tr>
     </thead>
     <tbody v-if="data.length > 0" class="n-table-body bg-white dark:bg-notion-dark-light">
-      <tr v-if="$slots.hasOwnProperty('actions')" :id="'table-actions-' + tableHash" ref="actions-row"
+      <tr v-if="objectHas($slots,'actions')" :id="'table-actions-' + tableHash" ref="actions-row"
         class="action-row absolute w-full" style="will-change: transform; transform: translate3d(0px, 32px, 0px)">
         <td :colspan="columns.length" class="p-1">
           <slot name="actions" />
@@ -71,6 +71,7 @@ import ResizableTh from './components/ResizableTh.vue'
 import RecordOperations from '../components/RecordOperations.vue'
 import clonedeep from 'clone-deep'
 import { hash } from "~/lib/utils.js";
+import { default as _has } from 'lodash/has'
 
 export default {
   components: { ResizableTh, RecordOperations },
@@ -174,18 +175,18 @@ export default {
 
       // Column color
       colColor = null
-      if (!col.hasOwnProperty('color') || col.color === 'default') {
+      if (!_has(col, 'color') || col.color === 'default') {
         colColor = 'text-gray-700 dark:text-gray-300'
       }
       colColor = `text-${col.color}`
 
       // Column font weight
-      if (col.hasOwnProperty('bold') && col.bold) {
+      if (_has(col, 'bold') && col.bold) {
         colFontWeight = 'font-semibold'
       }
 
       // Column wrapping
-      if (!col.hasOwnProperty('wrap_text') || !col.wrap_text) {
+      if (!_has(col, 'wrap_text') || !col.wrap_text) {
         colWrap = 'truncate'
       }
 
@@ -195,7 +196,7 @@ export default {
       if (this.internalColumns) {
         this.$nextTick(() => {
           this.internalColumns.forEach(col => {
-            if (!col.hasOwnProperty('cell_width')) {
+            if (!_has(col, 'cell_width')) {
               if (this.allowResize && this.internalColumns.length && document.getElementById('table-head-cell-' + col.id)) {
                 // Within editor
                 this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
@@ -256,6 +257,9 @@ export default {
     },
     setColumns(val) {
       this.$emit('update-columns', val)
+    },
+    objectHas(object, key) {
+      return _has(object, key)
     }
   }
 }

client/components/vendor/FeatureBase.vue

@@ -1,6 +1,7 @@
 <template></template>
 <script setup>
 import {onMounted} from "vue";
+import { default as _has } from 'lodash/has'
 
 const scriptLoaded = ref(false);
 const authStore = useAuthStore()
@@ -52,7 +53,7 @@ onMounted(() => {
   if (import.meta.server) return
 
   // Setup base
-  if (!window.hasOwnProperty('Featurebase') || typeof window.Featurebase !== "function") {
+  if (!_has(window, 'Featurebase') || typeof window.Featurebase !== "function") {
     window.Featurebase = function () {
       (window.Featurebase.q = window.Featurebase.q || []).push(arguments);
     };

client/mixins/forms/input.js

@@ -1,4 +1,5 @@
 import { themes } from '~/lib/forms/form-themes.js'
+import { default as _has } from 'lodash/has'
 
 export default {
   props: {
@@ -31,7 +32,7 @@ export default {
       }
     },
     hasValidation () {
-      return this.form !== null && this.form !== undefined && this.form.hasOwnProperty('errors')
+      return this.form !== null && this.form !== undefined && _has(this.form, 'errors')
     },
     compVal: {
       set (val) {