@dative-gpi/foundation-shared-components 1.1.24-unit-formatter → 1.1.24-unit-formatter-2

package/components/FSRangePicker.vue

@@ -89,6 +89,7 @@ import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { computeTicks, TimePrecision } from '@dative-gpi/foundation-shared-components/utils';
 
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSPlayButtons from '@dative-gpi/foundation-shared-components/components/FSPlayButtons.vue';
@@ -100,6 +101,7 @@ export default defineComponent({
   name: "FSRangePicker",
   components: {
     FSCol,
+    FSRow,
     FSSpan,
     FSText,
     FSTermField,

package/components/FSRouterLink.vue

@@ -1,9 +1,9 @@
 <template>
-  <router-link
-    :to="$props.to"
-    @auxclick="handleRoutingEvent($event, $props.to)"
-    @click="handleRoutingEvent($event, $props.to)"
-    v-bind="$attrs"
+  <component
+    :is="wrapperComponent"
+    v-bind="mergedProps"
+    @click="onClick"
+    @auxclick="onAuxClick"
   >
     <template
       v-for="(_, name) in $slots"
@@ -14,29 +14,99 @@
         v-bind="{ ...slotData }"
       />
     </template>
-  </router-link>
+  </component>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
-import { type RouteLocation } from "vue-router";
-
+import { computed, defineComponent, type PropType } from "vue";
+import { RouterLink, type RouteLocation } from "vue-router";
 import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 
 export default defineComponent({
   name: "FSRouterLink",
   props: {
     to: {
-      type: Object as PropType<RouteLocation>,
-      required: true
+      type: Object as PropType<RouteLocation | null>,
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
+      default: null
+    },
+    passive: {
+      type: Boolean as PropType<boolean | null>,
+      default: null
+    },
+    type: {
+      type: String as PropType<"button" | "submit" | "reset">,
+      default: "button"
+    },
+    defaultWrapper: {
+      type: String as PropType<"div" | "a" | "button">,
+      default: "button"
+    },
+    passiveWrapper: {
+      type: String as PropType<"div" | "a" | "button">,
+      default: "div"
     }
   },
-  setup() {
+  setup(props, { attrs, slots }) {
     const { handleRoutingEvent } = useRouting();
 
+    const actualPassive = computed(() => {
+      if (props.passive !== null) {return props.passive;}
+      return !props.to && !props.href && !attrs.onClick;
+    });
+
+    const wrapperComponent = computed(() => {
+      if (actualPassive.value) {
+        return props.passiveWrapper;
+      }
+      if (props.href) {
+        return "a";
+      }
+      if (props.to) {
+        return RouterLink;
+      }
+      return props.defaultWrapper;
+    });
+
+    const componentProps = computed(() => {
+      if (wrapperComponent.value === RouterLink) {
+        return { to: props.to };
+      } else if (wrapperComponent.value === "a") {
+        return { href: props.href };
+      } else if (wrapperComponent.value === "button") {
+        return { type: props.type };
+      } else {
+        return {};
+      }
+    });
+
+    const mergedProps = computed(() => ({
+      ...componentProps.value,
+      ...attrs
+    }));
+
+    const onClick = (event: MouseEvent) => {
+      if (props.to) {
+        handleRoutingEvent(event, props.to);
+      }
+    };
+
+    const onAuxClick = (event: MouseEvent) => {
+      if (props.to) {
+        handleRoutingEvent(event, props.to);
+      }
+    };
+
     return {
-      handleRoutingEvent
+      wrapperComponent,
+      mergedProps,
+      slots,
+      onClick,
+      onAuxClick
     };
   }
 });
-</script>
+</script>

package/components/FSSlideGroup.vue

@@ -2,7 +2,7 @@
   <v-slide-group
     class="fs-slide-group"
     ref="slideGroupRef"
-    :showArrows="true"
+    :showArrows="$props.showArrows"
     :id="elementId"
     :style="style"
     v-bind="$attrs"
@@ -83,6 +83,10 @@ export default defineComponent({
       type: Number,
       required: false,
       default: 250
+    },
+    showArrows: {
+      type: [Boolean, String] as PropType<boolean | string>,
+      default: true
     }
   },
   setup(props) {

package/components/FSSnackbar.vue

@@ -0,0 +1,146 @@
+<template>
+  <v-snackbar
+    class="fs-snackbar"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    :multi-line="$props.multiLine"
+    :location="$props.location"
+    :timeout="$props.timeout"
+    :style="style"
+  >
+    <slot>
+      <FSRow
+        align="center-left"
+        :wrap="false"
+        gap="12px"
+      >
+        <FSIcon
+          v-if="$props.icon"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSSpan
+          v-if="$props.text"
+          :ellipsis="!$props.multiLine"
+        >
+          {{ $props.text }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <template
+      v-if="$slots.actions || $props.closeButton"
+      #actions
+    >
+      <slot
+        name="actions"
+      >
+        <FSButton
+          v-if="$props.closeButton"
+          icon="mdi-close"
+          variant="icon"
+          @click="$emit('update:modelValue', false)"
+        />
+      </slot>
+    </template>
+  </v-snackbar>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { type ColorBase, ColorEnum, type SnackbarVariant, SnackbarVariants } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+
+import FSButton from "./FSButton.vue";
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSSnackbar",
+  components: {
+    FSButton,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    text: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    timeout: {
+      type: Number,
+      required: false,
+      default: 5000
+    },
+    location: {
+      type: String as PropType<"top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right">,
+      required: false,
+      default: "bottom"
+    },
+    multiLine: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    closeButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    variant: {
+      type: String as PropType<SnackbarVariant>,
+      required: false,
+      default: SnackbarVariants.Full
+    },
+    borderRadius: {
+      type: [String, Number],
+      required: false,
+      default: "4px"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { getColors } = useColors();
+
+    const colors = computed(() => getColors(props.color));
+
+    const style = computed((): StyleValue => {
+      switch (props.variant) {
+        case "standard": return {
+          "--fs-snackbar-border-radius": sizeToVar(props.borderRadius),
+          "--fs-snackbar-background-color": colors.value.light,
+          "--fs-snackbar-color": colors.value.dark
+        };
+        default: return {
+          "--fs-snackbar-border-radius": sizeToVar(props.borderRadius),
+          "--fs-snackbar-background-color": colors.value.base,
+          "--fs-snackbar-color": colors.value.light
+        };
+      }
+    });
+
+    return {
+      style
+    };
+  }
+});
+</script>

package/components/FSSubgroupingChip.vue

@@ -0,0 +1,138 @@
+<template>
+  <FSChip
+    :color="chipColor"
+    :width="$props.width"
+    :height="$props.height"
+    :variant="$props.variant"
+    :disableHoverStyle="$props.disableHoverStyle"
+    :title="`${$props.groupingLabel} - ${$props.label}`"
+  >
+    <FSRow
+      align="center-left"
+      width="fill"
+      :wrap="false"
+    >
+      <FSRow
+        align="center-center"
+        width="hug"
+        gap="6px"
+        :wrap="false"
+      >
+        <FSIcon
+          :color="$props.groupingColor"
+          :size="$props.iconSize"
+        >
+          {{ $props.groupingIcon }}
+        </FSIcon>
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.groupingLabel }}
+        </FSSpan>
+      </FSRow>
+      <FSRow
+        align="center-center"
+        width="hug"
+        gap="6px"
+        :wrap="false"
+      >
+        <FSIcon
+          :size="$props.iconSize"
+        >
+          {{ $props.icon }}
+        </FSIcon>
+        <FSSpan
+          font="text-overline"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </FSRow>
+    </FSRow>
+  </FSChip>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSIcon from "./FSIcon.vue";
+import FSSpan from "./FSSpan.vue";
+import FSChip from "./FSChip.vue";
+import FSRow from "./FSRow.vue";
+
+import { useColors } from "../composables";
+
+export default defineComponent({
+  name: "FSSubgroupingChip",
+  components: {
+    FSChip,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    groupingLabel: {
+      type: String as PropType<string>,
+      required: true
+    },
+    groupingIcon: {
+      type: String as PropType<string>,
+      required: true
+    },
+    groupingColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    label: {
+      type: String as PropType<string>,
+      required: true
+    },
+    icon: {
+      type: String as PropType<string>,
+      required: true
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [24, 20]
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
+    variant: {
+      type: String as PropType<CardVariant>,
+      required: false,
+      default: CardVariants.Background
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    iconSize: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "18px"
+    },
+    disableHoverStyle: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    
+    const chipColor = getColors(props.color).dark;
+
+    return {
+      chipColor,
+      ColorEnum
+    };
+  }
+});
+</script>

package/components/FSWindow.vue

@@ -85,6 +85,7 @@ import FSButton from "./FSButton.vue";
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
 import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
@@ -94,6 +95,7 @@ export default defineComponent({
     FSCard,
     FSIcon,
     FSText,
+    FSCol,
     FSRow
   },
   props: {

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -29,7 +29,7 @@
       />
     </template>
   </FSAgendaHorizontalEvent>
-  <FSClickable
+  <FSCard
     v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
     :class="`fs-agenda-event fs-agenda-event-${$props.variant}`"
     :variant="$props.variant === 'current' ? 'full' : 'standard'"
@@ -50,7 +50,7 @@
       :variant="$props.variant"
       :width="width"
     />
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -58,13 +58,13 @@ import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSClickable from '../FSClickable.vue';
+import FSCard from '../FSCard.vue';
 
 
 export default defineComponent({
   name: 'FSAgendaHorizontalEvent',
   components: {
-    FSClickable
+    FSCard
   },
   emits: ['click'],
   props: {

package/components/agenda/FSAgendaVerticalEvent.vue

@@ -28,7 +28,7 @@
       />
     </template>
   </FSAgendaVerticalEvent>
-  <FSClickable
+  <FSCard
     v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
     :class="`fs-agenda-event fs-agenda-vertical-event fs-agenda-event-${$props.variant}`"
     :variant="$props.variant === 'current' ? 'full' : 'standard'"
@@ -48,7 +48,7 @@
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
     />
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -56,12 +56,12 @@ import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSClickable from '../FSClickable.vue';
+import FSCard from '../FSCard.vue';
 
 export default defineComponent({
   name: 'FSAgendaVerticalEvent',
   components: {
-    FSClickable
+    FSCard
   },
   emits: ['click'],
   props: {

package/components/deviceOrganisations/FSStatusRichCard.vue

@@ -1,10 +1,9 @@
 <template>
-  <component
+  <FSCard
     v-if="$props.modelStatus"
     class="fs-status-rich-card"
     topRightPadding="2px"
     variant="standard"
-    :is="$attrs.onClick ? FSClickable : FSCard"
     :padding="$props.padding"
     :height="$props.height"
     :width="$props.width"
@@ -50,7 +49,7 @@
         v-bind="{ color }"
       />
     </template>
-  </component>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -59,19 +58,19 @@ import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSClickable from "../FSClickable.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSChip.vue";
 import FSText from "../FSText.vue";
+import FSRow from "../FSRow.vue";
 import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSStatusRichCard",
   components: {
-    FSClickable,
     FSCard,
     FSIcon,
     FSText,
+    FSRow,
     FSCol
   },
   props: {
@@ -158,8 +157,6 @@ export default defineComponent({
     }));
 
     return {
-      FSClickable,
-      FSCard,
       color,
       style,
       title,

package/components/fields/FSAutocompleteField.vue

@@ -291,6 +291,7 @@
           >
             <FSRow
               align="center-left"
+              :title="item.raw[$props.itemTitle!]"
               :wrap="false"
             >
               <FSCheckbox