@dative-gpi/foundation-shared-components 0.0.109 → 0.0.111

package/components/FSEditImage.vue

@@ -43,12 +43,12 @@
           :wrap="false"
         >
           <FSImage
-            v-if="$props.imageId || realSource"
+            v-if="$props.imageId || $props.modelValue"
             :aspectRatio="$props.aspectRatio"
             :height="$props.height"
             :width="$props.width"
             :imageId="$props.imageId"
-            :imageB64="realSource"
+            :imageB64="$props.modelValue"
           />
           <FSCard
             v-else
@@ -106,7 +106,7 @@
       </FSRow>
     </FSCard>
     <FSRow
-      v-else-if="$props.imageId || realSource"
+      v-else-if="$props.imageId || $props.modelValue"
       :width="$props.width"
       class="fs-edit-image-full"
     >
@@ -115,7 +115,7 @@
         :height="$props.height"
         :width="$props.width"
         :imageId="$props.imageId"
-        :imageB64="realSource"
+        :imageB64="$props.modelValue"
       />
       <FSRow
         class="fs-edit-image-full-toolbar"
@@ -203,6 +203,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
     imageId: {
       type: String as PropType<string | null>,
       required: false,
@@ -232,11 +237,6 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
     }
   },
   emits: ["update:modelValue", "update:imageId"],
@@ -260,13 +260,6 @@ export default defineComponent({
       };
     });
 
