@dative-gpi/foundation-core-components 1.0.66 → 1.0.67-map-carousel

package/components/autocompletes/FSAutocompleteChart.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.chart', 'Chart')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -24,7 +25,6 @@
       <FSChip
         :color="chartOriginColor(item.type)"
         :label="chartOriginLabel(item.type)"
-        :editable="false"
       />
     </template>
     <template
@@ -45,7 +45,6 @@
           <FSChip
             :color="chartOriginColor(props.item.type)"
             :label="chartOriginLabel(props.item.type)"
-            :editable="false"
           />
         </template>
       </FSButton>
@@ -58,10 +57,9 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { type ChartOrganisationFilters, type ChartOrganisationTypeFilters } from "@dative-gpi/foundation-core-domain/models";
 import { useChartOrganisations, useChartOrganisationTypes } from "@dative-gpi/foundation-core-services/composables";
+import { chartOriginColor, chartOriginLabel } from "@dative-gpi/foundation-shared-components/tools";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
-
-import { chartOriginColor, chartOriginLabel } from "../../utils";
 import { ChartOrigin } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
@@ -117,9 +115,14 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
-  emits: ["update:modelValue", "update:type"],
+  emits: ["update", "update:modelValue", "update:type"],
   setup(props, { emit }) {
     const { getMany: getManyChartOrganisationTypes, fetching: fetchingChartOrganisationTypes, entities: chartOrganisationTypes } = useChartOrganisationTypes();
     const { getMany: getManyChartOrganisations, fetching: fetchingChartOrganisations, entities: chartOrganisations } = useChartOrganisations();
@@ -145,19 +148,23 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-chart.placeholder", "{0} chart(s) selected", props.modelValue.length);
+        return $tr("autocomplete.chart.placeholder", "{0} chart(s) selected", props.modelValue.length);
       }
       return null;
     });
 
     const update = (value: Chart[] | Chart | null) => {
       if (Array.isArray(value)) {
-        emit("update:modelValue", value.map(v => v.id));
-        emit("update:type", value.map(v => v.type));
+        const newModelValue = value.map(v => v.id);
+        const newType = value.map(v => v.type);
+        emit("update:modelValue", newModelValue);
+        emit("update:type", newType);
+        emit("update", { modelValue: newModelValue, type: newType });
       }
       else {
         emit("update:modelValue", value?.id);
         emit("update:type", value?.type);
+        emit("update", { modelValue: value?.id, type: value?.type });
       }
     };
 

package/components/autocompletes/FSAutocompleteDashboard.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.dashboard', 'Dashboard')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -24,7 +25,6 @@
       <FSChip
         :color="dashboardTypeColor(item.type)"
         :label="dashboardTypeLabel(item.type)"
-        :editable="false"
       />
     </template>
     <template
@@ -45,7 +45,6 @@
           <FSChip
             :color="dashboardTypeColor(props.item.type)"
             :label="dashboardTypeLabel(props.item.type)"
-            :editable="false"
           />
         </template>
       </FSButton>
@@ -123,9 +122,14 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
-  emits: ["update:modelValue", "update:type"],
+  emits: ["update", "update:modelValue", "update:type"],
   setup(props, { emit }) {
     const { getMany: getManyDashboardOrganisationTypes, fetching: fetchingDashboardOrganisationTypes, entities: dashboardOrganisationTypes } = useDashboardOrganisationTypes();
     const { getMany: getManyDashboardOrganisations, fetching: fetchingDashboardOrganisations, entities: dashboardOrganisations } = useDashboardOrganisations();
@@ -157,19 +161,23 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-dashboard.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
+        return $tr("autocomplete.dashboard.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
       }
       return null;
     });
 
     const update = (value: Dashboard[] | Dashboard | null) => {
       if (Array.isArray(value)) {
-        emit("update:modelValue", value.map(v => v.id));
-        emit("update:type", value.map(v => v.type));
+        const newModelValue = value.map(v => v.id);
+        const newType = value.map(v => v.type);
+        emit("update:modelValue", newModelValue);
+        emit("update:type", newType);
+        emit("update", { modelValue: newModelValue, type: newType });
       }
       else {
         emit("update:modelValue", value?.id);
         emit("update:type", value?.type);
+        emit("update", { modelValue: value?.id, type: value?.type });
       }
     };
 

package/components/autocompletes/FSAutocompleteDashboardOrganisation.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.dashboard', 'Dashboard')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :items="dashboardOrganisations"
     :multiple="$props.multiple"
