@dative-gpi/foundation-shared-components 1.0.89 → 1.0.92

package/components/FSCardPlaceholder.vue

@@ -6,7 +6,6 @@
     :height="$props.height"
     :width="$props.width"
     :border="true"
-    @click="$emit('click')"
     v-bind="$attrs"
   >
     <FSRow

package/components/FSClickable.vue

@@ -86,6 +86,7 @@
     :type="$props.type"
     :style="style"
     :class="$props.class"
+    :disabled="$props.load || !$props.editable"
     @click.stop="onClick"
     @mouseover="hover = true"
     @mouseleave="hover = false"

package/components/FSDialogFormBody.vue

@@ -28,6 +28,7 @@
             :wrap="false"
           >
             <FSButton
+              v-if="$props.showCancelButton"
               :prependIcon="$props.cancelButtonPrependIcon"
               :appendIcon="$props.cancelButtonAppendIcon"
               :variant="$props.cancelButtonVariant"
@@ -36,6 +37,7 @@
               @click="() => $emit('click:cancelButton', false)"
             />
             <FSButton
+              v-if="$props.showSubmitButton"
               type="submit"
               :prependIcon="$props.submitButtonPrependIcon"
               :appendIcon="$props.submitButtonAppendIcon"
@@ -122,6 +124,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -147,6 +154,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,

package/components/FSDialogMultiFormBody.vue

@@ -38,6 +38,7 @@
               :wrap="false"
             >
               <FSButton
+                v-if="$props.showCancelButton || currentStep > 1"
                 :prependIcon="$props.cancelButtonPrependIcon"
                 :appendIcon="$props.cancelButtonAppendIcon"
                 :variant="$props.cancelButtonVariant"
@@ -46,6 +47,7 @@
                 @click="onPrevious()"
               />
               <FSButton
+                v-if="$props.showSubmitButton || currentStep < $props.steps"
                 type="submit"
                 :prependIcon="$props.submitButtonPrependIcon"
                 :appendIcon="$props.submitButtonAppendIcon"
