@dative-gpi/foundation-shared-components 1.0.33 → 1.0.35

package/components/FSClickable.vue

@@ -3,6 +3,7 @@
     v-if="$props.href"
     :href="$props.href"
     :style="style"
+    :class="$props.class"
     @mouseover="hover = true"
     @mouseleave="hover = false"
     @mousedown="active = true"
@@ -44,6 +45,7 @@
     v-else-if="$props.to"
     :style="style"
     :to="$props.to"
+    :class="$props.class"
     @mouseover="hover = true"
     @mouseleave="hover = false"
     @mousedown="active = true"
@@ -85,6 +87,7 @@
     v-else
     :type="$props.type"
     :style="style"
+    :class="$props.class"
     @click.stop="onClick"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -115,6 +118,7 @@
       v-if="$props.load"
     >
       <v-progress-circular
+        :class="$props.class"
         class="fs-clickable-load"
         width="2"
         size="24"
@@ -156,6 +160,11 @@ export default defineComponent({
       required: false,
       default: "0"
     },
+    class: {
+      type: [String, Array] as PropType<string | string[] | null>,
+      required: false,
+      default: null
+    },
     to: {
       type: [String, Object] as PropType<string | RouteLocation | null>,
       required: false,

package/components/FSDialogFormBody.vue

@@ -12,8 +12,8 @@
         gap="24px"
       >
         <FSFadeOut
-          :height="height"
           padding="0 8px 0 0"
+          :maxHeight="maxHeight"
         >
           <slot
             name="body"
@@ -60,8 +60,8 @@
       gap="24px"
     >
       <FSFadeOut
-        :height="height"
         padding="0 8px 0 0"
+        :maxHeight="maxHeight"
       >
         <slot
           name="validation"
@@ -227,7 +227,7 @@ export default defineComponent({
     const formRef = ref<HTMLElement | null>(null);
     const valid = ref(false);
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -262,8 +262,8 @@ export default defineComponent({
       cancelLabel,
       submitLabel,
       ColorEnum,
+      maxHeight,
       formRef,
-      height,
       valid,
       onValidate,
       onSubmit

package/components/FSDialogMultiFormBody.vue

@@ -14,8 +14,8 @@
         gap="24px"
       >
         <FSFadeOut
-          :height="height"
           padding="0 8px 0 0"
+          :maxHeight="maxHeight"
         >
           <slot
             :name="`step-${step}`"
@@ -167,7 +167,7 @@ export default defineComponent({
     const valid = ref(false);
     const valids = ref(Array.from({ length: props.steps }, () => false));
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -220,7 +220,7 @@ export default defineComponent({
       nextButtonLabel,
       currentStep,
       ColorEnum,
-      height,
+      maxHeight,
       valids,
       valid,
       onPrevious,

package/components/FSDialogSubmit.vue

@@ -11,8 +11,8 @@
       #body
     >
       <FSFadeOut
-        :height="height"
         padding="0 8px 0 0"
+        :maxHeight="maxHeight"
       >
         <slot
           name="body"
@@ -167,7 +167,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -187,7 +187,7 @@ export default defineComponent({
       cancelLabel,
       submitLabel,
       ColorEnum,
-      height
+      maxHeight
     };
   }
 });

package/components/FSFadeOut.vue

@@ -22,8 +22,14 @@ export default defineComponent({
   name: "FSFadeOut",
   props: {
     height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: true
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
+    maxHeight: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -59,7 +65,8 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const style = computed((): StyleValue => ({
-      "--fs-fade-out-height"            : sizeToVar(props.height),
+      "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : undefined,
+      "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : undefined,
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
       "--fs-fade-out-mask-color"        : backgrounds.base,

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,