@dative-gpi/foundation-shared-components 0.0.78 → 0.0.80

package/components/FSCalendarTwin.vue

@@ -1,8 +1,9 @@
 <template>
   <FSCol>
-    <FSRow>
+    <FSRow
+      v-if="$props.label"
+    >
       <FSSpan
-        v-if="$props.label"
         class="fs-calendar-label"
         font="text-overline"
       >

package/components/FSClickable.vue

@@ -9,6 +9,8 @@
     @mouseup="active = false"
   >
     <FSCard
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
       :height="$props.height"
       :width="$props.width"
       :class="classes"
@@ -39,6 +41,8 @@
     @mouseup="active = false"
   >
     <FSCard
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
       :height="$props.height"
       :width="$props.width"
       :class="classes"
@@ -70,6 +74,8 @@
     @mouseup="active = false"
   >
     <FSCard
+      :borderRadius="$props.borderRadius"
+      :borderStyle="$props.borderStyle"
       :height="$props.height"
       :width="$props.width"
       :class="classes"

package/components/FSDialog.vue

@@ -7,7 +7,7 @@
     v-bind="$attrs"
   >
     <FSCard
-      padding="24px"
+      padding="24px 8px 24px 24px"
       width="100%"
       gap="24px"
       :border="!isExtraSmall"

package/components/FSDialogForm.vue

