@dative-gpi/foundation-shared-components 1.0.168 → 1.0.170

package/components/FSSpan.vue

@@ -44,7 +44,12 @@ export default defineComponent({
       type: String as PropType<"left" | "center" | "right">,
       required: false,
       default: "left"
-    }
+    },
+    wordBreak: {
+      type: String as PropType<"normal" | "break-all" | "keep-all" | "break-word">,
+      required: false,
+      default: "normal"
+    },
   },
   setup(props) {
     const { fontStyles } = useBreakpoints();
@@ -53,6 +58,7 @@ export default defineComponent({
     const style = computed((): StyleValue => ({
       "--fs-span-text-align": props.align,
       "--fs-span-line-clamp": props.lineClamp.toString(),
+      "--fs-span-word-break": props.wordBreak,
       ...fontStyles.value
     }));
 
@@ -67,6 +73,9 @@ export default defineComponent({
       else if (props.ellipsis) {
         classNames.push("fs-span-ellipsis");
       }
+      if (props.wordBreak !== "normal") {
+        classNames.push("fs-span-word-break");
+      }
       return classNames;
     });
 

package/components/FSText.vue

@@ -50,7 +50,12 @@ export default defineComponent({
       type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" | "soft" | "softContrast">,
       required: false,
       default: "base"
-    }
+    },
+    wordBreak: {
+      type: String as PropType<"normal" | "break-all" | "keep-all" | "break-word">,
+      required: false,
+      default: "normal"
+    },
   },
   setup(props) {
     const { fontStyles } = useBreakpoints();
@@ -62,6 +67,7 @@ export default defineComponent({
     const style = computed((): StyleValue => ({
       "--fs-span-line-clamp": props.lineClamp.toString(),
       "--fs-text-color"     : colors.value[props.variant]!,
+      "--fs-span-word-break": props.wordBreak,
       ...fontStyles.value
     }));
 
@@ -76,6 +82,9 @@ export default defineComponent({
       else if (props.ellipsis) {
         classNames.push("fs-span-ellipsis");
       }
+      if (props.wordBreak !== "normal") {
+        classNames.push("fs-span-word-break");
+      }
       return classNames;
     });
 

package/components/fields/FSMagicConfigField.vue

@@ -0,0 +1,171 @@
+<template>
+  <FSRow
+    class="fs-magic-config-field"
+  >
+    <component
+      v-if="$props.type"
+      class="fs-magic-config-field-value"
+      :is="get($props.type)"
+      :label="$tr('ui.common.value', 'Value')"
+      :disabled="$props.disabled"
+      :required="true"
+      :rules="rules"
+      :modelValue="valueToInput"
+      @update:modelValue="inputToValue"
+    />
+    <FSRow
+      gap="24px"
+    >
+      <FSTranslateField
+        :label="$tr('entity.common.label', 'Label')"
+        :disabled="$props.disabled"
+        :modelValue="$props.labelDefault"
+        :translations="$props.translations"
+        @update:modelValue="$emit('update:labelDefault', $event)"
+        @update:translations="$emit('update:translations', $event)"
+      />
+      <FSRow
+        class="fs-magic-config-field-actions"
+        width="hug"
+        :wrap="false"
+      >
+        <FSButtonRemoveIcon
+          @click="$emit('click:remove')"
+        />
+        <FSButtonAddIcon
+          @click="$emit('click:add')"
+        />
+      </FSRow>
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules, AutocompleteRules } from "../../models";
+import { useMagicFieldProvider } from "../../composables";
+import { MagicFieldType } from "../../models/magicFields";
+
+import FSButtonRemoveIcon from "../buttons/FSButtonRemoveIcon.vue";
+import FSButtonAddIcon from "../buttons/FSButtonAddIcon.vue";
+import FSTranslateField from "./FSTranslateField.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSMagicConfigField",
+  components: {
+    FSButtonRemoveIcon,
+    FSTranslateField,
+    FSButtonAddIcon,
+    FSRow
+  },
+  props: {
+    type: {
+      type: Number as PropType<MagicFieldType>,
+      required: false,
+      default: MagicFieldType.TextField
+    },
+    labelDefault: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; label: string }[]>,
+      required: false,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],
+  setup(props, { emit }) {
+    const { get } = useMagicFieldProvider();
+
+    const rules = computed((): Function[] => {
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+          return [NumberRules.required()];
+        case MagicFieldType.TextField:
+          return [TextRules.required()];
+        case MagicFieldType.DateTimeField:
+          return [DateRules.required()];
+        case MagicFieldType.IconField:
+          return [IconRules.required()];
+        case MagicFieldType.TimeField:
+          return [TimeRules.required()];
+        case MagicFieldType.TimeStepField:
+          return [TimeStepRules.required()];
+        case MagicFieldType.PlotPerField:
+          return [AutocompleteRules.required()];
+      }
+      return [];
+    });
+
+    const valueToInput = computed((): any => {
+      if (!props.modelValue) {
+        return null;
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (isNaN(parseFloat(props.modelValue))) {
+            return null;
+          }
+          return parseFloat(props.modelValue);
+        case MagicFieldType.Switch: 
+          return props.modelValue === "true";
+        case MagicFieldType.TimeStepField:
+          return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
+        default:
+          return props.modelValue;
+      }
+    });
+
+    const inputToValue = (value: any) => {
+      if (!value) {
+        emit("update:modelValue", null);
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.Switch: 
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          emit("update:modelValue", value.toString());
+          break;
+        case MagicFieldType.TimeStepField:
+          emit("update:modelValue", JSON.stringify(value));
+          break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
+        default:
+          emit("update:modelValue", value);
+          break;
+      }
+    };
+
+    return {
+      MagicFieldType,
+      valueToInput,
+      rules,
+      inputToValue,
+      get
+    };
+  },
+});
+</script>

