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

package/components/FSButton.vue

@@ -1,42 +1,42 @@
 <template>
-    <v-btn
-         v-if="!['icon'].includes($props.variant)"
-        :ripple="false"
-        :style="style"
-        :class="classes"
-        @click="onClick"
-        v-bind="$attrs"
-    >
-        <FSRow :wrap="false">
-            <slot name="prepend" v-bind="{ color, colors }">
-                <FSIcon v-if="$props.prependIcon" size="m">
-                    {{ $props.prependIcon }}
-                </FSIcon>
-            </slot>
-            <slot name="default" v-bind="{ color, colors }">
-                <FSSpan v-if="$props.label" font="text-body">
-                    {{ $props.label }}
-                </FSSpan>
-            </slot>
-            <slot name="append" v-bind="{ color, colors }">
-                <FSIcon v-if="$props.appendIcon" size="m">
-                    {{ $props.appendIcon }}
-                </FSIcon>
-            </slot>
-        </FSRow>
-    </v-btn>
-    <FSRow
-        v-else-if="$props.icon"
-        width="hug"
-        :style="style"
-        :class="classes"
-        @click="onClick"
-        v-bind="$attrs"
-    >
-        <FSIcon size="checkbox">
-            {{ $props.icon }}
+  <v-btn
+    v-if="!['icon'].includes($props.variant!)"
+    :ripple="false"
+    :style="style"
+    :class="classes"
+    @click="onClick"
+    v-bind="$attrs"
+  >
+    <FSRow :wrap="false">
+      <slot name="prepend" v-bind="{ color, colors }">
+        <FSIcon v-if="$props.prependIcon" size="m">
+          {{ $props.prependIcon }}
         </FSIcon>
+      </slot>
+      <slot name="default" v-bind="{ color, colors }">
+        <FSSpan v-if="$props.label" font="text-body">
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot name="append" v-bind="{ color, colors }">
+        <FSIcon v-if="$props.appendIcon" size="m">
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
     </FSRow>
+  </v-btn>
+  <FSRow
+    v-else-if="$props.icon"
+    width="hug"
+    :style="style"
+    :class="classes"
+    @click="onClick"
+    v-bind="$attrs"
+  >
+    <FSIcon size="m">
+      {{ $props.icon }}
+    </FSIcon>
+  </FSRow>
 </template>
 
 <script lang="ts">
