@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/dynect/TextEditor.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { Content, Extensions } from '@tiptap/vue-3';
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import Blockquote from '@tiptap/extension-blockquote';
+import Bold from '@tiptap/extension-bold';
+import BulletList from '@tiptap/extension-bullet-list';
+import CharacterCount from '@tiptap/extension-character-count';
+import Code from '@tiptap/extension-code';
+import Document from '@tiptap/extension-document';
+import HardBreak from '@tiptap/extension-hard-break';
+import Heading from '@tiptap/extension-heading';
+import History from '@tiptap/extension-history';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import Italic from '@tiptap/extension-italic';
+import ListItem from '@tiptap/extension-list-item';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Placeholder from '@tiptap/extension-placeholder';
+import Strike from '@tiptap/extension-strike';
+import Text from '@tiptap/extension-text';
+import { useEditor } from '@tiptap/vue-3';
+
+const props = withDefaults(
+	defineProps<{
+		class?: HTMLAttributes['class'];
+		placeholder?: string;
+		editable?: boolean;
+		autofocus?: boolean;
+		maxLength?: number;
+		showToolbar?: boolean;
+		showStatusBar?: boolean;
+		showWordCount?: boolean;
+		showCharCount?: boolean;
+		extensions?: Extensions;
+	}>(),
+	{
+		placeholder: 'Start typing...',
+		editable: true,
+		autofocus: false,
+		showToolbar: true,
+		showStatusBar: true,
+		showWordCount: true,
+		showCharCount: true,
+	}
+);
+
+const modelValue = defineModel<Content>({ default: '' });
+
+const defaultExtensions: Extensions = [
+	Document,
+	Paragraph,
+	Text,
+	Bold,
+	Italic,
+	Strike,
+	Code,
+	Heading.configure({ levels: [1, 2, 3] }),
+	BulletList,
+	OrderedList,
+	ListItem,
+	Blockquote,
+	HorizontalRule,
+	HardBreak,
+	History,
+	Placeholder.configure({ placeholder: props.placeholder }),
+	...(props.maxLength == null ? [] : [CharacterCount.configure({ limit: props.maxLength })]),
+];
+
+const editor = useEditor({
+	content: modelValue.value,
+	extensions: props.extensions ?? defaultExtensions,
+	editable: props.editable,
+	autofocus: props.autofocus,
+	onUpdate({ editor: e }: { editor: any }) {
+		modelValue.value = e.getHTML();
+	},
+});
+
+watch(
+	() => props.editable,
+	(val) => editor.value?.setEditable(val)
+);
+
+defineExpose({ editor });
+</script>
+
+<template>
+	<TiptapEditor :editor="editor ?? null" :class="cn('rounded-xl border', props.class)">
+		<TiptapToolbar v-if="showToolbar" class="border-b" />
+		<TiptapContent :placeholder="placeholder" class="min-h-37.5" />
+		<TiptapStatusBar v-if="showStatusBar" class="border-t" :show-word-count="showWordCount" :show-char-count="showCharCount" />
+	</TiptapEditor>
+</template>

