codenco-dev / nova-grid-system Goto Github PK

Is it possible that you add support for text alignment?

Right now this is fully ignored.

https://nova.laravel.com/docs/3.0/resources/fields.html#field-text-alignment

Expected behaviour:
Adding ->textAlignment('...') aligns the text to the given parameter.

Actual behaviour:
The text always is aligned to the left

Facing a problem to install packeage. Error message: Method Illuminate\Http\Request::getUserLocale does not exist.

Any idea how to fix it?

Hi,

like the grid, however it breaks in combination with Flexible Content(https://github.com/whitecube/nova-flexible-content) and Swatches (https://github.com/ynacorp/nova-swatches)

I have a multiple swatches in a Flexible Content.

I think it might break because the swatch is not a defaultField but a customDefaultField?

BelongsTo + showCreateRelationButton throw "this.$parent.$parent.$el" is null exception

Layout is broken in combination with

use TabsOnEdit

from https://novapackages.com/packages/eminiarts/nova-tabs

workaround for usage on detail view: use ->sizeOnDetail()

Hello, I have a question, when using your package, the error messages that used to appear below the fields have stopped appearing, are you aware? you can help?

would you mind to remove the "fff" in components/DefaultField.vue#10 ? ;-)

   {{ fieldLabel }}fff

If you apply the help() method to a field then it will no longer display HTML

Text::make('First Name')->help(
    '<a href="#">External Link</a>'
),

When add NovaGridSystem in NovaServiceProvider it breaks the ->hide() function in Fields on Form view:

• laravel/nova 4.24.3
• codenco-dev/nova-grid-system v2.0.1

public function tools()
    {
        return [
            new NovaGridSystem,
        ];
    }

Date::make(__('nova-control-panel.field.date_from'), 'date_from')
                ->sortable()
                ->rules([
                    'required'
                ])->dependsOn(
                    ['type'],
                    function (Date $field, NovaRequest $request, FormData $formData) {
                        if ($formData->type === null ) {
                            $field->hide();
                        }
                    }
                ),

Even if type is null field "date_from" is shown on Forms, on Detail it works perfectly.

I want to apply ->size("w-1/3") to all fields per default and only change it on the field itself if needed. Is there a way, to apply it to all fields, without adding it to every single one?

Nova uses an animates SVG on the "create" or "update" buttons to indicate when a form is being submitted or processed. The position of the SVG is changed by the styles included in this package. Instead of the SVG being centered on the button, it is now centered absolutely on the page's content. The underlying HTML of the button when the form is being submitted is:

<button type="submit" class="border text-left appearance-none cursor-pointer rounded text-sm font-bold focus:outline-none focus:ring ring-primary-200 dark:ring-gray-600 disabled:cursor-not-allowed inline-flex items-center justify-center shadow h-9 px-3 bg-primary-500 border-primary-500 hover:[&amp;:not(:disabled)]:bg-primary-400 hover:[&amp;:not(:disabled)]:border-primary-400 text-white dark:text-gray-900" dusk="create-button" disabled="">
	<span class="flex items-center gap-1 invisible">
		Create Ticket
	</span>
	<span class="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
		<svg class="mx-auto block" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" style="width: 32px;">
			<circle cx="15" cy="15" r="15">
				<animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
				<animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate>
			</circle>
			<circle cx="60" cy="15" r="9" fill-opacity="0.3">
				<animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate>
				<animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate>
			</circle>
			<circle cx="105" cy="15" r="15">
				<animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate>
				<animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate>
			</circle>
		</svg>
	</span>
</button>

which should create a button that looks like this:

But instead, the class absolute and the style="top: 50%; left: 50%; transform: translate(-50%, -50%);" and the inclusion of this package's css moves the svg indicator to the center of the screen (shown highlighted through the inspector below)

This leaves the user with no visual indicator that the form is processing or working.

I'm trying to work on a css fix for it now.

Hello,

I'm building a visual form builder for Nova and I use your library.
https://github.com/operativeit/nova-form-designer

I've been able to render fields but I'm unable to set field value without use "this.$refs."
What I've seen is most of Nova fields vue components looks like the following:

<template>
  <DefaultField
    :field="currentField"
    :errors="errors"
    :show-help-text="showHelpText"
    :full-width-content="fullWidthContent"
  >
    <template #field>
      <div class="space-y-1">
        <input
          v-bind="extraAttributes"
          class="w-full form-control form-input form-input-bordered"
          @input="handleChange"
          :value="value"
          :id="currentField.uniqueKey"
          :dusk="field.attribute"
          :disabled="currentlyIsReadonly"
          :maxlength="field.enforceMaxlength ? field.maxlength : -1"
        />

They use DefaultField as base component and they have :value="value" attribute but it doesn't works as expected because "value" prop is missing into DefaultField component.

I've fork your component to try to fix it but I'm unable to rebuild it. Pleae see the screenshot. Can you give me an hand?
If my fix work I will make a PR.

Regards

Please check this issue that I submitted in laraval/nova-issues:

laravel/nova-issues#6042 (comment)

Basically, is not formatting because of an issue in this package.

It shows a key value insteand of the label value.

please run the npm run prod to reduce the js size file

When using the MorphOne field on a resource (in this example, it is the Primary Address), that related model's fields on creation are not showing up properly.

Here is the expected behavior, with the resource fields displaying normally, AND the MorphOne creation fields following the grid definitions for that related resource.

Here is the actual behavior. Notice the fields for the MorphOne panel are ⅓ long but they do not display in line with each other using flex-dom flex-wrap flex. Instead they stack on top of each other.

Client.php (Nova Resource) code:

    public function fields(NovaRequest $request): array
    { 
        return [
            Select::make('Status', 'status')
                ->options(ClientStatus::getOptions())
                ->default(ClientStatus::ACTIVE->value)
                ->onlyOnForms()
                ->size('w-1/3'),
            BelongsTo::make('Client Type', 'type', ClientType::class)
                ->size('w-1/3')
                ->onlyOnForms(),
            Text::make('Name')
                ->size('w-1/3')
                ->rules('required', 'max:255'),
            MorphOne::make('Primary Address', 'primaryAddress', Address::class)->required(),
            HasOne::make('Primary Caregiver', 'primaryCaregiver', Caregiver::class)->required(),
            ];
    }

Address.php (Nova Resource) code:

    public function fields(NovaRequest $request): array
    {
        return [
            Text::make('Address Line 1', 'address_line_1')
                ->size('w-1/3')
                ->required(),

            Text::make('Address Line 2', 'address_line_2')
                ->size('w-1/3')
                ->nullable(),

            Text::make('Cross Streets')
                ->size('w-1/3')
                ->nullable(),

            BelongsTo::make('City', 'city', City::class)->required()
                ->searchable()
                ->showCreateRelationButton(),

            BelongsTo::make('County', 'county', County::class)
                ->required(),
            BelongsTo::make('Zip Code', 'zipCode', ZipCode::class)
                ->required()
                ->searchable(),
            Text::make('State')
                ->required(),
        ];
    }

Using the inspector on the browser, and comparing a similar field, we can see the issue:

Expected output HTML:

<div class="bg-white dark:bg-gray-800 rounded-lg shadow divide-y divide-gray-100 dark:divide-gray-700 flex-dom flex-wrap flex">
    <div class="w-1/3" index="0">
        <!-- field 1 -->
    </div>
    <div class="w-1/3" index="1">
        <!-- field 2 -->
    </div>
    <div class="w-1/3" index="2">
        <!-- field 3 -->
    </div>
</div>

Actual HTML for MorphOne relationship creation panel:

<div class="bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="relative w-full">
        <div class="w-1/3" index="0">
            <!-- Field 1 -->
        </div>
        <div class="w-1/3" index="1">
            <!-- Field 2 -->
        </div>
        <div class="w-1/3" index="2">
            <!-- Field 3 -->
        </div>
    </div>
</div>

The actual rendered HTML includes an extra div with the classes relative w-full and does not include the necessary flex classes needed for the width calculations.

Hi, I have installed the package in a project with Laravel Nova 4 and it does not work, I would like to know if this package will be updated to Nova 4.
Thanks.

This simply does not work when using eminiarts/nova-tabs in detail view. It does however work without the use of tabs thou.

see image.

Is there any way to extend this to support panels too? The need came while building the following UI.

If that's not possible? Is there any other way to do horizontal splitting?

Hi,

Firstly thanks for this package.

Second, when using it on forms is working good as expected but when using it on action fields, is not.

Here the portion of the code example and image.

Is there any way possible for you to check this ?

Pls update fix in next line:

I'm using laravel nova in version 4.12 and it didn't work. does not show errors

Partially breaks BelongsTo field functionality, for example ->hide() ->show() methods doens't work anymore.

Hi,

displayUsing method is not working on detail page with at least Text, Number and Select
If I remove nova-grid-system everything works perfectly.

required field class is wrong,is not red.
vendor/codenco-dev/nova-grid-system/resources/js/components/DefaultField.vue

Now: text-danger
Need change to: text-red-500

Nova default required class is:text-red-500

Many thx

I tried to use removeBottomBorder() on every field in my panel but somehow there is a top border as shown in the picture.

New to Nova and Tailwind.

This package looks really nice, adding functionality that really should be in the core!

However, it seems to load tailwind.min.css from unpkg.com, while some version of Tailwind is also already loaded by Nova.

When I remove the new NovaGridSystem addition in NovaServiceProvider.php, which loads that external version of Tailwind, I see some change in the UI when using ->size() etc.... but not the desired changes.

Can anyone explain to me the difference between the on-board tailwind and the external one here? Is there a way to not use the external one? It does take a little to load, which shouldn't be a problem usually, but it also seems to subtly interfere with other aspects of the layout.