@dative-gpi/foundation-shared-components 1.0.20 → 1.0.21

package/components/fields/FSTimeStepField.vue

@@ -0,0 +1,157 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSRow>
+      <FSNumberField
+        :validationValue="$props.modelValue"
+        :editable="$props.editable"
+        :validateOn="validateOn"
+        :rules="$props.rules"
+        :hideHeader="true"
+        :messages="messages"
+        :modelValue="$props.modelValue.value"
+        @update:modelValue="$emit('update:modelValue', { value: $event, unit: $props.modelValue.unit })"
+        v-bind="$attrs"
+      >
+        <template
+          v-for="(_, name) in numberSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSNumberField>
+      <FSSelectField
+        class="fs-time-field-select"
+        :editable="$props.editable"
+        :hideHeader="true"
+        :clearable="false"
+        :items="units"
+        :modelValue="$props.modelValue.unit"
+        @update:modelValue="$emit('update:modelValue', { value: $props.modelValue.value, unit: $event })"
+      >
+        <template
+          v-for="(_, name) in selectSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSSelectField>
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/models";
+
+import { useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { timeSteps } from "@dative-gpi/foundation-shared-components/utils";
+
+import FSNumberField from "./FSNumberField.vue";
+import FSSelectField from "./FSSelectField.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTimeStepField",
+  components: {
+    FSNumberField,
+    FSSelectField,
+    FSBaseField,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Object as PropType<{ value: number, unit: TimeUnit }>,
+      required: true
+    },
+    allowedUnits: {
+      type: Array as PropType<TimeUnit[]>,
+      required: false,
+      default: () => []
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { validateOn, getMessages } = useRules();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
+
+    const numberSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("number-")).reduce((acc, key) => {
+        acc[key.substring("number-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const selectSlots = computed((): any => {
+      return Object.keys(slots).filter(k => k.startsWith("select-")).reduce((acc, key) => {
+        acc[key.substring("select-".length)] = slots[key];
+        return acc;
+      }, {});
+    });
+
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
+    const units = computed(() => props.allowedUnits && props.allowedUnits.length ? timeSteps.filter(t => props.allowedUnits.includes(t.id)) : timeSteps);
+
+    return {
+      numberSlots,
+      selectSlots,
+      validateOn,
+      messages,
+      units
+    };
+  }
+});
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.20",
-    "@dative-gpi/foundation-shared-services": "1.0.20"
+    "@dative-gpi/foundation-shared-domain": "1.0.21",
+    "@dative-gpi/foundation-shared-services": "1.0.21"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "8d11e35dce254f87572cb2ba277deb2ef222bc19"
+  "gitHead": "fd3fc21e8eff1096d820f66cce0f2fe3556a2cd7"
 }

package/utils/time.ts

@@ -1,7 +1,22 @@
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
+import { TimeUnit } from "@dative-gpi/foundation-shared-domain/models"
+
 const { $tr } = useTranslationsProvider();
 
+export const timeSteps = [
+  { id: TimeUnit.Second,      label: $tr("ui.time-step.second.singular", "Second"), plural: $tr("ui.time-step.second.plural", "Seconds") },
+  { id: TimeUnit.Minute,      label: $tr("ui.time-step.minute.singular", "Minute"), plural: $tr("ui.time-step.minute.plural", "Minutes") },
+  { id: TimeUnit.Hour,        label: $tr("ui.time-step.hour.singular", "Hour"),     plural: $tr("ui.time-step.hour.plural", "Hours") },
+  { id: TimeUnit.Day,         label: $tr("ui.time-step.day.singular", "Day"),       plural: $tr("ui.time-step.day.plural", "Days") },
+  { id: TimeUnit.Week,        label: $tr("ui.time-step.week.singular", "Week"),     plural: $tr("ui.time-step.week.plural", "Weeks") },
+  { id: TimeUnit.Month,       label: $tr("ui.time-step.month.singular", "Month"),   plural: $tr("ui.time-step.month.plural", "Months") },
+  { id: TimeUnit.Year,        label: $tr("ui.time-step.year.singular", "Year"),     plural: $tr("ui.time-step.year.plural", "Years") },
+]
+
+
+
+// TODO : remove everything below this line
 export const timeScale: any[] = [
   { id: 1,      label: $tr("ui.time-field.second.singular", "Second"), plural: $tr("ui.time-field.second.plural", "Seconds") },
   { id: 60,     label: $tr("ui.time-field.minute.singular", "Minute"), plural: $tr("ui.time-field.minute.plural", "Minutes") },