@dative-gpi/foundation-shared-components 0.0.16 → 0.0.17

package/components/FSCol.vue

@@ -17,12 +17,12 @@ export default defineComponent({
   name: "FSCol",
   props: {
     width: {
-      type: String as PropType<"hug" | "fill" | string>,
+      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
       required: false,
       default: "fill"
     },
     height: {
-      type: String as PropType<"hug" | "fill" | string>,
+      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
       required: false,
       default: "hug"
     },

package/components/FSImage.vue

@@ -1,18 +1,19 @@
 <template>
   <v-img
     class="fs-image"
-    :src="source"
-    :style="style"
-    :cover="$props.cover"
-    :width="computedWidth"
     :height="computedHeight"
+    :width="computedWidth"
+    :cover="$props.cover"
+    :style="style"
+    :src="source"
     v-bind="$attrs"
   >
     <template #placeholder>
-      <v-skeleton-loader
+      <FSLoader
         class="fs-load-image"
-        type="image"
-        :style="style"
+        :borderRadius="$props.borderRadius"
+        :height="computedHeight"
+        :width="computedWidth"
       />
     </template>
   </v-img>
@@ -24,8 +25,13 @@ import { computed, defineComponent, onMounted, watch } from "vue";
 import { useImageRaw, useImageBlurHash } from "@dative-gpi/foundation-shared-services/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import FSLoader from "./FSLoader.vue";
+
 export default defineComponent({
   name: "FSImage",
+  components: {
+    FSLoader
+  },
   props: {
     imageId: {
       type: [String, null, undefined],
@@ -68,40 +74,40 @@ export default defineComponent({
       }
     });
 
-    const computedWidth = computed((): number | string | undefined => {
-      if (props.width) {
-        return props.width;
-      }
+    const computedHeight = computed((): number | string | undefined => {
       if (props.height) {
-        if (typeof(props.height) === "string") {
+        return props.height;
+      }
+      if (props.width) {
+        if (typeof(props.width) === "string") {
           return undefined;
         }
         if (props.aspectRatio) {
           const split = props.aspectRatio.split('/');
           if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return props.height * (parseFloat(split[0]) / parseFloat(split[1]));
+            return props.width * (parseFloat(split[1]) / parseFloat(split[0]));
           }
         }
-        return props.height;
+        return props.width;
       }
       return undefined;
     });
 
-    const computedHeight = computed((): number | string | undefined => {
-      if (props.height) {
-        return props.height;
-      }
+    const computedWidth = computed((): number | string | undefined => {
       if (props.width) {
-        if (typeof(props.width) === "string") {
+        return props.width;
+      }
+      if (props.height) {
+        if (typeof(props.height) === "string") {
           return undefined;
         }
         if (props.aspectRatio) {
           const split = props.aspectRatio.split('/');
           if (split.length === 2 && !isNaN(parseFloat(split[0])) && !isNaN(parseFloat(split[1]))) {
-            return props.width * (parseFloat(split[1]) / parseFloat(split[0]));
+            return props.height * (parseFloat(split[0]) / parseFloat(split[1]));
           }
         }
-        return props.width;
+        return props.height;
       }
       return undefined;
     });
@@ -141,10 +147,10 @@ export default defineComponent({
     }
 
     return {
-      style,
-      source,
+      computedHeight,
       computedWidth,
-      computedHeight
+      source,
+      style
     };
   }
 });

package/components/FSLabel.vue

@@ -7,21 +7,25 @@
   >
     {{ $props.label }}
   </span>
-  <v-skeleton-loader
+  <FSLoader
     v-else
-    type="text"
-    :class="loadClasses"
+    :variant="$props.font"
   />
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSLoader from "./FSLoader.vue";
+
 export default defineComponent({
   name: "FSLabel",
+  components: {
+    FSLoader
+  },
   props: {
     label: {
       type: [String, null, undefined],
@@ -55,6 +59,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -74,30 +79,25 @@ export default defineComponent({
       return classNames;
     });
 
-    const loadClasses = computed((): string[] => {
-      return ["fs-load-label", props.font];
-    });
-
     const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
       switch (props.variant) {
         case "base": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-label-color"     : colors.value.base
+          "--fs-label-color"    : colors.value.base
         };
         case "light": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-label-color"     : colors.value.light
+          "--fs-label-color"    : colors.value.light
         };
         case "dark": return {
           "--fs-span-line-clamp": props.lineClamp.toString(),
-          "--fs-label-color"     : colors.value.dark
+          "--fs-label-color"    : colors.value.dark
         };
       }
     });
 
     return {
       classes,
-      loadClasses,
       style
     };
   }

package/components/FSLoader.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-skeleton-loader
+    class="fs-loader"
+    type="image"
+    :style="style"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+
+export default defineComponent({
+  name: "FSLoader",
+  props: {
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      required: false,
+      default: null
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      required: false,
+      default: null
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    },
+    variant: {
+      type: String as PropType<"standard" | "button" | "input" | "chip" | "text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      required: false,
+      default: "standard"
+    }
+  },
+  setup(props) {
+    const { isMobileSized, isExtraSmall } = useBreakpoints();
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-loader-border-radius": ["chip"].includes(props.variant) ? "50px" : sizeToVar(props.borderRadius),
+        "--fs-loader-height": sizeToVar(getHeight.value),
+        "--fs-loader-width" : sizeToVar(getWidth.value)
+      };
+    });
+
+    const getHeight = computed((): string | number => {
+      switch (props.variant) {
+        case "standard": {
+          if (Array.isArray(props.height)) {
+            if (isExtraSmall.value) {
+              return props.height[2] ?? props.height[1] ?? props.height[0];
+            }
+            if (isMobileSized.value) {
+              return props.height[1] ?? props.height[0];
+            }
+            return props.height[0];
+          }
+          return props.height;
+        }
+        case "button": 
+        case "input":          return isMobileSized.value ? "36px" : "40px";
+        case "chip":           return isMobileSized.value ? "20px" : "24px";
+        case "text-h1":        return isMobileSized.value ? "29px" : "36px";
+        case "text-h2":        return isMobileSized.value ? "22px" : "27px";
+        case "text-h3":        return isMobileSized.value ? "17px" : "21px";
+        case "text-h4":        return isMobileSized.value ? "14px" : "16px";
+        case "text-body":
+        case "text-button":    return isMobileSized.value ? "12px" : "14px";
+        case "text-overline":
+        case "text-underline": return isMobileSized.value ? "10px" : "12px";
+      }
+    });
+
+    const getWidth = computed((): string | number => {
+      switch (props.variant) {
+        case "standard": {
+          if (Array.isArray(props.width)) {
+            if (isExtraSmall.value) {
+              return props.width[2] ?? props.width[1] ?? props.width[0];
+            }
+            if (isMobileSized.value) {
+              return props.width[1] ?? props.width[0];
+            }
+            return props.width[0];
+          }
+          return props.width;
+        }
+        case "button":  return isMobileSized ? "36px" : "40px";
+        case "input":   return isMobileSized ? "calc(50% - 124px)" : "calc(50% - 132px)";
+        case "chip":    return "8vw";
+        case "text-h1": return "calc(50% - 32px)";
+        case "text-h2": return "calc(60% - 32px)";
+        case "text-h3": return "calc(65% - 32px)";
+        default:        return "calc(75% - 32px)";
+      }
+    });
+
+    return {
+      style
+    };
+  }
+});
+</script>

package/components/FSRow.vue

@@ -17,12 +17,12 @@ export default defineComponent({
   name: "FSRow",
   props: {
     width: {
-      type: String as PropType<"hug" | "fill" | string>,
+      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
       required: false,
       default: "fill"
     },
     height: {
-      type: String as PropType<"hug" | "fill" | string>,
+      type: [String, Number] as PropType<"hug" | "fill" | string | number>,
       required: false,
       default: "hug"
     },

package/components/lists/FSDataTableUI.vue

@@ -367,34 +367,35 @@
           <FSRow
             width="hug"
           >
-            <template v-for="(item, index) in items">
-              <FSDataIteratorItem
-                v-if="item.type === 'item'"
-                :key="index"
-                :item="item.raw"
-                :color="$props.color"
-                :itemTo="$props.itemTo"
-                :showSelect="$props.showSelect"
-                :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
-                :modelValue="innerValue.includes(item.raw[$props.itemValue])"
-                @update:modelValue="toggleSelect"
-              >
-                <template #[`item.top`]="props">
-                  <slot name="item.top" v-bind="props" />
-                </template>
-                <template v-for="(item, index) in itemsSlots" #[item.slotName]="props">
-                  <slot :name="item.slotName" v-bind="props">
-                    <FSText
-                      :key="index"
-                    >
-                      {{ props.item[item.value] }}
-                    </FSText>
-                  </slot>
-                </template>
-                <template #[`item.bottom`]="props">
-                  <slot name="item.bottom" v-bind="props" />
-                </template>
-              </FSDataIteratorItem>
+            <template v-for="(item, index) in items.filter((item) => item.type === 'item')">
+              <slot name="item.tile" v-bind="{ index, item: item.raw, toggleSelect }">
+                <FSDataIteratorItem
+                  :key="index"
+                  :item="item.raw"
+                  :color="$props.color"
+                  :itemTo="$props.itemTo"
+                  :showSelect="$props.showSelect"
+                  :headers="innerHeaders.filter(h => !$props.sneakyHeaders.includes(h.value))"
+                  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
+                  @update:modelValue="toggleSelect"
+                >
+                  <template #[`item.top`]="props">
+                    <slot name="item.top" v-bind="props" />
+                  </template>
+                  <template v-for="(item, index) in itemsSlots" #[item.slotName]="props">
+                    <slot :name="item.slotName" v-bind="props">
+                      <FSText
+                        :key="index"
+                      >
+                        {{ props.item[item.value] }}
+                      </FSText>
+                    </slot>
+                  </template>
+                  <template #[`item.bottom`]="props">
+                    <slot name="item.bottom" v-bind="props" />
+                  </template>
+                </FSDataIteratorItem>
+              </slot>
             </template>
           </FSRow>
         </template>

package/components/lists/FSLoadDataTable.vue

@@ -7,29 +7,29 @@
     <FSRow
       align="bottom-center"
     >
-      <v-skeleton-loader
-        type="button"
+      <FSLoader
+        variant="input"
       />
-      <v-skeleton-loader
-        type="button"
+      <FSLoader
+        variant="button"
       />
       <v-spacer />
-      <v-skeleton-loader
-        type="button"
+      <FSLoader
+        variant="button"
       />
-      <v-skeleton-loader
-        type="button"
+      <FSLoader
+        variant="button"
       />
     </FSRow>
     <FSRow>
-      <v-skeleton-loader
-        type="chip"
+      <FSLoader
+        variant="chip"
       />
-      <v-skeleton-loader
-        type="chip"
+      <FSLoader
+        variant="chip"
       />
-      <v-skeleton-loader
-        type="chip"
+      <FSLoader
+        variant="chip"
       />
     </FSRow>
     <v-skeleton-loader
@@ -38,17 +38,17 @@
     <FSRow
       align="bottom-right"
     >
-      <v-skeleton-loader
-        type="button"
+      <FSLoader
+        variant="input"
       />
-      <v-skeleton-loader
-        type="button"
+      <FSLoader
+        variant="button"
       />
-      <v-skeleton-loader
-        type="button"
+      <FSLoader
+        variant="button"
       />
-      <v-skeleton-loader
-        type="button"
+      <FSLoader
+        variant="button"
       />
     </FSRow>
   </FSCol>
@@ -60,12 +60,14 @@ import { computed, defineComponent } from "vue";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSLoader from "../FSLoader.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSLoadDataTable",
   components: {
+    FSLoader,
     FSCol,
     FSRow
   },

package/components/tiles/FSLoadTile.vue

@@ -2,20 +2,41 @@
   <FSCard
     class="fs-load-tile"
     padding="11px"
+    :height="heights.card"
+    :width="widths.card"
     :style="style"
-    :width="width"
-    :height="height"
   >
     <FSRow
       align="center-center"
       height="fill"
+      width="fill"
       gap="24px"
     >
-      <v-skeleton-loader
-        type="article"
-      />
-      <v-skeleton-loader
-        type="image"
+      <FSCol
+        :height="heights.col"
+        :width="widths.col"
+        gap="24px"
+      >
+        <FSCol>
+          <FSLoader
+            variant="text-button"
+          />
+          <FSLoader
+            variant="text-overline"
+          />
+        </FSCol>
+        <FSCol>
+          <FSLoader
+            variant="text-overline"
+          />
+          <FSLoader
+            variant="text-overline"
+          />
+        </FSCol>
+      </FSCol>
+      <FSLoader
+        :height="heights.image"
+        :width="widths.image"
       />
     </FSRow>
     <FSContainer
@@ -39,6 +60,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSContainer from "../FSContainer.vue";
 import FSCheckbox from "../FSCheckbox.vue";
+import FSLoader from "../FSLoader.vue";
 import FSCard from "../FSCard.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -48,6 +70,7 @@ export default defineComponent({
   components: {
     FSContainer,
     FSCheckbox,
+    FSLoader,
     FSCard,
     FSCol,
     FSRow
@@ -71,12 +94,20 @@ export default defineComponent({
 
     const backgroundColors = getColors(ColorEnum.Background);
 
-    const width = computed(() => {
-      return isMobileSized.value ? 336 : 352;
+    const heights = computed(() => {
+      return {
+        image: isMobileSized.value ? "90px" : "100px",
+        card:  isMobileSized.value ? "156px" : "170px",
+        col:   isMobileSized.value ? "90px" : "100px"
+      }
     });
 
-    const height = computed(() => {
-      return isMobileSized.value ? 156 : 170;
+    const widths = computed(() => {
+      return {
+        image: isMobileSized.value ? "90px" : "100px",
+        card:  isMobileSized.value ? "336px" : "352px",
+        col:   isMobileSized.value ? "198px" : "204px"
+      }
     });
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
@@ -86,8 +117,8 @@ export default defineComponent({
     });
 
     return {
-      width,
-      height,
+      heights,
+      widths,
       style
     };
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.16",
-    "@dative-gpi/foundation-shared-services": "0.0.16",
+    "@dative-gpi/foundation-shared-domain": "0.0.17",
+    "@dative-gpi/foundation-shared-services": "0.0.17",
     "@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": "fb785c5b56d223d39193f3ab2032efe34981cfb2"
+  "gitHead": "306471c4e5e2ba6ccccaf44d9162b5d5f3941bff"
 }

package/styles/components/fs_autocomplete_field.scss

@@ -1,14 +1,7 @@
 .fs-autocomplete-field {
-    padding: 0px !important;
-    min-width: 240px;
-    width: 100%;
-
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-autocomplete-field-border-color) !important;
         cursor: var(--fs-autocomplete-field-cursor) !important;
-        border-radius: 4px !important;
-        padding: 0 16px !important;
-        gap: 8px;
 
         &--error {
             border-color: var(--fs-autocomplete-field-error-border-color) !important;
@@ -18,32 +11,9 @@
             border-color: var(--fs-autocomplete-field-active-border-color) !important;
         }
 
-        & > .v-field__outline {
-            display: none;
-        }
-
         & > .v-field__field > .v-field__input {
-            @extend .text-body;
-        
-            flex-wrap: nowrap;
-            overflow: hidden;
-            padding-inline: 0 !important;
             color: var(--fs-autocomplete-field-color);
             cursor: var(--fs-autocomplete-field-cursor) !important;
-        
-            @include web {
-                min-height: 38px !important;
-                height: 38px !important;
-            }
-        
-            @include mobile {
-                min-height: 34px !important;
-                height: 34px !important;
-            }
-        }
-
-        & > .v-field__clearable {
-            margin-inline: 0px;
         }
 
         & > .v-field__append-inner {

package/styles/components/fs_color_field.scss

@@ -1,11 +1,3 @@
-.fs-color-field {
-  min-width:190px;
-}
-
-.fs-color-field-opacity {
-  min-width: 150px;
-}
-
 .fs-color-field .v-field__prepend-inner > .v-icon {
   opacity: 1 !important;
 }

package/styles/components/fs_image.scss

@@ -1,12 +1,5 @@
 .fs-load-image {
     border-radius: var(--fs-image-border-radius);
-    max-height: 100%;
-    height: 100%;
-
-    & > .v-skeleton-loader__image {
-        max-height: 100%;
-        height: 100%;
-    }
 }
 
 .fs-image {

package/styles/components/fs_label.scss

@@ -2,85 +2,4 @@
     color: var(--fs-label-color);
 
     @extend .fs-span;
-}
-
-.fs-load-label {
-    & > .v-skeleton-loader__text {
-        margin: 0px;
-        height: 100%;
-    }
-
-    &.text-h1 {
-        width: calc(50% - 32px);
-
-        @include web {
-            height: 36px;
-        }
-    
-        @include mobile {
-            height: 29px;
-        }
-    }
-
-    &.text-h2 {
-        width: calc(60% - 32px);
-
-        @include web {
-            height: 27px;
-        }
-    
-        @include mobile {
-            height: 22px;
-        }
-    }
-
-    &.text-h3 {
-        width: calc(65% - 32px);
-
-        @include web {
-            height: 21px;
-        }
-    
-        @include mobile {
-            height: 17px;
-        }
-    }
-
-    &.text-h4 {
-        width: calc(75% - 32px);
-
-        @include web {
-            height: 16px;
-        }
-    
-        @include mobile {
-            height: 14px;
-        }
-    }
-
-    &.text-body,
-    &.text-button {
-        width: calc(75% - 32px);
-
-        @include web {
-            height: 14px;
-        }
-    
-        @include mobile {
-            height: 12px;
-        }
-    }
-
-    &.text-overline,
-    &.text-underline {
-        width: calc(75% - 32px);
-
-        @include web {
-            height: 12px;
-        }
-    
-        @include mobile {
-            height: 10px;
-        }
-    }
 }

package/styles/components/fs_load_data_table.scss

@@ -2,76 +2,12 @@
     position: relative;
 }
 
-.fs-load-data-table .fs-row:first-of-type .v-skeleton-loader__button {
-    margin: 0;
-
-    @include web {
-        height: 40px !important;
-        min-width: 40px;
-    }
-
-    @include mobile {
-        height: 36px !important;
-        min-width: 36px;
-    }
-}
-
-.fs-load-data-table .fs-row:first-of-type .v-skeleton-loader:first-of-type {
-    @include web {
-        min-width: calc(50% - 132px);
-    }
-
-    @include mobile {
-        min-width: calc(50% - 124px);
-    }
-
-    & .v-skeleton-loader__button {
-        min-width: 100%;
-    }
-}
-
-.fs-load-data-table .fs-row:nth-of-type(2) .v-skeleton-loader__chip {
-    margin: 0;
-    border-radius: 50px !important;
-    min-width: 10vw;
-
-    @include web {
-        height: 24px !important;
-    }
-
-    @include mobile {
-        height: 20px !important;
-    }
-}
-
 .fs-load-data-table .v-skeleton-loader:has(.v-skeleton-loader__table-row-divider),
 .fs-load-data-table .v-skeleton-loader:has(.v-skeleton-loader__table-thead) {
-    background-color: var(--fs-load-tile-background-color);
+    background-color: var(--fs-load-data-table-background-color);
     min-width: 100%;
 }
 
 .fs-load-data-table .v-skeleton-loader__table-row {
     margin: 0 -8px;
-}
-
-.fs-load-data-table .fs-row:last-of-type .v-skeleton-loader__button {
-    margin: 0;
-
-    @include web {
-        height: 40px !important;
-        min-width: 40px;
-    }
-
-    @include mobile {
-        height: 36px !important;
-        min-width: 36px;
-    }
-}
-
-.fs-load-data-table .fs-row:last-of-type .v-skeleton-loader:first-of-type {
-    min-width: 120px;
-
-    & .v-skeleton-loader__button {
-        min-width: 100%;
-    }
 }

package/styles/components/fs_load_tile.scss

@@ -1,49 +1,3 @@
 .fs-load-tile {
     position: relative;
-}
-
-.fs-load-tile .v-skeleton-loader {
-    background-color: var(--fs-load-tile-background-color);
-
-    & .v-skeleton-loader__article {
-        gap: 8px;
-
-        @include web {
-            width: 204px;
-            height: 100px;
-        }
-
-        @include mobile {
-            width: 198px;
-            height: 90px;
-        }
-    }
-
-    & .v-skeleton-loader__heading {
-        margin: 0;
-    }
-
-    & .v-skeleton-loader__paragraph {
-        gap: 8px;
-    }
-
-    & .v-skeleton-loader__text {
-        margin: 0;
-    }
-
-    & .v-skeleton-loader__bone {
-        border-radius: 4px;
-    }
-
-    & .v-skeleton-loader__image {
-        @include web {
-            width: 100px;
-            height: 100px;
-        }
-
-        @include mobile {
-            width: 90px;
-            height: 90px;
-        }
-    }
 }

package/styles/components/fs_loader.scss

@@ -0,0 +1,12 @@
+.fs-loader {
+    min-height: var(--fs-loader-height);
+    height: var(--fs-loader-height);
+    min-width: var(--fs-loader-width);
+    width: var(--fs-loader-width);
+
+    & > .v-skeleton-loader__image {
+        border-radius: var(--fs-loader-border-radius) !important;
+        height: 100%;
+        width: 100%;
+    }
+}

package/styles/components/fs_select_field.scss

@@ -1,58 +1,22 @@
-.fs-select-field {
-    padding: 0px !important;
-    min-width: 240px;
-    width: 100%;
+.fs-select-field  > .v-input__control > .v-field {
+    border: 1px solid var(--fs-select-field-border-color) !important;
+    cursor: var(--fs-select-field-cursor) !important;
 
-    & > .v-input__control > .v-field {
-        border: 1px solid var(--fs-select-field-border-color) !important;
-        cursor: var(--fs-select-field-cursor) !important;
-        border-radius: 4px !important;
-        padding: 0 16px !important;
-        gap: 8px;
-
-        &--error {
-            border-color: var(--fs-select-field-error-border-color) !important;
-        }
-
-        &:not(.v-field--error):focus-within {
-            border-color: var(--fs-select-field-active-border-color) !important;
-        }
-
-        & > .v-field__outline {
-            display: none;
-        }
-
-        & > .v-field__field > .v-field__input {
-            @extend .text-body;
-        
-            flex-wrap: nowrap;
-            overflow: hidden;
-            padding-inline: 0 !important;
-            color: var(--fs-select-field-color);
-            cursor: var(--fs-select-field-cursor) !important;
-        
-            @include web {
-                min-height: 38px !important;
-                height: 38px !important;
-            }
-        
-            @include mobile {
-                min-height: 34px !important;
-                height: 34px !important;
-            }
+    &--error {
+        border-color: var(--fs-select-field-error-border-color) !important;
+    }
 
-            & > .v-select__selection {
-                height: 100%;
-            }
-        }
+    &:not(.v-field--error):focus-within {
+        border-color: var(--fs-select-field-active-border-color) !important;
+    }
 
-        & > .v-field__clearable {
-            margin-inline: 0px;
-        }
+    & > .v-field__field > .v-field__input {
+        color: var(--fs-select-field-color);
+        cursor: var(--fs-select-field-cursor) !important;
+    }
 
-        & > .v-field__append-inner {
-            color: var(--fs-select-field-color);
-        }
+    & > .v-field__append-inner {
+        color: var(--fs-select-field-color);
     }
 }
 

package/styles/components/fs_text_area.scss

@@ -1,11 +1,6 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
-    padding: 0px !important;
-    min-width: 240px;
-    width: 100%;
-
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
-        border-radius: 4px !important;
         padding: 0 !important;
 
         &--error {
@@ -16,19 +11,14 @@
             border-color: var(--fs-text-area-active-border-color) !important;
         }
 
-        & > .v-field__outline {
-            display: none;
-        }
-
         & > .v-field__field > .v-field__input {
             @extend .text-body;
-
+            
             @extend .fs-hide-y-scrollbar;
 
             mask-image: none !important;
             -webkit-mask-image: none !important;
 
-            padding-inline: 0 !important;
             margin: 2px 2px 2px 0 !important;
             cursor: var(--fs-text-area-cursor) !important;
             min-height: var(--fs-text-area-min-height);
@@ -47,13 +37,8 @@
 }
 
 .fs-text-area-auto-grow {
-    padding: 0px !important;
-    min-width: 240px;
-    width: 100%;
-
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
-        border-radius: 4px !important;
         padding: 0 !important;
 
         &--error {
@@ -64,10 +49,6 @@
             border-color: var(--fs-text-area-active-border-color) !important;
         }
 
-        & > .v-field__outline {
-            display: none;
-        }
-
         & > .v-field__field > .v-field__input {
             @extend .text-body;
 

package/styles/components/fs_text_field.scss

@@ -1,50 +1,18 @@
-.fs-text-field {
-    padding: 0px !important;
-    min-width: 240px;
-    width: 100%;
+.fs-text-field  > .v-input__control > .v-field {
+    border: 1px solid var(--fs-text-field-border-color) !important;
+    cursor: var(--fs-text-field-cursor) !important;
 
-    & > .v-input__control > .v-field {
-        border: 1px solid var(--fs-text-field-border-color) !important;
-        cursor: var(--fs-text-field-cursor) !important;
-        border-radius: 4px !important;
-        padding: 0 16px !important;
-        gap: 8px;
-
-        &--error {
-            border-color: var(--fs-text-field-error-border-color) !important;
-        }
-
-        &:not(.v-field--error):focus-within {
-            border-color: var(--fs-text-field-active-border-color) !important;
-        }
-
-        & > .v-field__outline {
-            display: none;
-        }
+    &--error {
+        border-color: var(--fs-text-field-error-border-color) !important;
+    }
 
-        & > .v-field__field {
-            &  > input {
-                @extend .text-body;
-            
-                padding-inline: 0 !important;
-                color: var(--fs-text-field-color);
-                cursor: var(--fs-select-field-cursor) !important;
-            
-                @include web {
-                    min-height: 38px !important;
-                    height: 38px !important;
-                }
-            
-                @include mobile {
-                    min-height: 34px !important;
-                    height: 34px !important;
-                }
-            }
-        }
+    &:not(.v-field--error):focus-within {
+        border-color: var(--fs-text-field-active-border-color) !important;
+    }
 
-        & > .v-field__clearable {
-            margin-inline: 0px;
-        }
+    & > .v-field__field > .v-field__input {
+        color: var(--fs-text-field-color);
+        cursor: var(--fs-select-field-cursor) !important;
     }
 }
 

package/styles/components/index.scss

@@ -28,6 +28,7 @@
 @import "fs_link.scss";
 @import "fs_load_data_table.scss";
 @import "fs_load_tile.scss";
+@import "fs_loader.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
 @import "fs_radio.scss";

package/styles/globals/overrides.scss

@@ -8,20 +8,60 @@
     display: none;
 }
 
-// Margin with prepend / append downgraded to default gap
-.v-input > .v-input__prepend {
-    margin-inline-end: 8px !important;
-}
+// Applies to all inputs
+.v-input {
+    padding: 0px !important;
+    min-width: 240px;
+    width: 100%;
 
-.v-input > .v-input__append {
-    margin-inline-start: 8px !important;
-}
+    & .v-input__prepend {
+        margin-inline-end: 8px !important;
+    }
+
+    & .v-input__append {
+        margin-inline-start: 8px !important;
+    }
+
+    & > .v-input__control > .v-field {
+        border-radius: 4px !important;
 
-// Clearable icon is always centered vertically
-.v-input__control > .v-field > .v-field__clearable {
-    align-items: center;
-    padding-top: 0px;
-    height: 100%;
+        & > .v-field__clearable {
+            align-items: center;
+            margin-inline: 0px;
+            padding-top: 0px;
+            height: 100%;
+        }
+
+        & > .v-field__outline {
+            display: none !important;
+        }
+    }
+
+    &:not(.fs-text-area) > .v-input__control > .v-field {
+        padding: 0 16px !important;
+        gap: 8px;
+
+        & > .v-field__field > .v-field__input {
+            @extend .text-body;
+            
+            padding-inline: 0px !important;
+            padding-bottom: 0px !important;
+            padding-top: 0px !important;
+            align-items: center;
+            flex-wrap: nowrap;
+            overflow: hidden;
+        
+            @include web {
+                min-height: 38px !important;
+                height: 38px !important;
+            }
+        
+            @include mobile {
+                min-height: 34px !important;
+                height: 34px !important;
+            }
+        }
+    }
 }