@dative-gpi/foundation-shared-components 0.0.128 → 0.0.130

package/components/FSButton.vue

@@ -25,7 +25,7 @@
       >
         <FSIcon
           v-if="$props.prependIcon || $props.icon"
-          size="l"
+          :size="$props.iconSize"
         >
           {{ $props.prependIcon ?? $props.icon }}
         </FSIcon>
@@ -45,7 +45,7 @@
       >
         <FSIcon
           v-if="$props.appendIcon"
-          size="l"
+          :size="$props.iconSize"
         >
           {{ $props.appendIcon }}
         </FSIcon>
@@ -79,7 +79,7 @@
       >
         <FSIcon
           v-if="$props.icon"
-          size="l"
+          :size="$props.iconSize"
         >
           {{ $props.icon }}
         </FSIcon>
@@ -98,7 +98,7 @@
       >
         <FSIcon
           v-if="$props.icon"
-          size="l"
+          :size="$props.iconSize"
         >
           {{ $props.icon }}
         </FSIcon>
@@ -114,7 +114,7 @@
     >
       <FSIcon
         v-if="$props.icon"
-        size="l"
+        :size="$props.iconSize"
       >
         {{ $props.icon }}
       </FSIcon>
@@ -178,6 +178,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    iconSize: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "l"
+    },
     variant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,

package/components/FSToggleSet.vue

@@ -1,6 +1,7 @@
 <template>
   <v-input
     class="fs-toggle-set"
+    :rules="$props.rules"
     :modelValue="$props.modelValue"
   >
     <FSWrapGroup
@@ -109,6 +110,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,
@@ -129,6 +140,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,
@@ -139,8 +155,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
     },
@@ -154,15 +170,20 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
-    padding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+    errorColor: {
+      type: String as PropType<ColorBase>,
       required: false,
-      default: "0"
+      default: ColorEnum.Error
     },
