@dative-gpi/foundation-shared-components 1.0.131-kiosk-2 → 1.0.132

package/styles/components/fs_tag.scss

@@ -13,17 +13,19 @@
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
 
-    &:hover {
-        background-color: var(--fs-tag-hover-background-color) !important;
-        color: var(--fs-tag-hover-color) !important;
-    }
+    min-width: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 
     &:active {
         background-color: var(--fs-tag-active-background-color) !important;
         color: var(--fs-tag-active-color) !important;
     }
 
-    min-width: 20px !important;
-    width: 20px !important;
-    height: 20px !important;
+    @include clickscreen {
+        &:hover {
+            background-color: var(--fs-tag-hover-background-color) !important;
+            color: var(--fs-tag-hover-color) !important;
+        }
+    }
 }

package/styles/globals/overrides.scss

@@ -137,11 +137,16 @@
     }
 }
 
-// Ellipsis on input of all fields
 input {
+    // Ellipsis on all fields
     text-overflow: ellipsis;
 }
 
+input, select, textarea {
+    // No zoom on focus for user of a certain version of Chrome, and who ask their mobile to zoom if font-size < 16px
+    touch-action: none;
+}
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -187,9 +192,11 @@ $nthOverlay: 25;
 }
 
 // Change color on arrows when hovered
