@meddleware/dao-ui 0.1.18 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/dao-ui",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "homepage": "https://docs.meddleware.co.uk/blockchain/sui/dao/",
   "description": "Meddleware DAO console — treasury overview, proposals, and governance on Sui.",
   "author": "Meddleware <dev@meddleware.co.uk>",
@@ -23,7 +23,11 @@
     "preview": "vite preview",
     "type-check": "vue-tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "lint:css": "stylelint \"src/**/*.{css,vue}\"",
+    "lint:js": "eslint .",
+    "lint": "npm run lint:css && npm run lint:js && npm run lint:html",
+    "lint:html": "html-validate \"src/**/*.vue\""
   },
   "exports": {
     ".": {
@@ -40,23 +44,41 @@
     "access": "public"
   },
   "dependencies": {
-    "@meddleware/design-tokens": "^0.1.6",
-    "@meddleware/ui": "^0.1.26",
-    "@meddleware/wallet-adapter": "^0.0.8",
+    "@meddleware/design-tokens": "^0.1.7",
+    "@meddleware/ui": "^0.1.28",
+    "@meddleware/wallet-adapter": "^0.0.9",
     "@mysten/sui": "^2.31.0",
     "vue": "^3.5.43"
   },
   "devDependencies": {
     "@types/node": "~24.12.2",
     "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/test-utils": "^2.5.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^10.11.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "eslint-plugin-vuejs-accessibility": "^2.6.0",
+    "html-validate": "^11.16.0",
+    "html-validate-vue": "^9.3.1",
+    "jiti": "^2.7.0",
     "jsdom": "^29.1.1",
+    "postcss": "^8.4.49",
+    "postcss-html": "^2.0.0",
+    "stylelint": "^17.15.0",
+    "stylelint-config-standard": "^40.0.0",
     "typescript": "~6.0.0",
     "vite": "^8.3.0",
     "vitest": "~5.0.1",
+    "vue-eslint-parser": "^10.4.1",
     "vue-tsc": "~3.3.11"
   },
   "engines": {
     "node": "^22.18.0 || >=24.12.0"
-  }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

package/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // Standalone shell for the DAO SPA. The core UI lives in DaoView.vue (also exported
 // for inline embedding in the dashboard).
-import { AppHeader, AppFooter, ColorModeControl, useColorMode } from '@meddleware/ui'
+import { AppHeader, AppFooter, ColorModeControl, CopyrightLine, useColorMode } from '@meddleware/ui'
 import { NETWORK } from './config.js'
 import DaoView from './DaoView.vue'
 
@@ -22,9 +22,13 @@ const DEV_URL  = import.meta.env.VITE_DEV_URL  || 'https://dev.meddleware.co.uk/
       </template>
     </AppHeader>
 
-    <DaoView style="flex: 1; min-height: 0" />
+    <DaoView />
 
-    <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL" />
+    <AppFooter :docs-url="DOCS_URL" :dev-url="DEV_URL">
+      <template #start>
+        <CopyrightLine symbol-variant="kopimi" organisation-name="Meddleware" rights-statement="jam" />
+      </template>
+    </AppFooter>
   </div>
 </template>
 

package/src/DaoView.vue

@@ -7,8 +7,7 @@
 // DaoView is consumed as a library by the dashboard or any other host.
 import './styles/qt.css'
 import { ref, computed } from 'vue'
-import TabBar from './components/TabBar.vue'
-import StatusBar from './components/StatusBar.vue'
+import { AppTabNav, UiStatusBar, UiTabPanel, UiToolbar, type AppTab } from '@meddleware/ui'
 import OverviewTab from './tabs/OverviewTab.vue'
 import TreasuryTab from './tabs/TreasuryTab.vue'
 import ProposalsTab from './tabs/ProposalsTab.vue'
@@ -16,10 +15,9 @@ import GovernanceTab from './tabs/GovernanceTab.vue'
 import HistoryTab from './tabs/HistoryTab.vue'
 import { useDaoEvents } from './composables/useDaoEvents.js'
 import { useEpoch } from './composables/useEpoch.js'
+import { NETWORK } from './config.js'
 
-import type { Tab } from './components/TabBar.vue'
-
-const TABS: Tab[] = [
+const TABS: AppTab[] = [
   { id: 'overview',    label: 'Overview' },
   { id: 'treasury',    label: 'Treasury' },
   { id: 'proposals',   label: 'Proposals' },
@@ -45,20 +43,14 @@ const { epoch } = useEpoch()
 
 <template>
   <div class="dao-view">
-    <div class="dao-toolbar">
-      <button class="dao-toolbar__btn" @click="activeTab = 'overview'">🏛 Meddleware DAO</button>
-    </div>
+    <UiToolbar :actions="[{ id: 'home', label: '🏛 Meddleware DAO' }]" @action="activeTab = 'overview'" />
 
-    <TabBar :tabs="TABS" v-model="activeTab" />
+    <AppTabNav v-model="activeTab" :tabs="TABS" id-prefix="dao" variant="raised" aria-label="DAO sections" />
 
-    <div class="dao-content">
+    <UiTabPanel id-prefix="dao" :tab="activeTab" class="dao-content">
       <component :is="activeComponent" />
-    </div>
+    </UiTabPanel>
 
-    <StatusBar
-      :epoch="epoch"
-      :last-refresh="lastRefresh"
-      :error="!!eventsError"
-    />
+    <UiStatusBar :network="NETWORK" :healthy="!eventsError" :epoch="epoch" :last-refresh="lastRefresh" />
   </div>
 </template>

package/src/components/ProposalRow.vue

@@ -2,6 +2,7 @@
 // Renders one fundraising/governance proposal: status badge, progress toward target,
 // and epochs-left. The Contribute button is disabled until the vault_dao module ships.
 import { computed } from 'vue'
+import { UiPanel, UiBadge, UiToolbarButton } from '@meddleware/ui'
 import type { Proposal } from '../composables/useProposals.js'
 
 const props = defineProps<{
@@ -19,10 +20,10 @@ const epochsLeft = computed(() => {
   return props.proposal.endEpoch - props.currentEpoch
 })
 
-const statusBadge = computed(() => {
-  if (props.proposal.status === 'active') return 'dao-badge--active'
-  if (props.proposal.status === 'pending') return 'dao-badge--pending'
-  return 'dao-badge--closed'
+const badgeVariant = computed<'active' | 'pending' | 'closed'>(() => {
+  if (props.proposal.status === 'active') return 'active'
+  if (props.proposal.status === 'pending') return 'pending'
+  return 'closed'
 })
 
 function formatSui(mist: bigint): string {
@@ -32,39 +33,65 @@ function formatSui(mist: bigint): string {
 </script>
 
 <template>
-  <div class="dao-panel" style="margin-bottom: 8px">
-    <div class="dao-panel__body">
-      <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px">
-        <div>
-          <span :class="['dao-badge', statusBadge]" style="margin-right: 6px">{{ proposal.status }}</span>
-          <strong style="font-size: 0.85rem">{{ proposal.title }}</strong>
-        </div>
-        <span class="dao-muted" style="white-space: nowrap; font-family: var(--font-mono); font-size: 0.75rem">
-          <template v-if="epochsLeft !== null && epochsLeft > 0">{{ epochsLeft }} epochs left</template>
-          <template v-else-if="epochsLeft !== null && epochsLeft <= 0">Expired</template>
-        </span>
-      </div>
+  <UiPanel class="proposal">
+    <header class="proposal__head">
+      <UiBadge :variant="badgeVariant">{{ proposal.status }}</UiBadge>
+      <h3 class="proposal__title">{{ proposal.title }}</h3>
+      <small class="proposal__epochs">
+        <template v-if="epochsLeft !== null && epochsLeft > 0">{{ epochsLeft }} epochs left</template>
+        <template v-else-if="epochsLeft !== null && epochsLeft <= 0">Expired</template>
+      </small>
+    </header>
 
-      <p class="dao-muted" style="margin: 0 0 8px; font-size: 0.78rem">{{ proposal.description }}</p>
+    <p class="dao-muted proposal__desc">{{ proposal.description }}</p>
 
-      <div style="margin-bottom: 4px">
-        <div class="dao-progress">
-          <div class="dao-progress__fill" :style="{ width: `${pct}%` }" />
-        </div>
-        <div style="display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); font-family: var(--font-mono); margin-top: 2px">
-          <span>{{ formatSui(proposal.contributedMist) }} SUI raised</span>
-          <span>{{ pct }}% of {{ formatSui(proposal.targetMist) }} SUI target</span>
-        </div>
-      </div>
+    <progress class="dao-progress" :value="pct" max="100" aria-label="Funding progress">{{ pct }}%</progress>
+    <p class="proposal__totals">
+      <span>{{ formatSui(proposal.contributedMist) }} SUI raised</span>
+      <span>{{ pct }}% of {{ formatSui(proposal.targetMist) }} SUI target</span>
+    </p>
 
-      <button
-        class="dao-toolbar__btn"
-        disabled
-        title="Vault DAO governance module launching soon"
-        style="margin-top: 6px; opacity: 0.5; cursor: not-allowed"
-      >
-        Contribute
-      </button>
-    </div>
-  </div>
+    <UiToolbarButton disabled title="Vault DAO governance module launching soon" class="proposal__contribute">
+      Contribute
+    </UiToolbarButton>
+  </UiPanel>
 </template>
+
+<style scoped>
+.proposal {
+  margin-bottom: 8px;
+}
+.proposal__head {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.proposal__title {
+  margin: 0;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+.proposal__epochs {
+  margin-inline-start: auto;
+  padding-inline-start: 8px;
+  white-space: nowrap;
+  font-family: var(--mw-font-mono);
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+.proposal__desc {
+  margin: 0 0 8px;
+}
+.proposal__totals {
+  display: flex;
+  justify-content: space-between;
+  margin: 2px 0 4px;
+  font-size: 0.72rem;
+  color: var(--muted);
+  font-family: var(--mw-font-mono);
+}
+.proposal__contribute {
+  margin-top: 6px;
+}
+</style>

package/src/composables/useDaoEvents.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
 import { getSuiClient } from '../wallet.js'
 import { PACKAGE_ID } from '../config.js'
 
@@ -68,7 +68,8 @@ export function useDaoEvents(limit = 20) {
     }
   }
 
-  onMounted(load)
+  // Auto-load on mount, but only when used inside a component (skips in unit tests).
+  if (getCurrentInstance()) onMounted(load)
 
   return { events, loading, error, lastRefresh, reload: load }
 }

package/src/composables/useEpoch.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
 import { getSuiClient } from '../wallet.js'
 
 export function useEpoch() {
@@ -14,7 +14,8 @@ export function useEpoch() {
     }
   }
 
-  onMounted(load)
+  // Auto-load on mount, but only when used inside a component (skips in unit tests).
+  if (getCurrentInstance()) onMounted(load)
 
   return { epoch, reload: load }
 }

package/src/composables/useGates.ts

@@ -1,4 +1,4 @@
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
 import { getSuiClient } from '../wallet.js'
 import { PACKAGE_ID, CONFIG_ID } from '../config.js'
 
@@ -42,7 +42,7 @@ export function useGates() {
 
       // Fetch each Gate shared object referenced by the AdminCap's gate_id.
       const gateList = await Promise.all(
-        (objects ?? []).map(async (o: any): Promise<Gate | null> => {
+        (objects ?? []).map(async (o: { json?: { gate_id?: unknown } | null; object?: { json?: { gate_id?: unknown } | null } | null }): Promise<Gate | null> => {
           const capFields = o?.json ?? o?.object?.json
           const gateId = String(capFields?.gate_id ?? '')
           if (!gateId || gateId === 'undefined') return null
@@ -70,7 +70,8 @@ export function useGates() {
     }
   }
 
-  onMounted(load)
+  // Auto-load on mount, but only when used inside a component (skips in unit tests).
+  if (getCurrentInstance()) onMounted(load)
 
   return { gates, loading, error, reload: load }
 }

package/src/composables/usePlatformConfig.ts

@@ -1,7 +1,7 @@
 // Reads the PlatformConfig shared object once on mount and exposes the treasury
 // address + commission rate (bps). Source of truth for the commission model and for
 // whose AdminCaps the gate discovery (useGates) looks up.
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, getCurrentInstance } from 'vue'
 import { getSuiClient } from '../wallet.js'
 import { CONFIG_ID } from '../config.js'
 
@@ -35,7 +35,8 @@ export function usePlatformConfig() {
     }
   }
 
-  onMounted(load)
+  // Auto-load on mount, but only when used inside a component (skips in unit tests).
+  if (getCurrentInstance()) onMounted(load)
 
   return { config, loading, error, reload: load }
 }