hightek-plugin v0.0.4
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: 1wrap
: 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 requiredisNumberValid
: It is a numberisNumberPositive
: It is a positive numberisNumberIntPositive
: It is a positive integerisNumberInt
: It is an integerisEmailValid
: It is an email formatisPasswordSafeValid
: If the password is secure and meets the minimum requirementsisNumberAccountValid
: Valid bank account numberisNumberCardValid
: Valid card numberisCLABEValid
: Valid CLABE numberisRFCValid
: Valid RFC formatisCURPValid
: Valid CURP formatisURLValid
: Format of a valid URLisCodeZipValid
: Valid zip code format