ranui 0.1.10-alpha.7 → 0.2.0-alpha.0

package/package.json

@@ -1,11 +1,30 @@
 {
   "name": "ranui",
-  "version": "0.1.10-alpha.7",
+  "version": "0.2.0-alpha.0",
   "description": "UI Component library based on `Web Component`",
-  "main": "dist/umd/index.umd.cjs",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
   "type": "module",
   "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "builder": [
+        "./dist/builder.d.ts"
+      ],
+      "ssr": [
+        "./dist/ssr.d.ts"
+      ],
+      "ssr-stream": [
+        "./dist/ssr-stream.d.ts"
+      ],
+      "typings": [
+        "./dist/typings.d.ts"
+      ],
+      "*": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
   "homepage": "https://chaxus.github.io/ran/src/ranui/",
   "repository": {
     "type": "git",
@@ -18,22 +37,14 @@
   "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"
+    "node": ">=20.19.0"
   },
   "files": [
     "dist",
-    "typings.d.ts"
+    "typings.d.ts",
+    "docs/DESIGN.md",
+    "docs/COMPONENTS.md",
+    "docs/style-tokens-public.md"
   ],
   "keywords": [
     "ran",
@@ -45,152 +56,205 @@
     "web components",
     "webComponents",
     "ranui",
-    "@ranui/react"
+    "lib"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
-    "./shadowless": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/shadowless.js",
-      "require": "./dist/umd/shadowless/shadowless.umd.cjs"
+    "./style": "./dist/ranui.css",
+    "./builder": {
+      "types": "./dist/builder.d.ts",
+      "import": "./dist/builder.js",
+      "require": "./dist/index.cjs"
+    },
+    "./ssr": {
+      "types": "./dist/ssr.d.ts",
+      "import": "./dist/ssr.js",
+      "require": "./dist/index.cjs"
+    },
+    "./ssr-stream": {
+      "types": "./dist/ssr-stream.d.ts",
+      "import": "./dist/ssr-stream.js",
+      "require": "./dist/index.cjs"
     },
     "./button": {
       "types": "./dist/index.d.ts",
       "import": "./dist/button.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./icon": {
       "types": "./dist/index.d.ts",
       "import": "./dist/icon.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./image": {
       "types": "./dist/index.d.ts",
       "import": "./dist/image.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./input": {
       "types": "./dist/index.d.ts",
       "import": "./dist/input.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./message": {
       "types": "./dist/index.d.ts",
       "import": "./dist/message.js",
-      "require": "./dist/umd/index.umd.cjs"
-    },
-    "./preview": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/preview.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./skeleton": {
       "types": "./dist/index.d.ts",
       "import": "./dist/skeleton.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./tab": {
       "types": "./dist/index.d.ts",
       "import": "./dist/tab.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./tabpane": {
       "types": "./dist/index.d.ts",
       "import": "./dist/tabpane.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./radar": {
       "types": "./dist/index.d.ts",
       "import": "./dist/radar.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./modal": {
       "types": "./dist/index.d.ts",
       "import": "./dist/modal.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./select": {
       "types": "./dist/index.d.ts",
       "import": "./dist/select.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./progress": {
       "types": "./dist/index.d.ts",
       "import": "./dist/progress.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./player": {
       "types": "./dist/index.d.ts",
       "import": "./dist/player.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./popover": {
       "types": "./dist/index.d.ts",
       "import": "./dist/popover.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
+    },
+    "./dropdown": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/dropdown.js",
+      "require": "./dist/index.cjs"
     },
     "./content": {
       "types": "./dist/index.d.ts",
       "import": "./dist/content.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./loading": {
       "types": "./dist/index.d.ts",
       "import": "./dist/loading.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./colorpicker": {
       "types": "./dist/index.d.ts",
       "import": "./dist/colorpicker.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./math": {
       "types": "./dist/index.d.ts",
       "import": "./dist/math.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
     },
     "./checkbox": {
       "types": "./dist/index.d.ts",
       "import": "./dist/checkbox.js",
-      "require": "./dist/umd/index.umd.cjs"
+      "require": "./dist/index.cjs"
+    },
+    "./card": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/card.js",
+      "require": "./dist/index.cjs"
+    },
+    "./router": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/router.js",
+      "require": "./dist/index.cjs"
+    },
+    "./route": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/route.js",
+      "require": "./dist/index.cjs"
     },
-    "./style": {
+    "./link": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/style.css",
-      "require": "./dist/umd/index.umd.cjs"
+      "import": "./dist/link.js",
+      "require": "./dist/index.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.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.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"
+    "@argos-ci/playwright": "^7.1.1",
+    "@playwright/test": "^1.61.1",
+    "@types/node": "^26.0.1",
+    "@vitest/coverage-v8": "^4.1.9",
+    "jsdom": "^29.1.1",
+    "less": "^4.6.7",
+    "prettier": "^3.8.5",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "svgo": "^4.0.1",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9"
   },
   "dependencies": {
-    "dayjs": "^1.11.11",
-    "exceljs": "^4.4.0",
-    "jszip": "^3.10.1",
-    "lodash": "^4.17.21",
-    "ranuts": "workspace:^",
-    "tinycolor2": "^1.6.0"
+    "ranuts": "^0.2.0-alpha.0"
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "build": "sh ./bin/build.sh",
+    "build:release": "sh -c \"RANUI_MINIFY=terser RANUI_CSS_MINIFY=esbuild sh ./bin/build.sh\"",
+    "build:analyze": "sh -c \"RANUI_ANALYZE=true RANUI_MINIFY=esbuild RANUI_CSS_MINIFY=esbuild sh ./bin/build.sh\"",
+    "build:es": "vite build -c ./build/config.es.ts",
+    "build:bundle": "vite build -c ./build/config.bundle.ts",
+    "prepublish": "npm run build",
+    "test": "sh ./bin/test.sh",
+    "test:unit": "NODE_OPTIONS=--max-old-space-size=4096 vitest run",
+    "test:unit:watch": "NODE_OPTIONS=--max-old-space-size=4096 vitest",
+    "test:unit:coverage": "NODE_OPTIONS=--max-old-space-size=4096 vitest run --coverage",
+    "test:ssr": "vitest run --config vitest.config.ssr.ts",
+    "test:ssr:watch": "vitest --config vitest.config.ssr.ts",
+    "test:all": "pnpm -F ranuts build && npm run tsc && npm run test:unit && npm run test:ssr",
+    "test:e2e": "playwright test",
+    "test:report": "playwright show-report",
+    "test:ui": "playwright test --ui",
+    "test:update": "playwright test --update-snapshots",
+    "tsc": "tsc --noEmit",
+    "doc:style": "tsx ./bin/generate-style-docs.ts",
+    "doc:api": "tsx ./bin/generate-component-api.ts"
   }
-}
+}

package/typings.d.ts

@@ -1,9 +1,9 @@
+/// <reference types="vite/client" />
 declare module '*.less';
 declare module '*.less?inline';
 declare module '*.ts';
 declare module '*.svg';
-declare module 'docx-preview';
-declare module 'exceljs/*';
+declare module '*.svg?raw';
 declare module '@/assets/*';
 declare module '@/public/*';
 declare module '@/components/*';
@@ -14,8 +14,12 @@ declare namespace Ran {
     content: string;
     duration?: number;
     close?: () => void;
+    top?: number | string;
+    zIndex?: number | string;
+    getContainer?: () => HTMLElement | null;
   }
-  type Hint = (options: Prompt | string) => void;
+
+  type Hint = (options: Prompt | string | undefined | null) => void;
 
   interface Message {
     info: Hint;
@@ -91,123 +95,166 @@ interface MathJax {
   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;
+declare global {
+  interface Window {
+    ranui: Partial<Ranui>;
+    message: Partial<Ran.Message>;
+    MathJax: MathJax;
+    katex: {
+      render: (x: string, y: HTMLElement, z: object) => void;
     };
-    getDocument: (x: string | ArrayBuffer) => {
-      promise: Promise<PDFDocumentProxy>;
+    pdfjsLib: {
+      GlobalWorkerOptions: {
+        workerSrc: string;
+      };
+      getDocument: (x: string | ArrayBuffer) => {
+        promise: Promise<PDFDocumentProxy>;
+      };
     };
-  };
-  Hls: HLS;
+  }
 }
 
-
-
+enum ICON_NAME_AMP {
+  DOUBLE_BOUNCE = 'double-bounce',
+  ROTATE = 'rotate',
+  STRETCH = 'stretch',
+  CUBE = 'cube',
+  DOT = 'dot',
+  TRIPLE_BOUNCE = 'triple-bounce',
+  SCALE_OUT = 'scale-out',
+  CIRCLE = 'circle',
+  CIRCLE_LINE = 'circle-line',
+  SQUARE = 'square',
+  PULSE = 'pulse',
+  SOLAR = 'solar',
+  CUBE_FOLD = 'cube-fold',
+  CIRCLE_FOLD = 'circle-fold',
+  CUBE_GRID = 'cube-grid',
+  CIRCLE_TURN = 'circle-turn',
+  CIRCLE_ROTATE = 'circle-rotate',
+  CIRCLE_SPIN = 'circle-spin',
+  DOT_BAR = 'dot-bar',
+  DOT_CIRCLE = 'dot-circle',
+  LINE = 'line',
+  DOT_PULSE = 'dot-pulse',
+  LINE_SCALE = 'line-scale',
+  TEXT = 'text',
+  CUBE_DIM = 'cube-dim',
+  DOT_LINE = 'dot-line',
+  ARC = 'arc',
+  DROP = 'drop',
+  PACMAN = 'pacman',
+}
+interface BaseIntrinsicElements {
+  'r-loading': any & {
+    name: ICON_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;
+    closePopover: () => void;
+  };
+  'r-content': any;
+  '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;
+    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;
+  };
+  'r-icon': any & {
+    name?: string;
+    size?: string;
+    color?: string;
+  };
+}
 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;
-    };
+  interface IntrinsicElements extends BaseIntrinsicElements {}
+}
+
+namespace React {
+  namespace JSX {
+    interface IntrinsicElements extends BaseIntrinsicElements {}
   }
 }

package/dist/_commonjs-dynamic-modules-DLbDWi6a.js

@@ -1,12 +0,0 @@
-var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-function commonjsRequire(path) {
-  throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
-}
-export {
-  commonjsRequire as a,
-  commonjsGlobal as c,
-  getDefaultExportFromCjs as g
-};

package/dist/add-user-BN1JlY7e.js

@@ -1,4 +0,0 @@
-const addUser = { "success": true, "_identification": true, "data": '<svg t="1667110768583" class="icon" viewBox="0 0 1024 1024" version="1.1"\n    xmlns="http://www.w3.org/2000/svg" p-id="8046" width="200" height="200">\n    <path\n        d="M678.3 642.4c24.2-13 51.9-20.4 81.4-20.4h0.1c3 0 4.4-3.6 2.2-5.6-30.8-27.6-65.6-49.7-103.7-65.8-0.4-0.2-0.8-0.3-1.2-0.5C719.2 505 759.6 431.7 759.6 349c0-137-110.8-248-247.5-248S264.7 212 264.7 349c0 82.7 40.4 156 102.6 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.7 18.9-84.8 46-119.3 80.6-34.5 34.5-61.5 74.7-80.4 119.5C147.9 794.5 138 841 137 888.8c-0.1 4.5 3.5 8.2 8 8.2h59.9c4.3 0 7.9-3.5 8-7.8 2-77.2 32.9-149.5 87.6-204.3C357 628.2 432.2 597 512.2 597c56.7 0 111.1 15.7 158 45.1 2.5 1.5 5.5 1.7 8.1 0.3zM512.2 521c-45.8 0-88.9-17.9-121.4-50.4-32.4-32.5-50.3-75.7-50.3-121.6 0-45.9 17.9-89.1 50.3-121.6S466.3 177 512.2 177s88.9 17.9 121.4 50.4c32.4 32.5 50.3 75.7 50.3 121.6 0 45.9-17.9 89.1-50.3 121.6C601.1 503.1 558 521 512.2 521zM880 759h-84v-84c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v84h-84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h84v84c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-84h84c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"\n        p-id="8047"></path>\n</svg>' };
-export {
-  addUser as default
-};