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 #