@dative-gpi/foundation-shared-components 0.0.113 → 0.0.115

package/components/FSForm.vue

@@ -55,6 +55,16 @@ export default defineComponent({
       emit("update:modelValue", !!((formRef.value as any).isValid ?? true));
     };
 
+    const reset = () => {
+      submitted.value = false;
+      (formRef.value as any).reset();
+    };
+
+    const resetValidation = () => {
+      submitted.value = false;
+      (formRef.value as any).resetValidation();
+    };
+
     provide("validateOn", validateOn);
     provide("submitted", submitted);
 
@@ -62,8 +72,10 @@ export default defineComponent({
       validateOn,
       submitted,
       formRef,
+      reset,
+      validate,
       onSubmit,
-      validate
+      resetValidation
     };
   }
 });

package/components/FSSlideGroup.vue

@@ -17,6 +17,7 @@
       />
       <FSButtonPreviousIcon
         :color="ColorEnum.Dark"
+        :disabled="false"
         @click="goToPrev"
       />
     </template>
@@ -37,6 +38,7 @@
     >
       <FSButtonNextIcon
         :color="ColorEnum.Dark"
+        :disabled="false"
         @click="goToNext"
       />
       <FSButton
@@ -50,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -96,6 +98,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const slideGroupRef = ref<HTMLElement | null>(null);
+    const resizeObserver = ref<ResizeObserver | null>(null);
 
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-arrows-width": props.dash ? "52px" : "32px",
@@ -131,6 +134,23 @@ export default defineComponent({
       }
     };
 
+    onMounted((): void => {
+      resizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach(() => {
+          (slideGroupRef.value as any).scrollTo("prev");
+        });
+      });
+      if (document.querySelector(".fs-slide-group")) {
+        resizeObserver.value.observe(document.querySelector(".fs-slide-group")!);
+      }
+    });
+
+    onUnmounted((): void => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+      }
+    });
+
     return {
       slideGroupRef,
       ColorEnum,

package/components/FSWrapGroup.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -43,7 +43,8 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
-    const wrapGroupRef = ref(null);
+    const wrapGroupRef = ref<HTMLElement | null>(null);
+    const resizeObserver = ref<ResizeObserver | null>(null);
 
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
@@ -52,6 +53,23 @@ export default defineComponent({
       "--fs-group-hover-color": darks.dark
     }));
 
