@skyloft/windvane 0.1.10 → 0.1.12
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 +120 -0
- package/package.json +2 -1
package/README.md
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
# @skyloft/windvane
|
|
2
|
+
|
|
3
|
+
A UI library based on Tailwind and inspired by Material UI.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
You must have Tailwind installed, preferably `^4.0.0`.
|
|
8
|
+
|
|
9
|
+
Then install Windvane.
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install @skyloft/windvane
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Install plugin in Vue startup:
|
|
16
|
+
|
|
17
|
+
```TypeScript
|
|
18
|
+
// main.ts
|
|
19
|
+
|
|
20
|
+
import './assets/main.css';
|
|
21
|
+
import { createApp } from 'vue';
|
|
22
|
+
import App from './App.vue';
|
|
23
|
+
import router from './router';
|
|
24
|
+
|
|
25
|
+
// Perform Windvane imports
|
|
26
|
+
import '@skyloft/windvane/windvane.css';
|
|
27
|
+
import Windvane from '@skyloft/windvane';
|
|
28
|
+
|
|
29
|
+
const app = createApp(App);
|
|
30
|
+
|
|
31
|
+
app.use(router);
|
|
32
|
+
|
|
33
|
+
// Install as plugin
|
|
34
|
+
app.use(Windvane);
|
|
35
|
+
|
|
36
|
+
app.mount('#app');
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
in your css, set up some theming
|
|
41
|
+
|
|
42
|
+
```CSS
|
|
43
|
+
/* main.css */
|
|
44
|
+
|
|
45
|
+
@import 'tailwindcss';
|
|
46
|
+
|
|
47
|
+
/* Windvane setup */
|
|
48
|
+
@source '../../node_modules/@skyloft/windvane';
|
|
49
|
+
@theme {
|
|
50
|
+
--color-primary: rgb(0, 189, 126);
|
|
51
|
+
--color-card: #1a1a1a;
|
|
52
|
+
--color-bg: black;
|
|
53
|
+
}
|
|
54
|
+
/* Windvane setup end */
|
|
55
|
+
|
|
56
|
+
:root {
|
|
57
|
+
color: white;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
body {
|
|
61
|
+
background-color: black;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
If you want code completion and syntax highlighting in VSCode you should add this to your tsconfig's compilerOptions:
|
|
67
|
+
|
|
68
|
+
```JSON
|
|
69
|
+
// tsconfig.json (or tsconfig.app.json)
|
|
70
|
+
|
|
71
|
+
{
|
|
72
|
+
// <Other settings omitted for brevity>
|
|
73
|
+
"compilerOptions": {
|
|
74
|
+
"types": ["@skyloft/windvane/global"],
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Then you're ready to go!
|
|
80
|
+
|
|
81
|
+
```vue
|
|
82
|
+
<script setup lang="ts">
|
|
83
|
+
const selectedTab = ref('general');
|
|
84
|
+
</script>
|
|
85
|
+
|
|
86
|
+
<template>
|
|
87
|
+
<div class="flex flex-col gap-4">
|
|
88
|
+
<Tabs v-model="selectedTab" active-color="primary">
|
|
89
|
+
<Tab name="general">General</Tab>
|
|
90
|
+
<Tab name="security">Security</Tab>
|
|
91
|
+
<Tab name="privacy">Privacy</Tab>
|
|
92
|
+
<Tab name="utilities">Utilities</Tab>
|
|
93
|
+
</Tabs>
|
|
94
|
+
|
|
95
|
+
<div v-if="selectedTab === 'general'">
|
|
96
|
+
<h1>General</h1>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</template>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Development
|
|
103
|
+
|
|
104
|
+
At the root of the repo run
|
|
105
|
+
|
|
106
|
+
```
|
|
107
|
+
pnpm install
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
open two CLIs and simultaneously run
|
|
111
|
+
|
|
112
|
+
```
|
|
113
|
+
pnpm build:lib:watch
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
and
|
|
117
|
+
|
|
118
|
+
```
|
|
119
|
+
pnpm dev
|
|
120
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyloft/windvane",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"author": "Sverre Skuland <sverre.skuland@gmail.com>",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"keywords": [
|
|
@@ -68,6 +68,7 @@
|
|
|
68
68
|
"unplugin-auto-import": "^19.3.0",
|
|
69
69
|
"vite": "^7.0.0",
|
|
70
70
|
"vite-plugin-dts": "^4.5.4",
|
|
71
|
+
"vite-plugin-static-copy": "^3.1.0",
|
|
71
72
|
"vite-plugin-vue-devtools": "^7.7.7",
|
|
72
73
|
"vitest": "^3.2.4",
|
|
73
74
|
"vue-tsc": "^2.2.10"
|