Edit field options as sidebar (#190)

* Edit field options as sidebar

* WIP

* Finish dynamic positioning of sidebar

* Open block on addition, fix pro tag, add visual clue field open

* fix typo

* remove extra code

* remove extra code

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

resources/js/components/common/Button.vue

@@ -71,7 +71,7 @@ export default {
     btnClasses() {
       const sizes = this.sizes
       const colorShades = this.colorShades
-      return `${sizes['p-y']} ${sizes['p-x']}
+      return `v-btn ${sizes['p-y']} ${sizes['p-x']}
         ${colorShades?.main} ${colorShades?.hover} ${colorShades?.ring} ${colorShades['ring-offset']}
         ${colorShades?.text} transition ease-in duration-200 text-center text-${sizes?.font} font-medium focus:outline-none focus:ring-2
         focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`

resources/js/components/common/Dropdown.vue

@@ -1,12 +1,10 @@
 <template>
   <div class="relative">
-    <div>
-      <slot name="trigger"
-            :toggle="toggle"
-            :open="open"
-            :close="close"
-      />
-    </div>
+    <slot name="trigger"
+          :toggle="toggle"
+          :open="open"
+          :close="close"
+    />
     <transition name="fade">
       <div
         v-if="isOpen"
@@ -14,7 +12,7 @@
         :class="dropdownClass"
       >
         <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-          <slot />
+          <slot/>
         </div>
       </div>
     </transition>
@@ -22,7 +20,7 @@
 </template>
 
 <script>
-import { directive as onClickaway } from 'vue-clickaway'
+import {directive as onClickaway} from 'vue-clickaway'
 
 export default {
   name: 'Dropdown',
@@ -31,21 +29,24 @@ export default {
   },
 
   props: {
-    dropdownClass: { type: String, default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20' }
+    dropdownClass: {
+      type: String,
+      default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
+    }
   },
-  data () {
+  data() {
     return {
       isOpen: false
     }
   },
   methods: {
-    open () {
+    open() {
       this.isOpen = true
     },
-    close () {
+    close() {
       this.isOpen = false
     },
-    toggle () {
+    toggle() {
       this.isOpen = !this.isOpen
     }
   }

resources/js/components/common/ProTag.vue

@@ -9,18 +9,18 @@
       <h2 class="text-nt-blue">
         OpnForm PRO
       </h2>
-      <h4 v-if="user.is_subscribed && !user.has_enterprise_subscription" class="text-center mt-5">
+      <h4 v-if="user &&user.is_subscribed && !user.has_enterprise_subscription" class="text-center mt-5">
         We're happy to have you as a Pro customer. If you're having any issue with OpnForm, or if you have a
         feature request, please <a href="mailto:contact@opnform.com">contact us</a>.
         <br><br>
         If you need to collaborate, or to work with multiple workspaces, or just larger file uploads, you can
         also upgrade our subscription to get an Enterprise subscription.
       </h4>
-      <h4 v-if="user.is_subscribed && user.has_enterprise_subscription" class="text-center mt-5">
+      <h4 v-if="user && user.is_subscribed && user.has_enterprise_subscription" class="text-center mt-5">
         We're happy to have you as an Enterprise customer. If you're having any issue with OpnForm, or if you have a
         feature request, please <a href="mailto:contact@opnform.com">contact us</a>.
       </h4>
-      <p v-if="!user.is_subscribed" class="mt-4">
+      <p v-if="user && !user.is_subscribed" class="mt-4">
         All the features with a<span
           class="bg-nt-blue text-white px-2 text-xs uppercase inline rounded-full font-semibold mx-1"
         >