ensis-ui 0.0.0-stage → 3.0.0

package/dist/components/drawer/src/RsDrawer.css

@@ -0,0 +1,399 @@
+
+.rs-drawer__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--rs-drawer-z, var(--rs-z-modal));
+  background: var(--rs-drawer-overlay-bg, var(--rs-dialog-overlay-bg, rgb(0 0 0 / 0.24)));
+  backdrop-filter: blur(var(--rs-drawer-overlay-blur, var(--rs-dialog-overlay-blur, 0px))) saturate(120%);
+  -webkit-backdrop-filter: blur(var(--rs-drawer-overlay-blur, var(--rs-dialog-overlay-blur, 0px)))
+    saturate(120%);
+}
+.rs-drawer__overlay[data-state='open'] {
+  animation: rs-drawer-overlay-in var(--rs-drawer-motion-duration-in, 240ms) ease;
+}
+.rs-drawer__overlay[data-state='closed'] {
+  /* forwards：结束后停在透明，避免卸掉前 Opacity 弹回 1 */
+  animation: rs-drawer-overlay-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
+}
+.rs-drawer__overlay--contained {
+  position: absolute;
+}
+.rs-drawer__overlay--dormant {
+  visibility: hidden;
+  pointer-events: none;
+}
+.rs-drawer__content {
+  position: fixed;
+  z-index: calc(var(--rs-drawer-z, var(--rs-z-modal)) + 1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid var(--rs-drawer-border, var(--rs-border));
+  background: var(--rs-drawer-body-bg, var(--rs-surface-elevated));
+  --rs-fieldset-legend-bg: var(--rs-drawer-body-bg, var(--rs-surface-elevated));
+  color: var(--rs-text);
+  box-shadow: var(--rs-shadow-lg);
+  outline: none;
+}
+.rs-drawer__content--animate {
+  will-change: transform;
+}
+.rs-drawer__content:focus {
+  outline: none;
+}
+.rs-drawer__content:focus-visible {
+  outline: var(--rs-focus-ring-width) solid var(--rs-focus-ring);
+  outline-offset: -2px;
+}
+.rs-drawer__content--dormant {
+  visibility: hidden;
+  pointer-events: none;
+}
+.rs-drawer__resize {
+  position: absolute;
+  z-index: 3;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  touch-action: none;
+}
+.rs-drawer__resize:focus-visible {
+  outline: var(--rs-focus-ring-width) solid var(--rs-focus-ring);
+  outline-offset: -2px;
+}
+.rs-drawer__content--right > .rs-drawer__resize,
+.rs-drawer__content--left > .rs-drawer__resize {
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  cursor: ew-resize;
+}
+.rs-drawer__content--right > .rs-drawer__resize {
+  left: 0;
+}
+.rs-drawer__content--left > .rs-drawer__resize {
+  right: 0;
+}
+.rs-drawer__content--top > .rs-drawer__resize,
+.rs-drawer__content--bottom > .rs-drawer__resize {
+  inset-inline: 0;
+  height: 10px;
+  cursor: ns-resize;
+}
+.rs-drawer__content--top > .rs-drawer__resize {
+  bottom: 0;
+}
+.rs-drawer__content--bottom > .rs-drawer__resize {
+  top: 0;
+}
+.rs-drawer__content--right > .rs-drawer__resize:hover,
+.rs-drawer__content--right > .rs-drawer__resize:focus-visible,
+.rs-drawer__content--resizing.rs-drawer__content--right > .rs-drawer__resize {
+  background: linear-gradient(to right, var(--rs-primary) 0, var(--rs-primary) 2px, transparent 2px);
+}
+.rs-drawer__content--left > .rs-drawer__resize:hover,
+.rs-drawer__content--left > .rs-drawer__resize:focus-visible,
+.rs-drawer__content--resizing.rs-drawer__content--left > .rs-drawer__resize {
+  background: linear-gradient(to left, var(--rs-primary) 0, var(--rs-primary) 2px, transparent 2px);
+}
+.rs-drawer__content--top > .rs-drawer__resize:hover,
+.rs-drawer__content--top > .rs-drawer__resize:focus-visible,
+.rs-drawer__content--resizing.rs-drawer__content--top > .rs-drawer__resize {
+  background: linear-gradient(to top, var(--rs-primary) 0, var(--rs-primary) 2px, transparent 2px);
+}
+.rs-drawer__content--bottom > .rs-drawer__resize:hover,
+.rs-drawer__content--bottom > .rs-drawer__resize:focus-visible,
+.rs-drawer__content--resizing.rs-drawer__content--bottom > .rs-drawer__resize {
+  background: linear-gradient(to bottom, var(--rs-primary) 0, var(--rs-primary) 2px, transparent 2px);
+}
+.rs-drawer__content--resizing iframe {
+  pointer-events: none;
+}
+.rs-drawer__content--contained {
+  position: absolute;
+}
+.rs-drawer__content--right,
+.rs-drawer__content--left {
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  max-height: none;
+  width: min(100vw, var(--rs-drawer-panel-size, 28rem));
+  transform: none;
+}
+.rs-drawer__content--contained:is(.rs-drawer__content--right, .rs-drawer__content--left) {
+  width: min(100%, var(--rs-drawer-panel-size, 28rem));
+}
+.rs-drawer__content--right {
+  left: auto;
+  right: 0;
+  border-right: 0;
+  border-radius: var(--rs-radius) 0 0 var(--rs-radius);
+  padding-right: env(safe-area-inset-right, 0px);
+}
+.rs-drawer__content--left {
+  left: 0;
+  right: auto;
+  border-left: 0;
+  border-radius: 0 var(--rs-radius) var(--rs-radius) 0;
+  padding-left: env(safe-area-inset-left, 0px);
+}
+.rs-drawer__content--top,
+.rs-drawer__content--bottom {
+  inset-inline: 0;
+  height: min(100vh, var(--rs-drawer-panel-size, 22rem));
+}
+.rs-drawer__content--contained:is(.rs-drawer__content--top, .rs-drawer__content--bottom) {
+  height: min(100%, var(--rs-drawer-panel-size, 22rem));
+}
+.rs-drawer__content--top {
+  top: 0;
+  border-top: 0;
+  border-radius: 0 0 var(--rs-radius) var(--rs-radius);
+  padding-top: env(safe-area-inset-top, 0px);
+}
+.rs-drawer__content--bottom {
+  bottom: 0;
+  border-bottom: 0;
+  border-radius: var(--rs-radius) var(--rs-radius) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+.rs-drawer__content--sm:is(.rs-drawer__content--left, .rs-drawer__content--right) {
+  --rs-drawer-panel-size: 20rem;
+}
+.rs-drawer__content--lg:is(.rs-drawer__content--left, .rs-drawer__content--right) {
+  --rs-drawer-panel-size: 36rem;
+}
+.rs-drawer__content--full:is(.rs-drawer__content--left, .rs-drawer__content--right) {
+  width: 100vw;
+}
+.rs-drawer__content--contained.rs-drawer__content--full:is(
+  .rs-drawer__content--left,
+  .rs-drawer__content--right
+) {
+  width: 100%;
+}
+.rs-drawer__content--sm:is(.rs-drawer__content--top, .rs-drawer__content--bottom) {
+  --rs-drawer-panel-size: 16rem;
+}
+.rs-drawer__content--md:is(.rs-drawer__content--top, .rs-drawer__content--bottom) {
+  --rs-drawer-panel-size: 22rem;
+}
+.rs-drawer__content--lg:is(.rs-drawer__content--top, .rs-drawer__content--bottom) {
+  --rs-drawer-panel-size: 32rem;
+}
+.rs-drawer__content--full:is(.rs-drawer__content--top, .rs-drawer__content--bottom) {
+  height: 100vh;
+}
+.rs-drawer__content--contained.rs-drawer__content--full:is(
+  .rs-drawer__content--top,
+  .rs-drawer__content--bottom
+) {
+  height: 100%;
+}
+.rs-drawer__content--right[data-state='open'] {
+  animation: rs-drawer-slide-right-in var(--rs-drawer-motion-duration-in, 240ms)
+    cubic-bezier(0.32, 0.72, 0, 1);
+}
+.rs-drawer__content--right[data-state='closed'] {
+  animation: rs-drawer-slide-right-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
+}
+.rs-drawer__content--left[data-state='open'] {
+  animation: rs-drawer-slide-left-in var(--rs-drawer-motion-duration-in, 240ms)
+    cubic-bezier(0.32, 0.72, 0, 1);
+}
+.rs-drawer__content--left[data-state='closed'] {
+  animation: rs-drawer-slide-left-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
+}
+.rs-drawer__content--top[data-state='open'] {
+  animation: rs-drawer-slide-top-in var(--rs-drawer-motion-duration-in, 240ms)
+    cubic-bezier(0.32, 0.72, 0, 1);
+}
+.rs-drawer__content--top[data-state='closed'] {
+  animation: rs-drawer-slide-top-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
+}
+.rs-drawer__content--bottom[data-state='open'] {
+  animation: rs-drawer-slide-bottom-in var(--rs-drawer-motion-duration-in, 240ms)
+    cubic-bezier(0.32, 0.72, 0, 1);
+}
+.rs-drawer__content--bottom[data-state='closed'] {
+  animation: rs-drawer-slide-bottom-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
+}
+@keyframes rs-drawer-overlay-in {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes rs-drawer-overlay-out {
+from {
+    opacity: 1;
+}
+to {
+    opacity: 0;
+}
+}
+@keyframes rs-drawer-slide-right-in {
+from {
+    transform: translateX(100%);
+}
+to {
+    transform: translateX(0);
+}
+}
+@keyframes rs-drawer-slide-right-out {
+from {
+    transform: translateX(0);
+}
+to {
+    transform: translateX(100%);
+}
+}
+@keyframes rs-drawer-slide-left-in {
+from {
+    transform: translateX(-100%);
+}
+to {
+    transform: translateX(0);
+}
+}
+@keyframes rs-drawer-slide-left-out {
+from {
+    transform: translateX(0);
+}
+to {
+    transform: translateX(-100%);
+}
+}
+@keyframes rs-drawer-slide-top-in {
+from {
+    transform: translateY(-100%);
+}
+to {
+    transform: translateY(0);
+}
+}
+@keyframes rs-drawer-slide-top-out {
+from {
+    transform: translateY(0);
+}
+to {
+    transform: translateY(-100%);
+}
+}
+@keyframes rs-drawer-slide-bottom-in {
+from {
+    transform: translateY(100%);
+}
+to {
+    transform: translateY(0);
+}
+}
+@keyframes rs-drawer-slide-bottom-out {
+from {
+    transform: translateY(0);
+}
+to {
+    transform: translateY(100%);
+}
+}
+.rs-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-md);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  height: var(--rs-drawer-header-height);
+  min-height: var(--rs-drawer-header-min-height);
+  padding-block: var(--rs-drawer-header-padding-y);
+  padding-inline: var(--rs-drawer-header-padding-x);
+  background: var(--rs-drawer-header-bg);
+  border-bottom: 1px solid var(--rs-drawer-separator, var(--rs-border-subtle));
+}
+.rs-drawer__header > :first-child {
+  min-width: 0;
+  flex: 1;
+}
+.rs-drawer__heading {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.rs-drawer__tools {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.rs-drawer__extra {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  flex-shrink: 0;
+}
+.rs-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--rs-space-md);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  height: var(--rs-drawer-footer-height);
+  min-height: var(--rs-drawer-footer-min-height);
+  padding-block: var(--rs-drawer-footer-padding-y);
+  padding-inline: var(--rs-drawer-footer-padding-x);
+  background: var(--rs-drawer-footer-bg);
+  border-top: 1px solid
+    var(--rs-drawer-footer-border, var(--rs-drawer-separator, var(--rs-border-subtle)));
+}
+.rs-drawer__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding-block: var(--rs-drawer-body-padding-y);
+  padding-inline: var(--rs-drawer-body-padding-x);
+  background: var(--rs-drawer-body-bg);
+}
+.rs-drawer__title {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  font-size: var(--rs-font-size-base);
+  font-weight: var(--rs-font-weight-semibold);
+  line-height: var(--rs-line-height-tight, 1.3);
+  color: var(--rs-drawer-title-fg, var(--rs-text));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-drawer__description {
+  margin-block: var(--rs-space-xs) 0;
+  margin-inline: 0;
+  color: var(--rs-drawer-description-fg, var(--rs-muted));
+  font-size: var(--rs-font-size-sm);
+}
+.rs-drawer__description--sr-only,
+.rs-drawer__title--sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/components/drawer/src/RsDrawer.d.ts

@@ -0,0 +1,120 @@
+import { type RsDrawerBeforeClose, type RsDrawerDimension, type RsDrawerExpose, type RsDrawerSide, type RsDrawerSize } from './drawer-utils';
+type __VLS_Props = {
+    /** 标题文案；也可用 `#header` 插槽 */
+    title?: string;
+    description?: string;
+    side?: RsDrawerSide;
+    /** 预设尺寸；与 width/height 同时存在时自定义优先 */
+    size?: RsDrawerSize;
+    /** 左右抽屉自定义宽度（覆盖 size） */
+    width?: RsDrawerDimension;
+    /** 上下抽屉自定义高度（覆盖 size） */
+    height?: RsDrawerDimension;
+    /**
+     * 内边缘拖拽改尺寸。full 始终不可拖。
+     * 控制台 / 帮助栏等侧栏场景建议保持开启。
+     */
+    resizable?: boolean;
+    /** 可拖下限（px / CSS）；默认 256px */
+    minSize?: RsDrawerDimension;
+    /** 可拖上限（px / CSS）；默认视口 90% */
+    maxSize?: RsDrawerDimension;
+    /**
+     * 是否模态：锁焦点并拦截背后交互。
+     * 未显式传入时跟随 showOverlay（有遮罩=模态，无遮罩=非模态）。
+     */
+    modal?: boolean;
+    /** 是否渲染遮罩（与 modal / closeOnOverlayClick 解耦） */
+    showOverlay?: boolean;
+    /**
+     * 遮罩不透明度 0–1；覆盖主题默认。
+     * 例：0.08 最浅、0.35 适中、0.55 较深。
+     */
+    overlayOpacity?: number;
+    /** 遮罩模糊；number 为 px */
+    overlayBlur?: number | string;
+    showClose?: boolean;
+    /**
+     * 点击抽屉外是否关闭（含无遮罩时的外部指针）。
+     * 与 modal 独立：非模态也可保持打开。
+     */
+    closeOnOverlayClick?: boolean;
+    /** 按 Esc 是否关闭；默认 true。上层浮层已 preventDefault 时不抢。 */
+    closeOnEsc?: boolean;
+    /**
+     * 挂载目标
+     * - string / HTMLElement：Teleport 到指定节点（容器需 position:relative）
+     * - false：禁用 Teleport，就地渲染
+     * - undefined：挂到 body
+     */
+    teleportTo?: string | HTMLElement | false;
+    /** 关闭前钩子；返回 false 可阻止关闭（支持 async） */
+    beforeClose?: RsDrawerBeforeClose;
+    /**
+     * 关闭动画结束后卸掉面板。默认 true，与原先关闭即卸载一致。
+     * false 时保留子树，便于表单状态留在抽屉里。
+     */
+    destroyOnClose?: boolean;
+    /** 首次打开前就挂载子树。关闭后是否留下仍看 destroyOnClose。 */
+    forceRender?: boolean;
+    /**
+     * 是否锁 body 滚动。未传时：模态且挂到 body 才锁。
+     * 挂进局部容器默认不锁整页。
+     */
+    lockScroll?: boolean;
+    /** 覆盖层叠。未传时与其它抽屉同用 --rs-z-modal，后打开的盖在上面。 */
+    zIndex?: number;
+    /** 没有可见标题时的可访问名称 */
+    ariaLabel?: string;
+    id?: string;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_18: {}, __VLS_20: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_7) => any;
+} & {
+    extra?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+} & {
+    footer?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsDrawerExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resize: (size: number) => any;
+    openChange: (open: boolean) => any;
+    "update:open": (value: boolean) => any;
+    afterOpen: () => any;
+    afterClose: (reason: import("../../dialog/index.js").RsDialogCloseReason) => any;
+    "update:width": (value: number) => any;
+    "update:height": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onResize?: ((size: number) => any) | undefined;
+    onOpenChange?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onAfterOpen?: (() => any) | undefined;
+    onAfterClose?: ((reason: import("../../dialog/index.js").RsDialogCloseReason) => any) | undefined;
+    "onUpdate:width"?: ((value: number) => any) | undefined;
+    "onUpdate:height"?: ((value: number) => any) | undefined;
+}>, {
+    title: string;
+    size: RsDrawerSize;
+    side: RsDrawerSide;
+    showClose: boolean;
+    closeOnEsc: boolean;
+    resizable: boolean;
+    showOverlay: boolean;
+    closeOnOverlayClick: boolean;
+    destroyOnClose: boolean;
+    forceRender: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};