@dative-gpi/foundation-shared-components 0.0.96 → 0.0.98
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.
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSDialog
|
|
3
|
+
:title="$props.title"
|
|
4
|
+
:subtitle="$props.subtitle"
|
|
5
|
+
:width="$props.width"
|
|
6
|
+
:modelValue="$props.modelValue"
|
|
7
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
8
|
+
v-bind="$attrs"
|
|
9
|
+
>
|
|
10
|
+
<template
|
|
11
|
+
#body
|
|
12
|
+
>
|
|
13
|
+
<FSWindow
|
|
14
|
+
width="100%"
|
|
15
|
+
:modelValue="currentStep - 1"
|
|
16
|
+
>
|
|
17
|
+
<FSForm
|
|
18
|
+
v-for="(step, index) in $props.steps"
|
|
19
|
+
:key="index"
|
|
20
|
+
:variant="$props.variant"
|
|
21
|
+
@submit="onSubmit"
|
|
22
|
+
v-model="valid"
|
|
23
|
+
>
|
|
24
|
+
<FSCol
|
|
25
|
+
gap="24px"
|
|
26
|
+
>
|
|
27
|
+
<FSFadeOut
|
|
28
|
+
:height="height"
|
|
29
|
+
padding="0 8px 0 0"
|
|
30
|
+
>
|
|
31
|
+
<slot
|
|
32
|
+
:name="`step-${step}`"
|
|
33
|
+
/>
|
|
34
|
+
</FSFadeOut>
|
|
35
|
+
<FSRow
|
|
36
|
+
padding="0 16px 0 0"
|
|
37
|
+
>
|
|
38
|
+
<slot
|
|
39
|
+
name="left-footer"
|
|
40
|
+
/>
|
|
41
|
+
<FSRow
|
|
42
|
+
class="fs-dialog-actions"
|
|
43
|
+
align="top-right"
|
|
44
|
+
:wrap="false"
|
|
45
|
+
>
|
|
46
|
+
<FSButton
|
|
47
|
+
:prependIcon="$props.leftButtonPrependIcon"
|
|
48
|
+
:label="previousButtonLabel"
|
|
49
|
+
:appendIcon="$props.leftButtonAppendIcon"
|
|
50
|
+
:variant="$props.leftButtonVariant"
|
|
51
|
+
:color="$props.leftButtonColor"
|
|
52
|
+
@click="onPrevious()"
|
|
53
|
+
/>
|
|
54
|
+
<FSButton
|
|
55
|
+
type="submit"
|
|
56
|
+
:prependIcon="$props.rightButtonPrependIcon"
|
|
57
|
+
:label="nextButtonLabel"
|
|
58
|
+
:appendIcon="$props.rightButtonAppendIcon"
|
|
59
|
+
:variant="nextButtonVariant"
|
|
60
|
+
:color="$props.rightButtonColor"
|
|
61
|
+
:load="$props.load"
|
|
62
|
+
:editable="$props.editable"
|
|
63
|
+
/>
|
|
64
|
+
</FSRow>
|
|
65
|
+
</FSRow>
|
|
66
|
+
</FSCol>
|
|
67
|
+
</FSForm>
|
|
68
|
+
</FSWindow>
|
|
69
|
+
</template>
|
|
70
|
+
</FSDialog>
|
|
71
|
+
</template>
|
|
72
|
+
|
|
73
|
+
<script lang="ts">
|
|
74
|
+
import { computed, defineComponent, PropType, ref } from "vue";
|
|
75
|
+
|
|
76
|
+
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
77
|
+
import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
78
|
+
import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
|
|
79
|
+
|
|
80
|
+
import FSFadeOut from "./FSFadeOut.vue";
|
|
81
|
+
import FSButton from "./FSButton.vue";
|
|
82
|
+
import FSDialog from "./FSDialog.vue";
|
|
83
|
+
import FSForm from "./FSForm.vue";
|
|
84
|
+
import FSRow from "./FSRow.vue";
|
|
85
|
+
|
|
86
|
+
export default defineComponent({
|
|
87
|
+
name: "FSDialogMultiForm",
|
|
88
|
+
components: {
|
|
89
|
+
FSFadeOut,
|
|
90
|
+
FSButton,
|
|
91
|
+
FSDialog,
|
|
92
|
+
FSForm,
|
|
93
|
+
FSRow
|
|
94
|
+
},
|
|
95
|
+
props: {
|
|
96
|
+
title: {
|
|
97
|
+
type: String as PropType<string | null>,
|
|
98
|
+
required: false,
|
|
99
|
+
default: null
|
|
100
|
+
},
|
|
101
|
+
subtitle: {
|
|
102
|
+
type: String as PropType<string | null>,
|
|
103
|
+
required: false,
|
|
104
|
+
default: null
|
|
105
|
+
},
|
|
106
|
+
width: {
|
|
107
|
+
type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
|
|
108
|
+
required: false,
|
|
109
|
+
default: "auto"
|
|
110
|
+
},
|
|
111
|
+
variant: {
|
|
112
|
+
type: String as PropType<"standard" | "lazy" | "submit">,
|
|
113
|
+
required: false,
|
|
114
|
+
default: "submit"
|
|
115
|
+
},
|
|
116
|
+
modelValue: {
|
|
117
|
+
type: Boolean,
|
|
118
|
+
required: false,
|
|
119
|
+
default: false
|
|
120
|
+
},
|
|
121
|
+
steps: {
|
|
122
|
+
type: Number,
|
|
123
|
+
required: true
|
|
124
|
+
},
|
|
125
|
+
leftButtonPrependIcon: {
|
|
126
|
+
type: String as PropType<string | null>,
|
|
127
|
+
required: false,
|
|
128
|
+
default: null
|
|
129
|
+
},
|
|
130
|
+
leftButtonLabel: {
|
|
131
|
+
type: String as PropType<string | null>,
|
|
132
|
+
required: false,
|
|
133
|
+
default: null
|
|
134
|
+
},
|
|
135
|
+
leftButtonAppendIcon: {
|
|
136
|
+
type: String as PropType<string | null>,
|
|
137
|
+
required: false,
|
|
138
|
+
default: null
|
|
139
|
+
},
|
|
140
|
+
leftButtonVariant: {
|
|
141
|
+
type: String as PropType<"standard" | "full" | "icon">,
|
|
142
|
+
required: false,
|
|
143
|
+
default: "standard"
|
|
144
|
+
},
|
|
145
|
+
rightButtonPrependIcon: {
|
|
146
|
+
type: String as PropType<string | null>,
|
|
147
|
+
required: false,
|
|
148
|
+
default: null
|
|
149
|
+
},
|
|
150
|
+
rightButtonLabel: {
|
|
151
|
+
type: String as PropType<string | null>,
|
|
152
|
+
required: false,
|
|
153
|
+
default: null
|
|
154
|
+
},
|
|
155
|
+
rightButtonAppendIcon: {
|
|
156
|
+
type: String as PropType<string | null>,
|
|
157
|
+
required: false,
|
|
158
|
+
default: null
|
|
159
|
+
},
|
|
160
|
+
rightButtonVariant: {
|
|
161
|
+
type: String as PropType<"standard" | "full" | "icon">,
|
|
162
|
+
required: false,
|
|
163
|
+
default: "full"
|
|
164
|
+
},
|
|
165
|
+
leftButtonColor: {
|
|
166
|
+
type: String as PropType<ColorBase>,
|
|
167
|
+
required: false,
|
|
168
|
+
default: ColorEnum.Light
|
|
169
|
+
},
|
|
170
|
+
rightButtonColor: {
|
|
171
|
+
type: String as PropType<ColorBase>,
|
|
172
|
+
required: false,
|
|
173
|
+
default: ColorEnum.Primary
|
|
174
|
+
},
|
|
175
|
+
load: {
|
|
176
|
+
type: Boolean,
|
|
177
|
+
required: false,
|
|
178
|
+
default: false
|
|
179
|
+
},
|
|
180
|
+
editable: {
|
|
181
|
+
type: Boolean,
|
|
182
|
+
required: false,
|
|
183
|
+
default: true
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
emits: ["update:modelValue", "click:rightButton"],
|
|
187
|
+
setup(props, { emit }) {
|
|
188
|
+
const { isMobileSized } = useBreakpoints();
|
|
189
|
+
const { $tr } = useTranslationsProvider();
|
|
190
|
+
|
|
191
|
+
const currentStep = ref(1);
|
|
192
|
+
const valid = ref(false);
|
|
193
|
+
const valids = ref(Array.from({ length: props.steps }, () => false));
|
|
194
|
+
|
|
195
|
+
const height = computed(() => {
|
|
196
|
+
const other = 24 + 24 // Paddings
|
|
197
|
+
+ (props.title ? isMobileSized.value ? 24 : 32 : 0) // Title
|
|
198
|
+
+ (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
|
|
199
|
+
+ (isMobileSized.value ? 36 : 40) // Footer
|
|
200
|
+
+ 64; // Debug mask
|
|
201
|
+
return `calc(90vh - ${other}px)`;
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
const previousButtonLabel = computed(() => {
|
|
205
|
+
return currentStep.value == 1
|
|
206
|
+
? props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel")
|
|
207
|
+
: $tr("ui.button.back", "Back");
|
|
208
|
+
});
|
|
209
|
+
|
|
210
|
+
const nextButtonLabel = computed(() => {
|
|
211
|
+
return currentStep.value == props.steps
|
|
212
|
+
? props.rightButtonLabel ?? $tr("ui.button.validate", "Validate")
|
|
213
|
+
: $tr("ui.button.next", "Next");
|
|
214
|
+
});
|
|
215
|
+
|
|
216
|
+
const nextButtonVariant = computed(() => {
|
|
217
|
+
return currentStep.value == props.steps
|
|
218
|
+
? props.rightButtonVariant ?? "full"
|
|
219
|
+
: "standard";
|
|
220
|
+
});
|
|
221
|
+
|
|
222
|
+
const onPrevious = () => {
|
|
223
|
+
if (currentStep.value > 1) {
|
|
224
|
+
currentStep.value--;
|
|
225
|
+
} else {
|
|
226
|
+
emit("update:modelValue", false);
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
const onSubmit = () => {
|
|
231
|
+
console.log(valid.value)
|
|
232
|
+
if (valid.value) {
|
|
233
|
+
switch (currentStep.value) {
|
|
234
|
+
case props.steps:
|
|
235
|
+
emit("click:rightButton");
|
|
236
|
+
break;
|
|
237
|
+
default:
|
|
238
|
+
currentStep.value++;
|
|
239
|
+
break;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
return {
|
|
245
|
+
previousButtonLabel,
|
|
246
|
+
nextButtonVariant,
|
|
247
|
+
nextButtonLabel,
|
|
248
|
+
currentStep,
|
|
249
|
+
ColorEnum,
|
|
250
|
+
height,
|
|
251
|
+
valids,
|
|
252
|
+
valid,
|
|
253
|
+
onSubmit,
|
|
254
|
+
onPrevious
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
});
|
|
258
|
+
</script>
|
package/components/FSForm.vue
CHANGED
|
@@ -45,8 +45,8 @@ export default defineComponent({
|
|
|
45
45
|
event.preventDefault();
|
|
46
46
|
submitted.value = true;
|
|
47
47
|
await (formRef.value as any).validate();
|
|
48
|
-
emit("update:modelValue", !!(formRef.value as any).isValid);
|
|
49
|
-
emit("submit", !!(formRef.value as any).isValid);
|
|
48
|
+
emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
|
|
49
|
+
emit("submit", !!((formRef.value as any).isValid ?? true));
|
|
50
50
|
|
|
51
51
|
};
|
|
52
52
|
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
gap="4px"
|
|
40
40
|
>
|
|
41
41
|
<FSConnectivity
|
|
42
|
-
v-if="$props.deviceConnectivity && $props.deviceConnectivity.status !=
|
|
42
|
+
v-if="$props.deviceConnectivity && $props.deviceConnectivity.status != ConnectivityStatus.None"
|
|
43
43
|
:deviceConnectivity="$props.deviceConnectivity"
|
|
44
44
|
/>
|
|
45
45
|
<FSWorstAlert
|
|
@@ -77,6 +77,7 @@ import { computed, defineComponent, PropType } from "vue";
|
|
|
77
77
|
|
|
78
78
|
import { FSModelStatus, FSDeviceStatus, FSDeviceAlert, FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
|
|
79
79
|
import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
|
|
80
|
+
import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
|
|
80
81
|
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
81
82
|
|
|
82
83
|
import FSStatusesCarousel from "../deviceOrganisations/FSStatusesCarousel.vue";
|
|
@@ -221,6 +222,7 @@ export default defineComponent({
|
|
|
221
222
|
ColorEnum,
|
|
222
223
|
lineModelStatuses,
|
|
223
224
|
lineDeviceStatuses,
|
|
225
|
+
ConnectivityStatus,
|
|
224
226
|
carouselModelStatuses,
|
|
225
227
|
carouselDeviceStatuses,
|
|
226
228
|
imageSize,
|
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.98",
|
|
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.98",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "0.0.98",
|
|
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": "3e3b2cf8888bd50741bd2d91a76ebb7f53ff5f27"
|
|
36
36
|
}
|