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

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"

package/components/fields/FSRichTextField.vue

@@ -1,8 +1,14 @@
 <template>
   <FSCol>
-    <FSRow v-if="!readonly">
-      <slot name="label">
-        <FSRow :wrap="false">
+    <FSRow
+      v-if="!readonly"
+    >
+      <slot
+        name="label"
+      >
+        <FSRow
+          :wrap="false"
+        >
           <FSSpan
             v-if="$props.label"
             class="fs-rich-text-field-label"
@@ -24,7 +30,9 @@
         </FSRow>
       </slot>
       <v-spacer />
-      <template v-if="$props.editable">
+      <template
+        v-if="$props.editable"
+      >
         <FSIcon
           class="fs-rich-text-field-icon"
           :color="toolbarColors.undo"
@@ -33,7 +41,9 @@
         >
           mdi-undo-variant
         </FSIcon>
-        <v-divider vertical />
+        <v-divider
+          vertical
+        />
         <FSIcon
           class="fs-rich-text-field-icon"
           :style="style"
@@ -62,7 +72,9 @@
         >
           mdi-format-paragraph
         </FSIcon>
-        <v-divider vertical />
+        <v-divider
+          vertical
+        />
         <FSIcon
           class="fs-rich-text-field-icon"
           :color="toolbarColors.bold"
@@ -103,7 +115,9 @@
         >
           mdi-link
         </FSIcon>
-        <v-divider vertical />
+        <v-divider
+          vertical
+        />
         <FSIcon
           class="fs-rich-text-field-icon"
           :style="style"
@@ -146,7 +160,9 @@
       @keypress.enter.stop="toggleLink"
       v-model="linkUrl"
     />
-    <slot name="description">
+    <slot
+      name="description"
+    >
       <FSSpan
         v-if="!readonly && $props.description"
         class="fs-rich-text-field-description"
@@ -211,9 +227,9 @@ export default defineComponent({
       default: false
     },
     rows: {
-        type: Number,
-        required: false,
-        default: 5
+      type: Number,
+      required: false,
+      default: 5
     },
     variant: {
       type: String as PropType<"standard" | "readonly">,
@@ -326,7 +342,7 @@ export default defineComponent({
           }
           else {
             return {
-              "--fs-rich-text-field-undo-cursor"        : canUndo ? "pointer" : "default",
+              "--fs-rich-text-field-undo-cursor"        : canUndo.value ? "pointer" : "default",
               "--fs-rich-text-field-icon-cursor"        : "pointer",
               "--fs-rich-text-field-border-color"       : lights.dark,
               "--fs-rich-text-field-color"              : darks.base,
@@ -335,13 +351,13 @@ export default defineComponent({
               "--fs-rich-text-field-min-height"         : minHeight
             };
           }
-        };
+        }
         case "readonly": return {
-            "--fs-rich-text-field-border-color"       : "transparent",
-            "--fs-rich-text-field-color"              : darks.base,
-            "--fs-rich-text-field-active-border-color": "transparent",
-            "--fs-rich-text-field-link-color"         : linkColors.value.dark,
-            "--fs-rich-text-field-min-height"         : minHeight
+          "--fs-rich-text-field-border-color"       : "transparent",
+          "--fs-rich-text-field-color"              : darks.base,
+          "--fs-rich-text-field-active-border-color": "transparent",
+          "--fs-rich-text-field-link-color"         : linkColors.value.dark,
+          "--fs-rich-text-field-min-height"         : minHeight
         }
       }
     });

package/components/fields/FSSearchField.vue

@@ -11,8 +11,13 @@
     v-model="innerValue"
     v-bind="$attrs"
   >
-    <template v-if="$props.prependInnerIcon" #prepend-inner>
-      <slot name="prepend-inner">
+    <template
+      v-if="$props.prependInnerIcon"
+      #prepend-inner
+    >
+      <slot
+        name="prepend-inner"
+      >
         <FSButton
           variant="icon"
           :icon="$props.prependInnerIcon"
@@ -22,8 +27,13 @@
         />
       </slot>
     </template>
-    <template v-if="!['instant'].includes($props.variant)" #append>
-      <slot name="append">
+    <template
+      v-if="!['instant'].includes($props.variant)"
+      #append
+    >
+      <slot
+        name="append"
+      >
         <FSButton
           :prependIcon="$props.buttonPrependIcon"
           :label="buttonLabel"
@@ -35,8 +45,14 @@
         />
       </slot>
     </template>
-    <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>
@@ -154,10 +170,10 @@ export default defineComponent({
     });
 
     return {
-      ColorEnum,
       placeholder,
       buttonLabel,
-      innerValue
+      innerValue,
+      ColorEnum
     };
   }
 });