@dative-gpi/foundation-shared-components 1.0.33 → 1.0.35

package/components/fields/FSAutocompleteTag.vue

@@ -0,0 +1,100 @@
+<template>
+  <FSAutocompleteField
+    :placeholder="innerPlaceholder"
+    :items="innerItems"
+    :showSearch="true"
+    :multiple="true"
+    :modelValue="modelValue?.map(m => m.id)"
+    @update:modelValue="onUpdateModelValue"
+    @add:item="onAddItem"
+    @keydown="onKeydown"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+
+import { useTranslations as useTranslationsProvider, uuidv4 } from "@dative-gpi/bones-ui";
+
+import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props:{
+    placeholder: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    items: {
+      type: Array as PropType<{id: string, label: string, isCustom: boolean}[]>,
+      required: false,
+      default: () => []
+    },
+    modelValue: {
+      type: Array as PropType<{id: string, label: string, isCustom: boolean}[] | null>,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, {emit}) {
+    const { $tr } = useTranslationsProvider();
+
+    const tagValues = ref<{id : string, label : string, isCustom : boolean}[]>([]);
+
+    const innerItems = computed(() => props.items.concat(tagValues.value));
+
+    const innerPlaceholder = computed((): string | null => {
+      if (!props.modelValue || props.modelValue.length === 0) {
+        return null;
+      }
+      return props.placeholder ?? $tr("ui.autocomplete-tag.items-selected", "{0} item(s) selected", props.modelValue?.length ?? 0);
+    });
+
+    const onUpdateModelValue = (value: string[] | null): void => {
+      emit("update:modelValue", value?.map((v) => innerItems.value.find((i) => i.id === v)));
+    };
+
+    const onAddItem = (value: string): void => {
+      emit("update:modelValue", [
+        ...props.modelValue ?? [],
+        { id: uuidv4(), label: value, isCustom: true }
+      ]);
+    };
+
+    const onKeydown = (event: KeyboardEvent): void => {
+      if (event.key === "Backspace") {
+        emit("update:modelValue", [...props.modelValue ?? []]);
+      }
+    };
+
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue) {
+        tagValues.value = props.modelValue?.filter(m=>m.isCustom) ?? [];
+      }
+    }, {immediate: true});
+
+    return {
+      innerPlaceholder,
+      innerItems,
+      onUpdateModelValue,
+      onAddItem,
+      onKeydown
+    };
+  }
+});
+</script>

package/components/fields/FSSelectField.vue

@@ -61,7 +61,7 @@
           #body
         >
           <FSFadeOut
-            :height="height"
+            :maxHeight="maxHeight"
           >
             <FSCol
               v-if="$props.multiple"
@@ -377,7 +377,7 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
       return `calc(100vh - 40px - ${other}px)`;
     });
@@ -477,9 +477,9 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       listStyle,
+      maxHeight,
       messages,
       dialog,
-      height,
       style,
       openMobileOverlay,
       onCheckboxChange,

package/components/fields/FSTextField.vue

@@ -52,13 +52,17 @@
       <template
         #clear
       >
-        <FSButton
-          v-if="$props.clearable && $props.editable && !!$props.modelValue"
-          icon="mdi-close"
-          variant="icon"
-          :color="ColorEnum.Dark"
-          @click="$emit('update:modelValue', null)"
-        />
+        <slot
+          name="clear"
+        >
+          <FSButton
+            v-if="$props.clearable && $props.editable && !!$props.modelValue"
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', null)"
+          />
+        </slot>
       </template>
     </v-text-field>
   </FSBaseField>

package/components/fields/FSTreeViewField.vue

@@ -57,7 +57,7 @@
             #body
           >
             <FSFadeOut
-              :height="height"
+              :maxHeight="maxHeight"
             >
               <v-treeview
                 :itemTitle="$props.itemTitle"
@@ -381,7 +381,7 @@ export default defineComponent({
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
       return `calc(100vh - 40px - ${other}px)`;
     });
@@ -501,11 +501,11 @@ export default defineComponent({
       innerValue,
       fieldSlots,
       validateOn,
+      maxHeight,
       menuSlots,
       treeItems,
       messages,
       dialog,
-      height,
       style,
       menu,
       openMobileOverlay,

package/components/fields/periodicField/FSPeriodicDailyField.vue

@@ -80,24 +80,31 @@ export default defineComponent({
 
     const selectedConfiguration = ref("custom");
 
-    const days = computed(() => {
-      return +props.modelValue[2].replace("*/", "");
+    const days = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[2].replace("*/", "")))) {
+        return 0
+      }
+      return parseInt(props.modelValue[2].replace("*/", ""));
     });
-    const time = computed(() => {
-      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    const onUpdateDays = (value: number) => {
+    const onUpdateDays = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `*/${value}`, "*", "*"]);
-    }
+    };
 
