@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

package/components/FSSwitch.vue

@@ -1,12 +1,13 @@
 <template>
   <FSCol
-    width="hug"
+    padding="8px 0px"
   >
     <FSRow
-      width="hug"
-      align="center-left"
+      gap="16px"
+      :wrap="false"
     >
       <v-switch
+        v-if="variant == 'left'"
         class="fs-switch"
         hide-details
         inset
@@ -14,11 +15,12 @@
         :rules="$props.rules"
         :ripple="false"
         :style="style"
+        :disabled="$props.disabled"
         :modelValue="$props.modelValue"
         @update:modelValue="onToggle"
         v-bind="$attrs"
       />
-      <slot>
+      <FSCol>
         <FSSpan
           v-if="$props.label"
           class="fs-switch-label"
@@ -28,20 +30,39 @@
         >
           {{ $props.label }}
         </FSSpan>
-      </slot>
-    </FSRow>
-    <slot
-      name="description"
-    >
-      <FSSpan
-        v-if="$props.description"
-        class="fs-switch-description"
-        font="text-overline"
-        :style="style"
+        <slot
+          name="description"
+        >
+          <FSSpan
+            v-if="$props.description"
+            class="fs-switch-description"
+            font="text-overline"
+            :style="style"
+            :lineClamp="2"
+          >
+            {{ $props.description }}
+          </FSSpan>
+        </slot>
+      </FSCol>
+      <FSRow
+        v-if="variant == 'right'"
+        align="center-right"
       >
-        {{ $props.description }}
-      </FSSpan>
-    </slot>
+        <v-switch
+          class="fs-switch"
+          hide-details
+          inset
+          :disabled="$props.disabled"
+          :validateOn="validateOn"
+          :rules="$props.rules"
+          :ripple="false"
+          :style="style"
+          :modelValue="$props.modelValue"
+          @update:modelValue="onToggle"
+          v-bind="$attrs"
+        />
+      </FSRow>
+    </FSRow>
   </FSCol>
 </template>
 
@@ -78,6 +99,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    variant: {
+      type: String as PropType<"left" | "right">,
+      required: false,
+      default: "left"
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
@@ -93,10 +119,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -111,7 +137,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-switch-translate-x": props.modelValue ? "8px" : "-8px",
           "--fs-switch-cursor"     : "default",
@@ -143,7 +169,7 @@ export default defineComponent({
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 
     const onToggle = (): void => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       emit("update:modelValue", !props.modelValue);

package/components/FSTab.vue

@@ -26,19 +26,6 @@
             {{ $props.label }}
           </FSSpan>
         </slot>
-        <v-spacer
-          v-if="$props.tag"
-        />
-        <slot
-          name="tag"
-        >
-          <FSSpan
-            v-if="$props.tag"
-            class="fs-tab-tag"
-          >
-            {{ $props.tag }}
-          </FSSpan>
-        </slot>
         <slot
           name="append"
         >
@@ -49,6 +36,21 @@
             {{ $props.appendIcon }}
           </FSIcon>
         </slot>
+        <FSRow
+          align="center-right"
+          :wrap="false"
+        >
+          <slot
+            name="tag"
+          >
+            <FSSpan
+              v-if="$props.tag"
+              class="fs-tab-tag"
+            >
+              {{ $props.tag }}
+            </FSSpan>
+          </slot>
+        </FSRow>
       </FSRow>
     </slot>
   </v-tab>

package/components/FSTabs.vue

@@ -7,7 +7,7 @@
     :style="style"
     :grow="true"
     :modelValue="$props.tab"
-    @update:modelValue="$emit('update:tab', $event)"
+    @update:modelValue="onUpdateTab($event)"
     v-bind="$attrs"
   >
     <slot/>
@@ -15,16 +15,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, onMounted, type PropType, type StyleValue } from "vue";
+import { useRouter } from "vue-router";
 
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSTabs",
   props: {
     tab: {
-      type: Number,
+      type: [String, Number, Object] as PropType<any>,
       required: false,
       default: 0
     },
@@ -32,10 +33,18 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
+    },
+    recordNavigation: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  setup(props) {
+  emits: ["update:tab"],
+  setup(props, { emit }) {
+    const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
+    const router = useRouter();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
@@ -48,11 +57,27 @@ export default defineComponent({
       "--fs-tab-hover-border-color"     : darks.dark,
       "--fs-tab-active-background-color": colors.value.light,
       "--fs-tab-tag-background-color"   : colors.value.base,
-      "--fs-tab-tag-color"              : colors.value.baseContrast!
+      "--fs-tab-tag-color"              : colors.value.baseContrast!,
+      "--fs-tab-height"                 : isMobileSized.value ? "40px" : "48px",
+      "--fs-tab-tag-size"               : isMobileSized.value ? "24px" : "28px"
     }));
 
+    const onUpdateTab = (tab: number): void => {
+      if (props.recordNavigation) {
+        router.replace({ query: { tab: tab.toString() } });
+      }
+      emit("update:tab", tab);
+    }
+
+    onMounted((): void => {
+      if (props.recordNavigation && router.currentRoute.value.query.tab) {
+        emit("update:tab", router.currentRoute.value.query.tab);
+      }
+    });
+
     return {
-      style
+      style,
+      onUpdateTab
     };
   }
 });

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"
@@ -22,7 +23,7 @@
       v-bind="{ color: $props.color, colors }"
     >
       <v-btn
