@dative-gpi/foundation-shared-components 0.0.27 → 0.0.29

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 (5) hide show
  1. package/components/FSFadeOut.vue +64 -17
  2. package/components/lists/FSFilterButton.vue +2 -1
  3. package/package.json +4 -4
  4. package/styles/components/fs_fade_out.scss +5 -4
  5. package/styles/components/fs_filter_button.scss +0 -5
package/components/FSFadeOut.vue CHANGED
@@ -11,23 +11,33 @@
11
11
  </template>
12
12
 
13
13
  <script lang="ts">
14
- import { defineComponent, Ref, ref } from "vue";
14
+ import { computed, defineComponent, PropType, ref } from "vue";
15
15
 
16
16
  import { useColors } from "@dative-gpi/foundation-shared-components/composables";
17
17
  import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
18
-
19
- import FSCol from "./FSCol.vue";
18
+ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
20
19
 
21
20
  export default defineComponent({
22
21
  name: "FSFadeOut",
23
- components: {
24
- FSCol
25
- },
26
22
  props: {
23
+ height: {
24
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
25
+ required: true
26
+ },
27
+ width: {
28
+ type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
29
+ required: false,
30
+ default: "100%"
31
+ },
32
+ padding: {
33
+ type: [String, Number],
34
+ required: false,
35
+ default: "0"
36
+ },
27
37
  maskHeight: {
28
- type: Number,
38
+ type: [String, Number],
29
39
  required: false,
30
- default: 64
40
+ default: "64px"
31
41
  }
32
42
  },
33
43
  setup(props) {
@@ -35,23 +45,60 @@ export default defineComponent({
35
45
 
36
46
  const backgrounds = getColors(ColorEnum.Background);
37
47
 
38
- const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
39
- "--fs-fade-out-mask-color" : backgrounds.base,
40
- "--fs-fade-out-top-mask-height" : "0px",
41
- "--fs-fade-out-bottom-mask-height": `${props.maskHeight}px`
48
+ const topMaskHeight = ref("0px");
49
+ const bottomMaskHeight = ref(sizeToVar(props.maskHeight));
50
+
51
+ const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
52
+ return {
53
+ "--fs-fade-out-height" : sizeToVar(props.height),
54
+ "--fs-fade-out-width" : sizeToVar(props.width),
55
+ "--fs-fade-out-padding" : sizeToVar(props.padding),
56
+ "--fs-fade-out-mask-color" : backgrounds.base,
57
+ "--fs-fade-out-top-mask-height" : topMaskHeight.value,
58
+ "--fs-fade-out-top-mask-top" : topPadding.value,
59
+ "--fs-fade-out-bottom-mask-height": bottomMaskHeight.value,
60
+ "--fs-fade-out-bottom-mask-bottom": bottomPadding.value
61
+ };
62
+ });
63
+
64
+ const topPadding = computed((): string => {
65
+ switch (typeof props.padding) {
66
+ case "number": return sizeToVar(props.padding);
67
+ default:
68
+ const paddings = props.padding.split(" ");
69
+ switch (paddings.length) {
70
+ case 0 : return "0px";
71
+ default: return "-" + sizeToVar(paddings[0]);
72
+ }
73
+ }
74
+ });
75
+
76
+ const bottomPadding = computed((): string => {
77
+ switch (typeof props.padding) {
78
+ case "number": return sizeToVar(props.padding);
79
+ default:
80
+ const paddings = props.padding.split(" ");
81
+ switch (paddings.length) {
82
+ case 0 : return "0px";
83
+ case 1 :
84
+ case 2 : return "-" + sizeToVar(paddings[0]);
85
+ default: return "-" + sizeToVar(paddings[2]);
86
+ }
87
+ }
42
88
  });
43
89
 
44
90
  const onScroll = ({ target }): void => {
45
91
  if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
46
- style.value["--fs-fade-out-bottom-mask-height"] = "0px";
47
- } else {
48
- style.value["--fs-fade-out-bottom-mask-height"] = `${props.maskHeight}px`;
92
+ bottomMaskHeight.value = "0px";
93
+ }
94
+ else {
95
+ bottomMaskHeight.value = sizeToVar(props.maskHeight);
49
96
  }
50
97
  if (target.scrollTop === 0) {
51
- style.value["--fs-fade-out-top-mask-height"] = "0px";
98
+ topMaskHeight.value = "0px";
52
99
  }
53
100
  else {
54
- style.value["--fs-fade-out-top-mask-height"] = `${props.maskHeight}px`;
101
+ topMaskHeight.value = sizeToVar(props.maskHeight);
55
102
  }
56
103
  }
57
104
 
package/components/lists/FSFilterButton.vue CHANGED
@@ -43,7 +43,8 @@
43
43
  />
44
44
  <v-divider />
45
45
  <FSFadeOut
46
- class="fs-filter-button-fade"
46
+ padding="0 8px 0 0"
47
+ height="360px"
47
48
  >
48
49
  <FSCol>
49
50
  <FSChip
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dative-gpi/foundation-shared-components",
3
3
  "sideEffects": false,
4
- "version": "0.0.27",
4
+ "version": "0.0.29",
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": "0.0.27",
14
- "@dative-gpi/foundation-shared-services": "0.0.27",
13
+ "@dative-gpi/foundation-shared-domain": "0.0.29",
14
+ "@dative-gpi/foundation-shared-services": "0.0.29",
15
15
  "@fontsource/montserrat": "^5.0.16",
16
16
  "@lexical/clipboard": "^0.12.5",
17
17
  "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
32
32
  "sass": "^1.69.5",
33
33
  "sass-loader": "^13.3.2"
34
34
  },
35
- "gitHead": "b46c226b198f482eee4ca6e63ef2923522bf6e8c"
35
+ "gitHead": "fd65d5966bd7a762332e567c762de4e6046ec885"
36
36
  }
package/styles/components/fs_fade_out.scss CHANGED
@@ -1,6 +1,9 @@
1
1
  .fs-fade-out {
2
2
  @extend .fs-hide-y-scrollbar;
3
3
 
4
+ max-height: var(--fs-fade-out-height);
5
+ padding: var(--fs-fade-out-padding);
6
+ width: var(--fs-fade-out-width);
4
7
  flex-direction: column;
5
8
  position: relative;
6
9
  display: flex;
@@ -14,8 +17,7 @@
14
17
  height: var(--fs-fade-out-top-mask-height);
15
18
  min-height: var(--fs-fade-out-top-mask-height);
16
19
  width: 100%;
17
- top: 0;
18
- left: 0;
20
+ top: var(--fs-fade-out-top-mask-top);
19
21
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
20
22
  background: linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-top-mask-height));
21
23
  }
@@ -28,8 +30,7 @@
28
30
  height: var(--fs-fade-out-bottom-mask-height);
29
31
  min-height: var(--fs-fade-out-bottom-mask-height);
30
32
  width: 100%;
31
- bottom: 0;
32
- left: 0;
33
+ bottom: var(--fs-fade-out-bottom-mask-bottom);
33
34
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
34
35
  background: linear-gradient(to bottom, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-bottom-mask-height));
35
36
  }
package/styles/components/fs_filter_button.scss CHANGED
@@ -11,11 +11,6 @@
11
11
  width: calc(100% - 16px) !important;
12
12
  }
13
13
 
14
- .fs-filter-button-fade {
15
- padding-right: 8px;
16
- max-height: 360px;
17
- }
18
-
19
14
  .fs-filter-button-chip {
20
15
  width: 100%;
21
16
  }