@@ -107,6 +109,11 @@ export default defineComponent({
       type: Number,
       required: true
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -132,6 +139,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,

package/components/FSDialogSubmit.vue

@@ -33,6 +33,7 @@
             :wrap="false"
           >
             <FSButton
+              v-if="$props.showCancelButton"
               :prependIcon="$props.cancelButtonPrependIcon"
               :appendIcon="$props.cancelButtonAppendIcon"
               :variant="$props.cancelButtonVariant"
@@ -41,6 +42,7 @@
               @click="$emit('update:modelValue', false)"
             />
             <FSButton
+              v-if="$props.showSubmitButton"
               :prependIcon="$props.submitButtonPrependIcon"
               :appendIcon="$props.submitButtonAppendIcon"
               :variant="$props.submitButtonVariant"
@@ -98,6 +100,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     cancelButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,
@@ -123,6 +130,11 @@ export default defineComponent({
       required: false,
       default: ColorEnum.Light
     },
+    showSubmitButton: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     submitButtonPrependIcon: {
       type: String as PropType<string | null>,
       required: false,

package/components/FSWindow.vue

@@ -1,6 +1,5 @@
 <template>
   <v-window
-    ref="windowRoot"
     class="fs-window"
     :touch="false"
     :style="style"
@@ -60,12 +59,14 @@ export default defineComponent({
     const { slots, getChildren } = useSlots();
 
     delete slots.default;
-
-    const windowRoot = ref<HTMLElement | null>(null);
+    
+    const showOverflow = ref(true);
+    const overflowTimeout = ref<NodeJS.Timeout | null>(null);
 
     const style = computed((): StyleValue => ({
-      "--fs-window-width"   : sizeToVar(props.width),
-      "--fs-window-height"  : sizeToVar(props.height)
+      "--fs-window-overflow": showOverflow.value ? "visible" : "hidden",
+      "--fs-window-height"  : sizeToVar(props.height),
+      "--fs-window-width"   : sizeToVar(props.width)
     }));
 
     const value = (component: VNode, index: number): any => {
@@ -74,17 +75,16 @@ export default defineComponent({
 
     // Hide horizontal overflow when switching windows, otherwise let it visible for the FSFadeOut scrollbar
     watch(() => props.modelValue, (): void => {
-      if (windowRoot.value == null) {
-        return;
+      showOverflow.value = false;
+      if (overflowTimeout.value) {
+        clearTimeout(overflowTimeout.value);
       }
-      (windowRoot.value as any).$el.style.setProperty("overflow", "hidden", "important");
-      setTimeout(() => {
-        (windowRoot.value as any).$el.style.setProperty("overflow", "visible", "important");
-      }, 1120);
+      overflowTimeout.value = setTimeout(() => {
+        showOverflow.value = true;
+      }, 560);
     });
 
     return {
-      windowRoot,
       slots,
       style,
       getChildren,

package/components/fields/FSCommentField.vue

@@ -17,18 +17,21 @@
       />
     </FSRow>
     <FSRow>
-      <v-spacer></v-spacer>
-      <FSButtonCancel
-        v-if="showCancelButton"
-        @click="$emit('cancel')"
-      />
-      <FSButton
-        :color="ColorEnum.Primary"
-        :loading="creating"
-        prependIcon="mdi-send-outline"
-        :label="buttonLabel ?? $tr('ui.common.publish','Publish')"
-        @click="() => $emit('submit', innertext)"
-      />
+      <FSRow 
+        align="center-right"
+      >
+        <FSButtonCancel
+          v-if="showCancelButton"
+          @click="$emit('cancel')"
+        />
+        <FSButton
+          prependIcon="mdi-send-outline"
+          :color="ColorEnum.Primary"
+          :loading="creating"
+          :label="buttonLabel ?? $tr('ui.common.publish','Publish')"
+          @click="onSubmit"
+        />
+      </FSRow>
     </FSRow>
   </FSCol>
 </template>
@@ -80,13 +83,21 @@ export default defineComponent({
     },
   },
   emits: ["submit","cancel"],
-  setup(props) {
+  setup(props, { emit }) {
 
     const innertext = ref<string | undefined>(props.text);
+
+    const onSubmit = () => {
+      if (innertext.value) {
+        emit('submit', innertext.value);
+        innertext.value = '';
+      }
+    };
     
     return {
       innertext,
-      ColorEnum
+      ColorEnum,
+      onSubmit,
     };
   },
 })

package/components/lists/FSDataTableUI.vue

@@ -1039,17 +1039,21 @@ export default defineComponent({
     });
 
     const innerItems = computed((): any[] => {
-      const activeFilters: { key: string, filter: FSDataTableFilter }[] = Object.keys(filters.value).reduce((acc, key) => {
-        return acc.concat(filters.value[key].filter((filter) => filter.hidden).map((filter) => ({ key, filter })));
-      }, [] as { key: string, filter: FSDataTableFilter }[]);
+      const activeFilters: { [key: string]: FSDataTableFilter[] } = {};
+      for (const property in filters.value) {
+        activeFilters[property] = filters.value[property].filter((filter) => !filter.hidden);
+      }
+
       if (props.items && props.items.length) {
         const innerSearchFormatted = innerSearch.value ? innerSearch.value.toLowerCase() : null;
         return props.items.filter((item) => {
           if (props.selectedOnly && !props.modelValue.includes(item[props.itemValue])) {
             return false;
           }
-          if (activeFilters.some(af => af.filter.filter && af.filter.filter(af.filter.value, item[af.key], item))) {
-            return false;
+          for (const property in activeFilters) {
+            if (!activeFilters[property].some((filter) => filter.filter && filter.filter(filter.value, item[property], item))) {
+              return false;
+            }
           }
           if (innerSearchFormatted) {
             return containsSearchTerm(item, innerSearchFormatted);
@@ -1245,7 +1249,7 @@ export default defineComponent({
                 return header.methodFilterRaw(ff.value, item);
               }
               const flat = property = [property].flat();
-              return Array.isArray(flat) ? flat.includes(ff.value) || (!ff.value && flat.length == 0) : (!ff.value && !flat) || ff.value == flat;
+              return Array.isArray(flat) ? flat.some(f => f == ff.value) : ff.value == flat;
             })
           }));
           filterDictionary[key] = value;
@@ -1268,7 +1272,7 @@ export default defineComponent({
                     return header.methodFilterRaw(dv, item);
                   }
                   const flat = [property].flat().map(mapToInnerValue);
-                  return Array.isArray(flat) ? flat.includes(dv) || (!dv && flat.length == 0) : (!dv && !flat) || dv == flat;
+                  return Array.isArray(flat) ? flat.some(f => f == dv) : dv == flat;
                 })
               }
             });
@@ -1544,6 +1548,7 @@ export default defineComponent({
 
     watch(() => props.items, async () => {
       computeFilters();
+      observeIntersection();
       if (innerPage.value !== 1) {
         const formerPage = innerPage.value;
         innerPage.value = 1;

package/components/lists/FSSimpleList.vue

@@ -79,7 +79,7 @@ export default defineComponent({
   },
   props: {
     items: {
-      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string, [index: string]: any}[]>,
+      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string | null, [index: string]: any}[]>,
       required: true
     },
     tileProps: {

package/components/lists/FSSimpleListItem.vue

@@ -103,7 +103,7 @@ export default defineComponent({
   },
   props: {
     filteredItems: {
-      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string, [index: string]: any}[]>,
+      type: Array as PropType<{id: string, label?: string, icon?: string, imageId?: string | null, [index: string]: any}[]>,
       required: true
     },
     tileProps: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.89",
+  "version": "1.0.92",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.89",
-    "@dative-gpi/foundation-shared-services": "1.0.89"
+    "@dative-gpi/foundation-shared-domain": "1.0.92",
+    "@dative-gpi/foundation-shared-services": "1.0.92"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "9744715fd11929d7cd01e09aebe822283a6214e5"
+  "gitHead": "5b512a8eaedd84fb5f24896d01891a9a6c838ec5"
 }

package/styles/components/fs_slide_group.scss

@@ -2,11 +2,11 @@
     height: var(--fs-group-height);
     width: var(--fs-group-width);
     max-width: 100%;
-    margin: -1px;
-    padding: 1px;
+    margin: 0 -1px 0 0;
 
     & > .v-slide-group__container > .v-slide-group__content {
-        // margin: 0 2px 1px 0 !important;
+        margin: 0 1px 0 0;
+        
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);
     }

package/styles/components/fs_window.scss

@@ -1,7 +1,7 @@
 .fs-window {
+    overflow: var(--fs-window-overflow) !important;
     height: var(--fs-window-height);
     width: var(--fs-window-width);
-    overflow: visible !important;
 }
 
 .fs-window-item {