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

package/components/FSDialogFormBody.vue

@@ -12,8 +12,8 @@
         gap="24px"
       >
         <FSFadeOut
-          :height="height"
           padding="0 8px 0 0"
+          :maxHeight="maxHeight"
         >
           <slot
             name="body"
@@ -60,8 +60,8 @@
       gap="24px"
     >
       <FSFadeOut
-        :height="height"
         padding="0 8px 0 0"
+        :maxHeight="maxHeight"
       >
         <slot
           name="validation"
@@ -227,7 +227,7 @@ export default defineComponent({
     const formRef = ref<HTMLElement | null>(null);
     const valid = ref(false);
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -262,8 +262,8 @@ export default defineComponent({
       cancelLabel,
       submitLabel,
       ColorEnum,
+      maxHeight,
       formRef,
-      height,
       valid,
       onValidate,
       onSubmit

package/components/FSDialogMenu.vue

@@ -25,11 +25,9 @@
 </template>
   
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, 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 { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";

package/components/FSDialogMultiFormBody.vue

@@ -1,60 +1,69 @@
 <template>
-  <FSWindow
-    width="100%"
-    :modelValue="currentStep - 1"
+  <FSCol
+    gap="24px"
   >
-    <FSForm
-      v-for="(step, index) in $props.steps"
-      :variant="$props.variant"
-      :key="index"
-      @submit="onSubmit"
-      v-model="valid"
+    <FSPagination
+      width="calc(100% - 16px)"
+      :pages="$props.steps"
+      :modelValue="currentStep - 1"
+    />
+    <FSWindow
+      width="100%"
+      :modelValue="currentStep - 1"
     >
-      <FSCol
-        gap="24px"
+      <FSForm
+        v-for="(step, index) in $props.steps"
+        :variant="$props.variant"
+        :key="index"
+        @submit="onSubmit"
+        v-model="valid"
       >
-        <FSFadeOut
-          :height="height"
-          padding="0 8px 0 0"
+        <FSCol
+          gap="24px"
         >
-          <slot
-            :name="`step-${step}`"
-          />
-        </FSFadeOut>
-        <FSRow
-          padding="0 16px 0 0"
-        >
-          <slot
-            name="left-footer"
-          />
-          <FSRow
-            class="fs-dialog-actions"
-            align="top-right"
-            :wrap="false"
+          <FSFadeOut
+            padding="0 8px 0 0"
+            :maxHeight="maxHeight"
           >
-            <FSButton
-              :prependIcon="$props.cancelButtonPrependIcon"
-              :appendIcon="$props.cancelButtonAppendIcon"
-              :variant="$props.cancelButtonVariant"
-              :color="$props.cancelButtonColor"
-              :label="previousButtonLabel"
-              @click="onPrevious()"
+            <slot
+              :name="`step-${step}`"
             />
-            <FSButton
-              type="submit"
-              :prependIcon="$props.submitButtonPrependIcon"
-              :appendIcon="$props.submitButtonAppendIcon"
-              :color="$props.submitButtonColor"
-              :variant="nextButtonVariant"
-              :editable="$props.editable"
-              :label="nextButtonLabel"
-              :load="$props.load"
+          </FSFadeOut>
+          <FSRow
+            padding="0 16px 0 0"
+          >
+            <slot
+              name="left-footer"
             />
+            <FSRow
+              class="fs-dialog-actions"
+              align="top-right"
+              :wrap="false"
+            >
+              <FSButton
+                :prependIcon="$props.cancelButtonPrependIcon"
+                :appendIcon="$props.cancelButtonAppendIcon"
+                :variant="$props.cancelButtonVariant"
+                :color="$props.cancelButtonColor"
+                :label="previousButtonLabel"
+                @click="onPrevious()"
+              />
+              <FSButton
+                type="submit"
+                :prependIcon="$props.submitButtonPrependIcon"
+                :appendIcon="$props.submitButtonAppendIcon"
+                :color="$props.submitButtonColor"
+                :variant="nextButtonVariant"
+                :editable="$props.editable"
+                :label="nextButtonLabel"
+                :load="$props.load"
+              />
+            </FSRow>
           </FSRow>
-        </FSRow>
-      </FSCol>
-    </FSForm>
-  </FSWindow>
+        </FSCol>
+      </FSForm>
+    </FSWindow>
+  </FSCol>
 </template>
 
 <script lang="ts">
@@ -64,17 +73,21 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
+import FSPagination from "./FSPagination.vue";
 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({
   name: "FSDialogMultiFormBody",
   components: {
+    FSPagination,
     FSFadeOut,
     FSButton,
     FSForm,
+    FSCol,
     FSRow
   },
   props: {
@@ -167,7 +180,7 @@ export default defineComponent({
     const valid = ref(false);
     const valids = ref(Array.from({ length: props.steps }, () => false));
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -220,7 +233,7 @@ export default defineComponent({
       nextButtonLabel,
       currentStep,
       ColorEnum,
-      height,
+      maxHeight,
       valids,
       valid,
       onPrevious,

package/components/FSDialogRemove.vue

@@ -1,5 +1,6 @@
 <template>
   <FSDialogSubmit
+    width="460px"
     :title="title"
     :submitButtonLabel="$tr('ui.button.remove', 'Remove')"
     :submitButtonColor="ColorEnum.Error"

package/components/FSDialogSubmit.vue

@@ -11,8 +11,8 @@
       #body
     >
       <FSFadeOut
-        :height="height"
         padding="0 8px 0 0"
+        :maxHeight="maxHeight"
       >
         <slot
           name="body"
@@ -61,12 +61,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/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 { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSFadeOut from "./FSFadeOut.vue";
@@ -169,7 +167,7 @@ export default defineComponent({
     const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
-    const height = computed(() => {
+    const maxHeight = computed(() => {
       const other = 24 + 24                                          // Paddings
         + (isMobileSized.value ? 24 : 32) + 24                       // Title
         + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
@@ -189,7 +187,7 @@ export default defineComponent({
       cancelLabel,
       submitLabel,
       ColorEnum,
-      height
+      maxHeight
     };
   }
 });

package/components/FSDivider.vue

@@ -34,12 +34,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 { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 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 { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSText from "./FSText.vue";
@@ -61,7 +59,7 @@ export default defineComponent({
       default: "100%"
     },
     font: {
-      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline" | "text-underline">,
+      type: String as PropType<"text-h1" | "text-h2" | "text-h3" | "text-h4" | "text-body" | "text-button" | "text-overline">,
       required: false,
       default: "text-body"
     },
@@ -87,7 +85,7 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "base": return {
           "--fs-divider-size" : sizeToVar(props.size),
@@ -109,9 +107,9 @@ export default defineComponent({
     });
 
     return {
-      style,
-      isEmpty
+      isEmpty,
+      style
     };
   }
 });
-</script>
+</script>

package/components/FSEditImage.vue

@@ -1,300 +1,53 @@
 <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
-          gap="24px"
-          :wrap="false"
-        >
-          <FSImage
-            v-if="$props.imageId || $props.modelValue"
-            :aspectRatio="$props.aspectRatio"
-            :height="$props.height"
-            :width="$props.width"
-            :imageId="$props.imageId"
-            :imageB64="$props.modelValue"
-          />
-          <FSCard
-            v-else
-            borderStyle="dashed"
-            :aspectRatio="$props.aspectRatio"
-            :height="$props.height"
-            :width="$props.width"
-          />
-          <FSCol
-            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>
-        <v-spacer />
-        <FSRow
-          width="hug"
-        >
-          <FSButtonFileMini
-            accept="image/*"
-            :readFile="false"
-            @update:metadata="onUpload"
-          />
-          <FSButtonRemoveMini
-            @click="onRemove"
-          />
-        </FSRow>
-      </FSRow>
-    </FSCard>
-    <FSRow
-      v-else-if="$props.imageId || $props.modelValue"
-      :width="$props.width"
-      class="fs-edit-image-full"
-    >
-      <FSImage
-        :aspectRatio="$props.aspectRatio"
-        :height="$props.height"
-        :width="$props.width"
-        :imageId="$props.imageId"
-        :imageB64="$props.modelValue"
-      />
-      <FSRow
-        class="fs-edit-image-full-toolbar"
-        padding="4px"
-      >
-        <FSButtonFileMini
-          accept="image/*"
-          :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="image/*"
-          :readFile="false"
-          @update:metadata="onUpload"
-        />
-      </FSRow>
-    </FSClickable>
-  </FSCol>
+  <FSEditImageUI
+    :source="source"
+    :blurHash="image"
+    @error="onError"
+    @update:source="$emit('update:imageId', $event)"
+    v-bind="$attrs"
+  />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType } 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 { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config";
 
-import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
-import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";
-import FSClickable from "./FSClickable.vue";
-import FSImage from "./FSImage.vue";
-import FSCard from "./FSCard.vue";
-import FSText from "./FSText.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import { useImage } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSEditImageUI from "./FSEditImageUI.vue";
 
 export default defineComponent({
   name: "FSEditImage",
   components: {
-    FSButtonRemoveMini,
-    FSButtonFileMini,
-    FSClickable,
-    FSImage,
-    FSCard,
-    FSText,
-    FSCol,
-    FSRow
+    FSEditImageUI
   },
   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
-    },
     imageId: {
       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:imageId"],
-  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((): { [key: string]: string | undefined } => {
-      return {
-        "--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));
+  emits: ["update:imageId"],
+  setup(props) {
+    const { get: getImage, entity: image } = useImage();
+    
+    const source = computed(() => {
+      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
+    })
+
+    const onError = (): void => {
       if (props.imageId) {
-        emit("update:imageId", null);
+        console.error("Error loading image", props.imageId);
+        getImage(props.imageId);
       }
     };
 
-    const onRemove = () => {
-      fileSelected.value.fileName = "";
-      fileSelected.value.fileContent = null;
-      if (props.modelValue) {
-        emit("update:modelValue", null);
-      }
-      else {
-        emit("update:imageId", null);
-      }
-    };
-
-    watch(() => props.modelValue, () => {
-      if (!props.modelValue) {
-        fileSelected.value.fileName = "";
-        fileSelected.value.fileContent = null;
-      }
-    });
-
     return {
-      invisibleButtonRef,
-      fileSelected,
-      isExtraSmall,
-      style,
-      onUpload,
-      onRemove
+      image,
+      source,
+      onError
     };
   }
 });