@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/views/FSEntityHeader.vue

@@ -1,350 +0,0 @@
-<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>
-        <FSIcon
-          v-else-if="$props.icon && $props.color"
-          :color="$props.color"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
-        <FSIconCard
-          v-else-if="$props.icon && $props.iconBackgroundColor && $props.iconBackgroundColor.length > 0"
-          :backgroundVariant="$props.iconBackgroundVariant"
-          :backgroundColor="$props.iconBackgroundColor"
-          :border="$props.iconBorder"
-          :icon="$props.icon"
-          :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>
-                {{ $props.subtitle }}
-              </FSText>
-              <FSText
-                font="text-overline"
-              >
-                {{ $props.description }}
-              </FSText>
-            </FSCol>
-          </template>
-          <template
-            v-else-if="$props.subtitle && !$props.description"
-          >
-            <FSText
-              font="text-h3"
-              :lineClamp="2"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSText>
-              {{ $props.subtitle }}
-            </FSText>
-          </template>
-          <template
-            v-else-if="!$props.subtitle && $props.description"
-          >
-            <FSText
-              font="text-h3"
-              :lineClamp="2"
-            >
-              {{ $props.title }}
-            </FSText>
-            <FSText
-              font="text-overline"
-              :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 && $props.iconBackgroundColor && $props.iconBackgroundColor.length > 0"
-          iconSize="70px"
-          :backgroundVariant="$props.iconBackgroundVariant"
-          :backgroundColor="$props.iconBackgroundColor"
-          :border="$props.iconBorder"
-          :icon="$props.icon"
-          :size="imageSize"
-        />
-        <FSIcon
-          v-else-if="$props.icon"
-          :color="$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"
-            >
-              {{ $props.subtitle }}
-            </FSText>
-            <FSText
-              v-if="$props.description"
-              font="text-overline"
-              :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 { ColorEnum, 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 FSIcon from "../FSIcon.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,
-    FSIcon,
-    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"
-    },
-    iconBackgroundColor: {
-      type: [Array, String] as PropType<ColorBase | ColorBase[]>,
-      required: false,
-      default: ColorEnum.Background
-    },
-    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/FSListHeader.vue

@@ -1,83 +0,0 @@
-<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

@@ -1,83 +0,0 @@
-<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>

package/components/views/FSSkeletonView.vue

@@ -1,100 +0,0 @@
-<template>
-  <template
-    v-if="isExtraSmall"
-  >
-    <FSCol
-      padding="16px 4px 16px 12px"
-      height="100vh"
-      gap="16px"
-    >
-      <slot
-        name="header"
-      >
-        <slot
-          name="title"
-        >
-          <FSRow
-            gap="12px"
-          >
-            <slot
-              name="title-image"
-            />
-            <slot
-              name="title-texts"
-            />
-          </FSRow>
-        </slot>
-      </slot>
-      <slot
-        name="breadcrumbs"
-      />
-      <slot
-        name="toolbar"
-      />
-      <slot
-        name="title-append"
-      />
-      <slot
-        name="default"
-      />
-    </FSCol>
-  </template>
-  <template
-    v-else
-  >
-    <FSCol
-      padding="24px 8px 24px 24px"
-      height="100vh"
-      gap="16px"
-    >
-      <slot
-        name="header"
-      >
-        <slot
-          name="title"
-        >
-          <FSRow
-            gap="32px"
-          >
-            <slot
-              name="title-image"
-            />
-            <slot
-              name="title-texts"
-            />
-            <v-spacer />
-            <slot
-              name="title-append"
-            />
-          </FSRow>
-        </slot>
-      </slot>
-      <slot
-        name="breadcrumbs"
-      />
-      <slot
-        name="toolbar"
-      />
-      <slot
-        name="default"
-      />
-    </FSCol>
-  </template>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-
-export default defineComponent({
-  name: "FSSkeletonView",
-  setup() {
-    const { isExtraSmall } = useBreakpoints();
-
-    return {
-      isExtraSmall
-    };
-  }
-});
-</script>

package/styles/components/fs_icon_field.scss

@@ -1,12 +0,0 @@
-.fs-icon-field-label {
-    color: var(--fs-icon-field-color);
-}
-
-.fs-icon-field-messages {
-    align-self: stretch;
-    color: var(--fs-icon-field-error-color);
-}
-
-.fs-icon-field-set {
-    max-width: 100%;
-}

package/styles/components/fs_tag_field.scss

@@ -1,8 +0,0 @@
-.fs-tag-field-label {
-    color: var(--fs-tag-field-color);
-}
-
-.fs-tag-field-messages {
-    align-self: stretch;
-    color: var(--fs-tag-field-error-color);
-}

package/styles/components/fs_time_field.scss

@@ -1,12 +0,0 @@
-.fs-time-field-label {
-    color: var(--fs-time-field-color);
-}
-
-.fs-time-field-messages {
-    align-self: stretch;
-    color: var(--fs-time-field-error-color);
-}
-
-.fs-time-field-description {
-    color: var(--fs-time-field-color);
-}

package/styles/components/fs_timeslot_field.scss

@@ -1,12 +0,0 @@
-.fs-time-slot-field-label {
-    color: var(--fs-time-slot-field-color);
-}
-
-.fs-time-slot-field-messages {
-    align-self: stretch;
-    color: var(--fs-time-slot-field-error-color);
-}
-
-.fs-time-slot-field-description {
-    color: var(--fs-time-slot-field-color);
-}

package/styles/globals/breakpoints.scss

@@ -1,20 +0,0 @@
-$extra-small-breakpoint: 599px;
-$mobile-breakpoint: 1264px;
-
-@mixin extra-small {
-    @media only screen and (max-width: $extra-small-breakpoint) {
-        @content;
-    }
-}
-
-@mixin mobile {
-    @media only screen and (max-width: $mobile-breakpoint) {
-        @content;
-    }
-}
-
-@mixin web {
-    @media screen and (min-width: ($mobile-breakpoint - 1)) {
-        @content;
-    }
-}

package/styles/globals/fixes.scss

@@ -1,5 +0,0 @@
-.fs-tab > .v-btn__content > .fs-row > .text-button {
-    @include web {
-        padding-top: 2px !important;
-    }
-}