@dative-gpi/foundation-shared-components 0.0.78 → 0.0.79
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/FSDialogForm.vue +195 -0
- package/components/{FSRemoveDialog.vue → FSDialogRemove.vue} +14 -9
- package/components/{FSSubmitDialog.vue → FSDialogSubmit.vue} +31 -14
- package/components/fields/FSDateRangeField.vue +4 -4
- package/components/fields/FSDateTimeRangeField.vue +4 -4
- package/package.json +4 -4
- package/styles/components/fs_dialog.scss +7 -0
- package/styles/components/index.scss +0 -1
- package/styles/components/fs_submit_dialog.scss +0 -9
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSDialog
|
|
3
|
+
:width="$props.width"
|
|
4
|
+
:modelValue="$props.modelValue"
|
|
5
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
6
|
+
v-bind="$attrs"
|
|
7
|
+
>
|
|
8
|
+
<template
|
|
9
|
+
#header
|
|
10
|
+
>
|
|
11
|
+
<slot
|
|
12
|
+
name="header"
|
|
13
|
+
>
|
|
14
|
+
<FSCol
|
|
15
|
+
v-if="$props.title"
|
|
16
|
+
>
|
|
17
|
+
<FSSpan
|
|
18
|
+
font="text-h2"
|
|
19
|
+
>
|
|
20
|
+
{{ $props.title }}
|
|
21
|
+
</FSSpan>
|
|
22
|
+
<FSSpan
|
|
23
|
+
v-if="$props.subtitle"
|
|
24
|
+
>
|
|
25
|
+
{{ $props.subtitle }}
|
|
26
|
+
</FSSpan>
|
|
27
|
+
</FSCol>
|
|
28
|
+
</slot>
|
|
29
|
+
</template>
|
|
30
|
+
<template
|
|
31
|
+
#body
|
|
32
|
+
>
|
|
33
|
+
<FSForm
|
|
34
|
+
v-model="valid"
|
|
35
|
+
>
|
|
36
|
+
<FSCol
|
|
37
|
+
gap="32px"
|
|
38
|
+
>
|
|
39
|
+
<slot
|
|
40
|
+
name="body"
|
|
41
|
+
/>
|
|
42
|
+
<FSRow
|
|
43
|
+
class="fs-dialog-actions"
|
|
44
|
+
align="top-right"
|
|
45
|
+
:wrap="false"
|
|
46
|
+
>
|
|
47
|
+
<FSButton
|
|
48
|
+
:prependIcon="$props.leftButtonPrependIcon"
|
|
49
|
+
:label="cancelButtonLabel"
|
|
50
|
+
:appendIcon="$props.leftButtonAppendIcon"
|
|
51
|
+
:variant="$props.leftButtonVariant"
|
|
52
|
+
:color="$props.leftButtonColor"
|
|
53
|
+
@click="() => $emit('update:modelValue', false)"
|
|
54
|
+
/>
|
|
55
|
+
<FSButton
|
|
56
|
+
type="submit"
|
|
57
|
+
:prependIcon="$props.rightButtonPrependIcon"
|
|
58
|
+
:label="submitButtonLabel"
|
|
59
|
+
:appendIcon="$props.rightButtonAppendIcon"
|
|
60
|
+
:variant="$props.rightButtonVariant"
|
|
61
|
+
:color="$props.rightButtonColor"
|
|
62
|
+
:editable="$props.editable"
|
|
63
|
+
@click="onSubmit"
|
|
64
|
+
/>
|
|
65
|
+
</FSRow>
|
|
66
|
+
</FSCol>
|
|
67
|
+
</FSForm>
|
|
68
|
+
</template>
|
|
69
|
+
</FSDialog>
|
|
70
|
+
</template>
|
|
71
|
+
|
|
72
|
+
<script lang="ts">
|
|
73
|
+
import { computed, defineComponent, PropType, ref } from "vue";
|
|
74
|
+
|
|
75
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
76
|
+
import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
77
|
+
|
|
78
|
+
import FSDialog from "./FSDialog.vue";
|
|
79
|
+
import FSForm from "./FSForm.vue";
|
|
80
|
+
import FSRow from "./FSRow.vue";
|
|
81
|
+
|
|
82
|
+
export default defineComponent({
|
|
83
|
+
name: "FSDialogForm",
|
|
84
|
+
components: {
|
|
85
|
+
FSDialog,
|
|
86
|
+
FSForm,
|
|
87
|
+
FSRow
|
|
88
|
+
},
|
|
89
|
+
props: {
|
|
90
|
+
title: {
|
|
91
|
+
type: String as PropType<string | null>,
|
|
92
|
+
required: false,
|
|
93
|
+
default: null
|
|
94
|
+
},
|
|
95
|
+
subtitle: {
|
|
96
|
+
type: String as PropType<string | null>,
|
|
97
|
+
required: false,
|
|
98
|
+
default: null
|
|
99
|
+
},
|
|
100
|
+
width: {
|
|
101
|
+
type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
|
|
102
|
+
required: false,
|
|
103
|
+
default: "auto"
|
|
104
|
+
},
|
|
105
|
+
modelValue: {
|
|
106
|
+
type: Boolean,
|
|
107
|
+
required: false,
|
|
108
|
+
default: false
|
|
109
|
+
},
|
|
110
|
+
leftButtonPrependIcon: {
|
|
111
|
+
type: String as PropType<string | null>,
|
|
112
|
+
required: false,
|
|
113
|
+
default: null
|
|
114
|
+
},
|
|
115
|
+
leftButtonLabel: {
|
|
116
|
+
type: String as PropType<string | null>,
|
|
117
|
+
required: false,
|
|
118
|
+
default: null
|
|
119
|
+
},
|
|
120
|
+
leftButtonAppendIcon: {
|
|
121
|
+
type: String as PropType<string | null>,
|
|
122
|
+
required: false,
|
|
123
|
+
default: null
|
|
124
|
+
},
|
|
125
|
+
leftButtonVariant: {
|
|
126
|
+
type: String as PropType<"standard" | "full" | "icon">,
|
|
127
|
+
required: false,
|
|
128
|
+
default: "standard"
|
|
129
|
+
},
|
|
130
|
+
rightButtonPrependIcon: {
|
|
131
|
+
type: String as PropType<string | null>,
|
|
132
|
+
required: false,
|
|
133
|
+
default: null
|
|
134
|
+
},
|
|
135
|
+
rightButtonLabel: {
|
|
136
|
+
type: String as PropType<string | null>,
|
|
137
|
+
required: false,
|
|
138
|
+
default: null
|
|
139
|
+
},
|
|
140
|
+
rightButtonAppendIcon: {
|
|
141
|
+
type: String as PropType<string | null>,
|
|
142
|
+
required: false,
|
|
143
|
+
default: null
|
|
144
|
+
},
|
|
145
|
+
rightButtonVariant: {
|
|
146
|
+
type: String as PropType<"standard" | "full" | "icon">,
|
|
147
|
+
required: false,
|
|
148
|
+
default: "full"
|
|
149
|
+
},
|
|
150
|
+
leftButtonColor: {
|
|
151
|
+
type: String as PropType<ColorBase>,
|
|
152
|
+
required: false,
|
|
153
|
+
default: ColorEnum.Light
|
|
154
|
+
},
|
|
155
|
+
rightButtonColor: {
|
|
156
|
+
type: String as PropType<ColorBase>,
|
|
157
|
+
required: false,
|
|
158
|
+
default: ColorEnum.Primary
|
|
159
|
+
},
|
|
160
|
+
editable: {
|
|
161
|
+
type: Boolean,
|
|
162
|
+
required: false,
|
|
163
|
+
default: true
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
emits: ["update:modelValue", "click:rightButton"],
|
|
167
|
+
setup(props, { emit }) {
|
|
168
|
+
const { $tr } = useTranslationsProvider();
|
|
169
|
+
|
|
170
|
+
const valid = ref(false);
|
|
171
|
+
|
|
172
|
+
const cancelButtonLabel = computed(() => {
|
|
173
|
+
return props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel");
|
|
174
|
+
});
|
|
175
|
+
|
|
176
|
+
const submitButtonLabel = computed(() => {
|
|
177
|
+
return props.rightButtonLabel ?? $tr("ui.button.validate", "Validate");
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
const onSubmit = () => {
|
|
181
|
+
if (valid.value) {
|
|
182
|
+
emit("click:rightButton");
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
return {
|
|
187
|
+
cancelButtonLabel,
|
|
188
|
+
submitButtonLabel,
|
|
189
|
+
ColorEnum,
|
|
190
|
+
valid,
|
|
191
|
+
onSubmit
|
|
192
|
+
};
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
2
|
+
<FSDialogSubmit
|
|
3
3
|
:rightButtonLabel="$tr('ui.button.remove', 'Remove')"
|
|
4
4
|
:rightButtonColor="ColorEnum.Error"
|
|
5
5
|
:title="title"
|
|
@@ -7,7 +7,9 @@
|
|
|
7
7
|
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
8
|
v-bind="$attrs"
|
|
9
9
|
>
|
|
10
|
-
<template
|
|
10
|
+
<template
|
|
11
|
+
#body
|
|
12
|
+
>
|
|
11
13
|
<FSCol
|
|
12
14
|
gap="16px"
|
|
13
15
|
>
|
|
@@ -35,7 +37,10 @@
|
|
|
35
37
|
</FSSpan>
|
|
36
38
|
</FSCol>
|
|
37
39
|
</template>
|
|
38
|
-
<template
|
|
40
|
+
<template
|
|
41
|
+
#footer
|
|
42
|
+
v-if="$props.removing"
|
|
43
|
+
>
|
|
39
44
|
<FSRow
|
|
40
45
|
align="center-right"
|
|
41
46
|
:height="footerHeight"
|
|
@@ -49,7 +54,7 @@
|
|
|
49
54
|
/>
|
|
50
55
|
</FSRow>
|
|
51
56
|
</template>
|
|
52
|
-
</
|
|
57
|
+
</FSDialogSubmit>
|
|
53
58
|
</template>
|
|
54
59
|
|
|
55
60
|
<script lang="ts">
|
|
@@ -59,16 +64,16 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
|
|
|
59
64
|
import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
|
|
60
65
|
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
61
66
|
|
|
62
|
-
import
|
|
67
|
+
import FSDialogSubmit from "./FSDialogSubmit.vue";
|
|
63
68
|
import FSIcon from "./FSIcon.vue";
|
|
64
69
|
import FSSpan from "./FSSpan.vue";
|
|
65
70
|
import FSCol from "./FSCol.vue";
|
|
66
71
|
import FSRow from "./FSRow.vue";
|
|
67
72
|
|
|
68
73
|
export default defineComponent({
|
|
69
|
-
name: "
|
|
74
|
+
name: "FSDialogRemove",
|
|
70
75
|
components: {
|
|
71
|
-
|
|
76
|
+
FSDialogSubmit,
|
|
72
77
|
FSIcon,
|
|
73
78
|
FSSpan,
|
|
74
79
|
FSCol,
|
|
@@ -102,10 +107,10 @@ export default defineComponent({
|
|
|
102
107
|
|
|
103
108
|
const title = computed((): string => {
|
|
104
109
|
if (props.removeTotal > 1) {
|
|
105
|
-
return $tr("ui.remove
|
|
110
|
+
return $tr("ui.dialog-remove.remove-plural", "Remove {0} entities", props.removeTotal.toString());
|
|
106
111
|
}
|
|
107
112
|
else {
|
|
108
|
-
return $tr("ui.remove
|
|
113
|
+
return $tr("ui.dialog-remove.remove-singular", "Remove an entity");
|
|
109
114
|
}
|
|
110
115
|
});
|
|
111
116
|
|
|
@@ -1,30 +1,47 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<FSDialog
|
|
3
|
-
cardClasses="fs-submit-dialog"
|
|
4
3
|
:width="$props.width"
|
|
5
4
|
:modelValue="$props.modelValue"
|
|
6
5
|
@update:modelValue="$emit('update:modelValue', $event)"
|
|
7
6
|
v-bind="$attrs"
|
|
8
7
|
>
|
|
9
|
-
<template
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
<template
|
|
9
|
+
#header
|
|
10
|
+
>
|
|
11
|
+
<slot
|
|
12
|
+
name="header"
|
|
13
|
+
>
|
|
14
|
+
<FSCol
|
|
15
|
+
v-if="$props.title"
|
|
16
|
+
>
|
|
17
|
+
<FSSpan
|
|
18
|
+
font="text-h2"
|
|
19
|
+
>
|
|
13
20
|
{{ $props.title }}
|
|
14
21
|
</FSSpan>
|
|
15
|
-
<FSSpan
|
|
22
|
+
<FSSpan
|
|
23
|
+
v-if="$props.subtitle"
|
|
24
|
+
>
|
|
16
25
|
{{ $props.subtitle }}
|
|
17
26
|
</FSSpan>
|
|
18
27
|
</FSCol>
|
|
19
28
|
</slot>
|
|
20
29
|
</template>
|
|
21
|
-
<template
|
|
22
|
-
|
|
30
|
+
<template
|
|
31
|
+
#body
|
|
32
|
+
>
|
|
33
|
+
<slot
|
|
34
|
+
name="body"
|
|
35
|
+
/>
|
|
23
36
|
</template>
|
|
24
|
-
<template
|
|
25
|
-
|
|
37
|
+
<template
|
|
38
|
+
#footer
|
|
39
|
+
>
|
|
40
|
+
<slot
|
|
41
|
+
name="footer"
|
|
42
|
+
>
|
|
26
43
|
<FSRow
|
|
27
|
-
class="fs-
|
|
44
|
+
class="fs-dialog-actions"
|
|
28
45
|
align="top-right"
|
|
29
46
|
:wrap="false"
|
|
30
47
|
>
|
|
@@ -61,7 +78,7 @@ import FSDialog from "./FSDialog.vue";
|
|
|
61
78
|
import FSRow from "./FSRow.vue";
|
|
62
79
|
|
|
63
80
|
export default defineComponent({
|
|
64
|
-
name: "
|
|
81
|
+
name: "FSDialogSubmit",
|
|
65
82
|
components: {
|
|
66
83
|
FSDialog,
|
|
67
84
|
FSRow
|
|
@@ -156,9 +173,9 @@ export default defineComponent({
|
|
|
156
173
|
});
|
|
157
174
|
|
|
158
175
|
return {
|
|
159
|
-
ColorEnum,
|
|
160
176
|
cancelButtonLabel,
|
|
161
|
-
submitButtonLabel
|
|
177
|
+
submitButtonLabel,
|
|
178
|
+
ColorEnum
|
|
162
179
|
};
|
|
163
180
|
}
|
|
164
181
|
});
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<slot :name="name" v-bind="slotData" />
|
|
32
32
|
</template>
|
|
33
33
|
</FSTextField>
|
|
34
|
-
<
|
|
34
|
+
<FSDialogSubmit
|
|
35
35
|
:title="$props.label"
|
|
36
36
|
:rightButtonColor="$props.color"
|
|
37
37
|
@click:rightButton="onSubmit"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
v-model="innerDateRange"
|
|
44
44
|
/>
|
|
45
45
|
</template>
|
|
46
|
-
</
|
|
46
|
+
</FSDialogSubmit>
|
|
47
47
|
</template>
|
|
48
48
|
|
|
49
49
|
<script lang="ts">
|
|
@@ -53,7 +53,7 @@ import { useColors, useRules } from "@dative-gpi/foundation-shared-components/co
|
|
|
53
53
|
import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
54
54
|
import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
55
55
|
|
|
56
|
-
import
|
|
56
|
+
import FSDialogSubmit from "../FSDialogSubmit.vue";
|
|
57
57
|
import FSCalendarTwin from "../FSCalendarTwin.vue";
|
|
58
58
|
import FSTextField from "./FSTextField.vue";
|
|
59
59
|
import FSButton from "../FSButton.vue";
|
|
@@ -61,7 +61,7 @@ import FSButton from "../FSButton.vue";
|
|
|
61
61
|
export default defineComponent({
|
|
62
62
|
name: "FSDateRangeField",
|
|
63
63
|
components: {
|
|
64
|
-
|
|
64
|
+
FSDialogSubmit,
|
|
65
65
|
FSCalendarTwin,
|
|
66
66
|
FSTextField,
|
|
67
67
|
FSButton
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<slot :name="name" v-bind="slotData" />
|
|
32
32
|
</template>
|
|
33
33
|
</FSTextField>
|
|
34
|
-
<
|
|
34
|
+
<FSDialogSubmit
|
|
35
35
|
:title="$props.label"
|
|
36
36
|
:rightButtonColor="$props.color"
|
|
37
37
|
@click:rightButton="onSubmit"
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
</FSRow>
|
|
68
68
|
</FSCol>
|
|
69
69
|
</template>
|
|
70
|
-
</
|
|
70
|
+
</FSDialogSubmit>
|
|
71
71
|
</template>
|
|
72
72
|
|
|
73
73
|
<script lang="ts">
|
|
@@ -77,7 +77,7 @@ import { useColors, useRules } from "@dative-gpi/foundation-shared-components/co
|
|
|
77
77
|
import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
78
78
|
import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
|
|
79
79
|
|
|
80
|
-
import
|
|
80
|
+
import FSDialogSubmit from "../FSDialogSubmit.vue";
|
|
81
81
|
import FSCalendarTwin from "../FSCalendarTwin.vue";
|
|
82
82
|
import FSTextField from "./FSTextField.vue";
|
|
83
83
|
import FSButton from "../FSButton.vue";
|
|
@@ -88,7 +88,7 @@ import FSRow from "../FSRow.vue";
|
|
|
88
88
|
export default defineComponent({
|
|
89
89
|
name: "FSDateTimeRangeField",
|
|
90
90
|
components: {
|
|
91
|
-
|
|
91
|
+
FSDialogSubmit,
|
|
92
92
|
FSCalendarTwin,
|
|
93
93
|
FSTextField,
|
|
94
94
|
FSButton,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-shared-components",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.79",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"author": "",
|
|
11
11
|
"license": "ISC",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@dative-gpi/foundation-shared-domain": "0.0.
|
|
14
|
-
"@dative-gpi/foundation-shared-services": "0.0.
|
|
13
|
+
"@dative-gpi/foundation-shared-domain": "0.0.79",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "0.0.79",
|
|
15
15
|
"@fontsource/montserrat": "^5.0.16",
|
|
16
16
|
"@lexical/clipboard": "^0.12.5",
|
|
17
17
|
"@lexical/history": "^0.12.5",
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"sass": "^1.69.5",
|
|
33
33
|
"sass-loader": "^13.3.2"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "60788de9c98493c3bd2889c2cd92f1a7d0780543"
|
|
36
36
|
}
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
.fs-dialog {
|
|
15
15
|
position: relative;
|
|
16
|
+
min-width: 35vw !important;
|
|
16
17
|
max-width: 90vw !important;
|
|
17
18
|
max-height: 90vw !important;
|
|
18
19
|
|
|
@@ -27,4 +28,10 @@
|
|
|
27
28
|
position: absolute;
|
|
28
29
|
top: 6px;
|
|
29
30
|
right: 6px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.fs-dialog-actions {
|
|
34
|
+
position: sticky;
|
|
35
|
+
bottom: 8px;
|
|
36
|
+
right: 8px;
|
|
30
37
|
}
|