@dative-gpi/foundation-shared-components 1.0.17 → 1.0.18

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 (17) hide show
  1. package/components/FSButton.vue +37 -20
  2. package/components/buttons/FSButtonAddMini.vue +0 -1
  3. package/components/buttons/FSButtonCancelMini.vue +1 -1
  4. package/components/buttons/FSButtonDuplicateMini.vue +1 -1
  5. package/components/buttons/FSButtonEditMini.vue +1 -1
  6. package/components/buttons/FSButtonFileMini.vue +1 -1
  7. package/components/buttons/FSButtonNextMini.vue +1 -1
  8. package/components/buttons/FSButtonPreviousMini.vue +1 -1
  9. package/components/buttons/FSButtonRedoMini.vue +1 -1
  10. package/components/buttons/FSButtonRemoveMini.vue +1 -1
  11. package/components/buttons/FSButtonSaveMini.vue +1 -1
  12. package/components/buttons/FSButtonSearchMini.vue +1 -1
  13. package/components/buttons/FSButtonUndoMini.vue +1 -1
  14. package/components/buttons/FSButtonUpdateMini.vue +1 -1
  15. package/components/buttons/FSButtonValidateMini.vue +1 -1
  16. package/package.json +4 -4
  17. package/styles/globals/text_fonts.scss +21 -39
package/components/FSButton.vue CHANGED
@@ -2,11 +2,9 @@
2
2
  <FSClickable
3
3
  v-if="$props.variant !== 'icon'"
4
4
  :editable="$props.editable"
5
- :padding="$props.padding"
5
+ :padding="padding"
6
6
  :variant="$props.variant"
7
- :height="$props.height"
8
7
  :color="$props.color"
9
- :width="$props.width"
10
8
  :load="$props.load"
11
9
  :href="$props.href"
12
10
  :to="$props.to"
@@ -15,7 +13,7 @@
15
13
  v-bind="$attrs"
16
14
  >
17
15
  <FSRow
18
- v-if="$props.axis === 'horizontal'"
16
+ v-if="$props.direction === 'row'"
19
17
  align="center-center"
20
18
  width="fill"
21
19
  :wrap="false"
@@ -166,7 +164,7 @@
166
164
  </template>
167
165
 
168
166
  <script lang="ts">
169
- import { computed, defineComponent, type PropType, type StyleValue } from "vue";
167
+ import { computed, defineComponent, type PropType, type StyleValue, useSlots } from "vue";
170
168
  import { type RouteLocation } from "vue-router";
171
169
 
172
170
  import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -178,6 +176,12 @@ import FSIcon from "./FSIcon.vue";
178
176
  import FSCol from "./FSCol.vue";
179
177
  import FSRow from "./FSRow.vue";
180
178
 