package/components/fields/FSMagicField.vue

@@ -0,0 +1,198 @@
+<template>
+  <component
+    v-if="!$props.useOnlyAllowedValues"
+    :is="get($props.type)"
+    :modelValue="valueToInput"
+    @update:modelValue="inputToValue"
+    v-bind="$attrs"
+  />
+  <FSSelectField
+    v-else
+    itemValue="value"
+    :items="items"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-if="$props.type === MagicFieldType.IconField"
+      #selection="{ item }"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.value"
+        >
+          {{ item.raw.value }}
+        </FSIcon>
+        <FSSpan
+          v-if="item.raw.value !== item.raw.label"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template
+      v-if="$props.type === MagicFieldType.IconField"
+      #item-label="{ item }"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon
+          v-if="item.raw.value"
+        >
+          {{ item.raw.value }}
+        </FSIcon>
+        <FSSpan
+          v-if="item.raw.value !== item.raw.label"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+  </FSSelectField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useMagicFieldProvider } from "../../composables";
+import { MagicFieldType } from "../../models/magicFields";
+import { getTimeBestString, timeStepToString } from "../../utils";
+
+import FSSelectField from "./FSSelectField.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSMagicField",
+  components: {
+    FSSelectField,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    type: {
+      type: Number as PropType<MagicFieldType>,
+      required: false,
+      default: MagicFieldType.TextField
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    allowedValues: {
+      type: Array as PropType<{ value: string; label: string }[]>,
+      required: false,
+      default: () => []
+    },
+    useOnlyAllowedValues: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { epochToShortTimeFormat } = useDateFormat();
+    const { $tr } = useTranslationsProvider();
+    const { get } = useMagicFieldProvider();
+
+    const items = computed(() => props.allowedValues.map((av) => ({
+      value: av.value,
+      label: av.label || asString(av.value),
+    })));
+
+    const valueToInput = computed((): any => {
+      if (props.modelValue == null) {
+        return null;
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          if (isNaN(parseFloat(props.modelValue))) {
+            return null;
+          }
+          return parseFloat(props.modelValue);
+        case MagicFieldType.Switch: 
+          return props.modelValue === "true";
+        case MagicFieldType.TimeStepField:
+          return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
+        default:
+          return props.modelValue;
+      }
+    });
+
+    const asString = (value: string): string | null => {
+      if (value == null) {
+        return "";
+      }
+      
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+          return value.toString();
+        case MagicFieldType.Switch:
+          if (value) {
+            return $tr("magic-field.true", "True");
+          }
+          return $tr("magic-field.false", "False");
+        case MagicFieldType.DateTimeField:
+          return epochToShortTimeFormat(parseFloat(value));
+        case MagicFieldType.TimeField:
+          return getTimeBestString(parseFloat(value));
+        case MagicFieldType.TimeStepField:
+          return timeStepToString(JSON.parse(value));
+        default:
+          return value;
+      }
+    }
+
+    const inputToValue = (value: any) => {
+      if (value == null) {
+        emit("update:modelValue", null);
+      }
+
+      switch (props.type) {
+        case MagicFieldType.NumberField:
+        case MagicFieldType.Switch: 
+        case MagicFieldType.DateTimeField:
+        case MagicFieldType.TimeField:
+          emit("update:modelValue", value.toString());
+          break;
+        case MagicFieldType.TimeStepField:
+          emit("update:modelValue", JSON.stringify(value));
+          break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
+        default:
+          emit("update:modelValue", value);
+          break;
+      }
+    };
+
+    return {
+      MagicFieldType,
+      valueToInput,
+      items,
+      inputToValue,
+      get
+    };
+  },
+});
+</script>

