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

package/components/fields/FSAutocompleteTag.vue

@@ -0,0 +1,100 @@
+<template>
+  <FSAutocompleteField
+    :placeholder="innerPlaceholder"
+    :items="innerItems"
+    :showSearch="true"
+    :multiple="true"
+    :modelValue="modelValue?.map(m => m.id)"
+    @update:modelValue="onUpdateModelValue"
+    @add:item="onAddItem"
+    @keydown="onKeydown"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSAutocompleteField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+
+import { useTranslations as useTranslationsProvider, uuidv4 } from "@dative-gpi/bones-ui";
+
+import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props:{
+    placeholder: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    items: {
+      type: Array as PropType<{id: string, label: string, isCustom: boolean}[]>,
+      required: false,
+      default: () => []
+    },
+    modelValue: {
+      type: Array as PropType<{id: string, label: string, isCustom: boolean}[] | null>,
+      required: false,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, {emit}) {
+    const { $tr } = useTranslationsProvider();
+
+    const tagValues = ref<{id : string, label : string, isCustom : boolean}[]>([]);
+
+    const innerItems = computed(() => props.items.concat(tagValues.value));
+
+    const innerPlaceholder = computed((): string | null => {
+      if (!props.modelValue || props.modelValue.length === 0) {
+        return null;
+      }
+      return props.placeholder ?? $tr("ui.autocomplete-tag.items-selected", "{0} item(s) selected", props.modelValue?.length ?? 0);
+    });
+
+    const onUpdateModelValue = (value: string[] | null): void => {
+      emit("update:modelValue", value?.map((v) => innerItems.value.find((i) => i.id === v)));
+    };
+
+    const onAddItem = (value: string): void => {
+      emit("update:modelValue", [
+        ...props.modelValue ?? [],
+        { id: uuidv4(), label: value, isCustom: true }
+      ]);
+    };
+
+    const onKeydown = (event: KeyboardEvent): void => {
+      if (event.key === "Backspace") {
+        emit("update:modelValue", [...props.modelValue ?? []]);
+      }
+    };
+
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue) {
+        tagValues.value = props.modelValue?.filter(m=>m.isCustom) ?? [];
+      }
+    }, {immediate: true});
+
+    return {
+      innerPlaceholder,
+      innerItems,
+      onUpdateModelValue,
+      onAddItem,
+      onKeydown
+    };
+  }
+});
+</script>

package/components/fields/FSTextField.vue

@@ -52,13 +52,17 @@
       <template
         #clear
       >
-        <FSButton
-          v-if="$props.clearable && $props.editable && !!$props.modelValue"
-          icon="mdi-close"
-          variant="icon"
-          :color="ColorEnum.Dark"
-          @click="$emit('update:modelValue', null)"
-        />
+        <slot
+          name="clear"
+        >
+          <FSButton
+            v-if="$props.clearable && $props.editable && !!$props.modelValue"
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', null)"
+          />
+        </slot>
       </template>
     </v-text-field>
   </FSBaseField>

package/composables/useAddress.ts

@@ -1,7 +1,7 @@
-import type { Place } from "@dative-gpi/foundation-shared-domain/models";
-import { Address } from "@dative-gpi/foundation-shared-domain/models";
 import _ from "lodash";
 
+import { Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
+
 export const useAddress = () => {
   const enabled = true;
   let initialized = false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.34",
-    "@dative-gpi/foundation-shared-services": "1.0.34"
+    "@dative-gpi/foundation-shared-domain": "1.0.36",
+    "@dative-gpi/foundation-shared-services": "1.0.36"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "c73eb4aecb216537fab5b040f85ecf0ccc06e752"
+  "gitHead": "687d6ae60b16a75dc332400cd6eee19cb306767b"
 }

package/components/autocompletes/FSAutocompleteTag.vue

@@ -1,138 +0,0 @@
-<template>
-  <FSCol>
-    <FSAutocompleteField
-      v-if="variant=='standard'"
-      :label="label"
-      :items="innerItems"
-      :multiple="true"
-      :modelValue="modelValue?.map(m=>m.id)"
-      @update:modelValue="onUpdateModelValue"
-      @keydown="onKeydown"
-      v-binds="$attrs"
-    >
-      <template
-        #autocomplete-chip
-      >
-      </template>
-    </FSAutocompleteField>
-    <FSAutocompleteField
-      v-else
-      :label="label"
-      :items="innerItems"
-      :multiple="true"
-      :modelValue="modelValue?.map(m=>m.id)"
-      :showSearch="true"
-      @update:modelValue="onUpdateModelValue"
-      @add:item="onAddItem"
-      @keydown="onKeydown"
-      v-binds="$attrs"
-    >
-      <template
-        #autocomplete-chip
-      >
-      </template>
-    </FSAutocompleteField> 
-    <FSTagGroup
-      v-if="modelValue != null"
-      :tags="modelValue?.map((v) => v.label) ?? []"
-      @remove="onRemoveValue($event)"
-    />
-  </FSCol>
-</template>
-
-<script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
-
-import { uuidv4 } from '@dative-gpi/bones-ui';
-
-import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
-import FSTagGroup from "../FSTagGroup.vue";
-
-export default defineComponent({
-  components: {
-    FSAutocompleteField,
-    FSTagGroup,
-  },
-  props:{
-    modelValue: {
-      type: Array as PropType<{id : string, label : string, isCustom: boolean}[] | null>,
-      required: false,
-      default: () => []
-    },
-    items: {
-      type: Array as PropType<{id : string, label : string, isCustom: boolean}[]>,
-      required: false,
-      default: () => []
-    },
-    label : {
-      type: String,
-      required: false
-    },
-    variant: {
-      type: String as PropType<'standard' | 'tagged'>,
-      required: false,
-      default : 'standard'
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, {emit}) {
-
-    const tagValues = ref<{id : string, label : string, isCustom : boolean}[]>([]);
-
-    const innerItems = computed(()=>{
-
-      if(props.variant === 'standard'){
-        return props.items
-      }
-      else{
-        return props.items.concat(tagValues.value);
-      }
-    });
-
-    const onUpdateModelValue = (value: string[] | null) => {
-      emit('update:modelValue', value?.map((v) => innerItems.value.find((i) => i.id === v)));
-    }
-
-    const onRemoveValue = (value: string) => {
-      const idValue = innerItems.value.find((v) => v.label === value)?.id;
-      if (idValue) {
-        if(tagValues.value.map((v) => v.label).includes(value)){
-          tagValues.value = tagValues.value.filter((v) => v.label !== value);
-        }
-        emit('update:modelValue', [...props.modelValue?.filter((v) => v.id !== idValue) ?? []]);
-      }
-    }
-
-    const onAddItem = (value: string) => {
-      if (innerItems.value.map((v) => v.label).includes(value)) {
-        return;
-      }
-      let item = {id: uuidv4(), label: value, isCustom: true};
-      tagValues.value.push(item);
-      emit('update:modelValue', [...props.modelValue?? [],item]);
-    }
-
-    const onKeydown = (event: KeyboardEvent) => {
-      if (event.key === 'Backspace') {
-        emit('update:modelValue', [...props.modelValue ?? []]);
-      }
-    };
-
-    watch(() => props.modelValue, (newValue) => {
-      if (newValue) {
-        tagValues.value = props.modelValue?.filter(m=>m.isCustom) ?? [];
-      }
-    }, {immediate: true});
-
-
-    return {
-      innerItems,
-      onUpdateModelValue,
-      onAddItem,
-      onRemoveValue,
-      onKeydown
-    }
-  }
-})
-</script>