ranui 0.1.9 → 0.1.10-alpha.2

package/readme.md

@@ -7,14 +7,18 @@ UI Component library based on `Web Component`
 <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/github/actions/workflow/status/chaxus/ran/ci.yml" alt="Build Status"></a>
 <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/npm/v/ranui.svg" alt="npm-v"></a>
 <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/npm/dt/ranui.svg" alt="npm-d"></a>
-<a href="https://github.com/chaxus/ran"><img src="https://img.badgesize.io/https:/unpkg.com/ranui/dist/umd/index.umd.cjs?label=brotli&compression=brotli" alt="brotli"></a>
+<a href="https://github.com/chaxus/ran"><img src="https://img.badgesize.io/https:/unpkg.com/ranui/dist/umd/shadowless/shadowless.umd.cjs?label=brotli&compression=brotli" alt="brotli"></a>
 <a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20esm-green.svg" alt="module formats: umd, esm"></a>
 
 ## Feature
 
-- **Across the frame**: It works with `react`, `vue`, or native projects.
-- **Componentization**: The `shadow dom` actually implements componentization of style and functionality.
-- **native**: A component is like using a `div`tag.
+1. **High Cross-Framework Compatibility**: Our solution seamlessly adapts to a wide array of leading front-end frameworks, including `React`, `Vue`, `Preact`, `SolidJS`, `Svelte`, and more. It also integrates smoothly with any project built on `JavaScript` and adhering to `W3C` standards. No matter your choice of technology stack, we guarantee consistent and reliable support.
+2. **Pure Native Experience**: Our solution eliminates the need for dependencies on front-end frameworks like `npm`, `React`/`Vue`, or complex build tools such as `webpack`/`vite`. It truly embodies the essence of Web technology. You can get started effortlessly, just like manipulating native `div` tags, immediately experiencing the purity and intuitiveness of the technology. This design not only simplifies project structure but also reduces the cost of learning and usage, enabling every developer to appreciate the native charm of Web technology.
+3. **Ultimate Modular Design**: Utilizing the principle of minimal modularization, we carefully dismantle large and complex systems or applications into extremely small, functionally independent, and easily reusable component units. This approach significantly enhances code maintainability, scalability, and reusability.
+4. **Fully Open-Source for Free Learning**: Our project fully adheres to the `MIT` open-source license, granting unrestricted access to all source code. This means you are free to access, learn from, reference, and even modify our code, whether for personal development or commercial applications. We firmly believe that open-source is a vital pathway for technological advancement and innovation.
+5. **Interactive and Comprehensive Documentation**: We provide detailed and highly interactive documentation, where all component examples are live and interactive. This allows you to directly experience the component functionality while reading, deepening your understanding and enabling quick hands-on learning. This design is aimed at providing you with the most intuitive and efficient learning experience possible.
+6. **Type-Checking Support**: Our development environment is fully built on `TypeScript`, equipped with comprehensive declaration files and type definitions, ensuring smooth integration for both `JavaScript` and `TypeScript` projects. With powerful type-checking capabilities, we significantly enhance code readability, maintainability, and project robustness, bringing unprecedented convenience and peace of mind to development work.
+7. **Enhanced Durability and Stability**: Our solution offers exceptional stability, eliminating concerns about disruptive updates encountered during version upgrades, such as `React` from version `15` to `16` (with `fiber`) or `Vue` from version `2` to `3` (with `hooks`). We ensure that your components won't be forced into unnecessary updates or redevelopments, thus avoiding potential project interruptions and additional workloads. This translates into a continuous and hassle-free project operation.
 
 ## Install
 
