@westartcom/bread-quasar-fields 0.0.6 → 0.0.8

package/README.md

@@ -1 +1,9 @@
+# Introduction
+
 This is a library to enable quasar in the bread framework. You are meant to import these fields into your `ModelForm.vue` file.
+
+# TODO
+
+- [ ] Think about the dependencies of this library, it's not really optional depending on what fields you are using, right now it's forcing install of all dependices even though you might not be using the field at all.
+- [ ] Interfaces and Enums, should they be in this library or in the install of the bread framework?
+- [ ] `RepeatableNestedFieldsField.vue` requires `ModelForm.vue` which is not included in this library, should it be?

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,11 +1,12 @@
 {
   "name": "@westartcom/bread-quasar-fields",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Quasar compatible fields for bread package",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "private": false,
   "author": "Christoffer",
   "license": "ISC",
   "dependencies": {