@skyloft/windvane 0.1.5 → 0.1.7

package/README.md

@@ -1,3 +1,87 @@
 # @skyloft/windvane
 
 A UI library based on Tailwind and inspired by Material UI.
+
+## Installation
+
+You must have Tailwind installed, preferably `^4.0.0`.
+
+Then install Windvane.
+
+```
+npm install @skyloft/windvane
+```
+
+Install plugin in Vue startup:
+
+```TypeScript
+// main.ts
+
+import './assets/main.css';
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+// Perform Windvane imports
+import '@skyloft/windvane/windvane.css';
+import Windvane from '@skyloft/windvane';
+
+const app = createApp(App);
+
+app.use(router);
+
+// Install as plugin
+app.use(Windvane);
+
+app.mount('#app');
+
+```
+
+in your css, set up some theming
+
+```CSS
+/* main.css */
+
+@import 'tailwindcss';
+
+/* Windvane setup  */
+@source '../../node_modules/@skyloft/windvane';
+@theme {
+    --color-primary: rgb(0, 189, 126);
+    --color-card: #1a1a1a;
+    --color-bg: black;
+}
+/* Windvane setup end */
+
+:root {
+    color: white;
+}
+
+body {
+    background-color: black;
+}
+
+```
+
+Then you're ready to go!
+
+```vue
+<script setup lang="ts">
+const selectedTab = ref('general');
+</script>
+
+<template>
+    <div class="flex flex-col gap-4">
+        <Tabs v-model="selectedTab" active-color="primary">
+            <Tab name="general">General</Tab>
+            <Tab name="security">Security</Tab>
+            <Tab name="privacy">Privacy</Tab>
+            <Tab name="utilities">Utilities</Tab>
+        </Tabs>
+
+        <div v-if="selectedTab === 'general'">
+            <h1>General</h1>
+        </div>
+    </div>
+</template>
+```

package/dist/directives/ripple.d.ts

@@ -0,0 +1,6 @@
+export declare const rippleDirective: {
+    mounted: (parent: HTMLElement, directiveData: {
+        value: boolean;
+    }) => void;
+    getSSRProps: () => {};
+};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { default as TestComponent } from './components/TestComponent.vue';
+import { App } from 'vue';
 import { default as Badge } from './components/Badge.vue';
 import { default as Button } from './components/Button.vue';
 import { default as ButtonToggle } from './components/ButtonToggle.vue';
@@ -27,4 +27,8 @@ import { default as Tabs } from './components/Tabs.vue';
 import { default as Tooltip } from './components/Tooltip.vue';
 import { default as TouchNumberInput } from './components/TouchNumberInput.vue';
 import { default as TransitionGroupFadeSlide } from './components/TransitionGroupFadeSlide.vue';
-export { TestComponent, Badge, Button, ButtonToggle, Card, Checkbox, Date, Dialog, EllipsisText, ExpansionItem, Fab, FabAction, Header, Icon, Input, MathOperationButtons, NavMenu, PullToRefresh, ScrollArea, Select, SlideItem, Spinner, Stepper, StepperStep, Tab, Tabs, Tooltip, TouchNumberInput, TransitionGroupFadeSlide, };
+declare const Windvane: {
+    install: (app: App) => void;
+};
+export default Windvane;
+export { Badge, Button, ButtonToggle, Card, Checkbox, Date, Dialog, EllipsisText, ExpansionItem, Fab, FabAction, Header, Icon, Input, MathOperationButtons, NavMenu, PullToRefresh, ScrollArea, Select, SlideItem, Spinner, Stepper, StepperStep, Tab, Tabs, Tooltip, TouchNumberInput, TransitionGroupFadeSlide, };