<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GNexus UI Kit — Vue Adapter Demo</title>
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/css/kit.css">
<style>
body { margin: 0; padding: 2rem; background: var(--surface-page); color: var(--text-light); }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.demo-card { background: var(--surface-panel); border: 2px solid var(--border-accent); padding: 1.5rem; }
.demo-card h3 { margin-top: 0; text-transform: uppercase; font-size: var(--font-size-sm); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; }
</style>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3.4.0/dist/vue.esm-browser.js",
"gnexus-ui-kit/vue": "/vue/index.js"
}
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp, ref } from "vue";
import {
GnButton, GnBadge, GnAlert, GnInput, GnSelect, GnTabs,
GnModal, GnTable, GnCard, GnPageHeader, GnToastProvider, useToast
} from "gnexus-ui-kit/vue";
createApp({
components: { GnButton, GnBadge, GnAlert, GnInput, GnSelect, GnTabs, GnModal, GnTable, GnCard, GnPageHeader, GnToastProvider },
setup() {
const toast = useToast();
const modalOpen = ref(false);
const name = ref("");
const status = ref("active");
const tab = ref("overview");
const statusOptions = [
{ value: "active", label: "Active" },
{ value: "paused", label: "Paused" },
{ value: "archived", label: "Archived" }
];
const tabs = [
{ id: "overview", label: "Overview", icon: "ph-chart-bar" },
{ id: "activity", label: "Activity", icon: "ph-clock" }
];
const tableColumns = [
{ key: "name", label: "Name" },
{ key: "status", label: "Status" }
];
const tableRows = [
{ name: "Project Alpha", status: "Active" },
{ name: "Project Beta", status: "Paused" }
];
function save() {
toast.success({ title: "Saved", text: name.value || "Changes applied" });
modalOpen.value = false;
}
return { modalOpen, name, status, tab, tabs, statusOptions, tableColumns, tableRows, save, toast };
},
template: `
<GnToastProvider>
<div class="container">
<GnPageHeader title="Vue Adapter Demo" subtitle="Official components in action">
<template #actions>
<GnButton variant="accent" icon="ph-plus" @click="modalOpen = true">Create</GnButton>
</template>
</GnPageHeader>
<div class="demo-grid">
<div class="demo-card">
<h3>Buttons</h3>
<div class="demo-actions">
<GnButton variant="primary" icon="ph-house">Primary</GnButton>
<GnButton variant="secondary">Secondary</GnButton>
<GnButton variant="accent" loading>Loading</GnButton>
<GnButton variant="danger" disabled>Disabled</GnButton>
</div>
</div>
<div class="demo-card">
<h3>Badges & Alerts</h3>
<GnBadge variant="success">Online</GnBadge>
<GnBadge variant="warning" outline>Pending</GnBadge>
<GnAlert variant="info">This is an informational alert.</GnAlert>
</div>
<div class="demo-card">
<h3>Form Controls</h3>
<GnInput v-model="name" label="Project name" icon="ph-pencil-simple" />
<GnSelect v-model="status" label="Status" :options="statusOptions" />
</div>
<div class="demo-card">
<h3>Tabs</h3>
<GnTabs v-model="tab" :items="tabs">
<template #overview>Overview panel content</template>
<template #activity>Activity panel content</template>
</GnTabs>
</div>
<div class="demo-card">
<h3>Table</h3>
<GnTable :columns="tableColumns" :rows="tableRows">
<template #cell-status="{ value }">
<GnBadge :variant="value === 'Active' ? 'success' : 'warning'">{{ value }}</GnBadge>
</template>
</GnTable>
</div>
<div class="demo-card">
<h3>Card</h3>
<GnCard title="Example Card">
Card content goes here.
<template #footer>
<GnButton variant="secondary" size="sm">Action</GnButton>
</template>
</GnCard>
</div>
</div>
<GnModal v-model:open="modalOpen" title="Create Project">
<GnInput v-model="name" label="Name" icon="ph-pencil-simple" />
<template #actions>
<GnButton variant="secondary" @click="modalOpen = false">Cancel</GnButton>
<GnButton variant="success" @click="save">Save</GnButton>
</template>
</GnModal>
</div>
</GnToastProvider>
`
}).mount("#app");
</script>
</body>
</html>
