ranui/dist/index.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

export { setTheme, getTheme, setThemeToken, clearThemeToken, setThemeTokens, initTheme } from '@/utils/theme';
export type { RanThemeName, ThemeTarget, ThemeTokenMap } from '@/utils/theme';
export { Button } from '@/components/button';
export { Icon, registerIcon, registerIcons, RAN_ICON_NAMES } from '@/components/icon';
export type { RanIconName } from '@/components/icon';
export { registerBuiltinIcons, BUILTIN_ICON_NAMES } from '@/components/icon/builtin';
export { ImageElement } from '@/components/image';
export { Input } from '@/components/input';
export { CustomMessage } from '@/components/message';
export { Skeleton } from '@/components/skeleton';
export { TabPane } from '@/components/tabpane';
export { Tabs } from '@/components/tab';
export { RadarChart } from '@/components/radar';
export { default as RanPlayer } from '@/components/player';
export { default as RanModal } from '@/components/modal';
export { Select } from '@/components/select';
export { Progress } from '@/components/progress';
export { default as RanCheckbox } from '@/components/checkbox';
export { default as RanColorPicker } from '@/components/colorpicker';
export { ICON_NAME_AMP, Loading } from '@/components/loading';
export { Math } from '@/components/math';
export { Mermaid } from '@/components/mermaid';
export { PLACEMENT_TYPE, Popover } from '@/components/popover';
export type { PlacementDirection } from '@/components/popover';
export { ARROW_TYPE, Dropdown } from '@/components/dropdown';
export { Form } from '@/components/form';
export { Card } from '@/components/card';
export { Glass } from '@/components/glass';
export { Section } from '@/components/section';
export { Router } from '@/components/router';
export { Route } from '@/components/route';
export { Link } from '@/components/link';
export { ThemeSwitch } from '@/components/theme-switch';
export { RouterCore, createRouter, useRouter, enableMpaViewTransitions, setSSGPath, clearSSGPath, getSSGPath, } from '@/utils/router';
export type { RouterConfig, RouteConfig, RouteLocation, NavigationGuard, RouteChangeHandler, ViewTransitionMode, PageSwapEvent, PageRevealEvent, } from '@/utils/router';
export { renderStaticPage, generateStaticPages } from '@/utils/ssg';
export type { SSGPage } from '@/utils/ssg';
export { I18nCore, createI18n, useI18n } from '@/utils/i18n';
export type { I18nConfig, MessageDict, LocaleMessages, TranslateParams, LocaleChangeHandler } from '@/utils/i18n';
import '@/components/button';
import '@/components/icon';
import '@/components/image';
import '@/components/input';
import '@/components/message';
import '@/components/skeleton';
import '@/components/tabpane';
import '@/components/tab';
import '@/components/radar';
import '@/components/player';
import '@/components/modal';
import '@/components/select';
import '@/components/progress';
import '@/components/checkbox';
import '@/components/colorpicker';
import '@/components/loading';
import '@/components/math';
import '@/components/mermaid';
import '@/components/popover';
import '@/components/dropdown';
import '@/components/form';
import '@/components/scratch';
import '@/components/card';
import '@/components/glass';
import '@/components/section';
import '@/components/router';
import '@/components/route';
import '@/components/link';
import '@/components/theme-switch';
import type { Button as TButton } from '@/components/button';
import type { Icon as TIcon } from '@/components/icon';
import type { ImageElement as TImage } from '@/components/image';
import type { Input as TInput } from '@/components/input';
import type { CustomMessage as TMessage } from '@/components/message';
import type { Skeleton as TSkeleton } from '@/components/skeleton';
import type { TabPane as TTabPane } from '@/components/tabpane';
import type { Tabs as TTabs } from '@/components/tab';
import type { RadarChart as TRadar } from '@/components/radar';
import type { RanPlayer as TPlayer } from '@/components/player';
import type TModal from '@/components/modal';
import type { Select as TSelect } from '@/components/select';
import type { Progress as TProgress } from '@/components/progress';
import type TCheckbox from '@/components/checkbox';
import type TColorPicker from '@/components/colorpicker';
import type { Loading as TLoading } from '@/components/loading';
import type { Math as TMath } from '@/components/math';
import type { Mermaid as TMermaid } from '@/components/mermaid';
import type { Popover as TPopover } from '@/components/popover';
import type { Dropdown as TDropdown } from '@/components/dropdown';
import type { Form as TForm } from '@/components/form';
import type { Card as TCard } from '@/components/card';
import type { Glass as TGlass } from '@/components/glass';
import type { Section as TSection } from '@/components/section';
import type { Router as TRouter } from '@/components/router';
import type { Route as TRoute } from '@/components/route';
import type { Link as TLink } from '@/components/link';
import type { ThemeSwitch as TThemeSwitch } from '@/components/theme-switch';
declare global {
    interface HTMLElementTagNameMap {
        'r-button': TButton;
        'r-icon': TIcon;
        'r-img': TImage;
        'r-input': TInput;
        'r-message': TMessage;
        'r-skeleton': TSkeleton;
        'r-tab': TTabPane;
        'r-tabs': TTabs;
        'r-radar': TRadar;
        'r-player': TPlayer;
        'r-modal': TModal;
        'r-select': TSelect;
        'r-progress': TProgress;
        'r-checkbox': TCheckbox;
        'r-colorpicker': TColorPicker;
        'r-loading': TLoading;
        'r-math': TMath;
        'r-mermaid': TMermaid;
        'r-popover': TPopover;
        'r-dropdown': TDropdown;
        'r-form': TForm;
        'r-card': TCard;
        'r-glass': TGlass;
        'r-section': TSection;
        'r-router': TRouter;
        'r-route': TRoute;
        'r-link': TLink;
        'r-theme-switch': TThemeSwitch;
    }
}
/// <reference types="vite/client" />
declare module '*.less';
declare module '*.less?inline';
declare module '*.ts';
declare module '*.svg';
declare module '*.svg?raw';
declare module '@/assets/*';
declare module '@/public/*';
declare module '@/components/*';
declare module '@/plugins/*';

