@dative-gpi/foundation-shared-components 0.0.88 → 0.0.90

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
     };
   }
 });

package/components/fields/FSDateTimeField.vue

@@ -1,12 +1,8 @@
 <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"
         :label="$props.label"
@@ -22,8 +18,8 @@
         :validationValue="$props.modelValue"
         :modelValue="epochToLongTimeFormat($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,65 +46,162 @@
           />
         </template>
       </FSTextField>
+      <FSDialogMenu
+        v-model="dialog"
+      >
+        <template
+          #body
+        >
+          <FSWindow
+            :modelValue="tabs"
+          >
+            <FSCol
+              width="hug"
+              :value="0"
+            >
+              <FSCalendar
+                :color="$props.color"
+                v-model="innerDate"
+              />
+              <FSButton
+                width="100%"
+                :color="$props.color"
+                :label="$tr('ui.common.validate', 'Validate')"
+                @click="tabs++"
+              />
+            </FSCol>
+            <FSCol
+              width="hug"
+              :value="1"
+            >
+              <FSClock
+                :color="$props.color"
+                v-model="innerTime"
+              />
+              <FSButton
+                width="100%"
+                :color="$props.color"
+                :label="$tr('ui.common.validate', 'Validate')"
+                @click="onSubmit"
+              />
+            </FSCol>
+          </FSWindow>
+        </template>
+      </FSDialogMenu>
     </template>
-    <FSWindow
-      :modelValue="tabs"
+    <template
+      v-else
     >
-      <FSCard
-        padding="8px"
-        width="346px"
-        :elevation="true"
-        :border="false"
-        :value="0"
+      <v-menu
+        :closeOnContentClick="false"
+        :modelValue="menu && $props.editable"
+        @update:modelValue="menu = $event"
       >
-        <FSCol
-          width="fill"
+        <template
+          #activator="{ props }"
         >
-          <FSCalendar
-            :color="$props.color"
-            v-model="innerDate"
-          />
-          <FSButton
-            width="100%"
+          <FSTextField
+            class="fs-date-field"
+            :label="$props.label"
+            :description="$props.description"
             :color="$props.color"
-            :label="$tr('ui.date-menu.validate', 'Validate')"
-            @click="tabs++"
-          />
-        </FSCol>
-      </FSCard>
-      <FSCard
-        padding="8px"
-        width="394px"
-        :elevation="true"
-        :border="false"
-        :value="1"
-      >
-        <FSCol
-          width="fill"
+            :hideHeader="$props.hideHeader"
+            :required="$props.required"
+            :editable="$props.editable"
+            :readonly="true"
+            :rules="$props.rules"
+            :messages="messages"
+            :validateOn="validateOn"
+            :validationValue="$props.modelValue"
+            :modelValue="epochToLongTimeFormat($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>
+        <FSWindow
+          :modelValue="tabs"
         >
