@dative-gpi/foundation-shared-components 0.0.126 → 0.0.128

package/components/FSCheckbox.vue

@@ -10,7 +10,6 @@
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @click.prevent.stop="onToggle"
-      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template
@@ -122,7 +121,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -168,7 +167,6 @@ export default defineComponent({
     return {
       validateOn,
       messages,
-      blurred,
       style,
       icon,
       font,

package/components/FSForm.vue

@@ -22,7 +22,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"standard" | "lazy" | "submit">,
+      type: String as PropType<"standard" | "submit">,
       required: false,
       default: "submit"
     }
@@ -32,10 +32,9 @@ export default defineComponent({
     const formRef = ref<HTMLFormElement | null>(null);
     const submitted = ref(false);
 
-    const validateOn = computed((): "submit" | "blur" | "input"  => {
+    const validateOn = computed((): "submit" | "input"  => {
       switch (props.variant) {
         case "standard": return "input";
-        case "lazy":     return "blur";
         default:         return "submit";
       }
     });
@@ -72,10 +71,10 @@ export default defineComponent({
       validateOn,
       submitted,
       formRef,
-      reset,
-      validate,
+      resetValidation,
       onSubmit,
-      resetValidation
+      validate,
+      reset
     };
   }
 });

package/components/FSRadio.vue

@@ -9,7 +9,6 @@
       :validateOn="validateOn"
       :modelValue="$props.selected"
       @click.prevent.stop
-      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template
@@ -126,7 +125,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -174,7 +173,6 @@ export default defineComponent({
     return {
       validateOn,
       messages,
-      blurred,
       style,
       icon,
       font,

package/components/FSSwitch.vue

@@ -99,7 +99,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -150,7 +150,6 @@ export default defineComponent({
     return {
       validateOn,
       messages,
-      blurred,
       style,
       font,
       onToggle

package/components/FSToggleSet.vue

@@ -1,9 +1,7 @@
 <template>
   <v-input
     class="fs-toggle-set"
-    ref="inputRef"
     :modelValue="$props.modelValue"
-    :rules="$props.rules"
   >
     <FSWrapGroup
       v-if="['wrap'].includes($props.variant)"
@@ -97,8 +95,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { FSToggle } from "@dative-gpi/foundation-shared-components/models";
+import { ColorBase, ColorEnum, FSToggle } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";
@@ -157,11 +154,6 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    errorColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Error
-    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -172,11 +164,6 @@ export default defineComponent({
       required: false,
       default: "8px"
     },
-    rules: {
-      type: Array as PropType<any[]>,
-      required: false,
-      default: () => []
-    },
     multiple: {
       type: Boolean,
       required: false,
@@ -194,9 +181,8 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {
+  setup(props, { emit }) {    
     const toggleSetRef = ref(null);
-    const inputRef = ref(null);
 
     const getVariant = (value: FSToggle): "standard" | "full" | "icon" => {
       if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
@@ -215,9 +201,6 @@ export default defineComponent({
       if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
         return props.activeColor;
       }
-      if (inputRef.value && (inputRef.value as any).errorMessages.length) {
-        return props.errorColor;
-      }
       return props.buttonColor;
     };
 
@@ -302,7 +285,6 @@ export default defineComponent({
 
     return {
       toggleSetRef,
-      inputRef,
       getVariant,
       goToStart,
       getColor,

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -1,7 +1,6 @@
 <template>
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
-    :customFilter="customFilter"
     :multiple="$props.multiple"
     :loading="loading"
     :items="timeZones"
@@ -128,10 +127,6 @@ export default defineComponent({
       return getManyTimeZones({ ...props.timeZoneFilters, search: search ?? undefined });
     };
 
-    const customFilter = (_: any, search: string, item: any): boolean => {
-      return item.raw.id.toLowerCase().includes(search.toLowerCase());
-    };
-
     const { toggleSet, search, init, onUpdate } = useAutocomplete(
       timeZones,
       [() => props.timeZoneFilters],
@@ -147,7 +142,6 @@ export default defineComponent({
       toggleSet,
       loading,
       search,
-      customFilter,
       onUpdate
     };
   }

package/components/fields/FSAutocompleteField.vue

@@ -1,9 +1,19 @@
 <template>
-  <FSLoader
+  <template
     v-if="$props.loading"
-    width="100%"
-    :height="['40px', '36px']"
-  />
+  >
+    <FSCol>
+      <FSLoader
+        v-if="!$props.hideHeader"
+        variant="text-overline"
+      />
+      <FSLoader
+        v-if="$props.loading"
+        width="100%"
+        :height="['40px', '36px']"
+      />
+    </FSCol>
+  </template>
   <template
     v-else
   >
@@ -25,7 +35,6 @@
         :modelValue="mobileValue"
         @update:modelValue="$emit('update:modelValue', $event)"
         @click="openMobileOverlay"
-        @blur="blurred = true"
         v-bind="$attrs"
       >
         <template
@@ -123,7 +132,34 @@
     <template
       v-else
     >
+      <FSToggleField
+        v-if="$props.toggleSet"
+        :label="$props.label"
+        :description="$props.description"
+        :hideHeader="$props.hideHeader"
+        :items="$props.items"
+        :returnObject="$props.returnObject"
+        :required="$props.required"
+        :editable="$props.editable"
+        :multiple="$props.multiple"
+        :rules="$props.rules"
+        :validateOn="validateOn"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onUpdate"
+        v-bind="$attrs"
+      >
+        <template
+          v-for="(_, name) in toggleSetSlots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="`toggle-set-${name}`"
+            v-bind="slotData"
+          />
+        </template>
+      </FSToggleField>
       <FSBaseField
+        v-else
         :label="$props.label"
         :description="$props.description"
         :hideHeader="$props.hideHeader"
@@ -131,28 +167,7 @@
         :editable="$props.editable"
         :messages="messages"
       >
-        <FSToggleSet
-          v-if="$props.toggleSet"
-          variant="slide"
-          :values="$props.items"
-          :multiple="$props.multiple"
-          :rules="$props.rules"
-          :modelValue="$props.modelValue"
-          @update:modelValue="onUpdate"
-          v-bind="$attrs"
-        >
-          <template
-            v-for="(_, name) in toggleSetSlots"
-            v-slot:[name]="slotData"
-          >
-            <slot
-              :name="`toggle-set-${name}`"
-              v-bind="slotData"
-            />
-          </template>
-        </FSToggleSet>
         <v-autocomplete
-          v-else
           class="fs-autocomplete-field"
           variant="outlined"
           :menuIcon="null"
@@ -167,7 +182,6 @@
           :itemTitle="$props.itemTitle"
           :itemValue="$props.itemValue"
           :readonly="!$props.editable"
-          :loading="$props.loading"
           :clearable="$props.clearable && $props.editable && !!$props.modelValue"
           :returnObject="$props.returnObject"
           :rules="$props.rules"
@@ -175,7 +189,6 @@
           :modelValue="$props.modelValue"
           @update:modelValue="onUpdate"
           @click="onClick"
-          @blur="blurred = true"
           v-model:search="search"
           v-bind="$attrs"
         >
@@ -285,9 +298,9 @@ import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/found
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSearchField from "./FSSearchField.vue";
+import FSToggleField from "./FSToggleField.vue";
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSRadioGroup from "../FSRadioGroup.vue";
-import FSToggleSet from "../FSToggleSet.vue";
 import FSBaseField from "./FSBaseField.vue";
 import FSTextField from "./FSTextField.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -302,9 +315,9 @@ export default defineComponent({
   name: "FSAutocompleteField",
   components: {
     FSSearchField,
+    FSToggleField,
     FSDialogMenu,
     FSRadioGroup,
-    FSToggleSet,
     FSBaseField,
     FSTextField,
     FSCheckbox,
@@ -399,7 +412,7 @@ export default defineComponent({
   emits: ["update:modelValue", "update:search"],
   setup: (props, { emit }) => {
     const { isExtraSmall, isMobileSized } = useBreakpoints();
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -537,26 +550,59 @@ export default defineComponent({
       dialog.value = true;
     };
 
-    const onRadioChange = (value: any) => {
-      emit("update:modelValue", value);
+    const onRadioChange = (value: string | null) => {
+      if (props.returnObject) {
+        emit("update:modelValue", props.items.find((item: any) => item[props.itemValue] === value) ?? null);
+      }
+      else {
+        emit("update:modelValue", value);
+      }
       dialog.value = false;
     };
 
-    const onCheckboxChange = (value: any) => {
-      if (Array.isArray(props.modelValue)) {
-        if (props.modelValue.includes(value)) {
-          emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
+    const onCheckboxChange = (value: string) => {
+      if (props.returnObject) {
+        const item = props.items.find(item => item[props.itemValue] === value);
+        if (Array.isArray(props.modelValue)) {
+          if (props.modelValue.find(item => item[props.itemValue] === value)) {
+            emit("update:modelValue", props.modelValue.filter((item: any) => item[props.itemValue] !== value));
+          }
+          else {
+            if (item) {
+              emit("update:modelValue", [...props.modelValue, item]);
+            }
+          }
         }
         else {
-          emit("update:modelValue", [...props.modelValue, value]);
+          if (props.modelValue) {
+            if (props.modelValue[props.itemValue] === value) {
+              emit("update:modelValue", []);
+            }
+            else {
+              emit("update:modelValue", [props.modelValue, item]);
+            }
+          }
+          else {
+            emit("update:modelValue", [item]);
+          }
         }
       }
       else {
-        if (props.modelValue === value) {
-          emit("update:modelValue", []);
+        if (Array.isArray(props.modelValue)) {
+          if (props.modelValue.includes(value)) {
+            emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
+          }
+          else {
+            emit("update:modelValue", [...props.modelValue, value]);
+          }
         }
         else {
-          emit("update:modelValue", [props.modelValue, value]);
+          if (props.modelValue === value) {
+            emit("update:modelValue", []);
+          }
+          else {
+            emit("update:modelValue", [props.modelValue, value]);
+          }
         }
       }
     };
@@ -586,7 +632,6 @@ export default defineComponent({
       ColorEnum,
       listStyle,
       messages,
-      blurred,
       classes,
       dialog,
       height,

package/components/fields/FSDateField.vue

@@ -19,7 +19,6 @@
         :modelValue="epochToLongDateFormat($props.modelValue)"
         @update:modelValue="onClear"
         @click="openMobileOverlay"
-        @blur="blurred = true"
       >
         <template
           #prepend-inner
@@ -95,7 +94,6 @@
             :validationValue="$props.modelValue"
             :modelValue="epochToLongDateFormat($props.modelValue)"
             @update:modelValue="onClear"
-            @blur="blurred = true"
             v-bind="props"
           >
             <template
@@ -151,7 +149,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useBreakpoints, useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
@@ -216,31 +214,14 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages} = useRules();
     const { epochToLongDateFormat } = useAppTimeZone();
+    const { validateOn, getMessages} = useRules();
     const { isExtraSmall } = useBreakpoints();
-    const { getColors } = useColors();
 
     const dialog = ref(false);
     const menu = ref(false);
     const innerDate = ref<number | null>(props.modelValue);
 
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (!props.editable) {
-        return {
-          "--fs-date-field-color": lights.dark
-        };
-      }
-      return {
-        "--fs-date-field-color"      : darks.base,
-        "--fs-date-field-error-color": errors.base
-      };
-    });
-
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
@@ -267,9 +248,7 @@ export default defineComponent({
       ColorEnum,
       innerDate,
       messages,
-      blurred,
       dialog,
-      style,
       menu,
       epochToLongDateFormat,
       openMobileOverlay,

package/components/fields/FSDateRangeField.vue

@@ -15,7 +15,6 @@
     :modelValue="toShortDateFormat"
     @click="onClick"
     @update:modelValue="onClear"
-    @blur="blurred = true"
   >
     <template
       #prepend-inner
@@ -61,9 +60,9 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
@@ -122,29 +121,12 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { epochToShortDateFormat } = useAppTimeZone();
-    const { getColors } = useColors();
-
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
 
     const dialog = ref(false);
     const innerDateRange = ref<number[] | null>(props.modelValue);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (!props.editable) {
-        return {
-          "--fs-date-field-color": lights.dark
-        };
-      }
-      return {
-        "--fs-date-field-color"      : darks.base,
-        "--fs-date-field-error-color": errors.base
-      };
-    });
-
     const toShortDateFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
@@ -171,14 +153,12 @@ export default defineComponent({
     };
 
     return {
-      ColorEnum,
+      toShortDateFormat,
+      innerDateRange,
       validateOn,
+      ColorEnum,
       messages,
-      blurred,
-      style,
       dialog,
-      toShortDateFormat,
-      innerDateRange,
       onClick,
       onClear,
       onSubmit

package/components/fields/FSDateTimeField.vue

@@ -19,7 +19,6 @@
         :modelValue="epochToLongTimeFormat($props.modelValue)"
         @update:modelValue="onClear"
         @click="openMobileOverlay"
-        @blur="blurred = true"
       >
         <template
           #prepend-inner
@@ -115,7 +114,6 @@
             :validationValue="$props.modelValue"
             :modelValue="epochToLongTimeFormat($props.modelValue)"
             @update:modelValue="onClear"
-            @blur="blurred = true"
             v-bind="props"
           >
             <template
@@ -197,7 +195,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from "vue";
 
-import { useBreakpoints, useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
@@ -267,9 +265,8 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToLongTimeFormat } = useAppTimeZone();
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
-    const { getColors } = useColors();
 
     const dialog = ref(false);
     const menu = ref(false);
@@ -277,10 +274,6 @@ export default defineComponent({
     const innerDate = ref<number | null>(null);
     const innerTime = ref(0);
 
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-
     if (props.modelValue) {
       // FSClock just gives two numbers without consideration for the time zone
       // We must adjust the time to the user's time zone
@@ -288,18 +281,6 @@ export default defineComponent({
       innerDate.value = props.modelValue - innerTime.value;
     }
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (!props.editable) {
-        return {
-          "--fs-date-field-color": lights.dark
-        };
-      }
-      return {
-        "--fs-date-field-color"      : darks.base,
-        "--fs-date-field-error-color": errors.base
-      };
-    });
-
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
     const openMobileOverlay = () => {
@@ -334,9 +315,7 @@ export default defineComponent({
       innerDate,
       innerTime,
       messages,
-      blurred,
       dialog,
-      style,
       menu,
       tabs,
       epochToLongTimeFormat,

package/components/fields/FSDateTimeRangeField.vue

@@ -15,7 +15,6 @@
     :modelValue="toShortTimeFormat"
     @click="onClick"
     @update:modelValue="onClear"
-    @blur="blurred = true"
   >
     <template
       #prepend-inner
@@ -79,9 +78,9 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSDialogSubmit from "../FSDialogSubmit.vue";
 import FSCalendarTwin from "../FSCalendarTwin.vue";
@@ -147,12 +146,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToShortTimeFormat } = useAppTimeZone();
-    const { validateOn, blurred, getMessages } = useRules();
-    const { getColors } = useColors();
-
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
+    const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
     const innerDateRange = ref<number[] | null>(null);
@@ -180,18 +174,6 @@ export default defineComponent({
       }
     }
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (!props.editable) {
-        return {
-          "--fs-date-field-color": lights.dark
-        };
-      }
-      return {
-        "--fs-date-field-color"      : darks.base,
-        "--fs-date-field-error-color": errors.base
-      };
-    });
-
     const toShortTimeFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
@@ -236,21 +218,19 @@ export default defineComponent({
     };
 
     return {
-      ColorEnum,
-      validateOn,
-      messages,
-      blurred,
-      style,
-      dialog,
       toShortTimeFormat,
       innerDateLeft,
       innerTimeLeft,
       innerDateRight,
       innerTimeRight,
       innerDateRange,
-      onClick,
+      validateOn,
+      ColorEnum,
+      messages,
+      dialog,
+      onSubmit,
       onClear,
-      onSubmit
+      onClick
     };
   }
 });

package/components/fields/FSIconField.vue

@@ -10,7 +10,6 @@
       :messages="messages"
       :validateOn="validateOn"
       :validationValue="$props.modelValue"
-      @blur="blurred = true"
       v-model="innerValue"
       v-bind="$attrs"
     >
@@ -125,7 +124,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -201,7 +200,6 @@ export default defineComponent({
       innerValue,
       validateOn,
       messages,
-      blurred,
       style,
       icons
     };

package/components/fields/FSSelectField.vue

@@ -18,7 +18,6 @@
         :modelValue="mobileValue"
         @update:modelValue="$emit('update:modelValue', $event)"
         @click="openMobileOverlay"
-        @blur="blurred = true"
         v-bind="$attrs"
       >
         <template
@@ -140,7 +139,6 @@
           :multiple="$props.multiple"
           :modelValue="$props.modelValue"
           @update:modelValue="$emit('update:modelValue', $event)"
-          @blur="blurred = true"
           v-bind="$attrs"
         >
           <template
@@ -346,7 +344,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
 
@@ -450,26 +448,59 @@ export default defineComponent({
       dialog.value = true;
     };
 
-    const onRadioChange = (value: any) => {
-      emit('update:modelValue', value);
+    const onRadioChange = (value: string | null) => {
+      if (props.returnObject) {
+        emit("update:modelValue", props.items.find((item: any) => item[props.itemValue] === value) ?? null);
+      }
+      else {
+        emit("update:modelValue", value);
+      }
       dialog.value = false;
     };
 
-    const onCheckboxChange = (value: any) => {
-      if (Array.isArray(props.modelValue)) {
-        if (props.modelValue.includes(value)) {
-          emit('update:modelValue', props.modelValue.filter((item: any) => item !== value));
+    const onCheckboxChange = (value: string) => {
+      if (props.returnObject) {
+        const item = props.items.find(item => item[props.itemValue] === value);
+        if (Array.isArray(props.modelValue)) {
+          if (props.modelValue.find(item => item[props.itemValue] === value)) {
+            emit("update:modelValue", props.modelValue.filter((item: any) => item[props.itemValue] !== value));
+          }
+          else {
+            if (item) {
+              emit("update:modelValue", [...props.modelValue, item]);
+            }
+          }
         }
         else {
-          emit('update:modelValue', [...props.modelValue, value]);
+          if (props.modelValue) {
+            if (props.modelValue[props.itemValue] === value) {
+              emit("update:modelValue", []);
+            }
+            else {
+              emit("update:modelValue", [props.modelValue, item]);
+            }
+          }
+          else {
+            emit("update:modelValue", [item]);
+          }
         }
       }
       else {
-        if (props.modelValue === value) {
-          emit('update:modelValue', []);
+        if (Array.isArray(props.modelValue)) {
+          if (props.modelValue.includes(value)) {
+            emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
+          }
+          else {
+            emit("update:modelValue", [...props.modelValue, value]);
+          }
         }
         else {
-          emit('update:modelValue', [props.modelValue, value]);
+          if (props.modelValue === value) {
+            emit("update:modelValue", []);
+          }
+          else {
+            emit("update:modelValue", [props.modelValue, value]);
+          }
         }
       }
     };
@@ -482,7 +513,6 @@ export default defineComponent({
       ColorEnum,
       listStyle,
       messages,
-      blurred,
       dialog,
       height,
       style,

package/components/fields/FSTagField.vue

@@ -11,7 +11,6 @@
       :validateOn="validateOn"
       :validationValue="$props.modelValue"
       @keydown.enter="onAdd"
-      @blur="blurred = true"
       v-model="innerValue"
       v-bind="$attrs"
     >
@@ -118,7 +117,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const {validateOn, blurred, getMessages} = useRules();
+    const {validateOn, getMessages} = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -171,7 +170,6 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       messages,
-      blurred,
       style,
       onRemove,
       onAdd

package/components/fields/FSTextArea.vue

@@ -23,7 +23,6 @@
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @update:modelValue="$emit('update:modelValue', $event)"
-      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template
@@ -128,7 +127,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
@@ -185,7 +184,6 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       messages,
-      blurred,
       classes,
       style
     };

package/components/fields/FSTextField.vue

@@ -20,7 +20,6 @@
       :validateOn="validateOn"
       :modelValue="$props.modelValue"
       @update:modelValue="$emit('update:modelValue', $event)"
-      @blur="blurred = true"
       v-bind="$attrs"
     >
       <template
@@ -116,7 +115,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -147,7 +146,6 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       messages,
-      blurred,
       style
     };
   }

package/components/fields/FSTimeField.vue

@@ -106,7 +106,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
 
     const errors = getColors(ColorEnum.Error);
@@ -163,7 +163,6 @@ export default defineComponent({
       innerTime,
       timeScale,
       messages,
-      blurred,
       style,
       onSubmitTimeScale,
       onSubmitValue

package/components/fields/FSToggleField.vue

@@ -0,0 +1,148 @@
+<template>
+  <FSBaseField
+    :label="$props.label"
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :messages="messages"
+  >
+    <FSToggleSet
+      variant="slide"
+      :buttonColor="buttonColor"
+      :values="$props.items"
+      :multiple="$props.multiple"
+      :required="$props.required"
+      :editable="$props.editable"
+      :modelValue="$props.modelValue"
+      @update:modelValue="onUpdate"
+      v-bind="$attrs"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
+      </template>
+    </FSToggleSet>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useRules } from "../../composables";
+import { ColorEnum } from "../../models";
+
+import FSToggleSet from "../FSToggleSet.vue";
+import FSBaseField from "./FSBaseField.vue";
+
+export default defineComponent({
+  name: "FSTextField",
+  components: {
+    FSBaseField,
+    FSToggleSet
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    items: {
+      type: Array as PropType<any[]>,
+      required: true
+    },
+    itemValue: {
+      type: String,
+      required: false,
+      default: "id"
+    },
+    itemTitle: {
+      type: String,
+      required: false,
+      default: "label"
+    },
+    modelValue: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    returnObject: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { forceErrors, getMessages } = useRules();
+
+    const updated = ref(false);
+
+    const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
+
+    const buttonColor = computed((): ColorEnum => {
+      if (forceErrors(messages.value.length, updated.value)) {
+        return ColorEnum.Error;
+      }
+      return ColorEnum.Light;
+    });
+
+    const onUpdate = (value: string[] | string | null) => {
+      updated.value = true;
+      if (props.returnObject) {
+        if (Array.isArray(value)) {
+          emit("update:modelValue", props.items.filter((item: any) => value.includes(item[props.itemValue])));
+        }
+        else {
+          emit("update:modelValue", props.items.find((item: any) => item[props.itemValue] === value) ?? null);
+        }
+      }
+      else {
+        emit("update:modelValue", value);
+      }
+    };
+
+    return {
+      buttonColor,
+      ColorEnum,
+      messages,
+      onUpdate
+    };
+  }
+});
+</script>

package/components/lists/FSDataTableUI.vue

@@ -110,20 +110,20 @@
       <v-data-table
         v-if="!isExtraSmall"
         :selectStrategy="$props.singleSelect ? 'single' : 'all'"
-        :itemValue="$props.itemValue"
-        :showSelect="$props.showSelect"
-        :headers="extraHeaders.concat(innerHeaders)"
         :groupBy="$props.groupBy ? [$props.groupBy] : []"
+        :headers="extraHeaders.concat(innerHeaders)"
         :sortBy="innerSortBy ? [innerSortBy] : []"
-        :items="innerItems"
+        :itemsPerPage="innerRowsPerPage"
+        :showSelect="$props.showSelect"
+        :hover="!$props.sortDraggable"
+        :itemValue="$props.itemValue"
+        :rowProps="rowProps"
         :fixedHeader="true"
+        :items="innerItems"
         :multiSort="false"
-        :hover="!$props.sortDraggable"
-        :style="style"
-        :row-props="rowProps"
-        :class="classes"
         :page="innerPage"
-        :itemsPerPage="innerRowsPerPage"
+        :class="classes"
+        :style="style"
         :modelValue="$props.modelValue"
         @auxclick:row="onClickLibrary.row"
         @click:row="onClickLibrary.row"
@@ -404,9 +404,9 @@
       <v-data-iterator
         v-else
         class="fs-data-table-iterator"
+        :itemsPerPage="innerRowsPerPage"
         :items="innerItems"
         :page="innerPage"
-        :itemsPerPage="innerRowsPerPage"
       >
         <template
           #default="{ items }"
@@ -644,7 +644,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, Ref, Slot, watch } from "vue";
+import { computed, defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, Ref, Slot, watch } from "vue";
 import { useRouter } from "vue-router";
 
 import { ColorEnum, FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
@@ -1110,9 +1110,6 @@ export default defineComponent({
     const toggleFilter = (header: string, value: FSDataTableFilter[]): void => {
       filters.value[header] = value;
       emit("update:filters", filters.value);
-      // If a filter is hidden, the associated filter is reseted
-      resetable.value = Object.keys(filters.value)
-        .some((key) => filters.value[key].some((filter) => filter.hidden));
     };
 
     const resetFilter = (): void => {
@@ -1120,7 +1117,6 @@ export default defineComponent({
         filters.value[key] = filters.value[key].map((filter) => ({ ...filter, hidden: false }));
       }
       emit("update:filters", filters.value);
-      resetable.value = false;
     };
 
     const filterSlot = (header: FSDataTableColumn): string => {
@@ -1136,8 +1132,6 @@ export default defineComponent({
             innerColumn.hidden = value as boolean;
             if (value && filters.value[header.value!]) {
               filters.value[header.value!] = filters.value[header.value!].map((filter) => ({ ...filter, hidden: false }));
-              resetable.value = Object.keys(filters.value)
-                .some((key) => filters.value[key].some((filter) => filter.hidden));
               emit("update:filters", filters.value);
             }
             break;
@@ -1432,6 +1426,11 @@ export default defineComponent({
       innerPage.value = 1;
     });
 
+    watch(filters, () => {
+      resetable.value = Object.keys(filters.value)
+        .some((key) => filters.value[key].some((filter) => filter.hidden));
+    }, { deep: true });
+
     watch(innerMode, () => {
       emit("update:mode", innerMode.value);
       size.value = props.sizeIterator;
@@ -1450,8 +1449,18 @@ export default defineComponent({
       emit("update:rowsPerPage", innerRowsPerPage.value);
     });
 
-    watch([() => props.headers, () => props.items], () => {
+    watch(() => props.headers, () => {
+      computeFilters();
+    });
+
+    watch(() => props.items, async () => {
       computeFilters();
+      if (innerPage.value !== 1) {
+        const formerPage = innerPage.value;
+        innerPage.value = 1;
+        await nextTick();
+        innerPage.value = formerPage;
+      }
     });
 
     return {

package/composables/useRules.ts

@@ -1,19 +1,26 @@
 import { Ref, computed, inject, ref } from "vue";
 
 export const useRules = () => {
-  const innerValidateOn = inject<Ref<"submit" | "blur" | "input">>("validateOn", ref('input'));
+  const innerValidateOn = inject<Ref<"submit" | "input">>("validateOn", ref('input'));
   const submitted = inject<Ref<boolean>>("submitted", ref(false));
 
-  const blurred = ref(false);
-
-  const validateOn = computed((): "input" | "submit" | "blur" => {
+  const validateOn = computed((): "input" | "submit" => {
     switch (innerValidateOn.value) {
       case "submit": return submitted.value ? "input" : "submit";
-      case "blur":   return blurred.value ? "input" : "blur";
       case "input":  return "input";
     }
   });
 
+  const forceErrors = (messagesLength: number, updated: boolean): boolean => {
+    if (messagesLength <= 0) {
+      return false;
+    }
+    switch (innerValidateOn.value) {
+      case "submit": return submitted.value;
+      case "input":  return submitted.value || updated;
+    }
+  }
+
   const getMessages = (modelValue: any, rules: any[], checkArray: boolean = false): string[] => {
     if (!rules || !rules.length) {
       return [];
@@ -24,11 +31,6 @@ export const useRules = () => {
           return [];
         }
         break;
-      case "blur":
-        if (!blurred.value) {
-          return [];
-        }
-        break;
       case "input":
         break;
     }
@@ -69,7 +71,7 @@ export const useRules = () => {
 
   return {
     validateOn,
-    blurred,
+    forceErrors,
     getMessages
   };
 }

package/models/rules.ts

@@ -13,7 +13,7 @@ export const TextRules = {
     min: (min: number, message: string | undefined = undefined) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
     max: (max: number, message: string | undefined = undefined) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
     email: (message: string | undefined = undefined) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
-    phone: (message: string | undefined = undefined) => (value: string) => /^[+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
+    phone: (message: string | undefined = undefined) => (value: string) => /^[+]?([0-9]+[ -]?){7,}$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
     digit: (message: string | undefined = undefined) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
     uppercase: (message: string | undefined = undefined) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
     lowercase: (message: string | undefined = undefined) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.126",
+  "version": "0.0.128",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.126",
-    "@dative-gpi/foundation-shared-services": "0.0.126",
+    "@dative-gpi/foundation-shared-domain": "0.0.128",
+    "@dative-gpi/foundation-shared-services": "0.0.128",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "f82b3f9604201db4e53ee4c03e6344fc289eb35f"
+  "gitHead": "29d087178fe21c8c415df60c4466755789860cbb"
 }