@greypan/web-ui 1.4.2 → 2.0.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.CN.md +674 -232
- package/README.md +683 -237
- package/dist/_virtual/{_@oxc-project_runtime@0.138.0 → _@oxc-project_runtime@0.140.0}/helpers/esm/decorate.js +1 -1
- package/dist/assets/glass.js +6 -0
- package/dist/assets/glass.js.map +1 -0
- package/dist/assets/menu-portal.js +6 -0
- package/dist/assets/menu-portal.js.map +1 -0
- package/dist/assets/overlay-motion.js +6 -0
- package/dist/assets/overlay-motion.js.map +1 -0
- package/dist/assets/toast-containers.js +6 -0
- package/dist/assets/toast-containers.js.map +1 -0
- package/dist/components/avatar/index.d.ts +30 -0
- package/dist/components/avatar/index.js +112 -0
- package/dist/components/avatar/index.js.map +1 -0
- package/dist/components/avatar/style.js +6 -0
- package/dist/components/avatar/style.js.map +1 -0
- package/dist/components/back-top/index.d.ts +8 -7
- package/dist/components/back-top/index.js +37 -32
- package/dist/components/back-top/index.js.map +1 -1
- package/dist/components/back-top/style.js +1 -1
- package/dist/components/back-top/style.js.map +1 -1
- package/dist/components/badge/index.d.ts +27 -0
- package/dist/components/badge/index.js +121 -0
- package/dist/components/badge/index.js.map +1 -0
- package/dist/components/badge/style.js +6 -0
- package/dist/components/badge/style.js.map +1 -0
- package/dist/components/button/index.d.ts +16 -3
- package/dist/components/button/index.js +56 -17
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/button/style.js +1 -1
- package/dist/components/button/style.js.map +1 -1
- package/dist/components/button-group/index.d.ts +16 -0
- package/dist/components/button-group/index.js +49 -0
- package/dist/components/button-group/index.js.map +1 -0
- package/dist/components/button-group/style.js +6 -0
- package/dist/components/button-group/style.js.map +1 -0
- package/dist/components/checkbox/index.d.ts +39 -0
- package/dist/components/checkbox/index.js +111 -0
- package/dist/components/checkbox/index.js.map +1 -0
- package/dist/components/checkbox/style.js +6 -0
- package/dist/components/checkbox/style.js.map +1 -0
- package/dist/components/checkbox-group/index.d.ts +35 -0
- package/dist/components/checkbox-group/index.js +99 -0
- package/dist/components/checkbox-group/index.js.map +1 -0
- package/dist/components/checkbox-group/style.js +6 -0
- package/dist/components/checkbox-group/style.js.map +1 -0
- package/dist/components/context-menu/index.d.ts +84 -0
- package/dist/components/context-menu/index.js +294 -0
- package/dist/components/context-menu/index.js.map +1 -0
- package/dist/components/context-menu/style.js +6 -0
- package/dist/components/context-menu/style.js.map +1 -0
- package/dist/components/dialog/index.d.ts +41 -0
- package/dist/components/dialog/index.js +118 -0
- package/dist/components/dialog/index.js.map +1 -0
- package/dist/components/dialog/style.js +6 -0
- package/dist/components/dialog/style.js.map +1 -0
- package/dist/components/drawer/index.d.ts +57 -0
- package/dist/components/drawer/index.js +172 -0
- package/dist/components/drawer/index.js.map +1 -0
- package/dist/components/drawer/style.js +6 -0
- package/dist/components/drawer/style.js.map +1 -0
- package/dist/components/dropdown-divider/index.d.ts +11 -0
- package/dist/components/dropdown-divider/index.js +18 -0
- package/dist/components/dropdown-divider/index.js.map +1 -0
- package/dist/components/dropdown-divider/style.js +6 -0
- package/dist/components/dropdown-divider/style.js.map +1 -0
- package/dist/components/dropdown-header/index.d.ts +11 -0
- package/dist/components/dropdown-header/index.js +18 -0
- package/dist/components/dropdown-header/index.js.map +1 -0
- package/dist/components/dropdown-header/style.js +6 -0
- package/dist/components/dropdown-header/style.js.map +1 -0
- package/dist/components/dropdown-item/index.d.ts +17 -0
- package/dist/components/dropdown-item/index.js +44 -0
- package/dist/components/dropdown-item/index.js.map +1 -0
- package/dist/components/dropdown-item/style.js +6 -0
- package/dist/components/dropdown-item/style.js.map +1 -0
- package/dist/components/dropdown-menu/index.d.ts +87 -0
- package/dist/components/dropdown-menu/index.js +324 -0
- package/dist/components/dropdown-menu/index.js.map +1 -0
- package/dist/components/dropdown-menu/style.js +6 -0
- package/dist/components/dropdown-menu/style.js.map +1 -0
- package/dist/components/empty/index.d.ts +23 -0
- package/dist/components/empty/index.js +83 -0
- package/dist/components/empty/index.js.map +1 -0
- package/dist/components/empty/style.js +6 -0
- package/dist/components/empty/style.js.map +1 -0
- package/dist/components/icon/index.d.ts +16 -0
- package/dist/components/icon/index.js +45 -0
- package/dist/components/icon/index.js.map +1 -0
- package/dist/components/icon/style.js +6 -0
- package/dist/components/icon/style.js.map +1 -0
- package/dist/components/index.d.ts +34 -0
- package/dist/components/index.js +37 -0
- package/dist/components/input/index.d.ts +47 -0
- package/dist/components/input/index.js +140 -0
- package/dist/components/input/index.js.map +1 -0
- package/dist/components/input/style.js +6 -0
- package/dist/components/input/style.js.map +1 -0
- package/dist/components/input-number/index.d.ts +52 -0
- package/dist/components/input-number/index.js +178 -0
- package/dist/components/input-number/index.js.map +1 -0
- package/dist/components/input-number/style.js +6 -0
- package/dist/components/input-number/style.js.map +1 -0
- package/dist/components/layout/index.d.ts +7 -1
- package/dist/components/layout/index.js +24 -21
- package/dist/components/layout/index.js.map +1 -1
- package/dist/components/layout/style.js +1 -1
- package/dist/components/layout/style.js.map +1 -1
- package/dist/components/option/index.d.ts +33 -0
- package/dist/components/option/index.js +78 -0
- package/dist/components/option/index.js.map +1 -0
- package/dist/components/option/style.js +6 -0
- package/dist/components/option/style.js.map +1 -0
- package/dist/components/popover/index.d.ts +69 -0
- package/dist/components/popover/index.js +231 -0
- package/dist/components/popover/index.js.map +1 -0
- package/dist/components/popover/style.js +6 -0
- package/dist/components/popover/style.js.map +1 -0
- package/dist/components/radio/index.d.ts +39 -0
- package/dist/components/radio/index.js +105 -0
- package/dist/components/radio/index.js.map +1 -0
- package/dist/components/radio/style.js +6 -0
- package/dist/components/radio/style.js.map +1 -0
- package/dist/components/radio-group/index.d.ts +35 -0
- package/dist/components/radio-group/index.js +87 -0
- package/dist/components/radio-group/index.js.map +1 -0
- package/dist/components/radio-group/style.js +6 -0
- package/dist/components/radio-group/style.js.map +1 -0
- package/dist/components/segmented/index.d.ts +33 -0
- package/dist/components/segmented/index.js +95 -0
- package/dist/components/segmented/index.js.map +1 -0
- package/dist/components/segmented/style.js +6 -0
- package/dist/components/segmented/style.js.map +1 -0
- package/dist/components/segmented-trigger/index.d.ts +18 -0
- package/dist/components/segmented-trigger/index.js +52 -0
- package/dist/components/segmented-trigger/index.js.map +1 -0
- package/dist/components/segmented-trigger/style.js +6 -0
- package/dist/components/segmented-trigger/style.js.map +1 -0
- package/dist/components/select/index.d.ts +80 -0
- package/dist/components/select/index.js +291 -0
- package/dist/components/select/index.js.map +1 -0
- package/dist/components/select/style.js +6 -0
- package/dist/components/select/style.js.map +1 -0
- package/dist/components/slider/index.d.ts +61 -0
- package/dist/components/slider/index.js +219 -0
- package/dist/components/slider/index.js.map +1 -0
- package/dist/components/slider/style.js +6 -0
- package/dist/components/slider/style.js.map +1 -0
- package/dist/components/spinner/index.d.ts +32 -0
- package/dist/components/spinner/index.js +52 -0
- package/dist/components/spinner/index.js.map +1 -0
- package/dist/components/spinner/style.js +6 -0
- package/dist/components/spinner/style.js.map +1 -0
- package/dist/components/svg-draw-lines/index.d.ts +30 -9
- package/dist/components/svg-draw-lines/index.js +87 -62
- package/dist/components/svg-draw-lines/index.js.map +1 -1
- package/dist/components/svg-draw-lines/style.js +1 -1
- package/dist/components/svg-draw-lines/style.js.map +1 -1
- package/dist/components/switch/index.d.ts +37 -0
- package/dist/components/switch/index.js +117 -0
- package/dist/components/switch/index.js.map +1 -0
- package/dist/components/switch/style.js +6 -0
- package/dist/components/switch/style.js.map +1 -0
- package/dist/components/textarea/index.d.ts +65 -0
- package/dist/components/textarea/index.js +204 -0
- package/dist/components/textarea/index.js.map +1 -0
- package/dist/components/textarea/style.js +6 -0
- package/dist/components/textarea/style.js.map +1 -0
- package/dist/components/theme/index.d.ts +29 -0
- package/dist/components/theme/index.js +78 -0
- package/dist/components/theme/index.js.map +1 -0
- package/dist/components/theme/style.js +6 -0
- package/dist/components/theme/style.js.map +1 -0
- package/dist/components/toast/index.d.ts +3 -0
- package/dist/components/toast/index.js +3 -0
- package/dist/components/toast/manager.d.ts +15 -0
- package/dist/components/toast/manager.js +98 -0
- package/dist/components/toast/manager.js.map +1 -0
- package/dist/components/toast/style.js +6 -0
- package/dist/components/toast/style.js.map +1 -0
- package/dist/components/toast/toast.d.ts +42 -0
- package/dist/components/toast/toast.js +122 -0
- package/dist/components/toast/toast.js.map +1 -0
- package/dist/components/toast/types.d.ts +23 -0
- package/dist/components/tooltip/index.d.ts +59 -0
- package/dist/components/tooltip/index.js +190 -0
- package/dist/components/tooltip/index.js.map +1 -0
- package/dist/components/tooltip/style.js +6 -0
- package/dist/components/tooltip/style.js.map +1 -0
- package/dist/icons/generated/heroicons-check-16-solid.d.ts +6 -0
- package/dist/icons/generated/heroicons-check-16-solid.js +10 -0
- package/dist/icons/generated/heroicons-check-16-solid.js.map +1 -0
- package/dist/icons/generated/heroicons-x-mark-16-solid.d.ts +6 -0
- package/dist/icons/generated/heroicons-x-mark-16-solid.js +10 -0
- package/dist/icons/generated/heroicons-x-mark-16-solid.js.map +1 -0
- package/dist/icons/generated/jam-close-circle-f.d.ts +8 -0
- package/dist/icons/generated/jam-close-circle-f.js +12 -0
- package/dist/icons/generated/jam-close-circle-f.js.map +1 -0
- package/dist/icons/generated/jam-volume.d.ts +8 -0
- package/dist/icons/generated/jam-watch-f.d.ts +8 -0
- package/dist/icons/generated/lucide-arrow-down-to-line.d.ts +6 -0
- package/dist/icons/generated/lucide-arrow-down-to-line.js +10 -0
- package/dist/icons/generated/lucide-arrow-down-to-line.js.map +1 -0
- package/dist/icons/generated/lucide-arrow-up-to-line.d.ts +6 -0
- package/dist/icons/generated/lucide-arrow-up-to-line.js +10 -0
- package/dist/icons/generated/lucide-arrow-up-to-line.js.map +1 -0
- package/dist/icons/generated/lucide-bell.d.ts +6 -0
- package/dist/icons/generated/lucide-bell.js +10 -0
- package/dist/icons/generated/lucide-bell.js.map +1 -0
- package/dist/icons/generated/lucide-check.d.ts +6 -0
- package/dist/icons/generated/lucide-check.js +10 -0
- package/dist/icons/generated/lucide-check.js.map +1 -0
- package/dist/icons/generated/lucide-chevron-down.d.ts +6 -0
- package/dist/icons/generated/lucide-chevron-down.js +10 -0
- package/dist/icons/generated/lucide-chevron-down.js.map +1 -0
- package/dist/icons/generated/lucide-chevron-left.d.ts +6 -0
- package/dist/icons/generated/lucide-chevron-left.js +10 -0
- package/dist/icons/generated/lucide-chevron-left.js.map +1 -0
- package/dist/icons/generated/lucide-chevron-right.d.ts +6 -0
- package/dist/icons/generated/lucide-chevron-right.js +10 -0
- package/dist/icons/generated/lucide-chevron-right.js.map +1 -0
- package/dist/icons/generated/lucide-chevron-up.d.ts +6 -0
- package/dist/icons/generated/lucide-chevron-up.js +10 -0
- package/dist/icons/generated/lucide-chevron-up.js.map +1 -0
- package/dist/icons/generated/lucide-circle-alert.d.ts +6 -0
- package/dist/icons/generated/lucide-circle-alert.js +10 -0
- package/dist/icons/generated/lucide-circle-alert.js.map +1 -0
- package/dist/icons/generated/lucide-clipboard-paste.d.ts +6 -0
- package/dist/icons/generated/lucide-clipboard-paste.js +10 -0
- package/dist/icons/generated/lucide-clipboard-paste.js.map +1 -0
- package/dist/icons/generated/lucide-copy.d.ts +6 -0
- package/dist/icons/generated/lucide-copy.js +10 -0
- package/dist/icons/generated/lucide-copy.js.map +1 -0
- package/dist/icons/generated/lucide-download.d.ts +6 -0
- package/dist/icons/generated/lucide-download.js +10 -0
- package/dist/icons/generated/lucide-download.js.map +1 -0
- package/dist/icons/generated/lucide-file.d.ts +6 -0
- package/dist/icons/generated/lucide-file.js +10 -0
- package/dist/icons/generated/lucide-file.js.map +1 -0
- package/dist/icons/generated/lucide-folder.d.ts +6 -0
- package/dist/icons/generated/lucide-folder.js +10 -0
- package/dist/icons/generated/lucide-folder.js.map +1 -0
- package/dist/icons/generated/lucide-globe.d.ts +6 -0
- package/dist/icons/generated/lucide-globe.js +10 -0
- package/dist/icons/generated/lucide-globe.js.map +1 -0
- package/dist/icons/generated/lucide-heart.d.ts +6 -0
- package/dist/icons/generated/lucide-heart.js +10 -0
- package/dist/icons/generated/lucide-heart.js.map +1 -0
- package/dist/icons/generated/lucide-image.d.ts +6 -0
- package/dist/icons/generated/lucide-image.js +10 -0
- package/dist/icons/generated/lucide-image.js.map +1 -0
- package/dist/icons/generated/lucide-inbox.d.ts +6 -0
- package/dist/icons/generated/lucide-inbox.js +10 -0
- package/dist/icons/generated/lucide-inbox.js.map +1 -0
- package/dist/icons/generated/lucide-info.d.ts +6 -0
- package/dist/icons/generated/lucide-info.js +10 -0
- package/dist/icons/generated/lucide-info.js.map +1 -0
- package/dist/icons/generated/lucide-loader-circle.d.ts +6 -0
- package/dist/icons/generated/lucide-loader-circle.js +10 -0
- package/dist/icons/generated/lucide-loader-circle.js.map +1 -0
- package/dist/icons/generated/lucide-mail.d.ts +6 -0
- package/dist/icons/generated/lucide-mail.js +10 -0
- package/dist/icons/generated/lucide-mail.js.map +1 -0
- package/dist/icons/generated/lucide-minus.d.ts +6 -0
- package/dist/icons/generated/lucide-minus.js +10 -0
- package/dist/icons/generated/lucide-minus.js.map +1 -0
- package/dist/icons/generated/lucide-plus.d.ts +6 -0
- package/dist/icons/generated/lucide-plus.js +10 -0
- package/dist/icons/generated/lucide-plus.js.map +1 -0
- package/dist/icons/generated/lucide-printer.d.ts +6 -0
- package/dist/icons/generated/lucide-printer.js +10 -0
- package/dist/icons/generated/lucide-printer.js.map +1 -0
- package/dist/icons/generated/lucide-redo-2.d.ts +6 -0
- package/dist/icons/generated/lucide-redo-2.js +10 -0
- package/dist/icons/generated/lucide-redo-2.js.map +1 -0
- package/dist/icons/generated/lucide-scissors.d.ts +6 -0
- package/dist/icons/generated/lucide-scissors.js +10 -0
- package/dist/icons/generated/lucide-scissors.js.map +1 -0
- package/dist/icons/generated/lucide-search.d.ts +6 -0
- package/dist/icons/generated/lucide-search.js +10 -0
- package/dist/icons/generated/lucide-search.js.map +1 -0
- package/dist/icons/generated/lucide-settings.d.ts +6 -0
- package/dist/icons/generated/lucide-settings.js +10 -0
- package/dist/icons/generated/lucide-settings.js.map +1 -0
- package/dist/icons/generated/lucide-star.d.ts +6 -0
- package/dist/icons/generated/lucide-star.js +10 -0
- package/dist/icons/generated/lucide-star.js.map +1 -0
- package/dist/icons/generated/lucide-trash-2.d.ts +6 -0
- package/dist/icons/generated/lucide-trash-2.js +10 -0
- package/dist/icons/generated/lucide-trash-2.js.map +1 -0
- package/dist/icons/generated/lucide-triangle-alert.d.ts +6 -0
- package/dist/icons/generated/lucide-triangle-alert.js +10 -0
- package/dist/icons/generated/lucide-triangle-alert.js.map +1 -0
- package/dist/icons/generated/lucide-undo-2.d.ts +6 -0
- package/dist/icons/generated/lucide-undo-2.js +10 -0
- package/dist/icons/generated/lucide-undo-2.js.map +1 -0
- package/dist/icons/generated/lucide-upload.d.ts +6 -0
- package/dist/icons/generated/lucide-upload.js +10 -0
- package/dist/icons/generated/lucide-upload.js.map +1 -0
- package/dist/icons/generated/lucide-user.d.ts +6 -0
- package/dist/icons/generated/lucide-user.js +10 -0
- package/dist/icons/generated/lucide-user.js.map +1 -0
- package/dist/icons/generated/lucide-x.d.ts +6 -0
- package/dist/icons/generated/lucide-x.js +10 -0
- package/dist/icons/generated/lucide-x.js.map +1 -0
- package/dist/icons/generated/ooui-check.d.ts +6 -0
- package/dist/icons/generated/radix-icons-check.d.ts +6 -0
- package/dist/icons/generated/si-check-alt-fill.d.ts +6 -0
- package/dist/icons/index.d.ts +38 -0
- package/dist/icons/index.js +39 -0
- package/dist/node_modules/.pnpm/@floating-ui_core@1.8.0/node_modules/@floating-ui/core/dist/floating-ui.core.js +248 -0
- package/dist/node_modules/.pnpm/@floating-ui_core@1.8.0/node_modules/@floating-ui/core/dist/floating-ui.core.js.map +1 -0
- package/dist/node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +324 -0
- package/dist/node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js.map +1 -0
- package/dist/node_modules/.pnpm/@floating-ui_utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +99 -0
- package/dist/node_modules/.pnpm/@floating-ui_utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js.map +1 -0
- package/dist/node_modules/.pnpm/@floating-ui_utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +102 -0
- package/dist/node_modules/.pnpm/@floating-ui_utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.js.map +1 -0
- package/dist/shared/menu-portal/menu-portal.js +11 -0
- package/dist/shared/menu-portal/menu-portal.js.map +1 -0
- package/dist/shared/normalize/index.js +11 -0
- package/dist/shared/normalize/index.js.map +1 -0
- package/dist/shared/overlay/overlay.js +68 -0
- package/dist/shared/overlay/overlay.js.map +1 -0
- package/dist/shared/overlay/portal.js +29 -0
- package/dist/shared/overlay/portal.js.map +1 -0
- package/dist/shared/overlay/presence.js +34 -0
- package/dist/shared/overlay/presence.js.map +1 -0
- package/dist/shared/property-converters/boolean-with-false-string.js +9 -0
- package/dist/shared/property-converters/boolean-with-false-string.js.map +1 -0
- package/dist/shared/scroll-lock/scroll-lock.js +12 -0
- package/dist/shared/scroll-lock/scroll-lock.js.map +1 -0
- package/dist/shared/theme/overlay-root.js +28 -0
- package/dist/shared/theme/overlay-root.js.map +1 -0
- package/dist/shared/theme/theme-scope.js +27 -0
- package/dist/shared/theme/theme-scope.js.map +1 -0
- package/dist/types/iconify.d.ts +1 -0
- package/dist/types/react.d.ts +35 -9
- package/dist/types/utils.d.ts +14 -0
- package/dist/types/vue.d.ts +47 -7
- package/package.json +27 -11
- package/dist/index.d.ts +0 -4
- package/dist/index.js +0 -5
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
//#region src/components/dialog/style.css?inline
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{transform:scale(var(--wui-scale-enter,.97));box-sizing:border-box;max-width:min(90vw, var(--wui-dialog-max-width,360px));max-height:90vh;color:var(--wui-color-text,#1b1b1b);opacity:0;transition:opacity var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;padding:0;font-family:inherit;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001a));transition:opacity var(--wui-duration-overlay-enter,.18s) ease}dialog[open].is-visible{opacity:1;transform:scale(1)}dialog.is-closing{pointer-events:none;transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog[open].is-visible::backdrop{opacity:1}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:.12s;transform:none}}.wui-dialog-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f5f5f5d9);border-radius:20px;padding:24px}.title{color:var(--wui-color-text,#1b1b1b);margin:0 0 8px;padding:0;font-size:18px;font-weight:600;line-height:1.4}.desc{color:var(--wui-color-text-muted,#6a6a6a);margin:0 0 20px;padding:0;font-size:14px;line-height:1.5}.wui-dialog-footer{flex-direction:column;gap:10px;display:flex}.wui-dialog-footer ::slotted(web-ui-button){width:100%;display:flex}:host([horizontal]) .wui-dialog-footer{flex-direction:row;justify-content:center;gap:10px}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button:not([full])){width:auto}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button[full]){flex:1;min-width:0}";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\ndialog {\n transform: scale(var(--wui-scale-enter, 0.97));\n\n overflow: visible;\n\n box-sizing: border-box;\n max-width: min(90vw, var(--wui-dialog-max-width, 360px));\n max-height: 90vh;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n opacity: 0;\n background: transparent;\n\n transition:\n opacity var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),\n transform var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.1)));\n transition: opacity var(--wui-duration-overlay-enter, 180ms) ease;\n }\n}\n\ndialog[open].is-visible {\n transform: scale(1);\n opacity: 1;\n}\n\ndialog.is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog.is-closing::backdrop {\n transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transform: none;\n transition-duration: 120ms;\n }\n}\n\n/* ===== 玻璃卡片主体(样式由 glass.css 提供) ===== */\n\n.wui-dialog-body {\n --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n padding: 24px;\n border-radius: 20px;\n background-color: var(--wui-color-surface-overlay, rgb(245 245 245 / 0.85));\n}\n\n/* ===== 标题 ===== */\n\n.title {\n margin: 0 0 8px;\n padding: 0;\n\n font-size: 18px;\n font-weight: 600;\n line-height: 1.4;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 描述 ===== */\n\n.desc {\n margin: 0 0 20px;\n padding: 0;\n\n font-size: 14px;\n line-height: 1.5;\n color: var(--wui-color-text-muted, #6a6a6a);\n}\n\n/* ===== 按钮区域 ===== */\n\n.wui-dialog-footer {\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n /* ===== 按钮全宽(默认垂直排列) ===== */\n\n & ::slotted(web-ui-button) {\n display: flex;\n width: 100%;\n }\n}\n\n/* ===== horizontal 模式 ===== */\n\n:host([horizontal]) .wui-dialog-footer {\n flex-direction: row;\n gap: 10px;\n justify-content: center;\n\n /* 非 full 按钮:居中,不拉伸 */\n\n & ::slotted(web-ui-button:not([full])) {\n width: auto;\n }\n\n /* full 按钮:平分剩余空间 */\n\n & ::slotted(web-ui-button[full]) {\n flex: 1;\n min-width: 0;\n }\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
declare const ALLOWED_PLACEMENTS: readonly ["right", "left", "top", "bottom"];
|
|
3
|
+
export type DrawerPlacement = (typeof ALLOWED_PLACEMENTS)[number];
|
|
4
|
+
export declare class WebUiDrawer extends LitElement {
|
|
5
|
+
static styles: import('lit').CSSResult[];
|
|
6
|
+
open: boolean;
|
|
7
|
+
lockScroll: boolean;
|
|
8
|
+
overlayClosable: boolean;
|
|
9
|
+
get placement(): DrawerPlacement;
|
|
10
|
+
set placement(v: string);
|
|
11
|
+
private _placement;
|
|
12
|
+
/** 标题文字(未传 header slot 时显示默认 header) */
|
|
13
|
+
heading: string;
|
|
14
|
+
closable: boolean;
|
|
15
|
+
private get dialog();
|
|
16
|
+
private _closeFallbackTimer;
|
|
17
|
+
private _openFrame;
|
|
18
|
+
private _isClosing;
|
|
19
|
+
private _hasHeaderSlot;
|
|
20
|
+
private _hasFooterSlot;
|
|
21
|
+
private _hasScrollLock;
|
|
22
|
+
connectedCallback(): void;
|
|
23
|
+
firstUpdated(): void;
|
|
24
|
+
disconnectedCallback(): void;
|
|
25
|
+
private _checkSlotContent;
|
|
26
|
+
private handleHeaderSlotChange;
|
|
27
|
+
private handleFooterSlotChange;
|
|
28
|
+
protected updated(props: PropertyValues): void;
|
|
29
|
+
private _startOpening;
|
|
30
|
+
private _startClosing;
|
|
31
|
+
private _finishClosing;
|
|
32
|
+
private _clearCloseFallback;
|
|
33
|
+
private _cancelOpenFrame;
|
|
34
|
+
private handleTransitionEnd;
|
|
35
|
+
private handleKeydown;
|
|
36
|
+
/** 打开抽屉(命令式) */
|
|
37
|
+
show(): void;
|
|
38
|
+
/** 关闭抽屉(带动画) */
|
|
39
|
+
close(): void;
|
|
40
|
+
private handleCancel;
|
|
41
|
+
private handleNativeClose;
|
|
42
|
+
private handleBackdropClick;
|
|
43
|
+
private emitOpenChange;
|
|
44
|
+
private _syncScrollLock;
|
|
45
|
+
render(): import('lit').TemplateResult<1>;
|
|
46
|
+
readonly $events: {
|
|
47
|
+
'open-change': CustomEvent<{
|
|
48
|
+
open: boolean;
|
|
49
|
+
}>;
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
declare global {
|
|
53
|
+
interface HTMLElementTagNameMap {
|
|
54
|
+
'web-ui-drawer': WebUiDrawer;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
export {};
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
|
|
2
|
+
import "../icon/index.js";
|
|
3
|
+
import t from "../../assets/glass.js";
|
|
4
|
+
import n from "../../icons/generated/lucide-x.js";
|
|
5
|
+
import { normalizeLiteral as r } from "../../shared/normalize/index.js";
|
|
6
|
+
import "../button/index.js";
|
|
7
|
+
import { booleanWithFalseString as i } from "../../shared/property-converters/boolean-with-false-string.js";
|
|
8
|
+
import { getTransitionDuration as a } from "../../shared/overlay/presence.js";
|
|
9
|
+
import { lockScroll as o, unlockScroll as s } from "../../shared/scroll-lock/scroll-lock.js";
|
|
10
|
+
import c from "./style.js";
|
|
11
|
+
import { LitElement as l, html as u, nothing as d, unsafeCSS as f } from "lit";
|
|
12
|
+
import { customElement as p, property as m } from "lit/decorators.js";
|
|
13
|
+
//#region src/components/drawer/index.ts
|
|
14
|
+
var h = [
|
|
15
|
+
"right",
|
|
16
|
+
"left",
|
|
17
|
+
"top",
|
|
18
|
+
"bottom"
|
|
19
|
+
], g = class extends l {
|
|
20
|
+
constructor(...e) {
|
|
21
|
+
super(...e), this.open = !1, this.lockScroll = !0, this.overlayClosable = !0, this._placement = "right", this.heading = "", this.closable = !1, this._closeFallbackTimer = null, this._openFrame = null, this._isClosing = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._hasScrollLock = !1;
|
|
22
|
+
}
|
|
23
|
+
static {
|
|
24
|
+
this.styles = [f(t), f(c)];
|
|
25
|
+
}
|
|
26
|
+
get placement() {
|
|
27
|
+
return this._placement;
|
|
28
|
+
}
|
|
29
|
+
set placement(e) {
|
|
30
|
+
let t = this._placement;
|
|
31
|
+
this._placement = r(e, h, "right"), this.requestUpdate("placement", t);
|
|
32
|
+
}
|
|
33
|
+
get dialog() {
|
|
34
|
+
return this.shadowRoot?.querySelector("dialog");
|
|
35
|
+
}
|
|
36
|
+
connectedCallback() {
|
|
37
|
+
super.connectedCallback(), this._hasHeaderSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "header"), this._hasFooterSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "footer");
|
|
38
|
+
}
|
|
39
|
+
firstUpdated() {
|
|
40
|
+
this._checkSlotContent("footer");
|
|
41
|
+
}
|
|
42
|
+
disconnectedCallback() {
|
|
43
|
+
super.disconnectedCallback(), this._cancelOpenFrame(), this._clearCloseFallback(), this._syncScrollLock(!1);
|
|
44
|
+
}
|
|
45
|
+
_checkSlotContent(e) {
|
|
46
|
+
let t = this.shadowRoot?.querySelector(`slot[name="${e}"]`);
|
|
47
|
+
if (!t) return;
|
|
48
|
+
let n = t.assignedNodes().length > 0;
|
|
49
|
+
e === "footer" && n !== this._hasFooterSlot && (this._hasFooterSlot = n, this.requestUpdate());
|
|
50
|
+
}
|
|
51
|
+
handleHeaderSlotChange(e) {
|
|
52
|
+
let t = e.target.assignedNodes().length > 0;
|
|
53
|
+
t !== this._hasHeaderSlot && (this._hasHeaderSlot = t, this.requestUpdate());
|
|
54
|
+
}
|
|
55
|
+
handleFooterSlotChange(e) {
|
|
56
|
+
let t = e.target.assignedNodes().length > 0;
|
|
57
|
+
t !== this._hasFooterSlot && (this._hasFooterSlot = t, this.requestUpdate());
|
|
58
|
+
}
|
|
59
|
+
updated(e) {
|
|
60
|
+
super.updated(e), this.isConnected && (e.has("open") && (this.emitOpenChange(), this.open ? this._startOpening() : this._startClosing()), (e.has("open") || e.has("lockScroll")) && this._syncScrollLock());
|
|
61
|
+
}
|
|
62
|
+
_startOpening() {
|
|
63
|
+
let e = this.dialog;
|
|
64
|
+
e && (this._isClosing = !1, this._clearCloseFallback(), e.classList.remove("is-closing"), e.open || e.showModal?.(), this._cancelOpenFrame(), this._openFrame = requestAnimationFrame(() => {
|
|
65
|
+
this._openFrame = null, !(!this.isConnected || !this.open || !e.open) && e.classList.add("is-visible");
|
|
66
|
+
}));
|
|
67
|
+
}
|
|
68
|
+
_startClosing() {
|
|
69
|
+
let e = this.dialog;
|
|
70
|
+
if (e?.open) {
|
|
71
|
+
if (this._cancelOpenFrame(), this._isClosing = !0, !e.classList.contains("is-visible")) {
|
|
72
|
+
this._finishClosing();
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
e.classList.add("is-closing"), e.classList.remove("is-visible"), this._clearCloseFallback(), this._closeFallbackTimer = setTimeout(() => this._finishClosing(), a(e) + 80);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
_finishClosing() {
|
|
79
|
+
let e = this.dialog;
|
|
80
|
+
!e || !this._isClosing || this.open || (this._clearCloseFallback(), this._isClosing = !1, e.classList.remove("is-closing", "is-visible"), e.open && e.close?.());
|
|
81
|
+
}
|
|
82
|
+
_clearCloseFallback() {
|
|
83
|
+
this._closeFallbackTimer &&= (clearTimeout(this._closeFallbackTimer), null);
|
|
84
|
+
}
|
|
85
|
+
_cancelOpenFrame() {
|
|
86
|
+
this._openFrame !== null && (cancelAnimationFrame(this._openFrame), this._openFrame = null);
|
|
87
|
+
}
|
|
88
|
+
handleTransitionEnd(e) {
|
|
89
|
+
e.target === this.dialog && e.propertyName === "transform" && this._finishClosing();
|
|
90
|
+
}
|
|
91
|
+
handleKeydown(e) {
|
|
92
|
+
e.key === "Escape" && (e.preventDefault(), this.close());
|
|
93
|
+
}
|
|
94
|
+
show() {
|
|
95
|
+
this.open ||= !0;
|
|
96
|
+
}
|
|
97
|
+
close() {
|
|
98
|
+
this.open &&= !1;
|
|
99
|
+
}
|
|
100
|
+
handleCancel(e) {
|
|
101
|
+
e.preventDefault(), this.close();
|
|
102
|
+
}
|
|
103
|
+
handleNativeClose() {
|
|
104
|
+
this.open &&= (this._cancelOpenFrame(), this._clearCloseFallback(), this._isClosing = !1, this.dialog?.classList.remove("is-closing", "is-visible"), !1);
|
|
105
|
+
}
|
|
106
|
+
handleBackdropClick(e) {
|
|
107
|
+
e.target === e.currentTarget && this.overlayClosable && this.close();
|
|
108
|
+
}
|
|
109
|
+
emitOpenChange() {
|
|
110
|
+
this.dispatchEvent(new CustomEvent("open-change", {
|
|
111
|
+
detail: { open: this.open },
|
|
112
|
+
bubbles: !0,
|
|
113
|
+
composed: !0
|
|
114
|
+
}));
|
|
115
|
+
}
|
|
116
|
+
_syncScrollLock(e = this.open) {
|
|
117
|
+
let t = e && this.lockScroll;
|
|
118
|
+
t !== this._hasScrollLock && (t ? o() : s(), this._hasScrollLock = t);
|
|
119
|
+
}
|
|
120
|
+
render() {
|
|
121
|
+
let e = this._hasHeaderSlot || !!this.heading;
|
|
122
|
+
return u`
|
|
123
|
+
<dialog
|
|
124
|
+
@cancel=${this.handleCancel}
|
|
125
|
+
@close=${this.handleNativeClose}
|
|
126
|
+
@click=${this.handleBackdropClick}
|
|
127
|
+
@keydown=${this.handleKeydown}
|
|
128
|
+
@transitionend=${this.handleTransitionEnd}
|
|
129
|
+
>
|
|
130
|
+
<div class="wui-drawer-body wui-glass">
|
|
131
|
+
${e ? u`
|
|
132
|
+
<div class="wui-drawer-header">
|
|
133
|
+
<slot name="header" @slotchange=${this.handleHeaderSlotChange}>
|
|
134
|
+
${this.heading ? u`<span class="wui-drawer-heading">${this.heading}</span>` : d}
|
|
135
|
+
</slot>
|
|
136
|
+
</div>
|
|
137
|
+
` : d}
|
|
138
|
+
<div class="wui-drawer-content">
|
|
139
|
+
<slot></slot>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="wui-drawer-footer" ?hidden=${!this._hasFooterSlot}>
|
|
142
|
+
<slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
${this.closable ? u`
|
|
146
|
+
<web-ui-button class="wui-drawer-close" @click=${this.close} aria-label="关闭" icon>
|
|
147
|
+
<web-ui-icon .icon=${n} size="16"></web-ui-icon>
|
|
148
|
+
</web-ui-button>
|
|
149
|
+
` : d}
|
|
150
|
+
</dialog>
|
|
151
|
+
`;
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
e([m({
|
|
155
|
+
type: Boolean,
|
|
156
|
+
reflect: !0
|
|
157
|
+
})], g.prototype, "open", void 0), e([m({
|
|
158
|
+
reflect: !0,
|
|
159
|
+
attribute: "lock-scroll",
|
|
160
|
+
converter: i
|
|
161
|
+
})], g.prototype, "lockScroll", void 0), e([m({
|
|
162
|
+
reflect: !0,
|
|
163
|
+
attribute: "overlay-closable",
|
|
164
|
+
converter: i
|
|
165
|
+
})], g.prototype, "overlayClosable", void 0), e([m({ reflect: !0 })], g.prototype, "placement", null), e([m({ type: String })], g.prototype, "heading", void 0), e([m({
|
|
166
|
+
type: Boolean,
|
|
167
|
+
reflect: !0
|
|
168
|
+
})], g.prototype, "closable", void 0), g = e([p("web-ui-drawer")], g);
|
|
169
|
+
//#endregion
|
|
170
|
+
export { g as WebUiDrawer };
|
|
171
|
+
|
|
172
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/drawer/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideX } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\nimport { booleanWithFalseString } from '@/shared/property-converters/boolean-with-false-string'\nimport { lockScroll, unlockScroll } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['right', 'left', 'top', 'bottom'] as const\n\nexport type DrawerPlacement = (typeof ALLOWED_PLACEMENTS)[number]\n\n@customElement('web-ui-drawer')\nexport class WebUiDrawer extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ reflect: true, attribute: 'lock-scroll', converter: booleanWithFalseString }) lockScroll = true\n @property({ reflect: true, attribute: 'overlay-closable', converter: booleanWithFalseString }) overlayClosable = true\n @property({ reflect: true })\n get placement(): DrawerPlacement {\n return this._placement\n }\n set placement(v: string) {\n const old = this._placement\n this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'right')\n this.requestUpdate('placement', old)\n }\n private _placement: DrawerPlacement = 'right'\n\n /** 标题文字(未传 header slot 时显示默认 header) */\n @property({ type: String }) heading = ''\n\n @property({ type: Boolean, reflect: true }) closable = false\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') as HTMLDialogElement | null\n }\n\n private _closeFallbackTimer: ReturnType<typeof setTimeout> | null = null\n private _openFrame: number | null = null\n private _isClosing = false\n private _hasHeaderSlot = false\n private _hasFooterSlot = false\n private _hasScrollLock = false\n\n override connectedCallback() {\n super.connectedCallback()\n this._hasHeaderSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'header')\n this._hasFooterSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'footer')\n }\n\n override firstUpdated() {\n this._checkSlotContent('footer')\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._syncScrollLock(false)\n }\n\n private _checkSlotContent(name: string) {\n const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`) as HTMLSlotElement | null\n if (!slot) return\n const has = slot.assignedNodes().length > 0\n if (name === 'footer' && has !== this._hasFooterSlot) {\n this._hasFooterSlot = has\n this.requestUpdate()\n }\n }\n\n private handleHeaderSlotChange(e: Event) {\n const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n if (has !== this._hasHeaderSlot) {\n this._hasHeaderSlot = has\n this.requestUpdate()\n }\n }\n\n private handleFooterSlotChange(e: Event) {\n const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n if (has !== this._hasFooterSlot) {\n this._hasFooterSlot = has\n this.requestUpdate()\n }\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('open')) {\n this.emitOpenChange()\n if (this.open) this._startOpening()\n else this._startClosing()\n }\n if (props.has('open') || props.has('lockScroll')) this._syncScrollLock()\n }\n\n private _startOpening() {\n const dialog = this.dialog\n if (!dialog) return\n\n this._isClosing = false\n this._clearCloseFallback()\n dialog.classList.remove('is-closing')\n if (!dialog.open) dialog.showModal?.()\n\n this._cancelOpenFrame()\n this._openFrame = requestAnimationFrame(() => {\n this._openFrame = null\n if (!this.isConnected || !this.open || !dialog.open) return\n dialog.classList.add('is-visible')\n })\n }\n\n private _startClosing() {\n const dialog = this.dialog\n if (!dialog?.open) return\n\n this._cancelOpenFrame()\n this._isClosing = true\n\n // 还未进入可见帧时没有可过渡的视觉状态,直接释放原生 dialog。\n if (!dialog.classList.contains('is-visible')) {\n this._finishClosing()\n return\n }\n\n dialog.classList.add('is-closing')\n dialog.classList.remove('is-visible')\n this._clearCloseFallback()\n this._closeFallbackTimer = setTimeout(() => this._finishClosing(), getTransitionDuration(dialog) + 80)\n }\n\n private _finishClosing() {\n const dialog = this.dialog\n if (!dialog || !this._isClosing || this.open) return\n\n this._clearCloseFallback()\n this._isClosing = false\n dialog.classList.remove('is-closing', 'is-visible')\n if (dialog.open) dialog.close?.()\n }\n\n private _clearCloseFallback() {\n if (!this._closeFallbackTimer) return\n clearTimeout(this._closeFallbackTimer)\n this._closeFallbackTimer = null\n }\n\n private _cancelOpenFrame() {\n if (this._openFrame === null) return\n cancelAnimationFrame(this._openFrame)\n this._openFrame = null\n }\n\n private handleTransitionEnd(e: TransitionEvent) {\n if (e.target !== this.dialog || e.propertyName !== 'transform') return\n this._finishClosing()\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Escape') return\n e.preventDefault()\n this.close()\n }\n\n /** 打开抽屉(命令式) */\n show() {\n if (this.open) return\n this.open = true\n }\n\n /** 关闭抽屉(带动画) */\n close() {\n if (!this.open) return\n this.open = false\n }\n\n private handleCancel(e: Event) {\n // 保留 top layer 直到 CSS 过渡结束,避免原生关闭跳过退出动画。\n e.preventDefault()\n this.close()\n }\n\n private handleNativeClose() {\n if (!this.open) return\n\n // 原生关闭可绕过 cancel;同步受控状态,避免 show() 误判为已打开。\n this._cancelOpenFrame()\n this._clearCloseFallback()\n this._isClosing = false\n this.dialog?.classList.remove('is-closing', 'is-visible')\n this.open = false\n }\n\n private handleBackdropClick(e: MouseEvent) {\n if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n if (!this.overlayClosable) return\n this.close()\n }\n\n private emitOpenChange() {\n this.dispatchEvent(\n new CustomEvent('open-change', {\n detail: { open: this.open },\n bubbles: true,\n composed: true\n })\n )\n }\n\n private _syncScrollLock(isOpen = this.open) {\n const shouldLock = isOpen && this.lockScroll\n if (shouldLock === this._hasScrollLock) return\n\n if (shouldLock) lockScroll()\n else unlockScroll()\n this._hasScrollLock = shouldLock\n }\n\n override render() {\n const showHeader = this._hasHeaderSlot || !!this.heading\n\n return html`\n <dialog\n @cancel=${this.handleCancel}\n @close=${this.handleNativeClose}\n @click=${this.handleBackdropClick}\n @keydown=${this.handleKeydown}\n @transitionend=${this.handleTransitionEnd}\n >\n <div class=\"wui-drawer-body wui-glass\">\n ${showHeader\n ? html`\n <div class=\"wui-drawer-header\">\n <slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}>\n ${this.heading ? html`<span class=\"wui-drawer-heading\">${this.heading}</span>` : nothing}\n </slot>\n </div>\n `\n : nothing}\n <div class=\"wui-drawer-content\">\n <slot></slot>\n </div>\n <div class=\"wui-drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n <slot name=\"footer\" @slotchange=${this.handleFooterSlotChange}></slot>\n </div>\n </div>\n ${this.closable\n ? html`\n <web-ui-button class=\"wui-drawer-close\" @click=${this.close} aria-label=\"关闭\" icon>\n <web-ui-icon .icon=${lucideX} size=\"16\"></web-ui-icon>\n </web-ui-button>\n `\n : nothing}\n </dialog>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-drawer': WebUiDrawer\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
//#region src/components/drawer/style.css?inline
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{box-sizing:border-box;width:var(--wui-drawer-width,320px);max-width:90vw;height:100dvh;max-height:100dvh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-drawer,.28s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;margin:0;padding:0;font-family:inherit;inset:0 0 0 auto;overflow:visible;transform:translate(100%)}dialog::backdrop{opacity:0;background:var(--wui-drawer-overlay-bg,#0000001f);transition:opacity var(--wui-duration-drawer,.28s) ease}dialog[open].is-visible,:host([placement=left]) dialog[open].is-visible,:host([placement=top]) dialog[open].is-visible,:host([placement=bottom]) dialog[open].is-visible{transform:translate(0)}dialog.is-closing{pointer-events:none}dialog[open].is-visible::backdrop{opacity:1}:host([placement=left]) dialog{left:0;right:auto;transform:translate(-100%)}:host([placement=top]) dialog,:host([placement=bottom]) dialog{width:100vw;max-width:100vw;height:var(--wui-drawer-height,300px);max-height:90dvh}:host([placement=top]) dialog{inset:0 0 auto;transform:translateY(-100%)}:host([placement=bottom]) dialog{inset:auto 0 0;transform:translateY(100%)}.wui-drawer-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f5f5f5d9);flex-direction:column;height:100%;display:flex}.wui-drawer-header{border-bottom:1px solid #0000000f;justify-content:space-between;align-items:center;padding:16px 20px;font-size:18px;font-weight:600;line-height:1.4;display:flex}.wui-drawer-content{overscroll-behavior:contain;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);flex:1;padding:20px;line-height:1.5;overflow-y:auto}.wui-drawer-footer{border-top:1px solid #0000000f;flex-shrink:0;padding:16px 20px}@media (prefers-reduced-motion:reduce){dialog{transition:opacity .12s}dialog::backdrop{transition-duration:.12s}dialog[open].is-visible{transform:none}}.wui-drawer-footer[hidden]{display:none}.wui-drawer-close{z-index:3;position:absolute;top:8px;right:8px}";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/drawer/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\n/* ===== Dialog 容器 ===== */\ndialog {\n /* 默认:右侧滑出 — 需显式 left:auto 覆盖 UA dialog:modal 的 left:0 */\n top: 0;\n right: 0;\n bottom: 0;\n left: auto;\n transform: translateX(100%);\n\n /* 阴影属于抽屉主体,不能由同尺寸的原生 dialog 裁剪。内容滚动由 .wui-drawer-content 管理。 */\n overflow: visible;\n\n box-sizing: border-box;\n width: var(--wui-drawer-width, 320px);\n max-width: 90vw;\n height: 100dvh;\n max-height: 100dvh;\n margin: 0;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n\n transition: transform var(--wui-duration-drawer, 280ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-drawer-overlay-bg, rgb(0 0 0 / 0.12));\n transition: opacity var(--wui-duration-drawer, 280ms) ease;\n }\n}\n\ndialog[open].is-visible {\n transform: translate(0, 0);\n}\n\n:host([placement='left']) dialog[open].is-visible,\n:host([placement='top']) dialog[open].is-visible,\n:host([placement='bottom']) dialog[open].is-visible {\n transform: translate(0, 0);\n}\n\ndialog.is-closing {\n pointer-events: none;\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n/* ===== Placement 变体 ===== */\n\n:host([placement='left']) dialog {\n right: auto;\n left: 0;\n transform: translateX(-100%);\n}\n\n:host([placement='top']) dialog,\n:host([placement='bottom']) dialog {\n width: 100vw;\n max-width: 100vw;\n height: var(--wui-drawer-height, 300px);\n max-height: 90dvh;\n}\n\n:host([placement='top']) dialog {\n top: 0;\n right: 0;\n bottom: auto;\n left: 0;\n transform: translateY(-100%);\n}\n\n:host([placement='bottom']) dialog {\n top: auto;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateY(100%);\n}\n\n/* ===== 抽屉主体 ===== */\n\n.wui-drawer-body {\n --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--wui-color-surface-overlay, rgb(245 245 245 / 0.85));\n}\n\n/* ===== Header ===== */\n\n.wui-drawer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n padding: 16px 20px;\n border-bottom: 1px solid rgb(0 0 0 / 0.06);\n\n font-size: 18px;\n font-weight: 600;\n line-height: 1.4;\n}\n\n/* ===== 内容区 ===== */\n\n.wui-drawer-content {\n overflow-y: auto;\n overscroll-behavior: contain;\n flex: 1;\n\n padding: 20px;\n\n font-size: var(--wui-font-size, 14px);\n line-height: 1.5;\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== Footer ===== */\n\n.wui-drawer-footer {\n flex-shrink: 0;\n padding: 16px 20px;\n border-top: 1px solid rgb(0 0 0 / 0.06);\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog {\n transition: opacity 120ms ease;\n }\n\n dialog::backdrop {\n transition-duration: 120ms;\n }\n\n dialog[open].is-visible {\n transform: none;\n }\n}\n\n.wui-drawer-footer[hidden] {\n display: none;\n}\n\n/* ===== 关闭按钮(独立定位,与 header 解耦) ===== */\n\n.wui-drawer-close {\n position: absolute;\n z-index: 3;\n top: 8px;\n right: 8px;\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class WebUiDropdownDivider extends LitElement {
|
|
3
|
+
static styles: import('lit').CSSResult;
|
|
4
|
+
render(): import('lit').TemplateResult<1>;
|
|
5
|
+
readonly $events: Record<string, never>;
|
|
6
|
+
}
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'web-ui-dropdown-divider': WebUiDropdownDivider;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
|
|
2
|
+
import t from "./style.js";
|
|
3
|
+
import { LitElement as n, html as r, unsafeCSS as i } from "lit";
|
|
4
|
+
import { customElement as a } from "lit/decorators.js";
|
|
5
|
+
//#region src/components/dropdown-divider/index.ts
|
|
6
|
+
var o = class extends n {
|
|
7
|
+
static {
|
|
8
|
+
this.styles = i(t);
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
return r`<div class="divider" role="separator"></div>`;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
o = e([a("web-ui-dropdown-divider")], o);
|
|
15
|
+
//#endregion
|
|
16
|
+
export { o as WebUiDropdownDivider };
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dropdown-divider/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-dropdown-divider')\nexport class WebUiDropdownDivider extends LitElement {\n static override styles = unsafeCSS(style)\n\n override render() {\n return html`<div class=\"divider\" role=\"separator\"></div>`\n }\n\n declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-dropdown-divider': WebUiDropdownDivider\n }\n}\n"],"mappings":";;;;;AAMO,IAAM,IAAN,cAAmC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAK;;CAExC,SAAkB;EAChB,OAAO,CAAI;CACb;AAGF;AATC,IAAA,EAAA,CAAA,EAAc,yBAAyB,CAAA,GAAA,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
//#region src/components/dropdown-divider/style.css?inline
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.divider{background-color:var(--wui-color-border,#0000001a);height:1px;margin:4px 8px}";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dropdown-divider/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.divider {\n height: 1px;\n margin: 4px 8px;\n background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class WebUiDropdownHeader extends LitElement {
|
|
3
|
+
static styles: import('lit').CSSResult;
|
|
4
|
+
render(): import('lit').TemplateResult<1>;
|
|
5
|
+
readonly $events: Record<string, never>;
|
|
6
|
+
}
|
|
7
|
+
declare global {
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'web-ui-dropdown-header': WebUiDropdownHeader;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
|
|
2
|
+
import t from "./style.js";
|
|
3
|
+
import { LitElement as n, html as r, unsafeCSS as i } from "lit";
|
|
4
|
+
import { customElement as a } from "lit/decorators.js";
|
|
5
|
+
//#region src/components/dropdown-header/index.ts
|
|
6
|
+
var o = class extends n {
|
|
7
|
+
static {
|
|
8
|
+
this.styles = i(t);
|
|
9
|
+
}
|
|
10
|
+
render() {
|
|
11
|
+
return r`<div class="header"><slot></slot></div>`;
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
o = e([a("web-ui-dropdown-header")], o);
|
|
15
|
+
//#endregion
|
|
16
|
+
export { o as WebUiDropdownHeader };
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dropdown-header/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-dropdown-header')\nexport class WebUiDropdownHeader extends LitElement {\n static override styles = unsafeCSS(style)\n\n override render() {\n return html`<div class=\"header\"><slot></slot></div>`\n }\n\n declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-dropdown-header': WebUiDropdownHeader\n }\n}\n"],"mappings":";;;;;AAMO,IAAM,IAAN,cAAkC,EAAW;;EACzB,KAAA,SAAA,EAAU,CAAK;;CAExC,SAAkB;EAChB,OAAO,CAAI;CACb;AAGF;AATC,IAAA,EAAA,CAAA,EAAc,wBAAwB,CAAA,GAAA,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
//#region src/components/dropdown-header/style.css?inline
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.header{-webkit-user-select:none;user-select:none;color:#0006;padding:8px 12px 4px;font-size:11px;font-weight:600}";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dropdown-header/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.header {\n user-select: none;\n\n padding: 8px 12px 4px;\n\n font-size: 11px;\n font-weight: 600;\n color: rgb(0 0 0 / 0.4);\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class WebUiDropdownItem extends LitElement {
|
|
3
|
+
static styles: import('lit').CSSResult;
|
|
4
|
+
disabled: boolean;
|
|
5
|
+
pl: string;
|
|
6
|
+
value: string;
|
|
7
|
+
submenu: boolean;
|
|
8
|
+
/** 通过可见元素聚焦,避免 portal 菜单跨 Shadow DOM 时丢失焦点。 */
|
|
9
|
+
focusItem(): void;
|
|
10
|
+
render(): import('lit').TemplateResult<1>;
|
|
11
|
+
readonly $events: Record<string, never>;
|
|
12
|
+
}
|
|
13
|
+
declare global {
|
|
14
|
+
interface HTMLElementTagNameMap {
|
|
15
|
+
'web-ui-dropdown-item': WebUiDropdownItem;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
|
|
2
|
+
import "../icon/index.js";
|
|
3
|
+
import t from "../../icons/generated/lucide-chevron-right.js";
|
|
4
|
+
import n from "./style.js";
|
|
5
|
+
import { LitElement as r, html as i, unsafeCSS as a } from "lit";
|
|
6
|
+
import { customElement as o, property as s } from "lit/decorators.js";
|
|
7
|
+
//#region src/components/dropdown-item/index.ts
|
|
8
|
+
var c = class extends r {
|
|
9
|
+
constructor(...e) {
|
|
10
|
+
super(...e), this.disabled = !1, this.pl = "", this.value = "", this.submenu = !1;
|
|
11
|
+
}
|
|
12
|
+
static {
|
|
13
|
+
this.styles = a(n);
|
|
14
|
+
}
|
|
15
|
+
focusItem() {
|
|
16
|
+
this.shadowRoot?.querySelector(".item-inner")?.focus();
|
|
17
|
+
}
|
|
18
|
+
render() {
|
|
19
|
+
return i`
|
|
20
|
+
<div class="item-inner" style=${this.pl ? `padding-left: ${this.pl}` : ""} role="menuitem" tabindex=${this.disabled ? "-1" : "0"}>
|
|
21
|
+
<slot name="prefix"></slot>
|
|
22
|
+
<span class="item-label"><slot></slot></span>
|
|
23
|
+
${this.submenu ? i`<web-ui-icon .icon=${t}></web-ui-icon>` : i`<span class="item-suffix"><slot name="suffix"></slot></span>`}
|
|
24
|
+
</div>
|
|
25
|
+
`;
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
e([s({
|
|
29
|
+
type: Boolean,
|
|
30
|
+
reflect: !0
|
|
31
|
+
})], c.prototype, "disabled", void 0), e([s({
|
|
32
|
+
type: String,
|
|
33
|
+
reflect: !0
|
|
34
|
+
})], c.prototype, "pl", void 0), e([s({
|
|
35
|
+
type: String,
|
|
36
|
+
reflect: !0
|
|
37
|
+
})], c.prototype, "value", void 0), e([s({
|
|
38
|
+
type: Boolean,
|
|
39
|
+
reflect: !0
|
|
40
|
+
})], c.prototype, "submenu", void 0), c = e([o("web-ui-dropdown-item")], c);
|
|
41
|
+
//#endregion
|
|
42
|
+
export { c as WebUiDropdownItem };
|
|
43
|
+
|
|
44
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dropdown-item/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport { lucideChevronRight } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-dropdown-item')\nexport class WebUiDropdownItem extends LitElement {\n static override styles = unsafeCSS(style)\n\n @property({ type: Boolean, reflect: true }) disabled = false\n @property({ type: String, reflect: true }) pl = ''\n @property({ type: String, reflect: true }) value = ''\n @property({ type: Boolean, reflect: true }) submenu = false\n\n /** 通过可见元素聚焦,避免 portal 菜单跨 Shadow DOM 时丢失焦点。 */\n focusItem() {\n this.shadowRoot?.querySelector<HTMLElement>('.item-inner')?.focus()\n }\n\n override render() {\n const plStyle = this.pl ? `padding-left: ${this.pl}` : ''\n return html`\n <div class=\"item-inner\" style=${plStyle} role=\"menuitem\" tabindex=${this.disabled ? '-1' : '0'}>\n <slot name=\"prefix\"></slot>\n <span class=\"item-label\"><slot></slot></span>\n ${this.submenu\n ? html`<web-ui-icon .icon=${lucideChevronRight}></web-ui-icon>`\n : html`<span class=\"item-suffix\"><slot name=\"suffix\"></slot></span>`}\n </div>\n `\n }\n\n declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-dropdown-item': WebUiDropdownItem\n }\n}\n"],"mappings":";;;;;;;AASO,IAAM,IAAN,cAAgC,EAAW;;EAMM,aAHC,KAAA,WAAA,IACP,KAAA,KAAA,IACG,KAAA,QAAA,IACG,KAAA,UAAA;;;EAL7B,KAAA,SAAA,EAAU,CAAK;;CAQxC,YAAY;EACV,KAAK,YAAY,cAA2B,aAAa,CAAC,EAAE,MAAM;CACpE;CAEA,SAAkB;EAEhB,OAAO,CAAI;sCADK,KAAK,KAAK,iBAAiB,KAAK,OAAO,GAEb,4BAA4B,KAAK,WAAW,OAAO,IAAI;;;UAG3F,KAAK,UACH,CAAI,sBAAsB,EAAmB,mBAC7C,CAAI,+DAA+D;;;CAG7E;AAGF;AAxBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,MAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAP3C,IAAA,EAAA,CAAA,EAAc,sBAAsB,CAAA,GAAA,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
//#region src/components/dropdown-item/style.css?inline
|
|
2
|
+
var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([disabled]){cursor:not-allowed;opacity:.4}.item-inner{-webkit-user-select:none;user-select:none;height:32px;font-size:var(--wui-font-size,14px);color:inherit;white-space:nowrap;transition:color var(--wui-duration-fast,.16s) ease, background-color var(--wui-duration-fast,.16s) ease;border-radius:2147483647px;outline:none;align-items:center;gap:8px;padding:0 12px;display:flex}.item-inner:focus-visible{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}:host([active]) .item-inner{color:inherit;background:var(--wui-color-border,#0000001a)}@media (hover:hover) and (pointer:fine){:host(:hover) .item-inner{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}}.item-label{min-width:0;color:inherit;text-overflow:ellipsis;flex:1;overflow:hidden}.item-suffix{opacity:.4;flex:none}";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { e as default };
|
|
5
|
+
|
|
6
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dropdown-item/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n:host([disabled]) {\n cursor: not-allowed;\n opacity: 0.4;\n}\n\n.item-inner {\n user-select: none;\n\n display: flex;\n gap: 8px;\n align-items: center;\n\n height: 32px;\n padding: 0 12px;\n border-radius: calc(infinity * 1px);\n\n font-size: var(--wui-font-size, 14px);\n color: inherit;\n white-space: nowrap;\n\n outline: none;\n\n transition:\n color var(--wui-duration-fast, 160ms) ease,\n background-color var(--wui-duration-fast, 160ms) ease;\n}\n\n.item-inner:focus-visible {\n color: var(--wui-color-on-accent, #fff);\n background: var(--wui-color-accent, #08f);\n}\n\n:host([active]) .item-inner {\n color: inherit;\n background: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n@media (hover: hover) and (pointer: fine) {\n :host(:hover) .item-inner {\n color: var(--wui-color-on-accent, #fff);\n background: var(--wui-color-accent, #08f);\n }\n}\n\n.item-label {\n overflow: hidden;\n flex: 1;\n\n min-width: 0;\n\n color: inherit;\n text-overflow: ellipsis;\n}\n\n.item-suffix {\n flex: none;\n opacity: 0.4;\n}\n"],"mappings":""}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { Placement } from '@floating-ui/dom';
|
|
2
|
+
import { LitElement } from 'lit';
|
|
3
|
+
export type { Placement };
|
|
4
|
+
export declare class WebUiDropdownMenu extends LitElement {
|
|
5
|
+
static styles: import('lit').CSSResult[];
|
|
6
|
+
open: boolean;
|
|
7
|
+
disabled: boolean;
|
|
8
|
+
matchWidth: boolean;
|
|
9
|
+
lockScroll: boolean;
|
|
10
|
+
private _placement;
|
|
11
|
+
get placement(): Placement;
|
|
12
|
+
set placement(v: string);
|
|
13
|
+
private _offset;
|
|
14
|
+
get offset(): number;
|
|
15
|
+
set offset(v: number);
|
|
16
|
+
private _activePath;
|
|
17
|
+
private readonly _overlays;
|
|
18
|
+
private readonly _closingSubmenuOverlays;
|
|
19
|
+
private _openTimer?;
|
|
20
|
+
private _ignoreOutsideClick;
|
|
21
|
+
private _ignoreOutsideClickTimer?;
|
|
22
|
+
private _hoverCleanupFns;
|
|
23
|
+
private _hasScrollLock;
|
|
24
|
+
private _restoreFocusTarget?;
|
|
25
|
+
private _shouldOpenInstantly;
|
|
26
|
+
get isOpen(): boolean;
|
|
27
|
+
connectedCallback(): void;
|
|
28
|
+
disconnectedCallback(): void;
|
|
29
|
+
protected updated(changed: Map<string, unknown>): void;
|
|
30
|
+
/**
|
|
31
|
+
* 打开菜单。
|
|
32
|
+
* @returns 无返回值;打开后派发 `open-change` 事件。
|
|
33
|
+
*/
|
|
34
|
+
openMenu(): void;
|
|
35
|
+
private _openMenu;
|
|
36
|
+
/**
|
|
37
|
+
* 关闭所有层级。
|
|
38
|
+
* @returns 无返回值;关闭后派发 `open-change` 事件。
|
|
39
|
+
*/
|
|
40
|
+
closeAll(): void;
|
|
41
|
+
/** 清理子菜单状态(不影响 open prop) */
|
|
42
|
+
private _closeAllSubmenus;
|
|
43
|
+
private _cleanupClosedMenu;
|
|
44
|
+
private _closeRootAfterPresence;
|
|
45
|
+
private _hideAllSubmenuChildren;
|
|
46
|
+
private _toggleSubmenu;
|
|
47
|
+
private _closeSubmenuFrom;
|
|
48
|
+
private _syncActiveAttrs;
|
|
49
|
+
private _getLevelItems;
|
|
50
|
+
private _populateLevel0;
|
|
51
|
+
private _returnLevel0Items;
|
|
52
|
+
private _populateOverlay;
|
|
53
|
+
private _depopulateOverlay;
|
|
54
|
+
private _ensureOverlay;
|
|
55
|
+
private _buildOverlay;
|
|
56
|
+
private _disposeOverlay;
|
|
57
|
+
private _disposeAll;
|
|
58
|
+
private _closeSubmenuAfterPresence;
|
|
59
|
+
private _disposeClosingSubmenuOverlays;
|
|
60
|
+
private _restoreSubmenuItems;
|
|
61
|
+
private _syncScrollLock;
|
|
62
|
+
private _queryTriggerAnchor;
|
|
63
|
+
private _getSubmenuTriggerAnchor;
|
|
64
|
+
private _onTriggerClick;
|
|
65
|
+
private _onClickOutside;
|
|
66
|
+
private _onMenuClick;
|
|
67
|
+
private _onKeydown;
|
|
68
|
+
private _getEnabledLevelItems;
|
|
69
|
+
private _getFocusedItem;
|
|
70
|
+
private _getFocusedLevel;
|
|
71
|
+
private _focusMenuItem;
|
|
72
|
+
private _isInsideShadowRoot;
|
|
73
|
+
private _ignoreCurrentOutsideClick;
|
|
74
|
+
private _bindLevelHovers;
|
|
75
|
+
private _bindHoversAfterUpdate;
|
|
76
|
+
render(): import('lit').TemplateResult<1>;
|
|
77
|
+
readonly $events: {
|
|
78
|
+
'open-change': CustomEvent<{
|
|
79
|
+
open: boolean;
|
|
80
|
+
}>;
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
declare global {
|
|
84
|
+
interface HTMLElementTagNameMap {
|
|
85
|
+
'web-ui-dropdown-menu': WebUiDropdownMenu;
|
|
86
|
+
}
|
|
87
|
+
}
|