@dative-gpi/foundation-shared-components 1.0.125 → 1.0.126-fix-imports

package/components/FSWindow.vue

@@ -1,10 +1,53 @@
 <template>
+  <template 
+    v-if="noMatch"
+  >
+    <slot 
+      name="error" 
+    >
+      <FSRow
+        padding="16px"
+        :width="$props.width"
+      >
+        <FSCol
+          align="center-center"
+          gap="16px"
+        >
+          <FSCol
+            align="center-center"
+          >
+            <FSIcon
+              size="42px"
+              :color="ColorEnum.Error"
+            >
+              mdi-alert-outline
+            </FSIcon>
+            <FSText
+              font="text-h3"
+            >
+              {{ $tr("window.no-access-title", "Nothing to see here") }}
+            </FSText>
+          </FSCol>
+          <FSText
+            :lineClamp="2"
+          >
+            {{ $tr("window.no-access-body", "It seems you either do not have access to this content, or there is nothing to display here") }}
+          </FSText>
+          <FSButton
+            :label="$tr('window.no-access-button', 'Go back')"
+            :color="ColorEnum.Primary"
+            @click="goBack"
+          />
+        </FSCol>
+      </FSRow>
+    </slot>
+  </template>
   <v-window
     class="fs-window"
+    ref="windowRef"
     :touch="false"
     :style="style"
     :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
     <template
@@ -35,8 +78,23 @@ import { computed, defineComponent, type PropType, ref, type StyleValue, type VN
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
+import { ColorEnum } from "../models";
+
+import FSButton from "./FSButton.vue";
+import FSCard from "./FSCard.vue";
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+import FSRow from "./FSRow.vue";
+
 export default defineComponent({
   name: "FSWindow",
+  components: {
+    FSButton,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSRow
+  },
   props: {
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -54,11 +112,13 @@ export default defineComponent({
       default: 0
     }
   },
-  emits: ["update:modelValue"],
-  setup(props) {
+  emits: ["update:modelValue", "error"],
+  setup(props, { emit }) {
     const { slots, getChildren } = useSlots();
 
     delete slots.default;
+
+    const windowRef = ref<any | null>(null);
     
     const showOverflow = ref(true);
     const overflowTimeout = ref<NodeJS.Timeout | null>(null);
@@ -84,10 +144,39 @@ export default defineComponent({
       }, 560);
     });
 
+    const noMatch = computed(() => {
+      if (!windowRef.value) {
+        return;
+      }
+
+      // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VWindow/VWindow.tsx
+      // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/composables/group.ts#L161
+      const group = windowRef.value.group;
+      return !group.items.value.find((item: any) => item.value === props.modelValue);
+    });
+
+    const goBack = (): void => {
+      if (!windowRef.value) {
+        emit("error");
+        return;
+      }
+      
+      const group = windowRef.value.group;
+      if (!group.items.value.length) {
+        emit("error");
+        return;
+      }
+      emit("update:modelValue", group.items.value[0].value);
+    };
+
     return {
+      ColorEnum,
+      windowRef,
+      noMatch,
       slots,
       style,
       getChildren,
+      goBack,
       value
     };
   }

package/components/agenda/FSAgendaHorizontalEvent.vue

@@ -44,7 +44,7 @@
       name="default"
       :label="label"
       :icon="icon"
-      :iconBis="iconBis"
+      :iconBis="endToday ? iconBis : null"
       :timeStart="epochToShortTimeOnlyFormat($props.start)"
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
@@ -120,12 +120,20 @@ export default defineComponent({
       return dayEnd.value - props.dayStart;
     });
 
+    const startToday = computed(() => {
+      return props.start >= props.dayStart;
+    });
+
+    const endToday = computed(() => {
+      return props.end <= dayEnd.value;
+    });
+
     const dayDurationOffset = computed(() => {
       return dayDuration.value - dayToMillisecond(1);
     });
 
     const leftPosition = computed(() => {
-      if (props.start < props.dayStart) {
+      if (!startToday.value) {
         return 0;
       }
       return millisecondToDay(props.start - props.dayStart - dayDurationOffset.value) * 100;
@@ -136,10 +144,10 @@ export default defineComponent({
       let end = props.end - dayDurationOffset.value;
       if(props.variant === 'current' && dayEnd.value > props.now) {
         end = props.now;
-      } else if (props.end > dayEnd.value) {
+      } else if (!endToday.value) {
         end = dayEnd.value - dayDurationOffset.value;
       }
-      if (props.start < props.dayStart) {
+      if (!startToday.value) {
         start = props.dayStart;
       }
       
@@ -150,12 +158,14 @@ export default defineComponent({
     const style = computed((): StyleValue => {
       return {
         '--fs-agenda-event-left': `${leftPosition.value}%`,
+        '--fs-agenda-event-border-width': startToday.value ? '3px' : '0px',
       };
     });
 
     return {
       style,
       width,
+      endToday,
       epochToShortTimeOnlyFormat
     };
   }

package/package.json

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

package/styles/components/fs_agenda_event.scss

@@ -8,7 +8,7 @@
   }
 
   >.fs-card {
-    border-left: solid 3px var(--fs-clickable-border-color) !important;
+    border-left: solid var(--fs-agenda-event-border-width) var(--fs-clickable-border-color) !important;
   }
 }