@dative-gpi/foundation-shared-components 0.0.173 → 0.0.175

package/components/FSOptionGroup.vue

@@ -1,22 +1,22 @@
 <template>
   <FSWrapGroup
-    v-if="['wrap'].includes($props.variant)"
+    v-if="['wrap'].includes(props.variant)"
     class="fs-option-group"
-    :padding="$props.padding"
-    :gap="$props.gap"
+    :padding="props.padding"
+    :gap="props.gap"
     :style="style"
   >
     <template
-      v-if="$props.values.length"
+      v-if="props.values.length"
     >
       <template
         v-if="!$slots.item"
       >
         <FSOptionItem
-          v-for="(item, index) in $props.values"
+          v-for="(item, index) in props.values"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
-          :editable="$props.editable"
+          :editable="props.editable"
           :variant="getVariant(item)"
           :color="getColor(item)"
           :class="getClass(item)"
@@ -30,7 +30,7 @@
         v-else
       >
         <template
-          v-for="item in $props.values"
+          v-for="item in props.values"
         >
           <slot
             name="item"
@@ -47,21 +47,21 @@
   <FSSlideGroup
     v-else
     class="fs-option-group"
-    :padding="$props.padding"
-    :gap="$props.gap"
+    :padding="props.padding"
+    :gap="props.gap"
     :style="style"
   >
     <template
-      v-if="$props.values.length"
+      v-if="props.values.length"
     >
       <template
         v-if="!$slots.item"
       >
         <FSOptionItem
-          v-for="(item, index) in $props.values"
+          v-for="(item, index) in props.values"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
-          :editable="$props.editable"
+          :editable="props.editable"
           :variant="getVariant(item)"
           :color="getColor(item)"
           :class="getClass(item)"
@@ -75,7 +75,7 @@
         v-else
       >
         <template
-          v-for="item in $props.values"
+          v-for="item in props.values"
         >
           <slot
             name="item"