package/src/runtime/components/dynect/Textarea.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva } from 'class-variance-authority';
+import { cn, inputSizeClasses } from '@/lib/utils';
+
+type TextareaSize = 'sm' | 'base' | 'lg' | 'xl';
+type TextareaState = 'default' | 'success' | 'danger';
+type VariantState = 'default' | 'success' | 'danger' | 'disabled' | 'readonly';
+
+// ── Variants ─────────────────────────────────────────────────────────────────
+const textareaWrapperVariants = cva('flex w-full rounded-xl border', {
+	variants: {
+		state: {
+			default: 'bg-bg-secondary-medium border-border-base-medium focus-within:border-border-brand',
+			success: 'bg-bg-success-soft border-border-success-subtle focus-within:border-border-success',
+			danger: 'bg-bg-danger-soft border-border-danger-subtle focus-within:border-border-danger',
+			disabled: 'bg-bg-disabled border-border-base-medium cursor-not-allowed opacity-60',
+			readonly: 'bg-bg-tertiary border-border-base-medium',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const textareaTextVariants = cva('w-full min-w-0 bg-transparent outline-none resize-y disabled:cursor-not-allowed', {
+	variants: {
+		state: {
+			default: 'text-text-heading placeholder:text-text-body-subtle',
+			success: 'text-text-fg-success-strong',
+			danger: 'text-text-fg-danger-strong',
+			disabled: 'text-text-fg-disabled placeholder:text-text-fg-disabled',
+			readonly: 'text-text-body placeholder:text-text-body-subtle',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+const props = withDefaults(
+	defineProps<{
+		id?: HTMLAttributes['id'];
+		class?: HTMLAttributes['class'];
+		size?: TextareaSize;
+		state?: TextareaState;
+		placeholder?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		tooltip?: string;
+		label?: string;
+		name?: string;
+		required?: boolean;
+		description?: string;
+		labelClass?: string;
+		descriptionClass?: string;
+		errorClass?: string;
+		rows?: number;
+		maxlength?: number;
+		minlength?: number;
+	}>(),
+	{
+		rows: 4,
+	}
+);
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `textarea-${fallbackId}`);
+
+const modelValue = defineModel<string | number | null>('modelValue', {
+	required: false,
+});
+
+const { errorMessage, handleBlur } = useField(() => resolvedId.value || props.name || 'textarea', undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+
+// Resolve priority: disabled > readonly > explicit state > vee-validate error
+const variantState = computed<VariantState>(() => {
+	if (props.disabled) return 'disabled';
+	if (props.readonly) return 'readonly';
+	if (props.state && props.state !== 'default') return props.state;
+	return errorMessage.value ? 'danger' : 'default';
+});
+
+const sz = computed(() => props.size ?? 'base');
+
+// Precomputed class strings
+const wrapperCls = computed(() => textareaWrapperVariants({ state: variantState.value }));
+const textColorCls = computed(() => textareaTextVariants({ state: variantState.value }));
+const textCls = computed(() => cn(textColorCls.value, inputSizeClasses[sz.value]));
+</script>
+
+<template>
+	<div :class="props.class">
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Textarea Wrapper -->
+		<div :class="cn(wrapperCls, props.class)">
+			<textarea :id="resolvedId" v-model="modelValue" autocomplete="off" :name="resolvedId" :placeholder="placeholder ?? 'Enter text...'" :disabled="disabled" :readonly="readonly" :rows="rows" :maxlength="maxlength" :minlength="minlength" :class="textCls" @blur="handleBlur" />
+		</div>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+	</div>
+</template>

package/src/runtime/components/dynect/TimePicker.vue

@@ -0,0 +1,275 @@
+<template>
+	<div>
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Time Picker Trigger -->
+		<Popover v-model:open="isPopoverOpen">
+			<PopoverTrigger as-child>
+				<DynectInput
+					:id="resolvedId"
+					:model-value="displayTime"
+					:placeholder="placeholder"
+					input-type="default"
+					:disabled="disabled"
+					:state="errorMessage ? 'danger' : 'default'"
+					:aria-invalid="!!errorMessage"
+					:aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined"
+					readonly
+					:class="cn('cursor-pointer', inputClass)"
+				>
+					<template #leading>
+						<Icon name="lucide:clock" />
+					</template>
+				</DynectInput>
+			</PopoverTrigger>
+
+			<PopoverContent align="start" class="border-border-base w-auto rounded-xl border bg-white p-0 shadow-lg dark:border-gray-700 dark:bg-gray-900">
+				<!-- Time Selector -->
+				<div class="flex items-end gap-2 p-5">
+					<!-- Hours -->
+					<div class="flex flex-col items-center gap-1">
+						<DynectButton type="button" :disabled="disabled" color="secondary" size="xs" icon-only left-icon="lucide:chevron-up" class="h-8 w-8" @click="incrementHours" />
+						<input
+							v-model="hours"
+							type="text"
+							inputmode="numeric"
+							maxlength="2"
+							:disabled="disabled"
+							class="border-border-base focus:border-dynect-600 focus:ring-dynect-600/20 dark:focus:border-dynect-400 w-16 rounded-lg border bg-white py-2 text-center text-lg font-semibold text-gray-900 focus:ring-2 focus:outline-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+							@blur="handleHoursBlur"
+						>
+						<DynectButton type="button" :disabled="disabled" color="secondary" size="xs" icon-only left-icon="lucide:chevron-down" class="h-8 w-8" @click="decrementHours" />
+						<span class="text-text-body-subtle text-xs">Hours</span>
+					</div>
+
+					<!-- Separator -->
+					<div class="mb-8 text-2xl font-bold text-gray-900 dark:text-white">:</div>
+
+					<!-- Minutes -->
+					<div class="flex flex-col items-center gap-1">
+						<DynectButton type="button" :disabled="disabled" color="secondary" size="xs" icon-only left-icon="lucide:chevron-up" class="h-8 w-8" @click="incrementMinutes" />
+						<input
+							v-model="minutes"
+							type="text"
+							inputmode="numeric"
+							maxlength="2"
+							:disabled="disabled"
+							class="border-border-base focus:border-dynect-600 focus:ring-dynect-600/20 dark:focus:border-dynect-400 w-16 rounded-lg border bg-white py-2 text-center text-lg font-semibold text-gray-900 focus:ring-2 focus:outline-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+							@blur="handleMinutesBlur"
+						>
+						<DynectButton type="button" :disabled="disabled" color="secondary" size="xs" icon-only left-icon="lucide:chevron-down" class="h-8 w-8" @click="decrementMinutes" />
+						<span class="text-text-body-subtle text-xs">Minutes</span>
+					</div>
+
+					<!-- AM/PM Toggle (only for 12-hour format) -->
+					<div v-if="format === '12'" class="flex flex-col items-center gap-1">
+						<DynectButton type="button" :disabled="disabled" color="secondary" size="xs" class="mb-9 w-16" @click="togglePeriod">
+							{{ period }}
+						</DynectButton>
+					</div>
+				</div>
+
+				<!-- Footer Buttons -->
+				<div class="border-border-base flex gap-3 border-t px-5 py-3 dark:border-gray-700">
+					<DynectButton size="base" color="secondary" class="w-full" @click="handleClear"> Clear </DynectButton>
+					<DynectButton size="base" color="brand" class="w-full" @click="handleApply">Apply</DynectButton>
+				</div>
+			</PopoverContent>
+		</Popover>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+export interface TimePickerProps {
+	label?: string;
+	placeholder?: string;
+	name?: string;
+	id?: string;
+	tooltip?: string;
+	required?: boolean;
+	disabled?: boolean;
+	description?: string;
+	format?: '12' | '24';
+	inputClass?: string;
+	labelClass?: string;
+	descriptionClass?: string;
+}
+
+const props = withDefaults(defineProps<TimePickerProps>(), {
+	placeholder: 'Select time',
+	format: '24',
+});
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `time-picker-${fallbackId}`);
+
+const model = defineModel<string | undefined | null>({
+	required: false,
+});
+
+const { errorMessage } = useField(() => resolvedId.value || props.name || 'time-picker', undefined, {
+	initialValue: model.value,
+	syncVModel: true,
+});
+
+// Internal state
+const isPopoverOpen = ref(false);
+const hours = ref<string>('00');
+const minutes = ref<string>('00');
+const period = ref<'AM' | 'PM'>('AM');
+
+// Convert 24-hour to 12-hour format
+const convert24To12 = (hour24: number): { hour12: number; period: 'AM' | 'PM' } => {
+	if (hour24 === 0) return { hour12: 12, period: 'AM' };
+	if (hour24 < 12) return { hour12: hour24, period: 'AM' };
+	if (hour24 === 12) return { hour12: 12, period: 'PM' };
+	return { hour12: hour24 - 12, period: 'PM' };
+};
+
+// Convert 12-hour to 24-hour format
+const convert12To24 = (hour12: number, periodValue: 'AM' | 'PM'): number => {
+	if (periodValue === 'AM') return hour12 === 12 ? 0 : hour12;
+	return hour12 === 12 ? 12 : hour12 + 12;
+};
+
+// Sync internal state from model value
+watch(
+	() => model.value,
+	(newValue) => {
+		if (newValue && typeof newValue === 'string') {
+			const parts = newValue.split(':');
+			if (parts.length >= 2) {
+				const hour24 = Number.parseInt(parts[0] || '0');
+				const minute = Number.parseInt(parts[1] || '0');
+
+				if (props.format === '12') {
+					const { hour12, period: newPeriod } = convert24To12(hour24);
+					hours.value = hour12.toString().padStart(2, '0');
+					period.value = newPeriod;
+				} else {
+					hours.value = hour24.toString().padStart(2, '0');
+				}
+				minutes.value = minute.toString().padStart(2, '0');
+			}
+		}
+	},
+	{ immediate: true }
+);
+
+// Display value shown in the trigger input
+const displayTime = computed(() => {
+	if (!model.value) return '';
+	if (props.format === '12') {
+		const parts = model.value.split(':');
+		if (parts.length >= 2) {
+			const hour24 = Number.parseInt(parts[0] || '0');
+			const { hour12, period: displayPeriod } = convert24To12(hour24);
+			return `${hour12.toString().padStart(2, '0')}:${parts[1]} ${displayPeriod}`;
+		}
+	}
+	return model.value;
+});
+
+// Build time string from current internal state (does NOT commit to model)
+const buildTimeString = (): string => {
+	let hour24: number;
+	if (props.format === '12') {
+		hour24 = convert12To24(Number.parseInt(hours.value), period.value);
+	} else {
+		hour24 = Number.parseInt(hours.value);
+	}
+	return `${hour24.toString().padStart(2, '0')}:${minutes.value}`;
+};
+
+const incrementHours = () => {
+	if (props.format === '12') {
+		const h = Number.parseInt(hours.value);
+		hours.value = (h === 12 ? 1 : h + 1).toString().padStart(2, '0');
+	} else {
+		hours.value = ((Number.parseInt(hours.value) + 1) % 24).toString().padStart(2, '0');
+	}
+};
+
+const decrementHours = () => {
+	if (props.format === '12') {
+		const h = Number.parseInt(hours.value);
+		hours.value = (h === 1 ? 12 : h - 1).toString().padStart(2, '0');
+	} else {
+		hours.value = ((Number.parseInt(hours.value) - 1 + 24) % 24).toString().padStart(2, '0');
+	}
+};
+
+const incrementMinutes = () => {
+	minutes.value = ((Number.parseInt(minutes.value) + 1) % 60).toString().padStart(2, '0');
+};
+
+const decrementMinutes = () => {
+	minutes.value = ((Number.parseInt(minutes.value) - 1 + 60) % 60).toString().padStart(2, '0');
+};
+
+const togglePeriod = () => {
+	period.value = period.value === 'AM' ? 'PM' : 'AM';
+};
+
+const handleHoursBlur = () => {
+	if (props.format === '12') {
+		const h = Math.max(1, Math.min(12, Number.parseInt(hours.value) || 1));
+		hours.value = h.toString().padStart(2, '0');
+	} else {
+		const h = Math.max(0, Math.min(23, Number.parseInt(hours.value) || 0));
+		hours.value = h.toString().padStart(2, '0');
+	}
+};
+
+const handleMinutesBlur = () => {
+	const m = Math.max(0, Math.min(59, Number.parseInt(minutes.value) || 0));
+	minutes.value = m.toString().padStart(2, '0');
+};
+
+// Apply: commit the staged time to model
+const handleApply = () => {
+	model.value = buildTimeString();
+	isPopoverOpen.value = false;
+};
+
+// Clear: reset model and close
+const handleClear = () => {
+	model.value = undefined;
+	hours.value = '00';
+	minutes.value = '00';
+	period.value = 'AM';
+	isPopoverOpen.value = false;
+};
+
+// When popover opens, seed internal state from current model value
+watch(isPopoverOpen, (open) => {
+	if (open && model.value) {
+		const parts = model.value.split(':');
+		if (parts.length >= 2) {
+			const hour24 = Number.parseInt(parts[0] || '0');
+			const minute = Number.parseInt(parts[1] || '0');
+			if (props.format === '12') {
+				const { hour12, period: p } = convert24To12(hour24);
+				hours.value = hour12.toString().padStart(2, '0');
+				period.value = p;
+			} else {
+				hours.value = hour24.toString().padStart(2, '0');
+			}
+			minutes.value = minute.toString().padStart(2, '0');
+		}
+	}
+});
+</script>