@rocketui/vue 0.3.0-alpha.2 → 0.3.1-beta
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 +1 -47
- package/dist/rocket-ui-vue.d.ts +339 -142
- package/dist/rocket-ui-vue.js +1815 -1610
- package/dist/rocket-ui-vue.umd.cjs +1 -10
- package/dist/style.css +1 -1
- package/package.json +2 -9
package/README.md
CHANGED
|
@@ -22,12 +22,7 @@ import App from './App.vue'
|
|
|
22
22
|
// Import the Styles
|
|
23
23
|
import '@rocketui/vue/dist/style.css'
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
import { vTooltip } from '@rocketui/vue/directives'
|
|
27
|
-
|
|
28
|
-
const app = createApp(App)
|
|
29
|
-
app.directive('tooltip', vTooltip)
|
|
30
|
-
app.mount('#app')
|
|
25
|
+
createApp(App).mount('#app')
|
|
31
26
|
```
|
|
32
27
|
|
|
33
28
|
Then you can use the components in your `App.vue` file:
|
|
@@ -39,50 +34,9 @@ import { RButton } from '@rocketui/vue'
|
|
|
39
34
|
|
|
40
35
|
<template>
|
|
41
36
|
<RButton>Rocket UI Button</RButton>
|
|
42
|
-
|
|
43
|
-
<!-- Or use directives (if registered globally) -->
|
|
44
|
-
<button v-tooltip="'Simple tooltip'">Hover me</button>
|
|
45
|
-
|
|
46
|
-
<!-- With options -->
|
|
47
|
-
<button v-tooltip="{
|
|
48
|
-
text: 'Custom tooltip',
|
|
49
|
-
placement: 'right',
|
|
50
|
-
trigger: 'click'
|
|
51
|
-
}">Click me</button>
|
|
52
37
|
</template>
|
|
53
38
|
```
|
|
54
39
|
|
|
55
|
-
## Directives
|
|
56
|
-
|
|
57
|
-
### Tooltip Directive
|
|
58
|
-
|
|
59
|
-
The tooltip directive provides a quick way to add tooltips to any element:
|
|
60
|
-
|
|
61
|
-
```vue
|
|
62
|
-
<!-- Simple usage -->
|
|
63
|
-
<button v-tooltip="'Tooltip text'">Hover me</button>
|
|
64
|
-
|
|
65
|
-
<!-- With options -->
|
|
66
|
-
<button v-tooltip="{
|
|
67
|
-
text: 'Tooltip with options',
|
|
68
|
-
placement: 'bottom',
|
|
69
|
-
trigger: 'click',
|
|
70
|
-
outsideClick: true,
|
|
71
|
-
dark: false
|
|
72
|
-
}">Click me</button>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
#### Available Options
|
|
76
|
-
|
|
77
|
-
- **text**: Tooltip content (required)
|
|
78
|
-
- **placement**: `'top'` | `'bottom'` | `'left'` | `'right'` (default: `'top'`)
|
|
79
|
-
- **trigger**: `'hover'` | `'click'` (default: `'hover'`)
|
|
80
|
-
- **delay**: Show delay in milliseconds (default: `0`)
|
|
81
|
-
- **offset**: Distance from trigger element (default: `8`)
|
|
82
|
-
- **dark**: Dark theme (default: `true`)
|
|
83
|
-
- **disabled**: Disable tooltip (default: `false`)
|
|
84
|
-
- **outsideClick**: Close on outside click for click trigger (default: `false`)
|
|
85
|
-
|
|
86
40
|
## Development
|
|
87
41
|
|
|
88
42
|
### Recommended IDE Setup
|