ranui 0.1.8 → 0.1.10-alpha.1

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/index.d.ts

@@ -21,7 +21,7 @@ export declare const loadScript: (src: string) => Promise<{
 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 +62,11 @@ 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[] | undefined;
+    equals?: boolean | ((prev: T | undefined, next: T) => boolean) | undefined;
+} | undefined) => [() => T, (newValue: T) => void];

package/dist/utils-BMBEcoPj.js

@@ -0,0 +1,356 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const noop = () => {
+};
+function formatDuration(time) {
+  return time < 10 ? `0${time}` : time;
+}
+function timestampToTime(timestamp) {
+  let date = /* @__PURE__ */ new Date();
+  if (timestamp) {
+    date = new Date(timestamp);
+  }
+  date.format = (format = "YYYY-MM-DD HH:mm:ss") => {
+    const year = date.getFullYear();
+    const month = formatDuration(date.getMonth() + 1);
+    const day = formatDuration(date.getDate());
+    const hour = formatDuration(date.getHours());
+    const minute = formatDuration(date.getMinutes());
+    const second = formatDuration(date.getSeconds());
+    return format.replace(/Y+/gi, `${year}`).replace(/M+/g, `${month}`).replace(/D+/gi, `${day}`).replace(/H+/gi, `${hour}`).replace(/m+/g, `${minute}`).replace(/S+/gi, `${second}`);
+  };
+  return date;
+}
+const timeFormat = (time) => {
+  if (time === 0)
+    return "00:00";
+  if (!time)
+    return "";
+  const hour = Math.trunc(time / 3600);
+  const minute = Math.trunc(time % 3600 / 60);
+  const second = formatDuration(Math.trunc(time - hour * 3600 - minute * 60));
+  if (hour === 0) {
+    return `${formatDuration(minute)}:${second}`;
+  }
+  return `${formatDuration(hour)}:${formatDuration(minute)}:${second}`;
+};
+const getPixelRatio = (context) => {
+  const backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || 1;
+  return (window.devicePixelRatio || 1) / backingStore;
+};
+const currentDevice = () => {
+  if (typeof window !== "undefined") {
+    const ua = navigator.userAgent.toLowerCase();
+    if (/ipad|ipod/.test(ua))
+      return "ipad";
+    if (/android/.test(ua))
+      return "android";
+    if (/iphone/.test(ua))
+      return "iphone";
+    return "pc";
+  }
+  return "pc";
+};
+const isMobile = () => {
+  const ua = window.navigator.userAgent;
+  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(ua)) {
+    return true;
+  }
+  return false;
+};
+const addClassToElement = (element, addClass) => {
+  if (typeof document === "undefined")
+    return void 0;
+  const classList = element.classList;
+  if (!classList.contains(addClass)) {
+    classList.add(addClass);
+  }
+};
+const removeClassToElement = (element, removeClass) => {
+  if (typeof document === "undefined")
+    return void 0;
+  const classList = element.classList;
+  if (classList.contains(removeClass)) {
+    classList.remove(removeClass);
+  }
+};
+const createDocumentFragment = (list) => {
+  if (typeof document === "undefined")
+    return void 0;
+  const Fragment = document.createDocumentFragment();
+  list.forEach((item) => Fragment.appendChild(item));
+  return Fragment;
+};
+const generateThrottle = () => {
+  let timer;
+  return function(fn, wait = 300) {
+    return function(...args) {
+      if (timer) {
+        clearTimeout(timer);
+        timer = void 0;
+      }
+      const context = this;
+      if (!timer) {
+        timer = setTimeout(() => {
+          fn.apply(context, args);
+          clearTimeout(timer);
+          timer = void 0;
+        }, wait);
+      }
+    };
+  };
+};
+const codes = /* @__PURE__ */ new Map([
+  [100, "Continue"],
+  [101, "Switching Protocols"],
+  [102, "Processing"],
+  [103, "Early Hints"],
+  [200, "OK"],
+  [201, "Created"],
+  [202, "Accepted"],
+  [203, "Non-Authoritative Information"],
+  [204, "No Content"],
+  [205, "Reset Content"],
+  [206, "Partial Content"],
+  [207, "Multi-Status"],
+  [208, "Already Reported"],
+  [226, "IM Used"],
+  [300, "Multiple Choices"],
+  [301, "Moved Permanently"],
+  [302, "Found"],
+  [303, "See Other"],
+  [304, "Not Modified"],
+  [305, "Use Proxy"],
+  [307, "Temporary Redirect"],
+  [308, "Permanent Redirect"],
+  [400, "Bad Request"],
+  [401, "Unauthorized"],
+  [402, "Payment Required"],
+  [403, "Forbidden"],
+  [404, "Not Found"],
+  [405, "Method Not Allowed"],
+  [406, "Not Acceptable"],
+  [407, "Proxy Authentication Required"],
+  [408, "Request Timeout"],
+  [409, "Conflict"],
+  [410, "Gone"],
+  [411, "Length Required"],
+  [412, "Precondition Failed"],
+  [413, "Payload Too Large"],
+  [414, "URI Too Long"],
+  [415, "Unsupported Media Type"],
+  [416, "Range Not Satisfiable"],
+  [417, "Expectation Failed"],
+  [418, "I'm a Teapot"],
+  [421, "Misdirected Request"],
+  [422, "Unprocessable Entity"],
+  [423, "Locked"],
+  [424, "Failed Dependency"],
+  [425, "Too Early"],
+  [426, "Upgrade Required"],
+  [428, "Precondition Required"],
+  [429, "Too Many Requests"],
+  [431, "Request Header Fields Too Large"],
+  [451, "Unavailable For Legal Reasons"],
+  [500, "Internal Server Error"],
+  [501, "Not Implemented"],
+  [502, "Bad Gateway"],
+  [503, "Service Unavailable"],
+  [504, "Gateway Timeout"],
+  [505, "HTTP Version Not Supported"],
+  [506, "Variant Also Negotiates"],
+  [507, "Insufficient Storage"],
+  [508, "Loop Detected"],
+  [509, "Bandwidth Limit Exceeded"],
+  [510, "Not Extended"],
+  [511, "Network Authentication Required"]
+]);
+({
+  // status code to message map
+  message: codes,
+  // status message (lower-case) to code map
+  code: createMessageToStatusCodeMap(codes),
+  // array of status codes
+  codes: createStatusCodeList(codes),
+  // status codes for redirects
+  redirect: {
+    300: true,
+    301: true,
+    302: true,
+    303: true,
+    305: true,
+    307: true,
+    308: true
+  },
+  // status codes for empty bodies
+  empty: {
+    204: true,
+    205: true,
+    304: true
+  },
+  // status codes for when you should retry the request
+  retry: {
+    502: true,
+    503: true,
+    504: true
+  }
+});
+function createMessageToStatusCodeMap(codes2) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [status2, message] of codes2) {
+    map.set(message.toLowerCase(), status2);
+  }
+  return map;
+}
+function createStatusCodeList(codes2) {
+  const codeList = [];
+  for (const [status2, _] of codes2) {
+    codeList.push(status2);
+  }
+  return codeList;
+}
+const perToNum = (str = "") => {
+  if (str.length === 0)
+    return 0;
+  if (str.endsWith("%")) {
+    const value = Number(str.replace("%", ""));
+    return value > 1 ? value / 100 : value;
+  } else {
+    return Number(str);
+  }
+};
+const range = (num, min = 0, max = 1) => {
+  return Math.min(max, Math.max(min, num));
+};
+const _Mathjs = class _Mathjs2 {
+  constructor() {
+    __publicField(this, "getDecimalLength", (n2) => {
+      const [_, decimal] = n2.toString().split(".");
+      return decimal ? decimal.length : 0;
+    });
+    __publicField(this, "amend", (n2, precision = 15) => parseFloat(Number(n2).toPrecision(precision)));
+    __publicField(this, "power", (a2, b2) => Math.pow(10, Math.max(this.getDecimalLength(a2), this.getDecimalLength(b2))));
+  }
+};
+__publicField(_Mathjs, "handleMethod", (l2, r2) => {
+  const mathjs2 = new _Mathjs();
+  const { power, amend } = mathjs2;
+  const pow = power(l2, r2);
+  const a2 = amend(l2 * pow);
+  const b2 = amend(r2 * pow);
+  return (type) => {
+    switch (type) {
+      case "+":
+        return (a2 + b2) / pow;
+      case "-":
+        return (a2 - b2) / pow;
+      case "*":
+        return a2 * b2 / (pow * pow);
+      case "/":
+        return a2 / b2;
+    }
+  };
+});
+__publicField(_Mathjs, "add", (a2, b2) => {
+  return _Mathjs.handleMethod(a2, b2)("+");
+});
+__publicField(_Mathjs, "divide", (a2, b2) => {
+  return _Mathjs.handleMethod(a2, b2)("/");
+});
+__publicField(_Mathjs, "multiply", (a2, b2) => {
+  return _Mathjs.handleMethod(a2, b2)("*");
+});
+__publicField(_Mathjs, "subtract", (a2, b2) => {
+  return _Mathjs.handleMethod(a2, b2)("-");
+});
+const NEW_LISTENER = "NEW_LISTENER";
+class SyncHook {
+  constructor() {
+    __publicField(this, "_events");
+    __publicField(this, "tap", (eventName, eventItem) => {
+      if (this._events[eventName] && eventName !== Symbol.for(NEW_LISTENER)) {
+        this.call(Symbol.for(NEW_LISTENER), eventName);
+      }
+      const callbacks = this._events[eventName] || [];
+      if (typeof eventItem === "function") {
+        callbacks.push({
+          name: eventName,
+          callback: eventItem
+        });
+      } else {
+        callbacks.push(eventItem);
+      }
+      this._events[eventName] = callbacks;
+    });
+    __publicField(this, "call", (eventName, ...args) => {
+      const callbacks = this._events[eventName] || [];
+      callbacks.forEach((item) => {
+        const { callback } = item;
+        callback(...args);
+      });
+    });
+    __publicField(this, "callSync", async (eventName, ...args) => {
+      const callbacks = this._events[eventName] || [];
+      for (const item of callbacks) {
+        const { callback } = item;
+        await callback(...args);
+      }
+    });
+    __publicField(this, "once", (eventName, eventItem) => {
+      let one;
+      if (typeof eventItem === "function") {
+        one = {
+          name: eventName,
+          callback: (...args) => {
+            eventItem(...args);
+            this.off(eventName, one);
+          },
+          initialCallback: eventItem
+        };
+      } else {
+        const { callback } = eventItem;
+        one = {
+          name: eventName,
+          callback: (...args) => {
+            callback(...args);
+            this.off(eventName, one);
+          },
+          initialCallback: callback
+        };
+      }
+      this.tap(eventName, one);
+    });
+    __publicField(this, "off", (eventName, eventItem) => {
+      const callbacks = this._events[eventName] || [];
+      const newCallbacks = callbacks.filter((item) => {
+        if (typeof eventItem === "function") {
+          return item.callback !== eventItem && item.initialCallback !== eventItem;
+        } else {
+          const { callback } = eventItem;
+          return item.callback !== callback && item.initialCallback !== callback;
+        }
+      });
+      this._events[eventName] = newCallbacks;
+    });
+    this._events = {};
+  }
+}
+export {
+  SyncHook as S,
+  addClassToElement as a,
+  createDocumentFragment as b,
+  currentDevice as c,
+  generateThrottle as d,
+  range as e,
+  timestampToTime as f,
+  getPixelRatio as g,
+  isMobile as i,
+  noop as n,
+  perToNum as p,
+  removeClassToElement as r,
+  timeFormat as t
+};

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ranui",
-  "version": "0.1.8",
+  "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,16 +9,32 @@
   "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": ">=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",
+    "typings.d.ts"
+  ],
   "keywords": [
     "ran",
     "component",
@@ -37,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",
@@ -112,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",
@@ -119,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": "^4.4.9",
-    "vite-plugin-dts": "^3.6.3"
+    "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",
-    "tinycolor2": "^1.6.0",
-    "x-data-spreadsheet": "^1.1.9",
-    "ranuts": "0.1.0-alpha.10"
-  },
-  "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;
   }
 }
 ```