Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Content

BaseFlex:

This component is intended to simplify the positioning of elements in a view. It can be considered as a "wrapper" component that adds display:flex and makes use of css attributes to modify the positioning of child elements.

Props and attributes that the component receives:

• gap: allows defining the space that will be between child elements.

• as: Allows to define which html element will occupy to render in the dom.

• column: Adds the flex-direction property: column

• {x|y}-{direction}: This attribute will allow to define in which position (x or y) of the flex will be the child elements.

• grow: Adds the flex-grow property: 1

• wrap: Adds the flex-wrap property: wrap.

• Directions that are taken in each axis: {x|y}-start {x|y}-end {x|y}-center {x|y}-space-between {x|y}-space-around

BaseGrid:

• Grid: A set of intersecting horizontal and vertical lines that define columns and rows. Elements can be placed in the grid within these column and row lines. Using class="span-#" you can create the desired columns or implement them from <style>.

FormRules:

This component has the purpose of creating the validations of the information entered in a specific field in a form against the established rule. Using :rules="[$formRules. "RULE"]".

Current FormRules in the project

• required: The field must be required
• isNumberValid: It is a number
• isNumberPositive: It is a positive number
• isNumberIntPositive: It is a positive integer
• isNumberInt: It is an integer
• isEmailValid: It is an email format
• isPasswordSafeValid: If the password is secure and meets the minimum requirements
• isNumberAccountValid: Valid bank account number
• isNumberCardValid: Valid card number
• isCLABEValid: Valid CLABE number
• isRFCValid: Valid RFC format
• isCURPValid: Valid CURP format
• isURLValid: Format of a valid URL
• isCodeZipValid: Valid zip code format