@dative-gpi/foundation-core-components 1.0.26 → 1.0.28-remove-deprecated2

package/components/autocompletes/FSAutocompleteDataCategory.vue

@@ -1,7 +1,9 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.data-category', 'Data category')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="dataCategories"
     :loading="loading"
     :modelValue="$props.modelValue"
@@ -9,49 +11,48 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
+      #item-append="{ item }"
     >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
-      >
-        <FSIcon>
-          {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
-        </FSIcon>
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSIcon>
-          {{ item.raw.correlated ? 'mdi-link' : 'mdi-link-off' }}
-        </FSIcon>
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
+      <FSChip
+        v-if="item.correlated"
+        prependIcon="mdi-link"
+        :label="$tr('autocomplete.data-category.linked','Linked')"
+        :color="ColorEnum.Success"
+      />
+      <FSChip
+        v-else
+        prependIcon="mdi-link-off"
+        :label="$tr('autocomplete.data-category.not-linked','Not linked')"
+        :color="ColorEnum.Warning"
+      />
     </template>
     <template
       #toggle-set-item="props"
     >
       <FSButton
-        :prependIcon="props.item.correlated ? 'mdi-link' : 'mdi-link-off'"
         :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
+          #append
+        >
+          <FSChip
+            v-if="props.item.correlated"
+            prependIcon="mdi-link"
+            :label="$tr('autocomplete.data-category.linked','Linked')"
+            :color="ColorEnum.Success"
+          />
+          <FSChip
+            v-else
+            prependIcon="mdi-link-off"
+            :label="$tr('autocomplete.data-category.not-linked','Not linked')"
+            :color="ColorEnum.Warning"
+          />
+        </template>
+      </FSButton>
     </template>
   </FSAutocompleteField>
 </template>
@@ -62,21 +63,19 @@ import { computed, defineComponent, type PropType } from "vue";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { type DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useDataCategories } from "@dative-gpi/foundation-core-services/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
 import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.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";
+import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
 
 export default defineComponent({
   name: "FSAutocompleteDataCategory",
   components: {
     FSAutocompleteField,
     FSButton,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSChip
   },
   props: {
     dataCategoriesFilters: {
@@ -98,16 +97,29 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyDataCategories, fetching: fetchingDataCategories, entities: dataCategories } = useDataCategories();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingDataCategories.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("autocomplete.data-category.placeholder", "{0} data category(ies) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyDataCategories({ ...props.dataCategoriesFilters, search: search ?? undefined });
     };
@@ -121,6 +133,8 @@ export default defineComponent({
 
     return {
       dataCategories,
+      placeholder,
+      ColorEnum,
       toggleSet,
       loading,
       onUpdate

package/components/autocompletes/FSAutocompleteDataDefinition.vue

@@ -1,7 +1,9 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.data-definition', 'Data')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :items="dataDefinitions"
     :loading="loading"
     :modelValue="$props.modelValue"
@@ -9,39 +11,12 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
+      #item-append="{ item }"
     >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
-      >
-        <FSChip
-          v-if="item.raw.unit"
-          :label="item.raw.unit"
-        />
-        <FSSpan>
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSChip
-          v-if="item.raw.unit"
-          :label="item.raw.unit"
-        />
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.label }}
-        </FSSpan>
-      </FSRow>
+      <FSChip
+        v-if="item.unit"
+        :label="item.unit"
+      />
     </template>
     <template
       #toggle-set-item="props"
@@ -54,10 +29,10 @@
         @click="props.toggle(props.item)"
       >
         <template
-          #prepend
+          v-if="props.item.unit"
+          #append
         >
           <FSChip
-            v-if="props.item.unit"
             :label="props.item.unit"
           />
         </template>
@@ -72,21 +47,18 @@ import { computed, defineComponent, type PropType } from "vue";
 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: {
@@ -108,16 +80,29 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   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 placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("autocomplete.data-definition.placeholder", "{0} data definition(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyDataDefinitions({ ...props.dataDefinitionFilters, search: search ?? undefined });
     };
@@ -131,6 +116,7 @@ export default defineComponent({
 
     return {
       dataDefinitions,
+      placeholder,
       toggleSet,
       loading,
       onUpdate

package/components/autocompletes/FSAutocompleteGroup.vue

@@ -1,7 +1,9 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.group', 'Group')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="groups"
     :modelValue="$props.modelValue"
@@ -9,41 +11,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 +26,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: {
@@ -88,16 +59,29 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   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("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 +94,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       toggleSet,
       loading,
       groups,

package/components/autocompletes/FSAutocompleteLocation.vue

@@ -1,7 +1,9 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.location', 'Location')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="locations"
     :modelValue="$props.modelValue"
@@ -9,41 +11,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 +26,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: {
@@ -88,16 +59,29 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   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 +94,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       locations,
       toggleSet,
       loading,

package/components/autocompletes/FSAutocompleteManufacturer.vue

@@ -1,12 +1,51 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.manufacturer', 'Manufacturer')"
     :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"
+        :thumbnail="true"
+      />
+    </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"
+            :thumbnail="true"
+          />
+        </template>
+      </FSButton>
+    </template>
+  </FSAutocompleteField>
 </template>
 
 <script lang="ts">
@@ -15,13 +54,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,20 +78,38 @@ export default defineComponent({
       required: false,
       default: null
     },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     toggleSetDisabled: {
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   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 +123,7 @@ export default defineComponent({
 
     return {
       manufacturers,
+      placeholder,
       toggleSet,
       loading,
       onUpdate