@dative-gpi/foundation-shared-components 1.0.127 → 1.0.128-dvh

package/components/FSBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <template>
   <v-breadcrumbs
     class="fs-breadcrumbs"
-    :items="$props.items"
+    :items="items"
     :style="style"
     v-bind="$attrs"
   >
@@ -9,7 +9,7 @@
       #title="{ item }"
     >
       <FSSpan
-        :class="classes(item)"
+        class="fs-breadcrumbs-label"
       >
         {{ item.title }}
       </FSSpan>
@@ -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,28 +51,34 @@ 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 classes = (item: FSBreadcrumbItem): string[] => {
-      const classNames = ["fs-breadcrumbs-label"];
-      if (item.disabled) {
-        classNames.push("fs-breadcrumbs-label-disabled");
+    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 classNames;
-    };
+      return props.items;
+    });
 
     return {
-      style,
-      classes
+      items,
+      style
     };
   }
 });

package/components/FSDialogFormBody.vue

@@ -233,7 +233,7 @@ export default defineComponent({
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 42px - ${other}px)`;
+      return `calc(100dvh - 12px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {
@@ -275,17 +275,17 @@ export default defineComponent({
     }, { immediate: true });
 
     return {
-      resetFormValidation,
       validateLabel,
-      validateForm,
       isValidForm,
       cancelLabel,
       submitLabel,
-      onValidate,
       ColorEnum,
       maxHeight,
-      onSubmit,
-      formRef
+      formRef,
+      resetFormValidation,
+      validateForm,
+      onValidate,
+      onSubmit
     };
   }
 });

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/FSDialogMultiFormBody.vue

@@ -195,7 +195,7 @@ export default defineComponent({
         + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
         + (props.steps > 1 ? 24 + 4 : 0)                             // Pagination
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 42px - ${other}px)`;
+      return `calc(100dvh - 12px - ${other}px)`;
     });
 
     const previousButtonLabel = computed(() => {

package/components/FSDialogRemove.vue

@@ -21,7 +21,7 @@
             mdi-alert-outline
           </FSIcon>
           <FSRow
-            gap="2px"
+            gap="4px"
           >
             <FSSpan>
               {{ $tr("dialog-remove.body-regular", "This action is") }}

package/components/FSDialogSubmit.vue

@@ -181,7 +181,7 @@ export default defineComponent({
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 16 : 20) + 8 : 0) // Subtitle
         + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 42px - ${other}px)`;
+      return `calc(100dvh - 12px - ${other}px)`;
     });
 
     const cancelLabel = computed(() => {

package/components/FSFadeOut.vue

@@ -3,7 +3,6 @@
     class="fs-fade-out"
     ref="fadeOutRef"
     :id="elementId"
-    :style="style"
     @scroll="$emit('scroll', $event); debounceMasks()"
   >
     <slot />
@@ -11,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -65,17 +64,21 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    style:{
+      type: Object,
+      required: false
     }
   },
   emits: ["scroll"],
   setup(props) {
-    const { windowHeight, windowWidth } = useBreakpoints();
+    const { windowHeight, windowWidth, isTouchScreenEnabled } = useBreakpoints();
     const { debounce } = useDebounce();
     const { getColors } = useColors();
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const fadeOutRef = ref(null);
+    const fadeOutRef = ref<HTMLElement | null>(null);
     const bottomMaskHeight = ref("0px");
     const topMaskHeight = ref("0px");
     const lastScroll = ref(0);
@@ -84,18 +87,21 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): StyleValue => ({
+    const showOutsideScrollbar = computed(() => props.scrollOutside && !isTouchScreenEnabled.value);
+
+    const style = computed((): {[index: string]: string} => ({
       "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : "initial",
       "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : "initial",
       "--fs-fade-out-width"             : sizeToVar(props.width),
       "--fs-fade-out-padding"           : sizeToVar(props.padding),
-      "--fs-fade-out-width-offset"      : props.scrollOutside ? '12px' : '0px',
-      "--fs-fade-out-padding-offset"    : props.scrollOutside ? '4px' : '0px',
-      "--fs-fade-out-margin-right"      : props.scrollOutside ? '-12px' : '0px',
+      "--fs-fade-out-width-offset"      : showOutsideScrollbar.value ? '12px' : '0px',
+      "--fs-fade-out-padding-offset"    : showOutsideScrollbar.value ? '4px' : '0px',
+      "--fs-fade-out-margin-right"      : showOutsideScrollbar.value ? '-12px' : '0px',
       "--fs-fade-out-mask-color"        : backgrounds.base,
       "--fs-fade-out-top-mask-height"   : props.disableTopMask ? '0px' : topMaskHeight.value,
       "--fs-fade-out-bottom-mask-height": props.disableBottomMask ? '0px' : bottomMaskHeight.value,
-      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto'
+      "--fs-fade-out-x-overflow"        : props.hideHorizontalOverflow ? 'hidden' : 'auto', 
+      ...props.style
     }));
 
     const handleMasks = () => {
@@ -146,6 +152,15 @@ export default defineComponent({
 
     watch([() => windowWidth.value, () => windowHeight.value], debounceMasks);
 
+    watch(() => [style.value, fadeOutRef.value], () => {
+      if(!fadeOutRef.value || !style.value) {
+        return;
+      }
+      for(const key in style.value){
+        fadeOutRef.value.style.setProperty(key, style.value[key])
+      }
+    }, { immediate: true})
+
     return {
       fadeOutRef,
       elementId,

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/FSWindow.vue

@@ -1,9 +1,10 @@
 <template>
   <template 
-    v-if="noMatch"
+    v-if="showError"
   >
     <slot 
-      name="error" 
+      name="error"
+      v-bind="{ goBack, width: $props.width, height: $props.height }"
     >
       <FSRow
         padding="16px"
@@ -144,14 +145,18 @@ export default defineComponent({
       }, 560);
     });
 
-    const noMatch = computed(() => {
+    const showError = computed((): boolean => {
       if (!windowRef.value) {
-        return;
+        return false;
       }
 
       // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VWindow/VWindow.tsx
       // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/group.ts#L161
       const group = windowRef.value.group;
+
+      if (!group.items.value.length) {
+        return false;
+      }
       return !group.items.value.find((item: any) => item.value === props.modelValue);
     });
 
@@ -172,7 +177,7 @@ export default defineComponent({
     return {
       ColorEnum,
       windowRef,
-      noMatch,
+      showError,
       slots,
       style,
       getChildren,

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>
@@ -705,7 +689,7 @@ export default defineComponent({
     const maxHeight = computed(() => {
       const other = 8 + 8                      // Paddings
         + (isMobileSized.value ? 36 : 40) + 8; // Header
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100dvh - 40px - ${other}px)`;
     });
 
     const mobileValue = computed((): string | null => {

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>
@@ -648,7 +632,7 @@ export default defineComponent({
 
     const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100dvh - 40px - ${other}px)`;
     });
 
     const mobileValue = computed((): string | null => {

package/components/fields/FSTreeViewField.vue

@@ -383,7 +383,7 @@ export default defineComponent({
 
     const maxHeight = computed(() => {
       const other = 8 + 8; // Paddings
-      return `calc(100vh - 40px - ${other}px)`;
+      return `calc(100dvh - 40px - ${other}px)`;
     });
 
     const fieldSlots = computed((): any => {