ranui 0.1.9 → 0.1.10-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.1.9",
+  "version": "0.1.10-alpha.10",
   "description": "UI Component library based on `Web Component`",
   "main": "dist/umd/index.umd.cjs",
   "module": "dist/index.js",
@@ -9,12 +9,31 @@
   "homepage": "https://chaxus.github.io/ran/src/ranui/",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chaxus/ran/tree/main/packages/ranui"
+    "url": "git+https://github.com/chaxus/ran",
+    "directory": "packages/ranui"
+  },
+  "bugs": {
+    "url": "https://github.com/chaxus/ran/issues"
   },
   "author": "chaxus",
   "license": "MIT",
+  "engines": {
+    "node": "^16.20.2 || >=18.0.0"
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "build": "sh ./bin/build.sh",
+    "build:es": "vite build -c ./build/config.es.ts",
+    "build:umd": "vite build -c ./build/config.umd.ts",
+    "prepublish": "npm run build",
+    "test": "sh ./bin/test.sh",
+    "test:report": "playwright show-report",
+    "test:ui": "playwright test --ui",
+    "test:update": "playwright test --update-snapshots"
+  },
   "files": [
-    "dist/*"
+    "dist",
+    "typings.d.ts"
   ],
   "keywords": [
     "ran",
@@ -34,124 +53,149 @@
       "import": "./dist/index.js",
       "require": "./dist/umd/index.umd.cjs"
     },
