@dative-gpi/foundation-core-components 0.1.120 → 1.0.1

package/components/autocompletes/FSAutocompleteGroup.vue

@@ -27,43 +27,35 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
-          :wrap="false"
+        <FSIcon
+          v-if="item.raw.icon"
+        >
+          {{ item.raw.icon }}
+        </FSIcon>
+        <FSSpan
+          :font="font"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSIcon
-            v-if="item.raw.icon"
-          >
-            {{ item.raw.icon }}
-          </FSIcon>
-          <FSSpan>
-            {{ item.raw.label }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
     </template>
   </FSAutocompleteField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { type GroupFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useGroups } from "@dative-gpi/foundation-core-services/composables";
-import { GroupFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
@@ -72,7 +64,6 @@ export default defineComponent({
   name: "FSAutocompleteGroup",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSIcon,
     FSSpan,
     FSRow
@@ -107,7 +98,7 @@ export default defineComponent({
       return init.value && fetchingGroups.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyGroups({ ...props.groupFilters, search: search ?? undefined });
     };
 
@@ -115,7 +106,7 @@ export default defineComponent({
       groups,
       [() => props.groupFilters],
       emit,
-      innerFetch
+      fetch
     );
 
     return {

package/components/autocompletes/FSAutocompleteLocation.vue

@@ -27,43 +27,35 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
-          :wrap="false"
+        <FSIcon
+          v-if="item.raw.icon"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSIcon
-            v-if="item.raw.icon"
-          >
-            {{ item.raw.icon }}
-          </FSIcon>
-          <FSSpan>
-            {{ item.raw.label }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.icon }}
+        </FSIcon>
+        <FSSpan
+          :font="font"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
     </template>
   </FSAutocompleteField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { type LocationFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useLocations } from "@dative-gpi/foundation-core-services/composables";
-import { LocationFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
@@ -72,7 +64,6 @@ export default defineComponent({
   name: "FSAutocompleteLocation",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSIcon,
     FSSpan,
     FSRow
@@ -103,7 +94,11 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getMany: getManyLocations, fetching: fetchingLocations, entities: locations } = useLocations();
 
-    const innerFetch = (search: string | null) => {
+    const loading = computed((): boolean => {
+      return init.value && fetchingLocations.value;
+    });
+
+    const fetch = (search: string | null) => {
       return getManyLocations({ ...props.locationFilters, search: search ?? undefined });
     };
 
@@ -111,13 +106,9 @@ export default defineComponent({
       locations,
       [() => props.locationFilters],
       emit,
-      innerFetch
+      fetch
     );
 
-    const loading = computed((): boolean => {
-      return init.value && fetchingLocations.value;
-    });
-
     return {
       locations,
       toggleSet,

package/components/autocompletes/FSAutocompleteManufacturer.vue

@@ -10,11 +10,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { type ManufacturerFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useManufacturers } from "@dative-gpi/foundation-core-services/composables";
-import { ManufacturerFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 
@@ -44,7 +44,11 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getMany: getManyManufacturers, fetching: fetchingManufacturers, entities: manufacturers } = useManufacturers();
 
-    const innerFetch = (search: string | null) => {
+    const loading = computed((): boolean => {
+      return init.value && fetchingManufacturers.value;
+    });
+
+    const fetch = (search: string | null) => {
       return getManyManufacturers({ ...props.manufacturerFilters, search: search ?? undefined });
     };
 
@@ -52,13 +56,9 @@ export default defineComponent({
       manufacturers,
       [() => props.manufacturerFilters],
       emit,
-      innerFetch
+      fetch
     );
 
-    const loading = computed((): boolean => {
-      return init.value && fetchingManufacturers.value;
-    });
-
     return {
       manufacturers,
       toggleSet,

package/components/autocompletes/FSAutocompleteModel.vue

@@ -10,11 +10,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { type ModelFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useModels } from "@dative-gpi/foundation-core-services/composables";
-import { ModelFilters } from "@dative-gpi/foundation-core-domain/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 
@@ -48,7 +48,7 @@ export default defineComponent({
       return init.value && fetchingModels.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyModels({ ...props.modelFilters, search: search ?? undefined });
     };
 
@@ -56,7 +56,7 @@ export default defineComponent({
       models,
       [() => props.modelFilters],
       emit,
-      innerFetch
+      fetch
     );
 
     return {

package/components/autocompletes/FSAutocompleteOrganisationType.vue

@@ -10,11 +10,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
+import { type OrganisationTypeFilters } from "@dative-gpi/foundation-shared-domain/models";
 import { useOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
-import { OrganisationTypeFilters } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 
@@ -48,7 +48,7 @@ export default defineComponent({
       return init.value && fetchingOrganisationTypes.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyOrganisationTypes({ ...props.organisationTypeFilters, search: search ?? undefined });
     };
 
@@ -56,7 +56,7 @@ export default defineComponent({
       organisationTypes,
       [() => props.organisationTypeFilters],
       emit,
-      innerFetch
+      fetch
     );
 
     return {

package/components/autocompletes/FSAutocompleteRole.vue

@@ -32,35 +32,28 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
-          :wrap="false"
+        <FSIcon
+          v-if="item.raw.icon"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSIcon
-            v-if="item.raw.icon"
-          >
-            {{ item.raw.icon }}
-          </FSIcon>
-          <FSSpan>
-            {{ item.raw.label }}
-          </FSSpan>
-          <FSChip
-            :color="roleTypeColor(item.raw.type)"
-            :label="roleTypeLabel(item.raw.type)"
-            :editable="false"
-          />
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.icon }}
+        </FSIcon>
+        <FSSpan
+          :font="font"
+        >
+          {{ item.raw.label }}
+        </FSSpan>
+        <FSChip
+          :color="roleTypeColor(item.raw.type)"
+          :label="roleTypeLabel(item.raw.type)"
+          :editable="false"
+        />
+      </FSRow>
     </template>
     <template
       #toggle-set-item="props"
@@ -88,16 +81,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { RoleOrganisationFilters, RoleOrganisationTypeFilters, RoleType } from "@dative-gpi/foundation-core-domain/models";
+import { type RoleOrganisationFilters, type RoleOrganisationTypeFilters, RoleType } from "@dative-gpi/foundation-core-domain/models";
 import { useRoleOrganisations, useRoleOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 
 import { roleTypeColor, roleTypeLabel } from "../../utils";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
@@ -108,7 +100,6 @@ export default defineComponent({
   name: "FSAutocompleteRole",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSButton,
     FSChip,
     FSIcon,
@@ -131,6 +122,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    type: {
+      type: Number as PropType<RoleType>,
+      required: false,
+      default: RoleType.None
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -165,7 +161,7 @@ export default defineComponent({
       return init.value && (fetchingRoleOrganisationTypes.value || fetchingRoleOrganisations.value);
     });
 
-    const innerUpdate = (value: Role[] | Role | null) => {
+    const update = (value: Role[] | Role | null) => {
       if (Array.isArray(value)) {
         emit("update:modelValue", value.map(v => v.id));
         emit("update:type", value.map(v => v.type));
@@ -176,7 +172,7 @@ export default defineComponent({
       }
     };
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return Promise.all([
         getManyRoleOrganisationTypes({ ...props.roleOrganisationTypeFilters, search: search ?? undefined }),
         getManyRoleOrganisations({ ...props.roleOrganisationFilters, search: search ?? undefined })
@@ -187,8 +183,8 @@ export default defineComponent({
       roles,
       [() => props.roleOrganisationTypeFilters, () => props.roleOrganisationFilters],
       emit,
-      innerFetch,
-      innerUpdate
+      fetch,
+      update
     );
 
     return {

package/components/autocompletes/FSAutocompleteUserOrganisation.vue

@@ -1,7 +1,7 @@
 <template>
   <FSAutocompleteField
+    itemTitle="name"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
-    :customFilter="customFilter"
     :multiple="$props.multiple"
     :items="userOrganisations"
     :loading="loading"
@@ -29,31 +29,24 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
-          :wrap="false"
+        <FSImage
+          v-if="item.raw.imageId"
+          height="26px"
+          width="26px"
+          :imageId="item.raw.imageId"
+        />
+        <FSSpan
+          :font="font"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSImage
-            v-if="item.raw.imageId"
-            height="26px"
-            width="26px"
-            :imageId="item.raw.imageId"
-          />
-          <FSSpan>
-            {{ item.raw.name }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.name }}
+        </FSSpan>
+      </FSRow>
     </template>
     <template
       #toggle-set-item="props"
@@ -84,14 +77,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { UserOrganisationFilters, UserOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
+import { type UserOrganisationFilters, type UserOrganisationInfos } from "@dative-gpi/foundation-core-domain/models";
 import { useUserOrganisations } from "@dative-gpi/foundation-core-services/composables";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
-import FSCheckbox from "@dative-gpi/foundation-shared-components/components/FSCheckbox.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
@@ -101,7 +93,6 @@ export default defineComponent({
   name: "FSAutocompleteUserOrganisation",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSButton,
     FSImage,
     FSSpan,
@@ -144,19 +135,15 @@ export default defineComponent({
       }));
     });
     
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyUserOrganisations({ ...props.userOrganisationFilters, search: search ?? undefined });
     };
 
-    const customFilter = (_: any, search: string, item: any): boolean => {
-      return item.raw.name.toLowerCase().includes(search.toLowerCase());
-    };
-
     const { toggleSet, search, init, onUpdate } = useAutocomplete(
       userOrganisations,
       [() => props.userOrganisationFilters],
       emit,
-      innerFetch,
+      fetch,
       null,
       (item: UserOrganisationInfos) => item.id,
       (item: UserOrganisationInfos) => item.name
@@ -168,7 +155,6 @@ export default defineComponent({
       toggleSet,
       loading,
       search,
-      customFilter,
       onUpdate
     };
   }