@dative-gpi/foundation-shared-components 1.0.167 → 1.0.168-work-break
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/FSSpan.vue +10 -1
- package/components/FSText.vue +10 -1
- package/components/FSTreeView.vue +107 -0
- package/components/carousels/FSCarousel.vue +23 -0
- package/components/carousels/FSCarouselItem.vue +14 -0
- package/components/fields/FSTreeViewField.vue +6 -6
- package/package.json +4 -4
- package/styles/components/fs_span.scss +4 -0
package/components/FSSpan.vue
CHANGED
|
@@ -44,7 +44,12 @@ export default defineComponent({
|
|
|
44
44
|
type: String as PropType<"left" | "center" | "right">,
|
|
45
45
|
required: false,
|
|
46
46
|
default: "left"
|
|
47
|
-
}
|
|
47
|
+
},
|
|
48
|
+
wordBreak: {
|
|
49
|
+
type: String as PropType<"normal" | "break-all" | "keep-all" | "break-word">,
|
|
50
|
+
required: false,
|
|
51
|
+
default: "normal"
|
|
52
|
+
},
|
|
48
53
|
},
|
|
49
54
|
setup(props) {
|
|
50
55
|
const { fontStyles } = useBreakpoints();
|
|
@@ -53,6 +58,7 @@ export default defineComponent({
|
|
|
53
58
|
const style = computed((): StyleValue => ({
|
|
54
59
|
"--fs-span-text-align": props.align,
|
|
55
60
|
"--fs-span-line-clamp": props.lineClamp.toString(),
|
|
61
|
+
"--fs-span-word-break": props.wordBreak,
|
|
56
62
|
...fontStyles.value
|
|
57
63
|
}));
|
|
58
64
|
|
|
@@ -67,6 +73,9 @@ export default defineComponent({
|
|
|
67
73
|
else if (props.ellipsis) {
|
|
68
74
|
classNames.push("fs-span-ellipsis");
|
|
69
75
|
}
|
|
76
|
+
else if (props.wordBreak !== "normal") {
|
|
77
|
+
classNames.push("fs-span-word-break");
|
|
78
|
+
}
|
|
70
79
|
return classNames;
|
|
71
80
|
});
|
|
72
81
|
|
package/components/FSText.vue
CHANGED
|
@@ -50,7 +50,12 @@ export default defineComponent({
|
|
|
50
50
|
type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" | "soft" | "softContrast">,
|
|
51
51
|
required: false,
|
|
52
52
|
default: "base"
|
|
53
|
-
}
|
|
53
|
+
},
|
|
54
|
+
wordBreak: {
|
|
55
|
+
type: String as PropType<"normal" | "break-all" | "keep-all" | "break-word">,
|
|
56
|
+
required: false,
|
|
57
|
+
default: "normal"
|
|
58
|
+
},
|
|
54
59
|
},
|
|
55
60
|
setup(props) {
|
|
56
61
|
const { fontStyles } = useBreakpoints();
|
|
@@ -62,6 +67,7 @@ export default defineComponent({
|
|
|
62
67
|
const style = computed((): StyleValue => ({
|
|
63
68
|
"--fs-span-line-clamp": props.lineClamp.toString(),
|
|
64
69
|
"--fs-text-color" : colors.value[props.variant]!,
|
|
70
|
+
"--fs-span-word-break": props.wordBreak,
|
|
65
71
|
...fontStyles.value
|
|
66
72
|
}));
|
|
67
73
|
|
|
@@ -76,6 +82,9 @@ export default defineComponent({
|
|
|
76
82
|
else if (props.ellipsis) {
|
|
77
83
|
classNames.push("fs-span-ellipsis");
|
|
78
84
|
}
|
|
85
|
+
else if (props.wordBreak !== "normal") {
|
|
86
|
+
classNames.push("fs-span-word-break");
|
|
87
|
+
}
|
|
79
88
|
return classNames;
|
|
80
89
|
});
|
|
81
90
|
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<template
|
|
3
|
+
v-if="$props.loading"
|
|
4
|
+
>
|
|
5
|
+
<FSCol>
|
|
6
|
+
<FSLoader
|
|
7
|
+
v-if="$props.loading"
|
|
8
|
+
width="100%"
|
|
9
|
+
:height="['40px', '36px']"
|
|
10
|
+
/>
|
|
11
|
+
</FSCol>
|
|
12
|
+
</template>
|
|
13
|
+
<template
|
|
14
|
+
v-else
|
|
15
|
+
>
|
|
16
|
+
<v-treeview
|
|
17
|
+
:itemTitle="$props.itemTitle"
|
|
18
|
+
:itemValue="$props.itemValue"
|
|
19
|
+
:items="treeItems"
|
|
20
|
+
>
|
|
21
|
+
<template
|
|
22
|
+
v-for="(_, name) in $slots"
|
|
23
|
+
v-slot:[name]="slotData"
|
|
24
|
+
>
|
|
25
|
+
<slot
|
|
26
|
+
:name="name"
|
|
27
|
+
v-bind="slotData"
|
|
28
|
+
/>
|
|
29
|
+
</template>
|
|
30
|
+
</v-treeview>
|
|
31
|
+
</template>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script lang="ts">
|
|
35
|
+
import { computed, defineComponent, type PropType } from "vue";
|
|
36
|
+
import { VTreeview } from "vuetify/labs/VTreeview";
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
import FSLoader from "./FSLoader.vue";
|
|
40
|
+
import FSCol from "./FSCol.vue";
|
|
41
|
+
|
|
42
|
+
export default defineComponent({
|
|
43
|
+
name: "FSTreeView",
|
|
44
|
+
components: {
|
|
45
|
+
VTreeview,
|
|
46
|
+
FSLoader,
|
|
47
|
+
FSCol,
|
|
48
|
+
},
|
|
49
|
+
props: {
|
|
50
|
+
items: {
|
|
51
|
+
type: Array as PropType<any[]>,
|
|
52
|
+
required: true
|
|
53
|
+
},
|
|
54
|
+
itemValue: {
|
|
55
|
+
type: String,
|
|
56
|
+
required: false,
|
|
57
|
+
default: "id"
|
|
58
|
+
},
|
|
59
|
+
itemTitle: {
|
|
60
|
+
type: String,
|
|
61
|
+
required: false,
|
|
62
|
+
default: "label"
|
|
63
|
+
},
|
|
64
|
+
itemParent: {
|
|
65
|
+
type: String,
|
|
66
|
+
required: false,
|
|
67
|
+
default: "parentId"
|
|
68
|
+
},
|
|
69
|
+
exclude: {
|
|
70
|
+
type: Array as PropType<string[]>,
|
|
71
|
+
required: false,
|
|
72
|
+
default: () => []
|
|
73
|
+
},
|
|
74
|
+
loading: {
|
|
75
|
+
type: Boolean,
|
|
76
|
+
required: false,
|
|
77
|
+
default: false
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
setup(props) {
|
|
81
|
+
const treeItems = computed((): any[] => {
|
|
82
|
+
const filter = ((parentId: string | null) => {
|
|
83
|
+
return props.items.filter((item: any) => {
|
|
84
|
+
if (props.exclude.includes(item[props.itemValue])) {
|
|
85
|
+
return false;
|
|
86
|
+
}
|
|
87
|
+
return item[props.itemParent] == parentId;
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
const process = ((item: any): any => {
|
|
91
|
+
if (props.items.some((child: any) => child[props.itemParent] === item[props.itemValue])) {
|
|
92
|
+
return {
|
|
93
|
+
...item,
|
|
94
|
+
children: filter(item[props.itemValue]).map(process)
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
return item;
|
|
98
|
+
});
|
|
99
|
+
return filter(null).map(process);
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
return {
|
|
103
|
+
treeItems
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
</script>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<v-carousel
|
|
3
|
+
v-bind="$attrs"
|
|
4
|
+
>
|
|
5
|
+
<template
|
|
6
|
+
v-for="(_, name) in $slots"
|
|
7
|
+
v-slot:[name]="slotData"
|
|
8
|
+
>
|
|
9
|
+
<slot
|
|
10
|
+
:name="name"
|
|
11
|
+
v-bind="slotData"
|
|
12
|
+
/>
|
|
13
|
+
</template>
|
|
14
|
+
</v-carousel>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script lang="ts">
|
|
18
|
+
import { defineComponent } from "vue";
|
|
19
|
+
|
|
20
|
+
export default defineComponent({
|
|
21
|
+
name: "FSCarousel"
|
|
22
|
+
});
|
|
23
|
+
</script>
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
<FSFadeOut
|
|
60
60
|
:maxHeight="maxHeight"
|
|
61
61
|
>
|
|
62
|
-
<
|
|
62
|
+
<FSTreeView
|
|
63
63
|
:itemTitle="$props.itemTitle"
|
|
64
64
|
:itemValue="$props.itemValue"
|
|
65
65
|
:items="treeItems"
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
<template
|
|
124
124
|
#title
|
|
125
125
|
/>
|
|
126
|
-
</
|
|
126
|
+
</FSTreeView>
|
|
127
127
|
</FSFadeOut>
|
|
128
128
|
</template>
|
|
129
129
|
</FSDialogMenu>
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
</template>
|
|
169
169
|
</FSTextField>
|
|
170
170
|
</template>
|
|
171
|
-
<
|
|
171
|
+
<FSTreeView
|
|
172
172
|
:itemTitle="$props.itemTitle"
|
|
173
173
|
:itemValue="$props.itemValue"
|
|
174
174
|
:items="treeItems"
|
|
@@ -232,7 +232,7 @@
|
|
|
232
232
|
<template
|
|
233
233
|
#title
|
|
234
234
|
/>
|
|
235
|
-
</
|
|
235
|
+
</FSTreeView>
|
|
236
236
|
</FSMenu>
|
|
237
237
|
</template>
|
|
238
238
|
</FSCol>
|
|
@@ -241,7 +241,6 @@
|
|
|
241
241
|
|
|
242
242
|
<script lang="ts">
|
|
243
243
|
import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
|
|
244
|
-
import { VTreeview } from "vuetify/labs/VTreeview";
|
|
245
244
|
|
|
246
245
|
import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
|
|
247
246
|
import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
@@ -249,6 +248,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
|
|
|
249
248
|
import FSDialogMenu from "../FSDialogMenu.vue";
|
|
250
249
|
import FSTextField from "./FSTextField.vue";
|
|
251
250
|
import FSCheckbox from "../FSCheckbox.vue";
|
|
251
|
+
import FSTreeView from "../FSTreeView.vue";
|
|
252
252
|
import FSFadeOut from "../FSFadeOut.vue";
|
|
253
253
|
import FSLoader from "../FSLoader.vue";
|
|
254
254
|
import FSRadio from "../FSRadio.vue";
|
|
@@ -259,7 +259,7 @@ import FSCol from "../FSCol.vue";
|
|
|
259
259
|
export default defineComponent({
|
|
260
260
|
name: "FSTreeViewField",
|
|
261
261
|
components: {
|
|
262
|
-
|
|
262
|
+
FSTreeView,
|
|
263
263
|
FSDialogMenu,
|
|
264
264
|
FSTextField,
|
|
265
265
|
FSCheckbox,
|
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.168-work-break",
|
|
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.168-work-break",
|
|
14
|
+
"@dative-gpi/foundation-shared-services": "1.0.168-work-break"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"@dative-gpi/bones-ui": "^1.0.0",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"sass": "1.71.1",
|
|
36
36
|
"sass-loader": "13.3.2"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "d2cb3244f8df1468a7537c75472efd0f67ec47ca"
|
|
39
39
|
}
|