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

package/components/FSTextField.vue

@@ -1,67 +1,67 @@
 <template>
-    <FSCol>
-        <slot name="label">
-            <FSRow :wrap="false">
-                <FSSpan
-                    v-if="$props.label"
-                    class="fs-text-field-label"
-                    font="text-overline"
-                    :style="style"
-                >
-                    {{ $props.label }}
-                </FSSpan>
-                <FSSpan
-                    v-if="$props.label && $props.required"
-                    class="fs-text-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-text-field-messages"
-                    font="text-overline"
-                    :style="style"
-                >
-                    {{ messages.join(", ") }}
-                </FSSpan>
-            </FSRow>
-        </slot>
-        <v-text-field
-            class="fs-text-field"
-            variant="outlined"
-            hide-details
-            :style="style"
-            :type="$props.type"
-            :rules="$props.rules"
-            :readonly="!$props.editable"
-            :modelValue="$props.value"
-            @update:modelValue="(value) => $emit('update:value', value)"
-            v-bind="$attrs"
+  <FSCol>
+    <slot name="label">
+      <FSRow :wrap="false">
+        <FSSpan
+          v-if="$props.label"
+          class="fs-text-field-label"
+          font="text-overline"
+          :style="style"
         >
-            <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-            </template>
-        </v-text-field>
-        <slot name="description">
-            <FSSpan
-                v-if="$props.description"
-                class="fs-text-field-description"
-                font="text-underline"
-                :style="style"
-            >
-                {{ $props.description }}
-            </FSSpan>
-        </slot>
-    </FSCol>
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-text-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-text-field-messages"
+          font="text-overline"
+          :style="style"
+        >
+          {{ messages.join(", ") }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <v-text-field
+      class="fs-text-field"
+      variant="outlined"
+      hide-details
+      :style="style"
+      :type="$props.type"
+      :rules="$props.rules"
+      :readonly="!$props.editable"
+      :modelValue="$props.modelValue"
+      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      v-bind="$attrs"
+    >
+      <template v-for="(_, name) in slots" v-slot:[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </v-text-field>
+    <slot name="description">
+      <FSSpan
+        v-if="$props.description"
+        class="fs-text-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs } from "vue";
+import { computed, defineComponent, PropType, toRefs, useSlots } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
@@ -71,99 +71,104 @@ import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-    name: "FSTextField",
-    components: {
-        FSSpan,
-        FSCol,
-        FSRow
+  name: "FSTextField",
+  components: {
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      required: true,
+      default: null
     },
-    inheritAttrs: false,
-    props: {
-        label: {
-            type: String,
-            required: true,
-            default: null
-        },
-        description: {
-            type: String,
-            required: false,
-            default: null
-        },
-        type: {
-            type: String as PropType<"text" | "password" | "number">,
-            required: false,
-            default: "text"
-        },
-        value: {
-            type: String,
-            required: false,
-            default: null
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        },
-        required: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
-        rules: {
-            type: Array as PropType<Function[]>,
-            required: false,
-            default: () => []
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    description: {
+      type: String,
+      required: false,
+      default: null
     },
-    emits: ["update:value"],
-    setup(props) {
-        const { color, editable } = toRefs(props);
-
-        const colors = useColors().getColors(color.value);
-
-        const errors = useColors().getColors(ColorBase.Error);
-        const lights = useColors().getColors(ColorBase.Light);
-        const darks = useColors().getColors(ColorBase.Dark);
+    type: {
+      type: String as PropType<"text" | "password" | "number">,
+      required: false,
+      default: "text"
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Dark
+    },
+    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) {
+    const { color, rules, editable } = toRefs(props);
+    
+    const slots = { ...useSlots() };
+    delete slots.label;
+    delete slots.description;
 
-        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-            if (!editable.value) {
-                return {
-                    "--fs-text-field-cursor"             : "default",
-                    "--fs-text-field-border-color"       : lights.base,
-                    "--fs-text-field-color"              : lights.dark,
-                    "--fs-text-field-active-border-color": lights.base
-                };
-            }
-            return {
-                "--fs-text-field-cursor"             : "text",
-                "--fs-text-field-border-color"       : colors.base,
-                "--fs-text-field-color"              : darks.base,
-                "--fs-text-field-active-border-color": colors.dark,
-                "--fs-text-field-error-color"        : errors.base,
-                "--fs-text-field-error-border-color" : errors.base
-            };
-        });
+    const colors = useColors().getColors(color.value);
 
-        const messages = computed(() => {
-            const messages = [];
-            for (const rule of props.rules) {
-                const message = rule(props.value);
-                if (typeof(message) === "string") {
-                    messages.push(message);
-                }
-            }
-            return messages;
-        });
+    const errors = useColors().getColors(ColorBase.Error);
+    const lights = useColors().getColors(ColorBase.Light);
+    const darks = useColors().getColors(ColorBase.Dark);
 
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      if (!editable.value) {
         return {
-            messages,
-            style
+          "--fs-text-field-cursor"             : "default",
+          "--fs-text-field-border-color"       : lights.base,
+          "--fs-text-field-color"              : lights.dark,
+          "--fs-text-field-active-border-color": lights.base
         };
-    }
+      }
+      return {
+        "--fs-text-field-cursor"             : "text",
+        "--fs-text-field-border-color"       : colors.base,
+        "--fs-text-field-color"              : darks.base,
+        "--fs-text-field-active-border-color": colors.dark,
+        "--fs-text-field-error-color"        : errors.base,
+        "--fs-text-field-error-border-color" : errors.base
+      };
+    });
+
+    const messages = computed((): string[] => {
+      const messages = [];
+      for (const rule of rules.value) {
+        const message = rule(props.modelValue ?? "");
+        if (typeof(message) === "string") {
+          messages.push(message);
+        }
+      }
+      return messages;
+    });
+
+    return {
+      messages,
+      slots,
+      style
+    };
+  }
 });
 </script>

