@dative-gpi/foundation-shared-components 0.0.220 → 0.0.222
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/components/FSDialog.vue +20 -67
- package/components/FSDialogContent.vue +133 -0
- package/components/FSDialogForm.vue +24 -237
- package/components/FSDialogFormBody.vue +273 -0
- package/components/FSDialogMultiForm.vue +20 -198
- package/components/FSDialogMultiFormBody.vue +231 -0
- package/components/autocompletes/FSAutocompleteTag.vue +129 -0
- package/components/fields/FSAutocompleteField.vue +29 -20
- package/package.json +4 -4
package/components/FSDialog.vue
CHANGED
|
@@ -6,53 +6,25 @@
|
|
|
6
6
|
@update:modelValue="$emit('update:modelValue', $event)"
|
|
7
7
|
v-bind="$attrs"
|
|
8
8
|
>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<template
|
|
17
|
-
#header
|
|
9
|
+
<slot>
|
|
10
|
+
<FSDialogContent
|
|
11
|
+
:title="$props.title"
|
|
12
|
+
:subtitle="$props.subtitle"
|
|
13
|
+
:width="$props.width"
|
|
14
|
+
:modelValue="$props.modelValue"
|
|
15
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
18
16
|
>
|
|
19
|
-
<
|
|
20
|
-
|
|
17
|
+
<template
|
|
18
|
+
v-for="(_, name) in $slots"
|
|
19
|
+
v-slot:[name]="slotData"
|
|
21
20
|
>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
{{ $props.title }}
|
|
30
|
-
</FSText>
|
|
31
|
-
<v-spacer />
|
|
32
|
-
<FSButton
|
|
33
|
-
icon="mdi-close"
|
|
34
|
-
variant="icon"
|
|
35
|
-
:color="ColorEnum.Dark"
|
|
36
|
-
@click="$emit('update:modelValue', false)"
|
|
37
|
-
/>
|
|
38
|
-
</FSRow>
|
|
39
|
-
<FSText
|
|
40
|
-
v-if="$props.subtitle"
|
|
41
|
-
>
|
|
42
|
-
{{ $props.subtitle }}
|
|
43
|
-
</FSText>
|
|
44
|
-
</FSCol>
|
|
45
|
-
</template>
|
|
46
|
-
<template
|
|
47
|
-
v-for="(_, name) in $slots"
|
|
48
|
-
v-slot:[name]="slotData"
|
|
49
|
-
>
|
|
50
|
-
<slot
|
|
51
|
-
:name="name"
|
|
52
|
-
v-bind="slotData"
|
|
53
|
-
/>
|
|
54
|
-
</template>
|
|
55
|
-
</FSCard>
|
|
21
|
+
<slot
|
|
22
|
+
:name="name"
|
|
23
|
+
v-bind="slotData"
|
|
24
|
+
/>
|
|
25
|
+
</template>
|
|
26
|
+
</FSDialogContent>
|
|
27
|
+
</slot>
|
|
56
28
|
</v-dialog>
|
|
57
29
|
</template>
|
|
58
30
|
|
|
@@ -60,23 +32,14 @@
|
|
|
60
32
|
import type { PropType } from "vue";
|
|
61
33
|
import { computed, defineComponent } from "vue";
|
|
62
34
|
|
|
63
|
-
import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
|
|
64
|
-
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
65
35
|
import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
|
|
66
|
-
import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
|
|
67
36
|
|
|
68
|
-
import
|
|
69
|
-
import FSCard from "./FSCard.vue";
|
|
70
|
-
import FSText from "./FSText.vue";
|
|
71
|
-
import FSRow from "./FSRow.vue";
|
|
37
|
+
import FSDialogContent from "./FSDialogContent";
|
|
72
38
|
|
|
73
39
|
export default defineComponent({
|
|
74
40
|
name: "FSDialog",
|
|
75
41
|
components: {
|
|
76
|
-
|
|
77
|
-
FSCard,
|
|
78
|
-
FSText,
|
|
79
|
-
FSRow
|
|
42
|
+
FSDialogContent
|
|
80
43
|
},
|
|
81
44
|
props: {
|
|
82
45
|
title: {
|
|
@@ -111,7 +74,7 @@ export default defineComponent({
|
|
|
111
74
|
}
|
|
112
75
|
},
|
|
113
76
|
emits: ["update:modelValue"],
|
|
114
|
-
setup(
|
|
77
|
+
setup() {
|
|
115
78
|
const { isExtraSmall } = useBreakpoints();
|
|
116
79
|
|
|
117
80
|
const classes = computed((): string[] => {
|
|
@@ -125,17 +88,7 @@ export default defineComponent({
|
|
|
125
88
|
return classNames;
|
|
126
89
|
});
|
|
127
90
|
|
|
128
|
-
const cardWidth = computed((): string => {
|
|
129
|
-
if (isExtraSmall.value) {
|
|
130
|
-
return "100%";
|
|
131
|
-
}
|
|
132
|
-
return sizeToVar(props.width);
|
|
133
|
-
});
|
|
134
|
-
|
|
135
91
|
return {
|
|
136
|
-
isExtraSmall,
|
|
137
|
-
cardWidth,
|
|
138
|
-
ColorEnum,
|
|
139
92
|
classes
|
|
140
93
|
};
|
|
141
94
|
}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSCard
|
|
3
|
+
padding="24px 8px 24px 24px"
|
|
4
|
+
gap="24px"
|
|
5
|
+
:class="$props.cardClasses"
|
|
6
|
+
:color="$props.color"
|
|
7
|
+
:width="cardWidth"
|
|
8
|
+
>
|
|
9
|
+
<template
|
|
10
|
+
#header
|
|
11
|
+
>
|
|
12
|
+
<FSCol
|
|
13
|
+
padding="0 16px 0 0"
|
|
14
|
+
>
|
|
15
|
+
<FSRow
|
|
16
|
+
align="center-left"
|
|
17
|
+
:wrap="false"
|
|
18
|
+
>
|
|
19
|
+
<FSText
|
|
20
|
+
font="text-h2"
|
|
21
|
+
>
|
|
22
|
+
{{ $props.title }}
|
|
23
|
+
</FSText>
|
|
24
|
+
<v-spacer />
|
|
25
|
+
<FSButton
|
|
26
|
+
icon="mdi-close"
|
|
27
|
+
variant="icon"
|
|
28
|
+
:color="ColorEnum.Dark"
|
|
29
|
+
@click="$emit('update:modelValue', false)"
|
|
30
|
+
/>
|
|
31
|
+
</FSRow>
|
|
32
|
+
<FSText
|
|
33
|
+
v-if="$props.subtitle"
|
|
34
|
+
>
|
|
35
|
+
{{ $props.subtitle }}
|
|
36
|
+
</FSText>
|
|
37
|
+
</FSCol>
|
|
38
|
+
</template>
|
|
39
|
+
<template
|
|
40
|
+
v-for="(_, name) in $slots"
|
|
41
|
+
v-slot:[name]="slotData"
|
|
42
|
+
>
|
|
43
|
+
<slot
|
|
44
|
+
:name="name"
|
|
45
|
+
v-bind="slotData"
|
|
46
|
+
/>
|
|
47
|
+
</template>
|
|
48
|
+
</FSCard>
|
|
49
|
+
</template>
|
|
50
|
+
|
|
51
|
+
<script lang="ts">
|
|
52
|
+
import { computed, defineComponent, type PropType } from "vue";
|
|
53
|
+
|
|
54
|
+
import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
55
|
+
import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
|
|
56
|
+
import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
|
|
57
|
+
|
|
58
|
+
import FSButton from "./FSButton.vue";
|
|
59
|
+
import FSCard from "./FSCard.vue";
|
|
60
|
+
import FSText from "./FSText.vue";
|
|
61
|
+
import FSRow from "./FSRow.vue";
|
|
62
|
+
|
|
63
|
+
export default defineComponent({
|
|
64
|
+
name: "FSDialogContent",
|
|
65
|
+
components: {
|
|
66
|
+
FSButton,
|
|
67
|
+
FSCard,
|
|
68
|
+
FSText,
|
|
69
|
+
FSRow
|
|
70
|
+
},
|
|
71
|
+
props: {
|
|
72
|
+
title: {
|
|
73
|
+
type: String as PropType<string | null>,
|
|
74
|
+
required: false,
|
|
75
|
+
default: null
|
|
76
|
+
},
|
|
77
|
+
subtitle: {
|
|
78
|
+
type: String as PropType<string | null>,
|
|
79
|
+
required: false,
|
|
80
|
+
default: null
|
|
81
|
+
},
|
|
82
|
+
width: {
|
|
83
|
+
type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
|
|
84
|
+
required: false,
|
|
85
|
+
default: "fit-content"
|
|
86
|
+
},
|
|
87
|
+
cardClasses: {
|
|
88
|
+
type: [Array, String] as PropType<string[] | string | null>,
|
|
89
|
+
required: false,
|
|
90
|
+
default: null
|
|
91
|
+
},
|
|
92
|
+
modelValue: {
|
|
93
|
+
type: Boolean,
|
|
94
|
+
required: false,
|
|
95
|
+
default: false
|
|
96
|
+
},
|
|
97
|
+
color: {
|
|
98
|
+
type: String as PropType<ColorBase>,
|
|
99
|
+
required: false,
|
|
100
|
+
default: ColorEnum.Dark
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
emits: ["update:modelValue"],
|
|
104
|
+
setup(props) {
|
|
105
|
+
const { isExtraSmall } = useBreakpoints();
|
|
106
|
+
|
|
107
|
+
const classes = computed((): string[] => {
|
|
108
|
+
const classNames: string[] = [];
|
|
109
|
+
if (isExtraSmall.value) {
|
|
110
|
+
classNames.push("fs-dialog-mobile");
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
classNames.push("fs-dialog");
|
|
114
|
+
}
|
|
115
|
+
return classNames;
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
const cardWidth = computed((): string => {
|
|
119
|
+
if (isExtraSmall.value) {
|
|
120
|
+
return "100%";
|
|
121
|
+
}
|
|
122
|
+
return sizeToVar(props.width);
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
return {
|
|
126
|
+
isExtraSmall,
|
|
127
|
+
cardWidth,
|
|
128
|
+
ColorEnum,
|
|
129
|
+
classes
|
|
130
|
+
};
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
</script>
|
|
@@ -10,124 +10,40 @@
|
|
|
10
10
|
<template
|
|
11
11
|
#body
|
|
12
12
|
>
|
|
13
|
-
<
|
|
14
|
-
v-
|
|
13
|
+
<FSDialogFormBody
|
|
14
|
+
v-bind="$attrs"
|
|
15
|
+
:subtitle="$props.subtitle"
|
|
16
|
+
:validation="$props.validation"
|
|
17
|
+
@click:cancelButton="$emit('update:modelValue', false)"
|
|
18
|
+
@click:submitButton="$emit('click:submitButton')"
|
|
19
|
+
@click:validateButton="onValidate"
|
|
15
20
|
>
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
:
|
|
19
|
-
@submit="onSubmit"
|
|
20
|
-
v-model="valid"
|
|
21
|
+
<template
|
|
22
|
+
v-for="(_, name) in $slots"
|
|
23
|
+
v-slot:[name]="slotData"
|
|
21
24
|
>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
>
|
|
29
|
-
<slot
|
|
30
|
-
name="body"
|
|
31
|
-
/>
|
|
32
|
-
</FSFadeOut>
|
|
33
|
-
<FSRow
|
|
34
|
-
padding="0 16px 0 0"
|
|
35
|
-
>
|
|
36
|
-
<slot
|
|
37
|
-
name="left-footer"
|
|
38
|
-
/>
|
|
39
|
-
<FSRow
|
|
40
|
-
class="fs-dialog-actions"
|
|
41
|
-
align="top-right"
|
|
42
|
-
:wrap="false"
|
|
43
|
-
>
|
|
44
|
-
<FSButton
|
|
45
|
-
:prependIcon="$props.cancelButtonPrependIcon"
|
|
46
|
-
:appendIcon="$props.cancelButtonAppendIcon"
|
|
47
|
-
:variant="$props.cancelButtonVariant"
|
|
48
|
-
:color="$props.cancelButtonColor"
|
|
49
|
-
:label="cancelLabel"
|
|
50
|
-
@click="() => $emit('update:modelValue', false)"
|
|
51
|
-
/>
|
|
52
|
-
<FSButton
|
|
53
|
-
type="submit"
|
|
54
|
-
:prependIcon="$props.submitButtonPrependIcon"
|
|
55
|
-
:appendIcon="$props.submitButtonAppendIcon"
|
|
56
|
-
:variant="$props.submitButtonVariant"
|
|
57
|
-
:color="$props.submitButtonColor"
|
|
58
|
-
:editable="$props.editable"
|
|
59
|
-
:label="submitLabel"
|
|
60
|
-
:load="$props.load"
|
|
61
|
-
/>
|
|
62
|
-
</FSRow>
|
|
63
|
-
</FSRow>
|
|
64
|
-
</FSCol>
|
|
65
|
-
</FSForm>
|
|
66
|
-
</template>
|
|
67
|
-
<template
|
|
68
|
-
v-else
|
|
69
|
-
>
|
|
70
|
-
<FSCol
|
|
71
|
-
gap="24px"
|
|
72
|
-
>
|
|
73
|
-
<FSFadeOut
|
|
74
|
-
:height="height"
|
|
75
|
-
padding="0 8px 0 0"
|
|
76
|
-
>
|
|
77
|
-
<slot
|
|
78
|
-
name="validation"
|
|
79
|
-
/>
|
|
80
|
-
</FSFadeOut>
|
|
81
|
-
<FSRow
|
|
82
|
-
padding="0 16px 0 0"
|
|
83
|
-
>
|
|
84
|
-
<slot
|
|
85
|
-
name="left-footer"
|
|
86
|
-
/>
|
|
87
|
-
<FSRow
|
|
88
|
-
class="fs-dialog-actions"
|
|
89
|
-
align="top-right"
|
|
90
|
-
:wrap="false"
|
|
91
|
-
>
|
|
92
|
-
<FSButton
|
|
93
|
-
:prependIcon="$props.validateButtonPrependIcon"
|
|
94
|
-
:appendIcon="$props.validateButtonAppendIcon"
|
|
95
|
-
:variant="$props.validateButtonVariant"
|
|
96
|
-
:color="$props.validateButtonColor"
|
|
97
|
-
:label="validateLabel"
|
|
98
|
-
@click="onValidate"
|
|
99
|
-
/>
|
|
100
|
-
</FSRow>
|
|
101
|
-
</FSRow>
|
|
102
|
-
</FSCol>
|
|
103
|
-
</template>
|
|
25
|
+
<slot
|
|
26
|
+
:name="name"
|
|
27
|
+
v-bind="slotData"
|
|
28
|
+
/>
|
|
29
|
+
</template>
|
|
30
|
+
</FSDialogFormBody>
|
|
104
31
|
</template>
|
|
105
32
|
</FSDialog>
|
|
106
33
|
</template>
|
|
107
34
|
|
|
108
35
|
<script lang="ts">
|
|
109
36
|
import type { PropType} from "vue";
|
|
110
|
-
import {
|
|
111
|
-
|
|
112
|
-
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
113
|
-
import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
|
|
114
|
-
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
115
|
-
import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
|
|
37
|
+
import { defineComponent } from "vue";
|
|
116
38
|
|
|
117
|
-
import
|
|
118
|
-
import FSButton from "./FSButton.vue";
|
|
39
|
+
import FSDialogFormBody from "./FSDialogFormBody.vue";
|
|
119
40
|
import FSDialog from "./FSDialog.vue";
|
|
120
|
-
import FSForm from "./FSForm.vue";
|
|
121
|
-
import FSRow from "./FSRow.vue";
|
|
122
41
|
|
|
123
42
|
export default defineComponent({
|
|
124
43
|
name: "FSDialogForm",
|
|
125
44
|
components: {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
FSDialog,
|
|
129
|
-
FSForm,
|
|
130
|
-
FSRow
|
|
45
|
+
FSDialogFormBody,
|
|
46
|
+
FSDialog
|
|
131
47
|
},
|
|
132
48
|
props: {
|
|
133
49
|
title: {
|
|
@@ -140,139 +56,24 @@ export default defineComponent({
|
|
|
140
56
|
required: false,
|
|
141
57
|
default: null
|
|
142
58
|
},
|
|
143
|
-
width: {
|
|
144
|
-
type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
|
|
145
|
-
required: false,
|
|
146
|
-
default: "auto"
|
|
147
|
-
},
|
|
148
|
-
variant: {
|
|
149
|
-
type: String as PropType<"standard" | "lazy" | "submit">,
|
|
150
|
-
required: false,
|
|
151
|
-
default: "submit"
|
|
152
|
-
},
|
|
153
59
|
modelValue: {
|
|
154
60
|
type: Boolean,
|
|
155
61
|
required: false,
|
|
156
62
|
default: false
|
|
157
63
|
},
|
|
158
|
-
cancelButtonPrependIcon: {
|
|
159
|
-
type: String as PropType<string | null>,
|
|
160
|
-
required: false,
|
|
161
|
-
default: null
|
|
162
|
-
},
|
|
163
|
-
cancelButtonLabel: {
|
|
164
|
-
type: String as PropType<string | null>,
|
|
165
|
-
required: false,
|
|
166
|
-
default: null
|
|
167
|
-
},
|
|
168
|
-
cancelButtonAppendIcon: {
|
|
169
|
-
type: String as PropType<string | null>,
|
|
170
|
-
required: false,
|
|
171
|
-
default: null
|
|
172
|
-
},
|
|
173
|
-
cancelButtonVariant: {
|
|
174
|
-
type: String as PropType<"standard" | "full" | "icon">,
|
|
175
|
-
required: false,
|
|
176
|
-
default: "standard"
|
|
177
|
-
},
|
|
178
|
-
cancelButtonColor: {
|
|
179
|
-
type: String as PropType<ColorBase>,
|
|
180
|
-
required: false,
|
|
181
|
-
default: ColorEnum.Light
|
|
182
|
-
},
|
|
183
|
-
submitButtonPrependIcon: {
|
|
184
|
-
type: String as PropType<string | null>,
|
|
185
|
-
required: false,
|
|
186
|
-
default: null
|
|
187
|
-
},
|
|
188
|
-
submitButtonLabel: {
|
|
189
|
-
type: String as PropType<string | null>,
|
|
190
|
-
required: false,
|
|
191
|
-
default: null
|
|
192
|
-
},
|
|
193
|
-
submitButtonAppendIcon: {
|
|
194
|
-
type: String as PropType<string | null>,
|
|
195
|
-
required: false,
|
|
196
|
-
default: null
|
|
197
|
-
},
|
|
198
|
-
submitButtonVariant: {
|
|
199
|
-
type: String as PropType<"standard" | "full" | "icon">,
|
|
200
|
-
required: false,
|
|
201
|
-
default: "full"
|
|
202
|
-
},
|
|
203
|
-
submitButtonColor: {
|
|
204
|
-
type: String as PropType<ColorBase>,
|
|
205
|
-
required: false,
|
|
206
|
-
default: ColorEnum.Primary
|
|
207
|
-
},
|
|
208
|
-
validateButtonPrependIcon: {
|
|
209
|
-
type: String as PropType<string | null>,
|
|
210
|
-
required: false,
|
|
211
|
-
default: null
|
|
212
|
-
},
|
|
213
|
-
validateButtonLabel: {
|
|
214
|
-
type: String as PropType<string | null>,
|
|
215
|
-
required: false,
|
|
216
|
-
default: null
|
|
217
|
-
},
|
|
218
|
-
validateButtonAppendIcon: {
|
|
219
|
-
type: String as PropType<string | null>,
|
|
220
|
-
required: false,
|
|
221
|
-
default: null
|
|
222
|
-
},
|
|
223
|
-
validateButtonVariant: {
|
|
224
|
-
type: String as PropType<"standard" | "full" | "icon">,
|
|
225
|
-
required: false,
|
|
226
|
-
default: "standard"
|
|
227
|
-
},
|
|
228
|
-
validateButtonColor: {
|
|
229
|
-
type: String as PropType<ColorBase>,
|
|
230
|
-
required: false,
|
|
231
|
-
default: ColorEnum.Light
|
|
232
|
-
},
|
|
233
64
|
validation: {
|
|
234
65
|
type: Boolean,
|
|
235
66
|
required: false,
|
|
236
67
|
default: false
|
|
237
68
|
},
|
|
238
|
-
|
|
239
|
-
type:
|
|
240
|
-
required: false,
|
|
241
|
-
default: false
|
|
242
|
-
},
|
|
243
|
-
editable: {
|
|
244
|
-
type: Boolean,
|
|
69
|
+
width: {
|
|
70
|
+
type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
|
|
245
71
|
required: false,
|
|
246
|
-
default:
|
|
72
|
+
default: "auto"
|
|
247
73
|
}
|
|
248
74
|
},
|
|
249
|
-
emits: ["update:modelValue", "click:
|
|
75
|
+
emits: ["update:modelValue", "click:validateButton", "click:submitButton"],
|
|
250
76
|
setup(props, { emit }) {
|
|
251
|
-
const { isMobileSized } = useBreakpoints();
|
|
252
|
-
const { $tr } = useTranslationsProvider();
|
|
253
|
-
|
|
254
|
-
const formRef = ref<HTMLElement | null>(null);
|
|
255
|
-
const valid = ref(false);
|
|
256
|
-
|
|
257
|
-
const height = computed(() => {
|
|
258
|
-
const other = 24 + 24 // Paddings
|
|
259
|
-
+ (isMobileSized.value ? 24 : 32) + 24 // Title
|
|
260
|
-
+ (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
|
|
261
|
-
+ (isMobileSized.value ? 36 : 40) + 24; // Footer
|
|
262
|
-
return `calc(100vh - 40px - ${other}px)`;
|
|
263
|
-
});
|
|
264
|
-
|
|
265
|
-
const cancelLabel = computed(() => {
|
|
266
|
-
return props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel");
|
|
267
|
-
});
|
|
268
|
-
|
|
269
|
-
const submitLabel = computed(() => {
|
|
270
|
-
return props.submitButtonLabel ?? $tr("ui.button.submit", "Submit");
|
|
271
|
-
});
|
|
272
|
-
|
|
273
|
-
const validateLabel = computed(() => {
|
|
274
|
-
return props.validateButtonLabel ?? $tr("ui.button.validate", "Done");
|
|
275
|
-
});
|
|
276
77
|
|
|
277
78
|
const onClose = () => {
|
|
278
79
|
if (props.validation) {
|
|
@@ -281,27 +82,13 @@ export default defineComponent({
|
|
|
281
82
|
emit("update:modelValue", false);
|
|
282
83
|
};
|
|
283
84
|
|
|
284
|
-
const onSubmit = () => {
|
|
285
|
-
if (valid.value) {
|
|
286
|
-
emit("click:submitButton");
|
|
287
|
-
}
|
|
288
|
-
};
|
|
289
|
-
|
|
290
85
|
const onValidate = () => {
|
|
291
86
|
emit("click:validateButton");
|
|
292
87
|
emit("update:modelValue", false);
|
|
293
88
|
};
|
|
294
89
|
|
|
295
90
|
return {
|
|
296
|
-
validateLabel,
|
|
297
|
-
cancelLabel,
|
|
298
|
-
submitLabel,
|
|
299
|
-
ColorEnum,
|
|
300
|
-
formRef,
|
|
301
|
-
height,
|
|
302
|
-
valid,
|
|
303
91
|
onValidate,
|
|
304
|
-
onSubmit,
|
|
305
92
|
onClose
|
|
306
93
|
};
|
|
307
94
|
}
|