@dative-gpi/foundation-shared-components 1.0.81 → 1.0.83

package/components/FSClickable.vue

@@ -115,7 +115,6 @@
       v-if="$props.load"
     >
       <v-progress-circular
-        :class="$props.class"
         class="fs-clickable-load"
         width="2"
         size="24"

package/components/FSClock.vue

@@ -54,9 +54,9 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
 import FSCol from "./FSCol.vue";
@@ -99,6 +99,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { epochToLongDateFormat } = useDateFormat();
+    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -116,7 +117,11 @@ export default defineComponent({
           "--fs-clock-field-background-color"   : backgrounds.base,
           "--fs-clock-field-border-color"       : lights.base,
           "--fs-clock-field-color"              : lights.dark,
-          "--fs-clock-field-active-border-color": lights.base
+          "--fs-clock-field-active-border-color": lights.base,
+          "--fs-font-font-size"                 : isMobileSized.value ? "12px" : "14px",
+          "--fs-font-line-height"               : isMobileSized.value ? "16px" : "20px",
+          "--fs-font-letter-spacing"            : isMobileSized.value ? "-0.36px" : "-0.42px",
+          "--fs-base-field-input-height"        : isMobileSized.value ? "34px" : "38px"
         };
       }
       return {
@@ -124,7 +129,11 @@ export default defineComponent({
         "--fs-clock-field-background-color"   : colors.value.light,
         "--fs-clock-field-border-color"       : colors.value.base,
         "--fs-clock-field-color"              : darks.base,
-        "--fs-clock-field-active-border-color": colors.value.dark
+        "--fs-clock-field-active-border-color": colors.value.dark,
+        "--fs-font-font-size"                 : isMobileSized.value ? "12px" : "14px",
+        "--fs-font-line-height"               : isMobileSized.value ? "16px" : "20px",
+        "--fs-font-letter-spacing"            : isMobileSized.value ? "-0.36px" : "-0.42px",
+        "--fs-base-field-input-height"        : isMobileSized.value ? "34px" : "38px"
       };
     });
 

package/components/FSLoader.vue

