@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/field/FieldGroup.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>
+	<div data-slot="field-group" :class="cn('group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/field/FieldLabel.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Label as FieldLabel } from '@/components/ui/label';
+
+const props = defineProps<{
+	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 visible text. */
+	ariaLabel?: string;
+}>();
+</script>
+
+<template>
+	<FieldLabel
+		data-slot="field-label"
+		:for="props.for"
+		:aria-label="props.ariaLabel"
+		:class="
+			cn(
+				'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+				'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-4',
+				'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</FieldLabel>
+</template>

package/src/runtime/components/ui/field/FieldLegend.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+	variant?: 'legend' | 'label';
+}>();
+</script>
+
+<template>
+	<legend data-slot="field-legend" :data-variant="variant" :class="cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', props.class)">
+		<slot />
+	</legend>
+</template>

package/src/runtime/components/ui/field/FieldSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="field-separator" :data-content="!!$slots.default" :class="cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', props.class)">
+		<Separator class="absolute inset-0 top-1/2" />
+		<span v-if="$slots.default" class="bg-background text-muted-foreground relative mx-auto block w-fit px-2" data-slot="field-separator-content">
+			<slot />
+		</span>
+	</div>
+</template>

package/src/runtime/components/ui/field/FieldSet.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>
+	<fieldset data-slot="field-set" :class="cn('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', props.class)">
+		<slot />
+	</fieldset>
+</template>

package/src/runtime/components/ui/field/FieldTitle.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>
+	<div data-slot="field-label" :class="cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', props.class)">
+		<slot />
+	</div>
+</template>

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

@@ -0,0 +1,32 @@
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+
+export const fieldVariants = cva('group/field flex w-full gap-3 data-[invalid=true]:text-destructive', {
+	variants: {
+		orientation: {
+			vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+			horizontal: ['flex-row items-center', '[&>[data-slot=field-label]]:flex-auto', 'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'],
+			responsive: [
+				'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
+				'@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+				'@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+			],
+		},
+	},
+	defaultVariants: {
+		orientation: 'vertical',
+	},
+});
+
+export type FieldVariants = VariantProps<typeof fieldVariants>;
+
+export { default as Field } from './Field.vue';
+export { default as FieldContent } from './FieldContent.vue';
+export { default as FieldDescription } from './FieldDescription.vue';
+export { default as FieldError } from './FieldError.vue';
+export { default as FieldGroup } from './FieldGroup.vue';
+export { default as FieldLabel } from './FieldLabel.vue';
+export { default as FieldLegend } from './FieldLegend.vue';
+export { default as FieldSeparator } from './FieldSeparator.vue';
+export { default as FieldSet } from './FieldSet.vue';
+export { default as FieldTitle } from './FieldTitle.vue';

