@dative-gpi/foundation-shared-components 1.1.23-fs-chart → 1.1.24-unit-formatter

package/components/FSGroupingChip.vue

@@ -1,115 +0,0 @@
-<template>
-  <FSChip
-    :height="$props.height"
-    :width="$props.width"
-    :variant="$props.variant"
-    :color="chipColor"
-    :disableHoverStyle="$props.disableHoverStyle"
-  >
-    <FSRow
-      align="center-center"
-      width="hug"
-      :wrap="false"
-    >
-      <FSRow
-        align="center-center"
-        width="hug"
-        gap="6px"
-        :wrap="false"
-      >
-        <FSIcon
-          :color="$props.iconColor"
-          :size="$props.iconSize"
-        >
-          {{ $props.icon }}
-        </FSIcon>
-        <FSText
-          font="text-overline"
-          :color="textColor"
-        >
-          {{ $props.label }}
-        </FSText>
-      </FSRow>
-    </FSRow>
-  </FSChip>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import FSIcon from "./FSIcon.vue";
-import FSText from "./FSText.vue";
-import FSChip from "./FSChip.vue";
-import FSRow from "./FSRow.vue";
-
-import { useColors } from "../composables";
-
-export default defineComponent({
-  name: "FSSubgroupingChip",
-  components: {
-    FSChip,
-    FSIcon,
-    FSText,
-    FSRow
-  },
-  props: {
-    label: {
-      type: String as PropType<string>,
-      required: true
-    },
-    icon: {
-      type: String as PropType<string>,
-      required: true
-    },
-    iconColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Dark
-    },
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: () => [24, 20]
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "hug"
-    },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
-    },
-    variant: {
-      type: String as PropType<CardVariant>,
-      required: false,
-      default: CardVariants.Background
-    },
-    iconSize: {
-      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
-      required: false,
-      default: "18px"
-    },
-    disableHoverStyle: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  setup(props) {
-    const { getColors } = useColors();
-    
-    const chipColor = getColors(props.color).dark;
-    const textColor = getColors(ColorEnum.Dark).dark;
-
-    return {
-      chipColor,
-      textColor,
-      ColorEnum
-    };
-  }
-});
-</script>

package/components/FSSnackbar.vue

@@ -1,146 +0,0 @@
-<template>
-  <v-snackbar
-    class="fs-snackbar"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    :multi-line="$props.multiLine"
-    :location="$props.location"
-    :timeout="$props.timeout"
-    :style="style"
-  >
-    <slot>
-      <FSRow
-        align="center-left"
-        :wrap="false"
-        gap="12px"
-      >
-        <FSIcon
-          v-if="$props.icon"
-        >
-          {{ $props.icon }}
-        </FSIcon>
-        <FSSpan
-          v-if="$props.text"
-          :ellipsis="!$props.multiLine"
-        >
-          {{ $props.text }}
-        </FSSpan>
-      </FSRow>
-    </slot>
-    <template
-      v-if="$slots.actions || $props.closeButton"
-      #actions
-    >
-      <slot
-        name="actions"
-      >
-        <FSButton
-          v-if="$props.closeButton"
-          icon="mdi-close"
-          variant="icon"
-          @click="$emit('update:modelValue', false)"
-        />
-      </slot>
-    </template>
-  </v-snackbar>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
-
-import { type ColorBase, ColorEnum, type SnackbarVariant, SnackbarVariants } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
-
-import FSButton from "./FSButton.vue";
-import FSIcon from "./FSIcon.vue";
-import FSSpan from "./FSSpan.vue";
-import FSRow from "./FSRow.vue";
-
-export default defineComponent({
-  name: "FSSnackbar",
-  components: {
-    FSButton,
-    FSIcon,
-    FSSpan,
-    FSRow
-  },
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    text: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    icon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Dark
-    },
-    timeout: {
-      type: Number,
-      required: false,
-      default: 5000
-    },
-    location: {
-      type: String as PropType<"top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right">,
-      required: false,
-      default: "bottom"
-    },
-    multiLine: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    closeButton: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    variant: {
-      type: String as PropType<SnackbarVariant>,
-      required: false,
-      default: SnackbarVariants.Full
-    },
-    borderRadius: {
-      type: [String, Number],
-      required: false,
-      default: "4px"
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props) {
-    const { getColors } = useColors();
-
-    const colors = computed(() => getColors(props.color));
-
-    const style = computed((): StyleValue => {
-      switch (props.variant) {
-        case "standard": return {
-          "--fs-snackbar-border-radius": sizeToVar(props.borderRadius),
-          "--fs-snackbar-background-color": colors.value.light,
-          "--fs-snackbar-color": colors.value.dark
-        };
-        default: return {
-          "--fs-snackbar-border-radius": sizeToVar(props.borderRadius),
-          "--fs-snackbar-background-color": colors.value.base,
-          "--fs-snackbar-color": colors.value.light
-        };
-      }
-    });
-
-    return {
-      style
-    };
-  }
-});
-</script>

