@dative-gpi/foundation-shared-components 1.0.128-fix-mobile → 1.0.128-fix-mobile-3

package/components/FSBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <template>
   <v-breadcrumbs
     class="fs-breadcrumbs"
-    :items="$props.items"
+    :items="items"
     :style="style"
     v-bind="$attrs"
   >
@@ -31,7 +31,9 @@
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import { sizeToVar } from "../utils";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -49,17 +51,31 @@ export default defineComponent({
       default: () => []
     }
   },
-  setup() {
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
 
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => ({
+      "--fs-breadcrumbs-height"        : sizeToVar(["20px", "16px"]),
       "--fs-breadcrumbs-color"         : darks.dark,
       "--fs-breadcrumbs-active-color"  : darks.base,
       "--fs-breadcrumbs-disabled-color": darks.soft
     }));
 
+    const items = computed((): FSBreadcrumbItem[] => {
+      if (isExtraSmall.value && props.items.length > 3) {
+        const mobileItems: FSBreadcrumbItem[] = [0, -2, -1].map((index) => props.items.at(index)!)
+        mobileItems.splice(1, 0, {
+          title    : "...",
+          disabled : true
+        });
+        return mobileItems;
+      }
+      return props.items;
+    });
+
     const classes = (item: FSBreadcrumbItem): string[] => {
       const classNames = ["fs-breadcrumbs-label"];
       if (item.disabled) {
@@ -69,6 +85,7 @@ export default defineComponent({
     };
 
     return {
+      items,
       style,
       classes
     };

package/components/FSDialogMenu.vue

@@ -6,8 +6,8 @@
   >
     <FSCard
       width="calc(100vw - 48px)"
-      padding="8px"
-      gap="24px"
+      :padding="$props.cardPadding"
+      :gap="$props.cardGap"
       :color="$props.color"
       :class="classes"
     >
@@ -43,6 +43,16 @@ export default defineComponent({
       required: false,
       default: null
     },
+    cardPadding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    cardGap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "24px"
+    },
     modelValue: {
       type: Boolean,
       required: false,

package/components/FSFadeOut.vue

@@ -84,7 +84,7 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled);
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled.value);
 
     const style = computed((): StyleValue => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",

package/components/FSSpan.vue

@@ -1,13 +1,15 @@
 <template>
-  <span
+  <div
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <slot>
-      {{ $props.label }}
-    </slot>
-  </span>
+    <span>
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">
@@ -49,6 +51,7 @@ export default defineComponent({
     const { slots } = useSlots();
 
     const style = computed((): StyleValue => ({
+      "--fs-span-text-align": props.align,
       "--fs-span-line-clamp": props.lineClamp.toString(),
       ...fontStyles.value
     }));

package/components/FSText.vue

@@ -1,13 +1,15 @@
 <template>
-  <span
+  <div
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <slot>
-      {{ $props.label }}
-    </slot>
-  </span>
+    <span>
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">

package/components/fields/FSAutocompleteField.vue

@@ -121,6 +121,7 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      cardPadding="16px"
       v-model="dialog"
     >
       <template
@@ -139,69 +140,52 @@
           >
             <FSRow
               v-for="(item, index) in searchItems"
+              align="center-left"
+              height="36px"
+              :wrap="false"
               :key="index"
+              @click="$props.multiple ?
+                onCheckboxChange(item[$props.itemValue!]) :
+                onRadioChange(item[$props.itemValue!])
+              "
             >
-              <FSCheckbox
-                v-if="$props.multiple"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
-              >
-                <template
-                  #label="{ font }"
-                >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSCheckbox>
-              <FSRadio
-                v-else
-                :selected="$props.modelValue === item[$props.itemValue!]"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :item="item"
-                :modelValue="item[$props.itemValue!]"
-                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              <FSRow
+                style="min-width: 0;"
+                :wrap="false"
               >
-                <template
-                  #label="{ font }"
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan
+                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
                 >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSRadio>
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+              </FSRow>
               <FSRow
                 align="center-right"
+                width="hug"
+                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
+                <FSCheckbox
+                  v-if="$props.multiple"
+                  :editable="$props.editable"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
+                />
+                <FSRadio
+                  v-else
+                  :selected="$props.modelValue === item[$props.itemValue!]"
+                  :editable="$props.editable"
+                  :item="item"
+                  :modelValue="item[$props.itemValue!]"
+                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
+                />
               </FSRow>
             </FSRow>
           </FSCol>

package/components/fields/FSSelectField.vue

@@ -122,6 +122,7 @@
       </FSCard>
     </FSSlideGroup>
     <FSDialogMenu
+      cardPadding="16px"
       v-model="dialog"
     >
       <template
@@ -135,69 +136,52 @@
           >
             <FSRow
               v-for="(item, index) in $props.items"
+              align="center-left"
+              height="36px"
+              :wrap="false"
               :key="index"
+              @click="$props.multiple ?
+                onCheckboxChange(item[$props.itemValue!]) :
+                onRadioChange(item[$props.itemValue!])
+              "
             >
-              <FSCheckbox
-                v-if="$props.multiple"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
-                @update:modelValue="() => onCheckboxChange(item[$props.itemValue!])"
-              >
-                <template
-                  #label="{ font }"
-                >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSCheckbox>
-              <FSRadio
-                v-else
-                :selected="$props.modelValue === item[$props.itemValue!]"
-                :label="item[$props.itemTitle!]"
-                :editable="$props.editable"
-                :item="item"
-                :modelValue="item[$props.itemValue!]"
-                @update:modelValue="() => onRadioChange(item[$props.itemValue!])"
+              <FSRow
+                style="min-width: 0;"
+                :wrap="false"
               >
-                <template
-                  #label="{ font }"
+                <slot
+                  name="item-prepend"
+                  v-bind="{ item }"
+                />
+                <FSSpan
+                  :font="selectedItems.includes(item) ? 'text-button' : 'text-body'"
                 >
-                  <FSRow
-                    align="center-left"
-                    :wrap="false"
-                  >
-                    <slot
-                      name="item-prepend"
-                      v-bind="{ item }"
-                    />
-                    <FSSpan
-                      :font="font"
-                    >
-                      {{ item[$props.itemTitle!] }}
-                    </FSSpan>
-                  </FSRow>
-                </template>
-              </FSRadio>
+                  {{ item[$props.itemTitle!] }}
+                </FSSpan>
+              </FSRow>
               <FSRow
                 align="center-right"
+                width="hug"
+                :wrap="false"
               >
                 <slot
                   name="item-append"
                   v-bind="{ item }"
                 />
+                <FSCheckbox
+                  v-if="$props.multiple"
+                  :editable="$props.editable"
+                  :modelValue="$props.modelValue?.includes(item[$props.itemValue!])"
+                  @update:modelValue="onCheckboxChange(item[$props.itemValue!])"
+                />
+                <FSRadio
+                  v-else
+                  :selected="$props.modelValue === item[$props.itemValue!]"
+                  :editable="$props.editable"
+                  :item="item"
+                  :modelValue="item[$props.itemValue!]"
+                  @update:modelValue="onRadioChange(item[$props.itemValue!])"
+                />
               </FSRow>
             </FSRow>
           </FSCol>

package/components/lists/FSDataTableUI.vue

@@ -35,6 +35,7 @@
         v-if="!$props.disableTable && !$props.disableIterator"
       >
         <FSRow
+          :width="isMobileSized ? 'hug' : 'fill'"
           align="center-right"
         >
           <FSOptionGroup
@@ -900,8 +901,8 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "update:headers", "update:search", "update:showFilters", "update:filters", "update:mode", "update:sortBy", "update:rowsPerPage", "update:page", "update:include", "update:items", "click:row"],
   setup(props, { emit }) {
+    const { isExtraSmall, isMobileSized } = useBreakpoints();
     const { handleRoutingEvent } = useRouting();
-    const { isExtraSmall } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
     const { getColors } = useColors();
     const router = useRouter();
@@ -1596,6 +1597,7 @@ export default defineComponent({
       classes,
       style,
       size,
+      isMobileSized,
       isExtraSmall,
       draggableDisabled,
       elementId,

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -36,6 +36,7 @@
           :icon="$props.icon"
         />
         <FSCol
+          style="min-width: 0"
           align="center-left"
           height="fill"
         >

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -14,7 +14,7 @@
       >
 
         <FSRow
-          padding="24px 16px 16px 24px"
+          padding="24px 24px 16px 24px"
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
         >
@@ -45,7 +45,7 @@
         </FSCol>
         <FSRow
           v-if="$slots.toolbar"
-          padding="0px 16px 8px 24px"
+          padding="0px 24px 8px 24px"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
         >
           <FSSlideGroup>
@@ -58,7 +58,7 @@
 
       <FSCol
         height="fill"
-        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
+        :padding="$slots.toolbar ? '8px 24px 24px 24px' : '16px 24px 24px 24px'"
         gap="0px"
       >
         <slot />

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -28,6 +28,7 @@
           :size="actualImageSize"
         />
         <FSCol
+          style="min-width: 0"
           align="center-left"
           height="fill"
         >

package/composables/useSlots.ts

@@ -20,11 +20,12 @@ export const useSlots = () => {
         // Directive wrapper (v-for, v-if)
         case "symbol":
           switch (element.type) {
+            // On a v-for, we want to get the children of the v-for
             case Symbol.for("v-fgt"):
               returnElements.push(...recursiveGetChildren(element.children));
               break;
+              // On a negative v-if, we want to get nothing
             case Symbol.for("v-cmt"):
-              returnElements.push(element);
               break;
             default:
               returnElements.push(element);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.128-fix-mobile",
+  "version": "1.0.128-fix-mobile-3",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile",
-    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile"
+    "@dative-gpi/foundation-shared-domain": "1.0.128-fix-mobile-3",
+    "@dative-gpi/foundation-shared-services": "1.0.128-fix-mobile-3"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "099789bb7c9a4134f9ee0aba08d805b673cbb977"
+  "gitHead": "900221b1b1a38a793a1cc7b98f9a00a300557d10"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -18,20 +18,23 @@
     }
 }
 
-// .fs-breadcrumbs-divider {
-//     margin-bottom: 2px !important;
-// }
-
 .fs-breadcrumbs.v-breadcrumbs {
-    line-height: normal!important;
+    height: var(--fs-breadcrumbs-height) !important;
+    display: flex !important;
     padding: 0 !important;
     gap: 8px !important;
-    height: 20px;
 }
 
 .v-breadcrumbs-item {
     padding: 0 !important;
 
+    align-self: stretch;
+    display: flex;
+    flex: 1 0 0;
+
+    max-width: fit-content;
+    min-width: 20px;
+
     &--disabled {
         opacity: 1 !important;
         color: var(--fs-breadcrumbs-disabled-color) !important;

package/styles/components/fs_span.scss

@@ -1,9 +1,19 @@
 .fs-span {
+    align-self: stretch;
+    display: flex;
+    flex: 1 0 0;
+
+    max-width: fit-content;
+    min-width: 0;
+}
+
+.fs-span > span {
+    text-align: var(--fs-span-text-align);
+    align-content: center;
     max-width: 100%;
-    text-align: left;
 }
 
-.fs-span-line-clamp {
+.fs-span-line-clamp > span {
     overflow: hidden;
     display: -webkit-box;
     line-clamp: var(--fs-span-line-clamp);
@@ -11,12 +21,12 @@
     -webkit-line-clamp: var(--fs-span-line-clamp);
 }
 
-.fs-span-ellipsis {
+.fs-span-ellipsis > span {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.fs-span-pre-wrap {
+.fs-span-pre-wrap > span {
     white-space: pre-wrap;
 }