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

package/components/fields/FSAutocompleteField.vue

@@ -1,9 +1,19 @@
 <template>
-  <FSLoader
+  <template
     v-if="$props.loading"
-    width="100%"
-    :height="['40px', '36px']"
-  />
+  >
+    <FSCol>
+      <FSLoader
+        v-if="!$props.hideHeader"
+        variant="text-overline"
+      />
+      <FSLoader
+        v-if="$props.loading"
+        width="100%"
+        :height="['40px', '36px']"
+      />
+    </FSCol>
+  </template>
   <template
     v-else
   >
@@ -11,21 +21,19 @@
       v-if="isExtraSmall"
     >
       <FSTextField
-        :label="$props.label"
+        :validationValue="$props.modelValue"
         :description="$props.description"
         :hideHeader="$props.hideHeader"
-        :required="$props.required"
         :clearable="$props.clearable"
         :editable="$props.editable"
-        :readonly="true"
+        :required="$props.required"
+        :label="$props.label"
         :rules="$props.rules"
         :messages="messages"
-        :validateOn="validateOn"
-        :validationValue="$props.modelValue"
+        :readonly="true"
         :modelValue="mobileValue"
         @update:modelValue="$emit('update:modelValue', $event)"
         @click="openMobileOverlay"
-        @blur="blurred = true"
         v-bind="$attrs"
       >
         <template
@@ -37,6 +45,15 @@
             v-bind="slotData"
           />
         </template>
+        <template
+          v-if="mobileSelectionProps"
+          #prepend-inner
+        >
+          <slot
+            name="selection-mobile"
+            v-bind="mobileSelectionProps"
+          />
+        </template>
         <template
           #append-inner
         >
@@ -60,38 +77,54 @@
           #body
         >
           <FSSearchField
+            :hideHeader="true"
             v-model="search"
           />
           <FSFadeOut
             :height="height"
           >
             <FSCol
+              v-if="$props.multiple"
               gap="12px"
             >
-              <template
-                v-if="$props.multiple"
+              <FSRow
+                v-for="(item, index) in searchItems"
+                :key="index"
               >
-                <FSRow
-                  v-for="(item, index) in searchItems"
-                  :key="index"
+                <FSCheckbox
+                  :label="item[$props.itemTitle]"
+                  :editable="$props.editable"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
+                  @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
                 >
-                  <FSCheckbox
-                    :label="item[$props.itemTitle]"
-                    :editable="$props.editable"
-                    :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
-                    @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
-                  />
-                </FSRow>
-              </template>
-              <FSRadioGroup
-                v-else
-                gap="12px"
-                :values="searchItems.map((item: any) => ({ value: item[$props.itemValue], label: item[$props.itemTitle] }))"
-                :modelValue="$props.modelValue"
-                :editable="$props.editable"
-                @update:modelValue="onRadioChange"
-              />
+                  <template
+                    #label="{ font }"
+                  >
+                    <slot
+                      name="item-label"
+                      v-bind="mobileItemProps(item, font)"
+                    />
+                  </template>
+                </FSCheckbox>
+              </FSRow>
             </FSCol>
+            <FSRadioGroup
+              v-else
+              gap="12px"
+              :values="searchItems.map((item: any) => ({ value: item[$props.itemValue], label: item[$props.itemTitle], item: item  }))"
+              :editable="$props.editable"
+              :modelValue="$props.modelValue"
+              @update:modelValue="onRadioChange"
+            >
+              <template
+                #label="{ item, font }"
+              >
+                <slot
+                  name="item-label"
+                  v-bind="mobileItemProps(item, font)"
+                />
+              </template>
+            </FSRadioGroup>
           </FSFadeOut>
         </template>
       </FSDialogMenu>
@@ -100,21 +133,22 @@
       v-else
     >
       <FSBaseField
-        :label="$props.label"
         :description="$props.description"
         :hideHeader="$props.hideHeader"
         :required="$props.required"
         :editable="$props.editable"
+        :label="$props.label"
         :messages="messages"
       >
         <FSToggleSet
           v-if="$props.toggleSet"
-          variant="slide"
-          :values="$props.items"
+          :editable="$props.editable"
           :multiple="$props.multiple"
