@oasisomniverse/vue 1.0.0 → 1.1.0
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 +98 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# @oasisomniverse/vue — OASIS Vue UI Component Library
|
|
2
|
+
|
|
3
|
+
The Vue 3 UI component library for the [OASIS Platform](https://oasisomniverse.one). 126 components covering avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more — ready to use in any Vue or Nuxt project.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@oasisomniverse/vue)
|
|
6
|
+
[](https://oportal.oasisomniverse.one)
|
|
7
|
+
|
|
8
|
+
## Install
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @oasisomniverse/vue
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Basic Usage
|
|
15
|
+
|
|
16
|
+
Register globally in `main.js`:
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
import { createApp } from 'vue';
|
|
20
|
+
import OasisVue from '@oasisomniverse/vue';
|
|
21
|
+
import App from './App.vue';
|
|
22
|
+
|
|
23
|
+
const app = createApp(App);
|
|
24
|
+
app.use(OasisVue, { apiUrl: 'https://api.web4.oasisomniverse.one' });
|
|
25
|
+
app.mount('#app');
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Or import components individually:
|
|
29
|
+
|
|
30
|
+
```vue
|
|
31
|
+
<script setup>
|
|
32
|
+
import { Login, AvatarConnect, KarmaToast } from '@oasisomniverse/vue';
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<template>
|
|
36
|
+
<Login @success="handleLogin" />
|
|
37
|
+
<AvatarConnect />
|
|
38
|
+
<KarmaToast message="+10 karma earned" :value="10" />
|
|
39
|
+
</template>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Component List
|
|
43
|
+
|
|
44
|
+
All 126 components are grouped below. Every component is also available in vanilla JS, React, Angular, Svelte and Next.js at full parity — see the [OASIS Web Component Library](https://oportal.oasisomniverse.one) for the full matrix.
|
|
45
|
+
|
|
46
|
+
| Group | Components |
|
|
47
|
+
|---|---|
|
|
48
|
+
| **Auth & Identity** | AcceptInvite, AvatarConnect, ForgotPassword, Login, ResetPassword, SearchAvatar, SearchAvatars, SendInvite, Signup, VerifyEmail |
|
|
49
|
+
| **Avatar** | AvatarProfile, AvatarWallet, EditAvatar, SearchProfiles, ViewAchievements, ViewAvatar, ViewAvatarKarma, ViewLeagues, ViewOrganizations, ViewTournaments |
|
|
50
|
+
| **Data Screen** | ActivityPub, AddData, EOSIO, Ethereum, Holochain, IPFS, LoadData, ManageData, MongoDB, Neo4j, OffChainManagement, SearchData, Solana, Solid, SQLite, ThreeFold |
|
|
51
|
+
| **Eggs** | Eggs, ManageEggs, SearchEggs, ViewEggs |
|
|
52
|
+
| **Game** | Game |
|
|
53
|
+
| **Karma** | KarmaPanel, KarmaToast, SearchKarma, ViewKarma, VoteKarma |
|
|
54
|
+
| **Map** | Add2DObjectToMap, Add3DObjectToMap, AddQuestToMap, DownloadMap, ManageMap, Map, PlotRouteOnMap, SearchMap, ViewGlobal3DMap, ViewHalonsOnMap, ViewOAppOnMap, ViewQuestOnMap |
|
|
55
|
+
| **Messages** | MenuMessage, Message, MessageContacts, Messaging |
|
|
56
|
+
| **Mission** | ManageMission, Mission, SearchMission, ViewMission |
|
|
57
|
+
| **NFT** | ContactPopupNFT, ManageNFT, NFT, PurchaseNFT, PurchaseVirtualLandNFT, SearchNFT, ViewNFT |
|
|
58
|
+
| **OApp** | CreateOApp, DeployOApp, DownloadOApp, EditOApp, InstallOApp, LaunchOApp, ManageOApp, OApp, SearchOApp |
|
|
59
|
+
| **Providers** | CompareProviderSpeeds, CrossChainManagement, ManageAutoFailover, ManageAutoReplication, ManageLoadBalancing, ManageProviders, ProviderDropdown, Providers, SearchProviders, SeedsProvider, ViewProviderStats, ViewProviders |
|
|
60
|
+
| **Quest** | ManageQuest, Quest, SearchQuest, ViewQuest |
|
|
61
|
+
| **Seeds** | DonateSeeds, ManageSeeds, PayWithSeeds, RewardSeeds, SearchSeeds, Seeds, ViewSeeds |
|
|
62
|
+
| **Common UI** | ComingSoon, Confirmation, Contact, HyperDrive, NavBar, ONET, ONODE, OasisModal, Settings, SideNav, StarField, Wallet |
|
|
63
|
+
|
|
64
|
+
## Dark Space Design System
|
|
65
|
+
|
|
66
|
+
The OASIS component library ships with the **Dark Space** design system — a deep-space aesthetic built for the OASIS Omniverse:
|
|
67
|
+
|
|
68
|
+
- **Background**: near-black (#0a0d14) with subtle nebula gradients
|
|
69
|
+
- **Primary accent**: electric cyan (#00c8ff)
|
|
70
|
+
- **Typography**: [Orbitron](https://fonts.google.com/specimen/Orbitron) for headings, [Rajdhani](https://fonts.google.com/specimen/Rajdhani) for body text
|
|
71
|
+
- **Text**: always bright (#e0f0ff / #fff) — never dim or faded
|
|
72
|
+
- **Borders**: translucent cyan (`rgba(0,200,255,0.2)`)
|
|
73
|
+
- **Cards**: glassy dark panels with backdrop-filter blur
|
|
74
|
+
|
|
75
|
+
Override the CSS custom properties to theme components for your own OAPP:
|
|
76
|
+
|
|
77
|
+
```css
|
|
78
|
+
:root {
|
|
79
|
+
--oasis-bg: #0a0d14;
|
|
80
|
+
--oasis-accent: #00c8ff;
|
|
81
|
+
--oasis-text: #e0f0ff;
|
|
82
|
+
--oasis-border: rgba(0, 200, 255, 0.2);
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Live Demo
|
|
87
|
+
|
|
88
|
+
The Vue components are showcased in **[Noah's Ark Animal Rescue Network](https://github.com/NextGenSoftwareUK/NoahsArkAnimalRescueNetwork-Vue)** — a real-world OAPP built on this library.
|
|
89
|
+
|
|
90
|
+
See the full component matrix at **[oportal.oasisomniverse.one](https://oportal.oasisomniverse.one)**.
|
|
91
|
+
|
|
92
|
+
## Links
|
|
93
|
+
|
|
94
|
+
- [GitHub](https://github.com/NextGenSoftwareUK/OASIS-Vue-UI-Component-Library)
|
|
95
|
+
- [npm](https://www.npmjs.com/package/@oasisomniverse/vue)
|
|
96
|
+
- [OASIS API Docs](https://oasis-web4.gitbook.io/oasis-web4-docs/)
|
|
97
|
+
- [Developer Portal](https://oportal.oasisomniverse.one)
|
|
98
|
+
- [OASIS Platform](https://oasisomniverse.one)
|