@dative-gpi/foundation-shared-components 1.0.137 → 1.0.139-auth-token

package/components/FSCheckbox.vue

@@ -50,6 +50,7 @@
         v-if="$props.description"
         class="fs-checkbox-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSChipGroup.vue

@@ -0,0 +1,69 @@
+<template>
+  <FSWrapGroup
+    v-if="$props.variant === 'wrap'"
+    v-bind="$attrs"
+  >
+    <FSChip
+      v-for="(label, index) in $props.labels"
+      :key="index"
+      :variant="$props.chipVariant"
+      :color="$props.color"
+      :label="label"
+    />
+    <slot />
+  </FSWrapGroup>
+  <FSSlideGroup
+    v-if="$props.variant === 'slide'"
+    v-bind="$attrs"
+  >
+    <FSChip
+      v-for="(label, index) in $props.labels"
+      :key="index"
+      :variant="$props.chipVariant"
+      :color="$props.color"
+      :label="label"
+    />
+    <slot />
+  </FSSlideGroup>
+</template>
+  
+  <script lang="ts">
+import { defineComponent, type PropType } from "vue";
+  
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+  
+import FSSlideGroup from "./FSSlideGroup.vue";
+import FSWrapGroup from "./FSWrapGroup.vue";
+import FSChip from "./FSChip.vue";
+  
+export default defineComponent({
+  name: "FSChipGroup",
+  components: {
+    FSSlideGroup,
+    FSWrapGroup,
+    FSChip
+  },
+  props: {
+    labels: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    variant: {
+      type: String as PropType<"wrap" | "slide">,
+      required: false,
+      default: "wrap"
+    },
+    chipVariant: {
+      type: String as PropType<"standard" | "full" | "borderless">,
+      required: false,
+      default: "full"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    }
+  }
+});
+  </script>

package/components/FSRadio.vue

@@ -50,6 +50,7 @@
         v-if="$props.description"
         class="fs-radio-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSlider.vue

@@ -35,7 +35,7 @@
       :elevation="0"
       :tickSize="4"
       :modelValue="$props.modelValue ?? undefined"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @update:modelValue="$emit('update:modelValue', $event)"
       v-bind="$attrs"
     >
       <template
@@ -55,6 +55,7 @@
         v-if="$props.description"
         class="fs-slider-description"
         font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}

package/components/FSSwitch.vue

@@ -1,29 +1,25 @@
 <template>
-  <FSRow
-    width="hug"
-    align="top-left"
-    gap="16px"
+  <FSCol
     padding="8px 0px"
-    :wrap="false"
   >
-    <v-switch
-      v-if="variant == 'left'"
-      class="fs-switch"
-      hide-details
-      inset
-      :validateOn="validateOn"
-      :rules="$props.rules"
-      :ripple="false"
-      :style="style"
-      :modelValue="$props.modelValue"
-      @update:modelValue="onToggle"
-      v-bind="$attrs"
-    />
-    <slot>
-      <FSCol
-        width="hug"
-        v-if="$props.label || $props.description || $slots.description"
-      >
+    <FSRow
+      gap="16px"
+      :wrap="false"
+    >
+      <v-switch
+        v-if="variant == 'left'"
+        class="fs-switch"
+        hide-details
+        inset
+        :validateOn="validateOn"
+        :rules="$props.rules"
+        :ripple="false"
+        :style="style"
+        :modelValue="$props.modelValue"
+        @update:modelValue="onToggle"
+        v-bind="$attrs"
+      />
+      <FSCol>
         <FSSpan
           v-if="$props.label"
           class="fs-switch-label"
@@ -41,33 +37,31 @@
             class="fs-switch-description"
             font="text-overline"
             :style="style"
+            :lineClamp="2"
           >
             {{ $props.description }}
           </FSSpan>
         </slot>
-        <slot
-          name="footer"
-        />
       </FSCol>
-    </slot>
-    <FSRow
-      v-if="variant == 'right'"
-      align="center-right"
-    >
-      <v-switch
-        class="fs-switch"
-        hide-details
-        inset
-        :validateOn="validateOn"
-        :rules="$props.rules"
-        :ripple="false"
-        :style="style"
-        :modelValue="$props.modelValue"
-        @update:modelValue="onToggle"
-        v-bind="$attrs"
-      />
+      <FSRow
+        v-if="variant == 'right'"
+        align="center-right"
+      >
+        <v-switch
+          class="fs-switch"
+          hide-details
+          inset
+          :validateOn="validateOn"
+          :rules="$props.rules"
+          :ripple="false"
+          :style="style"
+          :modelValue="$props.modelValue"
+          @update:modelValue="onToggle"
+          v-bind="$attrs"
+        />
+      </FSRow>
     </FSRow>
-  </FSRow>
+  </FSCol>
 </template>
 
 <script lang="ts">

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -5,6 +5,9 @@
     :toggleSet="false"
     :multiple="false"
     :items="items"
