@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/base/toast/types.ts

@@ -0,0 +1,201 @@
+import type { CSSProperties, Component } from 'vue';
+
+export type ToastTypes = 'normal' | 'action' | 'success' | 'info' | 'warning' | 'error' | 'loading' | 'default';
+
+export type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>);
+
+export interface PromiseIExtendedResult extends ExternalToast {
+	message: string | Component;
+}
+
+export type PromiseTExtendedResult<Data = any> = PromiseIExtendedResult | ((data: Data) => PromiseIExtendedResult | Promise<PromiseIExtendedResult>);
+
+export type PromiseTResult<Data = any> = string | Component | ((data: Data) => Component | string | Promise<Component | string>);
+
+export type PromiseExternalToast = Omit<ExternalToast, 'description'>;
+
+export type PromiseData<ToastData = any> = PromiseExternalToast & {
+	loading?: string | Component;
+	success?: PromiseTResult<ToastData> | PromiseTExtendedResult<ToastData>;
+	error?: PromiseTResult | PromiseTExtendedResult;
+	description?: PromiseTResult;
+	finally?: () => void | Promise<void>;
+};
+
+export interface ToastClasses {
+	toast?: string;
+	title?: string;
+	description?: string;
+	loader?: string;
+	closeButton?: string;
+	cancelButton?: string;
+	actionButton?: string;
+	success?: string;
+	error?: string;
+	info?: string;
+	warning?: string;
+	loading?: string;
+	default?: string;
+	content?: string;
+	icon?: string;
+}
+
+export interface ToastIcons {
+	success?: Component;
+	info?: Component;
+	warning?: Component;
+	error?: Component;
+	loading?: Component;
+	close?: Component;
+}
+
+export interface Action {
+	label: Component | string;
+	onClick: (event: MouseEvent) => void;
+	actionButtonStyle?: CSSProperties;
+}
+
+export interface ToastT<T extends Component = Component> {
+	id: number | string;
+	toasterId?: string;
+	title?: (() => string | Component) | string | Component;
+	type?: ToastTypes;
+	icon?: Component;
+	component?: T;
+	componentProps?: any;
+	richColors?: boolean;
+	invert?: boolean;
+	closeButton?: boolean;
+	dismissible?: boolean;
+	description?: (() => string | Component) | string | Component;
+	duration?: number;
+	delete?: boolean;
+	important?: boolean;
+	action?: Action | Component;
+	cancel?: Action | Component;
+	onDismiss?: (toast: ToastT) => void;
+	onAutoClose?: (toast: ToastT) => void;
+	promise?: PromiseT;
+	cancelButtonStyle?: CSSProperties;
+	actionButtonStyle?: CSSProperties;
+	style?: CSSProperties;
+	unstyled?: boolean;
+	class?: string;
+	classes?: ToastClasses;
+	descriptionClass?: string;
+	position?: Position;
+	closeButtonPosition?: CloseButtonPosition;
+	testId?: string;
+}
+
+export function isAction(action: Action | Component): action is Action {
+	return (action as Action).label !== undefined;
+}
+
+export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+
+export type CloseButtonPosition = Exclude<Position, 'top-center' | 'bottom-center'>;
+
+export interface HeightT {
+	height: number;
+	toastId: number | string;
+	position: Position;
+}
+
+export interface ToastOptions {
+	class?: string;
+	closeButton?: boolean;
+	descriptionClass?: string;
+	style?: CSSProperties;
+	cancelButtonStyle?: CSSProperties;
+	actionButtonStyle?: CSSProperties;
+	duration?: number;
+	unstyled?: boolean;
+	classes?: ToastClasses;
+	closeButtonAriaLabel?: string;
+	toasterId?: string;
+	closeButtonPosition?: CloseButtonPosition;
+}
+
+type Offset =
+	| {
+			top?: string | number;
+			right?: string | number;
+			bottom?: string | number;
+			left?: string | number;
+	  }
+	| string
+	| number;
+
+export interface ToasterProps {
+	id?: string;
+	invert?: boolean;
+	theme?: Theme;
+	position?: Position;
+	closeButtonPosition?: CloseButtonPosition;
+	hotkey?: string[];
+	richColors?: boolean;
+	expand?: boolean;
+	duration?: number;
+	gap?: number;
+	visibleToasts?: number;
+	closeButton?: boolean;
+	toastOptions?: ToastOptions;
+	class?: string;
+	style?: CSSProperties;
+	offset?: Offset;
+	mobileOffset?: Offset;
+	dir?: 'rtl' | 'ltr' | 'auto';
+	swipeDirections?: SwipeDirection[];
+	icons?: ToastIcons;
+	containerAriaLabel?: string;
+}
+
+export type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
+
+export interface ToastProps {
+	toast: ToastT;
+	toasts: ToastT[];
+	index: number;
+	swipeDirections?: SwipeDirection[];
+	expanded: boolean;
+	invert: boolean;
+	heights: HeightT[];
+	gap?: number;
+	position: Position;
+	closeButtonPosition?: CloseButtonPosition;
+	visibleToasts: number;
+	expandByDefault: boolean;
+	closeButton: boolean;
+	interacting: boolean;
+	style?: CSSProperties;
+	cancelButtonStyle?: CSSProperties;
+	actionButtonStyle?: CSSProperties;
+	duration?: number;
+	class: string;
+	unstyled?: boolean;
+	descriptionClass?: string;
+	loadingIcon?: Component;
+	classes?: ToastClasses;
+	icons?: ToastIcons;
+	closeButtonAriaLabel?: string;
+	defaultRichColors?: boolean;
+}
+
+export enum SwipeStateTypes {
+	SwipedOut = 'SwipedOut',
+	SwipedBack = 'SwipedBack',
+	NotSwiped = 'NotSwiped',
+}
+
+export type Theme = 'light' | 'dark' | 'system';
+
+export interface ToastToDismiss {
+	id: number | string;
+	dismiss: boolean;
+}
+
+export type ExternalToast<T extends Component = Component> = Omit<ToastT<T>, 'id' | 'type' | 'title' | 'promise' | 'delete'> & {
+	id?: number | string;
+	toasterId?: string;
+};

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

