@dative-gpi/foundation-shared-components 0.0.44 → 0.0.46

package/components/FSCheckbox.vue

@@ -2,30 +2,43 @@
   <FSCol
     width="hug"
   >
-    <FSRow
-      width="hug"
-      align="center-left"
+    <v-checkbox
+      hide-details
+      :ripple="false"
+      :rules="$props.rules"
+      :validateOn="validateOn"
+      :modelValue="$props.modelValue"
+      @click.prevent
+      @blur="blurred = true"
+      v-bind="$attrs"
     >
-      <FSIcon
-        class="fs-checkbox"
-        size="l"
-        :style="style"
-        @click.stop="onToggle"
-      >
-        {{ icon }}
-      </FSIcon>
-      <slot>
-        <FSSpan
-          v-if="$props.label"
-          class="fs-checkbox-label"
+      <template #input>
+        <FSRow
+          align="center-left"
+          width="hug"
           :style="style"
-          :font="font"
           @click.stop="onToggle"
         >
-          {{ $props.label }}
-        </FSSpan>
-      </slot>
-    </FSRow>
+          <FSIcon
+            class="fs-checkbox"
+            size="l"
+            :style="style"
+          >
+            {{ icon }}
+          </FSIcon>
+          <slot>
+            <FSSpan
+              v-if="$props.label"
+              class="fs-checkbox-label"
+              :style="style"
+              :font="font"
+            >
+              {{ $props.label }}
+            </FSSpan>
+          </slot>
+        </FSRow>
+      </template>
+    </v-checkbox>
     <slot name="description">
       <FSSpan
         v-if="$props.description"
