@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/FSAccordionPanel.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -136,15 +136,13 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-accordion-panel-padding-title"         : sizeToVar(props.paddingTitle),
-        "--fs-accordion-panel-padding-content"       : sizeToVar(props.paddingContent),
-        "--fs-accordion-panel-divider-size"          : props.divider ? "1px" : "0",
-        "--fs-accordion-panel-divider-color"         : lights.dark,
-        "--fs-accordion-panel-background-color"      : backgrounds.base
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-accordion-panel-padding-title"   : sizeToVar(props.paddingTitle),
+      "--fs-accordion-panel-padding-content" : sizeToVar(props.paddingContent),
+      "--fs-accordion-panel-divider-size"    : props.divider ? "1px" : "0",
+      "--fs-accordion-panel-divider-color"   : lights.dark,
+      "--fs-accordion-panel-background-color": backgrounds.base
+    }));
 
     return {
       style

package/components/FSBadge.vue

@@ -18,11 +18,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSBadge",

package/components/FSBreadcrumbs.vue

@@ -1,7 +1,7 @@
 <template>
   <v-breadcrumbs
-    :style="style"
     :items="$props.items"
+    :style="style"
     v-bind="$attrs"
   >
     <template
@@ -27,11 +27,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType, Ref} from "vue";
-import { defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum, type FSBreadcrumbItem } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSpan from "./FSSpan.vue";
@@ -46,7 +44,8 @@ export default defineComponent({
   props: {
     items: {
       type: Array as PropType<FSBreadcrumbItem[]>,
-      required: true,
+      required: false,
+      default: () => []
     }
   },
   setup() {
@@ -54,11 +53,11 @@ export default defineComponent({
 
     const darks = getColors(ColorEnum.Dark);
 
-    const style: Ref<{ [key: string] : string }> = ref({
-      "--fs-breadcrumbs-color": darks.dark,
-      "--fs-breadcrumbs-active-color": darks.base,
+    const style = computed((): StyleValue => ({
+      "--fs-breadcrumbs-color"         : darks.dark,
+      "--fs-breadcrumbs-active-color"  : darks.base,
       "--fs-breadcrumbs-disabled-color": darks.soft
-    });
+    }));
 
     const classes = (item: FSBreadcrumbItem): string[] => {
       const classNames = ["fs-breadcrumbs-label"];

package/components/FSButton.vue

@@ -1,20 +1,19 @@
 <template>
   <FSClickable
-    v-if="!['icon'].includes($props.variant)"
+    v-if="$props.variant !== 'icon'"
     :editable="$props.editable"
-    :height="['40px', '36px']"
+    :padding="padding"
     :variant="$props.variant"
     :color="$props.color"
     :load="$props.load"
     :href="$props.href"
-    :padding="padding"
     :to="$props.to"
     :style="style"
-    :width="width"
     @click.stop="onClick"
     v-bind="$attrs"
   >
     <FSRow
+      v-if="$props.direction === 'row'"
       align="center-center"
       width="fill"
       :wrap="false"
@@ -51,6 +50,43 @@
         </FSIcon>
       </slot>
     </FSRow>
+    <FSCol
+      v-else
+      align="center-center"
+      width="fill"
+    >
+      <slot
+        name="prepend"
+        v-bind="{ color: $props.color, colors }"
+      >
+        <FSIcon
+          v-if="$props.prependIcon || $props.icon"
+          :size="$props.iconSize"
+        >
+          {{ $props.prependIcon ?? $props.icon }}
+        </FSIcon>
+      </slot>
+      <slot
+        v-bind="{ color: $props.color, colors }"
+      >
+        <FSSpan
+          v-if="$props.label"
+        >
+          {{ $props.label }}
+        </FSSpan>
+      </slot>
+      <slot
+        name="append"
+        v-bind="{ color: $props.color, colors }"
+      >
+        <FSIcon
+          v-if="$props.appendIcon"
+          :size="$props.iconSize"
+        >
+          {{ $props.appendIcon }}
+        </FSIcon>
+      </slot>
+    </FSCol>
   </FSClickable>
   <FSRow
     v-else
@@ -128,28 +164,39 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
-import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType, type StyleValue, useSlots } from "vue";
+import { type RouteLocation } from "vue-router";
 
-import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSClickable from "./FSClickable.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
+const PADDING_ICON_ONLY = "7px";
+const PADDING_LABEL_ONLY = ["9px 16px", "9px 12px"];
+const PADDING_ICON_LABEL = ["7px 16px", "7px 12px"];
+
+const DEFAULT_PADDING = PADDING_ICON_LABEL;
+
 export default defineComponent({
   name: "FSButton",
   components: {
     FSClickable,
     FSSpan,
     FSIcon,
+    FSCol,
     FSRow
   },
   props: {
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: DEFAULT_PADDING
+    },
     to: {
       type: [String, Object] as PropType<string | RouteLocation | null>,
       required: false,
@@ -166,7 +213,7 @@ export default defineComponent({
       default: null
     },
     label: {
-      type: [String, Function],
+      type: [String, Function] as PropType<string | Function | null>,
       required: false,
       default: null
     },
@@ -183,23 +230,23 @@ export default defineComponent({
     iconSize: {
       type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
       required: false,
-      default: "l"
+      default: () => ["24px", "20px"]
     },
     variant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,
       default: "standard"
     },
+    direction: {
+      type: String as PropType<"row" | "column">,
+      required: false,
+      default: "row"
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Light
     },
-    fullWidth: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     load: {
       type: Boolean,
       required: false,
@@ -214,13 +261,13 @@ export default defineComponent({
   emits: ["click"],
   setup(props, { emit }) {
     const { getColors } = useColors();
-    const { slots } = useSlots();
 
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
+    const slots = useSlots();
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         switch (props.variant) {
           case "icon": return {
@@ -262,19 +309,23 @@ export default defineComponent({
       }
     });
 
-    const padding = computed((): string | number => {
-      switch (props.variant) {
-        case "standard":
-        case "full":     return (!slots.default && !props.label) ? "0 7px" : "0 16px";
-        default:         return "0px";
+    const padding = computed(() => {
+      if (props.padding !== DEFAULT_PADDING) {
+        return props.padding;
       }
-    });
 
-    const width = computed((): string | number => {
-      if (props.fullWidth) {
-        return "100%";
+      const hasIcon = props.prependIcon || props.appendIcon || props.icon
+        || !!slots.prepend || !!slots.append;
+      
+      const hasLabel = props.label || !!slots.default;
+
+      if (!hasLabel && hasIcon) {
+        return PADDING_ICON_ONLY;
       }
-      return "fit-content";
+      else if (hasLabel && !hasIcon) {
+        return PADDING_LABEL_ONLY;
+      }
+      return DEFAULT_PADDING;
     });
 
     const onClick = (event: MouseEvent) => {
@@ -286,10 +337,9 @@ export default defineComponent({
     return {
       iconClasses,
       loadColor,
-      padding,
       colors,
       style,
-      width,
+      padding,
       onClick
     };
   }

package/components/FSCalendar.vue

@@ -65,12 +65,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useDateFormat, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSButton from "./FSButton.vue";
@@ -110,30 +108,28 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { epochToPicker, pickerToEpoch, todayToEpoch } = useDateFormat();
     const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
+    
+    const innerMonth = ref(new Date().getMonth());
+    const innerYear = ref(new Date().getFullYear());
 
     const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
     const darks = getColors(ColorEnum.Dark);
-    
-    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((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-calendar-background-color"       : backgrounds.base,
-        "--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 style = computed((): StyleValue => ({
+      "--fs-calendar-background-color"       : backgrounds.base,
+      "--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((): string => {
       const date = new Date(0);
@@ -163,24 +159,30 @@ export default defineComponent({
     };
 
     const onClickDate = (value: unknown): void => {
-      const date = (value as Date[])[0];
-      const epoch = pickerToEpoch(date);
-      emit("update:modelValue", epoch);
+      if (!Array.isArray(value) || !(value[0] instanceof Date)) {
+        return;
+      }
+      emit("update:modelValue", pickerToEpoch(value[0]));
     };
 
     const allowedDates = (value: unknown): boolean => {
-      const date = value as Date;
-      const valueEpoch = pickerToEpoch(date);
+      if (!(value instanceof Date)) {
+        return false;
+      }
       switch (props.limit) {
-        case "past":
-          return valueEpoch <= todayToEpoch(true);
-        case "future":
-          return valueEpoch >= todayToEpoch(true);
-        default:
-          return true;
+        case "past"  : return pickerToEpoch(value) <= todayToEpoch();
+        case "future": return pickerToEpoch(value) >= todayToEpoch();
+        default      : return true;
       }
     };
 
+    onMounted(() => {
+      if (props.modelValue) {
+        innerMonth.value = epochToPicker(props.modelValue).getMonth();
+        innerYear.value = epochToPicker(props.modelValue).getFullYear();
+      }
+    });
+
     return {
       ColorEnum,
       languageCode,

package/components/FSCalendarTwin.vue

@@ -112,12 +112,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, onMounted, ref } from "vue";
+import { computed, defineComponent, onMounted, type PropType, ref, type StyleValue } from "vue";
 
-import { useAppTimeZone, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useDateFormat, useAppLanguageCode } from "@dative-gpi/foundation-shared-services/composables";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSButton from "./FSButton.vue";
@@ -157,13 +155,9 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useAppTimeZone();
+    const { epochToPicker, epochToPickerHeader, pickerToEpoch, todayToEpoch } = useDateFormat();
     const { languageCode } = useAppLanguageCode();
     const { getColors } = useColors();
-
-    const colors = computed(() => getColors(props.color));
-    const backgrounds = getColors(ColorEnum.Background);
-    const darks = getColors(ColorEnum.Dark);
     
     const innerLeftMonth = ref(new Date().getMonth());
     const innerLeftYear = ref(new Date().getFullYear());
@@ -173,72 +167,21 @@ export default defineComponent({
 
     const toggle = ref((props.modelValue?.length ?? 0) % 2);
 
-    onMounted((): void => {
-      if (!props.modelValue || !props.modelValue.length) {
-        innerLeftMonth.value = new Date().getMonth();
-        innerLeftYear.value = new Date().getFullYear();
-        if (innerLeftMonth.value < 11) {
-          innerRightMonth.value = innerLeftMonth.value + 1;
-          innerRightYear.value = innerLeftYear.value;
-        }
-        else {
-          innerRightMonth.value = 0;
-          innerRightYear.value = innerLeftYear.value + 1;
-        }
-      }
-      else {
-        innerLeftMonth.value = epochToPickerHeader(props.modelValue[0]).m;
-        innerLeftYear.value = epochToPickerHeader(props.modelValue[0]).y;
-        if (innerLeftMonth.value < 11) {
-          innerRightMonth.value = innerLeftMonth.value + 1;
-          innerRightYear.value = innerLeftYear.value;
-        }
-        else {
-          innerRightMonth.value = 0;
-          innerRightYear.value = innerLeftYear.value + 1;
-        }
-      }
-    });
-
-    const compare = (operator: "before" | "during" | "after", side: "left" | "right", date: { d: number, m: number, y: number }): boolean => {
-      switch (operator) {
-        case "before":
-          switch (side) {
-            case "left":
-              return innerLeftYear.value > date.y || (innerLeftYear.value === date.y && innerLeftMonth.value > date.m);
-            default:
-              return innerRightYear.value > date.y || (innerRightYear.value === date.y && innerRightMonth.value > date.m);
-          }
-        case "during":
-          switch (side) {
-            case "left":
-              return innerLeftYear.value === date.y && innerLeftMonth.value === date.m;
-            default:
-              return innerRightYear.value === date.y && innerRightMonth.value === date.m;
-          }
-        case "after":
-          switch (side) {
-            case "left":
-              return innerLeftYear.value < date.y || (innerLeftYear.value === date.y && innerLeftMonth.value < date.m);
-            default:
-              return innerRightYear.value < date.y || (innerRightYear.value === date.y && innerRightMonth.value < date.m);
-          }
-      }
-    }
+    const colors = computed(() => getColors(props.color));
+    const backgrounds = getColors(ColorEnum.Background);
+    const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-calendar-background-color"       : backgrounds.base,
-        "--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 style = computed((): StyleValue => ({
+      "--fs-calendar-background-color"       : backgrounds.base,
+      "--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 innerLeftValue = computed((): number[] => {
       if (!props.modelValue || !props.modelValue.length) {
@@ -318,6 +261,32 @@ export default defineComponent({
       return classNames;
     });
 
+    const compare = (operator: "before" | "during" | "after", side: "left" | "right", date: { d: number, m: number, y: number }): boolean => {
+      switch (operator) {
+        case "before":
+          switch (side) {
+            case "left":
+              return innerLeftYear.value > date.y || (innerLeftYear.value === date.y && innerLeftMonth.value > date.m);
+            default:
+              return innerRightYear.value > date.y || (innerRightYear.value === date.y && innerRightMonth.value > date.m);
+          }
+        case "during":
+          switch (side) {
+            case "left":
+              return innerLeftYear.value === date.y && innerLeftMonth.value === date.m;
+            default:
+              return innerRightYear.value === date.y && innerRightMonth.value === date.m;
+          }
+        case "after":
+          switch (side) {
+            case "left":
+              return innerLeftYear.value < date.y || (innerLeftYear.value === date.y && innerLeftMonth.value < date.m);
+            default:
+              return innerRightYear.value < date.y || (innerRightYear.value === date.y && innerRightMonth.value < date.m);
+          }
+      }
+    };
+
     const onClickPrevious = (): void => {
       if (innerLeftMonth.value === 11) {
         innerLeftMonth.value--;
@@ -372,7 +341,6 @@ export default defineComponent({
       }
     };
 
-
     const onClickRight = (value: unknown): void => {
       const dates = value as Date[];
       const clicked = pickerToEpoch(dates[dates.length - 1]);
@@ -395,18 +363,43 @@ export default defineComponent({
     };
 
     const allowedDates = (value: unknown): boolean => {
-      const date = value as Date;
-      const valueEpoch = pickerToEpoch(date);
+      if (!(value instanceof Date)) {
+        return false;
+      }
       switch (props.limit) {
-        case "past":
-          return valueEpoch <= todayToEpoch(true);
-        case "future":
-          return valueEpoch >= todayToEpoch(true);
-        default:
-          return true;
+        case "past"  : return pickerToEpoch(value) <= todayToEpoch();
+        case "future": return pickerToEpoch(value) >= todayToEpoch();
+        default      : return true;
       }
     };
 
+    onMounted((): void => {
+      if (!props.modelValue || !props.modelValue.length) {
+        innerLeftMonth.value = new Date().getMonth();
+        innerLeftYear.value = new Date().getFullYear();
+        if (innerLeftMonth.value < 11) {
+          innerRightMonth.value = innerLeftMonth.value + 1;
+          innerRightYear.value = innerLeftYear.value;
+        }
+        else {
+          innerRightMonth.value = 0;
+          innerRightYear.value = innerLeftYear.value + 1;
+        }
+      }
+      else {
+        innerLeftMonth.value = epochToPickerHeader(props.modelValue[0]).m;
+        innerLeftYear.value = epochToPickerHeader(props.modelValue[0]).y;
+        if (innerLeftMonth.value < 11) {
+          innerRightMonth.value = innerLeftMonth.value + 1;
+          innerRightYear.value = innerLeftYear.value;
+        }
+        else {
+          innerRightMonth.value = 0;
+          innerRightYear.value = innerLeftYear.value + 1;
+        }
+      }
+    });
+
     return {
       ColorEnum,
       languageCode,