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

package/components/FSEditImageUI.vue

@@ -0,0 +1,303 @@
+<template>
+  <FSCol
+    gap="8px"
+  >
+    <slot
+      v-if="!$props.hideHeader"
+      name="label"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSSpan
+          v-if="$props.label"
+          class="fs-edit-image-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-edit-image-label"
+          style="margin-left: -8px;"
+          font="text-overline"
+          :ellipsis="false"
+          :style="style"
+        >
+          *
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <FSCard
+      v-if="['standard'].includes($props.variant)"
+      padding="12px"
+      width="100%"
+    >
+      <FSRow
+        align="center-left"
+        :wrap="false"
+      >
+        <FSRow
+          class="fs-edit-image-standard-row"
+          gap="24px"
+          :wrap="false"
+        >
+          <FSImageUI
+            v-if="$props.source || $props.modelValue"
+            :aspectRatio="$props.aspectRatio"
+            :height="$props.height"
+            :width="$props.width"
+            :source="$props.source"
+            :imageB64="$props.modelValue"
+            v-bind="$attrs"
+          />
+          <FSCard
+            v-else
+            borderStyle="dashed"
+            :aspectRatio="$props.aspectRatio"
+            :height="$props.height"
+            :width="$props.width"
+          />
+          <FSCol
+            class="fs-edit-image-standard-label-wrapper"
+            align="center-left"
+            height="fill"
+            width="hug"
+            gap="10px"
+          >
+            <FSText
+              v-if="fileSelected && fileSelected.fileName"
+              font="text-body"
+              :lineClamp="2"
+            >
+              {{ fileSelected.fileName }}
+            </FSText>
+            <FSCol
+              gap="0px"
+            >
+              <FSText
+                class="fs-edit-image-overline"
+                font="text-overline"
+                :style="style"
+              >
+                {{ $tr('ui.edit-image.format', 'PNG or JPG format') }}
+              </FSText>
+              <FSText
+                class="fs-edit-image-overline"
+                font="text-overline"
+                :style="style"
+              >
+                {{ $tr('ui.edit-image.size', '10 MB Maximum') }}
+              </FSText>
+            </FSCol>
+          </FSCol>
+        </FSRow>
+        <FSRow
+          align="center-right"
+          :width="isExtraSmall ? '40px' : 'hug'"
+        >
+          <FSButtonFileMini
+            accept=".jpg,.jpeg,.png"
+            :readFile="false"
+            @update:metadata="onUpload"
+          />
+          <FSButtonRemoveMini
+            @click="onRemove"
+          />
+        </FSRow>
+      </FSRow>
+    </FSCard>
+    <FSRow
+      v-else-if="$props.source || $props.modelValue"
+      :width="$props.width"
+      class="fs-edit-image-full"
+    >
+      <FSImageUI
+        :aspectRatio="$props.aspectRatio"
+        :height="$props.height"
+        :width="$props.width"
+        :source="$props.source"
+        :imageB64="$props.modelValue"
+        v-bind="$attrs"
+      />
+      <FSRow
+        class="fs-edit-image-full-toolbar"
+        padding="4px"
+      >
+        <FSButtonFileMini
+          accept=".jpg,.jpeg,.png"
+          :readFile="false"
+          @update:metadata="onUpload"
+        />
+        <FSButtonRemoveMini
+          @click="onRemove"
+        />
+      </FSRow>
+    </FSRow>
+    <FSClickable
+      v-else
+      borderStyle="dashed"
+      variant="background"
+      :height="$props.height"
+      :width="$props.width"
+      @click="() => invisibleButtonRef.input.click()"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon>
+          mdi-plus-box-outline
+        </FSIcon>
+        <FSText
+          font="text-body"
+          :lineClamp="2"
+        >
+          {{ $tr('ui.edit-image.add-image', 'Add an image.') }}
+        </FSText>
+        <FSButtonFileMini
+          class="fs-edit-image-hidden-button"
+          ref="invisibleButtonRef"
+          accept=".jpg,.jpeg,.png"
+          :readFile="false"
+          @update:metadata="onUpload"
+        />
+      </FSRow>
+    </FSClickable>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
+
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type FileImage } from "@dative-gpi/foundation-shared-components/models";
+import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
+import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";
+import FSClickable from "./FSClickable.vue";
+import FSImageUI from "./FSImageUI.vue";
+import FSCard from "./FSCard.vue";
+import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSEditImageUI",
+  components: {
+    FSButtonRemoveMini,
+    FSButtonFileMini,
+    FSClickable,
+    FSImageUI,
+    FSCard,
+    FSText,
+    FSCol,
+    FSRow
+  },
+  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
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    source: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    aspectRatio: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    variant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "standard"
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "update:source"],
+  setup(props, { emit }) {
+    const { isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+    const { readFile } = useFiles();
+
+    const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
+    const invisibleButtonRef = ref<HTMLFormElement | null>(null);
+
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): StyleValue => ({
+      "--fs-edit-image-overline-text-color": lights.dark,
+      "--fs-edit-image-color"              : darks.base,
+      "--fs-edit-image-error-color"        : errors.base
+    }));
+
+    const onUpload = async (payload: File) => {
+      const content = (await readFile(payload)) as string;
+      fileSelected.value.fileName = payload.name;
+      fileSelected.value.fileContent = content;
+      emit("update:modelValue", content.substring(content.indexOf(',') + 1));
+      if (props.source) {
+        emit("update:source", null);
+      }
+    };
+
+    const onRemove = () => {
+      fileSelected.value.fileName = "";
+      fileSelected.value.fileContent = null;
+      if (props.modelValue) {
+        emit("update:modelValue", null);
+      }
+      else {
+        emit("update:source", null);
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      if (!props.modelValue) {
+        fileSelected.value.fileName = "";
+        fileSelected.value.fileContent = null;
+      }
+    });
+
+    return {
+      invisibleButtonRef,
+      fileSelected,
+      isExtraSmall,
+      style,
+      onUpload,
+      onRemove
+    };
+  }
+});
+</script>

