@dative-gpi/foundation-shared-components 0.1.120 → 1.0.0

package/components/FSDialog.vue

@@ -1,80 +1,45 @@
 <template>
   <v-dialog
     transition="dialog-bottom-transition"
-    class="fs-dialog"
-    :style="style"
+    :class="classes"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
-    <FSCard
-      padding="24px 8px 24px 24px"
-      gap="24px"
-      :color="$props.color"
-      :class="classes"
-    >
-      <template
-        #header
+    <slot>
+      <FSDialogContent
+        :title="$props.title"
+        :subtitle="$props.subtitle"
+        :width="$props.width"
+        :modelValue="$props.modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
       >
-        <FSCol
-          padding="0 16px 0 0"
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
         >
-          <FSRow
-            align="center-left"
-            :wrap="false"
-          >
-            <FSText
-              font="text-h2"
-            >
-              {{ $props.title }}
-            </FSText>
-            <v-spacer />
-            <FSButton
-              icon="mdi-close"
-              variant="icon"
-              :color="ColorEnum.Dark"
-              @click="$emit('update:modelValue', false)"
-            />
-          </FSRow>
-          <FSText
-            v-if="$props.subtitle"
-          >
-            {{ $props.subtitle }}
-          </FSText>
-        </FSCol>
-      </template>
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="slotData"
-        />
-      </template>
-    </FSCard>
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSDialogContent>
+    </slot>
   </v-dialog>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
-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 FSRow from "./FSRow.vue";
+import FSDialogContent from "./FSDialogContent.vue";
 
 export default defineComponent({
   name: "FSDialog",
   components: {
-    FSButton,
-    FSCard,
-    FSText,
-    FSRow
+    FSDialogContent
   },
   props: {
     title: {
@@ -101,49 +66,25 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
-    },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Dark
     }
   },
   emits: ["update:modelValue"],
-  setup(props) {
+  setup() {
     const { isExtraSmall } = useBreakpoints();
 
     const classes = computed((): string[] => {
-      const classNames = ["fs-dialog"];
-      if (props.cardClasses) {
-        if (Array.isArray(props.cardClasses)) {
-          classNames.push(...props.cardClasses);
-        }
-        else {
-          classNames.push(props.cardClasses);
-        }
-      }
+      const classNames: string[] = [];
       if (isExtraSmall.value) {
         classNames.push("fs-dialog-mobile");
       }
-      return classNames;
-    });
-
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      if (isExtraSmall.value) {
-        return {
-          "--fs-dialog-width": "100%"
-        };
+      else {
+        classNames.push("fs-dialog");
       }
-      return {
-        "--fs-dialog-width": sizeToVar(props.width)
-      };
+      return classNames;
     });
 
     return {
-      isExtraSmall,
-      ColorEnum,
-      classes,
-      style
+      classes
     };
   }
 });

package/components/FSDialogContent.vue

@@ -0,0 +1,133 @@
+<template>
+  <FSCard
+    padding="24px 8px 24px 24px"
+    gap="24px"
+    :class="$props.cardClasses"
+    :color="$props.color"
+    :width="cardWidth"
+  >
+    <template
+      #header
+    >
+      <FSCol
+        padding="0 16px 0 0"
+      >
+        <FSRow
+          align="center-left"
+          :wrap="false"
+        >
+          <FSText
+            font="text-h2"
+          >
+            {{ $props.title }}
+          </FSText>
+          <v-spacer />
+          <FSButton
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', false)"
+          />
+        </FSRow>
+        <FSText
+          v-if="$props.subtitle"
+        >
+          {{ $props.subtitle }}
+        </FSText>
+      </FSCol>
+    </template>
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+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 FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSDialogContent",
+  components: {
+    FSButton,
+    FSCard,
+    FSText,
+    FSRow
+  },
+  props: {
+    title: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    subtitle: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "fit-content"
+    },
+    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: string[] = [];
+      if (isExtraSmall.value) {
+        classNames.push("fs-dialog-mobile");
+      }
+      else {
+        classNames.push("fs-dialog");
+      }
+      return classNames;
+    });
+
+    const cardWidth = computed((): string => {
+      if (isExtraSmall.value) {
+        return "100%";
+      }
+      return sizeToVar(props.width);
+    });
+
+    return {
+      isExtraSmall,
+      cardWidth,
+      ColorEnum,
+      classes
+    };
+  }
+});
+</script>

package/components/FSDialogForm.vue

@@ -10,122 +10,40 @@
     <template
       #body
     >
-      <template
-        v-if="!$props.validation"
+      <FSDialogFormBody 
+        v-bind="$attrs"
+        :subtitle="$props.subtitle"
+        :validation="$props.validation"
+        @click:cancelButton="$emit('update:modelValue', false)"
+        @click:submitButton="$emit('click:submitButton')"
+        @click:validateButton="onValidate"
       >
-        <FSForm
-          ref="formRef"
-          :variant="$props.variant"
-          @submit="onSubmit"
-          v-model="valid"
+        <template
+          v-for="(_, name) in $slots"
+          v-slot:[name]="slotData"
         >
