@dative-gpi/foundation-shared-components 0.0.7 → 0.0.9

package/components/FSTile.vue

@@ -0,0 +1,90 @@
+<template>
+  <FSCard
+    class="fs-tile"
+    padding="12px"
+    :style="style"
+    :width="width"
+    :height="height"
+  >
+    <slot />
+    <FSContainer
+      v-if="$props.editable"
+      class="fs-tile-checkbox"
+      :border="false"
+    >
+      <FSCheckbox
+        :color="ColorEnum.Dark"
+        :modelValue="$props.modelValue"
+        @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+      />
+    </FSContainer>
+      <div
+        class="fs-tile-bottom"
+        :style="style"
+      />
+  </FSCard>  
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSContainer from "./FSContainer.vue";
+import FSCheckbox from "./FSCheckbox.vue";
+import FSCard from "./FSCard.vue";
+
+export default defineComponent({
+  name: "FSTile",
+  components: {
+    FSContainer,
+    FSCheckbox,
+    FSCard
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    bottomColor: {
+      type: [Array, String] as PropType<ColorBase[] | ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+
+    const bottomColors = computed(() => useColors().getGradients(props.bottomColor));
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-tile-border-color": bottomColors.value.base
+      };
+    });
+
+    const width = computed(() => {
+      return isMobileSized.value ? 336 : 352;
+    });
+
+    const height = computed(() => {
+      return isMobileSized.value ? 156 : 170;
+    });
+
+    return {
+      ColorEnum,
+      style,
+      width,
+      height
+    };
+  }
+});
+</script>

package/components/FSToggleSet.vue

