FG form input group

Input group fields for form-generator

Example

<wui-form>
<wui-form-group label="URL" label-for="wui-form-input-url">
<wui-fg-form-input-group
      id="wui-form-input-url"
      type="url"
    />
</wui-form-group>
<wui-form-group label="Email" label-for="wui-form-input-email">
<wui-fg-form-input-group
      id="wui-form-input-email"
      type="email"
    />
</wui-form-group>
<wui-form-group label="Phone" label-for="wui-form-input-phone">
<wui-fg-form-input-group
      id="wui-form-input-phone"
      type="tel"
    />
</wui-form-group>
<wui-form-group label="Color" label-for="color">
<wui-fg-form-input-color id="color" />
</wui-form-group>
</wui-form>

Good news! There is already a vue-file for the component you are looking for. You can find it in the implementation tab.
There will be a description regarding the different use cases of this component and what to consider when implementing it. If you have any questions, suggestions or ideas for improvement right now, please feel free to contact us directly.
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com >

Stay tuned!

Create various type inputs such as email, url, phone or even a color picker. Some of them are extended with a button to open or execute the user input.

// email, url, phone
import { WuiFgFormInputGroup } from "@wui/wui-vue/lib/form-generator/input-group";
// color picker
import { WuiFgFormInputColor } from "@wui/wui-vue/lib/form-generator/input-group";

Description

Use WuiVue's <wui-fg-form-input-group> and <wui-fg-form-input-color> components for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

<template>
  <wui-form>
    <wui-form-group label="Type email" label-for="email">
      <wui-fg-form-input-group id="email" type="email" v-model="valueEmail" />
    </wui-form-group>

    <wui-form-group label="Type url" label-for="url">
      <wui-fg-form-input-group id="url" type="url" v-model="valueUrl" />
    </wui-form-group>

    <wui-form-group label="Color input" label-for="color">
      <wui-fg-form-input-color id="color" v-model="valueColor" />
    </wui-form-group>

    <!-- Coming soon
    <wui-form-group label="Type tel" label-for="phone">
      <wui-fg-form-input-group id="phone" type="tel" v-model="valuePhone" />
    </wui-form-group>
     -->
  </wui-form>
</template>

<script>
  export default {
    data() {
      return {
        valueEmail: "",
        valueUrl: "",
        valueColor: "",
        // valuePhone: "", coming soon
      };
    },
  };
</script>

<!-- wui-fg-form-input.vue -->

Input type

<wui-fg-form-input-group> defaults to a text input, but you should set the type prop to one of the supported types to make the extension work: email or url.

If the type prop is set to an input type that is not supported (see above), a wui-form-input component will be rendered and a console warning will be issued.

For <wui-fg-form-input-color> the input type is set to text and can't be changed.

Contextual states

WUI includes validation styles for valid (success) and invalid (error, warning) states on most form controls.

See the <wui-form-input> docs for further information on state handling.

<wui-container fluid>
  <wui-row class="m-y-5">
    <wui-col sm="3">
      <label for="input-none">No State:</label>
    </wui-col>
    <wui-col sm="9">
      <wui-fg-form-input-group
        id="input-none"
        type="url"
        :state="null"
        placeholder="No validation"
      />
    </wui-col>
  </wui-row>

  <wui-row class="m-y-5">
    <wui-col sm="3">
      <label for="input-valid">Valid State:</label>
    </wui-col>
    <wui-col sm="9">
      <wui-fg-form-input-group
        id="input-valid"
        type="url"
        :state="true"
        placeholder="Valid input"
      />
    </wui-col>
  </wui-row>

  <wui-row class="m-y-5">
    <wui-col sm="3">
      <label for="input-invalid">Invalid State:</label>
    </wui-col>
    <wui-col sm="9">
      <wui-fg-form-input-group
        id="input-invalid"
        type="url"
        :state="false"
        placeholder="Invalid input"
      />
    </wui-col>
  </wui-row>
</wui-container>

<!-- wui-fg-form-input-group-states.vue -->

Tip: Use the <wui-form-group> component to automatically generate markup similar to above.

Native and custom events

All native events (other than the custom input and change events) are supported, without the need for the .native modifier. See the <wui-form-input> docs for further information.

Color input

Use the wui-fg-form-input-color component to create an input field for hexadecimal color codes including a color checkboard and a color picker.

