@dative-gpi/foundation-shared-components 1.0.128-fix-mobile-5 → 1.0.128-fix-mobile-7

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 (4) hide show
  1. package/components/lists/FSDataTableUI.vue +20 -14
  2. package/components/views/desktop/FSBaseDefaultDesktopView.vue +9 -9
  3. package/components/views/mobile/FSBaseDefaultMobileView.vue +9 -9
  4. package/package.json +4 -4
package/components/lists/FSDataTableUI.vue CHANGED
@@ -4,13 +4,13 @@
4
4
  style="position: relative;"
5
5
  >
6
6
  <FSRow
7
- v-if="$props.showSearch || (!isExtraSmall && ($slots.prependToolbar || $slots.toolbar )) || (!$props.disableTable && !$props.disableIterator)"
7
+ v-if="$props.showSearch || (!isMobileSized && ($slots.prependToolbar || $slots.toolbar )) || (!$props.disableTable && !$props.disableIterator)"
8
8
  align="bottom-left"
9
- :wrap="isExtraSmall ? false : true"
9
+ :wrap="isMobileSized ? false : true"
10
10
  width="fill"
11
11
  >
12
12
  <slot
13
- v-if="!isExtraSmall"
13
+ v-if="!isMobileSized"
14
14
  name="prepend-toolbar"
15
15
  />
16
16
  <template
@@ -28,17 +28,22 @@
28
28
  />
29
29
  </template>
30
30
  <slot
31
- v-if="!isExtraSmall"
31
+ v-if="!isMobileSized"
32
32
  name="toolbar"
33
33
  />
34
34
  <template
35
- v-if="!$props.disableTable && !$props.disableIterator"
35
+ v-if="$slots.appendToolbar || (!$props.disableTable && !$props.disableIterator)"
36
36
  >
37
37
  <FSRow
38
- :width="isMobileSized ? 'hug' : 'fill'"
39
38
  align="center-right"
39
+ :width="isExtraSmall ? 'hug' : 'fill'"
40
40
  >
41
+ <slot
42
+ v-if="!isMobileSized"
43
+ name="append-toolbar"
44
+ />
41
45
  <FSOptionGroup
46
+ v-if="!$props.disableTable && !$props.disableIterator"
42
47
  :values="modeOptions"
43
48
  :singleColor="true"
44
49
  :required="true"
@@ -49,13 +54,19 @@
49
54
  </template>
50
55
  </FSRow>
51
56
  <FSRow
52
- v-if="isExtraSmall && hasToolbar"
57
+ v-if="isMobileSized && ($slots.prependToolbar || $slots.toolbar || $slots.appendToolbar)"
53
58
  >
54
- <FSWrapGroup>
59
+ <FSSlideGroup>
60
+ <slot
61
+ name="prepend-toolbar"
62
+ />
55
63
  <slot
56
64
  name="toolbar"
57
65
  />
58
- </FSWrapGroup>
66
+ <slot
67
+ name="append-toolbar"
68
+ />
69
+ </FSSlideGroup>
59
70
  </FSRow>
60
71
  <FSRow
61
72
  v-if="showFiltersRow"
@@ -963,10 +974,6 @@ export default defineComponent({
963
974
 
964
975
  });
965
976
 
