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

package/components/FSTreeView.vue

@@ -0,0 +1,107 @@
+<template>
+  <template
+    v-if="$props.loading"
+  >
+    <FSCol>
+      <FSLoader
+        v-if="$props.loading"
+        width="100%"
+        :height="['40px', '36px']"
+      />
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
+    <v-treeview
+      :itemTitle="$props.itemTitle"
+      :itemValue="$props.itemValue"
+      :items="treeItems"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
+      </template>
+    </v-treeview>
+  </template>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+import { VTreeview } from "vuetify/labs/VTreeview";
+
+
+import FSLoader from "./FSLoader.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+  name: "FSTreeView",
+  components: {
+    VTreeview,
+    FSLoader,
+    FSCol,
+  },
+  props: {
+    items: {
+      type: Array as PropType<any[]>,
+      required: true
+    },
+    itemValue: {
+      type: String,
+      required: false,
+      default: "id"
+    },
+    itemTitle: {
+      type: String,
+      required: false,
+      default: "label"
+    },
+    itemParent: {
+      type: String,
+      required: false,
+      default: "parentId"
+    },
+    exclude: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+    const treeItems = computed((): any[] => {
+      const filter = ((parentId: string | null) => {
+        return props.items.filter((item: any) => {
+          if (props.exclude.includes(item[props.itemValue])) {
+            return false;
+          }
+          return item[props.itemParent] == parentId;
+        });
+      });
+      const process = ((item: any): any => {
+        if (props.items.some((child: any) => child[props.itemParent] === item[props.itemValue])) {
+          return {
+            ...item,
+            children: filter(item[props.itemValue]).map(process)
+          };
+        }
+        return item;
+      });
+      return filter(null).map(process);
+    });
+
+    return {
+      treeItems
+    };
+  }
+});
+</script>

package/components/carousels/FSCarousel.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-carousel
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </v-carousel>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "FSCarousel"
+});
+</script>

package/components/carousels/FSCarouselItem.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-carousel-item
+    v-bind="$attrs"
+  >
+    <slot/>
+  </v-carousel-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "FSCarouselItem"
+});
+</script>

package/components/fields/FSMapAddressField.vue

@@ -0,0 +1,187 @@
+<template>
+  <FSCol>
+    <FSMap
+      :lockZoomOnFlyTo="true"
+      v-model:center="center"
+      :enableScrollWheelZoom="true"
+      :showMyLocation="true"
+      :zoom="5"
+      v-model:currentLayer="mapLayer"
+      @click:latlng="(latlng: any) => onNewLatLng(latlng.lat, latlng.lng, false)"
+      v-bind="$attrs"
+    >
+      <FSMapMarker
+        v-if="actualLatitude && actualLongitude"
+        :label="$props.label"
+        :icon="$props.icon"
+        :latlng="{ lat: actualLatitude, lng: actualLongitude }"
+        :selected="true"
+      />
+    </FSMap>
+    <FSCol>
+      <FSAutoCompleteAddress
+        :maxWidth="null"
+        :modelValue="$props.modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+      />
+      <FSRow>
+        <FSNumberField
+          :label="$tr('ui.location.latitude', 'Latitude')"
+          :modelValue="actualLatitude"
+          :clearable="false"
+          :rules="[NumberRules.max(90), NumberRules.min(-90), NumberRules.required()]"
+          @update:modelValue="onNewLatLng($event, actualLongitude ?? 0, true)"
+        />
+        <FSNumberField
+          :label="$tr('ui.location.longitude', 'Longitude')"
+          :modelValue="actualLongitude"
+          :clearable="false"
+          :rules="[NumberRules.max(180), NumberRules.min(-180), NumberRules.required()]"
+          @update:modelValue="onNewLatLng(actualLatitude ?? 0, $event, true)"
+        />
+      </FSRow>
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+
+import type { Address } from "@dative-gpi/foundation-shared-domain";
+import { useAddress } from "@dative-gpi/foundation-shared-components/composables";
+import { MapLayers, NumberRules } from '@dative-gpi/foundation-shared-components/models';
+
+import FSAutoCompleteAddress from '@dative-gpi/foundation-shared-components/components/autocompletes/FSAutoCompleteAddress.vue';
+import FSNumberField from "@dative-gpi/foundation-shared-components/components/fields/FSNumberField.vue"
+import FSMapMarker from '@dative-gpi/foundation-shared-components/components/map/FSMapMarker.vue';
+import FSMap from "@dative-gpi/foundation-shared-components/components/map/FSMap.vue";
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+
+
+export function debounceAsync<T, U extends any[]>(
+  callback: (...args: U) => Promise<T>,
+  wait: number,
+): (...args: U) => Promise<T> {
+  let timeoutId: number | null = null;
+  let rejectPromise: (((reason?: any) => void) | null) = null;
+
+  return (...args: U) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    if (rejectPromise) {
+      rejectPromise("debounced");
+      rejectPromise = null;
+    }
+
+    return new Promise<T>((resolve) => {
+      const timeoutPromise = new Promise<void>((resolve, reject) => {
+        timeoutId = setTimeout(resolve, wait);
+        rejectPromise = reject;
+      });
+      timeoutPromise.then(async () => {
+        resolve(await callback(...args));
+      });
+    });
+  };
+}
+
+export default defineComponent({
+  name: "FSMapAddressField",
+  components: {
+    FSAutoCompleteAddress,
+    FSNumberField,
+    FSMapMarker,
+    FSMap,
+    FSRow,
+    FSCol
+  },
+  emits: ["update:modelValue"],
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: Object as PropType<Address | null>,
+      required: false,
+    }
+  },
+  setup(props, { emit }) {
+    const { reverseSearch } = useAddress();
+
+    const loading = ref(false);
+    const actualLatitude = ref<number | null>(null);
+    const actualLongitude = ref<number | null>(null);
+    const mapLayer = ref(MapLayers.Map);
+
+    const center = computed(() => {
+      return props.modelValue ? [props.modelValue.latitude, props.modelValue.longitude] : null;
+    });
+
+    const reverseSearchDebounced = debounceAsync(reverseSearch, 500);
+    
+    const onNewLatLng = async (lat: number|string, lng: number|string, debounced: boolean) => {
+      if(typeof lat === 'string') {
+        lat = parseFloat(lat);
+        if(isNaN(lat)) {
+          return;
+        }
+      }
+
+      if(typeof lng === 'string') {
+        lng = parseFloat(lng);
+        if(isNaN(lng)) {
+          return;
+        }
+      }
+
+      actualLatitude.value = lat;
+      actualLongitude.value = lng;
+
+      let fullAddress;
+      loading.value = true;
+      if(debounced) {
+        try {
+          fullAddress = await reverseSearchDebounced(lat, lng);
+        } catch {
+          return;
+        }
+      } else {
+        fullAddress = await reverseSearch(lat, lng);
+      }
+
+      emit("update:modelValue", {
+        ...fullAddress,
+        latitude: actualLatitude.value,
+        longitude: actualLongitude.value,
+      });
+      loading.value = false;
+    }
+
+    watch(() => props.modelValue, (newValue) => {
+      if(newValue) {
+        actualLatitude.value = newValue.latitude;
+        actualLongitude.value = newValue.longitude;
+      }
+    }, { immediate: true });
+
+    return {
+      center, 
+      mapLayer,
+      NumberRules,
+      actualLatitude,
+      actualLongitude,
+      onNewLatLng
+    };
+  }
+});
+
+
+</script>

