@mrxploder/saxvue 0.1.0 → 0.4.0

package/README.md

@@ -1,8 +1,32 @@
 # SaxVue
 
-A Vue 3 UI component library. All components are globally available after `app.use(SaxVue)` and use the `sv-*` element naming convention.
+<img src="assets/saxvue-preview.jpg" alt="SaxVue preview" width="900" />
 
-## Install
+**Actively maintained** — this is a living project, built because I love Vuesax and want it to thrive in Vue 3.
+
+> 💬 **Project status:** This is still baby steps and a **WIP**. Don't expect perfection yet — I'm improving it little by little and would **really, really** love any help from the community.
+
+A Vue 3 UI component library with **15 components**, global functions, dark mode, CSS custom-property theming, and a full [VitePress documentation site](https://mrxploder.github.io/saxvue/) with 130+ live demos.
+
+All components are globally available after `app.use(SaxVue)` and use the `sv-*` element naming convention.
+
+---
+
+## ✨ Features
+
+- **15 components** — Button, Input, Select, Checkbox, Switch, Radio, Avatar, Tooltip, Alert, Dialog, Pagination, Table, Navbar, Sidebar, Card
+- **Layout grid** — `<sv-row>` / `<sv-col>` with 12-column support, offsets, and responsive breakpoints
+- **Global functions** — `$sv.loading()`, `$sv.notification()`, `$sv.toggleTheme()`, `$sv.setColor()`
+- **Dark mode** — one-call toggle with CSS custom properties
+- **Color system** — every component accepts `color`, `primary`, `success`, `danger`, `warn`, `dark` props
+- **Tree-shakeable** — import the full bundle or individual components
+- **TypeScript** — full type declarations included
+- **Zero `.vue` SFCs** — all components use `defineComponent()` + `h()` render functions
+- **VitePress docs** — 17 component pages, 130+ interactive demos, guide & theme pages
+
+---
+
+## 📦 Install
 
 ```bash
 npm install @mrxploder/saxvue
@@ -12,46 +36,111 @@ pnpm add @mrxploder/saxvue
 yarn add @mrxploder/saxvue
 ```
 
-## Setup
+---
 
-Register the plugin in your app entry point:
+## 🚀 Quick Start
 
 ```ts
 // main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import SaxVue from '@mrxploder/saxvue'
+import '@mrxploder/saxvue/dist/saxvue.css'
+
+const app = createApp(App)
+app.use(SaxVue)
+app.mount('#app')
+```
+
+After `app.use(SaxVue)` every `sv-*` component is available globally — no per-component imports needed.
+
+### Configuration
+
+Pass an options object to customize theme colors:
+
+```ts
+app.use(SaxVue, {
+  colors: {
+    primary: '#5b3cc4',
+    success: 'rgb(23, 201, 100)',
+    danger: 'rgb(242, 19, 93)',
+    warn: 'rgb(255, 130, 0)',
+    dark: 'rgb(36, 33, 69)',
+  },
+})
+```
+
+### Nuxt 3
 
-import SaxVue from '@mrxploder/saxvue';
-import '@mrxploder/saxvue/dist/base.css';
+Create `plugins/saxvue.ts`:
 
-const app = createApp(App);
-app.use(SaxVue);
-app.mount('#app');
+```ts
+import { defineNuxtPlugin } from '#app'
+import SaxVue from '@mrxploder/saxvue'
+import '@mrxploder/saxvue/dist/saxvue.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(SaxVue)
+})
+```
+
+---
+
+## 📚 Documentation
+
+Full documentation with live demos is available at **[mrxploder.github.io/saxvue](https://mrxploder.github.io/saxvue/)**.
+
+| Section        | Pages                                                                                                                                     |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| **Guide**      | Introduction, Getting Started, Configuration, Nuxt integration                                                                            |
+| **Theme**      | Colors — default palette, JS/CSS/runtime customization                                                                                    |
+| **Components** | Button, Alert, Avatar, Card, Checkbox, Dialog, Input, Loading, Navbar, Notification, Pagination, Radio, Select, Sidebar, Switch, Table, Tooltip |
+| **Layout**     | Grid system (`sv-row` / `sv-col`)                                                                                                         |
+
+Run the docs locally:
+
+```bash
+npm run docs:dev      # http://localhost:5173/saxvue/
 ```
 
-After `app.use(SaxVue)` every `sv-*` component is available globally — no per-component import needed.
+---
 
-## Components
+## 🧩 Components
 
-### Buttons
+### Button
 
-```vue
+```html
 <sv-button color="primary">Primary</sv-button>
-<sv-button color="danger" flat>Danger flat</sv-button>
-<sv-button color="success" border>Success border</sv-button>
-<sv-button loading>Loading state</sv-button>
+<sv-button flat>Flat</sv-button>
+<sv-button border>Border</sv-button>
+<sv-button gradient>Gradient</sv-button>
+<sv-button relief>Relief</sv-button>
+<sv-button transparent>Transparent</sv-button>
+<sv-button shadow>Shadow</sv-button>
+<sv-button loading>Loading</sv-button>
+<sv-button icon><i class="bx bx-home-alt"></i></sv-button>
+
+<!-- Button group -->
+<sv-button-group>
+  <sv-button>One</sv-button>
+  <sv-button>Two</sv-button>
+  <sv-button>Three</sv-button>
+</sv-button-group>
 ```
 
 ### Input
 
-```vue
+```html
 <sv-input v-model="value" label="Name" placeholder="Enter your name" />
 <sv-input v-model="value" label="Password" type="password" />
+<sv-input v-model="value" state="success" />
+<sv-input v-model="value" loading />
 ```
 
 ### Select
 
-```vue
+```html
 <sv-select v-model="selected" label="Fruit">
   <sv-option value="apple">Apple</sv-option>
   <sv-option value="banana">Banana</sv-option>
@@ -59,18 +148,23 @@ After `app.use(SaxVue)` every `sv-*` component is available globally — no per-
 </sv-select>
 ```
 
+Supports multiple selection, filtering, option groups, loading, and state messages.
+
 ### Checkbox / Switch / Radio
 
-```vue
-<sv-checkbox v-model="checked" label="Accept terms" />
-<sv-switch v-model="active" label="Enable notifications" />
-<sv-radio v-model="picked" val="a" label="Option A" />
+```html
+<sv-checkbox v-model="checked">Accept terms</sv-checkbox>
+
+<sv-switch v-model="active" />
+
+<sv-radio v-model="picked" val="a">Option A</sv-radio>
+<sv-radio v-model="picked" val="b">Option B</sv-radio>
 ```
 
 ### Avatar
 
-```vue
-<sv-avatar>
+```html
+<sv-avatar size="60">
   <img src="/avatar.png" alt="User" />
 </sv-avatar>
 
@@ -81,32 +175,52 @@ After `app.use(SaxVue)` every `sv-*` component is available globally — no per-
 </sv-avatar-group>
 ```
 
-### Tooltip / Alert / Dialog
+### Tooltip
 
-```vue
-<sv-tooltip text="Helpful tip"><sv-button>Hover me</sv-button></sv-tooltip>
+```html
+<sv-tooltip>
+  <sv-button flat>Hover me</sv-button>
+  <template #tooltip>This is a tooltip</template>
+</sv-tooltip>
+```
 
-<sv-alert color="success">File saved successfully.</sv-alert>
+### Alert
 
-<sv-dialog v-model="open" title="Confirm">Are you sure?</sv-dialog>
+```html
+<sv-alert>Default alert</sv-alert>
+<sv-alert color="success" solid>Success</sv-alert>
+<sv-alert color="danger" gradient>Danger gradient</sv-alert>
+<sv-alert closable>Closable alert</sv-alert>
+```
+
+### Dialog
+
+```html
+<sv-dialog v-model="open">
+  <template #header>Confirm</template>
+  Are you sure?
+  <template #footer>
+    <sv-button @click="open = false">OK</sv-button>
+  </template>
+</sv-dialog>
 ```
 
 ### Pagination
 
-```vue
-<sv-pagination v-model="page" :total-items="200" :items-per-page="10" />
+```html
+<sv-pagination v-model="page" :length="20" />
 ```
 
 ### Table
 
-```vue
-<sv-table :data="rows" v-model:search="search">
+```html
+<sv-table>
   <template #header>
-    <sv-th sort-key="name">Name</sv-th>
-    <sv-th sort-key="email">Email</sv-th>
+    <sv-th sort>Name</sv-th>
+    <sv-th sort>Email</sv-th>
   </template>
-  <template #tbody="{ data }">
-    <sv-tr v-for="row in data" :key="row.id" :data="row">
+  <template #body>
+    <sv-tr v-for="row in data" :key="row.id">
       <sv-td>{{ row.name }}</sv-td>
       <sv-td>{{ row.email }}</sv-td>
     </sv-tr>
@@ -114,123 +228,208 @@ After `app.use(SaxVue)` every `sv-*` component is available globally — no per-
 </sv-table>
 ```
 
+Supports striped rows, single/multiple selection, search, sort, expand, and pagination.
+
+### Card
+
+```html
+<sv-card>
+  <template #title>Card title</template>
+  <template #text>Card body content</template>
+  <template #interactions>
+    <sv-button flat icon><i class="bx bx-heart"></i></sv-button>
+  </template>
+</sv-card>
+```
+
 ### Navbar
 
-```vue
+```html
 <sv-navbar>
   <template #left>
-    <sv-navbar-group>
-      <sv-navbar-item to="/">Home</sv-navbar-item>
-      <sv-navbar-item to="/about">About</sv-navbar-item>
-    </sv-navbar-group>
+    <img src="/logo.svg" alt="Logo" />
+  </template>
+  <sv-navbar-item active>Home</sv-navbar-item>
+  <sv-navbar-item>About</sv-navbar-item>
+  <template #right>
+    <sv-button flat icon><i class="bx bx-bell"></i></sv-button>
   </template>
 </sv-navbar>
 ```
 
 ### Sidebar
 
-```vue
-<sv-sidebar v-model="sidebarOpen">
+```html
+<sv-sidebar v-model="active" :open.sync="open">
+  <template #logo>
+    <img src="/logo.svg" alt="Logo" />
+  </template>
+  <sv-sidebar-item id="home">
+    <template #icon><i class="bx bx-home"></i></template>
+    Home
+  </sv-sidebar-item>
   <sv-sidebar-group>
-    <sv-sidebar-item>Dashboard</sv-sidebar-item>
-    <sv-sidebar-item>Settings</sv-sidebar-item>
+    <template #header>
+      <sv-sidebar-item arrow>
+        <template #icon><i class="bx bx-grid-alt"></i></template>
+        Components
+      </sv-sidebar-item>
+    </template>
+    <sv-sidebar-item id="button">Button</sv-sidebar-item>
   </sv-sidebar-group>
 </sv-sidebar>
 ```
 
-### Card
-
-```vue
-<sv-card>
-  <template #title>Card title</template>
-  <template #text>Card body content</template>
-  <template #buttons>
-    <sv-button flat>Cancel</sv-button>
-    <sv-button color="primary">OK</sv-button>
-  </template>
-</sv-card>
-```
+---
 
-## Layout Grid
+## 📐 Layout Grid
 
 `SvRow` and `SvCol` are globally registered alongside all other components.
 
-```vue
-<sv-row justify="space-between" align="stretch" style="gap: 12px">
-  <sv-col w="4">Column 1</sv-col>
-  <sv-col w="4">Column 2</sv-col>
-  <sv-col w="4">Column 3</sv-col>
+```html
+<sv-row justify="center">
+  <sv-col w="4">33.3%</sv-col>
+  <sv-col w="4">33.3%</sv-col>
+  <sv-col w="4">33.3%</sv-col>
 </sv-row>
 ```
 
-`SvCol` props: `w` (1–12), `offset`, `order`, `lg`, `sm`, `xs`, `type`, `justify`.
+`SvCol` props: `w` (1-12), `offset`, `order`, `lg`, `sm`, `xs`.
+
+---
 
-## Global Helper – `$sv`
+## ⚡ Global Helper — \$sv
 
 After `app.use(SaxVue)` every component instance has access to `this.$sv`:
 
 ```ts
 // Loading overlay
-const handle = this.$sv.loading({ text: 'Saving…' });
-handle.close();
+const handle = this.$sv.loading({ text: 'Saving...' })
+handle.close()
 
 // Notification toast
-this.$sv.notification({ title: 'Saved', text: 'Your changes have been saved.' });
+this.$sv.notification({
+  title: 'Saved',
+  text: 'Your changes have been saved.',
+  color: 'success',
+})
 
 // Theme
-this.$sv.toggleTheme();
-this.$sv.setTheme('dark');
+this.$sv.toggleTheme()   // toggle light <-> dark
+this.$sv.setTheme('dark') // explicit
 
-// Set a named theme color
-this.$sv.setColor('primary', '#6C63FF');
+// Runtime color change
+this.$sv.setColor('primary', '#6C63FF')
 
 // Table helpers
-const page = this.$sv.getPage(data, 1, 10);
-const total = this.$sv.getLength(data, 10);
-const hits = this.$sv.getSearch(data, 'alice');
+const page  = this.$sv.getPage(data, 1, 10)
+const total = this.$sv.getLength(data, 10)
+const hits  = this.$sv.getSearch(data, 'alice')
+const sorted = this.$sv.sortData(data, 'name', 'asc')
+this.$sv.checkAll(data)
 ```
 
-## Color Props
+---
+
+## 🎨 Color Props
+
+All components accept these color props via the shared `svColorProps` mixin:
 
-All components accept these color props:
+| Prop      | Type    | Description                                                        |
+| --------- | ------- | ------------------------------------------------------------------ |
+| `color`   | String  | Any CSS color — hex, rgb, or theme name (`primary`, `success`, …)  |
+| `primary` | Boolean | Shorthand for `color="primary"`                                    |
+| `success` | Boolean | Shorthand for `color="success"`                                    |
+| `danger`  | Boolean | Shorthand for `color="danger"`                                     |
+| `warn`    | Boolean | Shorthand for `color="warn"`                                       |
+| `dark`    | Boolean | Shorthand for `color="dark"`                                       |
+| `active`  | Boolean | Active state styling                                               |
 
-| Prop      | Description                     |
-| --------- | ------------------------------- |
-| `color`   | Any CSS color, hex, or var name |
-| `primary` | Boolean shorthand for primary   |
-| `success` | Boolean shorthand for success   |
-| `danger`  | Boolean shorthand for danger    |
-| `warn`    | Boolean shorthand for warn      |
-| `dark`    | Boolean shorthand for dark      |
+---
 
-## Dark Mode
+## 🌙 Dark Mode
 
 ```ts
-this.$sv.toggleTheme(); // toggle
-this.$sv.setTheme('dark'); // explicit
-this.$sv.setTheme('light');
+this.$sv.toggleTheme()     // toggle light <-> dark
+this.$sv.setTheme('dark')  // explicit set
+this.$sv.setTheme('light')
 ```
 
-## Tree-shaking (per-component imports)
+Override theme colors via CSS custom properties:
+
+```css
+:root {
+  --sv-primary: 91, 60, 196;
+  --sv-success: 23, 201, 100;
+  --sv-danger: 242, 19, 93;
+  --sv-warn: 254, 130, 0;
+  --sv-dark: 36, 33, 69;
+}
+```
+
+---
+
+## 🌳 Tree-Shaking (per-component imports)
+
+Import only what you need instead of the full bundle:
 
 ```ts
-import svButton from '@mrxploder/saxvue/dist/svButton/index.js';
-import svInput from '@mrxploder/saxvue/dist/svInput/index.js';
+import svButton from '@mrxploder/saxvue/dist/svButton/index.js'
+import svInput  from '@mrxploder/saxvue/dist/svInput/index.js'
+import '@mrxploder/saxvue/dist/base.css'
 
-app.use(svButton);
-app.use(svInput);
+app.use(svButton)
+app.use(svInput)
 ```
 
-## Development
+---
+
+## 🛠 Development
 
 ```bash
 npm install
-npm run storybook:dev    # Storybook dev server → http://localhost:6006
-npm test                 # Jest unit tests (384 tests, 18 suites)
-npm run build            # Production build → dist/
-npm run lint             # ESLint
+
+# Documentation site (VitePress)
+npm run docs:dev          # Dev server -> http://localhost:5173/saxvue/
+npm run docs:build        # Static build
+npm run docs:preview      # Preview static build
+
+# Testing
+npm test                  # Jest unit tests
+npm run test:coverage     # Jest with coverage report
+
+# Build and quality
+npm run build             # Production build -> dist/
+npm run lint              # ESLint
+npm run lint:fix          # ESLint auto-fix
+npm run verify:treeshake  # Verify per-component bundle sizes
+npm run test:types        # Type-check declarations
 ```
 
-## License
+---
+
+## 📁 Project Structure
+
+```
+src/
+  components/        15 components (defineComponent + h() render functions)
+  functions/         $sv global functions (loading, notification, table helpers)
+  icons/             Render-function icon components
+  layout/            Grid system (SvRow, SvCol)
+  mixins/            Shared color props and useSvComponent composable
+  styles/            SCSS theme (_colors, _dark, _mixins, _vars)
+  util/              Color utilities, ripple effect
+docs/                VitePress documentation site
+  docs/components/   17 component doc pages with live demos
+  docs/guide/        Getting Started, Configuration, Nuxt
+  docs/theme/        Color system documentation
+build/               Webpack build configs (UMD, per-component, styles)
+test/                Unit tests
+types/               TypeScript declarations
+```
+
+---
+
+## 📄 License
 
-MIT © MrXploder
+MIT © [MrXploder](https://github.com/MrXploder)

package/dist/base.css

@@ -1 +1 @@
-@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);:root{--sv-primary:25,91,255;--sv-warn:255,186,0;--sv-danger:255,71,87;--sv-success:70,201,58;--sv-dark:30,30,30;--sv-light:244,247,248;--sv-color:17,18,20;--sv-facebook:59,89,153;--sv-twitter:29,161,242;--sv-youtube:255,0,0;--sv-pinterest:189,8,28;--sv-linkedin:0,119,181;--sv-snapchat:255,252,0;--sv-whatsapp:37,211,102;--sv-tumblr:54,70,93;--sv-reddit:255,69,0;--sv-spotify:30,215,96;--sv-amazon:255,153,0;--sv-medium:2,184,117;--sv-vimeo:26,183,234;--sv-skype:0,175,240;--sv-dribbble:234,76,137;--sv-slack:74,21,75;--sv-yahoo:67,2,151;--sv-twitch:100,65,164;--sv-discord:114,137,218;--sv-telegram:0,136,204;--sv-google-plus:219,68,55;--sv-messenger:0,132,255;--sv-background:255,255,255;--sv-text:44,62,80;--sv-gray-1:249,252,253;--sv-gray-2:244,247,248;--sv-gray-3:240,243,244;--sv-gray-4:230,233,234}[class*="--default"],[class*="--primary"]{--sv-color:var(--sv-primary)}[class*="--danger"]{--sv-color:var(--sv-danger)}[class*="--success"]{--sv-color:var(--sv-success)}[class*="--dark"]{--sv-color:var(--sv-dark)}[class*="--warn"]{--sv-color:var(--sv-warn)}:root{--sv-shadow-opacity:0.05;--sv-radius:20px;--sv-zindex-1:100000;--sv-zindex-2:99000;--sv-zindex-3:98000;--sv-zindex-4:97000;--sv-background-opacity:0.2;--sv-font-family:"Poppins",sans-serif}[vs-theme=dark]{--sv-background:30,32,35;--sv-text:255,255,255;--sv-gray-1:24,25,28;--sv-gray-2:20,20,23;--sv-gray-3:15,16,19;--sv-gray-4:10,11,14;--sv-shadow-opacity:0.3;--sv-dark:0,0,0;--sv-background-opacity:0.6}[vs-theme=dark] .sv-pagination-content.sv-component-dark .sv-pagination__active{--sv-color:255,255,255;color:-color("gray-3")}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent{color:-color("text")!important}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent:hover:before{background:-color("color",.2)}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent.sv-button--active:before{background:-color("color",-var("background-opacity"))}[vs-theme=dark] .vs-ripple,[vs-theme=dark] .vs-ripple-content,[vs-theme=dark] .vs-ripple-invert{--sv-color:0,0,0}[vs-theme=dark] .sv-loading{--sv-background:0,0,0}[vs-theme=dark] .sv-input-parent--state-dark{--sv-dark:255,255,255!important}[vs-theme=dark] .sv-input-parent--state-dark .sv-input{background:#000!important}[vs-theme=dark] .sv-component-dark{--sv-color:0,0,0!important}[vs-theme=dark] .sv-component-dark .sv-avatar{color:#fff!important}[vs-theme=dark] .sv-component-dark.sv-alert{--sv-color:0,0,0!important;background:-color("color",1)!important;color:-color("text",1)!important}button{cursor:pointer;outline:none}[disabled]{opacity:.6}input{outline:none}a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}[class*=vs-]{box-sizing:border-box;font-family:var(--sv-font-family);list-style:none;outline:none}.vs-ripple-content{--sv-color:inherit;border-radius:inherit;height:100px;height:100%;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100px;width:100%;z-index:-1}.vs-ripple-content .vs-ripple{background:radial-gradient(circle,-color(color,.05),-color(color,.6));border-radius:50%;height:0;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;width:0}.vs-ripple-content .vs-ripple--solid{background:-color(color,1);opacity:1}.vs-ripple-content .vs-ripple-invert{background-image:radial-gradient(circle,-color(color,.5),-color(color,0));border-radius:50%;height:0;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;width:0}.vs-ripple-content .vs-ripple-cut-1{background-image:linear-gradient(270deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,0));height:0;opacity:0;position:absolute;transform:translate(-100%,-50%) skew(20deg);transition:all .6s ease;width:0}.vs-ripple-content .vs-ripple-cut-2{background-image:linear-gradient(90deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,0));height:0;opacity:0;position:absolute;transform:translateY(-50%) skew(20deg);transition:all .6s ease;width:0}.vs-remove-transition *,.vs-remove-transition :after,.vs-remove-transition :before{transition:all 0s!important}
+@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);:root{--sv-primary:25,91,255;--sv-warn:255,186,0;--sv-danger:255,71,87;--sv-success:70,201,58;--sv-dark:30,30,30;--sv-light:244,247,248;--sv-color:17,18,20;--sv-facebook:59,89,153;--sv-twitter:29,161,242;--sv-youtube:255,0,0;--sv-pinterest:189,8,28;--sv-linkedin:0,119,181;--sv-snapchat:255,252,0;--sv-whatsapp:37,211,102;--sv-tumblr:54,70,93;--sv-reddit:255,69,0;--sv-spotify:30,215,96;--sv-amazon:255,153,0;--sv-medium:2,184,117;--sv-vimeo:26,183,234;--sv-skype:0,175,240;--sv-dribbble:234,76,137;--sv-slack:74,21,75;--sv-yahoo:67,2,151;--sv-twitch:100,65,164;--sv-discord:114,137,218;--sv-telegram:0,136,204;--sv-google-plus:219,68,55;--sv-messenger:0,132,255;--sv-background:255,255,255;--sv-text:44,62,80;--sv-gray-1:249,252,253;--sv-gray-2:244,247,248;--sv-gray-3:240,243,244;--sv-gray-4:230,233,234}[class*="--default"],[class*="--primary"]{--sv-color:var(--sv-primary)}[class*="--danger"]{--sv-color:var(--sv-danger)}[class*="--success"]{--sv-color:var(--sv-success)}[class*="--dark"]{--sv-color:var(--sv-dark)}[class*="--warn"]{--sv-color:var(--sv-warn)}:root{--sv-shadow-opacity:0.05;--sv-radius:20px;--sv-zindex-1:100000;--sv-zindex-2:99000;--sv-zindex-3:98000;--sv-zindex-4:97000;--sv-background-opacity:0.2;--sv-font-family:"Poppins",sans-serif}[vs-theme=dark]{--sv-background:30,32,35;--sv-text:255,255,255;--sv-gray-1:24,25,28;--sv-gray-2:20,20,23;--sv-gray-3:15,16,19;--sv-gray-4:10,11,14;--sv-shadow-opacity:0.3;--sv-dark:0,0,0;--sv-background-opacity:0.6}[vs-theme=dark] .sv-pagination-content.sv-component-dark .sv-pagination__active{--sv-color:255,255,255;color:rgba(var(--sv-gray-3),1)}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent{color:rgba(var(--sv-text),1)!important}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent:hover:before{background:rgba(var(--sv-color),.2)}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent.sv-button--active:before{background:rgba(var(--sv-color),var(--sv-background-opacity))}[vs-theme=dark] .vs-ripple,[vs-theme=dark] .vs-ripple-content,[vs-theme=dark] .vs-ripple-invert{--sv-color:0,0,0}[vs-theme=dark] .sv-loading{--sv-background:0,0,0}[vs-theme=dark] .sv-input-parent--state-dark{--sv-dark:255,255,255!important}[vs-theme=dark] .sv-input-parent--state-dark .sv-input{background:#000!important}[vs-theme=dark] .sv-component-dark{--sv-color:0,0,0!important}[vs-theme=dark] .sv-component-dark .sv-avatar{color:#fff!important}[vs-theme=dark] .sv-component-dark.sv-alert{--sv-color:0,0,0!important;background:rgba(var(--sv-color),1)!important;color:rgba(var(--sv-text),1)!important}button{cursor:pointer;outline:none}[disabled]{opacity:.6}input{outline:none}a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}[class*=vs-]{box-sizing:border-box;font-family:var(--sv-font-family);list-style:none;outline:none}.vs-ripple-content{--sv-color:inherit;border-radius:inherit;height:100px;height:100%;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100px;width:100%;z-index:-1}.vs-ripple-content .vs-ripple{background:radial-gradient(circle,rgba(var(--sv-color),.05),rgba(var(--sv-color),.6));border-radius:50%;height:0;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;width:0}.vs-ripple-content .vs-ripple--solid{background:rgba(var(--sv-color),1);opacity:1}.vs-ripple-content .vs-ripple-invert{background-image:radial-gradient(circle,rgba(var(--sv-color),.5),rgba(var(--sv-color),0));border-radius:50%;height:0;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;width:0}.vs-ripple-content .vs-ripple-cut-1{background-image:linear-gradient(270deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,0));height:0;opacity:0;position:absolute;transform:translate(-100%,-50%) skew(20deg);transition:all .6s ease;width:0}.vs-ripple-content .vs-ripple-cut-2{background-image:linear-gradient(90deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,0));height:0;opacity:0;position:absolute;transform:translateY(-50%) skew(20deg);transition:all .6s ease;width:0}.vs-remove-transition *,.vs-remove-transition :after,.vs-remove-transition :before{transition:all 0s!important}

package/dist/base.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /*!
-  * SaxVue v0.1.0 by MrXploder 🖖 (https://github.com/MrXploder/saxvue)
+  * SaxVue v0.2.0 by MrXploder 🖖 (https://github.com/MrXploder/saxvue)
   * Original proyect by Luis Daniel Rovira (https://lusaxweb.github.io/saxvue/)
   * Released under the MIT License.
   */

package/dist/base.min.css

@@ -1 +1 @@
-@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);:root{--sv-primary:25,91,255;--sv-warn:255,186,0;--sv-danger:255,71,87;--sv-success:70,201,58;--sv-dark:30,30,30;--sv-light:244,247,248;--sv-color:17,18,20;--sv-facebook:59,89,153;--sv-twitter:29,161,242;--sv-youtube:255,0,0;--sv-pinterest:189,8,28;--sv-linkedin:0,119,181;--sv-snapchat:255,252,0;--sv-whatsapp:37,211,102;--sv-tumblr:54,70,93;--sv-reddit:255,69,0;--sv-spotify:30,215,96;--sv-amazon:255,153,0;--sv-medium:2,184,117;--sv-vimeo:26,183,234;--sv-skype:0,175,240;--sv-dribbble:234,76,137;--sv-slack:74,21,75;--sv-yahoo:67,2,151;--sv-twitch:100,65,164;--sv-discord:114,137,218;--sv-telegram:0,136,204;--sv-google-plus:219,68,55;--sv-messenger:0,132,255;--sv-background:255,255,255;--sv-text:44,62,80;--sv-gray-1:249,252,253;--sv-gray-2:244,247,248;--sv-gray-3:240,243,244;--sv-gray-4:230,233,234}[class*="--default"],[class*="--primary"]{--sv-color:var(--sv-primary)}[class*="--danger"]{--sv-color:var(--sv-danger)}[class*="--success"]{--sv-color:var(--sv-success)}[class*="--dark"]{--sv-color:var(--sv-dark)}[class*="--warn"]{--sv-color:var(--sv-warn)}:root{--sv-shadow-opacity:0.05;--sv-radius:20px;--sv-zindex-1:100000;--sv-zindex-2:99000;--sv-zindex-3:98000;--sv-zindex-4:97000;--sv-background-opacity:0.2;--sv-font-family:"Poppins",sans-serif}[vs-theme=dark]{--sv-background:30,32,35;--sv-text:255,255,255;--sv-gray-1:24,25,28;--sv-gray-2:20,20,23;--sv-gray-3:15,16,19;--sv-gray-4:10,11,14;--sv-shadow-opacity:0.3;--sv-dark:0,0,0;--sv-background-opacity:0.6}[vs-theme=dark] .sv-pagination-content.sv-component-dark .sv-pagination__active{--sv-color:255,255,255;color:-color("gray-3")}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent{color:-color("text")!important}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent:hover:before{background:-color("color",.2)}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent.sv-button--active:before{background:-color("color",-var("background-opacity"))}[vs-theme=dark] .vs-ripple,[vs-theme=dark] .vs-ripple-content,[vs-theme=dark] .vs-ripple-invert{--sv-color:0,0,0}[vs-theme=dark] .sv-loading{--sv-background:0,0,0}[vs-theme=dark] .sv-input-parent--state-dark{--sv-dark:255,255,255!important}[vs-theme=dark] .sv-input-parent--state-dark .sv-input{background:#000!important}[vs-theme=dark] .sv-component-dark{--sv-color:0,0,0!important}[vs-theme=dark] .sv-component-dark .sv-avatar{color:#fff!important}[vs-theme=dark] .sv-component-dark.sv-alert{--sv-color:0,0,0!important;background:-color("color",1)!important;color:-color("text",1)!important}button{cursor:pointer;outline:none}[disabled]{opacity:.6}input{outline:none}a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}[class*=vs-]{box-sizing:border-box;font-family:var(--sv-font-family);list-style:none;outline:none}.vs-ripple-content{--sv-color:inherit;border-radius:inherit;height:100px;height:100%;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100px;width:100%;z-index:-1}.vs-ripple-content .vs-ripple{background:radial-gradient(circle,-color(color,.05),-color(color,.6));border-radius:50%;height:0;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;width:0}.vs-ripple-content .vs-ripple--solid{background:-color(color,1);opacity:1}.vs-ripple-content .vs-ripple-invert{background-image:radial-gradient(circle,-color(color,.5),-color(color,0));border-radius:50%;height:0;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;width:0}.vs-ripple-content .vs-ripple-cut-1{background-image:linear-gradient(270deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,0));height:0;opacity:0;position:absolute;transform:translate(-100%,-50%) skew(20deg);transition:all .6s ease;width:0}.vs-ripple-content .vs-ripple-cut-2{background-image:linear-gradient(90deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,0));height:0;opacity:0;position:absolute;transform:translateY(-50%) skew(20deg);transition:all .6s ease;width:0}.vs-remove-transition *,.vs-remove-transition :after,.vs-remove-transition :before{transition:all 0s!important}
+@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);:root{--sv-primary:25,91,255;--sv-warn:255,186,0;--sv-danger:255,71,87;--sv-success:70,201,58;--sv-dark:30,30,30;--sv-light:244,247,248;--sv-color:17,18,20;--sv-facebook:59,89,153;--sv-twitter:29,161,242;--sv-youtube:255,0,0;--sv-pinterest:189,8,28;--sv-linkedin:0,119,181;--sv-snapchat:255,252,0;--sv-whatsapp:37,211,102;--sv-tumblr:54,70,93;--sv-reddit:255,69,0;--sv-spotify:30,215,96;--sv-amazon:255,153,0;--sv-medium:2,184,117;--sv-vimeo:26,183,234;--sv-skype:0,175,240;--sv-dribbble:234,76,137;--sv-slack:74,21,75;--sv-yahoo:67,2,151;--sv-twitch:100,65,164;--sv-discord:114,137,218;--sv-telegram:0,136,204;--sv-google-plus:219,68,55;--sv-messenger:0,132,255;--sv-background:255,255,255;--sv-text:44,62,80;--sv-gray-1:249,252,253;--sv-gray-2:244,247,248;--sv-gray-3:240,243,244;--sv-gray-4:230,233,234}[class*="--default"],[class*="--primary"]{--sv-color:var(--sv-primary)}[class*="--danger"]{--sv-color:var(--sv-danger)}[class*="--success"]{--sv-color:var(--sv-success)}[class*="--dark"]{--sv-color:var(--sv-dark)}[class*="--warn"]{--sv-color:var(--sv-warn)}:root{--sv-shadow-opacity:0.05;--sv-radius:20px;--sv-zindex-1:100000;--sv-zindex-2:99000;--sv-zindex-3:98000;--sv-zindex-4:97000;--sv-background-opacity:0.2;--sv-font-family:"Poppins",sans-serif}[vs-theme=dark]{--sv-background:30,32,35;--sv-text:255,255,255;--sv-gray-1:24,25,28;--sv-gray-2:20,20,23;--sv-gray-3:15,16,19;--sv-gray-4:10,11,14;--sv-shadow-opacity:0.3;--sv-dark:0,0,0;--sv-background-opacity:0.6}[vs-theme=dark] .sv-pagination-content.sv-component-dark .sv-pagination__active{--sv-color:255,255,255;color:rgba(var(--sv-gray-3),1)}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent{color:rgba(var(--sv-text),1)!important}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent:hover:before{background:rgba(var(--sv-color),.2)}[vs-theme=dark] .sv-button.sv-component-dark.sv-button--transparent.sv-button--active:before{background:rgba(var(--sv-color),var(--sv-background-opacity))}[vs-theme=dark] .vs-ripple,[vs-theme=dark] .vs-ripple-content,[vs-theme=dark] .vs-ripple-invert{--sv-color:0,0,0}[vs-theme=dark] .sv-loading{--sv-background:0,0,0}[vs-theme=dark] .sv-input-parent--state-dark{--sv-dark:255,255,255!important}[vs-theme=dark] .sv-input-parent--state-dark .sv-input{background:#000!important}[vs-theme=dark] .sv-component-dark{--sv-color:0,0,0!important}[vs-theme=dark] .sv-component-dark .sv-avatar{color:#fff!important}[vs-theme=dark] .sv-component-dark.sv-alert{--sv-color:0,0,0!important;background:rgba(var(--sv-color),1)!important;color:rgba(var(--sv-text),1)!important}button{cursor:pointer;outline:none}[disabled]{opacity:.6}input{outline:none}a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)}[class*=vs-]{box-sizing:border-box;font-family:var(--sv-font-family);list-style:none;outline:none}.vs-ripple-content{--sv-color:inherit;border-radius:inherit;height:100px;height:100%;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100px;width:100%;z-index:-1}.vs-ripple-content .vs-ripple{background:radial-gradient(circle,rgba(var(--sv-color),.05),rgba(var(--sv-color),.6));border-radius:50%;height:0;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;width:0}.vs-ripple-content .vs-ripple--solid{background:rgba(var(--sv-color),1);opacity:1}.vs-ripple-content .vs-ripple-invert{background-image:radial-gradient(circle,rgba(var(--sv-color),.5),rgba(var(--sv-color),0));border-radius:50%;height:0;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .5s ease;width:0}.vs-ripple-content .vs-ripple-cut-1{background-image:linear-gradient(270deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,0));height:0;opacity:0;position:absolute;transform:translate(-100%,-50%) skew(20deg);transition:all .6s ease;width:0}.vs-ripple-content .vs-ripple-cut-2{background-image:linear-gradient(90deg,hsla(0,0%,100%,.25),hsla(0,0%,100%,0));height:0;opacity:0;position:absolute;transform:translateY(-50%) skew(20deg);transition:all .6s ease;width:0}.vs-remove-transition *,.vs-remove-transition :after,.vs-remove-transition :before{transition:all 0s!important}

package/dist/base.min.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /*!
-  * SaxVue v0.1.0 by MrXploder 🖖 (https://github.com/MrXploder/saxvue)
+  * SaxVue v0.2.0 by MrXploder 🖖 (https://github.com/MrXploder/saxvue)
   * Original proyect by Luis Daniel Rovira (https://lusaxweb.github.io/saxvue/)
   * Released under the MIT License.
   */