ranui 0.1.10-alpha.9 → 0.2.0-alpha.1
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-BstLjXNe.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-CGh8pRqo.js +315 -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 +99 -0
- package/dist/components/dropdown/index.d.ts +30 -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 +31 -0
- package/dist/components/input/index.d.ts +222 -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 +38 -0
- package/dist/components/player/index.d.ts +276 -0
- package/dist/components/popover/content/index.d.ts +12 -0
- package/dist/components/popover/index.d.ts +93 -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 +150 -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-RqHMRhFE.js +76 -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-Blm7AbyY.js +167 -0
- package/dist/icon.js +4 -4
- package/dist/{index-KS2nvVcO.js → image-DKm6z7YQ.js} +60 -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-Dskw1bAl.js +186 -0
- package/dist/input.js +2 -3
- package/dist/katex-es-BTpuCxxV.cjs +261 -0
- package/dist/katex-es-CKRwcaiU.js +23682 -0
- package/dist/link-BW-gvrpN.js +77 -0
- package/dist/link.js +6 -0
- package/dist/loading-C4QUpm70.js +206 -0
- package/dist/loading.js +4 -6
- package/dist/math-Dv4nXSoI.js +52 -0
- package/dist/math.js +2 -4
- package/dist/message-De5e1txT.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-CqTAmg_E.js +13534 -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-BY32HNMl.js +206 -0
- package/dist/popover.js +3 -5
- package/dist/progress-gZo0knzu.js +123 -0
- package/dist/progress.js +3 -5
- package/dist/radar-19P5Mtld.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-BVdUtQX5.js +454 -0
- package/dist/select.js +3 -8
- package/dist/signal-XHfNsQNW.js +57 -0
- package/dist/skeleton-BAdJ6vyA.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-DH2owP2V.js +184 -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 +324 -0
- package/docs/DESIGN.md +198 -0
- package/docs/style-tokens-public.md +880 -0
- package/package.json +137 -78
- 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/index-CtVOgBDk.js
DELETED
|
@@ -1,659 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import { c as create, a as addClassToElement, r as removeClassToElement, i as isMobile, f as generateThrottle } from "./arrow-down-B_hCY3Wt.js";
|
|
5
|
-
import { c as createCustomError, i as isDisabled, H as HTMLElementSSR } from "./index-DC5EA657.js";
|
|
6
|
-
import "./index-C9z10IgG.js";
|
|
7
|
-
import "./index-D4qUro5V.js";
|
|
8
|
-
import "./index-C4Sv0T51.js";
|
|
9
|
-
const f7170ee498e0dd32cbdcb63fba8f75cc = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}r-select{position:var(--ran-select, relative);width:var(--ran-select, 120px);height:var(--ran-select, 40px)}:host{position:var(--ran-select-host, relative);display:var(--ran-select-host, inline-block);cursor:var(--ran-select-host, pointer);height:var(--ran-select-host, 32px);outline:var(--ran-select-host, 0);-webkit-tap-highlight-color:var(--ran-select-host-highlight-color, transparent)}:host,:host(:focus),:host(:active){outline:var(--ran-select-host-focus-outline, 0);-webkit-tap-highlight-color:transparent}:host ::slotted(r-option){display:none}:host([disabled]){cursor:var(--ran-select-host-disabled-cursor, not-allowed);pointer-events:var(--ran-select-host-disabled-pointer-events, all);opacity:var(--ran-select-host-disabled-opacity, .6)}:host([type="text"])::part(selection){border:none}:host([type="text"])::part(icon){display:none}:host(:not([disabled]):hover) .select{cursor:var(--ran-select-host-hover-cursor, pointer)}:host(:not([disabled]):hover) .selection{border:var(--ran-select-host-selection-border, 1px solid #1890ff)}:host(:not([disabled]):hover) .selection-search{cursor:var(--ran-select-host-selection-search-cursor, pointer)}:host(:not([disabled]):hover) .selection-item{cursor:var(--ran-select-host-selection-item-cursor, pointer);color:var(--ran-select-host-selection-item-color, #bfbfbf)}:host(:not([disabled]):focus) .selection{border:var(--ran-select-host-selection-focus-border, 1px solid #1890ff)}:host(:not([disabled]):focus) .selection-search{cursor:var(--ran-select-host-selection-focus-search-cursor, pointer)}:host(:not([disabled]):focus) .selection-item{cursor:var(--ran-select-host-selection-focus-item-cursor, pointer);color:var(--ran-select-host-selection-focus-item-color, #bfbfbf)}:host .selection-search{display:var(--ran-select-host-selection-search-display, none)}:host([showSearch]:not([disabled])) .selection-search{cursor:var(--ran-select-host-showSearch-selection-search-cursor, text);display:var(--ran-select-host-showSearch-selection-search-display, block)}:host([showSearch]:not([disabled])) .selection-item{cursor:var(--ran-select-host-showSearch-selection-item-cursor, pointer)}:host([showSearch]:not([disabled]):focus) .selection-search{display:var(--ran-select-host-showSearch-selection-search-display, block);cursor:var(--ran-select-host-showSearch-selection-search-cursor, text);opacity:var(--ran-select-host-showSearch-selection-search-opacity, 1)}.ran-select{width:var(--ran-select-width, 100%);height:var(--ran-select-width, 100%);font-size:var(--ran-select-font-size, 14px);box-sizing:var(--ran-select-box-sizing, border-box);margin:var(--ran-select-margin, 0);padding:var(--ran-select-padding, 0);color:var(--ran-select-color, rgba(0, 0, 0, .88));line-height:var(--ran-select-line-height, 1.57142857);list-style:var(--ran-select-list-style, none);font-family:var(--ran-select-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");position:var(--ran-select-position, relative);display:var(--ran-select-display, inline-block)}.ran-select .selection{position:var(--ran-select-selection-position, relative);background-color:var(--ran-select-selection-background-color, #ffffff);border:var(--ran-select-selection-border, 1px solid #d9d9d9);transition:var(--ran-select-selection-transition, all .2s cubic-bezier(.645, .045, .355, 1));width:var(--ran-select-selection-width, 100%);height:var(--ran-select-selection-height, 100%);padding:var(--ran-select-selection-padding, 0 11px);box-sizing:var(--ran-select-selection-box-sizing, border-box);margin:var(--ran-select-selection-margin, 0);color:var(--ran-select-selection-color, rgba(0, 0, 0, .88));font-size:var(--ran-select-selection-font-size, 14px);line-height:var(--ran-select-selection-line-height, 1.57142857);list-style:var(--ran-select-selection-list-style, none);font-family:var(--ran-select-selection-font-family, inherit);display:var(--ran-select-selection-display, flex);border-radius:var(--ran-select-selection-border-radius, 6px)}.ran-select .selection-search{position:var(--ran-select-selection-search-position, absolute);opacity:var(--ran-select-selection-search-opacity, 0);top:var(--ran-select-selection-search-top, 0);left:var(--ran-select-selection-search-left, 0);height:var(--ran-select-selection-search-height, 100%);inset-inline-start:var(--ran-select-selection-search-inset-inline-start, 11px);inset-inline-end:var(--ran-select-selection-search-inset-inline-end, 11px);margin:var(--ran-select-selection-search-margin, 0);padding:var(--ran-select-selection-search-padding, 0);background:var(--ran-select-selection-search-background, transparent);border:var(--ran-select-selection-search-border, none);outline:var(--ran-select-selection-search-outline, none);-webkit-appearance:var(--ran-select-selection-search-appearance, none);-moz-appearance:var(--ran-select-selection-search-appearance, none);appearance:var(--ran-select-selection-search-appearance, none);font-family:var(--ran-select-selection-search-font-family, inherit);cursor:var(--ran-select-selection-search-cursor, not-allowed)}.ran-select .selection-search::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ran-select .selection-search::part(ran-input){border:none;padding:0;height:100%;outline:none}.ran-select .selection-search::part(ran-input):active{border:none;padding:0;height:100%;outline:none;border-color:transparent;box-shadow:none;border-right-width:0px}.ran-select .selection-item{position:var(--ran-select-selection-item-position, absolute);top:var(--ran-select-selection-item-top, 0);left:var(--ran-select-selection-item-left, 12px);margin:var(--ran-select-selection-item-margin, 0);padding:var(--ran-select-selection-item-padding, 0);background:var(--ran-select-selection-item-background, transparent);border:var(--ran-select-selection-item-border, none);outline:var(--ran-select-selection-item-outline, none);-webkit-appearance:var(--ran-select-selection-item-appearance, none);-moz-appearance:var(--ran-select-selection-item-appearance, none);appearance:var(--ran-select-selection-item-appearance, none);font-family:var(--ran-select-selection-item-font-family, inherit);height:var(--ran-select-selection-item-height, 100%);-webkit-user-select:var(--ran-select-selection-item-user-select, none);user-select:var(--ran-select-selection-item-user-select, none);overflow:var(--ran-select-selection-item-overflow, hidden);white-space:var(--ran-select-selection-item-white-space, nowrap);text-overflow:var(--ran-select-selection-item-text-overflow, ellipsis);cursor:var(--ran-select-selection-item-cursor, pointer)}.ran-select .selection-select{color:var(--ran-select-selection-select-color, rgba(0, 0, 0, .25))}.ran-select .selection .icon{display:var(--ran-select-selection-icon-display, flex);align-items:var(--ran-select-selection-icon-align-items, center);color:var(--ran-select-selection-icon-color, rgba(0, 0, 0, .25));font-style:var(--ran-select-selection-icon-font-style, normal);text-align:var(--ran-select-selection-icon-text-align, center);text-transform:var(--ran-select-selection-icon-text-transform, none);text-rendering:var(--ran-select-selection-icon-text-rendering, optimizeLegibility);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:var(--ran-select-selection-icon-position, absolute);top:var(--ran-select-selection-icon-top, 50%);inset-inline-start:var(--ran-select-selection-icon-inset-inline-start, auto);inset-inline-end:var(--ran-select-selection-icon-inset-inline-end, 8px);height:var(--ran-select-selection-icon-height, 12px);margin-top:var(--ran-select-selection-icon-margin-top, -3px);font-size:var(--ran-select-selection-icon-font-size, 12px);pointer-events:var(--ran-select-selection-icon-color, pointer-events)}';
|
|
10
|
-
function Custom$2() {
|
|
11
|
-
if (typeof document !== "undefined" && !customElements.get("r-option")) {
|
|
12
|
-
class Option extends HTMLElement {
|
|
13
|
-
constructor() {
|
|
14
|
-
super();
|
|
15
|
-
__publicField(this, "_option");
|
|
16
|
-
__publicField(this, "_optionContent");
|
|
17
|
-
__publicField(this, "_shadowDom");
|
|
18
|
-
__publicField(this, "_slot");
|
|
19
|
-
this._slot = document.createElement("slot");
|
|
20
|
-
this._option = document.createElement("div");
|
|
21
|
-
this._option.setAttribute("class", "ran-option");
|
|
22
|
-
this._optionContent = document.createElement("div");
|
|
23
|
-
this._optionContent.setAttribute("class", "ran-option-content");
|
|
24
|
-
this._optionContent.appendChild(this._slot);
|
|
25
|
-
this._option.appendChild(this._optionContent);
|
|
26
|
-
const shadowRoot = this.attachShadow({ mode: "closed" });
|
|
27
|
-
this._shadowDom = shadowRoot;
|
|
28
|
-
shadowRoot.appendChild(this._option);
|
|
29
|
-
}
|
|
30
|
-
static get observedAttributes() {
|
|
31
|
-
return ["disabled", "sheet", "value"];
|
|
32
|
-
}
|
|
33
|
-
get value() {
|
|
34
|
-
return this.getAttribute("value");
|
|
35
|
-
}
|
|
36
|
-
set value(value) {
|
|
37
|
-
this.setAttribute("value", value || "");
|
|
38
|
-
}
|
|
39
|
-
get sheet() {
|
|
40
|
-
return this.getAttribute("sheet");
|
|
41
|
-
}
|
|
42
|
-
set sheet(value) {
|
|
43
|
-
this.setAttribute("sheet", value || "");
|
|
44
|
-
}
|
|
45
|
-
get disabled() {
|
|
46
|
-
return isDisabled(this);
|
|
47
|
-
}
|
|
48
|
-
set disabled(value) {
|
|
49
|
-
if (!value || value === "false") {
|
|
50
|
-
this.removeAttribute("disabled");
|
|
51
|
-
} else {
|
|
52
|
-
this.setAttribute("disabled", "");
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
handlerExternalCss() {
|
|
56
|
-
if (this.sheet) {
|
|
57
|
-
try {
|
|
58
|
-
const sheet = new CSSStyleSheet();
|
|
59
|
-
sheet.insertRule(this.sheet);
|
|
60
|
-
this._shadowDom.adoptedStyleSheets = [sheet];
|
|
61
|
-
} catch (error) {
|
|
62
|
-
console.error(`Failed to parse the rule in CSSStyleSheet: ${this.sheet}`);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
connectedCallback() {
|
|
67
|
-
}
|
|
68
|
-
disconnectCallback() {
|
|
69
|
-
}
|
|
70
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
71
|
-
if (name === "disabled" && this._option) {
|
|
72
|
-
if (!newValue || newValue === "false") {
|
|
73
|
-
this._option.setAttribute("disabled", "");
|
|
74
|
-
} else {
|
|
75
|
-
this._option.removeAttribute("disabled");
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
if (name === "sheet" && this._shadowDom && oldValue !== newValue) this.handlerExternalCss();
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
return Option;
|
|
82
|
-
} else {
|
|
83
|
-
return createCustomError("document is undefined or r-option is exist");
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
Custom$2();
|
|
87
|
-
const less = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.ranui-dropdown-option-item{position:var(--ran-dropdown-option-item-position, relative);display:var(--ran-dropdown-option-item-display, block);padding:var(--ran-dropdown-option-item-padding, 5px 12px);color:var(--ran-dropdown-option-item-color, rgba(0, 0, 0, .88));font-weight:var(--ran-dropdown-option-item-font-weight, normal);font-size:var(--ran-dropdown-option-item-font-size, 14px);transition:var(--ran-dropdown-option-item-transition, background .3s ease);border-radius:var(--ran-dropdown-option-item-border-radius, 4px)}.ranui-dropdown-option-item:hover{background-color:var(--ran-dropdown-option-item-hover-background-color, rgba(0, 0, 0, .04))}.ranui-dropdown-option-item-content{text-align:var(--ran-dropdown-content-text-align, left);overflow:var(--ran-dropdown-content-overflow, hidden);white-space:var(--ran-dropdown-content-white-space, nowrap);text-overflow:var(--ran-dropdown-content-text-overflow, ellipsis);color:var(--ran-dropdown-content-color, rgba(0, 0, 0, .88));font-size:var(--ran-dropdown-content-font-size, 14px);line-height:var(--ran-dropdown-content-line-height, 1.57142857);box-sizing:var(--ran-dropdown-content-box-sizing, border-box);list-style:var(--ran-dropdown-content-list-style, none);font-family:var(--ran-dropdown-content-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-variant:var(--ran-dropdown-content-font-variant, initial)}.ranui-dropdown-option-active{background-color:var(--ran-dropdown-option-active-background-color, #e6f7ff);font-weight:var(--ran-dropdown-option-active-font-weight, bold)}.ranui-dropdown-option-active:hover{background-color:var(--ran-dropdown-option-active-hover-background-color, #e6f7ff)}';
|
|
88
|
-
class DropdownItem extends HTMLElementSSR() {
|
|
89
|
-
constructor() {
|
|
90
|
-
super();
|
|
91
|
-
__publicField(this, "ionDropdownItem");
|
|
92
|
-
__publicField(this, "_slot");
|
|
93
|
-
__publicField(this, "_shadowDom");
|
|
94
|
-
__publicField(this, "ionDropdownItemContent");
|
|
95
|
-
this._slot = create("slot").setAttribute("class", "slot");
|
|
96
|
-
this.ionDropdownItemContent = create("div").setAttribute("class", "ranui-dropdown-option-item-content").setAttribute("part", "ranui-dropdown-option-item-content").addChild(this._slot);
|
|
97
|
-
this.ionDropdownItem = create("div").setAttribute("class", "ranui-dropdown-option-item").setAttribute("part", "ranui-dropdown-option-item").addChild([this.ionDropdownItemContent]);
|
|
98
|
-
const shadowRoot = this.attachShadow({ mode: "closed" });
|
|
99
|
-
this._shadowDom = shadowRoot;
|
|
100
|
-
const style = create("style").setTextContent(less);
|
|
101
|
-
shadowRoot.appendChild(style.element);
|
|
102
|
-
shadowRoot.appendChild(this.ionDropdownItem.element);
|
|
103
|
-
}
|
|
104
|
-
static get observedAttributes() {
|
|
105
|
-
return ["active", "value", "title"];
|
|
106
|
-
}
|
|
107
|
-
get value() {
|
|
108
|
-
return this.getAttribute("value") || "";
|
|
109
|
-
}
|
|
110
|
-
set value(value) {
|
|
111
|
-
if (!isDisabled(this) && value) {
|
|
112
|
-
this.setAttribute("value", value);
|
|
113
|
-
} else {
|
|
114
|
-
this.removeAttribute("value");
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
get active() {
|
|
118
|
-
return this.getAttribute("active") || "";
|
|
119
|
-
}
|
|
120
|
-
set active(value) {
|
|
121
|
-
if (value) {
|
|
122
|
-
this.setAttribute("active", value);
|
|
123
|
-
} else {
|
|
124
|
-
this.removeAttribute("active");
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
get title() {
|
|
128
|
-
return this.getAttribute("title") || "";
|
|
129
|
-
}
|
|
130
|
-
set title(value) {
|
|
131
|
-
if (value) {
|
|
132
|
-
this.setAttribute("title", value);
|
|
133
|
-
} else {
|
|
134
|
-
this.removeAttribute("title");
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
connectedCallback() {
|
|
138
|
-
if (this.active) {
|
|
139
|
-
addClassToElement(this.ionDropdownItem.element, "ranui-dropdown-option-active");
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
143
|
-
if (name === "active" && newValue) {
|
|
144
|
-
addClassToElement(this.ionDropdownItem.element, "ranui-dropdown-option-active");
|
|
145
|
-
} else {
|
|
146
|
-
removeClassToElement(this.ionDropdownItem.element, "ranui-dropdown-option-active");
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
function Custom$1() {
|
|
151
|
-
if (typeof document !== "undefined" && !customElements.get("r-dropdown-item")) {
|
|
152
|
-
customElements.define("r-dropdown-item", DropdownItem);
|
|
153
|
-
return DropdownItem;
|
|
154
|
-
} else {
|
|
155
|
-
return createCustomError("document is undefined or r-dropdown-item is exist");
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
Custom$1();
|
|
159
|
-
const placementDirection = {
|
|
160
|
-
bottom: {
|
|
161
|
-
add: "ran-dropdown-down-in",
|
|
162
|
-
remove: "ran-dropdown-down-out"
|
|
163
|
-
},
|
|
164
|
-
top: {
|
|
165
|
-
add: "ran-dropdown-up-in",
|
|
166
|
-
remove: "ran-dropdown-up-out"
|
|
167
|
-
}
|
|
168
|
-
};
|
|
169
|
-
const searchThrottle = generateThrottle();
|
|
170
|
-
const animationTime = 300;
|
|
171
|
-
class Select extends HTMLElementSSR() {
|
|
172
|
-
constructor() {
|
|
173
|
-
super();
|
|
174
|
-
__publicField(this, "removeTimeId");
|
|
175
|
-
__publicField(this, "_slot");
|
|
176
|
-
__publicField(this, "_shadowDom");
|
|
177
|
-
__publicField(this, "_select");
|
|
178
|
-
__publicField(this, "_selection");
|
|
179
|
-
__publicField(this, "_search");
|
|
180
|
-
__publicField(this, "_icon");
|
|
181
|
-
__publicField(this, "_selectDropdown");
|
|
182
|
-
__publicField(this, "_selectionDropdown");
|
|
183
|
-
__publicField(this, "_selectDropDownInTimeId");
|
|
184
|
-
__publicField(this, "_selectDropDownOutTimeId");
|
|
185
|
-
__publicField(this, "_optionList");
|
|
186
|
-
__publicField(this, "_optionLabelMapValue");
|
|
187
|
-
__publicField(this, "_optionValueMapLabel");
|
|
188
|
-
__publicField(this, "_activeOption");
|
|
189
|
-
__publicField(this, "_text");
|
|
190
|
-
__publicField(this, "_selector");
|
|
191
|
-
__publicField(this, "onSearch");
|
|
192
|
-
/**
|
|
193
|
-
* @description: 移除 select dropdown
|
|
194
|
-
* @return {*}
|
|
195
|
-
*/
|
|
196
|
-
__publicField(this, "setSelectDropdownDisplayNone", () => {
|
|
197
|
-
if (this._selectDropDownOutTimeId) return;
|
|
198
|
-
if (this._selectionDropdown && this._selectionDropdown.style.display !== "none") {
|
|
199
|
-
this._selectionDropdown.setAttribute("transit", placementDirection[this.placement].remove);
|
|
200
|
-
this._selectDropDownOutTimeId = setTimeout(() => {
|
|
201
|
-
var _a;
|
|
202
|
-
(_a = this._selectionDropdown) == null ? void 0 : _a.style.setProperty("display", "none");
|
|
203
|
-
this._selectionDropdown && this._selectionDropdown.removeAttribute("transit");
|
|
204
|
-
clearTimeout(this._selectDropDownOutTimeId);
|
|
205
|
-
this._selectDropDownOutTimeId = void 0;
|
|
206
|
-
}, animationTime);
|
|
207
|
-
}
|
|
208
|
-
});
|
|
209
|
-
/**
|
|
210
|
-
* @description: 添加 select dropdown
|
|
211
|
-
* @return {*}
|
|
212
|
-
*/
|
|
213
|
-
__publicField(this, "setSelectDropdownDisplayBlock", () => {
|
|
214
|
-
var _a;
|
|
215
|
-
if (this._selectDropDownInTimeId) return;
|
|
216
|
-
if (this._selectionDropdown && this._selectionDropdown.style.display !== "block") {
|
|
217
|
-
this._selectionDropdown.setAttribute("transit", placementDirection[this.placement].add);
|
|
218
|
-
(_a = this._selectionDropdown) == null ? void 0 : _a.style.setProperty("display", "block");
|
|
219
|
-
this._selectDropDownInTimeId = setTimeout(() => {
|
|
220
|
-
this._selectionDropdown && this._selectionDropdown.removeAttribute("transit");
|
|
221
|
-
clearTimeout(this._selectDropDownInTimeId);
|
|
222
|
-
this._selectDropDownInTimeId = void 0;
|
|
223
|
-
}, animationTime);
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
__publicField(this, "placementPosition", () => {
|
|
227
|
-
if (!this._selectionDropdown || !this._selectDropdown) return;
|
|
228
|
-
const rect = this.getBoundingClientRect();
|
|
229
|
-
const { top, left, bottom, width, height, x, y, right } = rect;
|
|
230
|
-
const root = document.getElementById(this.getPopupContainerId);
|
|
231
|
-
this._selectionDropdown.style.setProperty("position", `absolute`);
|
|
232
|
-
this._selectionDropdown.style.setProperty("--ran-x", `${top + window.scrollX}`);
|
|
233
|
-
this._selectionDropdown.style.setProperty("--ran-y", `${left + window.scrollY}`);
|
|
234
|
-
let selectTop = bottom + window.scrollY;
|
|
235
|
-
let selectLeft = left + window.scrollX;
|
|
236
|
-
this._selectionDropdown.style.setProperty("width", `${width}px`);
|
|
237
|
-
if (this.placement === "top") {
|
|
238
|
-
selectTop = top + window.scrollY - this._selectionDropdown.clientHeight;
|
|
239
|
-
}
|
|
240
|
-
if (this.getPopupContainerId && root) {
|
|
241
|
-
const rootRect = root.getBoundingClientRect();
|
|
242
|
-
selectLeft = left - rootRect.left;
|
|
243
|
-
if (this.placement === "top") {
|
|
244
|
-
selectTop = top - root.getBoundingClientRect().top - this._selectionDropdown.clientHeight;
|
|
245
|
-
} else {
|
|
246
|
-
selectTop = root.getBoundingClientRect().height;
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
this._selectionDropdown.style.setProperty("inset", `${selectTop}px auto auto ${selectLeft}px`);
|
|
250
|
-
});
|
|
251
|
-
/**
|
|
252
|
-
* @description: 设置下拉框
|
|
253
|
-
* @return {*}
|
|
254
|
-
*/
|
|
255
|
-
__publicField(this, "selectMouseDown", (e) => {
|
|
256
|
-
e.stopPropagation();
|
|
257
|
-
if (isDisabled(this)) return;
|
|
258
|
-
this.removeDropDownTimeId(e);
|
|
259
|
-
this.setSelectDropdownDisplayNone();
|
|
260
|
-
this.setSelectDropdownDisplayBlock();
|
|
261
|
-
this.placementPosition();
|
|
262
|
-
});
|
|
263
|
-
__publicField(this, "removeDropDownTimeId", (e) => {
|
|
264
|
-
e.stopPropagation();
|
|
265
|
-
this._search.setAttribute("value", "");
|
|
266
|
-
if (this.trigger.includes("hover") && !isMobile()) {
|
|
267
|
-
clearTimeout(this.removeTimeId);
|
|
268
|
-
this.removeTimeId = void 0;
|
|
269
|
-
}
|
|
270
|
-
});
|
|
271
|
-
/**
|
|
272
|
-
* @description: 焦点移除的情况,需要移除 select 下拉框
|
|
273
|
-
* @return {*}
|
|
274
|
-
*/
|
|
275
|
-
__publicField(this, "selectBlur", (e) => {
|
|
276
|
-
e.stopPropagation();
|
|
277
|
-
if (this.removeTimeId) {
|
|
278
|
-
this.removeDropDownTimeId(e);
|
|
279
|
-
}
|
|
280
|
-
this.removeTimeId = setTimeout(() => {
|
|
281
|
-
this.removeDropDownTimeId(e);
|
|
282
|
-
this.setSelectDropdownDisplayNone();
|
|
283
|
-
}, 300);
|
|
284
|
-
});
|
|
285
|
-
/**
|
|
286
|
-
* @description: 选中一个选项的情况
|
|
287
|
-
* @param {MouseEvent} e
|
|
288
|
-
* @return {*}
|
|
289
|
-
*/
|
|
290
|
-
__publicField(this, "clickOption", (e) => {
|
|
291
|
-
e.stopPropagation();
|
|
292
|
-
const element = e.target;
|
|
293
|
-
const label = element.innerHTML;
|
|
294
|
-
const value = this._optionLabelMapValue.get(label);
|
|
295
|
-
if (value) {
|
|
296
|
-
this.setAttribute("value", value);
|
|
297
|
-
this._text.innerHTML = label;
|
|
298
|
-
this._text.setAttribute("title", label);
|
|
299
|
-
this._search.setAttribute("placeholder", label);
|
|
300
|
-
}
|
|
301
|
-
const rect = this.getBoundingClientRect();
|
|
302
|
-
const { height } = rect;
|
|
303
|
-
this._text.style.setProperty("line-height", `${height}px`);
|
|
304
|
-
if (this._activeOption) {
|
|
305
|
-
this._activeOption.removeAttribute("active");
|
|
306
|
-
}
|
|
307
|
-
this._activeOption = element;
|
|
308
|
-
if (this._activeOption) {
|
|
309
|
-
this._activeOption.setAttribute("active", value || "");
|
|
310
|
-
}
|
|
311
|
-
this.setSelectDropdownDisplayNone();
|
|
312
|
-
this.dispatchEvent(new CustomEvent("change", { detail: { value, label } }));
|
|
313
|
-
this.removeDropDownTimeId(e);
|
|
314
|
-
});
|
|
315
|
-
/**
|
|
316
|
-
* @description: 初始化创建选项下拉框
|
|
317
|
-
* @return {*}
|
|
318
|
-
*/
|
|
319
|
-
__publicField(this, "createOption", () => {
|
|
320
|
-
if (!this._selectDropdown) {
|
|
321
|
-
const container = document.getElementById(this.getPopupContainerId) || document.body;
|
|
322
|
-
this._selectDropdown = document.createElement("div");
|
|
323
|
-
this._selectDropdown.style.setProperty("-webkit-tap-highlight-color", "transparent");
|
|
324
|
-
this._selectDropdown.style.setProperty("outline", "0");
|
|
325
|
-
this._selectDropdown.addEventListener("click", this.clickOption);
|
|
326
|
-
this._selectionDropdown = document.createElement("r-dropdown");
|
|
327
|
-
if (this.dropdownclass) {
|
|
328
|
-
this._selectionDropdown.setAttribute("class", this.dropdownclass);
|
|
329
|
-
}
|
|
330
|
-
if (this.trigger.includes("hover") && !isMobile()) {
|
|
331
|
-
this._selectDropdown.addEventListener("mouseleave", this.selectBlur);
|
|
332
|
-
this._selectDropdown.addEventListener("mouseenter", this.removeDropDownTimeId);
|
|
333
|
-
}
|
|
334
|
-
this._selectDropdown.appendChild(this._selectionDropdown);
|
|
335
|
-
this._selectionDropdown.style.setProperty("display", "none");
|
|
336
|
-
container.appendChild(this._selectDropdown);
|
|
337
|
-
}
|
|
338
|
-
});
|
|
339
|
-
/**
|
|
340
|
-
* @description: 移除选项下拉框
|
|
341
|
-
* @return {*}
|
|
342
|
-
*/
|
|
343
|
-
__publicField(this, "removeSelectDropdown", () => {
|
|
344
|
-
try {
|
|
345
|
-
if (this._selectDropdown) {
|
|
346
|
-
const container = document.getElementById(this.getPopupContainerId) || document.body;
|
|
347
|
-
container.removeChild(this._selectDropdown);
|
|
348
|
-
}
|
|
349
|
-
} catch (error) {
|
|
350
|
-
}
|
|
351
|
-
});
|
|
352
|
-
/**
|
|
353
|
-
* @description: 当 select 中有 option 元素的时候,给 dropdown 添加元素
|
|
354
|
-
* @return {*}
|
|
355
|
-
*/
|
|
356
|
-
__publicField(this, "addOptionToSlot", () => {
|
|
357
|
-
const slots = this._slot.assignedElements();
|
|
358
|
-
slots.forEach((item) => {
|
|
359
|
-
var _a;
|
|
360
|
-
if (item.tagName !== "R-OPTION") return;
|
|
361
|
-
const label = item.innerHTML;
|
|
362
|
-
const value = item.getAttribute("value") || "";
|
|
363
|
-
(_a = this._optionList) == null ? void 0 : _a.push({ label, value });
|
|
364
|
-
if (this._optionLabelMapValue.get(label)) {
|
|
365
|
-
console.warn(`${label} is repeat option`);
|
|
366
|
-
}
|
|
367
|
-
if (this._optionValueMapLabel.get(value)) {
|
|
368
|
-
console.warn(`${value} is repeat option`);
|
|
369
|
-
}
|
|
370
|
-
this._optionLabelMapValue.set(label, value);
|
|
371
|
-
this._optionValueMapLabel.set(value, label);
|
|
372
|
-
});
|
|
373
|
-
this.createSelectDropdownContent(this._optionList);
|
|
374
|
-
});
|
|
375
|
-
__publicField(this, "createSelectDropdownContent", (options = []) => {
|
|
376
|
-
var _a, _b;
|
|
377
|
-
if (options.length === 0) {
|
|
378
|
-
(_a = this._selectDropdown) == null ? void 0 : _a.style.setProperty("display", "none");
|
|
379
|
-
} else {
|
|
380
|
-
(_b = this._selectDropdown) == null ? void 0 : _b.style.setProperty("display", "block");
|
|
381
|
-
}
|
|
382
|
-
options.forEach((item) => {
|
|
383
|
-
if (this._selectionDropdown) {
|
|
384
|
-
const { label, value } = item;
|
|
385
|
-
const selectOptionItem = document.createElement("r-dropdown-item");
|
|
386
|
-
const defaultValue = this.getAttribute("defaultValue") || this.getAttribute("value");
|
|
387
|
-
if (defaultValue === value) {
|
|
388
|
-
selectOptionItem.setAttribute("active", value);
|
|
389
|
-
this._activeOption = selectOptionItem;
|
|
390
|
-
} else {
|
|
391
|
-
selectOptionItem.removeAttribute("active");
|
|
392
|
-
}
|
|
393
|
-
selectOptionItem.innerHTML = `${label}`;
|
|
394
|
-
selectOptionItem.setAttribute("value", `${value}`);
|
|
395
|
-
selectOptionItem.setAttribute("title", `${label}`);
|
|
396
|
-
this._selectionDropdown.appendChild(selectOptionItem);
|
|
397
|
-
}
|
|
398
|
-
});
|
|
399
|
-
this.setDefaultValue();
|
|
400
|
-
});
|
|
401
|
-
__publicField(this, "setDefaultValue", () => {
|
|
402
|
-
const defaultValue = this.getAttribute("defaultValue") || this.getAttribute("value");
|
|
403
|
-
if (!defaultValue) return;
|
|
404
|
-
const label = this._optionValueMapLabel.get(defaultValue);
|
|
405
|
-
if (!label) return;
|
|
406
|
-
this.setAttribute("value", defaultValue);
|
|
407
|
-
const rect = this.getBoundingClientRect();
|
|
408
|
-
const { height } = rect;
|
|
409
|
-
this._text.style.setProperty("line-height", `${height}px`);
|
|
410
|
-
this._text.innerHTML = label;
|
|
411
|
-
this._text.setAttribute("title", label);
|
|
412
|
-
});
|
|
413
|
-
__publicField(this, "changeSearch", (e) => {
|
|
414
|
-
const value = e.detail.value || "";
|
|
415
|
-
this.dispatchEvent(
|
|
416
|
-
new CustomEvent("search", {
|
|
417
|
-
detail: { value }
|
|
418
|
-
})
|
|
419
|
-
);
|
|
420
|
-
if (this._selectionDropdown) {
|
|
421
|
-
this._selectionDropdown.innerHTML = "";
|
|
422
|
-
}
|
|
423
|
-
if (value.length > 0) {
|
|
424
|
-
const options = this._optionList.map((item) => {
|
|
425
|
-
const { label } = item;
|
|
426
|
-
if (`${label}`.toLowerCase().includes(value)) {
|
|
427
|
-
return { label, value: item.value };
|
|
428
|
-
}
|
|
429
|
-
return void 0;
|
|
430
|
-
}).filter((item) => item);
|
|
431
|
-
this.createSelectDropdownContent(options);
|
|
432
|
-
} else {
|
|
433
|
-
this.createSelectDropdownContent(this._optionList);
|
|
434
|
-
}
|
|
435
|
-
});
|
|
436
|
-
__publicField(this, "setShowSearch", () => {
|
|
437
|
-
this.onSearch = searchThrottle(this.changeSearch);
|
|
438
|
-
this.onSearch && this._search.addEventListener("change", this.onSearch);
|
|
439
|
-
this.onSearch && this._search.addEventListener("click", this.onSearch);
|
|
440
|
-
});
|
|
441
|
-
__publicField(this, "removeShowSearch", () => {
|
|
442
|
-
this.onSearch && this._search.removeEventListener("change", this.onSearch);
|
|
443
|
-
this.onSearch && this._search.removeEventListener("click", this.onSearch);
|
|
444
|
-
});
|
|
445
|
-
__publicField(this, "listenSlotChange", () => {
|
|
446
|
-
this._slot.addEventListener("slotchange", this.addOptionToSlot);
|
|
447
|
-
});
|
|
448
|
-
__publicField(this, "removeListenSlotChange", () => {
|
|
449
|
-
this._slot.removeEventListener("slotchange", this.addOptionToSlot);
|
|
450
|
-
});
|
|
451
|
-
__publicField(this, "listenActionEvent", () => {
|
|
452
|
-
this.removeEventListener("mouseenter", this.selectMouseDown);
|
|
453
|
-
this.removeEventListener("mouseleave", this.selectBlur);
|
|
454
|
-
this.removeEventListener("click", this.selectMouseDown);
|
|
455
|
-
this.removeEventListener("blur", this.selectBlur);
|
|
456
|
-
if (this.trigger.includes("hover") && !isMobile()) {
|
|
457
|
-
this.addEventListener("mouseenter", this.selectMouseDown);
|
|
458
|
-
this.addEventListener("mouseleave", this.selectBlur);
|
|
459
|
-
}
|
|
460
|
-
if (this.trigger.includes("click")) {
|
|
461
|
-
this.addEventListener("click", this.selectMouseDown);
|
|
462
|
-
this.addEventListener("blur", this.selectBlur);
|
|
463
|
-
}
|
|
464
|
-
});
|
|
465
|
-
__publicField(this, "clickRemoveSelect", (e) => {
|
|
466
|
-
e.stopPropagation();
|
|
467
|
-
this.setSelectDropdownDisplayNone();
|
|
468
|
-
});
|
|
469
|
-
this._slot = document.createElement("slot");
|
|
470
|
-
this._select = document.createElement("div");
|
|
471
|
-
this._select.setAttribute("class", "ran-select");
|
|
472
|
-
this._select.setAttribute("part", "select");
|
|
473
|
-
this._selection = document.createElement("div");
|
|
474
|
-
this._selection.setAttribute("class", "selection");
|
|
475
|
-
this._selection.setAttribute("part", "selection");
|
|
476
|
-
this._selector = document.createElement("div");
|
|
477
|
-
this._search = document.createElement("r-input");
|
|
478
|
-
this._search.setAttribute("class", "selection-search");
|
|
479
|
-
this._search.setAttribute("part", "search");
|
|
480
|
-
this._search.setAttribute("type", "search");
|
|
481
|
-
this._search.setAttribute("autocomplete", "off");
|
|
482
|
-
this._text = document.createElement("span");
|
|
483
|
-
this._text.setAttribute("class", "selection-item");
|
|
484
|
-
this._text.setAttribute("part", "selection-item");
|
|
485
|
-
this._icon = document.createElement("ra-icon");
|
|
486
|
-
this._icon.setAttribute("class", "icon");
|
|
487
|
-
this._icon.setAttribute("part", "icon");
|
|
488
|
-
this._icon.setAttribute("name", "arrow-down");
|
|
489
|
-
this._icon.setAttribute("color", "#d9d9d9");
|
|
490
|
-
this._icon.setAttribute("size", "16");
|
|
491
|
-
this._selector.appendChild(this._text);
|
|
492
|
-
this._selector.appendChild(this._search);
|
|
493
|
-
this._selection.appendChild(this._icon);
|
|
494
|
-
this._selection.appendChild(this._selector);
|
|
495
|
-
this._slot.setAttribute("class", "slot");
|
|
496
|
-
this._select.appendChild(this._selection);
|
|
497
|
-
this._select.appendChild(this._slot);
|
|
498
|
-
this._optionList = [];
|
|
499
|
-
this._optionLabelMapValue = /* @__PURE__ */ new Map();
|
|
500
|
-
this._optionValueMapLabel = /* @__PURE__ */ new Map();
|
|
501
|
-
const shadowRoot = this.attachShadow({ mode: "closed" });
|
|
502
|
-
const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement("style");
|
|
503
|
-
F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
|
|
504
|
-
shadowRoot.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);
|
|
505
|
-
this._shadowDom = shadowRoot;
|
|
506
|
-
this._shadowDom.appendChild(this._select);
|
|
507
|
-
}
|
|
508
|
-
static get observedAttributes() {
|
|
509
|
-
return [
|
|
510
|
-
"disabled",
|
|
511
|
-
"sheet",
|
|
512
|
-
"clear",
|
|
513
|
-
"type",
|
|
514
|
-
"defaultValue",
|
|
515
|
-
"showSearch",
|
|
516
|
-
"placement",
|
|
517
|
-
// 弹窗的方向
|
|
518
|
-
"getPopupContainerId",
|
|
519
|
-
// 挂载的节点
|
|
520
|
-
"dropdownclass",
|
|
521
|
-
// 弹窗的类名
|
|
522
|
-
"trigger"
|
|
523
|
-
// 触发下拉框的行为,click 还是 hover,hover 在 isMobile 移动端无效
|
|
524
|
-
];
|
|
525
|
-
}
|
|
526
|
-
get value() {
|
|
527
|
-
return this.getAttribute("value") || "";
|
|
528
|
-
}
|
|
529
|
-
set value(value) {
|
|
530
|
-
if (!isDisabled(this) && value) {
|
|
531
|
-
this.setAttribute("value", value);
|
|
532
|
-
} else {
|
|
533
|
-
this.removeAttribute("value");
|
|
534
|
-
}
|
|
535
|
-
}
|
|
536
|
-
get defaultValue() {
|
|
537
|
-
return this.getAttribute("defaultValue") || "";
|
|
538
|
-
}
|
|
539
|
-
set defaultValue(value) {
|
|
540
|
-
this.setAttribute("defaultValue", value || "");
|
|
541
|
-
}
|
|
542
|
-
get showSearch() {
|
|
543
|
-
return this.getAttribute("showSearch") || "";
|
|
544
|
-
}
|
|
545
|
-
set showSearch(value) {
|
|
546
|
-
this.setAttribute("showSearch", value || "");
|
|
547
|
-
}
|
|
548
|
-
get type() {
|
|
549
|
-
return this.getAttribute("type") || "";
|
|
550
|
-
}
|
|
551
|
-
set type(value) {
|
|
552
|
-
this.setAttribute("type", value || "");
|
|
553
|
-
}
|
|
554
|
-
get placement() {
|
|
555
|
-
return this.getAttribute("placement") || "bottom";
|
|
556
|
-
}
|
|
557
|
-
set placement(value) {
|
|
558
|
-
this.setAttribute("placement", value || "");
|
|
559
|
-
}
|
|
560
|
-
get sheet() {
|
|
561
|
-
return this.getAttribute("sheet") || "";
|
|
562
|
-
}
|
|
563
|
-
set sheet(value) {
|
|
564
|
-
this.setAttribute("sheet", value || "");
|
|
565
|
-
}
|
|
566
|
-
get getPopupContainerId() {
|
|
567
|
-
return this.getAttribute("getPopupContainerId") || "";
|
|
568
|
-
}
|
|
569
|
-
set getPopupContainerId(value) {
|
|
570
|
-
this.setAttribute("getPopupContainerId", value || "");
|
|
571
|
-
}
|
|
572
|
-
get dropdownclass() {
|
|
573
|
-
return this.getAttribute("dropdownclass") || "";
|
|
574
|
-
}
|
|
575
|
-
set dropdownclass(value) {
|
|
576
|
-
this.setAttribute("dropdownclass", value || "");
|
|
577
|
-
}
|
|
578
|
-
get trigger() {
|
|
579
|
-
return this.getAttribute("trigger") || "click";
|
|
580
|
-
}
|
|
581
|
-
set trigger(value) {
|
|
582
|
-
this.setAttribute("trigger", value || "");
|
|
583
|
-
}
|
|
584
|
-
get disabled() {
|
|
585
|
-
return isDisabled(this);
|
|
586
|
-
}
|
|
587
|
-
set disabled(value) {
|
|
588
|
-
if (!value || value === "false") {
|
|
589
|
-
this.removeAttribute("disabled");
|
|
590
|
-
this._selection.removeAttribute("disabled");
|
|
591
|
-
} else {
|
|
592
|
-
this.setAttribute("disabled", "");
|
|
593
|
-
this._selection.setAttribute("disabled", "");
|
|
594
|
-
}
|
|
595
|
-
}
|
|
596
|
-
handlerExternalCss() {
|
|
597
|
-
if (this.sheet) {
|
|
598
|
-
try {
|
|
599
|
-
const sheet = new CSSStyleSheet();
|
|
600
|
-
sheet.insertRule(this.sheet);
|
|
601
|
-
this._shadowDom.adoptedStyleSheets = [sheet];
|
|
602
|
-
} catch (error) {
|
|
603
|
-
console.error(`Failed to parse the rule in CSSStyleSheet: ${this.sheet}`);
|
|
604
|
-
}
|
|
605
|
-
}
|
|
606
|
-
}
|
|
607
|
-
connectedCallback() {
|
|
608
|
-
this.handlerExternalCss();
|
|
609
|
-
this.createOption();
|
|
610
|
-
this.listenActionEvent();
|
|
611
|
-
this.listenSlotChange();
|
|
612
|
-
this.setShowSearch();
|
|
613
|
-
document.addEventListener("click", this.clickRemoveSelect);
|
|
614
|
-
}
|
|
615
|
-
disconnectCallback() {
|
|
616
|
-
var _a;
|
|
617
|
-
this.removeEventListener("mouseenter", this.selectMouseDown);
|
|
618
|
-
this.removeEventListener("mouseleave", this.selectBlur);
|
|
619
|
-
this.removeEventListener("click", this.selectMouseDown);
|
|
620
|
-
this.removeEventListener("blur", this.selectBlur);
|
|
621
|
-
this.removeSelectDropdown();
|
|
622
|
-
(_a = this._selectDropdown) == null ? void 0 : _a.removeEventListener("click", this.clickOption);
|
|
623
|
-
this.removeListenSlotChange();
|
|
624
|
-
document.removeEventListener("click", this.clickRemoveSelect);
|
|
625
|
-
}
|
|
626
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
627
|
-
if (name === "disabled" && this._select) {
|
|
628
|
-
if (!newValue || newValue === "false") {
|
|
629
|
-
this._select.setAttribute("disabled", "");
|
|
630
|
-
this._selection.setAttribute("disabled", "");
|
|
631
|
-
} else {
|
|
632
|
-
this._select.removeAttribute("disabled");
|
|
633
|
-
this._selection.removeAttribute("disabled");
|
|
634
|
-
}
|
|
635
|
-
}
|
|
636
|
-
if (name === "sheet" && this._shadowDom && oldValue !== newValue) {
|
|
637
|
-
this.handlerExternalCss();
|
|
638
|
-
}
|
|
639
|
-
}
|
|
640
|
-
}
|
|
641
|
-
function Custom() {
|
|
642
|
-
if (typeof document !== "undefined" && !customElements.get("r-select")) {
|
|
643
|
-
customElements.define("r-select", Select);
|
|
644
|
-
return Select;
|
|
645
|
-
} else {
|
|
646
|
-
return createCustomError("document is undefined or r-select is exist");
|
|
647
|
-
}
|
|
648
|
-
}
|
|
649
|
-
const index = Custom();
|
|
650
|
-
const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
651
|
-
__proto__: null,
|
|
652
|
-
Select,
|
|
653
|
-
default: index
|
|
654
|
-
}, Symbol.toStringTag, { value: "Module" }));
|
|
655
|
-
export {
|
|
656
|
-
Select as S,
|
|
657
|
-
index as a,
|
|
658
|
-
index$1 as i
|
|
659
|
-
};
|