@dative-gpi/foundation-shared-components 1.1.4 → 1.1.5

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.
@@ -1,58 +1,134 @@
1
1
  <template>
2
2
  <FSWrapGroup
3
- v-if="$props.variant === 'wrap'"
3
+ v-if="$props.variant === 'wrap' && $props.items"
4
4
  v-bind="$attrs"
5
5
  >
6
- <FSChip
7
- v-for="(label, index) in $props.labels"
6
+ <template
7
+ v-for="(item, index) in $props.items.slice(0, $props.maxItems ?? $props.items.length)"
8
8
  :key="index"
9
- :variant="$props.chipVariant"
10
- :color="$props.color"
11
- :label="label"
12
- />
9
+ >
10
+ <slot
11
+ name="item.chip"
12
+ v-bind="{ index, item }"
13
+ >
14
+ <FSChip
15
+ :variant="$props.chipVariant"
16
+ :color="$props.color"
17
+ :label="item.label ?? item"
18
+ />
19
+ </slot>
20
+ </template>
21
+ <FSMenu
22
+ v-if="$props.maxItems && $props.items.length > $props.maxItems"
23
+ location="bottom end"
24
+ v-model="menuOpen"
25
+ >
26
+ <template
27
+ #activator="{ props: activatorProps }"
28
+ >
29
+ <FSChip
30
+ v-bind="activatorProps"
31
+ variant="full"
32
+ :label="`+${$props.items.length - $props.maxItems}`"
33
+ :color="menuActivatorColor"
34
+ :clickable="true"
35
+ />
36
+ </template>
37
+ <FSCard
38
+ padding="16px 24px"
39
+ >
40
+ <template
41
+ #top-right
42
+ >
43
+ <FSButton
44
+ icon="mdi-close"
45
+ variant="icon"
46
+ iconSize="18px"
47
+ :color="ColorEnum.Dark"
48
+ @click="menuOpen = false"
49
+ />
50
+ </template>
51
+ <FSCol
52
+ gap="12px"
53
+ >
54
+ <template
55
+ v-for="(item, index) in $props.items"
56
+ :key="index"
57
+ >
58
+ <slot
59
+ name="item.chip"
60
+ v-bind="{ index, item }"
61
+ >
62
+ <FSChip
63
+ :variant="$props.chipVariant"
64
+ :color="$props.color"
65
+ :label="item.label ?? item"
66
+ />
67
+ </slot>
68
+ </template>
69
+ </FSCol>
70
+ </FSCard>
71
+ </FSMenu>
13
72
  <slot />
14
73
  </FSWrapGroup>
15
74
  <FSSlideGroup
16
- v-if="$props.variant === 'slide'"
75
+ v-else-if="$props.variant === 'slide'"
17
76
  v-bind="$attrs"
18
77
  >
19
- <FSChip
20
- v-for="(label, index) in $props.labels"
78
+ <template
79
+ v-for="(item, index) in $props.items"
21
80
  :key="index"
22
- :variant="$props.chipVariant"
23
- :color="$props.color"
24
- :label="label"
25
- />
81
+ >
82
+ <slot
83
+ name="item.chip"
84
+ v-bind="{ index, item }"
85
+ >
86
+ <FSChip
87
+ :variant="$props.chipVariant"
88
+ :color="$props.color"
89
+ :label="item.label ?? item"
90
+ />
91
+ </slot>
92
+ </template>
26
93
  <slot />
27
94
  </FSSlideGroup>
28
95
  </template>
29
96
 
30
97
  <script lang="ts">
31
- import { defineComponent, type PropType } from "vue";
98
+ import { defineComponent, ref, type PropType, computed } from "vue";
32
99
 
