Vue3 Forms

Set of simple form components for Vue 3

Installation

npm install @mythicaldev/md-vue3-forms

OR

npm i @mythicaldev/md-vue3-forms

Tailwind configuration

You will need to update your tailwind.config.js file to include the following in your content array.

./node_modules/@mythicaldev/md-vue3-forms/**/*.vue

Components

Below is the list of components, their properties and examples of how to use them.

• MDForm
• MDGroup
• MDText
• MDCheckbox
• MDDatePicker
• MDDraggablePicker
• MDDropZone
• MDSelect
• MDTextArea

MDForm

(Required)

Every form is wrapped in this base MFForm component. This component provides a submit button, optional cancel button and assignable actions for those buttons. You next the form elements you need for your form within this base element.

<template>
  <MDForm class="my-5">Form at it's most basic level, only a submit button</MDForm>
  <MDForm class="mb-5" :showCancel="true">Form that includes a cancel button</MDForm>
  <MDForm class="mb-5" :showCancel="true" submitText="Add" cancelText="Back">
    Form that includes a cancel button and custom text for each button
  </MDForm>
  <MDForm
    class="mb-20"
    :showCancel="true"
    submitText="Add"
    cancelText="Back"
    @onSubmitClicked="submit"
    @onCancelClicked="cancel">
    Form that includes a cancel button, custom text and methods assigned to those buttons
  </MDForm>
</template>
<script setup>
  // Import the main form component
  import { MDForm } from '@mythicaldev/md-vue3-forms';

  const submit = () => {};
  const cancel = () => {};
</script>

MDForm Props

| Prop | Type | Default | Required | Description | |--------------|----------|---------|----------|--------------------------------| | showCancel | Boolean | false | false | Display/Hide the cancel button | | showSubmit | Boolean | true | false | Display/Hide the submit button | | cancelText | String | Cancel | false | Text for the cancel button | | submitText | String | Submit | false | Text for the cancel button |

MDForm Emitted Events

| Event | Description | |-----------------|-------------------------------------------| | onCancelClicked | Emitted when the cancel button is clicked | | onSubmitClicked | Emitted when the submit button is clicked |

MDGroup

Wrapper element to group related form fields in.

<template>
  <MDForm>
    <MDGroup>Add your form fields here.</MDGroup>
  </MDForm>
</template>
<script setup>
  // Import the base form component and the optional group component.
  import { MDForm, MDGroup } from '@mythicaldev/md-vue3-forms';
</script>

MDText

This is a basic text input field.

<template>
  <MDForm :showCancel="true" submitText="Add" @onSubmitClicked="submit">
    <MDGroup>
      <!-- Bare bones basic text field -->
      <MDText class="mb-5" id="first_name" v-model="state.name.first" />
      <!-- Text field with a placeholder -->
      <MDText class="mb-5" id="last_name" placeholder="Last Name" v-model="state.name.last" />
      <!-- Secure field with a label and placeholder -->
      <MDText
        class="mb-5"
        type="password"
        id="password"
        label="Password"
        placeholder="******"
        v-model="state.password"
      />
      <!-- Required field with a label (Label is used as a placeholder by default) -->
      <MDText class="mb-5" type="email" id="email" label="Email" v-model="state.email" :required="true" />
      <!-- Required, Label, and error state. -->
      <MDText
        class="mb-5"
        id="nickname"
        label="Nick Name"
        v-model="state.nickname"
        :required="true"
        :error="state.errors.nickname"
      />
    </MDGroup>
  </MDForm>
</template>
<script setup>
  import { reactive } from 'vue';
  // Import the main form component, a group to wrap a set of fields in and the text field.
  import { MDForm, MDGroup, MDText } from '@mythicaldev/md-vue3-forms';

  const state = reactive({
    name: {
      first: '',
      last: '',
    },
    email: '',
    nickname: '',
    password: '',
    errors: {
      nickname: 'Nicknames are always required.',
    },
  });

  const submit = () => {
    console.log(state);
  };
</script>

MDText Props

| Prop | Type | Default | Required | Description | |-------------|------------------|---------|----------|----------------------------------------------------------------------------------| | id | String | | true | The id of the field. | | label | String | | false | The label to add to the field. Empty by default providing no label. | | type | String | text | false | The type of field to use. Defaults to a basic text field. | | modelValue | [String, Number] | | false | The property to update. This should be passed as v-model when implementing | | placeholder | String | | false | The placeholder to use for the field. Empty by default providing no placeholder. | | describedBy | String | | false | The aria-describedby value for the field. | | help | String | | false | Text that will display under the field to give help or context. | | error | String | | false | Error text to display under the field. | | enabled | Boolean | true | false | Determines if the field is enabled or not. | | success | Boolean | false | false | Style the field indicating success. | | info | Boolean | false | false | Style the field for information feedback | | warning | Boolean | false | false | Style the field as warning, for example when there is an error displayed. | | required | Boolean | false | false | Determines if the field is required or not. |

MDCheckbox

Simple checkbox. Can default to checked or not and emits a single event.

