This is a question for feature request.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

Description

Hello, do you think there is any way to use forms but with a custom design?

I understand that I can use slots to customize the behavior of each field a little as the documentation indicates, but in my case I would also like to change the layout of the fields something similar to this.

But I am getting this error, which I understand is from vue and not from the component.

I would appreciate your support if at any time you have faced a similar case or perhaps have notions of the subject.

Thank you!

Can you update in package.json @enso-ui/select version to 1.0.44? You have in new version fixed bug, where select search was case sensitive.

This is a bug.

Prerequisites

Yes

Description

pressing enter while focussed on an InputField generated by an <enso-form> (unmodified stub code) causes a GET-request to the same url (with empty query param, i.e. ? appended)

No log output or events exposed to indicate the potential source

Steps to Reproduce

1. open an enso form
2. press enter after focussed on/updating an input

Expected behavior

Form to save.

Actual behavior

page refresh, data lost.

This is a question.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

After migration to 4.9.0, there is something strange happening with our forms.
We have a normal form generated by Enso:

Edit.vue

<enso-form class="box form-box has-background-light raises-on-hover"
                       ref="form"
                       @ready="onReady"
                       @submit="submit">

methods: {
        onReady() {
             this.$refs.form.param('some_existing_backend_json_param');
        },

And this this.$refs.form.param('some_existing_backend_json_param') returns false.

Debugging dipper in EnsoForm, VueForm and CoreForm, I realized that there seems to be a difference in how these react in my form implementation compare to one of yours.

Enso User form generates this console.log for the "param" method:

(Component, ready state, param object)

My form generates:

Notice the VueForm ready is false. And because of this it will not pass the CoreForm param upwards, it will return false.

I don't understand why this happens, and strangely if I debounce the ready function with "0" it will work:

onReady: _.debounce(function (e) {
            this.$refs.form.param('some_existing_backend_json_param');
        }, 0),

Do you have any hints ?

This is a bug.

Prerequisites

• [4.1.0] Are you running the latest version?

Description

If using sections + tabs and the whole tab needs to inject a slot, "fields" is still required and needs a minimal input, otherwise the tab is not rendered. Also, if meta is missing, or the entire fields is missing, the backend will respond with 500(Forms builder error).

form json:

"tabs": true,
    "sections": [
{
            "tab": "Devices",
            "columns": "slot",
            "slot": "devices",
            "fields": [
                {
                    "label": "Devices",
                    "name": "devices",
                    "value": null,
                    "meta": {
                        "custom": true
                    }
                }
            ]
        },
...

 <enso-form class="box form-box has-background-light raises-on-hover"
                       @ready="init"
                       ref="form">
                <template v-slot:devices="props">
                    //some custom implementation....
                </template>
</enso-form>

My expectation is to be able to omit the fields element, since the whole section is a slot, or at least leave it null or {}. As an workaround, I started taking out property by property from a field until I got rid of any error, and still see my tab visible (because if no fields are present, the tab will not be rendered)

This is a bug / regression.

Description

The form buttons don't appear to be animated anymore, this causes UX confusion

Steps to Reproduce

1. attempt saving a form, e.x. https://www.laravel-enso.com/administration/companies/create

Expected behavior

on save (or any other action) for the button to change appearance indicating a pending action

Actual behavior

Nothing

This is a bug.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

Description

Cannot hide a form tab that contains a slot

Steps to Reproduce

1. Configure the form.json file as follows: ...{ "tab": "Devices", "columns": "slot", "slot": "devices", "fields": [] },...
2. Inside form create component (@ready) try to hide that tab (this is a specific use-case) this.$refs.form.hideTab('Devices');

Expected behavior

The tab should be hidden from the form. This works for other tabs which contains some fields inside them.

Actual behavior

The tab is still visible after the form is shown.

Maybe it's a good idea to extend the show/hide functionality for tabs like you did for columns inside tabels with "isVisible" property..
I saw in the code that for showing/hiding a tab there is a logic concerning fields visibility inside them. It seems this logic fails when a tab is containing only a slot..

Trying to upgrade my project to Vue3 and having issues with the mutation props.

error Unexpected mutation of "field" prop vue/no-mutating-props

This is a bug.

I noticed (not sure if intentional or not) that there is a slight difference in how meta.disabled and meta.hidden are behaving:
Ex:

This works:

toggleDisabled: function (disabled) {
            this.$refs.form.field('myField').meta.disabled = !disabled;
            //and by works, I mean that the page reflects the diasabled state, so the rendering is forced.
        },

This doesn't:

toggleHidden: function (hidden) {
            this.$refs.form.field('myField').meta.hidden = !hidden;
            //this alone is not working because it needs next line uncommented - it does not force the rendering
            //this.$refs.form.$forceUpdate();
        },

I tried searching for a watch on disabled hoping that maybe a watch on hidden is missing, but didn't find any related to fields - or maybe I didn't dig deep enough...

Any suggestions?

This is a feature request.

Description

Hi,

Is it ok with you to create a MR for an extension feature for form methods similar to showTab/hideTab - on fields : showField/hideField, or even toggleFieldVisibilty.

Some situations may require some fields to be dependent on others. Ex: a checkbox field will enable/disable a set of other fields to be available for filling.

this will require changes in :
@enso-ui/forms/src/bulma/EnsoForm.vue

hideField(field) {
            return this.ready
                ? this.$refs.form.hideField(field)
                : null;
        },
        showField(field) {
            return this.ready
                ? this.$refs.form.showField(field)
                : null;
        },

@enso-ui/forms/src/bulma/VueForm.vue

hideField(field) {
            return this.ready
                ? this.$refs.coreForm.hideField(field)
                : null;
        },
        showField(field) {
            return this.ready
                ? this.$refs.coreForm.showField(field)
                : null;
        },

@enso-ui/forms/src/renderless/CoreForm.vue

hideField(fieldName) {
            this.field(fieldName).meta.hidden = true;
            this.$forceUpdate();
        },
        showField(fieldName) {
            this.field(fieldName).meta.hidden = false;
            this.$forceUpdate();
        },

Also, documentation will be updated.

This is a bug | feature request.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

Description

I have a form with a custom field which I use to send a matrix to the BE, the BE validates it correctly and returns the error to the FE but I can not capture it in the FE.

In the array of errors of the computed form are received well. could I access that array in any way? Or is there a better way to capture these errors?

Thank you in advance for all your help!

This is a bug ?.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

Description

in Forms when changing one lang to an other the fields will hold the old language, as in the provided screenshots.

Steps to Reproduce

for example

1. open Edit Permission and change language to an other. like from english to arabic 'so the change will be visible'
2. you will see that the select field still hold the older language
3. you will need to refresh the page

Expected behavior

the language change on fields to

Actual behavior

the fields still hold the older language

reason ?

i think its related to this from vuejs docs.

Note: the provide and inject bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.

and i think the injected 'i18n' is not.

This is a bug / regression.

Description

If a form contains sections without visible fields the section header is no longer hidden (certain sections are only used in the edit steps for us)

Steps to Reproduce

1. Create a form with sections containing only hidden elements

Expected behavior

Empty sections to be hidden

Actual behavior

This is a question.

Prerequisites

• Are you running the latest version?
• Are you reporting to the correct repository?
  (enso is made of many specialized packages: https://github.com/laravel-enso)
• Did you check the documentation?
• Did you perform a cursory search?

Description

In regards to this file: @enso-ui/tables/src/bulma/parts/TableCell.vue

Before 4.9.0 upgrade:

<span :class="cssClass"
        @click="meta.clickable ? $emit('clicked') : null">
        <slot v-if="meta.slot"
            :name="column.name">
            {{ value }}
        </slot>

Slot was defined after the cssClass injection and @click.

After 4.9.0 upgrade:

<slot v-if="meta.slot"
        :name="column.name">
        <span>
            {{ modelValue }}
        </span>
    </slot>
    <span :class="cssClass"
        @click="meta.clickable ? $emit('clicked') : null"

Separation was 100%, clickable will not be working anymore. Has to be implemented.

Was that wanted?
Should we update the documentation?