@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/composables/useAutocomplete.ts

@@ -1,4 +1,5 @@
-import { computed, onMounted, ref, Ref, watch } from "vue";
+import type { Ref} from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import _ from "lodash";
 
 import { useDebounce } from "./useDebounce";
@@ -60,11 +61,11 @@ export const useAutocomplete = <TInfos>(
     }
   });
   
-  watch(entities, () => {
+  watch(() => entities.value, () => {
     if (init.value) {
       init.value = false;
-      entitiesLength.value = entities.value.length;
     }
+    entitiesLength.value = entities.value.length;
   });
 
   onMounted((): void => {

package/composables/useColors.ts

@@ -2,7 +2,8 @@ import { useTheme } from "vuetify";
 
 import Color from "color";
 
-import { ColorBase, ColorEnum, ColorVariations } from "@dative-gpi/foundation-shared-components/models";
+import type { ColorBase, ColorVariations } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export const useColors = () => {
     const theme = useTheme().current.value;
@@ -34,10 +35,6 @@ export const useColors = () => {
         return base.value(Math.min(base.value() + 10, 100));
     };
 
-    const getBase = (base: Color): Color => {
-        return base;
-    };
-
     const getDark = (base: Color): Color => {
         return base.value(Math.max(base.value() - 15, 0));
     };
@@ -54,7 +51,7 @@ export const useColors = () => {
         }
 
         if(color.darken(0.15).isLight()){
-            return color.darken(0.6);
+            return color.darken(0.8);
         }
         return color.lighten(color.value() / 50);
     }
@@ -62,33 +59,19 @@ export const useColors = () => {
     const getColors = (color: ColorBase): ColorVariations => {
         const themed = (Object as any).values(ColorEnum).includes(color);
 
-        const seed = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
+        const base = themed ? new Color(theme.colors[color as ColorEnum]) : new Color(color);
 
-        const base = getBase(seed);
         const light = getLight(base);
         const soft = getSoft(base);
         const dark = getDark(base);
 
-        if (color === ColorEnum.Background) {
-            return {
-                get light(): string { throw new Error("Don't use it !") },
-                get lightContrast(): string { throw new Error("Don't use it !") },
-                get soft(): string { throw new Error("Don't use it !") },
-                get softContrast(): string { throw new Error("Don't use it !") },
-                base: base.hex(),
-                get baseContrast(): string { throw new Error("Don't use it !") },
-                get dark(): string { throw new Error("Don't use it !") },
-                get darkContrast(): string { throw new Error("Don't use it !") }
-            };
-        }
-
         return {
             light: light.hex(),
             lightContrast: getContrast(light).hex(),
             soft: soft.hex(),
             softContrast: getContrast(soft).hex(),
-            base: seed.hex(),
-            baseContrast: getContrast(seed).hex(),
+            base: base.hex(),
+            baseContrast: getContrast(base).hex(),
             dark: dark.hex(),
             darkContrast: getContrast(dark).hex()
         };
@@ -112,7 +95,7 @@ export const useColors = () => {
         const columnCount = 8
         const colors: string[][] = [];
         for (let saturation = baseMinSaturation; saturation <= 100; saturation += (100 - baseMinSaturation) / (columnCount - 1)) {
-            let colorsRow = [];
+            const colorsRow = [];
             for (let hue = 0; hue < 360; hue += 15) {
                 const color = new Color({ h: hue, s: saturation, v: baseFixedBrightness });
                 colorsRow.push(color.hex());
@@ -134,4 +117,4 @@ export const useColors = () => {
         getGradients,
         getBasePaletteColors
     };
-}
+}

package/composables/useDebounce.ts

@@ -1,4 +1,5 @@
-import { ref, Ref } from "vue";
+import type { Ref } from "vue";
+import { ref } from "vue";
 
 export const useDebounce = () => {
   const timeOutId: Ref<any> = ref(null);

package/composables/useMagicFieldProvider.ts

@@ -0,0 +1,22 @@
+import { defineAsyncComponent } from "vue";
+
+import { MagicFieldType } from "../models/magicFields";
+
+const FIELDS = {
+  [MagicFieldType.NumberField]  : defineAsyncComponent(() => import("../components/fields/FSNumberField.vue")),
+  [MagicFieldType.TextField]    : defineAsyncComponent(() => import("../components/fields/FSTextField.vue")),
+  [MagicFieldType.Switch]       : defineAsyncComponent(() => import("../components/FSSwitch.vue")),
+  [MagicFieldType.DateTimeField]: defineAsyncComponent(() => import("../components/fields/FSDateTimeField.vue")),
+  [MagicFieldType.IconField]    : defineAsyncComponent(() => import("../components/fields/FSIconField.vue")),
+  [MagicFieldType.TimeField]    : defineAsyncComponent(() => import("../components/fields/FSTimeField.vue")),
+};
+
+export const useMagicFieldProvider = () => {
+  const get = (code: keyof typeof FIELDS) => {
+    return FIELDS[code];
+  };
+
+  return {
+    get
+  };
+};

package/composables/useRules.ts

@@ -1,15 +1,13 @@
-import { Ref, computed, inject, ref } from "vue";
+import type { Ref} from "vue";
+import { computed, inject, ref } from "vue";
 
 export const useRules = () => {
-  const innerValidateOn = inject<Ref<"submit" | "blur" | "input">>("validateOn", ref('input'));
+  const innerValidateOn = inject<Ref<"submit" | "input">>("validateOn", ref('input'));
   const submitted = inject<Ref<boolean>>("submitted", ref(false));
 
-  const blurred = ref(false);
-
-  const validateOn = computed((): "input" | "submit" | "blur" => {
+  const validateOn = computed((): "input" | "submit" => {
     switch (innerValidateOn.value) {
       case "submit": return submitted.value ? "input" : "submit";
-      case "blur":   return blurred.value ? "input" : "blur";
       case "input":  return "input";
     }
   });
@@ -24,11 +22,6 @@ export const useRules = () => {
           return [];
         }
         break;
-      case "blur":
-        if (!blurred.value) {
-          return [];
-        }
-        break;
       case "input":
         break;
     }
@@ -69,7 +62,6 @@ export const useRules = () => {
 
   return {
     validateOn,
-    blurred,
     getMessages
   };
 }

package/composables/useSlots.ts

@@ -1,31 +1,51 @@
-import { Slot, useSlots as useVueSlots } from "vue"
+import { type Slot, useSlots as useVueSlots } from "vue"
 
 export const useSlots = () => {
-    const getChildren = (name: string | undefined = undefined): any => {
-        const innerSlots = { ...useVueSlots() };
-        const innerName = name ?? "default";
-        if (innerSlots[innerName] != null) {
-            const slot = innerSlots[innerName]!;
-            switch (typeof(slot()[0].type)) {
-                // Directive wrapper (v-for, v-if)
-                case "symbol":
-                    switch (slot()[0].type) {
-                        case Symbol.for("v-fgt"): return slot()[0].children;
-                        case Symbol.for("v-cmt"): return slot();
-                        default:                  return slot();
-                    }
-                // Custom component
-                case "object": return slot();
-                // Pre-existing component
-                case "string": return slot();
-            }
-            return slot();
+  const getChildren = (name: string | undefined = undefined): any => {
+    const innerSlots = { ...useVueSlots() };
+    const innerName = name ?? "default";
+    if (innerSlots[innerName] != null) {
+      const slot = innerSlots[innerName]!;
+      switch (typeof(slot()[0].type)) {
+        // Directive wrapper (v-for, v-if)
+        case "symbol":
+          switch (slot()[0].type) {
+            case Symbol.for("v-fgt"): return recursiveGetChildren(slot()[0].children);
+            case Symbol.for("v-cmt"): return slot();
+            default:                  return slot();
+          }
+        // Custom component
+        case "object": return slot();
+        // Pre-existing component
+        case "string": return slot();
+      }
+      return slot();
+    }
+    return null;
+  };
+
+  const recursiveGetChildren = (element: any): any => {
+    if (element == null) {
+      return null;
+    }
+    switch (typeof(element[0].type)) {
+      // Directive wrapper (v-for, v-if)
+      case "symbol":
+        switch (element[0].type) {
+          case Symbol.for("v-fgt"): return recursiveGetChildren(element[0].children);
+          case Symbol.for("v-cmt"): return element;
+          default:                  return element;
         }
-        return null;
-    };
+      // Custom component
+      case "object": return element;
+      // Pre-existing component
+      case "string": return element;
+    }
+    return element;
+  };
 
-    return {
-        slots: { ...useVueSlots() } as { [label: string]: Slot<any> },
-        getChildren
-    };
+  return {
+    slots: { ...useVueSlots() } as { [label: string]: Slot<any> },
+    getChildren
+  };
 }

package/composables/useTables.ts

@@ -0,0 +1,29 @@
+import { ref } from "vue";
+
+import { Single } from "@dative-gpi/foundation-shared-domain/tools/single";
+
+import type { FSDataTable } from "../models";
+
+const tables = ref<{ [key: string]: FSDataTable }>({});
+
+const single = new Single();
+
+export const useTables = () => {
+  return single.call(() => {
+    const getTable = (tableCode: string): FSDataTable | null => {
+      if (tables.value[tableCode] != null) {
+        return tables.value[tableCode];
+      }
+      return null;
+    };
+
+    const setTable = (tableCode: string, value: FSDataTable) => {
+      tables.value[tableCode] = { ...value };
+    };
+
+    return {
+      getTable,
+      setTable
+    };
+  });
+};

package/composables/useTreeView.ts

@@ -0,0 +1,48 @@
+import type { Ref} from "vue";
+import { onMounted, watch } from "vue";
+import _ from "lodash";
+
+import { useDebounce } from "./useDebounce";
+
+export const useTreeView = <TInfos>(
+  entities: Ref<TInfos[]>,
+  filters: (() => any)[],
+  emit: (event: "update:modelValue", value: string[] | string | null) => void,
+  customFetch: () => Promise<any>,
+  customUpdate: ((item: TInfos[] | TInfos | null) => void) | null = null,
+  toId: (item: TInfos) => string | null = (item: TInfos) => (item as any).id,
+  debounceInterval: number = 1000
+) => {
+  const { debounce } = useDebounce();
+
+  const debouncedFetch = () => debounce(customFetch, debounceInterval);
+
+  const onUpdate = (value: string[] | string | null) => {
+    if (customUpdate) {
+      if (Array.isArray(value)) {
+        const items = value.map(v => entities.value.find(e => toId(e) === v) || null).filter(e => e !== null) as TInfos[];
+        customUpdate(items);
+      }
+      else {
+        customUpdate((value && entities.value.find(e => toId(e) === value)) || null);
+      }
+    }
+    else {
+      emit("update:modelValue", value);
+    }
+  };
+
+  watch(filters, (newValue, oldValue) => {
+    if (!_.isEqual(newValue, oldValue)) {
+      debouncedFetch();
+    }
+  });
+
+  onMounted((): void => {
+    customFetch();
+  });
+
+  return {
+    onUpdate
+  };
+}

package/elements/FSFormElement.ts

@@ -1,4 +1,5 @@
-import { defineCustomElement, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineCustomElement } from "vue";
 
 export default defineCustomElement({
   name: "FSFormElement",

package/icons/flags/France.vue

@@ -1,9 +1,25 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-fr" viewBox="0 0 640 480">
-    <g fill-rule="evenodd" stroke-width="1pt">
-      <path fill="#fff" d="M0 0h640v480H0z"/>
-      <path fill="#00267f" d="M0 0h213.3v480H0z"/>
-      <path fill="#f31830" d="M426.7 0H640v480H426.7z"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    id="flag-icons-fr"
+    viewBox="0 0 640 480"
+  >
+    <g
+      fill-rule="evenodd"
+      stroke-width="1pt"
+    >
+      <path
+        fill="#fff"
+        d="M0 0h640v480H0z"
+      />
+      <path
+        fill="#00267f"
+        d="M0 0h213.3v480H0z"
+      />
+      <path
+        fill="#f31830"
+        d="M426.7 0H640v480H426.7z"
+      />
     </g>
   </svg>
 </template>

package/icons/flags/Germany.vue

@@ -1,7 +1,19 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-de" viewBox="0 0 640 480">
-    <path fill="#ffce00" d="M0 320h640v160H0z"/>
-    <path d="M0 0h640v160H0z"/>
-    <path fill="#d00" d="M0 160h640v160H0z"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    id="flag-icons-de"
+    viewBox="0 0 640 480"
+  >
+    <path
+      fill="#ffce00"
+      d="M0 320h640v160H0z"
+    />
+    <path
+      d="M0 0h640v160H0z"
+    />
+    <path
+      fill="#d00"
+      d="M0 160h640v160H0z"
+    />
   </svg>
 </template>

package/icons/flags/GreatBritain.vue

@@ -1,9 +1,28 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gb" viewBox="0 0 640 480">
-    <path fill="#012169" d="M0 0h640v480H0z"/>
-    <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/>
-    <path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/>
-    <path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/>
-    <path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    id="flag-icons-gb"
+    viewBox="0 0 640 480"
+  >
+    <path
+      fill="#012169"
+      d="M0 0h640v480H0z"
+    />
+    <path
+      fill="#FFF"
+      d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"
+    />
+    <path
+      fill="#C8102E"
+      d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"
+    />
+    <path
+      fill="#FFF"
+      d="M241 0v480h160V0H241zM0 160v160h640V160H0z"
+    />
+    <path
+      fill="#C8102E"
+      d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"
+    />
   </svg>
 </template>

package/icons/flags/Italy.vue

@@ -1,9 +1,25 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480">
-    <g fill-rule="evenodd" stroke-width="1pt">
-      <path fill="#fff" d="M0 0h640v480H0z"/>
-      <path fill="#009246" d="M0 0h213.3v480H0z"/>
-      <path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    id="flag-icons-it"
+    viewBox="0 0 640 480"
+  >
+    <g
+      fill-rule="evenodd"
+      stroke-width="1pt"
+    >
+      <path
+        fill="#fff"
+        d="M0 0h640v480H0z"
+      />
+      <path
+        fill="#009246"
+        d="M0 0h213.3v480H0z"
+      />
+      <path
+        fill="#ce2b37"
+        d="M426.7 0H640v480H426.7z"
+      />
     </g>
   </svg>
 </template>