@dative-gpi/foundation-core-components 1.0.34 → 1.0.35

package/components/autocompletes/FSAutocompleteDataDefinition.vue

@@ -2,6 +2,7 @@
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="dataDefinitions"
     :loading="loading"
     :modelValue="$props.modelValue"
@@ -9,50 +10,13 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
-    >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        padding="0 8px 0 0"
-        gap="4px"
-        :wrap="false"
-      >
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-        <FSChip
-          v-if="$props.multiple && item.raw.unit"
-          :label="item.raw.unit"
-        />
-      </FSRow> 
-    </template>
-    <template
-      v-if="selected && selected.unit"
-      #autocomplete-suffix
+      #item-append="{ item }"
     >
       <FSChip
-        :label="selected.unit"
+        v-if="item.unit"
+        :label="item.unit"
       />
     </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-        <FSChip
-          v-if="item.raw.unit"
-          :label="item.raw.unit"
-        />
-      </FSRow>
-    </template>
     <template
       #toggle-set-item="props"
     >
@@ -79,24 +43,21 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type DataDefinitionInfos, type DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
+import { type DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useDataDefinitions } from "@dative-gpi/foundation-core-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
-import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteDataDefinition",
   components: {
     FSAutocompleteField,
     FSButton,
-    FSChip,
-    FSSpan,
-    FSRow
+    FSChip
   },
   props: {
     dataDefinitionFilters: {
@@ -123,16 +84,17 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyDataDefinitions, fetching: fetchingDataDefinitions, entities: dataDefinitions } = useDataDefinitions();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingDataDefinitions.value;
     });
 
