ranui 0.1.9 → 0.1.10-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.1.9",
+  "version": "0.1.10-alpha.1",
   "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": ">=12.20.0"
+  },
+  "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"
+  },
   "files": [
-    "dist/*"
+    "dist",
+    "typings.d.ts"
   ],
   "keywords": [
     "ran",
@@ -34,6 +53,11 @@
       "import": "./dist/index.js",
       "require": "./dist/umd/index.umd.cjs"
     },
+    "./shadowless": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/shadowless/shadowless/index.js",
+      "require": "./dist/umd/shadowless/shadowless.umd.cjs"
+    },
     "./button": {
       "types": "./dist/components/button/index.d.ts",
       "import": "./dist/components/button/index.js",
@@ -109,6 +133,21 @@
       "import": "./dist/components/player/index.js",
       "require": "./dist/umd/index.umd.cjs"
     },
+    "./popover": {
+      "types": "./dist/components/popover/index.d.ts",
+      "import": "./dist/components/popover/index.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./content": {
+      "types": "./dist/components/content/index.d.ts",
+      "import": "./dist/components/content/index.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./colorpicker": {
+      "types": "./dist/components/colorpicker/index.d.ts",
+      "import": "./dist/components/colorpicker/index.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
     "./style": {
       "types": "./dist/index.d.ts",
       "import": "./dist/style.css",
@@ -116,42 +155,28 @@
     }
   },
   "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.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-typescript": "^7.24.1",
+    "@playwright/test": "^1.42.1",
+    "@types/imagemin-svgo": "^10.0.5",
+    "@types/lodash": "^4.17.0",
+    "@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",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "svgo": "^3.2.0",
+    "tsx": "^3.14.0",
+    "vite": "^5.2.6"
   },
   "dependencies": {
-    "dayjs": "^1.11.9",
-    "docx-preview": "^0.1.18",
-    "exceljs": "^4.3.0",
+    "dayjs": "^1.11.10",
+    "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:0.1.0-alpha.11",
+    "tinycolor2": "^1.6.0"
   }
-}
+}

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;
   }
 }
 ```

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/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/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.js

@@ -1,4 +0,0 @@
-import { a } from "../../index-01b17e26.js";
-export {
-  a as 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.js

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

package/dist/components/modal/index.js

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

package/dist/components/player/index.js

@@ -1,12 +0,0 @@
-import "../../index-7913ec46.js";
-import { R, a } from "../../index-e2e5d725.js";
-import "../../index-1b73beee.js";
-import "../../vendor-f71e6f68.js";
-import "../../index-57492b9b.js";
-import "../option/index.js";
-import "../../index-7216d6b0.js";
-import "../../index-1048a998.js";
-export {
-  R as RanPlayer,
-  a as default
-};

package/dist/components/preview/index.js

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

package/dist/components/progress/index.js

@@ -1,8 +0,0 @@
-import "../../index-7913ec46.js";
-import "../../index-57492b9b.js";
-import { P, a } from "../../index-4443363f.js";
-import "../../vendor-f71e6f68.js";
-export {
-  P as Progress,
-  a as default
-};

package/dist/components/radar/index.js

@@ -1,7 +0,0 @@
-import { a } from "../../index-458debf7.js";
-import "../../index-7913ec46.js";
-import "../../index-57492b9b.js";
-import "../../vendor-f71e6f68.js";
-export {
-  a as default
-};

package/dist/components/select/index.js

@@ -1,11 +0,0 @@
-import { S, a } from "../../index-1b73beee.js";
-import "../../index-7913ec46.js";
-import "../../index-57492b9b.js";
-import "../option/index.js";
-import "../../index-7216d6b0.js";
-import "../../index-1048a998.js";
-import "../../vendor-f71e6f68.js";
-export {
-  S as Select,
-  a as default
-};

package/dist/components/skeleton/index.js

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

package/dist/components/tab/index.js

@@ -1,7 +0,0 @@
-import { a } from "../../index-3cf72afd.js";
-import "../../index-7913ec46.js";
-import "../../index-57492b9b.js";
-import "../../vendor-f71e6f68.js";
-export {
-  a as default
-};

package/dist/components/tabpane/index.js

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

package/dist/docx-c5d02d8c.js

@@ -1,21 +0,0 @@
-import { d as docxPreview_minExports } from "./vendor-f71e6f68.js";
-const renderDocx = (options) => {
-  if (typeof window !== "undefined") {
-    const { bodyContainer, styleContainer, buffer, docxOptions = {} } = options;
-    const defaultOptions = {
-      className: "docx"
-      // ignoreLastRenderedPageBreak: false,
-    };
-    const configuration = Object.assign({}, defaultOptions, docxOptions);
-    if (bodyContainer) {
-      return docxPreview_minExports.renderAsync(buffer, bodyContainer, styleContainer, configuration);
-    } else {
-      const contain = document.createElement("div");
-      document.body.appendChild(contain);
-      return docxPreview_minExports.renderAsync(buffer, contain, styleContainer, configuration);
-    }
-  }
-};
-export {
-  renderDocx
-};