@dative-gpi/foundation-shared-components 1.0.128-fix-mobile-2 → 1.0.128-fix-mobile-4

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.
Files changed (12) hide show
  1. package/components/FSBreadcrumbs.vue +20 -12
  2. package/components/FSDialogMenu.vue +12 -2
  3. package/components/FSSpan.vue +8 -5
  4. package/components/FSText.vue +7 -5
  5. package/components/fields/FSAutocompleteField.vue +36 -52
  6. package/components/fields/FSSelectField.vue +36 -52
  7. package/components/views/desktop/FSBaseEntityDesktopView.vue +1 -0
  8. package/components/views/mobile/FSBaseDefaultMobileView.vue +3 -3
  9. package/components/views/mobile/FSBaseEntityMobileView.vue +1 -0
  10. package/package.json +4 -4
  11. package/styles/components/fs_breadcrumbs.scss +19 -33
  12. package/styles/components/fs_span.scss +20 -4
package/components/FSBreadcrumbs.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <v-breadcrumbs
3
3
  class="fs-breadcrumbs"
4
- :items="$props.items"
4
+ :items="items"
5
5
  :style="style"
6
6
  v-bind="$attrs"
7
7
  >
@@ -9,7 +9,7 @@
9
9
  #title="{ item }"
10
10
  >
11
11
  <FSSpan
12
- :class="classes(item)"
12
+ class="fs-breadcrumbs-label"
13
13
  >
14
14
  {{ item.title }}
15
15
  </FSSpan>
@@ -31,7 +31,9 @@
31
31
  import { computed, defineComponent, type PropType, type StyleValue } from "vue";
32
32
 
