@dative-gpi/foundation-shared-components 0.0.12 → 0.0.13

package/components/{FSTextArea.vue → fields/FSTextArea.vue}

@@ -36,17 +36,19 @@
     <v-textarea
       clearIcon="mdi-close"
       variant="outlined"
-      hide-details
       :style="style"
       :class="classes"
       :rows="$props.rows"
-      :rules="$props.rules"
+      :hideDetails="true"
       :noResize="!$props.resize"
       :autoGrow="$props.autoGrow"
       :readonly="!$props.editable"
-      :clearable="$props.editable"
+      :clearable="$props.editable && !!$props.modelValue"
+      :rules="$props.rules"
+      :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
@@ -69,12 +71,12 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors, useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSpan from "./FSSpan.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTextArea",
@@ -83,7 +85,6 @@ export default defineComponent({
     FSCol,
     FSRow
   },
-  inheritAttrs: false,
   props: {
     label: {
       type: String,
@@ -100,11 +101,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     rows: {
       type: Number,
       required: false,
@@ -125,11 +121,21 @@ export default defineComponent({
       required: false,
       default: false
     },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     rules: {
       type: Array as PropType<Function[]>,
       required: false,
       default: () => []
     },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -138,6 +144,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { validateOn, blurred, getMessages } = useRules();
     const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
@@ -181,17 +188,6 @@ export default defineComponent({
       };
     });
 
-    const messages = computed(() => {
-      const messages = [];
-      for (const rule of props.rules) {
-        const message = rule(props.modelValue);
-        if (typeof(message) === "string") {
-          messages.push(message);
-        }
-      }
-      return messages;
-    });
-
     const classes = computed((): string[] => {
       const classNames = ["fs-text-area"];
       if (props.autoGrow) {
@@ -200,8 +196,12 @@ export default defineComponent({
       return classNames;
     });
 
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
     return {
+      validateOn,
       messages,
+      blurred,
       style,
       classes
     };

package/components/{FSTextField.vue → fields/FSTextField.vue}

@@ -35,14 +35,16 @@
       class="fs-text-field"
       clearIcon="mdi-close"
       variant="outlined"
-      hide-details
       :style="style"
       :type="$props.type"
-      :rules="$props.rules"
+      :hideDetails="true"
       :readonly="!$props.editable"
-      :clearable="$props.editable"
+      :clearable="$props.editable && !!$props.modelValue"
+      :rules="$props.rules"
+      :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template v-for="(_, name) in slots" v-slot:[name]="slotData">
@@ -65,12 +67,12 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSpan from "./FSSpan.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTextField",
@@ -79,7 +81,6 @@ export default defineComponent({
     FSCol,
     FSRow
   },
-  inheritAttrs: false,
   props: {
     label: {
       type: String,
@@ -116,6 +117,11 @@ export default defineComponent({
       required: false,
       default: () => []
     },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -124,6 +130,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { validateOn, blurred, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -153,19 +160,12 @@ export default defineComponent({
       };
     });
 
-    const messages = computed((): string[] => {
-      const messages = [];
-      for (const rule of props.rules) {
-        const message = rule(props.modelValue ?? "");
-        if (typeof(message) === "string") {
-          messages.push(message);
-        }
-      }
-      return messages;
-    });
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     return {
+      validateOn,
       messages,
+      blurred,
       slots,
       style
     };

package/components/fields/FSTimeField.vue

@@ -0,0 +1,104 @@
+<template>
+  <FSNumberField
+    class="fs-time-field"
+    :editable="$props.editable"
+    :modelValue="innerTime"
+    @update:modelValue="onSubmitValue"
+    v-bind="$attrs"
+  >
+    <template #append> 
+      <FSSelectField
+        class="fs-time-field-select"
+        :editable="$props.editable"
+        :hideHeader="true"
+        :clearable="false"
+        :items="timeScale"
+        :modelValue="selectedUnit.id"
+        @update:modelValue="onSubmitTimeScale"
+      />
+    </template>
+  </FSNumberField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from "vue";
+
+import { getTimeScaleIndex, timeScale } from "@dative-gpi/foundation-shared-components/utils";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSNumberField from "./FSNumberField.vue";
+import FSSelectField from "./FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSTimeField",
+  components: {
+    FSNumberField,
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const innerTime = ref(props.modelValue);
+    const selectedUnit = ref(timeScale[0]);
+
+    if (getTimeScaleIndex(props.modelValue) !== 0) {
+      selectedUnit.value = timeScale[getTimeScaleIndex(props.modelValue)];
+      innerTime.value = props.modelValue / selectedUnit.value.id;
+    }
+
+    const errors = useColors().getColors(ColorEnum.Error);
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-time-field-cursor"             : "default",
+          "--fs-time-field-border-color"       : lights.base,
+          "--fs-time-field-color"              : lights.dark,
+          "--fs-time-field-active-border-color": lights.base
+        };
+      }
+      return {
+        "--fs-time-field-cursor"             : "text",
+        "--fs-time-field-border-color"       : lights.dark,
+        "--fs-time-field-color"              : darks.base,
+        "--fs-time-field-active-border-color": darks.dark,
+        "--fs-time-field-error-color"        : errors.base,
+        "--fs-time-field-error-border-color" : errors.base
+      };
+    });
+
+    const onSubmitValue = (value: number): void => {
+      innerTime.value = value;
+      emit("update:modelValue", innerTime.value * selectedUnit.value.id);
+    };
+
+    const onSubmitTimeScale = (value: number): void => {
+      selectedUnit.value = timeScale.find((item) => item.id === value);
+      emit("update:modelValue", innerTime.value * selectedUnit.value.id);
+    };
+
+    return {
+      style,
+      innerTime,
+      selectedUnit,
+      timeScale,
+      onSubmitValue,
+      onSubmitTimeScale,
+    };
+  }
+});
+</script>

package/components/fields/FSTimeSlotField.vue

@@ -0,0 +1,263 @@
+<template>
+  <FSCol>
+    <slot v-if="!$props.hideHeader" name="label">
+      <FSRow :wrap="false">
+        <FSSpan
+          v-if="$props.label"
+          class="fs-time-slot-field-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-time-slot-field-label"
+          style="margin-left: -8px;"
+          font="text-overline"
+          :ellipsis="false"
+          :style="style"
+        >
+          *
+        </FSSpan>
+        <v-spacer style="min-width: 40px;" />
+        <FSSpan
+          v-if="messages.length > 0"
+          class="fs-time-slot-field-messages"
+          font="text-overline"
+          :style="style"
+        >
+          {{ messages.join(", ") }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <FSRow>
+      <FSSelectField
+        class="fs-time-slot-field-select"
+        :editable="$props.editable"
+        :items="daysObject"
+        :hideHeader="true"
+        :clearable="false"
+        :style="style"
+        :modelValue="dayStart"
+        @update:modelValue="onChangeDayStart"
+      >
+        <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+        <template #append>
+          <FSClock
+            class="fs-time-slot-field-number"
+            :editable="$props.editable"
+            :color="ColorEnum.Light"
+            :reminder="false"
+            :slider="false"
+            :style="style"
+            :modelValue="$props.modelValue[0][1]"
+            @update:modelValue="onChangeHourStart"
+          />
+        </template>
+      </FSSelectField>
+      <FSSelectField
+        class="fs-time-slot-field-select"
+        :editable="$props.editable"
+        :items="daysObject"
+        :hideHeader="true"
+        :clearable="false"
+        :style="style"
+        :modelValue="dayEnd"
+        @update:modelValue="onChangeDayEnd"
+      >
+        <template #append>
+          <FSClock
+            class="fs-time-slot-field-number"
+            :editable="$props.editable"
+            :color="ColorEnum.Light"
+            :reminder="false"
+            :slider="false"
+            :style="style"
+            :modelValue="$props.modelValue[1][1]"
+            @update:modelValue="onChangeHourEnd"
+          />
+        </template>
+      </FSSelectField>
+    </FSRow>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-time-slot-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { Days } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSSelectField from "./FSSelectField.vue";
+import FSClock from "../FSClock.vue";
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTimeSlotField",
+  components: {
+    FSSelectField,
+    FSClock,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<number[][]>,
+      required: true,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<Function[]>,
+      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, { emit }) {
+    const { validateOn, blurred, getMessages } = useRules();
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
+
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+    
+    const daysObject: { id: number; label: string }[]  = Object.keys(Days).reduce((acc, key) => {
+      if(isNaN(Number(key))){
+        acc.push({
+          id: Days[key],
+          label: key
+        });
+      }
+      return acc;
+    }, []);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-time-slot-field-cursor"             : "default",
+          "--fs-time-slot-field-border-color"       : lights.base,
+          "--fs-time-slot-field-color"              : lights.dark,
+          "--fs-time-slot-field-active-border-color": lights.base
+        };
+      }
+      return {
+        "--fs-time-slot-field-cursor"             : "text",
+        "--fs-time-slot-field-border-color"       : lights.dark,
+        "--fs-time-slot-field-color"              : darks.base,
+        "--fs-time-slot-field-active-border-color": darks.dark,
+        "--fs-time-slot-field-error-color"        : errors.base,
+        "--fs-time-slot-field-error-border-color" : errors.base
+      };
+    });
+
+    const dayStart = computed((): number => {
+      return props.modelValue[1][0] === 7 ? 7 : props.modelValue[0][0];
+    });
+
+    const dayEnd = computed((): number => {
+      return props.modelValue[0][0] === 7 ? 7 : props.modelValue[1][0];
+    });
+
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
+
+    const onChangeDayStart = (value: number) => {
+      if (value === 7) {
+        emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
+        return;
+      }
+      if (props.modelValue[1][0] === 7) {
+        emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
+        return;
+      }
+      emit("update:modelValue", [[value, props.modelValue[0][1]], props.modelValue[1]]);
+    };
+
+    const onChangeHourStart = (value: number) => {
+      emit("update:modelValue", [[props.modelValue[0][0], value], props.modelValue[1]]);
+    };
+
+    const onChangeDayEnd = (value: number) => {
+      if (value === 7) {
+        emit("update:modelValue", [[7, props.modelValue[0][1]], [7, props.modelValue[1][1]]]);
+        return;
+      }
+      if (props.modelValue[0][0] === 7) {
+        emit("update:modelValue", [[value, props.modelValue[0][1]], [value, props.modelValue[1][1]]]);
+        return;
+      }
+      emit("update:modelValue", [props.modelValue[0], [value, props.modelValue[1][1]]]);
+    };
+
+    const onChangeHourEnd = (value: number) => {
+      emit("update:modelValue", [props.modelValue[0], [props.modelValue[1][0], value]]);
+    };
+
+    return {
+      ColorEnum,
+      daysObject,
+      dayStart,
+      dayEnd,
+      validateOn,
+      messages,
+      blurred,
+      slots,
+      style,
+      onChangeDayStart,
+      onChangeHourStart,
+      onChangeDayEnd,
+      onChangeHourEnd
+    };
+  }
+});
+</script>

