Merge branch 'main' of https://github.com/JhumanJ/OpnForm

JhumanJ · Apr 18, 2024 · fe367a7 · fe367a7
2 parents 517a7a0 + 8776414
commit fe367a7
Show file tree

Hide file tree

Showing 228 changed files with 17,156 additions and 8,892 deletions.
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  extends: ['@nuxt/eslint-config'],
+  parser: 'vue-eslint-parser',
+  env: {
+      browser: true,
+      node: true,
+  },
+  extends: ['@nuxt/eslint-config'],
+  rules: {
+      'vue/require-default-prop': 'off',
+      'vue/no-mutating-props': 'off',
+      semi: ['error', 'never'],
+      'vue/no-v-html': 'off',
+      'prefer-rest-params': 'off',
+      'vue/valid-template-root': 'off',
+      'no-undef': 'off',
+  },
+}
diff --git a/client/app.vue b/client/app.vue
@@ -1,103 +1,123 @@
 <template>
-  <div id="app" class="bg-white dark:bg-notion-dark">
-    <transition enter-active-class="linear duration-200 overflow-hidden"
-                enter-from-class="max-h-0"
-                enter-to-class="max-h-screen"
-                leave-active-class="linear duration-200 overflow-hidden"
-                leave-from-class="max-h-screen"
-                leave-to-class="max-h-0"
+  <div
+    id="app"
+    class="bg-white dark:bg-notion-dark"
+  >
+    <transition
+      enter-active-class="linear duration-200 overflow-hidden"
+      enter-from-class="max-h-0"
+      enter-to-class="max-h-screen"
+      leave-active-class="linear duration-200 overflow-hidden"
+      leave-from-class="max-h-screen"
+      leave-to-class="max-h-0"
     >
-      <div v-if="announcement && !isIframe" class="bg-nt-blue text-white text-center p-3 relative">
-        <a class="text-white font-semibold" href="" target="_blank">🚨
-          OpnForm beta is over 🚨</a>
-        <div role="button" class="text-white absolute right-0 top-0 p-3 cursor-pointer" @click="announcement=false">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                  clip-rule="evenodd"
+      <div
+        v-if="announcement && !isIframe"
+        class="bg-nt-blue text-white text-center p-3 relative"
+      >
+        <a
+          class="text-white font-semibold"
+          href=""
+          target="_blank"
+        >🚨 OpnForm beta is over 🚨</a>
+        <div
+          role="button"
+          class="text-white absolute right-0 top-0 p-3 cursor-pointer"
+          @click="announcement = false"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+              clip-rule="evenodd"
             />
           </svg>
         </div>
       </div>
     </transition>
 
-
-    <NuxtLoadingIndicator color="#2563eb"/>
+    <NuxtLoadingIndicator color="#2563eb" />
     <NuxtLayout>
-      <NuxtPage/>
+      <NuxtPage />
     </NuxtLayout>
-    <ToolsStopImpersonation/>
+    <ToolsStopImpersonation />
 
     <Notifications />
-    <feature-base/>
+    <feature-base />
   </div>
 </template>
 
 <script>
-import {computed} from 'vue'
-import {useAppStore} from '~/stores/app'
-import FeatureBase from "~/components/vendor/FeatureBase.vue";
+import { computed } from "vue"
+import { useAppStore } from "~/stores/app"
+import FeatureBase from "~/components/vendor/FeatureBase.vue"
 
 export default {
-  el: '#app',
+  el: "#app",
 
-  name: 'OpnForm',
+  name: "OpnForm",
 
-  components: {FeatureBase},
+  components: { FeatureBase },
 
   setup() {
     const config = useRuntimeConfig()
     useOpnSeoMeta({
-      title: 'OpnForm',
-      description: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
-      ogImage: '/img/social-preview.jpg',
+      title: "OpnForm",
+      description:
+        "Create beautiful forms for free. Unlimited fields, unlimited submissions. It's free and it takes less than 1 minute to create your first form.",
+      ogImage: "/img/social-preview.jpg",
       robots: () => {
-        return config.public.env === 'production' ? null : 'noindex, nofollow'
-      }
+        return config.public.env === "production" ? null : "noindex, nofollow"
+      },
     })
     useHead({
       titleTemplate: (titleChunk) => {
-        return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm';
-      }
+        return titleChunk ? `${titleChunk} - OpnForm` : "OpnForm"
+      },
     })
 
     const appStore = useAppStore()
 
     return {
       layout: computed(() => appStore.layout),
-      isIframe: useIsIframe()
+      isIframe: useIsIframe(),
     }
   },
 
