@gkucmierz/nano-ui 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -0
- package/dist/nano-ui.css +2 -0
- package/dist/nano-ui.js +13 -0
- package/package.json +44 -0
package/README.md
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# Nano UI
|
|
2
|
+
|
|
3
|
+
High-performance, minimal footprint Vue 3 UI library and directives designed for the Nano ecosystem. Built for speed, glassmorphism, and a premium UX.
|
|
4
|
+
|
|
5
|
+
🌐 **[Live Playground & Documentation](https://nano-ui.7u.pl)**
|
|
6
|
+
|
|
7
|
+
## 📦 Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @gkucmierz/nano-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 🛠️ Usage
|
|
14
|
+
|
|
15
|
+
### Global Installation
|
|
16
|
+
|
|
17
|
+
You can register Nano UI globally in your Vue 3 application:
|
|
18
|
+
|
|
19
|
+
```javascript
|
|
20
|
+
import { createApp } from 'vue';
|
|
21
|
+
import App from './App.vue';
|
|
22
|
+
import NanoUI from '@gkucmierz/nano-ui';
|
|
23
|
+
import '@gkucmierz/nano-ui/style.css'; // Import core animations and styles
|
|
24
|
+
|
|
25
|
+
const app = createApp(App);
|
|
26
|
+
|
|
27
|
+
app.use(NanoUI);
|
|
28
|
+
app.mount('#app');
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### 💧 `v-ripple` Directive
|
|
32
|
+
|
|
33
|
+
A highly optimized material-style ripple effect directive.
|
|
34
|
+
|
|
35
|
+
```vue
|
|
36
|
+
<template>
|
|
37
|
+
<!-- Standard usage -->
|
|
38
|
+
<button v-ripple class="btn">Click Me</button>
|
|
39
|
+
|
|
40
|
+
<!-- Custom color ripple -->
|
|
41
|
+
<div v-ripple="'rgba(255, 0, 0, 0.5)'" class="card">
|
|
42
|
+
Interactive Card
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
<style>
|
|
47
|
+
/* You can override the default ripple color globally */
|
|
48
|
+
:root {
|
|
49
|
+
--nano-ripple-color: rgba(255, 255, 255, 0.3);
|
|
50
|
+
}
|
|
51
|
+
</style>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## 📜 License
|
|
55
|
+
|
|
56
|
+
MIT License
|
package/dist/nano-ui.css
ADDED
package/dist/nano-ui.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
//#region src/directives/ripple.js
|
|
2
|
+
var e = { mounted(e, t) {
|
|
3
|
+
e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", function(n) {
|
|
4
|
+
let r = e.getBoundingClientRect(), i = n.clientX - r.left, a = n.clientY - r.top, o = document.createElement("span"), s = Math.max(r.width, r.height), c = s / 2;
|
|
5
|
+
o.style.width = o.style.height = `${s}px`, o.style.left = `${i - c}px`, o.style.top = `${a - c}px`, o.classList.add("ripple"), t.value && typeof t.value == "string" && (o.style.backgroundColor = t.value), e.appendChild(o), setTimeout(() => {
|
|
6
|
+
o.remove();
|
|
7
|
+
}, 600);
|
|
8
|
+
});
|
|
9
|
+
} }, t = { install(t) {
|
|
10
|
+
t.directive("ripple", e);
|
|
11
|
+
} };
|
|
12
|
+
//#endregion
|
|
13
|
+
export { e as Ripple, t as default };
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@gkucmierz/nano-ui",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "High-performance, minimal footprint Vue 3 UI library and directives.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/nano-ui.js",
|
|
7
|
+
"module": "./dist/nano-ui.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/nano-ui.js"
|
|
11
|
+
},
|
|
12
|
+
"./style.css": "./dist/nano-ui.css"
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"dev": "vite",
|
|
19
|
+
"build": "vite build",
|
|
20
|
+
"build:app": "vite build -c vite.config.app.js"
|
|
21
|
+
},
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"vue": "^3.0.0"
|
|
24
|
+
},
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"@vitejs/plugin-vue": "^5.2.0",
|
|
27
|
+
"vite": "^8.0.12",
|
|
28
|
+
"vue": "^3.4.0"
|
|
29
|
+
},
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "https://gitea.7u.pl/gkucmierz/nano-ui.git"
|
|
33
|
+
},
|
|
34
|
+
"homepage": "https://gitea.7u.pl/gkucmierz/nano-ui",
|
|
35
|
+
"keywords": [
|
|
36
|
+
"vue",
|
|
37
|
+
"ui",
|
|
38
|
+
"components",
|
|
39
|
+
"directives",
|
|
40
|
+
"ripple",
|
|
41
|
+
"nano",
|
|
42
|
+
"glassmorphism"
|
|
43
|
+
]
|
|
44
|
+
}
|