@dative-gpi/foundation-shared-components 0.0.90 → 0.0.92

package/components/FSChip.vue

@@ -7,7 +7,10 @@
     :wrap="false"
     v-bind="$attrs"
   >
-    <slot name="prepend" v-bind="{ color: $props.color, colors }">
+    <slot
+      name="prepend"
+      v-bind="{ color: $props.color, colors }"
+    >
       <FSIcon
         v-if="$props.prependIcon"
         size="s"
@@ -15,7 +18,9 @@
         {{ $props.prependIcon }}
       </FSIcon>
     </slot>
-    <slot v-bind="{ color: $props.color, colors }">
+    <slot
+      v-bind="{ color: $props.color, colors }"
+    >
       <FSSpan
         v-if="$props.label"
         font="text-overline"
@@ -24,7 +29,10 @@
         {{ $props.label }}
       </FSSpan>
     </slot>
-    <slot name="append" v-bind="{ color: $props.color, colors }">
+    <slot
+      name="append"
+      v-bind="{ color: $props.color, colors }"
+    >
       <FSIcon
         v-if="$props.appendIcon"
         size="s"
@@ -40,6 +48,7 @@ import { computed, defineComponent, PropType } from "vue";
 
 import { 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";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -68,8 +77,13 @@ export default defineComponent({
       required: false,
       default: null
     },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [24, 20]
+    },
     variant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<"standard" | "full" | "borderless">,
       required: false,
       default: "full"
     },
@@ -89,10 +103,12 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
+    const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "standard": return {
+          "--fs-chip-height"                 : sizeToVar(props.height),
           "--fs-chip-background-color"       : backgrounds.base,
           "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.base,
@@ -104,16 +120,29 @@ export default defineComponent({
           "--fs-chip-active-color"           : colors.value.dark
         };
         case "full": return {
+          "--fs-chip-height"                 : sizeToVar(props.height),
           "--fs-chip-background-color"       : colors.value.base,
           "--fs-chip-border-color"           : colors.value.baseContrast,
           "--fs-chip-color"                  : colors.value.baseContrast,
           "--fs-chip-hover-background-color" : colors.value.base,
-          "--fs-chip-hover-border-color"     : colors.value.baseContrast,
+          "--fs-chip-hover-border-color"     : colors.value.base,
           "--fs-chip-hover-color"            : colors.value.baseContrast,
           "--fs-chip-active-background-color": colors.value.dark,
           "--fs-chip-active-border-color"    : colors.value.darkContrast,
           "--fs-chip-active-color"           : colors.value.darkContrast
         };
+        case "borderless": return {
+          "--fs-chip-height"                 : sizeToVar(props.height),
+          "--fs-chip-background-color"       : backgrounds.base,
+          "--fs-chip-border-color"           : backgrounds.base,
+          "--fs-chip-color"                  : darks.base,
+          "--fs-chip-hover-background-color" : colors.value.light,
+          "--fs-chip-hover-border-color"     : colors.value.light,
+          "--fs-chip-hover-color"            : colors.value.base,
+          "--fs-chip-active-background-color": colors.value.light,
+          "--fs-chip-active-border-color"    : colors.value.light,
+          "--fs-chip-active-color"           : colors.value.base
+        };
       }
     });
 

package/components/FSClickable.vue

