@westartcom/bread-quasar-fields 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/fields/CheckboxField.vue +28 -22
  2. package/fields/EmailField.vue +2 -1
  3. package/fields/ModelSearchField.vue +3 -2
  4. package/fields/NumberField.vue +10 -11
  5. package/fields/SelectField.vue +5 -2
  6. package/fields/TelField.vue +8 -9
  7. package/fields/TextField.vue +1 -1
  8. package/fields/TextareaField.vue +11 -11
  9. package/package.json +1 -1
package/fields/CheckboxField.vue CHANGED
@@ -6,29 +6,29 @@
6
6
  {{ field.label }}<span class="required-asterix" v-if="field.required"> *</span>
7
7
  </label>
8
8
  </div>
9
-
10
- <div class="field">
11
- <label
12
- v-for="(label, optionValue) in allOptions"
13
- :key="id + '-' + optionValue + '-radio-input'"
14
- :for="id + '-' + optionValue + '-radio-input'">
15
- <input
16
- :id="id + '-' + optionValue + '-radio-input'"
17
- type="checkbox"
18
- hidden="true"
19
- :value="optionValue"
20
- v-model="internalValue">
21
-
22
- <checkbox-marked-icon class="icon-2x" v-if="internalValue && internalValue.includes(optionValue)"></checkbox-marked-icon>
23
- <checkbox-blank-outline-icon class="icon-2x" v-if="!internalValue || !internalValue.includes(optionValue)"></checkbox-blank-outline-icon>
24
-
25
- {{ label }}
26
- </label>
27
- </div>
28
9
  </div>
29
10
 
30
11
  <div class="field-description" v-if="field.description">{{ field.description }}</div>
31
12
 
13
+ <div class="field">
14
+ <label
15
+ v-for="(label, optionValue) in allOptions"
16
+ :key="id + '-' + optionValue + '-radio-input'"
17
+ :for="id + '-' + optionValue + '-radio-input'">
18
+ <input
19
+ :id="id + '-' + optionValue + '-radio-input'"
20
+ type="checkbox"
21
+ hidden="true"
22
+ :value="optionValue"
23
+ v-model="internalValue">
24
+
25
+ <i class="icon fa-solid fa-square-check fa-fw" v-if="internalValue && internalValue.includes(optionValue)"></i>
26
+ <i class="icon fa-solid fa-square fa-fw" v-if="!internalValue || !internalValue.includes(optionValue)"></i>
27
+
28
+ {{ label }}
29
+ </label>
30
+ </div>
31
+
32
32
  <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
33
33
  <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
34
34
  </div>