-    const onUpdateHours = (value: number) => {
+    const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `*/${days.value}`, "*", "*"]);
-    }
+    };
 
     return {
       availableConfigurations,
@@ -107,7 +114,7 @@ export default defineComponent({
       time,
       onUpdateHours,
       onUpdateDays
-    }
+    };
   }
-})
+});
 </script>

package/components/fields/periodicField/FSPeriodicMonthlyField.vue

@@ -134,39 +134,53 @@ export default defineComponent({
 
     const selectedConfiguration = ref(props.modelValue[4] !== "*" ? "customDayWeek" : "customDayNumber");
 
-    const dayNumber = computed(() => 
-      props.modelValue[4] !== "*" ? 1 : +props.modelValue[2]
-    );
+    const dayNumber = computed((): number => {
+      if (props.modelValue[4] !== "*" || isNaN(parseInt(props.modelValue[2]))) {
+        return 1;
+      }
+      return parseInt(props.modelValue[2]);
+    });
 
-    const dayWeek = computed(() => 
-      props.modelValue[4] === "*" ? 0 : +props.modelValue[4] - 1
-    );
+    const dayWeek = computed((): number => {
+      if (props.modelValue[4] !== "*" || isNaN(parseInt(props.modelValue[4]))) {
+        return 0;
+      }
+      return parseInt(props.modelValue[4]) - 1;
+    });
 
-    const dayWeekNumber = computed(() => 
-      props.modelValue[2].includes("-") ? Math.floor(+props.modelValue[2].split("-")[1] / 7) : 1
-    );
+    const dayWeekNumber = computed((): number => {
+      if (!props.modelValue[2].includes("-") || isNaN(parseInt(props.modelValue[2].split("-")[1]))) {
+        return 1;
+      }
+      return Math.floor(parseInt(props.modelValue[2].split("-")[1]) / 7);
+    });
 
-    const time = computed(() => (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60);
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
+    });
 
-    const onUpdateDayNumber = (value: number) => {
+    const onUpdateDayNumber = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `*`, `*`]);
     };
 
-    const onUpdateDayWeekNumber = (value: number) => {
+    const onUpdateDayWeekNumber = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${(value - 1) * 7 + 1}-${value * 7}`, `*`, `${dayWeek.value + 1}`]);
     };
 
-    const onUpdateDayWeek = (value: number) => {
+    const onUpdateDayWeek = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${(dayWeekNumber.value - 1) * 7 + 1}-${dayWeekNumber.value * 7}`, `*`, `${value + 1}`]);
     };
 
