@gcsa/console-vue 0.1.0

package/src/types/componentProps.ts

@@ -0,0 +1,692 @@
+import type { UseDatePickerReturn } from '@ark-ui/vue/date-picker';
+import type { Ref } from 'vue';
+import type { ColumnDef, SortingState } from '@tanstack/vue-table';
+import type { ZodObject, ZodTypeAny } from 'zod';
+import type {
+  GcsaButtonSize,
+  GcsaButtonVariant,
+  GcsaCascaderOption,
+  GcsaChatMarkdownMode,
+  GcsaChatMessage,
+  GcsaChatMessageRole,
+  GcsaComponentSize,
+  GcsaConsoleLocale,
+  GcsaConsoleTheme,
+  GcsaDatePickerMode,
+  GcsaDateRangeValue,
+  GcsaDateString,
+  GcsaDrawerPlacement,
+  GcsaLegacyTableColumn,
+  GcsaMenuItem,
+  GcsaMenuMode,
+  GcsaMonthRangeValue,
+  GcsaMonthString,
+  GcsaNavItem,
+  GcsaPaginationAlign,
+  GcsaPaginationLayoutPart,
+  GcsaPopupPlacement,
+  GcsaRadioOption,
+  GcsaSelectOption,
+  GcsaSelectSize,
+  GcsaStepItem,
+  GcsaTableColumn,
+  GcsaTableColumnInfo,
+  GcsaTimelineItem,
+  GcsaTransferOption
+} from '@gcsa/console-core';
+import type { GcsaFormApi } from '../composables/gcsaFormTypes';
+import type { GcsaTextCountFormatter } from '../composables/useGcsaTextCount';
+import type { GcsaIconName } from '../icons';
+import type {
+  GcsaAutoCompleteOption,
+  GcsaBreadcrumbItem,
+  GcsaCollapseItem,
+  GcsaDescriptionsItem,
+  GcsaDropdownItem,
+  GcsaPopconfirmPlacement,
+  GcsaPopoverPlacement,
+  GcsaPopoverSize,
+  GcsaTabItem,
+  GcsaToastItem,
+  GcsaTooltipPlacement,
+  GcsaTreeNode
+} from './shared';
+
+export type {
+  GcsaAutoCompleteOption,
+  GcsaBreadcrumbItem,
+  GcsaCollapseItem,
+  GcsaDescriptionsItem,
+  GcsaDropdownItem,
+  GcsaMenuItem,
+  GcsaMenuMode,
+  GcsaPopconfirmPlacement,
+  GcsaPopoverPlacement,
+  GcsaPopoverSize,
+  GcsaTabItem,
+  GcsaToastItem,
+  GcsaTooltipPlacement,
+  GcsaTreeNode
+} from './shared';
+
+export type GcsaSelectPlacement = GcsaPopupPlacement;
+export type GcsaMultiSelectPlacement = GcsaPopupPlacement;
+export type GcsaDropdownPlacement = GcsaPopupPlacement;
+
+export type GcsaBrandMarkProps = {
+  class?: string;
+};
+
+export type GcsaPortalProps = {
+  portalled?: boolean;
+  to?: string | HTMLElement;
+};
+
+export type GcsaMenuNodesProps = {
+  items: GcsaMenuItem[];
+  mode: GcsaMenuMode;
+  selectedKey: string;
+  openKeys: string[];
+  collapsed?: boolean;
+  depth: number;
+};
+
+export type GcsaToastStackProps = {
+  toasts: GcsaToastItem[];
+  zIndex?: number;
+};
+
+export type GcsaDateRangeMonthPanelProps = {
+  dp: UseDatePickerReturn['value'];
+  monthOffset: number;
+  showPrev?: boolean;
+  showNext?: boolean;
+  navLabels: { prevMonth: string; nextMonth: string };
+};
+
+export type ConsoleShellProps = {
+  navItems?: GcsaNavItem[];
+  activeKey?: string;
+  productName?: string;
+  productTagline?: string;
+  brandMark?: string;
+  title?: string;
+  eyebrow?: string;
+  subtitle?: string;
+  pageDescription?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  mobileSidebarOpen?: boolean;
+};
+
+export type ConsoleSidebarProps = {
+  items: GcsaNavItem[];
+  activeKey?: string;
+  collapsed?: boolean;
+  productName?: string;
+  productTagline?: string;
+  brandMark?: string;
+};
+
+export type ConsoleHeaderProps = {
+  title: string;
+  eyebrow?: string;
+  subtitle?: string;
+};
+
+export type ConsolePageProps = {
+  title?: string;
+  description?: string;
+};
+
+export type GcsaButtonProps = {
+  variant?: GcsaButtonVariant;
+  size?: GcsaButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  nativeType?: 'button' | 'submit' | 'reset';
+};
+
+export type GcsaBadgeProps = {
+  tone?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+  size?: 'sm' | 'md';
+};
+
+export type GcsaCardProps = {
+  title?: string;
+  bordered?: boolean;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+};
+
+export type GcsaTagProps = {
+  tone?: 'primary' | 'success' | 'warning' | 'danger';
+};
+
+export type GcsaDividerProps = {
+  className?: string;
+};
+
+export type GcsaSpaceProps = {
+  vertical?: boolean;
+};
+
+export type GcsaTypographyProps = {
+  variant?: 'title' | 'text';
+  level?: 1 | 2 | 3 | 4 | 5;
+};
+
+export type GcsaRowProps = {
+  cols?: 2 | 3 | 4;
+};
+
+export type GcsaAlertProps = {
+  type?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  description?: string;
+};
+
+export type GcsaEmptyProps = {
+  title?: string;
+  description?: string;
+};
+
+export type GcsaSpinProps = {
+  spinning?: boolean;
+};
+
+export type GcsaLoadingMaskProps = {
+  text?: Ref<string> | string;
+  background?: string;
+  customClass?: string;
+  fullscreen?: boolean;
+  visible?: Ref<boolean> | boolean;
+};
+
+export type GcsaSkeletonProps = {
+  width?: string;
+  height?: string;
+};
+
+export type GcsaAvatarProps = {
+  text?: string;
+  alt?: string;
+};
+
+export type GcsaStatisticProps = {
+  label: string;
+  value?: string | number;
+};
+
+export type GcsaProgressProps = {
+  percent?: number;
+};
+
+export type GcsaResultProps = {
+  title: string;
+  subtitle?: string;
+};
+
+export type GcsaTooltipProps = {
+  content?: string;
+  triggerLabel?: string;
+  placement?: GcsaTooltipPlacement;
+  disabled?: boolean;
+  openDelay?: number;
+  closeDelay?: number;
+  arrow?: boolean;
+  portalled?: boolean;
+  gutter?: number;
+};
+
+export type GcsaPopoverProps = {
+  title?: string;
+  triggerLabel?: string;
+  placement?: GcsaPopoverPlacement;
+  arrow?: boolean;
+  portalled?: boolean;
+  gutter?: number;
+  open?: boolean;
+  size?: GcsaPopoverSize;
+  width?: string | number;
+  minWidth?: string | number;
+  maxWidth?: string | number;
+  contentClassName?: string;
+};
+
+export type GcsaPopconfirmProps = {
+  title?: string;
+  description?: string;
+  okText?: string;
+  cancelText?: string;
+  triggerLabel?: string;
+  placement?: GcsaPopconfirmPlacement;
+  arrow?: boolean;
+  portalled?: boolean;
+  gutter?: number;
+};
+
+export type GcsaDropdownProps = {
+  items: GcsaDropdownItem[];
+  triggerLabel?: string;
+  placement?: GcsaDropdownPlacement;
+  portalled?: boolean;
+  gutter?: number;
+};
+
+export type GcsaMenuProps = {
+  items: GcsaMenuItem[];
+  selectedKey?: string;
+  defaultSelectedKey?: string;
+  openKeys?: string[];
+  defaultOpenKeys?: string[];
+  mode?: GcsaMenuMode;
+  collapsed?: boolean;
+};
+
+export type GcsaModalProps = {
+  open: boolean;
+  title?: string;
+  closable?: boolean;
+};
+
+export type GcsaDrawerSize = 'default' | 'lg';
+
+export type GcsaDrawerProps = {
+  open: boolean;
+  title?: string;
+  closable?: boolean;
+  placement?: GcsaDrawerPlacement;
+  size?: GcsaDrawerSize;
+};
+
+export type GcsaConfigProviderProps = {
+  theme?: GcsaConsoleTheme;
+  locale?: GcsaConsoleLocale;
+  syncDocument?: boolean;
+  size?: GcsaComponentSize;
+};
+
+export type GcsaFieldProps = {
+  label?: string;
+  hint?: string;
+  required?: boolean;
+  invalid?: boolean;
+  error?: string;
+};
+
+export type GcsaInputProps = {
+  modelValue?: string;
+  type?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  invalid?: boolean;
+  size?: GcsaComponentSize;
+  maxLength?: number;
+  showCount?: boolean;
+  countFormatter?: GcsaTextCountFormatter;
+  onBlur?: () => void;
+};
+
+export type GcsaInputGroupProps = {
+  size?: GcsaComponentSize;
+  disabled?: boolean;
+  invalid?: boolean;
+};
+
+export type GcsaTextareaProps = {
+  modelValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  invalid?: boolean;
+  size?: GcsaComponentSize;
+  rows?: number;
+  maxLength?: number;
+  showCount?: boolean;
+  countFormatter?: GcsaTextCountFormatter;
+  onBlur?: () => void;
+};
+
+export type GcsaSelectProps = {
+  modelValue: string;
+  options?: GcsaSelectOption[];
+  placeholder?: string;
+  invalid?: boolean;
+  placement?: GcsaSelectPlacement;
+  listMaxHeight?: number;
+  listHintThreshold?: number;
+  groupOrder?: string[];
+  portalled?: boolean;
+  sameWidth?: boolean;
+  size?: GcsaSelectSize;
+};
+
+export type GcsaMultiSelectProps = {
+  modelValue: string[];
+  options?: GcsaSelectOption[];
+  placeholder?: string;
+  invalid?: boolean;
+  placement?: GcsaMultiSelectPlacement;
+  listMaxHeight?: number;
+  listHintThreshold?: number;
+  groupOrder?: string[];
+  maxTagCount?: number;
+  portalled?: boolean;
+  sameWidth?: boolean;
+  size?: GcsaSelectSize;
+};
+
+export type GcsaAutoCompleteProps = {
+  modelValue?: string;
+  options: GcsaAutoCompleteOption[];
+  placeholder?: string;
+  listMaxHeight?: number;
+  portalled?: boolean;
+};
+
+export type GcsaCheckboxProps = {
+  modelValue?: boolean;
+  label?: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+};
+
+export type GcsaRadioGroupProps = {
+  modelValue?: string;
+  options?: GcsaRadioOption[];
+  orientation?: 'horizontal' | 'vertical';
+  invalid?: boolean;
+  disabled?: boolean;
+  name?: string;
+};
+
+export type GcsaSwitchProps = {
+  modelValue?: boolean;
+  label?: string;
+  size?: GcsaComponentSize;
+  disabled?: boolean;
+};
+
+export type GcsaInputNumberProps = {
+  modelValue?: number | null;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+  disabled?: boolean;
+  invalid?: boolean;
+  size?: GcsaComponentSize;
+  placeholder?: string;
+  controls?: 'both' | 'right' | 'none';
+  onBlur?: () => void;
+};
+
+export type GcsaDatePickerProps = {
+  modelValue?: GcsaDateString | GcsaMonthString;
+  picker?: GcsaDatePickerMode;
+  placeholder?: string;
+  locale?: GcsaConsoleLocale;
+  disabled?: boolean;
+  invalid?: boolean;
+  min?: string;
+  max?: string;
+  clearable?: boolean;
+};
+
+export type GcsaCalendarProps = {
+  value?: string;
+  locale?: GcsaConsoleLocale;
+  disabled?: boolean;
+  min?: string;
+  max?: string;
+  showToday?: boolean;
+};
+
+export type GcsaDateRangePickerProps = {
+  modelValue?: GcsaDateRangeValue | GcsaMonthRangeValue;
+  picker?: GcsaDatePickerMode;
+  placeholderStart?: string;
+  placeholderEnd?: string;
+  locale?: GcsaConsoleLocale;
+  disabled?: boolean;
+  invalid?: boolean;
+  min?: string;
+  max?: string;
+  clearable?: boolean;
+};
+
+export type GcsaDateTimePickerProps = {
+  modelValue?: string;
+  placeholder?: string;
+  locale?: GcsaConsoleLocale;
+  disabled?: boolean;
+  invalid?: boolean;
+  min?: string;
+  max?: string;
+};
+
+export type GcsaTimePickerProps = {
+  modelValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  step?: number;
+  allowClear?: boolean;
+  min?: string;
+  max?: string;
+  format?: 'HH:mm' | 'HH:mm:ss';
+};
+
+export type GcsaUploadProps = {
+  files?: File[];
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  buttonLabel?: string;
+  hint?: string;
+  maxCount?: number;
+  maxSize?: number;
+  drag?: boolean;
+  directory?: boolean;
+  dragLabel?: string;
+  uploadingLabel?: string;
+  uploadErrorLabel?: string;
+  upload?: (file: File, onProgress?: (percent: number) => void) => Promise<void> | void;
+  retryLabel?: string;
+  onProgress?: (file: File, percent: number) => void;
+};
+
+export type GcsaCollapseProps = {
+  items: GcsaCollapseItem[];
+  modelValue?: string[];
+  defaultOpenKeys?: string[];
+  accordion?: boolean;
+  bordered?: boolean;
+};
+
+export type GcsaTreeProps = {
+  nodes?: GcsaTreeNode[];
+  expandedKeys?: string[];
+  selectedKeys?: string[];
+  multiple?: boolean;
+};
+
+export type GcsaCascaderProps = {
+  modelValue?: string[];
+  options: GcsaCascaderOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  changeOnSelect?: boolean;
+  portalled?: boolean;
+};
+
+export type GcsaTransferProps = {
+  modelValue?: string[];
+  options: GcsaTransferOption[];
+  sourceTitle?: string;
+  targetTitle?: string;
+  disabled?: boolean;
+};
+
+export type GcsaImagePreviewProps = {
+  modelValue: boolean;
+  src: string;
+  alt?: string;
+};
+
+export type GcsaStepsProps = {
+  items: GcsaStepItem[];
+  current?: number;
+  direction?: 'horizontal' | 'vertical';
+  clickable?: boolean;
+};
+
+export type GcsaTimelineProps = {
+  items: GcsaTimelineItem[];
+};
+
+export type GcsaDataTableProps<T extends Record<string, unknown> = Record<string, unknown>> = {
+  data?: T[] | null;
+  columns?: Array<GcsaTableColumn<T> | ColumnDef<T, unknown>>;
+  legacyColumns?: GcsaLegacyTableColumn<T>[];
+  selectable?: boolean | ((row: T, index: number) => boolean);
+  pagination?: boolean;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  showPageSize?: boolean;
+  showJumper?: boolean;
+  pageSizeLabel?: string;
+  jumperLabel?: string;
+  paginationLayout?: string | GcsaPaginationLayoutPart[];
+  paginationAlign?: GcsaPaginationAlign;
+  showTotal?: boolean;
+  page?: number;
+  showToolbar?: boolean;
+  showCount?: boolean;
+  size?: 'sm' | 'md';
+  rowKey?: (keyof T & string) | ((row: T, index: number) => string);
+  height?: string | number;
+  maxHeight?: string | number;
+  expandable?: boolean;
+  defaultExpandAll?: boolean;
+  selectedRowKeys?: string[];
+  fixedSelection?: boolean;
+  selectionColumnWidth?: number;
+  expandColumnWidth?: number;
+  columnVisibility?: Record<string, boolean>;
+  resizable?: boolean;
+  columnWidths?: Record<string, number>;
+  treeData?: boolean;
+  childrenKey?: keyof T & string;
+  treeLazy?: boolean;
+  treeHasChildrenKey?: keyof T & string;
+  treeHasChildren?: (row: T, index: number) => boolean;
+  loadChildren?: (row: T, index: number) => Promise<T[]> | T[];
+  treeLoadingText?: string;
+  treeLoadErrorText?: string;
+  expandedRowKeys?: string[];
+  mobileMode?: 'scroll' | 'cards';
+  stripe?: boolean;
+  bordered?: boolean;
+  highlightCurrentRow?: boolean;
+  currentRowKey?: string;
+  rowClassName?: string | ((row: T, index: number) => string | undefined);
+  summary?: (rows: T[]) => Record<string, string | number | null | undefined>;
+  summaryLabel?: string;
+  total?: number;
+  serverSide?: boolean;
+  sorting?: SortingState;
+  filters?: Record<string, string>;
+  defaultSorting?: SortingState;
+  defaultFilters?: Record<string, string>;
+  loading?: boolean;
+  error?: string;
+  retryLabel?: string;
+  onTreeLoadError?: (error: unknown, row: T, index: number) => void;
+  onRowClick?: (row: T, index: number) => void;
+  onCellClick?: (row: T, column: string, value: unknown, index: number) => void;
+  onRowContextMenu?: (event: MouseEvent, row: T, index: number) => void;
+  onCellContextMenu?: (event: MouseEvent, row: T, column: string, value: unknown, index: number) => void;
+  onLegacyRowClick?: (row: T, column: GcsaTableColumnInfo, event: MouseEvent) => void;
+  onLegacyCellClick?: (row: T, column: GcsaTableColumnInfo, cell: HTMLElement, event: MouseEvent) => void;
+  onLegacyRowContextMenu?: (row: T, column: GcsaTableColumnInfo, event: MouseEvent) => void;
+  onLegacyCellContextMenu?: (row: T, column: GcsaTableColumnInfo, cell: HTMLElement, event: MouseEvent) => void;
+  onCurrentChange?: (current: T | undefined, previous: T | undefined) => void;
+  onExpandChange?: (row: T, expanded: boolean, expandedRows: T[]) => void;
+};
+
+export type GcsaFormProps = {
+  defaultValues: Record<string, unknown>;
+  schema?: ZodObject<Record<string, ZodTypeAny>>;
+  onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+  submitLabel?: string;
+  resetLabel?: string;
+  showActions?: boolean;
+};
+
+export type GcsaFormFieldProps = {
+  form: GcsaFormApi;
+  name: string;
+  label?: string;
+  hint?: string;
+  required?: boolean;
+  fieldType?: 'text' | 'boolean';
+};
+
+export type GcsaTabsProps = {
+  items: GcsaTabItem[];
+  value: string;
+  variant?: 'line' | 'soft';
+};
+
+export type GcsaPaginationProps = {
+  page: number;
+  total: number;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  showPageSize?: boolean;
+  showJumper?: boolean;
+  pageSizeLabel?: string;
+  jumperLabel?: string;
+  layout?: string | GcsaPaginationLayoutPart[];
+  align?: GcsaPaginationAlign;
+};
+
+export type GcsaBreadcrumbProps = {
+  items: GcsaBreadcrumbItem[];
+};
+
+export type GcsaDescriptionsProps = {
+  items: GcsaDescriptionsItem[];
+};
+
+export type GcsaIconProps = {
+  name: GcsaIconName;
+  size?: 'sm' | 'md';
+};
+
+export type GcsaChatPanelProps = {
+  messages: GcsaChatMessage[];
+  loading?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  sendLabel?: string;
+  sendingLabel?: string;
+  emptyText?: string;
+  renderMarkdown?: GcsaChatMarkdownMode;
+  showTimestamp?: boolean;
+  showAvatars?: boolean;
+  copyable?: boolean;
+  copyLabel?: string;
+  copySuccessLabel?: string;
+  copyErrorLabel?: string;
+  streamingCursor?: string;
+  avatarLabels?: Partial<Record<GcsaChatMessageRole, string>>;
+};
+
+export type GcsaMarkdownRendererProps = {
+  content: string;
+  inline?: boolean;
+};

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export type * from './componentProps';
+export type * from './shared';