@dative-gpi/foundation-shared-components 0.0.87 → 0.0.89

package/components/FSButton.vue

@@ -19,7 +19,10 @@
       width="fill"
       :wrap="false"
     >
-      <slot name="prepend" v-bind="{ color: $props.color, colors }">
+      <slot
+        name="prepend"
+        v-bind="{ color: $props.color, colors }"
+      >
         <FSIcon
           v-if="$props.prependIcon || $props.icon"
           size="l"
@@ -27,14 +30,19 @@
           {{ $props.prependIcon ?? $props.icon }}
         </FSIcon>
       </slot>
-      <slot v-bind="{ color: $props.color, colors }">
+      <slot
+        v-bind="{ color: $props.color, colors }"
+      >
         <FSSpan
           v-if="$props.label"
         >
           {{ $props.label }}
         </FSSpan>
       </slot>
-      <slot name="append" v-bind="{ color: $props.color, colors }">
+      <slot
+        name="append"
+        v-bind="{ color: $props.color, colors }"
+      >
         <FSIcon
           v-if="$props.appendIcon"
           size="l"
@@ -52,7 +60,9 @@
     @click.stop="onClick"
     v-bind="$attrs"
   >
-    <template v-if="$props.load">
+    <template
+      v-if="$props.load"
+    >
       <v-progress-circular
         class="fs-button-load"
         width="2"
@@ -61,7 +71,9 @@
         :color="loadColor"
       />
     </template>
-    <template v-else-if="$props.href">
+    <template
+      v-else-if="$props.href"
+    >
       <a
         :href="$props.href"
       >
@@ -78,7 +90,9 @@
         </FSSpan>
       </a>
     </template>
-    <template v-else-if="$props.to">
+    <template
+      v-else-if="$props.to"
+    >
       <router-link
         :to="$props.to"
       >
@@ -95,7 +109,9 @@
         </FSSpan>
       </router-link>
     </template>
-    <template v-else>
+    <template
+      v-else
+    >
       <FSIcon
         v-if="$props.icon"
         size="l"

package/components/FSCalendar.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSCol>
+  <FSCol
+    width="hug"
+  >
     <FSRow>
       <FSSpan
         v-if="$props.label"

package/components/FSCalendarTwin.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSCol>
+  <FSCol
+    width="hug"
+  >
     <FSRow
       v-if="$props.label"
     >
@@ -12,10 +14,13 @@
     </FSRow>
     <FSRow
       class="fs-calendar-twin"
+      align="center-center"
+      width="hug"
       :style="style"
     >
       <FSCol
         align="top-center"
+        width="hug"
         :class="leftClasses"
         :style="style"
       >
@@ -42,7 +47,9 @@
           class="fs-calendar-divider"
           :style="style"
         />
-        <v-locale-provider :locale="languageCode">
+        <v-locale-provider
+          :locale="languageCode"
+        >
           <v-date-picker-month
             :month="innerLeftMonth"
             :year="innerLeftYear"
@@ -57,6 +64,7 @@
       </FSCol>
       <FSCol
         align="top-center"
+        width="hug"
         :class="rightClasses"
         :style="style"
       >
@@ -83,7 +91,9 @@
           class="fs-calendar-divider"
           :style="style"
         />
-        <v-locale-provider :locale="languageCode">
+        <v-locale-provider
+          :locale="languageCode"
+        >
           <v-date-picker-month
             :month="innerRightMonth"
             :year="innerRightYear"