179
+ const PADDING_ICON_ONLY = "7px";
180
+ const PADDING_LABEL_ONLY = ["9px 16px", "9px 12px"];
181
+ const PADDING_ICON_LABEL = ["7px 16px", "7px 12px"];
182
+
183
+ const DEFAULT_PADDING = PADDING_ICON_LABEL;
184
+
181
185
  export default defineComponent({
182
186
  name: "FSButton",
183
187
  components: {
@@ -188,20 +192,10 @@ export default defineComponent({
188
192
  FSRow
189
193
  },
190
194
  props: {
191
- height: {
192
- type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
193
- required: false,
194
- default: () => ["40px", "36px"]
195
- },
196
- width: {
197
- type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
198
- required: false,
199
- default: "fit-content"
200
- },
201
195
  padding: {
202
196
  type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
203
197
  required: false,
204
- default: "0 16px"
198
+ default: DEFAULT_PADDING
205
199
  },
206
200
  to: {
207
201
  type: [String, Object] as PropType<string | RouteLocation | null>,
@@ -236,17 +230,17 @@ export default defineComponent({
236
230
  iconSize: {
237
231
  type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
238
232
  required: false,
239
- default: "l"
233
+ default: () => ["24", "20"]
240
234
  },
241
235
  variant: {
242
236
  type: String as PropType<"standard" | "full" | "icon">,
243
237
  required: false,
244
238
  default: "standard"
245
239
  },
246
- axis: {
247
- type: String as PropType<"horizontal" | "vertical">,
240
+ direction: {
241
+ type: String as PropType<"row" | "column">,
248
242
  required: false,
249
- default: "horizontal"
243
+ default: "row"
250
244
  },
251
245
  color: {
252
246
  type: String as PropType<ColorBase>,
@@ -271,6 +265,7 @@ export default defineComponent({
271
265
  const colors = computed(() => getColors(props.color));
272
266
  const lights = getColors(ColorEnum.Light);
273
267
  const darks = getColors(ColorEnum.Dark);
268
+ const slots = useSlots();
274
269
 
275
270
  const style = computed((): StyleValue => {
276
271
  if (!props.editable) {
@@ -314,6 +309,27 @@ export default defineComponent({
314
309
  }
315
310
  });
316
311
 
312
+ const padding = computed(() => {
313
+ if(props.padding !== DEFAULT_PADDING){
314
+ return props.padding;
315
+ }
316
+
317
+ const hasIcon = props.prependIcon || props.appendIcon || props.icon
318
+ || !!slots.prepend || !!slots.append;
319
+
320
+ const hasLabel = props.label || !!slots.default;
321
+
322
+ if(!hasLabel && hasIcon){
323
+ return PADDING_ICON_ONLY;
324
+ }
325
+ else if(hasLabel && !hasIcon)
326
+ {
327
+ return PADDING_LABEL_ONLY;
328
+ }
329
+
330
+ return DEFAULT_PADDING;
331
+ })
332
+
317
333
  const onClick = (event: MouseEvent) => {
318
334
  if (!props.to && !props.href && props.editable && !props.load) {
319
335
  emit("click", event);
@@ -325,6 +341,7 @@ export default defineComponent({
325
341
  loadColor,
326
342
  colors,
327
343
  style,
344
+ padding,
328
345
  onClick
329
346
  };
330
347
  }
package/components/buttons/FSButtonAddMini.vue CHANGED
@@ -1,7 +1,6 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-plus-circle-outline"
4
- padding="0 7px"
5
4
  :color="ColorEnum.Primary"
6
5
  v-bind="$attrs"
7
6
  />
package/components/buttons/FSButtonCancelMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-cancel"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Light"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonDuplicateMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-content-copy"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Light"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonEditMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-pencil-outline"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Light"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonFileMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div>
3
3
  <FSButton
4
- padding="0 7px"
4
+
5
5
  :prependIcon="$props.icon"
6
6
  :color="ColorEnum.Light"
7
7
  @click="onClick"
package/components/buttons/FSButtonNextMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-chevron-right"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Primary"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonPreviousMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-chevron-left"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Primary"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonRedoMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-redo-variant"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Light"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonRemoveMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-delete-outline"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Error"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonSaveMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-content-save-outline"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Primary"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonSearchMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-magnify"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Primary"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonUndoMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-undo-variant"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Light"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonUpdateMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-pencil-outline"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Primary"
6
6
  v-bind="$attrs"
7
7
  />
package/components/buttons/FSButtonValidateMini.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <FSButton
3
3
  prependIcon="mdi-check"
4
- padding="0 7px"
4
+
5
5
  :color="ColorEnum.Primary"
6
6
  v-bind="$attrs"
7
7
  />
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.17",
4
+ "version": "1.0.18",
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.17",
14
- "@dative-gpi/foundation-shared-services": "1.0.17"
13
+ "@dative-gpi/foundation-shared-domain": "1.0.18",
14
+ "@dative-gpi/foundation-shared-services": "1.0.18"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
35
35
  "sass": "1.71.1",
36
36
  "sass-loader": "13.3.2"
37
37
  },
38
- "gitHead": "83f8eb02faf9ad8eb20422e4f02a5da6ec46e2d2"
38
+ "gitHead": "8e464715fcb19efb4752474ffcded0508d44da53"
39
39
  }
package/styles/globals/text_fonts.scss CHANGED
@@ -10,13 +10,13 @@
10
10
  @include web {
11
11
  font-size: 36px !important;
12
12
  line-height: 40px !important;
13
- letter-spacing: -0.72px !important;
13
+ letter-spacing: -2% !important;
14
14
  }
15
15
 
16
16
  @include mobile {
17
- font-size: 29px !important;
17
+ font-size: 28px !important;
18
18
  line-height: 32px !important;
19
- letter-spacing: -1.45px !important;
19
+ letter-spacing: -5% !important;
20
20
  }
21
21
  }
22
22
 
@@ -26,15 +26,15 @@
26
26
  font-weight: 600 !important;
27
27
 
28
28
  @include web {
29
- font-size: 27px !important;
29
+ font-size: 26px !important;
30
30
  line-height: 32px !important;
31
- letter-spacing: -0.81px !important;
31
+ letter-spacing: -3% !important;
32
32
  }
33
33
 
34
34
  @include mobile {
35
35
  font-size: 22px !important;
36
36
  line-height: 24px !important;
37
- letter-spacing: -0.88px !important;
37
+ letter-spacing: -4% !important;
38
38
  }
39
39
  }
40
40
 
@@ -44,33 +44,15 @@
44
44
  font-weight: 600 !important;
45
45
 
46
46
  @include web {
47
- font-size: 21px !important;
47
+ font-size: 20px !important;
48
48
  line-height: 24px !important;
49
- letter-spacing: -0.63px !important;
49
+ letter-spacing: -3% !important;
50
50
  }
51
51
 
52
52
  @include mobile {
53
- font-size: 17px !important;
54
- line-height: 20px !important;
55
- letter-spacing: -0.51px !important;
56
- }
57
- }
58
-
59
- .text-h4 {
60
- font-family: 'Montserrat', sans-serif !important;
61
- font-style: normal !important;
62
- font-weight: 500 !important;
63
-
64
- @include web {
65
53
  font-size: 16px !important;
66
54
  line-height: 20px !important;
67
- letter-spacing: -0.48px !important;
68
- }
69
-
70
- @include mobile {
71
- font-size: 14px !important;
72
- line-height: 16px !important;
73
- letter-spacing: -0.41px !important;
55
+ letter-spacing: -3% !important;
74
56
  }
75
57
  }
76
58
 
@@ -82,14 +64,14 @@
82
64
 
83
65
  @include web {
84
66
  font-size: 14px !important;
85
- line-height: 16px !important;
86
- letter-spacing: -0.48px !important;
67
+ line-height: 20px !important;
68
+ letter-spacing: -3% !important;
87
69
  }
88
70
 
89
71
  @include mobile {
90
72
  font-size: 12px !important;
91
- line-height: 14px !important;
92
- letter-spacing: -0.39px !important;
73
+ line-height: 16px !important;
74
+ letter-spacing: -3% !important;
93
75
  }
94
76
  }
95
77
 
@@ -101,14 +83,14 @@
101
83
 
102
84
  @include web {
103
85
  font-size: 14px !important;
104
- line-height: 16px !important;
105
- letter-spacing: -0.48px !important;
86
+ line-height: 20px !important;
87
+ letter-spacing: -3% !important;
106
88
  }
107
89
 
108
90
  @include mobile {
109
91
  font-size: 12px !important;
110
- line-height: 14px !important;
111
- letter-spacing: -0.39px !important;
92
+ line-height: 16px !important;
93
+ letter-spacing: -3% !important;
112
94
  }
113
95
  }
114
96
 
@@ -121,14 +103,14 @@
121
103
  font-weight: 600 !important;
122
104
  font-size: 12px !important;
123
105
  line-height: 16px !important;
124
- letter-spacing: 0.08px !important;
106
+ letter-spacing: 0 !important;
125
107
  }
126
108
 
127
109
  @include mobile {
128
110
  font-weight: 500 !important;
129
111
  font-size: 10px !important;
130
112
  line-height: 16px !important;
131
- letter-spacing: 0.19px !important;
113
+ letter-spacing: 0 !important;
132
114
  }
133
115
  }
134
116
 
@@ -141,12 +123,12 @@
141
123
  @include web {
142
124
  font-size: 12px !important;
143
125
  line-height: 16px !important;
144
- letter-spacing: 0.08px !important;
126
+ letter-spacing: 0 !important;
145
127
  }
146
128
 
147
129
  @include mobile {
148
130
  font-size: 10px !important;
149
131
  line-height: 16px !important;
150
- letter-spacing: 0.19px !important;
132
+ letter-spacing: 0 !important;
151
133
  }
152
134
  }