@dative-gpi/foundation-shared-components 0.0.8 → 0.0.10

package/utils/index.ts

@@ -1 +1,5 @@
-export * from "./FSRichTextField";
+export * from "./css";
+export * from "./icons";
+export * from "./levenshtein";
+export * from "./lexical";
+export * from "./sort";

package/utils/levenshtein.ts

@@ -0,0 +1,97 @@
+
+const InnerMin = (d0: number, d1: number, d2: number, bx: number, ay: number) => {
+    return d0 < d1 || d2 < d1 ? d0 > d2 ? d2 + 1 : d0 + 1 : bx === ay ? d1 : d1 + 1;
+};
+
+export const levenshteinDistance = (a: string, b: string) => {
+    if (a === b) {
+      return 0;
+    }
+
+    if (a.length > b.length) {
+      let tmp = a;
+      a = b;
+      b = tmp;
+    }
+
+    let la = a.length;
+    let lb = b.length;
+
+    while (la > 0 && (a.charCodeAt(la - 1) === b.charCodeAt(lb - 1))) {
+      la--;
+      lb--;
+    }
+
+    let offset = 0;
+
+    while (offset < la && (a.charCodeAt(offset) === b.charCodeAt(offset))) {
+      offset++;
+    }
+
+    la -= offset;
+    lb -= offset;
+
+    if (la === 0 || lb < 3) {
+      return lb;
+    }
+
+    let dd = 0;
+    let x = 0;
+    let y: number;
+    let d0: number;
+    let d1: number;
+    let d2: number;
+    let d3: number;
+    let dy: number;
+    let ay: number;
+    let bx0: number;
+    let bx1: number;
+    let bx2: number;
+    let bx3: number;
+
+    let vector: number[] = [];
+
+    for (y = 0; y < la; y++) {
+      vector.push(y + 1);
+      vector.push(a.charCodeAt(offset + y));
+    }
+
+    let len = vector.length - 1;
+
+    for (; x < lb - 3;) {
+      bx0 = b.charCodeAt(offset + (d0 = x));
+      bx1 = b.charCodeAt(offset + (d1 = x + 1));
+      bx2 = b.charCodeAt(offset + (d2 = x + 2));
+      bx3 = b.charCodeAt(offset + (d3 = x + 3));
+      dd = (x += 4);
+      for (y = 0; y < len; y += 2) {
+        dy = vector[y];
+        ay = vector[y + 1];
+        d0 = InnerMin(dy, d0, d1, bx0, ay);
+        d1 = InnerMin(d0, d1, d2, bx1, ay);
+        d2 = InnerMin(d1, d2, d3, bx2, ay);
+        dd = InnerMin(d2, d3, dd, bx3, ay);
+        vector[y] = dd;
+        d3 = d2;
+        d2 = d1;
+        d1 = d0;
+        d0 = dy;
+      }
+    }
+
+    for (; x < lb;) {
+      bx0 = b.charCodeAt(offset + (d0 = x));
+      dd = ++x;
+      for (y = 0; y < len; y += 2) {
+        dy = vector[y];
+        vector[y] = dd = InnerMin(dy, d0, dd, bx0, vector[y + 1]);
+        d0 = dy;
+      }
+    }
+
+    return dd;
+};
+
+export const sortByLevenshteinDistance = (a: string, b: string, ref: string) => {
+  return levenshteinDistance(a, ref) - levenshteinDistance(b, ref);
+};

package/utils/sort.ts

@@ -0,0 +1,9 @@
+export const alphanumericSort = (a: any, b: any) => {
+    if (typeof(a) !== 'string') {
+        a = JSON.stringify(a);
+    }
+    if (typeof(b) !== 'string') {
+        b = JSON.stringify(b);
+    }
+    return a.localeCompare(b, undefined, { numeric: true });
+}

package/components/FSDatePicker.vue

