dmonphx

Joined on 2026-02-19

@phoenix-tekhne/vue-dynamis (2.5.1)

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

Set up this registry in your project .npmrc file:

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/

To install the package using npm, run the following command:

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

or add it to the package.json file:

"@phoenix-tekhne/vue-dynamis": "2.5.1"

For more information on the npm registry, see the documentation.

@phoenix-tekhne/vue-dynamis

Vue 3 composables for headless UI interactions. Part of the Phoenix Tekhne Design System.

Installation

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

Peer Dependencies:

vue@^3.3.0

Quick Start

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

const { state, props } = useProskrousis({ isDisabled: false });
</script>

<template>
  <button v-bind="props" :data-pressed="state.isPressed">
    Press me
  </button>
</template>

Composables

Composable	Greek	Purpose
`useProskrousis`	προσκρούσις (pressing against)	Button press interactions
`useKrasis`	κράσις (mixing)	Toggle/checkbox state (binary & tri-state)
`useLexisField`	λέξις (word)	Text field validation and state
`useEpilipsis`	ἔλλειψις (choice)	Select/dropdown interactions
`useKerygma`	κήρυγμα (proclamation)	Toast notifications

API Reference

useProskrousis (Press)

Handles button press interactions with pointer and keyboard support.

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

const onPress = () => console.log('Pressed!');
const onRelease = () => console.log('Released!');

const { state, props } = useProskrousis({
  isDisabled: false,
  onPress,
  onRelease,
});
</script>

<template>
  <button v-bind="props" :data-pressed="state.isPressed">
    Press me
  </button>
</template>

<style scoped>
button[data-pressed="true"] {
  transform: scale(0.98);
  background-color: var(--phx-color-primary-active);
}
</style>

Options:

Option	Type	Default	Description
`isDisabled`	`boolean`	`false`	Disables press handling
`onPress`	`() => void`	-	Callback when press activates
`onRelease`	`() => void`	-	Callback when press releases

Returns:

Property	Type	Description
`state`	`{ isPressed, isActive }`	Current press state
`props`	`object`	ARIA attributes to spread on element

useKrasis (Toggle/Checkbox)

Handles toggle and checkbox state, supporting both binary and tri-state (indeterminate).

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

const { state, props, toggle, setTrue, setFalse } = useKrasis({
  initialValue: false,
  allowIndeterminate: true,
  onChange: (value) => console.log('Changed:', value),
});
</script>

<template>
  <div
    role="checkbox"
    v-bind="props"
    :aria-checked="state.value === 'indeterminate' ? 'mixed' : state.value"
    :data-checked="state.value === true"
    :data-indeterminate="state.value === 'indeterminate'"
    @click="toggle"
    @keydown.enter.prevent="toggle"
    @keydown.space.prevent="toggle"
    tabindex="0"
  >
    <span class="checkmark">{{ state.value === true ? '✓' : state.value === 'indeterminate' ? '−' : '' }}</span>
  </div>
</template>

Options:

Option	Type	Default	Description
`isDisabled`	`boolean`	`false`	Disables toggle
`initialValue`	`boolean \| 'indeterminate'`	`false`	Initial checked state
`allowIndeterminate`	`boolean`	`false`	Enable tri-state mode
`onChange`	`(value) => void`	-	Callback on value change

useLexisField (Text Field)

Handles text field state, validation, and formatting.

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

const { state, props, handleInput, handleFocus, handleBlur, validate, reset } = useLexisField({
  isRequired: true,
  minLength: 3,
  maxLength: 100,
  pattern: '[a-zA-Z]+',
  validate: (value) => value.length >= 3,
});
</script>

<template>
  <div>
    <input
      v-bind="props"
      @input="handleInput($event.target.value)"
      @focus="handleFocus"
      @blur="handleBlur"
      type="text"
    />
    <span v-if="!state.isValid && state.isVisited" class="error">
      Please enter at least 3 characters
    </span>
  </div>
