What I want to do next is make our model components a little bit more configurable. But now we have a fixed title, a fixed size, and the thing we just built, close on, escape and close. When you click outside of the model, that feature is always enabled and would be nice if we could toggle it. So let's start by adding some props. Let's start with a title. This one is gonna be a string and it's not required.

Let's start with a title. This one is gonna be a string and it's not required. Let's add a size prop, which is also a string. This one is required and therefore we set a default of medium MD in our case. And then lastly, let's add a bullion close manually. And when this is set to true, we won't close on escape and we won't close when you click outside of the model. So tie, bullion, uh, it's not required and we set a default of false.

So tie, bullion, uh, it's not required and we set a default of false. Now let's start with the title. Let's go to our index page. Now, instead of having the header here with the h1 element, I'm gonna grab this edit User text and pass it as a prop. So title equals edit User, and let's make it editing User so that we know that it works. Let's grab the h1 element, get it out.

so that we know that it works. Let's grab the h1 element, get it out of here into our modal template. Let's scroll to the slot. Here it is, let's base it here and let's echo out the title prop. It's safe, and see if it works. Edit a modal. And sure enough, we are having here editing model instead of edit model. So that works. Let's continue with the size prop.

instead of edit model. So that works. Let's continue with the size prop. Currently the size of the modal is determined by this maxWidth MD class, but since we want to support multiple sizes, I'm gonna remove it from here and use a class object. So first, let's add that maxWidth MD back, but we only want to use this when the size is actually MD medium. Let's duplicate it a few times.

actually MD medium. Let's duplicate it a few times. So we can add support for small, large, and extra large. Let's go into the index page and below the title prop. I'm going to add size equals small. Let's go to the browser. It's edit a model, and now the model is definitely a little bit smaller. Let's change it to extra large to see the difference. And now it's a little bit bigger. So this seems to work,

And now it's a little bit bigger. So this seems to work, but what if we add a size that's not supported, something like seven Excel, then there's no width constraint at all. So we need some kind of validator to make sure that we are passing a valid size and we can do that within the prop. Actually, let's go to the model component. Scroll back to the props.

Actually, let's go to the model component. Scroll back to the props. And here below the default value, I'm going to add a validator, which accepts the value. Let's uh, generate an array of all supported sizes, so small, medium, large, and extra large. And we're just gonna check if our value is included in this array includes value, hit save. Let's refresh the browser and open the inspector. Go to the console and you can already see invalid prop,

Let's refresh the browser and open the inspector. Go to the console and you can already see invalid prop, custom validate check fields for prop size. So that's nice that we now have an indicator that we are using the wrong size prop. I'm gonna refer this back to small or maybe medium. And then I'm gonna add this closeManually prop. Now when this closeManually prop is enabled, we don't want closeOnEscape and closeWhenClickOutside.

we don't want close on escape and close when you click outside. So let's start with the first one. We can check in here in the closeOnEscape method, but I'd rather not add the event listeners at all. So if we are not closing manually only then do we want to add the event listeners, and let's go to our backdrop because that's where the click event is uh, attached. So here again, if we close manually,

because that's where the click event is uh, attached. So here again, if we close manually, then we don't wanna do anything and otherwise we want to close. Let's see if it works. Let's go to the browser. Let's close the console.log again, hit refresh, open an EditModal. I can click inside of the modal, but if I click outside, then it also stays open. And when I press escape, then it's also opened.

but if I click outside, then it also stays open. And when I press escape, then it's also opened. So that seems to work. Now I want to add even more customization to the title prop, but not with a prop, but actually with a slot. So let's see how we can do that. Currently the title is always rendered in this h1 element with a margin bottom of six and this large text class. But what if we don't want to use this h1 element? What if we wanna use an h2 or a h3?

But what if we don't want to use this h1 element? What if we wanna use an h2 or an h3 or maybe a custom element, like an icon or a dropdown? We can do that with a slot. So here we have our default slot where the form goes, but few also has a thing called named slots. So we can use that right here. We're gonna do name equals title. So we have a slot named title, and we're gonna wrap it around our h1.

So we have a slot named title, and we're gonna wrap it around our h1. So if nothing is passed from the parent component from our index page, then it's gonna render this h1 element. So back on the index page above the form, we can use a template and there is this slot title syntax, but we can also use it like this with the # character. So #title. And now in here we can do something like h3.

So hashtag title. And now in here we can do something like H3 and maybe make it red and bold and let's say editUser. Let's save it. Let's go back to the browser and hit edit. IM model. And there it is. So let's see. In the inspector here is our H3 element with font bold and text-red-500. So now we can really easily customize this title.

So now we can really easily customize this title.