Media Upload Component for Vue 3

 Media Upload Component for Vue 3

The media-upload package is a Vue 3 component for multi-image upload with preview. Media Upload supports creating and updating images and handles uploads for you.

This package contains two components, one for uploading new images and another for updating images:

 1<div id="app">
 2  <upload-media
 3    server="/api/upload"
 4    error="@error('media'){{$message}}@enderror">
 5  </upload-media>
 6 
 7	<update-media
 8    server="/api/upload"
 9    media_file_path="/post_images"
10    media_server="/api/media/{{$post->id}}"
11    error="@error('media'){{$message}}@enderror">
12  </update-media>
13</div>

The component uploads images as multipart/form-data, and the server returns the unique temporary image name. The main form submits media data as a hidden input which is then copied into its final location.

You can learn more about this package, get full installation instructions, and view the source code on GitHub. You can also see a fully featured demo application that implements this package in a demo Laravel application.

The package's author has a tutorial on how to upload multiple images with preview using Laravel and Vue which has full details on integrating this package with your application.

Read More

Generate Intervals of Time With the Laravel Hours Helper

Generate Intervals of Time With the Laravel Hours Helper

With the Laravel Hours Helper package, you can create a collection of dates and/of times with a specific interval (in minutes) for a particular period.

 1use Facades\Label84\HoursHelper\HoursHelper;
 2 
 3$hours = HoursHelper::create('08:00', '09:30', 30);
 4/*
 5=> Illuminate\Support\Collection {#3529
 6       all: [
 7           "08:00",
 8           "08:30",
 9           "09:00",
10           "09:30",
11       ],
12   }
13*/

This helper could be useful in generating dropdown selections for a calendar meeting invite or scheduling the duration of an event. This helper also allows you to define the date formatting for each interval of time:

 1$hours = HoursHelper::create('11:00', '13:00', 60, 'g:i A');
 2/*
 3Illuminate\Support\Collection {#3528
 4    all: [
 5        "11:00 AM",
 6        "12:00 PM",
 7        "1:00 PM",
 8    ],
 9}
10*/

Further, this helper can deal with intervals past midnight (i.e., the next day) and over multiple days:

 1HoursHelper::create(
 2    '2021-01-01 22:00',
 3    '2021-01-03 13:00',
 4    60,
 5    'Y-m-d H:i'
 6);
 7/*
 8Illuminate\Support\Collection {#3566
 9    all: [
10        "2021-01-01 22:00",
11        "2021-01-01 23:00",
12        "2021-01-02 00:00",
13        "2021-01-02 01:00",
14        "2021-01-02 02:00",
15        ...
16    ]
17}
18*/

You can learn more about this package, get full installation instructions, and view the source code on GitHub.

---

This package was submitted to our Laravel News Links section. Links is a place the community can post packages and tutorials around the Laravel ecosystem. Follow along on Twitter at @LaravelLinks

Read More

Alpine.js Focus Plugin

 Alpine.js Focus Plugin

What's neat about this plugin is that it allows you to trap focus within an element via the x-trap directive. Here's a demo:

The focus plugin also supports nesting dialogs, which tracks newly trapped elements and tracks the previously focused element. When the element is no longer trapped, it restores focus to where it was initially, allowing for intuitive nested tabbing:

Other features include arrow focus navigation between elements and an advanced focus API to help control focus on a granular level. Check out the official Focus Alpine.js documentation if you'd like to learn more.

Read More