package/composables/index.ts

@@ -1,2 +1,3 @@
+export * from "./useBreakpoints";
 export * from "./useColors";
-export * from "./useTouch";
+export * from "./useDates";

package/composables/useBreakpoints.ts

@@ -0,0 +1,14 @@
+export const useBreakpoints = () => {
+    const isTouchScreenEnabled = (): boolean => {
+        return navigator.maxTouchPoints > 0;
+    };
+
+    const isMobileSized = (): boolean => {
+        return window.innerWidth < 1264;
+    };
+
+    return {
+        isTouchScreenEnabled,
+        isMobileSized
+    };
+}

package/composables/useDates.ts

@@ -0,0 +1,39 @@
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+export const useDates = () => {
+    const { getMachineOffset, getMachineOffsetMillis, getUserOffset, getUserOffsetMillis } = useTimeZone();
+
+    const pickerToEpoch = (value: Date[]): number[] => {
+        // FSCalendar is always in machine time zone, so we need to convert it to user time zone
+        return value.slice()
+            .map(date => date.getTime() + getMachineOffsetMillis() - getUserOffsetMillis())
+            .sort();
+    };
+
+    const epochToPicker = (value: number[]): Date[] => {
+        // Epoch is always without time zone, so we need to convert it to user time zone
+        return value.slice()
+            .sort((a, b) => b - a)
+            .map(epoch => {
+                const date = new Date(0);
+                date.setUTCMilliseconds(epoch - getMachineOffsetMillis() + getUserOffsetMillis());
+                return date;
+        });
+    };
+
+    const epochToPickerHeader = (value: number): { d: number, m: number, y: number } => {
+        const date = new Date(0);
+        date.setUTCMilliseconds(value - getMachineOffsetMillis() + getUserOffsetMillis());
+        return { d: date.getDate(), m: date.getMonth(), y: date.getFullYear() };
+    };
+
+    return {
+        getUserOffset,
+        getUserOffsetMillis,
+        getMachineOffset,
+        getMachineOffsetMillis,
+        pickerToEpoch,
+        epochToPicker,
+        epochToPickerHeader
+    };
+}

package/models/FSTextFields.ts

