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

package/components/FSButton.vue

@@ -1,25 +1,37 @@
 <template>
   <v-btn
-    v-if="!['icon'].includes($props.variant!)"
+    v-if="!['icon'].includes($props.variant)"
     :ripple="false"
     :style="style"
     :class="classes"
-    @click="onClick"
+    :disabled="!$props.editable"
     v-bind="$attrs"
   >
-    <FSRow :wrap="false">
-      <slot name="prepend" v-bind="{ color, colors }">
-        <FSIcon v-if="$props.prependIcon" size="m">
+    <FSRow
+      align="center-center"
+      width="hug"
+      :wrap="false"
+    >
+      <slot name="prepend" v-bind="{ color: $props.color, colors }">
+        <FSIcon
+          v-if="$props.prependIcon"
+          size="l"
+        >
           {{ $props.prependIcon }}
         </FSIcon>
       </slot>
-      <slot name="default" v-bind="{ color, colors }">
-        <FSSpan v-if="$props.label" font="text-body">
+      <slot v-bind="{ color: $props.color, colors }">
+        <FSSpan
+          v-if="$props.label"
+        >
           {{ $props.label }}
         </FSSpan>
       </slot>
-      <slot name="append" v-bind="{ color, colors }">
-        <FSIcon v-if="$props.appendIcon" size="m">
+      <slot name="append" v-bind="{ color: $props.color, colors }">
+        <FSIcon
+          v-if="$props.appendIcon"
+          size="l"
+        >
           {{ $props.appendIcon }}
         </FSIcon>
       </slot>
@@ -27,23 +39,31 @@
   </v-btn>
   <FSRow
     v-else-if="$props.icon"
+    align="center-center"
     width="hug"
     :style="style"
     :class="classes"
-    @click="onClick"
     v-bind="$attrs"
   >
-    <FSIcon size="m">
+    <FSIcon
+      size="l"
+    >
       {{ $props.icon }}
     </FSIcon>
+    <FSSpan
+      v-if="$props.label"
+      font="text-overline"
+    >
+      {{ $props.label }}
+    </FSSpan>
   </FSRow>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs, useSlots } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorBase } from "@dative-gpi/foundation-shared-components/themes";
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
@@ -54,143 +74,138 @@ export default defineComponent({
   components: {
     FSSpan,
     FSIcon,
-    FSRow,
+    FSRow
   },
   props: {
     prependIcon: {
       type: String,
       required: false,
-      default: null,
+      default: null
     },
     label: {
       type: String,
       required: false,
-      default: null,
+      default: null
     },
     appendIcon: {
       type: String,
       required: false,
-      default: null,
+      default: null
     },
     icon: {
       type: String,
       required: false,
-      default: null,
+      default: null
     },
     variant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,
-      default: "standard",
+      default: "standard"
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorBase.Dark,
+      default: ColorEnum.Primary
     },
-    editable: {
+    fullWidth: {
       type: Boolean,
       required: false,
-      default: true,
+      default: false
     },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
   },
-  emits: ["click"],
-  setup(props, { emit }) {
-    const { label, variant, color, editable } = toRefs(props);
+  setup(props) {
+    const textColors = computed(() => useColors().getContrasts(props.color));
+    const colors = computed(() => useColors().getColors(props.color));
+    const lights = useColors().getColors(ColorEnum.Light);
 
-    const textColors = useColors().getContrasts(color.value);
-    const colors = useColors().getColors(color.value);
-    const slots = useSlots();
-
-    const lights = useColors().getColors(ColorBase.Light);
+    const { slots } = useSlots();
 
     const isEmpty = computed(() => {
-      return !slots.default && !label.value;
+      return !slots.default && !props.label;
     });
 
-    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) {
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      if (!props.editable) {
+        switch (props.variant) {
           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,
-            };
+          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 (props.variant) {
+        case "standard": return {
+          "--fs-button-padding"                : !isEmpty.value ? "0 16px" : "0",
+          "--fs-button-background-color"       : colors.value.light,
+          "--fs-button-border-color"           : colors.value.base,
+          "--fs-button-color"                  : textColors.value.base,
+          "--fs-button-hover-background-color" : colors.value.base,
+          "--fs-button-hover-border-color"     : colors.value.base,
+          "--fs-button-hover-color"            : textColors.value.light,
+          "--fs-button-active-background-color": colors.value.dark,
+          "--fs-button-active-border-color"    : colors.value.dark,
+          "--fs-button-active-color"           : textColors.value.light,
+        };
+        case "full": return {
+          "--fs-button-padding"                : !isEmpty.value ? "0 16px" : "0",
+          "--fs-button-background-color"       : colors.value.base,
+          "--fs-button-border-color"           : colors.value.base,
+          "--fs-button-color"                  : textColors.value.light,
+          "--fs-button-hover-background-color" : colors.value.base,
+          "--fs-button-hover-border-color"     : colors.value.base,
+          "--fs-button-hover-color"            : textColors.value.light,
+          "--fs-button-active-background-color": colors.value.dark,
+          "--fs-button-active-border-color"    : colors.value.dark,
+          "--fs-button-active-color"           : textColors.value.light,
+        };
+        case "icon": switch (props.color) {
+          case ColorEnum.Dark: return {
+            "--fs-button-color"      : colors.value.light,
+            "--fs-button-hover-color": colors.value.dark,
+          };
+          default: return {
+            "--fs-button-color"      : colors.value.base,
+            "--fs-button-hover-color": colors.value.dark,
+          };
         }
       }
-    );
+    });
 
     const classes = computed((): string[] => {
-      const classes: string[] = [];
-      if (!editable.value) {
-        classes.push("fs-button--disabled");
+      const classNames: string[] = [];
+      if (!props.editable) {
+        classNames.push("fs-button--disabled");
       }
-      switch (variant.value) {
+      if (props.fullWidth) {
+        classNames.push("fs-button-full-width");
+      }
+      switch (props.variant) {
         case "icon":
-          classes.push("fs-button-icon");
+          classNames.push("fs-button-icon");
           break;
         default:
-          classes.push("fs-button");
+          classNames.push("fs-button");
           break;
       }
-      return classes;
+      return classNames;
     });
 
-    const onClick = () => {
-      if (!editable.value) {
-        return;
-      }
-      emit("click");
-    };
-
     return {
       colors,
-      color,
       style,
-      classes,
-      onClick,
+      classes
     };
-  },
+  }
 });
