@dative-gpi/foundation-shared-components 0.0.8 → 0.0.9

package/components/FSDateTimeRangeField.vue

@@ -0,0 +1,286 @@
+<template>
+  <FSTextField
+    class="fs-date-field"
+    :label="$props.label"
+    :description="$props.description"
+    :color="$props.color"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :error="messages.length > 0"
+    :readonly="true"
+    :modelValue="placeholder"
+    @click="onClick"
+    @click:clear="onClear"
+  >
+    <template v-if="!$props.hideHeader" #label>
+      <slot name="label">
+        <FSRow :wrap="false">
+          <FSSpan
+            v-if="$props.label"
+            class="fs-date-field-label"
+            font="text-overline"
+            :style="style"
+          >
+            {{ $props.label }}
+          </FSSpan>
+          <FSSpan
+            v-if="$props.label && $props.required"
+            class="fs-date-field-label"
+            style="margin-left: -8px;"
+            font="text-overline"
+            :ellipsis="false"
+            :style="style"
+          >
+            *
+          </FSSpan>
+          <v-spacer style="min-width: 40px;" />
+          <FSSpan
+            v-if="messages.length > 0"
+            class="fs-date-field-messages"
+            font="text-overline"
+            :style="style"
+          >
+            {{ messages.join(", ") }}
+          </FSSpan>
+        </FSRow>
+      </slot>
+    </template>
+    <template #prepend-inner>
+      <slot name="prepend-inner">
+        <FSButton
+          variant="icon"
+          icon="mdi-calendar"
+          :editable="$props.editable"
+          :color="ColorEnum.Dark"
+        />
+      </slot>
+    </template>
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+      <slot :name="name" v-bind="slotData" />
+    </template>
+  </FSTextField>
+  <FSSubmitDialog
+    :title="$props.label"
+    :rightButtonColor="$props.color"
+    @click:rightButton="onSubmit"
+    v-model="dialog"
+  >
+    <template #body>
+      <FSCol>
+        <FSCalendarTwin
+          :color="$props.color"
+          v-model="innerDateRange"
+        />
+        <FSRow>
+          <FSClock
+            :reminder="true"
+            :color="$props.color"
+            :date="innerDateLeft"
+            v-model="innerTimeLeft"
+          />
+          <FSClock
+            :reminder="true"
+            :color="$props.color"
+            :date="innerDateRight"
+            v-model="innerTimeRight"
+          />
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSSubmitDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSSubmitDialog from "./FSSubmitDialog.vue";
+import FSCalendarTwin from "./FSCalendarTwin.vue";
+import FSTextField from "./FSTextField.vue";
+import FSButton from "./FSButton.vue";
+import FSClock from "./FSClock.vue";
+import FSCard from "./FSCard.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+  name: "FSDateTimeRangeField",
+  components: {
+    FSSubmitDialog,
+    FSCalendarTwin,
+    FSTextField,
+    FSButton,
+    FSClock,
+    FSCard,
+    FSCol
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<number[]>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<Function[]>,
+      required: false,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getUserOffsetMillis, epochToShortTimeFormat } = useTimeZone();
+
+    const errors = useColors().getColors(ColorEnum.Error);
+    const lights = useColors().getColors(ColorEnum.Light);
+    const darks = useColors().getColors(ColorEnum.Dark);
+
+    const dialog = ref(false);
+
+    // FSClock just gives two numbers without consideration for the time zone
+    // We must adjust the time to the user's time zone
+    const innerTimeLeft = ref(0);
+    const innerTimeRight = ref(0);
+    const innerDateRange = ref(null);
+    if (props.modelValue && Array.isArray(props.modelValue)) {
+      switch (props.modelValue.length) {
+        case 0: {
+          break;
+        }
+        case 1: {
+          innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+          innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
+        }
+        default: {
+          innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+          innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffsetMillis()) % (24 * 60 * 60 * 1000));
+          innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
+        }
+      }
+    }
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        return {
+          "--fs-date-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-date-field-color"      : darks.base,
+        "--fs-date-field-error-color": errors.base
+      };
+    });
+
+    const placeholder = computed((): string => {
+      if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
+        return "";
+      }
+      return props.modelValue.map((epoch) => epochToShortTimeFormat(epoch)).join(" - ");
+    });
+
+    const messages = computed((): string[] => {
+      const messages = [];
+      for (const rule of props.rules) {
+        if (props.modelValue && Array.isArray(props.modelValue)) {
+          for (const value of props.modelValue) {
+            const message = rule(value);
+            if (typeof(message) === "string") {
+              messages.push(message);
+              break;
+            }
+          }
+        }
+        else {
+          const message = rule(null);
+          if (typeof(message) === "string") {
+            messages.push(message);
+          }
+        }
+      }
+      return messages;
+    });
+
+    const innerDateLeft = computed((): number | null => {
+      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length) {
+        return innerDateRange.value[0];
+      }
+      return null;
+    });
+
+    const innerDateRight= computed((): number | null => {
+      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1) {
+        return innerDateRange.value[1];
+      }
+      return null;
+    });
+
+    const onClick = (): void => {
+      if (props.editable) {
+        dialog.value = true;
+      }
+    };
+
+    const onClear = (): void => {
+      emit("update:modelValue", null);
+      innerTimeLeft.value = 0;
+      innerTimeRight.value = 0;
+      innerDateRange.value = null;
+    };
+
+    const onSubmit = (): void => {
+      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1) {
+        emit("update:modelValue", [innerDateRange.value[0] + innerTimeLeft.value, innerDateRange.value[1] + innerTimeRight.value]);
+      }
+      dialog.value = false;
+    };
+
+    return {
+      ColorEnum,
+      messages,
+      style,
+      dialog,
+      placeholder,
+      innerDateLeft,
+      innerTimeLeft,
+      innerDateRight,
+      innerTimeRight,
+      innerDateRange,
+      onClick,
+      onClear,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/FSDialog.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-dialog
+    transition="dialog-bottom-transition"
+    :width="width"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <FSCard
+      padding="24px"
+      gap="24px"
+      :width="width"
+      :class="classes"
+      :color="$props.color"
+      :border="!isExtraSmall"
+    >
+      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </FSCard>
+    <FSButton
+      class="fs-dialog-close-button"
+      variant="icon"
+      icon="mdi-close"
+      :color="ColorEnum.Dark"
+      @click="$emit('update:modelValue', false)"
+    />
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSButton from "./FSButton.vue";
+import FSCard from "./FSCard.vue";
+import FSCol from "./FSCol.vue";
+
+export default defineComponent({
+  name: "FSDialog",
+  components: {
+    FSButton,
+    FSCard,
+    FSCol
+  },
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    width: {
+      type: [String, Number],
+      required: false,
+      default: "auto"
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    },
+    cardClasses: {
+      type: [Array, String] as PropType<string[] | string>,
+      required: false,
+      default: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
+
+    const classes = computed((): string[] => {
+      const innerClasses = ["fs-dialog"];
+      if (Array.isArray(props.cardClasses)) {
+        innerClasses.push(...props.cardClasses);
+      }
+      else {
+        innerClasses.push(props.cardClasses);
+      }
+      if (isExtraSmall.value) {
+        innerClasses.push("fs-dialog-mobile");
+      }
+      return innerClasses;
+    });
+
+    const width = computed((): string | number => {
+      if (isExtraSmall.value) {
+        return "100%";
+      }
+      return props.width;
+    });
+
+    return {
+      ColorEnum,
+      isExtraSmall,
+      classes,
+      width
+    };
+  }
+});
+</script>

package/components/FSDivider.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="fs-divider"
+    :style="style"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+
+export default defineComponent({
+  name: "FSDivider",
+  props: {
+    width: {
+      type: [String, Number],
+      required: false,
+      default: "100%"
+    }
+  },
+  setup(props) {
+    const lights = useColors().getColors(ColorEnum.Light);
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+        return {
+            "--fs-divider-width": sizeToVar(props.width),
+            "--fs-divider-color": lights.dark
+        }
+    });
+
+    return {
+      style
+    }
+  }
+});
+</script>