@@ -0,0 +1,175 @@
+<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 { BarChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components';
+import VChart, { THEME_KEY } from 'vue-echarts';
+import type { EChartsOption } from 'echarts';
+import { CHART_DEFAULT_COLORS, CHART_DEFAULTS, AXIS_STYLE, SPLIT_LINE_STYLE, generateTitleConfig, generateLegendConfig, generateGridConfig } from '@/utils/chart';
+
+use([CanvasRenderer, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent]);
+
+export interface BarChartSeries {
+	name: string;
+	data: number[];
+	color?: string;
+	stack?: string;
+	barWidth?: string | number;
+	barGap?: string;
+	barCategoryGap?: string;
+	showLabel?: boolean;
+	labelPosition?: 'top' | 'inside' | 'insideTop' | 'insideBottom' | 'insideLeft' | 'insideRight';
+}
+
+export interface BarChartProps {
+	xAxisData: string[];
+	series: BarChartSeries[];
+	title?: string;
+	titlePosition?: 'left' | 'center' | 'right';
+	showLegend?: boolean;
+	legendPosition?: 'left' | 'right' | 'top' | 'bottom';
+	legendOrient?: 'horizontal' | 'vertical';
+	showTooltip?: boolean;
+	tooltipTrigger?: 'axis' | 'item';
+	height?: string;
+	theme?: string;
+	colors?: string[];
+	showGrid?: boolean;
+	xAxisName?: string;
+	yAxisName?: string;
+	horizontal?: boolean;
+	barWidth?: string | number;
+	barGap?: string;
+	barCategoryGap?: string;
+	showLabel?: boolean;
+	labelPosition?: 'top' | 'inside' | 'insideTop' | 'insideBottom' | 'insideLeft' | 'insideRight';
+}
+
+const props = withDefaults(defineProps<BarChartProps>(), {
+	title: '',
+	titlePosition: CHART_DEFAULTS.titlePosition,
+	showLegend: CHART_DEFAULTS.showLegend,
+	legendPosition: CHART_DEFAULTS.legendPosition,
+	legendOrient: CHART_DEFAULTS.legendOrient,
+	showTooltip: CHART_DEFAULTS.showTooltip,
+	tooltipTrigger: 'axis',
+	height: CHART_DEFAULTS.height,
+	theme: CHART_DEFAULTS.theme,
+	colors: () => CHART_DEFAULT_COLORS,
+	showGrid: true,
+	xAxisName: '',
+	yAxisName: '',
+	horizontal: false,
+	barWidth: undefined,
+	barGap: '30%',
+	barCategoryGap: '20%',
+	showLabel: false,
+	labelPosition: 'top',
+});
+
+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: props.tooltipTrigger,
+					axisPointer: {
+						type: props.tooltipTrigger === 'axis' ? 'shadow' : 'line',
+					},
+				}
+			: undefined,
+	};
+
+	// Configure axes based on orientation
+	if (props.horizontal) {
+		// Horizontal bar chart
+		option.xAxis = {
+			type: 'value',
+			name: props.xAxisName,
+			...AXIS_STYLE,
+			...SPLIT_LINE_STYLE,
+		};
+		option.yAxis = {
+			type: 'category',
+			data: props.xAxisData,
+			name: props.yAxisName,
+			...AXIS_STYLE,
+		};
+	} else {
+		// Vertical bar chart (default)
+		option.xAxis = {
+			type: 'category',
+			data: props.xAxisData,
+			name: props.xAxisName,
+			...AXIS_STYLE,
+		};
+		option.yAxis = {
+			type: 'value',
+			name: props.yAxisName,
+			...AXIS_STYLE,
+			...SPLIT_LINE_STYLE,
+		};
+	}
+
+	// Configure series
+	option.series = props.series.map((s) => ({
+		name: s.name,
+		type: 'bar',
+		data: s.data,
+		stack: s.stack,
+		barWidth: s.barWidth === undefined ? props.barWidth : s.barWidth,
+		barGap: s.barGap === undefined ? props.barGap : s.barGap,
+		barCategoryGap: s.barCategoryGap === undefined ? props.barCategoryGap : s.barCategoryGap,
+		label: {
+			show: s.showLabel === undefined ? props.showLabel : s.showLabel,
+			position: s.labelPosition === undefined ? props.labelPosition : s.labelPosition,
+			color: '#333',
+		},
+		itemStyle: s.color
+			? {
+					color: s.color,
+				}
+			: undefined,
+		emphasis: {
+			focus: 'series',
+			itemStyle: {
+				shadowBlur: 10,
+				shadowOffsetX: 0,
+				shadowColor: 'rgba(0, 0, 0, 0.5)',
+			},
+		},
+	}));
+
+	// Add grid if enabled
+	option.grid = generateGridConfig(props.showGrid, !!props.title);
+
+	// 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,
+	});
+
+	return option;
+});
+</script>
+
+<style scoped>
+.chart {
+	width: 100%;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<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 { LineChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent } from 'echarts/components';
+import VChart, { THEME_KEY } from 'vue-echarts';
+import type { EChartsOption } from 'echarts';
+import { CHART_DEFAULT_COLORS, CHART_DEFAULTS, AXIS_STYLE, SPLIT_LINE_STYLE, generateTitleConfig, generateLegendConfig, generateGridConfig } from '@/utils/chart';
+
+use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent]);
+
+export interface LineChartSeries {
+	name: string;
+	data: number[];
+	color?: string;
+	lineStyle?: {
+		width?: number;
+		type?: 'solid' | 'dashed' | 'dotted';
+	};
+	areaStyle?: any;
+	smooth?: boolean;
+	showSymbol?: boolean;
+	symbolSize?: number;
+}
+
+export interface LineChartProps {
+	xAxisData: string[];
+	series: LineChartSeries[];
+	title?: string;
+	titlePosition?: 'left' | 'center' | 'right';
+	showLegend?: boolean;
+	legendPosition?: 'left' | 'right' | 'top' | 'bottom';
+	legendOrient?: 'horizontal' | 'vertical';
+	showTooltip?: boolean;
+	tooltipTrigger?: 'axis' | 'item';
+	height?: string;
+	theme?: string;
+	colors?: string[];
+	showGrid?: boolean;
+	xAxisName?: string;
+	yAxisName?: string;
+	smooth?: boolean;
+	showArea?: boolean;
+	showSymbol?: boolean;
+	symbolSize?: number;
+	lineWidth?: number;
+}
+
+const props = withDefaults(defineProps<LineChartProps>(), {
+	title: '',
+	titlePosition: CHART_DEFAULTS.titlePosition,
+	showLegend: CHART_DEFAULTS.showLegend,
+	legendPosition: CHART_DEFAULTS.legendPosition,
+	legendOrient: CHART_DEFAULTS.legendOrient,
+	showTooltip: CHART_DEFAULTS.showTooltip,
+	tooltipTrigger: 'axis',
+	height: CHART_DEFAULTS.height,
+	theme: CHART_DEFAULTS.theme,
+	colors: () => CHART_DEFAULT_COLORS,
+	showGrid: true,
+	xAxisName: '',
+	yAxisName: '',
+	smooth: false,
+	showArea: false,
+	showSymbol: true,
+	symbolSize: 4,
+	lineWidth: 2,
+});
+
+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: props.tooltipTrigger,
+					axisPointer: {
+						type: props.tooltipTrigger === 'axis' ? 'cross' : 'line',
+					},
+				}
+			: undefined,
+		xAxis: {
+			type: 'category',
+			data: props.xAxisData,
+			name: props.xAxisName,
+			boundaryGap: false,
+			...AXIS_STYLE,
+		},
+		yAxis: {
+			type: 'value',
+			name: props.yAxisName,
+			...AXIS_STYLE,
+			...SPLIT_LINE_STYLE,
+		},
+		series: props.series.map((s) => {
+			const defaultAreaStyle = props.showArea ? {} : undefined;
+			const areaStyle = s.areaStyle === undefined ? defaultAreaStyle : s.areaStyle;
+			return {
+				name: s.name,
+				type: 'line',
+				data: s.data,
+				smooth: s.smooth === undefined ? props.smooth : s.smooth,
+				showSymbol: s.showSymbol === undefined ? props.showSymbol : s.showSymbol,
+				symbolSize: s.symbolSize === undefined ? props.symbolSize : s.symbolSize,
+				lineStyle: s.lineStyle || {
+					width: props.lineWidth,
+				},
+				areaStyle,
+				itemStyle: s.color
+					? {
+							color: s.color,
+						}
+					: undefined,
+			};
+		}),
+	};
+
+	// Add grid if enabled
+	option.grid = generateGridConfig(props.showGrid, !!props.title);
+
+	// 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,
+	});
+
+	return option;
+});
+</script>
+
+<style scoped>
+.chart {
+	width: 100%;
+}
+</style>

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

