@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/views/FSEntityHeader.vue

@@ -0,0 +1,343 @@
+<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"
+      >
+        <template
+          v-if="$props.imageId"
+        >
+          <slot 
+            name="image"
+            v-bind="{ imageSize }"
+          >
+            <FSImage
+              :imageId="$props.imageId"
+              :cover="imageCover"
+              :height="imageSize"
+              :width="imageSize"
+            />
+          </slot>
+        </template>
+        <FSIconCard
+          v-else-if="$props.icon"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColors"
+          :border="$props.iconBorder"
+          :icon="$props.icon"
+          :iconColor="$props.color"
+          :size="imageSize"
+        />
+        <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
+                font="text-button"
+              >
+                {{ $props.subtitle }}
+              </FSText>
+              <FSText
+                font="text-body"
+              >
+                {{ $props.description }}
+              </FSText>
+            </FSCol>
+          </template>
+          <template
+            v-else-if="$props.subtitle && !$props.description"
+          >
+            <FSText
+              font="text-h3"
+              :lineClamp="2"
+            >
+              {{ $props.title }}
+            </FSText>
+            <FSText
+              font="text-button"
+            >
+              {{ $props.subtitle }}
+            </FSText>
+          </template>
+          <template
+            v-else-if="!$props.subtitle && $props.description"
+          >
+            <FSText
+              font="text-h3"
+              :lineClamp="2"
+            >
+              {{ $props.title }}
+            </FSText>
+            <FSText
+              font="text-body"
+              :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"
+      >
+        
+        <template
+          v-if="$props.imageId"
+        >
+          <slot 
+            name="image"
+            v-bind="{ imageSize }"
+          >
+            <FSImage
+              :imageId="$props.imageId"
+              :cover="imageCover"
+              :height="imageSize"
+              :width="imageSize"
+            />
+          </slot>
+        </template>
+        <FSIconCard
+          v-else-if="$props.icon"
+          iconSize="70px"
+          :backgroundVariant="$props.iconBackgroundVariant"
+          :backgroundColor="$props.iconBackgroundColors"
+          :border="$props.iconBorder"
+          :iconColor="$props.color"
+          :icon="$props.icon"
+          :size="imageSize"
+        />
+        <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"
+              font="text-button"
+            >
+              {{ $props.subtitle }}
+            </FSText>
+            <FSText
+              v-if="$props.description"
+              font="text-body"
+              :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 ColorBase, 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 FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSEntityHeader",
+  components: {
+    FSBreadcrumbs,
+    FSSlideGroup,
+    FSIconCard,
+    FSImage,
+    FSText,
+    FSCol,
+    FSRow
+  },
+  props: {
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: false,
+      default: "mdi-ab-testing"
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
+    },
+    iconBackgroundColors: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: () => []
+    },
+    iconBorder: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    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,163 @@
+<template>
+  <FSSkeletonView>
+    <template
+      #header
+    >
+      <FSEntityHeader
+        ref="headerRef"
+        :breadcrumbs="$props.breadcrumbs"
+        :description="$props.description"
+        :subtitle="$props.subtitle"
+        :title="$props.title"
+        :light="lightHeader"
+        :imageId="imageId"
+        :iconBackgroundVariant="$props.iconBackgroundVariant"
+        :icon="$props.icon"
+        :color="$props.color"
+        :iconBackgroundColors="$props.iconBackgroundColors"
+        :imageCover="$props.imageCover"
+      >
+        <template
+          v-if="$slots.image"
+          #image="props"
+        >
+          <slot
+            name="image"
+            v-bind="props"
+          />
+        </template>
+        <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: () => []
+    },
+    iconBackgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
+    }
+  },
+  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/FSListHeader.vue

@@ -0,0 +1,83 @@
+<template>
+  <template
+    v-if="isExtraSmall"
+  >
+    <FSCol
+      gap="12px"
+    >
+      <FSText
+        font="text-h3"
+      >
+        {{  $props.title }}
+      </FSText>
+      <FSBreadcrumbs
+        :items="$props.breadcrumbs"
+      />
+    </FSCol>
+  </template>
+  <template
+    v-else
+  >
+    <FSCol
+      gap="16px"
+    >
+      <FSText
+        font="text-h2"
+      >
+        {{  $props.title }}
+      </FSText>
+      <FSBreadcrumbs
+        :items="$props.breadcrumbs"
+      />
+      <FSSlideGroup
+        v-if="$slots['toolbar']"
+        style="min-width: 100%;"
+      >
+        <slot
+          name="toolbar"
+        />
+      </FSSlideGroup>
+    </FSCol>
+  </template>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSBreadcrumbs from "../FSBreadcrumbs.vue";
+import FSSlideGroup from "../FSSlideGroup.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSListHeader",
+  components: {
+    FSBreadcrumbs,
+    FSSlideGroup,
+    FSText,
+    FSCol
+  },
+  props: {
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    breadcrumbs: {
+      type: Array as PropType<Array<FSBreadcrumbItem>>,
+      required: false,
+      default: () => []
+    },
+  },
+  setup() {
+    const { isExtraSmall } = useBreakpoints();
+
+    return {
+      isExtraSmall
+    };
+  }
+});
+</script>

package/components/views/FSListView.vue

@@ -0,0 +1,83 @@
+<template>
+  <FSSkeletonView>
+    <template
+      #header
+    >
+      <FSListHeader
+        ref="headerRef"
+        :breadcrumbs="$props.breadcrumbs"
+        :title="$props.title"
+        padding="0 14px 0 0"
+      >
+        <template
+          #toolbar
+        >
+          <slot
+            name="toolbar"
+          />
+        </template>
+      </FSListHeader>
+    </template>
+    <template
+      #default
+    >
+      <FSFadeOut
+        padding="0 8px 0 0"
+        :height="height"
+      >
+        <slot
+          name="default"
+        />
+      </FSFadeOut>
+    </template>
+  </FSSkeletonView>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref } from "vue";
+
+import { type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSSkeletonView from "./FSSkeletonView.vue";
+import FSListHeader from "./FSListHeader.vue";
+import FSFadeOut from "../FSFadeOut.vue";
+
+export default defineComponent({
+  name: "FSListView",
+  components: {
+    FSSkeletonView,
+    FSListHeader,
+    FSFadeOut
+  },
+  props: {
+    title: {
+      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 headerRef = ref<HTMLElement | null>(null);
+
+    const height = computed((): string => {
+      let other = isExtraSmall.value ? 16 + 16 : 24 + 24 // Paddings
+        + (headerRef.value?.clientHeight ?? 0);          // Header
+
+      return `${windowHeight.value - other}px`;
+    });
+
+    return {
+      headerRef,
+      height
+    };
+  }
+});
+</script>