-.v-slide-group__prev:hover,
-.v-slide-group__next:hover {
-    color: var(--fs-group-hover-color);
+@include clickscreen {
+    .v-slide-group__prev:hover,
+    .v-slide-group__next:hover {
+        color: var(--fs-group-hover-color);
+    }
 }
 
 /***************************************************************************/

package/styles/globals/scrollbars.scss

@@ -47,9 +47,19 @@
 @include touchscreen {
   .fs-hide-x-scrollbar {
     overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
   }
 }

package/utils/index.ts

@@ -8,6 +8,7 @@ export * from "./icons";
 export * from "./leafletMarkers"
 export * from "./levenshtein";
 export * from "./lexical";
+export * from "./operations";
 export * from "./sort";
 export * from "./statuses";
 export * from "./time";

package/utils/operations.ts

@@ -0,0 +1,69 @@
+const MinusOperator = "-";
+
+// Matches one of the three operators (+, *, /) or the - operator if it is preceded by something that is not another operator
+const operatorsRegex = new RegExp(/[\+\*\/]|(?<=.)(?<![-\+\*\/])[-]/gm);
+
+// Matches a nested block of parenthesis
+const parenthesisRegex = new RegExp(/\([^)(]+\)/gm);
+
+// Match a positive decimal number
+const decimalRegex = new RegExp(/^\d+(.\d+)?$/gm);
+
+const validateBlock = (block: string, operands: string[] = [], variables: string[] = []) => {
+  // Remove parenthesis from the block
+  block = block.replaceAll("(", "").replaceAll(")", "");
+
+  // Split block on operators (Leave negative signs)
+  const components = block.split(operatorsRegex);
+
+  // Check if each bit is a valid operand
+  for (let i = 0; i < components.length; i++) {
+    // Remove negative sign
+    if (components[i].startsWith(MinusOperator)) {
+        components[i] = components[i].substring(1);
+    }
+    if (!operands.includes(components[i]) && !variables.includes(components[i]) && !components[i].match(decimalRegex)) {
+        return false;
+    }
+  }
+  return true;
+}
+
+export const validateOperation = (rawOperation: string, operands: string[] = [], variables: string[] = []) => {
+  // Remove spaces
+  let operation = rawOperation.replaceAll(" ", "");
+
+  // Check parenthesis
+  const parenthesis: number[] = [];
+
+  for (let i = 0; i < operation.length; i++) {
+    if (operation[i] == '(') {
+      parenthesis.push(i);
+    }
+    else if (operation[i] == ')') {
+      if (parenthesis.length > 0) {
+        if (i == parenthesis.pop()! + 1) {
+          return false;
+        }
+      }
+      else {
+        return false;
+      }
+    }
+  }
+  if (parenthesis.length > 0) {
+    return false;
+  }
+
+  // Check each block between parenthesis
+  let match = operation.match(parenthesisRegex);
+
+  while (match?.[0]) {
+    if (!validateBlock(match[0], operands, variables)) {
+      return false;
+    }
+    operation = operation.replace(match[0], "1");
+    match = operation.match(parenthesisRegex);
+  }
+  return validateBlock(operation, operands, variables);
+}

package/components/buttons/FSButtonPrint.vue

@@ -1,188 +0,0 @@
-<template>
-  <FSButton
-    prependIcon="mdi-printer-outline"
-    :label="$tr('ui.common.print', 'Print')"
-    :color="ColorEnum.Light"
-    v-bind="$attrs"
-    @click="buildPreview()"
-  />
-  <FSDialog
-    v-model="dialog"
-    :title="$tr('ui.common.print', 'Print')"
-    :width="800"
-  >
-    <template
-      #body
-    >
-      <FSLoader
-        v-if="loading"
-        width="100%"
-        height="400px"
-      />
-      <FSCol
-        v-show="!loading"
-        width="100%"
-        height="400px"
-      >
-        <FSText
-          :style="{ minHeight: '16px' }"
-          font="text-overline"
-        >
-          {{$tr('ui.print.preview', 'Preview')}}
-        </FSText>
-        <div
-          :style="{ width: '100%', overflow: 'scroll' }"
-        >
-          <FSCard
-            id="canvas-container"
-            :padding="margin"
-          >
-          </FSCard>
-        </div>
-        <FSRow
-          align="center-center"
-        >
-          <FSButton
-            :prependIcon="'mdi-printer-outline'"
-            :label="$tr('ui.common.print', 'Print')"
-            :color="ColorEnum.Primary"
-            @click="printCanvas()"
-          />
-          <FSButton
-            :prependIcon="'mdi-download'"
-            :label="$tr('ui.print.download-image', 'Download image')"
-            :color="ColorEnum.Primary"
-            @click="downloadCanvasImage()"
-          />
-        </FSRow>
-      </FSCol>
-    </template>
-  </FSDialog>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from "vue";
-
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import html2canvas from 'html2canvas';
-
-import FSButton from "../FSButton.vue";
-import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
-import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
-import FSDialog from '@dative-gpi/foundation-shared-components/components/FSDialog.vue';
-import FSLoader from '@dative-gpi/foundation-shared-components/components/FSLoader.vue';
-
-export default defineComponent({
-  name: "FSButtonPrint",
-  components: {
-    FSButton,
-    FSDialog,
-    FSLoader,
-    FSText,
-    FSCard
-  },
-  props: {
-    elementToPrint: {
-      type: Object as () => HTMLElement | null,
-      default: null
-    },
-    disableInputs: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup(props) {
-    const margin = 16;
-
-    const dialog = ref(false);
-    const loading = ref(false);
-    // Set A4 size
-    const windowWidth = computed(() => {
-      return Math.round((297 / 25.4) * 96);
-    });
-
-    const ignoreElements = (element: Element) => {
-      if (props.disableInputs) {
-        return element.classList.contains("v-input");
-      }
-      return false;
-    }
-
-    const buildPreview = async () => {
-      loading.value = true;
-      const elementToPrint = props.elementToPrint || document.body;
-
-      const fullCanvas = await html2canvas(elementToPrint, {
-        backgroundColor: null,
-        windowWidth: windowWidth.value,
-        ignoreElements: ignoreElements
-      });
-
-      dialog.value = true;
-
-      setTimeout(() => {
-        setCanvas(fullCanvas);
-      }, 100);
-    };
-
-    const setCanvas = async (canvas: HTMLCanvasElement, count = 0) => {
-      const canvasContainer = document.getElementById("canvas-container");
-      if (!canvasContainer) {
-        if(count > 10) {
-          return;
-        }
-        return setCanvas(canvas, count++);
-      }
-      canvasContainer.innerHTML = "";
-      canvasContainer.appendChild(canvas);
-      loading.value = false;
-    };
-
-    const printCanvas = () => {
-      const canvas = document.getElementById("canvas-container")?.querySelector("canvas");
-
-      if (!canvas) {
-        return;
-      }
-
-      const dataUrl = canvas.toDataURL("image/png");
-      const windowContent = `<img width="100%" src="${dataUrl}" />`;
-      const printWindow = window.open("", "_blank", "width=600,height=600");
-      printWindow?.document.open();
-      printWindow?.document.write(windowContent);
-      printWindow?.document.close();
-      
-      printWindow?.addEventListener("load", () => {
-        printWindow?.focus();
-        printWindow?.print();
-        printWindow?.close();
-      });
-    }
-
-    const downloadCanvasImage = () => {
-      const canvas = document.getElementById("canvas-container")?.querySelector("canvas");
-
-      if (!canvas) {
-        return;
-      }
-
-      const dataUrl = canvas.toDataURL("image/png");
-      const a = document.createElement("a");
-      a.href = dataUrl;
-      a.download = "image.png";
-      a.click();
-    }
-
-    return {
-      printCanvas,
-      buildPreview,
-      downloadCanvasImage,
-      dialog,
-      margin,
-      loading,
-      ColorEnum
-    }
-  }
-});
-</script>