@dative-gpi/foundation-shared-components 1.1.24-unit-formatter → 1.1.24-unit-formatter-2

package/components/FSClickable.vue

@@ -1,363 +1,61 @@
 <template>
-  <a
-    v-if="$props.href"
-    :href="$props.href"
-    :style="style"
-    :class="$props.class"
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-    @mousedown="active = true"
-    @mouseup="active = false"
+  <FSCard
+    :variant="$props.variant"
+    :color="$props.color"
+    :clickable="$props.clickable"
+    v-bind="$attrs"
   >
-    <FSCard
-      height="100%"
-      width="100%"
-      :borderRadius="$props.borderRadius"
-      :borderStyle="$props.borderStyle"
-      :padding="$props.padding"
-      :class="classes"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="{ ...slotData, contentVariant }"
-        />
-      </template>
-    </FSCard>
-    <template
-      v-if="$props.load"
-    >
-      <v-progress-circular
-        class="fs-clickable-load"
-        width="2"
-        size="24"
-        :indeterminate="true"
-        :color="loadColor"
-      />
-    </template>
-  </a>
-  <FSRouterLink
-    v-else-if="$props.to"
-    :style="style"
-    :to="$props.to"
-    :class="$props.class"
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-    @mousedown="active = true"
-    @mouseup="active = false"
-  >
-    <FSCard
-      height="100%"
-      width="100%"
-      :borderRadius="$props.borderRadius"
-      :borderStyle="$props.borderStyle"
-      :padding="$props.padding"
-      :class="classes"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="{ ...slotData, contentVariant }"
-        />
-      </template>
-    </FSCard>
-    <template
-      v-if="$props.load"
-    >
-      <v-progress-circular
-        class="fs-clickable-load"
-        width="2"
-        size="24"
-        :indeterminate="true"
-        :color="loadColor"
-      />
-    </template>
-  </FSRouterLink>
-  <button
-    v-else
-    :type="$props.type"
-    :style="style"
-    :class="$props.class"
-    :disabled="$props.load || $props.disabled"
-    @click.stop="onClick"
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-    @mousedown="active = true"
-    @mouseup="active = false"
-  >
-    <FSCard
-      height="100%"
-      width="100%"
-      :borderRadius="$props.borderRadius"
-      :borderStyle="$props.borderStyle"
-      :padding="$props.padding"
-      :class="classes"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="{ ...slotData, contentVariant }"
-        />
-      </template>
-    </FSCard>
     <template
-      v-if="$props.load"
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
     >
-      <v-progress-circular
-        class="fs-clickable-load"
-        width="2"
-        size="24"
-        :indeterminate="true"
-        :color="loadColor"
+      <slot
+        :name="name"
+        v-bind="{ ...slotData }"
       />
     </template>
-  </button>
+  </FSCard>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
-import { type RouteLocation } from "vue-router";
+/**
+ * @deprecated FSClickable is deprecated. Please use <FSCard :clickable="true" :variant="CardVariants.Standard" :color="ColorEnum.Light" ... /> instead.
+ * Clickable prop to true is not necessary as it is will listen to any click listener or href, to prop.
+ * This component will be removed in a future release.
+ */
+import { defineComponent, type PropType, onMounted } from "vue";
 