@@ -0,0 +1,115 @@
+<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 { PieChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, LegendComponent } 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, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
+
+export interface PieChartData {
+	value: number;
+	name: string;
+	itemStyle?: {
+		color?: string;
+	};
+}
+
+export interface PieChartProps {
+	data: PieChartData[];
+	title?: string;
+	titlePosition?: 'left' | 'center' | 'right';
+	seriesName?: string;
+	showLegend?: boolean;
+	legendPosition?: 'left' | 'right' | 'top' | 'bottom' | 'center';
+	legendOrient?: 'horizontal' | 'vertical';
+	radius?: string | [string, string];
+	center?: [string, string];
+	showTooltip?: boolean;
+	tooltipFormatter?: string;
+	height?: string;
+	theme?: string;
+	colors?: string[];
+	emphasis?: any;
+}
+
+const props = withDefaults(defineProps<PieChartProps>(), {
+	title: '',
+	titlePosition: CHART_DEFAULTS.titlePosition,
+	seriesName: 'Data',
+	showLegend: CHART_DEFAULTS.showLegend,
+	legendPosition: 'bottom',
+	legendOrient: CHART_DEFAULTS.legendOrient,
+	radius: '55%',
+	center: () => ['50%', '50%'],
+	showTooltip: CHART_DEFAULTS.showTooltip,
+	tooltipFormatter: '{a} <br/>{b}: {c} ({d}%)',
+	height: CHART_DEFAULTS.height,
+	theme: CHART_DEFAULTS.theme,
+	colors: () => CHART_DEFAULT_COLORS,
+	emphasis: () => ({
+		itemStyle: {
+			shadowBlur: 10,
+			shadowOffsetX: 0,
+			shadowColor: 'rgba(0, 0, 0, 0.5)',
+		},
+	}),
+});
+
+provide(THEME_KEY, props.theme);
+
+// Compute legend data automatically from the data prop
+const legendData = computed(() => props.data.map((item) => item.name));
+
+// Build the chart option dynamically
+const chartOption = computed<EChartsOption>(() => {
+	const option: EChartsOption = {
+		color: props.colors,
+		tooltip: props.showTooltip
+			? {
+					trigger: 'item',
+					formatter: props.tooltipFormatter,
+				}
+			: undefined,
+		series: [
+			{
+				name: props.seriesName,
+				type: 'pie',
+				radius: props.radius,
+				center: props.center,
+				data: props.data,
+				emphasis: props.emphasis,
+				label: {
+					show: true,
+					formatter: '{b}: {d}%',
+				},
+			},
+		],
+	};
+
+	// Add title if provided
+	option.title = generateTitleConfig(props.title, props.titlePosition);
+
+	// Add legend if enabled
+	option.legend = generateLegendConfig({
+		showLegend: props.showLegend,
+		legendPosition: props.legendPosition as 'left' | 'right' | 'top' | 'bottom',
+		legendOrient: props.legendOrient,
+		legendData: legendData.value,
+	});
+
+	return option;
+});
+</script>
+
+<style scoped>
+.chart {
+	width: 100%;
+}
+</style>