@nubisco/ui 1.53.0 → 1.53.2

package/dist/components/DataTable.d.ts

@@ -0,0 +1,131 @@
+import type { VNodeChild } from 'vue'
+import type { ESizeShort } from '../types/Size.d'
+
+/**
+ * NbDataTable: presentational, data-driven table for read-mostly application
+ * lists, modeled on the Carbon Design System Data Table. It renders full
+ * `<table>` semantics with sorting, selection, states, density, sticky header
+ * and horizontal scroll. It is NOT an editable spreadsheet. Reach for
+ * `NbSpreadsheet` when cells must be edited in place.
+ */
+
+// #region alignment / identity helpers
+/** Horizontal alignment for a column's header and body cells. */
+export type TColumnAlign = 'left' | 'center' | 'right'
+
+/**
+ * Value used to identify a row. Either the name of a property on the row, or a
+ * function deriving a stable key from the row. Keys drive selection, sorting
+ * reconciliation and Vue's `:key`.
+ */
+export type TRowKey<T> = keyof T | ((row: T) => string | number)
+// #endregion
+
+// #region column
+/**
+ * A single column definition. Custom cell content can be supplied three ways,
+ * in precedence order: the `#cell-<key>` slot, then the `render` function, then
+ * the raw value read from `row[key]`.
+ */
+export interface IDataTableColumn<T = Record<string, unknown>> {
+  /** Stable identifier, also the default property read from each row and the
+   *  value emitted in sort events / used to target the `#cell-<key>` slot. */
+  key: string
+  /** Header label shown in the `<th>`. */
+  header: string
+  /** Fixed column width. A number is treated as pixels, a string is used
+   *  verbatim (e.g. `'20%'`, `'12rem'`). Applied via `<colgroup>`. */
+  width?: string | number
+  /** Horizontal alignment of the header and its body cells. Default `left`. */
+  align?: TColumnAlign
+  /** Enables click / keyboard sorting on the header and exposes `aria-sort`. */
+  sortable?: boolean
+  /** Per-column cell renderer. Receives the row and the resolved cell value and
+   *  returns renderable content. Overridden by a `#cell-<key>` slot when both
+   *  are present. */
+  render?: (row: T, value: unknown, rowIndex: number) => VNodeChild
+  /** Extra class applied to every body cell in this column. */
+  cellClass?: string
+  /** Accessible-but-hidden columns still occupy a `<col>`. Set to hide. */
+  hidden?: boolean
+}
+// #endregion
+
+// #region sorting
+/** Sort directions. `none` clears sorting for the column. */
+export type TSortDirection = 'asc' | 'desc' | 'none'
+
+/** Controlled sort descriptor. `key` matches an `IDataTableColumn.key`. */
+export interface IDataTableSortState {
+  key: string
+  direction: TSortDirection
+}
+// #endregion
+
+// #region selection
+/** Selection mode for the leading control column. */
+export type TDataTableSelectable = 'none' | 'single' | 'multiple'
+// #endregion
+
+/**
+ * Props for `NbDataTable`. Sorting, selection and pagination are all
+ * *controlled*: the component emits intent and reflects the props you pass
+ * back, it does not mutate `rows` itself. This keeps it honest for server-side
+ * paging and sorting.
+ */
+export interface IDataTableProps<T = Record<string, unknown>> {
+  /** Column definitions, left to right. */
+  columns: IDataTableColumn<T>[]
+  /** Row data. Order is respected as-is (sort server- or parent-side). */
+  rows: T[]
+  /** Row identity. See {@link TRowKey}. */
+  rowKey: TRowKey<T>
+  /** Density. Matches the shared `ESizeShort` scale. Default `md`. */
+  size?: ESizeShort | 'sm' | 'md' | 'lg'
+  /** Controlled sort state, reflected in header UI and `aria-sort`. */
+  sortState?: IDataTableSortState | null
+  /** Row selection mode. Default `none`. */
+  selectable?: TDataTableSelectable
+  /** Controlled selected row keys (`v-model:selected`). */
+  selected?: (string | number)[]
+  /** Renders skeleton placeholder rows instead of data. */
+  loading?: boolean
+  /** Number of skeleton rows shown while `loading`. Default 5. */
+  skeletonRows?: number
+  /** Error message shown in place of the body. Overrides `empty`. */
+  error?: string
+  /** Message shown when there are no rows and not loading. */
+  emptyMessage?: string
+  /** Pins the header while the body scrolls vertically. Default true. */
+  stickyHeader?: boolean
+  /** Alternating row background (Carbon "zebra"). Default false. */
+  zebra?: boolean
+  /** Optional toolbar title. */
+  title?: string
+  /** Optional toolbar sub-text under the title. */
+  description?: string
+  /** Accessible name for the `<table>` (rendered as a visually-hidden
+   *  `<caption>` when no `title` is set). */
+  ariaLabel?: string
+}
+
+/** Payload emitted by `NbDataTable` events. */
+export interface IDataTableEmits<T = Record<string, unknown>> {
+  /** Next sort state after the user activates a sortable header. */
+  sort: [state: IDataTableSortState]
+  /** Updated selected keys (`v-model:selected`). */
+  'update:selected': [keys: (string | number)[]]
+  /** A body row was clicked (not fired for checkbox / action clicks). */
+  'row-click': [row: T, rowIndex: number]
+}
+
+export type {
+  IDataTableColumn as NbDataTableColumn,
+  IDataTableProps as NbDataTableProps,
+  IDataTableSortState as NbDataTableSortState,
+  IDataTableEmits as NbDataTableEmits,
+  TColumnAlign as NbDataTableAlign,
+  TSortDirection as NbDataTableSortDirection,
+  TDataTableSelectable as NbDataTableSelectable,
+  TRowKey as NbDataTableRowKey,
+}

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,52 @@
+import type { IReadableFieldComponent } from '../types/Props.d'
+
+interface IDatePickerProps extends IReadableFieldComponent {
+  /**
+   * Selected date as an ISO string (YYYY-MM-DD) or null.
+   * For range type, use `modelValue` for the start date and `endValue` for the end date.
+   */
+  modelValue?: string | null
+  /**
+   * Picker type:
+   * - `simple`  — text-only input, no calendar dropdown.
+   * - `single`  — text input with a calendar dropdown for picking one date.
+   * - `range`   — two inputs for selecting a start and end date.
+   */
+  type?: 'simple' | 'single' | 'range'
+  /** End date for range type (ISO string YYYY-MM-DD). */
+  endValue?: string | null
+  /** Minimum selectable date (ISO string YYYY-MM-DD). */
+  min?: string
+  /** Maximum selectable date (ISO string YYYY-MM-DD). */
+  max?: string
+  /** First day of the week: 0 = Sunday, 1 = Monday. Defaults to 1. */
+  weekStart?: 0 | 1
+  /** BCP 47 locale tag for month and weekday labels. Defaults to browser locale. */
+  locale?: string
+  /** Placeholder for the end date input (range type only). */
+  endPlaceholder?: string
+  /**
+   * Label for the end date field (range type only).
+   * When set, each field renders its own label: `label` above the start
+   * field and `endLabel` above the end field.
+   */
+  endLabel?: string
+  /**
+   * Validation error for the end date field (range type only).
+   * Marks only the end field as invalid, so users can tell which of the
+   * two fields needs correction. Takes precedence over `endWarning`.
+   */
+  endError?: string
+  /** Non-blocking caution message for the end date field (range type only). */
+  endWarning?: string
+  /**
+   * Dates that cannot be selected, in addition to `min`/`max`:
+   * either an array of ISO strings (YYYY-MM-DD) or a predicate that
+   * receives an ISO string and returns true when the date is disabled.
+   */
+  disabledDates?: string[] | ((date: string) => boolean)
+}
+
+export type { IDatePickerProps }
+
+export type { IDatePickerProps as NbDatePickerProps }

