@westartcom/bread-quasar-fields 0.0.9 → 0.0.11

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 (13) hide show
  1. package/fields/BooleanField.vue +7 -0
  2. package/fields/CheckboxField.vue +6 -0
  3. package/fields/DateField.vue +17 -10
  4. package/fields/DateTimeField.vue +7 -1
  5. package/fields/EmailField.vue +6 -0
  6. package/fields/ModelSearchField.vue +45 -34
  7. package/fields/NumberField.vue +6 -0
  8. package/fields/RadioField.vue +7 -0
  9. package/fields/SelectField.vue +0 -47
  10. package/fields/TelField.vue +6 -0
  11. package/fields/TextField.vue +6 -0
  12. package/fields/TextareaField.vue +6 -0
  13. package/package.json +1 -1
package/fields/BooleanField.vue CHANGED
@@ -7,6 +7,7 @@
7
7
  color="positive"
8
8
  :label="field.label"
9
9
  left-label
10
+ :disable="disable"
10
11
  unchecked-icon="fa-solid fa-xmark"
11
12
  checked-icon="fa-solid fa-check"
12
13
  v-model="internalValue" />
@@ -24,6 +25,7 @@
24
25
  :id="id + '-input'"
25
26
  type="checkbox"
26
27
  style="display: none;"
28
+ :disabled="disable"
27
29
  :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
28
30
  v-model="internalValue">
29
31
 
