@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/FSTag.vue

@@ -1,8 +1,9 @@
 <template>
   <FSRow
+    align="center-center"
     class="fs-tag"
-    width="hug"
-    align="center-left"
+    :height="$props.height"
+    :width="$props.width"
     :style="style"
     :wrap="false"
     v-bind="$attrs"
@@ -38,11 +39,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSIcon from "./FSIcon.vue";
@@ -57,6 +56,16 @@ export default defineComponent({
     FSRow
   },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "hug"
+    },
     label: {
       type: String as PropType<string | null>,
       required: false,
@@ -70,7 +79,7 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     editable: {
       type: Boolean,
@@ -84,23 +93,23 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "standard": return {
           "--fs-tag-background-color"       : colors.value.light,
-          "--fs-tag-color"                  : colors.value.lightContrast,
+          "--fs-tag-color"                  : colors.value.lightContrast!,
           "--fs-tag-hover-background-color" : colors.value.base,
-          "--fs-tag-hover-color"            : colors.value.baseContrast,
+          "--fs-tag-hover-color"            : colors.value.baseContrast!,
           "--fs-tag-active-background-color": colors.value.dark,
-          "--fs-tag-active-color"           : colors.value.darkContrast
+          "--fs-tag-active-color"           : colors.value.darkContrast!
         };
         case "full": return {
           "--fs-tag-background-color"       : colors.value.base,
-          "--fs-tag-color"                  : colors.value.baseContrast,
+          "--fs-tag-color"                  : colors.value.baseContrast!,
           "--fs-tag-hover-background-color" : colors.value.base,
-          "--fs-tag-hover-color"            : colors.value.baseContrast,
+          "--fs-tag-hover-color"            : colors.value.baseContrast!,
           "--fs-tag-active-background-color": colors.value.dark,
-          "--fs-tag-active-color"           : colors.value.darkContrast
+          "--fs-tag-active-color"           : colors.value.darkContrast!
         };
       }
     });

package/components/FSTagGroup.vue

@@ -32,11 +32,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSWrapGroup from "./FSWrapGroup.vue";
 import FSTag from "./FSTag.vue";
