@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/table/TableEmpty.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { cn } from '@/lib/utils';
+import TableCell from './TableCell.vue';
+import TableRow from './TableRow.vue';
+
+const props = withDefaults(
+	defineProps<{
+		class?: HTMLAttributes['class'];
+		colspan?: number;
+	}>(),
+	{
+		colspan: 1,
+	}
+);
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<TableRow>
+		<TableCell :class="cn('text-text-body dark:text-text-body p-4 align-middle text-sm whitespace-nowrap', props.class)" v-bind="delegatedProps">
+			<div class="flex flex-col items-center justify-center py-10">
+				<slot />
+			</div>
+		</TableCell>
+	</TableRow>
+</template>

package/src/runtime/components/ui/table/TableFooter.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>
+	<tfoot data-slot="table-footer" :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)">
+		<slot />
+	</tfoot>
+</template>

package/src/runtime/components/ui/table/TableHead.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>
+	<th data-slot="table-head" :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
+		<slot />
+	</th>
+</template>

package/src/runtime/components/ui/table/TableHeader.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>
+	<thead data-slot="table-header" :class="cn('[&_tr]:border-b', props.class)">
+		<slot />
+	</thead>
+</template>

package/src/runtime/components/ui/table/TableRow.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>
+	<tr data-slot="table-row" :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+		<slot />
+	</tr>
+</template>

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

@@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue';
+export { default as TableBody } from './TableBody.vue';
+export { default as TableCaption } from './TableCaption.vue';
+export { default as TableCell } from './TableCell.vue';
+export { default as TableEmpty } from './TableEmpty.vue';
+export { default as TableFooter } from './TableFooter.vue';
+export { default as TableHead } from './TableHead.vue';
+export { default as TableHeader } from './TableHeader.vue';
+export { default as TableRow } from './TableRow.vue';

package/src/runtime/components/ui/table/utils.ts

@@ -0,0 +1,8 @@
+import type { Updater } from '@tanstack/vue-table';
+
+import type { Ref } from 'vue';
+import { isFunction } from '@tanstack/vue-table';
+
+export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
+	ref.value = isFunction(updaterOrValue) ? updaterOrValue(ref.value) : updaterOrValue;
+}

package/src/runtime/components/ui/tabs/Tabs.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+	TabsRootProps & {
+		class?: HTMLAttributes['class'];
+	}
+>();
+const emits = defineEmits<TabsRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<TabsRoot v-slot="slotProps" data-slot="tabs" v-bind="forwarded" :class="cn('flex flex-col gap-4', props.class)">
+		<slot v-bind="slotProps" />
+	</TabsRoot>
+</template>

package/src/runtime/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsContent } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none', props.class)" v-bind="delegatedProps">
+		<slot />
+	</TabsContent>
+</template>

package/src/runtime/components/ui/tabs/TabsList.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<TabsList data-slot="tabs-list" v-bind="delegatedProps" :class="cn('bg-muted text-muted-foreground border-border-base dark:border-border-base inline-flex h-9 w-fit items-center justify-center border-b', props.class)">
+		<slot />
+	</TabsList>
+</template>

package/src/runtime/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<TabsTrigger
+		data-slot="tabs-trigger"
+		:class="
+			cn(
+				'dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+				props.class
+			)
+		"
+		v-bind="forwardedProps"
+	>
+		<slot />
+	</TabsTrigger>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsContent } from './TabsContent.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';

package/src/runtime/components/ui/tags-input/TagsInput.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TagsInputRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<TagsInputRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<TagsInputRoot v-slot="slotProps" v-bind="forwarded" :class="cn('border-input bg-background flex flex-wrap items-center gap-2 rounded-md border px-2 py-1 text-sm outline-none', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', props.class)">
+		<slot v-bind="slotProps" />
+	</TagsInputRoot>
+</template>

package/src/runtime/components/ui/tags-input/TagsInputInput.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TagsInputInput, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<TagsInputInput v-bind="forwardedProps" :class="cn('min-h-5 flex-1 bg-transparent px-1 text-sm focus:outline-none', props.class)" />
+</template>

