@dative-gpi/foundation-shared-components 0.0.220 → 0.0.222

package/components/FSDialogMultiFormBody.vue

@@ -0,0 +1,231 @@
+<template>
+  <FSWindow
+    width="100%"
+    :modelValue="currentStep - 1"
+  >
+    <FSForm
+      v-for="(step, index) in $props.steps"
+      :variant="$props.variant"
+      :key="index"
+      @submit="onSubmit"
+      v-model="valid"
+    >
+      <FSCol
+        gap="24px"
+      >
+        <FSFadeOut
+          :height="height"
+          padding="0 8px 0 0"
+        >
+          <slot
+            :name="`step-${step}`"
+          />
+        </FSFadeOut>
+        <FSRow
+          padding="0 16px 0 0"
+        >
+          <slot
+            name="left-footer"
+          />
+          <FSRow
+            class="fs-dialog-actions"
+            align="top-right"
+            :wrap="false"
+          >
+            <FSButton
+              :prependIcon="$props.cancelButtonPrependIcon"
+              :appendIcon="$props.cancelButtonAppendIcon"
+              :variant="$props.cancelButtonVariant"
+              :color="$props.cancelButtonColor"
+              :label="previousButtonLabel"
+              @click="onPrevious()"
+            />
+            <FSButton
+              type="submit"
+              :prependIcon="$props.submitButtonPrependIcon"
+              :appendIcon="$props.submitButtonAppendIcon"
+              :color="$props.submitButtonColor"
+              :variant="nextButtonVariant"
+              :editable="$props.editable"
+              :label="nextButtonLabel"
+              :load="$props.load"
+            />
+          </FSRow>
+        </FSRow>
+      </FSCol>
+    </FSForm>
+  </FSWindow>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSFadeOut from "./FSFadeOut.vue";
+import FSButton from "./FSButton.vue";
+import FSForm from "./FSForm.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSDialogMultiFormBody",
+  components: {
+    FSFadeOut,
+    FSButton,
+    FSForm,
+    FSRow
+  },
+  props: {
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    width: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "auto"
+    },
+    variant: {
+      type: String as PropType<"standard" | "submit">,
+      required: false,
+      default: "submit"
+    },
+    steps: {
+      type: Number,
+      required: true
+    },
+    cancelButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    cancelButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    cancelButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    cancelButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    cancelButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    submitButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    submitButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    submitButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    submitButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "full"
+    },
+    submitButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["click:cancelButton", "click:submitButton"],
+  setup(props, { emit }) {
+    const { isMobileSized } = useBreakpoints();
+    const { $tr } = useTranslationsProvider();
+
+    const currentStep = ref(1);
+    const valid = ref(false);
+    const valids = ref(Array.from({ length: props.steps }, () => false));
+
+    const height = computed(() => {
+      const other = 24 + 24                                          // Paddings
+        + (isMobileSized.value ? 24 : 32) + 24                       // Title
+        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
+        + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
+      return `calc(100vh - 40px - ${other}px)`;
+    });
+
+    const previousButtonLabel = computed(() => {
+      return currentStep.value == 1
+        ? props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel")
+        : $tr("ui.button.back", "Back");
+    });
+
+    const nextButtonLabel = computed(() => {
+      return currentStep.value == props.steps
+        ? props.submitButtonLabel ?? $tr("ui.button.validate", "Validate")
+        : $tr("ui.button.next", "Next");
+    });
+
+    const nextButtonVariant = computed(() => {
+      return currentStep.value == props.steps
+        ? props.submitButtonVariant ?? "full" : "standard";
+    });
+
+    const onPrevious = () => {
+      if (currentStep.value > 1) {
+        currentStep.value--;
+      }
+      else {
+        emit("click:cancelButton");
+      }
+    };
+
+    const onSubmit = () => {
+      if (valid.value) {
+        switch (currentStep.value) {
+          case props.steps:
+            emit("click:submitButton");
+            break;
+          default:
+            currentStep.value++;
+            break;
+        }
+      }
+    };
+
+    return {
+      previousButtonLabel,
+      nextButtonVariant,
+      nextButtonLabel,
+      currentStep,
+      ColorEnum,
+      height,
+      valids,
+      valid,
+      onPrevious,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/autocompletes/FSAutocompleteTag.vue

@@ -0,0 +1,129 @@
+<template>
+  <FSCol>
+    <FSAutocompleteField
+      v-if="variant=='standard'"
+      :label="label"
+      :items="innerItems"
+      :multiple="true"
+      :modelValue="modelValue"
+      @update:modelValue="$emit('update:modelValue', $event)"
+      @keydown="onKeydown"
+      v-binds="$attrs"
+    >
+      <template
+        #autocomplete-chip
+      >
+      </template>
+    </FSAutocompleteField>
+    <FSAutocompleteField
+      v-else
+      :label="label"
+      :items="innerItems"
+      :multiple="true"
+      :modelValue="modelValue"
+      :showSearch="true"
+      @update:modelValue="$emit('update:modelValue', $event)"
+      @add:item="onAddItem"
+      @keydown="onKeydown"
+      v-binds="$attrs"
+    >
+      <template
+        #autocomplete-chip
+      >
+      </template>
+    </FSAutocompleteField> 
+    <FSTagGroup
+      v-if="modelValue != null"
+      :tags="innerItems.filter(i=>modelValue && modelValue.includes(i.id)).map(i=>i.label) ?? []"
+      @remove="onRemoveValue($event)"
+    />
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, 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<string[] | null>,
+      required: false,
+      default: () => []
+    },
+    items: {
+      type: Array as PropType<{id : string, label : string}[]>,
+      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}[]>([]);
+
+    const innerItems = computed(() => {
+      if (props.variant === 'standard') {
+        return props.items
+      }
+      else {
+        return props.items.concat(tagValues.value.filter(t=>props.modelValue?.includes(t.id)) ?? []);
+      }
+    });
+
+    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 !== idValue) ?? []]);
+      }
+    };
+
+    const onAddItem = (value: string) => {
+      if (innerItems.value.map((v) => v.label).includes(value)) {
+        return;
+      }
+      let item = {id: uuidv4(), label: value};
+      tagValues.value.push(item);
+      emit('update:modelValue', [...props.modelValue ?? [], ...[item.id]]);
+    };
+
+    const onKeydown = (event: KeyboardEvent) => {
+      if (event.key === 'Backspace') {
+        emit('update:modelValue', [...props.modelValue ?? []]);
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      if (props.modelValue) {
+        tagValues.value = tagValues.value.filter((v) => props.modelValue!.includes(v.id));
+      }
+    }, {immediate: true});
+
+    return {
+      innerItems,
+      onRemoveValue,
+      onAddItem,
+      onKeydown
+    };
+  }
+});
+</script>

