@dative-gpi/foundation-shared-components 1.0.185 → 1.0.186-tile-list-6
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,235 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<FSCol
|
|
3
|
+
gap="12px"
|
|
4
|
+
>
|
|
5
|
+
<FSSearchField
|
|
6
|
+
v-if="$props.searchable"
|
|
7
|
+
:hideHeader="true"
|
|
8
|
+
:modelValue="actualSearch"
|
|
9
|
+
@update:modelValue="onSearch"
|
|
10
|
+
/>
|
|
11
|
+
<FSFadeOut
|
|
12
|
+
v-if="$props.direction == 'column'"
|
|
13
|
+
:maxHeight="$props.maxHeight"
|
|
14
|
+
:maskHeight="0"
|
|
15
|
+
>
|
|
16
|
+
<FSCol>
|
|
17
|
+
<template
|
|
18
|
+
v-if="$props.loading"
|
|
19
|
+
>
|
|
20
|
+
<FSLoader
|
|
21
|
+
v-for="i in 4"
|
|
22
|
+
:key="i"
|
|
23
|
+
width="100%"
|
|
24
|
+
height="50px"
|
|
25
|
+
/>
|
|
26
|
+
</template>
|
|
27
|
+
<template
|
|
28
|
+
v-else
|
|
29
|
+
>
|
|
30
|
+
<template
|
|
31
|
+
v-for="(item, index) in filteredItems"
|
|
32
|
+
:key="index"
|
|
33
|
+
>
|
|
34
|
+
<slot
|
|
35
|
+
name="item.tile"
|
|
36
|
+
v-bind="{ index, item, toggleSelect }"
|
|
37
|
+
>
|
|
38
|
+
<FSSimpleTileUI
|
|
39
|
+
:key="index"
|
|
40
|
+
:id="item.id"
|
|
41
|
+
:label="item.label"
|
|
42
|
+
:code="item.code"
|
|
43
|
+
:icon="item.icon"
|
|
44
|
+
:imageId="item.imageId"
|
|
45
|
+
:selectable="$props.selectable"
|
|
46
|
+
width="fill"
|
|
47
|
+
v-bind="$props.tileProps ? $props.tileProps(item) : undefined"
|
|
48
|
+
:modelValue="isSelected(item.id)"
|
|
49
|
+
@update:modelValue="toggleSelect(item)"
|
|
50
|
+
/>
|
|
51
|
+
</slot>
|
|
52
|
+
</template>
|
|
53
|
+
</template>
|
|
54
|
+
</FSCol>
|
|
55
|
+
</FSFadeOut>
|
|
56
|
+
<FSSlideGroup
|
|
57
|
+
v-else
|
|
58
|
+
>
|
|
59
|
+
<template
|
|
60
|
+
v-if="$props.loading"
|
|
61
|
+
>
|
|
62
|
+
<FSLoader
|
|
63
|
+
v-for="i in 4"
|
|
64
|
+
:key="i"
|
|
65
|
+
width="100%"
|
|
66
|
+
height="50px"
|
|
67
|
+
/>
|
|
68
|
+
</template>
|
|
69
|
+
<template
|
|
70
|
+
v-else
|
|
71
|
+
>
|
|
72
|
+
<template
|
|
73
|
+
v-for="(item, index) in filteredItems"
|
|
74
|
+
:key="index"
|
|
75
|
+
>
|
|
76
|
+
<slot
|
|
77
|
+
name="item.tile"
|
|
78
|
+
v-bind="{ index, item, toggleSelect }"
|
|
79
|
+
>
|
|
80
|
+
<FSSimpleTileUI
|
|
81
|
+
:key="index"
|
|
82
|
+
:id="item.id"
|
|
83
|
+
:label="item.label"
|
|
84
|
+
:code="item.code"
|
|
85
|
+
:icon="item.icon"
|
|
86
|
+
:imageId="item.imageId"
|
|
87
|
+
:selectable="$props.selectable"
|
|
88
|
+
v-bind="$props.tileProps ? $props.tileProps(item) : undefined"
|
|
89
|
+
width="348px"
|
|
90
|
+
:modelValue="isSelected(item.id)"
|
|
91
|
+
@update:modelValue="toggleSelect(item)"
|
|
92
|
+
/>
|
|
93
|
+
</slot>
|
|
94
|
+
</template>
|
|
95
|
+
</template>
|
|
96
|
+
</FSSlideGroup>
|
|
97
|
+
</FSCol>
|
|
98
|
+
</template>
|
|
99
|
+
|
|
100
|
+
<script lang="ts">
|
|
101
|
+
import { computed } from "vue";
|
|
102
|
+
import { defineComponent, type PropType, ref, watch } from "vue";
|
|
103
|
+
|
|
104
|
+
import { filterItems } from "../../utils";
|
|
105
|
+
|
|
106
|
+
import FSCol from "../FSCol.vue";
|
|
107
|
+
import FSLoader from '../FSLoader.vue';
|
|
108
|
+
import FSFadeOut from "../FSFadeOut.vue";
|
|
109
|
+
import FSSlideGroup from "../FSSlideGroup.vue"
|
|
110
|
+
import FSSearchField from "../fields/FSSearchField.vue";
|
|
111
|
+
import FSSimpleTileUI from "../tiles/FSSimpleTileUI.vue";
|
|
112
|
+
|
|
113
|
+
export default defineComponent({
|
|
114
|
+
name: "FSTileList",
|
|
115
|
+
components: {
|
|
116
|
+
FSCol,
|
|
117
|
+
FSFadeOut,
|
|
118
|
+
FSLoader,
|
|
119
|
+
FSSlideGroup,
|
|
120
|
+
FSSearchField,
|
|
121
|
+
FSSimpleTileUI
|
|
122
|
+
},
|
|
123
|
+
props: {
|
|
124
|
+
items: {
|
|
125
|
+
type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string | null, [index: string]: any}[]>,
|
|
126
|
+
required: true
|
|
127
|
+
},
|
|
128
|
+
tileProps: {
|
|
129
|
+
type: Function as PropType<(item: any) => Record<string, any>>,
|
|
130
|
+
required: false
|
|
131
|
+
},
|
|
132
|
+
searchable: {
|
|
133
|
+
type: Boolean,
|
|
134
|
+
required: false,
|
|
135
|
+
default: false
|
|
136
|
+
},
|
|
137
|
+
search: {
|
|
138
|
+
type: String,
|
|
139
|
+
required: false,
|
|
140
|
+
default: ""
|
|
141
|
+
},
|
|
142
|
+
noFilter: {
|
|
143
|
+
type: Boolean,
|
|
144
|
+
required: false,
|
|
145
|
+
default: false
|
|
146
|
+
},
|
|
147
|
+
maxHeight: {
|
|
148
|
+
type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
|
|
149
|
+
required: false,
|
|
150
|
+
default: undefined
|
|
151
|
+
},
|
|
152
|
+
direction: {
|
|
153
|
+
type: String as PropType<"column" | "slided">,
|
|
154
|
+
required: false,
|
|
155
|
+
default: "column"
|
|
156
|
+
},
|
|
157
|
+
loading: {
|
|
158
|
+
type: Boolean,
|
|
159
|
+
required: false,
|
|
160
|
+
default: false
|
|
161
|
+
},
|
|
162
|
+
selectable: {
|
|
163
|
+
type: Boolean,
|
|
164
|
+
required: false,
|
|
165
|
+
default: false
|
|
166
|
+
},
|
|
167
|
+
singleSelect: {
|
|
168
|
+
type: Boolean,
|
|
169
|
+
required: false,
|
|
170
|
+
default: false
|
|
171
|
+
},
|
|
172
|
+
itemValue: {
|
|
173
|
+
type: String,
|
|
174
|
+
required: false,
|
|
175
|
+
default: "id"
|
|
176
|
+
},
|
|
177
|
+
modelValue: {
|
|
178
|
+
type: Array as PropType<string[]>,
|
|
179
|
+
default: () => [],
|
|
180
|
+
required: false
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
emits: ["update:search","update:modelValue"],
|
|
184
|
+
setup(props, { emit }) {
|
|
185
|
+
const actualSearch = ref<string | null>(props.search);
|
|
186
|
+
const filteredItems = computed(() => {
|
|
187
|
+
if(!actualSearch.value) {
|
|
188
|
+
return props.items;
|
|
189
|
+
}
|
|
190
|
+
return filterItems(props.items, actualSearch.value);
|
|
191
|
+
});
|
|
192
|
+
|
|
193
|
+
const onSearch = (value: string) => {
|
|
194
|
+
if(props.noFilter) {
|
|
195
|
+
emit("update:search", value);
|
|
196
|
+
} else {
|
|
197
|
+
actualSearch.value = value;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
const isSelected = (id: string): boolean => {
|
|
202
|
+
return props.modelValue.includes(id);
|
|
203
|
+
};
|
|
204
|
+
|
|
205
|
+
const toggleSelect = (item: any): void => {
|
|
206
|
+
let values = props.modelValue.slice();
|
|
207
|
+
const index = values.indexOf(item[props.itemValue]);
|
|
208
|
+
if (index > -1) {
|
|
209
|
+
values.splice(index, 1);
|
|
210
|
+
}
|
|
211
|
+
else {
|
|
212
|
+
if (props.singleSelect) {
|
|
213
|
+
values = [item[props.itemValue]];
|
|
214
|
+
}
|
|
215
|
+
else {
|
|
216
|
+
values.push(item[props.itemValue]);
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
emit("update:modelValue", values);
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
watch(() => props.search, (value) => {
|
|
223
|
+
actualSearch.value = value;
|
|
224
|
+
});
|
|
225
|
+
|
|
226
|
+
return {
|
|
227
|
+
actualSearch,
|
|
228
|
+
filteredItems,
|
|
229
|
+
onSearch,
|
|
230
|
+
isSelected,
|
|
231
|
+
toggleSelect
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
</script>
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
:bottomColor="$props.bottomColor"
|
|
5
5
|
:width="$props.width"
|
|
6
6
|
:modelValue="$props.modelValue"
|
|
7
|
+
:selectable="$props.selectable"
|
|
8
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
7
9
|
v-bind="$attrs"
|
|
8
10
|
>
|
|
9
11
|
<FSCol
|
|
@@ -141,8 +143,14 @@ export default defineComponent({
|
|
|
141
143
|
type: Boolean,
|
|
142
144
|
required: false,
|
|
143
145
|
default: false
|
|
146
|
+
},
|
|
147
|
+
selectable: {
|
|
148
|
+
type: Boolean,
|
|
149
|
+
required: false,
|
|
150
|
+
default: false
|
|
144
151
|
}
|
|
145
152
|
},
|
|
153
|
+
emits: ['update:modelValue'],
|
|
146
154
|
setup(props) {
|
|
147
155
|
const { isMobileSized } = useBreakpoints();
|
|
148
156
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dative-gpi/foundation-shared-components",
|
|
3
|
+
"repository": {
|
|
4
|
+
"url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
|
|
5
|
+
},
|
|
3
6
|
"sideEffects": false,
|
|
4
|
-
"version": "1.0.
|
|
7
|
+
"version": "1.0.186-tile-list-6",
|
|
5
8
|
"description": "",
|
|
6
9
|
"publishConfig": {
|
|
7
10
|
"access": "public"
|
|
@@ -10,8 +13,8 @@
|
|
|
10
13
|
"author": "",
|
|
11
14
|
"license": "ISC",
|
|
12
15
|
"dependencies": {
|
|
13
|
-
"@dative-gpi/foundation-shared-domain": "1.0.
|
|
14
|
-
"@dative-gpi/foundation-shared-services": "1.0.
|
|
16
|
+
"@dative-gpi/foundation-shared-domain": "1.0.186-tile-list-6",
|
|
17
|
+
"@dative-gpi/foundation-shared-services": "1.0.186-tile-list-6"
|
|
15
18
|
},
|
|
16
19
|
"peerDependencies": {
|
|
17
20
|
"@dative-gpi/bones-ui": "^1.0.0",
|
|
@@ -35,5 +38,5 @@
|
|
|
35
38
|
"sass": "1.71.1",
|
|
36
39
|
"sass-loader": "13.3.2"
|
|
37
40
|
},
|
|
38
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "e263e42d3440d749a0b562747515b46f0480530f"
|
|
39
42
|
}
|
package/tools/chartsTools.ts
CHANGED
|
@@ -374,16 +374,10 @@ export const yAxisTypeFromSerieType = (serieType: SerieType): AxisType[] => {
|
|
|
374
374
|
}
|
|
375
375
|
}
|
|
376
376
|
|
|
377
|
-
export const
|
|
378
|
-
return chartType == ChartType.XY;
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
export const hasXAxis = (chartType: ChartType) => {
|
|
377
|
+
export const hasAxis = (chartType: ChartType) => {
|
|
382
378
|
switch (chartType) {
|
|
383
379
|
case ChartType.XY:
|
|
384
380
|
case ChartType.Heatmap:
|
|
385
|
-
case ChartType.Gauge:
|
|
386
|
-
case ChartType.Slider:
|
|
387
381
|
return true;
|
|
388
382
|
default:
|
|
389
383
|
return false;
|