matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Favour Olayinka 2024-05-22 13:36:42 +01:00 committed by GitHub
parent 292e32959b
commit 8760925007
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 23 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/components/open/forms/OpenFormField.vue
View File

@ -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,
'bg-blue-50 hover:!bg-blue-50 dark:bg-gray-800 rounded-md': beingEdited
'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,
'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) {

20
client/components/open/forms/components/FormFieldsEditor.vue
View File

@ -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">
<svg
class="h-4 w-4 text-gray-400"
viewBox="0 0 18 8"
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"
<div class="cursor-grab draggable p-1 -mr-3">
<Icon
name="clarity:drag-handle-line"
class="size-8 text-gray-400"
/>
</svg>
</div>
<!-- Field name and type -->
<div class="flex flex-col flex-grow truncate">

30
client/package-lock.json generated
View File

@ -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",

5
client/stores/working_form.js vendored
View File

@ -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];
newFields.splice(newIndex, 0, field);
const field = newFields.splice(oldIndex, 1)[0]
newFields.splice(newIndex, 0, field)
this.content.properties = newFields
}
},