@westartcom/bread-quasar-fields 0.0.8 → 0.0.10
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.
- package/fields/CheckboxField.vue +25 -19
- package/fields/DateField.vue +11 -10
- package/fields/ModelSearchField.vue +45 -34
- package/fields/SelectField.vue +0 -47
- 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
|
-
<i class="fa-regular fa-square-check fa-fw" v-if="internalValue && internalValue.includes(optionValue)"></i>
|
|
23
|
-
<i class="fa-regular fa-square fa-fw" v-if="!internalValue || !internalValue.includes(optionValue)"></i>
|
|
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>
|
|
@@ -160,4 +160,10 @@ export default defineComponent({
|
|
|
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/DateField.vue
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="field-wrap" :id="id">
|
|
3
3
|
<div class="field-wrap-inner">
|
|
4
|
-
<
|
|
5
|
-
|
|
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
|
-
:
|
|
16
|
-
:
|
|
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
|
<em class="field-description" v-if="field.description">{{ field.description }}</em>
|
|
20
21
|
|
|
@@ -70,9 +71,9 @@ export default defineComponent({
|
|
|
70
71
|
|
|
71
72
|
mounted() {
|
|
72
73
|
if (this.modelValue) {
|
|
73
|
-
this.internalValue = formatDate(this.modelValue, 'yyyy-MM-dd');
|
|
74
|
+
this.internalValue = this.formatDate(this.modelValue, 'yyyy-MM-dd');
|
|
74
75
|
} else if (this.field.default) {
|
|
75
|
-
this.internalValue = formatDate(this.field.default, 'yyyy-MM-dd');
|
|
76
|
+
this.internalValue = this.formatDate(this.field.default, 'yyyy-MM-dd');
|
|
76
77
|
}
|
|
77
78
|
|
|
78
79
|
this.validate(this.internalValue);
|
|
@@ -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
|
-
<
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
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/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>
|