@@ -0,0 +1,282 @@
+<template>
+  <FSWrapGroup
+    v-if="['wrap'].includes($props.variant)"
+    :padding="$props.padding"
+    :gap="$props.gap"
+  >
+    <template v-if="$props.values.length">
+      <template v-if="!firstChild">
+        <FSButton
+          v-for="(item, index) in $props.values"
+          :prependIcon="item.prependIcon"
+          :appendIcon="item.appendIcon"
+          :editable="$props.editable"
+          :variant="getVariant(item)"
+          :color="getColor(item)"
+          :class="getClass(item)"
+          :label="item.label"
+          :key="index"
+          @click="toggle(item)"
+        />
+      </template>
+      <template v-else>
+        <component
+          v-for="(item, index) in $props.values"
+          :key="index"
+          :is="firstChild"
+          :prependIcon="getFromFirstChild('prependIcon', item)"
+          :appendIcon="getFromFirstChild('appendIcon', item)"
+          :variant="getFromFirstChild('variant', item)"
+          :color="getFromFirstChild('color', item)"
+          :class="getFromFirstChild('class', item)"
+          :label="getFromFirstChild('label', item)"
+          :icon="getFromFirstChild('icon', item)"
+          :editable="$props.editable"
+          @click="toggle(item)"
+        />
+      </template>
+    </template>
+    <slot v-else />
+  </FSWrapGroup>
+  <FSSlideGroup
+    v-else
+    :padding="$props.padding"
+    :gap="$props.gap"
+  >
+    <template v-if="$props.values.length">
+      <template v-if="!firstChild">
+        <FSButton
+          v-for="(item, index) in $props.values"
+          :prependIcon="item.prependIcon"
+          :appendIcon="item.appendIcon"
+          :editable="$props.editable"
+          :variant="getVariant(item)"
+          :color="getColor(item)"
+          :class="getClass(item)"
+          :label="item.label"
+          :key="index"
+          @click="toggle(item)"
+        />
+      </template>
+      <template v-else>
+        <component
+          v-for="(item, index) in $props.values"
+          :key="index"
+          :is="firstChild"
+          :prependIcon="getFromFirstChild('prependIcon', item)"
+          :appendIcon="getFromFirstChild('appendIcon', item)"
+          :variant="getFromFirstChild('variant', item)"
+          :color="getFromFirstChild('color', item)"
+          :class="getFromFirstChild('class', item)"
+          :label="getFromFirstChild('label', item)"
+          :icon="getFromFirstChild('icon', item)"
+          :editable="$props.editable"
+          @click="toggle(item)"
+        />
+      </template>
+    </template>
+    <slot v-else />
+  </FSSlideGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
+
+import FSSlideGroup from "./FSSlideGroup.vue";
+import FSWrapGroup from "./FSWrapGroup.vue";
+import FSButton from "./FSButton.vue";
+
+export default defineComponent({
+  name: "FSToggleSet",
+  components: {
+    FSSlideGroup,
+    FSWrapGroup,
+    FSButton
+  },
+  props: {
+    values: {
+      type: Array as PropType<FSToggle[]>,
+      required: false,
+      default: () => []
+    },
+    variant: {
+      type: String as PropType<"wrap" | "slide">,
+      required: false,
+      default: "wrap"
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    activeVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    buttonClass: {
+      type: [Array, String] as PropType<string[] | string>,
+      required: false,
+      default: null
+    },
+    activeClass: {
+      type: [Array, String] as PropType<string[] | string>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: [Array, String, Number] as PropType<(string | number)[] | string | number>,
+      required: false,
+      default: false
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    activeColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: 0
+    },
+    gap: {
+      type: Number,
+      required: false,
+      default: 8
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getFirstChild } = useSlots();
+
+    const firstChild = getFirstChild("item");
+
+    const getFromFirstChild = (prop: string, value: FSToggle): any => {
+      switch (prop) {
+        case "prependIcon":
+          return firstChild.props.prependIcon ?? value.prependIcon;
+        case "label":
+          return firstChild.props.label ?? value.label;
+        case "appendIcon":
+          return firstChild.props.appendIcon ?? value.appendIcon;
+        case "icon":
+          return firstChild.props.icon ?? value.icon;
+        case "variant":
+          return firstChild.props.variant ?? getVariant(value);
+        case "color":
+          return firstChild.props.color ?? getColor(value);
+        default:
+          return firstChild.props[prop];
+      }
+    }
+
+    const getVariant = (value: FSToggle): "standard" | "full" | "icon" => {
+      if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
+        return props.activeVariant;
+      }
+      if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
+        return props.activeVariant;
+      }
+      return props.buttonVariant;
+    };
+
+    const getColor = (value: FSToggle): ColorBase => {
+      if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
+        return props.activeColor;
+      }
+      if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
+        return props.activeColor;
+      }
+      return props.buttonColor;
+    };
+
+    const getClass = (value: FSToggle): string[] | string => {
+      if (Array.isArray(props.modelValue) && props.modelValue.some(v => v === value.id)) {
+        return props.activeClass;
+      }
+      if (!Array.isArray(props.modelValue) && props.modelValue === value.id) {
+        return props.activeClass;
+      }
+      return props.buttonClass;
+    };
+
+    const toggle = (value: FSToggle): void => {
+      if (Array.isArray(props.modelValue)) {
+        if (props.multiple) {
+          if (props.modelValue.length && props.modelValue.every(v => v === value.id)) {
+            if (!props.required) {
+              emit("update:modelValue", []);
+              return;
+            }
+          }
+          else if (props.modelValue.some(v => v === value.id)) {
+            emit("update:modelValue", props.modelValue.filter(v => v !== value.id));
+            return;
+          }
+          else {
+            emit("update:modelValue", [...props.modelValue, value.id]);
+            return;
+          }
+        }
+        else {
+          if (props.modelValue.some(v => v === value.id)) {
+            if (!props.required) {
+              emit("update:modelValue", []);
+              return;
+            }
+          }
+          else {
+            emit("update:modelValue", [value.id]);
+            return;
+          }
+        }
+      }
+      else {
+        if (props.modelValue === value.id) {
+          if (!props.required) {
+            emit("update:modelValue", null);
+            return;
+          }
+        }
+        else {
+          emit("update:modelValue", value.id);
+          return;
+        }
+      }
+    };
+
+    return {
+      firstChild,
+      getFromFirstChild,
+      getVariant,
+      getColor,
+      getClass,
+      toggle
+    };
+  }
+})
+</script>

package/components/FSTooltip.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-tooltip
+    class="fs-tooltip"
+    location="top"
+  >
+    <template #activator="{ props }">
+      <slot name="activator" v-bind="props" />
+    </template>
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </v-tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "FSTooltip"
+});
+</script>

package/components/FSWindow.vue

@@ -1,26 +1,36 @@
 <template>
-    <v-window
-        class="fs-window"
-        :modelValue="$props.tab"
-        v-bind="$attrs"
+  <v-window
+    class="fs-window"
+    v-bind="$attrs"
+  >
+    <v-window-item
+      v-for="(component, index) in getChildren()"
+      :value="value(component, index)"
+      :key="index"
     >
-        <v-window-item v-for="(component, index) in $slots.default()" :key="index">
-            <component :is="component" />
-        </v-window-item>
-    </v-window>
+      <component :is="component" />
+    </v-window-item>
+  </v-window>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, VNode } from "vue";
+
+import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
-    name: "FSWindow",
-    props: {
-        tab: {
-            type: Number,
-            required: false,
-            default: 0
-        }
+  name: "FSWindow",
+  setup() {
+    const { getChildren } = useSlots();
+
+    const value = (component: VNode, index: number): any => {
+      return component?.props?.value ?? index;
+    };
+
+    return {
+      getChildren,
+      value
     }
+  }
 });
 </script>

package/components/FSWrapGroup.vue

@@ -1,59 +1,56 @@
 <template>
