@westartcom/bread-quasar-fields 0.0.11 → 0.0.13
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/BooleanField.vue +144 -146
- package/fields/ModelSearchField.vue +34 -33
- package/package.json +1 -1
package/fields/BooleanField.vue
CHANGED
|
@@ -1,47 +1,45 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
</div>
|
|
36
|
-
</template>
|
|
2
|
+
<div class="field-wrap boolean" :id="id">
|
|
3
|
+
<div class="field-description" v-if="field.description">{{ field.description }}</div>
|
|
4
|
+
|
|
5
|
+
<div class="field-wrap-inner">
|
|
6
|
+
<template v-if="stylingFormat === 'toggle'">
|
|
7
|
+
<q-toggle
|
|
8
|
+
size="lg"
|
|
9
|
+
color="positive"
|
|
10
|
+
:label="field.label"
|
|
11
|
+
left-label
|
|
12
|
+
:disable="disable"
|
|
13
|
+
unchecked-icon="fa-solid fa-xmark"
|
|
14
|
+
checked-icon="fa-solid fa-check"
|
|
15
|
+
v-model="internalValue" />
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<template v-else>
|
|
19
|
+
<div class="field-label-wrap">
|
|
20
|
+
<div class="field">
|
|
21
|
+
<label v-if="field.label || field.extra_data.alternative_label" :for="id + '-input'">
|
|
22
|
+
<input
|
|
23
|
+
:id="id + '-input'"
|
|
24
|
+
type="checkbox"
|
|
25
|
+
hidden="true"
|
|
26
|
+
:disabled="disable"
|
|
27
|
+
v-model="internalValue">
|
|
28
|
+
|
|
29
|
+
<i class="icon fa-solid fa-square-check fa-fw" v-if="internalValue"></i>
|
|
30
|
+
<i class="icon fa-solid fa-square fa-fw" v-if="!internalValue"></i>
|
|
31
|
+
|
|
32
|
+
{{ field.extra_data.alternative_label ?? field.label }}<span class="required-asterix" v-if="field.required"> *</span>
|
|
33
|
+
</label>
|
|
34
|
+
</div>
|
|
37
35
|
</div>
|
|
36
|
+
</template>
|
|
37
|
+
</div>
|
|
38
38
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
<div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
|
|
42
|
-
<span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
|
|
43
|
-
</div>
|
|
39
|
+
<div class="validation-errors" v-if="invalid && internalErrors && internalErrors.length">
|
|
40
|
+
<span class="error danger-txt-color" v-for="(error, index) in internalErrors" :key="index + 'error'">{{ error }}</span>
|
|
44
41
|
</div>
|
|
42
|
+
</div>
|
|
45
43
|
</template>
|
|
46
44
|
|
|
47
45
|
<script lang="ts">
|
|
@@ -51,133 +49,133 @@ import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
|
|
|
51
49
|
import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
|
|
52
50
|
|
|
53
51
|
interface BoolFieldDefinition extends ModelFieldDefinition<FieldType.BOOL, InputType.BOOL> {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
52
|
+
default: boolean;
|
|
53
|
+
extra_data: {
|
|
54
|
+
styling_format: 'checkbox' | 'toggle'
|
|
55
|
+
}
|
|
58
56
|
}
|
|
59
57
|
|
|
60
58
|
export default defineComponent({
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
},
|
|
71
|
-
field: {
|
|
72
|
-
type: Object as PropType<BoolFieldDefinition>,
|
|
73
|
-
required: true
|
|
74
|
-
},
|
|
75
|
-
modelValue: [Boolean, Number, String],
|
|
76
|
-
errors: Array as PropType<string[]>
|
|
59
|
+
props: {
|
|
60
|
+
id: {
|
|
61
|
+
type: String,
|
|
62
|
+
required: true
|
|
63
|
+
},
|
|
64
|
+
disable: {
|
|
65
|
+
type: Boolean,
|
|
66
|
+
required: false,
|
|
67
|
+
default: false
|
|
77
68
|
},
|
|
69
|
+
field: {
|
|
70
|
+
type: Object as PropType<BoolFieldDefinition>,
|
|
71
|
+
required: true
|
|
72
|
+
},
|
|
73
|
+
modelValue: [Boolean, Number, String],
|
|
74
|
+
errors: Array as PropType<string[]>
|
|
75
|
+
},
|
|
76
|
+
|
|
77
|
+
emits: [
|
|
78
|
+
'update:modelValue',
|
|
79
|
+
'update:invalid'
|
|
80
|
+
],
|
|
81
|
+
|
|
82
|
+
components: {
|
|
83
|
+
CheckboxBlankOutlineIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxBlankOutlineIcon.vue')),
|
|
84
|
+
CheckboxMarkedIcon: defineAsyncComponent(() => import('@westartcom/bread-quasar-fields/icons/CheckboxMarkedIcon.vue'))
|
|
85
|
+
},
|
|
86
|
+
|
|
87
|
+
data() {
|
|
88
|
+
return {
|
|
89
|
+
invalid: null as boolean | null,
|
|
90
|
+
internalValue: false,
|
|
91
|
+
internalErrors: [] as string[]
|
|
92
|
+
};
|
|
93
|
+
},
|
|
94
|
+
|
|
95
|
+
mounted() {
|
|
96
|
+
if (this.modelValue !== null && typeof this.modelValue !== 'undefined') {
|
|
97
|
+
this.internalValue = (!(!this.modelValue || this.modelValue === '0'));
|
|
98
|
+
} else if (this.field.default) {
|
|
99
|
+
this.internalValue = this.field.default;
|
|
100
|
+
}
|
|
78
101
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
'update:invalid'
|
|
82
|
-
],
|
|
102
|
+
this.validate(this.internalValue);
|
|
103
|
+
},
|
|
83
104
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}
|
|
105
|
+
computed: {
|
|
106
|
+
stylingFormat: function(): 'checkbox' | 'toggle' {
|
|
107
|
+
return (this.field?.extra_data?.styling_format) ? this.field.extra_data.styling_format : 'checkbox';
|
|
108
|
+
}
|
|
109
|
+
},
|
|
88
110
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
};
|
|
111
|
+
watch: {
|
|
112
|
+
modelValue: function(val) {
|
|
113
|
+
if (val !== this.internalValue) {
|
|
114
|
+
this.internalValue = !!(val);
|
|
115
|
+
}
|
|
95
116
|
},
|
|
96
117
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
} else if (this.field.default) {
|
|
101
|
-
this.internalValue = this.field.default;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
this.validate(this.internalValue);
|
|
118
|
+
internalValue: function(val) {
|
|
119
|
+
this.validate(val);
|
|
120
|
+
this.$emit('update:modelValue', val);
|
|
105
121
|
},
|
|
106
122
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
123
|
+
errors: {
|
|
124
|
+
handler: function(val) {
|
|
125
|
+
this.internalErrors = val;
|
|
126
|
+
},
|
|
127
|
+
deep: true
|
|
111
128
|
},
|
|
112
129
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
},
|
|
119
|
-
|
|
120
|
-
internalValue: function(val) {
|
|
121
|
-
this.validate(val);
|
|
122
|
-
this.$emit('update:modelValue', val);
|
|
123
|
-
},
|
|
124
|
-
|
|
125
|
-
errors: {
|
|
126
|
-
handler: function(val) {
|
|
127
|
-
this.internalErrors = val;
|
|
128
|
-
},
|
|
129
|
-
deep: true
|
|
130
|
-
},
|
|
131
|
-
|
|
132
|
-
internalErrors: {
|
|
133
|
-
handler: function(val) {
|
|
134
|
-
this.invalid = !!(val && val.length);
|
|
135
|
-
},
|
|
136
|
-
deep: true
|
|
137
|
-
},
|
|
138
|
-
|
|
139
|
-
invalid: function(val) {
|
|
140
|
-
this.$emit('update:invalid', val);
|
|
141
|
-
}
|
|
130
|
+
internalErrors: {
|
|
131
|
+
handler: function(val) {
|
|
132
|
+
this.invalid = !!(val && val.length);
|
|
133
|
+
},
|
|
134
|
+
deep: true
|
|
142
135
|
},
|
|
143
136
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
137
|
+
invalid: function(val) {
|
|
138
|
+
this.$emit('update:invalid', val);
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
|
|
142
|
+
methods: {
|
|
143
|
+
validate: function(val) {
|
|
144
|
+
this.invalid = this.field.required && !val;
|
|
148
145
|
}
|
|
146
|
+
}
|
|
149
147
|
});
|
|
150
148
|
</script>
|
|
151
149
|
|
|
152
150
|
<style scoped lang="scss">
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
.btn {
|
|
159
|
-
border-radius: 0;
|
|
160
|
-
|
|
161
|
-
&:first-of-type {
|
|
162
|
-
border-bottom-left-radius: var(--global-radius);
|
|
163
|
-
border-top-left-radius: var(--global-radius);
|
|
164
|
-
}
|
|
165
|
-
&:last-of-type {
|
|
166
|
-
border-bottom-right-radius: var(--global-radius);
|
|
167
|
-
border-top-right-radius: var(--global-radius);
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
151
|
+
.toggle {
|
|
152
|
+
display: flex;
|
|
153
|
+
max-width: var(--max-input-width);
|
|
154
|
+
width: 100%;
|
|
171
155
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
user-select: none;
|
|
175
|
-
cursor: pointer;
|
|
176
|
-
display: inline-flex;
|
|
177
|
-
align-items: flex-end;
|
|
156
|
+
.btn {
|
|
157
|
+
border-radius: 0;
|
|
178
158
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
159
|
+
&:first-of-type {
|
|
160
|
+
border-bottom-left-radius: var(--global-radius);
|
|
161
|
+
border-top-left-radius: var(--global-radius);
|
|
162
|
+
}
|
|
163
|
+
&:last-of-type {
|
|
164
|
+
border-bottom-right-radius: var(--global-radius);
|
|
165
|
+
border-top-right-radius: var(--global-radius);
|
|
182
166
|
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.field > label {
|
|
171
|
+
margin-right: var(--global-spacing);
|
|
172
|
+
user-select: none;
|
|
173
|
+
cursor: pointer;
|
|
174
|
+
display: inline-flex;
|
|
175
|
+
align-items: flex-end;
|
|
176
|
+
|
|
177
|
+
:deep(svg) {
|
|
178
|
+
margin-right: var(--global-spacing-half);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
183
181
|
</style>
|
|
@@ -116,39 +116,40 @@
|
|
|
116
116
|
{{ option[displayField] }}
|
|
117
117
|
</template>
|
|
118
118
|
</q-chip>
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
119
|
+
|
|
120
|
+
<div class="selected-options-multiple table-list" v-if="multiValueStyle === 'table' && selectedOptions.length && field.extra_data.multiple">
|
|
121
|
+
<div class="labels table-header" v-if="showLabels">
|
|
122
|
+
<div class="label column" v-for="(label, displayField) of field.extra_data.display_field_labels" :key="displayField">
|
|
123
|
+
{{ label }}
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="selected-option-row table-row" v-for="option in selectedOptions" :key="option.id">
|
|
127
|
+
<template v-if="showLabels">
|
|
128
|
+
<slot name="selected-option-label" :option="option" :display-fields="displayFields">
|
|
129
|
+
<div class="selected-option-label column" v-for="(label, displayField) of field.extra_data.display_field_labels" :key="displayField">{{ option[displayField] }}</div>
|
|
130
|
+
</slot>
|
|
131
|
+
</template>
|
|
132
|
+
<template v-else>
|
|
133
|
+
<div class="selected-option-label text-weight-bold column">
|
|
134
|
+
<slot name="selected-option-label" :option="option" :display-fields="displayFields">
|
|
135
|
+
<template v-for="displayField in displayFields">
|
|
136
|
+
{{ option[displayField] }}
|
|
137
|
+
</template>
|
|
138
|
+
</slot>
|
|
139
|
+
</div>
|
|
140
|
+
</template>
|
|
141
|
+
<div class="column actions">
|
|
142
|
+
<slot name="selected-option-actions" :option="option" />
|
|
143
|
+
<q-btn
|
|
144
|
+
flat
|
|
145
|
+
round
|
|
146
|
+
icon="fa-solid fa-trash"
|
|
147
|
+
color="negative"
|
|
148
|
+
:title="$i18n.get('actions.remove')"
|
|
149
|
+
@click="removeOption(option)"></q-btn>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
152
153
|
|
|
153
154
|
<div class="selected-options-multiple tags" v-else-if="multiValueStyle === 'tags' && selectedOptions.length && field.extra_data.multiple">
|
|
154
155
|
<div class="selected-option-tag" v-for="option in selectedOptions" :key="option.id">
|