@dative-gpi/foundation-shared-components 0.0.83 → 0.0.84

package/components/FSDialogForm.vue

@@ -32,6 +32,7 @@
       #body
     >
       <FSForm
+        ref="formRef"
         :variant="$props.variant"
         @submit="onSubmit"
         v-model="valid"
@@ -198,6 +199,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
+    const formRef = ref<HTMLElement | null>(null);
     const valid = ref(false);
 
     const height = computed(() => {
@@ -227,6 +229,7 @@ export default defineComponent({
       cancelButtonLabel,
       submitButtonLabel,
       ColorEnum,
+      formRef,
       height,
       valid,
       onSubmit

package/components/FSForm.vue

@@ -36,7 +36,7 @@ export default defineComponent({
       switch (props.variant) {
         case "standard": return "input";
         case "lazy":     return "blur";
-        case "submit":   return "submit";
+        default:         return "submit";
       }
     });
 

package/components/FSToggleSet.vue

@@ -1,86 +1,109 @@
 <template>
-  <FSWrapGroup
-    v-if="['wrap'].includes($props.variant)"
-    ref="toggleSetRef"
-    :padding="$props.padding"
-    :gap="$props.gap"
+  <v-input
+    class="fs-toggle-set"
+    ref="inputRef"
+    :modelValue="$props.modelValue"
+    :rules="$props.rules"
   >
-    <template v-if="$props.values.length">
-      <template v-if="!firstChild">
-        <FSButton
-          v-for="(item, index) in $props.values"
-          :prependIcon="item.prependIcon"
-          :appendIcon="item.appendIcon"
-          :editable="$props.editable"
-          :variant="getVariant(item)"
-          :color="getColor(item)"
-          :class="getClass(item)"
-          :label="item.label"
-          :icon="item.icon"
-          :key="index"
-          @click="toggle(item)"
-        />
+    <FSWrapGroup
+      v-if="['wrap'].includes($props.variant)"
+      ref="toggleSetRef"
+      :padding="$props.padding"
+      :gap="$props.gap"
+    >
+      <template
+        v-if="$props.values.length"
+      >
+        <template
+          v-if="!firstChild"
+        >
+          <FSButton
+            v-for="(item, index) in $props.values"
+            :prependIcon="item.prependIcon"
+            :appendIcon="item.appendIcon"
+            :editable="$props.editable"
+            :variant="getVariant(item)"
+            :color="getColor(item)"
+            :class="getClass(item)"
+            :label="item.label"
+            :icon="item.icon"
+            :key="index"
+            @click="toggle(item)"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <component
+            v-for="(item, index) in $props.values"
+            :key="index"
+            :is="firstChild"
+            :prependIcon="getFromFirstChild('prependIcon', item)"
+            :appendIcon="getFromFirstChild('appendIcon', item)"
+            :variant="getFromFirstChild('variant', item)"
+            :color="getFromFirstChild('color', item)"
+            :class="getFromFirstChild('class', item)"
+            :label="getFromFirstChild('label', item)"
+            :icon="getFromFirstChild('icon', item)"
+            :editable="$props.editable"
+            @click="toggle(item)"
+          />
+        </template>
       </template>
-      <template v-else>
-        <component
-          v-for="(item, index) in $props.values"
-          :key="index"
-          :is="firstChild"
-          :prependIcon="getFromFirstChild('prependIcon', item)"
-          :appendIcon="getFromFirstChild('appendIcon', item)"
-          :variant="getFromFirstChild('variant', item)"
-          :color="getFromFirstChild('color', item)"
-          :class="getFromFirstChild('class', item)"
-          :label="getFromFirstChild('label', item)"
-          :icon="getFromFirstChild('icon', item)"
-          :editable="$props.editable"
-          @click="toggle(item)"
-        />
+      <slot
+        v-else
+      />
+    </FSWrapGroup>
+    <FSSlideGroup
+      v-else
+      ref="toggleSetRef"
+      :padding="$props.padding"
+      :gap="$props.gap"
+    >
+      <template
+        v-if="$props.values.length"
+      >
+        <template
+          v-if="!firstChild"
+        >
+          <FSButton
+            v-for="(item, index) in $props.values"
+            :prependIcon="item.prependIcon"
+            :appendIcon="item.appendIcon"
+            :editable="$props.editable"
+            :variant="getVariant(item)"
+            :color="getColor(item)"
+            :class="getClass(item)"
+            :label="item.label"
+            :icon="item.icon"
+            :key="index"
+            @click="toggle(item)"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <component
+            v-for="(item, index) in $props.values"
+            :key="index"
+            :is="firstChild"
+            :prependIcon="getFromFirstChild('prependIcon', item)"
+            :appendIcon="getFromFirstChild('appendIcon', item)"
+            :variant="getFromFirstChild('variant', item)"
+            :color="getFromFirstChild('color', item)"
+            :class="getFromFirstChild('class', item)"
+            :label="getFromFirstChild('label', item)"
+            :icon="getFromFirstChild('icon', item)"
+            :editable="$props.editable"
+            @click="toggle(item)"
+          />
+        </template>
       </template>
-    </template>
-    <slot v-else />
-  </FSWrapGroup>
-  <FSSlideGroup
-    v-else
-    ref="toggleSetRef"
-    :padding="$props.padding"
-    :gap="$props.gap"
-  >
-    <template v-if="$props.values.length">
-      <template v-if="!firstChild">
-        <FSButton
-          v-for="(item, index) in $props.values"
-          :prependIcon="item.prependIcon"
-          :appendIcon="item.appendIcon"
-          :editable="$props.editable"
-          :variant="getVariant(item)"
-          :color="getColor(item)"
-          :class="getClass(item)"
-          :label="item.label"
-          :icon="item.icon"
-          :key="index"
-          @click="toggle(item)"
-        />
-      </template>
-      <template v-else>
-        <component
-          v-for="(item, index) in $props.values"
-          :key="index"
-          :is="firstChild"
-          :prependIcon="getFromFirstChild('prependIcon', item)"
-          :appendIcon="getFromFirstChild('appendIcon', item)"
-          :variant="getFromFirstChild('variant', item)"
-          :color="getFromFirstChild('color', item)"
-          :class="getFromFirstChild('class', item)"
-          :label="getFromFirstChild('label', item)"
-          :icon="getFromFirstChild('icon', item)"
-          :editable="$props.editable"
-          @click="toggle(item)"
-        />
-      </template>
-    </template>
-    <slot v-else />
-  </FSSlideGroup>
+      <slot
+        v-else
+      />
+    </FSSlideGroup>
+  </v-input>
 </template>
 
 <script lang="ts">
@@ -88,7 +111,7 @@ import { defineComponent, PropType, ref } from "vue";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
+import { FSToggle } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";
@@ -157,6 +180,11 @@ export default defineComponent({
       required: false,
       default: "8px"
     },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -176,9 +204,10 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getFirstChild } = useSlots();
-
+    
     const firstChild = getFirstChild("item");
-
+    
+    const inputRef = ref(null);
     const toggleSetRef = ref(null);
 
     const getFromFirstChild = (prop: string, value: FSToggle): any => {
@@ -264,11 +293,23 @@ export default defineComponent({
       else {
         if (props.modelValue === value.id) {
           if (!props.required) {
+            if (props.multiple) {
+              emit("update:modelValue", []);
+              return;
+            }
             emit("update:modelValue", null);
             return;
           }
         }
         else {
+          if (props.multiple) {
+            if (props.modelValue) {
+              emit("update:modelValue", [props.modelValue, value.id]);
+              return;
+            }
+            emit("update:modelValue", [value.id]);
+            return;
+          }
           emit("update:modelValue", value.id);
           return;
         }
@@ -288,6 +329,7 @@ export default defineComponent({
     };
 
     return {
+      inputRef,
       toggleSetRef,
       firstChild,
       getFromFirstChild,

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -0,0 +1,122 @@
+<template>
+  <FSAutocompleteField
+    :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :loading="loading"
+    :items="languages"
+    :modelValue="$props.modelValue"
+    @update:modelValue="onUpdate"
+    v-model:search="search"
+    v-bind="$attrs"
+  >
+    <template
+      #selection="{ item }"
+    >
+      <FSRow
+        align="center-center"
+      >
+        <FSIcon>
+          {{ item.raw.icon }}
+        </FSIcon>
+        <FSSpan>
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
+    </template>
+    <template
+      #item="{ props, item }"
+    >
+      <v-list-item
+        v-bind="{ ...props, title: '' }"
+      >
+        <FSRow
+          align="center-left"
+        >
+          <FSCheckbox
+            v-if="$props.multiple"
+            :modelValue="isSelected(item.value)"
+          />
+          <FSIcon>
+            {{ item.raw.icon }}
+          </FSIcon>
+          <FSSpan>
+            {{ item.raw.label }}
+          </FSSpan>
+        </FSRow>
+      </v-list-item>
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+import { computed, PropType, defineComponent } from "vue"
+
+import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
+import { LanguageFilters } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSCheckbox from "../FSCheckbox.vue"
+import FSAutocompleteField from "../fields/FSAutocompleteField.vue"
+
+export default defineComponent({
+  name: "FSAutocompleteLanguage",
+  components: {
+    FSAutocompleteField,
+    FSCheckbox
+  },
+  props: {
+    languageFilters: {
+      type: Object as PropType<LanguageFilters>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleSetDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getMany: getManyLanguages, fetching: fetchingLanguages, entities: languages } = useLanguages();
+
+    const innerFetch = (search: string | null) => {
+      return getManyLanguages({ ...props.languageFilters, search: search ?? undefined });
+    };
+
+    const { toggleSet, search, init, onUpdate } = useAutocomplete(
+      languages,
+      [() => props.languageFilters],
+      emit,
+      innerFetch
+    );
+
+    const isSelected = (id: any) => {
+      return props.modelValue?.includes(id);
+    }
+
+    const loading = computed((): boolean => {
+      return init.value && fetchingLanguages.value;
+    });
+
+    return {
+      languages,
+      toggleSet,
+      loading,
+      search,
+      isSelected,
+      onUpdate
+    };
+  }
+})
+</script>

package/components/autocompletes/FSAutocompleteOrganisation.vue

@@ -0,0 +1,43 @@
+<template>
+  <FSAutocompleteField 
+    :loading="fetching"
+    :items="organisations"
+    v-bind="$attrs" />
+</template>
+<script lang="ts">
+import { PropType, defineComponent, watch } from 'vue'
+import _ from 'lodash';
+
+import { OrganisationFilters } from '@dative-gpi/foundation-shared-domain/models';
+import { useOrganisations } from '@dative-gpi/foundation-shared-services/composables';
+
+import FSAutocompleteField from '../fields/FSAutocompleteField.vue'
+
+export default defineComponent({
+  name: 'FSAutocompleteOrganisation',
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    organisationFilters: {
+      type: Object as PropType<OrganisationFilters>,
+      required: false,
+      default: null
+    }
+  },
+  setup(props) {
+    const { entities: organisations, fetching, getMany } = useOrganisations();
+
+    watch(() => props.organisationFilters, async (newValue, oldValue) => {
+      if (!_.isEqual(newValue, oldValue)) {
+        await getMany(newValue);
+      }
+    }, { immediate: true });
+
+    return {
+      organisations,
+      fetching
+    }
+  }
+})
+</script>

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -0,0 +1,49 @@
+<template>
+  <FSAutocompleteField
+    :loading="fetchingTimeZones"
+    :items="timeZones"
+    v-model:search="search"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watch } from "vue";
+import _ from "lodash";
+
+import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
+import { TimeZoneFilters } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  name: "FSAutocompleteTimeZone",
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    timeZoneFilters: {
+      type: Object as PropType<TimeZoneFilters>,
+      required: false,
+      default: null
+    }
+  },
+  setup(props) {
+    const { getMany: getManyTimeZones, fetching: fetchingTimeZones, entities: timeZones } = useTimeZones();
+
+    const search = ref<string | null>(null);
+
+    watch([() => props.timeZoneFilters, () => search.value], async (newValue, oldValue) => {
+      if (!_.isEqual(newValue, oldValue)) {
+        await getManyTimeZones({ ...props.timeZoneFilters, search: search.value ?? undefined });
+      }
+    }, { immediate: true });
+
+    return {
+      fetchingTimeZones,
+      timeZones,
+      search
+    }
+  }
+});
+</script>

package/components/fields/FSAutocompleteField.vue

@@ -1,6 +1,9 @@
 <template>
   <FSCol>
-    <slot v-if="!$props.hideHeader" name="label">
+    <slot
+      v-if="!$props.hideHeader"
+      name="label"
+    >
       <FSRow
         :wrap="false"
       >
@@ -22,7 +25,9 @@
         >
           *
         </FSSpan>
-        <v-spacer style="min-width: 40px;" />
+        <v-spacer
+          style="min-width: 40px;"
+        />
         <FSSpan
           v-if="messages.length > 0"
           class="fs-autocomplete-field-messages"
@@ -33,56 +38,93 @@
         </FSSpan>
       </FSRow>
     </slot>
-    <v-autocomplete
-      class="fs-autocomplete-field"
-      variant="outlined"
-      :menuIcon="null"
-      :style="style"
-      :listProps="listStyle"
-      :class="classes"
-      :hideDetails="true"
-      :items="$props.items"
-      :autoSelectFirst="true"
-      :multiple="$props.multiple"
-      :itemTitle="$props.itemTitle"
-      :itemValue="$props.itemValue"
-      :readonly="!$props.editable"
-      :clearable="$props.editable && !!$props.modelValue"
-      :returnObject="$props.returnObject"
-      :rules="$props.rules"
-      :validateOn="validateOn"
-      :modelValue="$props.modelValue"
-      @update:modelValue="onUpdate"
-      @blur="blurred = true"
-      v-model:search="innerSearch"
-      v-bind="$attrs"
+    <FSLoader
+      v-if="$props.loading"
+      width="100%"
+      :height="['40px', '36px']"
+    />
+    <template
+      v-else
     >
-      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-      <template #clear>
-        <slot name="clear">
-          <FSButton
-            v-if="$props.editable && $props.modelValue"
-            icon="mdi-close"
-            variant="icon"
-            :color="ColorEnum.Dark"
-            @click="$emit('update:modelValue', null)"
-          />
-        </slot>
-      </template>
-      <template #append-inner>
-        <slot name="append-inner">
-          <FSButton
-            icon="mdi-chevron-down"
-            variant="icon"
-            :editable="$props.editable"
-            :color="ColorEnum.Dark"
+      <FSToggleSet
+        v-if="$props.toggleSet"
+        variant="slide"
+        :multiple="$props.multiple"
+        :values="$props.items"
+        :rules="$props.rules"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onUpdate"
+        v-bind="$attrs"
+      />
+      <v-autocomplete
+        v-else
+        class="fs-autocomplete-field"
+        variant="outlined"
+        :menuIcon="null"
+        :style="style"
+        :listProps="listStyle"
+        :class="classes"
+        :hideDetails="true"
+        :items="$props.items"
+        :autoSelectFirst="true"
+        :multiple="$props.multiple"
+        :itemTitle="$props.itemTitle"
+        :itemValue="$props.itemValue"
+        :readonly="!$props.editable"
+        :loading="$props.loading"
+        :clearable="$props.editable && !!$props.modelValue"
+        :returnObject="$props.returnObject"
+        :rules="$props.rules"
+        :validateOn="validateOn"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onUpdate"
+        @blur="blurred = true"
+        v-model:search="innerSearch"
+        v-bind="$attrs"
+      >
+        <template
+          v-for="(_, name) in slots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
           />
-        </slot>
-      </template>
-    </v-autocomplete>
-    <slot name="description">
+        </template>
+        <template
+          #clear
+        >
+          <slot
+            name="clear"
+          >
+            <FSButton
+              v-if="$props.editable && $props.modelValue"
+              icon="mdi-close"
+              variant="icon"
+              :color="ColorEnum.Dark"
+              @click="$emit('update:modelValue', null)"
+            />
+          </slot>
+        </template>
+        <template
+          #append-inner
+        >
+          <slot
+            name="append-inner"
+          >
+            <FSButton
+              icon="mdi-chevron-down"
+              variant="icon"
+              :editable="$props.editable"
+              :color="ColorEnum.Dark"
+            />
+          </slot>
+        </template>
+      </v-autocomplete>
+    </template>
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="$props.description"
         class="fs-autocomplete-field-description"
@@ -105,14 +147,18 @@ import FSButton from "../FSButton.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
+import FSLoader from "../FSLoader.vue";
+import FSToggleSet from "../FSToggleSet.vue";
 
 export default defineComponent({
   name: "FSAutocompleteField",
   components: {
+    FSToggleSet,
     FSButton,
+    FSLoader,
     FSSpan,
     FSCol,
-    FSRow
+    FSRow,
   },
   props: {
     label: {
@@ -178,6 +224,16 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleSet: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ["update:modelValue", "update:search"],
@@ -196,23 +252,23 @@ export default defineComponent({
 
     const innerSearch = ref("");
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    const style = computed((): { [key: string]: string | undefined } => {
       if (!props.editable) {
         return {
-          "--fs-autocomplete-field-cursor"             : "default",
-          "--fs-autocomplete-field-border-color"       : lights.base,
-          "--fs-autocomplete-field-color"              : lights.dark,
+          "--fs-autocomplete-field-cursor": "default",
+          "--fs-autocomplete-field-border-color": lights.base,
+          "--fs-autocomplete-field-color": lights.dark,
           "--fs-autocomplete-field-active-border-color": lights.base
         };
       }
       return {
-        "--fs-autocomplete-field-cursor"             : "text",
-        "--fs-autocomplete-field-background-color"   : backgrounds.base,
-        "--fs-autocomplete-field-border-color"       : lights.dark,
-        "--fs-autocomplete-field-color"              : darks.base,
+        "--fs-autocomplete-field-cursor": "text",
+        "--fs-autocomplete-field-background-color": backgrounds.base,
+        "--fs-autocomplete-field-border-color": lights.dark,
+        "--fs-autocomplete-field-color": darks.base,
         "--fs-autocomplete-field-active-border-color": darks.dark,
-        "--fs-autocomplete-field-error-color"        : errors.base,
-        "--fs-autocomplete-field-error-border-color" : errors.base
+        "--fs-autocomplete-field-error-color": errors.base,
+        "--fs-autocomplete-field-error-border-color": errors.base
       };
     });
 
@@ -234,7 +290,6 @@ export default defineComponent({
 
     const onUpdate = (value: string[] | string) => {
       emit('update:modelValue', value);
-      innerSearch.value = "";
     };
 
     watch(innerSearch, () => {

package/components/fields/FSDateField.vue

@@ -4,7 +4,9 @@
     :modelValue="menu && $props.editable"
     @update:modelValue="(value) => menu = value"
   >
-    <template #activator="{ props }">
+    <template
+      #activator="{ props }"
+    >
       <FSTextField
         class="fs-date-field"
         :label="$props.label"
@@ -19,12 +21,16 @@
         :validateOn="validateOn"
         :validationValue="$props.modelValue"
         :modelValue="epochToLongDateFormat($props.modelValue)"
-        @click:clear="onClear"
+        @update:modelValue="onClear"
         @blur="blurred = true"
         v-bind="props"
       >
-        <template #prepend-inner>
-          <slot name="prepend-inner">
+        <template
+          #prepend-inner
+        >
+          <slot
+            name="prepend-inner"
+          >
             <FSButton
               variant="icon"
               icon="mdi-calendar"
@@ -33,8 +39,14 @@
             />
           </slot>
         </template>
-        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-          <slot :name="name" v-bind="slotData" />
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
         </template>
       </FSTextField>
     </template>
@@ -44,7 +56,9 @@
       :elevation="true"
       :border="false"
     >
-      <FSCol width="fill">
+      <FSCol
+        width="fill"
+      >
         <FSCalendar
           :color="$props.color"
           v-model="innerDate"

package/components/fields/FSDateRangeField.vue

@@ -14,11 +14,15 @@
     :validationValue="$props.modelValue"
     :modelValue="toShortDateFormat"
     @click="onClick"
-    @click:clear="onClear"
+    @update:modelValue="onClear"
     @blur="blurred = true"
   >
-    <template #prepend-inner>
-      <slot name="prepend-inner">
+    <template
+      #prepend-inner
+    >
+      <slot
+        name="prepend-inner"
+      >
         <FSButton
           variant="icon"
           icon="mdi-calendar"
@@ -27,8 +31,14 @@
         />
       </slot>
     </template>
-    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-      <slot :name="name" v-bind="slotData" />
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
     </template>
   </FSTextField>
   <FSDialogSubmit
@@ -37,7 +47,9 @@
     @click:rightButton="onSubmit"
     v-model="dialog"
   >
-    <template #body>
+    <template
+      #body
+    >
       <FSCalendarTwin
         :color="$props.color"
         v-model="innerDateRange"

package/components/fields/FSDateTimeField.vue

@@ -4,7 +4,9 @@
     :modelValue="menu && $props.editable"
     @update:modelValue="(value) => menu = value"
   >
-    <template #activator="{ props }">
+    <template
+#activator="{ props }"
+>
       <FSTextField
         class="fs-date-field"
         :label="$props.label"
@@ -19,12 +21,16 @@
         :validateOn="validateOn"
         :validationValue="$props.modelValue"
         :modelValue="epochToLongTimeFormat($props.modelValue)"
-        @click:clear="onClear"
+        @update:modelValue="onClear"
         @blur="blurred = true"
         v-bind="props"
       >
-        <template #prepend-inner>
-          <slot name="prepend-inner">
+        <template
+          #prepend-inner
+        >
+          <slot
+            name="prepend-inner"
+          >
             <FSButton
               variant="icon"
               icon="mdi-calendar"
@@ -33,8 +39,14 @@
             />
           </slot>
         </template>
-        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-          <slot :name="name" v-bind="slotData" />
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
+        >
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
         </template>
       </FSTextField>
     </template>
@@ -48,7 +60,9 @@
         :border="false"
         :value="0"
       >
-        <FSCol width="fill">
+        <FSCol
+          width="fill"
+        >
           <FSCalendar
             :color="$props.color"
             v-model="innerDate"
@@ -68,7 +82,9 @@
         :border="false"
         :value="1"
       >
-        <FSCol width="fill">
+        <FSCol
+          width="fill"
+        >
           <FSClock
             :color="$props.color"
             v-model="innerTime"

package/components/fields/FSDateTimeRangeField.vue

@@ -14,11 +14,15 @@
     :validationValue="$props.modelValue"
     :modelValue="toShortTimeFormat"
     @click="onClick"
-    @click:clear="onClear"
+    @update:modelValue="onClear"
     @blur="blurred = true"
   >
-    <template #prepend-inner>
-      <slot name="prepend-inner">
+    <template
+      #prepend-inner
+    >
+      <slot
+        name="prepend-inner"
+      >
         <FSButton
           variant="icon"
           icon="mdi-calendar"
@@ -27,8 +31,14 @@
         />
       </slot>
     </template>
-    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-      <slot :name="name" v-bind="slotData" />
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
     </template>
   </FSTextField>
   <FSDialogSubmit
@@ -37,7 +47,9 @@
     @click:rightButton="onSubmit"
     v-model="dialog"
   >
-    <template #body>
+    <template
+      #body
+    >
       <FSCol>
         <FSCalendarTwin
           :color="$props.color"
@@ -163,11 +175,13 @@ export default defineComponent({
         case 1: {
           innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
           innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
+          break;
         }
         default: {
           innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
           innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
           innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
+          break;
         }
       }
     }

package/components/fields/FSTextField.vue

@@ -1,6 +1,9 @@
 <template>
   <FSCol>
-    <slot v-if="!$props.hideHeader" name="label">
+    <slot
+      v-if="!$props.hideHeader"
+      name="label"
+    >
       <FSRow
         :wrap="false"
       >
@@ -22,7 +25,9 @@
         >
           *
         </FSSpan>
-        <v-spacer style="min-width: 40px;" />
+        <v-spacer
+          style="min-width: 40px;"
+        />
         <FSSpan
           v-if="messages.length > 0"
           class="fs-text-field-messages"
@@ -48,10 +53,18 @@
       @blur="blurred = true"
       v-bind="$attrs"
     >
-      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+      <template
+        v-for="(_, name) in slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
       </template>
-      <template #clear>
+      <template
+        #clear
+      >
         <FSButton
           v-if="$props.editable && $props.modelValue"
           icon="mdi-close"
@@ -61,7 +74,9 @@
         />
       </template>
     </v-text-field>
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="$props.description"
         class="fs-text-field-description"

package/components/lists/FSDataTableUI.vue

@@ -420,7 +420,7 @@
                       v-bind="props"
                     >
                       <FSSpan
-                        :key="index"
+                        font="text-overline"
                       >
                         {{ props.item[item.value] }}
                       </FSSpan>
@@ -569,11 +569,11 @@
                       :name="item.slotName"
                       v-bind="props"
                     >
-                      <FSText
-                        :key="index"
+                      <FSSpan
+                        font="text-overline"
                       >
                         {{ props.item[item.value] }}
-                      </FSText>
+                      </FSSpan>
                     </slot>
                   </template>
                   <template

package/composables/index.ts

@@ -1,3 +1,4 @@
+export * from "./useAutocomplete";
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";

package/composables/useAutocomplete.ts

@@ -0,0 +1,81 @@
+import { computed, onMounted, ref, Ref, watch } from "vue";
+import _ from "lodash";
+
+import { useDebounce } from "./useDebounce";
+
+export const useAutocomplete = <TInfos>(
+  entities: Ref<TInfos[]>,
+  filters: (() => any)[],
+  emit: (event: "update:modelValue", value: string[] | string | null) => void,
+  customFetch: (search: string | null) => Promise<any>,
+  customUpdate: ((item: TInfos[] | TInfos | null) => void) | null = null,
+  toId: (item: TInfos) => string | null = (item: TInfos) => (item as any).id,
+  toText: (item: TInfos) => string | null = (item: TInfos) => (item as any).label,
+  fetchOnSearch: boolean = false,
+  allowToggleSet: boolean = true,
+  breakpointToggleSet: number = 5,
+  debounceInterval: number = 1000
+) => {
+  const { debounce } = useDebounce();
+
+  const search = ref<string | null>(null);
+  const entitiesLength = ref(0);
+  const init = ref(true);
+
+  const toggleSet = computed((): boolean => {
+    console.log(allowToggleSet, entitiesLength.value, breakpointToggleSet);
+    return allowToggleSet && entitiesLength.value < breakpointToggleSet;
+  });
+
+  const debouncedFetch = () => debounce(() => customFetch(search.value), debounceInterval);
+
+  const onUpdate = (value: string[] | string | null) => {
+    if (customUpdate) {
+      if (Array.isArray(value)) {
+        const items = value.map(v => entities.value.find(e => toId(e) === v) || null).filter(e => e !== null) as TInfos[];
+        customUpdate(items);
+      }
+      else {
+        customUpdate((value && entities.value.find(e => toId(e) === value)) || null);
+      }
+    }
+    else {
+      emit("update:modelValue", value);
+    }
+  };
+
+  watch(filters, (newValue, oldValue) => {
+    if (!_.isEqual(newValue, oldValue)) {
+      debouncedFetch();
+    }
+  });
+
+  watch(search, (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      const found = entities.value.map(e => toText(e)).includes(search.value);
+      if (!found && (!search.value || !search.value.length || search.value.length > 2)) {
+        if (fetchOnSearch) {
+          debouncedFetch();
+        }
+      }
+    }
+  });
+  
+  watch(entities, () => {
+    if (init.value) {
+      init.value = false;
+      entitiesLength.value = entities.value.length;
+    }
+  });
+
+  onMounted((): void => {
+    customFetch(search.value);
+  });
+
+  return {
+    toggleSet,
+    search,
+    init,
+    onUpdate
+  };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.83",
+  "version": "0.0.84",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.83",
-    "@dative-gpi/foundation-shared-services": "0.0.83",
+    "@dative-gpi/foundation-shared-domain": "0.0.84",
+    "@dative-gpi/foundation-shared-services": "0.0.84",
     "@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": "97d34af7b3481be94f7fd50ca7a0a209f9eac517"
+  "gitHead": "3e92b90afe656cd7aaa98a0a73c014de059a4296"
 }

package/styles/components/fs_data_iterator_item.scss

@@ -4,7 +4,7 @@
     flex: 1 0 0;
 
     & > .fs-col > .fs-row:first-of-type > :last-child {
-        padding-right: 22px;
+        padding-right: 32px;
     }
 }
 

package/styles/components/fs_toggle_set.scss

@@ -0,0 +1,4 @@
+.fs-toggle-set > .v-input__control > .v-slide-group { 
+    height: calc(100% + 0.4px);
+    width: calc(100% + 0.4px);
+}

package/styles/components/index.scss

@@ -55,6 +55,7 @@
 @import "fs_tile.scss";
 @import "fs_time_field.scss";
 @import "fs_timeslot_field.scss";
+@import "fs_toggle_set.scss";
 @import "fs_tooltip.scss";
 @import "fs_window.scss";
 @import "fs_wrap_group.scss";

package/styles/globals/overrides.scss

@@ -142,6 +142,8 @@ $nthOverlay: 25;
     color: var(--fs-group-hover-color);
 }
 
+/***************************************************************************/
+
 // Badges are totally overriden
 .v-badge__badge {
     align-items: center !important;
@@ -152,5 +154,3 @@ $nthOverlay: 25;
     min-width: 16px !important;
     height: 16px !important;
 }
-
-/***************************************************************************/