-    const realSource = computed(() => {
-      if (fileSelected.value && fileSelected.value.fileName) {
-        return fileSelected.value.fileContent as string;
-      }
-      return props.modelValue;
-    });
-
     const onUpload = async (payload: File) => {
       const content = (await readFile(payload)) as string;
       fileSelected.value.fileName = payload.name;
@@ -292,7 +285,6 @@ export default defineComponent({
       invisibleButtonRef,
       fileSelected,
       isExtraSmall,
-      realSource,
       style,
       onUpload,
       onRemove

package/components/FSForm.vue

@@ -47,9 +47,14 @@ export default defineComponent({
       await (formRef.value as any).validate();
       emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
       emit("submit", !!((formRef.value as any).isValid ?? true));
-      
     }; 
 
+    const validate = async () => {
+      submitted.value = true;
+      await (formRef.value as any).validate();
+      emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
+    };
+
     provide("validateOn", validateOn);
     provide("submitted", submitted);
 
@@ -57,7 +62,8 @@ export default defineComponent({
       validateOn,
       submitted,
       formRef,
-      onSubmit
+      onSubmit,
+      validate
     };
   }
 });

package/components/FSSlideGroup.vue

@@ -107,31 +107,27 @@ export default defineComponent({
 
     const goToStart = () => {
       if (slideGroupRef.value) {
-        (slideGroupRef.value as any).scrollOffset = 0;
+        (slideGroupRef.value as any).scrollTo("prev");
+        (slideGroupRef.value as any).scrollTo("prev");
       }
     };
 
     const goToPrev = () => {
       if (slideGroupRef.value) {
-        (slideGroupRef.value as any).scrollOffset = Math.max(0, (slideGroupRef.value as any).scrollOffset - props.speed);
+        (slideGroupRef.value as any).scrollTo("prev");
       }
     };
 
     const goToEnd = () => {
       if (slideGroupRef.value) {
-        const contentSize = (slideGroupRef.value as any).$el.children[1].children[0].clientWidth;
-        const containerSize = (slideGroupRef.value as any).$el.clientWidth;
-        const arrowsOffset = props.dash ? 104 : 64;
-        (slideGroupRef.value as any).scrollOffset = (contentSize - containerSize + arrowsOffset);
+        (slideGroupRef.value as any).scrollTo("next");
+        (slideGroupRef.value as any).scrollTo("next");
       }
     };
 
     const goToNext = () => {
       if (slideGroupRef.value) {
-        const contentSize = (slideGroupRef.value as any).$el.children[1].children[0].clientWidth;
-        const containerSize = (slideGroupRef.value as any).$el.clientWidth;
-        const arrowsOffset = props.dash ? 104 : 64;
-        (slideGroupRef.value as any).scrollOffset = Math.min(contentSize - containerSize + arrowsOffset, (slideGroupRef.value as any).scrollOffset + props.speed);
+        (slideGroupRef.value as any).scrollTo("next");
       }
     };
 

package/components/fields/FSSearchField.vue

@@ -7,7 +7,7 @@
     :required="$props.required"
     :editable="$props.editable"
     :placeholder="placeholder"
-    @keydown.enter="$emit('update:modelValue', innerValue)"
+    @keydown.enter="onSearch"
     v-model="innerValue"
     v-bind="$attrs"
   >
@@ -23,7 +23,7 @@
           :icon="$props.prependInnerIcon"
           :editable="$props.editable"
           :color="ColorEnum.Dark"
-          @click="$emit('update:modelValue', innerValue)"
+          @click="onSearch"
         />
       </slot>
     </template>
@@ -41,7 +41,7 @@
           :variant="$props.buttonVariant"
           :color="$props.buttonColor"
           :editable="$props.editable"
-          @click="$emit('update:modelValue', innerValue)"
+          @click="onSearch"
         />
       </slot>
     </template>
@@ -163,6 +163,12 @@ export default defineComponent({
       return props.buttonLabel ?? $tr('ui.button.search', 'Search');
     });
 
+    const onSearch = (event: Event) => {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      emit('update:modelValue', innerValue.value);
+    };
+
     watch(innerValue, () => {
       if (["instant"].includes(props.variant)) {
         emit("update:modelValue", innerValue.value);
@@ -173,7 +179,8 @@ export default defineComponent({
       placeholder,
       buttonLabel,
       innerValue,
-      ColorEnum
+      ColorEnum,
+      onSearch
     };
   }
 });

package/components/fields/FSTagField.vue

@@ -141,7 +141,9 @@ export default defineComponent({
 
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
-    const onAdd = (): void => {
+    const onAdd = (event: Event): void => {
+      event.stopImmediatePropagation();
+      event.preventDefault();
       if (!props.editable) {
         return;
       }

package/components/lists/FSDataTableUI.vue

@@ -79,6 +79,7 @@
       </FSCol>
       <FSDivider
         v-if="showFiltersDivider"
+        :size="['30px', '24px']"
         :vertical="true"
       />
       <FSCol>
@@ -89,7 +90,7 @@
             v-if="showFilters && resetable"
             variant="standard"
             :label="$tr('ui.data-table.reset-filters', 'Reset')"
-            :height="[30, 24]"
+            :height="['30px', '24px']"
             :color="ColorEnum.Error"
             :editable="true"
             @click="resetFilter"
@@ -373,7 +374,7 @@
                 {{ $tr("ui.data-table.rows-per-page", "Rows per page") }}
               </FSText>
               <FSSelectField
-                class="fs-data-table-rows-per-page"
+                class="fs-data-table-rows-per-page fs-small-input"
                 :clearable="false"
                 :hideHeader="true"
                 :items="rowsPerPageOptions"
@@ -382,7 +383,7 @@
             </FSRow>
             <FSToggleSet
               v-if="innerRowsPerPage !== -1"
-              class="fs-data-table-pagination"
+              class="fs-data-table-pagination fs-small-input"
               variant="slide"
               :dash="pageOptions.length > 8"
               :values="pageOptions"
@@ -529,7 +530,7 @@
                 width="120px"
               >
                 <FSSelectField
-                  class="fs-data-table-rows-per-page"
+                  class="fs-data-table-rows-per-page fs-small-input"
                   :clearable="false"
                   :hideHeader="true"
                   :items="rowsPerPageOptions"
@@ -539,7 +540,7 @@
             </FSRow>
             <FSToggleSet
               v-if="innerRowsPerPage !== -1"
-              class="fs-data-table-pagination"
+              class="fs-data-table-pagination fs-small-input"
               variant="slide"
               :dash="pageOptions.length > 8"
               :values="pageOptions"
@@ -944,8 +945,19 @@ export default defineComponent({
           }
           return {
             ...c,
-            sort: (a: any, b: any): number => JSON.stringify(a)
-              .localeCompare(JSON.stringify(b), undefined, { numeric: true })
+            sort: (a: any, b: any): number =>{
+              if (a === undefined && b === undefined) {
+                return 0;
+              }
+              if (a === undefined) {
+                return -1;
+              }
+              if (b === undefined) {
+                return 1;
+              }
+              return JSON.stringify(a)
+                .localeCompare(JSON.stringify(b), undefined, { numeric: true })
+            }
           };
         })
     });
@@ -1420,7 +1432,7 @@ export default defineComponent({
       emit("update:rowsPerPage", innerRowsPerPage.value);
     });
 
-    watch(() => props.headers, () => {
+    watch([() => props.headers, () => props.items], () => {
       computeFilters();
     });
 

package/models/tables.ts

@@ -28,6 +28,6 @@ export interface FSDataTableFilter {
 }
 
 export interface FSDataTableOrder {
-    key: string;
-    order: "asc" | "desc";
+    key: string | null;
+    order: "asc" | "desc" | null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.109",
+  "version": "0.0.111",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.109",
-    "@dative-gpi/foundation-shared-services": "0.0.109",
+    "@dative-gpi/foundation-shared-domain": "0.0.111",
+    "@dative-gpi/foundation-shared-services": "0.0.111",
     "@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": "2d4b8a76e9b8361a8a1e9b327311afef20a53950"
+  "gitHead": "6856c1334706daad1394d57eeb456f1f4497389e"
 }

package/styles/components/fs_data_table.scss

@@ -106,9 +106,9 @@
     background-color: var(--fs-data-table-background-color);
 }
 
-.fs-data-table-rows-per-page > .fs-select-field {
-    min-width: 120px !important;
-    width: 120px !important;
+.fs-data-table-rows-per-page {
+    min-width: 100px;
+    width: 100px;
 }
 
 .fs-data-table-pagination {

package/styles/globals/overrides.scss

@@ -30,7 +30,7 @@
 .v-input {
     padding: 0px !important;
 
-    &:not(.v-checkbox):not(.v-slider) {
+    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
         min-width: 200px;
         width: 100%;
     }