feat(date/time field): change step to 10 if shift is pressed

closes formwerkjs#156

Author: ahmadalfy

packages/core/src/useDateTime/useDateTimeSegment.ts

@@ -174,15 +174,15 @@ export function useDateTimeSegment(_props: Reactivify<DateTimeSegmentProps>) {
       if (hasKeyCode(evt, 'ArrowUp')) {
         blockEvent(evt);
         if (!isNonEditable()) {
-          increment();
+          increment(evt.shiftKey ? 10 : 1);
         }
         return;
       }
 
       if (hasKeyCode(evt, 'ArrowDown')) {
         blockEvent(evt);
         if (!isNonEditable()) {
-          decrement();
+          decrement(evt.shiftKey ? -10 : -1);
         }
         return;
       }

packages/core/src/useDateTime/useDateTimeSegmentGroup.ts

@@ -25,8 +25,8 @@ export interface DateTimeSegmentRegistration {
 export interface DateTimeSegmentGroupContext {
   useDateSegmentRegistration(segment: DateTimeSegmentRegistration): {
     parser: NumberParserContext;
-    increment(): void;
-    decrement(): void;
+    increment(step: number): void;
+    decrement(step: number): void;
     setValue(value: number): void;
     getMetadata(): { min: number | null; max: number | null; maxLength: number | null };
     onDone(): void;
@@ -150,16 +150,16 @@ export function useDateTimeSegmentGroup({
       renderedSegments.value = renderedSegments.value.filter(s => s.id !== segment.id);
     });
 
-    function increment() {
+    function increment(step: number = 1) {
       const type = segment.getType();
-      const date = addToPart(type, 1);
+      const date = addToPart(type, step);
 
       onValueChange(withAllPartsSet(date));
     }
 
-    function decrement() {
+    function decrement(step: number = -1) {
       const type = segment.getType();
-      const date = addToPart(type, -1);
+      const date = addToPart(type, step);
 
       onValueChange(withAllPartsSet(date));
     }

packages/playground/src/components/TimeField.vue

@@ -27,7 +27,7 @@ const { controlProps, isTouched, labelProps, errorMessageProps, errorMessage, se
 @reference "../style.css";
 
 .InputDate {
-  font-family: 'Monaspace Neon Var';
+  font-family: 'Monaspace Neon Var', monospace;
   @apply relative w-max;
   margin-bottom: calc(1em * 1.5);