@@ -1,7 +1,7 @@
 export const TextRules = {
     required: (message: string) => (value: string) => !!value || (message ?? "Required"),
-    minLength: (length: number, message: string) => (value: string) => value.length >= length || (message ?? `Must be at least ${length} characters`),
-    maxLength: (length: number, message: string) => (value: string) => value.length <= length || (message ?? `Must be at most ${length} characters`),
+    min: (length: number, message: string) => (value: string) => value.length >= length || (message ?? `Must be at least ${length} characters`),
+    max: (length: number, message: string) => (value: string) => value.length <= length || (message ?? `Must be at most ${length} characters`),
     email: (message: string) => (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || (message ?? "Must be a valid email"),
     digit: (message: string) => (value: string) => /(?=.*\d)/.test(value) || (message ?? "Must contain a digit"),
     uppercase: (message: string) => (value: string) => /(?=.*[A-Z])/.test(value) || (message ?? "Must contain an uppercase letter"),
@@ -9,9 +9,15 @@ export const TextRules = {
     special: (message: string) => (value: string) => /(?=.*[!@#$%^&*])/.test(value) || (message ?? "Must contain a special character")
 };
 
+export const TagRules = {
+    required: (message: string) => (value: string[]) => value.length > 0 || (message ?? "Required"),
+    min: (min: number, message: string) => (value: string[]) => value.length >= min || (message ?? `Must contain at least ${min} elements`),
+    max: (max: number, message: string) => (value: string[]) => value.length <= max || (message ?? `Must contain at most ${max} elements`)
+};
+
 export const NumberRules = {
-    required: (message: string) => (value: number) => !!value || (message ?? "Required"),
-    min: (min: number, message: string) => (value: number) => value >= min || (message ?? `Must be at least ${min}`),
-    max: (max: number, message: string) => (value: number) => value <= max || (message ?? `Must be at most ${max}`),
-    integer: (message: string) => (value: number) => Number.isInteger(value) || (message ?? "Must be an integer")
+    required: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value))) || (message ?? "Required"),
+    min: (min: number, message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) >= min) || (message ?? `Must be at least ${min}`),
+    max: (max: number, message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && parseFloat(value) <= max) || (message ?? `Must be at most ${max}`),
+    integer: (message: string) => (value: string) => (!!value && !isNaN(parseFloat(value)) && Number.isInteger(parseFloat(value))) || (message ?? "Must be an integer")
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -9,10 +9,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.7",
-    "@dative-gpi/foundation-shared-services": "0.0.7",
+    "@dative-gpi/foundation-shared-domain": "0.0.8",
+    "@dative-gpi/foundation-shared-services": "0.0.8",
     "@fontsource/montserrat": "^5.0.16",
+    "@lexical/history": "^0.12.5",
+    "@lexical/link": "^0.12.5",
+    "@lexical/plain-text": "^0.12.5",
+    "@lexical/rich-text": "^0.12.5",
+    "@lexical/selection": "^0.12.5",
+    "@lexical/text": "^0.12.5",
+    "@lexical/utils": "^0.12.5",
     "color": "^4.2.3",
+    "lexical": "^0.12.5",
     "vue": "^3.2.0"
   },
   "devDependencies": {
@@ -20,5 +28,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "970e56be5ba41712db154bd27ad98962dbeb802e"
+  "gitHead": "b3393ad0a66fda249e1b2d3582af86e961553453"
 }

package/styles/components/fs_button.scss

@@ -37,19 +37,11 @@
 .fs-button-icon {
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
     color: var(--fs-button-color) !important;
+    width: 20px !important;
+    height: 20px !important;
 
     &:not(.fs-button--disabled):hover {
         color: var(--fs-button-hover-color) !important;
         cursor: pointer !important;
     }
-
-    @include web {
-        width: 24px !important;
-        height: 24px !important;
-    }
-
-    @include mobile {
-        width: 18px !important;
-        height: 18px !important;
-    }
 }

package/styles/components/fs_calendar.scss

