axentix / vue Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 1.0 3.23 MB

Official Axentix VueJS integration

Home Page: https://vue.useaxentix.com

License: MIT License

JavaScript 6.04% Vue 88.49% HTML 0.63% TypeScript 4.83%

vue's Introduction

Axentix - Front-end framework

Home | Documentation

Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.

Why Axentix

Easy to custom : Add your own color to the palette and its 9 variants will be generated. Every component comes with CSS Variables making you able to custom each of them.
Fast to learn, read and write : You won't be lost between frameworks, Axentix's class names are easy to read, write and learn. If you already used Bootstrap or TailwindCSS, you already know a plenty of them.
Design choice to the developer : The framework is focused on the developer experience and lets them choose their design by implementing easy to custom components & utility-first classes
Easiest grid system : Axentix is the first framework using the css grid feature to create its grid system, making it the most advanced as easy to use grid system.
Themeable : The integrated Theme Switcher handles natively dark mode and custom user theme.
Google accessibility-friendly color palette : The integrated color palette of 130+ colors automatically generates lighten and darken variants. Setting them on any element will choose the best text-color depending on the google requirements.
Growing ecosystem : Axentix comes with its friends, Neu-Axentix implementing neumorphism design, a VSCode extension and its code snippets, Vue-Axentix and its VueJS components and more are incoming.
Zero dependencies : No dependencies means freedom.

Quickstart

NPM

npm install axentix

Yarn

yarn add axentix

CDN

Include the files with jsDelivr.

Github Release

You can download the latest release from Github.

Clone the repo

git clone https://github.com/axentix/axentix.git
cd axentix
npm ci

After installation you have access to our source files.
You can build the project with npm run build or launch development server with npm run dev.

Documentation

Find the documentation at https://useaxentix.com/docs/.

Changelog

Changelog is accessible in the CHANGELOG.md file or in the release section.

Backers

Support this project on BuyMeACoffee to become a backer and get your github profile here.

Creators

Axel SIMONET - (Xelzs)
Github
Linkedin
Website
Vincent LEVEQUE - (Stallos11)
Github
Linkedin

Axentix Framework - Made with ❤️ by Axel SIMONET & Vincent LEVEQUE

vue's People

Contributors

Stargazers

Watchers

Forkers

vincentdm31

vue's Issues

Fix button disabled

We need to remove the btn-disabled 'btn' prefix to make it work.

Pagination transition

The pagination transition is set to none in the example page, we need to add it directly in the component.

.pagination li {
  transition: none !important;
}

Dropdown fade animation

The fade animation is not taken in account since the returned class is :

animation: 'anim-' + props.animationType,

Instead of :

animation: 'dropdown-anim-' + props.animationType,

Switch storybook builder to vitejs

Depends on #91

Various sidenav improvements needed

We need to improve the following things :

Create sub components for the sidenav header & footer to be able to add classes to them.
Handle sidenav overlay properly :
The overlay is not shown on md-up when the sidenav is not handled by the layout.
The bodyscrolling is not enabled back when we resize the screen and the sidenav closes itself.
Remove the large prop of the sidenav since the v2 handles it with a css variable

BUG: autocomplete selected item

The autocomplete selected item is not shown once mounted like the select component is doing.

Dropdown not handled without v-model

We need to make the dropdown handled by itself when no v-model is set.

Collapsible: autoclose option

The autoclose option needs a group prop to know which collapsibles need to be closed.

Tab improvements

The tab active border is not shown
We need to add events to the tab component

BUG: Radios are not working properly

Radios are not working properly, just try them on the dev page.

BUG: toggleState shared method timeout handling

The toggleState method is not working properly.

In fact, we need to handle timeout references and cancel them if we click back on the input.

Reproduce the bug on the https://vue.useaxentix.com/docs/forms/autocomplete.html page :

Scroll until the form-select-content is out of the page and shown at the top once toggled.
Click on the input
Click fast outside and inside of it

We need to change the behaviour of this function to make it use the position of the clicked element and the content height, this will remove complexity made to handle another click when the content is already opened since it's bottom is not outside of the viewport once placed on the top.