package/components/fields/FSPoliciesValidationField.vue

@@ -0,0 +1,101 @@
+<template>
+  <FSCol
+    v-if="fetching"
+  >
+    <FSLoader 
+      variant="field"
+    />
+    <FSLoader 
+      variant="field"
+    />
+  </FSCol>
+  <FSCol
+    v-if="legalInformation"
+  >
+    <FSRow
+      align="center-left"
+      gap="4px"
+    >
+      <FSCheckbox
+        :label="$tr('ui.registration.i-have-read-and-understand', 'I have read and understand the')"
+        :rules="[ToggleRules.required()]"
+        :modelValue="$props.generalConditions"
+        @update:modelValue="$emit('update:generalConditions', $event)"
+      />
+      <FSButton
+        variant="icon"
+        :label="$tr('ui.registration.general-conditions-of-use', 'general conditions of use')"
+        :color="ColorEnum.Primary"
+        @click="downloadFile(legalInformation.generalConditionsId)"
+      />
+    </FSRow>
+    <FSRow
+      align="center-left"
+      gap="4px"
+    >
+      <FSCheckbox
+        :label="$tr('ui.registration.i-have-read-and-understand', 'I have read and understand the')"
+        :rules="[ToggleRules.required()]"
+        :modelValue="$props.privacyPolicy"
+        @update:modelValue="$emit('update:privacyPolicy', $event)"
+      />
+      <FSButton
+        variant="icon"
+        :label="$tr('ui.registration.privacy-policy', 'privacy policy')"
+        :color="ColorEnum.Primary"
+        @click="downloadFile(legalInformation.privacyPolicyId)"
+      />
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+
+import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
+import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
+import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
+import FSLoader from "@dative-gpi/foundation-shared-components/components/FSLoader.vue";
+
+import { useCurrentLegalInformation, useFiles } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorEnum, ToggleRules } from "@dative-gpi/foundation-shared-components/models";
+
+export default defineComponent({
+  name: "FSPoliciesValidationField",
+  components: {
+    FSCol,
+    FSRow,
+    FSCheckbox,
+    FSButton,
+    FSLoader
+  },
+  props: {
+    generalConditions: {
+      type: Boolean,
+      required: false
+    },
+    privacyPolicy: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: ["update:generalConditions", "update:privacyPolicy"],
+  setup() {
+    const { fetch: getLegalInformation, entity: legalInformation, fetching } = useCurrentLegalInformation();
+    const { downloadFile } = useFiles();
+
+    onMounted(() => {
+      getLegalInformation();
+    });
+
+    return {
+      legalInformation,
+      ToggleRules,
+      ColorEnum,
+      fetching,
+      downloadFile,
+    };
+  }
+});
+</script>

package/components/selects/chartSelectors/FSPlotPerSelector.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.plot-per','Plot per')"
+    :items="plotPerItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {PlotPer} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { plotPerLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<PlotPer>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const plotPerItems = computed(()=>{
+      return getEnumEntries(PlotPer).filter(f=>f.value != PlotPer.None).map((f)=>{
+        return {
+          id: f.value,
+          label: plotPerLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      plotPerItems
+    }
+  }
+})
+</script>

package/components/tiles/FSEntityCountBadge.vue

@@ -5,8 +5,7 @@
     <FSColor
       height="24px"
       :color="$props.color"
-      :border="$props.border"
-      :variant="$props.variant"
+      :border="false"
     >
       <FSRow
         align="center-center"