This component provides similar features and props as the wui-fg-form-input-group (enable tooltip for the color checkboard button, buttonAttrs to pass attributes this button, usage of all props and events of the wui-form-input component which is used in the color input).

<template>
  <wui-fg-form-input-color v-model="color" />
</template>

<script>
  export default {
    data() {
      return {
        color: "#00ff00",
      };
    },
  };
</script>

The wui-fg-form-input-color component contains the <wui-color-picker>, which opens automatically as soon as the input field gets focus or the user clicks on the color checkboard (the colored area next to the input field).

This component also offers v-model support, which is automatically connected to the built-in color picker. As soon as the user selects or changes a color in the color picker, the color value in the input field is adjusted. Conversely, the color contained in the input field is automatically passed down to the color picker.

The color picker closes as soon as the user either clicks on the action button "Use color" in the full color picker, or outside of the color picker and also outside of the form input color component.

Component reference

`<wui-fg-form-input-group>`

Component aliases

<wui-fg-form-input-group> can also be used via the following aliases:

<wui-form-input-group>

Note: component aliases are only available when importing all of WuiVue or using the component group plugin.

Properties

All properties from the wui-form-input component are supported. See the <wui-form-input> docs for further information.

Property	Type	Default	Description
`buttonAttrs`	`Object`	`{}`	HTML Attributes you want to pass to the `wui-button` in the input-group-addon
`enableTooltips`	`Boolean`	`{}`	When set to `true`, enables the tooltip for the button input-addon. This only works in conjunction with a `title` attribute you need to pass via the `buttonAttrs` prop
`type`	`String`	`'text'`	The type of input to render (`email` `url` and `tel` are supported). If the `type` prop is set to an input type that is not supported (see before), a `wui-form-input` component will be rendered and a console warning will be issued.

`v-model`

Property	Event
`value`	`update`

Slots

Name	Description
append	Append attachment for the input group addon (next to the button)

Events

All events from the wui-form-input component are supported. See the <wui-form-input> docs for further information.

Event	Arguments	Description
`btn-click`	`wvModalEvent` - WvModalEvent object. Call `wvModalEvent.preventDefault()` to cancel btn-click `{ value, computedHref }` - Payload containing the current user input `value` and the formatted `href` depending on the input `type`	Emitted when button input-addon is clicked. Cancelable

`<wui-fg-form-input-color>`

Component aliases

<wui-fg-form-input-color> can also be used via the following aliases:

<wui-form-input-color>
<wui-input-color>

Note: component aliases are only available when importing all of WuiVue or using the component group plugin.

Properties

All properties from the wui-form-input component are supported. See the <wui-form-input> docs for further information (except type).

Property	Type	Default	Description
`buttonAttrs`	`Object`	`{}`	HTML Attributes you want to pass to the `wui-button` in the input-group-addon
`enableTooltip`	`Boolean`	`{}`	When set to `true`, enables the tooltip for the button input-addon. This only works in conjunction with a `title` attribute you need to pass via the `buttonAttrs` prop
`value`	`String`	`''`	The current value of the input. The value will be a hexadecimal color string

`v-model`

Property	Event
`value`	`update`

Slots

Name	Description
prepend	Prepend attachment for the input group addon (between the color button and input field)

Events

All events from the wui-form-input component are supported. See the <wui-form-input> docs for further information.

Event	Arguments	Description
`input`	`value` - Current hexadecimal color value of input	Input event triggered by user interaction. Emitted after the v-model is updated
`update`	`value` - Current hexadecimal color value of input	Value of input, after any formatting. Not emitted if the value does not change

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export
`<wui-fg-form-input-group>`	WuiFgFormInputGroup
`<wui-fg-form-input-color>`	WuiFgFormInputColor

Example

import {
  WuiFgFormInputGroup,
  WuiFgFormInputColor,
} from "@wui/wui-vue/lib/form-generator/input-group";
Vue.component("wui-fg-form-input-group", WuiFgFormInputGroup);
Vue.component("wui-fg-form-input-color", WuiFgFormInputColor);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`FormGeneratorInputGroupPlugin`	`wui/wui-vue/lib/form-generator/input-group`

Example

import { FormGeneratorInputGroupPlugin } from "@wui/wui-vue/lib/form-generator/input-group";
Vue.use(FormGeneratorInputGroupPlugin);

From WUI and

with

WUI is wescale’s design system