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

Refactor form components (#659)

Browse Source 
* Add Barcode Input Component and Integrate Quagga for Scanning

- Introduced a new BarcodeInput component for scanning barcodes using the Quagga library.
- Updated package.json and package-lock.json to include Quagga as a dependency.
- Enhanced form themes to accommodate the new BarcodeInput component.
- Added localization support for barcode scanning actions in English.
- Updated blocks_types.json to register the new barcode input type.

These changes improve the application's functionality by allowing users to scan barcodes directly within forms, enhancing user experience and data input efficiency.

* Update Barcode scanner UI

* Barcode decoder as user selection

* improve barcode

* Refactor form components and update Tailwind configuration

- Removed unused box shadow styles from tailwind.config.js.
- Enhanced DateInput, FileInput, MatrixInput, RichTextAreaInput, and VSelect components with improved styling and error handling.
- Updated theme settings in form-themes.js to include new styles for MatrixInput and other form elements.
- Adjusted labels in FieldOptions.vue for clarity.
- Improved overall UI consistency and responsiveness across form components.

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
2025-01-03 20:45:47 +05:30
committed by GitHub
parent 80b7c1e773
commit 75f82b3bc7
9 changed files with 176 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
client/lib/forms/themes/form-themes.js vendored
View File

@@ -1,7 +1,7 @@
/**
Input classes for each supported form themes
*/
export const themes = {
export const themes = {
default: {
default: {
wrapper: {
@@ -9,7 +9,7 @@ export const themes = {
md: 'relative my-1.5',
lg: 'relative my-1.5',
},
label: 'text-gray-700 dark:text-gray-300 font-medium',
label: 'text-gray-700 dark:text-gray-300 font-semibold',
input:
'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100',
help: 'text-gray-500',
@@ -66,8 +66,30 @@ export const themes = {
lg: 'min-h-[28px]'
}
},
PhoneInput: {
countrySelectWidth: {
sm: 'w-[100px]',
md: 'w-[120px]',
lg: 'w-[120px]'
},
flag: {
sm: '!-mt-[14px]',
md: '!-mt-[9px] rounded',
lg: '!-mt-[9px] rounded'
},
flagSize: {
sm: 'small',
md: 'normal',
lg: 'normal'
},
maxHeight: {
sm: 'max-h-[20px]',
md: 'max-h-[24px]',
lg: 'max-h-[28px]'
}
},
FlatSelectInput: {
option: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex items-center space-x-2 border-t first:border-t-0 px-2',
option: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex items-center gap-x-2 border-t first:border-t-0 px-2',
unselectedIcon: 'text-gray-300 dark:text-gray-600',
icon: {
sm: 'w-4 h-4',
@@ -75,40 +97,18 @@ export const themes = {
lg: 'w-6 h-6 mx-1'
}
},
PhoneInput: {
countrySelectWidth: {
sm: 'w-[100px]',
md: 'w-[120px]',
lg: 'w-[120px]'
},
flag: {
sm: '!-mt-[14px]',
md: '!-mt-[9px] rounded',
lg: '!-mt-[9px] rounded'
},
flagSize: {
sm: 'small',
md: 'normal',
lg: 'normal'
},
maxHeight: {
sm: 'max-h-[20px]',
md: 'max-h-[24px]',
lg: 'max-h-[28px]'
}
},
DateInput: {
input:
'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100'
},
CheckboxInput: {
CheckboxInput:{
size: {
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-5 h-5'
},
},
SwitchInput: {
SwitchInput:{
containerSize: {
sm: 'h-5 w-10 p-0.5',
md: 'h-6 w-12 p-1',
@@ -125,7 +125,7 @@ export const themes = {
lg: 'translate-x-6'
}
},
RatingInput: {
RatingInput:{
size: {
sm: 'w-6 h-6',
md: 'w-8 h-8',
@@ -153,6 +153,11 @@ export const themes = {
md: 'min-h-40',
lg: 'min-h-48'
},
},
MatrixInput: {
table: 'bg-white dark:bg-notion-dark-light shadow-sm',
cell: 'border-gray-300 dark:border-gray-600',
cellHover: 'hover:bg-gray-50 dark:hover:bg-gray-900'
}
},
simple: {
@@ -219,15 +224,6 @@ export const themes = {
lg: 'min-h-[28px]'
}
},
FlatSelectInput: {
option: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex items-center space-x-2 border-t first:border-t-0 px-2',
unselectedIcon: 'text-gray-300 dark:text-gray-600',
icon: {
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-6 h-6 mx-1'
}
},
PhoneInput: {
countrySelectWidth: {
sm: 'w-[100px]',
@@ -250,17 +246,26 @@ export const themes = {
lg: 'max-h-[28px]'
}
},
FlatSelectInput: {
option: 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-900 flex items-center space-x-2 border-t first:border-t-0 px-2',
unselectedIcon: 'text-gray-300 dark:text-gray-600',
icon: {
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-6 h-6 mx-1'
}
},
DateInput: {
input: 'flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 placeholder-gray-400 text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100'
},
CheckboxInput: {
CheckboxInput:{
size: {
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-5 h-5'
},
},
SwitchInput: {
SwitchInput:{
containerSize: {
sm: 'h-5 w-10',
md: 'h-6 w-12',
@@ -272,7 +277,7 @@ export const themes = {
lg: 'h-4 w-4'
},
},
RatingInput: {
RatingInput:{
size: {
sm: 'w-6 h-6',
md: 'w-8 h-8',
@@ -300,6 +305,11 @@ export const themes = {
md: 'min-h-40',
lg: 'min-h-48'
},
},
MatrixInput: {
table: 'bg-white dark:bg-notion-dark-light',
cell: 'border-gray-300 dark:border-gray-600',
cellHover: 'hover:bg-gray-50 dark:hover:bg-gray-900'
}
},
notion: {
@@ -311,7 +321,7 @@ export const themes = {
},
label: 'text-gray-900 dark:text-gray-100 mb-1 block mt-4',
input:
'rounded border-transparent flex-1 appearance-none shadow-inner-notion w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 dark:placeholder-gray-500 placeholder-gray-400 focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',
'rounded border border-notion-input-border dark:border-notion-input-borderDark flex-1 appearance-none w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 dark:placeholder-gray-500 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent',
help: 'text-gray-500',
spacing: {
horizontal: {
@@ -337,28 +347,28 @@ export const themes = {
}
},
ScaleInput: {
button: 'border-transparent flex-1 appearance-none shadow-inner-notion w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 text-center',
unselectedButton: 'bg-notion-input-background dark:bg-notion-dark-light border'
button: 'border border-notion-input-border dark:border-notion-input-borderDark flex-1 appearance-none w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 text-center focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent',
unselectedButton: 'bg-notion-input-background dark:bg-notion-dark-light'
},
SliderInput: {
stepLabel: 'text-gray-700 dark:text-gray-300 text-center text-xs'
},
Button: {
body: 'transition ease-in duration-200 text-center font-semibold shadow shadow-inner-notion focus:outline-none focus:ring-2 focus:ring-offset-2 filter hover:brightness-90'
body: 'transition ease-in duration-200 text-center font-semibold border border-notion-input-border dark:border-notion-input-borderDark focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent filter hover:brightness-90'
},
CodeInput: {
input: 'shadow-inner-notion border-transparent focus:border-transparent overflow-hidden'
input: 'border border-notion-input-border dark:border-notion-input-borderDark focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent overflow-hidden'
},
RichTextAreaInput: {
input:
'flex-1 appearance-none shadow-inner-notion border-transparent focus:border-transparent w-full text-gray-900 bg-notion-input-background dark:bg-notion-dark-light dark:placeholder-gray-500 placeholder-gray-400 text-base focus:outline-none focus:ring-0 focus:ring-opacity-100 focus:border-transparent focus:ring-0 focus:shadow-focus-notion'
'flex-1 appearance-none border border-notion-input-border dark:border-notion-input-borderDark w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 dark:placeholder-gray-500 placeholder-gray-400 text-base focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent'
},
SelectInput: {
input:
'relative w-full border-transparent flex-1 appearance-none shadow-inner-notion w-full text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',
'relative w-full border border-notion-input-border dark:border-notion-input-borderDark flex-1 appearance-none w-full text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 text-base focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent',
background: 'bg-notion-input-background dark:bg-notion-dark-light',
chevronGradient: 'bg-gradient-to-r from-transparent to-notion-input-background dark:to-notion-dark-light',
dropdown: 'border border-gray-300 dark:border-gray-600',
dropdown: 'border border-notion-input-border dark:border-notion-input-borderDark',
option: 'rounded',
minHeight: {
sm: 'min-h-[20px]',
@@ -366,15 +376,6 @@ export const themes = {
lg: 'min-h-[28px]'
}
},
FlatSelectInput: {
option: 'cursor-pointer hover:backdrop-brightness-95 flex items-center space-x-2 border-t border-neutral-300 first:border-t-0 px-2',
unselectedIcon: 'text-neutral-300 dark:text-neutral-600',
icon: {
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-6 h-6 mx-1'
}
},
PhoneInput: {
countrySelectWidth: {
sm: 'w-[100px]',
@@ -397,17 +398,26 @@ export const themes = {
lg: 'max-h-[28px]'
}
},
DateInput: {
input: 'shadow-inner-notion border-transparent focus:border-transparent flex-1 appearance-none w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 placeholder-gray-400 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion p-[1px]'
FlatSelectInput: {
option: 'cursor-pointer hover:backdrop-brightness-95 flex items-center space-x-2 border-t border-neutral-300 first:border-t-0 px-2',
unselectedIcon: 'text-neutral-300 dark:text-neutral-600',
icon: {
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-6 h-6 mx-1'
}
},
CheckboxInput: {
DateInput: {
input: 'border border-notion-input-border dark:border-notion-input-borderDark flex-1 appearance-none w-full bg-notion-input-background dark:bg-notion-dark-light text-gray-900 dark:text-gray-100 placeholder-gray-400 text-base focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent'
},
CheckboxInput:{
size: {
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-5 h-5'
},
},
SwitchInput: {
SwitchInput:{
containerSize: {
sm: 'h-5 w-10',
md: 'h-6 w-12',
@@ -418,8 +428,13 @@ export const themes = {
md: 'h-4 w-4',
lg: 'h-4 w-4'
},
translatedClass: {
sm: 'translate-x-5',
md: 'translate-x-6',
lg: 'translate-x-6'
}
},
RatingInput: {
RatingInput:{
size: {
sm: 'w-6 h-6',
md: 'w-8 h-8',
@@ -428,7 +443,7 @@ export const themes = {
},
fileInput: {
input:
'p-4 rounded bg-notion-input-background dark:bg-notion-dark',
'p-4 rounded border border-dashed border-notion-input-border dark:border-notion-input-borderDark bg-notion-input-background dark:bg-notion-dark-light focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent',
minHeight: {
sm: 'min-h-28',
md: 'min-h-40',
@@ -439,7 +454,7 @@ export const themes = {
dark: 'bg-notion-dark-light'
},
uploadedFile:
'border border-gray-300 dark:border-gray-600 bg-white dark:bg-notion-dark-light rounded shadow-sm max-w-[10rem]'
'border border-notion-input-border dark:border-notion-input-borderDark bg-white dark:bg-notion-dark-light rounded max-w-[10rem] focus:outline-none focus:ring-2 focus:ring-opacity-40 focus:border-transparent'
},
SignatureInput: {
minHeight: {
@@ -447,6 +462,11 @@ export const themes = {
md: 'min-h-40',
lg: 'min-h-48'
},
},
MatrixInput: {
table: 'bg-notion-input-background dark:bg-notion-dark-light',
cell: 'border-notion-input-border dark:border-notion-input-borderDark',
cellHover: 'hover:backdrop-brightness-95'
}
}
}