From 604bfeea2009fc321c7368c4418d51d6a80cbe82 Mon Sep 17 00:00:00 2001 From: cgfhtw Date: Thu, 18 Jan 2024 15:41:24 +0100 Subject: [PATCH] Form input component: improvements --- public/js/components/Form/Form.js | 8 +++ public/js/components/Form/Input.js | 68 ++++++++++++++++++++++--- public/js/components/Form/Upload/Dms.js | 8 +-- 3 files changed, 74 insertions(+), 10 deletions(-) diff --git a/public/js/components/Form/Form.js b/public/js/components/Form/Form.js index 9ca6af7e3..2257eb289 100644 --- a/public/js/components/Form/Form.js +++ b/public/js/components/Form/Form.js @@ -30,6 +30,14 @@ export default { if (!a[name]) a[name] = []; a[name].push(c); + + if (c.lcType == 'checkbox' && name.substr(-1) == ']' && name.indexOf('[')) { + name = name.substr(0, name.lastIndexOf('[')); + if (!a[name]) + a[name] = []; + a[name].push(c); + } + return a; }, {}); } diff --git a/public/js/components/Form/Input.js b/public/js/components/Form/Input.js index 8107c1a19..ba63b8fdc 100644 --- a/public/js/components/Form/Input.js +++ b/public/js/components/Form/Input.js @@ -13,6 +13,8 @@ export default { props: { bsFeedback: Boolean, noAutoClass: Boolean, + noFeedback: Boolean, + inputGroup: Boolean, type: String, name: String, containerClass: [String, Array, Object] @@ -29,8 +31,38 @@ export default { return true; if (this.containerClass) return true; + if (this.autoContainerClass) + return true; return false; }, + acc() { + if (!this.containerClass) + return {}; + if (typeof this.containerClass === 'string' || this.containerClass instanceof String) + return this.containerClass.split(' ').reduce((a,c) => {a[c] = true; return a}, {}); + if (Array.isArray(this.containerClass)) + return this.containerClass.reduce((a,c) => {a[c] = true; return a}, {}); + return this.containerClass; + }, + autoContainerClass() { + if (this.noAutoClass) + return this.acc; + + const acc = {...this.acc}; + + if (this.inputGroup) + acc['input-group-item'] = true; + + if (this.lcType == 'radio' || this.lcType == 'checkbox') + acc['form-check'] = true; + + if (this.inputGroup && acc['form-check']) { + acc['input-group-item'] = false; + acc['form-check'] = false; + acc['input-group-text'] = true; + } + return acc; + }, lcType() { if (!this.type) return 'text'; @@ -47,6 +79,9 @@ export default { return 'PvAutocomplete'; case 'uploadimage': return 'UploadImage'; + case 'uploadfile': + case 'uploaddms': + return 'UploadDms'; default: return 'input'; } @@ -81,6 +116,8 @@ export default { classes.push('p-0'); classes.push('border-0'); case 'text': + case 'number': + case 'password': case 'textarea': if (!c.includes('form-control')) classes.push('form-control'); @@ -146,6 +183,8 @@ export default { this._.components.PvAutocomplete = Vue.defineAsyncComponent(() => import(FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + "/public/js/components/primevue/autocomplete/autocomplete.esm.min.js")); } else if (this.tag == 'UploadImage' && !this._.components.UploadImage) { this._.components.UploadImage = Vue.defineAsyncComponent(() => import("./Upload/Image.js")); + } else if (this.tag == 'UploadDms' && !this._.components.UploadDms) { + this._.components.UploadDms = Vue.defineAsyncComponent(() => import("./Upload/Dms.js")); } } }, @@ -158,10 +197,9 @@ export default { mounted() { if (this.$registerToForm) this.$registerToForm(this); - // TODO(chris): wrap check in div? }, template: ` - + @@ -174,10 +212,11 @@ export default { :type="type" v-model="modelValueCmp" v-bind="$attrs" - :uid="idCmp.substr(9)" + :uid="idCmp ? idCmp.substr(9) : idCmp" :name="name" :class="validationClass" - :input-class-name="[...Object.entries({'form-control': !noAutoClass, 'is-valid': valid === true, 'is-invalid': valid === false}).reduce((a,[k,v]) => {if(v) a.push(k);return a}, []), ...($attrs['input-class-name'] ? $attrs['input-class-name'].split(' ') : [])].join(' ')" + :input-class-name= + "[...Object.entries({'form-control': !noAutoClass, 'is-valid': valid === true, 'is-invalid': valid === false}).reduce((a,[k,v]) => {if(v) a.push(k);return a}, []), ...($attrs['input-class-name'] ? $attrs['input-class-name'].split(' ') : [])].join(' ')" @update:model-value="clearValidation" > @@ -189,13 +228,28 @@ export default { v-model="modelValueCmp" v-bind="$attrs" :id="idCmp" - :name="name" + :input-props="{name}" :class="validationClass" :input-class="[...Object.entries({'form-control': !noAutoClass, 'is-valid': valid === true, 'is-invalid': valid === false}).reduce((a,[k,v]) => {if(v) a.push(k);return a}, []), ...($attrs['input-class'] ? $attrs['input-class'].split(' ') : [])].join(' ')" @update:model-value="clearValidation" > + + + -
+ +
- ` } \ No newline at end of file diff --git a/public/js/components/Form/Upload/Dms.js b/public/js/components/Form/Upload/Dms.js index 1c2f476e8..da37a2105 100644 --- a/public/js/components/Form/Upload/Dms.js +++ b/public/js/components/Form/Upload/Dms.js @@ -9,7 +9,9 @@ export default { }, multiple: Boolean, id: String, - name: String + name: String, + inputClass: [String, Array, Object], + noList: Boolean }, methods: { stringifyFile(file) { @@ -71,8 +73,8 @@ export default { }, template: `
- -
    + +
    • {{ file.name }}