+    "./shadowless": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/shadowless.js",
+      "require": "./dist/umd/shadowless/shadowless.umd.cjs"
+    },
     "./button": {
-      "types": "./dist/components/button/index.d.ts",
-      "import": "./dist/components/button/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/button.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./icon": {
-      "types": "./dist/components/icon/index.d.ts",
-      "import": "./dist/components/icon/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/icon.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./image": {
-      "types": "./dist/components/image/index.d.ts",
-      "import": "./dist/components/image/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/image.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./input": {
-      "types": "./dist/components/input/index.d.ts",
-      "import": "./dist/components/input/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/input.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./message": {
-      "types": "./dist/components/message/index.d.ts",
-      "import": "./dist/components/message/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/message.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./preview": {
-      "types": "./dist/components/preview/index.d.ts",
-      "import": "./dist/components/preview/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/preview.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./skeleton": {
-      "types": "./dist/components/skeleton/index.d.ts",
-      "import": "./dist/components/skeleton/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/skeleton.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./tab": {
-      "types": "./dist/components/tab/index.d.ts",
-      "import": "./dist/components/tab/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/tab.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./tabpane": {
-      "types": "./dist/components/tabpane/index.d.ts",
-      "import": "./dist/components/tabpane/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/tabpane.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./radar": {
-      "types": "./dist/components/radar/index.d.ts",
-      "import": "./dist/components/radar/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/radar.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./modal": {
-      "types": "./dist/components/modal/index.d.ts",
-      "import": "./dist/components/modal/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/modal.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./select": {
-      "types": "./dist/components/select/index.d.ts",
-      "import": "./dist/components/select/index.js",
-      "require": "./dist/umd/index.umd.cjs"
-    },
-    "./option": {
-      "types": "./dist/components/option/index.d.ts",
-      "import": "./dist/components/option/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/select.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./progress": {
-      "types": "./dist/components/progress/index.d.ts",
-      "import": "./dist/components/progress/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/progress.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./player": {
-      "types": "./dist/components/player/index.d.ts",
-      "import": "./dist/components/player/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/player.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./popover": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/popover.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./content": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/content.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./loading": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/loading.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./colorpicker": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/colorpicker.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./math": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/math.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./checkbox": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/checkbox.js",
       "require": "./dist/umd/index.umd.cjs"
     },
     "./style": {
       "types": "./dist/index.d.ts",
       "import": "./dist/style.css",
       "require": "./dist/umd/index.umd.cjs"
+    },
+    "./types": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.d.ts",
+      "require": "./dist/index.d.ts"
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.22.7",
-    "@babel/preset-typescript": "^7.22.5",
-    "@playwright/test": "^1.36.2",
-    "@types/imagemin-svgo": "^10.0.4",
-    "@types/lodash": "^4.14.197",
-    "@types/tinycolor2": "^1.4.3",
-    "@vheemstra/vite-plugin-imagemin": "^1.0.12",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-typescript": "^7.24.1",
+    "@playwright/test": "^1.44.0",
+    "@types/imagemin-svgo": "^10.0.5",
+    "@types/lodash": "^4.17.1",
+    "@types/react": "^18.3.1",
+    "@types/tinycolor2": "^1.4.6",
+    "@vheemstra/vite-plugin-imagemin": "^1.2.1",
     "imagemin-svgo": "^10.0.1",
-    "less": "^4.1.3",
-    "prettier": "^2.8.1",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "svgo": "^3.0.0",
-    "tsx": "^3.12.7",
-    "vite": "^5.0.9",
-    "vite-plugin-dts": "^3.6.4"
+    "less": "^4.2.0",
+    "prettier": "^2.8.8",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "svgo": "^3.3.0",
+    "tsx": "^3.14.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
   },
   "dependencies": {
-    "dayjs": "^1.11.9",
-    "docx-preview": "^0.1.18",
-    "exceljs": "^4.3.0",
+    "dayjs": "^1.11.11",
+    "exceljs": "^4.4.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
-    "ranuts": "0.1.0-alpha.10",
-    "tinycolor2": "^1.6.0",
-    "x-data-spreadsheet": "^1.1.9"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "sh ./bin/build.sh",
-    "build:es": "vite build -c ./build/config.es.ts",
-    "build:umd": "vite build -c ./build/config.umd.ts",
-    "prepublish": "npm run build",
-    "test": "sh ./bin/test.sh",
-    "test:report": "playwright show-report",
-    "test:ui": "playwright test --ui",
-    "test:update": "playwright test --update-snapshots"
+    "ranuts": "workspace:^",
+    "tinycolor2": "^1.6.0"
   }
-}
+}

package/readme.md

@@ -7,14 +7,20 @@ 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>
 
+**English** | [中文](./README.zh-CN.md)
+
 ## 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. **Cross-Framework Compatibility**: Works seamlessly with React, Vue, Preact, SolidJS, Svelte, and more. Integrates with any JavaScript project following W3C standards.
+2. **Pure Native Experience**: No need for npm, React/Vue, or build tools. Easy to start, like using native div tags, simplifying structure and reducing learning costs.
+3. **Modular Design**: Breaks systems into small, reusable components for enhanced maintainability and scalability.
+4. **Open-Source**: Licensed under MIT, providing free access to all source code for personal or commercial use.
+5. **Interactive Documentation**: Offers detailed, interactive documentation with live examples for efficient learning.
+6. **Type-Checking**: Built on TypeScript with full type support, ensuring robust and maintainable code.
+7. **Stability and Durability**: Framework independent (React/vue), avoid disruptive updates, and ensure continuous project operation.
 
 ## Install
 
@@ -24,7 +30,7 @@ Using npm:
 npm install ranui --save
 ```
 
-## Document
+## Document and Example
 
 [See components and use examples](https://chaxus.github.io/ran/src/ranui/)
 
@@ -36,21 +42,42 @@ Support for on-demand import, which can reduce the size of loaded js
 import 'ranui/button';
 ```
 
-For global components like `preview` and `message`, you need to import global styles
+If there is a style problem, you can import the style manually
 
 ```js
-import 'ranui/preview';
 import 'ranui/style';
 ```
 
+If there is a type problem, you can manually import the type
+
+```ts
+import 'ranui/types';
+```
+
+Or
+
+```ts
+import 'ranui/dist/typings';
+```
+
 Support global import
 
+```ts
+import 'ranui';
+```
+
 - ES module
 
 ```js
 import 'ranui';
 ```
 
+Or
+
+```js
+import 'ranui/button';
+```
+
 - UMD, IIFE, CJS
 
 ```html
@@ -93,12 +120,6 @@ document.body.appendChild(Button);
 
 ### jsx
 
-Since `react` has composite events, for more convenient use, `ranui` is encapsulated through `react` high-level components to form [@ranui/react](https://www.npmjs.com/package/@ranui/react).
-
-In react, it is recommended to use [@ranui/react](https://www.npmjs.com/package/@ranui/react).
-
-However, `ranui` can still be used in any `js` or `ts` framework.
-
 ```jsx
 import 'ranui';
 
@@ -124,12 +145,6 @@ import 'ranui';
 
 ### tsx
 
-Since `react` has composite events, for more convenient use, [ranui](https://www.npmjs.com/package/ranui) is encapsulated through `react` high-level components, so there is [@ranui/react](https://www.npmjs.com/package/@ranui/react).
-
-In `react`, using [@ranui/react](https://www.npmjs.com/package/@ranui/react) is silky and fully integrated into the `react` ecosystem after being wrapped in higher-order functions.
-
-However, [ranui](https://www.npmjs.com/package/ranui) can still be used in any `js` or `ts`.
-
 ```tsx
 // react 18
 import type { SyntheticEvent } from 'react';
@@ -165,49 +180,16 @@ const FilePreview = () => {
 };
 ```
 
-`jsx` defines the types of all `HTML-native` components in `TypeScript`.
-
-The `web component` type is not in the `jsx` definition.
-
-You need to add it manually.
-
-Otherwise you'll have type problems, but it actually works.
-
-```ts
-// typings.d.ts
-interface RButton {
-  type?: string;
-  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-}
-
-interface RPreview {
-  src?: string | Blob | ArrayBuffer;
-  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
-  ref?: React.MutableRefObject<HTMLDivElement | null>;
-}
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    'r-preview': React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLDivElement>,
-      HTMLDivElement
-    > &
-      RPreview;
-    'r-button': React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLDivElement>,
-      HTMLDivElement
-    > &
-      RButton;
-  }
-}
-```
-
 ## Contributors
 
 <a href="https://github.com/chaxus/ran/graphs/contributors">
   <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,211 @@
+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 '@/public/*';
+declare module '@/components/*';
+declare module '@/plugins/*';
+
+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>;
+}
+
+interface MathJax {
+  texReset: () => void;
+  getMetricsFor: (x: HTMLElement) => object;
+  tex2chtmlPromise: (x: string, y: object) => Promise<Element>;
+}
+
+declare 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>;
+    };
+  };
+  Hls: HLS;
+}
+
+namespace JSX {
+  interface IntrinsicElements {
+    'r-loading': any & {
+      name: 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;
+    };
+    '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;
+      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;
+    };
+  }
+}

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;