-          <FSClock
-            :color="$props.color"
-            v-model="innerTime"
-          />
-          <FSButton
-            width="100%"
-            :color="$props.color"
-            :label="$tr('ui.date-menu.validate', 'Validate')"
-            @click="onSubmit"
-          />
-        </FSCol>
-      </FSCard>
-    </FSWindow>
-  </v-menu>
+          <FSCard
+            padding="8px"
+            :elevation="true"
+            :border="false"
+            :value="0"
+          >
+            <FSCol
+              width="fill"
+            >
+              <FSCalendar
+                :color="$props.color"
+                v-model="innerDate"
+              />
+              <FSButton
+                width="100%"
+                :color="$props.color"
+                :label="$tr('ui.common.validate', 'Validate')"
+                @click="tabs++"
+              />
+            </FSCol>
+          </FSCard>
+          <FSCard
+            padding="8px"
+            :elevation="true"
+            :border="false"
+            :value="1"
+          >
+            <FSCol
+              width="hug"
+            >
+              <FSClock
+                :color="$props.color"
+                v-model="innerTime"
+              />
+              <FSButton
+                width="100%"
+                :color="$props.color"
+                :label="$tr('ui.common.validate', 'Validate')"
+                @click="onSubmit"
+              />
+            </FSCol>
+          </FSCard>
+        </FSWindow>
+      </v-menu>
+    </template>
+  </FSCol>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } 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 FSWindow from "../FSWindow.vue";
@@ -119,6 +213,7 @@ import FSCol from "../FSCol.vue";
 export default defineComponent({
   name: "FSDateTimeField",
   components: {
+    FSDialogMenu,
     FSTextField,
     FSCalendar,
     FSWindow,
@@ -173,17 +268,19 @@ export default defineComponent({
   setup(props, { emit }) {
     const { getUserOffsetMillis, epochToLongTimeFormat } = useAppTimeZone();
     const { validateOn, blurred, getMessages } = useRules();
+    const { isExtraSmall } = useBreakpoints();
     const { getColors } = useColors();
 
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-
+    const dialog = ref(false);
     const menu = ref(false);
     const tabs = ref(0);
     const innerDate = ref<number | null>(null);
     const innerTime = ref(0);
 
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
     if (props.modelValue) {
       // FSClock just gives two numbers without consideration for the time zone
       // We must adjust the time to the user's time zone
@@ -205,6 +302,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;
@@ -213,28 +317,32 @@ export default defineComponent({
 
     const onSubmit = (): void => {
       emit("update:modelValue", (innerDate.value ?? 0) + innerTime.value);
+      dialog.value = false;
       menu.value = false;
     };
 
-    watch(menu, (): void => {
-      if (!menu.value) {
-        setTimeout(() => tabs.value = 0, 100);
+    watch([menu, dialog], (): void => {
+      if (!menu.value && !dialog.value) {
+        setTimeout(() => tabs.value = 0, 290);
       }
     });
 
     return {
+      isExtraSmall,
+      validateOn,
       ColorEnum,
       innerDate,
       innerTime,
-      validateOn,
       messages,
       blurred,
+      dialog,
       style,
       menu,
       tabs,
-      onClear,
+      epochToLongTimeFormat,
+      openMobileOverlay,
       onSubmit,
-      epochToLongTimeFormat
+      onClear
     };
   }
 });

package/components/fields/FSIconField.vue

@@ -14,7 +14,9 @@
       v-model="innerValue"
       v-bind="$attrs"
     >
-      <template #append-inner>
+      <template
+        #append-inner
+      >
         <FSIcon
           v-if="$props.modelValue"
           size="l"
@@ -33,7 +35,7 @@
       :required="$props.required"
       :editable="$props.editable"
       :values="icons"
-      @update:modelValue="(value) => $emit('update:modelValue', value)"
+      @update:modelValue="$emit('update:modelValue', $event)"
     />
   </FSCol>
 </template>

package/components/fields/FSNumberField.vue

@@ -5,8 +5,14 @@
     @update:modelValue="onUpdate"
     v-bind="$attrs"
   >
-    <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>
   </FSTextField>
 </template>
@@ -36,7 +42,7 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(_, { emit }) {
     const onUpdate = (value: string) => {
-      const match = /([0-9 ]*[,\.]?)?[0-9]+/.exec(value);
+      const match = /([0-9 ]*[,.]?)?[0-9]+/.exec(value);
       if (match && !isNaN(parseFloat(match[0].replace(",", ".").replace(" ", "")))) {
         emit("update:modelValue", parseFloat(match[0].replace(",", ".").replace(" ", "")));
       }

package/components/fields/FSPasswordField.vue

@@ -3,14 +3,24 @@
     :type="type"
     :editable="$props.editable"
     :modelValue="$props.modelValue"
-    @update:modelValue="(value) => $emit('update:modelValue', value)"
+    @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
   >
-    <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>
-    <template #append-inner>
-      <slot name="append-inner">
+    <template
+      #append-inner
+    >
+      <slot
+        name="append-inner"
+      >
         <FSButton
           variant="icon"
           :editable="$props.editable"