@@ -76,8 +76,8 @@ export default defineComponent({
     const getWidth = computed((): string | number => {
       switch (props.variant) {
         case "standard": return sizeToVar(props.width);
-        case "button"  : return isMobileSized ? "36px" : "40px";
-        case "input"   : return isMobileSized ? "calc(50% - 124px)" : "calc(50% - 132px)";
+        case "button"  : return isMobileSized.value ? "36px" : "40px";
+        case "input"   : return isMobileSized.value ? "calc(50% - 124px)" : "calc(50% - 132px)";
         case "field"   : return "100%";
         case "chip"    : return "8vw";
         case "text-h1" : return "calc(50% - 32px)";

package/components/FSSlideGroup.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid";
@@ -86,6 +86,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { isMobileSized } = useBreakpoints();
     const { getChildren } = useSlots();
     const { getColors } = useColors();
 
@@ -99,12 +100,13 @@ export default defineComponent({
     const elementId = `id${uuidv4()}`;
 
     const style = computed((): StyleValue => ({
-      "--fs-group-padding"     : sizeToVar(props.padding),
-      "--fs-group-gap"         : sizeToVar(props.gap),
-      "--fs-group-color"       : darks.soft,
-      "--fs-group-hover-color" : darks.dark,
-      "--fs-group-width"       : sizeToVar(props.width),
-      "--fs-group-height"      : sizeToVar(props.height)
+      "--fs-group-padding"    : sizeToVar(props.padding),
+      "--fs-group-gap"        : sizeToVar(props.gap),
+      "--fs-group-color"      : darks.soft,
+      "--fs-group-hover-color": darks.dark,
+      "--fs-group-width"      : sizeToVar(props.width),
+      "--fs-group-height"     : sizeToVar(props.height),
+      "--fs-group-icon-size"  : isMobileSized.value ? "20px" : "24px",
     }));
 
     const nextClasses = computed((): string[] => {

package/components/FSSpan.vue

@@ -13,7 +13,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSSpan",
@@ -45,10 +45,12 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { slots } = useSlots();
 
     const style = computed((): StyleValue => ({
-      "--fs-span-line-clamp": props.lineClamp.toString()
+      "--fs-span-line-clamp": props.lineClamp.toString(),
+      ...fontStyles.value
     }));
 
     const classes = computed((): string[] => {

package/components/FSTabs.vue

@@ -18,8 +18,8 @@
 import { computed, defineComponent, onMounted, type PropType, type StyleValue } from "vue";
 import { useRouter } from "vue-router";
 
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSTabs",
@@ -42,6 +42,7 @@ export default defineComponent({
   },
   emits: ["update:tab"],
   setup(props, { emit }) {
+    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
     const router = useRouter();
 
@@ -56,7 +57,9 @@ export default defineComponent({
       "--fs-tab-hover-border-color"     : darks.dark,
       "--fs-tab-active-background-color": colors.value.light,
       "--fs-tab-tag-background-color"   : colors.value.base,
-      "--fs-tab-tag-color"              : colors.value.baseContrast!
+      "--fs-tab-tag-color"              : colors.value.baseContrast!,
+      "--fs-tab-height"                 : isMobileSized.value ? "40px" : "48px",
+      "--fs-tab-tag-size"               : isMobileSized.value ? "24px" : "28px"
     }));
 
     const onUpdateTab = (tab: number): void => {

package/components/FSTag.vue

@@ -59,7 +59,7 @@ export default defineComponent({
     height: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "hug"
+      default: () => ["28px", "24px"]
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,

package/components/FSText.vue

@@ -13,8 +13,8 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSText",
@@ -51,6 +51,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -58,7 +59,8 @@ export default defineComponent({
 
     const style = computed((): StyleValue => ({
       "--fs-span-line-clamp": props.lineClamp.toString(),
-      "--fs-text-color"     : colors.value[props.variant]!
+      "--fs-text-color"     : colors.value[props.variant]!,
+      ...fontStyles.value
     }));
 
     const classes = computed((): string[] => {

package/components/fields/FSAutocompleteField.vue

@@ -602,7 +602,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:search", "add:item"],
   setup: (props, { emit }) => {
-    const { isExtraSmall, isMobileSized } = useBreakpoints();
+    const { fontStyles, isExtraSmall, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
@@ -622,21 +622,25 @@ export default defineComponent({
     const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
-          "--fs-autocomplete-field-cursor":              "default",
-          "--fs-autocomplete-field-border-color":        lights.base,
-          "--fs-autocomplete-field-color":               lights.dark,
-          "--fs-autocomplete-field-active-border-color": lights.base
+          "--fs-autocomplete-field-cursor"             : "default",
+          "--fs-autocomplete-field-border-color"       : lights.base,
+          "--fs-autocomplete-field-color"              : lights.dark,
+          "--fs-autocomplete-field-active-border-color": lights.base,
+          "--fs-base-field-input-height"               : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
-        "--fs-autocomplete-field-cursor":                   "text",
-        "--fs-autocomplete-field-background-color":         backgrounds.base,
+        "--fs-autocomplete-field-cursor"                  : "text",
+        "--fs-autocomplete-field-background-color"        : backgrounds.base,
         "--fs-autocomplete-field-no-data-background-color": lights.light,
-        "--fs-autocomplete-field-border-color":             lights.dark,
-        "--fs-autocomplete-field-color":                    darks.base,
-        "--fs-autocomplete-field-active-border-color":      darks.dark,
-        "--fs-autocomplete-field-error-color":              errors.base,
-        "--fs-autocomplete-field-error-border-color":       errors.base
+        "--fs-autocomplete-field-border-color"            : lights.dark,
+        "--fs-autocomplete-field-color"                   : darks.base,
+        "--fs-autocomplete-field-active-border-color"     : darks.dark,
+        "--fs-autocomplete-field-error-color"             : errors.base,
+        "--fs-autocomplete-field-error-border-color"      : errors.base,
+        "--fs-base-field-input-height"                    : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 
@@ -699,8 +703,8 @@ export default defineComponent({
     });
 
     const maxHeight = computed(() => {
-      const other = 8 + 8                // Paddings
-        + (isMobileSized ? 36 : 40) + 8; // Header
+      const other = 8 + 8                      // Paddings
+        + (isMobileSized.value ? 36 : 40) + 8; // Header
       return `calc(100vh - 40px - ${other}px)`;
     });
 

package/components/fields/FSRichTextField.vue

@@ -316,7 +316,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { isMobileSized } = useBreakpoints();
+    const { fontStyles, isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
     const linkColors = computed(() => getColors(props.linkColor));
@@ -407,35 +407,41 @@ export default defineComponent({
         case "standard": {
           if (!props.editable) {
             return {
-              "--fs-rich-text-field-undo-cursor": "default",
-              "--fs-rich-text-field-icon-cursor": "default",
-              "--fs-rich-text-field-border-color": lights.base,
-              "--fs-rich-text-field-color": lights.dark,
+              "--fs-rich-text-field-undo-cursor"        : "default",
+              "--fs-rich-text-field-icon-cursor"        : "default",
+              "--fs-rich-text-field-border-color"       : lights.base,
+              "--fs-rich-text-field-color"              : lights.dark,
               "--fs-rich-text-field-active-border-color": lights.base,
-              "--fs-rich-text-field-link-color": linkColors.value.light,
-              "--fs-rich-text-field-min-height": minHeight
+              "--fs-rich-text-field-link-color"         : linkColors.value.light,
+              "--fs-rich-text-field-min-height"         : minHeight,
+              "--fs-rich-text-field-padding"            : isMobileSized.value ? "6px 16px" : "10px 12px",
+              ...fontStyles.value
             };
           }
           else {
             return {
-              "--fs-rich-text-field-undo-cursor": canUndo.value ? "pointer" : "default",
-              "--fs-rich-text-field-icon-cursor": "pointer",
-              "--fs-rich-text-field-border-color": lights.dark,
-              "--fs-rich-text-field-color": darks.base,
-              "--fs-rich-text-field-active-border-color": darks.dark,
-              "--fs-rich-text-field-link-color": linkColors.value.dark,
-              "--fs-rich-text-field-min-height": minHeight,
+              "--fs-rich-text-field-undo-cursor"             : canUndo.value ? "pointer" : "default",
+              "--fs-rich-text-field-icon-cursor"             : "pointer",
+              "--fs-rich-text-field-border-color"            : lights.dark,
+              "--fs-rich-text-field-color"                   : darks.base,
+              "--fs-rich-text-field-active-border-color"     : darks.dark,
+              "--fs-rich-text-field-link-color"              : linkColors.value.dark,
+              "--fs-rich-text-field-min-height"              : minHeight,
               "--fs-rich-text-field-variable-backgroundcolor": getColors(ColorEnum.Primary).light,
-              "--fs-rich-text-field-variable-color": getColors(ColorEnum.Primary).lightContrast!
+              "--fs-rich-text-field-variable-color"          : getColors(ColorEnum.Primary).lightContrast!,
+              "--fs-rich-text-field-padding"                 : isMobileSized.value ? "6px 16px" : "10px 12px",
+              ...fontStyles.value
             };
           }
         }
         case "readonly": return {
-          "--fs-rich-text-field-border-color": "transparent",
-          "--fs-rich-text-field-color": darks.base,
+          "--fs-rich-text-field-border-color"       : "transparent",
+          "--fs-rich-text-field-color"              : darks.base,
           "--fs-rich-text-field-active-border-color": "transparent",
-          "--fs-rich-text-field-link-color": linkColors.value.dark,
-          "--fs-rich-text-field-min-height": minHeight
+          "--fs-rich-text-field-link-color"         : linkColors.value.dark,
+          "--fs-rich-text-field-min-height"         : minHeight,
+          "--fs-rich-text-field-padding"            : "0",
+          ...fontStyles.value
         }
       }
     });

package/components/fields/FSSelectField.vue

@@ -560,8 +560,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
+    const { fontStyles, isExtraSmall, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
-    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -581,7 +581,9 @@ export default defineComponent({
           "--fs-select-field-cursor"             : "default",
           "--fs-select-field-border-color"       : lights.base,
           "--fs-select-field-color"              : lights.dark,
-          "--fs-select-field-active-border-color": lights.base
+          "--fs-select-field-active-border-color": lights.base,
+          "--fs-base-field-input-height"         : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
@@ -590,7 +592,9 @@ export default defineComponent({
         "--fs-select-field-border-color"       : lights.dark,
         "--fs-select-field-color"              : darks.base,
         "--fs-select-field-active-border-color": darks.dark,
-        "--fs-select-field-error-border-color" : errors.base
+        "--fs-select-field-error-border-color" : errors.base,
+        "--fs-base-field-input-height"         : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 

package/components/fields/FSTermField.vue

@@ -68,7 +68,7 @@
         </template>
         <FSDateTimeRangeField
           v-else-if="innerDateSetting === DateSetting.Pick"
-          minWidth="180px"
+          :width="['350px', '310px']"
           :rules="[DateRules.required()]"
           :editable="$props.editable"
           :hideHeader="true"

package/components/fields/FSTextArea.vue

@@ -136,8 +136,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { fontStyles, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
-    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -152,7 +152,7 @@ export default defineComponent({
       let fieldHeight: string | undefined = undefined;
       if (!props.autoGrow) {
         const base = isMobileSized.value ? 34 : 38;
-        const row = isMobileSized.value ? 14 : 16;
+        const row = isMobileSized.value ? 18 : 20;
         if (props.rows > 1) {
           height = `${base + (props.rows - 1) * row}px`;
         }
@@ -168,7 +168,10 @@ export default defineComponent({
           "--fs-text-area-color"              : lights.dark,
           "--fs-text-area-active-border-color": lights.base,
           "--fs-text-area-height"             : height,
-          "--fs-text-area-field-height"       : fieldHeight
+          "--fs-text-area-field-height"       : fieldHeight,
+          "--fs-text-area-padding"            : isMobileSized.value ? "10px 16px" : "11px 16px",
+          "--fs-base-field-input-height"      : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
@@ -178,7 +181,10 @@ export default defineComponent({
         "--fs-text-area-active-border-color": darks.dark,
         "--fs-text-area-error-border-color" : errors.base,
         "--fs-text-area-height"             : height,
-        "--fs-text-area-field-height"       : fieldHeight
+        "--fs-text-area-field-height"       : fieldHeight,
+        "--fs-text-area-padding"            : isMobileSized.value ? "10px 16px" : "11px 16px",
+        "--fs-base-field-input-height"      : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 

package/components/fields/FSTextField.vue

@@ -71,7 +71,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
@@ -137,6 +137,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props) {
+    const { fontStyles, isMobileSized } = useBreakpoints();
     const { validateOn, getMessages } = useRules();
     const { getColors } = useColors();
     const { slots } = useSlots();
@@ -154,7 +155,9 @@ export default defineComponent({
           "--fs-text-field-cursor"             : "default",
           "--fs-text-field-border-color"       : lights.base,
           "--fs-text-field-color"              : lights.dark,
-          "--fs-text-field-active-border-color": lights.base
+          "--fs-text-field-active-border-color": lights.base,
+          "--fs-base-field-input-height"       : isMobileSized.value ? "34px" : "38px",
+          ...fontStyles.value
         };
       }
       return {
@@ -162,7 +165,9 @@ export default defineComponent({
         "--fs-text-field-border-color"       : lights.dark,
         "--fs-text-field-color"              : darks.base,
         "--fs-text-field-active-border-color": darks.dark,
-        "--fs-text-field-error-border-color" : errors.base
+        "--fs-text-field-error-border-color" : errors.base,
+        "--fs-base-field-input-height"       : isMobileSized.value ? "34px" : "38px",
+        ...fontStyles.value
       };
     });
 

package/components/lists/FSDataTableUI.vue

@@ -22,8 +22,8 @@
         <FSButton
           v-if="filterableHeaders.length > 0"
           prependIcon="mdi-filter-variant"
-          :variant="showFilters ? 'full' : 'standard'"
-          @click="showFilters = !showFilters"
+          :variant="innerShowFilters ? 'full' : 'standard'"
+          @click="innerShowFilters = !innerShowFilters"
         />
       </template>
       <slot
@@ -33,7 +33,6 @@
       <template
         v-if="!$props.disableTable && !$props.disableIterator"
       >
-        <v-spacer />
         <FSRow
           align="center-right"
         >
@@ -41,6 +40,7 @@
             :values="modeOptions"
             :singleColor="true"
             :required="true"
+            variant="slide"
             v-model="innerMode"
           />
         </FSRow>
@@ -60,7 +60,7 @@
       gap="16px"
     >
       <FSCol
-        v-if="showFilters && hasVisibleFilters"
+        v-if="innerShowFilters && hasVisibleFilters"
         width="hug"
       >
         <FSRow
@@ -94,7 +94,7 @@
           gap="8px"
         >
           <FSChip
-            v-if="showFilters && resetable"
+            v-if="innerShowFilters && resetable"
             variant="standard"
             :label="$tr('ui.data-table.reset-filters', 'Reset')"
             :height="['30px', '24px']"
@@ -745,6 +745,11 @@ export default defineComponent({
       type: Array as PropType<FSDataTableColumn[]>,
       required: true
     },
+    showFilters: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     filters: {
       type: Object as PropType<{ [key: string]: FSDataTableFilter[] }>,
       required: false,
@@ -880,7 +885,7 @@ export default defineComponent({
       default: "12px"
     },
   },
-  emits: ["update:modelValue", "update:headers", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
+  emits: ["update:modelValue", "update:headers", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
     const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
@@ -896,7 +901,7 @@ export default defineComponent({
     const innerSortBy = ref(props.sortBy);
     const innerMode = ref(props.disableTable ? "iterator" : props.disableIterator ? "table" : props.mode);
     const innerPage = ref(props.page);
-    const showFilters = ref(false);
+    const innerShowFilters = ref(props.showFilters);
     const resetable = ref(false);
 
     const intersectionObserver = ref<IntersectionObserver | null>(null);
@@ -917,7 +922,14 @@ export default defineComponent({
     ];
 
     const showFiltersRow = computed((): boolean => {
-      return (props.showSearch && showFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+      switch (innerMode.value) {
+        case "iterator": {
+          return (props.showSearch && innerShowFilters.value && filterableHeaders.value.length > 0);
+        }
+        case "table": {
+          return (props.showSearch && innerShowFilters.value && filterableHeaders.value.length > 0) || hiddenHeaders.value.length > 0;
+        }
+      }
     });
 
     const hasVisibleFilters = computed((): boolean => {
@@ -925,7 +937,15 @@ export default defineComponent({
     });
 
     const showFiltersDivider = computed((): boolean => {
-      return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
+      switch (innerMode.value) {
+        case "iterator": {
+          return resetable.value;
+        }
+        case "table": {
+          return resetable.value || (hiddenHeaders.value.length > 0 && hasVisibleFilters.value);
+        }
+      }
+      
     });
 
     const hasToolbar = computed((): boolean => {
@@ -1029,12 +1049,12 @@ export default defineComponent({
           if (props.selectedOnly && !props.modelValue.includes(item[props.itemValue])) {
             return false;
           }
-          if (innerSearchFormatted) {
-            return containsSearchTerm(item, innerSearchFormatted);
-          }
           if (activeFilters.some(af => af.filter.filter && af.filter.filter(af.filter.value, item[af.key], item))) {
             return false;
           }
+          if (innerSearchFormatted) {
+            return containsSearchTerm(item, innerSearchFormatted);
+          }
           return true;
         });
       }
@@ -1479,10 +1499,18 @@ export default defineComponent({
       }
     });
 
+    watch(() => props.showFilters, () => {
+      innerShowFilters.value = props.showFilters;
+    });
+
     watch(innerSearch, () => {
       innerPage.value = 1;
     });
 
+    watch(innerShowFilters, () => {
+      emit("update:showFilters", innerShowFilters.value);
+    });
+
     watch(filters, () => {
       resetable.value = Object.keys(filters.value)
         .some((key) => filters.value[key].some((filter) => filter.hidden));
@@ -1531,7 +1559,7 @@ export default defineComponent({
       innerPage,
       hasToolbar,
       pageOptions,
-      showFilters,
+      innerShowFilters,
       showFiltersRow,
       showFiltersDivider,
       hasVisibleFilters,

package/components/tiles/FSLoadTile.vue

@@ -42,6 +42,8 @@
     <FSCard
       v-if="$props.editable"
       class="fs-tile-checkbox"
+      :height="['40px', '32px']"
+      :width="['40px', '32px']"
       :border="false"
     >
       <FSCheckbox

package/components/tiles/FSTile.vue

@@ -35,7 +35,8 @@
         v-if="$props.editable"
         class="fs-tile-checkbox"
         variant="background"
-        :color="ColorEnum.Background"
+        :height="['40px', '32px']"
+        :width="['40px', '32px']"
         :border="false"
         v-bind="$attrs"
       >
@@ -61,6 +62,8 @@
         v-if="$props.editable"
         class="fs-tile-checkbox"
         variant="background"
+        :height="['40px', '32px']"
+        :width="['40px', '32px']"
         :border="false"
         v-bind="$attrs"
       >

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -53,9 +53,10 @@
             >
               <slot
                 name="subtitle"
+                v-if="topOffset < 60"
               >
                 <FSText
-                  v-if="$props.subtitle && topOffset < 60"
+                  v-if="$props.subtitle"
                   font="text-button"
                 >
                   {{ $props.subtitle }}
@@ -63,9 +64,10 @@
               </slot>
               <slot
                 name="description"
+                v-if="topOffset < 20"
               >
                 <FSText
-                  v-if="$props.description && topOffset < 20"
+                  v-if="$props.description"
                   font="text-body"
                 >
                   {{ $props.description }}
@@ -204,4 +206,4 @@ export default defineComponent({
     }
   }
 });
-</script>
+</script>