vormix v0.2.0

Vormix

Vormix is a form builder 📝. It arises from the need to auto-generate forms from javascript structures. This allows you to obtain the table structure of a database and create the form. Vormix is also the fusion of the name of vue + form + remix.

Quick Start

Install

npm install vormix

Add in App.vue

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/main.css";
// ...

import vormix from "vormix"; // ← import vormix
import "vormix/styles.css"; // ← import vormix styles

createApp(App)
  .use(vormix) // ← use in createApp
  .mount("#app");

Use in code

Code

<template>
  <Vormix v-model="myModel" />
</template>
<script setup>
import { ref } from "vue";
const myModel = ref({
  name: "Book", // ← Title (or name of entity)
  fields: [
    {
      label: "Name", // ← Label of field
      name: "name", // ← Name of field
      fieldType: "String", // ← Field type can be [String, Int, Boolean, Datetime, Realtion]
    },
    {
      name: "likeVormix",
      fieldType: "Boolean",
    },
    {
      name: "age",
      fieldType: "Int",
      default: 23, // ← Default value (Only apply if when <Vormix :is-new="true"/>)
    },
    {
      name: "birth",
      fieldType: "Datetime",
      isRequired: true, // ← If field is Required
    },
    {
      name: "country",
      fieldType: "Relation",
      values: [
        { id: 1, name: "EEUU" },
        { id: 2, name: "Spain" },
      ], // ← For relations
    },
  ],
  data: {
    name: "This is a current value", // ← Current value
  },
});
</script>

Vormix v-model fields props:

    {
      label, // ← Label of field (If it is null, it is given the value of "name" field)
      name, // ← Name of field (Required)
      fieldType, // ← Field type can be [String, Int, Boolean, Datetime, Realtion] (Required)
      isRequired, // ← If field is Required (default false)
      default, // ← Default value (Only apply if when <Vormix :is-new="true"/>)
      values, // ← Only required for relations
    }

Vormix component:

Props

{
    isNew: {
        type: Boolean,
        default: true,
    },
    parser: {
        type: Function,
        default: null,
    },
    resetBtn: {
        type: Boolean,
        default: true,
    },
    buttons: {
        type: Array,
        default: () => [],
    },
}

/*
buttons examples
// {
//     title: 'Save',
//     icon: 'mdi-content-save',
//     attrs: {class="myClass"},
//     fn: () => save,
// },
// {
//     title: 'Reset',
//     icon: 'mdi-reload',
//     attrs: {class="myClass"},
//     fn: () => reset,
// },      
*/

Slots

<template #before-actions></template>
<template #actions></template>
<template #after-actions></template>

• v-model: entity model
• is-new: if is new instance (apply default values)
• reset-btn: if show reset button
• buttons: array of buttons
• parser: you can pass a function to replace the native parser

VormixSK

If you want to use vormix without it being embedded in a card, you can use VormixSK. Returns only the components inside the form.

Props

{
    isNew: {
        type: Boolean,
        default: true,
    },
    parser: {
        type: Function,
        default: null,
    },
}

Use

• Builder - Vite
• Framework - Vue
• Components - Vuetify
• Components(Only calendar) - PrimeVue
• Styling - Tailwind
• Icons - Pictogrammers
• Linter && Formatter - Biome

💻 For development see the file DEV.md