dmonphx
0 Followers · 0 Following
  • Joined on 2026-02-19
Repositories Projects Packages Public Activity Starred Repositories

@phoenix-tekhne/vue-tupos (0.2.0)

Published 2026-05-28 07:22:41 -07:00 by dmonphx

Installation

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/
npm install @phoenix-tekhne/vue-tupos@0.2.0
"@phoenix-tekhne/vue-tupos": "0.2.0"

About this package

@phoenix-tekhne/vue-tupos

Vue 3 UI components for the Phoenix Tekhne Design System, built on vue-dynamis.

Overview

Tupos (τύπος - "type/form" in Greek) provides foundational UI components for building Vue 3 interfaces. All components are built on top of the Phoenix Tekhne Dynamis headless system, providing:

  • Full accessibility (ARIA attributes, keyboard navigation)
  • State management and validation
  • Multi-framework compatibility patterns

Architecture

@phoenix-tekhne/vue-tupos
        │
        │ uses
        ▼
@phoenix-tekhne/vue-dynamis (Vue 3 composables)
        │
        │ built on
        ▼
@phoenix-tekhne/dynamis-core (state machines)

Components

Phase 1 Components

Component Purpose Dynamis Composable Import
Button Primary interaction component useProskrousis @phoenix-tekhne/vue-tupos
Card Content container - @phoenix-tekhne/vue-tupos
Input Form text input useLexisField @phoenix-tekhne/vue-tupos
Table Data table for HR lists - @phoenix-tekhne/vue-tupos
Modal Dialog/overlay useProskalesthai @phoenix-tekhne/vue-tupos
Select Dropdown select useEpilipsis @phoenix-tekhne/vue-tupos
Badge Status indicators - @phoenix-tekhne/vue-tupos

Installation

npm install @phoenix-tekhne/vue-tupos @phoenix-tekhne/vue-dynamis

Usage

Basic Example

<script setup lang="ts">
import { ref } from 'vue';
import { Button, Card, Input, Modal, Badge } from '@phoenix-tekhne/vue-tupos';

const isModalOpen = ref(false);
const email = ref('');
</script>

<template>
  <Card>
    <template #title>
      <h3>User Registration</h3>
    </template>
    
    <Input
      v-model="email"
      label="Email"
      type="email"
      required
      placeholder="Enter your email"
    />
    
    <Button variant="primary" @click="isModalOpen = true">
      Submit
    </Button>
  </Card>
  
  <Modal
    v-model="isModalOpen"
    title="Confirm"
    description="Are you sure you want to proceed?"
  >
    <Button variant="secondary" @click="isModalOpen = false">
      Cancel
    </Button>
    <Button variant="primary" @click="submit">
      Confirm
    </Button>
  </Modal>
</template>

Table Component

<script setup lang="ts">
import { ref } from 'vue';
import { Table } from '@phoenix-tekhne/vue-tupos';
import type { TableColumn } from '@phoenix-tekhne/vue-tupos';

interface Employee {
  id: string;
  name: string;
  department: string;
  status: 'active' | 'inactive';
}

const columns: TableColumn<Employee>[] = [
  { key: 'name', header: 'Name', sortable: true },
  { key: 'department', header: 'Department', sortable: true },
  { 
    key: 'status', 
    header: 'Status',
    slot: 'status-cell'
  },
];

const data = ref<Employee[]>([
  { id: '1', name: 'John Doe', department: 'Engineering', status: 'active' },
  { id: '2', name: 'Jane Smith', department: 'Design', status: 'active' },
]);

const selectedKeys = ref<string[]>([]);
</script>

<template>
  <Table
    :data="data"
    :columns="columns"
    selectable
    v-model:selectedKeys="selectedKeys"
  >
    <template #status-cell="{ row }">
      <Badge :variant="row.status === 'active' ? 'success' : 'neutral'">
        {{ row.status }}
      </Badge>
    </template>
  </Table>
</template>

Select Component

<script setup lang="ts">
import { ref } from 'vue';
import { Select } from '@phoenix-tekhne/vue-tupos';

const selected = ref('');

const options = [
  { id: 'eng', label: 'Engineering' },
  { id: 'design', label: 'Design' },
  { id: 'product', label: 'Product' },
];
</script>

<template>
  <Select
    v-model="selected"
    label="Department"
    :options="options"
    placeholder="Select department"
    required
  />
</template>

For AI Agents: Quick Reference

Component Selection Guide

Use Case Component Pattern
Primary action <Button variant="primary"> Solid fill, accent color
Secondary action <Button variant="secondary"> Outline style
Destructive action <Button variant="danger"> Red color scheme
Loading state <Button loading> Shows spinner
Content grouping <Card> Elevation, padding
Text input <Input> Label, helper, validation
Data display <Table> Sortable, selectable
Modal dialog <Modal> Focus trap, ESC close
Dropdown <Select> Keyboard navigation
Status labels <Badge variant="success"> Soft/solid/outline styles

CSS Class Pattern

All components use the tupos- prefix:

  • .tupos-btn - Button base
  • .tupos-btn--primary - Button variant
  • .tupos-card - Card container
  • .tupos-input - Form input
  • .tupos-table - Data table
  • .tupos-modal - Modal dialog
  • .tupos-select - Select dropdown
  • .tupos-badge - Status badge

Token Dependencies

Components require CSS variables from @phoenix-tekhne/tokens:

@import '@phoenix-tekhne/tokens/dist/variables.css';

Required token categories:

  • --color-* - All color values
  • --spacing-* - 8pt grid spacing
  • --type-* - Typography
  • --radius-* - Border radius
  • --shadow-* - Box shadows
  • --motion-* - Transitions
  • --a11y-* - Focus indicators

Dependencies

  • vue ^3.5.0 (peer)
  • @phoenix-tekhne/vue-dynamis - Headless composables
  • @phoenix-tekhne/dynamis-core - State machines
  • @phoenix-tekhne/tokens - Design tokens (dev)

Related Packages

This package is part of Phoenix Tekhne v2. See also:

  • @phoenix-tekhne/dynamis-core - Headless state machines
  • @phoenix-tekhne/vue-dynamis - Vue 3 composables
  • @phoenix-tekhne/react-tupos - React equivalent components
  • @phoenix-tekhne/tokens - Design tokens

Storybook

Components are documented in the main Storybook at http://192.168.10.138:6006

Contributing

See AGENTS.md in repository root for contribution guidelines.

When adding a new component:

  1. Check if composable exists in vue-dynamis
  2. Create .vue SFC with TypeScript <script setup>
  3. Use Phoenix Tekhne design tokens (CSS variables)
  4. Implement WCAG 2.2 AA accessibility
  5. Add to src/index.ts exports
  6. Document in README.md

Dependencies

Dependencies

ID Version
@phoenix-tekhne/dynamis-core 2.5.1
@phoenix-tekhne/vue-dynamis 2.5.1

Development Dependencies

ID Version
@vitejs/plugin-vue ^5.2.0
typescript ^5.7.0
vite ^6.0.0
vue ^3.5.0
vue-router ^4.4.0
vue-tsc ^2.0.0

Peer Dependencies

ID Version
vue ^3.5.0
vue-router ^4.4.0

Keywords

vue vue3 components ui design-system phoenix-tekhne tupos
Details
npm
2026-05-28 07:22:41 -07:00
3
Phoenix Tekhne Team
MIT
latest
68 KiB
Assets (1)
vue-tupos-0.2.0.tgz 68 KiB
Versions (1) View all
0.2.0 2026-05-28