-    const onUpdateHours = (value: number) => {
+    const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       if (selectedConfiguration.value === "customDayNumber") {
@@ -177,7 +191,7 @@ export default defineComponent({
       }
     };
 
-    watch(() => selectedConfiguration.value, (value: string) => {
+    watch(() => selectedConfiguration.value, (value: string): void => {
       const hours = Math.floor(time.value / (60 * 60 * 1000));
       const minutes = Math.floor(time.value / (60 * 1000) % 60);
       if(value === "customDayNumber") {

package/components/fields/periodicField/FSPeriodicWeeklyField.vue

@@ -79,22 +79,28 @@ export default defineComponent({
     ];
 
     const selectedConfiguration = ref("custom");
-    
-    const day = computed(() => {
-      return +props.modelValue[4] - 1;
+
+    const day = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[4]))) {
+        return 0;
+      }
+      return parseInt(props.modelValue[4]) - 1;
     });
 
-    const time = computed(() => {
-      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    const onUpdateDay = (value: number) => {
+    const onUpdateDay = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${value + 1}`]);
     };
 
-    const onUpdateHours = (value: number) => {
+    const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${day.value + 1}`]);

package/components/fields/periodicField/FSPeriodicYearlyField.vue

@@ -88,32 +88,41 @@ export default defineComponent({
     ];
 
     const selectedConfiguration = ref("custom");
-    
-    const day = computed(() => {
-      return +props.modelValue[2];
+
+    const day = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[2]))) {
+        return 0;
+      }
+      return parseInt(props.modelValue[2]);
     });
 
-    const month = computed(() => {
-      return +props.modelValue[3] - 1;
+    const month = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[3]))) {
+        return 0;
+      }
+      return parseInt(props.modelValue[3]) - 1;
     });
 
-    const time = computed(() => {
-      return (+props.modelValue[1] * 60 + +props.modelValue[0]) * 1000 * 60;
+    const time = computed((): number => {
+      if (isNaN(parseInt(props.modelValue[0])) || isNaN(parseInt(props.modelValue[1]))) {
+        return 0;
+      }
+      return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    const onUpdateDay = (value: number) => {
+    const onUpdateDay = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value + 1}`, "*"]);
     };
 
-    const onUpdateHours = (value: number) => {
+    const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value + 1}`, "*"]);
     };
 
-    const onUpdateMonth = (value: number) => {
+    const onUpdateMonth = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
       emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value + 1}`, "*"]);

package/components/lists/FSFilterButton.vue

@@ -7,10 +7,10 @@
       #activator="{ props }"
     >
       <FSChip
+        prependIcon="mdi-filter-variant"
         class="fs-filter-button"
         variant="standard"
-        prependIcon="mdi-filter-variant"
-        :height="[30, 24]"
+        :height="['30px', '24px']"
         :color="ColorEnum.Dark"
         :editable="true"
         :label="label"
@@ -23,12 +23,12 @@
       :border="false"
     >
       <FSCol
-        gap="12px"
         padding="16px 0 24px 16px"
+        gap="12px"
       >
         <FSCol
-          gap="12px"
           padding="0 16px 0 0"
+          gap="12px"
         >
           <FSSpan
             font="text-overline"
@@ -37,11 +37,11 @@
           </FSSpan>
           <FSChip
             class="fs-filter-button-chip"
-            :height="[30, 24]"
-            :editable="true"
-            :color="$props.color"
-            :variant="getAllVariant()"
             :label="$tr('ui.data-table.all-values', 'All values')"
+            :height="['30px', '24px']"
+            :variant="getAllVariant()"
+            :color="$props.color"
+            :editable="true"
             @click="onToggleAll"
           />
           <FSDivider
@@ -55,7 +55,7 @@
         </FSCol>
         <FSFadeOut
           padding="0 8px 0 0"
-          height="360px"
+          maxHeight="360px"
         >
           <FSCol
             gap="6px"
@@ -63,12 +63,12 @@
             <FSChip
               v-for="(filter, index) in searchedFilters"
               class="fs-filter-button-chip"
-              :height="[30, 24]"
-              :key="index"
-              :editable="true"
-              :label="filter.text"
-              :color="$props.color"
               :variant="getVariant(filter)"
+              :height="['30px', '24px']"
+              :color="$props.color"
+              :label="filter.text"
+              :editable="true"
+              :key="index"
               @click="() => onToggle(filter)"
             >
               <template
@@ -89,8 +89,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import type { ColorBase, FSDataTableColumn, FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -195,15 +194,15 @@ export default defineComponent({
 
     return {
       searchedFilters,
+      singlePick,
       ColorEnum,
       expanded,
       search,
       label,
-      singlePick,
-      getVariant,
       getAllVariant,
-      onToggle,
-      onToggleAll
+      onToggleAll,
+      getVariant,
+      onToggle
     };
   }
 });

package/components/lists/FSHiddenButton.vue

@@ -21,12 +21,12 @@
       :border="false"
     >
       <FSCol
-        gap="12px"
         padding="16px 0px 24px 16px"
+        gap="12px"
       >
         <FSCol
-          gap="12px"
           padding="0 16px 0 0"
+          gap="12px"
         >
           <FSSpan
             font="text-overline"
@@ -36,7 +36,7 @@
         </FSCol>
         <FSFadeOut
           padding="0 8px 0 0"
-          height="360px"
+          maxHeight="360px"
         >
           <FSCol
             gap="6px"
@@ -44,12 +44,12 @@
             <FSChip
               v-for="(header, index) in $props.headers"
               class="fs-hidden-button-chip"
-              :height="[30, 24]"
-              :key="index"
-              :editable="true"
-              :label="header.text"
-              :color="$props.color"
               variant="full"
+              :height="['30px', '24px']"
+              :color="$props.color"
+              :label="header.text"
+              :editable="true"
+              :key="index"
               @click="$emit('update:show', header)"
             >
             </FSChip>
@@ -61,11 +61,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent, ref } from "vue";
+import { defineComponent, type PropType, ref } from "vue";
 
-import type { ColorBase, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";