@dative-gpi/foundation-shared-components 1.0.131 → 1.0.133-dashboard-options

package/components/map/FSMapOverlay.vue

@@ -10,7 +10,7 @@
     v-show="isExtraSmall"
     ref="mobileOverlayWrapper"
     class="fs-map-overlay-mobile"
-    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '60%' : '20px') }"
+    :style="{ height: $props.mode === 'expand' ? '90%' : ($props.mode === 'half' ? '60%' : 'auto') }"
   >
     <FSCard
       width="100%"
@@ -24,14 +24,18 @@
       >
         <FSRow
           align="center-center"
-          @touchstart="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
+          style="cursor: pointer;"
+          @touchstart="onClick"
+          @mousedown="onClick"
         >
-          <FSButton
-            variant="icon"
-            :icon="$props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up'"
-            @click="$props.mode === 'expand' ? $emit('update:mode', 'collapse') : $emit('update:mode', 'expand')"
-          />
+          <FSIcon>
+            {{ $props.mode === 'expand' ? 'mdi-chevron-down' : 'mdi-chevron-up' }}
+          </FSIcon>
         </FSRow>
+        <slot
+          v-if="$props.mode === 'collapse'"
+          name="collapsed"
+        />
         <FSCol
           v-if="$props.mode !== 'collapse'"
           height="fill"
@@ -44,7 +48,6 @@
       </FSCol>
     </FSCard>
   </div>
-
   <FSCard
     v-show="!isExtraSmall"
     class="fs-map-overlay-desktop"
@@ -64,14 +67,22 @@
 
 <script lang="ts">
 import { defineComponent, type PropType, onUnmounted, onMounted, ref } from "vue";
+
 import { useBreakpoints } from "../../composables";
-import FSButton from "../FSButton.vue";
+
 import FSCard from "../FSCard.vue";
