@dative-gpi/foundation-shared-components 0.0.47 → 0.0.48

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 (15) hide show
  1. package/components/FSCard.vue +63 -9
  2. package/components/FSClickable.vue +0 -2
  3. package/components/lists/FSDataIteratorItem.vue +3 -5
  4. package/components/lists/FSDataTableUI.vue +1 -1
  5. package/components/selects/FSSelectTimeZone.vue +10 -1
  6. package/components/tiles/FSLoadTile.vue +3 -5
  7. package/components/tiles/FSTile.vue +6 -8
  8. package/models/rules.ts +31 -31
  9. package/package.json +4 -4
  10. package/styles/components/fs_card.scss +15 -1
  11. package/styles/components/fs_data_iterator_item.scss +1 -0
  12. package/styles/components/index.scss +0 -1
  13. package/styles/globals/overrides.scss +15 -2
  14. package/components/FSContainer.vue +0 -67
  15. package/styles/components/fs_container.scss +0 -16
package/components/FSCard.vue CHANGED
@@ -1,8 +1,7 @@
1
1
  <template>
2
- <FSContainer
2
+ <div
3
3
  class="fs-card"
4
4
  :style="style"
5
- v-bind="$attrs"
6
5
  >
7
6
  <slot>
8
7
  <FSCol
@@ -25,26 +24,56 @@
25
24
  </FSRow>
26
25
  </FSCol>
27
26
  </slot>
28
- </FSContainer>
27
+ </div>
29
28
  </template>
30
29
 
31
30
  <script lang="ts">
32
31
  import { computed, defineComponent, PropType } from "vue";
33
32
 
33
+ import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
34
+ import { useColors } from "@dative-gpi/foundation-shared-components/composables";
34
35
  import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
35
36
 
36
- import FSContainer from "./FSContainer.vue";
37
37
  import FSCol from "./FSCol.vue";
38
38
  import FSRow from "./FSRow.vue";
39
39
 
