@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/kanban/KanbanBoard.vue

@@ -0,0 +1,75 @@
+<template>
+	<div ref="elementRef" :class="cn('bg-secondary relative flex h-150 w-full flex-col divide-y overflow-hidden rounded-sm border text-xs', props.class)">
+		<div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-1 bg-gray-50/80 transition-opacity duration-200" :class="isOvered ? 'opacity-100' : 'opacity-0'" />
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { makeDroppable } from '@vue-dnd-kit/core';
+import { cn } from '@/lib/utils';
+import type { IDragEvent } from '@vue-dnd-kit/core';
+
+export interface KanbanBoardProps {
+	id: string;
+	class?: string;
+}
+
+const props = defineProps<KanbanBoardProps>();
+
+const { data, onDataChange, onHover, onLeave, onDrop } = useKanbanContext();
+
+const elementRef = ref<HTMLElement | null>(null);
+
+const { isDragOver } = makeDroppable(elementRef, {
+	groups: ['kanban-items'],
+	data: () => ({
+		columnId: props.id,
+	}),
+	events: {
+		onEnter: (event: IDragEvent) => {
+			onHover(event, event);
+			console.log('Hovering over column:', props.id);
+		},
+		onLeave: (event: IDragEvent) => {
+			onLeave(event, event);
+			console.log('Left column:', props.id);
+		},
+		onDrop: (event: IDragEvent) => {
+			onDrop(event, event);
+			console.log('Dropped on column:', props.id, 'event:', event);
+
+			// Handle the drop here
+			const items = event.draggedItems ?? [];
+			if (!items.length) {
+				return;
+			}
+
+			const draggedItem = items[0];
+			// Get card ID from the custom data
+			const draggedCardId = (draggedItem?.data as any)?.cardId;
+			if (!draggedCardId || typeof draggedCardId !== 'string') {
+				return;
+			}
+
+			// Find the card in our data
+			const newData = [...data.value];
+			const itemIndex = newData.findIndex((item) => item.id === draggedCardId);
+
+			const targetItem = newData[itemIndex];
+			if (!targetItem || targetItem.column === props.id) {
+				return;
+			}
+
+			// Update the column for the dragged item
+			newData[itemIndex] = {
+				...targetItem,
+				column: props.id,
+			};
+			onDataChange(newData);
+		},
+	},
+});
+
+const isOvered = computed(() => !!isDragOver.value);
+</script>

package/src/runtime/components/ui/kanban/KanbanCard.vue

@@ -0,0 +1,59 @@
+<template>
+	<div ref="elementRef">
+		<div :class="cn('bg-card gap-4 rounded-sm border p-3 transition-opacity', isDragging && 'pointer-events-none cursor-grabbing opacity-30', props.disabled ? 'cursor-default' : 'cursor-grab', props.class)">
+			<slot>
+				<p class="m-0 text-sm font-medium">{{ props.name }}</p>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" generic="T extends KanbanItemProps">
+import { makeDraggable } from '@vue-dnd-kit/core';
+import { cn } from '@/lib/utils';
+import type { IDragEvent } from '@vue-dnd-kit/core';
+
+export interface KanbanCardProps<T extends KanbanItemProps = KanbanItemProps> {
+	id: string;
+	name: string;
+	column: string;
+	assignee?: string;
+	index: number;
+	class?: string;
+	disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<KanbanCardProps<T>>(), {
+	disabled: false,
+});
+
+const { data } = useKanbanContext<T>();
+
+// Get the source array for this card (filtered by column)
+const sourceArray = computed(() => data.value.filter((item) => item.column === props.column));
+
+const elementRef = ref<HTMLElement | null>(null);
+
+const { isDragging } = makeDraggable(
+	elementRef,
+	{
+		groups: ['kanban-items'],
+		disabled: props.disabled,
+		data: () => ({
+			source: sourceArray.value,
+			index: props.index,
+			column: props.column,
+			cardId: props.id,
+		}),
+		events: {
+			onSelfDragStart: (event: IDragEvent) => {
+				console.log('Drag started:', props.id, 'from column:', props.column);
+			},
+			onSelfDragEnd: (event: IDragEvent) => {
+				console.log('Drag ended:', props.id);
+			},
+		},
+	},
+	() => [props.index, [data.value.find((item) => item.id === props.id)]]
+);
+</script>

