@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/chart/Radar.vue

@@ -0,0 +1,167 @@
+<template>
+	<VChart class="chart" :option="chartOption" :style="{ height: height }" autoresize />
+</template>
+
+<script setup lang="ts">
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { RadarChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, LegendComponent, RadarComponent } from 'echarts/components';
+import VChart, { THEME_KEY } from 'vue-echarts';
+import type { EChartsOption } from 'echarts';
+import { CHART_DEFAULT_COLORS, CHART_DEFAULTS, generateTitleConfig, generateLegendConfig } from '@/utils/chart';
+
+use([CanvasRenderer, RadarChart, TitleComponent, TooltipComponent, LegendComponent, RadarComponent]);
+
+export interface RadarIndicator {
+	name: string;
+	max: number;
+	min?: number;
+}
+
+export interface RadarChartSeries {
+	name: string;
+	data: number[];
+	color?: string;
+	areaStyle?: boolean;
+	lineStyle?: {
+		width?: number;
+		type?: 'solid' | 'dashed' | 'dotted';
+	};
+	symbolSize?: number;
+}
+
+export interface RadarChartProps {
+	indicators: RadarIndicator[];
+	series: RadarChartSeries[];
+	title?: string;
+	titlePosition?: 'left' | 'center' | 'right';
+	showLegend?: boolean;
+	legendPosition?: 'left' | 'right' | 'top' | 'bottom';
+	legendOrient?: 'horizontal' | 'vertical';
+	showTooltip?: boolean;
+	height?: string;
+	theme?: string;
+	colors?: string[];
+	radarShape?: 'polygon' | 'circle';
+	splitNumber?: number;
+	axisNameGap?: number;
+	radius?: string | number;
+}
+
+const props = withDefaults(defineProps<RadarChartProps>(), {
+	title: '',
+	titlePosition: CHART_DEFAULTS.titlePosition,
+	showLegend: CHART_DEFAULTS.showLegend,
+	legendPosition: CHART_DEFAULTS.legendPosition,
+	legendOrient: CHART_DEFAULTS.legendOrient,
+	showTooltip: CHART_DEFAULTS.showTooltip,
+	height: CHART_DEFAULTS.height,
+	theme: CHART_DEFAULTS.theme,
+	colors: () => CHART_DEFAULT_COLORS,
+	radarShape: 'polygon',
+	splitNumber: 5,
+	axisNameGap: 15,
+	radius: '70%',
+});
+
+provide(THEME_KEY, props.theme);
+
+// Compute legend data automatically from series
+const legendData = computed(() => props.series.map((s) => s.name));
+
+// Build the chart option dynamically
+const chartOption = computed<EChartsOption>(() => {
+	const option: EChartsOption = {
+		color: props.colors,
+		tooltip: props.showTooltip
+			? {
+					trigger: 'item',
+					confine: true,
+				}
+			: undefined,
+	};
+
+	// Add title if provided
+	option.title = generateTitleConfig(props.title, props.titlePosition);
+
+	// Add legend if enabled
+	option.legend = generateLegendConfig({
+		showLegend: props.showLegend,
+		legendPosition: props.legendPosition,
+		legendOrient: props.legendOrient,
+		legendData: legendData.value,
+	});
+
+	// Configure radar
+	option.radar = {
+		indicator: props.indicators,
+		shape: props.radarShape,
+		splitNumber: props.splitNumber,
+		radius: props.radius,
+		axisName: {
+			color: '#666',
+			fontSize: 12,
+		},
+		axisNameGap: props.axisNameGap,
+		splitLine: {
+			lineStyle: {
+				color: '#ddd',
+			},
+		},
+		splitArea: {
+			show: true,
+			areaStyle: {
+				color: ['rgba(84, 112, 198, 0.05)', 'rgba(84, 112, 198, 0.1)'],
+			},
+		},
+		axisLine: {
+			lineStyle: {
+				color: '#ddd',
+			},
+		},
+	};
+
+	// Configure series
+	option.series = props.series.map((s) => ({
+		name: s.name,
+		type: 'radar',
+		data: [
+			{
+				value: s.data,
+				name: s.name,
+				areaStyle: s.areaStyle
+					? {
+							opacity: 0.3,
+						}
+					: undefined,
+				lineStyle: s.lineStyle || {
+					width: 2,
+				},
+				symbolSize: s.symbolSize || 6,
+				itemStyle: s.color
+					? {
+							color: s.color,
+						}
+					: undefined,
+			},
+		],
+		emphasis: {
+			lineStyle: {
+				width: 3,
+			},
+			areaStyle: {
+				opacity: 0.5,
+			},
+		},
+	}));
+
+	return option;
+});
+</script>
+
+<style scoped>
+.chart {
+	width: 100%;
+}
+</style>

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

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+export interface AccordionItemData {
+	value: string;
+	/** Main heading text */
+	title: string;
+	/** Optional sub-header text (shown below title when variant="with-sub-header") */
+	subTitle?: string;
+	/** Lucide icon name for the icon shape (variant="with-sub-header") */
+	icon?: string;
+	/** Tooltip text shown on an info icon next to the title */
+	tooltip?: string | null;
+	/** Body content – can be a string or array of paragraphs. Optional when using the #content slot. */
+	content?: string | string[];
+	/** Show required asterisk */
+	required?: boolean;
+}
+
+// ── Variants ─────────────────────────────────────────────────────────────────
+const accordionVariants = cva('w-full -my-5', {
+	variants: {
+		variant: {
+			/** Simple question-mark icon + single-line header */
+			default: '',
+			/** Circular icon shape + title + sub-header below title */
+			'with-sub-header': '',
+		},
+		size: {
+			desktop: 'rounded-none',
+			mobile: 'rounded-none',
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+		size: 'desktop',
+	},
+});
+
+type AccordionVariants = VariantProps<typeof accordionVariants>;
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+interface Props {
+	items: AccordionItemData[];
+	/** Allow multiple items open at once */
+	multiple?: boolean;
+	variant?: AccordionVariants['variant'];
+	size?: AccordionVariants['size'];
+	/** Show question-circle icon on default variant */
+	showIcon?: boolean;
+	/**
+	 * When true, keeps all accordion panel content mounted in the DOM even when closed.
+	 * Required for vee-validate to work correctly with accordion fields.
+	 */
+	keepMounted?: boolean;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	variant: 'default',
+	size: 'desktop',
+	showIcon: true,
+	multiple: false,
+	keepMounted: false,
+});
+
+const modelValue = defineModel<string | undefined>('modelValue', { required: false });
+
+// Trigger padding: desktop uses py-5, mobile uses px-4 py-3.5
+const triggerPadding = computed(() => (props.size === 'mobile' ? 'px-4 py-3.5' : 'py-5'));
+</script>
+
+<template>
+	<LazyAccordion v-model="modelValue" :type="props.multiple ? 'multiple' : 'single'" :class="cn(accordionVariants({ variant, size }), props.class)">
+		<AccordionItem
+			v-for="(item, index) in items"
+			:key="item.value"
+			:value="item.value"
+			class="border-border border-b last:border-b-0"
+			:class="{
+				'rounded-t-none': index === 0,
+				'rounded-b-none': index === items.length - 1,
+			}"
+		>
+			<!-- ── Trigger ─────────────────────────────────────────────────── -->
+			<AccordionTrigger
+				:class="
+					cn(
+						// Reset shadcn defaults, apply our own layout
+						'group flex w-full items-center justify-between gap-2 no-underline hover:no-underline',
+						triggerPadding,
+						// Active (open) state: bg-bg-tertiary (#f3f4f6 / gray-100) + heading text
+						'data-[state=open]:text-text-heading',
+						// First item rounded top
+						index === 0 ? 'rounded-t-none' : ''
+					)
+				"
+			>
+				<!-- Left: icon + heading area -->
+				<div class="flex min-w-0 flex-1 items-center gap-2">
+					<!-- Default variant: question-circle icon -->
+					<template v-if="variant === 'default' && showIcon">
+						<div class="flex size-5 shrink-0 items-center justify-center">
+							<Icon name="lucide:help-circle" class="group-data-[state=open]:text-text-heading group-data-[state=closed]:text-text-body size-5" />
+						</div>
+					</template>
+
+					<!-- With-sub-header variant: circular icon shape -->
+					<template v-else-if="variant === 'with-sub-header'">
+						<div class="bg-bg-white flex size-9 shrink-0 items-center justify-center rounded-full">
+							<Icon v-if="item.icon" :name="item.icon" class="text-text-body size-5" />
+						</div>
+					</template>
+
+					<!-- Heading (and optional sub-header) -->
+					<div class="flex min-w-0 flex-col" :class="variant === 'with-sub-header' ? 'gap-0.5' : ''">
+						<span class="text-text-heading inline-flex items-center gap-1 truncate text-base leading-6 font-semibold">
+							<span>{{ item.title }}</span>
+							<span v-if="item.required" class="text-text-fg-danger dark:text-text-fg-danger ml-0.5 text-sm font-medium">*</span>
+							<TooltipProvider v-if="item.tooltip">
+								<Tooltip>
+									<TooltipTrigger as-child>
+										<Icon name="lucide:circle-alert" class="text-text-body dark:text-text-body size-4 shrink-0" />
+									</TooltipTrigger>
+									<TooltipContent>
+										<p>{{ item.tooltip }}</p>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</span>
+						<span v-if="variant === 'with-sub-header' && item.subTitle" class="text-text-body truncate text-sm">
+							{{ item.subTitle }}
+						</span>
+					</div>
+				</div>
+
+				<!-- Right: chevron icon (overrides default shadcn icon slot) -->
+				<template #icon>
+					<Icon name="lucide:chevron-down" class="group-data-[state=open]:text-text-heading group-data-[state=closed]:text-brand-600 size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+				</template>
+			</AccordionTrigger>
+
+			<!-- ── Content ─────────────────────────────────────────────────── -->
+			<AccordionContent :force-mount="keepMounted || undefined" :class="cn(index === items.length - 1 ? 'rounded-b-none' : '')">
+				<slot :name="item.value" :item="item" :index="index" />
+			</AccordionContent>
+		</AccordionItem>
+	</LazyAccordion>
+</template>

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

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+type AlertVariant = 'success' | 'danger' | 'warning' | 'info' | 'default';
+type AlertType = 'default' | 'complex' | 'border-top' | 'small';
+
+const props = withDefaults(
+	defineProps<{
+		variant?: AlertVariant;
+		type?: AlertType;
+		title?: string;
+		description?: string;
+		badgeLabel?: string;
+		actionLabel?: string;
+		dismissible?: boolean;
+		class?: string;
+	}>(),
+	{
+		variant: 'default',
+		type: 'default',
+		badgeLabel: 'New',
+		actionLabel: 'Learn more',
+		dismissible: true,
+	}
+);
+
+const emits = defineEmits<(e: 'dismiss' | 'action') => void>();
+
+const visible = ref(true);
+
+function dismiss() {
+	visible.value = false;
+	emits('dismiss');
+}
+
+// Color tokens mapped exactly from main.css semantic variables
+const variantConfig: Record<
+	AlertVariant,
+	{
+		bg: string;
+		border: string;
+		text: string;
+		badgeBg: string;
+		badgeText: string;
+		buttonBg: string;
+		buttonText: string;
+		borderTopColor: string;
+	}
+> = {
+	success: {
+		bg: 'bg-bg-success-soft',
+		border: 'border-border-success-subtle',
+		text: 'text-text-fg-success-strong',
+		badgeBg: 'bg-emerald-100',
+		badgeText: 'text-text-fg-success-strong',
+		buttonBg: 'bg-emerald-700 hover:bg-emerald-800',
+		buttonText: 'text-white',
+		borderTopColor: '[border-top-color:var(--color-border-success-subtle)]',
+	},
+	danger: {
+		bg: 'bg-bg-danger-soft',
+		border: 'border-border-danger-subtle',
+		text: 'text-text-fg-danger-strong',
+		badgeBg: 'bg-rose-100',
+		badgeText: 'text-text-fg-danger-strong',
+		buttonBg: 'bg-rose-700 hover:bg-rose-800',
+		buttonText: 'text-white',
+		borderTopColor: '[border-top-color:var(--color-border-danger-subtle)]',
+	},
+	warning: {
+		bg: 'bg-bg-warning-soft',
+		border: 'border-border-warning-subtle',
+		text: 'text-text-fg-warning',
+		badgeBg: 'bg-orange-100',
+		badgeText: 'text-text-fg-warning',
+		buttonBg: 'bg-orange-500 hover:bg-orange-600',
+		buttonText: 'text-white',
+		borderTopColor: '[border-top-color:var(--color-border-warning-subtle)]',
+	},
+	info: {
+		bg: 'bg-bg-info-softer',
+		border: 'border-border-info-subtle',
+		text: 'text-text-fg-info',
+		badgeBg: 'bg-blue-100',
+		badgeText: 'text-text-fg-info',
+		buttonBg: 'bg-blue-700 hover:bg-blue-800',
+		buttonText: 'text-white',
+		borderTopColor: '[border-top-color:var(--color-border-info-subtle)]',
+	},
+	default: {
+		bg: 'bg-bg-secondary-soft',
+		border: 'border-border-base-medium',
+		text: 'text-text-heading',
+		badgeBg: 'bg-gray-200',
+		badgeText: 'text-text-heading',
+		buttonBg: 'bg-gray-800 hover:bg-gray-900',
+		buttonText: 'text-white',
+		borderTopColor: '[border-top-color:var(--color-border-base-medium)]',
+	},
+};
+
+const cfg = computed(() => variantConfig[props.variant]);
+</script>
+
+<template>
+	<Transition
+		enter-active-class="transition-all duration-300 ease-out"
+		enter-from-class="opacity-0 -translate-y-2"
+		enter-to-class="opacity-100 translate-y-0"
+		leave-active-class="transition-all duration-200 ease-in"
+		leave-from-class="opacity-100 translate-y-0"
+		leave-to-class="opacity-0 -translate-y-2"
+	>
+		<div v-if="visible" :class="cn(props.class)">
+			<!-- ── Small / Pill ── -->
+			<template v-if="type === 'small'">
+				<div :class="cn('inline-flex items-center gap-2 rounded-full px-2 py-1', cfg.bg, 'border', cfg.border)">
+					<!-- Badge -->
+					<div :class="cn('rounded-full px-2 py-0.5', cfg.badgeBg)">
+						<span :class="cn('text-xs font-medium', cfg.badgeText)">
+							<slot name="badge">{{ badgeLabel }}</slot>
+						</span>
+					</div>
+					<!-- Text + arrow -->
+					<div class="flex items-center gap-0.5">
+						<span :class="cn('text-sm', cfg.text)">
+							<slot />
+						</span>
+						<Icon name="lucide:chevron-right" class="h-4 w-4" :class="cfg.text" />
+					</div>
+				</div>
+			</template>
+
+			<!-- ── Complex (title + description + action button) ── -->
+			<template v-else-if="type === 'complex'">
+				<div :class="cn('flex flex-col gap-4 rounded-xl border p-4', cfg.bg, cfg.border)">
+					<!-- Description block -->
+					<div class="flex flex-col gap-2">
+						<!-- Title row -->
+						<div class="flex w-full items-center gap-2">
+							<Icon name="lucide:info" class="h-4 w-4 shrink-0" :class="cfg.text" />
+							<span :class="cn('flex-1 text-base leading-none font-medium', cfg.text)">
+								<slot name="title">{{ title }}</slot>
+							</span>
+							<DynectButton v-if="dismissible" type="button" color="ghost" size="xs" icon-only :class="cfg.text" @click="dismiss">
+								<Icon name="lucide:x" class="h-4 w-4" />
+							</DynectButton>
+						</div>
+						<!-- Description text -->
+						<p :class="cn('text-sm leading-5', cfg.text)">
+							<slot>{{ description }}</slot>
+						</p>
+					</div>
+					<!-- Action button -->
+					<div class="flex items-center justify-start">
+						<DynectButton type="button" :color="variant === 'default' ? 'dark' : variant" size="sm" left-icon="lucide:arrow-left" @click="emits('action')">
+							<slot name="action">{{ actionLabel }}</slot>
+						</DynectButton>
+					</div>
+				</div>
+			</template>
+
+			<!-- ── Border Top ── -->
+			<template v-else-if="type === 'border-top'">
+				<div :class="cn('flex flex-col gap-4 border-t-4 p-4', cfg.bg, cfg.borderTopColor)">
+					<div class="flex w-full items-center gap-2">
+						<Icon name="lucide:info" class="h-4 w-4 shrink-0" :class="cfg.text" />
+						<span :class="cn('flex-1 text-sm leading-5', cfg.text)">
+							<slot />
+						</span>
+						<DynectButton v-if="dismissible" type="button" color="ghost" size="xs" icon-only :class="cfg.text" @click="dismiss">
+							<Icon name="lucide:x" class="h-4 w-4" />
+						</DynectButton>
+					</div>
+				</div>
+			</template>
+
+			<!-- ── Default (simple: icon + text + close) ── -->
+			<template v-else>
+				<div :class="cn('flex flex-col gap-4 rounded-xl border p-4', cfg.bg, cfg.border)">
+					<div class="flex w-full items-center gap-2">
+						<Icon name="lucide:info" class="h-4 w-4 shrink-0" :class="cfg.text" />
+						<span :class="cn('flex-1 text-sm leading-5', cfg.text)">
+							<slot />
+						</span>
+						<DynectButton v-if="dismissible" type="button" color="ghost" size="xs" icon-only :class="cfg.text" @click="dismiss">
+							<Icon name="lucide:x" class="h-4 w-4" />
+						</DynectButton>
+					</div>
+				</div>
+			</template>
+		</div>
+	</Transition>
+</template>