package/dist/components/Field.d.ts

@@ -0,0 +1,33 @@
+interface IFieldProps {
+  /** Label text. Omit and use the `#label` slot for a custom label. */
+  label?: string
+  /** Helper text shown under the control, muted. */
+  hint?: string
+  /**
+   * `row` (default): label sits beside the control, sharing the container's
+   * label-column spine so every field lines up. `stack`: label on its own
+   * line above a full-width control.
+   */
+  orientation?: 'row' | 'stack'
+  /**
+   * Vertical alignment of the label against the control. `center` (default)
+   * suits single-line controls; `start` top-aligns the label against a tall
+   * control such as a multiline text area.
+   */
+  align?: 'center' | 'start'
+  /**
+   * `fill` (default): the control fills the value column so every field's
+   * value shares one right edge. `fit`: the control shrinks to its content and
+   * the label takes the remaining width — for a small control such as a switch,
+   * so its short label can run wide instead of being clipped to the column.
+   */
+  control?: 'fill' | 'fit'
+  /**
+   * Id of the control the label points at. Defaults to an auto-generated id
+   * that is also exposed to the default slot as `{ id }` — bind it to the
+   * control for a proper label/control association.
+   */
+  labelFor?: string
+}
+
+export { IFieldProps }

package/dist/components/FileUploader.d.ts

