@dative-gpi/foundation-shared-components 1.0.70 → 1.0.71-groupings-2

package/components/tiles/FSTile.vue

@@ -5,71 +5,77 @@
     :width="$props.width"
   >
     <FSClickable
-      v-if="$props.singleSelect"
+      v-if="($props.href || $props.to || $attrs.onClick)"
+      variant="background"
+      class="fs-tile"
       padding="12px"
-      :variant="variant"
-      :color="color"
-      :style="style"
+      :href="$props.href"
       width="100%"
       height="100%"
-      @click="() => $emit('update:modelValue', !$props.modelValue)"
+      topRightPadding="1px"
+      :to="$props.to"
+      :style="style"
       v-bind="$attrs"
     >
       <slot />
+      <template 
+        v-if="$props.selectable"
+        #top-right
+      >
+        <FSCard
+          padding="8px"
+          :border="false"
+        >
+          <FSCheckbox
+            :modelValue="$props.modelValue"
+            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+          />
+        </FSCard>
+      </template>
     </FSClickable>
+
     <FSClickable
-      v-else-if="$props.href || $props.to || $attrs.onClick"
-      variant="background"
-      class="fs-tile"
+      v-else-if="$props.selectable && $props.singleSelect"
       padding="12px"
-      :color="ColorEnum.Background"
-      :href="$props.href"
+      :variant="variant"
+      :color="color"
+      :style="style"
       width="100%"
       height="100%"
-      :to="$props.to"
-      :style="style"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
       v-bind="$attrs"
     >
       <slot />
-      <FSCard
-        v-if="$props.editable"
-        class="fs-tile-checkbox"
-        variant="background"
-        :color="ColorEnum.Background"
-        :border="false"
-        v-bind="$attrs"
-      >
-        <FSCheckbox
-          :modelValue="$props.modelValue"
-          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-        />
-      </FSCard>
     </FSClickable>
+    
     <FSCard
       v-else
       variant="background"
       class="fs-tile"
       padding="12px"
-      :color="color"
       :style="style"
       width="100%"
       height="100%"
+      topRightPadding="1px"
       v-bind="$attrs"
     >
       <slot />
-      <FSCard
-        v-if="$props.editable"
-        class="fs-tile-checkbox"
-        variant="background"
-        :border="false"
-        v-bind="$attrs"
+      <template 
+        v-if="$props.selectable"
+        #top-right
       >
-        <FSCheckbox
-          :modelValue="$props.modelValue"
-          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-        />
-      </FSCard>
+        <FSCard
+          padding="8px"
+          :border="false"
+        >
+          <FSCheckbox
+            :modelValue="$props.modelValue"
+            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+          />
+        </FSCard>
+      </template>
     </FSCard>  
+    
     <div
       v-if="$props.leftColor"
       class="fs-tile-left"
@@ -96,6 +102,7 @@ import FSCard from "../FSCard.vue";
 
 export default defineComponent({
   name: "FSTile",
+  inheritAttrs: false,
   components: {
     FSClickable,
     FSCheckbox,
@@ -103,7 +110,7 @@ export default defineComponent({
   },
   props: {
     to: {
-      type: [String, Object] as PropType<string | RouteLocation | null>,
+      type: [String, Object] as PropType<RouteLocation | null>,
       required: false,
       default: null
     },
@@ -132,7 +139,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    selectable: {
       type: Boolean,
       required: false,
       default: false

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -1,7 +1,6 @@
 <template>
   <FSTile
     :activeColor="ColorEnum.Primary"
-    :editable="$props.editable"
     :width="$props.width"
     :modelValue="$props.modelValue"
     v-bind="$attrs"
@@ -114,11 +113,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
     }
   },
   setup(props) {
@@ -134,7 +128,7 @@ export default defineComponent({
 
     const roleLabel = computed((): string | null => {
       if (props.admin) {
-        return $tr("ui.user-organisation.admin", "Administrator");
+        return $tr("entity.user.admin", "Administrator");
       }
       return props.roleLabel;
     });

package/components/tiles/FSUserTileUI.vue

@@ -0,0 +1,119 @@
+<template>
+  <FSTile
+    :width="$props.width"
+    :modelValue="$props.modelValue"
+    v-bind="$attrs"
+  >
+    <FSRow
+      :wrap="false"
+      gap="24px"
+      height="fill"
+      align="center-left"
+    >
+      <FSCol
+        :width="infoWidth"
+      >
+        <FSSpan
+          font="text-button"
+        >
+          {{ `${$props.firstName} ${$props.lastName}` }}
+        </FSSpan>
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.email }}
+        </FSSpan>
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.phoneNumber }}
+        </FSSpan>
+      </FSCol>
+      <FSImage
+        v-if="$props.imageId"
+        :imageId="$props.imageId"
+        :width="imageSize"
+      />
+    </FSRow>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSImage from "../FSImage.vue";
+import FSSpan from "../FSSpan.vue";
+import FSTile from "./FSTile.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSUserTileUI",
+  components: {
+    FSImage,
+    FSSpan,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    imageId: {
+      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: () => [352, 336]
+    },
+    firstName: {
+      type: String,
+      required: true
+    },
+    lastName: {
+      type: String,
+      required: true
+    },
+    email: {
+      type: String,
+      required: true
+    },
+    phoneNumber: {
+      type: String,
+      required: false,
+      default: null 
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+
+    const imageSize = computed((): number => {
+      if (!props.imageId) {
+        return 0;
+      }
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): string => {
+      if (!props.imageId) {
+        return "100%";
+      }
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
+
+    return {
+      imageSize,
+      infoWidth
+    };
+  }
+});
+</script>

package/components/toggleSets/FSToggleSetPosition.vue

@@ -48,7 +48,7 @@ export default defineComponent({
         { id: Position.Ordinate, label: $tr("ui.position.ordinate", "Bottom") }
       ];
       if (props.useNone) {
-        items.unshift({ id: Position.None, label: $tr("ui.position.none", "None") });
+        items.unshift({ id: Position.None, label: $tr("ui.common.none", "None") });
       }
       return items;
     });

package/components/views/FSBaseView.vue

@@ -0,0 +1,64 @@
+<template>
+  <FSBaseMobileView
+    v-if="isExtraSmall"
+    :variant="$props.variant"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseMobileView>
+
+  <FSBaseDesktopView
+    v-else
+    :variant="$props.variant"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseDesktopView>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSBaseDesktopView from "./desktop/FSBaseDesktopView.vue";
+import FSBaseMobileView from "./mobile/FSBaseMobileView.vue";
+
+export default defineComponent({
+  name: "FSBaseView",
+  components: {
+    FSBaseDesktopView,
+    FSBaseMobileView
+  },
+  props: {
+    variant: {
+      type: String as PropType<"default" | "entity">,
+      required: true,
+      default: "default"
+    }
+  },
+  setup() {
+    const { isExtraSmall } = useBreakpoints();
+
+    return {
+      isExtraSmall
+    };
+  }
+});
+</script>

package/components/views/FSEntityView.vue

@@ -1,163 +1,29 @@
 <template>
-  <FSSkeletonView>
+  <FSBaseView
+    variant="entity"
+    v-bind="$attrs"
+  >
     <template
-      #header
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
     >
-      <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"
+        :name="name"
+        v-bind="slotData"
       />
-      <!-- </FSFadeOut> -->
     </template>
-  </FSSkeletonView>
+  </FSBaseView>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { defineComponent } 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";
+import FSBaseView from "./FSBaseView.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
-    };
+    FSBaseView
   }
 });
 </script>