package/src/runtime/components/ui/form/FormControl.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { Slot } from 'reka-ui';
+import { useFormField } from './useFormField';
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+</script>
+
+<template>
+	<Slot :id="formItemId" data-slot="form-control" :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`" :aria-invalid="!!error">
+		<slot />
+	</Slot>
+</template>

package/src/runtime/components/ui/form/FormDescription.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { useFormField } from './useFormField';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+
+const { formDescriptionId } = useFormField();
+</script>
+
+<template>
+	<p :id="formDescriptionId" data-slot="form-description" :class="cn('text-muted-foreground text-sm', props.class)">
+		<slot />
+	</p>
+</template>

package/src/runtime/components/ui/form/FormItem.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { useId } from 'reka-ui';
+import { provide } from 'vue';
+import { cn } from '@/lib/utils';
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+
+const id = useId();
+provide(FORM_ITEM_INJECTION_KEY, id);
+</script>
+
+<template>
+	<div data-slot="form-item" :class="cn('grid gap-2', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/form/FormLabel.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/label';
+import { useFormField } from './useFormField';
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+
+const { error, formItemId } = useFormField();
+</script>
+
+<template>
+	<Label data-slot="form-label" :data-error="!!error" :class="cn('data-[error=true]:text-destructive', props.class)" :for="formItemId">
+		<slot />
+	</Label>
+</template>

package/src/runtime/components/ui/form/FormMessage.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+import { ErrorMessage } from 'vee-validate';
+import { toValue } from 'vue';
+import { cn } from '@/lib/utils';
+import { useFormField } from './useFormField';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+
+const { name, formMessageId } = useFormField();
+</script>
+
+<template>
+	<ErrorMessage :id="formMessageId" data-slot="form-message" as="p" :name="toValue(name)" :class="cn('text-destructive text-sm', props.class)" />
+</template>

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

@@ -0,0 +1,7 @@
+export { default as FormControl } from './FormControl.vue';
+export { default as FormDescription } from './FormDescription.vue';
+export { default as FormItem } from './FormItem.vue';
+export { default as FormLabel } from './FormLabel.vue';
+export { default as FormMessage } from './FormMessage.vue';
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate';

package/src/runtime/components/ui/form/injectionKeys.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue';
+
+export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>;

package/src/runtime/components/ui/form/useFormField.ts

@@ -0,0 +1,29 @@
+import { FieldContextKey } from 'vee-validate';
+import { computed, inject } from 'vue';
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+export function useFormField() {
+	const fieldContext = inject(FieldContextKey);
+	const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+
+	if (!fieldContext) throw new Error('useFormField should be used within <FormField>');
+
+	const { name, errorMessage: error, meta } = fieldContext;
+	const id = fieldItemContext;
+
+	const fieldState = {
+		valid: computed(() => meta.valid),
+		isDirty: computed(() => meta.dirty),
+		isTouched: computed(() => meta.touched),
+		error,
+	};
+
+	return {
+		id,
+		name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+}

package/src/runtime/components/ui/gantt/Gantt.vue

@@ -0,0 +1,108 @@
+<template>
+	<div :class="cn('gantt bg-secondary relative flex h-full w-full flex-none overflow-hidden rounded-sm select-none', range, props.class)" :style="cssVariables">
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttProps {
+	zoom?: number;
+	range?: GanttRange;
+	headerHeight?: number;
+	columnWidth?: number;
+	sidebarWidth?: number;
+	rowHeight?: number;
+	onAddItem?: (date: Date) => void;
+	class?: string;
+}
+
+const props = withDefaults(defineProps<GanttProps>(), {
+	zoom: 100,
+	range: 'monthly',
+	headerHeight: 60,
+	columnWidth: 120,
+	sidebarWidth: 320,
+	rowHeight: 48,
+});
+
+const scrollRef = ref<HTMLElement | null>(null);
+const sidebarScrollRef = ref<HTMLElement | null>(null);
+const scrollX = ref(0);
+const scrollY = ref(0);
+const isSyncingVertical = ref(false);
+const zoom = ref(props.zoom);
+const range = computed(() => props.range);
+const headerHeight = computed(() => props.headerHeight);
+const columnWidth = computed(() => props.columnWidth);
+const sidebarWidth = computed(() => props.sidebarWidth);
+const rowHeight = computed(() => props.rowHeight);
+const placeholderLength = ref(2);
+
+// Generate timeline data (3 years: 1 past, current, 1 future)
+const currentYear = new Date().getFullYear();
+const timelineData = ref(generateTimelineData(currentYear - 1, 3));
+
+const cssVariables = computed(() => ({
+	'--gantt-zoom': `${zoom.value}%`,
+	'--gantt-header-height': `${headerHeight.value}px`,
+	'--gantt-column-width': `${(columnWidth.value * zoom.value) / 100}px`,
+	'--gantt-sidebar-width': `${sidebarWidth.value}px`,
+	'--gantt-row-height': `${rowHeight.value}px`,
+}));
+
+const scrollToFeature = (feature: GanttFeature) => {
+	const scrollElement = scrollRef.value;
+	if (!scrollElement) return;
+
+	const firstYear = timelineData.value[0]?.year;
+	if (!firstYear) return;
+
+	const timelineStartDate = new Date(firstYear, 0, 1);
+	const offset = getOffset(feature.startAt, timelineStartDate, {
+		zoom: zoom.value,
+		range: range.value,
+		columnWidth: columnWidth.value,
+	});
+
+	scrollElement.scrollTo({
+		left: Math.max(0, offset),
+		behavior: 'smooth',
+	});
+};
+
+const setZoom = (newZoom: number) => {
+	zoom.value = Math.max(25, Math.min(300, newZoom)); // Limit zoom between 25% and 300%
+};
+
+// Provide context
+provideGanttContext({
+	zoom,
+	range,
+	headerHeight,
+	columnWidth,
+	sidebarWidth,
+	rowHeight,
+	timelineData,
+	placeholderLength,
+	scrollRef,
+	sidebarScrollRef,
+	scrollX,
+	scrollY,
+	isSyncingVertical,
+	onAddItem: props.onAddItem,
+	scrollToFeature,
+	setZoom,
+});
+</script>
+
+<style scoped>
+.gantt {
+	--gantt-zoom: 100%;
+	--gantt-header-height: 60px;
+	--gantt-column-width: 120px;
+	--gantt-sidebar-width: 320px;
+	--gantt-row-height: 48px;
+}
+</style>

package/src/runtime/components/ui/gantt/GanttCreateMarkerTrigger.vue

@@ -0,0 +1,44 @@
+<template>
+	<div class="absolute inset-0 z-0 cursor-crosshair" :style="{ paddingTop: `${gantt.headerHeight.value}px` }" @click="handleClick" />
+</template>
+
+<script setup lang="ts">
+export interface GanttCreateMarkerTriggerProps {
+	onCreateMarker?: (date: Date) => void;
+}
+
+const props = defineProps<GanttCreateMarkerTriggerProps>();
+const gantt = useGantt();
+
+function handleClick(event: MouseEvent) {
+	// Only create markers if clicking directly on the trigger (empty area)
+	// If clicking on a bar or other element, let that element handle the event
+	if (event.target !== event.currentTarget) {
+		return;
+	}
+
+	const target = event.currentTarget as HTMLElement;
+	const rect = target.getBoundingClientRect();
+	const x = event.clientX - rect.left;
+
+	// Calculate which column was clicked
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+	const columnIndex = Math.floor(x / columnWidth);
+
+	// Calculate the date based on the column index
+	const firstYear = gantt.timelineData.value[0]?.year;
+	const timelineStartDate = new Date(firstYear || new Date().getFullYear(), 0, 1);
+
+	let clickedDate = timelineStartDate;
+
+	if (gantt.range.value === 'daily') {
+		clickedDate = addDays(timelineStartDate, columnIndex);
+	} else if (gantt.range.value === 'weekly') {
+		clickedDate = addWeeks(timelineStartDate, columnIndex);
+	} else if (gantt.range.value === 'monthly') {
+		clickedDate = addMonths(timelineStartDate, columnIndex);
+	}
+
+	props.onCreateMarker?.(clickedDate);
+}
+</script>