@@ -0,0 +1,236 @@
+<template>
+  <FSDialog
+    :width="$props.width"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      #header
+    >
+      <slot
+        name="header"
+      >
+        <FSCol
+          v-if="$props.title"
+          padding="0 16px 0 0"
+        >
+          <FSSpan
+            font="text-h2"
+          >
+            {{ $props.title }}
+          </FSSpan>
+          <FSSpan
+            v-if="$props.subtitle"
+          >
+            {{ $props.subtitle }}
+          </FSSpan>
+        </FSCol>
+      </slot>
+    </template>
+    <template
+      #body
+    >
+      <FSForm
+        :variant="$props.variant"
+        v-model="valid"
+      >
+        <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.leftButtonPrependIcon"
+                :label="cancelButtonLabel"
+                :appendIcon="$props.leftButtonAppendIcon"
+                :variant="$props.leftButtonVariant"
+                :color="$props.leftButtonColor"
+                @click="() => $emit('update:modelValue', false)"
+              />
+              <FSButton
+                type="submit"
+                :prependIcon="$props.rightButtonPrependIcon"
+                :label="submitButtonLabel"
+                :appendIcon="$props.rightButtonAppendIcon"
+                :variant="$props.rightButtonVariant"
+                :color="$props.rightButtonColor"
+                :load="$props.load"
+                :editable="$props.editable"
+                @click="onSubmit"
+              />
+            </FSRow>
+          </FSRow>
+        </FSCol>
+      </FSForm>
+    </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 FSFadeOut from "./FSFadeOut.vue";
+import FSButton from "./FSButton.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
+  },
+  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<"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
+    },
+    leftButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    leftButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    leftButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    leftButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    rightButtonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    rightButtonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    rightButtonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    rightButtonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "full"
+    },
+    leftButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Light
+    },
+    rightButtonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    load: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "click:rightButton"],
+  setup(props, { emit }) {
+    const { isMobileSized } = useBreakpoints();
+    const { $tr } = useTranslationsProvider();
+
+    const valid = ref(false);
+
+    const height = computed(() => {
+      const other = 24 + 24                                                      // Paddings
+                  + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
+                  + (props.subtitle ? isMobileSized.value ? 14 + 8 : 16 + 8 : 0) // Subtitle
+                  + (isMobileSized.value ? 36 : 40)                              // Footer
+                  + 64;                                                          // Debug mask
+      return `calc(90vh - ${other}px)`;
+    });
+
+    const cancelButtonLabel = computed(() => {
+      return props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel");
+    });
+
+    const submitButtonLabel = computed(() => {
+      return props.rightButtonLabel ??  $tr("ui.button.validate", "Validate");
+    });
+
+    const onSubmit = () => {
+      if (valid.value) {
+        emit("click:rightButton");
+      }
+    };
+
+    return {
+      cancelButtonLabel,
+      submitButtonLabel,
+      ColorEnum,
+      height,
+      valid,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/{FSRemoveDialog.vue → FSDialogRemove.vue}

@@ -1,5 +1,5 @@
 <template>
-  <FSSubmitDialog
+  <FSDialogSubmit
     :rightButtonLabel="$tr('ui.button.remove', 'Remove')"
     :rightButtonColor="ColorEnum.Error"
     :title="title"
@@ -7,7 +7,9 @@
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
-    <template #body>
+    <template
+      #body
+    >
       <FSCol
         gap="16px"
       >
@@ -35,7 +37,10 @@
         </FSSpan>
       </FSCol>
     </template>
-    <template #footer v-if="$props.removing">
+    <template
+      #footer
+      v-if="$props.removing"
+    >
       <FSRow
         align="center-right"
         :height="footerHeight"
@@ -49,7 +54,7 @@
         />
       </FSRow>
     </template>
-  </FSSubmitDialog>
+  </FSDialogSubmit>
 </template>
 
 <script lang="ts">
@@ -59,16 +64,16 @@ import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSSubmitDialog from "./FSSubmitDialog.vue";
+import FSDialogSubmit from "./FSDialogSubmit.vue";
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-  name: "FSRemoveDialog",
+  name: "FSDialogRemove",
   components: {
-    FSSubmitDialog,
+    FSDialogSubmit,
     FSIcon,
     FSSpan,
     FSCol,
@@ -102,10 +107,10 @@ export default defineComponent({
 
     const title = computed((): string => {
       if (props.removeTotal > 1) {
-        return $tr("ui.remove-dialog.remove-plural", "Remove {0} entities", props.removeTotal.toString());
+        return $tr("ui.dialog-remove.remove-plural", "Remove {0} entities", props.removeTotal.toString());
       }
       else {
-        return $tr("ui.remove-dialog.remove-singular", "Remove an entity");
+        return $tr("ui.dialog-remove.remove-singular", "Remove an entity");
       }
     });
 

package/components/{FSSubmitDialog.vue → FSDialogSubmit.vue}

@@ -1,50 +1,79 @@
 <template>
   <FSDialog
-    cardClasses="fs-submit-dialog"
     :width="$props.width"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
-    <template #header>
-      <slot name="header">
-        <FSCol v-if="$props.title">
-          <FSSpan font="text-h2">
+    <template
+      #header
+    >
+      <slot
+        name="header"
+      >
+        <FSCol
+          v-if="$props.title"
+          padding="0 16px 0 0"
+        >
+          <FSSpan
+            font="text-h2"
+          >
             {{ $props.title }}
           </FSSpan>
-          <FSSpan v-if="$props.subtitle">
+          <FSSpan
+            v-if="$props.subtitle"
+          >
             {{ $props.subtitle }}
           </FSSpan>
         </FSCol>
       </slot>
     </template>
-    <template #body>
-      <slot name="body" />
+    <template
+      #body
+    >
+      <FSFadeOut
+        :height="height"
+        padding="0 8px 0 0"
+      >
+        <slot
+          name="body"
+        />
+      </FSFadeOut>
     </template>
-    <template #footer>
-      <slot name="footer">
+    <template
+      #footer
+    >
+      <slot
+        name="footer"
+      >
         <FSRow
-          class="fs-submit-dialog-actions"
-          align="top-right"
-          :wrap="false"
+          padding="0 16px 0 0"
         >
-          <FSButton
-            :prependIcon="$props.leftButtonPrependIcon"
-            :label="cancelButtonLabel"
-            :appendIcon="$props.leftButtonAppendIcon"
-            :variant="$props.leftButtonVariant"
-            :color="$props.leftButtonColor"
-            @click="() => $emit('update:modelValue', false)"
-          />
-          <FSButton
-            :prependIcon="$props.rightButtonPrependIcon"
-            :label="submitButtonLabel"
-            :appendIcon="$props.rightButtonAppendIcon"
-            :variant="$props.rightButtonVariant"
-            :color="$props.rightButtonColor"
-            :editable="$props.editable"
-            @click="() => $emit('click:rightButton')"
+          <slot
+            name="left-footer"
           />
+          <FSRow
+            align="top-right"
+            :wrap="false"
+          >
+            <FSButton
+              :prependIcon="$props.leftButtonPrependIcon"
+              :label="cancelButtonLabel"
+              :appendIcon="$props.leftButtonAppendIcon"
+              :variant="$props.leftButtonVariant"
+              :color="$props.leftButtonColor"
+              @click="() => $emit('update:modelValue', false)"
+            />
+            <FSButton
+              :prependIcon="$props.rightButtonPrependIcon"
+              :label="submitButtonLabel"
+              :appendIcon="$props.rightButtonAppendIcon"
+              :variant="$props.rightButtonVariant"
+              :color="$props.rightButtonColor"
+              :editable="$props.editable"
+              @click="() => $emit('click:rightButton')"
+            />
+          </FSRow>
         </FSRow>
       </slot>
     </template>
@@ -56,13 +85,18 @@ import { computed, defineComponent, PropType } 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 FSFadeOut from "./FSFadeOut.vue";
+import FSButton from "./FSButton.vue";
 import FSDialog from "./FSDialog.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
-  name: "FSSubmitDialog",
+  name: "FSDialogSubmit",
   components: {
+    FSFadeOut,
+    FSButton,
     FSDialog,
     FSRow
   },
@@ -145,8 +179,19 @@ export default defineComponent({
   },
   emits: ["update:modelValue", "click:rightButton"],
   setup(props) {
+    const { isMobileSized } = useBreakpoints();
     const { $tr } = useTranslationsProvider();
 
+    const height = computed(() => {
+      const other = 24 + 24                                                      // Paddings
+                  + (props.title ? isMobileSized.value ? 24 : 32 : 0)            // Title
+                  + (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)`;
+    });
+
     const cancelButtonLabel = computed(() => {
       return props.leftButtonLabel ?? $tr("ui.button.cancel", "Cancel");
     });
@@ -156,9 +201,10 @@ export default defineComponent({
     });
 
     return {
-      ColorEnum,
       cancelButtonLabel,
-      submitButtonLabel
+      submitButtonLabel,
+      ColorEnum,
+      height
     };
   }
 });

package/components/FSForm.vue

@@ -24,7 +24,7 @@ export default defineComponent({
     variant: {
       type: String as PropType<"standard" | "lazy" | "submit">,
       required: false,
-      default: "standard"
+      default: "submit"
     }
   },
   emits: ["update:modelValue", "submit"],

package/components/fields/FSAutocompleteField.vue

@@ -34,9 +34,9 @@
       </FSRow>
     </slot>
     <v-autocomplete
-      menuIcon="mdi-chevron-down"
-      clearIcon="mdi-close"
+      class="fs-autocomplete-field"
       variant="outlined"
+      :menuIcon="null"
       :style="style"
       :listProps="listStyle"
       :class="classes"
@@ -60,6 +60,27 @@
       <template v-for="(_, name) in slots" v-slot:[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
+      <template #clear>
+        <slot name="clear">
+          <FSButton
+            v-if="$props.editable && $props.modelValue"
+            icon="mdi-close"
+            variant="icon"
+            :color="ColorEnum.Dark"
+            @click="$emit('update:modelValue', null)"
+          />
+        </slot>
+      </template>
+      <template #append-inner>
+        <slot name="append-inner">
+          <FSButton
+            icon="mdi-chevron-down"
+            variant="icon"
+            :editable="$props.editable"
+            :color="ColorEnum.Dark"
+          />
+        </slot>
+      </template>
     </v-autocomplete>
     <slot name="description">
       <FSSpan
@@ -80,6 +101,7 @@ import { computed, defineComponent, PropType, ref, watch } from "vue";
 import { useColors, useRules, useSlots } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
+import FSButton from "../FSButton.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -87,6 +109,7 @@ import FSRow from "../FSRow.vue";
 export default defineComponent({
   name: "FSAutocompleteField",
   components: {
+    FSButton,
     FSSpan,
     FSCol,
     FSRow
@@ -221,6 +244,7 @@ export default defineComponent({
     return {
       innerSearch,
       validateOn,
+      ColorEnum,
       listStyle,
       messages,
       blurred,