@meddleware/dao-ui 0.1.14 → 0.1.15
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/package.json +1 -1
- package/src/components/TabBar.vue +13 -26
- package/src/styles/qt.css +0 -53
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meddleware/dao-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.15",
|
|
4
4
|
"homepage": "https://docs.meddleware.co.uk/blockchain/sui/dao/",
|
|
5
5
|
"description": "Meddleware DAO console — treasury overview, proposals, and governance on Sui.",
|
|
6
6
|
"author": "Meddleware <dev@meddleware.co.uk>",
|
|
@@ -1,32 +1,19 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
//
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
label: string
|
|
7
|
-
}
|
|
2
|
+
// Thin wrapper over AppTabNav variant="raised" from @meddleware/ui.
|
|
3
|
+
// Keeps dao-ui's internal import path stable while using the shared component.
|
|
4
|
+
import { AppTabNav } from '@meddleware/ui'
|
|
5
|
+
export type { AppTab as Tab } from '@meddleware/ui'
|
|
8
6
|
|
|
9
|
-
defineProps<{
|
|
10
|
-
|
|
11
|
-
modelValue: string
|
|
12
|
-
}>()
|
|
13
|
-
|
|
14
|
-
const emit = defineEmits<{
|
|
15
|
-
'update:modelValue': [id: string]
|
|
16
|
-
}>()
|
|
7
|
+
defineProps<{ tabs: { id: string; label: string }[]; modelValue: string }>()
|
|
8
|
+
const emit = defineEmits<{ 'update:modelValue': [id: string] }>()
|
|
17
9
|
</script>
|
|
18
10
|
|
|
19
11
|
<template>
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
@click="emit('update:modelValue', tab.id)"
|
|
28
|
-
>
|
|
29
|
-
{{ tab.label }}
|
|
30
|
-
</button>
|
|
31
|
-
</nav>
|
|
12
|
+
<AppTabNav
|
|
13
|
+
:tabs="tabs"
|
|
14
|
+
:model-value="modelValue"
|
|
15
|
+
variant="raised"
|
|
16
|
+
aria-label="DAO sections"
|
|
17
|
+
@update:model-value="emit('update:modelValue', $event)"
|
|
18
|
+
/>
|
|
32
19
|
</template>
|
package/src/styles/qt.css
CHANGED
|
@@ -56,59 +56,6 @@
|
|
|
56
56
|
margin: 0 4px;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
/* ── Tab bar ─────────────────────────────────────────────────────────────── */
|
|
60
|
-
|
|
61
|
-
.dao-tabs {
|
|
62
|
-
display: flex;
|
|
63
|
-
align-items: flex-end;
|
|
64
|
-
/* 1px bottom border that active tabs "punch through" via margin-bottom: -1px */
|
|
65
|
-
border-bottom: 1px solid var(--border);
|
|
66
|
-
background: var(--surface);
|
|
67
|
-
flex-shrink: 0;
|
|
68
|
-
overflow-x: auto;
|
|
69
|
-
scrollbar-width: none;
|
|
70
|
-
padding: 4px 4px 0;
|
|
71
|
-
gap: 2px;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.dao-tabs::-webkit-scrollbar { display: none; }
|
|
75
|
-
|
|
76
|
-
.dao-tab {
|
|
77
|
-
/* Reset browser UA button defaults */
|
|
78
|
-
appearance: none;
|
|
79
|
-
border-radius: 0;
|
|
80
|
-
/* Classic raised-tab shape: visible top + sides, no bottom border on active */
|
|
81
|
-
padding: 5px 14px 6px;
|
|
82
|
-
font-size: 0.8rem;
|
|
83
|
-
font-weight: 500;
|
|
84
|
-
color: var(--muted);
|
|
85
|
-
background: var(--lift);
|
|
86
|
-
border-top: 2px solid transparent;
|
|
87
|
-
border-left: 1px solid transparent;
|
|
88
|
-
border-right: 1px solid transparent;
|
|
89
|
-
border-bottom: 1px solid var(--border);
|
|
90
|
-
margin-bottom: -1px; /* sit flush on the tab bar bottom border */
|
|
91
|
-
cursor: pointer;
|
|
92
|
-
white-space: nowrap;
|
|
93
|
-
transition: color 0.1s, background 0.1s, border-color 0.1s;
|
|
94
|
-
letter-spacing: 0.01em;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.dao-tab:hover:not(.dao-tab--active) {
|
|
98
|
-
color: var(--text);
|
|
99
|
-
background: var(--surface);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.dao-tab--active {
|
|
103
|
-
color: var(--text);
|
|
104
|
-
background: var(--bg); /* same as .dao-content — visually "opens" into content */
|
|
105
|
-
border-top-color: var(--accent);
|
|
106
|
-
border-left-color: var(--border);
|
|
107
|
-
border-right-color: var(--border);
|
|
108
|
-
border-bottom-color: var(--bg); /* erase the bottom border, merging with content */
|
|
109
|
-
font-weight: 600;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
59
|
/* ── Tab content area ────────────────────────────────────────────────────── */
|
|
113
60
|
|
|
114
61
|
.dao-content {
|