Merge pull request #7 from michielfb/feature/add-steps

Add steps

The step attribute allows to vary the amount of time jumped whenever the time is incremented or decremented. By setting the step to 1 it allows users to enter seconds.

README.md

@@ -20,7 +20,26 @@ The format must be a format supported by `Moment.js`.
 <?php 
 use Michielfb\Time\Time;
 
-
 Time::make('Time')->format('HH:mm');
+```
+
+### Steps
+
+The [step attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Using_the_step_attribute)
+can be configured by using the `withSteps` method.
+
+```php 
+<?php 
+use Michielfb\Time\Time;
 
+Time::make('Time')->withSteps(1);
 ```
+
+The `withSeconds` method sets a step of 1 which allows users to enter seconds.
+
+```php 
+<?php 
+use Michielfb\Time\Time;
+
+Time::make('Time')->withSeconds();
+```

resources/js/components/FormField.vue

@@ -1,12 +1,14 @@
 <template>
     <default-field :field="field">
         <template slot="field">
-            <input :id="field.name" type="time"
-                class="w-full form-control form-input form-input-bordered"
-                :class="errorClasses"
-                :placeholder="field.name"
-                :disabled="isReadonly"
-                v-model="value"
+            <input :id="field.name"
+                   type="time"
+                   class="w-full form-control form-input form-input-bordered"
+                   :class="errorClasses"
+                   :placeholder="field.name"
+                   :disabled="isReadonly"
+                   :step="field.step !== undefined ? field.step : false"
+                   v-model="value"
             />
 
             <p v-if="hasError" class="my-2 text-danger">

src/Time.php

@@ -24,4 +24,30 @@ public function format(string $format = 'hh:mm A')
             'format' => $format,
         ]);
     }
+
+    /**
+     * Set step attribute on time field.
+     *
+     * @param int $step
+     *
+     * @return $this
+     */
+    public function withSteps(int $step)
+    {
+        return $this->withMeta([
+            'step' => $step
+        ]);
+    }
+
+    /**
+     * Allow users to enter seconds.
+     *
+     * @return $this
+     */
+    public function withSeconds()
+    {
+        return $this->withMeta([
+            'step' => 1,
+        ]);
+    }
 }