33
- import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
100
+ import { type CardVariant, CardVariants, type ChipGroupVariant, ChipGroupVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
34
101
 
35
102
  import FSSlideGroup from "./FSSlideGroup.vue";
36
103
  import FSWrapGroup from "./FSWrapGroup.vue";
104
+ import FSButton from "./FSButton.vue";
37
105
  import FSChip from "./FSChip.vue";
106
+ import FSCard from "./FSCard.vue";
107
+ import FSMenu from "./FSMenu.vue";
108
+ import FSCol from "./FSCol.vue";
109
+ import { useColors } from "../composables";
38
110
 
39
111
  export default defineComponent({
40
112
  name: "FSChipGroup",
41
113
  components: {
42
114
  FSSlideGroup,
43
115
  FSWrapGroup,
44
- FSChip
116
+ FSButton,
117
+ FSChip,
118
+ FSCard,
119
+ FSMenu,
120
+ FSCol
45
121
  },
46
122
  props: {
47
- labels: {
48
- type: Array as PropType<string[]>,
123
+ items: {
124
+ type: Array as PropType<any[] | string[]>,
49
125
  required: false,
50
126
  default: () => []
51
127
  },
52
128
  variant: {
53
- type: String as PropType<"wrap" | "slide">,
129
+ type: String as PropType<ChipGroupVariant>,
54
130
  required: false,
55
- default: "wrap"
131
+ default: ChipGroupVariants.Wrap
56
132
  },
57
133
  chipVariant: {
58
134
  type: String as PropType<CardVariant>,
@@ -63,7 +139,26 @@ export default defineComponent({
63
139
  type: String as PropType<ColorBase>,
64
140
  required: false,
65
141
  default: ColorEnum.Light
142
+ },
143
+ maxItems: {
144
+ type: Number as PropType<number | null>,
145
+ required: false,
146
+ default: null
66
147
  }
148
+ },
149
+ setup(props) {
150
+ const { getColors } = useColors();
151
+ const menuOpen = ref(false);
152
+
153
+ const menuActivatorColor = computed((): string => {
154
+ return getColors(props.color).dark;
155
+ });
156
+
157
+ return {
158
+ menuActivatorColor,
159
+ ColorEnum,
160
+ menuOpen
161
+ };
67
162
  }
68
163
  });
69
164
  </script>
@@ -0,0 +1,116 @@
1
+ <template>
2
+ <FSChip
3
+ :height="$props.height"
4
+ :width="$props.width"
5
+ :variant="$props.variant"
6
+ :color="chipColor"
7
+ :disableHoverStyle="$props.disableHoverStyle"
8
+ >
9
+ <FSRow
10
+ align="center-center"
11
+ width="hug"
12
+ :wrap="false"
13
+ >
14
+ <FSRow
15
+ align="center-center"
16
+ width="hug"
17
+ gap="6px"
18
+ :wrap="false"
19
+ >
20
+ <FSIcon
21
+ :color="$props.iconColor"
22
+ :size="$props.iconSize"
23
+ >
24
+ {{ $props.icon }}
25
+ </FSIcon>
26
+ <FSText
27
+ font="text-overline"
28
+ :color="textColor"
29
+ >
30
+ {{ $props.label }}
31
+ </FSText>
32
+ </FSRow>
33
+ </FSRow>
34
+ </FSChip>
35
+ </template>
36
+
37
+ <script lang="ts">
38
+ import { defineComponent, type PropType } from "vue";
39
+
40
+ import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
41
+
42
+ import FSIcon from "./FSIcon.vue";
43
+ import FSText from "./FSText.vue";
44
+ import FSChip from "./FSChip.vue";
45
+ import FSRow from "./FSRow.vue";
46
+
47
+ import { useColors } from "../composables";
48
+
49
+ export default defineComponent({
50
+ name: "FSSubgroupingChip",
51
+ components: {
52
+ FSChip,
53
+ FSIcon,
54
+ FSText,
55
+ FSRow
56
+ },
57
+ inheritAttrs: false,
58
+ props: {
59
+ label: {
60
+ type: String as PropType<string>,
61
+ required: true
62
+ },
63
+ icon: {
64
+ type: String as PropType<string>,
65
+ required: true
66
+ },
67
+ iconColor: {
68
+ type: String as PropType<ColorBase>,
69
+ required: false,
70
+ default: ColorEnum.Dark
71
+ },
72
+ height: {
73
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
74
+ required: false,
75
+ default: () => [24, 20]
76
+ },
77
+ width: {
78
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
79
+ required: false,
80
+ default: "hug"
81
+ },
82
+ color: {
83
+ type: String as PropType<ColorBase>,
84
+ required: false,
85
+ default: ColorEnum.Light
86
+ },
87
+ variant: {
88
+ type: String as PropType<CardVariant>,
89
+ required: false,
90
+ default: CardVariants.Background
91
+ },
92
+ iconSize: {
93
+ type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
94
+ required: false,
95
+ default: "18px"
96
+ },
97
+ disableHoverStyle: {
98
+ type: Boolean,
99
+ required: false,
100
+ default: true
101
+ }
102
+ },
103
+ setup(props) {
104
+ const { getColors } = useColors();
105
+
106
+ const chipColor = getColors(props.color).dark;
107
+ const textColor = getColors(ColorEnum.Dark).dark;
108
+
109
+ return {
110
+ chipColor,
111
+ textColor,
112
+ ColorEnum
113
+ };
114
+ }
115
+ });
116
+ </script>
@@ -0,0 +1,138 @@
1
+ <template>
2
+ <FSChip
3
+ :color="chipColor"
4
+ :width="$props.width"
5
+ :height="$props.height"
6
+ :variant="$props.variant"
7
+ :disableHoverStyle="$props.disableHoverStyle"
8
+ :title="`${$props.groupingLabel} - ${$props.label}`"
9
+ >
10
+ <FSRow
11
+ align="center-left"
12
+ width="fill"
13
+ :wrap="false"
14
+ >
15
+ <FSRow
16
+ align="center-center"
17
+ width="hug"
18
+ gap="6px"
19
+ :wrap="false"
20
+ >
21
+ <FSIcon
22
+ :color="$props.groupingColor"
23
+ :size="$props.iconSize"
24
+ >
25
+ {{ $props.groupingIcon }}
26
+ </FSIcon>
27
+ <FSSpan
28
+ font="text-overline"
29
+ >
30
+ {{ $props.groupingLabel }}
31
+ </FSSpan>
32
+ </FSRow>
33
+ <FSRow
34
+ align="center-center"
35
+ width="hug"
36
+ gap="6px"
37
+ :wrap="false"
38
+ >
39
+ <FSIcon
40
+ :size="$props.iconSize"
41
+ >
42
+ {{ $props.icon }}
43
+ </FSIcon>
44
+ <FSSpan
45
+ font="text-overline"
46
+ >
47
+ {{ $props.label }}
48
+ </FSSpan>
49
+ </FSRow>
50
+ </FSRow>
51
+ </FSChip>
52
+ </template>
53
+
54
+ <script lang="ts">
55
+ import { defineComponent, type PropType } from "vue";
56
+
57
+ import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
58
+
59
+ import FSIcon from "./FSIcon.vue";
60
+ import FSSpan from "./FSSpan.vue";
61
+ import FSChip from "./FSChip.vue";
62
+ import FSRow from "./FSRow.vue";
63
+
64
+ import { useColors } from "../composables";
65
+
66
+ export default defineComponent({
67
+ name: "FSSubgroupingChip",
68
+ components: {
69
+ FSChip,
70
+ FSIcon,
71
+ FSSpan,
72
+ FSRow
73
+ },
74
+ props: {
75
+ groupingLabel: {
76
+ type: String as PropType<string>,
77
+ required: true
78
+ },
79
+ groupingIcon: {
80
+ type: String as PropType<string>,
81
+ required: true
82
+ },
83
+ groupingColor: {
84
+ type: String as PropType<ColorBase>,
85
+ required: false,
86
+ default: ColorEnum.Dark
87
+ },
88
+ label: {
89
+ type: String as PropType<string>,
90
+ required: true
91
+ },
92
+ icon: {
93
+ type: String as PropType<string>,
94
+ required: true
95
+ },
96
+ height: {
97
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
98
+ required: false,
99
+ default: () => [24, 20]
100
+ },
101
+ width: {
102
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
103
+ required: false,
104
+ default: "hug"
105
+ },
106
+ variant: {
107
+ type: String as PropType<CardVariant>,
108
+ required: false,
109
+ default: CardVariants.Background
110
+ },
111
+ color: {
112
+ type: String as PropType<ColorBase>,
113
+ required: false,
114
+ default: ColorEnum.Light
115
+ },
116
+ iconSize: {
117
+ type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
118
+ required: false,
119
+ default: "18px"
120
+ },
121
+ disableHoverStyle: {
122
+ type: Boolean,
123
+ required: false,
124
+ default: true
125
+ }
126
+ },
127
+ setup(props) {
128
+ const { getColors } = useColors();
129
+
130
+ const chipColor = getColors(props.color).dark;
131
+
132
+ return {
133
+ chipColor,
134
+ ColorEnum
135
+ };
136
+ }
137
+ });
138
+ </script>
@@ -233,6 +233,14 @@ export default defineComponent({
233
233
  {
234
234
  id: EntityType.Folder,
235
235
  label: $tr("ui.common.folders", "Folders")
236
+ },
237
+ {
238
+ id: EntityType.Grouping,
239
+ label: $tr("ui.common.groupings", "Groupings")
240
+ },
241
+ {
242
+ id: EntityType.Subgrouping,
243
+ label: $tr("ui.common.subgroupings", "Subgroupings")
236
244
  }
237
245
  ];
238
246
 
@@ -259,6 +267,10 @@ export default defineComponent({
259
267
  return "mdi-view-dashboard";
260
268
  case EntityType.Folder:
261
269
  return "mdi-folder";
270
+ case EntityType.Grouping:
271
+ return "mdi-chart-donut";
272
+ case EntityType.Subgrouping:
273
+ return "mdi-shape-outline";
262
274
  default:
263
275
  return "mdi-cube";
264
276
  }
@@ -97,6 +97,14 @@
97
97
  :filters="filters[header.value]"
98
98
  @update:filter="(value) => toggleFilter(header.value, value)"
99
99
  >
100
+ <template
101
+ #custom="{ filter, toggle, variant }"
102
+ >
103
+ <slot
104
+ :name="`${filterSlot(header)}-custom`"
105
+ v-bind="{ filter, toggle, variant }"
106
+ />
107
+ </template>
100
108
  <template
101
109
  #default="{ filter }"
102
110
  >
@@ -57,27 +57,35 @@
57
57
  <FSCol
58
58
  gap="6px"
59
59
  >
60
- <FSChip
60
+ <template
61
61
  v-for="(filter, index) in searchedFilters"
62
- class="fs-filter-button-chip"
63
- :variant="getVariant(filter)"
64
- :height="['30px', '24px']"
65
- :color="$props.color"
66
- :label="filter.text"
67
- align="center-left"
68
- :clickable="true"
69
- :border="false"
70
62
  :key="index"
71
- @click="() => onToggle(filter)"
72
63
  >
73
- <template
74
- #default
64
+ <slot
65
+ name="custom"
66
+ v-bind="{ filter, toggle: () => onToggle(filter), variant: getVariant(filter) }"
75
67
  >
76
- <slot
77
- v-bind="{ filter }"
78
- />
79
- </template>
80
- </FSChip>
68
+ <FSChip
69
+ class="fs-filter-button-chip"
70
+ :variant="getVariant(filter)"
71
+ :height="['30px', '24px']"
72
+ :color="$props.color"
73
+ :label="filter.text"
74
+ align="center-left"
75
+ :clickable="true"
76
+ :border="false"
77
+ @click="() => onToggle(filter)"
78
+ >
79
+ <template
80
+ #default
81
+ >
82
+ <slot
83
+ v-bind="{ filter }"
84
+ />
85
+ </template>
86
+ </FSChip>
87
+ </slot>
88
+ </template>
81
89
  </FSCol>
82
90
  </FSFadeOut>
83
91
  </FSCol>
@@ -0,0 +1,46 @@
1
+ <template>
2
+ <FSSimpleTileUI
3
+ :bottomColor="null"
4
+ v-bind="$attrs"
5
+ >
6
+ <template
7
+ #append-info
8
+ >
9
+ <FSEntityCountBadge
10
+ :label="$tr('ui.common.equipments', 'Équipements')"
11
+ :count="$props.deviceOrganisationsCount ?? 0"
12
+ :color="ColorEnum.Primary"
13
+ />
14
+ </template>
15
+ </FSSimpleTileUI>
16
+ </template>
17
+
18
+ <script lang="ts">
19
+ import { defineComponent } from "vue";
20
+
21
+ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
22
+
23
+ import FSEntityCountBadge from "./FSEntityCountBadge.vue";
24
+ import FSSimpleTileUI from './FSSimpleTileUI.vue';
25
+
26
+ export default defineComponent({
27
+ name: "FSSubgroupingTileUI",
28
+ components: {
29
+ FSSimpleTileUI,
30
+ FSEntityCountBadge
31
+ },
32
+ props: {
33
+ deviceOrganisationsCount: {
34
+ type: Number,
35
+ required: false,
36
+ default: null
37
+ }
38
+ },
39
+ inheritAttrs: false,
40
+ setup() {
41
+ return {
42
+ ColorEnum,
43
+ };
44
+ }
45
+ });
46
+ </script>
package/models/tables.ts CHANGED
@@ -26,6 +26,7 @@ export interface FSDataTableFilter {
26
26
  text: string;
27
27
  value: string;
28
28
  hidden: boolean;
29
+ custom?: boolean;
29
30
  filter?: ((value: any, property: any, item: any) => boolean) | null;
30
31
  }
31
32
 
@@ -23,4 +23,10 @@ export enum DialogMultiFormModes {
23
23
  Pagination = "pagination",
24
24
  Tabs = "tabs",
25
25
  Hidden = "hidden"
26
+ }
27
+
28
+ export type ChipGroupVariant = "wrap" | "slide";
29
+ export enum ChipGroupVariants {
30
+ Wrap = "wrap",
31
+ Slide = "slide"
26
32
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
5
5
  },
6
6
  "sideEffects": false,
7
- "version": "1.1.4",
7
+ "version": "1.1.5",
8
8
  "description": "",
9
9
  "publishConfig": {
10
10
  "access": "public"
@@ -13,8 +13,8 @@
13
13
  "author": "",
14
14
  "license": "ISC",
15
15
  "dependencies": {
16
- "@dative-gpi/foundation-shared-domain": "1.1.4",
17
- "@dative-gpi/foundation-shared-services": "1.1.4"
16
+ "@dative-gpi/foundation-shared-domain": "1.1.5",
17
+ "@dative-gpi/foundation-shared-services": "1.1.5"
18
18
  },
19
19
  "peerDependencies": {
20
20
  "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
38
38
  "sass": "1.71.1",
39
39
  "sass-loader": "13.3.2"
40
40
  },
41
- "gitHead": "a9b44d2e225cc899966d6ccfa1f0d14df9c50273"
41
+ "gitHead": "6b5102bcda554056f4d0fa0fba7e5a5e8f24e91e"
42
42
  }
@@ -1,5 +1,10 @@
1
1
  .fs-filter-button-menu {
2
- width: 300px;
2
+ max-width: 400px;
3
+ overflow: hidden;
4
+ }
5
+
6
+ .fs-filter-button-menu * {
7
+ min-width: 0;
3
8
  }
4
9
 
5
10
  .fs-filter-button-chip {