@@ -0,0 +1,115 @@
+.fs-calendar {
+    background-color: var(--fs-calendar-background-color) !important;
+    color: var(--fs-calendar-color) !important;
+    
+    border: 1px solid var(--fs-calendar-border-color) !important;
+    border-radius: 4px !important;
+    padding: 8px !important;
+
+    & > .v-locale-provider > .v-date-picker-month {
+        padding: 0 !important;
+    }
+}
+
+.fs-calendar-header {
+    justify-content: space-between !important;
+    padding: 8px 0 !important;
+}
+
+.fs-calendar-text {
+    text-transform: capitalize !important;
+}
+
+.fs-calendar-divider {
+    border-bottom: 1px solid var(--fs-calendar-border-color) !important;
+    width: 100% !important;
+}
+
+.v-date-picker-month__day > button {
+    @extend .text-body;
+
+    border-radius: 4px !important;
+    height: 48px !important;
+    width: 48px !important;
+}
+
+.v-date-picker-month__days {
+    gap: 4px !important;
+}
+
+.v-date-picker-month__day:not(.v-date-picker-month__day--selected) > button {
+    background-color: var(--fs-calendar-background-color);
+    border-color: transparent;
+    border: none;
+
+    &.v-btn--variant-outlined {
+        border: 1px solid var(--fs-calendar-hover-border-color);
+    }
+}
+
+.v-date-picker-month__day:not(.v-date-picker-month__day--selected):hover > button {
+    background-color: var(--fs-calendar-hover-background-color);
+    border: 1px solid var(--fs-calendar-hover-border-color);
+    color: var(--fs-calendar-hover-color);
+}
+
+.v-date-picker-month__day--selected > button {
+    background-color: var(--fs-calendar-active-background-color) !important;
+    border: 1px solid var(--fs-calendar-active-border-color) !important;
+    color: var(--fs-calendar-active-color) !important;
+}
+
+.fs-calendar-full {
+    & .v-date-picker-month__day > button {
+        background-color: var(--fs-calendar-hover-background-color);
+        border: 1px solid var(--fs-calendar-hover-border-color);
+        color: var(--fs-calendar-hover-color);
+    }
+}
+
+.fs-calendar-start {
+    & .v-date-picker-month__day--selected ~ .v-date-picker-month__day > button {
+        background-color: var(--fs-calendar-hover-background-color);
+        border: 1px solid var(--fs-calendar-hover-border-color);
+        color: var(--fs-calendar-hover-color);
+    }
+}
+
+.fs-calendar-end {
+    & .v-date-picker-month__day > button {
+        background-color: var(--fs-calendar-hover-background-color);
+        border: 1px solid var(--fs-calendar-hover-border-color);
+        color: var(--fs-calendar-hover-color);
+    }
+
+    & .v-date-picker-month__day--selected ~ .v-date-picker-month__day > button {
+        background-color: var(--fs-calendar-background-color);
+        border-color: transparent;
+        border: none;
+        color: var(--fs-calendar-color);
+    
+        &.v-btn--variant-outlined {
+            border: 1px solid var(--fs-calendar-hover-border-color);
+        }
+    }
+}
+
+.fs-calendar-part {
+    & .v-date-picker-month__day--selected ~ .v-date-picker-month__day--selected ~ .v-date-picker-month__day > button {
+        background-color: var(--fs-calendar-background-color);
+        border-color: transparent;
+        border: none;
+        color: var(--fs-calendar-color);
+    
+        &.v-btn--variant-outlined {
+            border: 1px solid var(--fs-calendar-hover-border-color);
+        }
+    }
+
+    & .v-date-picker-month__day--selected ~ .v-date-picker-month__day > button,
+    .v-date-picker-month__day--selected ~ .v-date-picker-month__day--selected ~ .v-date-picker-month__day:hover > button {
+        background-color: var(--fs-calendar-hover-background-color);
+        border: 1px solid var(--fs-calendar-hover-border-color);
+        color: var(--fs-calendar-hover-color);
+    }
+}

package/styles/components/fs_card.scss

@@ -0,0 +1,7 @@
+.fs-card {
+    padding: 8px;
+    display: flex;
+    border: 1px solid var(--fs-card-border-color);
+    border-radius: 4px;
+    background-color: var(--fs-card-background-color);
+}

package/styles/components/fs_icon.scss

@@ -3,15 +3,9 @@
 }
 
 .fs-icon-m {
-    @include web {
-        font-size: 20px !important;
-    }
-
-    @include mobile {
-        font-size: 16px !important;
-    }
+    font-size: 20px !important;
 }
 
-.fs-icon-checkbox {
-    font-size: 20px !important;
+.fs-icon-l {
+    font-size: 24px !important;
 }

package/styles/components/fs_rich_text_field.scss

@@ -0,0 +1,67 @@
+.fs-rich-text-field {
+    width: 100%;
+    outline: none !important;
+    border: 1px solid var(--fs-rich-text-field-border-color) !important;
+    border-radius: 4px !important;
+
+    min-height: var(--fs-rich-text-field-min-height);
+    color: var(--fs-rich-text-field-color);
+    margin: 2px 2px 2px 0 !important;
+
+
+    &:focus-within {
+        border-color: var(--fs-rich-text-field-active-border-color) !important;
+    }
+        
+    @include web {
+        padding: 10px 12px !important;
+    }
+
+    @include mobile {
+        padding: 6px 16px !important;
+    }
+
+}
+
+.fs-rich-text-field-undo {
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    cursor: var(--fs-rich-text-field-undo-cursor);
+}
+
+.fs-rich-text-field-icon {
+    transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    cursor: var(--fs-rich-text-field-icon-cursor);
+}
+
+.fs-rich-text-field-label {
+    color: var(--fs-rich-text-field-color);
+}
+
+.fs-rich-text-field-description {
+    color: var(--fs-rich-text-field-color);
+}
+
+.editor-text-underline {
+    text-decoration: underline;
+}
+
+.editor-text-bold {
+    font-weight: bold;
+}
+
+.editor-text-italic {
+    font-style: italic;
+}
+
+.editor-text-strikethrough {
+    text-decoration: line-through;
+}
+
+.editor-text-underline-strikethrough {
+    text-decoration: underline line-through;
+}
+
+.editor-link {
+    color: var(--fs-rich-text-field-link-color);
+    text-decoration: underline;
+}