@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/FSText.vue

@@ -11,10 +11,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSText",

package/components/FSToggleSet.vue

@@ -1,9 +1,8 @@
 <template>
   <v-input
     class="fs-toggle-set"
-    ref="inputRef"
-    :modelValue="$props.modelValue"
     :rules="$props.rules"
+    :modelValue="$props.modelValue"
   >
     <FSWrapGroup
       v-if="['wrap'].includes($props.variant)"
@@ -95,10 +94,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { defineComponent, ref } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { FSToggle } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase, FSToggle } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";
@@ -112,6 +112,16 @@ export default defineComponent({
     FSButton
   },
   props: {
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "0"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
     values: {
       type: Array as PropType<FSToggle[]>,
       required: false,
@@ -132,6 +142,11 @@ export default defineComponent({
       required: false,
       default: "standard"
     },
+    errorVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
     buttonClass: {
       type: [Array, String] as PropType<string[] | string>,
       required: false,
@@ -142,8 +157,8 @@ export default defineComponent({
       required: false,
       default: null
     },
-    modelValue: {
-      type: [Array, String, Number] as PropType<(string | number)[] | string | number | null>,
+    errorClass: {
+      type: [Array, String] as PropType<string[] | string>,
       required: false,
       default: null
     },
@@ -157,21 +172,21 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    padding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "0"
-    },
-    gap: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+    errorColor: {
+      type: String as PropType<ColorBase>,
       required: false,
-      default: "8px"
+      default: ColorEnum.Error
     },
     rules: {
       type: Array as PropType<any[]>,
       required: false,
       default: () => []
     },
+    modelValue: {
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number | null>,
+      required: false,
+      default: null
+    },
     multiple: {
       type: Boolean,
       required: false,
@@ -191,7 +206,6 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const toggleSetRef = ref(null);
-    const inputRef = ref(null);
 
     const getVariant = (value: FSToggle): "standard" | "full" | "icon" => {
       if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
@@ -294,7 +308,6 @@ export default defineComponent({
 
     return {
       toggleSetRef,
-      inputRef,
       getVariant,
       goToStart,
       getColor,

package/components/FSTooltip.vue

@@ -3,11 +3,22 @@
     class="fs-tooltip"
     location="top"
   >
-    <template #activator="{ props }">
-      <slot name="activator" v-bind="props" />
+    <template
+      #activator="{ props }"
+    >
+      <slot
+        name="activator"
+        v-bind="props"
+      />
     </template>
-    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-      <slot :name="name" v-bind="slotData" />
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
     </template>
   </v-tooltip>
 </template>

package/components/FSWindow.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, VNode } from "vue";
+import { computed, defineComponent, type PropType, type VNode } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
@@ -59,7 +59,7 @@ export default defineComponent({
       style,
       getChildren,
       value
-    }
+    };
   }
 });
 </script>

package/components/FSWrapGroup.vue

@@ -19,7 +19,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -0,0 +1,104 @@
+<template>
+  <FSAutocompleteField
+    :clearable="false"
+    :toggleSet="false"
+    :multiple="false"
+    :items="places"
+    :modelValue="modelValuePlace"
+    @update:modelValue="onUpdate"
+    v-model:search="search"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, watch } from "vue";
+
+import { type Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
+import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
+
+import { useAddress } from "../../composables/useAddress";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  name: "FSAutocompleteAddress",
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Object as () => Address | null,
+      required: false,
+      default: null
+    },
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { search: searchAddress, get: getAddress  } = useAddress();
+
+    const places = ref<Place[]>([]);
+    const modelValuePlace = ref<Place | null>(null);
+
+    const fetch = async (search: string | null) => {
+      if (search === null) {
+        return Promise.resolve([]);
+      }
+      places.value = await searchAddress(search);
+      return Promise.resolve([]);
+    };
+
+    const update = async (value: { id: string; label: string; } | { id: string; label: string; }[] | null) => {
+      if (value === null) {
+        emit("update:modelValue", null);
+        return;
+      }
+      if (Array.isArray(value)) {
+        value = value[0];
+      }
+      const address = await getAddress(value);
+      emit("update:modelValue", address );
+    };
+
+    const { search, onUpdate } = useAutocomplete(
+      places,
+      [],
+      emit,
+      fetch,
+      update,
+      (item) => (item).id,
+      (item) => (item).label,
+      true,
+      false
+    );
+
+    const addressToPlace = (address: Address): Place => {
+      return {
+        id: address.placeId,
+        label: address.placeLabel
+      };
+    };
+
+    onMounted(() => {
+      if(!props.modelValue) {
+        return;
+      }
+      modelValuePlace.value = addressToPlace(props.modelValue);
+    });
+
+    watch(() => props.modelValue, (newValue) => {
+      if(!newValue) {
+        return;
+      }
+      modelValuePlace.value = addressToPlace(newValue);
+    });
+
+    return {
+      modelValuePlace,
+      places,
+      search,
+      onUpdate
+    };
+  }
+});
+</script>

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -27,42 +27,35 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
+        <FSIcon
+          v-if="item.raw.icon"
+        >
+          {{ item.raw.icon }}
+        </FSIcon>
+        <FSSpan
+          :font="font"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSIcon
-            v-if="item.raw.icon"
-          >
-            {{ item.raw.icon }}
-          </FSIcon>
-          <FSSpan>
-            {{ item.raw.label }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.label }}
+        </FSSpan>
+      </FSRow>
     </template>
   </FSAutocompleteField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, 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 { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
-import { LanguageFilters } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
-import FSCheckbox from "../FSCheckbox.vue";
 import FSIcon from "../FSIcon.vue";
 import FSSpan from "../FSSpan.vue";
 import FSRow from "../FSRow.vue";
@@ -71,7 +64,6 @@ export default defineComponent({
   name: "FSAutocompleteLanguage",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSIcon,
     FSSpan,
     FSRow
@@ -106,7 +98,7 @@ export default defineComponent({
       return init.value && fetchingLanguages.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyLanguages({ ...props.languageFilters, search: search ?? undefined });
     };
 
@@ -114,7 +106,7 @@ export default defineComponent({
       languages,
       [() => props.languageFilters],
       emit,
-      innerFetch
+      fetch
     );
 
     return {

package/components/autocompletes/FSAutocompleteTag.vue

@@ -0,0 +1,138 @@
+<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>

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -1,7 +1,7 @@
 <template>
   <FSAutocompleteField
+    itemTitle="id"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
-    :customFilter="customFilter"
     :multiple="$props.multiple"
     :loading="loading"
     :items="timeZones"
@@ -26,27 +26,21 @@
       </FSRow>
     </template>
     <template
-      #autocomplete-item="{ props, item }"
+      #item-label="{ item, font }"
     >
-      <v-list-item
-        v-bind="{ ...props, title: '' }"
+      <FSRow
+        align="center-left"
+        :wrap="false"
       >
-        <FSRow
-          align="center-left"
+        <FSChip
+          :label="item.raw.offset"
+        />
+        <FSSpan
+          :font="font"
         >
-          <FSCheckbox
-            v-if="$props.multiple"
-            :modelValue="$props.modelValue?.includes(item.value)"
-            @click="props.onClick"
-          />
-          <FSChip
-            :label="item.raw.offset"
-          />
-          <FSSpan>
-            {{ item.raw.id }}
-          </FSSpan>
-        </FSRow>
-      </v-list-item>
+          {{ item.raw.id }}
+        </FSSpan>
+      </FSRow>
     </template>
     <template
       #toggle-set-item="props"
@@ -71,14 +65,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { TimeZoneFilters, TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
+import { type TimeZoneFilters, type TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 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 FSCheckbox from "../FSCheckbox.vue"
 import FSButton from "../FSButton.vue";
 import FSChip from "../FSChip.vue";
 import FSSpan from "../FSSpan.vue";
@@ -88,7 +82,6 @@ export default defineComponent({
   name: "FSAutocompleteTimeZone",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSButton,
     FSChip,
     FSSpan,
@@ -124,30 +117,26 @@ export default defineComponent({
       return init.value && fetchingTimeZones.value;
     });
 
-    const innerFetch = (search: string | null) => {
+    const fetch = (search: string | null) => {
       return getManyTimeZones({ ...props.timeZoneFilters, search: search ?? undefined });
     };
 
-    const customFilter = (_: any, search: string, item: any): boolean => {
-      return item.raw.id.toLowerCase().includes(search.toLowerCase());
-    };
-
     const { toggleSet, search, init, onUpdate } = useAutocomplete(
       timeZones,
       [() => props.timeZoneFilters],
       emit,
-      innerFetch,
+      fetch,
       null,
       (item: TimeZoneInfos) => item.id,
       (item: TimeZoneInfos) => item.id
     );
 
     return {
+      ColorEnum,
       timeZones,
       toggleSet,
       loading,
       search,
-      customFilter,
       onUpdate
     };
   }

package/components/buttons/FSButtonAdd.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    prependIcon="mdi-plus-circle-outline"
+    :label="$tr('ui.button.add', 'Add')"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonAdd",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

package/components/buttons/FSButtonAddIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <FSButton
+    icon="mdi-plus-circle-outline"
+    variant="icon"
+    :color="ColorEnum.Primary"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonAddIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    };
+  }
+});
+</script>