@dative-gpi/foundation-shared-components 0.0.19 → 0.0.21

package/styles/globals/overrides.scss

@@ -78,6 +78,7 @@ input[type=number]::-webkit-outer-spin-button {
     margin: 0; 
 }
 
+// Set the right z-index in overlays
 $nthOverlay: 25;
 @for $i from 1 through $nthOverlay {
   .v-overlay-container > :nth-child(#{$i}) {
@@ -96,8 +97,8 @@ $nthOverlay: 25;
 .v-slide-group__prev,
 .v-slide-group__next {
     color: var(--fs-group-color);
-    min-width: 24px !important;
-    width: 24px !important;
+    min-width: var(--fs-group-arrows-width) !important;
+    width: var(--fs-group-arrows-width) !important;
     flex: 1 1 0 !important;
 
     @include touchscreen {

package/utils/css.ts

@@ -1,8 +1,22 @@
-export const sizeToVar = (value: string | number | null, nullValue: string = "fit-content", unit: "px" | "%" | "em"| "vw" | "vh" = "px"): string => {
+import { useBreakpoints } from "../composables/useBreakpoints";
+
+const { isMobileSized, isExtraSmall } = useBreakpoints();
+
+export const sizeToVar = (value: string[] | number[] | string | number | null, nullValue: string = "fit-content", unit: "px" | "%" | "em"| "vw" | "vh" = "px"): string => {
     if (value == null) {
         return nullValue;
     }
-
+    if (Array.isArray(value)) {
+        if (isExtraSmall.value) {
+            const extraSmallValue = value[2] ?? value[1] ?? value[0];
+            return typeof extraSmallValue === 'string' && isNaN(+extraSmallValue) ? extraSmallValue : `${extraSmallValue}${unit}`;
+        }
+        if (isMobileSized.value) {
+            const mobileValue = value[1] ?? value[0];
+            return typeof mobileValue === 'string' && isNaN(+mobileValue) ? mobileValue : `${mobileValue}${unit}`;
+        }
+        return typeof value[0] === 'string' && isNaN(+value[0]) ? value[0] : `${value[0]}${unit}`;
+    }
     return typeof value === 'string' && isNaN(+value) ? value : `${value}${unit}`;
 };
 

package/components/FSFileButton.vue

@@ -1,246 +0,0 @@
-<template>
-  <div>
-    <v-btn
-      v-if="!['icon'].includes($props.variant)"
-      :ripple="false"
-      :style="style"
-      :class="classes"
-      :disabled="!$props.editable"
-      @click="onClick"
-      v-bind="$attrs"
-    >
-      <FSRow
-        align="center-center"
-        :wrap="false"
-      >
-        <slot name="prepend" v-bind="{ color: $props.color, colors }">
-          <FSIcon
-            v-if="$props.prependIcon"
-            size="l"
-          >
-            {{ $props.prependIcon }}
-          </FSIcon>
-        </slot>
-        <slot v-bind="{ color: $props.color, colors }">
-          <FSSpan
-            v-if="$props.label"
-            font="text-body"
-          >
-            {{ $props.label }}
-          </FSSpan>
-        </slot>
-        <slot name="append" v-bind="{ color: $props.color, colors }">
-          <FSIcon
-            v-if="$props.appendIcon"
-            size="l"
-          >
-            {{ $props.appendIcon }}
-          </FSIcon>
-        </slot>
-      </FSRow>
-    </v-btn>
-    <FSRow
-      v-else-if="$props.icon"
-      width="hug"
-      :style="style"
-      :class="classes"
-      v-bind="$attrs"
-    >
-      <FSIcon
-        size="l"
-      >
-        {{ $props.icon }}
-      </FSIcon>
-    </FSRow>
-    <form>
-      <input
-        v-show="false"
-        type="file"
-        ref="input"
-        :accept="$props.accept"
-        @input="onInput"
-      />
-    </form>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
-
-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";
-import FSRow from "./FSRow.vue";
-
-export default defineComponent({
-  name: "FSButtonFile",
-  components: {
-    FSSpan,
-    FSIcon,
-    FSRow
-  },
-  props: {
-    accept: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    readFile: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    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: ColorEnum.Dark
-    },
-    editable: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const { getColors, getContrasts } = useColors();
-    const { slots } = useSlots();
-
-    const textColors = computed(() => getContrasts(props.color));
-    const colors = computed(() => getColors(props.color));
-    const lights = getColors(ColorEnum.Light);
-    
-    const input = ref(null);
-
-    const isEmpty = computed(() => {
-      return !slots.default && !props.label;
-    });
-
-    const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
-      if (!props.editable) {
-        switch (props.variant) {
-          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 (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": return {
-          "--fs-button-color"      : textColors.value.base,
-          "--fs-button-hover-color": textColors.value.dark
-        };
-      }
-    });
-
-    const classes = computed((): string[] => {
-      const classNames = [];
-      if (!props.editable) {
-        classNames.push("fs-button--disabled");
-      }
-      switch (props.variant) {
-        case "icon":
-          classNames.push("fs-button-icon");
-          break;
-        default:
-          classNames.push("fs-button");
-          break;
-      }
-      return classNames;
-    });
-
-    const clear = () => {
-      input.value!.form && input.value!.form.reset();
-    };
-
-    const onClick = () => {
-      input.value!.click();
-    }
-
-    const onInput = () => {
-      const file = input.value!.files && input.value!.files[0];
-      if (!file) {
-        return;
-      }
-      if (!props.readFile) {
-        emit("update:modelValue", file);
-        clear();
-      }
-      else {
-        const reader = new FileReader();
-        reader.addEventListener("load", (fileEv) => {
-          emit("update:modelValue", fileEv.target && fileEv.target.result);
-          clear();
-        });
-        reader.readAsDataURL(file);
-      }
-    };
-
-    return {
-      colors,
-      style,
-      classes,
-      input,
-      onClick,
-      onInput
-    };
-  }
-});
-</script>