package/components/FSSubgroupingChip.vue

@@ -1,138 +0,0 @@
-<template>
-  <FSChip
-    :color="chipColor"
-    :width="$props.width"
-    :height="$props.height"
-    :variant="$props.variant"
-    :disableHoverStyle="$props.disableHoverStyle"
-    :title="`${$props.groupingLabel} - ${$props.label}`"
-  >
-    <FSRow
-      align="center-left"
-      width="fill"
-      :wrap="false"
-    >
-      <FSRow
-        align="center-center"
-        width="hug"
-        gap="6px"
-        :wrap="false"
-      >
-        <FSIcon
-          :color="$props.groupingColor"
-          :size="$props.iconSize"
-        >
-          {{ $props.groupingIcon }}
-        </FSIcon>
-        <FSSpan
-          font="text-overline"
-        >
-          {{ $props.groupingLabel }}
-        </FSSpan>
-      </FSRow>
-      <FSRow
-        align="center-center"
-        width="hug"
-        gap="6px"
-        :wrap="false"
-      >
-        <FSIcon
-          :size="$props.iconSize"
-        >
-          {{ $props.icon }}
-        </FSIcon>
-        <FSSpan
-          font="text-overline"
-        >
-          {{ $props.label }}
-        </FSSpan>
-      </FSRow>
-    </FSRow>
-  </FSChip>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue";
-
-import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import FSIcon from "./FSIcon.vue";
-import FSSpan from "./FSSpan.vue";
-import FSChip from "./FSChip.vue";
-import FSRow from "./FSRow.vue";
-
-import { useColors } from "../composables";
-
-export default defineComponent({
-  name: "FSSubgroupingChip",
-  components: {
-    FSChip,
-    FSIcon,
-    FSSpan,
-    FSRow
-  },
-  props: {
-    groupingLabel: {
-      type: String as PropType<string>,
-      required: true
-    },
-    groupingIcon: {
-      type: String as PropType<string>,
-      required: true
-    },
-    groupingColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Dark
-    },
-    label: {
-      type: String as PropType<string>,
-      required: true
-    },
-    icon: {
-      type: String as PropType<string>,
-      required: true
-    },
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: () => [24, 20]
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "hug"
-    },
-    variant: {
-      type: String as PropType<CardVariant>,
-      required: false,
-      default: CardVariants.Background
-    },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
-    },
-    iconSize: {
-      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
-      required: false,
-      default: "18px"
-    },
-    disableHoverStyle: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  setup(props) {
-    const { getColors } = useColors();
-    
-    const chipColor = getColors(props.color).dark;
-
-    return {
-      chipColor,
-      ColorEnum
-    };
-  }
-});
-</script>

package/components/fields/FSDurationField.vue