@@ -0,0 +1,27 @@
+import { IDefaultProps } from '../types/Props.d'
+import { EVariant } from '../types/Variants.d'
+
+enum EFileUploaderStatus {
+  Idle = 'idle',
+  Loading = 'loading',
+  Success = 'success',
+}
+
+interface IFileItem {
+  file: File
+  status: EFileUploaderStatus
+  error?: string
+}
+
+interface IFileUploaderProps extends IDefaultProps {
+  heading?: string
+  description?: string
+  buttonLabel?: string
+  variant?: EVariant
+  accept?: string
+  multiple?: boolean
+  maxSize?: number
+  disabled?: boolean
+}
+
+export { EFileUploaderStatus, IFileItem, IFileUploaderProps }

package/dist/components/FileUploader.vue.d.ts

@@ -1,4 +1,4 @@
-import { EVariant } from '@/types/Variants.d';
+import { EVariant } from '../types/Variants.d';
 import { EFileUploaderStatus, IFileItem, IFileUploaderProps } from './FileUploader.d';
 /** Programmatically set file status (useful after async upload). */
 declare function setFileStatus(index: number, status: IFileItem['status'], error?: string): void;

package/dist/components/Flag.d.ts

@@ -0,0 +1,9 @@
+import { ESizePixel } from '../types/Size.d'
+
+interface IFlagProps {
+  name: string
+  size?: ESizePixel | string | number
+  clickable?: boolean
+}
+
+export { ESizePixel, IFlagProps }

package/dist/components/Form.d.ts

@@ -0,0 +1,5 @@
+interface IFormProps {
+  title?: string
+}
+
+export { IFormProps }

package/dist/components/Grid.d.ts