package/components/FSErrorToast.vue

@@ -1,8 +1,8 @@
 <template>
   <FSCol
-    padding="18px 32px"
     class="fs-error-toast"
     align="center-center"
+    padding="18px 32px"
     gap="24px"
     :style="style"
   >
@@ -28,8 +28,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { getError, sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
@@ -69,7 +68,7 @@ export default defineComponent({
 
     const errors = getColors(ColorEnum.Error);
 
-    const style = computed((): { [key: string]: string | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "standard": return {
           "--fs-error-toast-border-radius": sizeToVar(props.borderRadius),

package/components/FSFadeOut.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -22,8 +22,14 @@ export default defineComponent({
   name: "FSFadeOut",
   props: {
     height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: true
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
+    },
+    maxHeight: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null | undefined>,
+      required: false,
+      default: undefined
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
@@ -58,16 +64,15 @@ export default defineComponent({
 
     const elementId = `id${uuidv4()}`;
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-fade-out-height"             : sizeToVar(props.height),
-        "--fs-fade-out-width"              : sizeToVar(props.width),
-        "--fs-fade-out-padding"            : sizeToVar(props.padding),
-        "--fs-fade-out-mask-color"         : backgrounds.base,
-        "--fs-fade-out-top-mask-height"    : topMaskHeight.value,
-        "--fs-fade-out-bottom-mask-height" : bottomMaskHeight.value,
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-fade-out-height"            : props.height ? sizeToVar(props.height) : undefined,
+      "--fs-fade-out-max-height"        : props.maxHeight ? sizeToVar(props.maxHeight) : undefined,
+      "--fs-fade-out-width"             : sizeToVar(props.width),
+      "--fs-fade-out-padding"           : sizeToVar(props.padding),
+      "--fs-fade-out-mask-color"        : backgrounds.base,
+      "--fs-fade-out-top-mask-height"   : topMaskHeight.value,
+      "--fs-fade-out-bottom-mask-height": bottomMaskHeight.value
+    }));
 
     const handleMasks = () => {
       if (fadeOutRef.value) {

package/components/FSGrid.vue

@@ -27,6 +27,7 @@
         >
           <FSText
             :font="item.hideDefault ? 'text-body' : 'text-overline'"
+            variant="soft"
           >
             {{ item.label }}
           </FSText>
@@ -66,12 +67,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { ColorEnum, type FSGridItem } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
-import type { FSGridItem } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSText from "./FSText.vue";
 import FSCol from "./FSCol.vue";
@@ -97,11 +96,9 @@ export default defineComponent({
 
     const lights = getColors(ColorEnum.Light);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-grid-border-color": lights.dark
-      };
-    });
+    const style = computed((): StyleValue => ({
+      "--fs-grid-border-color": lights.dark
+    }));
 
     const headerSlot = (code: string) => {
       if (slots[`header.${code}`]) {

package/components/FSGridMosaic.vue

@@ -34,8 +34,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import type { FSGridMosaic } from "@dative-gpi/foundation-shared-components/models";

package/components/FSIcon.vue

@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase } from "@dative-gpi/foundation-shared-components/models";
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { type ColorBase } from "@dative-gpi/foundation-shared-components/models";
+
+import { sizeToVar } from "../utils";
 
 export default defineComponent({
   name: "FSIcon",
@@ -31,7 +31,7 @@ export default defineComponent({
       default: null
     },
     variant: {
-      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
       required: false,
       default: "base"
     }
@@ -40,14 +40,13 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { getColors } = useColors();
 
-    const color = computed((): string | null => {
+    const color = computed((): string | undefined => {
       if (props.color) {
         return getColors(props.color)[props.variant]!;
       }
-      return null;
     });
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch(props.size) {
         case "s": return {
           "--fs-icon-font-size": isMobileSized.value ? "14px" : "16px"

package/components/FSIconCard.vue

@@ -1,18 +1,18 @@
 <template>
   <FSCard
+    :variant="$props.backgroundVariant"
     :color="$props.backgroundColor"
+    :border="$props.border"
     :height="$props.size"
     :width="$props.size"
-    :variant="variant"
-    :border="border"
   >
     <FSRow
       align="center-center"
     >
       <FSIcon 
-        variant="dark"
-        :size="$props.iconSize"
+        :variant="$props.iconVariant"
         :color="$props.iconColor"
+        :size="$props.iconSize"
       >
         {{ $props.icon }}
       </FSIcon>
@@ -21,11 +21,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, 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";
 
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
@@ -47,6 +45,11 @@ export default defineComponent({
       required: false,
       default: null
     },
+    backgroundVariant: {
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      required: false,
+      default: "background"
+    },
     icon: {
       type: String as PropType<string>,
       required: false,
@@ -55,33 +58,23 @@ export default defineComponent({
     iconColor: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Dark
+      default: ColorEnum.Primary
+    },
+    iconVariant: {
+      type: String as PropType<"base" | "baseContrast" | "soft" | "softContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      required: false,
+      default: "base"
     },
     iconSize: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "56px"
+      default: "42px"
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: true
     }
-  },
-  setup(props) {
-    const variant = computed((): "background" | "gradient" => {
-      switch (props.backgroundColor) {
-        case ColorEnum.Background: return "background";
-        default:                   return "gradient";
-      }
-    });
-
-    const border = computed((): boolean => {
-      switch (props.backgroundColor) {
-        case ColorEnum.Background: return true;
-        default:                   return false;
-      }
-    });
-
-    return {
-      variant,
-      border
-    };
   }
 });
 </script>

package/components/FSIconCheck.vue

@@ -9,8 +9,7 @@
 <script lang="ts">
 import { computed, defineComponent } 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";
 
 import FSIcon from "./FSIcon.vue";