declare namespace Ran {
  interface Prompt {
    content: string;
    duration?: number;
    close?: () => void;
    top?: number | string;
    zIndex?: number | string;
    getContainer?: () => HTMLElement | null;
  }

  type Hint = (options: Prompt | string | undefined | null) => void;

  interface Message {
    info: Hint;
    success: Hint;
    error: Hint;
    warning: Hint;
    toast: Hint;
  }
}

interface Ranui {
  message: Partial<Ran.Message>;
}

interface HlsPlayer {
  off: (s: string, f: Function) => void;
  on: (s: string, f: Function) => void;
  loadSource: (s: string) => void;
  attachMedia: (v: HTMLVideoElement) => void;
  destroy: () => void;
  startLoad(): () => void;
}

interface Hls {
  Events: {
    MANIFEST_LOADED: 'hlsManifestLoaded';
    ERROR: 'error';
  };
  isSupported: () => boolean;
}

type HLS = Hls & (new () => HlsPlayer);

interface Viewport {
  width: number;
  height: number;
  viewBox: Array<number>;
}
interface RenderContext {
  canvasContext: CanvasRenderingContext2D | null;
  transform: Array<number>;
  viewport: Viewport;
}

interface PDFPageProxy {
  pageNumber: number;
  getViewport: () => Viewport;
  render: (options: RenderContext) => void;
}

interface PDFDocumentProxy {
  numPages: number;
  getPage: (x: number) => Promise<PDFPageProxy>;
}

interface HTMLElement {
  mozRequestFullScreen: (options?: FullscreenOptions) => Promise<void>;
  msRequestFullscreen: (options?: FullscreenOptions) => Promise<void>;
  oRequestFullscreen: (options?: FullscreenOptions) => Promise<void>;
  webkitRequestFullscreen: (options?: FullscreenOptions) => Promise<void>;
  webkitEnterFullscreen: (options?: FullscreenOptions) => Promise<void>;
}
declare interface Document {
  msExitFullscreen: () => Promise<void>;
  mozCancelFullScreen: () => Promise<void>;
  oCancelFullScreen: () => Promise<void>;
  webkitExitFullscreen: () => Promise<void>;
}

interface MathJax {
  texReset: () => void;
  getMetricsFor: (x: HTMLElement) => object;
  tex2chtmlPromise: (x: string, y: object) => Promise<Element>;
}