package/components/FSFadeOut.vue

@@ -1,72 +1,62 @@
 <template>
-    <div
-        class="fs-fade-out"
-        :style="style"
-        fluid
-        @scroll="onScroll"
-    >
-        <div class="fs-fade-out-top" />
-        <FSCol height="fill">
-            <slot />
-        </FSCol>
-        <div class="fs-fade-out-bottom" />
-    </div>
+  <div
+    class="fs-fade-out"
+    :style="style"
+    @scroll="onScroll"
+  >
+    <div class="fs-fade-out-top" />
+    <slot />
+    <div class="fs-fade-out-bottom" />
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, Ref, ref, toRefs } from "vue";
+import { defineComponent, Ref, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSCol from "./FSCol.vue";
 
 export default defineComponent({
-    name: "FSFadeOut",
-    components: {
-        FSCol
-    },
-    props: {
-        maskHeight: {
-            type: Number,
-            required: false,
-            default: 64
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Background
-        }
-    },
-    setup(props) {
-        const { maskHeight, color } = toRefs(props);
-
-        const colors = useColors().getColors(color.value);
-
-        const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
-            "--fs-fade-out-mask-color": colors.base,
-            "--fs-fade-out-top-mask-height": "0px",
-            "--fs-fade-out-bottom-mask-height": `${maskHeight.value}px`
-        });
-
-        const onScroll = ({ target }): void => {
-            if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
-                style.value["--fs-fade-out-bottom-mask-height"] = "0px";
-            } else {
-                style.value["--fs-fade-out-bottom-mask-height"] = `${maskHeight.value}px`;
-            }
-            if (target.scrollTop === 0) {
-                style.value["--fs-fade-out-top-mask-height"] = "0px";
-            }
-            else {
-                style.value["--fs-fade-out-top-mask-height"] = `${maskHeight.value}px`;
-            }
-        }
-
-        return {
-            style,
-            onScroll
-        };
+  name: "FSFadeOut",
+  components: {
+    FSCol
+  },
+  props: {
+    maskHeight: {
+      type: Number,
+      required: false,
+      default: 64
+    }
+  },
+  setup(props) {
+    const backgrounds = useColors().getColors(ColorEnum.Background);
+
+    const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
+      "--fs-fade-out-mask-color"        : backgrounds.base,
+      "--fs-fade-out-top-mask-height"   : "0px",
+      "--fs-fade-out-bottom-mask-height": `${props.maskHeight}px`
+    });
+
+    const onScroll = ({ target }): void => {
+      if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
+        style.value["--fs-fade-out-bottom-mask-height"] = "0px";
+      } else {
+        style.value["--fs-fade-out-bottom-mask-height"] = `${props.maskHeight}px`;
+      }
+      if (target.scrollTop === 0) {
+        style.value["--fs-fade-out-top-mask-height"] = "0px";
+      }
+      else {
+        style.value["--fs-fade-out-top-mask-height"] = `${props.maskHeight}px`;
+      }
     }
+
+    return {
+      style,
+      onScroll
+    };
+  }
 });
 </script>