@@ -0,0 +1,345 @@
+import type { PropType } from 'vue'
+
+// Breakpoint names — mobile-first (min-width)
+export type TBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
+// Grid direction types
+export type TGridType = 'row' | 'col' | 'row-reverse' | 'col-reverse'
+export type TGridTypeResponsive = Partial<Record<TBreakpoint, TGridType>>
+export type TGridTypeFn = () => TGridType
+export type TGridTypeInput = TGridType | TGridTypeResponsive | TGridTypeFn
+
+// Alignment types
+export type TGridAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch'
+export type TGridAlignResponsive = Partial<Record<TBreakpoint, TGridAlign>>
+export type TGridAlignFn = () => TGridAlign
+export type TGridAlignInput = TGridAlign | TGridAlignResponsive | TGridAlignFn
+
+// Justify types
+export type TGridJustify =
+  | 'around'
+  | 'between'
+  | 'center'
+  | 'end'
+  | 'evenly'
+  | 'start'
+export type TGridJustifyResponsive = Partial<Record<TBreakpoint, TGridJustify>>
+export type TGridJustifyFn = () => TGridJustify
+export type TGridJustifyInput =
+  | TGridJustify
+  | TGridJustifyResponsive
+  | TGridJustifyFn
+
+// Wrap types
+export type TGridWrap = 'nowrap' | 'wrap' | 'reverse'
+export type TGridWrapResponsive = Partial<Record<TBreakpoint, TGridWrap>>
+export type TGridWrapFn = () => TGridWrap
+export type TGridWrapInput = TGridWrap | TGridWrapResponsive | TGridWrapFn
+
+// Gap types
+export type TGapSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+export type TGridGap = TGapSize | Partial<Record<TBreakpoint, TGapSize>>
+export type TGridGapFn = () => TGapSize
+export type TGridGapInput =
+  | TGapSize
+  | Partial<Record<TBreakpoint, TGapSize>>
+  | TGridGapFn
+
+// Grid columns (1-16)
+export type TGridColumns =
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+export type TGridColumnsResponsive = Partial<Record<TBreakpoint, TGridColumns>>
+export type TGridColumnsFn = () => TGridColumns
+export type TGridColumnsInput =
+  | TGridColumns
+  | TGridColumnsResponsive
+  | TGridColumnsFn
+
+// Grid shift (0-15)
+export type TGridShift =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+export type TGridShiftResponsive = Partial<Record<TBreakpoint, TGridShift>>
+export type TGridShiftFn = () => TGridShift
+export type TGridShiftInput = TGridShift | TGridShiftResponsive | TGridShiftFn
+
+// Visible types
+export type TGridVisibleResponsive = Partial<Record<TBreakpoint, boolean>>
+export type TGridVisibleFn = () => boolean
+export type TGridVisibleInput =
+  | boolean
+  | TGridVisibleResponsive
+  | TGridVisibleFn
+
+// Boolean responsive type (for first, last, reverse — array of breakpoints, not objects)
+export type TBooleanResponsive = boolean | TBreakpoint[]
+
+// Grid mode
+export type TGridMode = 'wide' | 'narrow' | 'condensed'
+
+// Class collection type
+export type TClassCollection = Record<string, boolean>
+
+// Handler context for class generation
+export interface IHandlerContext {
+  collection: TClassCollection
+  breakpoint?: string
+  classMap?: Record<string, string>
+}
+
+// Component props interface
+export interface IGridProps {
+  id?: string | null
+  is?: string
+  dir?: TGridTypeInput
+  align?: TGridAlignInput | null
+  justify?: TGridJustifyInput | null
+  gap?: TGridGapInput | null
+  grid?: TGridColumnsInput | null
+  shift?: TGridShiftInput | null
+  wrap?: TGridWrapInput | null
+  first?: TBooleanResponsive | null
+  last?: TBooleanResponsive | null
+  visible?: TGridVisibleInput | null
+  reverse?: TBooleanResponsive
+  grow?: boolean | null
+  flex?: boolean | null
+  shrink?: boolean | null
+  distributed?: boolean
+  mode?: TGridMode
+  tabIndex?: string | null
+}
+
+// Prop definitions for defineProps
+export const gridPropDefinitions = {
+  id: {
+    type: String as PropType<string>,
+    default: null,
+  },
+
+  is: {
+    type: String as PropType<string>,
+    default: 'div',
+  },
+
+  dir: {
+    type: [String, Object, Function] as PropType<TGridTypeInput>,
+    default: 'row',
+    validator: (value: TGridTypeInput): boolean => {
+      if (typeof value === 'function') return true
+      if (typeof value === 'string') {
+        return (['row', 'col', 'row-reverse', 'col-reverse'] as const).includes(
+          value as TGridType,
+        )
+      }
+      return Object.values(value).every((v) =>
+        (['row', 'col', 'row-reverse', 'col-reverse'] as const).includes(
+          v as TGridType,
+        ),
+      )
+    },
+  },
+
+  align: {
+    type: [String, Object, Function] as PropType<TGridAlignInput>,
+    default: null,
+    validator: (value: TGridAlignInput): boolean => {
+      if (value == null || typeof value === 'function') return true
+      if (typeof value === 'string') {
+        return (
+          ['start', 'end', 'center', 'baseline', 'stretch'] as const
+        ).includes(value as TGridAlign)
+      }
+      return Object.values(value).every((v) =>
+        (['start', 'end', 'center', 'baseline', 'stretch'] as const).includes(
+          v as TGridAlign,
+        ),
+      )
+    },
+  },
+
+  justify: {
+    type: [String, Object, Function] as PropType<TGridJustifyInput>,
+    default: null,
+    validator: (value: TGridJustifyInput): boolean => {
+      if (value == null || typeof value === 'function') return true
+      if (typeof value === 'string') {
+        return (
+          ['around', 'between', 'center', 'end', 'evenly', 'start'] as const
+        ).includes(value as TGridJustify)
+      }
+      return Object.values(value).every((v) =>
+        (
+          ['around', 'between', 'center', 'end', 'evenly', 'start'] as const
+        ).includes(v as TGridJustify),
+      )
+    },
+  },
+
+  gap: {
+    type: [String, Object, Function] as PropType<TGridGapInput>,
+    default: null,
+    validator: (value: TGridGapInput): boolean => {
+      if (value == null || typeof value === 'function') return true
+      const validSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const
+      if (typeof value === 'string') {
+        return validSizes.includes(value as TGapSize)
+      }
+      return Object.values(value).every((v) =>
+        validSizes.includes(v as TGapSize),
+      )
+    },
+  },
+
+  grid: {
+    type: [Number, String, Object, Function] as PropType<TGridColumnsInput>,
+    default: null,
+    validator: (value: TGridColumnsInput): boolean => {
+      if (value == null || typeof value === 'function') return true
+      const isValidColumn = (v: number | string) => {
+        const num = typeof v === 'string' ? parseInt(v, 10) : v
+        return num >= 1 && num <= 16 && !isNaN(num)
+      }
+
+      if (typeof value === 'number' || typeof value === 'string') {
+        return isValidColumn(value)
+      }
+      return Object.values(value).every(isValidColumn)
+    },
+  },
+
+  shift: {
+    type: [Number, String, Object, Function] as PropType<TGridShiftInput>,
+    default: null,
+    validator: (value: TGridShiftInput): boolean => {
+      if (value == null || typeof value === 'function') return true
+      const isValidShift = (v: number | string) => {
+        const num = typeof v === 'string' ? parseInt(v, 10) : v
+        return num >= 0 && num <= 15 && !isNaN(num)
+      }
+
+      if (typeof value === 'number' || typeof value === 'string') {
+        return isValidShift(value)
+      }
+      return Object.values(value).every(isValidShift)
+    },
+  },
+
+  wrap: {
+    type: [String, Object, Function] as PropType<TGridWrapInput>,
+    default: null,
+    validator: (value: TGridWrapInput): boolean => {
+      if (value == null || typeof value === 'function') return true
+      if (typeof value === 'string') {
+        return (['nowrap', 'wrap', 'reverse'] as const).includes(
+          value as TGridWrap,
+        )
+      }
+      return Object.values(value).every((v) =>
+        (['nowrap', 'wrap', 'reverse'] as const).includes(v as TGridWrap),
+      )
+    },
+  },
+
+  first: {
+    type: [Boolean, Array] as PropType<TBooleanResponsive>,
+    default: null,
+    validator: (value: TBooleanResponsive): boolean => {
+      if (value == null) return true
+      if (typeof value === 'boolean') return true
+      const validBreakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const
+      return value.every((bp) => validBreakpoints.includes(bp as TBreakpoint))
+    },
+  },
+
+  last: {
+    type: [Boolean, Array] as PropType<TBooleanResponsive>,
+    default: null,
+    validator: (value: TBooleanResponsive): boolean => {
+      if (value == null) return true
+      if (typeof value === 'boolean') return true
+      const validBreakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const
+      return value.every((bp) => validBreakpoints.includes(bp as TBreakpoint))
+    },
+  },
+
+  visible: {
+    type: [Boolean, Object, Function] as PropType<TGridVisibleInput>,
+    default: null,
+  },
+
+  reverse: {
+    type: [Boolean, Array] as PropType<TBooleanResponsive>,
+    default: false,
+    validator: (value: TBooleanResponsive): boolean => {
+      if (value == null) return true
+      if (typeof value === 'boolean') return true
+      const validBreakpoints = ['sm', 'md', 'lg', 'xl', 'xxl'] as const
+      return value.every((bp) => validBreakpoints.includes(bp as TBreakpoint))
+    },
+  },
+
+  grow: {
+    type: Boolean as PropType<boolean>,
+    default: null,
+  },
+
+  flex: {
+    type: Boolean as PropType<boolean>,
+    default: null,
+  },
+
+  shrink: {
+    type: Boolean as PropType<boolean>,
+    default: null,
+  },
+
+  distributed: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+
+  mode: {
+    type: String as PropType<TGridMode>,
+    default: 'wide',
+    validator: (value: string): boolean => {
+      return (['wide', 'narrow', 'condensed'] as const).includes(
+        value as TGridMode,
+      )
+    },
+  },
+
+  tabIndex: {
+    type: String as PropType<string>,
+    default: null,
+  },
+}

