@dative-gpi/foundation-shared-components 0.0.123 → 0.0.124

package/components/FSCheckbox.vue

@@ -17,6 +17,7 @@
         #input
       >
         <FSRow
+          class="fs-checkbox-label"
           align="center-left"
           width="hug"
           :style="style"
@@ -28,10 +29,12 @@
           >
             {{ icon }}
           </FSIcon>
-          <slot>
+          <slot
+            name="label"
+            v-bind="{ font }"
+          >
             <FSSpan
               v-if="$props.label"
-              class="fs-checkbox-label"
               :style="style"
               :font="font"
             >

package/components/FSRadio.vue

@@ -8,16 +8,19 @@
       :rules="$props.rules"
       :validateOn="validateOn"
       :modelValue="$props.selected"
-      @click.prevent
+      @click.prevent.stop
       @blur="blurred = true"
       v-bind="$attrs"
     >
-      <template #input>
+      <template
+        #input
+      >
         <FSRow
+          class="fs-radio-label"
           align="center-left"
           width="hug"
           :style="style"
-          @click.stop="onToggle"
+          @click.prevent.stop="onToggle"
         >
           <FSIcon
             class="fs-radio"
@@ -26,10 +29,12 @@
           >
             {{ icon }}
           </FSIcon>
-          <slot>
+          <slot
+            name="label"
+            v-bind="{ item: $props.item, font }"
+          >
             <FSSpan
               v-if="$props.label"
-              class="fs-radio-label"
               :style="style"
               :font="font"
             >
@@ -39,7 +44,9 @@
         </FSRow>
       </template>
     </v-radio>
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="$props.description"
         class="fs-radio-description"