@@ -66,7 +64,7 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     editable: {
       type: Boolean,

package/components/FSText.vue

@@ -11,12 +11,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSText",
@@ -27,7 +25,7 @@ export default defineComponent({
       default: null
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },
@@ -58,6 +56,11 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
+    const style = computed((): StyleValue => ({
+      "--fs-span-line-clamp": props.lineClamp.toString(),
+      "--fs-text-color"     : colors.value[props.variant]!
+    }));
+
     const classes = computed((): string[] => {
       const classNames = ["fs-text", props.font];
       if (!slots.default) {
@@ -72,13 +75,6 @@ export default defineComponent({
       return classNames;
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-span-line-clamp": props.lineClamp.toString(),
-        "--fs-text-color"     : colors.value[props.variant]
-      };
-    });
-
     return {
       classes,
       style

package/components/FSWindow.vue

@@ -16,6 +16,7 @@
     </template>
     <v-window-item
       v-for="(component, index) in getChildren()"
+      class="fs-window-item"
       :value="value(component, index)"
       :key="index"
     >
@@ -27,8 +28,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType, VNode } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue, type VNode } from "vue";
 
 import { useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
@@ -40,6 +40,11 @@ export default defineComponent({
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
     }
   },
   setup(props) {
@@ -47,8 +52,9 @@ export default defineComponent({
 
     delete slots.default;
 
-    const style = computed((): { [key: string] : string | null | undefined } => ({
-      "--fs-window-width": sizeToVar(props.width)
+    const style = computed((): StyleValue => ({
+      "--fs-window-width": sizeToVar(props.width),
+      "--fs-window-height": sizeToVar(props.height)
     }));
 
     const value = (component: VNode, index: number): any => {
@@ -60,7 +66,7 @@ export default defineComponent({
       style,
       getChildren,
       value
-    }
+    };
   }
 });
 </script>

package/components/FSWrapGroup.vue

@@ -19,8 +19,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, onMounted, onUnmounted, ref } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, type StyleValue, ref } from "vue";
 
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -30,6 +29,16 @@ import { uuidv4 } from "@dative-gpi/bones-ui/tools/uuid";
 export default defineComponent({
   name: "FSWrapGroup",
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
@@ -52,11 +61,13 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
       "--fs-group-color"      : darks.soft,
-      "--fs-group-hover-color": darks.dark
+      "--fs-group-hover-color": darks.dark,
+      "--fs-group-height"     : sizeToVar(props.height),
+      "--fs-group-width"      : sizeToVar(props.width)
     }));
 
     onMounted((): void => {

package/components/agenda/FSAgenda.vue

@@ -0,0 +1,204 @@
+<template>
+  <FSCol
+    v-if="$props.start && $props.end"
+    :height="$props.height"
+    :width="$props.width"
+    gap="24px"
+  >
+    <FSAgendaHeader
+      :mode="$props.mode!"
+      :start="$props.start"
+      :end="$props.end"
+      :now="now"
+      @update:start="($event) => $emit('update:start', $event)"
+      @update:end="($event) => $emit('update:end', $event)"
+      @update:mode="($event) => $emit('update:mode', $event)"
+    />
+    <FSCol
+      class="fs-agenda-view"
+      height="100%"
+      gap="0"
+    >
+      <FSWindow
+        v-if="$props.mode"
+        :modelValue="$props.mode"
+        width="100%"
+        height="100%"
+      >
+        <FSDayAgenda
+          :value="AgendaMode.Day"
+          :events="$props.events"
+          :firstColumnWidth="dayColumnWidth"
+          :start="$props.start"
+          :end="$props.end"
+          :now="now"
+          :nowIsInSelectedRange="nowIsInSelectedRange"
+          :loading="$props.loading"
+          @click:event-id="$emit('click:eventId', $event)"
+        >
+          <FSAgendaVerticalTimeLineMarker
+            v-if="nowIsInSelectedRange"
+            :modelValue="now"
+          />
+        </FSDayAgenda>
+        <FSWeekAgenda
+          :value="AgendaMode.Week"
+          :events="$props.events"
+          :firstColumnWidth="dayColumnWidth"
+          :start="$props.start"
+          :end="$props.end"
+          :now="now"
+          :nowIsInSelectedRange="nowIsInSelectedRange"
+          :loading="$props.loading"
+          @click:event-id="$emit('click:eventId', $event)"
+        >
+          <FSAgendaHorizontalTimeLineMarker
+            v-if="nowIsInSelectedRange"
+            :modelValue="now"
+          />
+        </FSWeekAgenda>
+        <FSMonthAgenda
+          :value="AgendaMode.Month"
+          :events="$props.events"
+          :firstColumnWidth="dayColumnWidth"
+          :start="$props.start"
+          :end="$props.end"
+          :now="now"
+          :nowIsInSelectedRange="nowIsInSelectedRange"
+          :loading="$props.loading"
+          @click:event-id="$emit('click:eventId', $event)"
+        >
+          <FSAgendaHorizontalTimeLineMarker
+            v-if="nowIsInSelectedRange"
+            :modelValue="now"
+          />
+        </FSMonthAgenda>
+      </FSWindow>
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType, computed, ref, onUnmounted, watch, onMounted } from 'vue';
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import type { FSAgendaEvent } from "@dative-gpi/foundation-shared-components/models";
+import { AgendaMode } from '@dative-gpi/foundation-shared-domain/enums/agendas';
+
+import FSAgendaVerticalTimeLineMarker from './FSAgendaVerticalTimeLineMarker.vue';
+import FSMonthAgenda from './FSMonthAgenda.vue';
+import FSWeekAgenda from './FSWeekAgenda.vue';
+import FSDayAgenda from './FSDayAgenda.vue';
+import FSAgendaHorizontalTimeLineMarker from './FSAgendaHorizontalTimeLineMarker.vue';
+import FSAgendaHeader from './FSAgendaHeader.vue';
+import FSWindow from '../FSWindow.vue';
+import FSCol from '../FSCol.vue';
+
+
+export default defineComponent({
+  name: 'FSAgenda',
+  components: {
+    FSAgendaHeader,
+    FSAgendaHorizontalTimeLineMarker,
+    FSAgendaVerticalTimeLineMarker,
+    FSCol,
+    FSDayAgenda,
+    FSMonthAgenda,  
+    FSWeekAgenda,
+    FSWindow
+  },
+  props: {
+    mode: {
+      type: Number as PropType<AgendaMode>,
+      default: AgendaMode.Week
+    },
+    height: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "100%"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
+      required: false,
+      default: "100%"
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    events: {
+      type: Array as PropType<FSAgendaEvent[]>,
+      default: () => []
+    },
+    start: {
+      type: Number as PropType<number | null>,
+      required: false
+    },
+    end: {
+      type: Number as PropType<number | null>,
+      required: false
+    }
+  },
+  emits: ['update:mode', 'click:eventId', 'update:start', 'update:end'],
+  setup(props, { emit }) {
+    const { todayToEpoch, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
+    const { isExtraSmall } = useBreakpoints();
+
+    const dayColumnWidth = '46px';
+
+    const now = ref(todayToEpoch());
+    const defaultMode = ref(props.mode);
+
+    const nowIsInSelectedRange = computed(() => {
+      if (!props.start || !props.end) {
+        return false;
+      }
+      return now.value >= props.start && now.value <= props.end;
+    });
+
+    const nowInterval = setInterval(() => {
+      now.value = todayToEpoch();
+    }, 10000);
+
+    onMounted(() => {
+      if(props.end && props.start) {
+        return;
+      }
+      if (props.mode === AgendaMode.Week) {
+        emit("update:start", epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000));
+        emit("update:end", epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000));
+        return;
+      }
+      if (props.mode === AgendaMode.Month) {
+        const lastDayOfMonth = new Date(new Date(now.value).getFullYear(), new Date(now.value).getMonth() + 1, 0);
+        emit("update:start", epochToLocalDayStart(new Date(now.value).setDate(1)));
+        emit("update:end", lastDayOfMonth.getTime());
+        return;
+      }
+      emit("update:start", epochToLocalDayStart(now.value));
+      emit("update:end", epochToLocalDayEnd(now.value));
+    });
+
+    onUnmounted(() => {
+      clearInterval(nowInterval);
+    });
+
+    watch(isExtraSmall, (value) => {
+      if (value && props.mode !== AgendaMode.Day) {
+        emit('update:mode', AgendaMode.Day);
+      } else if (!value && defaultMode.value !== AgendaMode.Day) {
+        emit('update:mode', defaultMode.value);
+      }
+    });
+
+    return {
+      AgendaMode,
+      dayColumnWidth,
+      now,
+      nowIsInSelectedRange
+    };
+  }
+});
+</script>

package/components/agenda/FSAgendaDialogCalendar.vue

@@ -0,0 +1,76 @@
+<template>
+  <FSDialog
+    :modelValue="$props.dialog"
+    @update:modelValue="$emit('update:dialog', $event)"
+  >
+    <FSCard
+      :elevation="true"
+    >
+      <FSCol
+        gap="12px"
+        padding="16px"
+      >
+        <FSCalendar
+          v-model="calendarValue"
+        />
+        <FSButton
+          color="primary"
+          width="100%"
+          :label="$tr('ui.agenda.calendar.dialog.submit', 'Validate')"
+          @click="onSubmit"
+        />
+      </FSCol>
+    </FSCard>
+  </FSDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue';
+
+import FSCalendar from '../FSCalendar.vue';
+import FSButton from '../FSButton.vue';
+import FSCard from '../FSCard.vue';
+import FSCol from '../FSCol.vue';
+import FSDialog from '../FSDialog.vue';
+
+export default defineComponent({
+  name: 'FSAgendaDialogCalendar',
+  components: {
+    FSCalendar,
+    FSButton,
+    FSCard,
+    FSCol,
+    FSDialog,
+  },
+  props: {
+    dialog: {
+      type: Boolean,
+      required: true,
+    },
+    modelValue: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ['update:modelValue', 'update:dialog'],
+  setup(props, { emit }) {
+    const calendarValue = ref<number>(props.modelValue);
+
+    const onSubmit = () => {
+      emit('update:modelValue', calendarValue.value);
+      emit('update:dialog', false);
+    };
+
+    watch(() => props.modelValue, (newValue) => {
+      if (newValue) {
+        calendarValue.value = newValue;
+      }
+    }, {immediate: true});
+
+    return {
+      calendarValue,
+      onSubmit
+    };
+  },
+});
+</script>