@dative-gpi/foundation-shared-components 0.0.45 → 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);
 
@@ -106,6 +131,13 @@ export default defineComponent({
           "--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/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);
 
@@ -100,6 +130,13 @@ export default defineComponent({
           "--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);
 
@@ -104,6 +118,15 @@ export default defineComponent({
           "--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",
@@ -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.45",
+  "version": "0.0.46",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.45",
-    "@dative-gpi/foundation-shared-services": "0.0.45",
+    "@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": "4af778193801da465615d1718cc5562e3297d651"
+  "gitHead": "a1963363ed2f74aa24319fae34baeaa4d54e5e97"
 }

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/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] {