export default {
  name: "Form",
  id: "ClientForm$Brevity",
  acceptsChildren: true,
  category: "Container",
  props: [],
  events: [
    {
      label: "When submitted",
      name: "onSubmit",
      help: "Select an action to run when form is submitted",
      isDefault: true,
    },
  ],
  defaultStyles: {
    "": {
      "flex-grow": "0",
      "flex-shrink": "1",
      "flex-basis": "auto",
      display: "flex",
      "flex-direction": "row",
      "justify-content": "flex-start",
      "align-items": "stretch",
      gap: "0px",
      width: "auto",
      height: "auto",
      "min-width": "auto",
      "min-height": "auto",
      "max-width": "100%",
      "max-height": "100%",
      "padding-right": "0px",
      "padding-left": "0px",
      "padding-top": "0px",
      "padding-bottom": "0px",
      "border-color": "var(--theme-border-default)",
      "border-radius": "0px",
      "border-width": "0px",
      "border-style": "solid",
      "background-color": "transparent",
      "box-shadow": "var(--theme-shadows-none)",
    },
  },
  sources: [],
  actions: [
    {
      id: "reset",
      name: `Reset "{{= it.component.name }}"'s values`,
      description: "Reset the values of the form",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        'document.querySelector(`[data-id="${$$getKey({{= it.stringify(it.component.id) }})}"]`)?.reset();',
      instanceTemplate: ``,
      props: [],
    },
    {
      id: "submit",
      name: `Submit "{{= it.component.name }}"'s form`,
      description: "Submits the form",
      async: false,
      template:
        // eslint-disable-next-line no-template-curly-in-string
        'document.querySelector(`[data-id="${$$getKey({{= it.stringify(it.component.id) }})}"]`)?.requestSubmit();',
      instanceTemplate: `Submit "{{= it.component.name }}" form`,
      props: [],
    },
  ],
} as const;