@@ -193,21 +203,21 @@ export default defineComponent({
           switch (side) {
             case "left":
               return innerLeftYear.value > date.y || (innerLeftYear.value === date.y && innerLeftMonth.value > date.m);
-            case "right":
+            default:
               return innerRightYear.value > date.y || (innerRightYear.value === date.y && innerRightMonth.value > date.m);
           }
         case "during":
           switch (side) {
             case "left":
               return innerLeftYear.value === date.y && innerLeftMonth.value === date.m;
-            case "right":
+            default:
               return innerRightYear.value === date.y && innerRightMonth.value === date.m;
           }
         case "after":
           switch (side) {
             case "left":
               return innerLeftYear.value < date.y || (innerLeftYear.value === date.y && innerLeftMonth.value < date.m);
-            case "right":
+            default:
               return innerRightYear.value < date.y || (innerRightYear.value === date.y && innerRightMonth.value < date.m);
           }
       }

package/components/FSCard.vue

@@ -10,17 +10,23 @@
         <FSRow
           v-if="$slots.header"
         >
-          <slot name="header" />
+          <slot
+            name="header"
+          />
         </FSRow>
         <FSRow
           v-if="$slots.body"
         >
-          <slot name="body" />
+          <slot
+            name="body"
+          />
         </FSRow>
         <FSRow
           v-if="$slots.footer"
         >
-          <slot name="footer" />
+          <slot
+            name="footer"
+          />
         </FSRow>
       </FSCol>
     </slot>

package/components/FSCheckbox.vue

@@ -13,7 +13,9 @@
       @blur="blurred = true"
       v-bind="$attrs"
     >
-      <template #input>
+      <template
+        #input
+      >
         <FSRow
           align="center-left"
           width="hug"
@@ -39,7 +41,9 @@
         </FSRow>
       </template>
     </v-checkbox>
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="$props.description"
         class="fs-checkbox-description"

package/components/FSClickable.vue

@@ -17,11 +17,19 @@
       :style="style"
       v-bind="$attrs"
     >
-      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="{ ...slotData, contentVariant }"
+        />
       </template>
     </FSCard>
-    <template v-if="$props.load">
+    <template
+      v-if="$props.load"
+    >
       <v-progress-circular
         class="fs-clickable-load"
         width="2"
@@ -49,11 +57,19 @@
       :style="style"
       v-bind="$attrs"
     >
-      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="{ ...slotData, contentVariant }"
+        />
       </template>
     </FSCard>
-    <template v-if="$props.load">
+    <template
+      v-if="$props.load"
+    >
       <v-progress-circular
         class="fs-clickable-load"
         width="2"
@@ -82,11 +98,19 @@
       :style="style"
       v-bind="$attrs"
     >
-      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="{ ...slotData, contentVariant }" />
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="{ ...slotData, contentVariant }"
+        />
       </template>
     </FSCard>
-    <template v-if="$props.load">
+    <template
+      v-if="$props.load"
+    >
       <v-progress-circular
         class="fs-clickable-load"
         width="2"

package/components/FSDialog.vue

@@ -14,8 +14,14 @@
       :color="$props.color"
       :class="classes"
     >
-      <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
       </template>
     </FSCard>
     <FSButton
@@ -37,14 +43,12 @@ import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 import FSButton from "./FSButton.vue";
 import FSCard from "./FSCard.vue";
-import FSCol from "./FSCol.vue";
 
 export default defineComponent({
   name: "FSDialog",
   components: {
     FSButton,
-    FSCard,
-    FSCol
+    FSCard
   },
   props: {
     width: {

package/components/FSDialogMenu.vue

@@ -0,0 +1,80 @@
+<template>
+  <v-dialog
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <FSCard
+      padding="8px"
+      gap="24px"
+      :color="$props.color"
+      :class="classes"
+    >
+      <template
+        v-for="(_, name) in $slots"
+        v-slot:[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="slotData"
+        />
+      </template>
+    </FSCard>
+  </v-dialog>
+</template>
+  
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSCard from "./FSCard.vue";
+
+export default defineComponent({
+  name: "FSDialogMenu",
+  components: {
+    FSCard
+  },
+  props: {
+    cardClasses: {
+      type: [Array, String] as PropType<string[] | string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Dark
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { isExtraSmall } = useBreakpoints();
+
+    const classes = computed((): string[] => {
+      const classNames = ["fs-dialog-menu"];
+      if (props.cardClasses) {
+        if (Array.isArray(props.cardClasses)) {
+          classNames.push(...props.cardClasses);
+        }
+        else {
+          classNames.push(props.cardClasses);
+        }
+      }
+      return classNames;
+    });
+
+    return {
+      isExtraSmall,
+      ColorEnum,
+      classes
+    };
+  }
+});
+</script>

package/components/FSDialogSubmit.vue

@@ -188,7 +188,6 @@ export default defineComponent({
                   + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
                   + (isMobileSized.value ? 36 : 40)                              // Footer
                   + 64;                                                          // Debug mask
-      console.log(document.documentElement.clientHeight, document.documentElement.clientHeight*0.9 - other);
       return `calc(90vh - ${other}px)`;
     });
 

package/components/FSEditImage.vue

@@ -1,52 +1,181 @@
 <template>
-  <FSRow
-    width="hug"
-    gap="24px"
+  <FSCol
+    gap="8px"
   >
-    <FSImage
-      class="fs-edit-image"
-      :aspectRatio="$props.aspectRatio"
-      :height="$props.height"
+    <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 || realSource"
+            :aspectRatio="$props.aspectRatio"
+            :height="$props.height"
+            :width="$props.width"
+            :imageId="$props.imageId"
+            :imageB64="realSource"
+          />
+          <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"
+              lineClamp="2"
+              font="text-body"
+            >
+              {{ fileSelected.fileName }}
+            </FSText>
+            <FSCol
+              gap="0"
+            >
+              <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:modelValue="onUpload"
+          />
+          <FSButtonRemoveMini
+            @click="onRemove"
+          />
+        </FSRow>
+      </FSRow>
+    </FSCard>
+    <FSRow
+      v-else-if="$props.imageId || realSource"
       :width="$props.width"
-      :imageId="$props.imageId"
-      :imageB64="realSource"
-      :style="style"
-    />
-    <FSCol
-      align="bottom-left"
-      height="fill"
-      width="hug"
+      class="fs-edit-image-full"
     >
-      <FSText
-        v-if="fileSelected"
-        font="text-body"
+      <FSImage
+        :aspectRatio="$props.aspectRatio"
+        :height="$props.height"
+        :width="$props.width"
+        :imageId="$props.imageId"
+        :imageB64="realSource"
+      />
+      <FSRow
+        class="fs-edit-image-full-toolbar"
+        padding="4px"
       >
-        {{ fileSelected.fileName }}
-      </FSText>
-      <FSRow>
-        <FSButtonFileIcon
+        <FSButtonFileMini
           accept="image/*"
           :readFile="false"
           @update:modelValue="onUpload"
         />
-        <FSButtonRemoveIcon
+        <FSButtonRemoveMini
           @click="onRemove"
         />
       </FSRow>
-    </FSCol>
-  </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
+          lineClamp="2"
+          font="text-body"
+        >
+          {{ $tr('ui.edit-image.add-image', 'Add an image.') }}
+        </FSText>
+        <FSButtonFileMini
+          ref="invisibleButtonRef"
+          class="fs-edit-image-hidden-button"
+          accept="image/*"
+          :readFile="false"
+          @update:modelValue="onUpload"
+        />
+      </FSRow>
+    </FSClickable>
+  </FSCol>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 import { ColorEnum, FileImage } from "@dative-gpi/foundation-shared-components/models";
 
-import FSButtonRemoveIcon from "./buttons/FSButtonRemoveIcon.vue";
-import FSButtonFileIcon from "./buttons/FSButtonFileIcon.vue";
+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";
@@ -54,9 +183,11 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSEditImage",
   components: {
-    FSButtonRemoveIcon,
-    FSButtonFileIcon,
+    FSButtonRemoveMini,
+    FSButtonFileMini,
+    FSClickable,
     FSImage,
+    FSCard,
     FSText,
     FSCol,
     FSRow
@@ -86,20 +217,46 @@ export default defineComponent({
       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
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue", "update:imageId"],
   setup(props, { emit }) {
+    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
     const { readFile } = useFiles();
 
-    const lights = getColors(ColorEnum.Light);
-
     const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
+    const invisibleButtonRef = ref<HTMLFormElement | null>(null);
 
-    const style = computed((): { [key: string] : string | undefined } => {
+    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-border-color": lights.dark
+        "--fs-edit-image-overline-text-color": lights.dark,
+        "--fs-edit-image-color"              : darks.base,
+        "--fs-edit-image-error-color"        : errors.base
       };
     });
 
@@ -115,6 +272,9 @@ export default defineComponent({
       fileSelected.value.fileName = payload.name;
       fileSelected.value.fileContent = content;
       emit("update:modelValue", content.substring(content.indexOf(',') + 1));
+      if (props.imageId) {
+        emit("update:imageId", null);
+      }
     };
 
     const onRemove = () => {
@@ -129,7 +289,9 @@ export default defineComponent({
     };
 
     return {
+      invisibleButtonRef,
       fileSelected,
+      isExtraSmall,
       realSource,
       style,
       onUpload,