@dative-gpi/foundation-shared-components 1.0.22 → 1.0.23

package/components/fields/FSMagicConfigField.vue

@@ -40,7 +40,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { DateRules, IconRules, NumberRules, TextRules, TimeRules } from "../../models";
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules } from "../../models";
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
 
@@ -100,6 +100,8 @@ export default defineComponent({
           return [IconRules.required()];
         case MagicFieldType.TimeField:
           return [TimeRules.required()];
+        case MagicFieldType.TimeStepField:
+          return [TimeStepRules.required()];
       }
       return [];
     });

package/components/fields/FSMagicField.vue

@@ -66,7 +66,7 @@ import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composabl
 
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
-import { getTimeBestString } from "../../utils";
+import { getTimeBestString, timeStepToString } from "../../utils";
 
 import FSSelectField from "./FSSelectField.vue";
 import FSIcon from "../FSIcon.vue";
@@ -149,6 +149,8 @@ export default defineComponent({
           return epochToShortTimeFormat(value);
         case MagicFieldType.TimeField:
           return getTimeBestString(value);
+        case MagicFieldType.TimeStepField:
+          return timeStepToString(value);
         default:
           return value;
       }
@@ -166,6 +168,7 @@ export default defineComponent({
           }
           emit("update:modelValue", value.toString());
           break;
+        case MagicFieldType.TimeStepField:
         default:
           emit("update:modelValue", value);
           break;

package/components/fields/FSTimeStepField.vue

@@ -15,8 +15,8 @@
         :rules="$props.rules"
         :hideHeader="true"
         :messages="messages"
-        :modelValue="$props.modelValue.value"
-        @update:modelValue="$emit('update:modelValue', { value: $event, unit: $props.modelValue.unit })"
+        :modelValue="$props.modelValue && $props.modelValue.value || 0"
+        @update:modelValue="$emit('update:modelValue', { value: $event, unit: $props.modelValue && $props.modelValue.unit || units[0].id })"
         v-bind="$attrs"
       >
         <template
@@ -35,8 +35,8 @@
         :hideHeader="true"
         :clearable="false"
         :items="units"
-        :modelValue="$props.modelValue.unit"
-        @update:modelValue="$emit('update:modelValue', { value: $props.modelValue.value, unit: $event })"
+        :modelValue="$props.modelValue && $props.modelValue.unit || units[0].id"
+        @update:modelValue="$emit('update:modelValue', { value: $props.modelValue && $props.modelValue.value || 0, unit: $event })"
       >
         <template
           v-for="(_, name) in selectSlots"
@@ -85,7 +85,7 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: Object as PropType<{ value: number, unit: TimeUnit }>,
+      type: Object as PropType<{ value: number, unit: TimeUnit } | null>,
       required: true
     },
     allowedUnits: {

package/composables/useMagicFieldProvider.ts

@@ -3,12 +3,13 @@ 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.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")),
 };
 
 export const useMagicFieldProvider = () => {

package/models/magicFields.ts

@@ -6,4 +6,5 @@ export enum MagicFieldType {
   DateTimeField = 4,
   IconField     = 5,
   TimeField     = 6,
+  TimeStepField = 7,
 }

package/models/rules.ts

@@ -3,6 +3,7 @@ import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composabl
 import { validateExpression } from "@dative-gpi/foundation-shared-domain/tools";
 
 import { getTimeBestString } from "../utils";
+import type { TimeUnit } from "@/shared/foundation-shared-domain";
 
 const { epochToLongDateFormat } = useAppTimeZone()!;
 const { $tr } = useTranslationsProvider();
@@ -65,6 +66,10 @@ export const TimeRules = {
     max: (max: number, message: string | undefined = undefined) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
 };
 
+export const TimeStepRules = {
+    required: (message: string | undefined = undefined) => (value: { value: number, unit: TimeUnit } | null) => (!!value && value.value !== 0) || (message ?? $tr("ui.rules.required", "Required")),
+}
+
 export const ToggleRules = {
     required: (message: string | undefined = undefined) => (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": "1.0.22",
+  "version": "1.0.23",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.22",
-    "@dative-gpi/foundation-shared-services": "1.0.22"
+    "@dative-gpi/foundation-shared-domain": "1.0.23",
+    "@dative-gpi/foundation-shared-services": "1.0.23"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "21879f2f17123f2f50adccafeae5fe773584e0c2"
+  "gitHead": "8e55646ddbc288420407b5a2f423a32699fb5459"
 }

package/utils/time.ts

@@ -14,7 +14,18 @@ export const timeSteps = [
   { id: TimeUnit.Year,        label: $tr("ui.time-step.year.singular", "Year"),     plural: $tr("ui.time-step.year.plural", "Years") },
 ]
 
+export const timeStepToString = (value: { value: number, unit: TimeUnit } | null): string => {
+  if (!value) {
+    return "";
+  }
 
+  const unit = timeSteps.find(step => step.id === value.unit);
+  if (!unit) {
+    return "";
+  }
+  
+  return `${value.value} ${value.value === 1 ? unit.label.toLowerCase() : unit.plural.toLowerCase()}`;
+}
 
 // TODO : remove everything below this line
 export const timeScale: any[] = [