ranui 0.1.10-alpha.2 → 0.1.10-alpha.4

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

@@ -0,0 +1,209 @@
+declare const Input_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class Input extends Input_base {
+    static get observedAttributes(): string[];
+    _input: HTMLDivElement;
+    _label: HTMLLabelElement | undefined;
+    _inputContent: HTMLInputElement;
+    _icon: 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(): string;
+    /**
+     * @description: 设置 input 是否为必选，除非设置成 false，否则都是必填
+     * @param {*} value
+     */
+    set required(value: string);
+    /**
+     * @description: 获取 input 上 disabled 属性
+     * @return {String | null}
+     */
+    get disabled(): string;
+    /**
+     * @description: 设置 input 的 disabled 属性
+     * @param {String} value
+     */
+    set disabled(value: 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: 与 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);
+    /**
+     * @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: 监听 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;
+    disconnectCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}
+declare const _default: import("@/utils/index").CustomErrorType;
+export default _default;

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

@@ -0,0 +1,77 @@
+export declare enum 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"
+}
+declare const Loading_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class Loading extends Loading_base {
+    contain: HTMLDivElement;
+    static get observedAttributes(): string[];
+    constructor();
+    get name(): NAME_AMP;
+    set name(value: string);
+    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;
+    disconnectCallback(): void;
+    attributeChangedCallback(k: string, o: string, n: string): void;
+}
+declare const _default: import("@/utils/index").CustomErrorType;
+export default _default;

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

@@ -0,0 +1,17 @@
+declare const Math_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class Math extends Math_base {
+    contain: HTMLDivElement;
+    static get observedAttributes(): string[];
+    constructor();
+    get latex(): string;
+    set latex(value: string);
+    render(): void;
+    connectedCallback(): void;
+    disconnectCallback(): void;
+    attributeChangedCallback(k: string, o: string, n: string): void;
+}
+declare const _default: Promise<import("@/utils/index").CustomErrorType>;
+export default _default;

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

@@ -0,0 +1,16 @@
+/// <reference types="./typings.d.ts" />
+import '@/components/icon';
+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;
+} | {
+    info?: undefined;
+    success?: undefined;
+    error?: undefined;
+    warning?: undefined;
+    toast?: undefined;
+};
+export default message;

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

@@ -0,0 +1,2 @@
+declare const _default: void;
+export default _default;

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

@@ -0,0 +1,238 @@
+/// <reference types="node" />
+import '@/assets/js/hls.js';
+import type { Progress } from '@/components/progress';
+import '@/components/select';
+import './index.less';
+type Callback = (...args: unknown[]) => unknown;
+type EventName = string | symbol;
+type EventItem = {
+    name?: string | symbol;
+    callback: Callback;
+    initialCallback?: Callback;
+};
+export declare class SHook {
+    private _events;
+    constructor();
+    tap: (eventName: EventName, eventItem: EventItem | Callback) => void;
+    call: (eventName: EventName, ...args: Array<unknown>) => void;
+    callSync: (eventName: EventName, ...args: Array<unknown>) => Promise<void>;
+    once: (eventName: EventName, eventItem: EventItem | Callback) => void;
+    off: (eventName: EventName, eventItem: EventItem | Callback) => void;
+}
+export interface HlsPlayer {
+    startLoad(): () => void;
+    off: (s: string, f: Function) => void;
+    on: (s: string, f: Function) => void;
+    loadSource: (s: string) => void;
+    attachMedia: (v: HTMLVideoElement) => void;
+    destroy: () => void;
+}
+export interface Level {
+    audioCodec: string;
+    bitrate: number;
+    height: number;
+    width: number;
+    name: string;
+    url: string;
+    videoCodec: string;
+}
+export interface Context {
+    action: SHook;
+    currentState: string;
+    duration: number;
+    currentTime: number;
+    volume: number;
+    playbackRate: number;
+    fullScreen: boolean;
+    levels: Partial<Level>[];
+    url: string;
+    levelMap: Map<string, string>;
+    clarity: string;
+}
+declare const RanPlayer_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class RanPlayer extends RanPlayer_base {
+    ctx: Context;
+    _player: HTMLDivElement;
+    _container: HTMLDivElement;
+    _slot: HTMLSlotElement;
+    _playerController: HTMLDivElement;
+    _playerBtn: HTMLDivElement;
+    _progress: HTMLDivElement;
+    _progressDot: HTMLDivElement;
+    _progressWrap: HTMLDivElement;
+    _progressWrapValue: HTMLDivElement;
+    requestAnimationFrameId?: number;
+    moveProgress: {
+        percentage: number;
+        mouseDown: boolean;
+    };
+    _playerControllerBottom: HTMLDivElement;
+    _playerControllerBottomRight: HTMLDivElement;
+    _playerControllerBottomLeft: HTMLDivElement;
+    _playerControllerBottomPlayBtn: HTMLDivElement;
+    _playerControllerBottomTimeCurrent: HTMLDivElement;
+    _playerControllerBottomTimeDuration: HTMLDivElement;
+    _playerControllerBottomTimeDivide: HTMLDivElement;
+    _playControllerBottomClarity: HTMLElement;
+    _playControllerBottomSpeed: HTMLDivElement;
+    _playControllerBottomSpeedIcon: HTMLDivElement;
+    _playControllerBottomVolumeProgress: Progress;
+    _playControllerBottomRightFullScreen: HTMLDivElement;
+    _playControllerBottomVolume: HTMLDivElement;
+    _playControllerBottomSpeedPopover: HTMLElement;
+    controllerBarTimeId?: NodeJS.Timeout;
+    _playerTip: HTMLDivElement;
+    _playerTipTime: HTMLDivElement;
+    _playerTipText: HTMLDivElement;
+    _volume?: number;
+    _video?: HTMLVideoElement;
+    _hls?: HlsPlayer;
+    static get observedAttributes(): string[];
+    /**
+     * @description: 初始化 view 和 video 的全局上下文
+     * @return {*}
+     */
+    constructor();
+    get src(): string;
+    set src(value: string);
+    get debug(): string;
+    set debug(value: string);
+    get volume(): string;
+    set volume(value: string);
+    get currentTime(): string;
+    set currentTime(value: string);
+    get playbackRate(): string;
+    set playbackRate(value: string);
+    changeClarityToSetVideo: () => void;
+    changeClarity: (e: Event) => void;
+    createClaritySelect: () => void;
+    manifestLoaded: (type: string, data: {
+        levels: Level[];
+        url: string;
+    }) => void;
+    /**
+     * @description: 初始化 video 和更新 video 方法
+     * @return {*}
+     */
+    updatePlayer: () => void;
+    hlsError: (event: unknown, data: unknown) => void;
+    change: (name: string, value: unknown) => void;
+    onCanplay: (e: Event) => void;
+    onCanplaythrough: (e: Event) => void;
+    onComplete: (e: Event) => void;
+    onDurationchange: (e: Event) => void;
+    onEmptied: (e: Event) => void;
+    onEnded: (e: Event) => void;
+    onError: (e: Event) => void;
+    onLoadedmetadata: (e: Event) => void;
+    onLoadstart: (e: Event) => void;
+    onProgress: (e: Event) => void;
+    onRatechange: (e: Event) => void;
+    onSeeked: (e: Event) => void;
+    onSeeking: (e: Event) => void;
+    onStalled: (e: Event) => void;
+    onSuspend: (e: Event) => void;
+    onLoadeddata: (e: Event) => void;
+    onTimeupdate: (e: Event) => void;
+    onVolumechange: (e: Event) => void;
+    onWaiting: (e: Event) => void;
+    onPlay: (e: Event) => void;
+    onPlaying: (e: Event) => void;
+    onPause: (e: Event) => void;
+    clearListenerEvent: () => void;
+    /**
+     * @description: 用户行为和 video 之间的交互
+     * @return {*}
+     */
+    listenEvent: () => void;
+    showControllerBar: (e?: MouseEvent) => void;
+    /**
+     * @description: 进度条点击事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    progressClick: (e: MouseEvent) => void;
+    /**
+     * @description: 进度条鼠标按下事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    progressDotMouseDown: (e: MouseEvent) => void;
+    /**
+     * @description: 进度条鼠标移动事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    progressDotMouseMove: (e: MouseEvent) => void;
+    /**
+     * @description: 进度条鼠标松开事件
+     * @param {MouseEvent} e
+     * @return {*}
+     */
+    progressDotMouseUp: () => void;
+    /**
+     * @description: 更新页面样式
+     * @param {Function} fn
+     * @return {*}
+     */
+    requestAnimationFrame: (fn: Function) => void;
+    /**
+     * @description: 取消页面动画
+     * @param {Function} fn
+     * @return {*}
+     */
+    cancelAnimationFrame: () => void;
+    /**
+     * @description: 更新进度条
+     * @param {*} void
+     * @return {*}
+     */
+    updateCurrentProgress: () => void;
+    changeAttribute: (k: string, o: string, n: string, attribute: string, callback: Function) => void;
+    /**
+     * @description: 点击整个视频时，触发的事件
+     * @param {*} void
+     * @return {*}
+     */
+    dispatchClickPlayerContainerAction: (e: Event) => void;
+    /**
+     * @description: 空格事件
+     * @param {KeyboardEvent} e
+     * @return {*}
+     */
+    SpaceKeyDown: (e: KeyboardEvent) => void;
+    /**
+     * @description: 点击 player-btn，触发的事件
+     * @param {*} void
+     * @return {*}
+     */
+    dispatchClickPlayerBtnAction: (e: Event) => void;
+    changeVolumeProgress: (e: Event) => void;
+    customRequestFullscreen: (options?: FullscreenOptions) => Promise<void>;
+    customExitFullscreen: () => Promise<void>;
+    openFullScreen: () => void;
+    changeSpeed: (e: Event) => void;
+    progressMouseEnter: (e: MouseEvent) => void;
+    progressMouseLeave: (e: MouseEvent) => void;
+    progressMouseMove: (e: MouseEvent) => void;
+    changePlayerVolume: () => void;
+    resize: () => void;
+    fullScreenChange: () => void;
+    getPlaybackRate: () => number;
+    setPlaybackRate: (n: number) => number;
+    setVolume: (n: number) => number;
+    getVolume: () => number;
+    setCurrentTime: (n: number) => number;
+    getCurrentTime: () => number;
+    getTotalTime: () => number;
+    play: (n?: number) => void;
+    pause: () => void;
+    connectedCallback(): void;
+    disconnectCallback(): void;
+    attributeChangedCallback(k: string, o: string, n: string): void;
+}
+declare const _default: typeof RanPlayer | undefined;
+export default _default;

