@dative-gpi/foundation-shared-components 1.0.19 → 1.0.21
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/deviceOrganisations/FSStatusCard.vue +5 -0
- package/components/fields/FSTimeStepField.vue +157 -0
- package/components/views/FSEntityHeader.vue +34 -17
- package/components/views/FSEntityView.vue +132 -12
- package/package.json +4 -4
- package/utils/time.ts +15 -0
- package/components/views/FSEntityViewUI.vue +0 -148
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
gap="0px"
|
|
13
13
|
>
|
|
14
14
|
<FSRow
|
|
15
|
+
v-if="$props.closable"
|
|
15
16
|
align="center-right"
|
|
16
17
|
>
|
|
17
18
|
<FSButton
|
|
@@ -92,6 +93,10 @@ export default defineComponent({
|
|
|
92
93
|
FSRow
|
|
93
94
|
},
|
|
94
95
|
props: {
|
|
96
|
+
closable: {
|
|
97
|
+
type: Boolean,
|
|
98
|
+
default: true
|
|
99
|
+
},
|
|
95
100
|
modelStatus: {
|
|
96
101
|
type: Object as PropType<FSModelStatus>,
|
|
97
102
|
required: true
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSBaseField
|
|
3
|
+
:description="$props.description"
|
|
4
|
+
:hideHeader="$props.hideHeader"
|
|
5
|
+
:required="$props.required"
|
|
6
|
+
:editable="$props.editable"
|
|
7
|
+
:label="$props.label"
|
|
8
|
+
:messages="messages"
|
|
9
|
+
>
|
|
10
|
+
<FSRow>
|
|
11
|
+
<FSNumberField
|
|
12
|
+
:validationValue="$props.modelValue"
|
|
13
|
+
:editable="$props.editable"
|
|
14
|
+
:validateOn="validateOn"
|
|
15
|
+
:rules="$props.rules"
|
|
16
|
+
:hideHeader="true"
|
|
17
|
+
:messages="messages"
|
|
18
|
+
:modelValue="$props.modelValue.value"
|
|
19
|
+
@update:modelValue="$emit('update:modelValue', { value: $event, unit: $props.modelValue.unit })"
|
|
20
|
+
v-bind="$attrs"
|
|
21
|
+
>
|
|
22
|
+
<template
|
|
23
|
+
v-for="(_, name) in numberSlots"
|
|
24
|
+
v-slot:[name]="slotData"
|
|
25
|
+
>
|
|
26
|
+
<slot
|
|
27
|
+
:name="name"
|
|
28
|
+
v-bind="slotData"
|
|
29
|
+
/>
|
|
30
|
+
</template>
|
|
31
|
+
</FSNumberField>
|
|
32
|
+
<FSSelectField
|
|
33
|
+
class="fs-time-field-select"
|
|
34
|
+
:editable="$props.editable"
|
|
35
|
+
:hideHeader="true"
|
|
36
|
+
:clearable="false"
|
|
37
|
+
:items="units"
|
|
38
|
+
:modelValue="$props.modelValue.unit"
|
|
39
|
+
@update:modelValue="$emit('update:modelValue', { value: $props.modelValue.value, unit: $event })"
|
|
40
|
+
>
|
|
41
|
+
<template
|
|
42
|
+
v-for="(_, name) in selectSlots"
|
|
43
|
+
v-slot:[name]="slotData"
|
|
44
|
+
>
|
|
45
|
+
<slot
|
|
46
|
+
:name="name"
|
|
47
|
+
v-bind="slotData"
|
|
48
|
+
/>
|
|
49
|
+
</template>
|
|
50
|
+
</FSSelectField>
|
|
51
|
+
</FSRow>
|
|
52
|
+
</FSBaseField>
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script lang="ts">
|
|
56
|
+
import { computed, defineComponent, type PropType } from "vue";
|
|
57
|
+
|
|
58
|
+
import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/models";
|
|
59
|
+
|
|
60
|
+
import { useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
|
|
61
|
+
import { timeSteps } from "@dative-gpi/foundation-shared-components/utils";
|
|
62
|
+
|
|
63
|
+
import FSNumberField from "./FSNumberField.vue";
|
|
64
|
+
import FSSelectField from "./FSSelectField.vue";
|
|
65
|
+
import FSBaseField from "./FSBaseField.vue";
|
|
66
|
+
import FSRow from "../FSRow.vue";
|
|
67
|
+
|
|
68
|
+
export default defineComponent({
|
|
69
|
+
name: "FSTimeStepField",
|
|
70
|
+
components: {
|
|
71
|
+
FSNumberField,
|
|
72
|
+
FSSelectField,
|
|
73
|
+
FSBaseField,
|
|
74
|
+
FSRow
|
|
75
|
+
},
|
|
76
|
+
props: {
|
|
77
|
+
label: {
|
|
78
|
+
type: String as PropType<string | null>,
|
|
79
|
+
required: false,
|
|
80
|
+
default: null
|
|
81
|
+
},
|
|
82
|
+
description: {
|
|
83
|
+
type: String as PropType<string | null>,
|
|
84
|
+
required: false,
|
|
85
|
+
default: null
|
|
86
|
+
},
|
|
87
|
+
modelValue: {
|
|
88
|
+
type: Object as PropType<{ value: number, unit: TimeUnit }>,
|
|
89
|
+
required: true
|
|
90
|
+
},
|
|
91
|
+
allowedUnits: {
|
|
92
|
+
type: Array as PropType<TimeUnit[]>,
|
|
93
|
+
required: false,
|
|
94
|
+
default: () => []
|
|
95
|
+
},
|
|
96
|
+
hideHeader: {
|
|
97
|
+
type: Boolean,
|
|
98
|
+
required: false,
|
|
99
|
+
default: false
|
|
100
|
+
},
|
|
101
|
+
required: {
|
|
102
|
+
type: Boolean,
|
|
103
|
+
required: false,
|
|
104
|
+
default: false
|
|
105
|
+
},
|
|
106
|
+
rules: {
|
|
107
|
+
type: Array as PropType<any[]>,
|
|
108
|
+
required: false,
|
|
109
|
+
default: () => []
|
|
110
|
+
},
|
|
111
|
+
messages: {
|
|
112
|
+
type: Array as PropType<string[]>,
|
|
113
|
+
required: false,
|
|
114
|
+
default: null
|
|
115
|
+
},
|
|
116
|
+
editable: {
|
|
117
|
+
type: Boolean,
|
|
118
|
+
required: false,
|
|
119
|
+
default: true
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
emits: ["update:modelValue"],
|
|
123
|
+
setup(props) {
|
|
124
|
+
const { validateOn, getMessages } = useRules();
|
|
125
|
+
const { slots } = useSlots();
|
|
126
|
+
|
|
127
|
+
delete slots.label;
|
|
128
|
+
delete slots.description;
|
|
129
|
+
|
|
130
|
+
const numberSlots = computed((): any => {
|
|
131
|
+
return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
|
|
132
|
+
acc[key.substring("number-".length)] = slots[key];
|
|
133
|
+
return acc;
|
|
134
|
+
}, {});
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
const selectSlots = computed((): any => {
|
|
138
|
+
return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
|
|
139
|
+
acc[key.substring("select-".length)] = slots[key];
|
|
140
|
+
return acc;
|
|
141
|
+
}, {});
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
|
|
145
|
+
|
|
146
|
+
const units = computed(() => props.allowedUnits && props.allowedUnits.length ? timeSteps.filter(t => props.allowedUnits.includes(t.id)) : timeSteps);
|
|
147
|
+
|
|
148
|
+
return {
|
|
149
|
+
numberSlots,
|
|
150
|
+
selectSlots,
|
|
151
|
+
validateOn,
|
|
152
|
+
messages,
|
|
153
|
+
units
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
</script>
|
|
@@ -14,13 +14,21 @@
|
|
|
14
14
|
:height="imageSize"
|
|
15
15
|
:wrap="false"
|
|
16
16
|
>
|
|
17
|
-
<
|
|
18
|
-
v-if="$props.
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
<template
|
|
18
|
+
v-if="$props.imageId"
|
|
19
|
+
>
|
|
20
|
+
<slot
|
|
21
|
+
name="image"
|
|
22
|
+
v-bind="{ imageSize }"
|
|
23
|
+
>
|
|
24
|
+
<FSImage
|
|
25
|
+
:imageId="$props.imageId"
|
|
26
|
+
:cover="imageCover"
|
|
27
|
+
:height="imageSize"
|
|
28
|
+
:width="imageSize"
|
|
29
|
+
/>
|
|
30
|
+
</slot>
|
|
31
|
+
</template>
|
|
24
32
|
<FSIcon
|
|
25
33
|
v-else-if="$props.icon && $props.color"
|
|
26
34
|
:color="$props.color"
|
|
@@ -136,13 +144,22 @@
|
|
|
136
144
|
:height="imageSize"
|
|
137
145
|
:wrap="false"
|
|
138
146
|
>
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
147
|
+
|
|
148
|
+
<template
|
|
149
|
+
v-if="$props.imageId"
|
|
150
|
+
>
|
|
151
|
+
<slot
|
|
152
|
+
name="image"
|
|
153
|
+
v-bind="{ imageSize }"
|
|
154
|
+
>
|
|
155
|
+
<FSImage
|
|
156
|
+
:imageId="$props.imageId"
|
|
157
|
+
:cover="imageCover"
|
|
158
|
+
:height="imageSize"
|
|
159
|
+
:width="imageSize"
|
|
160
|
+
/>
|
|
161
|
+
</slot>
|
|
162
|
+
</template>
|
|
146
163
|
<FSIconCard
|
|
147
164
|
v-else-if="$props.icon && $props.iconBackgroundColor && $props.iconBackgroundColor.length > 0"
|
|
148
165
|
iconSize="70px"
|
|
@@ -220,7 +237,7 @@ import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-componen
|
|
|
220
237
|
import FSBreadcrumbs from "../FSBreadcrumbs.vue";
|
|
221
238
|
import FSSlideGroup from "../FSSlideGroup.vue";
|
|
222
239
|
import FSIconCard from "../FSIconCard.vue";
|
|
223
|
-
import
|
|
240
|
+
import FSImage from "../FSImage.vue";
|
|
224
241
|
import FSIcon from "../FSIcon.vue";
|
|
225
242
|
import FSText from "../FSText.vue";
|
|
226
243
|
import FSCol from "../FSCol.vue";
|
|
@@ -232,14 +249,14 @@ export default defineComponent({
|
|
|
232
249
|
FSBreadcrumbs,
|
|
233
250
|
FSSlideGroup,
|
|
234
251
|
FSIconCard,
|
|
235
|
-
|
|
252
|
+
FSImage,
|
|
236
253
|
FSIcon,
|
|
237
254
|
FSText,
|
|
238
255
|
FSCol,
|
|
239
256
|
FSRow
|
|
240
257
|
},
|
|
241
258
|
props: {
|
|
242
|
-
|
|
259
|
+
imageId: {
|
|
243
260
|
type: String as PropType<string | null>,
|
|
244
261
|
required: false,
|
|
245
262
|
default: null
|
|
@@ -1,36 +1,156 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
<FSSkeletonView>
|
|
3
|
+
<template
|
|
4
|
+
#header
|
|
5
|
+
>
|
|
6
|
+
<FSEntityHeader
|
|
7
|
+
ref="headerRef"
|
|
8
|
+
:breadcrumbs="$props.breadcrumbs"
|
|
9
|
+
:description="$props.description"
|
|
10
|
+
:subtitle="$props.subtitle"
|
|
11
|
+
:title="$props.title"
|
|
12
|
+
:light="lightHeader"
|
|
13
|
+
:imageId="imageId"
|
|
14
|
+
:icon="$props.icon"
|
|
15
|
+
:color="$props.color"
|
|
16
|
+
:iconBackgroundColors="$props.iconBackgroundColors"
|
|
17
|
+
:imageCover="$props.imageCover"
|
|
18
|
+
>
|
|
19
|
+
<template
|
|
20
|
+
v-if="$slots.image"
|
|
21
|
+
#image="props"
|
|
22
|
+
>
|
|
23
|
+
<slot
|
|
24
|
+
name="image"
|
|
25
|
+
v-bind="props"
|
|
26
|
+
/>
|
|
27
|
+
</template>
|
|
28
|
+
<template
|
|
29
|
+
#title-append
|
|
30
|
+
>
|
|
31
|
+
<slot
|
|
32
|
+
name="title-append"
|
|
33
|
+
/>
|
|
34
|
+
</template>
|
|
35
|
+
<template
|
|
36
|
+
#toolbar
|
|
37
|
+
v-if="slots['toolbar']"
|
|
38
|
+
>
|
|
39
|
+
<slot
|
|
40
|
+
name="toolbar"
|
|
41
|
+
/>
|
|
42
|
+
</template>
|
|
43
|
+
</FSEntityHeader>
|
|
44
|
+
</template>
|
|
45
|
+
<template
|
|
46
|
+
#default
|
|
47
|
+
>
|
|
48
|
+
<!-- <FSFadeOut
|
|
49
|
+
padding="0 8px 0 0"
|
|
50
|
+
:height="height"
|
|
51
|
+
@scroll="onScroll"
|
|
52
|
+
> -->
|
|
53
|
+
<slot
|
|
54
|
+
name="default"
|
|
55
|
+
/>
|
|
56
|
+
<!-- </FSFadeOut> -->
|
|
57
|
+
</template>
|
|
58
|
+
</FSSkeletonView>
|
|
6
59
|
</template>
|
|
7
60
|
|
|
8
61
|
<script lang="ts">
|
|
9
|
-
import { computed, defineComponent, type PropType } from "vue";
|
|
62
|
+
import { computed, defineComponent, type PropType, ref } from "vue";
|
|
10
63
|
|
|
11
|
-
import {
|
|
64
|
+
import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
|
|
65
|
+
import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
|
|
12
66
|
|
|
13
|
-
import
|
|
67
|
+
import FSEntityHeader from "./FSEntityHeader.vue";
|
|
68
|
+
import FSSkeletonView from "./FSSkeletonView.vue";
|
|
69
|
+
// import FSFadeOut from "../FSFadeOut.vue";
|
|
14
70
|
|
|
15
71
|
export default defineComponent({
|
|
16
72
|
name: "FSEntityView",
|
|
17
73
|
components: {
|
|
18
|
-
|
|
74
|
+
FSEntityHeader,
|
|
75
|
+
FSSkeletonView
|
|
76
|
+
// FSFadeOut
|
|
19
77
|
},
|
|
20
78
|
props: {
|
|
21
79
|
imageId: {
|
|
22
80
|
type: String as PropType<string | null>,
|
|
23
81
|
required: false,
|
|
24
82
|
default: null
|
|
83
|
+
},
|
|
84
|
+
imageCover: {
|
|
85
|
+
type: Boolean,
|
|
86
|
+
required: false,
|
|
87
|
+
default: true
|
|
88
|
+
},
|
|
89
|
+
icon: {
|
|
90
|
+
type: String as PropType<string | null>,
|
|
91
|
+
required: false,
|
|
92
|
+
default: null
|
|
93
|
+
},
|
|
94
|
+
color : {
|
|
95
|
+
type: Object as PropType<ColorEnum | null>,
|
|
96
|
+
required: false,
|
|
97
|
+
default: null
|
|
98
|
+
},
|
|
99
|
+
iconBackgroundColors: {
|
|
100
|
+
type: Array as PropType<string[]>,
|
|
101
|
+
required: false,
|
|
102
|
+
default: () => []
|
|
103
|
+
},
|
|
104
|
+
title: {
|
|
105
|
+
type: String as PropType<string | null>,
|
|
106
|
+
required: false,
|
|
107
|
+
default: null
|
|
108
|
+
},
|
|
109
|
+
subtitle: {
|
|
110
|
+
type: String as PropType<string | null>,
|
|
111
|
+
required: false,
|
|
112
|
+
default: null
|
|
113
|
+
},
|
|
114
|
+
description: {
|
|
115
|
+
type: String as PropType<string | null>,
|
|
116
|
+
required: false,
|
|
117
|
+
default: null
|
|
118
|
+
},
|
|
119
|
+
breadcrumbs: {
|
|
120
|
+
type: Array as PropType<FSBreadcrumbItem[]>,
|
|
121
|
+
required: false,
|
|
122
|
+
default: () => []
|
|
25
123
|
}
|
|
26
124
|
},
|
|
27
|
-
setup(
|
|
28
|
-
const
|
|
29
|
-
|
|
125
|
+
setup() {
|
|
126
|
+
const { isExtraSmall, windowHeight } = useBreakpoints();
|
|
127
|
+
const { slots } = useSlots();
|
|
128
|
+
|
|
129
|
+
const headerRef = ref<HTMLElement | null>(null);
|
|
130
|
+
|
|
131
|
+
const lightHeader = ref(false);
|
|
132
|
+
|
|
133
|
+
const height = computed((): string => {
|
|
134
|
+
let other = isExtraSmall.value ? 16 + 16 : 24 + 24; // Paddings
|
|
135
|
+
|
|
136
|
+
return `${windowHeight.value - other}px`;
|
|
30
137
|
});
|
|
31
138
|
|
|
139
|
+
// const onScroll = (event: any): void => {
|
|
140
|
+
// if (event.onTop) {
|
|
141
|
+
// lightHeader.value = false;
|
|
142
|
+
// }
|
|
143
|
+
// else if (event.target.scrollTop > (headerRef.value as any)?.$el.clientHeight) {
|
|
144
|
+
// lightHeader.value = true;
|
|
145
|
+
// }
|
|
146
|
+
// };
|
|
147
|
+
|
|
32
148
|
return {
|
|
33
|
-
|
|
149
|
+
lightHeader,
|
|
150
|
+
headerRef,
|
|
151
|
+
height,
|
|
152
|
+
slots
|
|
153
|
+
// onScroll
|
|
34
154
|
};
|
|
35
155
|
}
|
|
36
156
|
});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-shared-components",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.21",
|
|
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": "1.0.
|
|
14
|
-
"@dative-gpi/foundation-shared-services": "1.0.
|
|
13
|
+
"@dative-gpi/foundation-shared-domain": "1.0.21",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "1.0.21"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"@dative-gpi/bones-ui": "^0.0.75",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"sass": "1.71.1",
|
|
36
36
|
"sass-loader": "13.3.2"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "fd3fc21e8eff1096d820f66cce0f2fe3556a2cd7"
|
|
39
39
|
}
|
package/utils/time.ts
CHANGED
|
@@ -1,7 +1,22 @@
|
|
|
1
1
|
import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
|
|
2
2
|
|
|
3
|
+
import { TimeUnit } from "@dative-gpi/foundation-shared-domain/models"
|
|
4
|
+
|
|
3
5
|
const { $tr } = useTranslationsProvider();
|
|
4
6
|
|
|
7
|
+
export const timeSteps = [
|
|
8
|
+
{ id: TimeUnit.Second, label: $tr("ui.time-step.second.singular", "Second"), plural: $tr("ui.time-step.second.plural", "Seconds") },
|
|
9
|
+
{ id: TimeUnit.Minute, label: $tr("ui.time-step.minute.singular", "Minute"), plural: $tr("ui.time-step.minute.plural", "Minutes") },
|
|
10
|
+
{ id: TimeUnit.Hour, label: $tr("ui.time-step.hour.singular", "Hour"), plural: $tr("ui.time-step.hour.plural", "Hours") },
|
|
11
|
+
{ id: TimeUnit.Day, label: $tr("ui.time-step.day.singular", "Day"), plural: $tr("ui.time-step.day.plural", "Days") },
|
|
12
|
+
{ id: TimeUnit.Week, label: $tr("ui.time-step.week.singular", "Week"), plural: $tr("ui.time-step.week.plural", "Weeks") },
|
|
13
|
+
{ id: TimeUnit.Month, label: $tr("ui.time-step.month.singular", "Month"), plural: $tr("ui.time-step.month.plural", "Months") },
|
|
14
|
+
{ id: TimeUnit.Year, label: $tr("ui.time-step.year.singular", "Year"), plural: $tr("ui.time-step.year.plural", "Years") },
|
|
15
|
+
]
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
// TODO : remove everything below this line
|
|
5
20
|
export const timeScale: any[] = [
|
|
6
21
|
{ id: 1, label: $tr("ui.time-field.second.singular", "Second"), plural: $tr("ui.time-field.second.plural", "Seconds") },
|
|
7
22
|
{ id: 60, label: $tr("ui.time-field.minute.singular", "Minute"), plural: $tr("ui.time-field.minute.plural", "Minutes") },
|
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<FSSkeletonView>
|
|
3
|
-
<template
|
|
4
|
-
#header
|
|
5
|
-
>
|
|
6
|
-
<FSEntityHeader
|
|
7
|
-
ref="headerRef"
|
|
8
|
-
:breadcrumbs="$props.breadcrumbs"
|
|
9
|
-
:description="$props.description"
|
|
10
|
-
:subtitle="$props.subtitle"
|
|
11
|
-
:imageSource="$props.imageSource"
|
|
12
|
-
:title="$props.title"
|
|
13
|
-
:light="lightHeader"
|
|
14
|
-
:icon="$props.icon"
|
|
15
|
-
:color="$props.color"
|
|
16
|
-
:iconBackgroundColors="$props.iconBackgroundColors"
|
|
17
|
-
:imageCover="$props.imageCover"
|
|
18
|
-
>
|
|
19
|
-
<template
|
|
20
|
-
#title-append
|
|
21
|
-
>
|
|
22
|
-
<slot
|
|
23
|
-
name="title-append"
|
|
24
|
-
/>
|
|
25
|
-
</template>
|
|
26
|
-
<template
|
|
27
|
-
#toolbar
|
|
28
|
-
v-if="slots['toolbar']"
|
|
29
|
-
>
|
|
30
|
-
<slot
|
|
31
|
-
name="toolbar"
|
|
32
|
-
/>
|
|
33
|
-
</template>
|
|
34
|
-
</FSEntityHeader>
|
|
35
|
-
</template>
|
|
36
|
-
<template
|
|
37
|
-
#default
|
|
38
|
-
>
|
|
39
|
-
<!-- <FSFadeOut
|
|
40
|
-
padding="0 8px 0 0"
|
|
41
|
-
:height="height"
|
|
42
|
-
@scroll="onScroll"
|
|
43
|
-
> -->
|
|
44
|
-
<slot
|
|
45
|
-
name="default"
|
|
46
|
-
/>
|
|
47
|
-
<!-- </FSFadeOut> -->
|
|
48
|
-
</template>
|
|
49
|
-
</FSSkeletonView>
|
|
50
|
-
</template>
|
|
51
|
-
|
|
52
|
-
<script lang="ts">
|
|
53
|
-
import { computed, defineComponent, type PropType, ref } from "vue";
|
|
54
|
-
|
|
55
|
-
import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
|
|
56
|
-
import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
|
|
57
|
-
|
|
58
|
-
import FSEntityHeader from "./FSEntityHeader.vue";
|
|
59
|
-
import FSSkeletonView from "./FSSkeletonView.vue";
|
|
60
|
-
// import FSFadeOut from "../FSFadeOut.vue";
|
|
61
|
-
|
|
62
|
-
export default defineComponent({
|
|
63
|
-
name: "FSEntityViewUI",
|
|
64
|
-
components: {
|
|
65
|
-
FSEntityHeader,
|
|
66
|
-
FSSkeletonView
|
|
67
|
-
// FSFadeOut
|
|
68
|
-
},
|
|
69
|
-
props: {
|
|
70
|
-
imageSource: {
|
|
71
|
-
type: String as PropType<string | null>,
|
|
72
|
-
required: false,
|
|
73
|
-
default: null
|
|
74
|
-
},
|
|
75
|
-
imageCover: {
|
|
76
|
-
type: Boolean,
|
|
77
|
-
required: false,
|
|
78
|
-
default: true
|
|
79
|
-
},
|
|
80
|
-
icon: {
|
|
81
|
-
type: String as PropType<string | null>,
|
|
82
|
-
required: false,
|
|
83
|
-
default: null
|
|
84
|
-
},
|
|
85
|
-
color : {
|
|
86
|
-
type: Object as PropType<ColorEnum | null>,
|
|
87
|
-
required: false,
|
|
88
|
-
default: null
|
|
89
|
-
},
|
|
90
|
-
iconBackgroundColors: {
|
|
91
|
-
type: Array as PropType<string[]>,
|
|
92
|
-
required: false,
|
|
93
|
-
default: () => []
|
|
94
|
-
},
|
|
95
|
-
title: {
|
|
96
|
-
type: String as PropType<string | null>,
|
|
97
|
-
required: false,
|
|
98
|
-
default: null
|
|
99
|
-
},
|
|
100
|
-
subtitle: {
|
|
101
|
-
type: String as PropType<string | null>,
|
|
102
|
-
required: false,
|
|
103
|
-
default: null
|
|
104
|
-
},
|
|
105
|
-
description: {
|
|
106
|
-
type: String as PropType<string | null>,
|
|
107
|
-
required: false,
|
|
108
|
-
default: null
|
|
109
|
-
},
|
|
110
|
-
breadcrumbs: {
|
|
111
|
-
type: Array as PropType<FSBreadcrumbItem[]>,
|
|
112
|
-
required: false,
|
|
113
|
-
default: () => []
|
|
114
|
-
}
|
|
115
|
-
},
|
|
116
|
-
setup() {
|
|
117
|
-
const { isExtraSmall, windowHeight } = useBreakpoints();
|
|
118
|
-
const { slots } = useSlots();
|
|
119
|
-
|
|
120
|
-
const headerRef = ref<HTMLElement | null>(null);
|
|
121
|
-
|
|
122
|
-
const lightHeader = ref(false);
|
|
123
|
-
|
|
124
|
-
const height = computed((): string => {
|
|
125
|
-
let other = isExtraSmall.value ? 16 + 16 : 24 + 24; // Paddings
|
|
126
|
-
|
|
127
|
-
return `${windowHeight.value - other}px`;
|
|
128
|
-
});
|
|
129
|
-
|
|
130
|
-
// const onScroll = (event: any): void => {
|
|
131
|
-
// if (event.onTop) {
|
|
132
|
-
// lightHeader.value = false;
|
|
133
|
-
// }
|
|
134
|
-
// else if (event.target.scrollTop > (headerRef.value as any)?.$el.clientHeight) {
|
|
135
|
-
// lightHeader.value = true;
|
|
136
|
-
// }
|
|
137
|
-
// };
|
|
138
|
-
|
|
139
|
-
return {
|
|
140
|
-
lightHeader,
|
|
141
|
-
headerRef,
|
|
142
|
-
height,
|
|
143
|
-
slots
|
|
144
|
-
// onScroll
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
|
-
});
|
|
148
|
-
</script>
|