@@ -1,226 +0,0 @@
-<template>
-  <v-menu :closeOnContentClick="false">
-    <template #activator="{ props }">
-      <FSTextField
-        class="fs-date-picker"
-        :label="$props.label"
-        :description="$props.description"
-        :color="$props.color"
-        :required="$props.required"
-        :editable="$props.editable"
-        :error="messages.length > 0"
-        :readonly="true"
-      >
-        <template #label>
-          <slot name="label">
-            <FSRow :wrap="false">
-              <FSSpan
-                v-if="$props.label"
-                class="fs-date-picker-label"
-                font="text-overline"
-                :style="style"
-              >
-                {{ $props.label }}
-              </FSSpan>
-              <FSSpan
-                v-if="$props.label && $props.required"
-                class="fs-date-picker-label"
-                style="margin-left: -8px;"
-                font="text-overline"
-                :ellipsis="false"
-                :style="style"
-              >
-                *
-              </FSSpan>
-              <v-spacer style="min-width: 40px;" />
-              <FSSpan
-                v-if="messages.length > 0"
-                class="fs-date-picker-messages"
-                font="text-overline"
-                :style="style"
-              >
-                {{ messages.join(", ") }}
-              </FSSpan>
-            </FSRow>
-          </slot>
-        </template>
-        <template #prepend-inner>
-          <slot name="prepend-inner">
-            <FSIcon :color="prependColor">
-              {{ $props.prependIcon }}
-            </FSIcon>
-          </slot>
-        </template>
-        <template #append>
-          <slot name="append">
-            <FSButton
-              :prependIcon="$props.buttonPrependIcon"
-              :label="$props.buttonLabel"
-              :appendIcon="$props.buttonAppendIcon"
-              :variant="$props.buttonVariant"
-              :color="$props.buttonColor"
-              :editable="$props.editable"
-              v-bind="props"
-            />
-          </slot>
-        </template>
-        <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-          <slot :name="name" v-bind="slotData" />
-        </template>
-      </FSTextField>
-    </template>
-    <FSCol>
-      <FSCalendar
-        label="test"
-        :color="$props.color"
-        :buttonColor="$props.buttonColor"
-        :modelValue="$props.modelValue"
-        @update:modelValue="(value) => $emit('update:modelValue', value)"
-      />
-      <FSClock
-        :color="$props.color"
-        :buttonColor="$props.buttonColor"
-        :modelValue="$props.modelValue"
-        @update:modelValue="(value) => $emit('update:modelValue', value)"
-      />
-    </FSCol>
-  </v-menu>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
-
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
-
-import FSTextField from "./FSTextField.vue";
-import FSCalendar from "./FSCalendarTwin.vue";
-import FSButton from "./FSButton.vue";
-import FSClock from "./FSClock.vue";
-import FSIcon from "./FSIcon.vue";
-import FSCol from "./FSCol.vue";
-
-export default defineComponent({
-  name: "FSDatePicker",
-  components: {
-    FSTextField,
-    FSCalendar,
-    FSButton,
-    FSClock,
-    FSIcon,
-    FSCol
-  },
-  props: {
-    label: {
-      type: String,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String,
-      required: false,
-      default: null
-    },
-    prependIcon: {
-      type: String,
-      required: false,
-      default: "mdi-calendar"
-    },
-    buttonPrependIcon: {
-      type: String,
-      required: false,
-      default: "mdi-pencil"
-    },
-    buttonLabel: {
-      type: String,
-      required: false,
-      default: null
-    },
-    buttonAppendIcon: {
-      type: String,
-      required: false,
-      default: null
-    },
-    buttonVariant: {
-      type: String as PropType<"standard" | "full" | "icon">,
-      required: false,
-      default: "standard"
-    },
-    modelValue: {
-      type: Array as PropType<Array<number>>,
-      required: false,
-      default: null
-    },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorBase.Dark
-    },
-    buttonColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorBase.Primary
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    rules: {
-      type: Array as PropType<Function[]>,
-      required: false,
-      default: () => []
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  setup(props) {
-    const { color, rules, editable } = toRefs(props);
-
-    const colors = useColors().getColors(color.value);
-
-    const backgrounds = useColors().getColors(ColorBase.Background);
-    const lights = useColors().getColors(ColorBase.Light);
-    const darks = useColors().getColors(ColorBase.Dark);
-
-    const prependColor = computed((): string => {
-      if (!editable.value) {
-        return lights.dark;
-      }
-      return darks.base;
-    });
-
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-      if (!editable.value) {
-        return {};
-      }
-      return {
-        "--fs-date-picker-background-color"       : backgrounds.base,
-        "--fs-date-picker-border-color"           : colors.base,
-        "--fs-date-picker-color"                  : darks.base,
-        "--fs-date-picker-active-color"           : lights.base,
-      };
-    });
-
-    const messages = computed((): string[] => {
-      const messages = [];
-      for (const rule of rules.value) {
-        const message = rule(props.modelValue ?? "");
-        if (typeof(message) === "string") {
-          messages.push(message);
-        }
-      }
-      return messages;
-    });
-
-    return {
-      prependColor,
-      style,
-      messages
-    };
-  }
-});
-</script>

