Form UI Elements

Factor includes several form UI elements that can be used for common tasks.

Using Elements

All elements are made available from the @factor/ui module. Import them and then use them as Vue components.

Standard Form CSS

To give developers flexibility inputs are unstyled by default. If you'd like to use the standard form CSS, you need to import it:

html.factor-app {
  @import "[email protected]/ui/css/standard-form.less";
}

Standard form CSS also gives you some additional CSS variables directed at forms and inputs:

html.factor-app {
  --font-family-input: helvetica, sans-serif; // fallback: --font-family-primary
  --color-bg-input: #f7f7f7; // fallback: --color-bg
  --color-border-input: #ddd; // fallback: --color-border
}

Standard List Format

Certain inputs, such as select or tags, use a "standard list format" for option names and values.

// Longhand version (description is used occasionally)
const list = [
  { name: "Foo", value: "foo", desc: "" },
  { name: "Bar", value: "bar", desc: "" },
]

// Shorthand version that gets normalized to the first
const list = ["foo", "bar"]

Form Wrapper

Purpose

Wraps inputs in a <form>. Emits a @submit on enter.

Props

- @submit: Fires when form is submitted (enter key).

To Import

import { factorForm } from "@factor/ui"

In Template

<factor-form @submit="send()">
  <!-- Form Inputs -->
</factor-form>

Inputs Wrapper

Purpose

Wraps inputs with consistent markup for label and description.

Props

- value(any): input value
- label(string): input label
- description(string): input description
- input(string): component name (as you'd call it in template)
- inputClasses(string): classes to add to input
- labelClasses(string): classes to add to label
# attrs + $listeners: Passes other attributes and events to input

To Import

import { factorInputWrap } from "@factor/ui"

In Template

<factor-input-wrap
  v-model="title"
  input="factor-input-text"
  label="Title"
  description="Your example title"
  placeholder="Write A Title"
  required
/>
<factor-input-wrap
  v-model="select"
  input="factor-input-select"
  label="Select Option"
  description="Options for selecting something"
  placeholder="Select Something"
  :list="['foo', 'bar', 'baz']"
  required
/>

Rendered

Markdown Editor

Purpose

Standard Markdown editor used for formatted text.

Props

- value(any): input value
- autosaveId(string): Enabled auto save based on passed ID
- allowImageUpload(boolean): Allow dragged images to upload
# attrs + $listeners: Passes other attributes and events to input

Import

import { factorInputEditor } from "@factor/ui"

In Template

<factor-input-editor autosave-id="ui" :allow-image-upload="false" />

Rendered

Image Upload

Purpose

Standard image upload component.

Props

- value(array): array of image post Ids
- min(string|number): Minimum images
- max(string|number): Maximum images

Import

import { factorInputImageUpload } from "@factor/ui"

In Template

<factor-input-image-upload v-model="images" max="3" min="1" />

Rendered

Sortable Inputs

Purpose

Allow for ordered and arranged inputs and values. Ideal for config. Uses the template settings API.

Props

- settings(array): Template settings array

Import

import { factorInputSortable } from "@factor/ui"

Template Example

<template>
  <div class="wrap">
    <factor-input-sortable v-model="sorted" :settings="settings" />
  </div>
</template>

<script lang="ts">
  import { factorInputSortable } from "@factor/ui"
  import { sortableSettings } from "@factor/templates"

  const _default = [{ __title: "Box 1" }, { __title: "Box 2" }, { __title: "Box 3" }]
  const settings = [
    {
      input: "text",
      label: "Heading",
      _id: "heading",
      _default: "Box",
    },
    {
      input: "textarea",
      label: "Description",
      _id: "description",
      _default: "Box Description",
    },
  ]
  export default {
    components: { factorInputSortable },
    data() {
      return {
        sorted: sortableSettings({ _default, settings }),
        settings,
      }
    },
  }
</script>

Rendered

Tags

Purpose

Allows users to add a list of text tags or items.

Props

- list(array): Standard list of options. Constrains the options into set values instead of just allowing text input.
- min(number): Minimum tags required
- max(number): Maximum tags allowed

Import

import { factorInputTags } from "@factor/ui"

In Template

<factor-input-tags v-model="tags" />
<factor-input-tags v-model="categories" :list="['foo', 'bar', 'baz']" />

Rendered

Select

Props

- list(array): Standard list of options.
- listSuffix(string): Add a suffix to each list item name

Import

import { factorInputSelect } from "@factor/ui"

In Template

<factor-input-select
  v-model="items"
  :list="['foo', 'bar']"
  placeholder="Select Something"
/>
<factor-input-select
  v-model="items"
  :list="[{name: `A more advanced list`, value: 'foo'}, {name: `With better names`, value: 'bar'}]"
  placeholder="Select An Item"
/>

Rendered

Date

A date picker.

Props

- value(date|string|number): Date

Import

import { factorInputDate } from "@factor/ui"

In Template

<factor-input-date v-model="date" />

Rendered

Birthday

A rapid birthday selector input.

Props

- value(date|string|number): Date

Import

import { factorInputBirthday } from "@factor/ui"

In Template

<factor-input-birthday v-model="birthday" />

Rendered

Checkbox

Props

- label(string): Checkbox label
- value(boolean): Checked or unchecked

Import

import { factorInputCheckbox } from "@factor/ui"

In Template

<factor-input-checkbox v-model="checked" label="Checked" />
<factor-input-checkbox v-model="notChecked" label="Not Checked" />

Rendered

Text Inputs

Text, Email, Password, Phone, Textarea

Basic text based inputs with validation.

Imports

import {
  factorInputText,
  factorInputTextarea,
  factorInputPassword,
  factorInputEmail,
  factorInputPhone,
} from "@factor/ui"

In Template

<factor-input-text v-model="form.text" />
<factor-input-textarea v-model="form.textarea" />
<factor-input-password v-model="form.password" />
<factor-input-email v-model="form.email" />
<factor-input-phone v-model="form.phone" />

Rendered