@@ -42,8 +55,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -74,15 +87,25 @@ export default defineComponent({
       required: false,
       default: false
     },
+    indeterminate: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
-    indeterminate: {
-      type: Boolean,
+    rules: {
+      type: Array as PropType<Function[]>,
       required: false,
-      default: false
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
     },
     editable: {
       type: Boolean,
@@ -92,9 +115,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
+    const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
@@ -102,10 +127,17 @@ export default defineComponent({
       if (!props.editable) {
         return {
           "--fs-checkbox-cursor"        : "default",
-          "--fs-checkbox-checkbox-color": lights.dark,
+          "--fs-checkbox-checkbox-color": (props.modelValue || props.indeterminate) ? colors.value.light : lights.base,
           "--fs-checkbox-color"         : lights.dark
         };
       }
+      if (messages.value.length) {
+        return {
+          "--fs-checkbox-cursor"        : "pointer",
+          "--fs-checkbox-checkbox-color": errors.base,
+          "--fs-checkbox-color"         : darks.base
+        }
+      }
       return {
         "--fs-checkbox-cursor"        : "pointer",
         "--fs-checkbox-checkbox-color": (props.modelValue || props.indeterminate) ? colors.value.base : darks.base,
@@ -117,6 +149,8 @@ export default defineComponent({
 
     const font = computed((): string => props.modelValue ? "text-button" : "text-body");
 
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
     const onToggle = (): void => {
       if (!props.editable) {
         return;
@@ -125,6 +159,9 @@ export default defineComponent({
     };
 
     return {
+      validateOn,
+      messages,
+      blurred,
       style,
       icon,
       font,

package/components/FSFadeOut.vue

@@ -12,9 +12,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref } from "vue";
+import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -42,24 +42,26 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { windowWidth } = useBreakpoints();
+    const { debounce } = useDebounce();
     const { getColors } = useColors();
 
     const backgrounds = getColors(ColorEnum.Background);
 
     const fadeOutRef = ref(null);
-    const topMaskHeight = ref("0px");
     const bottomMaskHeight = ref("0px");
+    const topMaskHeight = ref("0px");
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-fade-out-height"            : sizeToVar(props.height),
-        "--fs-fade-out-width"             : sizeToVar(props.width),
-        "--fs-fade-out-padding"           : sizeToVar(props.padding),
-        "--fs-fade-out-mask-color"        : backgrounds.base,
-        "--fs-fade-out-top-mask-height"   : topMaskHeight.value,
-        "--fs-fade-out-top-mask-top"      : topPadding.value,
-        "--fs-fade-out-bottom-mask-height": bottomMaskHeight.value,
-        "--fs-fade-out-bottom-mask-bottom": bottomPadding.value
+        "--fs-fade-out-height"             : sizeToVar(props.height),
+        "--fs-fade-out-width"              : sizeToVar(props.width),
+        "--fs-fade-out-padding"            : sizeToVar(props.padding),
+        "--fs-fade-out-mask-color"         : backgrounds.base,
+        "--fs-fade-out-top-mask-height"    : topMaskHeight.value,
+        "--fs-fade-out-top-mask-top"       : topPadding.value,
+        "--fs-fade-out-bottom-mask-height" : bottomMaskHeight.value,
+        "--fs-fade-out-bottom-mask-bottom" : bottomPadding.value
       };
     });
 
@@ -107,7 +109,16 @@ export default defineComponent({
       }
     });
 
-    const onScroll = ({ target }): void => {
+    const onScroll = ({ target }): void => debounce(() => {
+      const currentTopMaskHeight = target.children[0].clientHeight;
+      const currentBottomMaskHeight = target.children[target.children.length - 1].clientHeight;
+      const contentHeight = target.scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
+
+      if (target.clientHeight >= contentHeight) {
+        bottomMaskHeight.value = "0px";
+        topMaskHeight.value = "0px";
+        return;
+      }
       if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
         bottomMaskHeight.value = "0px";
       }
@@ -120,7 +131,28 @@ export default defineComponent({
       else {
         topMaskHeight.value = sizeToVar(props.maskHeight);
       }
-    }
+    }, 25);
+
+    const onResize = (): void => debounce(() => {
+      if (fadeOutRef.value) {
+        const currentTopMaskHeight = fadeOutRef.value.children[0].clientHeight;
+        const currentBottomMaskHeight = fadeOutRef.value.children[fadeOutRef.value.children.length - 1].clientHeight;
+        const contentHeight = fadeOutRef.value.scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
+
+        if (fadeOutRef.value.clientHeight < contentHeight) {
+          if (fadeOutRef.value.scrollHeight - fadeOutRef.value.scrollTop - fadeOutRef.value.clientHeight > 0) {
+            bottomMaskHeight.value = sizeToVar(props.maskHeight);
+          }
+          if (fadeOutRef.value.scrollTop > 0) {
+            topMaskHeight.value = sizeToVar(props.maskHeight);
+          }
+        }
+        else {
+          bottomMaskHeight.value = "0px";
+          topMaskHeight.value = "0px";
+        }
+      }
+    }, 200);
 
     onMounted((): void => {
       if (fadeOutRef.value) {
@@ -130,6 +162,8 @@ export default defineComponent({
       }
     });
 
+    watch(() => windowWidth.value, onResize);
+
     return {
       fadeOutRef,
       style,

package/components/FSImage.vue

@@ -1,28 +1,44 @@
 <template>
   <v-img
     class="fs-image"
+    ref="imageRef"
     :height="computedHeight"
     :width="computedWidth"
     :cover="$props.cover"
     :style="style"
     :src="source"
+    @error="onError"
     v-bind="$attrs"
   >
     <template #placeholder>
       <FSLoader
-        class="fs-load-image"
+        class="fs-image-load"
         height="100%"
         width="100%"
         :borderRadius="$props.borderRadius"
       />
     </template>
+    <template #error>
+      <FSLoader
+        v-if="!blurHash"
+        class="fs-image-load"
+        height="100%"
+        width="100%"
+        :borderRadius="$props.borderRadius"
+      />
+      <canvas
+        ref="canvasRef"
+      />
+    </template>
   </v-img>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, watch } from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
+import { decode, isBlurhashValid } from "blurhash";
 
-import { useImageRaw, useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
+import { useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
+import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config/urls";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSLoader from "./FSLoader.vue";
@@ -65,12 +81,15 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { getting: fetchingRaw, get: fetchRaw, entity: image } = useImageRaw();
-    const { getting: fetchingBlurHash, get: fetchBlurHash, entity: blurHash } = useImageBlurHash();
+    const { get: fetchBlurHash, entity: blurHash } = useImageBlurHash();
+
+    const imageRef = ref(null);
+    const canvasRef = ref(null);
 
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-image-border-radius": sizeToVar(props.borderRadius)
+        "--fs-image-border-radius"   : sizeToVar(props.borderRadius),
+        "--fs-image-blurhash-opacity": blurHash.value ? "1" : "0"
       }
     });
 
@@ -113,44 +132,41 @@ export default defineComponent({
     });
 
     const source = computed((): string | null => {
-      if (fetchingRaw.value) {
-        return null;
-      }
-      if (image.value) {
-        return image.value;
-      }
-      if (fetchingBlurHash.value) {
-        return null;
-      }
-      if (blurHash.value) {
-        return blurHash.value.blurHash;
+      if (props.imageId) {
+        return IMAGE_RAW_URL(props.imageId);
       }
       return null;
     });
 
-    onMounted(() => {
-      fetch();
-    });
-
-    watch(() => props.imageId, () => {
-      fetch();
-    });
-
-    const fetch = async () => {
-      if (!props.imageId) {
-        return;
+    const onError = (): void => {
+      if (props.imageId) {
+        fetchBlurHash(props.imageId);   
       }
-      await fetchRaw(props.imageId);
-      if (!image.value) {
-        await fetchBlurHash(props.imageId);
+    };
+
+    watch(() => blurHash.value, () => {
+      if (canvasRef.value && imageRef.value) {
+        if (blurHash.value && isBlurhashValid(blurHash.value.blurHash).result) {
+          const ctx = canvasRef.value.getContext("2d");
+          if (ctx) {
+            const pixels = decode(blurHash.value.blurHash, imageRef.value.$el.clientWidth, imageRef.value.$el.clientHeight);
+            const imageData = ctx.createImageData(imageRef.value.$el.clientWidth, imageRef.value.$el.clientHeight);
+            imageData.data.set(pixels);
+            ctx.putImageData(imageData, 0, 0);
+          }
+        }
       }
-    }
+    });
 
     return {
       computedHeight,
       computedWidth,
+      canvasRef,
+      imageRef,
+      blurHash,
       source,
-      style
+      style,
+      onError
     };
   }
 });

package/components/FSRadio.vue

@@ -1,26 +1,44 @@
 <template>
-  <FSCol width="hug">
-    <FSRow width="hug" align="center-left">
-      <FSIcon
-        class="fs-radio"
-        size="l"
-        :style="style"
-        @click.stop="onToggle"
-      >
-        {{ icon }}
-      </FSIcon>
-      <slot>
-        <FSSpan
-          v-if="$props.label"
-          class="fs-radio-label"
+  <FSCol
+    width="hug"
+  >
+    <v-radio
+      hide-details
+      :ripple="false"
+      :rules="$props.rules"
+      :validateOn="validateOn"
+      :modelValue="$props.selected"
+      @click.prevent
+      @blur="blurred = true"
+      v-bind="$attrs"
+    >
+      <template #input>
+        <FSRow
+          align="center-left"
+          width="hug"
           :style="style"
-          :font="font"
           @click.stop="onToggle"
         >
-          {{ $props.label }}
-        </FSSpan>
-      </slot>
-    </FSRow>
+          <FSIcon
+            class="fs-radio"
+            size="l"
+            :style="style"
+          >
+            {{ icon }}
+          </FSIcon>
+          <slot>
+            <FSSpan
+              v-if="$props.label"
+              class="fs-radio-label"
+              :style="style"
+              :font="font"
+            >
+              {{ $props.label }}
+            </FSSpan>
+          </slot>
+        </FSRow>
+      </template>
+    </v-radio>
     <slot name="description">
       <FSSpan
         v-if="$props.description"
@@ -37,8 +55,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -78,6 +96,16 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
+    rules: {
+      type: Array as PropType<Function[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -86,9 +114,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
+    const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
@@ -96,10 +126,17 @@ export default defineComponent({
       if (!props.editable) {
         return {
           "--fs-radio-cursor"     : "default",
-          "--fs-radio-radio-color": lights.dark,
+          "--fs-radio-radio-color": props.selected ? colors.value.light : lights.base,
           "--fs-radio-color"      : lights.dark
         };
       }
+      if (messages.value.length) {
+        return {
+          "--fs-radio-cursor"     : "pointer",
+          "--fs-radio-radio-color": errors.base,
+          "--fs-radio-color"      : darks.base
+        }
+      }
       return {
         "--fs-radio-cursor"     : props.selected ? "default" : "pointer",
         "--fs-radio-radio-color": props.selected ? colors.value.base : darks.base,
@@ -111,6 +148,8 @@ export default defineComponent({
 
     const font = computed((): string => props.selected ? "text-button" : "text-body");
 
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
     const onToggle = (): void => {
       if (!props.editable) {
         return;
@@ -121,6 +160,9 @@ export default defineComponent({
     };
 
     return {
+      validateOn,
+      messages,
+      blurred,
       style,
       icon,
       font,

package/components/FSSwitch.vue

@@ -12,6 +12,8 @@
         inset
         :style="style"
         :ripple="false"
+        :rules="$props.rules"
+        :validateOn="validateOn"
         :modelValue="$props.modelValue"
         @update:modelValue="onToggle"
         v-bind="$attrs"
@@ -44,8 +46,8 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
+import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
@@ -79,6 +81,16 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
+    rules: {
+      type: Array as PropType<Function[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -87,10 +99,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
+    const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
@@ -99,15 +113,24 @@ export default defineComponent({
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
           "--fs-switch-cursor"     : "default",
-          "--fs-switch-track-color": lights.dark,
+          "--fs-switch-track-color": props.modelValue ? colors.value.light : lights.base,
           "--fs-switch-thumb-color": backgrounds.base,
           "--fs-switch-color"      : lights.dark
         };
       }
+      if (messages.value.length) {
+        return {
+          "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
+          "--fs-switch-cursor"     : "pointer",
+          "--fs-switch-track-color": errors.base,
+          "--fs-switch-thumb-color": backgrounds.base,
+          "--fs-switch-color"      : darks.base
+        };
+      }
       return {
         "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
         "--fs-switch-cursor"     : "pointer",
-        "--fs-switch-track-color": props.modelValue ? colors.value.base : darks.base,
+        "--fs-switch-track-color": props.modelValue ? colors.value.base : lights.dark,
         "--fs-switch-thumb-color": backgrounds.base,
         "--fs-switch-color"      : darks.base
       };
@@ -115,6 +138,8 @@ export default defineComponent({
 
     const font = computed((): string => props.modelValue ? "text-button" : "text-body");
 
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
     const onToggle = (): void => {
       if (!props.editable) {
         return;
@@ -123,6 +148,9 @@ export default defineComponent({
     }
 
     return {
+      validateOn,
+      messages,
+      blurred,
       style,
       font,
       onToggle

package/components/fields/FSRichTextField.vue

@@ -383,7 +383,12 @@ export default defineComponent({
     editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         updateToolbar();
-        emit("update:modelValue", JSON.stringify(editorState.toJSON()));
+        if (JSON.stringify(editorState.toJSON()) !== emptyState) {
+          emit("update:modelValue", JSON.stringify(editorState.toJSON()));
+        }
+        else {
+          emit("update:modelValue", null);
+        }
       });
     });
 
@@ -541,13 +546,13 @@ export default defineComponent({
     }
 
     watch(() => props.modelValue, () => {
-      if (props.modelValue != JSON.stringify(editor.getEditorState().toJSON())) {
+      if (JSON.stringify(editor.getEditorState().toJSON()) != props.modelValue) {
         if (props.modelValue != null) {
           editor.update(() => {
             editor.setEditorState(editor.parseEditorState(props.modelValue));
           });
         }
-        else {
+        else if (JSON.stringify(editor.getEditorState().toJSON()) !== emptyState) {
           editor.update(() => {
             editor.setEditorState(editor.parseEditorState(emptyState));
           });

package/components/lists/FSGrid.vue

@@ -0,0 +1,131 @@
+<template>
+  <FSRow
+    gap="32px"
+  >
+    <FSRow
+      v-for="(gridItem, index) in  gridItems"
+      :width="width"
+      :style="style"
+      :key="index"
+    >
+      <FSCol
+        gap="16px"
+      >
+        <FSText
+          font="text-h3"
+        >
+          {{ gridItem.categoryLabel }}
+        </FSText>
+        <FSCol
+          gap="0"
+        >
+          <FSRow
+            v-for="(item, index)  in  gridItem.items"
+            padding="0 8px"
+            align="center-center"
+            class="fs-grid-item"
+            height="hug"
+            :key="index"
+          >
+            <FSCol
+              gap="2px"
+            >
+              <slot :name="`item-header.${gridItem.categoryCode}-${item.code}`" v-bind="{ item }">
+                <FSText
+                  :font="item.hideDefault ? 'text-body' : 'text-overline'"
+                >
+                  {{ item.label }}
+                </FSText>
+              </slot>
+              <FSRow
+                v-if="!item.hideDefault"
+              >
+                <slot
+                  :name="`item-value-left.${gridItem.categoryCode}-${item.code}`"
+                  v-bind="{ item }"
+                >
+                  <FSText>
+                    {{ item.value }}
+                  </FSText>
+                </slot>
+              </FSRow>
+            </FSCol>
+            <v-spacer />
+            <FSRow
+              v-if="useSlot(`item-value-right.${gridItem.categoryCode}-${item.code}`)"
+              align="center-right"
+            >
+              <slot
+                :name="`item-value-right.${gridItem.categoryCode}-${item.code}`"
+                v-bind="{ item }"
+              >
+                <FSText
+                  font="text-body"
+                >
+                  {{ item.value }}
+                </FSText>
+              </slot>
+            </FSRow>
+          </FSRow>
+        </FSCol>
+      </FSCol>
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, GridItem } from "@dative-gpi/foundation-shared-components/models";
+
+import FSDivider from "../FSDivider.vue";
+import FSText from "../FSText.vue";
+
+export default defineComponent({
+  name: "FSGrid",
+  components: {
+    FSDivider,
+    FSText
+  },
+  props: {
+    gridItems: {
+      type: Array as PropType<GridItem[]>,
+      default: [],
+      required: false
+    },
+    cols: {
+      type: Number as PropType<1 | 2>,
+      required: false,
+      default: 1
+    }
+  },
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    const lights = getColors(ColorEnum.Light);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-grid-border-color": lights.dark
+      };
+    });
+
+    const width = computed(() => {
+        return props.cols == 2 && !isExtraSmall.value ? "calc(50% - 16px)" : "100%";
+    });
+
+    const useSlot = (name: string): boolean => {
+      return !!slots[name];
+    };
+
+    return {
+      width,
+      style,
+      useSlot
+    }
+  }
+})
+</script>

package/models/grids.ts

@@ -0,0 +1,12 @@
+export interface GridItem {
+    categoryLabel: string;
+    categoryCode: string;
+    items: Item[];
+}
+
+export interface Item {
+    label: string;
+    code: string;
+    value: string;
+    hideDefault: boolean;
+}

package/models/index.ts

@@ -4,6 +4,7 @@ export * from "./deviceAlerts";
 export * from "./deviceConnectivities";
 export * from "./deviceStatuses";
 export * from "./errors";
+export * from "./grids";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";

package/models/rules.ts

@@ -58,4 +58,8 @@ export const TimeRules = {
     required: (message: string) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
     min: (min: number, message: string) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
     max: (max: number, message: string) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
-};
+};
+
+export const ToggleRules = {
+    required: (message: string) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.44",
-    "@dative-gpi/foundation-shared-services": "0.0.44",
+    "@dative-gpi/foundation-shared-domain": "0.0.46",
+    "@dative-gpi/foundation-shared-services": "0.0.46",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "485812f109093aa8e931f04fdcd1fd54f46f66fc"
+  "gitHead": "a1963363ed2f74aa24319fae34baeaa4d54e5e97"
 }

package/styles/components/fs_fade_out.scss

@@ -12,25 +12,21 @@
 .fs-fade-out-top {
     pointer-events: none;
     position: sticky;
-    display: flex;
     z-index: 10;
-    height: var(--fs-fade-out-top-mask-height);
     min-height: var(--fs-fade-out-top-mask-height);
     width: 100%;
     top: var(--fs-fade-out-top-mask-top);
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-top-mask-height));
 }
 
 .fs-fade-out-bottom {
     pointer-events: none;
     position: sticky;
-    display: flex;
     z-index: 10;
-    height: var(--fs-fade-out-bottom-mask-height);
     min-height: var(--fs-fade-out-bottom-mask-height);
     width: 100%;
     bottom: var(--fs-fade-out-bottom-mask-bottom);
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to bottom, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-bottom-mask-height));
 }

package/styles/components/fs_grid.scss

@@ -0,0 +1,4 @@
+.fs-grid-item {
+    border-bottom: 1px solid var(--fs-grid-border-color);
+    min-height: 56px;
+}

package/styles/components/fs_image.scss

@@ -1,7 +1,3 @@
-.fs-load-image {
-    border-radius: var(--fs-image-border-radius);
-}
-
 .fs-image {
     border-radius: var(--fs-image-border-radius);
 

package/styles/components/fs_switch.scss

@@ -42,6 +42,7 @@
     @extend .fs-switch-size;
 
     background-color: var(--fs-switch-track-color) !important;
+    opacity: 1;
 }
 
 .v-switch__thumb {

package/styles/components/index.scss

@@ -24,6 +24,7 @@
 @import "fs_fade_out.scss";
 @import "fs_filter_button.scss";
 @import "fs_form.scss";
+@import "fs_grid.scss";
 @import "fs_header_button.scss";
 @import "fs_hidden_button.scss";
 @import "fs_icon_field.scss";

package/styles/globals/overrides.scss

@@ -3,9 +3,27 @@
     display: none;
 }
 
-// No default hover effect on switches and others
-.v-selection-control__input::before {
-    display: none;
+// No default hover effect on switches and others, no limited opacity, no limited width...
+.v-selection-control {
+    min-height: 0 !important;
+}
+
+.v-selection-control__wrapper {
+    height: auto !important;
+    width: auto !important;
+}
+
+.v-selection-control__input {
+    height: auto !important;
+    width: auto !important;
+
+    & > .v-icon {
+        opacity: 1 !important;
+    }
+
+    &::before {
+        display: none;
+    }
 }
 
 // Applies to all inputs
@@ -64,6 +82,10 @@
     }
 }
 
+// No input messages allowed
+.v-input__details {
+    display: none !important;
+}
 
 // No up / down buttons in input field of type number
 input[type=number] {