Forem: Martin Bean

Dynamic named slots in Vue 3

Martin Bean — Fri, 22 Nov 2024 01:40:06 +0000

I’ve recently been re-building an admin panel in a personal Laravel-based project, convering it from “traditional” Blade views to an Inertia-based solution. As part of this, I’ve been identifying repeating elements that can be extracted into reusable Vue components.

One such component is a table, listing records. In my application, I’ve named this a ResourceTable. My first pass at this was to just pass headers and items as props. Headers was a map of the model attribute name and the human-friendly name for those attributes; and items was an array of models.

<script lang="ts" setup>
defineProps<{
    headers: Record<string, string>;
    items: Record<string, any>[];
}>();
</script>

<template>
    <table>
        <thead>
            <tr>
                <template v-bind:key="key" v-for="(value, key) in headers">
                    <th scope="col">{{ value }}</th>
                </template>
            </tr>
        </thead>
        <tbody>
            <tr>
                <template v-bind:key="index" v-for="(item, index) in items">
                    <template v-bind:key="key" v-for="(value, key) in headers">
                        <td>{{ item[key] }}</td>
                    </template>
                </template>
            </tr>
        </tbody>
    </table>
</template>

For the table header, the component just loops over headers prop and outputs the value in a <th> element.
For the table body, the component loops over each item in the items prop, and then iterates over the headers again to print the attribute value for each headers’ key.

An example of using this component looks like this:

<ResourceTable
    v-bind:headers="{
        'name': 'Name',
        'birth_date': 'Birthday'
    }"
    v-bind:items="[
        { 'name': 'John Doe', 'birth_date': null },
        { 'name': 'Jane Doe', 'birth_date': '1984-03-21' },
        { 'name': 'Joe Bloggs', 'birth_date' null }
    ]"
/>

However, data is not always necessarily consistent. For example, the items above all have a birth_date property, but the property value can be either a string or null. It would be nice to handle these cases.

Handling `null` values

The first case I handled was null values. I decided to output an em dash, with a more helpful label for those using assistive technologies like screen readers:

  <template v-bind:key="key" v-for="(value, key) in headers">
-     <td>{{ item[key] }}</td>
+     <td>
+         <template v-if="item[key] === null">
+             <span aria-label="No value">&mdash;</span>
+         </template>
+         <template v-else>{{ item[key] }}</template>
+     </td>
  </template>

Using dynamic named slots for each cell

Next, to have full control over how individual cells rendered, I used a slot with a dynamic name:

  <td>
      <template v-if="item[key] === null">
          <span aria-label="No value">&mdash;</span>
      </template>
-     <template v-else>{{ item[key] }}</template>
+     <template v-else>
+         <slot v-bind:name="`cell(${key})`" v-bind:value="item[key]">{{ item.key }}</slot>
+     </template>
  </td>

For each cell, a new slot is defined. So for cells for the attribute name, there would be a corresponding slot with the name cell(name).

If I don’t use these slots in my template, then they’ll just get the default value as before. But now if I do use these slots in my template, I can control have the value is displayed. So for birth_date values, I may want to do some formatting, or use a completely different component to handle the rendering of it:

  <ResourceTable
      v-bind:headers="{
          'name': 'Name',
          'birth_date': 'Birthday'
      }"
      v-bind:items="[
          { 'name': 'John Doe', 'birth_date': null },
          { 'name': 'Jane Doe', 'birth_date': '1984-03-21' },
          { 'name': 'Joe Bloggs', 'birth_date' null }
      ]"
- />
+ >
+     <template v-slot:cell(birth_date)="{ value }">
+         <FormattedDate v-model="value" />
+     </template>
+ </ResourceTable>

Adding row actions

It’s common in web applications for each row to have associated actions, i.e. edit that record, delete that record, etc. To accomplish this, I used an optional slot. If I defined a slot named actions in my template, then it would automatically add a new table heading, and a cell at the end of each row to hold the defined actions:

  <thead>
      <tr>
          <template v-bind:key="key" v-for="(value, key) in headers">
              <th scope="col">{{ value }}</th>