-    <v-slide-group
-        class="fs-wrap-group"
-        :style="style"
-        v-bind="$attrs"
+  <v-slide-group
+    class="fs-wrap-group"
+    :style="style"
+    v-bind="$attrs"
+  >
+    <v-slide-group-item
+      v-for="(component, index) in getChildren()"
+      :key="index"
     >
-        <FSRow>
-            <v-slide-group-item v-for="(component, index) in $slots.default()" :key="index">
-                <component :is="component" v-bind="{ color, colors, style }" />
-            </v-slide-group-item>
-        </FSRow>
-    </v-slide-group>
+      <component :is="component" />
+    </v-slide-group-item>
+  </v-slide-group>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, toRefs } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
-
-import FSRow from "./FSRow.vue";
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
-    name: "FSWrapGroup",
-    components: {
-        FSRow
-    },
-    props: {
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Primary
-        }
+  name: "FSWrapGroup",
+  props: {
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: 0
     },
-    setup(props) {
-        const { color } = toRefs(props);
-
-        const colors = useColors().getColors(color.value);
-
-        const darks = useColors().getColors(ColorBase.Dark);
-
-        const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
-            "--fs-group-color": darks.base,
-            "--fs-group-hover-background-color": colors.light,
-            "--fs-group-hover-color": darks.dark,
-            "--fs-group-disabled-color": darks.light,
-            "--fs-group-light": colors.light,
-            "--fs-group-base": colors.base,
-            "--fs-group-dark": colors.dark
-        });
-
-        return {
-            color,
-            colors,
-            style
-        };
+    gap: {
+      type: Number,
+      required: false,
+      default: 8
     }
+  },
+  setup(props) {
+    const { getChildren } = useSlots();
+
+    const darks = useColors().getColors(ColorEnum.Dark);
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-group-padding"    : typeof(props.padding) === "string" ? props.padding : `${props.padding}px`,
+        "--fs-group-gap"        : `${props.gap}px`,
+        "--fs-group-color"      : darks.light,
+        "--fs-group-hover-color": darks.dark
+      }
+    });
+
+    return {
+      style,
+      getChildren
+    };
+  }
 });
 </script>

package/components/deviceOrganisations/FSConnectivity.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-menu
+    v-if="$props.deviceConnectivity"
+    :closeOnContentClick="false"
+    v-model="menu"
+  >
+    <template #activator="{ props }">
+      <FSColorIcon
+        size="m"
+        variant="fill"
+        :color="$props.deviceConnectivity.color"
+        v-bind="props"
+      >
+        {{ $props.deviceConnectivity.icon }}
+      </FSColorIcon>
+    </template>
+    <FSCard
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        align="center-center"
+        padding="6px 24px"
+      >
+        <FSCol
+          align="center-center"
+          gap="12px"
+        >
+          <FSChip
+            :color="$props.deviceConnectivity.color"
+            :prependIcon="$props.deviceConnectivity.icon"
+            :label="connectivityLabel"
+          />
+          <FSRow
+            width="hug"
+          >
+            <FSText>
+              {{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
+            </FSText>
+          </FSRow>
+        </FSCol>
+        <FSRow
+          v-if="deviceTimestamp"
+          width="hug"
+        >
+          <FSSpan
+            font="text-overline"
+          >
+            {{ deviceTimestamp }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+    </FSCard>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+
+import FSColorIcon from "../FSColorIcon.vue";
+import FSCard from "../FSCard.vue";
+import FSChip from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
+
+export default defineComponent({
+  name: "FSConnectivity",
+  components: {
+    FSColorIcon,
+    FSCard,
+    FSChip,
+    FSText,
+    FSSpan
+  },
+  props: {
+    deviceConnectivity: {
+      type: Object as PropType<FSDeviceConnectivity>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat } = useTimeZone();
+    const { $tr } = useTranslationsProvider();
+
+    const menu = ref(false);
+
+    const connectivityLabel = computed((): string => {
+      switch (props.deviceConnectivity.status) {
+        case ConnectivityStatus.Connected:          return $tr("ui.connectivity-status.connected", "Connected");
+        case ConnectivityStatus.PartiallyConnected: return $tr("ui.connectivity-status.partially-connected", "Partially connected");
+        case ConnectivityStatus.AlmostOffline:      return $tr("ui.connectivity-status.almost-offline", "Almost offline");
+        default:                                    return $tr("ui.connectivity-status.offline", "Offline");
+      }
+    });
+
+    const deviceTimestamp = computed((): string => {
+      if (props.deviceConnectivity.sourceTimestamp) {
+        return epochToLongTimeFormat(props.deviceConnectivity.sourceTimestamp);
+      }
+      return "";
+    });
+
+    return {
+      connectivityLabel,
+      deviceTimestamp,
+      menu
+    };
+  }
+});
+</script>