@dative-gpi/foundation-shared-components 0.0.51 → 0.0.53

package/components/FSAccordion.vue

@@ -1,10 +1,13 @@
 <template>
-  <v-expansion-panels variant="accordion">
+  <v-expansion-panels
+    variant="accordion"
+  >
     <template
-      v-for="(component, index) in getChildren(undefined)"
-      :key="index"
+      v-for="component in getChildren()"
     >
-      <component :is="component" />
+      <component
+        :is="component"
+      />
     </template>
   </v-expansion-panels>
 </template>

package/components/FSEditImage.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
+import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 import { FileImage } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButtonRemoveIcon from "./buttons/FSButtonRemoveIcon.vue";
@@ -95,7 +95,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { read } = useFiles();
+    const { readFile } = useFiles();
 
     const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
 
@@ -106,12 +106,11 @@ export default defineComponent({
       return props.modelValue;
     });
 
-    const onUpload = (payload: File) => {
-      read(payload, (content: string) => {
-        fileSelected.value.fileName = payload.name;
-        fileSelected.value.fileContent = content;
-        emit("update:modelValue", content);
-      });
+    const onUpload = async (payload: File) => {
+      const content = await readFile(payload);
+      fileSelected.value.fileName = payload.name;
+      fileSelected.value.fileContent = content;
+      emit("update:modelValue", content);
     };
 
     const onRemove = () => {

package/components/FSLabel.vue

@@ -30,7 +30,7 @@ export default defineComponent({
   },
   props: {
     label: {
-      type: [String, null, undefined],
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/FSLink.vue

@@ -23,7 +23,7 @@ export default defineComponent({
   name: "FSLink",
   props: {
     label: {
-      type: [String, null, undefined],
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/FSSlideGroup.vue

@@ -20,8 +20,7 @@
     </template>
     <template #default>
       <v-slide-group-item
-        v-for="(component, index) in getChildren(undefined)"
-        :key="index"
+        v-for="(component) in getChildren()"
       >
         <component :is="component" />
       </v-slide-group-item>

package/components/FSSpan.vue

@@ -19,7 +19,7 @@ export default defineComponent({
   name: "FSSpan",
   props: {
     label: {
-      type: [String, null, undefined],
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/FSTabs.vue

@@ -11,10 +11,11 @@
     v-bind="$attrs"
   >
     <template
-      v-for="(component, index) in getChildren(undefined)"
-      :key="index"
+      v-for="component in getChildren()"
     >
-      <component :is="component" />
+      <component
+        :is="component"
+      />
     </template>
   </v-tabs>
 </template>

package/components/FSText.vue

@@ -20,7 +20,7 @@ export default defineComponent({
   name: "FSText",
   props: {
     label: {
-      type: [String, null, undefined],
+      type: String as PropType<string | null>,
       required: false,
       default: null
     },

package/components/FSWindow.vue

@@ -4,11 +4,12 @@
     v-bind="$attrs"
   >
     <v-window-item
-      v-for="(component, index) in getChildren(undefined)"
+      v-for="(component, index) in getChildren()"
       :value="value(component, index)"
-      :key="index"
     >
-      <component :is="component" />
+      <component
+        :is="component"
+      />
     </v-window-item>
   </v-window>
 </template>

package/components/FSWrapGroup.vue

@@ -6,10 +6,11 @@
     v-bind="$attrs"
   >
     <v-slide-group-item
-      v-for="(component, index) in getChildren(undefined)"
-      :key="index"
+      v-for="component in getChildren()"
     >
-      <component :is="component" />
+      <component
+        :is="component"
+      />
     </v-slide-group-item>
   </v-slide-group>
 </template>

package/components/buttons/FSButtonFile.vue

@@ -22,7 +22,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
-import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
+import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -46,23 +46,23 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { read } = useFiles();
+    const { readFile } = useFiles();
     
     const input = ref<HTMLFormElement | null>(null);
 
-    const clear = () => {
+    const clear = (): void => {
       if (input.value) {
         input.value.form && input.value.form.reset();
       }
     };
 
-    const onClick = () => {
+    const onClick = (): void => {
       if (input.value) {
         input.value.click();
       }
     }
 
-    const onInput = () => {
+    const onInput = async (): Promise<void> => {
       if (!input.value) {
         return;
       }
@@ -75,9 +75,8 @@ export default defineComponent({
         clear();
       }
       else {
-        read(file, (content: string) => {
-          emit("update:modelValue", content);
-        });
+        const content = await readFile(file);
+        emit("update:modelValue", content);
       }
     };
 

package/components/buttons/FSButtonFileIcon.vue

@@ -22,7 +22,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
-import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
+import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -46,23 +46,23 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { read } = useFiles();
+    const { readFile } = useFiles();
 
     const input = ref<HTMLFormElement | null>(null);
 
-    const clear = () => {
+    const clear = (): void => {
       if (input.value) {
         input.value.form && input.value.form.reset();
       }
     };
 
-    const onClick = () => {
+    const onClick = (): void => {
       if (input.value) {
         input.value.click();
       }
     }
 
-    const onInput = () => {
+    const onInput = async (): Promise<void> => {
       if (!input.value) {
         return;
       }
@@ -75,9 +75,8 @@ export default defineComponent({
         clear();
       }
       else {
-        read(file, (content: string) => {
-          emit("update:modelValue", content);
-        });
+        const content = await readFile(file);
+        emit("update:modelValue", content);
       }
     };
 

package/components/buttons/FSButtonFileLabel.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
-import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
+import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -45,23 +45,23 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { read } = useFiles();
+    const { readFile } = useFiles();
 
     const input = ref<HTMLFormElement | null>(null);
 
-    const clear = () => {
+    const clear = (): void => {
       if (input.value) {
         input.value.form && input.value.form.reset();
       }
     };
 
-    const onClick = () => {
+    const onClick = (): void => {
       if (input.value) {
         input.value.click();
       }
     }
 
-    const onInput = () => {
+    const onInput = async (): Promise<void> => {
       if (!input.value) {
         return;
       }
@@ -74,9 +74,8 @@ export default defineComponent({
         clear();
       }
       else {
-        read(file, (content: string) => {
-          emit("update:modelValue", content);
-        });
+        const content = await readFile(file);
+        emit("update:modelValue", content);
       }
     };
 

package/components/buttons/FSButtonFileMini.vue

@@ -21,7 +21,7 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
 
-import { useFiles } from "@dative-gpi/foundation-shared-components/composables";
+import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSButton from "../FSButton.vue";
@@ -45,23 +45,23 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { read } = useFiles();
+    const { readFile } = useFiles();
 
     const input = ref<HTMLFormElement | null>(null);
 
-    const clear = () => {
+    const clear = (): void => {
       if (input.value) {
         input.value.form && input.value.form.reset();
       }
     };
 
-    const onClick = () => {
+    const onClick = (): void => {
       if (input.value) {
         input.value.click();
       }
     }
 
-    const onInput = () => {
+    const onInput = async (): Promise<void> => {
       if (!input.value) {
         return;
       }
@@ -74,9 +74,8 @@ export default defineComponent({
         clear();
       }
       else {
-        read(file, (content: string) => {
-          emit("update:modelValue", content);
-        });
+        const content = await readFile(file);
+        emit("update:modelValue", content);
       }
     };
 

package/composables/index.ts

@@ -1,6 +1,5 @@
 export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useDebounce";
-export * from "./useFiles";
 export * from "./useRules";
 export * from "./useSlots";

package/composables/useSlots.ts

@@ -1,7 +1,7 @@
 import { useSlots as useVueSlots } from "vue"
 
 export const useSlots = () => {
-    const getChildren = (name: string | undefined): any => {
+    const getChildren = (name: string | undefined = undefined): any => {
         const innerSlots = { ...useVueSlots() };
         const innerName = name ?? "default";
         if (innerSlots[innerName] != null) {
@@ -27,7 +27,7 @@ export const useSlots = () => {
         return null;
     };
 
-    const getFirstChild = (name: string | undefined): any => {
+    const getFirstChild = (name: string | undefined = undefined): any => {
         const children = getChildren(name);
         if (children != null) {
             return children[0];

package/models/rules.ts

@@ -7,59 +7,59 @@ const { epochToLongDateFormat } = useAppTimeZone()!;
 const { $tr } = useTranslationsProvider();
 
 export const TextRules = {
-    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    copy: (original: string, message: string | null) => (value: string) => value === original || (message ?? $tr("ui.rules.copy", "Different from original")),
-    min: (min: number, message: string | null) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
-    max: (max: number, message: string | null) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
-    email: (message: string | null) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
-    phone: (message: string | null) => (value: string) => /^[\+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
-    digit: (message: string | null) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
-    uppercase: (message: string | null) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
-    lowercase: (message: string | null) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
-    special: (message: string | null) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    copy: (original: string, message: string | undefined = undefined) => (value: string) => value === original || (message ?? $tr("ui.rules.copy", "Different from original")),
+    min: (min: number, message: string | undefined = undefined) => (value: string) => value.length >= min || (message ?? $tr("ui.rules.text-min", "Must be at least {0} characters", min.toString())),
+    max: (max: number, message: string | undefined = undefined) => (value: string) => value.length <= max || (message ?? $tr("ui.rules.text-max", "Must be at most {0} characters", max.toString())),
+    email: (message: string | undefined = undefined) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? $tr("ui.rules.text-email", "Must be a valid email")),
+    phone: (message: string | undefined = undefined) => (value: string) => /^[\+]?([0-9]+[ -]?)+$/.test(value) || (message ?? $tr("ui.rules.text-phone", "Must be a valid phone number")),
+    digit: (message: string | undefined = undefined) => (value: string) => /(?=.*\d)/.test(value) || (message ?? $tr("ui.rules.text-digit", "Must contain a digit")),
+    uppercase: (message: string | undefined = undefined) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? $tr("ui.rules.text-uppercase", "Must contain an uppercase letter")),
+    lowercase: (message: string | undefined = undefined) => (value: string) => /(?=.*[a-z])/.test(value) || (message ?? $tr("ui.rules.text-lowercase", "Must contain a lowercase letter")),
+    special: (message: string | undefined = undefined) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? $tr("ui.rules.text-special-character", "Must contain a special character"))
 };
 
 export const TagRules = {
-    required: (message: string | null) => (value: string[]) => value.length > 0 || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | null) => (value: string[]) => value.length >= min || (message ?? $tr("ui.rules.tag-min", "Must be at least {0} elements", min.toString())),
-    max: (max: number, message: string | null) => (value: string[]) => value.length <= max || (message ?? $tr("ui.rules.tag-max", "Must be at most {0} elements", max.toString()))
+    required: (message: string | undefined = undefined) => (value: string[]) => value.length > 0 || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => value.length >= min || (message ?? $tr("ui.rules.tag-min", "Must be at least {0} elements", min.toString())),
+    max: (max: number, message: string | undefined = undefined) => (value: string[]) => value.length <= max || (message ?? $tr("ui.rules.tag-max", "Must be at most {0} elements", max.toString()))
 };
 
 export const NumberRules = {
-    required: (message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? $tr("ui.rules.number-min", "Must be at least {0}", min.toString())),
-    max: (max: number, message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? $tr("ui.rules.number-max", "Must be at most {0}", max.toString())),
-    integer: (message: string | null) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? $tr("ui.rules.number-integer", "Must be an integer"))
+    required: (message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? $tr("ui.rules.number-min", "Must be at least {0}", min.toString())),
+    max: (max: number, message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? $tr("ui.rules.number-max", "Must be at most {0}", max.toString())),
+    integer: (message: string | undefined = undefined) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? $tr("ui.rules.number-integer", "Must be an integer"))
 };
 
 export const IconRules = {
-    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
 };
 
 export const DateRules = {
-    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | null) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
-    max: (max: number, message: string | null) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: number) => (!value || value >= min) || (message ?? $tr("ui.rules.date-min", "Must be after {0}", epochToLongDateFormat(min))),
+    max: (max: number, message: string | undefined = undefined) => (value: number) => (!value || value <= max) || (message ?? $tr("ui.rules.date-max", "Must be before {0}", epochToLongDateFormat(max)))
 };
 
 export const SelectRules = {
-    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.select-min", "Must select at least {0} elements", min.toString())),
-    max: (max: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.select-max", "Must select at most {0} elements", max.toString()))
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.select-min", "Must select at least {0} elements", min.toString())),
+    max: (max: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.select-max", "Must select at most {0} elements", max.toString()))
 };
 
 export const AutocompleteRules = {
-    required: (message: string | null) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
-    max: (max: number, message: string | null) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
+    required: (message: string | undefined = undefined) => (value: string) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length >= min) || (message ?? $tr("ui.rules.autocomplete-min", "Must select at least {0} elements", min.toString())),
+    max: (max: number, message: string | undefined = undefined) => (value: string[]) => (Array.isArray(value) && value.length <= max) || (message ?? $tr("ui.rules.autocomplete-max", "Must select at most {0} elements", max.toString()))
 };
 
 export const TimeRules = {
-    required: (message: string | null) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
-    min: (min: number, message: string | null) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
-    max: (max: number, message: string | null) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
+    required: (message: string | undefined = undefined) => (value: number) => !!value || (message ?? $tr("ui.rules.required", "Required")),
+    min: (min: number, message: string | undefined = undefined) => (value: number) => value >= min || (message ?? $tr("ui.rules.time-min", "Must be more than {0}", getTimeBestString(min))),
+    max: (max: number, message: string | undefined = undefined) => (value: number) => value <= max || (message ?? $tr("ui.rules.time-max", "Must be less than {0}", getTimeBestString(max)))
 };
 
 export const ToggleRules = {
-    required: (message: string | null) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
+    required: (message: string | undefined = undefined) => (value: boolean) => value || (message ?? $tr("ui.rules.required", "Required"))
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.51",
+  "version": "0.0.53",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.51",
-    "@dative-gpi/foundation-shared-services": "0.0.51",
+    "@dative-gpi/foundation-shared-domain": "0.0.53",
+    "@dative-gpi/foundation-shared-services": "0.0.53",
     "@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": "13a8e0d4bd10a05a35c570412fa2024d33b0c115"
+  "gitHead": "4ecd4c47590cb49ab9f480e12202cde9af5396e1"
 }

package/composables/useFiles.ts

@@ -1,13 +0,0 @@
-export const useFiles = () => {
-    const read = (file: File, callback: Function): void => {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          callback(fileEv.target && fileEv.target.result);
-        });
-        reader.readAsDataURL(file);
-    };
-
-    return {
-        read
-    };
-}