@@ -50,141 +50,147 @@ import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-    name: "FSButton",
-    components: {
-        FSSpan,
-        FSIcon,
-        FSRow
+  name: "FSButton",
+  components: {
+    FSSpan,
+    FSIcon,
+    FSRow,
+  },
+  props: {
+    prependIcon: {
+      type: String,
+      required: false,
+      default: null,
     },
-    props: {
-        prependIcon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        label: {
-            type: String,
-            required: false,
-            default: null
-        },
-        appendIcon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        icon: {
-            type: String,
-            required: false,
-            default: null
-        },
-        variant: {
-            type: String as PropType<"standard" | "full" | "icon">,
-            required: false,
-            default: "standard"
-        },
-        color: {
-            type: String as PropType<ColorBase>,
-            required: false,
-            default: ColorBase.Dark
-        },
-        editable: {
-            type: Boolean,
-            required: false,
-            default: true
-        }
+    label: {
+      type: String,
+      required: false,
+      default: null,
     },
-    emts: ["click"],
-    setup(props, { emit }) {
-        const { label, variant, color, editable } = toRefs(props);
-
-        const textColors = useColors().getContrasts(color.value);
-        const colors = useColors().getColors(color.value);
-        const slots = useSlots();
+    appendIcon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    variant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard",
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Dark,
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const { label, variant, color, editable } = toRefs(props);
 
-        const lights = useColors().getColors(ColorBase.Light);
+    const textColors = useColors().getContrasts(color.value);
+    const colors = useColors().getColors(color.value);
+    const slots = useSlots();
 
-        const isEmpty = computed(() => {
-            return !slots.default && !label.value;
-        });
+    const lights = useColors().getColors(ColorBase.Light);
 
-        const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-            if (!editable.value) {
-                switch (variant.value) {
-                    case "standard":
-                    case "full": return {
-                        "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
-                        "--fs-button-background-color": lights.base,
-                        "--fs-button-border-color": lights.dark,
-                        "--fs-button-color": lights.dark
-                    }
-                    case "icon": return {
-                        "--fs-button-color": lights.dark
-                    }
-                }
-            }
-            switch (variant.value) {
-                case "standard": return {
-                    "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
-                    "--fs-button-background-color": colors.light,
-                    "--fs-button-border-color": colors.base,
-                    "--fs-button-color": textColors.base,
-                    "--fs-button-hover-background-color": colors.base,
-                    "--fs-button-hover-border-color": colors.base,
-                    "--fs-button-hover-color": textColors.light,
-                    "--fs-button-active-background-color": colors.dark,
-                    "--fs-button-active-border-color": colors.dark,
-                    "--fs-button-active-color": textColors.light
-                };
-                case "full": return {
-                    "--fs-button-padding"    : !isEmpty.value ? "0 16px" : "0",
-                    "--fs-button-background-color": colors.base,
-                    "--fs-button-border-color": colors.base,
-                    "--fs-button-color": textColors.light,
-                    "--fs-button-hover-background-color": colors.base,
-                    "--fs-button-hover-border-color": colors.base,
-                    "--fs-button-hover-color": textColors.light,
-                    "--fs-button-active-background-color": colors.dark,
-                    "--fs-button-active-border-color": colors.dark,
-                    "--fs-button-active-color": textColors.light
+    const isEmpty = computed(() => {
+      return !slots.default && !label.value;
+    });
 
-                };
-                case "icon": return {
-                    "--fs-button-color": textColors.base,
-                    "--fs-button-hover-color" : textColors.dark
-                };
-            }
-        });
+    const style = computed(
+      (): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+        if (!editable.value) {
+          switch (variant.value) {
+            case "standard":
+            case "full":
+              return {
+                "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
+                "--fs-button-background-color": lights.base,
+                "--fs-button-border-color": lights.dark,
+                "--fs-button-color": lights.dark,
+              };
+            case "icon":
+              return {
+                "--fs-button-color": lights.dark,
+              };
+          }
+        }
+        switch (variant.value) {
+          case "standard":
+            return {
+              "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
+              "--fs-button-background-color": colors.light,
+              "--fs-button-border-color": colors.base,
+              "--fs-button-color": textColors.base,
+              "--fs-button-hover-background-color": colors.base,
+              "--fs-button-hover-border-color": colors.base,
+              "--fs-button-hover-color": textColors.light,
+              "--fs-button-active-background-color": colors.dark,
+              "--fs-button-active-border-color": colors.dark,
+              "--fs-button-active-color": textColors.light,
+            };
+          case "full":
+            return {
+              "--fs-button-padding": !isEmpty.value ? "0 16px" : "0",
+              "--fs-button-background-color": colors.base,
+              "--fs-button-border-color": colors.base,
+              "--fs-button-color": textColors.light,
+              "--fs-button-hover-background-color": colors.base,
+              "--fs-button-hover-border-color": colors.base,
+              "--fs-button-hover-color": textColors.light,
+              "--fs-button-active-background-color": colors.dark,
+              "--fs-button-active-border-color": colors.dark,
+              "--fs-button-active-color": textColors.light,
+            };
+          case "icon":
+            return {
+              "--fs-button-color": textColors.base,
+              "--fs-button-hover-color": textColors.dark,
+            };
+        }
+      }
+    );
 
-        const classes = computed((): string[] => {
-            const classes = [];
-            if (!editable.value) {
-                classes.push("fs-button--disabled");
-            }
-            switch (variant.value) {
-                case "icon":
-                    classes.push("fs-button-icon");
-                    break;
-                default:
-                    classes.push("fs-button");
-                    break;
-            }
-            return classes;
-        });
+    const classes = computed((): string[] => {
+      const classes: string[] = [];
+      if (!editable.value) {
+        classes.push("fs-button--disabled");
+      }
+      switch (variant.value) {
+        case "icon":
+          classes.push("fs-button-icon");
+          break;
+        default:
+          classes.push("fs-button");
+          break;
+      }
+      return classes;
+    });
 
-        const onClick = () => {
-            if (!editable.value) {
-                return;
-            }
-            emit("click");
-        }
+    const onClick = () => {
+      if (!editable.value) {
+        return;
+      }
+      emit("click");
+    };
 
-        return {
-            colors,
-            color,
-            style,
-            classes,
-            onClick
-        };
-    }
+    return {
+      colors,
+      color,
+      style,
+      classes,
+      onClick,
+    };
+  },
 });