package/src/runtime/components/ui/tags-input/TagsInputItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+
+import { reactiveOmit } from '@vueuse/core';
+import { TagsInputItem, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<TagsInputItem v-bind="forwardedProps" :class="cn('bg-secondary data-[state=active]:ring-ring ring-offset-background flex h-5 items-center rounded-md data-[state=active]:ring-2 data-[state=active]:ring-offset-2', props.class)">
+		<slot />
+	</TagsInputItem>
+</template>

package/src/runtime/components/ui/tags-input/TagsInputItemDelete.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { X } from 'lucide-vue-next';
+import { TagsInputItemDelete, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<TagsInputItemDelete v-bind="forwardedProps" :class="cn('mr-1 flex rounded bg-transparent', props.class)">
+		<slot>
+			<X class="h-4 w-4" />
+		</slot>
+	</TagsInputItemDelete>
+</template>

package/src/runtime/components/ui/tags-input/TagsInputItemText.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TagsInputItemText, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<TagsInputItemText v-bind="forwardedProps" :class="cn('rounded bg-transparent px-2 py-0.5 text-sm', props.class)">
+		<slot />
+	</TagsInputItemText>
+</template>

package/src/runtime/components/ui/tags-input/index.ts

@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue';
+export { default as TagsInputInput } from './TagsInputInput.vue';
+export { default as TagsInputItem } from './TagsInputItem.vue';
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';
+export { default as TagsInputItemText } from './TagsInputItemText.vue';

package/src/runtime/components/ui/textarea/Textarea.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+	defaultValue?: string | number;
+	modelValue?: string | number;
+}>();
+
+const emits = defineEmits<(e: 'update:modelValue', payload: string | number) => void>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+	passive: true,
+	defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+	<textarea
+		v-model="modelValue"
+		data-slot="textarea"
+		:class="
+			cn(
+				'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				props.class
+			)
+		"
+	/>
+</template>

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

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

package/src/runtime/components/ui/tiptap/TiptapContent.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useTiptapContext } from '.';
+
+const props = defineProps<{
+	editor?: Editor | null;
+	class?: HTMLAttributes['class'];
+	placeholder?: string;
+}>();
+
+// Get editor from context if not provided directly
+const { editor: contextEditor } = useTiptapContext();
+const editor = computed(() => props.editor ?? contextEditor.value);
+
+// Editor is ready when it's available and initialized
+const isEditorReady = computed(() => {
+	return editor.value && editor.value.isEditable;
+});
+
+// Reference to the editor element
+const editorElement = ref<HTMLElement | null>(null);
+
+// Mount editor to DOM when editor is available or element changes
+watch(
+	[editor, editorElement],
+	([currentEditor, element]) => {
+		if (currentEditor && element && !element.firstChild) {
+			// If editor is ready but not yet mounted to this element
+			element.append(currentEditor.view.dom);
+		}
+	},
+	{ immediate: true }
+);
+
+// Also mount on component mount in case both are already available
+onMounted(() => {
+	if (isEditorReady.value && editorElement.value && !editorElement.value.firstChild) {
+		editorElement.value.append(editor.value!.view.dom);
+	}
+
+	if (isEditorReady.value && editorElement.value && editorElement.value.firstChild) {
+		// Add appropriate ARIA attributes
+		const editorDOM = editorElement.value.firstChild as HTMLElement;
+		editorDOM.setAttribute('role', 'textbox');
+		editorDOM.setAttribute('aria-multiline', 'true');
+		editorDOM.setAttribute('aria-label', 'Rich text editor');
+
+		// Add content description for screen readers
+		const srDescription = document.createElement('span');
+		srDescription.className = 'sr-only';
+		srDescription.textContent = 'Use keyboard shortcuts like Ctrl+B for bold, Ctrl+I for italic. Press Alt+F10 for the toolbar.';
+		editorElement.value.appendChild(srDescription);
+	}
+});
+</script>
+
+<template>
+	<div :class="cn('tiptap-editor-wrapper relative', props.class)" data-slot="tiptap-content" aria-label="Rich text editor">
+		<section v-if="isEditorReady" ref="editorElement" class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl dark:prose-invert h-full w-full max-w-none px-4 py-6 focus:outline-none" />
+
+		<div v-else class="tiptap-editor-placeholder text-muted-foreground flex h-full w-full items-center justify-center text-sm italic" aria-live="polite">
+			{{ placeholder || 'Loading editor...' }}
+		</div>
+	</div>
+</template>
+
+<style>
+/* Editor styles */
+.tiptap-editor-wrapper .ProseMirror {
+	min-height: 100px;
+	height: 100%;
+	border: none;
+	outline: none;
+}
+
+.tiptap-editor-wrapper .ProseMirror p.is-editor-empty:first-child::before {
+	color: #adb5bd;
+	content: attr(data-placeholder);
+	float: left;
+	height: 0;
+	pointer-events: none;
+}
+
+/* Component styles */
+.tiptap-editor-wrapper .component-node {
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+}
+
+.tiptap-editor-wrapper .component-selected {
+	outline: 2px solid #3b82f6;
+	outline-offset: 2px;
+}
+
+/* Heading styles */
+.tiptap-editor-wrapper h1 {
+	font-size: 2em;
+	margin-top: 0.67em;
+	margin-bottom: 0.67em;
+}
+
+.tiptap-editor-wrapper h2 {
+	font-size: 1.5em;
+	margin-top: 0.83em;
+	margin-bottom: 0.83em;
+}
+
+.tiptap-editor-wrapper h3 {
+	font-size: 1.17em;
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+
+/* Node selection styles */
+.tiptap-editor-wrapper .ProseMirror .is-node-selected {
+	outline: 2px solid #3b82f6;
+	outline-offset: 2px;
+}
+
+/* Placeholder for empty nodes */
+.tiptap-editor-wrapper .ProseMirror p.is-empty::before {
+	color: #adb5bd;
+	content: attr(data-placeholder);
+	float: left;
+	height: 0;
+	pointer-events: none;
+}
+
+/* Focus indicators for accessibility */
+.tiptap-editor-wrapper .ProseMirror:focus-visible {
+	outline: 2px solid hsl(var(--primary));
+	outline-offset: 2px;
+}
+
+/* Better focus styles for interactive elements */
+.tiptap-editor-wrapper .ProseMirror *[data-interactive]:focus-visible {
+	outline: 2px solid hsl(var(--primary));
+	outline-offset: 2px;
+}
+
+/* High contrast mode support */
+@media (forced-colors: active) {
+	.tiptap-editor-wrapper .ProseMirror:focus-visible {
+		outline: 3px solid CanvasText;
+	}
+
+	.tiptap-editor-wrapper .component-selected {
+		outline: 3px solid Highlight;
+	}
+}
+</style>

package/src/runtime/components/ui/tiptap/TiptapEditor.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/vue-3';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+import { useTiptapContext } from '.';
+
+const props = defineProps<{
+	editor: Editor | null;
+	class?: HTMLAttributes['class'];
+	fullScreen?: boolean;
+}>();
+
+// Try to use the existing context from a parent TiptapProvider
+let editorContext;
+try {
+	editorContext = useTiptapContext();
+} catch {
+	// No provider found, this editor will manage its own state
+	editorContext = null;
+}
+
+// If there's a provider context, we'll use that
+// Otherwise we'll render our own provider
+const useExternalProvider = computed(() => !!editorContext);
+</script>
+
+<template>
+	<div :class="cn('tiptap-editor', props.fullScreen && 'fixed inset-0 z-50', props.class)" data-slot="tiptap-editor">
+		<TiptapProvider v-if="!useExternalProvider" :editor="props.editor">
+			<slot />
+		</TiptapProvider>
+		<template v-else>
+			<slot />
+		</template>
+	</div>
+</template>