@dative-gpi/foundation-shared-components 1.0.34 → 1.0.36

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -2,6 +2,7 @@
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="languages"
     :modelValue="$props.modelValue"
@@ -9,64 +10,33 @@
     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>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue"
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { type LanguageFilters } from "@dative-gpi/foundation-shared-domain/models";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 import { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
 import FSIcon from "../FSIcon.vue";
-import FSSpan from "../FSSpan.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteLanguage",
   components: {
     FSAutocompleteField,
-    FSIcon,
-    FSSpan,
-    FSRow
+    FSIcon
   },
   props: {
     languageFilters: {
@@ -93,11 +63,19 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyLanguages, fetching: fetchingLanguages, entities: languages } = useLanguages();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingLanguages.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-language.placeholder", "{0} language(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyLanguages({ ...props.languageFilters, search: search ?? undefined });
     };
@@ -110,6 +88,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       languages,
       toggleSet,
       loading,

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -3,6 +3,7 @@
     itemTitle="id"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
+    :placeholder="placeholder"
     :loading="loading"
     :items="timeZones"
     :modelValue="$props.modelValue"
@@ -10,37 +11,12 @@
     v-bind="$attrs"
   >
     <template
-      #autocomplete-selection="{ item }"
+      #item-append="{ item }"
     >
-      <FSRow
-        v-if="$props.modelValue"
-        align="center-center"
-        :wrap="false"
-      >
-        <FSChip
-          :label="item.raw.offset"
-        />
-        <FSSpan>
-          {{ item.raw.id }}
-        </FSSpan>
-      </FSRow>
-    </template>
-    <template
-      #item-label="{ item, font }"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSChip
-          :label="item.raw.offset"
-        />
-        <FSSpan
-          :font="font"
-        >
-          {{ item.raw.id }}
-        </FSSpan>
-      </FSRow>
+      <FSChip
+        v-if="item.offset"
+        :label="item.offset.split(':')[0]"
+      />
     </template>
     <template
       #toggle-set-item="props"
@@ -53,10 +29,10 @@
         @click="props.toggle(props.item)"
       >
         <template
-          v-if="props.item.offset"
-          #prepend
+          #append
         >
           <FSChip
+            v-if="props.item.offset"
             :label="props.item.offset.split(':')[0]"
           />
         </template>
@@ -70,23 +46,20 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { type TimeZoneFilters, type TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
 import FSButton from "../FSButton.vue";
 import FSChip from "../FSChip.vue";
-import FSSpan from "../FSSpan.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteTimeZone",
   components: {
     FSAutocompleteField,
     FSButton,
-    FSChip,
-    FSSpan,
-    FSRow
+    FSChip
   },
   props: {
     timeZoneFilters: {
@@ -113,11 +86,19 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { getMany: getManyTimeZones, fetching: fetchingTimeZones, entities: timeZones } = useTimeZones();
+    const { $tr } = useTranslationsProvider();
 
     const loading = computed((): boolean => {
       return init.value && fetchingTimeZones.value;
     });
 
+    const placeholder = computed((): string | null => {
+      if (props.multiple && props.modelValue) {
+        return $tr("ui.autocomplete-time-zone.placeholder", "{0} time zone(s) selected", props.modelValue.length);
+      }
+      return null;
+    });
+
     const fetch = (search: string | null) => {
       return getManyTimeZones({ ...props.timeZoneFilters, search: search ?? undefined });
     };
@@ -133,6 +114,7 @@ export default defineComponent({
     );
 
     return {
+      placeholder,
       ColorEnum,
       timeZones,
       toggleSet,