-</script>
+</script>

package/components/FSCalendar.vue

@@ -0,0 +1,171 @@
+<template>
+  <FSCol>
+    <FSRow>
+      <FSSpan
+        v-if="$props.label"
+        class="fs-calendar-label"
+        font="text-overline"
+      >
+        {{ $props.label }}
+      </FSSpan>
+    </FSRow>
+    <FSCol
+      class="fs-calendar"
+      :style="style"
+    >
+      <FSRow
+        class="fs-calendar-header"
+        align="center-center"
+      >
+        <FSButton
+          size="l"
+          variant="icon"
+          icon="mdi-chevron-left"
+          @click="onClickPrevious"
+        />
+        <FSSpan
+          class="fs-calendar-text"
+          font="text-h3"
+        >
+          {{ text }}
+        </FSSpan>
+        <FSButton
+          size="l"
+          variant="icon"
+          icon="mdi-chevron-right"
+          @click="onClickNext"
+        />
+      </FSRow>
+      <div
+        class="fs-calendar-divider"
+        :style="style"
+      />
+      <v-locale-provider :locale="languageCode">
+        <v-date-picker-month
+          :month="innerMonth"
+          :year="innerYear"
+          :multiple="false"
+          :showAdjacentMonths="true"
+          :modelValue="datesTools.epochToPicker($props.modelValue)"
+          @update:modelValue="(value) => $emit('update:modelValue', datesTools.pickerToEpoch(value))"
+          @update:month="null"
+          @update:year="null"
+        />
+      </v-locale-provider>
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, toRefs } from "vue";
+import { useDate as useAdapter } from "vuetify/lib/composables/date/index.mjs";
+
+import { useColors, useDates } from "@dative-gpi/foundation-shared-components/composables";
+import { useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+
+import FSButton from "./FSButton.vue";
+import FSSpan from "./FSSpan.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSCalendar",
+  components: {
+    FSButton,
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<Array<number>>,
+      required: false,
+      default: null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Dark
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorBase.Primary
+    }
+  },
+  setup(props) {
+    const { modelValue, color, buttonColor } = toRefs(props);
+
+    const languageCode = useLanguageCode().languageCode;
+    const datesTools = useDates();
+    const adapter = useAdapter();
+
+    const colors = useColors().getColors(color.value);
+    const buttonColors = useColors().getColors(buttonColor.value);
+
+    const backgrounds = useColors().getColors(ColorBase.Background);
+    
+    const innerMonth = ref(modelValue.value.length ? datesTools.epochToPicker(modelValue.value)[0].getMonth() : new Date().getMonth());
+    const innerYear = ref(modelValue.value.length ? datesTools.epochToPicker(modelValue.value)[0].getFullYear() : new Date().getFullYear());
+
+    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-calendar-background-color"       : backgrounds.base,
+        "--fs-calendar-hover-background-color" : buttonColors.light,
+        "--fs-calendar-active-background-color": buttonColors.base,
+        "--fs-calendar-border-color"           : colors.base,
+        "--fs-calendar-hover-border-color"     : buttonColors.base,
+        "--fs-calendar-active-border-color"    : buttonColors.base,
+        "--fs-calendar-color"                  : colors.base,
+        "--fs-calendar-hover-color"            : buttonColors.base,
+        "--fs-calendar-active-color"           : buttonColors.light
+      };
+    });
+
+    const text = computed(() => {
+      adapter.locale = languageCode;
+      return adapter.format(
+        adapter.setYear(adapter.setMonth(adapter.date(), innerMonth.value), innerYear.value),
+        'monthAndYear',
+      );
+    });
+
+    const onClickPrevious = (): void => {
+      if (innerMonth.value > 0) {
+        innerMonth.value--;
+      }
+      else {
+        innerYear.value--;
+        innerMonth.value = 11;
+      }
+    };
+
+    const onClickNext = (): void => {
+      if (innerMonth.value < 11) {
+        innerMonth.value++;
+      }
+      else {
+        innerYear.value++;
+        innerMonth.value = 0;
+      }
+    };
+
+    return {
+      languageCode,
+      style,
+      text,
+      innerMonth,
+      innerYear,
+      datesTools,
+      onClickPrevious,
+      onClickNext
+    };
+  }
+});
+</script>