ranui 0.1.10-alpha.7 → 0.2.0-alpha.0

package/dist/components/form/index.d.ts

@@ -0,0 +1,15 @@
+import { RanElement } from '@/utils/index';
+export declare class Form extends RanElement {
+    _form: HTMLFormElement;
+    _shadowDom: ShadowRoot;
+    static get observedAttributes(): string[];
+    constructor();
+    get value(): string | null;
+    set value(value: string | null);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Form;

package/dist/components/icon/index.d.ts

@@ -0,0 +1,58 @@
+import { RanElement } from '@/utils/index';
+import { EventManager } from '@/utils/builder';
+/** Register one icon. Consumer controls what gets bundled by what it imports. */
+export declare const registerIcon: (name: string, source: unknown) => void;
+/** Batch register icons. */
+export declare const registerIcons: (icons: Record<string, unknown>) => void;
+export declare class Icon extends RanElement {
+    private readonly isDev;
+    _events: EventManager;
+    static get observedAttributes(): string[];
+    _icon?: SVGElement;
+    _div: HTMLElement;
+    _shadowDom: ShadowRoot;
+    _onIconRegistered: (event: Event) => void;
+    constructor();
+    get name(): string;
+    set name(value: string);
+    get size(): string;
+    set size(value: string);
+    get color(): string;
+    set color(value: string);
+    get spin(): boolean;
+    set spin(value: boolean);
+    get decorative(): boolean;
+    set decorative(value: boolean);
+    get ariaLabel(): string;
+    set ariaLabel(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    syncA11y: () => void;
+    /**
+     * @description: 设置 icon 的 svg
+     * @return {*}
+     */
+    setIcon: () => void;
+    isSvgText: (value: string) => boolean;
+    parseSvg: (svgContent: string) => SVGElement | undefined;
+    renderSvg: (svgContent: string, iconName: string) => void;
+    /**
+     * @description: 设置 icon 的大小
+     * @return {*}
+     */
+    setSize: () => void;
+    /**
+     * @description: 设置 icon 的颜色
+     * @return {*}
+     */
+    setColor: () => void;
+    /**
+     * @description: 设置 icon 是否旋转
+     * @return {*}
+     */
+    setSpin: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/dist/components/image/index.d.ts

@@ -0,0 +1,25 @@
+import { RanElement } from '@/utils/index';
+export declare class ImageElement extends RanElement {
+    static get observedAttributes(): string[];
+    _image: HTMLImageElement | undefined;
+    _container: Element;
+    _shadowDom: ShadowRoot;
+    constructor();
+    get fallback(): string;
+    set fallback(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    /**
+     * Alternative text forwarded to the inner `<img>`. Defaults to `''` (empty),
+     * which marks the image decorative so screen readers skip it — better than a
+     * missing alt, where they announce the file name/URL. Set a description for
+     * meaningful images.
+     */
+    get alt(): string;
+    set alt(value: string);
+    handlerExternalCss: () => void;
+    listenFallback(name: string, value: string | null): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+export default ImageElement;

package/dist/components/input/index.d.ts

@@ -0,0 +1,229 @@
+import { RanElement } from '@/utils/index';
+import { EventManager } from '@/utils/builder';
+import '@/components/icon/index';
+export declare class Input extends RanElement {
+    static formAssociated: boolean;
+    _internals?: ElementInternals;
+    static get observedAttributes(): string[];
+    _events: EventManager;
+    _shadowDom: ShadowRoot;
+    _input: HTMLDivElement;
+    _label: HTMLLabelElement | undefined;
+    _inputContent: HTMLInputElement;
+    _icon: HTMLElement | undefined;
+    _message: HTMLElement | undefined;
+    constructor();
+    /**
+     * @description: 获取 input 的值
+     * @return {String}
+     */
+    get value(): string;
+    /**
+     * @description: 设置 input 的值
+     * @param {String} value
+     */
+    set value(value: string);
+    /**
+     * @description: 获取 input 的占位字符
+     * @return {String}
+     */
+    get placeholder(): string;
+    /**
+     * @description: 设置 input 的占位字符
+     * @param {String} value
+     */
+    set placeholder(value: string);
+    /**
+     * @description: input 是否为必选
+     * @return {String}
+     */
+    get required(): boolean;
+    /**
+     * @description: 设置 input 是否为必选，除非设置成 false，否则都是必填
+     * @param {*} value
+     */
+    set required(value: boolean | string);
+    /**
+     * @description: 获取 input 上 disabled 属性
+     * @return {String | null}
+     */
+    get disabled(): boolean;
+    /**
+     * @description: 设置 input 的 disabled 属性
+     * @param {String} value
+     */
+    set disabled(value: boolean | string);
+    /**
+     * @description: 获取类似于 Metiral Design 的输入体验。
+     */
+    get label(): string;
+    /**
+     * @description: 设置类似于 Metiral Design 的输入体验。
+     */
+    set label(value: string);
+    /**
+     * @description: 获取 input 框的状态
+     */
+    get status(): string;
+    /**
+     * @description: 设置 input 框的状态
+     */
+    set status(value: string);
+    /**
+     * @description: 获取下方的提示/校验文案
+     */
+    get message(): string;
+    /**
+     * @description: 设置下方的提示/校验文案（配合 status 作为非颜色线索）
+     */
+    set message(value: string);
+    /**
+     * @description: 与 form 组件联动时，收集的属性名
+     * @return {String}
+     */
+    get name(): string;
+    /**
+     * @description: 设置 name 属性
+     * @param {string} value
+     */
+    set name(value: string);
+    /**
+     * @description: 当 input 类型为 number 类型时，可以获取 min 属性
+     * @return {String}
+     */
+    get min(): string;
+    /**
+     * @description: 当 input 类型为 number 类型时，设置 min 属性
+     * @param {string} value
+     */
+    set min(value: string);
+    /**
+     * @description: 当 input 类型为 number 类型时，可以获取 max 属性
+     * @return {String}
+     */
+    get max(): string;
+    /**
+     * @description: 当 input 类型为 number 类型时，设置 max 属性
+     * @param {string} value
+     */
+    set max(value: string);
+    /**
+     * @description: 当 input 类型为 number 类型时，可以获取 step 属性
+     * @return {String}
+     */
+    get step(): string;
+    /**
+     * @description: 当 input 类型为 number 类型时，设置 step 属性
+     * @param {string} value
+     */
+    set step(value: string);
+    /**
+     * @description: 获取一个 icon
+     * @return {String}
+     */
+    get icon(): string;
+    /**
+     * @description: 设置 icon 来表示标识
+     * @param {string|null} value
+     */
+    set icon(value: string);
+    /**
+     * @description: 获取前面的 icon
+     * @return {String}
+     */
+    get prefix(): string;
+    /**
+     * @description: 设置前面的 icon 来表示标识
+     * @param {string|null} value
+     */
+    set prefix(value: string);
+    /**
+     * @description: 获取后面的 icon
+     * @return {String}
+     */
+    get suffix(): string;
+    /**
+     * @description: 设置后面的 icon 来表示标识
+     * @param {string|null} value
+     */
+    set suffix(value: string);
+    /**
+     * @description: 获取 input 的类型
+     * @return {string|null}
+     */
+    get type(): string;
+    /**
+     * @description: 设置 input 的类型
+     * @param {string|null} value
+     */
+    set type(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    /**
+     * @description: 原生的 input 方法
+     * @param {Event} event
+     */
+    customInput: (event: Event) => void;
+    /**
+     * @description: change 事件——与原生一致，在失焦（提交）时触发，而非每次输入
+     */
+    customChange: () => void;
+    /**
+     * @description: 监听 placeholder 属性函数
+     * @param {string} name
+     * @param {string} value
+     */
+    listenPlaceholder: (name: string, value: string) => void;
+    /**
+     * @description: 监听 label 属性函数
+     * @param {string} name
+     * @param {string} value
+     */
+    listenLabel: (name: string, value: string) => void;
+    /**
+     * @description: 监听 type 属性
+     * @param {string} name
+     * @param {string} value
+     */
+    listenType: (name: string, value: string) => void;
+    /**
+     * @description: 监听 status 属性
+     * @param {string} name
+     * @param {string} value
+     */
+    listenStatus: (name: string, value: string) => void;
+    /**
+     * @description: 监听 message 属性，渲染/更新字段下方的提示文案
+     * @param {string} name
+     * @param {string} value
+     */
+    listenMessage: (name: string, value: string) => void;
+    /**
+     * @description: 监听 disabled 属性
+     * @param {string} name
+     * @param {string} value
+     */
+    listenDisabled: (name: string, value: string) => void;
+    /**
+     * @description:  监听 icon 属性
+     * @param {string} name
+     * @param {string} value
+     */
+    listenIcon: (name: string, value: string, oldValue: string) => void;
+    /**
+     * @description: 处理 icon 属性的问题
+     */
+    dealIcon: () => void;
+    /**
+     * @description: 聚合监听事件
+     * @param {string} name
+     * @param {string} oldValue
+     * @param {string} newValue
+     */
+    listenEvent: (name: string, oldValue: string, newValue: string) => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+export default Input;

package/dist/components/link/index.d.ts

@@ -0,0 +1,21 @@
+import { EventManager } from '@/utils/builder';
+import { RanElement } from '@/utils/index';
+export declare class Link extends RanElement {
+    static get observedAttributes(): string[];
+    _events: EventManager;
+    _shadowDom: ShadowRoot;
+    _anchor: HTMLAnchorElement;
+    constructor();
+    get href(): string;
+    set href(v: string);
+    get replace(): boolean;
+    get sheet(): string;
+    set sheet(v: string);
+    handlerExternalCss: () => void;
+    _handleClick: (e: MouseEvent) => void;
+    _syncHref(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string, next: string): void;
+}
+export default Link;

package/dist/components/loading/index.d.ts

@@ -0,0 +1,76 @@
+import { RanElement } from '@/utils/index';
+export declare 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"
+}
+export declare class Loading extends RanElement {
+    contain: HTMLDivElement;
+    _shadowDom: ShadowRoot;
+    static get observedAttributes(): string[];
+    constructor();
+    get name(): ICON_NAME_AMP;
+    set name(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    rotateLoading: () => void;
+    stretchLoading: () => void;
+    doubleBounceLoading: () => void;
+    cubeLoading: () => void;
+    dotLoading: () => void;
+    tripleBounceLoading: () => void;
+    scaleOutLoading: () => void;
+    circleLoading: () => void;
+    circleLineLoading: () => void;
+    squareLoading: () => void;
+    pulseLoading: () => void;
+    solarLoading: () => void;
+    cubeFoldLoading: () => void;
+    circleFoldLoading: () => void;
+    cubeGridLoading: () => void;
+    circleTurnLoading: () => void;
+    circleRotateLoading: () => void;
+    circleSpinLoading: () => void;
+    dotBarLoading: () => void;
+    dotCircleLoading: () => void;
+    lineLoading: () => void;
+    dotPulseLoading: () => void;
+    lineScaleLoading: () => void;
+    textLoading: () => void;
+    cubeDimLoading: () => void;
+    dotLineLoading: () => void;
+    arcLoading: () => void;
+    dropLoading: () => void;
+    pacmanLoading: () => void;
+    createLoading: () => void;
+    connectedCallback(): void;
+    attributeChangedCallback(k: string, o: string, n: string): void;
+}
+export default Loading;

package/dist/components/math/index.d.ts

@@ -0,0 +1,16 @@
+import { RanElement } from '@/utils/index';
+export declare class Math extends RanElement {
+    contain: HTMLElement;
+    _shadowDom: ShadowRoot;
+    static get observedAttributes(): string[];
+    constructor();
+    get latex(): string;
+    set latex(value: string);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    render(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(k: string, o: string | null, n: string | null): void;
+}
+export default Math;

package/dist/components/message/container.d.ts

@@ -0,0 +1,8 @@
+export interface MessageRenderOptions {
+    top?: number | string;
+    zIndex?: number | string;
+    getContainer?: () => HTMLElement | null;
+}
+export declare const getMessageHostSelector: () => string;
+export declare const applyHostStyle: (host: HTMLElement, options?: MessageRenderOptions) => void;
+export declare const getMessageContainer: (options?: MessageRenderOptions) => HTMLDivElement | null;

package/dist/components/message/index.d.ts

@@ -0,0 +1,32 @@
+import { RanElement } from '@/utils/index';
+export declare class CustomMessage extends RanElement {
+    _info: HTMLDivElement;
+    _notice: HTMLDivElement;
+    _content: HTMLDivElement;
+    _icon?: HTMLElement;
+    _span: HTMLSpanElement;
+    _shadowDom: ShadowRoot;
+    timeId?: NodeJS.Timeout;
+    close?: () => void;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    get type(): string | null;
+    set type(value: string | null);
+    get content(): string | null;
+    set content(value: string | null);
+    get sheet(): string;
+    set sheet(value: string);
+    handlerExternalCss: () => void;
+    setA11yRole: (value: string | null) => void;
+    setIcon: (value: string) => void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+declare const message: {
+    info: (options: Ran.Prompt | string | undefined | null) => void;
+    success: (options: Ran.Prompt | string | undefined | null) => void;
+    error: (options: Ran.Prompt | string | undefined | null) => void;
+    warning: (options: Ran.Prompt | string | undefined | null) => void;
+    toast: (options: Ran.Prompt | string | undefined | null) => void;
+} | null;
+export default message;

package/dist/components/modal/index.d.ts

@@ -0,0 +1,100 @@
+import { RanElement } from '@/utils/index';
+import { EventManager } from '@/utils/builder';
+export type ModalCloseTrigger = 'mask' | 'button' | 'escape' | 'program';
+export type ModalProgrammaticAction = 'confirm' | 'cancel' | 'dismiss';
+export interface ModalProgrammaticOptions {
+    title?: string;
+    content?: string | Node;
+    okText?: string;
+    cancelText?: string;
+    showCancel?: boolean;
+    maskClosable?: boolean;
+    closeOnEsc?: boolean;
+    lockScroll?: boolean;
+    autoFocus?: boolean;
+    closable?: boolean;
+    onConfirm?: () => boolean | void | Promise<boolean | void>;
+    onCancel?: () => boolean | void | Promise<boolean | void>;
+}
+export interface ModalProgrammaticResult {
+    action: ModalProgrammaticAction;
+    trigger: ModalCloseTrigger;
+}
+export declare class Modal extends RanElement {
+    static _openStack: Modal[];
+    static _bodyScrollLockCount: number;
+    static _bodyOverflow: string;
+    static _bodyPaddingRight: string;
+    static _inertSnapshot: Map<HTMLElement, {
+        inert: boolean;
+        ariaHidden: string | null;
+    }>;
+    _events: EventManager;
+    _shadowDom: ShadowRoot;
+    _root: HTMLDivElement;
+    _mask: HTMLDivElement;
+    _dialog: HTMLDivElement;
+    _title: HTMLHeadingElement;
+    _closeBtn: HTMLButtonElement;
+    _slot: HTMLSlotElement;
+    _footer: HTMLElement;
+    _footerSlot: HTMLSlotElement;
+    _labelId: string;
+    _previousActiveElement: Element | null;
+    _isDialogOpen: boolean;
+    _scrollLocked: boolean;
+    _afterOpenTimer: number | null;
+    _afterCloseTimer: number | null;
+    static get observedAttributes(): string[];
+    constructor();
+    get open(): boolean;
+    set open(value: boolean | string | null | undefined);
+    get title(): string;
+    set title(value: string);
+    get maskClosable(): boolean;
+    set maskClosable(value: boolean | string | null | undefined);
+    get sheet(): string;
+    set sheet(value: string);
+    get closeOnEsc(): boolean;
+    set closeOnEsc(value: boolean | string | null | undefined);
+    get lockScroll(): boolean;
+    set lockScroll(value: boolean | string | null | undefined);
+    get autoFocus(): boolean;
+    set autoFocus(value: boolean | string | null | undefined);
+    get closable(): boolean;
+    set closable(value: boolean | string | null | undefined);
+    handlerExternalCss: () => void;
+    syncTitle: () => void;
+    syncClosable: () => void;
+    syncFooter: () => void;
+    getFocusableElements: () => HTMLElement[];
+    static getTopModal: () => Modal | null;
+    static pushOpenModal: (modal: Modal) => void;
+    static removeOpenModal: (modal: Modal) => void;
+    static syncBackgroundInert: () => void;
+    static lockBodyScroll: () => void;
+    static unlockBodyScroll: () => void;
+    clearAfterTimers: () => void;
+    getTransitionTimeout: () => number;
+    emitAfterOpen: () => void;
+    emitAfterClose: (trigger: ModalCloseTrigger) => void;
+    trapFocus: (event: KeyboardEvent) => void;
+    close: (trigger?: ModalCloseTrigger) => void;
+    openDialog: () => void;
+    closeDialog: () => void;
+    onMaskClick: (event: MouseEvent) => void;
+    onCloseButtonClick: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    onDocumentFocusIn: (event: FocusEvent) => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    static normalizeProgrammaticOptions: (options?: ModalProgrammaticOptions | string) => ModalProgrammaticOptions;
+    static open: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
+    static confirm: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
+    static info: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
+    static success: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
+    static warning: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
+    static error: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
+}
+export default Modal;

package/dist/components/player/core/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const PLAY_STATE_LIST: string[];
+export declare const SPEED: {
+    label: string;
+    value: number;
+}[];

package/dist/components/player/core/controller.d.ts

@@ -0,0 +1,33 @@
+export interface PlayerControllerElements {
+    host: HTMLElement;
+    container: HTMLDivElement;
+    player: HTMLDivElement;
+    playerBtn: HTMLDivElement;
+    progress: HTMLDivElement;
+    progressDot: HTMLDivElement;
+    playBtn: HTMLDivElement;
+    volumeProgress: HTMLElement;
+    fullScreenBtn: HTMLDivElement;
+    volumeIcon: HTMLDivElement;
+}
+export interface PlayerControllerHandlers {
+    onContainerClick: (e: Event) => void;
+    onPlayerBtnClick: (e: Event) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    onProgressDotMouseDown: (e: MouseEvent) => void;
+    onPlayBtnClick: (e: Event) => void;
+    onProgressClick: (e: MouseEvent) => void;
+    onProgressMouseEnter: (e: MouseEvent) => void;
+    onProgressMouseMove: (e: MouseEvent) => void;
+    onProgressMouseLeave: (e: MouseEvent) => void;
+    onPlayerMouseMove: (e: MouseEvent) => void;
+    onDocumentMouseMove: (e: MouseEvent) => void;
+    onDocumentMouseUp: (e: MouseEvent) => void;
+    onVolumeChange: (e: Event) => void;
+    onFullScreenClick: (e: Event) => void;
+    onVolumeIconClick: (e: Event) => void;
+    onFullscreenChange: () => void;
+    onResize: () => void;
+}
+export declare function bindControllerEvents(elements: PlayerControllerElements, handlers: PlayerControllerHandlers): void;
+export declare function unbindControllerEvents(elements: PlayerControllerElements, handlers: PlayerControllerHandlers): void;

package/dist/components/player/core/events.d.ts

@@ -0,0 +1,10 @@
+export declare function shouldSetLoadingOnSeeking(input: {
+    isDraggingProgress: boolean;
+    video?: HTMLVideoElement;
+}): boolean;
+export declare function shouldSetLoadingOnWaiting(input: {
+    isSeeking: boolean;
+    video?: HTMLVideoElement;
+}): boolean;
+export declare function syncPlayButtonState(playButton: HTMLElement, isPlaying: boolean): void;
+export declare function syncCenterPlayVisibility(centerPlayButton: HTMLElement, visible: boolean): void;

package/dist/components/player/core/fullscreen.d.ts

@@ -0,0 +1,5 @@
+type FullscreenMethodHost = Record<string, (() => Promise<void> | void) | undefined>;
+export declare function callFirstFullscreenMethod(host: FullscreenMethodHost, methodNames: string[]): Promise<void>;
+export declare function requestElementFullscreen(element: Element): Promise<void>;
+export declare function exitDocumentFullscreen(doc: Document): Promise<void>;
+export {};

package/dist/components/player/core/levels.d.ts

@@ -0,0 +1,20 @@
+export interface ManifestLevelLike {
+    bitrate?: number;
+    height?: number;
+    name?: string;
+    url?: string;
+}
+export interface BuildManifestLevelsInput<TLevel extends ManifestLevelLike> {
+    existingLevelMap: Map<string, string>;
+    levels: TLevel[];
+    manifestUrl: string;
+}
+export interface BuildManifestLevelsResult<TLevel extends ManifestLevelLike> {
+    levelMapEntries: Array<[string, string]>;
+    levels: Array<TLevel & {
+        name: string;
+        url: string;
+    }>;
+}
+export declare function deriveLevelName(level: ManifestLevelLike): string;
+export declare function buildManifestLevels<TLevel extends ManifestLevelLike>(input: BuildManifestLevelsInput<TLevel>): BuildManifestLevelsResult<TLevel>;