@@ -61,6 +63,11 @@ export default defineComponent({
61
63
  type: String,
62
64
  required: true
63
65
  },
66
+ disable: {
67
+ type: Boolean,
68
+ required: false,
69
+ default: false
70
+ },
64
71
  field: {
65
72
  type: Object as PropType<BoolFieldDefinition>,
66
73
  required: true
package/fields/CheckboxField.vue CHANGED
@@ -19,6 +19,7 @@
19
19
  :id="id + '-' + optionValue + '-radio-input'"
20
20
  type="checkbox"
21
21
  hidden="true"
22
+ :disabled="disable"
22
23
  :value="optionValue"
23
24
  v-model="internalValue">
24
25
 
@@ -57,6 +58,11 @@ export default defineComponent({
57
58
  type: String,
58
59
  required: true
59
60
  },
61
+ disable: {
62
+ type: Boolean,
63
+ required: false,
64
+ default: false
65
+ },
60
66
  field: {
61
67
  type: Object as PropType<CheckboxFieldDefinition>,
62
68
  required: true
package/fields/DateField.vue CHANGED
@@ -1,20 +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
8
  :placeholder="field.placeholder"
12
9
  type="date"
13
10
  class="field"
14
11
  :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
15
- :max="formatDate(((field.extra_data?.max) ? field.extra_data.max : null), 'yyyy-MM-dd')"
16
- :min="formatDate(((field.extra_data?.min) ? field.extra_data.min : null), 'yyyy-MM-dd')"
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
+ :disable="disable"
16
+ :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
17
+ :hint="field.description"
18
+ outlined>
19
+ </q-input>
18
20
  </div>
19
21
  <em class="field-description" v-if="field.description">{{ field.description }}</em>
20
22
 
@@ -47,6 +49,11 @@ export default defineComponent({
47
49
  type: String,
48
50
  required: true
49
51
  },
52
+ disable: {
53
+ type: Boolean,
54
+ required: false,
55
+ default: false
56
+ },
50
57
  field: {
51
58
  type: Object as PropType<DateFieldDefinition>,
52
59
  required: true
@@ -70,9 +77,9 @@ export default defineComponent({
70
77
 
71
78
  mounted() {
72
79
  if (this.modelValue) {
73
- this.internalValue = formatDate(this.modelValue, 'yyyy-MM-dd');
80
+ this.internalValue = this.formatDate(this.modelValue, 'yyyy-MM-dd');
74
81
  } else if (this.field.default) {
75
- this.internalValue = formatDate(this.field.default, 'yyyy-MM-dd');
82
+ this.internalValue = this.formatDate(this.field.default, 'yyyy-MM-dd');
76
83
  }
77
84
 
78
85
  this.validate(this.internalValue);
package/fields/DateTimeField.vue CHANGED
@@ -11,6 +11,7 @@
11
11
  :placeholder="field.placeholder"
12
12
  type="datetime-local"
13
13
  class="field"
14
+ :disabled="disable"
14
15
  :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
15
16
  :max="formatDate(((field.extra_data && field.extra_data.max) ? field.extra_data.max : null), 'YYYY-MM-DDTHH:mm')"
16
17
  :min="formatDate(((field.extra_data && field.extra_data.min) ? field.extra_data.min : null), 'YYYY-MM-DDTHH:mm')"
@@ -33,7 +34,12 @@ export default {
33
34
  id: String,
34
35
  field: Object,
35
36
  modelValue: String,
36
- errors: Array
37
+ errors: Array,
38
+ disable: {
39
+ type: Boolean,
40
+ required: false,
41
+ default: false
42
+ },
37
43
  },
38
44
 
39
45
  emits: [
package/fields/EmailField.vue CHANGED
@@ -12,6 +12,7 @@
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
+ :disable="disable"
15
16
  :rules="(field.required) ? [val => !!val || $i18n.get('validation.required', { attribute: field.label as string })] : []"
16
17
  :hint="field.description"
17
18
  :errors="internalErrors"
@@ -41,6 +42,11 @@ export default defineComponent({
41
42
  type: String,
42
43
  required: true
43
44
  },
45
+ disable: {
46
+ type: Boolean,
47
+ required: false,
48
+ default: false
49
+ },
44
50
  field: {
45
51
  type: Object as PropType<EmailFieldDefinition>,
46
52
  required: true
package/fields/ModelSearchField.vue CHANGED
@@ -105,39 +105,50 @@
105
105
  <span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
106
106
  </div>
107
107
 
108
- <div class="selected-options-multiple table-list" v-if="multiValueStyle === 'table' && selectedOptions.length && field.extra_data.multiple">
109
- <div class="labels table-header" v-if="showLabels">
110
- <div class="label column" v-for="(label, displayField) of field.extra_data.display_field_labels" :key="displayField">
111
- {{ label }}
112
- </div>
113
- </div>
114
- <div class="selected-option-row table-row" v-for="option in selectedOptions" :key="option.id">
115
- <template v-if="showLabels">
116
- <slot name="selected-option-label" :option="option" :display-fields="displayFields">
117
- <div class="selected-option-label column" v-for="(label, displayField) of field.extra_data.display_field_labels" :key="displayField">{{ option[displayField] }}</div>
118
- </slot>
119
- </template>
120
- <template v-else>
121
- <div class="selected-option-label text-weight-bold column">
122
- <slot name="selected-option-label" :option="option" :display-fields="displayFields">
123
- <template v-for="displayField in displayFields">
124
- {{ option[displayField] }}
125
- </template>
126
- </slot>
127
- </div>
128
- </template>
129
- <div class="column actions">
130
- <slot name="selected-option-actions" :option="option" />
131
- <q-btn
132
- flat
133
- round
134
- icon="fa-solid fa-trash"
135
- color="negative"
136
- :title="$i18n.get('actions.remove')"
137
- @click="removeOption(option)"></q-btn>
138
- </div>
139
- </div>
140
- </div>
108
+ <q-chip
109
+ v-if="multiValueStyle === 'chips' && selectedOptions.length && field.extra_data.multiple"
110
+ removable
111
+ color="primary"
112
+ text-color="white"
113
+ @remove="removeOption(option)"
114
+ v-for="option in selectedOptions">
115
+ <template v-for="displayField in displayFields">
116
+ {{ option[displayField] }}
117
+ </template>
118
+ </q-chip>
119
+ <!-- <div class="selected-options-multiple table-list" v-if="multiValueStyle === 'table' && selectedOptions.length && field.extra_data.multiple">-->
120
+ <!-- <div class="labels table-header" v-if="showLabels">-->
121
+ <!-- <div class="label column" v-for="(label, displayField) of field.extra_data.display_field_labels" :key="displayField">-->
122
+ <!-- {{ label }}-->
123
+ <!-- </div>-->
124
+ <!-- </div>-->
125
+ <!-- <div class="selected-option-row table-row" v-for="option in selectedOptions" :key="option.id">-->
126
+ <!-- <template v-if="showLabels">-->
127
+ <!-- <slot name="selected-option-label" :option="option" :display-fields="displayFields">-->
128
+ <!-- <div class="selected-option-label column" v-for="(label, displayField) of field.extra_data.display_field_labels" :key="displayField">{{ option[displayField] }}</div>-->
129
+ <!-- </slot>-->
130
+ <!-- </template>-->
131
+ <!-- <template v-else>-->
132
+ <!-- <div class="selected-option-label text-weight-bold column">-->
133
+ <!-- <slot name="selected-option-label" :option="option" :display-fields="displayFields">-->
134
+ <!-- <template v-for="displayField in displayFields">-->
135
+ <!-- {{ option[displayField] }}-->
136
+ <!-- </template>-->
137
+ <!-- </slot>-->
138
+ <!-- </div>-->
139
+ <!-- </template>-->
140
+ <!-- <div class="column actions">-->
141
+ <!-- <slot name="selected-option-actions" :option="option" />-->
142
+ <!-- <q-btn-->
143
+ <!-- flat-->
144
+ <!-- round-->
145
+ <!-- icon="fa-solid fa-trash"-->
146
+ <!-- color="negative"-->
147
+ <!-- :title="$i18n.get('actions.remove')"-->
148
+ <!-- @click="removeOption(option)"></q-btn>-->
149
+ <!-- </div>-->
150
+ <!-- </div>-->
151
+ <!-- </div>-->
141
152
 
142
153
  <div class="selected-options-multiple tags" v-else-if="multiValueStyle === 'tags' && selectedOptions.length && field.extra_data.multiple">
143
154
  <div class="selected-option-tag" v-for="option in selectedOptions" :key="option.id">
@@ -328,7 +339,7 @@ export default defineComponent({
328
339
  return !!(Object.keys(this.concatenatedDisplayFields).length > 1 && this.field.extra_data.display_field_labels);
329
340
  },
330
341
 
331
- multiValueStyle: function(): 'select' | 'tags' | 'table' {
342
+ multiValueStyle: function(): 'select' | 'tags' | 'table' | 'chips' {
332
343
  return this.field?.extra_data?.styling_format || 'table';
333
344
  }
334
345
  },
package/fields/NumberField.vue CHANGED
@@ -12,6 +12,7 @@
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
+ :disable="disable"
15
16
  :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
16
17
  :hint="field.description"
17
18
  outlined>
@@ -40,6 +41,11 @@ export default defineComponent({
40
41
  type: String,
41
42
  required: true
42
43
  },
44
+ disable: {
45
+ type: Boolean,
46
+ required: false,
47
+ default: false
48
+ },
43
49
  field: {
44
50
  type: Object as PropType<NumberFieldDefinition>,
45
51
  required: true
package/fields/RadioField.vue CHANGED
@@ -14,6 +14,7 @@
14
14
  :key="id + '-' + optionValue + '-radio-input'"
15
15
  type="button"
16
16
  class="btn expand"
17
+ :disabled="disable"
17
18
  @click="internalValue = optionValue"
18
19
  :class="{
19
20
  'normal-filled': (internalValue === optionValue && !invalid),
@@ -35,6 +36,7 @@
35
36
  :id="id + '-' + optionValue + '-radio-input'"
36
37
  type="radio"
37
38
  :value="optionValue"
39
+ :disabled="disable"
38
40
  v-model="internalValue">
39
41
 
40
42
  {{ label }}
@@ -73,6 +75,11 @@ export default defineComponent({
73
75
  type: String,
74
76
  required: true
75
77
  },
78
+ disable: {
79
+ type: Boolean,
80
+ required: false,
81
+ default: false
82
+ },
76
83
  field: {
77
84
  type: Object as PropType<RadioFieldDefinition>,
78
85
  required: true
package/fields/SelectField.vue CHANGED
@@ -24,53 +24,6 @@
24
24
  </q-chip>
25
25
  </template>
26
26
  </q-select>
27
-
28
- <!-- <div class="select">-->
29
- <!-- <div class="selected" @click="toggleOptions">-->
30
- <!-- <span class="label" :class="{'placeholder': (!allOptions[internalValue] && field.placeholder || field.extra_data.multiple)}">-->
31
- <!-- <template v-if="(!allOptions[internalValue] || field.extra_data.multiple) && field.placeholder">-->
32
- <!-- {{ field.placeholder }}-->
33
- <!-- </template>-->
34
- <!-- <template v-else-if="field.extra_data.multiple">-->
35
- <!-- {{ $i18n.get('actions.add') }}-->
36
- <!-- </template>-->
37
- <!-- <template v-else>-->
38
- <!-- {{ allOptions[internalValue] }}-->
39
- <!-- </template>-->
40
- <!-- </span>-->
41
- <!-- <span class="toggle-button">-->
42
- <!-- <chevron-down-icon v-if="!select.visible" />-->
43
- <!-- <chevron-up-icon v-else />-->
44
- <!-- </span>-->
45
- <!-- </div>-->
46
-
47
- <!-- <div class="options" v-if="select.visible">-->
48
- <!-- <div class="search" v-if="Object.keys(allOptions).length > 20">-->
49
- <!-- <input type="text" :placeholder="$i18n.get('actions.search')" v-model="select.searchQuery">-->
50
- <!-- </div>-->
51
-
52
- <!-- <div v-if="!field.required && !field.extra_data.multiple" class="option" @click="selectOption(null)">-->
53
- <!-- <slot name="no-option-label">-->
54
- <!-- {{ $i18n.get('generic.no_option') }}-->
55
- <!-- </slot>-->
56
- <!-- </div>-->
57
-
58
- <!-- <div-->
59
- <!-- v-for="(label, optionValue) in filteredOptions"-->
60
- <!-- :key="optionValue + '-option'"-->
61
- <!-- class="option"-->
62
- <!-- :class="{'selected-option': (internalValue && internalValue.includes(optionValue))}"-->
63
- <!-- @click="selectOption(optionValue)">-->
64
- <!-- <slot name="option" :option-value="optionValue" :label="label">-->
65
- <!-- {{ label }}-->
66
- <!-- </slot>-->
67
- <!-- </div>-->
68
-
69
- <!-- <div class="no-result" v-if="!Object.keys(filteredOptions).length">-->
70
- <!-- {{ $i18n.get('generic.no_result') }}-->
71
- <!-- </div>-->
72
- <!-- </div>-->
73
- <!-- </div>-->
74
27
  </div>
75
28
 
76
29
  <div class="field-description" v-if="field.description">{{ field.description }}</div>
package/fields/TelField.vue CHANGED
@@ -11,6 +11,7 @@
11
11
  :class="{'invalid': (invalid && internalErrors && internalErrors.length)}"
12
12
  :maxlength="255"
13
13
  v-model="internalValue"
14
+ :disable="disable"
14
15
  :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
15
16
  :hint="field.description"
16
17
  outlined>
@@ -40,6 +41,11 @@ export default defineComponent({
40
41
  type: String,
41
42
  required: true
42
43
  },
44
+ disable: {
45
+ type: Boolean,
46
+ required: false,
47
+ default: false
48
+ },
43
49
  field: {
44
50
  type: Object as PropType<TelFieldDefinition>,
45
51
  required: true
package/fields/TextField.vue CHANGED
@@ -12,6 +12,7 @@
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
+ :disable="disable"
15
16
  :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
16
17
  :hint="field.description"
17
18
  outlined>
@@ -44,6 +45,11 @@ export default defineComponent({
44
45
  type: String,
45
46
  required: true
46
47
  },
48
+ disable: {
49
+ type: Boolean,
50
+ required: false,
51
+ default: false
52
+ },
47
53
  field: {
48
54
  type: Object as PropType<TextFieldDefinition>,
49
55
  required: true
package/fields/TextareaField.vue CHANGED
@@ -12,6 +12,7 @@
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
+ :disable="disable"
15
16
  :rules="(field.required) ? [val => !!val || 'Field is required'] : []"
16
17
  :hint="field.description"
17
18
  outlined>
@@ -46,6 +47,11 @@ export default defineComponent({
46
47
  type: String,
47
48
  required: true
48
49
  },
50
+ disable: {
51
+ type: Boolean,
52
+ required: false,
53
+ default: false
54
+ },
49
55
  field: {
50
56
  type: Object as PropType<TextareaFieldDefinition>,
51
57
  required: true
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@westartcom/bread-quasar-fields",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "description": "Quasar compatible fields for bread package",
5
5
  "main": "index.js",
6
6
  "scripts": {