package/components/views/FSSimpleView.vue

@@ -0,0 +1,29 @@
+<template>
+  <FSBaseView
+    variant="default"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSBaseView>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSBaseView from "./FSBaseView.vue";
+
+export default defineComponent({
+  name: "FSSimpleView",
+  components: {
+    FSBaseView
+  },
+});
+</script>

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -0,0 +1,135 @@
+<template>
+  <FSFadeOut
+    height="100%"
+    maxHeight="100%"
+    :scrollOutside="false"
+    :disableTopMask="true"
+  >
+    <FSCol
+      height="fill"
+      gap="0px"
+    >
+      <slot
+        name="header"
+      >
+        <FSRow
+          style="position: sticky; top: 0px; z-index: 3;"
+          :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
+        >
+          <slot
+            name="title"
+          >
+            <FSText
+              font="text-h2"
+            >
+              {{ $props.title }}
+            </FSText>
+          </slot>
+        </FSRow>
+        <FSCol
+          v-if="$props.breadcrumbs && $props.breadcrumbs.length > 0"
+          :padding="$slots.toolbar ? '0px 24px 16px 24px' : '0px 24px'"
+          gap="16px"
+        >
+          <FSCol>
+            <slot
+              name="breadcrumbs"
+            >
+              <FSBreadcrumbs
+                :items="$props.breadcrumbs"
+              />
+            </slot>
+          </FSCol>
+        </FSCol>
+        <FSRow
+          v-if="$slots.toolbar"
+          :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
+          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
+        >
+          <FSSlideGroup
+            width="100%"
+          >
+            <slot
+              name="toolbar"
+            />
+          </FSSlideGroup>
+        </FSRow>
+      </slot>
+
+      <FSCol
+        height="fill"
+        gap="0px"
+        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
+      >
+        <slot />
+      </FSCol>
+    </FSCol>
+  </FSFadeOut>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, computed } from "vue";
+
+import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { useBreakpoints, useColors } from "../../../composables"
+ 
+import FSCol from "../../FSCol.vue";
+import FSRow from "../../FSRow.vue"
+import FSText from "../../FSText.vue";
+import FSBreadcrumbs from "../../FSBreadcrumbs.vue";
+import FSSlideGroup from "../../FSSlideGroup.vue";
+import FSFadeOut from "../../FSFadeOut.vue"
+
+export default defineComponent({
+  name: "FSBaseDefaultDesktopView",
+  components: {
+    FSCol,
+    FSRow,
+    FSText,
+    FSBreadcrumbs,
+    FSSlideGroup,
+    FSFadeOut
+  },
+  props: {
+    title: {
+      type: String,
+      required: false
+    },
+    breadcrumbs: {
+      type: Array as PropType<FSBreadcrumbItem[]>,
+      required: false,
+      default: () => []
+    },
+    stickyToolbar: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    toolbarTopOffset: {
+      type: String,
+      required: false,
+      default: "72px" 
+    },
+    stickyTitleTopOffset: {
+      type: String,
+      required: false,
+      default: "0px"
+    }
+  },
+  setup() {
+    const { isTouchScreenEnabled } = useBreakpoints();
+    const { getColors } = useColors();
+
+    const backgroundColor = computed(() => {
+      return getColors(ColorEnum.Background).base;
+    });
+
+    return {
+      isTouchScreenEnabled,
+      backgroundColor
+    };
+  }
+});
+</script>