@dative-gpi/foundation-shared-components 0.0.68 → 0.0.70

package/components/FSBreadcrumbs.vue

@@ -1,5 +1,9 @@
 <template>
-  <v-breadcrumbs v-bind="$attrs" :style="style" :items="$props.items">
+  <v-breadcrumbs
+    :style="style"
+    :items="$props.items"
+    v-bind="$attrs"
+  >
     <template #title="{ item }">
       <FSSpan :class="classes(item)">
         {{ item.title }}

package/components/FSClickable.vue

@@ -82,7 +82,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import { RouteLocation, useRouter } from "vue-router";
+import { RouteLocation } from "vue-router";
 
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -155,7 +155,6 @@ export default defineComponent({
   emits: ["click"],
   setup(props, { emit }) {
     const { getColors } = useColors();
-    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);

package/components/FSLink.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
-import { RouteLocation, useRouter } from "vue-router";
+import { RouteLocation } from "vue-router";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -76,7 +76,6 @@ export default defineComponent({
   setup(props) {
     const { getColors } = useColors();
     const { slots } = useSlots();
-    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
 

package/components/fields/FSColorField.vue

@@ -34,6 +34,7 @@
                 prependIcon="mdi-pencil"
                 variant="full"
                 :editable="$props.editable"
+                v-bind="props"
               />
             </template>
           </FSTextField>
@@ -64,6 +65,7 @@
                 prependIcon="mdi-pencil"
                 variant="full"
                 :editable="$props.editable"
+                v-bind="props"
               />
             </template>
           </FSTextField>

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -22,17 +22,18 @@
             gap="6px"
             :width="infoWidth"
           >
-            <FSSpan
+            <FSText
               font="text-button"
               :lineClamp="2"
             >
               {{ $props.label }}
-            </FSSpan>
-            <FSSpan
+            </FSText>
+            <FSText
               font="text-overline"
+              variant="light"
             >
               {{ $props.code }}
-            </FSSpan>
+            </FSText>
           </FSCol>
           <FSRow
             gap="4px"
@@ -82,7 +83,7 @@ import FSStatusesRow from "../deviceOrganisations/FSStatusesRow.vue";
 import FSWorstAlert from "../deviceOrganisations/FSWorstAlert.vue";
 import FSDivider from "../FSDivider.vue";
 import FSImage from "../FSImage.vue";
-import FSSpan from "../FSSpan.vue";
+import FSText from "../FSText.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -96,8 +97,8 @@ export default defineComponent({
     FSWorstAlert,
     FSDivider,
     FSImage,
+    FSText,
     FSTile,
-    FSSpan,
     FSCol,
     FSRow
   },

package/components/tiles/FSGroupTileUI.vue

@@ -22,16 +22,17 @@
             gap="6px"
             :width="infoWidth"
           >
-            <FSSpan
+            <FSText
               font="text-button"
             >
               {{ $props.label }}
-            </FSSpan>
-            <FSSpan
+            </FSText>
+            <FSText
               font="text-overline"
+              variant="light"
             >
               {{ $props.code }}
-            </FSSpan>
+            </FSText>
           </FSCol>
           <FSCol
             gap="6px"
@@ -55,11 +56,11 @@
                   </FSText>
                 </FSRow>
               </FSColor>
-              <FSSpan
+              <FSText
                 font="text-overline"
               >
                 {{ $tr("ui.group-tile.group(s)", "Group(s)") }}
-              </FSSpan>
+              </FSText>
             </FSRow>
             <FSRow
               align="center-left"
@@ -80,11 +81,11 @@
                   </FSText>
                 </FSRow>
               </FSColor>
-              <FSSpan
+              <FSText
                 font="text-overline"
               >
                 {{ $tr("ui.group-tile.device(s)", "Device(s)") }}
-              </FSSpan>
+              </FSText>
             </FSRow>
           </FSCol>
         </FSCol>
@@ -106,7 +107,6 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSImage from "../FSImage.vue";
 import FSColor from "../FSColor.vue";
-import FSSpan from "../FSSpan.vue";
 import FSText from "../FSText.vue";
 import FSTile from "./FSTile.vue";
 import FSCol from "../FSCol.vue";
@@ -117,7 +117,6 @@ export default defineComponent({
   components: {
     FSImage,
     FSColor,
-    FSSpan,
     FSText,
     FSTile,
     FSCol,

package/components/tiles/FSTile.vue

@@ -1,5 +1,34 @@
 <template>
+  <FSClickable
+    v-if="$props.href || $props.to || $attrs.onClick"
+    class="fs-tile"
+    padding="12px"
+    :height="height"
+    :width="width"
+    :style="style"
+    :href="$props.href"
+    :to="$props.to"
+    v-bind="$attrs"
+  >
+    <slot />
+    <FSCard
+      v-if="$props.editable"
+      class="fs-tile-checkbox"
+      :border="false"
+    >
+      <FSCheckbox
+        :color="ColorEnum.Dark"
+        :modelValue="$props.modelValue"
+        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+      />
+    </FSCard>
+    <div
+      class="fs-tile-bottom"
+      :style="style"
+    />
+  </FSClickable>
   <FSCard
+    v-else
     class="fs-tile"
     padding="12px"
     :style="style"
@@ -19,6 +48,7 @@
       />
     </FSCard>
     <div
+      v-if="$props.bottomColor"
       class="fs-tile-bottom"
       :style="style"
     />
@@ -27,29 +57,42 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
+import { RouteLocation } from "vue-router";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSClickable from "../FSClickable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
 
 export default defineComponent({
   name: "FSTile",
   components: {
+    FSClickable,
     FSCheckbox,
     FSCard
   },
   props: {
+    to: {
+      type: [String, Object] as PropType<string | RouteLocation | null>,
+      required: false,
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     modelValue: {
       type: Boolean,
       required: false,
       default: false
     },
     bottomColor: {
-      type: [Array, String] as PropType<ColorBase[] | ColorBase>,
+      type: [Array, String] as PropType<ColorBase[] | ColorBase | null>,
       required: false,
-      default: ColorEnum.Primary
+      default: null
     },
     editable: {
       type: Boolean,

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -0,0 +1,130 @@
+<template>
+  <FSTile
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      width="fill"
+    >
+      <FSRow
+        align="center-center"
+        gap="24px"
+        :wrap="false"
+        :height="imageSize"
+      >
+        <FSCol
+          gap="4px"
+          :width="infoWidth"
+        >
+          <FSText
+            font="text-button"
+            :lineClamp="2"
+          >
+            {{ $props.name }}
+          </FSText>
+          <FSRow
+            align="center-left"
+            gap="4px"
+          >
+            <FSIcon
+              variant="light"
+              :color="ColorEnum.Dark"
+            >
+              {{ $props.roleIcon }}
+            </FSIcon>
+            <FSText
+              font="text-overline"
+              variant="light"
+            >
+              {{ $props.roleLabel }}
+            </FSText>
+          </FSRow>
+        </FSCol>
+        <FSImage
+          v-if="$props.imageId"
+          :imageId="$props.imageId"
+          :width="imageSize"
+        />
+      </FSRow>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSImage from "../FSImage.vue";
+import FSText from "../FSText.vue";
+import FSTile from "./FSTile.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSUserOrganisationTileUI",
+  components: {
+    FSImage,
+    FSText,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    imageId: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    name: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    roleIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    roleLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): number => {
+      let width = isMobileSized.value ? 288 : 304;
+      if (props.imageId) {
+        width -= imageSize.value;
+      }
+      return width;
+    });
+
+    return {
+      imageSize,
+      infoWidth,
+      ColorEnum
+    };
+  }
+});
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.68",
+  "version": "0.0.70",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.68",
-    "@dative-gpi/foundation-shared-services": "0.0.68",
+    "@dative-gpi/foundation-shared-domain": "0.0.70",
+    "@dative-gpi/foundation-shared-services": "0.0.70",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "aafa51940e86c1de00f4bf3e87e0e69a7223a6da"
+  "gitHead": "e280ffdb9ee5d27727cc01325689b792168febcd"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -23,6 +23,14 @@
 .v-breadcrumbs {
     padding: 0 !important;
     gap: 8px !important;
+
+    @include web {
+        height: 24px;
+    }
+
+    @include mobile {
+        height: 20px;
+    }
 }
 
 .v-breadcrumbs-item {