+             <template v-if="'actions' in $slots">
+                 <th scope="col">Actions</th>
+             </template>
          </template>
      </tr>
  </thead>
  <tbody>
      <tr>
          <template v-bind:key="index" v-for="(item, index) in items">
              <template v-bind:key="key" v-for="(value, key) in headers">
                  <td>{{ item[key] }}</td>
              </template>
+             <template v-if="'actions' in $slots">
+                 <td>
+                     <slot name="actions" v-bind:item="{ item }"></slot>
+                 </td>
+             </template>
          </template>
      </tr>
  </tbody>

The actions slot is a scoped slot that makes the item available, so that I can use its attributes, i.e. for building URLs:

  <ResourceTable
      v-bind:headers="{
          'name': 'Name',
          'birth_date': 'Birthday'
      }"
      v-bind:items="[
          { 'name': 'John Doe', 'birth_date': null },
          { 'name': 'Jane Doe', 'birth_date': '1984-03-21' },
          { 'name': 'Joe Bloggs', 'birth_date' null }
      ]"
  >
      <template v-slot:cell(birth_date)="{ value }">
          <FormattedDate v-model="value" />
      </template>
+     <template v-slot:actions="{ item }">
+         <ResourceTableAction
+             title="Edit"
+             v-bind:url="editUrl(item)"
+         />
+         <ResourceTableAction
+             confirm="Are you sure you want to delete this item?"
+             method="delete"
+             title="Delete"
+             v-bind:url="deleteUrl(item)"
+         />
+     </template>
  </ResourceTable>

Conclusion

I now have a re-usable “resource table” component that will handle most cases by default, but also gives me the ability to have full control over cell values if I need it.

Test models for SwiftUI previews

Martin Bean — Tue, 28 Jul 2020 21:49:58 +0000

In my spare time, I’m currently building an iOS app for a video on demand platform I operate, Your Fight Site VOD.
I’m using SwiftUI and absolutely love its declarative way of building iOS apps.

Having worked a lot with component-based JavaScript frameworks such as Vue.js I’m accustomed to small, discreet components that can be reused and composed to make up larger views. In this vein, my app has a VideoListItem view. This view represents a single row in a list of videos:

struct VideoListView: View {
  var video: Video

  var body: some View {
    NavigationLink(destination: VideoDetailsView()) {
      Text(video.name)
        .fontWeight(.bold)
    }
  }
}

The above is a simplified version of the actual view, but it shows the video details, and when tapped navigates the user to the view the details of that particular video. The important thing to note is that the view requires a well-formed Video struct instance.

SwiftUI also offers the ability to “preview” views directly in Xcode without the need for using the device simulator or running on a physical device. However, if the view you’re previewing requires data, so in turn do the previews.

Instead of retrieving data over the network for the purpose of previews, I’ve taken to defining static test methods in my structs:

struct Video: Identifiable {
  let id: UUID
  let name: String
}

extension Video {
  static func test() -> Video {
    self.init(id: UUID(), name: "Test Video")
  }
}

I can then use these test methods to populate previews with well-defined instances of my application’s models:

struct VideoListView_Previews: PreviewProvider {
  static var previews: some View {
    VideoListView(video: .test())
  }
}

Swift is pretty clever in that it infers the video argument takes a Video instance, so therefore I can call methods (such as test) using the shorthand notation seen above. Nice!

Using Value Objects to Give Meaning

Martin Bean — Thu, 07 Nov 2019 13:51:53 +0000

I’m currently re-building a video on demand platform I currently operate, Your Fight Site VOD. During the build, I’ve found myself using more and more value objects.

If you’re unfamiliar with value objects, they’re simply objects that represent simple things, but not specific things. An object representing a specific thing would be an entity. These two terms are usually found when discussing Domain-driven design (or “DDD”).