-          <FSCol
-            gap="24px"
-          >
-            <FSFadeOut
-              :height="height"
-              padding="0 8px 0 0"
-            >
-              <slot
-                name="body"
-              />
-            </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="cancelLabel"
-                  @click="() => $emit('update:modelValue', false)"
-                />
-                <FSButton
-                  type="submit"
-                  :prependIcon="$props.submitButtonPrependIcon"
-                  :appendIcon="$props.submitButtonAppendIcon"
-                  :variant="$props.submitButtonVariant"
-                  :color="$props.submitButtonColor"
-                  :editable="$props.editable"
-                  :label="submitLabel"
-                  :load="$props.load"
-                />
-              </FSRow>
-            </FSRow>
-          </FSCol>
-        </FSForm>
-      </template>
-      <template
-        v-else
-      >
-        <FSCol
-          gap="24px"
-        >
-          <FSFadeOut
-            :height="height"
-            padding="0 8px 0 0"
-          >
-            <slot
-              name="validation"
-            />
-          </FSFadeOut>
-          <FSRow
-            padding="0 16px 0 0"
-          >
-            <slot
-              name="left-footer"
-            />
-            <FSRow
-              class="fs-dialog-actions"
-              align="top-right"
-              :wrap="false"
-            >
-              <FSButton
-                :prependIcon="$props.validateButtonPrependIcon"
-                :appendIcon="$props.validateButtonAppendIcon"
-                :variant="$props.validateButtonVariant"
-                :color="$props.validateButtonColor"
-                :label="validateLabel"
-                @click="onValidate"
-              />
-            </FSRow>
-          </FSRow>
-        </FSCol>
-      </template>
+          <slot
+            :name="name"
+            v-bind="slotData"
+          />
+        </template>
+      </FSDialogFormBody>
     </template>
   </FSDialog>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from "vue";
-
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
-import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import type { PropType} from "vue";
+import { defineComponent } from "vue";
 
-import FSFadeOut from "./FSFadeOut.vue";
-import FSButton from "./FSButton.vue";
+import FSDialogFormBody from "./FSDialogFormBody.vue";
 import FSDialog from "./FSDialog.vue";
-import FSForm from "./FSForm.vue";
-import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSDialogForm",
   components: {
-    FSFadeOut,
-    FSButton,
-    FSDialog,
-    FSForm,
-    FSRow
+    FSDialogFormBody,
+    FSDialog
   },
   props: {
     title: {
@@ -138,139 +56,24 @@ export default defineComponent({
       required: false,
       default: null
     },
-    width: {
-      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
-      required: false,
-      default: "auto"
-    },
-    variant: {
-      type: String as PropType<"standard" | "lazy" | "submit">,
-      required: false,
-      default: "submit"
-    },
     modelValue: {
       type: Boolean,
       required: false,
       default: false
     },
-    cancelButtonPrependIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    cancelButtonLabel: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    cancelButtonAppendIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    cancelButtonVariant: {
-      type: String as PropType<"standard" | "full" | "icon">,
-      required: false,
-      default: "standard"
-    },
-    cancelButtonColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
-    },
-    submitButtonPrependIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    submitButtonLabel: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    submitButtonAppendIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    submitButtonVariant: {
-      type: String as PropType<"standard" | "full" | "icon">,
-      required: false,
-      default: "full"
-    },
-    submitButtonColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Primary
-    },
-    validateButtonPrependIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    validateButtonLabel: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    validateButtonAppendIcon: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    validateButtonVariant: {
-      type: String as PropType<"standard" | "full" | "icon">,
-      required: false,
-      default: "standard"
-    },
-    validateButtonColor: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Light
-    },
     validation: {
       type: Boolean,
       required: false,
       default: false
     },
-    load: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    editable: {
-      type: Boolean,
+    width: {
+      type: [Array, String, Number] as PropType<"hug" | "fill" | string[] | number[] | string | number | null>,
       required: false,
-      default: true
+      default: "auto"
     }
   },
-  emits: ["update:modelValue", "click:submitButton", "click:validateButton"],
+  emits: ["update:modelValue", "click:validateButton", "click:submitButton"],
   setup(props, { emit }) {
-    const { isMobileSized } = useBreakpoints();
-    const { $tr } = useTranslationsProvider();
-
-    const formRef = ref<HTMLElement | null>(null);
-    const valid = ref(false);
-
-    const height = computed(() => {
-      const other = 24 + 24                                          // Paddings
-        + (isMobileSized.value ? 24 : 32) + 24                       // Title
-        + (props.subtitle ? (isMobileSized.value ? 14 : 16) + 8 : 0) // Subtitle
-        + (isMobileSized.value ? 36 : 40) + 24;                      // Footer
-      return `calc(100vh - 40px - ${other}px)`;
-    });
-
-    const cancelLabel = computed(() => {
-      return props.cancelButtonLabel ?? $tr("ui.button.cancel", "Cancel");
-    });
-
-    const submitLabel = computed(() => {
-      return props.submitButtonLabel ??  $tr("ui.button.submit", "Submit");
-    });
-
-    const validateLabel = computed(() => {
-      return props.validateButtonLabel ??  $tr("ui.button.validate", "Done");
-    });
 
     const onClose = () => {
       if (props.validation) {
@@ -279,27 +82,13 @@ export default defineComponent({
       emit("update:modelValue", false);
     };
 
-    const onSubmit = () => {
-      if (valid.value) {
-        emit("click:submitButton");
-      }
-    };
-
     const onValidate = () => {
       emit("click:validateButton");
       emit("update:modelValue", false);
     };
 
     return {
-      validateLabel,
-      cancelLabel,
-      submitLabel,
-      ColorEnum,
-      formRef,
-      height,
-      valid,
       onValidate,
-      onSubmit,
       onClose
     };
   }