@@ -92,12 +92,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } 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 { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
+import type { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
 
 import FSOptionItem from "./FSOptionItem.vue";
 import FSSlideGroup from "./FSSlideGroup.vue";
@@ -202,14 +204,15 @@ export default defineComponent({
     const { getColors } = useColors();
 
     const lights = getColors(ColorEnum.Light);
-
+    const backgrounds = getColors(ColorEnum.Background);
     const colors = getColors(props.optionColor);
 
     const style = computed((): { [key: string] : string | null | undefined } => {
       return {
-        "--fs-option-group-border-size"  : props.border ? "1px" : "0",
-        "--fs-option-group-border-radius": sizeToVar(props.borderRadius),
-        "--fs-option-group-border-color" : lights.base
+        "--fs-option-group-background-color": backgrounds.base,
+        "--fs-option-group-border-size"     : props.border ? "1px" : "0",
+        "--fs-option-group-border-radius"   : sizeToVar(props.borderRadius),
+        "--fs-option-group-border-color"    : lights.base
       };
     });
 
@@ -289,6 +292,7 @@ export default defineComponent({
     };
 
     return {
+      props,
       style,
       getVariant,
       getColor,

package/components/FSOptionItem.vue

@@ -52,9 +52,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 

package/components/FSPagination.vue

@@ -16,9 +16,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } 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";
 

package/components/FSRadio.vue

@@ -59,10 +59,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";

package/components/FSRadioGroup.vue

@@ -29,9 +29,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSRadio from "./FSRadio.vue";
 import FSCol from "./FSCol.vue";
@@ -71,11 +73,11 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const isSelected = (item: String | Boolean | Number): boolean => {
+    const isSelected = (item: string | boolean | number): boolean => {
       return item == props.modelValue;
     };
 
-    const onToggle = (item: String | Boolean | Number): void => {
+    const onToggle = (item: string | boolean | number): void => {
       if (item != props.modelValue) {
         emit("update:modelValue", item);
       }

package/components/FSRow.vue

@@ -9,7 +9,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 

package/components/FSSlideGroup.vue

@@ -40,7 +40,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";

package/components/FSSlider.vue

@@ -64,9 +64,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";

package/components/FSSpan.vue

@@ -11,7 +11,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 

package/components/FSSwitch.vue

@@ -20,17 +20,19 @@
       />
       <slot>
         <FSSpan
-            v-if="$props.label"
-            class="fs-switch-label"
-            :style="style"
-            :font="font"
-            @click.stop="onToggle"
+          v-if="$props.label"
+          class="fs-switch-label"
+          :style="style"
+          :font="font"
+          @click.stop="onToggle"
         >
           {{ $props.label }}
         </FSSpan>
       </slot>
     </FSRow>
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="$props.description"
         class="fs-switch-description"
@@ -44,10 +46,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";

package/components/FSTab.vue

@@ -55,9 +55,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";

package/components/FSTabs.vue

@@ -22,10 +22,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSTabs",

package/components/FSTag.vue

@@ -7,7 +7,9 @@
     :wrap="false"
     v-bind="$attrs"
   >
-    <slot v-bind="{ color: $props.color, colors }">
+    <slot
+      v-bind="{ color: $props.color, colors }"
+    >
       <FSSpan
         v-if="$props.label"
         class="fs-tag-label"
@@ -15,7 +17,10 @@
         {{ $props.label }}
       </FSSpan>
     </slot>
-    <slot name="button" v-bind="{ color: $props.color, colors }">
+    <slot
+      name="button"
+      v-bind="{ color: $props.color, colors }"
+    >
       <v-btn
         v-if="$props.editable"
         class="fs-tag-button"
@@ -33,9 +38,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSIcon from "./FSIcon.vue";

package/components/FSTagGroup.vue

@@ -32,9 +32,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSWrapGroup from "./FSWrapGroup.vue";
 import FSTag from "./FSTag.vue";

package/components/FSText.vue

@@ -11,10 +11,12 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSText",

package/components/FSToggleSet.vue

@@ -94,9 +94,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { defineComponent, ref } from "vue";
 
-import { ColorBase, ColorEnum, FSToggle } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase, FSToggle } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";

package/components/FSTooltip.vue

@@ -3,11 +3,22 @@
     class="fs-tooltip"
     location="top"
   >
-    <template #activator="{ props }">
-      <slot name="activator" v-bind="props" />
+    <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-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
     </template>
   </v-tooltip>
 </template>

package/components/FSWindow.vue

@@ -27,7 +27,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, VNode } from "vue";
+import type { PropType, VNode } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";

package/components/FSWrapGroup.vue

@@ -19,7 +19,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -49,14 +49,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue"
 
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useLanguages } from "@dative-gpi/foundation-shared-services/composables";
-import { LanguageFilters } from "@dative-gpi/foundation-shared-domain/models";
+import type { LanguageFilters } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSAutocompleteField from "../fields/FSAutocompleteField.vue";
-import FSCheckbox from "../FSCheckbox.vue";
 import FSIcon from "../FSIcon.vue";
 import FSSpan from "../FSSpan.vue";
 import FSRow from "../FSRow.vue";
@@ -65,7 +65,6 @@ export default defineComponent({
   name: "FSAutocompleteLanguage",
   components: {
     FSAutocompleteField,
-    FSCheckbox,
     FSIcon,
     FSSpan,
     FSRow

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -65,9 +65,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { TimeZoneFilters, TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
+import type { TimeZoneFilters, TimeZoneInfos } from "@dative-gpi/foundation-shared-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
 import { useTimeZones } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";

package/components/buttons/FSButtonFile.vue

@@ -51,8 +51,8 @@ export default defineComponent({
     const input = ref<HTMLFormElement | null>(null);
 
     const clear = (): void => {
-      if (input.value) {
-        input.value.form && input.value.form.reset();
+      if (input.value && input.value.form) {
+        input.value.form.reset();
       }
     };
 

package/components/buttons/FSButtonFileIcon.vue

@@ -51,8 +51,8 @@ export default defineComponent({
     const input = ref<HTMLFormElement | null>(null);
 
     const clear = (): void => {
-      if (input.value) {
-        input.value.form && input.value.form.reset();
+      if (input.value && input.value.form) {
+        input.value.form.reset();
       }
     };
 

package/components/buttons/FSButtonFileLabel.vue

@@ -50,8 +50,8 @@ export default defineComponent({
     const input = ref<HTMLFormElement | null>(null);
 
     const clear = (): void => {
-      if (input.value) {
-        input.value.form && input.value.form.reset();
+      if (input.value && input.value.form) {
+        input.value.form.reset();
       }
     };
 

package/components/buttons/FSButtonFileMini.vue

@@ -55,8 +55,8 @@ export default defineComponent({
     const input = ref<HTMLFormElement | null>(null);
 
     const clear = (): void => {
-      if (input.value) {
-        input.value.form && input.value.form.reset();
+      if (input.value && input.value.form) {
+        input.value.form.reset();
       }
     };
 

package/components/deviceOrganisations/FSConnectivity.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { defineComponent, ref } from "vue";
 
-import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 
 import FSConnectivityCard from "./FSConnectivityCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -55,9 +55,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import { connectivityLabel } from "../../utils";

package/components/deviceOrganisations/FSStatus.vue

@@ -25,9 +25,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { defineComponent, ref } from "vue";
 
-import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 
 import FSStatusCard from "./FSStatusCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";

package/components/deviceOrganisations/FSStatusCard.vue

@@ -67,9 +67,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSButton from "../FSButton.vue";

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -39,9 +39,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { defineComponent, ref } from "vue";
 
-import { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -27,9 +27,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 
-import { FSDeviceAlert, FSDeviceConnectivity, FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDeviceAlert, FSDeviceConnectivity, FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
 
 import FSConnectivity from "./FSConnectivity.vue";

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -29,10 +29,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import type { PropType} from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
-import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+import type { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";