-    const selected = computed((): DataDefinitionInfos | undefined => {
-      if (props.multiple) {
-        return undefined;
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-data-definition.placeholder", "{0} data definition(s) selected", props.modelValue.length);
       }
-      return dataDefinitions.value.find((dataDefinition: DataDefinitionInfos) => dataDefinition.id === props.modelValue);
+      return null;
     });
 
     const fetch = (search: string | null) => {
@@ -148,8 +110,8 @@ export default defineComponent({
 
     return {
       dataDefinitions,
+      placeholder,
       toggleSet,
-      selected,
       loading,
       onUpdate
     };

package/components/autocompletes/FSAutocompleteGroup.vue

@@ -2,6 +2,7 @@
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="groups"
     :modelValue="$props.modelValue"
@@ -9,41 +10,13 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
+      #item-prepend="{ item }"
     >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
+      <FSIcon
+        v-if="item.icon"
       >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
+        {{ item.icon }}
+      </FSIcon>
     </template>
   </FSAutocompleteField>
 </template>
@@ -52,21 +25,18 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 import { type GroupFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useGroups } from "@dative-gpi/foundation-core-services/composables";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.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";
 
 export default defineComponent({
   name: "FSAutocompleteGroup",
   components: {
     FSAutocompleteField,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     groupFilters: {
@@ -93,11 +63,19 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyGroups, fetching: fetchingGroups, entities: groups } = useGroups();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingGroups.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-group.placeholder", "{0} group(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyGroups({ ...props.groupFilters, search: search ?? undefined });
     };
@@ -110,6 +88,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       toggleSet,
       loading,
       groups,

package/components/autocompletes/FSAutocompleteLocation.vue

@@ -2,6 +2,7 @@
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="locations"
     :modelValue="$props.modelValue"
@@ -9,41 +10,13 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
+      #item-prepend="{ item }"
     >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
+      <FSIcon
+        v-if="item.icon"
       >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSIcon
-          v-if="item.raw.icon"
-        >
-          {{ item.raw.icon }}
-        </FSIcon>
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
+        {{ item.icon }}
+      </FSIcon>
     </template>
   </FSAutocompleteField>
 </template>
@@ -52,21 +25,18 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 import { type LocationFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useLocations } from "@dative-gpi/foundation-core-services/composables";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.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";
 
 export default defineComponent({
   name: "FSAutocompleteLocation",
   components: {
     FSAutocompleteField,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     locationFilters: {
@@ -93,11 +63,19 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyLocations, fetching: fetchingLocations, entities: locations } = useLocations();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingLocations.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-location.placeholder", "{0} location(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyLocations({ ...props.locationFilters, search: search ?? undefined });
     };
@@ -110,6 +88,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       locations,
       toggleSet,
       loading,

package/components/autocompletes/FSAutocompleteManufacturer.vue

@@ -1,12 +1,48 @@
 <template>
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="manufacturers"
     :loading="loading"
     :modelValue="$props.modelValue"
     @update:modelValue="onUpdate"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="26px"
+        width="26px"
+        :imageId="item.imageId"
+      />
+    </template>
+    <template
+      #toggle-set-item="props"
+    >
+      <FSButton
+        :padding="props.item.imageId ? ['6px 16px', '4px 12px'] : undefined"
+        :variant="props.getVariant(props.item)"
+        :color="props.getColor(props.item)"
+        :class="props.getClass(props.item)"
+        :label="props.item.label"
+        @click="props.toggle(props.item)"
+      >
+        <template
+          v-if="props.item.imageId"
+          #prepend
+        >
+          <FSImage
+            height="26px"
+            width="26px"
+            :imageId="props.item.imageId"
+          />
+        </template>
+      </FSButton>
+    </template>
+  </FSAutocompleteField>
 </template>
 
 <script lang="ts">
@@ -15,13 +51,18 @@ 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 { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 
 export default defineComponent({
   name: "FSAutocompleteManufacturer",
   components: {
-    FSAutocompleteField
+    FSAutocompleteField,
+    FSButton,
+    FSImage
   },
   props: {
     manufacturerFilters: {
@@ -34,6 +75,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     toggleSetDisabled: {
       type: Boolean,
       required: false,
@@ -43,11 +89,19 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyManufacturers, fetching: fetchingManufacturers, entities: manufacturers } = useManufacturers();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingManufacturers.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-manufacturer.placeholder", "{0} manufacturer(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyManufacturers({ ...props.manufacturerFilters, search: search ?? undefined });
     };
@@ -61,6 +115,7 @@ export default defineComponent({
 
     return {
       manufacturers,
+      placeholder,
       toggleSet,
       loading,
       onUpdate

package/components/autocompletes/FSAutocompleteModel.vue

@@ -1,27 +1,68 @@
 <template>
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="models"
     :modelValue="$props.modelValue"
     @update:modelValue="onUpdate"
     v-bind="$attrs"
-  />
+  >
+    <template
+      #item-prepend="{ item }"
+    >
+      <FSImage
+        v-if="item.imageId"
+        height="26px"
+        width="26px"
+        :imageId="item.imageId"
+      />
+    </template>
+    <template
+      #toggle-set-item="props"
+    >
+      <FSButton
+        :padding="props.item.imageId ? ['6px 16px', '4px 12px'] : undefined"
+        :variant="props.getVariant(props.item)"
+        :color="props.getColor(props.item)"
+        :class="props.getClass(props.item)"
+        :label="props.item.label"
+        @click="props.toggle(props.item)"
+      >
+        <template
+          v-if="props.item.imageId"
+          #prepend
+        >
+          <FSImage
+            height="26px"
+            width="26px"
+            :imageId="props.item.imageId"
+          />
+        </template>
+      </FSButton>
+    </template>
+  </FSAutocompleteField>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 import { type ModelFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useModels } from "@dative-gpi/foundation-core-services/composables";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
+import FSImage from "@dative-gpi/foundation-shared-components/components/FSImage.vue";
 
 export default defineComponent({
   name: "FSAutocompleteModel",
   components: {
-    FSAutocompleteField
+    FSAutocompleteField,
+    FSButton,
+    FSImage
   },
   props: {
     modelFilters: {
@@ -34,6 +75,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     toggleSetDisabled: {
       type: Boolean,
       required: false,
@@ -43,11 +89,19 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyModels, fetching: fetchingModels, entities: models } = useModels();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingModels.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-model.placeholder", "{0} model(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyModels({ ...props.modelFilters, search: search ?? undefined });
     };
@@ -60,6 +114,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       toggleSet,
       loading,
       models,

package/components/autocompletes/FSAutocompleteOrganisationType.vue

@@ -1,6 +1,8 @@
 <template>
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="organisationTypes"
     :loading="loading"
     :modelValue="$props.modelValue"
@@ -15,6 +17,7 @@ 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 { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 
@@ -34,6 +37,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     toggleSetDisabled: {
       type: Boolean,
       required: false,
@@ -43,11 +51,19 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyOrganisationTypes, fetching: fetchingOrganisationTypes, entities: organisationTypes } = useOrganisationTypes();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingOrganisationTypes.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-organisation-type.placeholder", "{0} organisation type(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyOrganisationTypes({ ...props.organisationTypeFilters, search: search ?? undefined });
     };
@@ -61,6 +77,7 @@ export default defineComponent({
 
     return {
       organisationTypes,
+      placeholder,
       toggleSet,
       loading,
       onUpdate