@@ -53,16 +52,6 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: () => ColorEnum.Primary
-    },
-    border: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    variant: {
-      type: String as PropType<"standard" | "full">,
-      required: false,
-      default: "standard"
     }
   },
   components: {

package/components/tiles/FSSimpleTileUI.vue

@@ -128,7 +128,7 @@ export default defineComponent({
       default: ColorEnum.Primary
     },
     bottomColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[] | null>,
+      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
       required: false,
       default: ColorEnum.Light
     },
@@ -147,7 +147,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
 
     const iconBackgroundColor = computed((): ColorBase | ColorBase[] => {
-      return props.iconBackgroundColor ?? ColorEnum.Background;
+      return props.iconBackgroundColor ? props.bottomColor : ColorEnum.Background;
     });
 
     const imageSize = computed((): number => {

package/composables/index.ts

@@ -3,6 +3,7 @@ export * from "./useAutocomplete";
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
+export * from "./useMagicFieldProvider";
 export * from "./useMapLayers";
 export * from "./useRules";
 export * from "./useSlots";

package/composables/useMagicFieldProvider.ts

@@ -0,0 +1,24 @@
+import { defineAsyncComponent } from "vue";
+
+import { MagicFieldType } from "../models/magicFields";
+
+const FIELDS = {
+  [MagicFieldType.NumberField]    : defineAsyncComponent(() => import("../components/fields/FSNumberField.vue")),
+  [MagicFieldType.TextField]      : defineAsyncComponent(() => import("../components/fields/FSTextField.vue")),
+  [MagicFieldType.Switch]         : defineAsyncComponent(() => import("../components/FSSwitch.vue")),
+  [MagicFieldType.DateTimeField]  : defineAsyncComponent(() => import("../components/fields/FSDateTimeField.vue")),
+  [MagicFieldType.IconField]      : defineAsyncComponent(() => import("../components/fields/FSIconField.vue")),
+  [MagicFieldType.TimeField]      : defineAsyncComponent(() => import("../components/fields/FSTimeField.vue")),
+  [MagicFieldType.TimeStepField]  : defineAsyncComponent(() => import("../components/fields/FSTimeStepField.vue")),
+  [MagicFieldType.PlotPerField]   : defineAsyncComponent(() => import("../components/selects/chartSelectors/FSPlotPerSelector.vue")),
+};
+
+export const useMagicFieldProvider = () => {
+  const get = (code: keyof typeof FIELDS) => {
+    return FIELDS[code];
+  };
+
+  return {
+    get
+  };
+};

package/models/index.ts

@@ -8,6 +8,7 @@ export * from "./errors";
 export * from "./grids";
 export * from "./images";
 export * from "./map";
+export * from "./magicFields";
 export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";

package/models/magicFields.ts

@@ -0,0 +1,11 @@
+export enum MagicFieldType {
+  None          = 0,
+  NumberField   = 1,
+  Switch        = 2,
+  TextField     = 3,
+  DateTimeField = 4,
+  IconField     = 5,
+  TimeField     = 6,
+  TimeStepField = 7,
+  PlotPerField  = 8,
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.168",
+  "version": "1.0.170",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.168",
-    "@dative-gpi/foundation-shared-services": "1.0.168"
+    "@dative-gpi/foundation-shared-domain": "1.0.170",
+    "@dative-gpi/foundation-shared-services": "1.0.170"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "979a5f1fe9ac68441c9fafb61eab835039852c69"
+  "gitHead": "e1e5651a8f58ade42899711614c266bdfee09a48"
 }

package/styles/components/fs_span.scss

@@ -27,4 +27,8 @@
 
 .fs-span-pre-wrap > span {
     white-space: pre-wrap;
+}
+
+.fs-span-word-break > span {
+    word-break: var(--fs-span-word-break);
 }

package/tools/chartsTools.ts

@@ -178,7 +178,6 @@ export const plotPerLabel = (plotper: PlotPer | number): string => {
     case PlotPer.Group: return $tr("ui.common.group", "Group");
     case PlotPer.Location: return $tr("ui.common.location", "Location");
     case PlotPer.Device: return $tr("ui.common.device", "Device");
-    case PlotPer.Grouping: return $tr("ui.plot-per.grouping", "Personalized");
     default: return $tr("ui.common.none", "None");
   }
 };

package/components/tiles/FSGroupingTileUI.vue

@@ -1,52 +0,0 @@
-<template>
-  <FSSimpleTileUI
-    :bottomColor="$props.bottomColor"
-    v-bind="$attrs"
-  >
-    <template
-      #append-info
-    >
-      <FSEntityCountBadge
-        :label="$tr('ui.common.subgroupings', 'Categories')"
-        :count="$props.subgroupingCount ?? 0"
-        :color="ColorEnum.Primary"
-      />
-    </template>
-  </FSSimpleTileUI>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-
-import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
-
-import FSEntityCountBadge from "./FSEntityCountBadge.vue";
-import FSSimpleTileUI from './FSSimpleTileUI.vue';
-
-export default defineComponent({
-  name: "FSGroupingTileUI",
-  components: {
-    FSSimpleTileUI,
-    FSEntityCountBadge
-  },
-  props: {
-    subgroupingCount: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    bottomColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[] | null>,
-      required: false,
-      default: null
-    },
-
-  },
-  setup() {
-    return {
-      ColorEnum,
-    };
-  }
-});
-</script>