-</script>
+</script>

package/components/FSCalendar.vue

@@ -21,6 +21,7 @@
           size="l"
           variant="icon"
           icon="mdi-chevron-left"
+          :color="ColorEnum.Dark"
           @click="onClickPrevious"
         />
         <FSSpan
@@ -33,6 +34,7 @@
           size="l"
           variant="icon"
           icon="mdi-chevron-right"
+          :color="ColorEnum.Dark"
           @click="onClickNext"
         />
       </FSRow>
@@ -46,8 +48,9 @@
           :year="innerYear"
           :multiple="false"
           :showAdjacentMonths="true"
-          :modelValue="datesTools.epochToPicker($props.modelValue)"
-          @update:modelValue="(value) => $emit('update:modelValue', datesTools.pickerToEpoch(value))"
+          :allowedDates="allowedDates"
+          :modelValue="epochToPicker($props.modelValue)"
+          @update:modelValue="(value) => $emit('update:modelValue', pickerToEpoch(value[0]))"
           @update:month="null"
           @update:year="null"
         />
@@ -57,12 +60,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRefs } from "vue";
-import { useDate as useAdapter } from "vuetify/lib/composables/date/index.mjs";
+import { computed, defineComponent, PropType, ref } from "vue";
 
-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 { useTimeZone, useLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSButton from "./FSButton.vue";
 import FSSpan from "./FSSpan.vue";
@@ -84,56 +86,52 @@ export default defineComponent({
       default: null
     },
     modelValue: {
-      type: Array as PropType<Array<number>>,
+      type: Number,
       required: false,
       default: null
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorBase.Dark
+      default: ColorEnum.Primary
     },
-    buttonColor: {
-      type: String as PropType<ColorBase>,
+    limit: {
+      type: String as PropType<"none" | "past" | "future">,
       required: false,
-      default: ColorBase.Primary
+      default: "none"
     }
   },
+  emits: ["update:modelValue"],
   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 { epochToPicker, pickerToEpoch, todayToEpoch } = useTimeZone();
+    const { languageCode } = useLanguageCode();
 
-    const backgrounds = useColors().getColors(ColorBase.Background);
+    const colors = computed(() => useColors().getColors(props.color));
+    const backgrounds = useColors().getColors(ColorEnum.Background);
+    const darks = useColors().getColors(ColorEnum.Dark);
     
-    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 innerMonth = ref(props.modelValue ? epochToPicker(props.modelValue).getMonth() : new Date().getMonth());
+    const innerYear = ref(props.modelValue ? epochToPicker(props.modelValue).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
+        "--fs-calendar-hover-background-color" : colors.value.light,
+        "--fs-calendar-active-background-color": colors.value.base,
+        "--fs-calendar-border-color"           : darks.base,
+        "--fs-calendar-hover-border-color"     : colors.value.base,
+        "--fs-calendar-active-border-color"    : colors.value.base,
+        "--fs-calendar-color"                  : darks.base,
+        "--fs-calendar-hover-color"            : colors.value.base,
+        "--fs-calendar-active-color"           : colors.value.light
       };
     });
 
-    const text = computed(() => {
-      adapter.locale = languageCode;
-      return adapter.format(
-        adapter.setYear(adapter.setMonth(adapter.date(), innerMonth.value), innerYear.value),
-        'monthAndYear',
-      );
+    const text = computed((): string => {
+      const date = new Date(0);
+      date.setMonth(innerMonth.value);
+      date.setFullYear(innerYear.value);
+      return new Intl.DateTimeFormat(languageCode.value, { month: "long", year: "numeric" }).format(date);
     });
 
     const onClickPrevious = (): void => {
@@ -156,15 +154,30 @@ export default defineComponent({
       }
     };
 
+    const allowedDates = (value: Date): boolean => {
+      const valueEpoch = pickerToEpoch(value);
+      switch (props.limit) {
+        case "past":
+          return valueEpoch <= todayToEpoch(true);
+        case "future":
+          return valueEpoch >= todayToEpoch(true);
+        default:
+          return true;
+      }
+    };
+
     return {
+      ColorEnum,
       languageCode,
       style,
       text,
       innerMonth,
       innerYear,
-      datesTools,
+      epochToPicker,
+      pickerToEpoch,
       onClickPrevious,
-      onClickNext
+      onClickNext,
+      allowedDates
     };
   }
 });