vueform/builder

Layout broken on empty vue app

letmaik opened this issue · 2 comments

letmaik commented

Environment

"@vueform/vueform": "^1.9.4",
"vue": "^3.4.21"
"@vitejs/plugin-vue": "^5.0.4",
"typescript": "^5.2.2",
"vite": "^5.2.0",
"vue-tsc": "^2.0.6"

Reproduction

Create the following in the builder:

image

Expand 
<template>
  <Vueform>
    <template #empty>
      <FormSteps>
        <FormStep
          name="page0"
          label="Step 1"
          :elements="[
            'h1',
            'name',
            'email',
            'mobilePhone',
          ]"
        />
        <FormStep
          name="page1"
          label="Step 2"
          :elements="[
            'verificationCode',
          ]"
        />
      </FormSteps>

      <FormElements>
        <StaticElement
          name="h1"
          tag="h1"
          content="Contact details"
        />
        <GroupElement
          name="name"
        >
          <GroupElement
            name="column1"
            :columns="{
              container: 6,
            }"
          >
            <TextElement
              name="firstName"
              label="First name"
              :rules="[
                'required',
              ]"
            />
          </GroupElement>
          <GroupElement
            name="column2"
            :columns="{
              container: 6,
            }"
          >
            <TextElement
              name="lastName"
              label="Last name"
              :rules="[
                'required',
              ]"
            />
          </GroupElement>
        </GroupElement>
        <TextElement
          name="email"
          input-type="email"
          :rules="[
            'required',
            'email',
          ]"
          label="Email"
        />
        <TextElement
          name="mobilePhone"
          input-type="tel"
          label="Mobile phone"
          placeholder="+44"
          :rules="[
            'required',
            'regex:/^\\+44[\\d]{10}$/',
          ]"
        />
        <TextElement
          name="verificationCode"
          label="Verification Code"
          input-type="number"
          :rules="[
            'required',
            'size:4',
          ]"
        />
      </FormElements>

      <FormStepsControls />
  </Vueform>
</template>

Then insert it into your own empty Vue app:

<template>
  <Vueform>
    <FormSteps>
...
  </Vueform>
</template>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Describe the bug

I expected the layout to be working out of the box, but there seems to be something missing.

image

Additional context

No response

Logs

No response

letmaik commented

I must have miscopied something or the builder has changed in the meantime. The issue was that the inner <template #empty> was missing. Not really sure what that's good for but adding it fixed it.

adamberecz commented

If you add content without using any slot (= using #default slot) you are inserting components into <FormElements>. This is for elements only, so if you want to use eg. <FormSteps> you need to add the root level components to #empty slot and wrap elements into <FormElements>.

So yes, your conclusion is the solution.