@@ -225,22 +225,44 @@ export default defineComponent({
         };
       }
       switch (props.variant) {
-        case "standard": return {
-          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-          "--fs-clickable-border-style"           : props.borderStyle,
-          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-          "--fs-clickable-background-color"       : colors.value.light,
-          "--fs-clickable-border-color"           : colors.value.lightContrast,
-          "--fs-clickable-color"                  : colors.value.lightContrast,
-          "--fs-clickable-hover-background-color" : colors.value.base,
-          "--fs-clickable-hover-border-color"     : colors.value.baseContrast,
-          "--fs-clickable-hover-color"            : colors.value.baseContrast,
-          "--fs-clickable-active-background-color": colors.value.dark,
-          "--fs-clickable-active-border-color"    : colors.value.darkContrast,
-          "--fs-clickable-active-color"           : colors.value.darkContrast,
-          "--fs-clickable-height"                 : sizeToVar(props.height),
-          "--fs-clickable-width"                  : sizeToVar(props.width)
-        };
+        case "standard":
+          switch (props.color) {
+            case ColorEnum.Dark:
+            case ColorEnum.Light:
+              return {
+                "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+                "--fs-clickable-border-style"           : props.borderStyle,
+                "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+                "--fs-clickable-background-color"       : backgrounds.base,
+                "--fs-clickable-border-color"           : lights.dark,
+                "--fs-clickable-color"                  : lights.lightContrast,
+                "--fs-clickable-hover-background-color" : lights.base,
+                "--fs-clickable-hover-border-color"     : lights.dark,
+                "--fs-clickable-hover-color"            : lights.baseContrast,
+                "--fs-clickable-active-background-color": lights.dark,
+                "--fs-clickable-active-border-color"    : lights.dark,
+                "--fs-clickable-active-color"           : lights.darkContrast,
+                "--fs-clickable-height"                 : sizeToVar(props.height),
+                "--fs-clickable-width"                  : sizeToVar(props.width)
+              };
+            default:
+              return {
+                "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+                "--fs-clickable-border-style"           : props.borderStyle,
+                "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+                "--fs-clickable-background-color"       : colors.value.light,
+                "--fs-clickable-border-color"           : colors.value.lightContrast,
+                "--fs-clickable-color"                  : colors.value.lightContrast,
+                "--fs-clickable-hover-background-color" : colors.value.base,
+                "--fs-clickable-hover-border-color"     : colors.value.baseContrast,
+                "--fs-clickable-hover-color"            : colors.value.baseContrast,
+                "--fs-clickable-active-background-color": colors.value.dark,
+                "--fs-clickable-active-border-color"    : colors.value.darkContrast,
+                "--fs-clickable-active-color"           : colors.value.darkContrast,
+                "--fs-clickable-height"                 : sizeToVar(props.height),
+                "--fs-clickable-width"                  : sizeToVar(props.width)
+              };
+          }
         case "background": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
           "--fs-clickable-border-style"           : props.borderStyle,

package/components/FSClock.vue

@@ -1,7 +1,6 @@
 <template>
   <FSCol
     width="fill"
-    gap="16px"
   >
     <FSRow
       align="center-center"
@@ -66,7 +65,6 @@ import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composabl
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
-import FSText from "./FSText.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
@@ -74,7 +72,6 @@ export default defineComponent({
   name: "FSClock",
   components: {
     FSSlider,
-    FSText,
     FSCol,
     FSRow
   },

package/components/FSDialog.vue

@@ -8,12 +8,40 @@
   >
     <FSCard
       padding="24px 8px 24px 24px"
-      width="100%"
       gap="24px"
-      :border="!isExtraSmall"
       :color="$props.color"
       :class="classes"
     >
+      <template
+        #header
+      >
+        <FSCol
+          padding="0 16px 0 0"
+        >
+          <FSRow
+            align="center-left"
+            :wrap="false"
+          >
+            <FSText
+              font="text-h2"
+            >
+              {{ $props.title }}
+            </FSText>
+            <v-spacer />
+            <FSButton
+              icon="mdi-close"
+              variant="icon"
+              :color="ColorEnum.Dark"
+              @click="$emit('update:modelValue', false)"
+            />
+          </FSRow>
+          <FSText
+            v-if="$props.subtitle"
+          >
+            {{ $props.subtitle }}
+          </FSText>
+        </FSCol>
+      </template>
       <template
         v-for="(_, name) in $slots"
         v-slot:[name]="slotData"
@@ -24,13 +52,6 @@
         />
       </template>
     </FSCard>
-    <FSButton
-      class="fs-dialog-close-button"
-      icon="mdi-close"
-      variant="icon"
-      :color="ColorEnum.Dark"
-      @click="$emit('update:modelValue', false)"
-    />
   </v-dialog>
 </template>
 
@@ -43,18 +64,32 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSButton from "./FSButton.vue";
 import FSCard from "./FSCard.vue";
+import FSText from "./FSText.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSDialog",
   components: {
     FSButton,
-    FSCard
+    FSCard,
+    FSText,
+    FSRow
   },
   props: {
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "auto"
+      default: "fit-content"
     },
     cardClasses: {
       type: [Array, String] as PropType<string[] | string | null>,

package/components/FSDialogForm.vue

@@ -1,33 +1,12 @@
 <template>
   <FSDialog
+    :title="$props.title"
+    :subtitle="$props.subtitle"
     :width="$props.width"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
-    <template
-      #header
-    >
-      <slot
-        name="header"
-      >
-        <FSCol
-          v-if="$props.title"
-          padding="0 16px 0 0"
-        >
-          <FSSpan
-            font="text-h2"
-          >
-            {{ $props.title }}
-          </FSSpan>
-          <FSSpan
-            v-if="$props.subtitle"
-          >
-            {{ $props.subtitle }}
-          </FSSpan>
-        </FSCol>
-      </slot>
-    </template>
     <template
       #body
     >
@@ -203,11 +182,11 @@ export default defineComponent({
     const valid = ref(false);
 
     const height = computed(() => {
-      const other = 24 + 24                                                      // Paddings
-                  + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
-                  + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
-                  + (isMobileSized.value ? 36 : 40)                              // Footer
-                  + 64;                                                          // Debug mask
+      const other = 24 + 24                                            // Paddings
+        + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
+        + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
+        + (isMobileSized.value ? 36 : 40)                              // Footer
+        + 64;                                                          // Debug mask
       return `calc(90vh - ${other}px)`;
     });
 

package/components/FSDialogRemove.vue

@@ -1,8 +1,8 @@
 <template>
   <FSDialogSubmit
+    :title="title"
     :rightButtonLabel="$tr('ui.button.remove', 'Remove')"
     :rightButtonColor="ColorEnum.Error"
-    :title="title"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -42,6 +42,7 @@
       v-if="$props.removing"
     >
       <FSRow
+        padding="0 16px 0 0"
         align="center-right"
         :height="footerHeight"
       >

package/components/FSDialogSubmit.vue

@@ -1,33 +1,12 @@
 <template>
   <FSDialog
+    :title="$props.title"
+    :subtitle="$props.subtitle"
     :width="$props.width"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
-    <template
-      #header
-    >
-      <slot
-        name="header"
-      >
-        <FSCol
-          v-if="$props.title"
-          padding="0 16px 0 0"
-        >
-          <FSSpan
-            font="text-h2"
-          >
-            {{ $props.title }}
-          </FSSpan>
-          <FSSpan
-            v-if="$props.subtitle"
-          >
-            {{ $props.subtitle }}
-          </FSSpan>
-        </FSCol>
-      </slot>
-    </template>
     <template
       #body
     >
@@ -183,11 +162,11 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const height = computed(() => {
-      const other = 24 + 24                                                      // Paddings
-                  + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
-                  + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
-                  + (isMobileSized.value ? 36 : 40)                              // Footer
-                  + 64;                                                          // Debug mask
+      const other = 24 + 24                                            // Paddings
+        + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
+        + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
+        + (isMobileSized.value ? 36 : 40)                              // Footer
+        + 64;                                                          // Debug mask
       return `calc(90vh - ${other}px)`;
     });
 

package/components/FSDivider.vue

@@ -1,7 +1,12 @@
 <template>
   <div
-    v-if="isEmpty"
-    class="fs-divider"
+    v-if="isEmpty && !vertical"
+    class="fs-divider-horizontal"
+    :style="style"
+  />
+  <div
+    v-else-if="isEmpty && vertical"
+    class="fs-divider-vertical"
     :style="style"
   />
   <FSRow
@@ -48,7 +53,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    width: {
+    size: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "100%"
@@ -63,6 +68,11 @@ export default defineComponent({
       required: false,
       default: "dark"
     },
+    vertical: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: false
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
@@ -78,15 +88,15 @@ export default defineComponent({
     const style = computed((): { [key: string] : string | undefined } => {
       switch (props.variant) {
         case "base": return {
-          "--fs-divider-width": sizeToVar(props.width),
+          "--fs-divider-size" : sizeToVar(props.size),
           "--fs-divider-color": colors.value.base
         };
         case "light": return {
-          "--fs-divider-width": sizeToVar(props.width),
+          "--fs-divider-size" : sizeToVar(props.size),
           "--fs-divider-color": colors.value.light
         };
         case "dark": return {
-          "--fs-divider-width": sizeToVar(props.width),
+          "--fs-divider-size" : sizeToVar(props.size),
           "--fs-divider-color": colors.value.dark
         };
       }

package/components/FSFadeOut.vue

@@ -3,16 +3,14 @@
     class="fs-fade-out"
     ref="fadeOutRef"
     :style="style"
-    @scroll="onScroll"
+    @scroll="debounceMasks"
   >
-    <div class="fs-fade-out-top" />
     <slot />
-    <div class="fs-fade-out-bottom" />
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, 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";
@@ -43,7 +41,7 @@ export default defineComponent({
   },
   emits: ["scroll"],
   setup(props, { emit }) {
-    const { windowWidth } = useBreakpoints();
+    const { windowHeight, windowWidth } = useBreakpoints();
     const { debounce } = useDebounce();
     const { getColors } = useColors();
 
@@ -54,6 +52,8 @@ export default defineComponent({
     const topMaskHeight = ref("0px");
     const lastScroll = ref(0);
 
+    const resizeObserver = ref<ResizeObserver | null>(null);
+
     const style = computed((): { [key: string] : string | undefined } => {
       return {
         "--fs-fade-out-height"             : sizeToVar(props.height),
@@ -65,75 +65,65 @@ export default defineComponent({
       };
     });
 
-    const onScroll = ({ target }): void => debounce(() => {
-      const currentTopMaskHeight = target.children[0].clientHeight;
-      const currentBottomMaskHeight = target.children[target.children.length - 1].clientHeight;
-      const contentHeight = target.scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
-
-      if (target.clientHeight >= contentHeight) {
-        bottomMaskHeight.value = "0px";
-        topMaskHeight.value = "0px";
-        return;
-      }
-      if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
-        bottomMaskHeight.value = "0px";
-      }
-      else {
-        bottomMaskHeight.value = sizeToVar(props.maskHeight);
-      }
-      if (target.scrollTop === 0) {
-        topMaskHeight.value = "0px";
-      }
-      else {
-        topMaskHeight.value = sizeToVar(props.maskHeight);
-      }
-
-      const event = {
-        target,
-        onTop: topMaskHeight.value === "0px",
-        onBottom: bottomMaskHeight.value === "0px",
-        goingUp: (currentTopMaskHeight !== 0 && bottomMaskHeight.value !== "0px") && target.scrollTop < lastScroll.value,
-      };
-
-      emit("scroll", event);
-      lastScroll.value = target.scrollTop;
-    }, 25);
-
-    const onResize = (): void => debounce(() => {
+    const handleMasks = () => {
       if (fadeOutRef.value) {
-        const currentTopMaskHeight = (fadeOutRef.value as any).children[0].clientHeight;
-        const currentBottomMaskHeight = (fadeOutRef.value as any).children[(fadeOutRef.value as any).children.length - 1].clientHeight;
-        const contentHeight = (fadeOutRef.value as any).scrollHeight - currentTopMaskHeight - currentBottomMaskHeight;
-
-        if ((fadeOutRef.value as any).clientHeight < contentHeight) {
-          if ((fadeOutRef.value as any).scrollHeight - (fadeOutRef.value as any).scrollTop - (fadeOutRef.value as any).clientHeight > 0) {
-            bottomMaskHeight.value = sizeToVar(props.maskHeight);
-          }
-          if ((fadeOutRef.value as any).scrollTop > 0) {
-            topMaskHeight.value = sizeToVar(props.maskHeight);
-          }
+        if ((fadeOutRef.value as any).clientHeight >= (fadeOutRef.value as any).scrollHeight) {
+          bottomMaskHeight.value = "0px";
+          topMaskHeight.value = "0px";
+          return;
         }
-        else {
+        if ((fadeOutRef.value as any).scrollHeight - (fadeOutRef.value as any).scrollTop - (fadeOutRef.value as any).clientHeight < 1) {
           bottomMaskHeight.value = "0px";
+        }
+        else {
+          bottomMaskHeight.value = sizeToVar(props.maskHeight);
+        }
+        if ((fadeOutRef.value as any).scrollTop === 0) {
           topMaskHeight.value = "0px";
         }
+        else {
+          topMaskHeight.value = sizeToVar(props.maskHeight);
+        }
+
+        const event = {
+          target: fadeOutRef.value,
+          onTop: topMaskHeight.value === "0px",
+          onBottom: bottomMaskHeight.value === "0px",
+          goingUp: (fadeOutRef.value as any).scrollTop < lastScroll.value,
+        };
+
+        emit("scroll", event);
+        lastScroll.value = (fadeOutRef.value as any).scrollTop;
       }
-    }, 200);
+    };
+
+    const debounceMasks = (): void => debounce(handleMasks, 50);
 
     onMounted((): void => {
-      if (fadeOutRef.value) {
-        if ((fadeOutRef.value as any).clientHeight < (fadeOutRef.value as any).scrollHeight) {
-          bottomMaskHeight.value = sizeToVar(props.maskHeight);
-        }
+      debounceMasks();
+
+      resizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach(() => {
+          debounceMasks();
+        });
+      });
+      if (document.querySelector(".fs-fade-out")) {
+        resizeObserver.value.observe(document.querySelector(".fs-fade-out")!);
+      }
+    });
+
+    onUnmounted((): void => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
       }
     });
 
-    watch(() => windowWidth.value, onResize);
+    watch([() => windowWidth.value, () => windowHeight.value], debounceMasks);
 
     return {
       fadeOutRef,
       style,
-      onScroll
+      debounceMasks
     };
   }
 });

package/components/FSSlideGroup.vue

@@ -6,7 +6,9 @@
     :style="style"
     v-bind="$attrs"
   >
-    <template #prev>
+    <template
+      #prev
+    >
       <FSButton
         v-if="$props.dash"
         icon="mdi-chevron-double-left"
@@ -18,14 +20,21 @@
         @click="goToPrev"
       />
     </template>
-    <template #default>
+    <template
+      #default
+    >
       <v-slide-group-item
-        v-for="(component) in getChildren()"
+        v-for="(component, index) in getChildren()"
+        :key="index"
       >
-        <component :is="component" />
+        <component
+          :is="component"
+        />
       </v-slide-group-item>
     </template>
-    <template #next>
+    <template
+      #next
+    >
       <FSButtonNextIcon
         :color="ColorEnum.Dark"
         @click="goToNext"