@dative-gpi/foundation-shared-components 1.0.6 → 1.0.7

package/components/FSIcon.vue

@@ -31,7 +31,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
       required: false,
       default: "base"
     }

package/components/FSIconCard.vue

@@ -1,18 +1,18 @@
 <template>
   <FSCard
+    :variant="$props.backgroundVariant"
     :color="$props.backgroundColor"
+    :border="$props.border"
     :height="$props.size"
     :width="$props.size"
-    :variant="variant"
-    :border="border"
   >
     <FSRow
       align="center-center"
     >
       <FSIcon 
-        variant="dark"
-        :size="$props.iconSize"
+        :variant="$props.iconVariant"
         :color="$props.iconColor"
+        :size="$props.iconSize"
       >
         {{ $props.icon }}
       </FSIcon>
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
@@ -45,6 +45,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    backgroundVariant: {
+      type: String as PropType<"background" | "gradient">,
+      required: false,
+      default: "background"
+    },
     icon: {
       type: String as PropType<string>,
       required: false,
@@ -55,31 +60,21 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Dark
     },
+    iconVariant: {
+      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      required: false,
+      default: "base"
+    },
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: "56px"
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: true
     }
-  },
-  setup(props) {
-    const variant = computed((): "background" | "gradient" => {
-      switch (props.backgroundColor) {
-        case ColorEnum.Background: return "background";
-        default                  : return "gradient";
-      }
-    });
-
-    const border = computed((): boolean => {
-      switch (props.backgroundColor) {
-        case ColorEnum.Background: return true;
-        default                  : return false;
-      }
-    });
-
-    return {
-      variant,
-      border
-    };
   }
 });
 </script>

package/components/views/FSEntityHeader.vue

@@ -150,9 +150,9 @@
         />
         <FSIcon
           v-else-if="$props.icon"
+          :color="$props.color"
           :icon="$props.icon"
           :size="imageSize"
-          :color="$props.color"
         />
         <FSCol
           align="center-left"
@@ -210,7 +210,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
+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";
@@ -245,8 +245,8 @@ export default defineComponent({
       required: false,
       default: null
     },
-    color : {
-      type: Object as PropType<ColorEnum | null>,
+    color: {
+      type: String as PropType<ColorBase>,
       required: false,
       default: null
     },

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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.6",
-    "@dative-gpi/foundation-shared-services": "1.0.6"
+    "@dative-gpi/foundation-shared-domain": "1.0.7",
+    "@dative-gpi/foundation-shared-services": "1.0.7"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "b2bbdea22792b7454a5234d8a6b8bb43553f3202"
+  "gitHead": "d0380d86664f9d28f757a4f2c0d06bf5cd9ca5e9"
 }