@gcsa/console-vue 0.1.0

package/src/types/shared.ts

@@ -0,0 +1,55 @@
+import type { GcsaMessageType, GcsaSelectOption } from '@gcsa/console-core';
+
+export type { GcsaMenuItem, GcsaMenuMode } from '@gcsa/console-core';
+
+export type GcsaTooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+
+export type GcsaPopoverPlacement = GcsaTooltipPlacement;
+
+export type GcsaPopconfirmPlacement = GcsaTooltipPlacement;
+
+export type GcsaPopoverSize = 'default' | 'lg';
+
+export type GcsaAutoCompleteOption = GcsaSelectOption;
+
+export type GcsaDropdownItem = {
+  key: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type GcsaCollapseItem = {
+  key: string;
+  title: string;
+  content?: string;
+  disabled?: boolean;
+};
+
+export type GcsaTreeNode = {
+  key: string;
+  label: string;
+  disabled?: boolean;
+  children?: GcsaTreeNode[];
+};
+
+export type GcsaTabItem = {
+  key: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type GcsaBreadcrumbItem = {
+  label: string;
+  href?: string;
+};
+
+export type GcsaDescriptionsItem = {
+  label: string;
+  value: string;
+};
+
+export type GcsaToastItem = {
+  id: number;
+  message: string;
+  type: GcsaMessageType;
+};

package/src/utils/gcsaDateValue.ts

@@ -0,0 +1,98 @@
+import {
+  formatGcsaDateParts,
+  formatGcsaMonthParts,
+  type GcsaDatePickerMode,
+  type GcsaDateRangeValue,
+  type GcsaMonthRangeValue
+} from '@gcsa/console-core';
+import type { GcsaSelectOption } from '@gcsa/console-core';
+import { parseDate, type DateValue } from '@ark-ui/vue/date-picker';
+
+export type GcsaDatePickerSelectCell = {
+  label: string;
+  value: number;
+  disabled?: boolean;
+};
+
+export function gcsaDatePickerCellsToOptions(cells: GcsaDatePickerSelectCell[]): GcsaSelectOption[] {
+  return cells.map(cell => ({
+    label: cell.label,
+    value: String(cell.value),
+    disabled: cell.disabled
+  }));
+}
+
+export function gcsaNormalizeDateBoundary(value: string | undefined, mode: GcsaDatePickerMode): string | undefined {
+  if (!value) return undefined;
+  if (mode === 'month' && /^\d{4}-\d{2}$/.test(value)) return `${value}-01`;
+  return value;
+}
+
+export function gcsaDateValueToOutputString(
+  value: DateValue | undefined | null,
+  mode: GcsaDatePickerMode
+): string {
+  if (!value || !('month' in value)) return '';
+  if (mode === 'month') return formatGcsaMonthParts(value.year, value.month);
+  if ('day' in value) return formatGcsaDateParts(value.year, value.month, value.day);
+  return '';
+}
+
+export function gcsaDateValueToString(value: DateValue | undefined | null): string {
+  return gcsaDateValueToOutputString(value, 'date');
+}
+
+export function gcsaStringToDateValues(
+  value: string | undefined | null,
+  mode: GcsaDatePickerMode = 'date'
+): DateValue[] | undefined {
+  if (!value) return undefined;
+  const normalized = gcsaNormalizeDateBoundary(value, mode);
+  if (!normalized) return undefined;
+  try {
+    return [parseDate(normalized)];
+  } catch {
+    return undefined;
+  }
+}
+
+export function gcsaDateRangeToDateValues(
+  range: GcsaDateRangeValue | GcsaMonthRangeValue | undefined | null,
+  mode: GcsaDatePickerMode = 'date'
+): DateValue[] | undefined {
+  if (!range) return undefined;
+  const values: DateValue[] = [];
+  for (const part of range) {
+    if (!part) continue;
+    const parsed = gcsaStringToDateValues(part, mode);
+    if (parsed?.[0]) values.push(parsed[0]);
+  }
+  return values.length ? values : undefined;
+}
+
+export function gcsaDateValuesToRange(
+  values: DateValue[] | undefined | null,
+  mode: GcsaDatePickerMode = 'date'
+): GcsaDateRangeValue | GcsaMonthRangeValue {
+  return [gcsaDateValueToOutputString(values?.[0], mode), gcsaDateValueToOutputString(values?.[1], mode)];
+}
+
+export function gcsaDatePickerFormat(
+  date: DateValue,
+  _details: { locale: string; timeZone: string },
+  mode: GcsaDatePickerMode
+): string {
+  return gcsaDateValueToOutputString(date, mode);
+}
+
+export function gcsaDatePickerParse(
+  value: string,
+  _details: { locale: string; timeZone: string },
+  mode: GcsaDatePickerMode
+): DateValue | undefined {
+  const parsed = gcsaStringToDateValues(value, mode);
+  return parsed?.[0];
+}
+
+export type { GcsaDateTimeString } from '@gcsa/console-core';
+export { gcsaJoinDateTime, gcsaSplitDateTime } from '@gcsa/console-core';

package/src/utils/gcsaTableColumns.ts

@@ -0,0 +1,92 @@
+import type { ColumnDef } from '@tanstack/vue-table';
+import type { GcsaTableColumn } from '@gcsa/console-core';
+
+export type GcsaTableCellSlotProps<T> = {
+  row: T;
+  value: unknown;
+  index: number;
+  column: string;
+};
+
+export type GcsaTableHeaderSlotProps = {
+  column: string;
+  title: string;
+};
+
+export function isGcsaTableColumn<T>(column: GcsaTableColumn<T> | ColumnDef<T, unknown>): column is GcsaTableColumn<T> {
+  return (
+    typeof column === 'object' &&
+    column !== null &&
+    'id' in column &&
+    typeof (column as GcsaTableColumn<T>).header === 'string' &&
+    !('accessorFn' in column) &&
+    !('meta' in column)
+  );
+}
+
+export function gcsaColumnSlotKey(column: GcsaTableColumn<unknown> | ColumnDef<unknown, unknown>): string {
+  if (isGcsaTableColumn(column)) {
+    return column.slot ?? column.id;
+  }
+  const meta = column.meta as { slotKey?: string } | undefined;
+  const accessorKey = 'accessorKey' in column ? column.accessorKey : undefined;
+  return meta?.slotKey ?? column.id ?? String(accessorKey ?? '');
+}
+
+export function gcsaTableColumnsToDefs<T extends Record<string, unknown>>(
+  columns: GcsaTableColumn<T>[]
+): ColumnDef<T, unknown>[] {
+  return columns.map(col => {
+    const slotKey = col.slot ?? col.id;
+    const isGroup = Boolean(col.columns?.length);
+    const accessorKey = col.accessorKey ?? col.id;
+
+    return {
+      id: col.id,
+      ...(!isGroup ? { accessorKey } : {}),
+      header: col.header,
+      ...(!isGroup ? { enableSorting: col.sortable ?? false } : {}),
+      ...(!isGroup && col.sortCompare ? { sortingFn: (rowA: { original: T }, rowB: { original: T }) => col.sortCompare!(rowA.original, rowB.original) } : {}),
+      ...(col.columns?.length ? { columns: gcsaTableColumnsToDefs(col.columns) } : {}),
+      meta: {
+        width: col.width,
+        minWidth: col.minWidth,
+        resizable: col.resizable,
+        showOverflowTooltip: col.showOverflowTooltip,
+        align: col.align,
+        fixed: col.fixed,
+        hidden: col.hidden,
+        filter: col.filter,
+        slotKey
+      },
+      cell: !isGroup && (col.cell || col.formatter)
+        ? ({ getValue, row }) => col.cell
+          ? col.cell(row.original)
+          : col.formatter!(getValue(), row.original, row.index)
+        : undefined
+    };
+  });
+}
+
+export function resolveGcsaTableColumns<T extends Record<string, unknown>>(
+  columns: Array<GcsaTableColumn<T> | ColumnDef<T, unknown>>
+): ColumnDef<T, unknown>[] {
+  if (!columns.length) return [];
+  if (isGcsaTableColumn(columns[0])) {
+    return gcsaTableColumnsToDefs(columns as GcsaTableColumn<T>[]);
+  }
+  return columns as ColumnDef<T, unknown>[];
+}
+
+export function gcsaTableCellSlotName(slotKey: string) {
+  return `cell-${slotKey}`;
+}
+
+export function gcsaTableHeaderSlotName(slotKey: string) {
+  return `header-${slotKey}`;
+}
+
+export function formatGcsaTableCellValue(value: unknown) {
+  if (value == null) return '';
+  return String(value);
+}

package/src/utils/zodValidators.ts

@@ -0,0 +1,45 @@
+import type { ZodObject, ZodTypeAny } from 'zod';
+import {
+  GCSA_DEFAULT_LOCALE,
+  getGcsaLocaleMessages,
+  type GcsaConsoleLocale
+} from '@gcsa/console-core';
+
+type ZodShape = Record<string, ZodTypeAny>;
+
+export function zodFieldValidator(
+  schema: ZodObject<ZodShape>,
+  fieldName: string,
+  locale?: GcsaConsoleLocale
+) {
+  const fallback = getGcsaLocaleMessages(locale ?? GCSA_DEFAULT_LOCALE).validationFailed;
+  return ({ value }: { value: unknown }) => {
+    const fieldSchema = schema.shape[fieldName];
+    if (!fieldSchema) return undefined;
+    const result = fieldSchema.safeParse(value);
+    if (result.success) return undefined;
+    return result.error.issues[0]?.message ?? fallback;
+  };
+}
+
+export function zodFormValidator(schema: ZodObject<ZodShape>, locale?: GcsaConsoleLocale) {
+  const fallback = getGcsaLocaleMessages(locale ?? GCSA_DEFAULT_LOCALE).formValidationFailed;
+  return ({ value }: { value: Record<string, unknown> }) => {
+    const result = schema.safeParse(value);
+    if (result.success) return undefined;
+    return result.error.issues[0]?.message ?? fallback;
+  };
+}
+
+export function zodFieldValidators(
+  schema: ZodObject<ZodShape>,
+  fieldName: string,
+  locale?: GcsaConsoleLocale
+) {
+  const validate = zodFieldValidator(schema, fieldName, locale);
+  return {
+    onBlur: validate,
+    onChange: validate,
+    onSubmit: validate
+  };
+}

package/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}