-        v-if="$props.editable"
+        v-if="$props.showRemove"
         class="fs-tag-button"
         :ripple="false"
         @click="$emit('remove')"
@@ -55,6 +56,16 @@ export default defineComponent({
     FSRow
   },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => ["28px", "24px"]
+    },
+    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,
@@ -68,9 +79,9 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
-    editable: {
+    showRemove: {
       type: Boolean,
       required: false,
       default: true

package/components/FSTagGroup.vue

@@ -6,7 +6,7 @@
     <FSTag
       v-for="(tag, index) in $props.tags"
       :variant="$props.tagVariant"
-      :editable="$props.editable"
+      :showRemove="$props.showRemove"
       :color="$props.color"
       :label="tag"
       :key="index"
@@ -21,7 +21,7 @@
     <FSTag
       v-for="(tag, index) in $props.tags"
       :variant="$props.tagVariant"
-      :editable="$props.editable"
+      :showRemove="$props.showRemove"
       :color="$props.color"
       :label="tag"
       :key="index"
@@ -64,9 +64,9 @@ export default defineComponent({
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
-    editable: {
+    showRemove: {
       type: Boolean,
       required: false,
       default: true

package/components/FSText.vue

@@ -1,20 +1,22 @@
 <template>
-  <span
+  <div
     :class="classes"
     :style="style"
     v-bind="$attrs"
   >
-    <slot>
-      {{ $props.label }}
-    </slot>
-  </span>
+    <span>
+      <slot>
+        {{ $props.label }}
+      </slot>
+    </span>
+  </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { useBreakpoints, useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 
 export default defineComponent({
   name: "FSText",
@@ -51,6 +53,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { fontStyles } = useBreakpoints();
     const { getColors } = useColors();
     const { slots } = useSlots();
 
@@ -58,7 +61,8 @@ export default defineComponent({
 
     const style = computed((): StyleValue => ({
       "--fs-span-line-clamp": props.lineClamp.toString(),
-      "--fs-text-color"     : colors.value[props.variant]!
+      "--fs-text-color"     : colors.value[props.variant]!,
+      ...fontStyles.value
     }));
 
     const classes = computed((): string[] => {

package/components/FSToggleSet.vue

@@ -5,13 +5,13 @@
     :modelValue="$props.modelValue"
   >
     <FSWrapGroup
-      v-if="['wrap'].includes($props.variant)"
+      v-if="$props.variant && ['wrap'].includes($props.variant)"
       ref="toggleSetRef"
       :padding="$props.padding"
       :gap="$props.gap"
     >
       <template
-        v-if="$props.values.length"
+        v-if="$props.values && $props.values.length"
       >
         <template
           v-if="!$slots.item"
@@ -20,7 +20,7 @@
             v-for="(item, index) in $props.values"
             :prependIcon="item.prependIcon"
             :appendIcon="item.appendIcon"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :variant="getVariant(item)"
             :color="getColor(item)"
             :class="getClass(item)"
@@ -54,7 +54,7 @@
       :gap="$props.gap"
     >
       <template
-        v-if="$props.values.length"
+        v-if="$props.values && $props.values.length"
       >
         <template
           v-if="!$slots.item"
@@ -63,7 +63,7 @@
             v-for="(item, index) in $props.values"
             :prependIcon="item.prependIcon"
             :appendIcon="item.appendIcon"
-            :editable="$props.editable"
+            :disabled="$props.disabled"
             :variant="getVariant(item)"
             :color="getColor(item)"
             :class="getClass(item)"
@@ -197,10 +197,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/components/FSWindow.vue

@@ -1,8 +1,54 @@
 <template>
+  <template 
+    v-if="showError"
+  >
+    <slot 
+      name="error"
+      v-bind="{ goBack, width: $props.width, height: $props.height }"
+    >
+      <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"
-    :style="style"
+    ref="windowRef"
     :touch="false"
+    :style="style"
+    :modelValue="$props.modelValue"
     v-bind="$attrs"
   >
     <template
@@ -28,13 +74,28 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue, type VNode } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, type VNode, watch } from "vue";
 
 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>,
@@ -45,26 +106,82 @@ export default defineComponent({
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
       default: null
+    },
+    modelValue: {
+      type: [String, Number, Object] as PropType<any>,
+      required: false,
+      default: 0
     }
   },
-  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);
+
     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 => {
       return component?.props?.value ?? index;
     };
 
+    // Hide horizontal overflow when switching windows, otherwise let it visible for the FSFadeOut scrollbar
+    watch(() => props.modelValue, (): void => {
+      showOverflow.value = false;
+      if (overflowTimeout.value) {
+        clearTimeout(overflowTimeout.value);
+      }
+      overflowTimeout.value = setTimeout(() => {
+        showOverflow.value = true;
+      }, 560);
+    });
+
+    const showError = computed((): boolean => {
+      if (!windowRef.value) {
+        return false;
+      }
+
+      // 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;
+
+      if (!group.items.value.length) {
+        return false;
+      }
+      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,
+      showError,
       slots,
       style,
       getChildren,
+      goBack,
       value
     };
   }

package/components/FSWrapGroup.vue

@@ -29,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,
@@ -55,7 +65,9 @@ export default defineComponent({
       "--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

@@ -141,7 +141,7 @@ export default defineComponent({
       required: false
     }
   },
-  emits: ['update:mode', 'click:eventId', 'update:start', 'update:end'],
+  emits: ['update', 'update:mode', 'click:eventId', 'update:start', 'update:end'],
   setup(props, { emit }) {
     const { todayToEpoch, epochToLocalDayStart, epochToLocalDayEnd } = useDateFormat();
     const { isExtraSmall } = useBreakpoints();
@@ -167,18 +167,27 @@ export default defineComponent({
         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));
+        const newStart = epochToLocalDayStart(now.value - (new Date(now.value).getDay() - 1) * 24 * 60 * 60 * 1000);
+        const newEnd = epochToLocalDayEnd(now.value + (7 - new Date(now.value).getDay()) * 24 * 60 * 60 * 1000);
+        emit("update:start", newStart);
+        emit("update:end", newEnd);
+        emit("update", { start: newStart, end: newEnd, mode: props.mode });
         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());
+        const newStart = epochToLocalDayStart(new Date(now.value).setDate(1));
+        const newEnd = lastDayOfMonth.getTime()
+        emit("update:start", newStart);
+        emit("update:end", newEnd );
+        emit("update", { start: newStart, end: newEnd, mode: props.mode });
         return;
       }
-      emit("update:start", epochToLocalDayStart(now.value));
-      emit("update:end", epochToLocalDayEnd(now.value));
+      const newStart = epochToLocalDayStart(now.value);
+      const newEnd = epochToLocalDayEnd(now.value);
+      emit("update:start", newStart);
+      emit("update:end", newEnd);
+      emit("update", { start: newStart, end: newEnd, mode: props.mode });
     });
 
     onUnmounted(() => {
@@ -188,8 +197,18 @@ export default defineComponent({
     watch(isExtraSmall, (value) => {
       if (value && props.mode !== AgendaMode.Day) {
         emit('update:mode', AgendaMode.Day);
+        emit("update", {
+          start: props.start,
+          end: props.end,
+          mode: AgendaMode.Day
+        });
       } else if (!value && defaultMode.value !== AgendaMode.Day) {
         emit('update:mode', defaultMode.value);
+        emit("update", {
+          start: props.start,
+          end: props.end,
+          mode: defaultMode.value
+        });
       }
     });