+    onMounted((): void => {
+      resizeObserver.value = new ResizeObserver(entries => {
+        entries.forEach(() => {
+          (wrapGroupRef.value as any).scrollTo("prev");
+        });
+      });
+      if (document.querySelector(".fs-wrap-group")) {
+        resizeObserver.value.observe(document.querySelector(".fs-wrap-group")!);
+      }
+    });
+
+    onUnmounted((): void => {
+      if (resizeObserver.value) {
+        resizeObserver.value.disconnect();
+      }
+    });
+
     return {
       wrapGroupRef,
       style,

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -1,6 +1,7 @@
 <template>
   <FSAutocompleteField
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
+    :customFilter="customFilter"
     :multiple="$props.multiple"
     :loading="loading"
     :items="timeZones"
@@ -127,6 +128,10 @@ export default defineComponent({
       return getManyTimeZones({ ...props.timeZoneFilters, search: search ?? undefined });
     };
 
+    const customFilter = (_: any, search: string, item: any): boolean => {
+      return item.raw.id.toLowerCase().includes(search.toLowerCase());
+    };
+
     const { toggleSet, search, init, onUpdate } = useAutocomplete(
       timeZones,
       [() => props.timeZoneFilters],
@@ -142,6 +147,7 @@ export default defineComponent({
       toggleSet,
       loading,
       search,
+      customFilter,
       onUpdate
     };
   }

package/components/fields/FSTextArea.vue

@@ -14,7 +14,7 @@
       :class="classes"
       :rows="$props.rows"
       :hideDetails="true"
-      :noResize="!$props.resize"
+      :noResize="true"
       :autoGrow="$props.autoGrow"
       :readonly="!$props.editable"
       :clearable="$props.clearable && $props.editable && !!$props.modelValue"
@@ -37,13 +37,17 @@
       <template
         #clear
       >
-        <FSButton
-          v-if="$props.clearable && $props.editable && !!$props.modelValue"
-          icon="mdi-close"
-          variant="icon"
-          :color="ColorEnum.Dark"
-          @click="$emit('update:modelValue', null)"
-        />
+        <FSCol
+          align="center-center"
+        >
+          <FSButton
+            v-if="$props.clearable && $props.editable && !!$props.modelValue"
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', null)"
+          />
+        </FSCol>
       </template>
     </v-textarea>
   </FSBaseField>
@@ -56,11 +60,13 @@ import { useColors, useBreakpoints, useRules } from "@dative-gpi/foundation-shar
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSBaseField from "./FSBaseField.vue";
+import FSCol from "../FSCol.vue";
 
 export default defineComponent({
   name: "FSTextArea",
   components: {
-    FSBaseField
+    FSBaseField,
+    FSCol
   },
   props: {
     label: {
@@ -83,11 +89,6 @@ export default defineComponent({
       required: false,
       default: 1
     },
-    resize: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     autoGrow: {
       type: Boolean,
       required: false,
@@ -136,17 +137,17 @@ export default defineComponent({
 
     const style = computed((): { [key: string] : string | null | undefined } => {
       let height: string | undefined = undefined;
-      let minHeight: string | undefined = undefined;
+      let fieldHeight: string | undefined = undefined;
       if (!props.autoGrow) {
-        const base = isMobileSized.value ? 30 : 34;
-        const row = isMobileSized.value ? 16 : 20;
-        minHeight = `${base}px`;
+        const base = isMobileSized.value ? 34 : 38;
+        const row = isMobileSized.value ? 14 : 16;
         if (props.rows > 1) {
           height = `${base + (props.rows - 1) * row}px`;
         }
         else {
           height = `${base}px`;
         }
+        fieldHeight = `${props.rows * row}px`;
       }
       if (!props.editable) {
         return {
@@ -154,8 +155,8 @@ export default defineComponent({
           "--fs-text-area-border-color"       : lights.base,
           "--fs-text-area-color"              : lights.dark,
           "--fs-text-area-active-border-color": lights.base,
-          "--fs-text-area-min-height"         : minHeight,
-          "--fs-text-area-height"             : height
+          "--fs-text-area-height"             : height,
+          "--fs-text-area-field-height"       : fieldHeight
         };
       }
       return {
@@ -164,8 +165,8 @@ export default defineComponent({
         "--fs-text-area-color"              : darks.base,
         "--fs-text-area-active-border-color": darks.dark,
         "--fs-text-area-error-border-color" : errors.base,
-        "--fs-text-area-min-height"         : minHeight,
-        "--fs-text-area-height"             : height
+        "--fs-text-area-height"             : height,
+        "--fs-text-area-field-height"       : fieldHeight
       };
     });
 
@@ -185,7 +186,7 @@ export default defineComponent({
       messages,
       blurred,
       classes,
-      style,
+      style
     };
   }
 });

package/components/lists/FSDataTableUI.vue

@@ -124,7 +124,7 @@
         :class="classes"
         :page="innerPage"
         :itemsPerPage="innerRowsPerPage"
-        :modelValue="innerValue"
+        :modelValue="$props.modelValue"
         @auxclick:row="onClickRow"
         @click:row="onClickRow"
         @update:sortBy="innerSortBy = $event ? $event[0] : null"
@@ -167,7 +167,7 @@
             width="hug"
           >
             <FSCheckbox
-              :modelValue="innerValue.includes(props.item[$props.itemValue])"
+              :modelValue="$props.modelValue.includes(props.item[$props.itemValue])"
               @update:modelValue="toggleSelect(props.item)"
             />
           </FSRow>
@@ -237,8 +237,8 @@
                   >
                     <FSCheckbox
                       v-if="$props.showSelect"
-                      :modelValue="props.item.items.every((item) => innerValue.includes(item.key))"
-                      :indeterminate="innerValue.some((id) => props.item.items.some((item) => item.key === id)) && !props.item.items.every((item) => innerValue.includes(item.key))"
+                      :modelValue="props.item.items.every((item) => $props.modelValue.includes(item.key))"
+                      :indeterminate="$props.modelValue.some((id) => props.item.items.some((item) => item.key === id)) && !props.item.items.every((item) => $props.modelValue.includes(item.key))"
                       @update:modelValue="toggleSelectGroup(props.item)"
                     />
                     <FSText>
@@ -441,7 +441,7 @@
                   :color="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
+                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
                   @update:modelValue="toggleSelect"
                 >
                   <template
@@ -591,7 +591,7 @@
                   :color="$props.color"
                   :item="item.raw"
                   :key="index"
-                  :modelValue="innerValue.includes(item.raw[$props.itemValue])"
+                  :modelValue="$props.modelValue.includes(item.raw[$props.itemValue])"
                   @update:modelValue="toggleSelect"
                 >
                   <template
@@ -645,7 +645,8 @@ import { useRouter } from "vue-router";
 import { ColorEnum, FSDataTableColumn, FSDataTableFilter, FSDataTableOrder, FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { sizeToVar } from "../../utils";
+
+import { alphanumericSort, sizeToVar } from "../../utils";
 
 import FSDataIteratorItem from "./FSDataIteratorItem.vue";
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -831,7 +832,6 @@ export default defineComponent({
     const filters = ref<{ [key: string]: FSDataTableFilter[] }>({});
     const innerSearch: Ref<string | null> = ref(null);
     const innerRowsPerPage = ref(props.rowsPerPage);
-    const innerValue = ref(props.modelValue);
     const innerSortBy = ref(props.sortBy);
     const innerMode = ref(props.mode);
     const innerPage = ref(props.page);
@@ -945,19 +945,7 @@ export default defineComponent({
           }
           return {
             ...c,
-            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 })
-            }
+            sort: alphanumericSort
           };
         })
     });
@@ -976,7 +964,7 @@ export default defineComponent({
       }, [] as { key: string, filter: FSDataTableFilter }[]);
       if (props.items && props.items.length) {
         return props.items.filter((item) => {
-          if (props.selectedOnly && !innerValue.value.includes(item[props.itemValue])) {
+          if (props.selectedOnly && !props.modelValue.includes(item[props.itemValue])) {
             return false;
           }
           if (innerSearch.value) {
@@ -1002,9 +990,9 @@ export default defineComponent({
     });
 
     const groups = computed((): { [key: string]: any[] } => {
-      if (props.groupBy) {
+      if (props.groupBy && props.groupBy.key) {
         return innerItems.value.reduce((acc, item) => {
-          const key = item[props.groupBy.key];
+          const key = item[props.groupBy.key!];
           if (!acc[key]) {
             acc[key] = [];
           }
@@ -1055,38 +1043,37 @@ export default defineComponent({
 
     const toggleSelectAll = (allSelected: boolean): void => {
       if (allSelected) {
-        innerValue.value = [];
+        emit("update:modelValue", []);
       }
       else {
-        innerValue.value = innerItems.value.map((item) => item[props.itemValue]);
+        emit("update:modelValue", innerItems.value.map((item) => item[props.itemValue]));
       }
-      emit("update:modelValue", innerValue.value);
     };
 
     const toggleSelectGroup = (group: any): void => {
-      if (group.items.every((item: any) => innerValue.value.includes(item.key))) {
-        innerValue.value = innerValue.value.filter((id) => !group.items.some((item: any) => item.key === id));
+      if (group.items.every((item: any) => props.modelValue.includes(item.key))) {
+        emit("update:modelValue", props.modelValue.filter((id) => !group.items.some((item: any) => item.key === id)));
       }
       else {
-        innerValue.value = [...new Set(innerValue.value.concat(group.items.map((item: any) => item.key)))];
+        emit("update:modelValue", [...new Set(props.modelValue.concat(group.items.map((item: any) => item.key)))]);
       }
-      emit("update:modelValue", innerValue.value);
     };
 
     const toggleSelect = (item: any): void => {
-      const index = innerValue.value.indexOf(item[props.itemValue]);
+      let values = props.modelValue.slice();
+      const index = values.indexOf(item[props.itemValue]);
       if (index > -1) {
-        innerValue.value.splice(index, 1);
+        values.splice(index, 1);
       }
       else {
         if (props.singleSelect) {
-          innerValue.value = [item[props.itemValue]];
+          values = [item[props.itemValue]];
         }
         else {
-          innerValue.value.push(item[props.itemValue]);
+          values.push(item[props.itemValue]);
         }
       }
-      emit("update:modelValue", innerValue.value);
+      emit("update:modelValue", values);
     };
 
     const toggleFilter = (header: string, value: FSDataTableFilter[]): void => {
@@ -1461,7 +1448,6 @@ export default defineComponent({
       innerItems,
       headersSlots,
       itemsSlots,
-      innerValue,
       classes,
       style,
       size,

package/composables/useAutocomplete.ts

@@ -23,7 +23,7 @@ export const useAutocomplete = <TInfos>(
   const init = ref(true);
 
   const toggleSet = computed((): boolean => {
-    return allowToggleSet && entitiesLength.value <= breakpointToggleSet;
+    return allowToggleSet && entitiesLength.value > 0 && entitiesLength.value <= breakpointToggleSet;
   });
 
   const debouncedFetch = () => debounce(() => customFetch(search.value), debounceInterval);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.113",
+  "version": "0.0.115",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.113",
-    "@dative-gpi/foundation-shared-services": "0.0.113",
+    "@dative-gpi/foundation-shared-domain": "0.0.115",
+    "@dative-gpi/foundation-shared-services": "0.0.115",
     "@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": "f5968ac788b2bf889a786aab099086c24c46179b"
+  "gitHead": "19b102691d3d6846375b6c94e3e35f9e6e83dc42"
 }

package/styles/components/fs_text_area.scss

@@ -18,19 +18,21 @@
             mask-image: none !important;
             -webkit-mask-image: none !important;
 
-            margin: 2px 2px 2px 0 !important;
+            min-height: var(--fs-text-area-field-height) !important;
+            max-height: var(--fs-text-area-field-height) !important;
             cursor: var(--fs-text-area-cursor) !important;
-            min-height: var(--fs-text-area-min-height);
-            height: var(--fs-text-area-height);
             color: var(--fs-text-area-color);
+            padding: 0;
+        }
+
+        height: var(--fs-text-area-height);
         
-            @include web {
-                padding: 12px 0 12px 16px !important;
-            }
-        
-            @include mobile {
-                padding: 7px 0 7px 16px !important;
-            }
+        @include web {
+            padding: 11px 16px !important;
+        }
+    
+        @include mobile {
+            padding: 10px 16px !important;
         }
     }
 }
@@ -56,19 +58,17 @@
             mask-image: none !important;
             -webkit-mask-image: none !important;
 
-            padding-inline: 0 !important;
-            margin: 2px 2px 2px 0 !important;
             cursor: var(--fs-text-area-cursor) !important;
-            height: var(--fs-text-area-height);
             color: var(--fs-text-area-color);
+            padding: 0;
+        }
         
-            @include web {
-                padding: 12px 0 12px 16px !important;
-            }
-        
-            @include mobile {
-                padding: 7px 0 7px 16px !important;
-            }
+        @include web {
+            padding: 11px 16px !important;
+        }
+    
+        @include mobile {
+            padding: 10px 16px !important;
         }
     }
 }

package/styles/components/index.scss

@@ -56,7 +56,6 @@
 @import "fs_tile.scss";
 @import "fs_time_field.scss";
 @import "fs_timeslot_field.scss";
-@import "fs_toggle_set.scss";
 @import "fs_tooltip.scss";
 @import "fs_window.scss";
 @import "fs_wrap_group.scss";

package/styles/globals/overrides.scss

@@ -30,6 +30,10 @@
 .v-input {
     padding: 0px !important;
 
+    &.fs-small-input {
+        flex: 0 0 auto;
+    }
+
     &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
         min-width: 200px;
         width: 100%;
@@ -121,6 +125,13 @@ $nthOverlay: 25;
 }
 
 /***** Applies to all slide groups (FSTabs, FSSlideGroup, FSWrapGroup) *****/
+.fs-slide-group {
+    max-width: 100%;
+    
+    & > .v-slide-group__container > .v-slide-group__content {
+        margin: 0 2px 0.2px 0 !important;
+    }
+}
 
 // On touchscreen, hide arrows
 // Otherwise show small ones with base text color

package/utils/sort.ts

@@ -1,9 +1,18 @@
 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 });
+  if (a == null && b == null) {
+    return 0;
+  }
+  if (a == null) {
+    return -1;
+  }
+  if (b == null) {
+    return 1;
+  }
+  if (typeof(a) !== 'string') {
+    a = JSON.stringify(a);
+  }
+  if (typeof(b) !== 'string') {
+    b = JSON.stringify(b);
+  }
+  return a.localeCompare(b, undefined, { numeric: true });
 }

package/styles/components/fs_toggle_set.scss

@@ -1,4 +0,0 @@
-.fs-toggle-set > .v-input__control > .v-slide-group { 
-    height: calc(100% + 0.4px);
-    width: calc(100% + 0.4px);
-}