-  mounted() {
-    useCrisp().showChat()
-  },
-
   data: () => ({
     announcement: false,
     alert: {
       type: null,
       autoClose: 0,
-      message: '',
+      message: "",
       confirmationProceed: null,
-      confirmationCancel: null
+      confirmationCancel: null,
     },
-    navbarHidden: false
+    navbarHidden: false,
   }),
 
   computed: {
     isOnboardingPage() {
-      return this.$route.name === 'onboarding'
+      return this.$route.name === "onboarding"
     },
   },
 
+  mounted() {
+    useCrisp().showChat()
+  },
+
   methods: {
     workspaceAdded() {
-      this.$router.push({name: 'home'})
+      this.$router.push({ name: "home" })
     },
     hideNavbar(hidden = true) {
       this.navbarHidden = hidden
-    }
-  }
+    },
+  },
 }
 </script>
diff --git a/client/components/forms/CheckboxInput.vue b/client/components/forms/CheckboxInput.vue
@@ -4,9 +4,18 @@
       <span />
     </template>
 
-    <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled?true:null" :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>
+        {{ label }}
+        <span
+          v-if="required"
+          class="text-red-500 required-dot"
+        >*</span>
       </slot>
     </v-checkbox>
 
@@ -21,28 +30,28 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
-import VCheckbox from './components/VCheckbox.vue'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import VCheckbox from "./components/VCheckbox.vue"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
-  name: 'CheckboxInput',
+  name: "CheckboxInput",
 
   components: { InputWrapper, VCheckbox },
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
   },
 
-  mounted () {
+  mounted() {
     if (!this.compVal) {
       this.compVal = false
     }
-  }
+  },
 }
 </script>
diff --git a/client/components/forms/CodeInput.client.vue b/client/components/forms/CodeInput.client.vue
@@ -1,7 +1,5 @@
 <template>
-  <input-wrapper
-    v-bind="inputWrapperProps"
-  >
+  <input-wrapper v-bind="inputWrapperProps">
     <template #label>
       <slot name="label" />
     </template>
@@ -11,12 +9,23 @@
     </template>
 
     <div
-      :class="[theme.CodeInput.input,{ '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200':disabled }]"
+      :class="[
+        theme.CodeInput.input,
+        {
+          '!ring-red-500 !ring-2 !border-transparent': hasError,
+          '!cursor-not-allowed !bg-gray-200': disabled,
+        },
+      ]"
     >
-      <codemirror :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-                  :extensions="extensions"
-                  :style="inputStyle" :name="name" :tab-size="4"
-                  :placeholder="placeholder"
+      <codemirror
+        :id="id ? id : name"
+        v-model="compVal"
+        :disabled="disabled ? true : null"
+        :extensions="extensions"
+        :style="inputStyle"
+        :name="name"
+        :tab-size="4"
+        :placeholder="placeholder"
       />
     </div>
 
@@ -27,25 +36,25 @@
 </template>
 
 <script>
-import { Codemirror } from 'vue-codemirror'
+import { Codemirror } from "vue-codemirror"
 
-import {html} from '@codemirror/lang-html'
+import { html } from "@codemirror/lang-html"
 
-import { inputProps, useFormInput } from './useFormInput.js'
-import InputWrapper from './components/InputWrapper.vue'
+import { inputProps, useFormInput } from "./useFormInput.js"
+import InputWrapper from "./components/InputWrapper.vue"
 
 export default {
   components: { InputWrapper, Codemirror },
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     const extensions = [html()]
     return {
       ...useFormInput(props, context),
-      extensions
+      extensions,
     }
-  }
+  },
 }
 </script>
diff --git a/client/components/forms/ColorInput.vue b/client/components/forms/ColorInput.vue
@@ -5,12 +5,20 @@
     </template>
 
     <div class="flex items-center">
-      <input :id="id?id:name" v-model="compVal" :disabled="disabled?true:null"
-             type="color" class="mr-2"
-             :name="name"
+      <input
+        :id="id ? id : name"
+        v-model="compVal"
+        :disabled="disabled ? true : null"
+        type="color"
+        class="mr-2"
+        :name="name"
       >
       <slot name="label">
-        <span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
+        <span>{{ label }}
+          <span
+            v-if="required"
+            class="text-red-500 required-dot"
+          >*</span></span>
       </slot>
     </div>
 
@@ -25,21 +33,21 @@
 </template>
 
 <script>
-import InputWrapper from './components/InputWrapper.vue'
-import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from "./components/InputWrapper.vue"
+import { inputProps, useFormInput } from "./useFormInput.js"
 
 export default {
-  name: 'ColorInput',
+  name: "ColorInput",
   components: { InputWrapper },
 
   props: {
-    ...inputProps
+    ...inputProps,
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
-      ...useFormInput(props, context)
+      ...useFormInput(props, context),
     }
-  }
+  },
 }
 </script>