@westartcom/bread-quasar-fields 0.1.6 → 0.1.8

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 (7) hide show
  1. package/fields/DateField.vue +2 -2
  2. package/fields/EmailField.vue +1 -1
  3. package/fields/NumberField.vue +9 -1
  4. package/fields/TelField.vue +83 -42
  5. package/fields/TextField.vue +7 -1
  6. package/fields/TextareaField.vue +16 -1
  7. package/package.json +9 -9
package/fields/DateField.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
14
  v-model="internalValue"
15
15
  :disable="disable"
16
- :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
16
+ :error-message="''"
17
17
  :hint="field.description"
18
18
  outlined>
19
19
  </q-input>
@@ -93,7 +93,7 @@ export default defineComponent({
93
93
  watch: {
94
94
  modelValue: function(val) {
95
95
  if (val !== this.internalValue) {
96
- this.internalValue = formatDate(val, 'yyyy-MM-dd');
96
+ this.internalValue = this.formatDate(val, 'yyyy-MM-dd');
97
97
  }
98
98
  },
99
99
 
package/fields/EmailField.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
14
  v-model="internalValue"
15
15
  :disable="disable"
16
- :rules="(field.required) ? [val => !!val || $i18n.get('validation.required', { attribute: field.label as string })] : []"
16
+ :error-message="''"
17
17
  :hint="field.description"
18
18
  :errors="internalErrors"
19
19
  @keydown="$emit('keydown', $event)"
package/fields/NumberField.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
14
  v-model="internalValue"
15
15
  :disable="disable"
16
- :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
16
+ :error-message="''"
17
17
  :hint="field.description"
18
18
  @keydown="$emit('keydown', $event)"
19
19
  @blur="$emit('blur', $event)"
@@ -58,6 +58,14 @@ export default defineComponent({
58
58
  type: Boolean,
59
59
  required: false,
60
60
  default: true
61
+ },
62
+ validationPattern: {
63
+ type: RegExp,
64
+ required: false
65
+ },
66
+ validationPatternMessage: {
67
+ type: String,
68
+ required: false
61
69
  }
62
70
  },
63
71
 
package/fields/TelField.vue CHANGED
@@ -2,26 +2,41 @@
2
2
  <div class="field-wrap" :id="id">
3
3
  <div class="field-wrap-inner">
4
4
  <q-input
5
- :label="(showLabel) ? field.label + ((field.required) ? ' *' : '') : undefined"
5
+ :label="
6
+ showLabel
7
+ ? field.label + (field.required ? ' *' : '')
8
+ : undefined
9
+ "
6
10
  :name="field.name"
7
11
  :id="id + '-input'"
8
12
  :placeholder="field.placeholder"
9
13
  type="tel"
10
14
  class="field"
11
- :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
15
+ :class="{
16
+ invalid: invalid && internalErrors && internalErrors.length,
17
+ }"
12
18
  :maxlength="255"
13
19
  v-model="internalValue"
14
20
  :disable="disable"
15
- :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
21
+ :error-message="''"
16
22
  :hint="field.description"
17
23
  @keydown="$emit('keydown', $event)"
18
24
  @blur="$emit('blur', $event)"
19
- outlined>
25
+ outlined
26
+ >
20
27
  </q-input>
21
28
  </div>
22
29
 
23
- <div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
24
- <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
30
+ <div
31
+ class="validation-errors"
32
+ v-if="invalid && internalErrors && internalErrors.length"
33
+ >
34
+ <span
35
+ class="error danger-txt-color"
36
+ v-for="(error, index) in internalErrors"
37
+ :key="index + 'error'"
38
+ >{{ error }}</span
39
+ >
25
40
  </div>
26
41
  </div>
27
42
  </template>
@@ -33,7 +48,8 @@ import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces
33
48
  import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
34
49
  import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
35
50
 
36
- interface TelFieldDefinition extends ModelFieldDefinition<FieldType.TEXT, InputType.TEL> {
51
+ interface TelFieldDefinition
52
+ extends ModelFieldDefinition<FieldType.TEXT, InputType.TEL> {
37
53
  default: string | null;
38
54
  }
39
55
 
@@ -41,104 +57,129 @@ export default defineComponent({
41
57
  props: {
42
58
  id: {
43
59
  type: String,
44
- required: true
60
+ required: true,
45
61
  },
46
62
  disable: {
47
- type: Boolean,
48
- required: false,
49
- default: false
63
+ type: Boolean,
64
+ required: false,
65
+ default: false,
50
66
  },
51
67
  field: {
52
68
  type: Object as PropType<TelFieldDefinition>,
53
- required: true
69
+ required: true,
54
70
  },
55
71
  modelValue: String,
56
72
  errors: Array as PropType<string[]>,
57
73
  showLabel: {
58
74
  type: Boolean,
59
75
  required: false,
60
- default: true
61
- }
76
+ default: true,
77
+ },
78
+ validationPattern: {
79
+ type: RegExp,
80
+ required: false,
81
+ },
82
+ validationPatternMessage: {
83
+ type: String,
84
+ required: false,
85
+ },
62
86
  },
63
87
 
64
- emits: [
65
- 'update:modelValue',
66
- 'update:invalid',
67
- 'keydown',
68
- 'blur',
69
- ],
88
+ emits: ['update:modelValue', 'update:invalid', 'keydown', 'blur'],
70
89
 
71
90
  data() {
72
91
  return {
73
92
  invalid: null as boolean | null,
74
93
  internalValue: null as E164Number | null,
75
- internalErrors: [] as string[]
94
+ internalErrors: [] as string[],
76
95
  };
77
96
  },
78
97
 
79
98
  mounted() {
80
99
  if (this.modelValue) {
81
100
  let phoneNumber = parsePhoneNumberFromString(this.modelValue);
82
- this.internalValue = (phoneNumber) ? phoneNumber.number : null;
101
+ this.internalValue = phoneNumber ? phoneNumber.number : null;
83
102
  } else if (this.field.default) {
84
103
  let phoneNumber = parsePhoneNumberFromString(this.field.default);
85
- this.internalValue = (phoneNumber) ? phoneNumber.number : null;
104
+ this.internalValue = phoneNumber ? phoneNumber.number : null;
86
105
  }
87
106
 
88
107
  this.validate(this.internalValue);
89
108
  },
90
109
 
91
110
  watch: {
92
- modelValue: function(val) {
111
+ modelValue: function (val) {
93
112
  if (val !== this.internalValue) {
94
113
  this.internalValue = val;
95
114
  }
96
115
  },
97
116
 
98
- internalValue: function(val) {
117
+ internalValue: function (val) {
118
+ if (this.validationPattern) {
119
+ const pattern = new RegExp(this.validationPattern);
120
+ this.internalErrors = [];
121
+ if (!pattern.test(val)) {
122
+ this.internalErrors.push(
123
+ this.validationPatternMessage
124
+ ? this.validationPatternMessage
125
+ : 'Invalid format'
126
+ );
127
+ }
128
+ }
99
129
  this.validate(val);
100
130
 
101
- let phoneNumber = (val && typeof val === 'string') ? parsePhoneNumberFromString(val) : null;
102
- this.$emit('update:modelValue', (phoneNumber) ? phoneNumber.number : val);
131
+ let phoneNumber =
132
+ val && typeof val === 'string'
133
+ ? parsePhoneNumberFromString(val)
134
+ : null;
135
+ this.$emit(
136
+ 'update:modelValue',
137
+ phoneNumber ? phoneNumber.number : val
138
+ );
103
139
  },
104
140
 
105
141
  errors: {
106
- handler: function(val) {
142
+ handler: function (val) {
107
143
  this.internalErrors = val;
108
144
  },
109
- deep: true
145
+ deep: true,
110
146
  },
111
147
 
112
148
  internalErrors: {
113
- handler: function(val) {
149
+ handler: function (val) {
114
150
  this.invalid = !!(val && val.length);
115
151
  },
116
- deep: true
152
+ deep: true,
117
153
  },
118
154
 
119
- invalid: function(val) {
155
+ invalid: function (val) {
120
156
  this.$emit('update:invalid', val);
121
- }
157
+ },
122
158
  },
123
159
 
124
160
  methods: {
125
- validate: function(val) {
161
+ validate: function (val) {
126
162
  if (this.field.required && !val) {
127
163
  this.invalid = true;
128
164
  } else {
129
- const phoneNumber = (val && typeof val === 'string') ? parsePhoneNumberFromString(val) : null;
165
+ const phoneNumber =
166
+ val && typeof val === 'string'
167
+ ? parsePhoneNumberFromString(val)
168
+ : null;
130
169
  this.internalErrors = [];
131
- this.invalid = (val && !(phoneNumber && phoneNumber.isValid()));
170
+ this.invalid = val && !(phoneNumber && phoneNumber.isValid());
132
171
 
133
172
  if (this.invalid) {
134
- this.internalErrors.push(this.$i18n.get('validation.phone', {attribute: this.field.label}));
173
+ this.internalErrors.push(
174
+ this.$i18n.get('validation.phone', {
175
+ attribute: this.field.label,
176
+ })
177
+ );
135
178
  }
136
179
  }
137
- }
138
- }
180
+ },
181
+ },
139
182
  });
140
183
  </script>
141
184
 
142
- <style scoped lang="scss">
143
-
144
- </style>
185
+ <style scoped lang="scss"></style>
package/fields/TextField.vue CHANGED
@@ -5,6 +5,7 @@
5
5
  :label="(showLabel) ? field.label + ((field.required) ? ' *' : '') : undefined"
6
6
  :name="field.name"
7
7
  :id="id + '-input'"
8
+ :loading="loading"
8
9
  :placeholder="field.placeholder"
9
10
  type="text"
10
11
  class="field"
@@ -13,7 +14,7 @@
13
14
  :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
15
  v-model="internalValue"
15
16
  :disable="disable"
16
- :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
17
+ :error-message="''"
17
18
  :hint="field.description"
18
19
  @keydown="$emit('keydown', $event)"
19
20
  @blur="$emit('blur', $event)"
@@ -70,6 +71,11 @@ export default defineComponent({
70
71
  validationPatternMessage: {
71
72
  type: String,
72
73
  required: false
74
+ },
75
+ loading: {
76
+ type: Boolean,
77
+ required: false,
78
+ default: false
73
79
  }
74
80
  },
75
81
 
package/fields/TextareaField.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  :minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
14
14
  v-model="internalValue"
15
15
  :disable="disable"
16
- :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
16
+ :error-message="''"
17
17
  :hint="field.description"
18
18
  @keydown="$emit('keydown', $event)"
19
19
  @blur="$emit('blur', $event)"
@@ -64,6 +64,14 @@ export default defineComponent({
64
64
  type: Boolean,
65
65
  required: false,
66
66
  default: true
67
+ },
68
+ validationPattern: {
69
+ type: RegExp,
70
+ required: false
71
+ },
72
+ validationPatternMessage: {
73
+ type: String,
74
+ required: false
67
75
  }
68
76
  },
69
77
 
@@ -100,6 +108,13 @@ export default defineComponent({
100
108
  },
101
109
 
102
110
  internalValue: function(val) {
111
+ if(this.validationPattern) {
112
+ const pattern = new RegExp(this.validationPattern);
113
+ this.internalErrors = [];
114
+ if (!pattern.test(val)) {
115
+ this.internalErrors.push((this.validationPatternMessage) ? this.validationPatternMessage : 'Invalid format');
116
+ }
117
+ }
103
118
  this.validate(val);
104
119
  this.$emit('update:modelValue', val);
105
120
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@westartcom/bread-quasar-fields",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "description": "Quasar compatible fields for bread package",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -10,18 +10,18 @@
10
10
  "author": "Christoffer",
11
11
  "license": "ISC",
12
12
  "dependencies": {
13
- "vue": "^3.4.14",
14
13
  "@quasar/extras": "^1.16.3",
15
- "quasar": "^2.12.0",
16
- "axios": "^1.6.5",
17
- "luxon": "^3.4.4",
18
- "moment": "^2.30.1",
19
- "lodash-es": "^4.17.21",
20
- "libphonenumber-js": "^1.9.19",
21
14
  "@tiptap/core": "^2.0.3",
22
15
  "@tiptap/html": "^2.0.3",
23
16
  "@tiptap/starter-kit": "^2.0.3",
24
- "@tiptap/vue-3": "^2.0.3"
17
+ "@tiptap/vue-3": "^2.0.3",
18
+ "axios": "^1.6.5",
19
+ "libphonenumber-js": "^1.9.19",
20
+ "lodash-es": "^4.17.21",
21
+ "luxon": "^3.4.4",
22
+ "moment": "^2.30.1",
23
+ "quasar": "^2.12.0",
24
+ "vue": "^3.4.14"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@types/lodash-es": "^4.17.6",