@dative-gpi/foundation-shared-components 1.0.157 → 1.0.158

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 (13) hide show
  1. package/components/FSCol.vue +11 -5
  2. package/components/fields/FSAutocompleteField.vue +8 -0
  3. package/components/fields/FSBaseField.vue +6 -0
  4. package/components/fields/FSIconField.vue +10 -2
  5. package/components/fields/FSSearchField.vue +1 -0
  6. package/components/fields/FSTimeRangeField.vue +6 -0
  7. package/components/lists/FSDataTableUI.vue +30 -24
  8. package/components/views/desktop/FSBaseDefaultDesktopView.vue +1 -1
  9. package/components/views/desktop/FSBaseEntityDesktopView.vue +6 -4
  10. package/components/views/mobile/FSBaseDefaultMobileView.vue +4 -4
  11. package/components/views/mobile/FSBaseEntityMobileView.vue +28 -21
  12. package/package.json +4 -4
  13. package/styles/components/fs_col.scss +1 -1
package/components/FSCol.vue CHANGED
@@ -26,6 +26,11 @@ export default defineComponent({
26
26
  required: false,
27
27
  default: "fill"
28
28
  },
29
+ maxWidth: {
30
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
31
+ required: false,
32
+ default: null
33
+ },
29
34
  padding: {
30
35
  type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
31
36
  required: false,
@@ -49,11 +54,12 @@ export default defineComponent({
49
54
  },
50
55
  setup(props) {
51
56
  const style = computed((): StyleValue => ({
52
- "--fs-col-overflow": props.overflow,
53
- "--fs-col-padding" : sizeToVar(props.padding),
54
- "--fs-col-gap" : sizeToVar(props.gap),
55
- "--fs-col-width" : sizeToVar(props.width),
56
- "--fs-col-height" : sizeToVar(props.height)
57
+ "--fs-col-overflow" : props.overflow,
58
+ "--fs-col-padding" : sizeToVar(props.padding),
59
+ "--fs-col-gap" : sizeToVar(props.gap),
60
+ "--fs-col-width" : sizeToVar(props.width),
61
+ "--fs-col-max-width" : props.maxWidth ? sizeToVar(props.maxWidth) : "100%",
62
+ "--fs-col-height" : sizeToVar(props.height),
57
63
  }));
58
64
 
59
65
  const classes = computed((): string[] => {
package/components/fields/FSAutocompleteField.vue CHANGED
@@ -1,6 +1,7 @@
1
1
  <template>
2
2
  <FSCol
3
3
  v-if="$props.loading"
4
+ :maxWidth="$props.maxWidth"
4
5
  >
5
6
  <FSLoader
6
7
  v-if="!$props.hideHeader"
@@ -14,6 +15,7 @@
14
15
  </FSCol>
15
16
  <FSCol
16
17
  v-else-if="isExtraSmall"
18
+ :maxWidth="$props.maxWidth"
17
19
  >
18
20
  <FSTextField
19
21
  :validationValue="$props.modelValue"
@@ -220,6 +222,7 @@
220
222
  :disabled="$props.disabled"
221
223
  :label="$props.label"
222
224
  :messages="messages"
225
+ :maxWidth="$props.maxWidth"
223
226
  >
224
227
  <FSToggleSet
225
228
  v-if="$props.toggleSet"
@@ -588,6 +591,11 @@ export default defineComponent({
588
591
  type: Boolean,
589
592
  required: false,
590
593
  default: false
594
+ },
595
+ maxWidth: {
596
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
597
+ required: false,
598
+ default: "600px"
591
599
  }
592
600
  },
593
601
  emits: ["update:modelValue", "update:search", "add:item"],
package/components/fields/FSBaseField.vue CHANGED
@@ -1,5 +1,6 @@
1
1
  <template>
2
2
  <FSCol
3
+ :maxWidth="$props.maxWidth"
3
4
  :style="style"
4
5
  >
5
6
  <slot
@@ -114,6 +115,11 @@ export default defineComponent({
114
115
  type: String,
115
116
  required: false,
116
117
  default: "120px"
118
+ },
119
+ maxWidth: {
120
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
121
+ required: false,
122
+ default: "600px"
117
123
  }
118
124
  },
119
125
  setup(props) {
package/components/fields/FSIconField.vue CHANGED
@@ -1,5 +1,7 @@
1
1
  <template>
2
- <FSCol>
2
+ <FSCol
3
+ :maxWidth="$props.maxWidth"
4
+ >
3
5
  <FSTextField
4
6
  :label="$props.label"
5
7
  :description="$props.description"
@@ -10,6 +12,7 @@
10
12
  :messages="messages"
11
13
  :validateOn="validateOn"
12
14
  :validationValue="$props.modelValue"
15
+ :maxWidth="null"
13
16
  v-model="innerValue"
14
17
  v-bind="$attrs"
15
18
  >
@@ -123,7 +126,12 @@ export default defineComponent({
123
126
  type: Boolean,
124
127
  required: false,
125
128
  default: false
126
- }
129
+ },
130
+ maxWidth: {
131
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
132
+ required: false,
133
+ default: "600px"
134
+ },
127
135
  },
128
136
  emits: ["update:modelValue"],
129
137
  setup(props) {
package/components/fields/FSSearchField.vue CHANGED
@@ -4,6 +4,7 @@
4
4
  :placeholder="placeholder"
5
5
  :modelValue="$props.modelValue"
6
6
  prependInnerIcon="mdi-magnify"
7
+ minWidth="200px"
7
8
  @update:modelValue="$emit('update:modelValue', $event)"
8
9
  v-bind="$attrs"
9
10
  >
package/components/fields/FSTimeRangeField.vue CHANGED
@@ -6,6 +6,7 @@
6
6
  :disabled="$props.disabled"
7
7
  :label="$props.label"
8
8
  :messages="messages"
9
+ :maxWidth="$props.maxWidth"
9
10
  >
10
11
  <FSRow>
11
12
  <FSRow
@@ -132,6 +133,11 @@ export default defineComponent({
132
133
  type: Boolean,
133
134
  required: false,
134
135
  default: false
136
+ },
137
+ maxWidth: {
138
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
139
+ required: false,
140
+ default: null
135
141
  }
136
142
  },
137
143
  emits: ["update:modelValue"],
package/components/lists/FSDataTableUI.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  >
6
6
  <FSRow
7
7
  v-if="$props.showSearch || (!isMobileSized && ($slots['prepend-toolbar'] || $slots['toolbar'] || $slots['append-toolbar'])) || (!$props.disableTable && !$props.disableIterator)"
8
- align="bottom-left"
8
+ align="top-left"
9
9
  :wrap="isMobileSized ? false : true"
10
10
  width="fill"
11
11
  >
@@ -13,35 +13,41 @@
13
13
  v-if="!isMobileSized"
14
14
  name="prepend-toolbar"
15
15
  />
16
- <template
17
- v-if="$props.showSearch"
18
- >
19
- <FSSearchField
20
- :hideHeader="true"
21
- v-model="innerSearch"
22
- />
23
- <FSButton
24
- v-if="filterableHeaders.length > 0"
25
- prependIcon="mdi-filter-variant"
26
- :variant="innerShowFilters ? 'full' : 'standard'"
27
- @click="innerShowFilters = !innerShowFilters"
28
- />
29
- </template>
30
- <slot
31
- v-if="!isMobileSized"
32
- name="toolbar"
33
- />
34
- <template
35
- v-if="$slots['append-toolbar'] || (!$props.disableTable && !$props.disableIterator)"
16
+ <FSRow
17
+ align="top-left"
36
18
  >
37
19
  <FSRow
38
- align="center-right"
39
- :width="isExtraSmall ? 'hug' : 'fill'"
20
+ v-if="$props.showSearch || filterableHeaders.length > 0 || $slots['append-toolbar']"
21
+ align="bottom-left"
40
22
  >
23
+ <FSSearchField
24
+ :hideHeader="true"
25
+ v-model="innerSearch"
26
+ />
27
+ <FSButton
28
+ v-if="filterableHeaders.length > 0"
29
+ prependIcon="mdi-filter-variant"
30
+ :variant="innerShowFilters ? 'full' : 'standard'"
31
+ @click="innerShowFilters = !innerShowFilters"
32
+ />
41
33
  <slot
42
34
  v-if="!isMobileSized"
43
- name="append-toolbar"
35
+ name="toolbar"
44
36
  />
37
+ </FSRow>
38
+ <slot
39
+ v-if="!isMobileSized"
40
+ name="append-toolbar"
41
+ />
42
+ </FSRow>
43
+ <template
44
+ v-if="(!$props.disableTable && !$props.disableIterator)"
45
+ >
46
+ <FSRow
47
+ align="top-right"
48
+ width="hug"
49
+ :wrap="false"
50
+ >
45
51
  <FSOptionGroup
46
52
  v-if="!$props.disableTable && !$props.disableIterator"
47
53
  :values="modeOptions"
package/components/views/desktop/FSBaseDefaultDesktopView.vue CHANGED
@@ -29,7 +29,7 @@
29
29
  </FSRow>
30
30
  <FSCol
31
31
  v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
32
- :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
32
+ :padding="$slots.toolbar ? '0px 24px 16px 24px' : '0px 24px'"
33
33
  gap="16px"
34
34
  >
35
35
  <FSCol>
package/components/views/desktop/FSBaseEntityDesktopView.vue CHANGED
@@ -9,6 +9,7 @@
9
9
  >
10
10
  <FSRow
11
11
  gap="24px"
12
+ :height="actualImageSize"
12
13
  :wrap="false"
13
14
  >
14
15
  <template
@@ -54,7 +55,7 @@
54
55
  >
55
56
  <slot
56
57
  name="subtitle"
57
- v-if="topOffset < 60"
58
+ v-if="topOffset < 64"
58
59
  >
59
60
  <FSText
60
61
  v-if="$props.subtitle"
@@ -65,10 +66,11 @@
65
66
  </slot>
66
67
  <slot
67
68
  name="description"
68
- v-if="topOffset < 20"
69
+ v-if="topOffset < 24"
69
70
  >
70
71
  <FSText
71
72
  v-if="$props.description"
73
+ :lineClamp="2"
72
74
  font="text-body"
73
75
  >
74
76
  {{ $props.description }}
@@ -146,9 +148,9 @@ export default defineComponent({
146
148
  default: () => ["124px", "96px", "80px"]
147
149
  },
148
150
  icon: {
149
- type: String as PropType<string>,
151
+ type: String as PropType<string | null>,
150
152
  required: false,
151
- default: "mdi-ab-testing"
153
+ default: null
152
154
  },
153
155
  iconColor: {
154
156
  type: String as PropType<ColorBase>,
package/components/views/mobile/FSBaseDefaultMobileView.vue CHANGED
@@ -15,7 +15,7 @@
15
15
  <FSRow
16
16
  style="position: sticky; top: 0px; z-index: 3;"
17
17
  :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
18
- :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
18
+ :padding="`16px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
19
19
  >
20
20
  <slot
21
21
  name="title"
@@ -29,7 +29,7 @@
29
29
  </FSRow>
30
30
  <FSCol
31
31
  v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
32
- :padding="$slots.toolbar ? '0px 24px 8px 24px' : '0px 24px'"
32
+ :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} ${$slots.toolbar ? '12px' : '0px'} 12px`"
33
33
  gap="16px"
34
34
  >
35
35
  <FSCol>
@@ -45,7 +45,7 @@
45
45
  <FSRow
46
46
  v-if="$slots.toolbar"
47
47
  :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
48
- :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
48
+ :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 12px 12px`"
49
49
  >
50
50
  <FSSlideGroup>
51
51
  <slot
@@ -58,7 +58,7 @@
58
58
  <FSCol
59
59
  height="fill"
60
60
  gap="0px"
61
- :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
61
+ :padding="`0px ${isTouchScreenEnabled ? '20px' : '12px'} 16px 12px`"
62
62
  >
63
63
  <slot />
64
64
  </FSCol>
package/components/views/mobile/FSBaseEntityMobileView.vue CHANGED
@@ -8,7 +8,8 @@
8
8
  #title
9
9
  >
10
10
  <FSRow
11
- gap="24px"
11
+ gap="12px"
12
+ :height="actualImageSize"
12
13
  :wrap="false"
13
14
  >
14
15
  <FSImage
@@ -31,6 +32,7 @@
31
32
  style="min-width: 0"
32
33
  align="center-left"
33
34
  height="fill"
35
+ :gap="$props.subtitle && $props.description ? '6px' : '8px'"
34
36
  >
35
37
  <slot
36
38
  name="title"
@@ -44,26 +46,31 @@
44
46
  name="title-extra"
45
47
  v-bind="{ topOffset }"
46
48
  >
47
- <slot
48
- name="subtitle"
49
+ <FSCol
50
+ gap="4px"
49
51
  >
50
- <FSText
51
- v-if="$props.subtitle && topOffset < 60"
52
- font="text-button"
52
+ <slot
53
+ name="subtitle"
53
54
  >
54
- {{ $props.subtitle }}
55
- </FSText>
56
- </slot>
57
- <slot
58
- name="description"
59
- >
60
- <FSText
61
- v-if="$props.description && topOffset < 20"
62
- font="text-body"
55
+ <FSText
56
+ v-if="$props.subtitle && topOffset < 48"
57
+ font="text-button"
58
+ >
59
+ {{ $props.subtitle }}
60
+ </FSText>
61
+ </slot>
62
+ <slot
63
+ name="description"
63
64
  >
64
- {{ $props.description }}
65
- </FSText>
66
- </slot>
65
+ <FSText
66
+ v-if="$props.description && topOffset < 8"
67
+ :lineClamp="2"
68
+ font="text-body"
69
+ >
70
+ {{ $props.description }}
71
+ </FSText>
72
+ </slot>
73
+ </FSCol>
67
74
  </slot>
68
75
  </slot>
69
76
  </FSCol>
@@ -136,9 +143,9 @@ export default defineComponent({
136
143
  default: () => ["124px", "96px", "80px"]
137
144
  },
138
145
  icon: {
139
- type: String as PropType<string>,
146
+ type: String as PropType<string | null>,
140
147
  required: false,
141
- default: "mdi-ab-testing"
148
+ default: null
142
149
  },
143
150
  iconColor: {
144
151
  type: String as PropType<ColorBase>,
@@ -183,7 +190,7 @@ export default defineComponent({
183
190
  const minSize = sizeToVar(props.minImageSize);
184
191
  const actualMinSize = parseInt(minSize);
185
192
 
186
- topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 24));
193
+ topOffset.value = Math.max(0, Math.min(actualScrollTop, actualMinSize + 16 + 12));
187
194
  }
188
195
 
189
196
  delete slots.title;
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.157",
4
+ "version": "1.0.158",
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.157",
14
- "@dative-gpi/foundation-shared-services": "1.0.157"
13
+ "@dative-gpi/foundation-shared-domain": "1.0.158",
14
+ "@dative-gpi/foundation-shared-services": "1.0.158"
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": "0aedaf4c6e5f977982f18d5936f5cdfaf7ab86a4"
38
+ "gitHead": "8e284ac045b19fef0565f6ab8026702da3dc12e6"
39
39
  }
package/styles/components/fs_col.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  overflow-y: var(--fs-col-overflow);
5
5
  padding: var(--fs-col-padding);
6
6
  gap: var(--fs-col-gap);
7
- max-width: 100%;
7
+ max-width: var(--fs-col-max-width);
8
8
 
9
9
  &-top-left {
10
10
  justify-content: flex-start;