vormix v0.1.3

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,
    },
    saveFn: {
        type: Function,
    },
    saveBtn: {
        type: Boolean,
        default: true,
    },
    resetBtn: {
        type: Boolean,
        default: true,
    },
    defaultBtn: {
        type: Boolean,
        default: true,
    },
    parser: {
        type: Function,
        default: null,
    },
}

• v-model: entity model
• is-new: if is new instance (apply default values)
• save-fn: funcion called when click in save button
• save-btn: if show save button
• reset-btn: if show reset button
• default-btn: if false it does not show any button (It would be the same as {save-btn: false, reset-btn: false})
• 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.

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