@dative-gpi/foundation-shared-components 0.0.87 → 0.0.89

package/components/lists/FSDraggable.vue

@@ -41,6 +41,7 @@ export default defineComponent({
   emits: ["update:dragstart", "update:dragend"],
   setup(props, { emit }) {
     let prevDragOverTarget: EventTarget | null = null;
+    const mobileGrabThreshold = 150;
 
     const draggedElementCopy = ref<HTMLElement|null>(null);
     const touchStartX = ref(0);
@@ -48,6 +49,8 @@ export default defineComponent({
     const touchEndX = ref(0);
     const touchEndY = ref(0);
 
+    const touchStartTime = ref(0);
+
     const classes = computed((): string[] => {
       const classNames = ["fs-draggable-item"];
       if (!props.disabled) {
@@ -60,27 +63,31 @@ export default defineComponent({
       if (props.disabled) {
         return;
       }
-      event.preventDefault();
       const touch = event.touches[0];
       touchStartX.value = touch.clientX;
       touchStartY.value = touch.clientY;
 
-      const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
-      dragged.classList.add("fs-draggable-dragging");
-      dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+      touchStartTime.value = Date.now();
 
-      draggedElementCopy.value = dragged.cloneNode(true) as HTMLElement;
-      draggedElementCopy.value.style.position = "fixed";
-      draggedElementCopy.value.style.left = `${touchStartX.value - 25}px`;
-      draggedElementCopy.value.style.top = `${touchStartY.value - 25}px`;
-      draggedElementCopy.value.style.zIndex = "1000";
-      draggedElementCopy.value.style.pointerEvents = "none";
+      setTimeout(() => {
+        if(touchStartTime.value !== 0) {
+          const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
+          dragged.classList.add("fs-draggable-dragging");
+          dragged.classList.add("fs-draggable-dragging-grabbegin");
+          dragged.dataset.initialIndex = props.item?.index ?? props.item?.value;
+          event.preventDefault();
+        }
+      }, mobileGrabThreshold);
     };
 
     const onTouchMove = (event: TouchEvent) => {
       if (props.disabled) {
         return;
       }
+      if (Date.now() - touchStartTime.value < mobileGrabThreshold || touchStartTime.value === 0) {
+        touchStartTime.value = 0;
+        return;
+      }
       event.preventDefault();
       const touch = event.touches[0];
       touchEndX.value = touch.clientX;
@@ -122,8 +129,14 @@ export default defineComponent({
       if (props.disabled) {
         return;
       }
+
+      const dragged = (event.target as HTMLElement)?.closest(props.elementSelector) as HTMLElement;
+      if (dragged === null || touchStartTime.value === 0) {
+        return;
+      }
+
       event.preventDefault();
-      const dragged = (event.target as HTMLElement)?.closest(props.elementSelector);
+
       if (draggedElementCopy.value) {
         draggedElementCopy.value.remove();
         draggedElementCopy.value = null;
@@ -131,7 +144,7 @@ export default defineComponent({
 
       const dropTarget = document.elementFromPoint(touchEndX.value, touchEndY.value);
       const dragEndEvent = new Event("dragend");
-      Object.defineProperty(dragEndEvent, "srcElement", {
+      Object.defineProperty(dragEndEvent, "target", {
         get: function () { return event.target; }
       });
       emit("update:dragend", dragEndEvent, dragged);
@@ -140,7 +153,7 @@ export default defineComponent({
         bubbles: true,
         cancelable: true,
       });
-      dropEvent.dataTransfer?.setData("text/plain", JSON.stringify(props.item));
+      dragged!.dataset.item = JSON.stringify(props.item);
       dropTarget?.dispatchEvent(dropEvent);
 
       touchStartX.value = 0;

package/components/lists/FSFilterButton.vue

@@ -3,7 +3,9 @@
     :closeOnContentClick="false"
     v-model="expanded"
   >
-    <template #activator="{ props }">
+    <template
+      #activator="{ props }"
+    >
       <FSChip
         class="fs-filter-button"
         variant="standard"
@@ -57,8 +59,12 @@
               :variant="getVariant(filter)"
               @click="() => onToggle(filter)"
             >
-              <template #default>
-                <slot v-bind="{ filter }" />
+              <template
+                #default
+              >
+                <slot
+                  v-bind="{ filter }"
+                />
               </template>
             </FSChip>
           </FSCol>
@@ -117,7 +123,7 @@ export default defineComponent({
 
     const label = computed((): string | null => {
       if (props.header.text) {
-          if (props.filters) {
+        if (props.filters) {
           const hidden = props.filters.filter(f => f.hidden).length;
           if (hidden > 0) {
             return $tr("ui.data-table.some-filters-visible", "{0}: {1} visible", props.header.text, (props.filters.length - hidden).toString());

package/components/lists/FSHeaderButton.vue

@@ -2,7 +2,9 @@
   <v-menu
     v-model="expanded"
   >
-    <template #activator="{ props }">
+    <template
+      #activator="{ props }"
+    >
       <FSButton
         class="fs-header-button"
         icon="mdi-dots-vertical"

package/components/lists/FSHiddenButton.vue

@@ -3,7 +3,9 @@
     :closeOnContentClick="false"
     v-model="expanded"
   >
-    <template #activator="{ props }">
+    <template
+      #activator="{ props }"
+    >
       <FSChip
         prependIcon="mdi-eye-off-outline"
         :color="ColorEnum.Light"

package/composables/useAutocomplete.ts

@@ -7,7 +7,7 @@ export const useAutocomplete = <TInfos>(
   entities: Ref<TInfos[]>,
   filters: (() => any)[],
   emit: (event: "update:modelValue", value: string[] | string | null) => void,
-  customFetch: (search: string | null) => Promise<any>,
+  customFetch: (search: string) => Promise<any>,
   customUpdate: ((item: TInfos[] | TInfos | null) => void) | null = null,
   toId: (item: TInfos) => string | null = (item: TInfos) => (item as any).id,
   toText: (item: TInfos) => string | null = (item: TInfos) => (item as any).label,
@@ -18,13 +18,12 @@ export const useAutocomplete = <TInfos>(
 ) => {
   const { debounce } = useDebounce();
 
-  const search = ref<string | null>(null);
+  const search = ref<string>("");
   const entitiesLength = ref(0);
   const init = ref(true);
 
   const toggleSet = computed((): boolean => {
-    console.log(allowToggleSet, entitiesLength.value, breakpointToggleSet);
-    return allowToggleSet && entitiesLength.value < breakpointToggleSet;
+    return allowToggleSet && entitiesLength.value <= breakpointToggleSet;
   });
 
   const debouncedFetch = () => debounce(() => customFetch(search.value), debounceInterval);
@@ -52,9 +51,9 @@ export const useAutocomplete = <TInfos>(
 
   watch(search, (newValue, oldValue) => {
     if (newValue !== oldValue) {
-      const found = entities.value.map(e => toText(e)).includes(search.value);
-      if (!found && (!search.value || !search.value.length || search.value.length > 2)) {
-        if (fetchOnSearch) {
+      if (fetchOnSearch) {
+        const found = entities.value.map(e => toText(e)).includes(search.value);
+        if (!found && (!search.value || !search.value.length || search.value.length > 2)) {
           debouncedFetch();
         }
       }

package/composables/useSlots.ts

@@ -10,34 +10,22 @@ export const useSlots = () => {
                 // Directive wrapper (v-for, v-if)
                 case "symbol":
                     switch (slot()[0].type) {
-                        case Symbol.for("v-fgt"):
-                            return slot()[0].children;
-                        case Symbol.for("v-cmt"):
-                            return slot();
+                        case Symbol.for("v-fgt"): return slot()[0].children;
+                        case Symbol.for("v-cmt"): return slot();
+                        default:                  return slot();
                     }
                 // Custom component
-                case "object":
-                    return slot();
+                case "object": return slot();
                 // Pre-existing component
-                case "string":
-                    return slot();
+                case "string": return slot();
             }
             return slot();
         }
         return null;
     };
 
-    const getFirstChild = (name: string | undefined = undefined): any => {
-        const children = getChildren(name);
-        if (children != null) {
-            return children[0];
-        }
-        return null;
-    };
-
     return {
         slots: { ...useVueSlots() } as { [label: string]: Slot<any> },
-        getChildren,
-        getFirstChild
+        getChildren
     };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.87",
+  "version": "0.0.89",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.87",
-    "@dative-gpi/foundation-shared-services": "0.0.87",
+    "@dative-gpi/foundation-shared-domain": "0.0.89",
+    "@dative-gpi/foundation-shared-services": "0.0.89",
     "@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": "ae864c1fac5a392f6fcc8e77be26fe1613eb1165"
+  "gitHead": "9bacb675fe5a6db96fbb13de6baeb94ac288fcff"
 }

package/styles/components/fs_base_field.scss

@@ -0,0 +1,12 @@
+.fs-base-field-label {
+    color: var(--fs-base-field-color);
+}
+
+.fs-base-field-messages {
+    align-self: stretch;
+    color: var(--fs-base-field-error-color);
+}
+
+.fs-base-field-description {
+    color: var(--fs-base-field-color);
+}

package/styles/components/fs_dialog.scss

@@ -11,6 +11,16 @@
     margin: 0px !important;
 }
 
+.v-overlay__content:has(.fs-dialog) {
+    min-width: 35vw !important;
+    max-width: 90vw !important;
+    max-height: 90vh !important;
+
+    &.v-overlay__content:has(.fs-dialog-mobile) {
+        max-width: 100vw !important;
+    }
+}
+
 .fs-dialog {
     position: relative;
     min-width: 35vw !important;
@@ -18,8 +28,6 @@
     max-height: 90vh !important;
 
     &.fs-dialog-mobile {
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
         max-width: 100vw !important;
     }
 }

package/styles/components/fs_dialog_menu.scss

@@ -0,0 +1,11 @@
+.v-overlay__content:has(.fs-dialog-menu) {
+    width: fit-content !important;
+    max-height: 60vh !important;
+    justify-content: center;
+    align-items: center;
+}
+
+.fs-dialog-menu {
+    max-width: calc(100vw - 40px) !important;
+    max-height: 60vh !important;
+}

package/styles/components/fs_draggable.scss

@@ -12,6 +12,18 @@
   filter: blur(1px);
 }
 
+.fs-draggable-dragging-grabbegin {
+  animation: tilt-shaking 0.1s 2;
+}
+
+@keyframes tilt-shaking {
+  0% { transform: rotate(0deg); }
+  25% { transform: rotate(2deg); }
+  50% { transform: rotate(0deg); }
+  75% { transform: rotate(-2deg); }
+  100% { transform: rotate(0deg); }
+}
+
 .fs-dropzone-include {
   transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   filter: brightness(0.85) contrast(1.1);

package/styles/components/fs_edit_image.scss

@@ -1,3 +1,30 @@
-.fs-edit-image {
-    border: 1px dashed var(--fs-edit-image-border-color);
+.fs-edit-image-overline {
+    color: var(--fs-edit-image-overline-text-color) !important;
+}
+
+.fs-edit-image-hidden-button {
+    display: none;
+}
+
+.fs-edit-image-full {
+    position: relative;
+
+    .fs-edit-image-full-toolbar {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+}
+
+.fs-edit-image-label {
+    color: var(--fs-edit-image-color);
+}
+
+.fs-edit-image-messages {
+    align-self: stretch;
+    color: var(--fs-edit-image-error-color);
+}
+
+.fs-edit-image-description {
+    color: var(--fs-edit-image-color);
 }

package/styles/components/fs_text_area.scss

@@ -72,17 +72,4 @@
             }
         }
     }
-}
-
-.fs-text-area-label {
-    color: var(--fs-text-area-color);
-}
-
-.fs-text-area-messages {
-    align-self: stretch;
-    color: var(--fs-text-area-error-color);
-}
-
-.fs-text-area-description {
-    color: var(--fs-text-area-color);
 }

package/styles/components/fs_text_field.scss

@@ -11,20 +11,7 @@
     }
 
     & > .v-field__field > .v-field__input {
+        cursor: var(--fs-text-field-cursor) !important;
         color: var(--fs-text-field-color);
-        cursor: var(--fs-select-field-cursor) !important;
     }
-}
-
-.fs-text-field-label {
-    color: var(--fs-text-field-color);
-}
-
-.fs-text-field-messages {
-    align-self: stretch;
-    color: var(--fs-text-field-error-color);
-}
-
-.fs-text-field-description {
-    color: var(--fs-text-field-color);
 }

package/styles/components/index.scss

@@ -1,5 +1,6 @@
 @import "fs_accordion_panel.scss";
 @import "fs_autocomplete_field.scss";
+@import "fs_base_field.scss";
 @import "fs_breadcrumbs.scss";
 @import "fs_button.scss";
 @import "fs_calendar.scss";
@@ -16,6 +17,7 @@
 @import "fs_data_table.scss";
 @import "fs_data_iterator_item.scss";
 @import "fs_date_field.scss";
+@import "fs_dialog_menu.scss";
 @import "fs_dialog.scss";
 @import "fs_divider.scss";
 @import "fs_draggable.scss";

package/styles/globals/overrides.scss

@@ -99,6 +99,10 @@
     display: none !important;
 }
 
+.v-overlay__content {
+    min-width: fit-content !important;
+}
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;

package/components/autocompletes/FSAutocompleteOrganisation.vue

@@ -1,77 +0,0 @@
-<template>
-  <FSAutocompleteField 
-    :toggleSet="!$props.toggleSetDisabled && toggleSet"
-    :loading="loading"
-    :items="organisations"
-    :modelValue="$props.modelValue"
-    @update:modelValue="onUpdate"
-    v-model:search="search"
-    v-bind="$attrs" />
-</template>
-<script lang="ts">
-import { PropType, computed, defineComponent, watch } from 'vue'
-import _ from 'lodash';
-
-import { OrganisationFilters } from '@dative-gpi/foundation-shared-domain/models';
-import { useOrganisations } from '@dative-gpi/foundation-shared-services/composables';
-
-import { useAutocomplete } from '../../composables';
-
-import FSAutocompleteField from '../fields/FSAutocompleteField.vue'
-
-export default defineComponent({
-  name: 'FSAutocompleteOrganisation',
-  components: {
-    FSAutocompleteField
-  },
-  props: {
-    organisationFilters: {
-      type: Object as PropType<OrganisationFilters>,
-      required: false,
-      default: null
-    },
-    modelValue: {
-      type: [Array, String] as PropType<string[] | string | null>,
-      required: false,
-      default: null
-    },
-    toggleSetDisabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  emit: ['update:modelValue'],
-  setup(props, { emit }) {
-    const { entities: organisations, fetching: fetchingOrganisations, getMany: getManyOrganisations } = useOrganisations();
-
-    const innerFetch = (search: string | null) => {
-      return getManyOrganisations({ ...props.organisationFilters, search: search ?? undefined });
-    };
-
-    const { toggleSet, search, init, onUpdate } = useAutocomplete(
-      organisations,
-      [() => props.organisationFilters],
-      emit,
-      innerFetch
-    );
-
-    const isSelected = (id: any) => {
-      return props.modelValue?.includes(id);
-    }
-
-    const loading = computed((): boolean => {
-      return init.value && fetchingOrganisations.value;
-    });
-
-    return {
-      organisations,
-      toggleSet,
-      loading,
-      search,
-      isSelected,
-      onUpdate
-    }
-  }
-})
-</script>