package/src/runtime/components/ui/kanban/KanbanCards.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="flex-1 overflow-hidden">
+		<div :class="cn('flex h-full flex-col gap-2 overflow-y-auto p-2', props.class)" v-bind="$attrs">
+			<slot v-for="(item, index) in filteredData" :key="item.id" :item="item" :index="index" />
+			<slot name="footer" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" generic="T extends KanbanItemProps">
+import { cn } from '@/lib/utils';
+
+export interface KanbanCardsProps {
+	id: string;
+	class?: string;
+}
+
+const props = defineProps<KanbanCardsProps>();
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const { data } = useKanbanContext<any>();
+
+const filteredData = computed(() => data.value.filter((item) => item.column === props.id));
+</script>

package/src/runtime/components/ui/kanban/KanbanHeader.vue

@@ -0,0 +1,15 @@
+<template>
+	<div :class="cn('m-0 p-2 text-sm font-semibold', props.class)">
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '~/lib/utils';
+
+export interface KanbanHeaderProps {
+	class?: string;
+}
+
+const props = withDefaults(defineProps<KanbanHeaderProps>(), {});
+</script>

package/src/runtime/components/ui/kanban/README.md

@@ -0,0 +1,184 @@
+# Kanban Component
+
+Agile workflow visualization that actually works. Move tasks between columns with smooth animations, built for Vue teams who value clean code and great user experiences.
+
+## Features
+
+- 🎯 **Drag-and-drop** - Intuitive card movement between columns
+- ✨ **Smooth animations** - Hardware-accelerated CSS transforms
+- ⌨️ **Keyboard navigation** - Full keyboard support for accessibility
+- 📱 **Responsive** - Works seamlessly on all screen sizes
+- 🎨 **Customizable** - Style with Tailwind CSS or your own styles
+- 🔒 **Type-safe** - Fully typed with TypeScript
+- ♿ **Accessible** - Screen reader compatible with ARIA support
+
+## Installation
+
+```bash
+npx ayze-ui add kanban
+```
+
+### Setup Vue DnD Kit Plugin
+
+After installing the component, you need to register the Vue DnD Kit plugin in your main application file:
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import VueDndKitPlugin from '@vue-dnd-kit/core';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(VueDndKitPlugin);
+app.mount('#app');
+```
+
+## Usage
+
+### Basic Example
+
+```vue
+<script setup lang="ts">
+import { Kanban, KanbanBoard, KanbanHeader, KanbanCards, KanbanCard } from '@/components/ui/kanban';
+
+const columns = [
+	{ id: '1', name: 'To Do', color: '#6B7280' },
+	{ id: '2', name: 'In Progress', color: '#F59E0B' },
+	{ id: '3', name: 'Done', color: '#10B981' },
+];
+
+const tasks = ref([
+	{ id: 't1', name: 'Task 1', column: '1' },
+	{ id: 't2', name: 'Task 2', column: '1' },
+	{ id: 't3', name: 'Task 3', column: '2' },
+]);
+
+const handleDataChange = (newData: typeof tasks.value) => {
+	tasks.value = newData;
+};
+</script>
+
+<template>
+	<Kanban :columns="columns" :data="tasks" @data-change="handleDataChange">
+		<template #default="{ column }">
+			<KanbanBoard :id="column.id">
+				<KanbanHeader>
+					<div class="flex items-center gap-2">
+						<div class="h-2 w-2 rounded-full" :style="{ backgroundColor: column.color }" />
+						<span>{{ column.name }}</span>
+					</div>
+				</KanbanHeader>
+				<KanbanCards :id="column.id">
+					<template #default="{ item, index }">
+						<KanbanCard :id="item.id" :name="item.name" :column="item.column" :index="index" />
+					</template>
+				</KanbanCards>
+			</KanbanBoard>
+		</template>
+	</Kanban>
+</template>
+```
+
+### Custom Card Content
+
+```vue
+<KanbanCards :id="column.id">
+  <template #default="{ item, index }">
+    <KanbanCard
+      :id="item.id"
+      :name="item.name"
+      :column="item.column"
+      :index="index"
+    >
+      <div class="flex flex-col gap-2">
+        <h3 class="font-semibold">{{ item.name }}</h3>
+        <p class="text-sm text-muted-foreground">{{ item.description }}</p>
+        <div class="flex items-center gap-2">
+          <Avatar :src="item.assignee.avatar" />
+          <Badge>{{ item.priority }}</Badge>
+        </div>
+      </div>
+    </KanbanCard>
+  </template>
+</KanbanCards>
+```
+
+## Components
+
+### Kanban (Provider)
+
+Main component that provides drag-and-drop context and manages state.
+
+**Props:**
+
+- `columns` - Array of column objects with `id` and `name` properties
+- `data` - Array of card objects with `id`, `name`, and `column` properties
+- `class?` - Optional CSS class
+
+**Events:**
+
+- `dataChange` - Emitted when cards are moved or reordered
+
+### KanbanBoard
+
+Container for a single column.
+
+**Props:**
+
+- `id` - Unique identifier (should match column id)
+- `class?` - Optional CSS class
+
+### KanbanHeader
+
+Header component for column titles.
+
+**Props:**
+
+- `class?` - Optional CSS class
+
+### KanbanCards
+
+Container for cards within a column. Provides slot props for rendering cards.
+
+**Props:**
+
+- `id` - Column identifier
+- `class?` - Optional CSS class
+
+**Slot Props:**
+
+- `item` - The card item data
+- `index` - Index of the card within the column (required for drag-and-drop)
+
+### KanbanCard
+
+Individual draggable card component.
+
+**Props:**
+
+- `id` - Unique card identifier
+- `name` - Card title/name
+- `column` - Column identifier this card belongs to
+- `index` - Index of the card within its column (required for drag-and-drop tracking)
+- `class?` - Optional CSS class
+
+## Use Cases
+
+- **Sprint planning** - Moving user stories from backlog to in-progress to done
+- **Bug triage** - Organizing issues by severity and tracking resolution progress
+- **Content pipelines** - Managing draft, review, approved, and published workflows
+- **Sales CRM** - Tracking leads through qualified, proposal, and closed stages
+- **Support tickets** - Processing new, assigned, resolved, and closed tickets
+- **Feature requests** - Managing submitted, planned, development, and released features
+- **Hiring processes** - Tracking candidates through applied, screening, interview, and decision stages
+
+## Accessibility
+
+- **Keyboard navigation** - Full support for keyboard-only users
+- **Screen readers** - Meaningful announcements for drag operations
+- **Focus management** - Proper focus indicators and tab order
+- **ARIA compliance** - Includes proper ARIA attributes
+
+## Powered by
+
+Built with [Vue DnD Kit](https://zizigy.github.io/vue-dnd-kit/) for modern, performant drag-and-drop.

package/src/runtime/components/ui/kanban/index.ts

@@ -0,0 +1,8 @@
+export { default as Kanban } from './Kanban.vue';
+export { default as KanbanCard } from './KanbanCard.vue';
+export { default as KanbanBoard } from './KanbanBoard.vue';
+export { default as KanbanCards } from './KanbanCards.vue';
+export { default as KanbanHeader } from './KanbanHeader.vue';
+
+// Export types
+export type { KanbanItemProps, KanbanColumnProps } from '@/composables/useKanban';

package/src/runtime/components/ui/kbd/Kbd.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<kbd
+		:class="
+			cn(
+				'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+				'[&_svg:not([class*=\'size-\'])]:size-3',
+				'[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</kbd>
+</template>

package/src/runtime/components/ui/kbd/KbdGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<kbd data-slot="kbd-group" :class="cn('inline-flex items-center gap-1', props.class)">
+		<slot />
+	</kbd>
+</template>

package/src/runtime/components/ui/kbd/index.ts

@@ -0,0 +1,2 @@
+export { default as Kbd } from './Kbd.vue';
+export { default as KbdGroup } from './KbdGroup.vue';

package/src/runtime/components/ui/label/Label.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Label as RekaLabel } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+	LabelProps & {
+		class?: HTMLAttributes['class'];
+		/** ID of the associated form control — required for accessibility (WCAG 1.3.1). */
+		for: string;
+		/** Accessible text for screen readers when slot content contains no text (e.g. icon-only labels). */
+		ariaLabel?: string;
+	}
+>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'ariaLabel');
+</script>
+
+<template>
+	<RekaLabel
+		data-slot="label"
+		v-bind="delegatedProps"
+		:aria-label="props.ariaLabel"
+		:class="cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', props.class)"
+	>
+		<slot />
+	</RekaLabel>
+</template>

package/src/runtime/components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.vue';

package/src/runtime/components/ui/menubar/Menubar.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarRootEmits, MenubarRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MenubarRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<MenubarRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<MenubarRoot v-slot="slotProps" data-slot="menubar" v-bind="forwarded" :class="cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', props.class)">
+		<slot v-bind="slotProps" />
+	</MenubarRoot>
+</template>

package/src/runtime/components/ui/menubar/MenubarCheckboxItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Check } from 'lucide-vue-next';
+import { MenubarCheckboxItem, MenubarItemIndicator, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<MenubarCheckboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<MenubarCheckboxItem
+		data-slot="menubar-checkbox-item"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+				props.class
+			)
+		"
+	>
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			<MenubarItemIndicator>
+				<slot name="indicator-icon">
+					<Check class="size-4" />
+				</slot>
+			</MenubarItemIndicator>
+		</span>
+		<slot />
+	</MenubarCheckboxItem>
+</template>

package/src/runtime/components/ui/menubar/MenubarContent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { MenubarContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MenubarContent, MenubarPortal, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(), {
+	align: 'start',
+	alignOffset: -4,
+	sideOffset: 8,
+});
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<MenubarPortal>
+		<MenubarContent
+			data-slot="menubar-content"
+			v-bind="{ ...$attrs, ...forwardedProps }"
+			:class="
+				cn(
+					'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</MenubarContent>
+	</MenubarPortal>
+</template>

package/src/runtime/components/ui/menubar/MenubarGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarGroupProps } from 'reka-ui';
+import { MenubarGroup } from 'reka-ui';
+
+const props = defineProps<MenubarGroupProps>();
+</script>
+
+<template>
+	<MenubarGroup data-slot="menubar-group" v-bind="props">
+		<slot />
+	</MenubarGroup>
+</template>

package/src/runtime/components/ui/menubar/MenubarItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MenubarItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+	MenubarItemProps & {
+		class?: HTMLAttributes['class'];
+		inset?: boolean;
+		variant?: 'default' | 'destructive';
+	}
+>();
+
+const emits = defineEmits<MenubarItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset', 'variant');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<MenubarItem
+		data-slot="menubar-item"
+		:data-inset="inset ? '' : undefined"
+		:data-variant="variant"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</MenubarItem>
+</template>

package/src/runtime/components/ui/menubar/MenubarLabel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { MenubarLabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MenubarLabel } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+const delegatedProps = reactiveOmit(props, 'class', 'inset');
+</script>
+
+<template>
+	<MenubarLabel :data-inset="inset ? '' : undefined" v-bind="delegatedProps" :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)">
+		<slot />
+	</MenubarLabel>
+</template>

package/src/runtime/components/ui/menubar/MenubarMenu.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarMenuProps } from 'reka-ui';
+import { MenubarMenu } from 'reka-ui';
+
+const props = defineProps<MenubarMenuProps>();
+</script>
+
+<template>
+	<MenubarMenu data-slot="menubar-menu" v-bind="props">
+		<slot />
+	</MenubarMenu>
+</template>

package/src/runtime/components/ui/menubar/MenubarRadioGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from 'reka-ui';
+import { MenubarRadioGroup, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<MenubarRadioGroupProps>();
+const emits = defineEmits<MenubarRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<MenubarRadioGroup data-slot="menubar-radio-group" v-bind="forwarded">
+		<slot />
+	</MenubarRadioGroup>
+</template>