package/dist/components/Icon.d.ts

@@ -0,0 +1,59 @@
+import { ESize } from '../types/Size.d'
+
+enum EAnimation {
+  SwingRight = 'swing-right',
+  Wobble = 'wobble',
+  Expand = 'expand',
+  Refresh = 'refresh',
+  Heart = 'heart',
+  Undo = 'undo',
+  Italic = 'italic',
+  Cog = 'cog',
+  Wrench = 'wrench',
+  Mouse = 'mouse-pointer',
+  Magic = 'magic',
+  Lock = 'lock',
+  Unlock = 'unlock',
+  Hourglass = 'hourglass',
+  Eraser = 'eraser',
+  Rocket = 'rocket',
+  Times = 'times',
+}
+
+enum EAnimationMode {
+  Hover = 'hover',
+  Always = 'always',
+}
+
+enum EWeight {
+  Thin = 'thin',
+  Light = 'light',
+  Regular = 'regular',
+  Bold = 'bold',
+  Fill = 'fill',
+  Duotone = 'duotone',
+}
+
+enum EIconSize {
+  XXL = 92,
+  XL = 60,
+  LG = 20,
+  MD = 16,
+  SM = 14,
+  XS = 12,
+  XXS = 8,
+}
+
+interface IIconProps {
+  name: string
+  size?: ESize | string | number
+  animation?: EAnimation | null
+  animationMode?: EAnimationMode
+  color?: string
+  weight?: EWeight
+  title?: string
+  clickable?: boolean
+  hoverable?: boolean
+}
+
+export { EAnimation, EAnimationMode, EWeight, EIconSize, IIconProps }

package/dist/components/Icon.vue.d.ts

@@ -1,4 +1,4 @@
-import { ESize } from '@/types/Size.d';
+import { ESize } from '../types/Size.d';
 import { EAnimationMode, EWeight, IIconProps } from './Icon.d';
 declare const __VLS_export: import("vue").DefineComponent<IIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;