package/dist/components/popover/content/index.d.ts

@@ -0,0 +1,16 @@
+declare const Content_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class Content extends Content_base {
+    observer: MutationObserver;
+    _shadowDom: ShadowRoot;
+    _slot: HTMLSlotElement;
+    constructor();
+    callback: (mutations: MutationRecord[], observer: MutationObserver) => void;
+    onChange: (mutation: MutationRecord) => void;
+    connectedCallback(): void;
+    disconnectCallback(): void;
+}
+declare const _default: import("@/utils/index").CustomErrorType;
+export default _default;

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

@@ -0,0 +1,59 @@
+/// <reference types="node" />
+import '@/components/popover/content';
+import '@/components/dropdown';
+declare const Popover_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class Popover extends Popover_base {
+    _slot: HTMLSlotElement;
+    popoverBlock: HTMLDivElement;
+    popoverContent?: HTMLElement;
+    popoverInner?: HTMLDivElement;
+    popoverInnerBlock?: HTMLDivElement;
+    _shadowDom: ShadowRoot;
+    dropDownInTimeId?: NodeJS.Timeout;
+    dropDownOutTimeId?: NodeJS.Timeout;
+    removeTimeId?: NodeJS.Timeout;
+    static get observedAttributes(): string[];
+    constructor();
+    get placement(): string;
+    set placement(value: string);
+    get arrow(): string;
+    set arrow(value: string);
+    get trigger(): string;
+    set trigger(value: string);
+    get getPopupContainerId(): string;
+    set getPopupContainerId(value: string);
+    createContent: (content: HTMLCollection) => void;
+    watchContent: (e: Event) => void;
+    /**
+     * @description: 焦点移除的情况，需要移除下拉框
+     * @return {*}
+     */
+    blur: () => void;
+    removeDropDownTimeId: () => void;
+    /**
+     * @description: 添加 dropdown
+     * @return {*}
+     */
+    setDropdownDisplayBlock: () => void;
+    /**
+     * @description: 移除 select dropdown
+     * @return {*}
+     */
+    setDropdownDisplayNone: () => void;
+    placementPosition: () => void;
+    hoverPopover: (e: Event) => void;
+    clickContent: (e: Event) => void;
+    clickPopover: (e: Event) => void;
+    clickRemovePopover: (e: Event) => void;
+    popoverTrigger: () => void;
+    hoverRemovePopover: (e: Event) => void;
+    changePlacement: () => void;
+    connectedCallback(): void;
+    disconnectCallback(): void;
+    attributeChangedCallback(n: string, o: string, v: string): void;
+}
+declare const _default: import("@/utils/index").CustomErrorType;
+export default _default;