An example highlighting the difference between a value object and an entity can be found in money. For example, if I had £10 and you had £10, then those two values would be equal. However, individual bank notes are numbered; we can’t have the same note, so individual notes would be represented as entities (and probably use their serial numbers as their identifiers).

Value objects for single properties

In my application, I’ve been unearthing values that can be elevated from simple, primitive values to a value object. One is a video’s duration. I store this as a simple integer (representing the number of seconds), but this presented the opportunity to create a Duration object. Now that number (i.e. 3,600) has meaning. The class looks like this:

class Duration
{
    private $seconds;

    public function __construct(int $seconds)
    {
        $this->seconds = $seconds;
    }

    public function asMinutes(): int
    {
        return (int) floor($this->seconds / 60);
    }

    public function asTimeString(): string
    {
        return Carbon::today()->addSeconds($this->seconds)->toTimeString();
    }

    public function __toString()
    {
        return (string) $this->seconds;
    }
}

The class is instantiated with an integer value (and can’t be created with any other value). As it’s a class, I can then define methods for common operations, such as getting different representations of the value (i.e. as minutes, or as a HH:MM:SS-formatted time string).

I’ve also defined as __toString() method. This is so I can use it in Eloquent models. I can add a mutator for my duration attribute to instead return this new value object:

class Video extends Model
{
    public function getDurationAttribute($value): ?Duration
    {
        if ($value > 0) {
            return new Duration($value);
        }

        return null;
    }
}

Now when I call $video->duration, I’ll get a Duration instance (if the duration is greater than zero). If I use this attribute in a Blade template, then it’ll just be cast to a string and the original value presented thanks to the __toString() method:

<p>Duration: {{ $video->duration }}</p>

Value objects for multiple properties

In my application, a video can also be rented and streamed for a predetermined length of time and monetary amount. This time and amount is set by the content owner. I have three properties representing this:

rental_amount
rental_interval
rental_interval_count

Their names are influenced by Stripe’s plan object.

rental_amount is an integer, representing the price in pence.
rental_interval is a constant; one of day, week, month, or year.
rental_interval_count is the number of days/weeks/months/years a customer can rent the video.

Together, these make up what I’ve called the rental terms. I’ve therefore created a class that takes the values of these three properties:

class RentalTerms
{
    private $amount;
    private $interval;
    private $intervalCount;

    public function __construct(int $amount, string $interval, int $intervalCount)
    {
        $this->ensureIntervalIsValid($interval);

        $this->amount = $amount;
        $this->interval = $interval;
        $this->intervalCount = $intervalCount;
    }

    public function getAmountFormatted(): string
    {
        return Cashier::formatAmount($this->amount);
    }

    public function getIntervalFormatted(): string
    {
        switch ($this->interval) {
            case 'day':
                return trans_choice('1 day|:count days', $this->intervalCount);
            case 'week':
                return trans_choice('1 week|:count weeks', $this->intervalCount);
            case 'month':
                return trans_choice('1 month|:count months', $this->intervalCount);
            case 'year':
                return trans_choice('1 year|:count years', $this->intervalCount);
        }
    }

    private function ensureIntervalIsValid(string $value): void
    {
        if (! in_array($value, ['day', 'week', 'month', 'year'])) {
            throw new InvalidArgumentException('Interval is invalid');
        }
    }
}

As this class doesn’t map to a single value, I just added a “getter” to my Video class:

class Video extends Model
{
    public function getRentalTerms(): RentalTerms
    {
        return new RentalTerms(
            $this->rental_amount,
            $this->rental_interval,
            $this->rental_interval_count
        );
    }
}

Again, I can use methods on the object to get the rental terms in a variety of helpful formats throughout the application, and in Blade templates:

<!-- Example: Rent for £3.99 for 1 month -->
<p>
  Rent for {{ $terms->getAmountFormatted() }}
  for {{ $terms->getIntervalFormatted() }}
</p>

Hopefully this gives you some ideas if you’ve not used value objects in your projects before!