40
40
  export default defineComponent({
41
41
  name: "FSCard",
42
42
  components: {
43
- FSContainer,
44
43
  FSCol,
45
44
  FSRow
46
45
  },
47
46
  props: {
47
+ padding: {
48
+ type: [String, Number],
49
+ required: false,
50
+ default: "0"
51
+ },
52
+ border: {
53
+ type: Boolean,
54
+ required: false,
55
+ default: true
56
+ },
57
+ borderRadius: {
58
+ type: [String, Number],
59
+ required: false,
60
+ default: "4px"
61
+ },
62
+ elevation: {
63
+ type: Boolean,
64
+ required: false,
65
+ default: false
66
+ },
67
+ variant: {
68
+ type: String as PropType<"background" | "standard">,
69
+ required: false,
70
+ default: "background"
71
+ },
72
+ color: {
73
+ type: String as PropType<ColorBase>,
74
+ required: false,
75
+ default: ColorEnum.Background
76
+ },
48
77
  width: {
49
78
  type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
50
79
  required: false,
@@ -62,11 +91,36 @@ export default defineComponent({
62
91
  }
63
92
  },
64
93
  setup(props) {
94
+ const { getColors } = useColors();
95
+
96
+ const colors = computed(() => getColors(props.color));
97
+ const backgrounds = getColors(ColorEnum.Background);
98
+ const lights = getColors(ColorEnum.Light);
99
+ const darks = getColors(ColorEnum.Dark);
100
+
65
101
  const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
66
- return {
67
- "--fs-card-width" : sizeToVar(props.width),
68
- "--fs-card-height": sizeToVar(props.height)
69
- };
102
+ switch (props.variant) {
103
+ case "standard": return {
104
+ "--fs-card-border-size" : props.border ? "1px" : "0",
105
+ "--fs-card-border-radius" : sizeToVar(props.borderRadius),
106
+ "--fs-card-padding" : sizeToVar(props.padding),
107
+ "--fs-card-height" : sizeToVar(props.height),
108
+ "--fs-card-width" : sizeToVar(props.width),
109
+ "--fs-card-background-color": colors.value.light,
110
+ "--fs-card-border-color" : colors.value.lightContrast,
111
+ "--fs-card-color" : colors.value.lightContrast
112
+ }
113
+ case "background": return {
114
+ "--fs-card-border-size" : props.border ? "1px" : "0",
115
+ "--fs-card-border-radius" : sizeToVar(props.borderRadius),
116
+ "--fs-card-padding" : sizeToVar(props.padding),
117
+ "--fs-card-height" : sizeToVar(props.height),
118
+ "--fs-card-width" : sizeToVar(props.width),
119
+ "--fs-card-background-color": backgrounds.base,
120
+ "--fs-card-border-color" : lights.dark,
121
+ "--fs-card-color" : darks.base
122
+ }
123
+ }
70
124
  });
71
125
 
72
126
  return {
package/components/FSClickable.vue CHANGED
@@ -6,7 +6,6 @@
6
6
  @click.stop="onClick"
7
7
  >
8
8
  <FSCard
9
- :border="$props.border"
10
9
  :class="classes"
11
10
  :style="style"
12
11
  v-bind="$attrs"
@@ -31,7 +30,6 @@
31
30
  :to="href"
32
31
  >
33
32
  <FSCard
34
- :border="$props.border"
35
33
  :class="classes"
36
34
  :style="style"
37
35
  v-bind="$attrs"
package/components/lists/FSDataIteratorItem.vue CHANGED
@@ -35,7 +35,7 @@
35
35
  </FSRow>
36
36
  <slot name="item.bottom" v-bind="{ item: $props.item }" />
37
37
  </FSCol>
38
- <FSContainer
38
+ <FSCard
39
39
  v-if="$props.showSelect"
40
40
  class="fs-data-iterator-item-checkbox"
41
41
  :border="false"
@@ -45,7 +45,7 @@
45
45
  :modelValue="$props.modelValue"
46
46
  @update:modelValue="() => $emit('update:modelValue', $props.item)"
47
47
  />
48
- </FSContainer>
48
+ </FSCard>
49
49
  </FSCard>
50
50
  </template>
51
51
 
@@ -54,16 +54,14 @@ import { defineComponent, PropType } from "vue";
54
54
 
55
55
  import { ColorEnum, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
56
56
 
57
- import FSContainer from "../FSContainer.vue";
58
57
  import FSCheckbox from "../FSCheckbox.vue";
59
58
  import FSCard from "../FSCard.vue";
60
59
  import FSText from "../FSText.vue";
61
60
  import FSRow from "../FSRow.vue";
62
61
 
63
62
  export default defineComponent({
64
- name: "FSIteratorCard",
63
+ name: "FSDataIteratorItem",
65
64
  components: {
66
- FSContainer,
67
65
  FSCheckbox,
68
66
  FSCard,
69
67
  FSText,
package/components/lists/FSDataTableUI.vue CHANGED
@@ -319,8 +319,8 @@
319
319
  >
320
320
  <template #default="{ items }">
321
321
  <FSCol
322
- width="fill"
323
322
  class="fs-data-iterator-container"
323
+ width="fill"
324
324
  >
325
325
  <FSDraggable
326
326
  v-for="(item, index) in items"
package/components/selects/FSSelectTimeZone.vue CHANGED
@@ -1,10 +1,19 @@
1
1
  <template>
2
2
  <FSSelectField
3
+ itemTitle="id"
3
4
  :items="entities"
4
5
  :modelValue="$props.modelValue"
5
6
  @update:modelValue="$emit('update:modelValue', $event)"
6
7
  v-bind="$attrs"
7
- />
8
+ >
9
+ <template #selection>
10
+ <FSRow>
11
+ <FSSpan font="text-underline" :style="style">
12
+ {{ entities.find((entity) => entity.id === $props.modelValue)?.id }}
13
+ </FSSpan>
14
+ </FSRow>
15
+ </template>
16
+ </FSSelectField>
8
17
  </template>
9
18
 
10
19
  <script lang="ts">
package/components/tiles/FSLoadTile.vue CHANGED
@@ -39,7 +39,7 @@
39
39
  :width="widths.image"
40
40
  />
41
41
  </FSRow>
42
- <FSContainer
42
+ <FSCard
43
43
  v-if="$props.editable"
44
44
  class="fs-tile-checkbox"
45
45
  :border="false"
@@ -48,7 +48,7 @@
48
48
  :modelValue="$props.modelValue"
49
49
  @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
50
50
  />
51
- </FSContainer>
51
+ </FSCard>
52
52
  </FSCard>
53
53
  </template>
54
54
 
@@ -58,7 +58,6 @@ import { computed, defineComponent } from "vue";
58
58
  import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
59
59
  import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
60
60
 
61
- import FSContainer from "../FSContainer.vue";
62
61
  import FSCheckbox from "../FSCheckbox.vue";
63
62
  import FSLoader from "../FSLoader.vue";
64
63
  import FSCard from "../FSCard.vue";
@@ -66,9 +65,8 @@ import FSCol from "../FSCol.vue";
66
65
  import FSRow from "../FSRow.vue";
67
66
 
68
67
  export default defineComponent({
69
- name: "FSTile",
68
+ name: "FSLoadTile",
70
69
  components: {
71
- FSContainer,
72
70
  FSCheckbox,
73
71
  FSLoader,
74
72
  FSCard,
package/components/tiles/FSTile.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  :height="height"
8
8
  >
9
9
  <slot />
10
- <FSContainer
10
+ <FSCard
11
11
  v-if="$props.editable"
12
12
  class="fs-tile-checkbox"
13
13
  :border="false"
@@ -17,11 +17,11 @@
17
17
  :modelValue="$props.modelValue"
18
18
  @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
19
19
  />
20
- </FSContainer>
21
- <div
22
- class="fs-tile-bottom"
23
- :style="style"
24
- />
20
+ </FSCard>
21
+ <div
22
+ class="fs-tile-bottom"
23
+ :style="style"
24
+ />
25
25
  </FSCard>
26
26
  </template>
27
27
 
@@ -31,14 +31,12 @@ import { computed, defineComponent, PropType } from "vue";
31
31
  import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
32
32
  import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
33
33
 
34
- import FSContainer from "../FSContainer.vue";
35
34
  import FSCheckbox from "../FSCheckbox.vue";
36
35
  import FSCard from "../FSCard.vue";
37
36
 
38
37
  export default defineComponent({
39
38
  name: "FSTile",
40
39
  components: {
41
- FSContainer,
42
40
  FSCheckbox,
43
41
  FSCard
44
42
  },
package/models/rules.ts CHANGED
@@ -7,59 +7,59 @@ const { epochToLongDateFormat } = useTimeZone()!;
7
7
  const { $tr } = useTranslationsProvider();
8
8
 
9
9
  export const TextRules = {
10
- required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
11
- copy: (original: string, message: string) => (value: string) => value === original || (message ?? $tr("ui.rules.copy", "Different from original")),
12
- min: (min: number, message: string) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
13
- max: (max: number, message: string) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
14
- email: (message: string) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
15
- phone: (message: string) => (value: string) => /^[\+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
16
- digit: (message: string) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
17
- uppercase: (message: string) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
18
- lowercase: (message: string) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
19
- special: (message: string) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
10
+ required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
11
+ copy: (original: string, message: string | null) => (value: string) => value === original || (message ?? $tr("ui.rules.copy", "Different from original")),
12
+ min: (min: number, message: string | null) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
13
+ max: (max: number, message: string | null) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
14
+ email: (message: string | null) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
15
+ phone: (message: string | null) => (value: string) => /^[\+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
16
+ digit: (message: string | null) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
17
+ uppercase: (message: string | null) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
18
+ lowercase: (message: string | null) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
19
+ special: (message: string | null) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
20
20
  };
21
21
 
22
22
  export const TagRules = {
23
- required: (message: string) => (value: string[]) => value.length > 0 || (message ?? $tr("ui.rules.required", "Required")),
24
- min: (min: number, message: string) => (value: string[]) => value.length >= min || (message ?? $tr("ui.rules.tag-min", "Must be at least {0} elements", min.toString())),
25
- max: (max: number, message: string) => (value: string[]) => value.length <= max || (message ?? $tr("ui.rules.tag-max", "Must be at most {0} elements", max.toString()))
23
+ required: (message: string | null) => (value: string[]) => value.length > 0 || (message ?? $tr("ui.rules.required", "Required")),
24
+ min: (min: number, message: string | null) => (value: string[]) => value.length >= min || (message ?? $tr("ui.rules.tag-min", "Must be at least {0} elements", min.toString())),
25
+ max: (max: number, message: string | null) => (value: string[]) => value.length <= max || (message ?? $tr("ui.rules.tag-max", "Must be at most {0} elements", max.toString()))
26
26
  };
27
27
 
28
28
  export const NumberRules = {
29
- required: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
30
- min: (min: number, message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? $tr("ui.rules.number-min", "Must be at least {0}", min.toString())),
31
- max: (max: number, message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? $tr("ui.rules.number-max", "Must be at most {0}", max.toString())),
32
- integer: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? $tr("ui.rules.number-integer", "Must be an integer"))
29
+ required: (message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
30
+ min: (min: number, message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? $tr("ui.rules.number-min", "Must be at least {0}", min.toString())),
31
+ max: (max: number, message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? $tr("ui.rules.number-max", "Must be at most {0}", max.toString())),
32
+ integer: (message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? $tr("ui.rules.number-integer", "Must be an integer"))
33
33
  };
34
34
 
35
35
  export const IconRules = {
36
- required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
36
+ required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
37
37
  };
38
38
 
39
39
  export const DateRules = {
40
- required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
41
- min: (min: number, message: string) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
42
- max: (max: number, message: string) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
40
+ required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
41
+ min: (min: number, message: string | null) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
42
+ max: (max: number, message: string | null) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
43
43
  };
44
44
 
45
45
  export const SelectRules = {
46
- required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
47
- min: (min: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.select-min", "Must select at least {0} elements", min.toString())),
48
- max: (max: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.select-max", "Must select at most {0} elements", max.toString()))
46
+ required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
47
+ min: (min: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.select-min", "Must select at least {0} elements", min.toString())),
48
+ max: (max: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.select-max", "Must select at most {0} elements", max.toString()))
49
49
  };
50
50
 
51
51
  export const AutocompleteRules = {
52
- required: (message: string) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
53
- min: (min: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
54
- max: (max: number, message: string) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
52
+ required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
53
+ min: (min: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
54
+ max: (max: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
55
55
  };
56
56
 
57
57
  export const TimeRules = {
58
- required: (message: string) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
59
- min: (min: number, message: string) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
60
- max: (max: number, message: string) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
58
+ required: (message: string | null) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
59
+ min: (min: number, message: string | null) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
60
+ max: (max: number, message: string | null) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
61
61
  };
62
62
 
63
63
  export const ToggleRules = {
64
- required: (message: string) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
64
+ required: (message: string | null) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
65
65
  }
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.47",
4
+ "version": "0.0.48",
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.47",
14
- "@dative-gpi/foundation-shared-services": "0.0.47",
13
+ "@dative-gpi/foundation-shared-domain": "0.0.48",
14
+ "@dative-gpi/foundation-shared-services": "0.0.48",
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": "4fe5299cdc8c81c71d98ab53e944e1ebacaf9e24"
35
+ "gitHead": "0029f53ff50ea72e704647e64d3419266ae680fa"
36
36
  }
package/styles/components/fs_card.scss CHANGED
@@ -1,4 +1,18 @@
1
1
  .fs-card {
2
- width: var(--fs-card-width);
2
+ border-radius: var(--fs-card-border-radius);
3
+ border: var(--fs-card-border-size) solid;
4
+ padding: var(--fs-card-padding);
3
5
  height: var(--fs-card-height);
6
+ width: var(--fs-card-width);
7
+ display: flex;
8
+
9
+ background-color: var(--fs-card-background-color);
10
+ border-color: var(--fs-card-border-color);
11
+ color: var(--fs-card-color);
12
+
13
+ &-elevation {
14
+ box-shadow: 0px 1px 8px 0px #00000029;
15
+ border-radius: 4px;
16
+ margin: 4px;
17
+ }
4
18
  }
package/styles/components/fs_data_iterator_item.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  .fs-data-iterator-item {
2
2
  position: relative;
3
3
  min-height: 36px;
4
+ flex: 1 0 0;
4
5
 
5
6
  & > .fs-col > .fs-row:first-of-type > :last-child {
6
7
  padding-right: 22px;
package/styles/components/index.scss CHANGED
@@ -13,7 +13,6 @@
13
13
  @import "fs_color_field.scss";
14
14
  @import "fs_color.scss";
15
15
  @import "fs_color_icon.scss";
16
- @import "fs_container.scss";
17
16
  @import "fs_data_table.scss";
18
17
  @import "fs_data_iterator_item.scss";
19
18
  @import "fs_date_field.scss";
package/styles/globals/overrides.scss CHANGED
@@ -29,8 +29,21 @@
29
29
  // Applies to all inputs
30
30
  .v-input {
31
31
  padding: 0px !important;
32
- min-width: 200px;
33
- width: 100%;
32
+
33
+ &:not(.v-checkbox) {
34
+ min-width: 200px;
35
+ width: 100%;
36
+ }
37
+
38
+ &.v-checkbox {
39
+ @include web {
40
+ min-width: 24px;
41
+ }
42
+
43
+ @include mobile {
44
+ min-width: 20px;
45
+ }
46
+ }
34
47
 
35
48
  & .v-input__prepend {
36
49
  margin-inline-end: 8px !important;
package/components/FSContainer.vue DELETED
@@ -1,67 +0,0 @@
1
- <template>
2
- <div
3
- :class="classes"
4
- :style="style"
5
- >
6
- <slot />
7
- </div>
8
- </template>
9
-
10
- <script lang="ts">
11
- import { computed, defineComponent } from "vue";
12
-
13
- import { useColors } from "@dative-gpi/foundation-shared-components/composables";
14
- import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
15
- import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
16
-
17
- export default defineComponent({
18
- name: "FSContainer",
19
- props: {
20
- padding: {
21
- type: [String, Number],
22
- required: false,
23
- default: "8px"
24
- },
25
- border: {
26
- type: Boolean,
27
- required: false,
28
- default: true
29
- },
30
- elevation: {
31
- type: Boolean,
32
- required: false,
33
- default: false
34
- }
35
- },
36
- setup(props) {
37
- const { getColors } = useColors();
38
-
39
- const backgrounds = getColors(ColorEnum.Background);
40
- const lights = getColors(ColorEnum.Light);
41
-
42
- const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
43
- return {
44
- "--fs-container-padding" : sizeToVar(props.padding),
45
- "--fs-container-background-color": backgrounds.base,
46
- "--fs-container-border-color" : lights.dark
47
- };
48
- });
49
-
50
- const classes = computed((): string[] => {
51
- const classNames = ["fs-container"];
52
- if (props.border) {
53
- classNames.push("fs-container-border");
54
- }
55
- if (props.elevation) {
56
- classNames.push("fs-container-elevation");
57
- }
58
- return classNames;
59
- });
60
-
61
- return {
62
- style,
63
- classes
64
- };
65
- }
66
- })
67
- </script>
package/styles/components/fs_container.scss DELETED
@@ -1,16 +0,0 @@
1
- .fs-container {
2
- background-color: var(--fs-container-background-color);
3
- padding: var(--fs-container-padding);
4
- display: flex;
5
-
6
- &-border {
7
- border: 1px solid var(--fs-container-border-color);
8
- border-radius: 4px;
9
- }
10
-
11
- &-elevation {
12
- box-shadow: 0px 1px 8px 0px #00000029;
13
- border-radius: 4px;
14
- margin: 4px;
15
- }
16
- }