@dative-gpi/foundation-shared-components 1.0.4 → 1.0.6

package/components/FSBreadcrumbs.vue

@@ -27,11 +27,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType, Ref} from "vue";
-import { defineComponent, ref } from "vue";
+import { defineComponent, type PropType, type Ref, ref } from "vue";
 
-import type { FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";
@@ -46,7 +44,8 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<FSBreadcrumbItem[]>,
-      required: true,
+      required: false,
+      default: () => []
     }
   },
   setup() {

package/components/FSButton.vue

@@ -128,13 +128,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
-import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType } from "vue";
+import { type RouteLocation } from "vue-router";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, 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 FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";

package/components/FSCard.vue

@@ -34,11 +34,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -73,7 +71,7 @@ export default defineComponent({
       default: "8px"
     },
     variant: {
-      type: String as PropType<"background" | "standard" | "gradient">,
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
       default: "background"
     },
@@ -119,6 +117,17 @@ export default defineComponent({
 
     const style = computed((): { [key: string] : string | null | undefined } => {
       switch (props.variant) {
+        case "background": return {
+          "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
+          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-card-padding"         : sizeToVar(props.padding),
+          "--fs-card-height"          : sizeToVar(props.height),
+          "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-background-color": backgrounds.base,
+          "--fs-card-border-color"    : lights.dark,
+          "--fs-card-color"           : darks.base
+        }
         case "standard": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
           "--fs-card-border-style"    : props.borderStyle,
@@ -130,16 +139,16 @@ export default defineComponent({
           "--fs-card-border-color"    : colors.value.lightContrast,
           "--fs-card-color"           : colors.value.lightContrast
         }
-        case "background": return {
+        case "full": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
           "--fs-card-border-style"    : props.borderStyle,
           "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-background-color": backgrounds.base,
-          "--fs-card-border-color"    : lights.dark,
-          "--fs-card-color"           : darks.base
+          "--fs-card-background-color": colors.value.base,
+          "--fs-card-border-color"    : colors.value.base,
+          "--fs-card-color"           : colors.value.baseContrast
         }
         case "gradient": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",

package/components/FSColor.vue

@@ -1,8 +1,8 @@
 <template>
   <FSCard
+    :variant="$props.variant"
     :border="$props.border"
-    :class="classes"
-    :style="style"
+    :color="$props.color"
     v-bind="$attrs"
   >
     <slot
@@ -12,11 +12,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";
@@ -27,15 +25,20 @@ export default defineComponent({
     FSCard
   },
   props: {
-    border: {
-      type: Boolean,
+    variant: {
+      type: String as PropType<"standard" | "full">,
       required: false,
-      default: true
+      default: "standard"
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {
@@ -43,29 +46,8 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-color-background-color": colors.value.light,
-        "--fs-color-border-color"    : colors.value.lightContrast,
-        "--fs-color-color"           : colors.value.lightContrast,
-        "--fs-color-light"           : colors.value.light,
-        "--fs-color-base"            : colors.value.base,
-        "--fs-color-dark"            : colors.value.dark
-      };
-    });
-
-    const classes = computed((): string[] => {
-      const classNames = ["fs-color"];
-      if (props.border) {
-        classNames.push("fs-color-border");
-      }
-      return classNames;
-    });
-
     return {
-      classes,
-      colors,
-      style
+      colors
     };
   }
 });

package/components/FSIconCard.vue

@@ -21,11 +21,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
@@ -67,14 +65,14 @@ export default defineComponent({
     const variant = computed((): "background" | "gradient" => {
       switch (props.backgroundColor) {
         case ColorEnum.Background: return "background";
-        default:                   return "gradient";
+        default                  : return "gradient";
       }
     });
 
     const border = computed((): boolean => {
       switch (props.backgroundColor) {
         case ColorEnum.Background: return true;
-        default:                   return false;
+        default                  : return false;
       }
     });
 

package/components/fields/FSColorField.vue

@@ -112,7 +112,7 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: String,
+      type: String as PropType<string | null>,
       required: false,
       default: "#000000"
     },
@@ -164,9 +164,9 @@ export default defineComponent({
 
     const menu = ref(false);
 
-    const innerColor = ref(getColors(props.modelValue).base);
-    const innerOpacity = ref(getHexFromPercentage(props.opacityValue));
-    const fullColor = ref(innerColor.value + innerOpacity.value);
+    const innerColor = ref("#000000");
+    const innerOpacity = ref("00");
+    const fullColor = ref("#00000000");
 
     const style = computed((): { [key: string]: string | undefined } => {
       if (!props.editable) {
@@ -185,7 +185,6 @@ export default defineComponent({
       };
     });
 
-
     const onSubmit = (value: string) => {
       innerColor.value = value.substring(0, 7);
       innerOpacity.value = value.length === 9 ? value.substring(7, 9) : "FF";
@@ -195,14 +194,21 @@ export default defineComponent({
     };
 
     const reset = (): void => {
-      innerColor.value = getColors(props.modelValue)['base'];
-      innerOpacity.value = getHexFromPercentage(props.opacityValue);
-      fullColor.value = innerColor.value + innerOpacity.value;
+      if (props.modelValue) {
+        innerColor.value = getColors(props.modelValue)['base'];
+        innerOpacity.value = getHexFromPercentage(props.opacityValue);
+        fullColor.value = innerColor.value + innerOpacity.value;
+      }
+      else {
+        innerColor.value = "#000000";
+        innerOpacity.value = "00";
+        fullColor.value = "#00000000";
+      }
     };
 
     watch(() => props.modelValue, () => {
       reset();
-    });
+    }, { immediate: true });
 
     return {
       getPercentageFromHex,

package/components/views/FSEntityHeader.vue

@@ -0,0 +1,319 @@
+<template>
+  <template
+    v-if="isExtraSmall"
+  >
+    <FSCol
+      class="f-entity-header"
+      padding="0 10px 0 0"
+      align="center-left"
+      gap="12px"
+    >
+      <FSRow
+        align="center-left"
+        gap="12px"
+        :height="imageSize"
+        :wrap="false"
+      >
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :height="imageSize"
+          :width="imageSize"
+          :cover="imageCover"
+        />
+        <FSIcon
+          v-else-if="$props.icon && $props.color"
+          :icon="$props.icon"
+          :size="imageSize"
+          :color="$props.color"
+        />
+        <FSIconCard
+          v-else-if="$props.icon && $props.iconBackgroundColors && $props.iconBackgroundColors.length > 0"
+          :icon="$props.icon"
+          :size="imageSize"
+          :backgroundColor="$props.iconBackgroundColors"
+        />
+        <FSCol
+          align="center-left"
+          :width="`calc(100% - ${rightOverflow})`"
+        >
+          <template
+            v-if="$props.subtitle && $props.description"
+          >
+            <FSText
+              font="text-h3"
+            >
+              {{ $props.title }}
+            </FSText>
+            <FSCol
+              align="center-left"
+              gap="4px"
+            >
+              <FSText>
+                {{ $props.subtitle }}
+              </FSText>
+              <FSText
+                font="text-overline"
+              >
+                {{ $props.description }}
+              </FSText>
+            </FSCol>
+          </template>
+          <template
+            v-else-if="$props.subtitle && !$props.description"
+          >
+            <FSText
+              font="text-h3"
+              :lineClamp="2"
+            >
+              {{ $props.title }}
+            </FSText>
+            <FSText>
+              {{ $props.subtitle }}
+            </FSText>
+          </template>
+          <template
+            v-else-if="!$props.subtitle && $props.description"
+          >
+            <FSText
+              font="text-h3"
+              :lineClamp="2"
+            >
+              {{ $props.title }}
+            </FSText>
+            <FSText
+              font="text-overline"
+              :lineClamp="2"
+            >
+              {{ $props.description }}
+            </FSText>
+          </template>
+          <template
+            v-else
+          >
+            <FSText
+              font="text-h3"
+              :lineClamp="2"
+            >
+              {{ $props.title }}
+            </FSText>
+          </template>
+        </FSCol>
+      </FSRow>
+      <template
+        v-if="!$props.light"
+      >
+        <FSBreadcrumbs
+          :items="$props.breadcrumbs"
+        />
+        <FSSlideGroup
+          v-if="slots['toolbar']"
+        >
+          <slot
+            name="toolbar"
+          />
+        </FSSlideGroup>
+        <slot
+          name="title-append"
+        />
+      </template>
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
+    <FSCol
+      class="f-entity-header"
+      padding="0 14px 0 0"
+      align="center-left"
+      gap="16px"
+    >
+      <FSRow
+        align="center-left"
+        gap="16px"
+        :height="imageSize"
+        :wrap="false"
+      >
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :height="imageSize"
+          :width="imageSize"
+          :cover="imageCover"
+        />
+        <FSIconCard
+          v-else-if="$props.icon && $props.iconBackgroundColors && $props.iconBackgroundColors.length > 0"
+          :icon="$props.icon"
+          :size="imageSize"
+          iconSize="70px"
+          :backgroundColor="$props.iconBackgroundColors"
+        />
+        <FSIcon
+          v-else-if="$props.icon"
+          :icon="$props.icon"
+          :size="imageSize"
+          :color="$props.color"
+        />
+        <FSCol
+          align="center-left"
+        >
+          <FSText
+            :font="$props.light ? 'text-h3' : 'text-h2'"
+          >
+            {{ $props.title }}
+          </FSText>
+          <FSCol
+            v-if="!$props.light && ($props.subtitle || $props.description)"
+            gap="4px"
+          >
+            <FSText
+              v-if="$props.subtitle"
+            >
+              {{ $props.subtitle }}
+            </FSText>
+            <FSText
+              v-if="$props.description"
+              font="text-overline"
+              :lineClamp="2"
+            >
+              {{ $props.description }}
+            </FSText>
+          </FSCol>
+        </FSCol>
+        <FSRow
+          v-if="!$props.light"
+          align="center-right"
+        >
+          <slot
+            name="title-append"
+          />
+        </FSRow>
+      </FSRow>
+      <template
+        v-if="!$props.light"
+      >
+        <FSBreadcrumbs
+          :items="$props.breadcrumbs"
+        />
+        <FSSlideGroup
+          v-if="slots['toolbar']"
+        >
+          <slot
+            name="toolbar"
+          />
+        </FSSlideGroup>
+      </template>
+    </FSCol>
+  </template>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSBreadcrumbs from "../FSBreadcrumbs.vue";
+import FSSlideGroup from "../FSSlideGroup.vue";
+import FSIconCard from "../FSIconCard.vue";
+import FSImage from "../FSImage.vue";
+import FSIcon from "../FSIcon.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSEntityHeader",
+  components: {
+    FSBreadcrumbs,
+    FSSlideGroup,
+    FSIconCard,
+    FSImage,
+    FSIcon,
+    FSText,
+    FSCol,
+    FSRow
+  },
+  props: {
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    color : {
+      type: Object as PropType<ColorEnum | null>,
+      required: false,
+      default: null
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    breadcrumbs: {
+      type: Array as PropType<Array<FSBreadcrumbItem>>,
+      required: false,
+      default: () => []
+    },
+    light: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    imageCover: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { isExtraSmall, isMobileSized } = useBreakpoints();
+    const { slots } = useSlots();
+
+    const imageSize = computed((): string[] | string => {
+      if (props.light) {
+        return ["40px", "36px"];
+      }
+      return ["124px", "96px", "80px"];
+    });
+
+    const rightOverflow = computed(() => {
+      let result = imageSize.value[0];
+      if (isExtraSmall.value && imageSize.value[2]) {
+        result = imageSize.value[2];
+      }
+      if ((isExtraSmall.value || isMobileSized.value) && imageSize.value[1]) {
+        result = imageSize.value[1];
+      }
+      return result;
+    });
+
+    return {
+      rightOverflow,
+      isExtraSmall,
+      imageSize,
+      slots
+    };
+  }
+});
+</script>

package/components/views/FSEntityView.vue

@@ -0,0 +1,148 @@
+<template>
+  <FSSkeletonView>
+    <template
+      #header
+    >
+      <FSEntityHeader
+        ref="headerRef"
+        :breadcrumbs="$props.breadcrumbs"
+        :description="$props.description"
+        :subtitle="$props.subtitle"
+        :imageId="$props.imageId"
+        :title="$props.title"
+        :light="lightHeader"
+        :icon="$props.icon"
+        :color="$props.color"
+        :iconBackgroundColors="$props.iconBackgroundColors"
+        :imageCover="$props.imageCover"
+      >
+        <template
+          #title-append
+        >
+          <slot
+            name="title-append"
+          />
+        </template>
+        <template
+          #toolbar
+          v-if="slots['toolbar']"
+        >
+          <slot
+            name="toolbar"
+          />
+        </template>
+      </FSEntityHeader>
+    </template>
+    <template
+      #default
+    >
+      <!-- <FSFadeOut
+        padding="0 8px 0 0"
+        :height="height"
+        @scroll="onScroll"
+      > -->
+      <slot
+        name="default"
+      />
+      <!-- </FSFadeOut> -->
+    </template>
+  </FSSkeletonView>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSEntityHeader from "./FSEntityHeader.vue";
+import FSSkeletonView from "./FSSkeletonView.vue";
+// import FSFadeOut from "../FSFadeOut.vue";
+
+export default defineComponent({
+  name: "FSEntityView",
+  components: {
+    FSEntityHeader,
+    FSSkeletonView
+    // FSFadeOut
+  },
+  props: {
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    imageCover: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    color : {
+      type: Object as PropType<ColorEnum | null>,
+      required: false,
+      default: null
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    breadcrumbs: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: false,
+      default: () => []
+    }
+  },
+  setup() {
+    const { isExtraSmall, windowHeight } = useBreakpoints();
+    const { slots } = useSlots();
+
+    const headerRef = ref<HTMLElement | null>(null);
+
+    const lightHeader = ref(false);
+
+    const height = computed((): string => {
+      let other = isExtraSmall.value ? 16 + 16 : 24 + 24; // Paddings
+
+      return `${windowHeight.value - other}px`;
+    });
+
+    // const onScroll = (event: any): void => {
+    //   if (event.onTop) {
+    //     lightHeader.value = false;
+    //   }
+    //   else if (event.target.scrollTop > (headerRef.value as any)?.$el.clientHeight) {
+    //     lightHeader.value = true;
+    //   }
+    // };
+
+    return {
+      lightHeader,
+      headerRef,
+      height,
+      slots
+      // onScroll
+    };
+  }
+});
+</script>

package/components/views/FSSkeletonView.vue

@@ -0,0 +1,100 @@
+<template>
+  <template
+    v-if="isExtraSmall"
+  >
+    <FSCol
+      padding="16px 4px 16px 12px"
+      height="100vh"
+      gap="16px"
+    >
+      <slot
+        name="header"
+      >
+        <slot
+          name="title"
+        >
+          <FSRow
+            gap="12px"
+          >
+            <slot
+              name="title-image"
+            />
+            <slot
+              name="title-texts"
+            />
+          </FSRow>
+        </slot>
+      </slot>
+      <slot
+        name="breadcrumbs"
+      />
+      <slot
+        name="toolbar"
+      />
+      <slot
+        name="title-append"
+      />
+      <slot
+        name="default"
+      />
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
+    <FSCol
+      padding="24px 8px 24px 24px"
+      height="100vh"
+      gap="16px"
+    >
+      <slot
+        name="header"
+      >
+        <slot
+          name="title"
+        >
+          <FSRow
+            gap="32px"
+          >
+            <slot
+              name="title-image"
+            />
+            <slot
+              name="title-texts"
+            />
+            <v-spacer />
+            <slot
+              name="title-append"
+            />
+          </FSRow>
+        </slot>
+      </slot>
+      <slot
+        name="breadcrumbs"
+      />
+      <slot
+        name="toolbar"
+      />
+      <slot
+        name="default"
+      />
+    </FSCol>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+export default defineComponent({
+  name: "FSSkeletonView",
+  setup() {
+    const { isExtraSmall } = useBreakpoints();
+
+    return {
+      isExtraSmall
+    };
+  }
+});
+</script>

package/composables/useColors.ts

@@ -56,11 +56,20 @@ export const useColors = () => {
         return color.lighten(color.value() / 50);
     }
 
-    const getColors = (color: ColorBase): ColorVariations => {
+    const parseColor = (color: ColorBase): Color => {
         const themed = (Object as any).values(ColorEnum).includes(color);
+        
+        try {
+            return themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        }
+        catch {
+            return new Color("#000000");
+        }
+    }
 
-        const base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
-
+    const getColors = (color: ColorBase): ColorVariations => {
+        const base = parseColor(color);
+        
         const light = getLight(base);
         const soft = getSoft(base);
         const dark = getDark(base);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.4",
-    "@dative-gpi/foundation-shared-services": "1.0.4"
+    "@dative-gpi/foundation-shared-domain": "1.0.6",
+    "@dative-gpi/foundation-shared-services": "1.0.6"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "d48a8be97093c7cf86d3d7d3ac69c66f5156bd2a"
+  "gitHead": "b2bbdea22792b7454a5234d8a6b8bb43553f3202"
 }

package/styles/components/fs_text_area.scss

@@ -1,6 +1,7 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
+        height: var(--fs-text-area-height);
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -24,8 +25,6 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
-
-        height: var(--fs-text-area-height);
         
         @include web {
             padding: 11px 16px !important;