@@ -1,184 +0,0 @@
-<template>
-  <FSBaseField
-    :description="$props.description"
-    :hideHeader="$props.hideHeader"
-    :required="$props.required"
-    :disabled="$props.disabled"
-    :label="$props.label"
-    :messages="messages"
-  >
-    <FSRow
-      :wrap="false"
-      align="center-left"
-    >
-      <FSNumberField
-        suffix="h"
-        :hideHeader="true"
-        :modelValue="innerHours"
-        :disabled="$props.disabled"
-        :rules="[() => messages.length === 0 || '']"
-        @update:modelValue="onChangeHours"
-      />
-      <FSSpan>:</FSSpan>
-      <FSNumberField
-        suffix="min"
-        :hideHeader="true"
-        :disabled="$props.disabled"
-        :rules="[() => messages.length === 0 || '']"
-        :modelValue="innerMinutes"
-        @update:modelValue="onChangeMinutes"
-      />
-    </FSRow>
-  </FSBaseField>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
-
-import { NumberRules } from "@dative-gpi/foundation-shared-components/models";
-import { useRules } from "@dative-gpi/foundation-shared-components/composables";
-
-import FSNumberField from "./FSNumberField.vue";
-import FSBaseField from "./FSBaseField.vue";
-import FSSpan from "../FSSpan.vue";
-import FSRow from "../FSRow.vue";
-
-export default defineComponent({
-  name: "FSDurationField",
-  components: {
-    FSNumberField,
-    FSBaseField,
-    FSSpan,
-    FSRow
-  },
-  props: {
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    description: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    modelValue: {
-      type: Number as PropType<number | null>,
-      required: false,
-      default: null
-    },
-    maxDuration: {
-      type: Number as PropType<number | null>,
-      required: false,
-      default: null
-    },
-    minDuration: {
-      type: Number as PropType<number | null>,
-      required: false,
-      default: null
-    },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    rules: {
-      type: Array as PropType<any[]>,
-      required: false,
-      default: () => []
-    },
-    messages: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { getMessages } = useRules();
-    const MS_PER_MINUTE = 60 * 1000;
-    const MS_PER_HOUR = 60 * MS_PER_MINUTE;
-
-    const innerHours = ref<number | null>(null);
-    const innerMinutes = ref<number | null>(null);
-
-    const durationRules = computed(() => {
-      const rules: any[] = [...props.rules];
-      if (props.required) {
-        rules.push(NumberRules.required());
-      }
-      if (props.minDuration != null) {
-        const minHours = Math.floor(props.minDuration / MS_PER_HOUR);
-        const minMinutes = Math.floor((props.minDuration % MS_PER_HOUR) / MS_PER_MINUTE);
-        const label = minHours > 0 ? `${minHours}h${minMinutes.toString().padStart(2, '0')}` : `${minMinutes}min`;
-        rules.push((v: any) => (v != null && v >= props.minDuration!) || `Min. ${label}`);
-      }
-      if (props.maxDuration != null) {
-        const maxHours = Math.floor(props.maxDuration / MS_PER_HOUR);
-        const maxMinutes = Math.floor((props.maxDuration % MS_PER_HOUR) / MS_PER_MINUTE);
-        const label = maxHours > 0 ? `${maxHours}h${maxMinutes.toString().padStart(2, '0')}` : `${maxMinutes}min`;
-        rules.push((v: any) => (v != null && v <= props.maxDuration!) || `Max. ${label}`);
-      }
-      return rules;
-    });
-
-    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, durationRules.value));
-
-    const reset = (): void => {
-      if (props.modelValue == null) {
-        innerHours.value = null;
-        innerMinutes.value = null;
-        return;
-      }
-      innerHours.value = Math.floor(props.modelValue / MS_PER_HOUR);
-      innerMinutes.value = Math.floor((props.modelValue % MS_PER_HOUR) / MS_PER_MINUTE);
-    };
-
-    const emitValue = (): void => {
-      const hours = innerHours.value ?? 0;
-      const minutes = innerMinutes.value ?? 0;
-      emit("update:modelValue", (hours * MS_PER_HOUR) + (minutes * MS_PER_MINUTE));
-    };
-
-    const onChangeHours = (value: number | null): void => {
-      innerHours.value = value;
-      emitValue();
-    };
-
-    const onChangeMinutes = (value: number | null): void => {
-      value = Math.min(59, Math.max(0, value ?? 0));
-      innerMinutes.value = value;
-      emitValue();
-    };
-
-    watch(() => props.modelValue, () => {
-      const currentHours = innerHours.value ?? 0;
-      const currentMinutes = innerMinutes.value ?? 0;
-      const currentTotal = (currentHours * MS_PER_HOUR) + (currentMinutes * MS_PER_MINUTE);
-      if (currentTotal !== (props.modelValue ?? 0)) {
-        reset();
-      }
-    }, { immediate: true });
-
-    return {
-      NumberRules,
-      innerHours,
-      innerMinutes,
-      durationRules,
-      messages,
-      onChangeHours,
-      onChangeMinutes
-    };
-  }
-});
-</script>