package/components/lists/FSDataTableUI.vue

@@ -415,11 +415,11 @@ import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shar
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSDataIteratorItem from "./FSDataIteratorItem.vue";
+import FSSearchField from "../fields/FSSearchField.vue";
+import FSSelectField from "../fields/FSSelectField.vue";
 import FSFilterButton from "./FSFilterButton.vue";
 import FSHiddenButton from "./FSHiddenButton.vue";
 import FSHeaderButton from "./FSHeaderButton.vue";
-import FSSearchField from "../FSSearchField.vue";
-import FSSelectField from "../FSSelectField.vue";
 import FSContainer from "../FSContainer.vue";
 import FSToggleSet from "../FSToggleSet.vue";
 import FSCheckbox from "../FSCheckbox.vue";

package/components/lists/FSFilterButton.vue

@@ -73,7 +73,7 @@ import { computed, defineComponent, PropType, ref } from "vue";
 import { ColorBase, ColorEnum, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import FSSearchField from "../FSSearchField.vue";
+import FSSearchField from "../fields/FSSearchField.vue";
 import FSFadeOut from "../FSFadeOut.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -13,7 +13,7 @@
         align="center-center"
         gap="24px"
         :wrap="false"
-        :height="infoHeight"
+        :height="imageSize"
       >
         <FSCol
           gap="12px"
@@ -205,16 +205,12 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): string => {
+    const infoWidth = computed((): number => {
       let width = isMobileSized.value ? 288 : 304;
       if (props.imageId) {
         width -= imageSize.value;
       }
-      return `${width}px`;
-    });
-
-    const infoHeight = computed((): string => {
-      return `${imageSize.value}px`;
+      return width;
     });
 
     return {
@@ -224,8 +220,7 @@ export default defineComponent({
       carouselModelStatuses,
       carouselDeviceStatuses,
       imageSize,
-      infoWidth,
-      infoHeight
+      infoWidth
     };
   }
 });

package/components/tiles/FSGroupTileUI.vue

@@ -13,7 +13,7 @@
         align="center-center"
         gap="24px"
         :wrap="false"
-        :height="infoHeight"
+        :height="imageSize"
       >
         <FSCol
           gap="12px"
@@ -167,16 +167,12 @@ export default defineComponent({
       return isMobileSized.value ? 90 : 100;
     });
 
-    const infoWidth = computed((): string => {
+    const infoWidth = computed((): number => {
       let width = isMobileSized.value ? 288 : 304;
       if (props.imageId) {
         width -= imageSize.value;
       }
-      return `${width}px`;
-    });
-
-    const infoHeight = computed((): string => {
-      return `${imageSize.value}px`;
+      return width;
     });
 
     return {
@@ -184,8 +180,7 @@ export default defineComponent({
       groupsLabel,
       deviceOrganisationsLabel,
       imageSize,
-      infoWidth,
-      infoHeight
+      infoWidth
     };
   }
 });

package/composables/index.ts

@@ -1,4 +1,5 @@
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
+export * from "./useRules";
 export * from "./useSlots";