-    gap: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+    rules: {
+      type: Array as PropType<any[]>,
       required: false,
-      default: "8px"
+      default: () => []
+    },
+    modelValue: {
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number | null>,
+      required: false,
+      default: null
     },
     multiple: {
       type: Boolean,
@@ -181,7 +202,7 @@ export default defineComponent({
     }
   },
   emits: ["update:modelValue"],
-  setup(props, { emit }) {    
+  setup(props, { emit }) {
     const toggleSetRef = ref(null);
 
     const getVariant = (value: FSToggle): "standard" | "full" | "icon" => {

package/components/fields/FSAutocompleteField.vue

@@ -21,17 +21,16 @@
       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"
@@ -132,62 +131,57 @@
     <template
       v-else
     >
-      <FSToggleField
-        v-if="$props.toggleSet"
-        :label="$props.label"
-        :description="$props.description"
-        :hideHeader="$props.hideHeader"
-        :items="$props.items"
-        :returnObject="$props.returnObject"
-        :required="$props.required"
-        :editable="$props.editable"
-        :multiple="$props.multiple"
-        :rules="$props.rules"
-        :validateOn="validateOn"
-        :modelValue="$props.modelValue"
-        @update:modelValue="onUpdate"
-        v-bind="$attrs"
-      >
-        <template
-          v-for="(_, name) in toggleSetSlots"
-          v-slot:[name]="slotData"
-        >
-          <slot
-            :name="`toggle-set-${name}`"
-            v-bind="slotData"
-          />
-        </template>
-      </FSToggleField>
       <FSBaseField
-        v-else
-        :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"
+          :editable="$props.editable"
+          :multiple="$props.multiple"
+          :required="$props.required"
+          :values="$props.items"
+          :rules="$props.rules"
+          :modelValue="$props.modelValue"
+          @update:modelValue="$emit('update:modelValue', $event)"
+          v-bind="$attrs"
+        >
+          <template
+            v-for="(_, name) in toggleSetSlots"
+            v-slot:[name]="slotData"
+          >
+            <slot
+              :name="`toggle-set-${name}`"
+              v-bind="slotData"
+            />
+          </template>
+        </FSToggleSet>
         <v-autocomplete
+          v-else
           class="fs-autocomplete-field"
           variant="outlined"
-          :menuIcon="null"
-          :style="style"
-          :listProps="listStyle"
-          :class="classes"
-          :persistentClear="true"
-          :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"
-          :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"
+          @update:modelValue="$emit('update:modelValue', $event)"
           @click="onClick"
           v-model:search="search"
           v-bind="$attrs"
@@ -298,9 +292,9 @@ import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/found
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSearchField from "./FSSearchField.vue";
-import FSToggleField from "./FSToggleField.vue";
 import FSDialogMenu from "../FSDialogMenu.vue";
 import FSRadioGroup from "../FSRadioGroup.vue";
+import FSToggleSet from "../FSToggleSet.vue";
 import FSBaseField from "./FSBaseField.vue";
 import FSTextField from "./FSTextField.vue";
 import FSCheckbox from "../FSCheckbox.vue";
@@ -315,11 +309,11 @@ export default defineComponent({
   name: "FSAutocompleteField",
   components: {
     FSSearchField,
-    FSToggleField,
     FSDialogMenu,
     FSRadioGroup,
     FSBaseField,
     FSTextField,
+    FSToggleSet,
     FSCheckbox,
     FSFadeOut,
     FSButton,
@@ -368,11 +362,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    returnObject: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     required: {
       type: Boolean,
       required: false,
@@ -551,70 +540,35 @@ export default defineComponent({
     };
 
     const onRadioChange = (value: string | null) => {
-      if (props.returnObject) {
-        emit("update:modelValue", props.items.find((item: any) => item[props.itemValue] === value) ?? null);
-      }
-      else {
-        emit("update:modelValue", value);
-      }
+      emit("update:modelValue", value);
       dialog.value = false;
     };
 
     const onCheckboxChange = (value: string) => {
-      if (props.returnObject) {
-        const item = props.items.find(item => item[props.itemValue] === value);
-        if (Array.isArray(props.modelValue)) {
-          if (props.modelValue.find(item => item[props.itemValue] === value)) {
-            emit("update:modelValue", props.modelValue.filter((item: any) => item[props.itemValue] !== value));
-          }
-          else {
-            if (item) {
-              emit("update:modelValue", [...props.modelValue, item]);
-            }
-          }
+      if (Array.isArray(props.modelValue)) {
+        if (props.modelValue.includes(value)) {
+          emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
         }
         else {
-          if (props.modelValue) {
-            if (props.modelValue[props.itemValue] === value) {
-              emit("update:modelValue", []);
-            }
-            else {
-              emit("update:modelValue", [props.modelValue, item]);
-            }
-          }
-          else {
-            emit("update:modelValue", [item]);
-          }
+          emit("update:modelValue", [...props.modelValue, value]);
         }
       }
       else {
-        if (Array.isArray(props.modelValue)) {
-          if (props.modelValue.includes(value)) {
-            emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
-          }
-          else {
-            emit("update:modelValue", [...props.modelValue, value]);
-          }
+        if (props.modelValue === value) {
+          emit("update:modelValue", []);
         }
         else {
-          if (props.modelValue === value) {
-            emit("update:modelValue", []);
-          }
-          else {
-            emit("update:modelValue", [props.modelValue, value]);
-          }
+          emit("update:modelValue", [props.modelValue, value]);
         }
       }
     };
 
-    const onUpdate = (value: string[] | string) => {
-      emit("update:modelValue", value);
-    };
-
     const onClick = () => {
-      search.value = "";
-      emit("update:search", search.value);
-      emit("update:modelValue", null);
+      if (props.modelValue) {
+        search.value = "";
+        emit("update:search", search.value);
+        emit("update:modelValue", null);
+      }
     }
 
     watch(search, () => {
@@ -642,7 +596,6 @@ export default defineComponent({
       onCheckboxChange,
       mobileItemProps,
       onRadioChange,
-      onUpdate,
       onClick
     };
   }

package/components/fields/FSSelectField.vue

@@ -4,17 +4,17 @@
       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"
@@ -113,30 +113,30 @@
       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"
-          :persistentClear="true"
-          :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)"
           v-bind="$attrs"
@@ -306,11 +306,6 @@ export default defineComponent({
       required: false,
       default: false
     },
-    returnObject: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     required: {
       type: Boolean,
       required: false,
@@ -449,58 +444,25 @@ export default defineComponent({
     };
 
     const onRadioChange = (value: string | null) => {
-      if (props.returnObject) {
-        emit("update:modelValue", props.items.find((item: any) => item[props.itemValue] === value) ?? null);
-      }
-      else {
-        emit("update:modelValue", value);
-      }
+      emit("update:modelValue", value);
       dialog.value = false;
     };
 
     const onCheckboxChange = (value: string) => {
-      if (props.returnObject) {
-        const item = props.items.find(item => item[props.itemValue] === value);
-        if (Array.isArray(props.modelValue)) {
-          if (props.modelValue.find(item => item[props.itemValue] === value)) {
-            emit("update:modelValue", props.modelValue.filter((item: any) => item[props.itemValue] !== value));
-          }
-          else {
-            if (item) {
-              emit("update:modelValue", [...props.modelValue, item]);
-            }
-          }
+      if (Array.isArray(props.modelValue)) {
+        if (props.modelValue.includes(value)) {
+          emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
         }
         else {
-          if (props.modelValue) {
-            if (props.modelValue[props.itemValue] === value) {
-              emit("update:modelValue", []);
-            }
-            else {
-              emit("update:modelValue", [props.modelValue, item]);
-            }
-          }
-          else {
-            emit("update:modelValue", [item]);
-          }
+          emit("update:modelValue", [...props.modelValue, value]);
         }
       }
       else {
-        if (Array.isArray(props.modelValue)) {
-          if (props.modelValue.includes(value)) {
-            emit("update:modelValue", props.modelValue.filter((item: any) => item !== value));
-          }
-          else {
-            emit("update:modelValue", [...props.modelValue, value]);
-          }
+        if (props.modelValue === value) {
+          emit("update:modelValue", []);
         }
         else {
-          if (props.modelValue === value) {
-            emit("update:modelValue", []);
-          }
-          else {
-            emit("update:modelValue", [props.modelValue, value]);
-          }
+          emit("update:modelValue", [props.modelValue, value]);
         }
       }
     };

package/composables/useRules.ts

@@ -11,16 +11,6 @@ export const useRules = () => {
     }
   });
 
-  const forceErrors = (messagesLength: number, updated: boolean): boolean => {
-    if (messagesLength <= 0) {
-      return false;
-    }
-    switch (innerValidateOn.value) {
-      case "submit": return submitted.value;
-      case "input":  return submitted.value || updated;
-    }
-  }
-
   const getMessages = (modelValue: any, rules: any[], checkArray: boolean = false): string[] => {
     if (!rules || !rules.length) {
       return [];
@@ -71,7 +61,6 @@ export const useRules = () => {
 
   return {
     validateOn,
-    forceErrors,
     getMessages
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.128",
+  "version": "0.0.130",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.128",
-    "@dative-gpi/foundation-shared-services": "0.0.128",
+    "@dative-gpi/foundation-shared-domain": "0.0.130",
+    "@dative-gpi/foundation-shared-services": "0.0.130",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "29d087178fe21c8c415df60c4466755789860cbb"
+  "gitHead": "c595834a1af9272a46df01ffdc93b8dee851a2e8"
 }

package/components/fields/FSToggleField.vue

@@ -1,148 +0,0 @@
-<template>
-  <FSBaseField
-    :label="$props.label"
-    :description="$props.description"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
-    :editable="$props.editable"
-    :messages="messages"
-  >
-    <FSToggleSet
-      variant="slide"
-      :buttonColor="buttonColor"
-      :values="$props.items"
-      :multiple="$props.multiple"
-      :required="$props.required"
-      :editable="$props.editable"
-      :modelValue="$props.modelValue"
-      @update:modelValue="onUpdate"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="slotData"
-        />
-      </template>
-    </FSToggleSet>
-  </FSBaseField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
-
-import { useRules } from "../../composables";
-import { ColorEnum } from "../../models";
-
-import FSToggleSet from "../FSToggleSet.vue";
-import FSBaseField from "./FSBaseField.vue";
-
-export default defineComponent({
-  name: "FSTextField",
-  components: {
-    FSBaseField,
-    FSToggleSet
-  },
-  props: {
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    items: {
-      type: Array as PropType<any[]>,
-      required: true
-    },
-    itemValue: {
-      type: String,
-      required: false,
-      default: "id"
-    },
-    itemTitle: {
-      type: String,
-      required: false,
-      default: "label"
-    },
-    modelValue: {
-      type: [Array, String] as PropType<string[] | string | null>,
-      required: false,
-      default: null
-    },
-    multiple: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    returnObject: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    rules: {
-      type: Array as PropType<any[]>,
-      required: false,
-      default: () => []
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { forceErrors, getMessages } = useRules();
-
-    const updated = ref(false);
-
-    const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
-
-    const buttonColor = computed((): ColorEnum => {
-      if (forceErrors(messages.value.length, updated.value)) {
-        return ColorEnum.Error;
-      }
-      return ColorEnum.Light;
-    });
-
-    const onUpdate = (value: string[] | string | null) => {
-      updated.value = true;
-      if (props.returnObject) {
-        if (Array.isArray(value)) {
-          emit("update:modelValue", props.items.filter((item: any) => value.includes(item[props.itemValue])));
-        }
-        else {
-          emit("update:modelValue", props.items.find((item: any) => item[props.itemValue] === value) ?? null);
-        }
-      }
-      else {
-        emit("update:modelValue", value);
-      }
-    };
-
-    return {
-      buttonColor,
-      ColorEnum,
-      messages,
-      onUpdate
-    };
-  }
-});
-</script>