@@ -59,6 +60,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -72,7 +78,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-dashboard-organisation.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
+        return $tr("autocomplete.dashboard.placeholder", "{0} dashboard(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteDataCategory.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.data-category', 'Data category')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -15,13 +16,13 @@
       <FSChip
         v-if="item.correlated"
         prependIcon="mdi-link"
-        :label="$tr('ui.autocomplete-data-category.linked','Linked')"
+        :label="$tr('autocomplete.data-category.linked','Linked')"
         :color="ColorEnum.Success"
       />
       <FSChip
         v-else
         prependIcon="mdi-link-off"
-        :label="$tr('ui.autocomplete-data-category.not-linked','Not linked')"
+        :label="$tr('autocomplete.data-category.not-linked','Not linked')"
         :color="ColorEnum.Warning"
       />
     </template>
@@ -41,13 +42,13 @@
           <FSChip
             v-if="props.item.correlated"
             prependIcon="mdi-link"
-            :label="$tr('ui.autocomplete-data-category.linked','Linked')"
+            :label="$tr('autocomplete.data-category.linked','Linked')"
             :color="ColorEnum.Success"
           />
           <FSChip
             v-else
             prependIcon="mdi-link-off"
-            :label="$tr('ui.autocomplete-data-category.not-linked','Not linked')"
+            :label="$tr('autocomplete.data-category.not-linked','Not linked')"
             :color="ColorEnum.Warning"
           />
         </template>
@@ -96,6 +97,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -109,7 +115,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-data-category.placeholder", "{0} data category(ies) selected", props.modelValue.length);
+        return $tr("autocomplete.data-category.placeholder", "{0} data category(ies) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteDataDefinition.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.data-definition', 'Data')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -79,6 +80,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -92,7 +98,7 @@ export default defineComponent({
 
     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 $tr("autocomplete.data-definition.placeholder", "{0} data definition(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteGroup.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.group', 'Group')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -58,6 +59,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -71,7 +77,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-group.placeholder", "{0} group(s) selected", props.modelValue.length);
+        return $tr("autocomplete.group.placeholder", "{0} group(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteLocation.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.location', 'Location')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -58,6 +59,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/autocompletes/FSAutocompleteManufacturer.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.manufacturer', 'Manufacturer')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -17,6 +18,7 @@
         height="26px"
         width="26px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -38,6 +40,7 @@
             height="26px"
             width="26px"
             :imageId="props.item.imageId"
+            :thumbnail="true"
           />
         </template>
       </FSButton>
@@ -84,6 +87,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],

package/components/autocompletes/FSAutocompleteModel.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.model', 'Model')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -17,6 +18,7 @@
         height="26px"
         width="26px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -38,6 +40,7 @@
             height="26px"
             width="26px"
             :imageId="props.item.imageId"
+            :thumbnail="true"
           />
         </template>
       </FSButton>
@@ -84,6 +87,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -97,7 +105,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-model.placeholder", "{0} model(s) selected", props.modelValue.length);
+        return $tr("autocomplete.model.placeholder", "{0} model(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteOrganisationType.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.organisation-type', 'Organisation type')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -46,6 +47,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -59,7 +65,7 @@ export default defineComponent({
 
     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 $tr("autocomplete.organisation-type.placeholder", "{0} organisation type(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteRole.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.role', 'Role')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -24,7 +25,6 @@
       <FSChip
         :color="roleTypeColor(item.type)"
         :label="roleTypeLabel(item.type)"
-        :editable="false"
       />
     </template>
     <template
@@ -45,7 +45,6 @@
           <FSChip
             :color="roleTypeColor(props.item.type)"
             :label="roleTypeLabel(props.item.type)"
-            :editable="false"
           />
         </template>
       </FSButton>
@@ -117,9 +116,14 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
-  emits: ["update:modelValue", "update:type"],
+  emits: ["update", "update:modelValue", "update:type"],
   setup(props, { emit }) {
     const { getMany: getManyRoleOrganisationTypes, fetching: fetchingRoleOrganisationTypes, entities: roleOrganisationTypes } = useRoleOrganisationTypes();
     const { getMany: getManyRoleOrganisations, fetching: fetchingRoleOrganisations, entities: roleOrganisations } = useRoleOrganisations();
@@ -145,19 +149,23 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-role.placeholder", "{0} role(s) selected", props.modelValue.length);
+        return $tr("autocomplete.role.placeholder", "{0} role(s) selected", props.modelValue.length);
       }
       return 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));
+        const newModelValue = value.map(v => v.id);
+        const newType = value.map(v => v.type);
+        emit("update:modelValue", newModelValue);
+        emit("update:type", newType);
+        emit("update", { modelValue: newModelValue, type: newType });
       }
       else {
         emit("update:modelValue", value?.id);
         emit("update:type", value?.type);
+        emit("update", { modelValue: value?.id, type: value?.type });
       }
     };
 

package/components/autocompletes/FSAutocompleteServiceAccountRoleOrganisation.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.service-account-role', 'Service account role')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :items="serviceAccountRoleOrganisations"
     :multiple="$props.multiple"
@@ -58,6 +59,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -71,7 +77,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-service-account-role-organisation.placeholder", "{0} role(s) selected", props.modelValue.length);
+        return $tr("autocomplete.service-account-role.placeholder", "{0} role(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteUserOrganisation.vue

@@ -1,6 +1,7 @@
 <template>
   <FSAutocompleteField
     itemTitle="name"
+    :label="$props.label ?? $tr('ui.common.user', 'User')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -18,6 +19,7 @@
         height="26px"
         width="26px"
         :imageId="item.imageId"
+        :thumbnail="true"
       />
     </template>
     <template
@@ -39,6 +41,7 @@
             height="26px"
             width="26px"
             :imageId="props.item.imageId"
+            :thumbnail="true"
           />
         </template>
       </FSButton>
@@ -85,6 +88,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -98,7 +106,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-user-organisation.placeholder", "{0} user(s) selected", props.modelValue.length);
+        return $tr("autocomplete.user.placeholder", "{0} user(s) selected", props.modelValue.length);
       }
       return null;
     });