<template>
  <MDForm class="my-10">
    <MDGroup>
      <!-- Bare bones, checkbox only -->
      <MDCheckbox :isChecked="false" @selected="selected" />
      <!-- Include a label if desired -->
      <MDLabel id="check1" label="Unchecked" />
      <MDCheckbox :isChecked="false" @selected="selected" />
      <!-- Default to being checked -->
      <MDLabel id="check2" label="Checked" />
      <MDCheckbox :isChecked="true" @selected="selected" />
    </MDGroup>
  </MDForm>
</template>
<script setup>
  // Import the form, group, label and checkbox components.
  import { MDForm, MDGroup, MDCheckbox, MDLabel } from '@mythicaldev/md-vue3-forms';
  
  const selected = () => {};
</script>

MDCheckbox Props

| Prop | Type | Default | Required | Description | |-----------|---------|---------|----------|-----------------------------------------------| | isChecked | Boolean | false | false | Determines if the checkbox is checked or not. |

MDCheckbox Emitted Events

| Event | Description | |----------|---------------------------------------------------| | selected | Emitted when the checkbox is checked or unchecked |

MDDatePicker

Integrates the @vuepic/vue-datepicker package for a flexible datepicker field.

@vuepic/vue-datepicker

<template>
  <MDForm class="my-10">
    <MDGroup>
      <!-- Basic, bare bones -->
      <MDDatePicker id="date" v-model="state.start" />
      <!-- With the time picker enabled -->
      <MDDatePicker id="date" v-model="state.end" :enableTimePicker="true" />
    </MDGroup>
  </MDForm>
</template>
<script setup>
  import { reactive } from 'vue';
  // Import the form, group, label and checkbox components.
  import { MDForm, MDGroup, MDDatePicker } from '@mythicaldev/md-vue3-forms';

  const state = reactive({
    start: new Date(),
    end: new Date(),
  });
</script>

Basic, Bare bones

With time picker enabled

MDDatePicker Props

| Prop | Type | Default | Required | Description | |------------------|---------|------------|----------|-------------------------------------------------------------------------------| | id | String | | true | The id of the form field. | | modelValue | Date | new Date() | true | The property to update. This should be passed as v-model when implementing. | | enableTimePicker | Boolean | false | false | Determines if the time picker is enabled. | | format | String | MM/dd/yyyy | false | The format to apply to the date-time. | | label | String | | false | The label to add to the field. Empty by default providing no label. | | describedBy | String | | false | The aria-describedby value for the field. | | help | String | | false | Text that will display under the field to give help or context. | | error | String | | false | Error text to display under the field. | | success | Boolean | false | false | Style the field indicating success. | | info | Boolean | false | false | Style the field for information feedback | | warning | Boolean | false | false | Style the field as warning, for example when there is an error displayed. | | required | Boolean | false | false | Determines if the field is required or not. |

MDDraggablePicker

Integrates the sortableJS library to allow moving items from one list to another.

sortableJS

<template>
  <MDForm class="my-10">
    <MDGroup>
      <MDDraggablePicker 
        id="test"
        v-model="state.books"
        selectedLabel="Selected Items"
        availableLabel="Available Items"
      />
    </MDGroup>
  </MDForm>
</template>
<script setup>
  import { reactive } from 'vue';
  // Import the form, group and draggable components.
  import { MDForm, MDGroup, MDDraggablePicker } from '@mythicaldev/md-vue3-forms';
  
  const state = reactive({
    books: {
      available: [
        {
          id: 1,
          name: 'The Shining',
        },
        {
          id: 1,
          name: 'Pride and Prejudice',
        },
        {
          id: 1,
          name: '1984',
        },
        {
          id: 1,
          name: 'The Lord of the Rings',
        },
        {
          id: 1,
          name: 'The Old Man and the Sea',
        },
      ],
      selected: [],
    },
  });
</script>

MDDraggablePicker Props

| Prop | Type | Default | Required | Description | |----------------|---------|---------------------------------|----------|------------------------------------------------------------------------------| | id | Boolean | | true | The id of the element. | | availableLabel | String | | true | Label for the available column | | selectedLabel | String | | true | Label for the selected column | | modelValue | Object | { available: [], selected: [] } | true | The property to update. This should be passed as v-model when implementing | | label | String | | false | Used to add a label. | | error | String | | false | Used to display an error to the lists. | | required | Boolean | false | false | Determines if the lists should be marked as required or not. |

MDDraggablePicker Emitted Events

| Event | Description | |-----------------|-----------------------------------------------------------| | onUpdate | Emitted when an item is dragged from one list to another. |

MDDropZone

Simple dropzone for image uploads. Utilizes the vue3-dropzone and sweetalert2 libraries.

<template>
  <MDForm>
    <MDGroup>
      <MDDropZone id="images" v-model="state.images" @onDrop="imageAddedToDropzone" />
    </MDGroup>
  </MDForm>
</template>
<script setup>
  import { reactive } from 'vue';
  // Import the components
  import { MDForm, MDGroup, MDDropZone } from '@mythicaldev/md-vue3-forms';

  const state = reactive({
    images: [],
  });
  const imageAddedToDropzone = () => {};
