fix field width offset (#417)

* fix store content bug

* fix: form field indexing bug on working form store

* fix column width on  form fied

* fix field width offset

* UI polishing

* Fix cursor grab

---------

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

client/components/open/forms/OpenFormField.vue

@@ -2,11 +2,13 @@
   <div
     v-if="!isFieldHidden"
     :id="'block-' + field.id"
+    class=""
     :class="[
       getFieldWidthClasses(field),
       {
-        'group/nffield hover:bg-gray-100/50 relative hover:z-10 mx-[-15px] px-[15px] transition-colors hover:border-gray-200 dark:hover:bg-gray-900 border-dashed border border-transparent box-border dark:hover:border-blue-900 rounded-md':adminPreview,
+        'group/nffield hover:bg-gray-100/50 relative hover:z-10 px-2 transition-colors hover:border-gray-200 dark:hover:bg-gray-900 border-dashed border border-transparent box-border dark:hover:border-blue-900 rounded-md':adminPreview,
-        'bg-blue-50 hover:!bg-blue-50 dark:bg-gray-800 rounded-md': beingEdited
+        'bg-blue-50 hover:!bg-blue-50 dark:bg-gray-800 rounded-md': beingEdited,
+        'mx-[15px]' : !adminPreview
       }]"
   >
     <div
@@ -250,15 +252,15 @@ export default {
     getFieldWidthClasses(field) {
       if (!field.width || field.width === 'full') return 'col-span-full'
       else if (field.width === '1/2') {
-        return 'w-full sm:col-span-6 col-span-full'
+        return 'sm:col-span-6 col-span-full'
       } else if (field.width === '1/3') {
-        return 'w-full sm:col-span-4 col-span-full'
+        return 'sm:col-span-4 col-span-full'
       } else if (field.width === '2/3') {
-        return 'w-full sm:col-span-8 col-span-full'
+        return 'sm:col-span-8 col-span-full'
       } else if (field.width === '1/4') {
-        return 'w-full sm:col-span-3 col-span-full'
+        return 'sm:col-span-3 col-span-full'
       } else if (field.width === '3/4') {
-        return 'w-full sm:col-span-9 col-span-full'
+        return 'sm:col-span-9 col-span-full'
       }
     },
     getFieldAlignClasses(field) {

client/components/open/forms/components/FormFieldsEditor.vue

@@ -45,24 +45,14 @@
         >
           <div
             v-if="element"
-            class="flex items-center space-x-1 group py-2 pr-4 relative"
+            class="flex items-center space-x-1 group py-2 pr-2 relative"
           >
             <!-- Drag handler -->
-            <div class="cursor-move draggable p-2 -mr-2">
+            <div class="cursor-grab draggable p-1 -mr-3">
-              <svg
+              <Icon
-                class="h-4 w-4 text-gray-400"
+                name="clarity:drag-handle-line"
-                viewBox="0 0 18 8"
+                class="size-8 text-gray-400"
-                fill="none"
+              />
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M1.5 1.0835H16.5M1.5 6.91683H16.5"
-                  stroke="currentColor"
-                  stroke-width="1.67"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
             </div>
             <!-- Field name and type -->
             <div class="flex flex-col flex-grow truncate">

client/package-lock.json

@@ -24,10 +24,10 @@
         "codemirror": "^6.0.1",
         "crisp-sdk-web": "^1.0.21",
         "date-fns": "^2.30.0",
+        "debounce": "^1.2.1",
         "fuse.js": "^6.4.6",
         "js-sha256": "^0.10.0",
         "libphonenumber-js": "^1.10.44",
-        "nuxt3-notifications": "^1.1.9",
         "object-to-formdata": "^4.5.1",
         "pinia": "^2.1.7",
         "prismjs": "^1.24.1",
@@ -1897,14 +1897,6 @@
       "resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
       "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw=="
     },
-    "node_modules/@kyvg/vue3-notification": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@kyvg/vue3-notification/-/vue3-notification-3.2.1.tgz",
-      "integrity": "sha512-qn4bCBBCxW0Ya+RmHXu2SYBVwGXWsAGdlDKqCqyLryaZTbtFXi32iSSLnuKjSUVxFqQRToFc6g1zp1XLTyHrvw==",
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
     "node_modules/@lezer/common": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
@@ -6885,6 +6877,11 @@
         }
       }
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -10791,21 +10788,6 @@
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
       "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
     },
-    "node_modules/nuxt3-notifications": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/nuxt3-notifications/-/nuxt3-notifications-1.2.0.tgz",
-      "integrity": "sha512-WHYviscx7EcstMCQkv8QBvn0mPLZrsLTgrciHltNCMURAY+afXPq6TS/TcLJoPAZoH8TyHZxRkYOnOEADGUXpA==",
-      "dependencies": {
-        "@kyvg/vue3-notification": "^3.1.4",
-        "scule": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 14.20.0"
-      },
-      "peerDependencies": {
-        "@nuxt/kit": "^3.0.0"
-      }
-    },
     "node_modules/nypm": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.8.tgz",

client/stores/working_form.js

@@ -105,7 +105,6 @@ export const useWorkingFormStore = defineStore("working_form", {
     },
 
     addBlock(type, index = null) {
-      this.selectedFieldIndex = index
       this.blockForm.type = type
       this.blockForm.name = defaultBlockNames[type]
       const newBlock = this.prefillDefault(this.blockForm.data())
@@ -149,8 +148,8 @@ export const useWorkingFormStore = defineStore("working_form", {
 
     moveField(oldIndex, newIndex) {
       const newFields = clonedeep(this.content.properties)
-      const field = newFields.splice(oldIndex, 1)[0];
+      const field = newFields.splice(oldIndex, 1)[0]
-      newFields.splice(newIndex, 0, field);
+      newFields.splice(newIndex, 0, field)
       this.content.properties = newFields
     }
   },