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

6
client/components/forms/DateInput.vue
View File

@@ -59,7 +59,7 @@
</div>
</button>
<template #panel="{ close }">
<template #panel>
<DatePicker
v-if="props.dateRange"
v-model.range="modeledValue"
@@ -157,9 +157,11 @@ const inputClasses = computed(() => {
classes.push('!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800')
}
if (input.hasError.value) {
classes.push('!ring-red-500 !ring-2 !border-transparent')
}
if (!props.disabled && !input.hasError.value && pickerOpen.value) {
classes.push('ring-2 ring-opacity-100 border-transparent')
}
return classes.join(' ')
})

1
client/components/forms/FileInput.vue
View File

@@ -23,6 +23,7 @@
class="flex flex-col w-full items-center justify-center transition-colors duration-40"
:class="[
{'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled,
'!bg-gray-200 dark:!bg-gray-800': disabled,
[theme.fileInput.inputHover.light + ' dark:'+theme.fileInput.inputHover.dark]: uploadDragoverEvent,
['hover:'+theme.fileInput.inputHover.light +' dark:hover:'+theme.fileInput.inputHover.dark]: !loading},
theme.fileInput.input,

19
client/components/forms/MatrixInput.vue
View File

@@ -4,9 +4,11 @@
<slot name="label" />
</template>
<div
class="border border-gray-300 overflow-x-auto"
class="border overflow-x-auto"
:class="[
theme.default.borderRadius,
theme.MatrixInput.cell,
theme.MatrixInput.table,
{
'!ring-red-500 !ring-2 !border-transparent': hasError,
},
@@ -19,7 +21,8 @@
<td
v-for="column in columns"
:key="column"
class="ltr:border-l rtl:border-r rtl:!border-l-0 border-gray-300 max-w-24 overflow-hidden"
class="ltr:border-l rtl:border-r rtl:!border-l-0 max-w-24 overflow-hidden"
:class="theme.MatrixInput.cell"
>
<div class="p-2 w-full flex items-center justify-center text-sm">
{{ column }}
@@ -41,10 +44,14 @@
<td
v-for="column in columns"
:key="row + column"
class="ltr:border-l rtl:border-r rtl:!border-l-0 border-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800"
:class="{
'!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800 hover:!bg-gray-200 dark:hover:!bg-gray-800': disabled,
}"
class="ltr:border-l rtl:border-r rtl:!border-l-0"
:class="[
theme.MatrixInput.cell,
theme.MatrixInput.cellHover,
{
'!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800 hover:!bg-gray-200 dark:hover:!bg-gray-800': disabled,
},
]"
>
<div
v-if="compVal"

24
client/components/forms/RichTextAreaInput.client.vue
View File