declare global {
  interface Window {
    ranui: Partial<Ranui>;
    message: Partial<Ran.Message>;
    MathJax: MathJax;
    katex: {
      render: (x: string, y: HTMLElement, z: object) => void;
    };
    pdfjsLib: {
      GlobalWorkerOptions: {
        workerSrc: string;
      };
      getDocument: (x: string | ArrayBuffer) => {
        promise: Promise<PDFDocumentProxy>;
      };
    };
  }
}

enum ICON_NAME_AMP {
  DOUBLE_BOUNCE = 'double-bounce',
  ROTATE = 'rotate',
  STRETCH = 'stretch',
  CUBE = 'cube',
  DOT = 'dot',
  TRIPLE_BOUNCE = 'triple-bounce',
  SCALE_OUT = 'scale-out',
  CIRCLE = 'circle',
  CIRCLE_LINE = 'circle-line',
  SQUARE = 'square',
  PULSE = 'pulse',
  SOLAR = 'solar',
  CUBE_FOLD = 'cube-fold',
  CIRCLE_FOLD = 'circle-fold',
  CUBE_GRID = 'cube-grid',
  CIRCLE_TURN = 'circle-turn',
  CIRCLE_ROTATE = 'circle-rotate',
  CIRCLE_SPIN = 'circle-spin',
  DOT_BAR = 'dot-bar',
  DOT_CIRCLE = 'dot-circle',
  LINE = 'line',
  DOT_PULSE = 'dot-pulse',
  LINE_SCALE = 'line-scale',
  TEXT = 'text',
  CUBE_DIM = 'cube-dim',
  DOT_LINE = 'dot-line',
  ARC = 'arc',
  DROP = 'drop',
  PACMAN = 'pacman',
}
interface BaseIntrinsicElements {
  'r-loading': any & {
    name: ICON_NAME_AMP;
  };
  'r-math': any & {
    latex: string;
  };
  'r-button': any & {
    sheet: string;
    disabled: boolean | string;
    iconSize: string;
    icon: string;
    effect: boolean | string;
  };
  'r-checkbox': any & {
    disabled: boolean | string;
    checked: boolean | string;
  };
  'r-img': any & {
    fallback: string;
    src: string;
  };
  'r-input': any & {
    value: string;
    placeholder: string;
    label: string;
    status: string;
    name: string;
    icon: string;
    prefix: string;
    suffix: string;
    type: string;
    required: boolean | string;
    disabled: boolean | string;
    min: number | string;
    max: number | string;
    step: number | string;
  };
  'r-player': any & {
    src: string;
    debug: boolean | string;
    volume: number | string;
    currentTime: number | string;
    playbackRate: number | string;
  };
  'r-popover': any & {
    placement: string;
    trigger: string;
    getPopupContainerId: string;
    arrow: boolean | string;
    closePopover: () => void;
  };
  'r-content': any;
  'r-preview': any & {
    src: string;
    closeable: boolean | string;
  };
  'r-progress': any & {
    percent: number | string;
    total: number | string;
    type: string;
    animation: string;
    dot: boolean | string;
  };
  'r-radar': any & {
    abilitys: string;
    colorPolygon?: string;
    colorLine?: string;
    fillColor?: string;
    strokeColor?: string;
  };
  'r-select': any & {
    value: string;
    defaultValue?: string;
    showSearch?: boolean | string;
    type?: string;
    placement?: string;
    sheet?: string;
    getPopupContainerId?: string;
    dropdownclass?: string;
    trigger?: string;
    disabled?: boolean | string;
  };
  'r-skeleton': any;
  'r-tab': any & {
    label: string;
    icon: string;
    iconSize: string;
    key: string;
    disabled: boolean | string;
    effect: boolean | string;
  };
  'r-tabs': any & {
    align: string;
    type: string;
    active: string;
    effect: string;
  };
  'r-icon': any & {
    name?: string;
    size?: string;
    color?: string;
  };
}
namespace JSX {
  interface IntrinsicElements extends BaseIntrinsicElements {}
}

namespace React {
  namespace JSX {
    interface IntrinsicElements extends BaseIntrinsicElements {}
  }
}