ranui 0.1.4-alpha.7 → 0.1.6

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

@@ -1,4 +1,4 @@
-export declare const TIME_OUT = 3000;
+export declare const TIME_OUT = 6000;
 export declare const DEV_SERVER = "http://localhost:5124/";
 /**
  * Read environment variables from file.

package/dist/umd/plugins/auto-import-file.d.ts

@@ -1,10 +0,0 @@
-import type { Plugin } from 'vite';
-interface Options {
-    ignore?: Array<string>;
-    path: Array<string>;
-    extensions: Array<string>;
-    defaultImport?: string;
-    output?: string;
-}
-export default function autoImportFilePlugin(options: Options): Plugin;
-export {};

package/dist/umd/utils/index.d.ts

@@ -34,4 +34,22 @@ interface Url2FileOption {
     body: string;
 }
 export declare const requestFile: (url: string, options?: Partial<Url2FileOption>) => Promise<File>;
+interface Context {
+    backingStorePixelRatio: number;
+    webkitBackingStorePixelRatio: number;
+    mozBackingStorePixelRatio: number;
+    msBackingStorePixelRatio: number;
+    oBackingStorePixelRatio: number;
+}
+export declare const getPixelRatio: (context: CanvasRenderingContext2D & Partial<Context>) => number;
+export interface CustomErrorType {
+    new (m: string): void;
+}
+export declare function createCustomError(msg: string): CustomErrorType;
+/**
+ * @description: 判断当前设备
+ * @param {*} function
+ * @return {*}
+ */
+export declare const presentDevice: string;
 export {};

package/dist/utils/index.d.ts

@@ -34,4 +34,22 @@ interface Url2FileOption {
     body: string;
 }
 export declare const requestFile: (url: string, options?: Partial<Url2FileOption>) => Promise<File>;
+interface Context {
+    backingStorePixelRatio: number;
+    webkitBackingStorePixelRatio: number;
+    mozBackingStorePixelRatio: number;
+    msBackingStorePixelRatio: number;
+    oBackingStorePixelRatio: number;
+}
+export declare const getPixelRatio: (context: CanvasRenderingContext2D & Partial<Context>) => number;
+export interface CustomErrorType {
+    new (m: string): void;
+}
+export declare function createCustomError(msg: string): CustomErrorType;
+/**
+ * @description: 判断当前设备
+ * @param {*} function
+ * @return {*}
+ */
+export declare const presentDevice: string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.1.4-alpha.7",
+  "version": "0.1.6",
   "description": "UI Component library based on `Web Component`",
   "main": "dist/umd/index.umd.cjs",
   "module": "dist/index.js",
@@ -24,7 +24,12 @@
     "component",
     "components",
     "ui",
-    "design"
+    "design",
+    "web-components",
+    "web components",
+    "webComponents",
+    "ranui",
+    "@ranui/react"
   ],
   "exports": {
     ".": {
@@ -72,6 +77,16 @@
       "import": "./dist/components/tab/index.js",
       "require": "./dist/umd/index.umd.cjs"
     },
+    "./tabpane": {
+      "types": "./dist/components/tabpane/index.d.ts",
+      "import": "./dist/components/tabpane/index.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./radar": {
+      "types": "./dist/components/radar/index.d.ts",
+      "import": "./dist/components/radar/index.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
     "./style": {
       "types": "./dist/index.d.ts",
       "import": "./dist/style.css",

package/readme.md

@@ -28,19 +28,20 @@ npm install ranui --save
 
 [See components and use examples](https://chaxus.github.io/ran/src/ranui/)
 
-## Import 
+## Import
 
 Support for on-demand import, which can reduce the size of loaded js
 
 ```js
-import 'ranui/button'
+import 'ranui/button';
 ```
-
+- `style`
+ 
 For global components like `preview` and `message`, you need to import global styles
 
 ```js
-import 'ranui/preview'
-import 'ranui/style'
+import 'ranui/preview';
+import 'ranui/style';
 ```
 
 Support global import
@@ -48,7 +49,7 @@ Support global import
 - ES module
 
 ```js
-import 'ranui'
+import 'ranui';
 ```
 
 - UMD, IIFE, CJS
@@ -84,102 +85,130 @@ Here are some examples:
 ### js
 
 ```js
-import 'ranui'
+import 'ranui';
 
-const Button = document.createElement('r-button')
-Button.appendChild('this is button text')
-document.body.appendChild(Button)
+const Button = document.createElement('r-button');
+Button.appendChild('this is button text');
+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'
+import 'ranui';
+
 const App = () => {
   return (
     <>
       <r-button>Button</r-button>
     </>
-  )
-}
+  );
+};
 ```
 
-### vue 
+### vue
 
 ```vue
 <template>
   <r-button></r-button>
 </template>
 <script>
-  import 'ranui'
+import 'ranui';
 </script>
-
 ```
 
 ### 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 
+// react 18
 import type { SyntheticEvent } from 'react';
-import React, { useRef } from 'react'
-import 'ranui'
+import React, { useRef } from 'react';
+import 'ranui';
 
 const FilePreview = () => {
-    const ref = useRef<HTMLDivElement | null>(null)
-    const uploadFile = (e: SyntheticEvent<HTMLDivElement>) => {
-        if (ref.current) {
-            const uploadFile = document.createElement('input')
-            uploadFile.setAttribute('type', 'file')
-            uploadFile.click()
-            uploadFile.onchange = (e) => {
-                const { files = [] } = uploadFile
-                if (files && files?.length > 0 && ref.current) {
-                    ref.current.setAttribute('src', '')
-                    const file = files[0]
-                    const url = URL.createObjectURL(file)
-                    ref.current.setAttribute('src', url)
-                }
-            }
+  const ref = useRef<HTMLDivElement | null>(null);
+  const uploadFile = (e: SyntheticEvent<HTMLDivElement>) => {
+    if (ref.current) {
+      const uploadFile = document.createElement('input');
+      uploadFile.setAttribute('type', 'file');
+      uploadFile.click();
+      uploadFile.onchange = (e) => {
+        const { files = [] } = uploadFile;
+        if (files && files?.length > 0 && ref.current) {
+          ref.current.setAttribute('src', '');
+          const file = files[0];
+          const url = URL.createObjectURL(file);
+          ref.current.setAttribute('src', url);
         }
+      };
     }
-    return (
-        <div >
-            <r-preview ref={ref}></r-preview>
-            <r-button type="primary" onClick={uploadFile}>choose file to preview</r-button>
-        </div>
-    )
-}
+  };
+  return (
+    <div>
+      <r-preview ref={ref}></r-preview>
+      <r-button type="primary" onClick={uploadFile}>
+        choose file to preview
+      </r-button>
+    </div>
+  );
+};
 ```
 
-`jsx` defines the types of all `HTML-native` components in `TypeScript`. 
+`jsx` defines the types of all `HTML-native` components in `TypeScript`.
 
-The `web component` type is not in the `jsx` definition. 
+The `web component` type is not in the `jsx` definition.
 
-You need to add it manually. 
+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
+  type?: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
 }
 
 interface RPreview {
-  src?: string | Blob | ArrayBuffer,
-  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined
-  ref?: React.MutableRefObject<HTMLDivElement | null>
+  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
+    '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>
+
 ## Meta
 
 [LICENSE (MIT)](/LICENSE)