@abordolo I believe that you are correct, well spotted!

From the docs:

You may specify which attributes should be considered data variables using the @props directive at the top of your component's Blade template. All other attributes on the component will be available via the component's attribute bag. If you wish to give a data variable a default value, you may specify the variable's name as the array key and the default value as the array value:

 
@props(['type' => 'info', 'message'])
 
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

Source:

https://laravel.com/docs/12.x/blade#data-properties-attributes

---

So in this case, the component will assume that $type is always set to 'info', unless specified otherwise.

On the other hand, if $message is not passed, Laravel won't know what to do since it has no default value. That would cause the page to break.

Here are the full CSS component files for those looking to copy:

resources/css/components/btn.css

button {
    cursor: pointer;
}

.btn {
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    color: var(--color-primary-foreground);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    height: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
    display: inline-block;
}

.btn.btn-outlined {
    background: transparent;
    border: 1px solid var(--color-border);
    border-color: var(--color-border);
    color: var(--color-foreground);
}

.btn.btn-outlined:hover {
    background: color-mix(in srgb, black 25%, var(--color-input));
}

.btn.btn-ghost {
    background: transparent;
}

.btn:has(> svg) {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
}

.btn:hover {
    background: color-mix(in srgb, black 10%, var(--color-primary));
    text-decoration: none;
}

resources/css/components/form.css

label {
    color: var(--color-foreground);
}

.input {
    border-radius: var(--radius-md);
    height: calc(var(--spacing) * 10);
    width: 100%;
    border-width: 1px;
    border-color: var(--color-border);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background-color: var(--color-card);
    color: var(--color-foreground);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.input::placeholder {
    color: var(--color-muted-foreground);
}

.input:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 calc(var(--spacing) * .5) var(--color-background)
        0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}

@media (min-width: var(--breakpoint-md)) {
    .input {
        font-size: var(--text-sm);
    }
}

.textarea {
    border-radius: var(--radius-md);
    height: calc(var(--spacing) * 40);
    width: 100%;
    border-width: 1px;
    border-color: var(--color-border);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background-color: var(--color-card);
    color: var(--color-foreground);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.textarea::placeholder {
    color: var(--color-muted-foreground);
}

.textarea:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 calc(var(--spacing) * .5) var(--color-background)
        0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}

.label {
    display: block;
    font-size: var(--text-sm);
}

input[type=file] {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-foreground);
}

input[type=file]::file-selector-button {
    margin-right: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    border-radius: calc(var(--spacing) * 2);
    border-width: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    background-color: var(--color-primary);
    color: rgb(var(--color-background));
}

input[type=file]::file-selector-button:hover {
    opacity: 0.9;
}

.error {
    font-size: var(--text-sm);
    color: var(--color-red-600);
}

.form-muted-icon {
    color: var(--color-muted-foreground);
}

.form-muted-icon:hover {
    color: var(--color-foreground);
}

Color theme for those looking to copy:

    --color-background: oklch(0.12 0 0);
    --color-foreground: oklch(0.95 0 0);
    --color-card: oklch(0.16 0 0);
    --color-primary: oklch(0.65 0.15 160);
    --color-primary-foreground: oklch(0.12 0 0);
    --color-border: oklch(0.24 0 0);
    --color-input: oklch(0.24 0 0);
    --color-muted-foreground: oklch(0.6 0 0);

And in the controller if we are using authorize method with one parameter, we are using gate:

Gate::authorize(parameter1);

// ex.
Gate::authorize(gateName);

If we are using authorize method with 2 parameters, we are using policies:

Gate::authorize(parameter1, parameter2);

// ex.
Gate::authorize(methodName, modelOrClassInstance);

Hi @connor1231 ,

This is what is my cencept and I am open to discuss:

• If we want to apply authorization rule to page level, we should use a gate and if we want to apply authorization rule to a model we should use policy.
• As Jeffry had mentioned, gates are route closure equivalent of authorization and policies are controller equivalent of authorization for models.
• If I do not want to display a page to an user, irrespective of whether the page is tied to any model or not, I will reach for gate. For example, an admin can view all ideas of all users. This page should be accessible by only admin.
• If I want to restrict an user to update an idea created by another user, I will reach for policies. In this case, the update page is more specific to a model.

Regards, Anupam Bordoloi

Blade prop

Hi @jeffry, in the error component, I think, following code gives a default value of 'required' to $name and not make it mandatory like in Vue prop.

@props([
    'name' => 'required',
])