package/composables/useDates.ts

@@ -1,39 +0,0 @@
-import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
-
-export const useDates = () => {
-    const { getMachineOffset, getMachineOffsetMillis, getUserOffset, getUserOffsetMillis } = useTimeZone();
-
-    const pickerToEpoch = (value: Date[]): number[] => {
-        // FSCalendar is always in machine time zone, so we need to convert it to user time zone
-        return value.slice()
-            .map(date => date.getTime() + getMachineOffsetMillis() - getUserOffsetMillis())
-            .sort();
-    };
-
-    const epochToPicker = (value: number[]): Date[] => {
-        // Epoch is always without time zone, so we need to convert it to user time zone
-        return value.slice()
-            .sort((a, b) => b - a)
-            .map(epoch => {
-                const date = new Date(0);
-                date.setUTCMilliseconds(epoch - getMachineOffsetMillis() + getUserOffsetMillis());
-                return date;
-        });
-    };
-
-    const epochToPickerHeader = (value: number): { d: number, m: number, y: number } => {
-        const date = new Date(0);
-        date.setUTCMilliseconds(value - getMachineOffsetMillis() + getUserOffsetMillis());
-        return { d: date.getDate(), m: date.getMonth(), y: date.getFullYear() };
-    };
-
-    return {
-        getUserOffset,
-        getUserOffsetMillis,
-        getMachineOffset,
-        getMachineOffsetMillis,
-        pickerToEpoch,
-        epochToPicker,
-        epochToPickerHeader
-    };
-}

package/models/FSTags.ts

@@ -1,8 +0,0 @@
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
-
-export interface FSTagItem {
-    label: string,
-    variant: "standard" | "full",
-    color: ColorBase,
-    editable: boolean
-}

package/models/FSTextFields.ts

@@ -1,23 +0,0 @@
-export const TextRules = {
-    required: (message: string) => (value: string) => !!value || (message ?? "Required"),
-    min: (length: number, message: string) => (value: string) => value.length >= length || (message ?? `Must be at least ${length} characters`),
-    max: (length: number, message: string) => (value: string) => value.length <= length || (message ?? `Must be at most ${length} characters`),
-    email: (message: string) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? "Must be a valid email"),
-    digit: (message: string) => (value: string) => /(?=.*\d)/.test(value) || (message ?? "Must contain a digit"),
-    uppercase: (message: string) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? "Must contain an uppercase letter"),
-    lowercase: (message: string) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? "Must contain a lowercase letter"),
-    special: (message: string) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? "Must contain a special character")
-};
-
-export const TagRules = {
-    required: (message: string) => (value: string[]) => value.length > 0 || (message ?? "Required"),
-    min: (min: number, message: string) => (value: string[]) => value.length >= min || (message ?? `Must contain at least ${min} elements`),
-    max: (max: number, message: string) => (value: string[]) => value.length <= max || (message ?? `Must contain at most ${max} elements`)
-};
-
-export const NumberRules = {
-    required: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? "Required"),
-    min: (min: number, message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? `Must be at least ${min}`),
-    max: (max: number, message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? `Must be at most ${max}`),
-    integer: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? "Must be an integer")
-};