+import FSIcon from "../FSIcon.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSMapOverlay",
+  components: {
+    FSCard,
+    FSIcon,
+    FSCol,
+    FSRow
+  },
   props: {
     mode: {
       type: String as PropType<"collapse" | "half" | "expand">,
@@ -79,15 +90,9 @@ export default defineComponent({
       default: "collapse"
     }
   },
-  components: {
-    FSButton,
-    FSCard,
-    FSCol,
-    FSRow
-  },
   emits: ["update:mode", "update:height", "update:width"],
-  setup(_, { emit }) {
-    const { isExtraSmall } = useBreakpoints();
+  setup(props, { emit }) {
+    const { isExtraSmall, isTouchScreenEnabled } = useBreakpoints();
 
     const mobileOverlayWrapper = ref<HTMLDivElement | null>(null);
     const desktopOverlay = ref<InstanceType<typeof FSCard> | null>(null);
@@ -95,6 +100,14 @@ export default defineComponent({
     const mobileResizeObserver = ref<ResizeObserver | null>(null);
     const desktopResizeObserver = ref<ResizeObserver | null>(null);
 
+    const onClick = (): void => {
+      if (props.mode === "expand") {
+        emit("update:mode", "collapse");
+        return;
+      }
+      emit("update:mode", "expand");
+    }
+
     onMounted(() => {
       mobileResizeObserver.value = new ResizeObserver(entries => {
         entries.forEach((entry) => {
@@ -129,9 +142,11 @@ export default defineComponent({
     });
 
     return {
-      isExtraSmall,
       mobileOverlayWrapper,
-      desktopOverlay
+      isTouchScreenEnabled,
+      desktopOverlay,
+      isExtraSmall,
+      onClick
     };
   }
 });

package/components/tiles/FSLocationTileUI.vue

@@ -46,7 +46,7 @@
               align="center-left"
             >
               <FSColor
-                width="24px"
+                padding="0 8px"
                 height="24px"
                 :color="ColorEnum.Light"
                 :border="false"

package/components/views/desktop/FSBaseDefaultDesktopView.vue

@@ -12,11 +12,10 @@
       <slot
         name="header"
       >
-
         <FSRow
-          padding="24px 16px 16px 24px"
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
         >
           <slot
             name="title"
@@ -45,8 +44,8 @@
         </FSCol>
         <FSRow
           v-if="$slots.toolbar"
-          padding="0px 16px 8px 24px"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
+          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
         >
           <FSSlideGroup
             width="100%"
@@ -60,8 +59,8 @@
 
       <FSCol
         height="fill"
-        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
         gap="0px"
+        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
       >
         <slot />
       </FSCol>
@@ -74,7 +73,7 @@ import { defineComponent, type PropType, computed } from "vue";
 
 import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import { useColors } from "../../../composables"
+import { useBreakpoints, useColors } from "../../../composables"
  
 import FSCol from "../../FSCol.vue";
 import FSRow from "../../FSRow.vue"
@@ -119,7 +118,8 @@ export default defineComponent({
       default: "0px"
     }
   },
-  setup(){
+  setup() {
+    const { isTouchScreenEnabled } = useBreakpoints();
     const { getColors } = useColors();
 
     const backgroundColor = computed(() => {
@@ -127,8 +127,9 @@ export default defineComponent({
     });
 
     return {
+      isTouchScreenEnabled,
       backgroundColor
-    }
+    };
   }
 });
 </script>

package/components/views/desktop/FSBaseEntityDesktopView.vue

@@ -36,6 +36,7 @@
           :icon="$props.icon"
         />
         <FSCol
+          style="min-width: 0"
           align="center-left"
           height="fill"
         >

package/components/views/mobile/FSBaseDefaultMobileView.vue

@@ -12,11 +12,10 @@
       <slot
         name="header"
       >
-
         <FSRow
-          padding="24px 16px 16px 24px"
           style="position: sticky; top: 0px; z-index: 3;"
           :style="{ backgroundColor, marginTop: $props.stickyTitleTopOffset }"
+          :padding="`24px ${isTouchScreenEnabled ? '24px' : '16px'} 16px 24px`"
         >
           <slot
             name="title"
@@ -45,8 +44,8 @@
         </FSCol>
         <FSRow
           v-if="$slots.toolbar"
-          padding="0px 16px 8px 24px"
           :style="stickyToolbar ? `position: sticky; top: ${$props.toolbarTopOffset}; z-index: 3; background-color: ${backgroundColor}` : undefined"
+          :padding="`0px ${isTouchScreenEnabled ? '24px' : '16px'} 8px 24px`"
         >
           <FSSlideGroup>
             <slot
@@ -58,8 +57,8 @@
 
       <FSCol
         height="fill"
-        :padding="$slots.toolbar ? '8px 16px 24px 24px' : '16px 16px 24px 24px'"
         gap="0px"
+        :padding="`${$slots.toolbar ? '8px' : '16px'} ${isTouchScreenEnabled ? '24px' : '16px'} 24px 24px`"
       >
         <slot />
       </FSCol>
@@ -72,7 +71,7 @@ import { defineComponent, type PropType, computed } from "vue";
 
 import { type FSBreadcrumbItem, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import { useColors } from "../../../composables"
+import { useBreakpoints, useColors } from "../../../composables"
  
 import FSCol from "../../FSCol.vue";
 import FSRow from "../../FSRow.vue"
@@ -117,7 +116,8 @@ export default defineComponent({
       default: "0px"
     }
   },
-  setup(){
+  setup() {
+    const { isTouchScreenEnabled } = useBreakpoints();
     const { getColors } = useColors();
 
     const backgroundColor = computed(() => {
@@ -125,8 +125,9 @@ export default defineComponent({
     });
 
     return {
+      isTouchScreenEnabled,
       backgroundColor
-    }
+    };
   }
 });
 </script>

package/components/views/mobile/FSBaseEntityMobileView.vue

@@ -28,6 +28,7 @@
           :size="actualImageSize"
         />
         <FSCol
+          style="min-width: 0"
           align="center-left"
           height="fill"
         >

package/composables/useSlots.ts

@@ -20,11 +20,12 @@ export const useSlots = () => {
         // Directive wrapper (v-for, v-if)
         case "symbol":
           switch (element.type) {
+            // On a v-for, we want to get the children of the v-for
             case Symbol.for("v-fgt"):
               returnElements.push(...recursiveGetChildren(element.children));
               break;
+              // On a negative v-if, we want to get nothing
             case Symbol.for("v-cmt"):
-              returnElements.push(element);
               break;
             default:
               returnElements.push(element);

package/models/rules.ts

@@ -2,8 +2,9 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { validateExpression } from "@dative-gpi/foundation-shared-domain/tools";
 
-import { getTimeBestString } from "../utils";
-import type { TimeUnit } from "@/shared/foundation-shared-domain/enums";
+import type { TimeUnit } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getTimeBestString, validateOperation } from "../utils";
 
 const { epochToLongDateFormat } = useDateFormat()!;
 const { $tr } = useTranslationsProvider();
@@ -22,6 +23,8 @@ export const TextRules = {
     different: (original: string, message: string | undefined = undefined) => (value: string) => value != original || (message ?? $tr("ui.rules.text-different", "Must be different from original")),
     outside: (values: string[], message: string | undefined = undefined) => (value: string) => !values.includes(value) || (message ?? $tr("ui.rules.text-outside", "Must be different from others")),
     inside: (values: string[], message: string | undefined = undefined) => (value: string) => values.includes(value) || (message ?? $tr("ui.rules.text-inside", "Must be one of the options")),
+    operation: (operands: string[], variables: string[], message: string | undefined = undefined) => (value: string) => validateOperation(value, operands, variables) || (message ?? $tr("ui.rules.text-operation", "Invalid operation")),
+    singleWord: (message: string | undefined = undefined) => (value: string) => !value.includes(" ") || (message ?? $tr("ui.rules.text-single-word", "Must be a single word")),
 };
 
 export const TagRules = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.131",
+  "version": "1.0.133-dashboard-options",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.131",
-    "@dative-gpi/foundation-shared-services": "1.0.131"
+    "@dative-gpi/foundation-shared-domain": "1.0.133-dashboard-options",
+    "@dative-gpi/foundation-shared-services": "1.0.133-dashboard-options"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "4949c203e17fb9bd4f74122efb56552cf550f5b6"
+  "gitHead": "fbf279177a3d3399161c1cee211aca716c59f335"
 }

package/styles/components/fs_breadcrumbs.scss

@@ -1,48 +1,36 @@
-.fs-breadcrumbs-label {
-    cursor: pointer;
-    user-select: none;
-    color: var(--fs-breadcrumbs-color);
-
-    &-disabled {
-        color: var(--fs-breadcrumbs-disabled-color) !important;
-    }
-
-    &:hover {
-        text-decoration: underline;
-    }
+.fs-breadcrumbs {
+    height: var(--fs-breadcrumbs-height) !important;
+    padding: 0 !important;
+    gap: 0 !important;
 
-    &:active {
-        color: var(--fs-breadcrumbs-active-color) !important;
-    }
+    max-width: 100%;
 }
 
-// .fs-breadcrumbs-divider {
-//     margin-bottom: 2px !important;
-// }
-
-.fs-breadcrumbs.v-breadcrumbs {
-    line-height: normal!important;
+.v-breadcrumbs-item,
+.v-breadcrumbs-item--link {
     padding: 0 !important;
-    gap: 8px !important;
-    height: 20px;
-}
+    user-select: none;
+    cursor: pointer;
 
-.v-breadcrumbs-item {
-    padding: 0 !important;
+    align-self: stretch;
+    display: flex;
+    flex: 1 0 0;
+
+    max-width: fit-content;
+    min-width: 20px;
 
     &--disabled {
         opacity: 1 !important;
         color: var(--fs-breadcrumbs-disabled-color) !important;
     }
+}
 
-    &:last-child > .fs-breadcrumbs-label-disabled {
-        @extend .text-button;
+.v-breadcrumbs-item:last-child > .fs-breadcrumbs-label {
+    @extend .text-button;
 
-        color: var(--fs-breadcrumbs-active-color) !important;
-    }
+    color: var(--fs-breadcrumbs-active-color) !important;
 }
 
 .v-breadcrumbs-divider {
-    padding: 0 !important;
     color: var(--fs-breadcrumbs-color) !important;
 }

package/styles/components/fs_button.scss

@@ -2,11 +2,6 @@
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
 
-    &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-        color: var(--fs-button-hover-color) !important;
-        cursor: pointer !important;
-    }
-
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
@@ -16,4 +11,11 @@
         color: inherit;
         text-decoration: none;
     }
+
+    @include clickscreen {
+        &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
+            color: var(--fs-button-hover-color) !important;
+            cursor: pointer !important;
+        }
+    }
 }

package/styles/components/fs_chip.scss

@@ -12,15 +12,17 @@
 .fs-chip-editable {
     cursor: pointer !important;
 
-    &:hover {
-        background-color: var(--fs-chip-hover-background-color) !important;
-        border-color: var(--fs-chip-hover-border-color) !important;
-        color: var(--fs-chip-hover-color) !important;
-    }
-
     &:active {
         background-color: var(--fs-chip-active-background-color) !important;
         border-color: var(--fs-chip-active-border-color) !important;
         color: var(--fs-chip-active-color) !important;
     }
+
+    @include clickscreen {
+        &:hover {
+            background-color: var(--fs-chip-hover-background-color) !important;
+            border-color: var(--fs-chip-hover-border-color) !important;
+            color: var(--fs-chip-hover-color) !important;
+        }
+    }
 }

package/styles/components/fs_clickable.scss

@@ -11,18 +11,7 @@
     &.fs-clickable-disabled {
         cursor: default;
     }
-
-    &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
-        background-color: var(--fs-clickable-hover-background-color) !important;
-        border-color: var(--fs-clickable-hover-border-color) !important;
-        color: var(--fs-clickable-hover-color) !important;
-
-        & .fs-card-clickable {
-            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-            background-color: var(--fs-clickable-hover-background-color);
-        }
-    }
-
+    
     &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
         background-color: var(--fs-clickable-active-background-color) !important;
         border-color: var(--fs-clickable-active-border-color) !important;
@@ -33,6 +22,19 @@
             background-color: var(--fs-clickable-active-background-color);
         }
     }
+
+    @include clickscreen {
+        &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
+            background-color: var(--fs-clickable-hover-background-color) !important;
+            border-color: var(--fs-clickable-hover-border-color) !important;
+            color: var(--fs-clickable-hover-color) !important;
+    
+            & .fs-card-clickable {
+                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+                background-color: var(--fs-clickable-hover-background-color);
+            }
+        }
+    }
 }
 
 a:has(.fs-clickable) {

package/styles/components/fs_data_iterator_item.scss

@@ -8,16 +8,18 @@
         padding-right: 32px;
     }
 
-    &:hover::after {
-        content: "";
-        background-color: black;
-        pointer-events: none;
-        position: absolute;
-        opacity: 0.04;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
+    @include clickscreen {
+        &:hover::after {
+            content: "";
+            background-color: black;
+            pointer-events: none;
+            position: absolute;
+            opacity: 0.04;
+            height: 100%;
+            width: 100%;
+            left: 0;
+            top: 0;
+        }
     }
 }
 

package/styles/components/fs_dialog.scss

@@ -1,5 +1,5 @@
 .fs-dialog-mobile > .v-overlay__content {
-  max-height: 100vh !important;
+  max-height: 100dvh !important;
   max-width: 100vw !important;
   width: 100% !important;
   margin: 0 !important;

package/styles/components/fs_dialog_menu.scss

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

package/styles/components/fs_image_card.scss

@@ -11,8 +11,10 @@
   }
 }
 
-.fs-image-card:hover {
-  > .fs-card {
-    background-size: 105%;
+@include clickscreen {
+  .fs-image-card:hover {
+    > .fs-card {
+      background-size: 105%;
+    }
   }
 }

package/styles/components/fs_map.scss

@@ -92,11 +92,13 @@
     align-items: center;
     justify-content: center;
 
-    &:hover {
-      filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
-
-      > * {
-        transform: scale(1.15);
+    @include clickscreen {
+      &:hover {
+        filter: brightness(0.92) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
+  
+        > * {
+          transform: scale(1.15);
+        }
       }
     }
   }
@@ -128,8 +130,10 @@
     opacity: 0.6;
     transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &:hover {
-      opacity: 1;
+    @include clickscreen {
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }

package/styles/components/fs_password_field.scss

@@ -4,7 +4,9 @@
     color: var(--fs-password-field-color) !important;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 
-    &:hover {
-        color: var(--fs-password-field-hover-color) !important;
+    @include clickscreen {
+        &:hover {
+            color: var(--fs-password-field-hover-color) !important;
+        }
     }
 }

package/styles/components/fs_span.scss

@@ -1,9 +1,17 @@
 .fs-span {
+    display: flex;
+
+    max-width: 100%;
+    min-width: 0;
+}
+
+.fs-span > span {
+    text-align: var(--fs-span-text-align);
+    align-content: center;
     max-width: 100%;
-    text-align: left;
 }
 
-.fs-span-line-clamp {
+.fs-span-line-clamp > span {
     overflow: hidden;
     display: -webkit-box;
     line-clamp: var(--fs-span-line-clamp);
@@ -11,12 +19,12 @@
     -webkit-line-clamp: var(--fs-span-line-clamp);
 }
 
-.fs-span-ellipsis {
+.fs-span-ellipsis > span {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.fs-span-pre-wrap {
+.fs-span-pre-wrap > span {
     white-space: pre-wrap;
 }

package/styles/components/fs_tabs.scss

@@ -23,9 +23,11 @@
         @extend .text-button;
     }
 
-    &:hover {
-        border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
-        color: var(--fs-group-hover-color) !important;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
+            color: var(--fs-group-hover-color) !important;
+        }
     }
 }
 
@@ -34,8 +36,10 @@
     color: var(--fs-group-hover-color) !important;
     border-bottom: 0 !important;
 
-    &:hover {
-        border-bottom: 0 !important;
+    @include clickscreen {
+        &:hover {
+            border-bottom: 0 !important;
+        }
     }
 }