-import { type ColorBase, ColorEnum } 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 { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSRouterLink from "./FSRouterLink.vue";
 import FSCard from "./FSCard.vue";
 
 export default defineComponent({
   name: "FSClickable",
   components: {
-    FSRouterLink,
     FSCard
   },
   props: {
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
-    padding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "0"
-    },
-    class: {
-      type: [String, Array] as PropType<string | string[] | null>,
-      required: false,
-      default: null
-    },
-    to: {
-      type: Object as PropType<RouteLocation | null>,
-      required: false,
-      default: null
-    },
-    href: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     variant: {
-      type: String as PropType<"standard" | "background" | "full">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "standard"
-    },
-    type: {
-      type: String as PropType<"button" | "submit">,
-      required: false,
-      default: "button"
+      default: CardVariants.Standard
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Light
     },
-    border: {
+    clickable: {
       type: Boolean,
       required: false,
       default: true
-    },
-    borderRadius: {
-      type: [String, Number],
-      required: false,
-      default: "4px"
-    },
-    borderStyle: {
-      type: String as PropType<"solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "none">,
-      required: false,
-      default: "solid"
-    },
-    load: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
-  emits: ["click"],
-  setup(props, { emit }) {
-    const { getColors } = useColors();
-
-    const colors = computed(() => getColors(props.color));
-    const backgrounds = getColors(ColorEnum.Background);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-
-    const hover = ref(false);
-    const active = ref(false);
-
-    const style = computed((): StyleValue => {
-      if (props.disabled) {
-        return {
-          "--fs-clickable-border-size"     : props.border ? "1px" : "0",
-          "--fs-clickable-border-style"    : props.borderStyle,
-          "--fs-clickable-border-radius"   : sizeToVar(props.borderRadius),
-          "--fs-clickable-background-color": lights.light,
-          "--fs-clickable-border-color"    : lights.dark,
-          "--fs-clickable-color"           : lights.dark,
-          "--fs-clickable-height"          : sizeToVar(props.height),
-          "--fs-clickable-width"           : sizeToVar(props.width)
-        };
-      }
-      switch (props.variant) {
-        case "standard":
-          switch (props.color) {
-            case ColorEnum.Dark :
-            case ColorEnum.Light: return {
-              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-              "--fs-clickable-border-style"           : props.borderStyle,
-              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-              "--fs-clickable-background-color"       : backgrounds.base,
-              "--fs-clickable-border-color"           : lights.dark,
-              "--fs-clickable-color"                  : lights.lightContrast!,
-              "--fs-clickable-hover-background-color" : lights.base,
-              "--fs-clickable-hover-border-color"     : lights.dark,
-              "--fs-clickable-hover-color"            : lights.baseContrast!,
-              "--fs-clickable-active-background-color": lights.dark,
-              "--fs-clickable-active-border-color"    : lights.dark,
-              "--fs-clickable-active-color"           : lights.darkContrast!,
-              "--fs-clickable-height"                 : sizeToVar(props.height),
-              "--fs-clickable-width"                  : sizeToVar(props.width)
-            };
-            default: return {
-              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-              "--fs-clickable-border-style"           : props.borderStyle,
-              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-              "--fs-clickable-background-color"       : colors.value.light,
-              "--fs-clickable-border-color"           : colors.value.lightContrast!,
-              "--fs-clickable-color"                  : colors.value.lightContrast!,
-              "--fs-clickable-hover-background-color" : colors.value.base,
-              "--fs-clickable-hover-border-color"     : colors.value.base,
-              "--fs-clickable-hover-color"            : colors.value.baseContrast!,
-              "--fs-clickable-active-background-color": colors.value.dark,
-              "--fs-clickable-active-border-color"    : colors.value.darkContrast!,
-              "--fs-clickable-active-color"           : colors.value.darkContrast!,
-              "--fs-clickable-height"                 : sizeToVar(props.height),
-              "--fs-clickable-width"                  : sizeToVar(props.width)
-            };
-          }
-        case "background": return {
-          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-          "--fs-clickable-border-style"           : props.borderStyle,
-          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-          "--fs-clickable-background-color"       : backgrounds.base,
-          "--fs-clickable-border-color"           : lights.dark,
-          "--fs-clickable-color"                  : darks.base,
-          "--fs-clickable-hover-background-color" : colors.value.base,
-          "--fs-clickable-hover-border-color"     : colors.value.baseContrast!,
-          "--fs-clickable-hover-color"            : colors.value.baseContrast!,
-          "--fs-clickable-active-background-color": colors.value.dark,
-          "--fs-clickable-active-border-color"    : colors.value.darkContrast!,
-          "--fs-clickable-active-color"           : colors.value.darkContrast!,
-          "--fs-clickable-height"                 : sizeToVar(props.height),
-          "--fs-clickable-width"                  : sizeToVar(props.width)
-        };
-        case "full": return {
-          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-          "--fs-clickable-border-style"           : props.borderStyle,
-          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-          "--fs-clickable-background-color"       : colors.value.base,
-          "--fs-clickable-border-color"           : colors.value.base,
-          "--fs-clickable-color"                  : colors.value.baseContrast!,
-          "--fs-clickable-hover-background-color" : colors.value.base,
-          "--fs-clickable-hover-border-color"     : colors.value.base,
-          "--fs-clickable-hover-color"            : colors.value.baseContrast!,
-          "--fs-clickable-active-background-color": colors.value.dark,
-          "--fs-clickable-active-border-color"    : colors.value.dark,
-          "--fs-clickable-active-color"           : colors.value.darkContrast!,
-          "--fs-clickable-height"                 : sizeToVar(props.height),
-          "--fs-clickable-width"                  : sizeToVar(props.width)
-        };
-      }
-    });
-
-    const contentVariant = computed((): "base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" => {
-      if (active.value) {
-        return "darkContrast";
-      }
-      if (hover.value) {
-        return "baseContrast";
-      }
-      switch (props.variant) {
-        case "standard"  : return "lightContrast";
-        case "background": return "base";
-        case "full"      : return "baseContrast";
-      }
-    });
-
-    const classes = computed((): string[] => {
-      const classNames: string[] = ["fs-clickable"];
-      if (props.disabled) {
-        classNames.push("fs-clickable-disabled");
-      }
-      return classNames;
-    });
-
-    const loadColor = computed((): string => {
-      switch (props.color) {
-        case ColorEnum.Primary:
-        case ColorEnum.Success:
-        case ColorEnum.Warning:
-        case ColorEnum.Error  : return ["full"].includes(props.variant) ? colors.value.light : colors.value.dark;
-        default               : return ["full"].includes(props.variant) ? darks.soft : darks.dark;
-      }
+  setup() {
+    onMounted(() => {
+      console.warn('[DEPRECATED] <FSClickable> is deprecated. Please use <FSCard :clickable="true" :variant="CardVariants.Standard"  :color="ColorEnum.Light" ... /> instead. Clickable prop to true is not necessary as it is will listen to any click listener or href, to prop. This component will be removed in a future release.');
     });
-
-    const onClick = (event: MouseEvent) => {
-      if (!props.to && !props.href && !props.disabled && !props.load) {
-        emit("click", event);
-      }
-    };
-
     return {
-      contentVariant,
-      loadColor,
-      classes,
-      active,
-      hover,
-      style,
-      onClick
     };
   }
 });

package/components/FSColor.vue

@@ -14,7 +14,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";
@@ -26,9 +26,9 @@ export default defineComponent({
   },
   props: {
     variant: {
-      type: String as PropType<"standard" | "full">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "standard"
+      default: CardVariants.Standard
     },
     color: {
       type: String as PropType<ColorBase>,

package/components/FSColorIcon.vue

@@ -5,6 +5,7 @@
     :border="false"
     :height="actualSize"
     :width="actualSize"
+    :disableHoverStyle="true"
   >
     <FSRow
       align="center-center"

package/components/FSDialogContent.vue

@@ -6,37 +6,46 @@
     :color="$props.color"
     :width="cardWidth"
   >
-    <template
-      #header
-    >
-      <FSCol>
-        <FSRow
-          align="center-left"
-          :wrap="false"
-        >
-          <FSText
-            font="text-h2"
-          >
-            {{ $props.title }}
-          </FSText>
+    <FSCol>
+      <slot
+        name="header"
+        v-bind="{ title: $props.title, subtitle: $props.subtitle }"
+      >
+        <FSCol>
           <FSRow
-            align="center-right"
+            align="center-left"
+            :wrap="false"
           >
-            <FSButton
-              icon="mdi-close"
-              variant="icon"
-              :color="ColorEnum.Dark"
-              @click="$emit('update:modelValue', false)"
-            />
+            <FSText
+              font="text-h2"
+            >
+              {{ $props.title }}
+            </FSText>
+            <FSRow
+              align="center-right"
+            >
+              <FSButton
+                icon="mdi-close"
+                variant="icon"
+                :color="ColorEnum.Dark"
+                @click="$emit('update:modelValue', false)"
+              />
+            </FSRow>
           </FSRow>
-        </FSRow>
-        <FSText
-          v-if="$props.subtitle"
-        >
-          {{ $props.subtitle }}
-        </FSText>
-      </FSCol>
-    </template>
+          <FSText
+            v-if="$props.subtitle"
+          >
+            {{ $props.subtitle }}
+          </FSText>
+        </FSCol>
+      </slot>
+      <slot
+        name="body"
+      />
+      <slot
+        name="footer"
+      />
+    </FSCol>
     <template
       v-for="(_, name) in $slots"
       v-slot:[name]="slotData"
@@ -59,6 +68,7 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import FSButton from "./FSButton.vue";
 import FSCard from "./FSCard.vue";
 import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
@@ -67,6 +77,7 @@ export default defineComponent({
     FSButton,
     FSCard,
     FSText,
+    FSCol,
     FSRow
   },
   props: {

package/components/FSDialogFormBody.vue

@@ -99,6 +99,7 @@ import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composa
 import FSFadeOut from "./FSFadeOut.vue";
 import FSButton from "./FSButton.vue";
 import FSForm from "./FSForm.vue";
+import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
@@ -107,6 +108,7 @@ export default defineComponent({
     FSFadeOut,
     FSButton,
     FSForm,
+    FSCol,
     FSRow
   },
   props: {

package/components/FSDialogMenu.vue

@@ -10,6 +10,11 @@
       :color="$props.color"
       :class="classes"
     >
+      <FSCol>
+        <slot
+          name="body"
+        />
+      </FSCol>
       <template
         v-for="(_, name) in $slots"
         v-slot:[name]="slotData"
@@ -30,11 +35,13 @@ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-compone
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";
+import FSCol from "./FSCol.vue";
 
 export default defineComponent({
   name: "FSDialogMenu",
   components: {
-    FSCard
+    FSCard,
+    FSCol
   },
   props: {
     classes: {

package/components/FSDialogMultiFormBody.vue

@@ -104,7 +104,7 @@
 import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type DialogMultiFormMode, DialogMultiFormModes, type DialogMultiFormVariant } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSPagination from "./FSPagination.vue";
@@ -118,6 +118,7 @@ import FSTabs from "./FSTabs.vue";
 import FSTab from "./FSTab.vue";
 import FSIcon from "./FSIcon.vue";
 import FSWindow from "./FSWindow.vue";
+import { DialogMultiFormVariants } from "@dative-gpi/foundation-shared-components/models";
 
 export default defineComponent({
   name: "FSDialogMultiFormBody",
@@ -146,9 +147,9 @@ export default defineComponent({
       default: "auto"
     },
     variant: {
-      type: String as PropType<"standard" | "submit">,
+      type: String as PropType<DialogMultiFormVariant>,
       required: false,
-      default: "submit"
+      default: DialogMultiFormVariants.Submit
     },
     steps: {
       type: Number,
@@ -225,9 +226,9 @@ export default defineComponent({
       default: false
     },
     mode: {
-      type: String as PropType<"pagination" | "tabs">,
+      type: String as PropType<DialogMultiFormMode>,
       required: false,
-      default: "pagination"
+      default: DialogMultiFormModes.Pagination
     },
     tabsColor: {
       type: String as PropType<ColorBase>,

package/components/FSDivider.vue

@@ -41,11 +41,15 @@ import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/co
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSDivider",
   components: {
-    FSText
+    FSText,
+    FSCol,
+    FSRow
   },
   props: {
     label: {