@dative-gpi/foundation-shared-components 0.0.92 → 0.0.94

package/components/FSAccordionPanel.vue

@@ -8,8 +8,12 @@
     :style="style"
     v-bind="$attrs"
   >
-    <template #title>
-      <slot name="title">
+    <template
+      #title
+    >
+      <slot
+        name="title"
+      >
         <FSRow>
           <FSIcon
             v-if="$props.prependIcon"
@@ -24,8 +28,12 @@
         </FSRow>
       </slot>
     </template>
-    <template #text>
-      <slot name="content">
+    <template
+      #text
+    >
+      <slot
+        name="content"
+      >
         <FSText
           :lineClamp="$props.lineClampContent"
         >

package/components/FSDialog.vue

@@ -1,7 +1,8 @@
 <template>
   <v-dialog
     transition="dialog-bottom-transition"
-    :width="width"
+    class="fs-dialog"
+    :style="style"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -127,18 +128,22 @@ export default defineComponent({
       return classNames;
     });
 
-    const width = computed((): string => {
+    const style = computed((): { [key: string] : string | undefined } => {
       if (isExtraSmall.value) {
-        return "100%";
+        return {
+          "--fs-dialog-width": "100%"
+        };
       }
-      return sizeToVar(props.width);
+      return {
+        "--fs-dialog-width": sizeToVar(props.width)
+      };
     });
 
     return {
       isExtraSmall,
       ColorEnum,
       classes,
-      width
+      style
     };
   }
 });

package/components/buttons/FSButtonCheckbox.vue

@@ -0,0 +1,72 @@
+<template>
+  <FSButton
+    :editable="$props.editable"
+    :prependIcon="prependIcon"
+    :load="$props.load"
+    :variant="variant"
+    @click.stop="onClick"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSButton>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCheckbox",
+  components: {
+    FSButton
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const prependIcon = computed((): string => {
+      return props.modelValue ? "mdi-checkbox-marked" : "mdi-checkbox-blank-outline";
+    });
+
+    const variant = computed((): "full" | "standard" => {
+      return props.modelValue ? "full" : "standard";
+    });
+
+    const onClick = (): void => {
+      if (props.editable && !props.load) {
+        emit("update:modelValue", !props.modelValue);
+      }
+    };
+
+    return {
+      prependIcon,
+      variant,
+      onClick
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -28,7 +28,7 @@
           <FSChip
             :prependIcon="$props.deviceConnectivity.icon"
             :color="$props.deviceConnectivity.color"
-            :label="connectivityLabel"
+            :label="connectivityLabel($props.deviceConnectivity.status)"
           />
           <FSRow
             width="hug"
@@ -57,10 +57,10 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 import { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+
+import { connectivityLabel } from "../../utils";
 
 import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
@@ -90,16 +90,6 @@ export default defineComponent({
   emit: ["close"],
   setup(props) {
     const { epochToLongTimeFormat } = useAppTimeZone();
-    const { $tr } = useTranslationsProvider();
-
-    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) {
@@ -109,8 +99,8 @@ export default defineComponent({
     });
 
     return {
-      connectivityLabel,
-      deviceTimestamp
+      deviceTimestamp,
+      connectivityLabel
     };
   }
 });

package/components/lists/FSDataTableUI.vue

@@ -303,7 +303,7 @@
           </slot>
         </template>
         <template
-          v-for="(item, index) in itemsSlots"
+          v-for="item in itemsSlots"
           #[item.slotName]="props"
         >
           <div
@@ -315,7 +315,6 @@
             >
               <FSRow
                 align="center-left"
-                :key="index"
               >
                 <FSSpan
                   font="text-overline"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.92",
+  "version": "0.0.94",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.92",
-    "@dative-gpi/foundation-shared-services": "0.0.92",
+    "@dative-gpi/foundation-shared-domain": "0.0.94",
+    "@dative-gpi/foundation-shared-services": "0.0.94",
     "@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": "9c937d9f684b22f0230cd801b4f6bbe7adac8176"
+  "gitHead": "32dca3eabc60908f1b2b7af0a77865153adfb199"
 }

package/styles/components/fs_dialog.scss

@@ -11,17 +11,17 @@
 }
 
 .v-overlay__content:has(.fs-dialog) {
-    width: fit-content !important;
+    width: var(--fs-dialog-width) !important;
     max-height: 90vh !important;
     min-width: 35vw !important;
 }
 
 .fs-dialog {
-    width: fit-content !important;
+    width: var(--fs-dialog-width) !important;
     max-height: 90vh !important;
     min-width: 35vw !important;
+}
 
-    &.fs-dialog-mobile {
-        width: 100vw !important;
-    }
+.fs-dialog-mobile {
+    width: 100vw !important;
 }

package/utils/css.ts

@@ -52,4 +52,4 @@ export const varToSize = (value: string[] | number[] | string | number | null):
     }
     const parsed = parseInt(value.replace(/[^0-9.]/g, ''));
     return isNaN(parsed) ? 0 : parsed;
-}
+};

package/utils/index.ts

@@ -5,4 +5,5 @@ export * from "./error";
 export * from "./levenshtein";
 export * from "./lexical";
 export * from "./sort";
+export * from "./statuses";
 export * from "./time";

package/utils/levenshtein.ts

@@ -9,7 +9,7 @@ export const levenshteinDistance = (a: string, b: string) => {
     }
 
     if (a.length > b.length) {
-      let tmp = a;
+      const tmp = a;
       a = b;
       b = tmp;
     }
@@ -49,14 +49,14 @@ export const levenshteinDistance = (a: string, b: string) => {
     let bx2: number;
     let bx3: number;
 
-    let vector: number[] = [];
+    const vector: number[] = [];
 
     for (y = 0; y < la; y++) {
       vector.push(y + 1);
       vector.push(a.charCodeAt(offset + y));
     }
 
-    let len = vector.length - 1;
+    const len = vector.length - 1;
 
     for (; x < lb - 3;) {
       bx0 = b.charCodeAt(offset + (d0 = x));

package/utils/statuses.ts

@@ -0,0 +1,13 @@
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+
+const { $tr } = useTranslationsProvider();
+
+export const connectivityLabel = ((status: ConnectivityStatus): string => {
+    switch (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");
+    }
+});