@dative-gpi/foundation-shared-components 0.0.112 → 0.0.114

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/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
@@ -831,7 +831,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);
@@ -976,7 +975,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) {
@@ -1055,38 +1054,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 +1459,6 @@ export default defineComponent({
       innerItems,
       headersSlots,
       itemsSlots,
-      innerValue,
       classes,
       style,
       size,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.112",
+  "version": "0.0.114",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.112",
-    "@dative-gpi/foundation-shared-services": "0.0.112",
+    "@dative-gpi/foundation-shared-domain": "0.0.114",
+    "@dative-gpi/foundation-shared-services": "0.0.114",
     "@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": "199459dde27ef496bc06d7c5a74e56892fc32bbd"
+  "gitHead": "10b5d9cd947ab4de3f652d69bee6e2ec4f6a3d37"
 }

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/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);
-}