9a3d4 form page (#20)

* Form page new ui

* UI polishing, code cleanign & bug fixes

* form page divide into separate component & user route-view for tabs

* new pages change meta info

* Display columns  modal

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

resources/js/components/pages/forms/show/EmbedCode.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h3 class="font-semibold text-xl">Embed</h3>
+    <p>Embed your form on your website by copying the HTML code below.</p>
+    <copy-content :content="embedCode" buttonText="Copy Code">
+      <template #icon>
+        <svg class="h-4 w-4 -mt-1 text-blue-600 inline mr-1" viewBox="0 0 18 18" fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M11.0833 11.5L13.5833 9L11.0833 6.5M6.91667 6.5L4.41667 9L6.91667 11.5M5.5 16.5H12.5C13.9001 16.5 14.6002 16.5 15.135 16.2275C15.6054 15.9878 15.9878 15.6054 16.2275 15.135C16.5 14.6002 16.5 13.9001 16.5 12.5V5.5C16.5 4.09987 16.5 3.3998 16.2275 2.86502C15.9878 2.39462 15.6054 2.01217 15.135 1.77248C14.6002 1.5 13.9001 1.5 12.5 1.5H5.5C4.09987 1.5 3.3998 1.5 2.86502 1.77248C2.39462 2.01217 2.01217 2.39462 1.77248 2.86502C1.5 3.3998 1.5 4.09987 1.5 5.5V12.5C1.5 13.9001 1.5 14.6002 1.77248 15.135C2.01217 15.6054 2.39462 15.9878 2.86502 16.2275C3.3998 16.5 4.09987 16.5 5.5 16.5Z"
+            stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </template>
+      Copy Code
+    </copy-content>
+  </div>
+</template>
+    
+<script>
+import CopyContent from '../../../open/forms/components/CopyContent'
+
+export default {
+    name: 'EmbedCode',
+    components: { CopyContent },
+    props: {
+      form: { type: Object, required: true }
+    },
+
+    data: () => ({
+      
+    }),
+
+    computed: {
+      embedCode() {
+        return '<iframe style="border:none;width:100%;" height="' + this.formHeight + 'px" src="' + this.form.share_url + '"></iframe>'
+      },
+      formHeight() {
+        let height = 200
+        if (!this.form.hide_title) {
+          height += 60
+        }
+        height += this.form.properties.filter((property) => {
+          return !property.hidden
+        }).length * 70
+
+        return height
+      }
+    },
+
+    methods: {}
+}
+</script>
+