+    :customFilter="(_label: string, _query: string, item: any) => {
+      return item.value !== $props.modelValue?.placeId;
+    }"
     :modelValue="$props.modelValue?.placeId"
     @update:modelValue="onUpdate"
     v-model:search="search"

package/components/fields/FSBaseField.vue

@@ -54,6 +54,7 @@
         v-if="$props.description"
         class="fs-base-field-description"
         font="text-overline"
+        :lineClamp="2"
       >
         {{ $props.description }}
       </FSSpan>

package/components/fields/FSClosableSearchField.vue

@@ -0,0 +1,83 @@
+<template>
+  <FSSearchField
+    :modelValue="$props.modelValue"
+    :appendInnerIcon="$props.closable ? $props.appendInnerIcon : null"
+    :clearable="false"
+    @click:appendInner="onCloseClicked"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSSearchField>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSSearchField from "./FSSearchField.vue";
+
+export default defineComponent({
+  name: "FSClosableSearchField",
+  components: {
+    FSSearchField
+  },
+  props: {
+    closable: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    unfocusOnClose: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    clearOnClose: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    appendInnerIcon: {
+      type: String as PropType<string | undefined>,
+      required: false,
+      default: 'mdi-close'
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(props, { emit }) {
+    const onCloseClicked = ($event: MouseEvent) => {
+      if(!props.closable) {
+        return;
+      }
+
+      if (props.unfocusOnClose) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        (document.activeElement  as HTMLElement)?.blur();
+      }
+      if (props.clearOnClose) {
+        emit('update:modelValue', null);
+      }
+
+      emit('close');
+    };
+
+    return {
+      onCloseClicked
+    };
+  }
+});
+</script>

package/components/fields/FSEntityFieldUI.vue

@@ -14,18 +14,20 @@
         :wrap="false"
       >
         <FSSelectField
+          :editable="$props.editable"
+          :items="actualEntityTypes"
           :hideHeader="true"
+          :clearable="false"
           :modelValue="$props.entityType"
           @update:modelValue="$emit('update:entityType', $event)"
-          :items="actualEntityTypes"
-          :clearable="false"
         />
         <template
           v-if="itemsCount > 0"
         >
           <FSButton
-            :label="$tr('ui.common.edit', 'Edit')"
             icon="mdi-pencil"
+            :label="$tr('ui.common.edit', 'Edit')"
+            :editable="$props.editable"
             @click="$emit('click:select')"
           />
         </template>
@@ -33,8 +35,9 @@
           v-else
         >
           <FSButton
-            :label="$tr('ui.common.select', 'Select')"
             icon="mdi-plus-circle-multiple-outline"
+            :label="$tr('ui.common.select', 'Select')"
+            :editable="$props.editable"
             @click="$emit('click:select')"
           />
         </template>

package/components/fields/FSRichTextField.vue

@@ -215,7 +215,8 @@
       <FSSpan
         v-if="!readonly && $props.description"
         class="fs-rich-text-field-description"
-        font="text-underline"
+        font="text-overline"
+        :lineClamp="2"
         :style="style"
       >
         {{ $props.description }}
@@ -500,11 +501,11 @@ export default defineComponent({
           return;
         }
         const editorModelValue = JSON.stringify(editorState.toJSON());
-        if(editorModelValue === emptyLexicalState) {
+        if(editorModelValue === emptyLexicalState && props.modelValue !== null) {
           emit("update:modelValue", null);
           return;
         }
-        if(editorModelValue !== props.modelValue) {
+        if(editorModelValue !== emptyLexicalState && editorModelValue !== props.modelValue) {
           emit("update:modelValue", editorModelValue);
         }
       });
@@ -673,21 +674,16 @@ export default defineComponent({
         return;
       }
       if (props.modelValue != null) {
-        editor.update(() => {
-          if (typeof props.modelValue === "string") {
-            if (props.modelValue !== "") {
-              editor.setEditorState(editor.parseEditorState(props.modelValue!));
-            }
-          }
-          else {
-            editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));
-          }
-        });
-        return;
+        if (typeof props.modelValue === "string" && props.modelValue !== "") {
+          editor.setEditorState(editor.parseEditorState(props.modelValue!));
+          return;
+        }
+        if (typeof props.modelValue === "object") {
+          editor.setEditorState(editor.parseEditorState(JSON.stringify(props.modelValue)));
+          return;
+        }
       }
-      editor.update(() => {
-        editor.setEditorState(editor.parseEditorState(emptyLexicalState));
-      });
+      editor.setEditorState(editor.parseEditorState(emptyLexicalState));
     }
 
     watch(() => props.modelValue, () => {

package/components/fields/FSTranslateRichTextField.vue

@@ -32,7 +32,9 @@
             >
               {{ $tr('translate-rich-text-field.translate-in', 'Translate in {0}', language.label) }}
             </FSSpan>
-            <FSIcon>{{ language.icon }}</FSIcon>
+            <FSIcon>
+              {{ language.icon }}
+            </FSIcon>
           </FSRow>
         </template>
       </FSRichTextField>