@@ -28,6 +32,10 @@ npm install ranui --save
 
 [See components and use examples](https://chaxus.github.io/ran/src/ranui/)
 
+## Example
+
+<https://github.com/chaxus/ran/blob/main/packages/ranui/index.html>
+
 ## Import
 
 Support for on-demand import, which can reduce the size of loaded js
@@ -188,16 +196,8 @@ interface RPreview {
 
 declare namespace JSX {
   interface IntrinsicElements {
-    'r-preview': React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLDivElement>,
-      HTMLDivElement
-    > &
-      RPreview;
-    'r-button': React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLDivElement>,
-      HTMLDivElement
-    > &
-      RButton;
+    'r-preview': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & RPreview;
+    'r-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & RButton;
   }
 }
 ```
@@ -208,6 +208,10 @@ declare namespace JSX {
   <img src="https://contrib.rocks/image?repo=chaxus/ran" />
 </a>
 
+## Visitors
+
+![](http://profile-counter.glitch.me/chaxus-ranui/count.svg)
+
 ## Meta
 
 [LICENSE (MIT)](/LICENSE)

package/typings.d.ts

@@ -0,0 +1,101 @@
+declare module '*.less';
+declare module '*.less?inline';
+declare module '*.ts';
+declare module '*.svg';
+declare module 'docx-preview';
+declare module 'exceljs/*';
+declare module '@/assets/*';
+declare module '@/components/*';
+declare module '@/plugins/*';
+declare module '@/utils/*';
+declare module 'ranuts/*';
+
+declare namespace Ran {
+  interface Prompt {
+    content: string;
+    duration?: number;
+    close?: () => void;
+  }
+  type Hint = (options: Prompt | string) => 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>;
+}
+
+declare interface Window {
+  ranui: Partial<Ranui>;
+  message: Partial<Ran.Message>;
+  pdfjsLib: {
+    GlobalWorkerOptions: {
+      workerSrc: string;
+    };
+    getDocument: (x: string | ArrayBuffer) => {
+      promise: Promise<PDFDocumentProxy>;
+    };
+  };
+  Hls: HLS;
+}

package/dist/build/config.d.ts

@@ -1,3 +0,0 @@
-export declare const TIME_OUT = 1000;
-export declare const PORT = 5173;
-export declare const DEV_SERVER = "http://localhost:5173/";

package/dist/build/config.es.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;

package/dist/build/config.umd.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;

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

@@ -1,35 +0,0 @@
-/// <reference types="node" />
-export declare class Button extends HTMLElement {
-    _btn: HTMLDivElement;
-    _btnContent: HTMLDivElement;
-    _iconElement?: HTMLElement;
-    _slot: HTMLSlotElement;
-    _shadowDom: ShadowRoot;
-    debounceTimeId?: NodeJS.Timeout;
-    static get observedAttributes(): string[];
-    constructor();
-    get sheet(): string;
-    set sheet(value: string);
-    get disabled(): boolean | string;
-    set disabled(value: boolean | string | undefined | null);
-    get iconSize(): string;
-    set iconSize(value: string | undefined | null);
-    get icon(): string;
-    set icon(value: string | null);
-    get effect(): string;
-    set effect(value: string | null);
-    /**
-     * @description: 设置button的icon
-     * @return {*}
-     */
-    setIcon: () => void;
-    mousedown: (event: MouseEvent) => void;
-    mouseup: (event: MouseEvent) => void;
-    debounceMouseEvent: () => void;
-    handlerExternalCss: () => 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/button/index.js

@@ -1,8 +0,0 @@
-import { B, a } from "../../index-2d16a084.js";
-import "../../index-7913ec46.js";
-import "../../index-57492b9b.js";
-import "../../vendor-f71e6f68.js";
-export {
-  B as Button,
-  a as default
-};

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

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

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

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

package/dist/components/icon/index.js

@@ -1,6 +0,0 @@
-import { a } from "../../index-7216d6b0.js";
-import "../../index-7913ec46.js";
-import "../../vendor-f71e6f68.js";
-export {
-  a as default
-};

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

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

package/dist/components/image/index.js

@@ -1,4 +0,0 @@
-import { a } from "../../index-01b17e26.js";
-export {
-  a as default
-};

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

@@ -1,185 +0,0 @@
-export declare class Input extends HTMLElement {
-    static get observedAttributes(): string[];
-    _input: HTMLDivElement;
-    _label: HTMLLabelElement | undefined;
-    _inputContent: HTMLInputElement;
-    _icon: HTMLElement | undefined;
-    constructor();
-    /**
-     * @description: 获取input的值
-     * @return {String}
-     */
-    get value(): string | null;
-    /**
-     * @description: 设置input的值
-     * @param {String} value
-     */
-    set value(value: string);
-    /**
-     * @description: 获取input的占位字符
-     * @return {String}
-     */
-    get placeholder(): string | null;
-    /**
-     * @description: 设置input的占位字符
-     * @param {String} value
-     */
-    set placeholder(value: string);
-    /**
-     * @description: input是否为必选
-     * @return {String}
-     */
-    get required(): string | null;
-    /**
-     * @description: 设置input是否为必选，除非设置成false，否则都是必填
-     * @param {*} value
-     */
-    set required(value: string);
-    /**
-     * @description: 获取input上disabled属性
-     * @return {String | null}
-     */
-    get disabled(): boolean;
-    /**
-     * @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 | null;
-    /**
-     * @description: 设置icon来表示标识
-     * @param {string|null} value
-     */
-    set icon(value: string);
-    /**
-     * @description: 获取input的类型
-     * @return {string|null}
-     */
-    get type(): string | null;
-    /**
-     * @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/input/index.js

@@ -1,6 +0,0 @@
-import { I, a } from "../../index-1048a998.js";
-import "../../index-57492b9b.js";
-export {
-  I as Input,
-  a as default
-};

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

@@ -1,14 +0,0 @@
-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/message/index.js

@@ -1,4 +0,0 @@
-import { m } from "../../index-0d5b9435.js";
-export {
-  m as default
-};

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

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

package/dist/components/modal/index.js

@@ -1,4 +0,0 @@
-import { a } from "../../index-8e1e2573.js";
-export {
-  a as default
-};

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

@@ -1,2 +0,0 @@
-declare const _default: import('../../utils/index').CustomErrorType;
-export default _default;