@dative-gpi/foundation-shared-components 1.0.27 → 1.0.28-remove-deprecated2

package/components/tiles/FSLocationTileUI.vue

@@ -0,0 +1,192 @@
+<template>
+  <FSTile
+    :activeColor="$props.color"
+    :bottomColor="$props.color"
+    :modelValue="$props.modelValue"
+    :width="$props.width"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      width="fill"
+    >
+      <FSRow
+        align="center-left"
+        gap="24px"
+        :height="imageSize"
+        :wrap="false"
+      >
+        <FSCol 
+          gap="12px"
+          :width="infoWidth"
+        >
+          <FSCol
+            gap="4px"
+          >
+            <FSSpan
+              font="text-button"
+              :lineClamp="1"
+            >
+              {{ $props.label }}
+            </FSSpan>
+            <FSSpan
+              v-if="$props.code"
+              font="text-overline"
+              variant="soft"
+            >
+              {{ $props.code }}
+            </FSSpan>
+          </FSCol>
+          <FSCol
+            gap="8px"
+          >
+            <FSRow
+              v-if="$props.deviceCount"
+              :wrap="false"
+              align="center-left"
+            >
+              <FSColor
+                width="24px"
+                height="24px"
+                :color="ColorEnum.Light"
+                :border="false"
+              >
+                <FSRow
+                  align="center-center"
+                >
+                  <FSSpan
+                    font="text-overline"
+                  >
+                    {{ $props.deviceCount <= 99 ? $props.deviceCount : "99+" }}
+                  </FSSpan>
+                </FSRow>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $tr("ui.common.devices", "Equipment(s)") }}
+              </FSSpan>
+            </FSRow>
+            <FSRow
+              v-if="$props.address"
+              :wrap="false"
+              align="center-left"
+            >
+              <FSColor
+                width="24px"
+                height="24px"
+                :color="ColorEnum.Light"
+                :border="false"
+              >
+                <FSRow
+                  align="center-center"
+                >
+                  <FSIcon
+                    icon="mdi-map-marker"
+                    size="16px"
+                  />
+                </FSRow>
+              </FSColor>
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $props.address }}
+              </FSSpan>
+            </FSRow>
+          </FSCol>
+        </FSCol>
+        <FSIconCard
+          backgroundVariant="standard"
+          :backgroundColor="ColorEnum.Background"
+          :iconColor="$props.color"
+          :icon="$props.icon"
+          :size="imageSize"
+        />
+      </FSRow>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSIconCard from "../FSIconCard.vue";
+import FSColor from "../FSColor.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: "FSLocationTileUI",
+  components: {
+    FSIconCard,
+    FSColor,
+    FSSpan,
+    FSTile,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    code: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: "mdi-map-marker"
+    },
+    address: {
+      type: String,
+      required: false
+    },
+    deviceCount: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup() {
+    const { isMobileSized } = useBreakpoints();
+
+    const imageSize = computed((): number => {
+      return isMobileSized.value ? 90 : 100;
+    });
+
+    const infoWidth = computed((): string => {
+      return `calc(100% - ${imageSize.value}px - 24px)`;
+    });
+
+    return {
+      ColorEnum,
+      imageSize,
+      infoWidth
+    };
+  }
+});
+</script>

package/components/tiles/FSModelTileUI.vue

@@ -0,0 +1,18 @@
+<template>
+  <FSSimpleTileUI
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSSimpleTileUI from "./FSSimpleTileUI.vue";
+
+export default defineComponent({
+  name: "FSModelTileUI",
+  components: {
+    FSSimpleTileUI,
+  }
+});
+</script>

package/components/tiles/FSSimpleTileUI.vue

@@ -12,7 +12,7 @@
       width="fill"
     >
       <FSRow
-        align="center-center"
+        align="center-left"
         gap="24px"
         :height="imageSize"
         :wrap="false"
@@ -41,9 +41,10 @@
           :width="imageSize"
         />
         <FSIconCard
-          v-else
+          v-else-if="$props.icon"
           :backgroundVariant="$props.iconBackgroundVariant"
           :backgroundColor="$props.iconBackgroundColor"
+          :iconColor="$props.iconColor"
           :border="$props.iconBorder"
           :icon="$props.icon"
           :size="imageSize"
