@westartcom/bread-quasar-fields 0.0.7 → 0.0.8

package/fields/CheckboxField.vue

@@ -19,8 +19,8 @@
                         :value="optionValue"
                         v-model="internalValue">
 
-                    <checkbox-marked-icon class="icon-2x" v-if="internalValue && internalValue.includes(optionValue)"></checkbox-marked-icon>
-                    <checkbox-blank-outline-icon class="icon-2x" v-if="!internalValue || !internalValue.includes(optionValue)"></checkbox-blank-outline-icon>
+                    <i class="fa-regular fa-square-check fa-fw" v-if="internalValue && internalValue.includes(optionValue)"></i>
+                    <i class="fa-regular fa-square fa-fw" v-if="!internalValue || !internalValue.includes(optionValue)"></i>
 
                     {{ label }}
                 </label>
@@ -71,8 +71,8 @@ export default defineComponent({
     ],
 
     components: {
-        CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
-        CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
+        // CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
+        // CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
     },
 
     data() {
@@ -154,7 +154,7 @@ export default defineComponent({
         user-select: none;
         cursor: pointer;
         display: inline-flex;
-        align-items: flex-end;
+        align-items: center;
 
         :deep(svg) {
             margin-right: var(--global-spacing-half);

package/fields/EmailField.vue

@@ -12,8 +12,9 @@
                 :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
                 :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
                 v-model="internalValue"
-                :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
+                :rules="(field.required) ? [val => !!val || $i18n.get('validation.required', { attribute: field.label as string })] : []"
                 :hint="field.description"
+                :errors="internalErrors"
                 outlined>
             </q-input>
         </div>

package/fields/ModelSearchField.vue

@@ -33,8 +33,8 @@
                     </template>
 
                     <div class="toggle-button" v-show="!isLoadingInitial" @click="toggleOptions">
-                        <chevron-down-icon v-if="!select.visible"></chevron-down-icon>
-                        <chevron-up-icon v-else></chevron-up-icon>
+                        <i class="q-icon fa-solid fa-angle-down q-select__dropdown-icon" aria-hidden="true" role="presentation" v-if="!select.visible"> </i>
+                        <i class="q-icon fa-solid fa-angle-up q-select__dropdown-icon" aria-hidden="true" role="presentation" v-if="select.visible"> </i>
                     </div>
                 </div>
 
@@ -45,6 +45,7 @@
                             class="q-px-md"
                             placeholder="Search.."
                             v-model="select.searchQuery"
+                            input-debounce="300"
                             borderless
                             clearable
                             clear-icon="fa-regular fa-circle-xmark"></q-input>

package/fields/NumberField.vue

@@ -1,24 +1,23 @@
 <template>
-    <div class="field-wrap" :id="id">
+    <div :id="id" class="field-wrap">
         <div class="field-wrap-inner">
-            <div class="field-label-wrap">
-                <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
-            </div>
-
-            <input
+            <q-input
+                :label="field.label + ((field.required) ? ' *' : '')"
                 :name="field.name"
                 :id="id + '-input'"
                 :placeholder="field.placeholder"
-                :max="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
-                :min="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
                 type="number"
                 class="field"
                 :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
-                v-model="internalValue">
+                :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
+                :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
+                v-model="internalValue"
+                :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
+                :hint="field.description"
+                outlined>
+            </q-input>
         </div>
 
-        <div class="field-description" v-if="field.description">{{ field.description }}</div>
-
         <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
             <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
         </div>

package/fields/SelectField.vue

@@ -18,8 +18,9 @@
                     <q-chip
                         removable
                         icon-remove="fa-solid fa-remove"
-                        @remove="scope.removeAtIndex(scope.index)">
-                        {{ scope.opt.label }}
+                        @remove="scope.removeAtIndex(scope.index)"
+                        v-if="modelValue">
+                        {{ filteredOptions[modelValue] }}
                     </q-chip>
                 </template>
             </q-select>
@@ -118,6 +119,7 @@ import pickBy from 'lodash-es/pickBy';
 import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
 import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
 import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
+import {upperCase} from "lodash-es";
 
 interface SelectFieldDefinition extends ModelFieldDefinition<FieldType.ENUM, InputType.SELECT> {
     default: string;
@@ -296,6 +298,7 @@ export default defineComponent({
     },
 
     methods: {
+        upperCase,
         qFilter(val, update) {
             this.select.searchQuery = val;
             update(() => {

package/fields/TelField.vue

@@ -1,23 +1,22 @@
 <template>
     <div class="field-wrap" :id="id">
         <div class="field-wrap-inner">
-            <div class="field-label-wrap">
-                <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
-            </div>
-
-            <input
+            <q-input
+                :label="field.label + ((field.required) ? ' *' : '')"
                 :name="field.name"
                 :id="id + '-input'"
-                maxlength="255"
                 :placeholder="field.placeholder"
                 type="tel"
                 class="field"
                 :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
-                v-model="internalValue">
+                :maxlength="255"
+                v-model="internalValue"
+                :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
+                :hint="field.description"
+                outlined>
+            </q-input>
         </div>
 
-        <div class="field-description" v-if="field.description">{{ field.description }}</div>
-
         <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
             <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
         </div>

package/fields/TextField.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="q-mb-md" :id="id">
+    <div :id="id" class="field-wrap">
         <div class="field-wrap-inner">
             <q-input
                 :label="field.label + ((field.required) ? ' *' : '')"

package/fields/TextareaField.vue

@@ -1,21 +1,21 @@
 <template>
-    <div class="field-wrap" :id="id">
+    <div :id="id" class="field-wrap">
         <div class="field-wrap-inner">
-            <div class="field-label-wrap">
-                <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
-            </div>
-
-            <textarea
+            <q-input
+                :label="field.label + ((field.required) ? ' *' : '')"
                 :name="field.name"
                 :id="id + '-input'"
                 :placeholder="field.placeholder"
-                :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
-                :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
-                rows="5"
+                type="textarea"
                 class="field"
                 :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
-                v-model="internalValue">
-            </textarea>
+                :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
+                :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
+                v-model="internalValue"
+                :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
+                :hint="field.description"
+                outlined>
+            </q-input>
         </div>
 
         <div class="field-description" v-if="field.description">{{ field.description }}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westartcom/bread-quasar-fields",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Quasar compatible fields for bread package",
   "main": "index.js",
   "scripts": {