ranui 0.1.8 → 0.1.10-alpha-24

package/dist/utils/color.d.ts

@@ -0,0 +1,52 @@
+export declare const hsv2hsl: (h: number, s: number, v: number) => {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare const hex2alpha: (aa: string) => number;
+export declare const hex2hsl: (hex: string) => {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare const hex2hsv: (hex: string) => {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const hex2rgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const rgb2hsv: (r: number, g: number, b: number) => {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const hsl2hsv: (h: number, s: number, l: number) => {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const hsl2rgb: (h: number, s: number, l: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const hsv2rgb: (h: number, s: number, v: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const rgb2hex: (r: number, g: number, b: number) => string;
+export declare const rgba: (r: number, g: number, b: number, a: number) => string;
+export declare const rgba2hex: (r: number, g: number, b: number, a: number) => string;
+export declare const rgba2rgb: (r: number, g: number, b: number, a: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const HEX_COLOR_REGEX: RegExp;
+export declare const RGB_REGEX: RegExp;
+export declare const RGBA_REGEX: RegExp;

package/dist/utils/image.d.ts

@@ -19,13 +19,20 @@ export declare const cutRound: (img: ImgType, radius: number) => ImgType;
  * @returns 返回一个离屏 canvas 用于渲染
  */
 export declare const opacity: (img: ImgType, opacity: number) => ImgType;
+/**
+ * 权重矩阵
+ * @param radius 模糊半径
+ * @param sigma
+ * @returns 返回一个权重和为1的矩阵
+ */
+export declare const getMatrix: (radius: number, sigma?: number) => number[];
 /**
  * 高斯模糊
  * @param img 将要处理的图片对象
  * @param radius 模糊半径
  * @returns 返回一个离屏 canvas 用于渲染
  */
-export declare const blur: (img: ImgType, radius: number) => ImgType;
+export declare const blur: (img: ImgType) => ImgType;
 export declare const getBase64Image: (imageFile: File) => Promise<{
     base64: string | ArrayBuffer | null;
 }>;

package/dist/utils/index.d.ts

@@ -1,27 +1,30 @@
 export declare const falseList: (string | boolean | null | undefined)[];
 /**
- * @description: 判断这个元素上是否有disabled属性
+ * @description: 判断这个元素上是否有 disabled 属性
  * @param {Element} element
  * @return {*}
  */
 export declare const isDisabled: (element: Element) => boolean;
 /**
- * @description: 查询指定元素的子级元素，删除他们的某一个指定class
+ * @description: 查询指定元素的子级元素，删除他们的某一个指定 class
  * @param {Element} parent
  * @param {string} deleteClass
  */
 export declare const removeClassToElementChild: (parent: Element, deleteClass: string) => void;
 /**
- * @description: 创建icon的文档示例
+ * @description: 创建 icon 的文档示例
  */
 export declare const createIconList: () => void;
-export declare const loadScript: (src: string) => Promise<{
+export declare const loadScript: ({ type, content }: {
+    type: string;
+    content: string;
+}) => Promise<{
     success: boolean;
 }>;
 export interface CustomErrorType {
     new (m: string): void;
 }
-export declare function createCustomError(msg: string): CustomErrorType;
+export declare function createCustomError(msg?: string): CustomErrorType;
 export declare const vod: {
     FD: {
         label: string;
@@ -62,3 +65,15 @@ export declare const vod: {
         label: string;
     };
 };
+export declare const HTMLElementSSR: () => {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} | null;
+export declare const createSignal: <T = unknown>(value: T, options?: {
+    subscriber?: Function[];
+    equals?: boolean | ((prev: T | undefined, next: T) => boolean);
+}) => [() => T, (newValue: T) => void];
+/**
+ * 根据文件扩展名获取 MIME 类型
+ */
+export declare function getMimeTypeFromExtension(fileName: string): string;

package/dist/utils/math.d.ts

@@ -8,17 +8,17 @@ export declare const getAngle: (deg: number) => number;
  * 根据角度计算圆上的点
  * @param { number } deg 运算角度
  * @param { number } r 半径
- * @return { Array<number> } 坐标[x, y]
+ * @return { Array<number> } 坐标 [x, y]
  */
 export declare const getArcPointerByDeg: (deg: number, r: number) => [number, number];
 /**
  * 根据点计算切线方程
  * @param { number } x 横坐标
  * @param { number } y 纵坐标
- * @return { Array<number> } [斜率, 常数]
+ * @return { Array<number> } [斜率，常数]
  */
 export declare const getTangentByPointer: (x: number, y: number) => Array<number>;
-export declare const fanShapedByArc: (ctx: CanvasRenderingContext2D, minRadius: number, maxRadius: number, start: number, end: number, gutter: number) => void;
+export declare const fanShapedByArc: (ctx: CanvasRenderingContext2D, maxRadius: number, start: number, end: number, gutter: number) => void;
 export declare const roundRectByArc: (ctx: CanvasRenderingContext2D, ...[x, y, w, h, r]: number[]) => void;
 /**
  * 创建线性渐变色

package/dist/vite.config.d.ts

@@ -1,5 +1,6 @@
 import type { BuildOptions, UserConfig } from 'vite';
 export declare const umd: BuildOptions;
+export declare const umdShadowless: BuildOptions;
 export declare const es: BuildOptions;
 export declare const viteConfig: UserConfig;
 declare const _default: UserConfig;

package/dist/without-content-CdJw7vHM.js

@@ -0,0 +1,4 @@
+const withoutContent = { "success": true, "_identification": true, "data": '<svg t="1742629778506" class="icon" viewBox="0 0 1366 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31273" width="200" height="200"><path d="M1230.155 778.399V472.604l133.84-51.746-94.113-140.41 83.29 13.815 0.676-4.006 6.486-9.634L1204.75 176.19l-2.05 2.985 1.283-3.578L735.283 1.087 734 4.496l-1.197-3.494-550.626 182.523-0.338-0.598-2.303 1.619-0.43-0.083-0.597 0.85L0 311.57l7.076 9.972L8.78 325.8l97.353-40.064-70.926 98.38 140.747 78.94 0.168 312.863h3.838l-1.873 3.415 438.699 244.578 0.083-0.084v0.168l15.428-0.084v0.084l0.253-0.084h0.262v-0.084l597.428-245.262-0.085-0.168z m89.34-505.88l-61.802-10.223-38.106-56.866 99.908 67.09zM742.443 20.782l438.438 163.252-438.438 164.28V20.78z m451.654 175.355l145.522 217.047-605.703 234.1-100.084-241.176 560.265-209.97zM63.934 285.822l85.848-60.698-25.997 36.143-59.851 24.555z m-5.28 93.177L134.1 274.315l1.873-0.768-0.514-1.196 48.852-67.856 428.377 201.357-75.7 241.515L58.653 379zM192.07 768.85l-0.175-296.76 354.386 198.803 68.625-218.92 1.788 553.697L192.07 768.85z m8.184-574.587L726.5 19.843v334.433l-103.323 38.79-422.924-198.803z m1013.96 573.56L632.727 1006.52l-1.795-565.798 94.204 227.107 489.078-189v288.994z" fill="currentColor" p-id="31274"></path></svg>' };
+export {
+  withoutContent as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.1.8",
+  "version": "0.1.10-alpha-24",
   "description": "UI Component library based on `Web Component`",
   "main": "dist/umd/index.umd.cjs",
   "module": "dist/index.js",
@@ -9,16 +9,21 @@
   "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",
-  "files": [
-    "dist/*"
-  ],
   "engines": {
-    "node": ">=14.20.0"
+    "node": ">=23.10.0"
   },
+  "files": [
+    "dist",
+    "typings.d.ts"
+  ],
   "keywords": [
     "ran",
     "component",
@@ -29,7 +34,8 @@
     "web components",
     "webComponents",
     "ranui",
-    "@ranui/react"
+    "@ranui/react",
+    "lib"
   ],
   "exports": {
     ".": {
@@ -37,117 +43,158 @@
       "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",
+      "import": "./dist/ranui.css",
       "require": "./dist/umd/index.umd.cjs"
+    },
+    "./type": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./typings": {
+      "types": "./dist/typings.d.ts",
+      "import": "./dist/typings.d.ts",
+      "require": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*",
+      "import": "./dist/*",
+      "require": "./dist/*"
     }
   },
   "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",
-    "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": "^4.4.9",
-    "vite-plugin-dts": "^3.6.3"
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
+    "@babel/preset-env": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@playwright/test": "^1.52.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@types/imagemin-svgo": "^10.0.5",
+    "@types/lodash": "^4.17.16",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^19.1.2",
+    "@types/tinycolor2": "^1.4.6",
+    "imagemin-svgo": "^11.0.1",
+    "less": "^4.3.0",
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "svgo": "^3.3.2",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
   },
   "dependencies": {
-    "dayjs": "^1.11.9",
-    "docx-preview": "^0.1.18",
-    "exceljs": "^4.3.0",
-    "jszip": "^3.10.1",
-    "lodash": "^4.17.21",
-    "tinycolor2": "^1.6.0",
-    "x-data-spreadsheet": "^1.1.9",
-    "ranuts": "0.1.0-alpha.10"
+    "ranuts": "^0.1.0-alpha-21"
   },
   "scripts": {
-    "dev": "vite",
+    "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",
@@ -155,6 +202,7 @@
     "test": "sh ./bin/test.sh",
     "test:report": "playwright show-report",
     "test:ui": "playwright test --ui",
-    "test:update": "playwright test --update-snapshots"
+    "test:update": "playwright test --update-snapshots",
+    "tsc": "tsc --noEmit"
   }
 }

package/readme.md

@@ -7,24 +7,30 @@ 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
 
 Using npm:
 
 ```console
-npm install ranui --save
+npm install ranui@latest --save
 ```
 
-## Document
+## Document and Example
 
 [See components and use examples](https://chaxus.github.io/ran/src/ranui/)
 
@@ -36,21 +42,44 @@ 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/typings';
+// or
+import 'ranui/dist/index.d.ts';
+// or
+import 'ranui/type';
+// or
+import 'ranui/dist/typings';
+```
+
+Not all of them. Just pick one that works
+
 Support global import
 
+```ts
+import 'ranui';
+```
+
 - ES module
 
 ```js
 import 'ranui';
 ```
 
+Or
+
+```js
+import 'ranui/button';
+```
+
 - UMD, IIFE, CJS
 
 ```html
@@ -93,12 +122,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 +147,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 +182,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)