+          :required="$props.required"
+          :values="$props.items"
           :rules="$props.rules"
           :modelValue="$props.modelValue"
-          @update:modelValue="onUpdate"
+          @update:modelValue="$emit('update:modelValue', $event)"
           v-bind="$attrs"
         >
           <template
@@ -131,28 +165,37 @@
           v-else
           class="fs-autocomplete-field"
           variant="outlined"
-          :menuIcon="null"
-          :style="style"
-          :listProps="listStyle"
-          :class="classes"
-          :hideDetails="true"
-          :items="$props.items"
-          :autoSelectFirst="true"
-          :multiple="$props.multiple"
+          :clearable="$props.clearable && $props.editable && !!$props.modelValue"
           :itemTitle="$props.itemTitle"
           :itemValue="$props.itemValue"
           :readonly="!$props.editable"
-          :loading="$props.loading"
-          :clearable="$props.clearable && $props.editable && !!$props.modelValue"
-          :returnObject="$props.returnObject"
-          :rules="$props.rules"
+          :multiple="$props.multiple"
           :validateOn="validateOn"
+          :autoSelectFirst="true"
+          :persistentClear="true"
+          :listProps="listStyle"
+          :returnObject="false"
+          :items="$props.items"
+          :rules="$props.rules"
+          :hideDetails="true"
+          :menuIcon="null"
+          :class="classes"
+          :style="style"
           :modelValue="$props.modelValue"
-          @update:modelValue="onUpdate"
-          @blur="blurred = true"
+          @update:modelValue="$emit('update:modelValue', $event)"
+          @click="onClick"
           v-model:search="search"
           v-bind="$attrs"
         >
+          <template
+            v-for="(_, name) in autocompleteSlots"
+            v-slot:[name]="slotData"
+          >
+            <slot
+              :name="`autocomplete-${name}`"
+              v-bind="slotData"
+            />
+          </template>
           <template
             #item="{ props, item }"
           >
@@ -161,28 +204,47 @@
             >
               <FSRow
                 align="center-left"
-                :wrap="false"
               >
                 <FSCheckbox
                   v-if="$props.multiple"
                   :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
                   @click="props.onClick"
-                />
-                <FSSpan>
-                  {{ item.raw[$props.itemTitle] }}
+                >
+                  <template
+                    #label="{ font }"
+                  >
+                    <slot
+                      name="item-label"
+                      v-bind="{ item, font }"
+                    >
+                      <FSSpan
+                        :font="font"
+                      >
+                        {{ item.raw[$props.itemTitle] }}
+                      </FSSpan>
+                    </slot>
+                  </template>
+                </FSCheckbox>
+                <FSSpan
+                  v-else
+                >
+                  <slot
+                    name="item-label"
+                    v-bind="{
+                      item,
+                      font: $props.modelValue === item.raw[$props.itemTitle] ? 'text-button' : 'text-body'
+                    }"
+                  >
+                    <FSSpan
+                      :font="$props.modelValue === item.raw[$props.itemTitle] ? 'text-button' : 'text-body'"
+                    >
+                      {{ item.raw[$props.itemTitle] }}
+                    </FSSpan>
+                  </slot>
                 </FSSpan>
               </FSRow>
             </v-list-item>
           </template>
-          <template
-            v-for="(_, name) in autocompleteSlots"
-            v-slot:[name]="slotData"
-          >
-            <slot
-              :name="`autocomplete-${name}`"
-              v-bind="slotData"
-            />
-          </template>
           <template
             #clear
           >
@@ -216,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>
@@ -230,7 +304,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from "vue";
+import type { PropType} 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";
@@ -251,13 +326,14 @@ import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSAutocompleteField",
+  inheritAttrs: false,
   components: {
     FSSearchField,
     FSDialogMenu,
     FSRadioGroup,
-    FSToggleSet,
     FSBaseField,
     FSTextField,
+    FSToggleSet,
     FSCheckbox,
     FSFadeOut,
     FSButton,
@@ -292,7 +368,7 @@ export default defineComponent({
       default: "label"
     },
     modelValue: {
-      type: [Array, String] as PropType<string[] | string | null>,
+      type: [Array, String, Object] as PropType<string[] | string | null | any>,
       required: false,
       default: null
     },
@@ -306,11 +382,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    returnObject: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     required: {
       type: Boolean,
       required: false,
@@ -345,12 +416,17 @@ 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, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -375,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
       };
     });
 