package/components/fields/FSTreeViewField.vue

@@ -59,7 +59,7 @@
             <FSFadeOut
               :maxHeight="maxHeight"
             >
-              <v-treeview
+              <FSTreeView
                 :itemTitle="$props.itemTitle"
                 :itemValue="$props.itemValue"
                 :items="treeItems"
@@ -123,7 +123,7 @@
                 <template
                   #title
                 />
-              </v-treeview>
+              </FSTreeView>
             </FSFadeOut>
           </template>
         </FSDialogMenu>
@@ -168,7 +168,7 @@
               </template>
             </FSTextField>
           </template>
-          <v-treeview
+          <FSTreeView
             :itemTitle="$props.itemTitle"
             :itemValue="$props.itemValue"
             :items="treeItems"
@@ -232,7 +232,7 @@
             <template
               #title
             />
-          </v-treeview>
+          </FSTreeView>
         </FSMenu>
       </template>
     </FSCol>
@@ -241,7 +241,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
-import { VTreeview } from "vuetify/labs/VTreeview";
 
 import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -249,6 +248,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
 import FSCheckbox from "../FSCheckbox.vue";
+import FSTreeView from "../FSTreeView.vue";
 import FSFadeOut from "../FSFadeOut.vue";
 import FSLoader from "../FSLoader.vue";
 import FSRadio from "../FSRadio.vue";
@@ -259,7 +259,7 @@ import FSCol from "../FSCol.vue";
 export default defineComponent({
   name: "FSTreeViewField",
   components: {
-    VTreeview,
+    FSTreeView,
     FSDialogMenu,
     FSTextField,
     FSCheckbox,

package/components/tiles/FSEntityCountBadge.vue

@@ -5,7 +5,8 @@
     <FSColor
       height="24px"
       :color="$props.color"
-      :border="false"
+      :border="$props.border"
+      :variant="$props.variant"
     >
       <FSRow
         align="center-center"
@@ -52,6 +53,16 @@ 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/FSGroupingTileUI.vue

@@ -0,0 +1,52 @@
+<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>

package/components/tiles/FSSimpleTileUI.vue

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

package/composables/index.ts

@@ -3,7 +3,6 @@ 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/models/index.ts

@@ -8,7 +8,6 @@ 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/package.json

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

package/tools/chartsTools.ts

@@ -178,6 +178,7 @@ 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/fields/FSMagicConfigField.vue

@@ -1,171 +0,0 @@
-<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

@@ -1,198 +0,0 @@
-<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/selects/chartSelectors/FSPlotPerSelector.vue

@@ -1,52 +0,0 @@
-<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/composables/useMagicFieldProvider.ts

@@ -1,24 +0,0 @@
-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/magicFields.ts

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