@@ -72,6 +79,11 @@ export default defineComponent({
     FSRow
   },
   props: {
+    item: {
+      type: Object as PropType<object | null>,
+      required: false,
+      default: null
+    },
     label: {
       type: String as PropType<string | null>,
       required: false,

package/components/FSRadioGroup.vue

@@ -5,15 +5,26 @@
   >
     <FSRadio
       v-for="(item, index) in $props.values"
-      :key="index"
-      :label="item.label"
-      :description="item.description"
       :selected="isSelected(item.value)"
-      :color="$props.color"
+      :description="item.description"
       :editable="$props.editable"
+      :color="$props.color"
+      :label="item.label"
+      :item="item.item"
+      :key="index"
       :modelValue="item.value"
       @update:modelValue="onToggle"
-    />
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
+      </template>
+    </FSRadio>
   </FSCol>
 </template>
 
@@ -38,7 +49,7 @@ export default defineComponent({
       default: "8px"
     },
     values: {
-      type: Array as PropType<{ value: string | boolean | number, label?: string, description?: string }[]>,
+      type: Array as PropType<{ value: string | boolean | number, label?: string, description?: string, item: any | null }[]>,
       required: true,
       default: null
     },

package/components/FSSlideGroup.vue

@@ -12,7 +12,7 @@
     >
       <FSButtonPreviousIcon
         :color="ColorEnum.Dark"
-        @click="goToPrev"
+        @click.prevent.stop="goToPrev"
       />
     </template>
     <template
@@ -33,7 +33,7 @@
       <FSButtonNextIcon
         :color="ColorEnum.Dark"
         :class="nextClasses"
-        @click="goToNext"
+        @click.prevent.stop="goToNext"
       />
     </template>
   </v-slide-group>
@@ -105,6 +105,20 @@ export default defineComponent({
       return classes;
     });
 
+    const goToStart = () => {
+      if (slideGroupRef.value) {
+        const scrollElement = (slideGroupRef.value as any).$el.children[1];
+        scrollElement.scrollTo({ left: -scrollElement.scrollLeft, behavior: "smooth" });
+      }
+    };
+
+    const goToEnd = () => {
+      if (slideGroupRef.value) {
+        const scrollElement = (slideGroupRef.value as any).$el.children[1];
+        scrollElement.scrollTo({ left: scrollElement.scrollWidth - scrollElement.scrollLeft, behavior: "smooth" });
+      }
+    };
+
     const goToPrev = () => {
       if (slideGroupRef.value) {
         (slideGroupRef.value as any).scrollTo("prev");
@@ -143,8 +157,10 @@ export default defineComponent({
       elementId,
       style,
       getChildren,
+      goToStart,
+      goToNext,
       goToPrev,
-      goToNext
+      goToEnd
     };
   }
 });

package/components/FSToggleSet.vue

@@ -157,6 +157,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
+    errorColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Error
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -210,6 +215,9 @@ export default defineComponent({
       if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
         return props.activeColor;
       }
+      if (inputRef.value && (inputRef.value as any).errorMessages.length) {
+        return props.errorColor;
+      }
       return props.buttonColor;
     };
 

package/components/fields/FSAutocompleteField.vue

@@ -37,6 +37,15 @@
             v-bind="slotData"
           />
         </template>
+        <template
+          v-if="mobileSelectionProps"
+          #prepend-inner
+        >
+          <slot
+            name="selection-mobile"
+            v-bind="mobileSelectionProps"
+          />
+        </template>
         <template
           #append-inner
         >
@@ -66,32 +75,47 @@
             :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>
@@ -135,6 +159,7 @@
           :style="style"
           :listProps="listStyle"
           :class="classes"
+          :persistentClear="true"
           :hideDetails="true"
           :items="$props.items"
           :autoSelectFirst="true"
@@ -153,6 +178,15 @@
           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 +195,42 @@
             >
               <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 }"
+                  >
+                    <FSSpan>
+                      {{ 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
           >
@@ -447,6 +495,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;
@@ -487,6 +569,7 @@ export default defineComponent({
     });
 
     return {
+      mobileSelectionProps,
       autocompleteSlots,
       toggleSetSlots,
       isExtraSmall,
@@ -505,6 +588,7 @@ export default defineComponent({
       style,
       openMobileOverlay,
       onCheckboxChange,
+      mobileItemProps,
       onRadioChange,
       onUpdate
     };

package/components/fields/FSSelectField.vue

@@ -30,6 +30,15 @@
             v-bind="slotData"
           />
         </template>
+        <template
+          v-if="mobileSelectionProps"
+          #prepend-inner
+        >
+          <slot
+            name="selection-mobile"
+            v-bind="mobileSelectionProps"
+          />
+        </template>
         <template
           #append-inner
         >
@@ -68,17 +77,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>
@@ -100,6 +127,7 @@
           :menuIcon="null"
           :style="style"
           :listProps="listStyle"
+          :persistentClear="true"
           :hideDetails="true"
           :items="$props.items"
           :itemTitle="$props.itemTitle"
@@ -115,6 +143,15 @@
           @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 +163,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 +225,17 @@
               />
             </slot>
           </template>
+          <template
+            #no-data
+          >
+            <FSRow
+              padding="17px"
+            >
+              <FSSpan>
+                {{ $tr("ui.common.no-data", "No data") }}
+              </FSSpan>
+            </FSRow>
+          </template>
         </v-select>
       </FSBaseField>
     </template>
@@ -346,6 +409,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;
@@ -378,6 +475,7 @@ export default defineComponent({
     };
 
     return {
+      mobileSelectionProps,
       isExtraSmall,
       mobileValue,
       validateOn,
@@ -390,6 +488,7 @@ export default defineComponent({
       style,
       openMobileOverlay,
       onCheckboxChange,
+      mobileItemProps,
       onRadioChange
     };
   }

package/components/fields/FSTextArea.vue

@@ -13,6 +13,7 @@
       :style="style"
       :class="classes"
       :rows="$props.rows"
+      :persistentClear="true"
       :hideDetails="true"
       :noResize="true"
       :autoGrow="$props.autoGrow"

package/components/fields/FSTextField.vue

@@ -12,6 +12,7 @@
       variant="outlined"
       :style="style"
       :type="$props.type"
+      :persistentClear="true"
       :hideDetails="true"
       :readonly="!$props.editable"
       :clearable="$props.clearable && $props.editable && !!$props.modelValue"

package/components/lists/FSDataIteratorItem.vue

@@ -5,6 +5,7 @@
     width="100%"
     :color="$props.itemColor"
     :variant="variant"
+    :style="style"
   >
     <FSCol>
       <slot
@@ -112,6 +113,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Primary
     },
+    clickable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     showSelect: {
       type: Boolean,
       required: false,
@@ -127,8 +133,15 @@ export default defineComponent({
       }
     });
 
+    const style = computed((): { [key: string]: string | null | undefined } => {
+      return {
+        "--fs-data-iterator-item-cursor": props.clickable ? "pointer" : "default"
+      }
+    });
+
     return {
-      variant
+      variant,
+      style
     };
   }
 });

package/components/lists/FSDataTableUI.vue

@@ -125,8 +125,8 @@
         :page="innerPage"
         :itemsPerPage="innerRowsPerPage"
         :modelValue="$props.modelValue"
-        @auxclick:row="onClickRow"
-        @click:row="onClickRow"
+        @auxclick:row="onClickLibrary.row"
+        @click:row="onClickLibrary.row"
         @update:sortBy="innerSortBy = $event ? $event[0] : null"
         @dragover.prevent
         @drop:row="(event, row) => onDrop(event, row, 'tr.v-data-table__tr')"
@@ -435,6 +435,7 @@
                   v-if="item.type === 'item'"
                   :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
+                  :clickable="onClickLibrary.clickable"
                   :showSelect="$props.showSelect"
                   :itemTo="$props.itemTo"
                   :color="$props.color"
@@ -442,6 +443,8 @@
                   :key="index"
                   :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
                   @update:modelValue="toggleSelect"
+                  @auxclick="() => onClickLibrary.mobile($event, item)"
+                  @click="() => onClickLibrary.mobile($event, item)"
                 >
                   <template
                     #item.top="props"
@@ -584,6 +587,7 @@
                 <FSDataIteratorItem
                   :itemColor="$props.rowColor ? $props.rowColor(item.raw) : ColorEnum.Background"
                   :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
+                  :clickable="onClickLibrary.clickable"
                   :showSelect="$props.showSelect"
                   :itemTo="$props.itemTo"
                   :color="$props.color"
@@ -591,6 +595,8 @@
                   :key="index"
                   :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
                   @update:modelValue="toggleSelect"
+                  @auxclick="() => onClickLibrary.mobile($event, item)"
+                  @click="() => onClickLibrary.mobile($event, item)"
                 >
                   <template
                     #item.top="props"
@@ -638,7 +644,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, getCurrentInstance, onMounted, onUnmounted, PropType, ref, Ref, Slot, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, Ref, Slot, watch } from "vue";
 import { useRouter } from "vue-router";
 
 import { ColorEnum, FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
@@ -718,6 +724,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    ["onClick:row"]: {
+      type: Function,
+      required: false,
+      default: null
+    },
     rowsPerPage: {
       type: Number,
       required: false,
@@ -1018,25 +1029,43 @@ export default defineComponent({
       }
     });
 
-    const onClickRow = computed(() => {
-      if (!!getCurrentInstance()?.vnode.props?.["onClick:row"] || props.itemTo) {
-        return (event: PointerEvent, row: any) => {
-          if (props.itemTo && router) {
-            if (event.metaKey || event.ctrlKey || event.button === 1) {
-              window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
+    const onClickLibrary = computed((): { [key: string]: Function | boolean } => {
+      if (props["onClick:row"] || props.itemTo) {
+        return {
+          clickable: true,
+          row: (event: PointerEvent, row: any) => {
+            if (props.itemTo && router) {
+              if (event.metaKey || event.ctrlKey || event.button === 1) {
+                window.open(router.resolve(props.itemTo(row.item)).href, "_blank");
+              }
+              else {
+                router.push(props.itemTo(row.item));
+              }
             }
             else {
-              router.push(props.itemTo(row.item));
+              emit("click:row", row.item);
+            }
+          },
+          mobile: (event: PointerEvent, item: any) => {
+            if (props.itemTo && router) {
+              if (event.metaKey || event.ctrlKey || event.button === 1) {
+                window.open(router.resolve(props.itemTo(item)).href, "_blank");
+              }
+              else {
+                router.push(props.itemTo(item));
+              }
+            }
+            else {
+              emit("click:row", item);
             }
           }
-          else {
-            emit("click:row", row.item);
-          }
-        };
-      }
-      else {
-        return null;
+        }
       }
+      return {
+        clickable: false,
+        row: null,
+        mobile: () => null
+      };
     });
 
     const draggableDisabled = computed(() => {
@@ -1453,10 +1482,10 @@ export default defineComponent({
       classes,
       style,
       size,
-      onClickRow,
       isExtraSmall,
       draggableDisabled,
       elementId,
+      onClickLibrary,
       toggleSelectAll,
       toggleSelectGroup,
       toggleSelect,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.123",
+  "version": "0.0.124",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.123",
-    "@dative-gpi/foundation-shared-services": "0.0.123",
+    "@dative-gpi/foundation-shared-domain": "0.0.124",
+    "@dative-gpi/foundation-shared-services": "0.0.124",
     "@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": "0d9536cb31dbffca7286a843898128087323db0f"
+  "gitHead": "37128d517dbaf731a08637d60b8b996b4d6e8019"
 }

package/styles/components/fs_card.scss

@@ -1,6 +1,5 @@
 .fs-card {
     border: var(--fs-card-border-size) var(--fs-card-border-style);
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: var(--fs-card-border-radius);
     padding: var(--fs-card-padding);
     height: var(--fs-card-height);

package/styles/components/fs_checkbox.scss

@@ -3,7 +3,8 @@
     color: var(--fs-checkbox-checkbox-color) !important;
 }
 
-.fs-checkbox-label {
+.fs-checkbox-label,
+.fs-checkbox-label :not(.fs-checkbox) {
     cursor: var(--fs-checkbox-cursor) !important;
     color: var(--fs-checkbox-color) !important;
     user-select: none;

package/styles/components/fs_data_iterator_item.scss

@@ -1,4 +1,5 @@
 .fs-data-iterator-item {
+    cursor: var(--fs-data-iterator-item-cursor);
     position: relative;
     min-height: 36px;
     flex: 1 0 0;
@@ -6,15 +7,27 @@
     & > .fs-col > .fs-row:first-of-type > :last-child {
         padding-right: 32px;
     }
+
+    &:hover::after {
+        content: "";
+        background-color: black;
+        pointer-events: none;
+        position: absolute;
+        opacity: 0.04;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+    }
 }
 
 .fs-data-iterator-item-checkbox {
-    border-radius: 4px;
-    position: absolute;
-    align-items: center;
     justify-content: center;
-    top: 1px;
-    right: 1px;
-    width: 32px;
+    align-items: center;
+    position: absolute;
+    border-radius: 4px;
     height: 32px;
+    width: 32px;
+    right: 1px;
+    top: 1px;
 }

package/styles/components/fs_meta_field.scss

@@ -0,0 +1,6 @@
+// If the custom property value is a boolean or an icon, hide the FSTextField input value in a FSMetaField while on mobile
+.fs-meta-field .v-field:has(.v-field__prepend-inner:not(:empty)) input {
+    @include mobile {
+        content-visibility: hidden;
+    }
+}

package/styles/components/fs_radio.scss

@@ -3,7 +3,8 @@
     color: var(--fs-radio-radio-color) !important;
 }
 
-.fs-radio-label {
+.fs-radio-label,
+.fs-radio-label :not(.fs-radio) {
     cursor: var(--fs-radio-cursor) !important;
     color: var(--fs-radio-color) !important;
     user-select: none;

package/styles/components/index.scss

@@ -15,7 +15,6 @@
 @import "fs_color_icon.scss";
 @import "fs_data_table.scss";
 @import "fs_data_iterator_item.scss";
-@import "fs_date_field.scss";
 @import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
@@ -36,6 +35,7 @@
 @import "fs_load_data_table.scss";
 @import "fs_load_tile.scss";
 @import "fs_loader.scss";
+@import "fs_meta_field.scss";
 @import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";

package/styles/globals/overrides.scss

@@ -50,11 +50,11 @@
     }
 
     & .v-input__prepend {
-        margin-inline-end: 8px !important;
+        margin-inline-end: 0 !important;
     }
 
     & .v-input__append {
-        margin-inline-start: 8px !important;
+        margin-inline-start: 0 !important;
     }
 
     & > .v-input__control > .v-field {
@@ -65,6 +65,10 @@
             margin-inline: 0px;
             padding-top: 0px;
             height: 100%;
+
+            &  > .v-icon  {
+                opacity: 1 !important;
+            }
         }
 
         & > .v-field__outline {
@@ -78,10 +82,9 @@
         & > .v-field__field > .v-field__input {
             @extend .text-body;
             
-            padding-inline: 0px !important;
             padding-bottom: 0px !important;
+            padding-inline: 0px !important;
             padding-top: 0px !important;
-            align-items: center;
             flex-wrap: nowrap;
             overflow: hidden;
         
@@ -98,11 +101,34 @@
     }
 }
 
+// If there is a prepend, it has a padding on the right and an opacity of 100%
+.v-field__prepend-inner:not(:empty) {
+    padding-inline-end: 4px !important;
+
+    & > .v-icon {
+        opacity: 1 !important;
+    }
+}
+
+// If there is an append, it has a padding on the left and an opacity of 100%
+.v-field__append-inner:not(:empty) {
+    padding-inline-start: 4px !important;
+
+    & > .v-icon {
+        opacity: 1 !important;
+    }
+}
+
 // No input messages allowed
 .v-input__details {
     display: none !important;
 }
 
+// Ellipsis on input of all fields
+input {
+    text-overflow: ellipsis;
+}
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -128,6 +154,7 @@ $nthOverlay: 25;
 .fs-slide-group {
     max-width: 100%;
     
+    // To avoid borders clipping
     & > .v-slide-group__container > .v-slide-group__content {
         margin: 0 2px 1px 0 !important;
     }

package/styles/components/fs_date_field.scss

@@ -1,8 +0,0 @@
-.fs-date-field-label {
-    color: var(--fs-date-field-color);
-}
-
-.fs-date-field-messages {
-    align-self: stretch;
-    color: var(--fs-date-field-error-color);
-}