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

package/components/fields/FSBaseField.vue

@@ -0,0 +1,134 @@
+<template>
+  <FSCol>
+    <slot
+      v-if="!$props.hideHeader"
+      name="label"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSSpan
+          class="fs-base-field-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-base-field-label"
+          style="margin-left: -8px;"
+          font="text-overline"
+          :ellipsis="false"
+          :style="style"
+        >
+          *
+        </FSSpan>
+        <v-spacer
+          style="min-width: 40px;"
+        />
+        <FSSpan
+          v-if="$props.messages.length > 0"
+          class="fs-base-field-messages"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.messages.join(", ") }}
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <slot />
+    <slot
+      name="description"
+    >
+      <FSSpan
+        v-if="$props.description"
+        class="fs-base-field-description"
+        font="text-underline"
+        :style="style"
+      >
+        {{ $props.description }}
+      </FSSpan>
+    </slot>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+
+import { useColors, useSlots } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSSpan from "../FSSpan.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSBaseField",
+  components: {
+    FSSpan,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    messages: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+    const { slots } = useSlots();
+
+    delete slots.label;
+    delete slots.description;
+
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): { [key: string] : string | undefined } => {
+      if (!props.editable) {
+        return {
+          "--fs-base-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-base-field-color"      : darks.base,
+        "--fs-base-field-error-color": errors.base
+      };
+    });
+
+    return {
+      style,
+      slots
+    };
+  }
+});
+</script>

package/components/fields/FSColorField.vue

@@ -2,7 +2,7 @@
   <v-menu
     :closeOnContentClick="false"
     :modelValue="menu && $props.editable"
-    @update:modelValue="(value) => menu = value"
+    @update:modelValue="menu = $event"
   >
     <template
       #activator="{ props }"

package/components/fields/FSDateField.vue

@@ -1,11 +1,7 @@
 <template>
-  <v-menu
-    :closeOnContentClick="false"
-    :modelValue="menu && $props.editable"
-    @update:modelValue="(value) => menu = value"
-  >
+  <FSCol>
     <template
-      #activator="{ props }"
+      v-if="isExtraSmall"
     >
       <FSTextField
         class="fs-date-field"
@@ -22,8 +18,8 @@
         :validationValue="$props.modelValue"
         :modelValue="epochToLongDateFormat($props.modelValue)"
         @update:modelValue="onClear"
+        @click="openMobileOverlay"
         @blur="blurred = true"
-        v-bind="props"
       >
         <template
           #prepend-inner
@@ -36,6 +32,7 @@
               icon="mdi-calendar"
               :editable="$props.editable"
               :color="ColorEnum.Dark"
+              @click="openMobileOverlay"
             />
           </slot>
         </template>
@@ -49,38 +46,116 @@
           />
         </template>
       </FSTextField>
+      <FSDialogMenu
+        v-model="dialog"
+      >
+        <template
+          #body
+        >
+          <FSCol
+            width="hug"
+          >
+            <FSCalendar
+              :color="$props.color"
+              v-model="innerDate"
+            />
+            <FSButton
+              width="100%"
+              :color="$props.color"
+              :label="$tr('ui.common.validate', 'Validate')"
+              @click="onSubmit"
+            />
+          </FSCol>
+        </template>
+      </FSDialogMenu>
     </template>
-    <FSCard
-      padding="8px"
-      width="346px"
-      :elevation="true"
-      :border="false"
+    <template
+      v-else
     >
-      <FSCol
-        width="fill"
+      <v-menu
+        :closeOnContentClick="false"
+        :modelValue="menu && $props.editable"
+        @update:modelValue="menu = $event"
       >
-        <FSCalendar
-          :color="$props.color"
-          v-model="innerDate"
-        />
-        <FSButton
-          width="100%"
-          :color="$props.color"
-          :label="$tr('ui.date-menu.validate', 'Validate')"
-          @click="onSubmit"
-        />
-      </FSCol>
-    </FSCard>
-  </v-menu>
+        <template
+          #activator="{ props }"
+        >
+          <FSTextField
+            class="fs-date-field"
+            :label="$props.label"
+            :description="$props.description"
+            :color="$props.color"
+            :hideHeader="$props.hideHeader"
+            :required="$props.required"
+            :editable="$props.editable"
+            :readonly="true"
+            :rules="$props.rules"
+            :messages="messages"
+            :validateOn="validateOn"
+            :validationValue="$props.modelValue"
+            :modelValue="epochToLongDateFormat($props.modelValue)"
+            @update:modelValue="onClear"
+            @blur="blurred = true"
+            v-bind="props"
+          >
+            <template
+              #prepend-inner
+            >
+              <slot
+                name="prepend-inner"
+              >
+                <FSButton
+                  variant="icon"
+                  icon="mdi-calendar"
+                  :editable="$props.editable"
+                  :color="ColorEnum.Dark"
+                />
+              </slot>
+            </template>
+            <template
+              v-for="(_, name) in $slots"
+              v-slot:[name]="slotData"
+            >
+              <slot
+                :name="name"
+                v-bind="slotData"
+              />
+            </template>
+          </FSTextField>
+        </template>
+        <FSCard
+          padding="8px"
+          :elevation="true"
+          :border="false"
+        >
+          <FSCol
+            width="hug"
+          >
+            <FSCalendar
+              :color="$props.color"
+              v-model="innerDate"
+            />
+            <FSButton
+              width="100%"
+              :color="$props.color"
+              :label="$tr('ui.common.validate', 'Validate')"
+              @click="onSubmit"
+            />
+          </FSCol>
+        </FSCard>
+      </v-menu>
+    </template>
+  </FSCol>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from "vue";
 
-import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
 
+import FSDialogMenu from "../FSDialogMenu.vue";
 import FSTextField from "./FSTextField.vue";
 import FSCalendar from "../FSCalendar.vue";
 import FSButton from "../FSButton.vue";
@@ -90,6 +165,7 @@ import FSCol from "../FSCol.vue";
 export default defineComponent({
   name: "FSDateField",
   components: {
+    FSDialogMenu,
     FSTextField,
     FSCalendar,
     FSButton,
@@ -140,17 +216,19 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const {validateOn, blurred, getMessages} = useRules();
+    const { validateOn, blurred, getMessages} = useRules();
     const { epochToLongDateFormat } = useAppTimeZone();
+    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
 
+    const dialog = ref(false);
+    const menu = ref(false);
+    const innerDate = ref<number | null>(props.modelValue);
+
     const errors = getColors(ColorEnum.Error);
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const menu = ref(false);
-    const innerDate = ref<number | null>(props.modelValue);
-
     const style = computed((): { [key: string] : string | undefined } => {
       if (!props.editable) {
         return {
@@ -165,6 +243,13 @@ export default defineComponent({
 
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules));
 
+    const openMobileOverlay = () => {
+      if (!props.editable) {
+        return;
+      }
+      dialog.value = true;
+    };
+
     const onClear = (): void => {
       emit("update:modelValue", null);
       innerDate.value = null;
@@ -172,20 +257,24 @@ export default defineComponent({
 
     const onSubmit = (): void => {
       emit("update:modelValue", innerDate.value);
+      dialog.value = false;
       menu.value = false;
     };
 
     return {
+      isExtraSmall,
+      validateOn,
       ColorEnum,
       innerDate,
-      validateOn,
       messages,
       blurred,
+      dialog,
       style,
       menu,
-      onClear,
+      epochToLongDateFormat,
+      openMobileOverlay,
       onSubmit,
-      epochToLongDateFormat
+      onClear
     };
   }
 });