@@ -95,12 +96,11 @@ export default defineComponent({
     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"
+      default: "standard"
     },
     iconBackgroundColor: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
@@ -112,6 +112,11 @@ export default defineComponent({
       required: false,
       default: true
     },
+    iconColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
     activeColor: {
       type: String as PropType<ColorBase>,
       required: false,

package/components/tiles/FSTile.vue

@@ -1,89 +1,96 @@
 <template>
-  <FSClickable
-    v-if="$props.singleSelect"
+  <FSCol
     class="fs-tile"
-    padding="12px"
-    :variant="variant"
-    :height="height"
-    :color="color"
-    :style="style"
-    @click="() => $emit('update:modelValue', !$props.modelValue)"
-    v-bind="$attrs"
+    :height="$props.height"
+    :width="$props.width"
   >
-    <slot />
-    <div
-      v-if="$props.bottomColor"
-      class="fs-tile-bottom"
+    <FSClickable
+      v-if="$props.singleSelect"
+      padding="12px"
+      :variant="variant"
+      :color="color"
       :style="style"
-    />
-  </FSClickable>
-  <FSClickable
-    v-else-if="$props.href || $props.to || $attrs.onClick"
-    variant="background"
-    class="fs-tile"
-    padding="12px"
-    :color="ColorEnum.Background"
-    :href="$props.href"
-    :height="height"
-    :to="$props.to"
-    :style="style"
-    v-bind="$attrs"
-  >
-    <slot />
-    <FSCard
-      v-if="$props.editable"
-      class="fs-tile-checkbox"
+      width="100%"
+      height="100%"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
+      v-bind="$attrs"
+    >
+      <slot />
+    </FSClickable>
+    <FSClickable
+      v-else-if="$props.href || $props.to || $attrs.onClick"
       variant="background"
+      class="fs-tile"
+      padding="12px"
       :color="ColorEnum.Background"
-      :border="false"
+      :href="$props.href"
+      width="100%"
+      height="100%"
+      :to="$props.to"
+      :style="style"
       v-bind="$attrs"
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
-    <div
-      class="fs-tile-bottom"
-      :style="style"
-    />
-  </FSClickable>
-  <FSCard
-    v-else
-    variant="background"
-    class="fs-tile"
-    padding="12px"
-    :color="color"
-    :style="style"
-    :height="height"
-    v-bind="$attrs"
-  >
-    <slot />
+      <slot />
+      <FSCard
+        v-if="$props.editable"
+        class="fs-tile-checkbox"
+        variant="background"
+        :height="['40px', '32px']"
+        :width="['40px', '32px']"
+        :border="false"
+        v-bind="$attrs"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSClickable>
     <FSCard
-      v-if="$props.editable"
-      class="fs-tile-checkbox"
+      v-else
       variant="background"
-      :border="false"
+      class="fs-tile"
+      padding="12px"
+      :color="color"
+      :style="style"
+      width="100%"
+      height="100%"
       v-bind="$attrs"
     >
-      <FSCheckbox
-        :modelValue="$props.modelValue"
-        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-      />
-    </FSCard>
+      <slot />
+      <FSCard
+        v-if="$props.editable"
+        class="fs-tile-checkbox"
+        variant="background"
+        :height="['40px', '32px']"
+        :width="['40px', '32px']"
+        :border="false"
+        v-bind="$attrs"
+      >
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSCard>  
+    <div
+      v-if="$props.leftColor"
+      class="fs-tile-left"
+      :style="style"
+    />
     <div
       v-if="$props.bottomColor"
       class="fs-tile-bottom"
       :style="style"
     />
-  </FSCard>  
+  </FSCol>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { type RouteLocation } from "vue-router";
 
-import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
 import FSClickable from "../FSClickable.vue";
@@ -123,6 +130,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    leftColor: {
+      type: [Array, String] as PropType<ColorBase[] | ColorBase | null>,
+      required: false,
+      default: null
+    },
     editable: {
       type: Boolean,
       required: false,
@@ -132,25 +144,33 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    }
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [170, 156]
+    },
   },
   emits: ["update:modelValue"],
   setup(props) {
-    const { isMobileSized } = useBreakpoints();
     const { getGradients } = useColors();
 
     const style = computed((): StyleValue => {
+      const result: StyleValue = {};
       if (props.bottomColor) {
         const bottomColors = getGradients(props.bottomColor);
-        return {
-          "--fs-tile-border-color": bottomColors.base
-        };
+        result["--fs-tile-bottom-border-color"] = bottomColors.base;
       }
-      return {};
-    });
-
-    const height = computed((): number => {
-      return isMobileSized.value ? 156 : 170;
+      if (props.leftColor) {
+        const leftColors = getGradients(props.leftColor);
+        result["--fs-tile-left-border-color"] = leftColors.base;
+      }
+      return result;
     });
 
     const variant = computed((): "standard" | "background" => {
@@ -164,7 +184,6 @@ export default defineComponent({
     return {
       ColorEnum,
       variant,
-      height,
       color,
       style
     };

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -134,7 +134,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/toggleSets/FSToggleSetPosition.vue

@@ -22,7 +22,7 @@ import { computed, defineComponent } from "vue";
 import type { PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { Position } from "@dative-gpi/foundation-shared-domain/models";
+import { Position } from "@dative-gpi/foundation-shared-domain/enums";
 
 export default defineComponent({
   name: "FSToggleSetPosition",
@@ -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>