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

package/components/fields/FSSelectField.vue

@@ -4,21 +4,20 @@
       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"
+        :validateOn="validateOn"
+        :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
@@ -30,6 +29,15 @@
             v-bind="slotData"
           />
         </template>
+        <template
+          v-if="mobileSelectionProps"
+          #prepend-inner
+        >
+          <slot
+            name="selection-mobile"
+            v-bind="mobileSelectionProps"
+          />
+        </template>
         <template
           #append-inner
         >
@@ -68,17 +76,35 @@
                   :editable="$props.editable"
                   :modelValue="$props.modelValue?.includes(item[$props.itemValue])"
                   @update:modelValue="() => onCheckboxChange(item[$props.itemValue])"
-                />
+                >
+                  <template
+                    #label="{ font }"
+                  >
+                    <slot
+                      name="item-label"
+                      v-bind="mobileItemProps(item, font)"
+                    />
+                  </template>
+                </FSCheckbox>
               </FSRow>
             </FSCol>
             <FSRadioGroup
               v-else
               gap="12px"
-              :values="$props.items.map((item: any) => ({ value: item[$props.itemValue], label: item[$props.itemTitle] }))"
-              :modelValue="$props.modelValue"
+              :values="$props.items.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>
@@ -87,34 +113,43 @@
       v-else
     >
       <FSBaseField
-        :label="$props.label"
         :description="$props.description"
         :hideHeader="$props.hideHeader"
         :required="$props.required"
         :editable="$props.editable"
+        :label="$props.label"
         :messages="messages"
       >
         <v-select
           class="fs-select-field"
           variant="outlined"
-          :menuIcon="null"
-          :style="style"
-          :listProps="listStyle"
-          :hideDetails="true"
-          :items="$props.items"
+          :clearable="$props.clearable && $props.editable && !!$props.modelValue"
           :itemTitle="$props.itemTitle"
           :itemValue="$props.itemValue"
           :readonly="!$props.editable"
-          :clearable="$props.clearable && $props.editable && !!$props.modelValue"
-          :returnObject="$props.returnObject"
-          :rules="$props.rules"
-          :validateOn="validateOn"
           :multiple="$props.multiple"
+          :validateOn="validateOn"
+          :persistentClear="true"
+          :listProps="listStyle"
+          :returnObject="false"
+          :items="$props.items"
+          :rules="$props.rules"
+          :hideDetails="true"
+          :menuIcon="null"
+          :style="style"
           :modelValue="$props.modelValue"
           @update:modelValue="$emit('update:modelValue', $event)"
-          @blur="blurred = true"
           v-bind="$attrs"
         >
+          <template
+            v-for="(_, name) in $slots"
+            v-slot:[name]="slotData"
+          >
+            <slot
+              :name="name"
+              v-bind="slotData"
+            />
+          </template>
           <template
             #item="{ props, item }"
           >
@@ -126,24 +161,39 @@
               >
                 <FSCheckbox
                   v-if="$props.multiple"
-                  :modelValue="$props.modelValue?.includes(item.raw.id)"
+                  :modelValue="$props.modelValue?.includes(item.raw[$props.itemValue])"
                   @click="props.onClick"
-                />
-                <FSSpan>
-                  {{ item.raw.label }}
+                >
+                  <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 }"
+                  >
+                    <FSSpan>
+                      {{ item.raw[$props.itemTitle] }}
+                    </FSSpan>
+                  </slot>
                 </FSSpan>
               </FSRow>
             </v-list-item>
           </template>
-          <template
-            v-for="(_, name) in $slots"
-            v-slot:[name]="slotData"
-          >
-            <slot
-              :name="name"
-              v-bind="slotData"
-            />
-          </template>
           <template
             #clear
           >
@@ -173,6 +223,17 @@
               />
             </slot>
           </template>
+          <template
+            #no-data
+          >
+            <FSRow
+              padding="17px"
+            >
+              <FSSpan>
+                {{ $tr("ui.common.no-data", "No data") }}
+              </FSSpan>
+            </FSRow>
+          </template>
         </v-select>
       </FSBaseField>
     </template>
@@ -180,7 +241,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { useBreakpoints, useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -245,11 +307,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    returnObject: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     required: {
       type: Boolean,
       required: false,
@@ -283,7 +340,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { validateOn, blurred, getMessages } = useRules();
+    const { validateOn, getMessages } = useRules();
     const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
 
@@ -313,7 +370,7 @@ export default defineComponent({
       };
     });
 
-    const listStyle = computed((): { [key: string] : Object } => {
+    const listStyle = computed((): { [key: string] : object } => {
       return {
         style: style.value
       };
@@ -330,7 +387,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];
             }
@@ -338,7 +395,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];
         }
@@ -346,6 +403,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;
@@ -353,43 +444,47 @@ 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]);
+      }
     };
 
     return {
+      mobileSelectionProps,
       isExtraSmall,
       mobileValue,
       validateOn,
       ColorEnum,
       listStyle,
       messages,
-      blurred,
       dialog,
       height,
       style,
       openMobileOverlay,
       onCheckboxChange,
+      mobileItemProps,
       onRadioChange
     };
   }

package/components/fields/FSTagField.vue

@@ -11,12 +11,11 @@
       :validateOn="validateOn"
       :validationValue="$props.modelValue"
       @keydown.enter="onAdd"
-      @blur="blurred = true"
       v-model="innerValue"
       v-bind="$attrs"
     >
       <template
-        v-for="(_, name) in $slots"
+        v-for="(_, name) in slots"
         v-slot:[name]="slotData"
       >
         <slot
@@ -27,17 +26,16 @@
       <template
         #append-inner
       >
+        <FSButton
+          variant="icon"
+          icon="mdi-tag-outline"
+          :editable="$props.editable"
+          :color="ColorEnum.Dark"
+          @click="onAdd"
+        />
         <slot
           name="append-inner"
-        >
-          <FSButton
-            variant="icon"
-            icon="mdi-tag-outline"
-            :editable="$props.editable"
-            :color="ColorEnum.Dark"
-            @click="onAdd"
-          />
-        </slot>
+        />
       </template>
     </FSTextField>
     <FSTagGroup
@@ -51,10 +49,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSTextField from "./FSTextField.vue";
 import FSTagGroup from "../FSTagGroup.vue";
@@ -118,8 +118,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const {validateOn, blurred, getMessages} = useRules();
+    const {validateOn, getMessages} = useRules();
     const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots["append-inner"];
 
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
@@ -171,7 +174,7 @@ export default defineComponent({
       validateOn,
       ColorEnum,
       messages,
-      blurred,
+      slots,
       style,
       onRemove,
       onAdd