</script>

Empty Dropzone

One Image Added

Deleting Image

MDDropZone Props

| Prop | Type | Default | Required | Description | |--------------------|----------|---------------------------------------------------------|----------|-------------------------------------------------------------------------------| | id | Boolean | | true | The id of the element. | | modelValue | Array | [] | true | The property to update. This should be passed as v-model when implementing. | | label | String | | false | Used to add a label. | | required | Boolean | false | false | Determines if the lists should be marked as required or not. | | showPreview | Boolean | true | false | Show the uploaded images below the dropzone. | | helpText | String | Drag and drop some files here, or click to select files | false | Text to show in the dropzone. | | hoverText | String | Drop the files here ... | false | Text to display when image is hovered over the dropzone. | | showConfirmation | Boolean | true | false | Determines if a confirmation is shown when removing an image. | | confirmationConfig | Object | see configuration object below | false | Configuration to use in the Sweet Alert when deleting an image. |

{
    title: '',
    text: 'Are you sure?',
    icon: 'warning',
    showCancel: true,
    button: {
    color: '#3085d6',
    text: 'OK',
}

MDDropZone Emitted Events

| Event | Description | |---------|----------------------------------------------------| | onDrop | Emitted when an an image is added to the dropzone. |

MDSelect

Single select utilizing @headlessui/vue. YOu are able to filter the options by typing into the field or selected them using the dropdown directly.

<template>
  <MDForm>
    <MDGroup>
      <MDSelect label="Book Titles" id="book_titles" :options="selectOptions" v-model="state.selectedBook" />
    </MDGroup>
  </MDForm>
</template>
<script setup>
  import { reactive } from 'vue';
  // Import the components
  import { MDForm, MDGroup, MDSelect } from '@mythicaldev/md-vue3-forms';

  const selectOptions = [
    {
      value: '1',
      label: 'The Shining',
    },
    {
      value: '2',
      label: 'Pride and Prejudice',
    },
    {
      value: '3',
      label: '1984',
    },
    ...
  ];
  
  const state = reactive({
    selectedBook: '',
  });
</script>

MDSelect Props

| Prop | Type | Default | Required | Description | |-------------|------------------|---------|----------|----------------------------------------------------------------------------------| | id | String | | true | The id of the field. | | options | Array | [] | true | Values to display in the list. See the object below for formatting. | | label | String | | false | The label to add to the field. Empty by default providing no label. | | type | String | text | false | The type of field to use. Defaults to a basic text field. | | modelValue | [String, Number] | | false | The property to update. This should be passed as v-model when implementing | | placeholder | String | | false | The placeholder to use for the field. Empty by default providing no placeholder. | | describedBy | String | | false | The aria-describedby value for the field. | | help | String | | false | Text that will display under the field to give help or context. | | error | String | | false | Error text to display under the field. | | success | Boolean | false | false | Style the field indicating success. | | info | Boolean | false | false | Style the field for information feedback | | warning | Boolean | false | false | Style the field as warning, for example when there is an error displayed. | | required | Boolean | false | false | Determines if the field is required or not. |

Format for options property.

[
  {
    label: '',
    value: '',
  },
];

MDTextArea

Text area with limit if needed.

<template>
  <MDForm class="my-10">
    <MDGroup>
      <MDTextArea label="Description 1" id="description1" v-model="state.description1" />
      <MDTextArea label="Description 2" id="description2" rows="5" v-model="state.description2" />
      <MDTextArea label="Description 3" id="description3" rows="8" v-model="state.description3" :hasLimit="true" />
      <MDTextArea label="Description 4" id="description4" rows="8" v-model="state.description4" :hasLimit="true" />
    </MDGroup>
  </MDForm>
</template>
<script setup>
  import { reactive } from 'vue';
  // Import the components
  import { MDForm, MDGroup, MDTextArea } from '@mythicaldev/md-vue3-forms';
  
  const state = reactive({
    description1: '',
    description2: '',
    description3: '',
    description4: '',
  });
</script>

MDTextArea Props

| Prop | Type | Default | Required | Description | |-------------|------------------|---------|----------|----------------------------------------------------------------------------------| | id | String | | true | The id of the field. | | label | String | | false | The label to add to the field. Empty by default providing no label. | | type | String | text | false | The type of field to use. Defaults to a basic text field. | | modelValue | [String, Number] | | false | The property to update. This should be passed as v-model when implementing | | rows | String | 4 | false | The number of rows for the textarea | | hasLimit | Boolean | false | false | Determines if the field should have a limit or not. | | limit | Number | 255 | false | The limit to impose on the textarea. | | placeholder | String | | false | The placeholder to use for the field. Empty by default providing no placeholder. | | describedBy | String | | false | The aria-describedby value for the field. | | help | String | | false | Text that will display under the field to give help or context. | | error | String | | false | Error text to display under the field. | | success | Boolean | false | false | Style the field indicating success. | | info | Boolean | false | false | Style the field for information feedback | | warning | Boolean | false | false | Style the field as warning, for example when there is an error displayed. | | required | Boolean | false | false | Determines if the field is required or not. |

License

MIT