ranui 0.1.10-alpha.9 → 0.2.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +397 -0
- package/README.zh-CN.md +216 -37
- package/dist/assets/image/failImage.d.ts +2 -0
- package/dist/bin/generate-component-api.d.ts +1 -0
- package/dist/bin/generate-style-docs.d.ts +1 -0
- package/dist/build/config.bundle.d.ts +2 -0
- package/dist/build/config.d.ts +3 -0
- package/dist/build/config.es.d.ts +2 -0
- package/dist/build/config.umd.d.ts +1 -0
- package/dist/builder.d.ts +11 -0
- package/dist/builder.js +39 -0
- package/dist/button-DukaD6uL.js +117 -0
- package/dist/button.js +3 -5
- package/dist/card-DQUJoDUQ.js +60 -0
- package/dist/card.js +5 -0
- package/dist/checkbox-iHZQb-yQ.js +94 -0
- package/dist/checkbox.js +3 -5
- package/dist/colorpicker-Ch67dWa_.js +302 -0
- package/dist/colorpicker.js +3 -9
- package/dist/components/button/index.d.ts +44 -0
- package/dist/components/card/index.d.ts +21 -0
- package/dist/components/checkbox/index.d.ts +35 -0
- package/dist/components/colorpicker/index.d.ts +88 -0
- package/dist/components/dropdown/index.d.ts +32 -0
- package/dist/components/form/index.d.ts +15 -0
- package/dist/components/icon/index.d.ts +58 -0
- package/dist/components/image/index.d.ts +25 -0
- package/dist/components/input/index.d.ts +229 -0
- package/dist/components/link/index.d.ts +21 -0
- package/dist/components/loading/index.d.ts +76 -0
- package/dist/components/math/index.d.ts +16 -0
- package/dist/components/message/container.d.ts +8 -0
- package/dist/components/message/index.d.ts +32 -0
- package/dist/components/modal/index.d.ts +100 -0
- package/dist/components/player/core/constants.d.ts +5 -0
- package/dist/components/player/core/controller.d.ts +33 -0
- package/dist/components/player/core/events.d.ts +10 -0
- package/dist/components/player/core/fullscreen.d.ts +5 -0
- package/dist/components/player/core/levels.d.ts +20 -0
- package/dist/components/player/core/media.d.ts +50 -0
- package/dist/components/player/core/playback.d.ts +14 -0
- package/dist/components/player/core/progress.d.ts +2 -0
- package/dist/components/player/core/state.d.ts +27 -0
- package/dist/components/player/core/view.d.ts +39 -0
- package/dist/components/player/index.d.ts +277 -0
- package/dist/components/popover/content/index.d.ts +12 -0
- package/dist/components/popover/index.d.ts +95 -0
- package/dist/components/progress/index.d.ts +40 -0
- package/dist/components/radar/index.d.ts +52 -0
- package/dist/components/route/index.d.ts +26 -0
- package/dist/components/router/index.d.ts +24 -0
- package/dist/components/scratch/index.d.ts +19 -0
- package/dist/components/section/index.d.ts +23 -0
- package/dist/components/select/dropdown-item/index.d.ts +21 -0
- package/dist/components/select/index.d.ts +135 -0
- package/dist/components/select/option/index.d.ts +19 -0
- package/dist/components/skeleton/index.d.ts +13 -0
- package/dist/components/tab/index.d.ts +58 -0
- package/dist/components/tabpane/index.d.ts +33 -0
- package/dist/demo/i18n.d.ts +4 -0
- package/dist/demo/index.d.ts +3 -0
- package/dist/demo/register-icons.d.ts +1 -0
- package/dist/dropdown-C5362qTy.js +82 -0
- package/dist/dropdown.js +6 -0
- package/dist/events-C59wGdni.js +30 -0
- package/dist/factory-BdsO0dEW.js +165 -0
- package/dist/form-05Lxxl3D.js +44 -0
- package/dist/form.js +5 -0
- package/dist/icon-DmoEnao5.js +165 -0
- package/dist/icon.js +4 -4
- package/dist/{index-KS2nvVcO.js → image-6GayFDqX.js} +58 -71
- package/dist/image.js +3 -2
- package/dist/index.cjs +35 -0
- package/dist/index.d.ts +277 -114
- package/dist/index.iife.js +306 -0
- package/dist/index.js +78 -38
- package/dist/input-DoraIb3x.js +198 -0
- package/dist/input.js +2 -3
- package/dist/katex-es-Bpesphgp.js +23682 -0
- package/dist/katex-es-Cnq5Pk8K.cjs +261 -0
- package/dist/link-BW-gvrpN.js +77 -0
- package/dist/link.js +6 -0
- package/dist/loading-Mko22ncl.js +206 -0
- package/dist/loading.js +4 -6
- package/dist/math-B5PpSnFR.js +52 -0
- package/dist/math.js +2 -4
- package/dist/message-CQENvkoi.js +137 -0
- package/dist/message.js +3 -4
- package/dist/mocks-CMGoftIc.js +179 -0
- package/dist/modal-DruDj3AB.js +350 -0
- package/dist/modal.js +3 -2
- package/dist/player-CvfmwWUa.js +13536 -0
- package/dist/player.js +3 -6
- package/dist/playwright.config.d.ts +2 -0
- package/dist/plugins/load-svg.d.ts +9 -0
- package/dist/popover-BCvHwLZb.js +213 -0
- package/dist/popover.js +3 -5
- package/dist/progress-BWkNf2J5.js +123 -0
- package/dist/progress.js +3 -5
- package/dist/radar-CWsawt2g.js +181 -0
- package/dist/radar.js +3 -4
- package/dist/ranui.css +1 -0
- package/dist/route-BY_E6-2C.js +88 -0
- package/dist/route.js +6 -0
- package/dist/router-BDcv4F-2.js +79 -0
- package/dist/router.js +6 -0
- package/dist/scratch-Dbd9G6Q6.js +60 -0
- package/dist/scratch.js +4 -0
- package/dist/section-CNTvgdQ-.js +63 -0
- package/dist/section.js +5 -0
- package/dist/select-BmhCUTLb.js +433 -0
- package/dist/select.js +3 -8
- package/dist/signal-XHfNsQNW.js +57 -0
- package/dist/skeleton-DPv9nFhL.js +32 -0
- package/dist/skeleton.js +3 -2
- package/dist/ssg.js +21 -0
- package/dist/ssr-DSGwPtEd.js +34 -0
- package/dist/ssr-stream.d.ts +1 -0
- package/dist/ssr-stream.js +87 -0
- package/dist/ssr.d.ts +1 -0
- package/dist/ssr.js +7 -0
- package/dist/style.d.ts +1 -0
- package/dist/style.js +0 -0
- package/dist/tab-C9swK-hm.js +185 -0
- package/dist/tab.js +3 -4
- package/dist/tabpane-B_M-Jokw.js +87 -0
- package/dist/tabpane.js +3 -2
- package/dist/test/e2e/button.spec.d.ts +1 -0
- package/dist/test/e2e/checkbox.spec.d.ts +1 -0
- package/dist/test/e2e/helpers.d.ts +13 -0
- package/dist/test/e2e/icon.spec.d.ts +1 -0
- package/dist/test/e2e/image.spec.d.ts +1 -0
- package/dist/test/e2e/input.spec.d.ts +1 -0
- package/dist/test/e2e/loading.spec.d.ts +1 -0
- package/dist/test/e2e/message.spec.d.ts +1 -0
- package/dist/test/e2e/modal.spec.d.ts +1 -0
- package/dist/test/e2e/popover.spec.d.ts +1 -0
- package/dist/test/e2e/progress.spec.d.ts +1 -0
- package/dist/test/e2e/radar.spec.d.ts +1 -0
- package/dist/test/e2e/select.spec.d.ts +1 -0
- package/dist/test/e2e/skeleton.spec.d.ts +1 -0
- package/dist/test/e2e/tab.spec.d.ts +1 -0
- package/dist/test/e2e/visual/colorpicker.spec.d.ts +1 -0
- package/dist/test/e2e/visual/components.spec.d.ts +1 -0
- package/dist/test/e2e/visual/player.spec.d.ts +1 -0
- package/dist/test/integration/composition.test.d.ts +23 -0
- package/dist/test/setup.d.ts +0 -0
- package/dist/test/ssr/builder.core.ssr.test.d.ts +1 -0
- package/dist/test/ssr/builder.factory.ssr.test.d.ts +1 -0
- package/dist/test/ssr/builder.mocks.test.d.ts +1 -0
- package/dist/test/ssr/components/button.test.d.ts +1 -0
- package/dist/test/ssr/css-vars.test.d.ts +1 -0
- package/dist/test/ssr/registry.test.d.ts +1 -0
- package/dist/test/ssr/router.ssg.test.d.ts +2 -0
- package/dist/test/ssr/snapshots/button.test.d.ts +1 -0
- package/dist/test/ssr/stream.test.d.ts +2 -0
- package/dist/test/ssr/theme.tokens.ssr.test.d.ts +1 -0
- package/dist/test/unit/builder.core.browser.test.d.ts +1 -0
- package/dist/test/unit/builder.escape.test.d.ts +1 -0
- package/dist/test/unit/builder.selectors.test.d.ts +1 -0
- package/dist/test/unit/button.contract.test.d.ts +1 -0
- package/dist/test/unit/card.contract.test.d.ts +1 -0
- package/dist/test/unit/checkbox.contract.test.d.ts +1 -0
- package/dist/test/unit/colorpicker.color.utils.test.d.ts +1 -0
- package/dist/test/unit/colorpicker.contract.test.d.ts +1 -0
- package/dist/test/unit/colorpicker.methods.test.d.ts +1 -0
- package/dist/test/unit/component.helpers.test.d.ts +1 -0
- package/dist/test/unit/dropdown-item.contract.test.d.ts +1 -0
- package/dist/test/unit/dropdown.contract.test.d.ts +1 -0
- package/dist/test/unit/form.contract.test.d.ts +1 -0
- package/dist/test/unit/helpers/component.d.ts +3 -0
- package/dist/test/unit/helpers/dom.d.ts +2 -0
- package/dist/test/unit/icon.contract.test.d.ts +1 -0
- package/dist/test/unit/image.contract.test.d.ts +1 -0
- package/dist/test/unit/input.contract.test.d.ts +1 -0
- package/dist/test/unit/link.contract.test.d.ts +1 -0
- package/dist/test/unit/loading.contract.test.d.ts +1 -0
- package/dist/test/unit/math.contract.test.d.ts +1 -0
- package/dist/test/unit/message.component.test.d.ts +1 -0
- package/dist/test/unit/message.container.test.d.ts +1 -0
- package/dist/test/unit/modal.contract.test.d.ts +1 -0
- package/dist/test/unit/option.contract.test.d.ts +1 -0
- package/dist/test/unit/package-exports.source.test.d.ts +1 -0
- package/dist/test/unit/player-controls.test.d.ts +1 -0
- package/dist/test/unit/player-core.test.d.ts +1 -0
- package/dist/test/unit/player-event-handlers.test.d.ts +1 -0
- package/dist/test/unit/player-events.test.d.ts +1 -0
- package/dist/test/unit/player-fullscreen.test.d.ts +1 -0
- package/dist/test/unit/player-interactions.test.d.ts +1 -0
- package/dist/test/unit/player-levels.test.d.ts +1 -0
- package/dist/test/unit/player-media.test.d.ts +1 -0
- package/dist/test/unit/player-playback.test.d.ts +1 -0
- package/dist/test/unit/player.contract.test.d.ts +1 -0
- package/dist/test/unit/popover-accessibility.test.d.ts +1 -0
- package/dist/test/unit/popover.contract.test.d.ts +2 -0
- package/dist/test/unit/progress.contract.test.d.ts +1 -0
- package/dist/test/unit/radar.contract.test.d.ts +1 -0
- package/dist/test/unit/route.contract.test.d.ts +1 -0
- package/dist/test/unit/router.contract.test.d.ts +2 -0
- package/dist/test/unit/scratch.contract.test.d.ts +1 -0
- package/dist/test/unit/select-accessibility.test.d.ts +1 -0
- package/dist/test/unit/select-option.contract.test.d.ts +1 -0
- package/dist/test/unit/select.contract.test.d.ts +1 -0
- package/dist/test/unit/skeleton.contract.test.d.ts +1 -0
- package/dist/test/unit/ssr.test.d.ts +1 -0
- package/dist/test/unit/tab.contract.test.d.ts +2 -0
- package/dist/test/unit/theme.semantic-tokens.test.d.ts +1 -0
- package/dist/test/unit/theme.skin-tokens.test.d.ts +1 -0
- package/dist/test/unit/utils.dom.test.d.ts +1 -0
- package/dist/test/unit/utils.error.test.d.ts +1 -0
- package/dist/test/unit/utils.i18n.test.d.ts +1 -0
- package/dist/test/unit/utils.image.test.d.ts +1 -0
- package/dist/test/unit/utils.math.test.d.ts +1 -0
- package/dist/test/unit/utils.router.test.d.ts +1 -0
- package/dist/test/unit/utils.signal.test.d.ts +1 -0
- package/dist/test/unit/utils.ssr-stream.test.d.ts +1 -0
- package/dist/test/unit/utils.style.test.d.ts +1 -0
- package/dist/test/unit/utils.theme.test.d.ts +1 -0
- package/dist/test/unit/utils.tween.test.d.ts +1 -0
- package/dist/tsconfig.json +8 -8
- package/dist/typings.d.ts +163 -114
- package/dist/utils/builder/core.d.ts +70 -0
- package/dist/utils/builder/env.d.ts +1 -0
- package/dist/utils/builder/escape.d.ts +2 -0
- package/dist/utils/builder/events.d.ts +55 -0
- package/dist/utils/builder/factory.d.ts +18 -0
- package/dist/utils/builder/index.d.ts +9 -0
- package/dist/utils/builder/mocks.d.ts +62 -0
- package/dist/utils/builder/selectors.d.ts +4 -0
- package/dist/utils/builder/signal.d.ts +87 -0
- package/dist/utils/color.d.ts +52 -0
- package/dist/utils/component.d.ts +16 -0
- package/dist/utils/dom.d.ts +39 -0
- package/dist/utils/error.d.ts +6 -0
- package/dist/utils/i18n/index.d.ts +53 -0
- package/dist/utils/i18n.js +88 -0
- package/dist/utils/image.d.ts +39 -0
- package/dist/utils/index.d.ts +8 -0
- package/dist/utils/math.d.ts +26 -0
- package/dist/utils/router/index.d.ts +128 -0
- package/dist/utils/router.js +197 -0
- package/dist/utils/ssg.d.ts +49 -0
- package/dist/utils/ssr-registry.d.ts +8 -0
- package/dist/utils/ssr-stream.d.ts +23 -0
- package/dist/utils/ssr.d.ts +17 -0
- package/dist/utils/style.d.ts +12 -0
- package/dist/utils/theme.d.ts +9 -0
- package/dist/utils/tween.d.ts +21 -0
- package/dist/utils/video.d.ts +40 -0
- package/dist/utils-D4pPF77E.js +689 -0
- package/dist/vite.config.d.ts +6 -0
- package/dist/vitest.config.d.ts +2 -0
- package/dist/vitest.config.ssr.d.ts +2 -0
- package/docs/COMPONENTS.md +326 -0
- package/docs/DESIGN.md +182 -0
- package/docs/style-tokens-public.md +880 -0
- package/package.json +136 -77
- package/typings.d.ts +163 -114
- package/dist/_commonjs-dynamic-modules-DLbDWi6a.js +0 -12
- package/dist/add-user-BN1JlY7e.js +0 -4
- package/dist/arrow-down-B_hCY3Wt.js +0 -662
- package/dist/book-nTEFXU2x.js +0 -4
- package/dist/check-circle-fill-B_pd8ZSs.js +0 -4
- package/dist/check-circle-szyAJiap.js +0 -4
- package/dist/close-CFnkhudp.js +0 -4
- package/dist/close-circle-CwmuN2C6.js +0 -4
- package/dist/close-circle-fill-jSqPPw9i.js +0 -4
- package/dist/colz-DJZvo_8B.js +0 -232
- package/dist/docx-CHkPTdGU.js +0 -3665
- package/dist/drop-4j4abxje.js +0 -36
- package/dist/eye-D_mEt17f.js +0 -4
- package/dist/eye-close-BVr3NJtg.js +0 -4
- package/dist/home-BUQ4USMk.js +0 -4
- package/dist/iconShadowless.js +0 -6
- package/dist/index-15M0olqa.js +0 -204
- package/dist/index-1v568_nq.js +0 -140
- package/dist/index-B897keW5.js +0 -279
- package/dist/index-BZR0HaP2.js +0 -40
- package/dist/index-B_GuEcTd.js +0 -9575
- package/dist/index-Bc2Bcl8D.js +0 -63701
- package/dist/index-C4Sv0T51.js +0 -495
- package/dist/index-C6RcMHoH.js +0 -187
- package/dist/index-C9z10IgG.js +0 -103
- package/dist/index-CFjEuvBW.js +0 -308
- package/dist/index-CGEx9VOA.js +0 -17106
- package/dist/index-CGYfjKUV.js +0 -72
- package/dist/index-CQTJoWhb.js +0 -19
- package/dist/index-CiWwvEMM.js +0 -511
- package/dist/index-CkM9ENTf.js +0 -496
- package/dist/index-CtVOgBDk.js +0 -659
- package/dist/index-D4qUro5V.js +0 -279
- package/dist/index-D4y9c1Dj.js +0 -310
- package/dist/index-DAxs7Dd2.js +0 -119
- package/dist/index-DC5EA657.js +0 -91
- package/dist/index-DJZmDHz-.js +0 -146
- package/dist/index-D_CA5VDZ.js +0 -158
- package/dist/index-WfFw4LJT.js +0 -490
- package/dist/index-mhFL9MJp.js +0 -320
- package/dist/info-circle-COnL5bTJ.js +0 -4
- package/dist/info-circle-fill-CFeVMdci.js +0 -4
- package/dist/inputShadowless.js +0 -6
- package/dist/jszip.min-Dhs3nUkD.js +0 -2346
- package/dist/katex-es-B5r5vt3m.js +0 -14628
- package/dist/loading-Dcc5RApI.js +0 -4
- package/dist/loading-scene-BMc2wqKm.js +0 -4
- package/dist/lock-Cr7BnmWN.js +0 -4
- package/dist/message-D36_Zo2l.js +0 -4
- package/dist/pdf-Cx0VWKFo.js +0 -118
- package/dist/power-off-lQRbiBak.js +0 -4
- package/dist/preview-CJbz9GjO.js +0 -4
- package/dist/preview.js +0 -7
- package/dist/selectShadowless.js +0 -564
- package/dist/setting-DemlgzVC.js +0 -4
- package/dist/shadowless.js +0 -8
- package/dist/sprite-CH2zLtZy.js +0 -141
- package/dist/style.css +0 -1
- package/dist/team-tl4NJXPC.js +0 -4
- package/dist/umd/index.umd.cjs +0 -60
- package/dist/umd/shadowless/shadowless.umd.cjs +0 -1
- package/dist/umd/shadowless/style.css +0 -1
- package/dist/umd/style.css +0 -1
- package/dist/unlock-CeU74z9n.js +0 -4
- package/dist/user-B-eVXwuk.js +0 -4
- package/dist/warning-circle-DDUgEDIv.js +0 -4
- package/dist/warning-circle-fill-lODUKz0i.js +0 -4
- package/readme.md +0 -195
package/dist/unlock-CeU74z9n.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
const unlock = { "success": true, "_identification": true, "data": '<svg t="1665313601302" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8185" width="200" height="200">\n <path d="M832 464H332V240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v68c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-68c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32z m-40 376H232V536h560v304z" p-id="8186"></path>\n <path d="M484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53c12.1-8.7 20-22.9 20-39 0-26.5-21.5-48-48-48s-48 21.5-48 48c0 16.1 7.9 30.3 20 39z" p-id="8187"></path>\n</svg>' };
|
|
2
|
-
export {
|
|
3
|
-
unlock as default
|
|
4
|
-
};
|
package/dist/user-B-eVXwuk.js
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
const user = { "success": true, "_identification": true, "data": '<svg t="1667483498347" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8544" width="200" height="200"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" p-id="8545"></path></svg>' };
|
|
2
|
-
export {
|
|
3
|
-
user as default
|
|
4
|
-
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
const warningCircle = { "success": true, "_identification": true, "data": '<svg t="1667895689016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8572" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="8573"></path><path d="M512 688m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8574"></path><path d="M488 576h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z" p-id="8575"></path></svg>' };
|
|
2
|
-
export {
|
|
3
|
-
warningCircle as default
|
|
4
|
-
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
const warningCircleFill = { "success": true, "_identification": true, "data": '<svg t="1667965273540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8989" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296z m32 440c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" p-id="8990"></path></svg>' };
|
|
2
|
-
export {
|
|
3
|
-
warningCircleFill as default
|
|
4
|
-
};
|
package/readme.md
DELETED
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
# ranui
|
|
2
|
-
|
|
3
|
-
UI Component library based on `Web Component`
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
<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>
|
|
8
|
-
<a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/npm/v/ranui.svg" alt="npm-v"></a>
|
|
9
|
-
<a href="https://github.com/chaxus/ran"><img src="https://img.shields.io/npm/dt/ranui.svg" alt="npm-d"></a>
|
|
10
|
-
<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>
|
|
11
|
-
<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>
|
|
12
|
-
|
|
13
|
-
**English** | [中文](./README.zh-CN.md)
|
|
14
|
-
|
|
15
|
-
## Feature
|
|
16
|
-
|
|
17
|
-
1. **Cross-Framework Compatibility**: Works seamlessly with React, Vue, Preact, SolidJS, Svelte, and more. Integrates with any JavaScript project following W3C standards.
|
|
18
|
-
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.
|
|
19
|
-
3. **Modular Design**: Breaks systems into small, reusable components for enhanced maintainability and scalability.
|
|
20
|
-
4. **Open-Source**: Licensed under MIT, providing free access to all source code for personal or commercial use.
|
|
21
|
-
5. **Interactive Documentation**: Offers detailed, interactive documentation with live examples for efficient learning.
|
|
22
|
-
6. **Type-Checking**: Built on TypeScript with full type support, ensuring robust and maintainable code.
|
|
23
|
-
7. **Stability and Durability**: Framework independent (React/vue), avoid disruptive updates, and ensure continuous project operation.
|
|
24
|
-
|
|
25
|
-
## Install
|
|
26
|
-
|
|
27
|
-
Using npm:
|
|
28
|
-
|
|
29
|
-
```console
|
|
30
|
-
npm install ranui --save
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## Document and Example
|
|
34
|
-
|
|
35
|
-
[See components and use examples](https://chaxus.github.io/ran/src/ranui/)
|
|
36
|
-
|
|
37
|
-
## Import
|
|
38
|
-
|
|
39
|
-
Support for on-demand import, which can reduce the size of loaded js
|
|
40
|
-
|
|
41
|
-
```js
|
|
42
|
-
import 'ranui/button';
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
If there is a style problem, you can import the style manually
|
|
46
|
-
|
|
47
|
-
```js
|
|
48
|
-
import 'ranui/style';
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
If there is a type problem, you can manually import the type
|
|
52
|
-
|
|
53
|
-
```ts
|
|
54
|
-
import 'ranui/types';
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Or
|
|
58
|
-
|
|
59
|
-
```ts
|
|
60
|
-
import 'ranui/dist/typings';
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
Support global import
|
|
64
|
-
|
|
65
|
-
```ts
|
|
66
|
-
import 'ranui';
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
- ES module
|
|
70
|
-
|
|
71
|
-
```js
|
|
72
|
-
import 'ranui';
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
Or
|
|
76
|
-
|
|
77
|
-
```js
|
|
78
|
-
import 'ranui/button';
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
- UMD, IIFE, CJS
|
|
82
|
-
|
|
83
|
-
```html
|
|
84
|
-
<script src="./ranui/dist/umd/index.umd.cjs"></script>
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
## Usage
|
|
88
|
-
|
|
89
|
-
It is based on the `Web Component`, you can use it without focusing on the framework.
|
|
90
|
-
|
|
91
|
-
In most cases, you can use it just like a native `div` tag
|
|
92
|
-
|
|
93
|
-
Here are some examples:
|
|
94
|
-
|
|
95
|
-
- html
|
|
96
|
-
- js
|
|
97
|
-
- jsx
|
|
98
|
-
- vue
|
|
99
|
-
- tsx
|
|
100
|
-
|
|
101
|
-
### html
|
|
102
|
-
|
|
103
|
-
```html
|
|
104
|
-
<script src="./ranui/dist/umd/index.umd.cjs"></script>
|
|
105
|
-
|
|
106
|
-
<body>
|
|
107
|
-
<r-button>Button</r-button>
|
|
108
|
-
</body>
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
### js
|
|
112
|
-
|
|
113
|
-
```js
|
|
114
|
-
import 'ranui';
|
|
115
|
-
|
|
116
|
-
const Button = document.createElement('r-button');
|
|
117
|
-
Button.appendChild('this is button text');
|
|
118
|
-
document.body.appendChild(Button);
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### jsx
|
|
122
|
-
|
|
123
|
-
```jsx
|
|
124
|
-
import 'ranui';
|
|
125
|
-
|
|
126
|
-
const App = () => {
|
|
127
|
-
return (
|
|
128
|
-
<>
|
|
129
|
-
<r-button>Button</r-button>
|
|
130
|
-
</>
|
|
131
|
-
);
|
|
132
|
-
};
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
### vue
|
|
136
|
-
|
|
137
|
-
```vue
|
|
138
|
-
<template>
|
|
139
|
-
<r-button></r-button>
|
|
140
|
-
</template>
|
|
141
|
-
<script>
|
|
142
|
-
import 'ranui';
|
|
143
|
-
</script>
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
### tsx
|
|
147
|
-
|
|
148
|
-
```tsx
|
|
149
|
-
// react 18
|
|
150
|
-
import type { SyntheticEvent } from 'react';
|
|
151
|
-
import React, { useRef } from 'react';
|
|
152
|
-
import 'ranui';
|
|
153
|
-
|
|
154
|
-
const FilePreview = () => {
|
|
155
|
-
const ref = useRef<HTMLDivElement | null>(null);
|
|
156
|
-
const uploadFile = (e: SyntheticEvent<HTMLDivElement>) => {
|
|
157
|
-
if (ref.current) {
|
|
158
|
-
const uploadFile = document.createElement('input');
|
|
159
|
-
uploadFile.setAttribute('type', 'file');
|
|
160
|
-
uploadFile.click();
|
|
161
|
-
uploadFile.onchange = (e) => {
|
|
162
|
-
const { files = [] } = uploadFile;
|
|
163
|
-
if (files && files?.length > 0 && ref.current) {
|
|
164
|
-
ref.current.setAttribute('src', '');
|
|
165
|
-
const file = files[0];
|
|
166
|
-
const url = URL.createObjectURL(file);
|
|
167
|
-
ref.current.setAttribute('src', url);
|
|
168
|
-
}
|
|
169
|
-
};
|
|
170
|
-
}
|
|
171
|
-
};
|
|
172
|
-
return (
|
|
173
|
-
<div>
|
|
174
|
-
<r-preview ref={ref}></r-preview>
|
|
175
|
-
<r-button type="primary" onClick={uploadFile}>
|
|
176
|
-
choose file to preview
|
|
177
|
-
</r-button>
|
|
178
|
-
</div>
|
|
179
|
-
);
|
|
180
|
-
};
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
## Contributors
|
|
184
|
-
|
|
185
|
-
<a href="https://github.com/chaxus/ran/graphs/contributors">
|
|
186
|
-
<img src="https://contrib.rocks/image?repo=chaxus/ran" />
|
|
187
|
-
</a>
|
|
188
|
-
|
|
189
|
-
## Visitors
|
|
190
|
-
|
|
191
|
-

|
|
192
|
-
|
|
193
|
-
## Meta
|
|
194
|
-
|
|
195
|
-
[LICENSE (MIT)](/LICENSE)
|