966
- const hasToolbar = computed((): boolean => {
967
- return !!useSlots().slots["toolbar"];
968
- });
969
-
970
977
  const innerSlots = computed((): { [label: string]: Slot<any> } => {
971
978
  const slots = { ...useSlots().slots };
972
979
  delete slots["toolbar"];
@@ -1578,7 +1585,6 @@ export default defineComponent({
1578
1585
  innerMode,
1579
1586
  modeOptions,
1580
1587
  innerPage,
1581
- hasToolbar,
1582
1588
  pageOptions,
1583
1589
  innerShowFilters,
1584
1590
  showFiltersRow,
package/components/views/desktop/FSBaseDefaultDesktopView.vue CHANGED
@@ -12,11 +12,9 @@
12
12
  <slot
13
13
  name="header"
14
14
  >
15
-
16
15
  <FSRow
17
- padding="24px 16px 16px 24px"
18
- style="position: sticky; top: 0px; z-index: 3;"
19
- :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
16
+ :style="`position: sticky; top: 0px; z-index: 3; background-color: ${backgroundColor}; margin-top: ${$props.stickyTitleTopOffset};`"
17
+ :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
20
18
  >
21
19
  <slot
22
20
  name="title"
@@ -45,8 +43,8 @@
45
43
  </FSCol>
46
44
  <FSRow
47
45
  v-if="$slots.toolbar"
48
- padding="0px 16px 8px 24px"
49
46
  :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
47
+ :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
50
48
  >
51
49
  <FSSlideGroup
52
50
  width="100%"
@@ -60,8 +58,8 @@
60
58
 
61
59
  <FSCol
62
60
  height="fill"
63
- :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
64
61
  gap="0px"
62
+ :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
65
63
  >
66
64
  <slot />
67
65
  </FSCol>
@@ -74,7 +72,7 @@ import { defineComponent, type PropType, computed } from "vue";
74
72
 
75
73
  import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
76
74
 
77
- import { useColors } from "../../../composables"
75
+ import { useBreakpoints, useColors } from "../../../composables"
78
76
 
79
77
  import FSCol from "../../FSCol.vue";
80
78
  import FSRow from "../../FSRow.vue"
@@ -119,7 +117,8 @@ export default defineComponent({
119
117
  default: "0px"
120
118
  }
121
119
  },
122
- setup(){
120
+ setup() {
121
+ const { isTouchScreenEnabled } = useBreakpoints();
123
122
  const { getColors } = useColors();
124
123
 
125
124
  const backgroundColor = computed(() => {
@@ -127,8 +126,9 @@ export default defineComponent({
127
126
  });
128
127
 
129
128
  return {
129
+ isTouchScreenEnabled,
130
130
  backgroundColor
131
- }
131
+ };
132
132
  }
133
133
  });
134
134
  </script>
package/components/views/mobile/FSBaseDefaultMobileView.vue CHANGED
@@ -12,11 +12,9 @@
12
12
  <slot
13
13
  name="header"
14
14
  >
15
-
16
15
  <FSRow
17
- padding="24px 24px 16px 24px"
18
- style="position: sticky; top: 0px; z-index: 3;"
19
- :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
16
+ :style="`position: sticky; top: 0px; z-index: 3; background-color: ${backgroundColor}; margin-top: ${$props.stickyTitleTopOffset};`"
17
+ :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
20
18
  >
21
19
  <slot
22
20
  name="title"
@@ -45,8 +43,8 @@
45
43
  </FSCol>
46
44
  <FSRow
47
45
  v-if="$slots.toolbar"
48
- padding="0px 24px 8px 24px"
49
46
  :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
47
+ :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
50
48
  >
51
49
  <FSSlideGroup>
52
50
  <slot
@@ -58,8 +56,8 @@
58
56
 
59
57
  <FSCol
60
58
  height="fill"
61
- :padding="$slots.toolbar ? '8px 24px 24px 24px' : '16px 24px 24px 24px'"
62
59
  gap="0px"
60
+ :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
63
61
  >
64
62
  <slot />
65
63
  </FSCol>
@@ -72,7 +70,7 @@ import { defineComponent, type PropType, computed } from "vue";
72
70
 
73
71
  import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
74
72
 
75
- import { useColors } from "../../../composables"
73
+ import { useBreakpoints, useColors } from "../../../composables"
76
74
 
77
75
  import FSCol from "../../FSCol.vue";
78
76
  import FSRow from "../../FSRow.vue"
@@ -117,7 +115,8 @@ export default defineComponent({
117
115
  default: "0px"
118
116
  }
119
117
  },
120
- setup(){
118
+ setup() {
119
+ const { isTouchScreenEnabled } = useBreakpoints();
121
120
  const { getColors } = useColors();
122
121
 
123
122
  const backgroundColor = computed(() => {
@@ -125,8 +124,9 @@ export default defineComponent({
125
124
  });
126
125
 
127
126
  return {
127
+ isTouchScreenEnabled,
128
128
  backgroundColor
129
- }
129
+ };
130
130
  }
131
131
  });
132
132
  </script>
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-5",
4
+ "version": "1.0.128-fix-mobile-7",
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-5",
14
- "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-5"
13
+ "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-7",
14
+ "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-7"
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": "3561f3ed887b467d9dd2f1a3d946926368f7cbeb"
38
+ "gitHead": "855a2889f46ff4da4245772624a6dc9a812c438f"
39
39
  }