@@ -431,7 +508,7 @@ export default defineComponent({
       if (props.multiple) {
         if (Array.isArray(props.modelValue)) {
           return props.modelValue.map((value: any) => {
-            const item = props.items.find((item: Object) => item[props.itemValue] === value);
+            const item = props.items.find((item: object) => item[props.itemValue] === value);
             if (item) {
               return item[props.itemTitle];
             }
@@ -439,7 +516,7 @@ export default defineComponent({
         }
       }
       if (props.modelValue) {
-        const item = props.items.find((item: Object) => item[props.itemValue] === props.modelValue);
+        const item = props.items.find((item: object) => item[props.itemValue] === props.modelValue);
         if (item) {
           return item[props.itemTitle];
         }
@@ -447,6 +524,40 @@ export default defineComponent({
       return null;
     });
 
+    const mobileSelectionProps = computed((): any | null => {
+      const item = props.items.find((item: any) => item[props.itemValue] === props.modelValue);
+      if (item) {
+        return {
+          item: {
+            title: "",
+            value: item[props.itemValue],
+            props: {
+              title: item[props.itemTitle],
+              value: item[props.itemValue]
+            },
+            raw: { ...item }
+          },
+          font: "text-body"
+        };
+      }
+      return null;
+    });
+
+    const mobileItemProps = (item: any, font: "text-body" | "text-button" | null): any => {
+      return {
+        item: {
+          title: "",
+          value: item[props.itemValue],
+          props: {
+            title: item[props.itemTitle],
+            value: item[props.itemValue]
+          },
+          raw: { ...item }
+        },
+        font
+      }
+    };
+
     const openMobileOverlay = () => {
       if (!props.editable) {
         return;
@@ -454,39 +565,41 @@ export default defineComponent({
       dialog.value = true;
     };
 
-    const onRadioChange = (value: any) => {
-      emit('update:modelValue', value);
+    const onRadioChange = (value: string | null) => {
+      emit("update:modelValue", value);
       dialog.value = false;
     };
 
-    const onCheckboxChange = (value: any) => {
+    const onCheckboxChange = (value: string) => {
       if (Array.isArray(props.modelValue)) {
         if (props.modelValue.includes(value)) {
-          emit('update:modelValue', props.modelValue.filter((item: any) => item !== value));
+          emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
         }
         else {
-          emit('update:modelValue', [...props.modelValue, value]);
+          emit("update:modelValue", [...props.modelValue, value]);
         }
       }
-      else {
+      else if (props.modelValue != null) {
         if (props.modelValue === value) {
-          emit('update:modelValue', []);
+          emit("update:modelValue", []);
         }
         else {
-          emit('update:modelValue', [props.modelValue, value]);
+          emit("update:modelValue", [props.modelValue, value]);
         }
       }
+      else {
+        emit("update:modelValue", [value]);
+      }
     };
 
-    const onUpdate = (value: string[] | string) => {
-      emit('update:modelValue', value);
+    const onClick = () => {
+      if (props.modelValue && !props.multiple) {
+        search.value="";
+      } 
     };
 
-    watch(search, () => {
-      emit("update:search", search.value);
-    });
-
     return {
+      mobileSelectionProps,
       autocompleteSlots,
       toggleSetSlots,
       isExtraSmall,
@@ -496,7 +609,6 @@ export default defineComponent({
       ColorEnum,
       listStyle,
       messages,
-      blurred,
       classes,
       dialog,
       height,
@@ -505,8 +617,9 @@ export default defineComponent({
       style,
       openMobileOverlay,
       onCheckboxChange,
+      mobileItemProps,
       onRadioChange,
-      onUpdate
+      onClick
     };
   }
 });

package/components/fields/FSBaseField.vue

@@ -54,7 +54,8 @@
 </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 { ColorEnum } from "@dative-gpi/foundation-shared-components/models";