</template>

useEpilipsis (Select/Dropdown)

Handles select and dropdown interactions with single and multi-select support.

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

const items = [
  { id: '1', label: 'Option 1' },
  { id: '2', label: 'Option 2' },
  { id: '3', label: 'Option 3' },
];

const { 
  state, 
  triggerProps, 
  listboxProps, 
  getItemProps,
  selectItem,
  open,
  close,
} = useEpilipsis({
  items,
  isMulti: false,
  closeOnSelect: true,
  onChange: (values) => console.log('Selected:', values),
});
</script>

useKerygma (Toast Notifications)

Manages toast notification lifecycle including queuing and dismissal.

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

const { toasts, show, dismiss, position } = useKerygma({
  position: 'bottom-right',
  maxVisible: 5,
  duration: 5000,
});

// Show toasts
const toastId = show({
  message: 'Operation successful!',
  variant: 'success',
  title: 'Success',
  dismissible: true,
});

// Convenience methods
show.success('Success message');
show.error('Error message');
show.warning('Warning message');
show.info('Info message');
</script>

<template>
  <div class="toast-container" :data-position="position">
    <div 
      v-for="toast in toasts" 
      :key="toast.id"
      :data-variant="toast.variant"
    >
      <span v-if="toast.title">{{ toast.title }}</span>
      <span>{{ toast.message }}</span>
      <button v-if="toast.dismissible" @click="dismiss(toast.id)">×</button>
    </div>
  </div>
</template>

Greek Terminology

The Phoenix Tekhne Design System uses Greek terms to describe components and behaviors:

Greek	Transliteration	English	Used For
δύναμις	dynamis	Power, Ability	Core state machine package
προσκρούσις	proskrousis	Pressing against, striking	Button press interactions
κράσις	krasis	Mixing	Toggle/checkbox state
λέξις	lexis	Word	Text field validation
ἔλλειψις	epilipsis	Choice, selection	Select/dropdown
κήρυγμα	kerygma	Proclamation	Toast notifications

Framework Comparison

React Hook	Vue Composable	Purpose
`useProskrousis`	`useProskrousis`	Press interactions
`useKrasis`	`useKrasis`	Toggle/checkbox
`useLexisField`	`useLexisField`	Text field
`useEpilipsis`	`useEpilipsis`	Select/dropdown
`useKerygma`	`useKerygma`	Toast notifications

Related Packages

@phoenix-tekhne/dynamis-core - Pure TypeScript state machines
@phoenix-tekhne/react-dynamis - React hooks
@phoenix-tekhne/svelte-dynamis - Svelte stores
@phoenix-tekhne/angular-dynamis - Angular services
@phoenix-tekhne/web-dynamis - Web Components

License

MIT

Dependencies

ID	Version
@phoenix-tekhne/dynamis-core	2.5.1

Development Dependencies

ID	Version
@vitejs/plugin-vue	^5.2.0
@vue/test-utils	^2.4.0
typescript	^5.7.0
vite	^6.0.0
vitest	^2.0.0
vue	^3.5.0

Peer Dependencies

ID	Version
vue	^3.5.0

vue vue3 headless ui components composition-api composables design-system phoenix-tekhne

Details

npm

2026-05-28 07:22:38 -07:00

Phoenix Tekhne Team

MIT

latest

31 KiB

Assets (1)

vue-dynamis-2.5.1.tgz 31 KiB

Versions (1) View all

2.5.1

2026-05-28

@phoenix-tekhne/vue-dynamis (2.5.1)

Installation

About this package

@phoenix-tekhne/vue-dynamis

Installation

Quick Start

Composables

API Reference

useProskrousis (Press)

useKrasis (Toggle/Checkbox)

useLexisField (Text Field)

useEpilipsis (Select/Dropdown)

useKerygma (Toast Notifications)

Greek Terminology

Framework Comparison

Related Packages

License

Dependencies

Keywords