@@ -1,5 +1,8 @@
<template>
<InputWrapper v-bind="inputWrapperProps">
<InputWrapper
v-bind="inputWrapperProps"
wrapper-class="not-draggable"
>
<template #label>
<slot name="label" />
</template>
@@ -10,19 +13,20 @@
{
'!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError && !disabled
},
theme.RichTextAreaInput.input,
theme.RichTextAreaInput.borderRadius,
theme.default.fontSize,
]"
:style="{
'--font-size': theme.default.fontSize
'--font-size': theme.default.fontSize,
...inputStyle
}"
>
<QuillyEditor
:id="id ? id : name"
ref="editor"
:key="id+placeholder"
v-model="compVal"
:options="quillOptions"
:disabled="disabled"
@@ -37,7 +41,6 @@
<template #error>
<slot name="error" />
</template>
<MentionDropdown
v-if="enableMentions && mentionState"
:state="mentionState"
@@ -53,6 +56,7 @@ import InputWrapper from './components/InputWrapper.vue'
import QuillyEditor from './components/QuillyEditor.vue'
import MentionDropdown from './components/MentionDropdown.vue'
import registerMentionExtension from '~/lib/quill/quillMentionExtension.js'
const props = defineProps({
...inputProps,
editorOptions: {
@@ -68,7 +72,9 @@ const props = defineProps({
default: () => []
}
})
const emit = defineEmits(['update:modelValue'])
const { compVal, inputStyle, hasError, inputWrapperProps } = useFormInput(props, { emit })
const editor = ref(null)
const mentionState = ref(null)
@@ -91,6 +97,7 @@ const quillOptions = computed(() => {
]
}
}
const mergedOptions = { ...defaultOptions, ...props.editorOptions, modules: { ...defaultOptions.modules, ...props.editorOptions.modules } }
if (props.enableMentions) {
@@ -112,21 +119,26 @@ const quillOptions = computed(() => {
border-right: 0px !important;
border-left: 0px !important;
font-size: var(--font-size);
.ql-editor {
min-height: 100px !important;
}
}
.ql-toolbar {
border-top: 0px !important;
border-right: 0px !important;
border-left: 0px !important;
}
.ql-header {
@apply rounded-md;
}
.ql-editor.ql-blank:before {
@apply text-gray-400 dark:text-gray-500 not-italic;
}
.ql-snow .ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
@@ -144,14 +156,16 @@ const quillOptions = computed(() => {
@apply text-nt-blue;
}
}
.ql-mention {
padding-top: 0px !important;
margin-top: -5px !important;
}
.ql-mention::after {
content: '@';
font-size: 16px;
}
.rich-editor, .mention-input {
span[mention] {
@apply inline-flex items-center align-baseline leading-tight text-sm relative bg-blue-100 text-blue-800 border border-blue-200 rounded-md px-1 py-0.5 mx-0.5;

93
client/components/forms/components/VSelect.vue
View File

@@ -13,7 +13,7 @@
{
'!ring-red-500 !ring-2 !border-transparent': hasError,
'!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError
'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError && !disabled
},
inputClass
]"
@@ -78,9 +78,13 @@
</transition>
</div>
<div
class="absolute inset-y-0 ltr:right-6 rtl:left-6 w-10 pointer-events-none bg-gradient-to-r from-transparent to-white dark:to-notion-dark-light"
class="absolute inset-y-0 ltr:right-6 rtl:left-6 w-10 pointer-events-none -z-[1]"
:class="[disabled ? 'bg-gradient-to-r from-transparent to-gray-200 dark:to-gray-800' : theme.SelectInput.chevronGradient]"
/>
<span class="absolute inset-y-0 ltr:right-0 rtl:left-0 rtl:!right-auto flex items-center ltr:pr-2 rtl:pl-2 rtl:!pr-0 pointer-events-none bg-white">
<span
class="absolute inset-y-0 ltr:right-0 rtl:left-0 rtl:!right-auto flex items-center ltr:pr-2 rtl:pl-2 rtl:!pr-0 pointer-events-none"
:class="[disabled ? 'bg-gray-200 dark:bg-gray-800' : theme.SelectInput.background]"
>
<Icon
name="heroicons:chevron-up-down-16-solid"
class="h-5 w-5 text-gray-500"
@@ -88,7 +92,7 @@
</span>
</button>
<button
v-if="clearable && showClearButton && !isEmpty"
v-if="clearable && showClearButton && !disabled && !isEmpty"
class="hover:bg-gray-50 dark:hover:bg-gray-900 ltr:border-l rtl:!border-l-0 rtl:border-r px-2 flex items-center"
:class="[theme.SelectInput.spacing.vertical]"
@click.prevent="clear()"
@@ -208,47 +212,47 @@
<script>
import Collapsible from '~/components/global/transitions/Collapsible.vue'
import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
import debounce from 'debounce'
import Fuse from 'fuse.js'
import CachedDefaultTheme from '~/lib/forms/themes/CachedDefaultTheme.js'
export default {
name: 'VSelect',
components: {Collapsible},
components: { Collapsible },
directives: {},
props: {
data: Array,
modelValue: {default: null, type: [String, Number, Array, Object]},
inputClass: {type: String, default: null},
dropdownClass: {type: String, default: 'w-full'},
loading: {type: Boolean, default: false},
required: {type: Boolean, default: false},
multiple: {type: Boolean, default: false},
searchable: {type: Boolean, default: false},
clearable: {type: Boolean, default: false},
hasError: {type: Boolean, default: false},
remote: {type: Function, default: null},
searchKeys: {type: Array, default: () => ['name']},
optionKey: {type: String, default: 'id'},
emitKey: {type: String, default: null},
color: {type: String, default: '#3B82F6'},
placeholder: {type: String, default: null},
modelValue: { default: null, type: [String, Number, Array, Object, Boolean] },
inputClass: { type: String, default: null },
dropdownClass: { type: String, default: 'w-full' },
loading: { type: Boolean, default: false },
required: { type: Boolean, default: false },
multiple: { type: Boolean, default: false },
searchable: { type: Boolean, default: false },
clearable: { type: Boolean, default: false },
hasError: { type: Boolean, default: false },
remote: { type: Function, default: null },
searchKeys: { type: Array, default: () => ['name'] },
optionKey: { type: String, default: 'id' },
emitKey: { type: String, default: null },
color: { type: String, default: '#3B82F6' },
placeholder: { type: String, default: null },
uppercaseLabels: { type: Boolean, default: true },
showClearButton: { type: Boolean, default: true },
theme: {
type: Object, default: () => {
const theme = inject("theme", null)
const theme = inject('theme', null)
if (theme) {
return theme.value
}
return CachedDefaultTheme.getInstance()
}
},
allowCreation: {type: Boolean, default: false},
disabled: {type: Boolean, default: false}
allowCreation: { type: Boolean, default: false },
disabled: { type: Boolean, default: false }
},
emits: ['update:modelValue', 'update-options', 'focus', 'blur'],
data() {
data () {
return {
isOpen: false,
searchTerm: '',
@@ -257,46 +261,46 @@ export default {
}
},
computed: {
optionStyle() {
optionStyle () {
return {
'--bg-form-color': this.color
}
},
inputStyle() {
inputStyle () {
return {
'--tw-ring-color': this.color
}
},
debouncedRemote() {
debouncedRemote () {
if (this.remote) {
return debounce(this.remote, 300)
}
return null
},
filteredOptions() {
filteredOptions () {
if (!this.data) return []
if (!this.searchable || this.remote || this.searchTerm === '') {
return this.data
}
// Fuse search
const fuse = new Fuse(this.data, {
keys: this.searchKeys,
includeScore: true
})
return fuse.search(this.searchTerm).filter((res) => res.score < 0.5).map((res) => {
const fuzeOptions = {
keys: this.searchKeys
}
const fuse = new Fuse(this.data, fuzeOptions)
return fuse.search(this.searchTerm).map((res) => {
return res.item
})
},
isSearchable() {
isSearchable () {
return this.searchable || this.remote !== null || this.allowCreation
},
isEmpty() {
isEmpty () {
return this.multiple ? !this.modelValue || this.modelValue.length === 0 : !this.modelValue
}
},
watch: {
searchTerm(val) {
searchTerm (val) {
if (!this.debouncedRemote) return
if ((this.remote && val) || (val === '' && !this.modelValue) || (val === '' && this.isOpen)) {
return this.debouncedRemote(val)
@@ -304,13 +308,13 @@ export default {
}
},
methods: {
onClickAway(event) {
onClickAway (event) {
// Check that event target isn't children of dropdown
if (this.$refs.select && !this.$refs.select.contains(event.target)) {
this.isOpen = false
}
},
isSelected(value) {
isSelected (value) {
if (!this.modelValue) return false
if (this.emitKey && value[this.emitKey]) {
@@ -323,16 +327,18 @@ export default {
return this.modelValue === value
},
onFocus(event) {
if (this.disabled) return
this.isFocused = true
this.$emit('focus', event)
},
onBlur(event) {
if (this.disabled) return
this.isFocused = false
this.$emit('blur', event)
},
toggleDropdown() {
toggleDropdown () {
if (this.disabled) {
this.isOpen = false
} else {
@@ -347,7 +353,7 @@ export default {
this.searchTerm = ''
}
},
select(value) {
select (value) {
if (!this.multiple) {
// Close after select
this.toggleDropdown()
@@ -382,10 +388,10 @@ export default {
}
}
},
clear() {
clear () {
this.$emit('update:modelValue', this.multiple ? [] : null)
},
createOption(newOption) {
createOption (newOption) {
if (newOption) {
const newItem = {
name: newOption,
@@ -400,3 +406,4 @@ export default {
}
}
</script>