33
33
  import { ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
34
- import { useColors } from "@dative-gpi/foundation-shared-components/composables";
34
+ import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
35
+
36
+ import { sizeToVar } from "../utils";
35
37
 
36
38
  import FSSpan from "./FSSpan.vue";
37
39
  import FSIcon from "./FSIcon.vue";
@@ -49,28 +51,34 @@ export default defineComponent({
49
51
  default: () => []
50
52
  }
51
53
  },
52
- setup() {
54
+ setup(props) {
55
+ const { isExtraSmall } = useBreakpoints();
53
56
  const { getColors } = useColors();
54
57
 
55
58
  const darks = getColors(ColorEnum.Dark);
56
59
 
57
60
  const style = computed((): StyleValue => ({
61
+ "--fs-breadcrumbs-height" : sizeToVar(["20px", "16px"]),
58
62
  "--fs-breadcrumbs-color" : darks.dark,
59
63
  "--fs-breadcrumbs-active-color" : darks.base,
60
64
  "--fs-breadcrumbs-disabled-color": darks.soft
61
65
  }));
62
66
 
63
- const classes = (item: FSBreadcrumbItem): string[] => {
64
- const classNames = ["fs-breadcrumbs-label"];
65
- if (item.disabled) {
66
- classNames.push("fs-breadcrumbs-label-disabled");
67
+ const items = computed((): FSBreadcrumbItem[] => {
68
+ if (isExtraSmall.value && props.items.length > 3) {
69
+ const mobileItems: FSBreadcrumbItem[] = [0, -2, -1].map((index) => props.items.at(index)!)
70
+ mobileItems.splice(1, 0, {
71
+ title : "...",
72
+ disabled : true
73
+ });
74
+ return mobileItems;
67
75
  }
68
- return classNames;
69
- };
76
+ return props.items;
77
+ });
70
78
 
71
79
  return {
72
- style,
73
- classes
80
+ items,
81
+ style
74
82
  };
75
83
  }
76
84
  });
package/components/FSDialogMenu.vue CHANGED
@@ -6,8 +6,8 @@
6
6
  >
7
7
  <FSCard
8
8
  width="calc(100vw - 48px)"
9
- padding="8px"
10
- gap="24px"
9
+ :padding="$props.cardPadding"
10
+ :gap="$props.cardGap"
11
11
  :color="$props.color"
12
12
  :class="classes"
13
13
  >
@@ -43,6 +43,16 @@ export default defineComponent({
43
43
  required: false,
44
44
  default: null
45
45
  },
46
+ cardPadding: {
47
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
48
+ required: false,
49
+ default: "8px"
50
+ },
51
+ cardGap: {
52
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
53
+ required: false,
54
+ default: "24px"
55
+ },
46
56
  modelValue: {
47
57
  type: Boolean,
48
58
  required: false,
package/components/FSSpan.vue CHANGED
@@ -1,13 +1,15 @@
1
1
  <template>
2
- <span
2
+ <div
3
3
  :class="classes"
4
4
  :style="style"
5
5
  v-bind="$attrs"
6
6
  >
7
- <slot>
8
- {{ $props.label }}
9
- </slot>
10
- </span>
7
+ <span>
8
+ <slot>
9
+ {{ $props.label }}
10
+ </slot>
11
+ </span>
12
+ </div>
11
13
  </template>
12
14
 
13
15
  <script lang="ts">
@@ -49,6 +51,7 @@ export default defineComponent({
49
51
  const { slots } = useSlots();
50
52
 
51
53
  const style = computed((): StyleValue => ({
54
+ "--fs-span-text-align": props.align,
52
55
  "--fs-span-line-clamp": props.lineClamp.toString(),
53
56
  ...fontStyles.value
54
57
  }));
package/components/FSText.vue CHANGED
@@ -1,13 +1,15 @@
1
1
  <template>
2
- <span
2
+ <div
3
3
  :class="classes"
4
4
  :style="style"
5
5
  v-bind="$attrs"
6
6
  >
7
- <slot>
8
- {{ $props.label }}
9
- </slot>
10
- </span>
7
+ <span>
8
+ <slot>
9
+ {{ $props.label }}
10
+ </slot>
11
+ </span>
12
+ </div>
11
13
  </template>
12
14
 
13
15
  <script lang="ts">
package/components/fields/FSAutocompleteField.vue CHANGED
@@ -121,6 +121,7 @@
121
121
  </FSCard>
122
122
  </FSSlideGroup>
123
123
  <FSDialogMenu
124
+ cardPadding="16px"
124
125
  v-model="dialog"
125
126
  >
126
127
  <template
@@ -139,69 +140,52 @@
139
140
  >
140
141
  <FSRow
141
142
  v-for="(item, index) in searchItems"
143
+ align="center-left"
144
+ height="36px"
145
+ :wrap="false"
142
146
  :key="index"
147
+ @click="$props.multiple ?
148
+ onCheckboxChange(item[$props.itemValue!]) :
149
+ onRadioChange(item[$props.itemValue!])
150
+ "
143
151
  >
144
- <FSCheckbox
145
- v-if="$props.multiple"
146
- :label="item[$props.itemTitle!]"
147
- :editable="$props.editable"
148
- :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
149
- @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
150
- >
151
- <template
152
- #label="{ font }"
153
- >
154
- <FSRow
155
- align="center-left"
156
- :wrap="false"
157
- >
158
- <slot
159
- name="item-prepend"
160
- v-bind="{ item }"
161
- />
162
- <FSSpan
163
- :font="font"
164
- >
165
- {{ item[$props.itemTitle!] }}
166
- </FSSpan>
167
- </FSRow>
168
- </template>
169
- </FSCheckbox>
170
- <FSRadio
171
- v-else
172
- :selected="$props.modelValue === item[$props.itemValue!]"
173
- :label="item[$props.itemTitle!]"
174
- :editable="$props.editable"
175
- :item="item"
176
- :modelValue="item[$props.itemValue!]"
177
- @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
152
+ <FSRow
153
+ style="min-width: 0;"
154
+ :wrap="false"
178
155
  >
179
- <template
180
- #label="{ font }"
156
+ <slot
157
+ name="item-prepend"
158
+ v-bind="{ item }"
159
+ />
160
+ <FSSpan
161
+ :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
181
162
  >
182
- <FSRow
183
- align="center-left"
184
- :wrap="false"
185
- >
186
- <slot
187
- name="item-prepend"
188
- v-bind="{ item }"
189
- />
190
- <FSSpan
191
- :font="font"
192
- >
193
- {{ item[$props.itemTitle!] }}
194
- </FSSpan>
195
- </FSRow>
196
- </template>
197
- </FSRadio>
163
+ {{ item[$props.itemTitle!] }}
164
+ </FSSpan>
165
+ </FSRow>
198
166
  <FSRow
199
167
  align="center-right"
168
+ width="hug"
169
+ :wrap="false"
200
170
  >
201
171
  <slot
202
172
  name="item-append"
203
173
  v-bind="{ item }"
204
174
  />
175
+ <FSCheckbox
176
+ v-if="$props.multiple"
177
+ :editable="$props.editable"
178
+ :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
179
+ @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
180
+ />
181
+ <FSRadio
182
+ v-else
183
+ :selected="$props.modelValue === item[$props.itemValue!]"
184
+ :editable="$props.editable"
185
+ :item="item"
186
+ :modelValue="item[$props.itemValue!]"
187
+ @update:modelValue="onRadioChange(item[$props.itemValue!])"
188
+ />
205
189
  </FSRow>
206
190
  </FSRow>
207
191
  </FSCol>
package/components/fields/FSSelectField.vue CHANGED
@@ -122,6 +122,7 @@
122
122
  </FSCard>
123
123
  </FSSlideGroup>
124
124
  <FSDialogMenu
125
+ cardPadding="16px"
125
126
  v-model="dialog"
126
127
  >
127
128
  <template
@@ -135,69 +136,52 @@
135
136
  >
136
137
  <FSRow
137
138
  v-for="(item, index) in $props.items"
139
+ align="center-left"
140
+ height="36px"
141
+ :wrap="false"
138
142
  :key="index"
143
+ @click="$props.multiple ?
144
+ onCheckboxChange(item[$props.itemValue!]) :
145
+ onRadioChange(item[$props.itemValue!])
146
+ "
139
147
  >
140
- <FSCheckbox
141
- v-if="$props.multiple"
142
- :label="item[$props.itemTitle!]"
143
- :editable="$props.editable"
144
- :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
145
- @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
146
- >
147
- <template
148
- #label="{ font }"
149
- >
150
- <FSRow
151
- align="center-left"
152
- :wrap="false"
153
- >
154
- <slot
155
- name="item-prepend"
156
- v-bind="{ item }"
157
- />
158
- <FSSpan
159
- :font="font"
160
- >
161
- {{ item[$props.itemTitle!] }}
162
- </FSSpan>
163
- </FSRow>
164
- </template>
165
- </FSCheckbox>
166
- <FSRadio
167
- v-else
168
- :selected="$props.modelValue === item[$props.itemValue!]"
169
- :label="item[$props.itemTitle!]"
170
- :editable="$props.editable"
171
- :item="item"
172
- :modelValue="item[$props.itemValue!]"
173
- @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
148
+ <FSRow
149
+ style="min-width: 0;"
150
+ :wrap="false"
174
151
  >
175
- <template
176
- #label="{ font }"
152
+ <slot
153
+ name="item-prepend"
154
+ v-bind="{ item }"
155
+ />
156
+ <FSSpan
157
+ :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
177
158
  >
178
- <FSRow
179
- align="center-left"
180
- :wrap="false"
181
- >
182
- <slot
183
- name="item-prepend"
184
- v-bind="{ item }"
185
- />
186
- <FSSpan
187
- :font="font"
188
- >
189
- {{ item[$props.itemTitle!] }}
190
- </FSSpan>
191
- </FSRow>
192
- </template>
193
- </FSRadio>
159
+ {{ item[$props.itemTitle!] }}
160
+ </FSSpan>
161
+ </FSRow>
194
162
  <FSRow
195
163
  align="center-right"
164
+ width="hug"
165
+ :wrap="false"
196
166
  >
197
167
  <slot
198
168
  name="item-append"
199
169
  v-bind="{ item }"
200
170
  />
171
+ <FSCheckbox
172
+ v-if="$props.multiple"
173
+ :editable="$props.editable"
174
+ :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
175
+ @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
176
+ />
177
+ <FSRadio
178
+ v-else
179
+ :selected="$props.modelValue === item[$props.itemValue!]"
180
+ :editable="$props.editable"
181
+ :item="item"
182
+ :modelValue="item[$props.itemValue!]"
183
+ @update:modelValue="onRadioChange(item[$props.itemValue!])"
184
+ />
201
185
  </FSRow>
202
186
  </FSRow>
203
187
  </FSCol>
package/components/views/desktop/FSBaseEntityDesktopView.vue CHANGED
@@ -36,6 +36,7 @@
36
36
  :icon="$props.icon"
37
37
  />
38
38
  <FSCol
39
+ style="min-width: 0"
39
40
  align="center-left"
40
41
  height="fill"
41
42
  >
package/components/views/mobile/FSBaseDefaultMobileView.vue CHANGED
@@ -14,7 +14,7 @@
14
14
  >
15
15
 
16
16
  <FSRow
17
- padding="24px 16px 16px 24px"
17
+ padding="24px 24px 16px 24px"
18
18
  style="position: sticky; top: 0px; z-index: 3;"
19
19
  :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
20
20
  >
@@ -45,7 +45,7 @@
45
45
  </FSCol>
46
46
  <FSRow
47
47
  v-if="$slots.toolbar"
48
- padding="0px 16px 8px 24px"
48
+ padding="0px 24px 8px 24px"
49
49
  :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
50
50
  >
51
51
  <FSSlideGroup>
@@ -58,7 +58,7 @@
58
58
 
59
59
  <FSCol
60
60
  height="fill"
61
- :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
61
+ :padding="$slots.toolbar ? '8px 24px 24px 24px' : '16px 24px 24px 24px'"
62
62
  gap="0px"
63
63
  >
64
64
  <slot />
package/components/views/mobile/FSBaseEntityMobileView.vue CHANGED
@@ -28,6 +28,7 @@
28
28
  :size="actualImageSize"
29
29
  />
30
30
  <FSCol
31
+ style="min-width: 0"
31
32
  align="center-left"
32
33
  height="fill"
33
34
  >
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.128-fix-mobile-2",
4
+ "version": "1.0.128-fix-mobile-4",
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.128-fix-mobile-2",
14
- "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-2"
13
+ "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-4",
14
+ "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-4"
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": "9403bb429bc63af0dbf48eb554b02af2db779b07"
38
+ "gitHead": "d1100161a35367a5a51a504ce2869c9a7398ccad"
39
39
  }
package/styles/components/fs_breadcrumbs.scss CHANGED
@@ -1,50 +1,36 @@
1
- .fs-breadcrumbs-label {
2
- cursor: pointer;
3
- user-select: none;
4
- color: var(--fs-breadcrumbs-color);
5
-
6
- &-disabled {
7
- color: var(--fs-breadcrumbs-disabled-color) !important;
8
- }
9
-
10
- @include clickscreen {
11
- &:hover {
12
- text-decoration: underline;
13
- }
14
- }
1
+ .fs-breadcrumbs {
2
+ height: var(--fs-breadcrumbs-height) !important;
3
+ padding: 0 !important;
4
+ gap: 0 !important;
15
5
 
16
- &:active {
17
- color: var(--fs-breadcrumbs-active-color) !important;
18
- }
6
+ max-width: 100%;
19
7
  }
20
8
 
21
- // .fs-breadcrumbs-divider {
22
- // margin-bottom: 2px !important;
23
- // }
24
-
25
- .fs-breadcrumbs.v-breadcrumbs {
26
- line-height: normal!important;
9
+ .v-breadcrumbs-item,
10
+ .v-breadcrumbs-item--link {
27
11
  padding: 0 !important;
28
- gap: 8px !important;
29
- height: 20px;
30
- }
12
+ user-select: none;
13
+ cursor: pointer;
31
14
 
32
- .v-breadcrumbs-item {
33
- padding: 0 !important;
15
+ align-self: stretch;
16
+ display: flex;
17
+ flex: 1 0 0;
18
+
19
+ max-width: fit-content;
20
+ min-width: 20px;
34
21
 
35
22
  &--disabled {
36
23
  opacity: 1 !important;
37
24
  color: var(--fs-breadcrumbs-disabled-color) !important;
38
25
  }
26
+ }
39
27
 
40
- &:last-child > .fs-breadcrumbs-label-disabled {
41
- @extend .text-button;
28
+ .v-breadcrumbs-item:last-child > .fs-breadcrumbs-label {
29
+ @extend .text-button;
42
30
 
43
- color: var(--fs-breadcrumbs-active-color) !important;
44
- }
31
+ color: var(--fs-breadcrumbs-active-color) !important;
45
32
  }
46
33
 
47
34
  .v-breadcrumbs-divider {
48
- padding: 0 !important;
49
35
  color: var(--fs-breadcrumbs-color) !important;
50
36
  }
package/styles/components/fs_span.scss CHANGED
@@ -1,9 +1,25 @@
1
1
  .fs-span {
2
+ display: flex;
3
+ flex: 1 0 0;
4
+
5
+ min-width: 0;
6
+ }
7
+
8
+ :not(.fs-col) > .fs-span {
9
+ max-width: fit-content;
10
+ }
11
+
12
+ .fs-col > .fs-span {
13
+ max-width: 100%;
14
+ }
15
+
16
+ .fs-span > span {
17
+ text-align: var(--fs-span-text-align);
18
+ align-content: center;
2
19
  max-width: 100%;
3
- text-align: left;
4
20
  }
5
21
 
6
- .fs-span-line-clamp {
22
+ .fs-span-line-clamp > span {
7
23
  overflow: hidden;
8
24
  display: -webkit-box;
9
25
  line-clamp: var(--fs-span-line-clamp);
@@ -11,12 +27,12 @@
11
27
  -webkit-line-clamp: var(--fs-span-line-clamp);
12
28
  }
13
29
 
14
- .fs-span-ellipsis {
30
+ .fs-span-ellipsis > span {
15
31
  overflow: hidden;
16
32
  white-space: nowrap;
17
33
  text-overflow: ellipsis;
18
34
  }
19
35
 
20
- .fs-span-pre-wrap {
36
+ .fs-span-pre-wrap > span {
21
37
  white-space: pre-wrap;
22
38
  }