@@ -71,8 +71,8 @@ export default defineComponent({
71
71
  ],
72
72
 
73
73
  components: {
74
- CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
75
- CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
74
+ // CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
75
+ // CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
76
76
  },
77
77
 
78
78
  data() {
@@ -154,10 +154,16 @@ export default defineComponent({
154
154
  user-select: none;
155
155
  cursor: pointer;
156
156
  display: inline-flex;
157
- align-items: flex-end;
157
+ align-items: center;
158
158
 
159
159
  :deep(svg) {
160
160
  margin-right: var(--global-spacing-half);
161
161
  }
162
162
  }
163
+ .field-description {
164
+ margin: 0 0 var(--global-spacing-half) 0;
165
+ }
166
+ .icon {
167
+ font-size: 1.2em;
168
+ }
163
169
  </style>
package/fields/EmailField.vue CHANGED
@@ -12,8 +12,9 @@
12
12
  :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
13
13
  :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
14
  v-model="internalValue"
15
- :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
15
+ :rules="(field.required) ? [val => !!val || $i18n.get('validation.required', { attribute: field.label as string })] : []"
16
16
  :hint="field.description"
17
+ :errors="internalErrors"
17
18
  outlined>
18
19
  </q-input>
19
20
  </div>
package/fields/ModelSearchField.vue CHANGED
@@ -33,8 +33,8 @@
33
33
  </template>
34
34
 
35
35
  <div class="toggle-button" v-show="!isLoadingInitial" @click="toggleOptions">
36
- <chevron-down-icon v-if="!select.visible"></chevron-down-icon>
37
- <chevron-up-icon v-else></chevron-up-icon>
36
+ <i class="q-icon fa-solid fa-angle-down q-select__dropdown-icon" aria-hidden="true" role="presentation" v-if="!select.visible"> </i>
37
+ <i class="q-icon fa-solid fa-angle-up q-select__dropdown-icon" aria-hidden="true" role="presentation" v-if="select.visible"> </i>
38
38
  </div>
39
39
  </div>
40
40
 
@@ -45,6 +45,7 @@
45
45
  class="q-px-md"
46
46
  placeholder="Search.."
47
47
  v-model="select.searchQuery"
48
+ input-debounce="300"
48
49
  borderless
49
50
  clearable
50
51
  clear-icon="fa-regular fa-circle-xmark"></q-input>
package/fields/NumberField.vue CHANGED
@@ -1,24 +1,23 @@
1
1
  <template>
2
- <div class="field-wrap" :id="id">
2
+ <div :id="id" class="field-wrap">
3
3
  <div class="field-wrap-inner">
4
- <div class="field-label-wrap">
5
- <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
6
- </div>
7
-
8
- <input
4
+ <q-input
5
+ :label="field.label + ((field.required) ? ' *' : '')"
9
6
  :name="field.name"
10
7
  :id="id + '-input'"
11
8
  :placeholder="field.placeholder"
12
- :max="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
13
- :min="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
9
  type="number"
15
10
  class="field"
16
11
  :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
17
- v-model="internalValue">
12
+ :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
13
+ :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
+ v-model="internalValue"
15
+ :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
16
+ :hint="field.description"
17
+ outlined>
18
+ </q-input>
18
19
  </div>
19
20
 
20
- <div class="field-description" v-if="field.description">{{ field.description }}</div>
21
-
22
21
  <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
23
22
  <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
24
23
  </div>
package/fields/SelectField.vue CHANGED
@@ -18,8 +18,9 @@
18
18
  <q-chip
19
19
  removable
20
20
  icon-remove="fa-solid fa-remove"
21
- @remove="scope.removeAtIndex(scope.index)">
22
- {{ scope.opt.label }}
21
+ @remove="scope.removeAtIndex(scope.index)"
22
+ v-if="modelValue">
23
+ {{ filteredOptions[modelValue] }}
23
24
  </q-chip>
24
25
  </template>
25
26
  </q-select>
@@ -118,6 +119,7 @@ import pickBy from 'lodash-es/pickBy';
118
119
  import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces/ModelDefinition';
119
120
  import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
120
121
  import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
122
+ import {upperCase} from "lodash-es";
121
123
 
122
124
  interface SelectFieldDefinition extends ModelFieldDefinition<FieldType.ENUM, InputType.SELECT> {
123
125
  default: string;
@@ -296,6 +298,7 @@ export default defineComponent({
296
298
  },
297
299
 
298
300
  methods: {
301
+ upperCase,
299
302
  qFilter(val, update) {
300
303
  this.select.searchQuery = val;
301
304
  update(() => {
package/fields/TelField.vue CHANGED
@@ -1,23 +1,22 @@
1
1
  <template>
2
2
  <div class="field-wrap" :id="id">
3
3
  <div class="field-wrap-inner">
4
- <div class="field-label-wrap">
5
- <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
6
- </div>
7
-
8
- <input
4
+ <q-input
5
+ :label="field.label + ((field.required) ? ' *' : '')"
9
6
  :name="field.name"
10
7
  :id="id + '-input'"
11
- maxlength="255"
12
8
  :placeholder="field.placeholder"
13
9
  type="tel"
14
10
  class="field"
15
11
  :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
16
- v-model="internalValue">
12
+ :maxlength="255"
13
+ v-model="internalValue"
14
+ :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
15
+ :hint="field.description"
16
+ outlined>
17
+ </q-input>
17
18
  </div>
18
19
 
19
- <div class="field-description" v-if="field.description">{{ field.description }}</div>
20
-
21
20
  <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
22
21
  <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
23
22
  </div>
package/fields/TextField.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="q-mb-md" :id="id">
2
+ <div :id="id" class="field-wrap">
3
3
  <div class="field-wrap-inner">
4
4
  <q-input
5
5
  :label="field.label + ((field.required) ? ' *' : '')"
package/fields/TextareaField.vue CHANGED
@@ -1,21 +1,21 @@
1
1
  <template>
2
- <div class="field-wrap" :id="id">
2
+ <div :id="id" class="field-wrap">
3
3
  <div class="field-wrap-inner">
4
- <div class="field-label-wrap">
5
- <label v-if="field.label" :for="id + '-input'">{{ field.label }}<span class="required-asterix" v-if="field.required"> *</span></label>
6
- </div>
7
-
8
- <textarea
4
+ <q-input
5
+ :label="field.label + ((field.required) ? ' *' : '')"
9
6
  :name="field.name"
10
7
  :id="id + '-input'"
11
8
  :placeholder="field.placeholder"
12
- :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
13
- :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
- rows="5"
9
+ type="textarea"
15
10
  class="field"
16
11
  :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
17
- v-model="internalValue">
18
- </textarea>
12
+ :maxlength="(field.extra_data && field.extra_data.max) ? field.extra_data.max : null"
13
+ :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
+ v-model="internalValue"
15
+ :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
16
+ :hint="field.description"
17
+ outlined>
18
+ </q-input>
19
19
  </div>
20
20
 
21
21
  <div class="field-description" v-if="field.description">{{ field.description }}</div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@westartcom/bread-quasar-fields",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "description": "Quasar compatible fields for bread package",
5
5
  "main": "index.js",
6
6
  "scripts": {