package/components/fields/FSAutocompleteField.vue

@@ -278,6 +278,18 @@
             #no-data
           >
             <FSRow
+              v-if="showSearch"
+              padding="17px"
+            >
+              <FSButton
+                variant="icon"
+                :label="$tr('ui.common.add', 'Add this item')"
+                :color="ColorEnum.Primary"
+                @click="$emit('add:item', search)"
+              />
+            </FSRow>
+            <FSRow
+              v-else
               padding="17px"
             >
               <FSSpan>
@@ -293,7 +305,7 @@
 
 <script lang="ts">
 import type { PropType} from "vue";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -404,9 +416,14 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    showSearch: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ["update:modelValue", "update:search"],
+  emits: ["update:modelValue", "update:search", "add:item"],
   setup: (props, { emit }) => {
     const { isExtraSmall, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
@@ -434,13 +451,14 @@ export default defineComponent({
         };
       }
       return {
-        "--fs-autocomplete-field-cursor":              "text",
-        "--fs-autocomplete-field-background-color":    backgrounds.base,
-        "--fs-autocomplete-field-border-color":        lights.dark,
-        "--fs-autocomplete-field-color":               darks.base,
-        "--fs-autocomplete-field-active-border-color": darks.dark,
-        "--fs-autocomplete-field-error-color":         errors.base,
-        "--fs-autocomplete-field-error-border-color":  errors.base
+        "--fs-autocomplete-field-cursor":                   "text",
+        "--fs-autocomplete-field-background-color":         backgrounds.base,
+        "--fs-autocomplete-field-no-data-background-color": lights.light,
+        "--fs-autocomplete-field-border-color":             lights.dark,
+        "--fs-autocomplete-field-color":                    darks.base,
+        "--fs-autocomplete-field-active-border-color":      darks.dark,
+        "--fs-autocomplete-field-error-color":              errors.base,
+        "--fs-autocomplete-field-error-border-color":       errors.base
       };
     });
 
@@ -576,19 +594,10 @@ export default defineComponent({
 
     const onClick = () => {
       if (props.modelValue && !props.multiple) {
-        search.value = "";
-        emit("update:search", search.value);
-        emit("update:modelValue", null);
-      }
+        search.value="";
+      } 
     };
 
-    watch(search, () => {
-      emit("update:search", search.value);
-      if (props.modelValue && search.value &&  !props.multiple) {
-        emit("update:modelValue", null);
-      }
-    });
-
     return {
       mobileSelectionProps,
       autocompleteSlots,

package/package.json

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