antd-solid 0.0.12 → 0.0.14

package/es/ConfigProvider/utils/getAlphaColor.js

@@ -0,0 +1,44 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+function isStableColor(color) {
+  return color >= 0 && color <= 255;
+}
+function getAlphaColor(frontColor, backgroundColor) {
+  const {
+    r: fR,
+    g: fG,
+    b: fB,
+    a: originAlpha
+  } = new TinyColor(frontColor).toRgb();
+  if (originAlpha < 1) {
+    return frontColor;
+  }
+  const {
+    r: bR,
+    g: bG,
+    b: bB
+  } = new TinyColor(backgroundColor).toRgb();
+  for (let fA = 0.01; fA <= 1; fA += 0.01) {
+    const r = Math.round((fR - bR * (1 - fA)) / fA);
+    const g = Math.round((fG - bG * (1 - fA)) / fA);
+    const b = Math.round((fB - bB * (1 - fA)) / fA);
+    if (isStableColor(r) && isStableColor(g) && isStableColor(b)) {
+      return new TinyColor({
+        r,
+        g,
+        b,
+        a: Math.round(fA * 100) / 100
+      }).toRgbString();
+    }
+  }
+  // fallback
+  /* istanbul ignore next */
+  return new TinyColor({
+    r: fR,
+    g: fG,
+    b: fB,
+    a: 1
+  }).toRgbString();
+}
+
+export { getAlphaColor as default };

package/es/ConfigProvider/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { type SeedToken, type CssVariables } from '../types';
+export declare function createCssVariables(token: SeedToken, theme?: 'light' | 'dark'): CssVariables;
+export declare function getCssVariablesClass(): string;

package/es/ConfigProvider/utils/index.js

@@ -0,0 +1,181 @@
+import { nanoid } from 'nanoid';
+import { TinyColor } from '@ctrl/tinycolor';
+import genDarkColorMapToken from '../dark/index.js';
+import genLightColorMapToken from '../light/index.js';
+import getAlphaColor from './getAlphaColor.js';
+
+function createCssVariables(token, theme = 'light') {
+  const mapToken = theme === 'dark' ? genDarkColorMapToken(token) : genLightColorMapToken(token);
+  const aliasToken = {
+    // ============== Background ============== //
+    colorFillContent: mapToken.colorFillSecondary,
+    colorFillContentHover: mapToken.colorFill,
+    colorFillAlter: mapToken.colorFillQuaternary,
+    colorBgContainerDisabled: mapToken.colorFillTertiary,
+    // ============== Split ============== //
+    colorBorderBg: mapToken.colorBgContainer,
+    colorSplit: getAlphaColor(mapToken.colorBorderSecondary, mapToken.colorBgContainer),
+    // ============== Text ============== //
+    colorTextPlaceholder: mapToken.colorTextQuaternary,
+    colorTextDisabled: mapToken.colorTextQuaternary,
+    colorTextHeading: mapToken.colorText,
+    colorTextLabel: mapToken.colorTextSecondary,
+    colorTextDescription: mapToken.colorTextTertiary,
+    colorTextLightSolid: mapToken.colorWhite,
+    colorHighlight: mapToken.colorError,
+    colorBgTextHover: mapToken.colorFillSecondary,
+    colorBgTextActive: mapToken.colorFill,
+    colorIcon: mapToken.colorTextTertiary,
+    colorIconHover: mapToken.colorText,
+    colorErrorOutline: getAlphaColor(mapToken.colorErrorBg, mapToken.colorBgContainer),
+    colorWarningOutline: getAlphaColor(mapToken.colorWarningBg, mapToken.colorBgContainer),
+    controlItemBgHover: mapToken.colorFillTertiary,
+    controlItemBgActive: mapToken.colorPrimaryBg,
+    controlItemBgActiveHover: mapToken.colorPrimaryBgHover,
+    controlItemBgActiveDisabled: mapToken.colorFill,
+    controlTmpOutline: mapToken.colorFillQuaternary,
+    controlOutline: getAlphaColor(mapToken.colorPrimaryBg, mapToken.colorBgContainer),
+    fontWeightStrong: 600,
+    opacityLoading: 0.65,
+    linkDecoration: 'none',
+    linkHoverDecoration: 'none',
+    linkFocusDecoration: 'none',
+    controlPaddingHorizontal: 12,
+    controlPaddingHorizontalSM: 8
+  };
+  const colorFillAlterSolid = new TinyColor(aliasToken.colorFillAlter).onBackground(mapToken.colorBgContainer).toHexShortString();
+  return {
+    '--ant-color-primary': mapToken.colorPrimary,
+    '--ant-color-primary-active': mapToken.colorPrimaryActive,
+    '--ant-color-primary-hover': mapToken.colorPrimaryHover,
+    '--ant-color-primary-border': mapToken.colorPrimaryBorder,
+    '--ant-color-primary-border-hover': mapToken.colorPrimaryBorderHover,
+    '--ant-color-success': mapToken.colorSuccess,
+    '--ant-color-success-border': mapToken.colorSuccessBorder,
+    '--ant-color-success-bg': mapToken.colorSuccessBg,
+    '--ant-color-error': mapToken.colorError,
+    '--ant-color-error-active': mapToken.colorErrorActive,
+    '--ant-color-error-bg': mapToken.colorErrorBg,
+    '--ant-color-error-bg-hover': mapToken.colorErrorBgHover,
+    '--ant-color-error-border': mapToken.colorErrorBorder,
+    '--ant-color-error-border-hover': mapToken.colorErrorBorderHover,
+    '--ant-color-warning': mapToken.colorWarning,
+    '--ant-color-warning-bg': mapToken.colorWarningBg,
+    '--ant-color-warning-bg-hover': mapToken.colorWarningBgHover,
+    '--ant-color-warning-border': mapToken.colorWarningBorder,
+    '--ant-color-warning-border-hover': mapToken.colorWarningBorderHover,
+    '--ant-color-info-bg': mapToken.colorInfoBg,
+    '--ant-color-info-border': mapToken.colorInfoBorder,
+    '--ant-color-border': mapToken.colorBorder,
+    '--ant-color-border-secondary': mapToken.colorBorderSecondary,
+    '--ant-color-split': aliasToken.colorSplit,
+    '--ant-color-icon': aliasToken.colorIcon,
+    '--ant-color-icon-hover': aliasToken.colorIconHover,
+    '--ant-color-text': mapToken.colorText,
+    '--ant-color-text-secondary': mapToken.colorTextSecondary,
+    '--ant-color-text-tertiary': mapToken.colorTextTertiary,
+    '--ant-color-text-quaternary': mapToken.colorTextQuaternary,
+    '--ant-color-text-disabled': aliasToken.colorTextDisabled,
+    '--ant-color-text-heading': aliasToken.colorTextHeading,
+    '--ant-color-text-label': aliasToken.colorTextLabel,
+    '--ant-color-text-description': aliasToken.colorTextDescription,
+    '--ant-color-text-placeholder': aliasToken.colorTextPlaceholder,
+    '--ant-color-text-light-solid': aliasToken.colorTextLightSolid,
+    '--ant-color-bg-text-hover': aliasToken.colorBgTextHover,
+    '--ant-color-bg-text-active': aliasToken.colorBgTextActive,
+    '--ant-color-bg-container': mapToken.colorBgContainer,
+    '--ant-color-bg-elevated': mapToken.colorBgElevated,
+    '--ant-color-bg-container-disabled': aliasToken.colorBgContainerDisabled,
+    '--ant-color-bg-container-secondary': mapToken.colorBgContainerSecondary,
+    '--ant-color-bg-container-tertiary': mapToken.colorBgContainerTertiary,
+    '--ant-color-bg-spotlight': mapToken.colorBgSpotlight,
+    '--ant-color-bg-layout': mapToken.colorBgLayout,
+    '--ant-color-white': mapToken.colorWhite,
+    '--ant-color-bg-mask': mapToken.colorBgMask,
+    '--ant-color-fill': mapToken.colorFill,
+    '--ant-color-fill-secondary': mapToken.colorFillSecondary,
+    '--ant-color-fill-tertiary': mapToken.colorFillTertiary,
+    '--ant-color-fill-quaternary': mapToken.colorFillQuaternary,
+    '--ant-control-outline': aliasToken.controlOutline,
+    '--ant-control-item-bg-active': aliasToken.controlItemBgActive,
+    '--ant-control-item-bg-hover': mapToken.colorFillTertiary,
+    '--ant-font-weight-strong': '600',
+    '--ant-font-size-sm': '12px',
+    '--ant-font-size': '14px',
+    '--ant-font-size-lg': '16px',
+    '--ant-font-size-xl': '20px',
+    '--ant-font-size-heading-1': '38px',
+    '--ant-font-size-heading-2': '30px',
+    '--ant-font-size-heading-3': '24px',
+    '--ant-font-size-heading-4': '20px',
+    '--ant-font-size-heading-5': '16px',
+    '--ant-line-height': '1.5714285714285714',
+    '--ant-line-height-lg': '1.5',
+    '--ant-line-width-bold': '2px',
+    '--ant-line-width': '1px',
+    '--ant-line-type': 'solid',
+    '--ant-margin-xxs': '4px',
+    '--ant-margin-xs': '8px',
+    '--ant-margin-sm': '12px',
+    '--ant-margin': '16px',
+    '--ant-margin-lg': '24px',
+    '--ant-margin-xl': '32px',
+    '--ant-padding-xxs': '4px',
+    '--ant-padding-xs': '8px',
+    '--ant-padding-sm': '12px',
+    '--ant-padding': '16px',
+    '--ant-padding-lg': '24px',
+    '--ant-padding-xl': '32px',
+    '--ant-box-shadow': `
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    '--ant-box-shadow-secondary': `
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05)
+    `,
+    '--ant-box-shadow-tertiary': '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
+    '--ant-border-radius-xs': '2px',
+    '--ant-border-radius-sm': '4px',
+    '--ant-border-radius': '6px',
+    '--ant-border-radius-lg': '8px',
+    '--ant-opacity-loading': '0.65',
+    '--ant-button-default-color': mapToken.colorText,
+    '--ant-button-border-color-disabled': mapToken.colorBorder,
+    '--ant-button-default-bg': mapToken.colorBgContainer,
+    '--ant-radio-dot-color-disabled': aliasToken.colorTextDisabled,
+    '--ant-radio-button-checked-bg-disabled': aliasToken.controlItemBgActiveDisabled,
+    '--ant-collapse-header-bg': aliasToken.colorFillAlter,
+    '--ant-select-option-selected-bg': aliasToken.controlItemBgActive,
+    '--ant-select-option-active-bg': aliasToken.controlItemBgHover,
+    '--ant-select-multiple-item-bg': mapToken.colorFillSecondary,
+    '--ant-tree-expand-icon-width': '24px',
+    '--ant-tree-node-wrapper-padding': '2px 0',
+    '--ant-tree-node-selected-bg': aliasToken.controlItemBgActive,
+    '--ant-tree-node-hover-bg': aliasToken.controlItemBgHover,
+    '--ant-alert-default-padding': '8px 12px',
+    '--ant-tabs-card-bg': aliasToken.colorFillAlter,
+    '--ant-progress-remaining-color': mapToken.colorFillSecondary,
+    '--ant-segmented-item-color': aliasToken.colorTextLabel,
+    '--ant-segmented-item-hover-color': mapToken.colorText,
+    '--ant-segmented-item-selected-color': mapToken.colorText,
+    '--ant-segmented-item-selected-bg': mapToken.colorBgContainerSecondary,
+    '--ant-segmented-item-hover-bg': mapToken.colorFillSecondary,
+    '--ant-segmented-item-active-bg': mapToken.colorFill,
+    '--ant-table-header-bg': colorFillAlterSolid,
+    '--ant-table-row-hover-bg': colorFillAlterSolid,
+    '--ant-table-border-color': mapToken.colorBorderSecondary,
+    '--ant-slider-handle-color': mapToken.colorPrimaryBorder,
+    '--ant-slider-handle-active-color': mapToken.colorPrimary,
+    '--ant-slider-handle-color-disabled': new TinyColor(aliasToken.colorTextDisabled).onBackground(mapToken.colorBgContainer).toHexShortString(),
+    '--ant-slider-track-bg-disabled': aliasToken.colorBgContainerDisabled,
+    '--ant-modal-title-color': aliasToken.colorTextHeading
+  };
+}
+function getCssVariablesClass() {
+  return `css-var-${nanoid(12)}`;
+}
+
+export { createCssVariables, getCssVariablesClass };

package/es/ContextMenu/index.d.ts

@@ -0,0 +1,8 @@
+import { type MenuProps } from '../Menu';
+declare const _default: {
+    trigger: (event: MouseEvent, options: MenuProps<any>) => void;
+    useContextMenu: () => {
+        trigger: (event: MouseEvent, options: MenuProps<any>) => void;
+    };
+};
+export default _default;

package/es/ContextMenu/index.js

@@ -0,0 +1,99 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { splitProps, createSignal, createEffect, onCleanup, getOwner, runWithOwner } from 'solid-js';
+import Command from '../Command/index.js';
+import { inRange } from '../utils/number.js';
+import Menu from '../Menu/index.js';
+import Element from '../Element/index.js';
+
+const offsetY = 4;
+const ContextMenuCommand = Command.createCommand(props => {
+  let ref;
+  const [, menuProps] = splitProps(props, ['x', 'y']);
+  const [reverse, setReverse] = createSignal(false);
+  createEffect(() => {
+    setReverse(props.y + (ref?.clientHeight ?? 0) + offsetY > window.innerHeight);
+  });
+  const {
+    dispose
+  } = Command.useCommandProps();
+  const abortController = new AbortController();
+  window.addEventListener('click', e => {
+    if (e.target instanceof Node && ref?.contains(e.target)) return;
+    dispose();
+  }, {
+    capture: true,
+    signal: abortController.signal
+  });
+  window.addEventListener('keyup', e => {
+    if (e.key === 'Escape') {
+      dispose();
+    }
+  }, {
+    signal: abortController.signal
+  });
+  onCleanup(() => {
+    abortController.abort();
+  });
+  return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = ref;
+      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
+    },
+    "class": "z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)] bg-[--ant-color-bg-container-tertiary] rounded-[var(--ant-border-radius)]",
+    get style() {
+      return {
+        top: `${props.y}px`,
+        left: `${props.x}px`,
+        transform: reverse() ? `translateY(calc(-100% - ${offsetY}px))` : `translateY(${offsetY}px)`
+      };
+    },
+    get children() {
+      return createComponent(Menu, mergeProps({
+        selectable: false,
+        style: {
+          '--ant-menu-item-height': '32px'
+        }
+      }, menuProps, {
+        onClick: info => {
+          dispose();
+          menuProps.onClick?.(info);
+        }
+      }));
+    }
+  });
+});
+let prevPosition;
+// 用于范围检测
+const padding = 2;
+const trigger = (event, options) => {
+  event.preventDefault();
+  event.stopPropagation();
+  if (!options.items?.length || ContextMenuCommand.isOpen() && inRange(prevPosition?.x ?? 0, event.clientX - padding, event.clientX + padding, '[]') && inRange(prevPosition?.y ?? 0, event.clientY - padding, event.clientY + padding, '[]')) {
+    ContextMenuCommand.dispose();
+    return;
+  }
+  prevPosition = {
+    x: event.clientX,
+    y: event.clientY
+  };
+  ContextMenuCommand.show({
+    ...prevPosition,
+    ...options
+  });
+};
+const useContextMenu = () => {
+  const owner = getOwner();
+  return {
+    trigger: (event, options) => {
+      runWithOwner(owner, () => {
+        trigger(event, options);
+      });
+    }
+  };
+};
+var index = {
+  trigger,
+  useContextMenu
+};
+
+export { index as default };

package/es/Cursor/index.d.ts

@@ -0,0 +1,6 @@
+import { type Component, type ParentProps, type JSX } from 'solid-js';
+export interface CursorProps extends ParentProps {
+    cursor: JSX.Element;
+}
+declare const Cursor: Component<CursorProps>;
+export default Cursor;

package/es/Cursor/index.js

@@ -0,0 +1,71 @@
+import { createComponent, Portal, insert, effect, template } from 'solid-js/web';
+import { children, createSignal, createEffect, onCleanup, Show } from 'solid-js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span class="absolute pointer-events-none z-2000">`);
+const Cursor = props => {
+  const resolvedChildren = children(() => props.children);
+  const [hover, setHover] = createSignal(false);
+  const [cursorPosition, setCursorPosition] = createSignal({
+    x: 0,
+    y: 0
+  });
+  let originalCursor;
+  createEffect(() => {
+    const _children = resolvedChildren();
+    if (!(_children instanceof HTMLElement || _children instanceof SVGElement)) return;
+    const abortController = new AbortController();
+    _children.addEventListener('mouseenter', () => {
+      setHover(true);
+      originalCursor = _children.style.cursor;
+      _children.style.cursor = 'none';
+    }, {
+      capture: true,
+      signal: abortController.signal
+    });
+    _children.addEventListener('mousemove', e => {
+      setCursorPosition({
+        x: e.clientX,
+        y: e.clientY
+      });
+    }, {
+      capture: true,
+      signal: abortController.signal
+    });
+    _children.addEventListener('mouseleave', () => {
+      setHover(false);
+      if (originalCursor) _children.style.cursor = originalCursor;
+    }, {
+      capture: true,
+      signal: abortController.signal
+    });
+    onCleanup(() => {
+      abortController.abort();
+    });
+  });
+  return [resolvedChildren, createComponent(Show, {
+    get when() {
+      return hover();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          var _el$ = _tmpl$();
+          insert(_el$, () => props.cursor);
+          effect(_p$ => {
+            var _v$ = `${cursorPosition().y}px`,
+              _v$2 = `${cursorPosition().x}px`;
+            _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("top", _v$) : _el$.style.removeProperty("top"));
+            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("left", _v$2) : _el$.style.removeProperty("left"));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  })];
+};
+
+export { Cursor as default };

package/es/DelayShow/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 延迟创建组件
+ * 只有当 props.when 第一次为 true 时才初始化组件
+ */
+import { type Component, type JSXElement } from 'solid-js';
+export interface DelayShowProps {
+    when?: boolean;
+    /**
+     * 延迟显示的时间，只在第一次显示时有效
+     * 单位 ms
+     */
+    time?: number;
+    children: JSXElement;
+}
+declare const DelayShow: Component<DelayShowProps>;
+export default DelayShow;

package/es/DelayShow/index.js

@@ -0,0 +1,27 @@
+import { createComponent } from 'solid-js/web';
+import { createSignal, untrack, createRenderEffect, on, Show } from 'solid-js';
+
+const DelayShow = props => {
+  // 是否显示过一次
+  const [showed, setShowed] = createSignal(untrack(() => props.when ?? false));
+  createRenderEffect(on(() => props.when, () => {
+    if (!props.when && !showed()) return;
+    if (typeof props.time === 'number') {
+      setTimeout(() => {
+        setShowed(true);
+      }, props.time);
+    } else {
+      setShowed(true);
+    }
+  }));
+  return createComponent(Show, {
+    get when() {
+      return showed() || props.when;
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+
+export { DelayShow as default };

package/es/Divider/index.d.ts

@@ -0,0 +1,17 @@
+import { type ParentProps, type Component } from 'solid-js';
+import { type StyleProps } from '../types';
+export interface DividerProps extends ParentProps, StyleProps {
+    dashed?: boolean;
+    /**
+     * 分割线标题的位置
+     * 默认 'center'
+     */
+    orientation?: 'left' | 'right' | 'center';
+    /**
+     * 水平还是垂直类型
+     * 默认 'horizontal'
+     */
+    type?: 'horizontal' | 'vertical';
+}
+declare const Divider: Component<DividerProps>;
+export default Divider;

package/es/Divider/index.js

@@ -0,0 +1,71 @@
+import { createComponent, use, insert, effect, template } from 'solid-js/web';
+import { mergeProps, createMemo, children, Show } from 'solid-js';
+import cs from 'classnames';
+import 'lodash-es';
+import useSize from '../hooks/useSize.js';
+import Element from '../Element/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span class="inline-block px-[var(--ant-divider-text-padding-inline)]">`);
+const Divider = _props => {
+  const props = mergeProps({
+    orientation: 'center',
+    type: 'horizontal'
+  }, _props);
+  let container;
+  const containerSize = useSize(() => container);
+  const containerWidth = createMemo(() => containerSize()?.width ?? 0);
+  let childrenRef;
+  const childrenSize = useSize(() => childrenRef);
+  const childrenWidth = createMemo(() => childrenSize()?.width ?? 0);
+  const orientationMargin = 0.05;
+  const childrenStart = createMemo(() => ({
+    left: containerWidth() * orientationMargin,
+    center: containerWidth() / 2 - childrenWidth() / 2,
+    right: containerWidth() * (1 - orientationMargin) - childrenWidth()
+  })[props.orientation]);
+  const resolvedChildren = children(() => props.children);
+  return createComponent(Show, {
+    get when() {
+      return resolvedChildren() && props.type === 'horizontal';
+    },
+    get fallback() {
+      return createComponent(Element, {
+        get ["class"]() {
+          return cs(props.class, 'border-[--ant-color-split]', props.type === 'horizontal' ? 'my-[--ant-margin-lg] border-width-[1px_0_0]' : 'mx-[--ant-margin-xs] inline-block border-width-[0_1px_0_0] h-0.9em [vertical-align:middle]', props.dashed ? 'border-dashed' : 'border-solid');
+        },
+        get style() {
+          return props.style;
+        }
+      });
+    },
+    get children() {
+      return createComponent(Element, {
+        ref(r$) {
+          var _ref$ = container;
+          typeof _ref$ === "function" ? _ref$(r$) : container = r$;
+        },
+        get ["class"]() {
+          return cs(props.class, 'my-[var(--ant-margin)] flex items-center relative', ['before:content-empty before:block before:absolute before:left-0 before:w-[var(--ant-divider-children-start)] before:border-width-[1px_0_0] before:border-[var(--ant-color-split)]', props.dashed ? 'before:border-dashed' : 'before:border-solid'], ['after:content-empty after:block after:absolute after:left-[var(--ant-divider-children-end)] after:right-0 after:border-width-[1px_0_0] after:border-[var(--ant-color-split)]', props.dashed ? 'after:border-dashed' : 'after:border-solid']);
+        },
+        get style() {
+          return {
+            '--ant-divider-text-padding-inline': '1em',
+            '--ant-divider-children-start': `${childrenStart()}px`,
+            '--ant-divider-children-end': `${childrenStart() + childrenWidth()}px`,
+            ...props.style
+          };
+        },
+        get children() {
+          var _el$ = _tmpl$();
+          var _ref$2 = childrenRef;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$) : childrenRef = _el$;
+          insert(_el$, resolvedChildren);
+          effect(() => `translateX(${childrenStart()}px)` != null ? _el$.style.setProperty("transform", `translateX(${childrenStart()}px)`) : _el$.style.removeProperty("transform"));
+          return _el$;
+        }
+      });
+    }
+  });
+};
+
+export { Divider as default };

package/es/Drawer/index.d.ts

@@ -1,25 +1,24 @@
-import { type Component, type JSXElement, type Ref } from 'solid-js';
+import { type Component, type JSXElement } from 'solid-js';
 import './index.scss';
-export interface DrawerInstance {
-    open: () => void;
-    close: () => void;
-}
-export interface DrawerProps {
-    ref?: Ref<DrawerInstance>;
-    title?: JSXElement;
-    extra?: JSXElement;
+import { type StyleProps, type StringOrJSXElement } from '../types';
+export interface DrawerProps extends StyleProps {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onClose?: () => void;
+    title?: StringOrJSXElement;
+    extra?: StringOrJSXElement;
     children?: JSXElement;
     /**
-     * 宽度
+     * 预设抽屉宽度（或高度）
      * 默认 378px
      */
-    width?: string;
+    size?: string;
+    closeIcon?: boolean;
     /**
-     * 高度，在 placement 为 top 或 bottom 时使用
-     * 默认 378px
+     * 是否展示遮罩
+     * 默认 true
      */
-    height?: string;
-    closeIcon?: boolean;
+    mask?: boolean;
     /**
      * 点击蒙层是否允许关闭
      * 默认 true
@@ -29,6 +28,11 @@ export interface DrawerProps {
      * 关闭时销毁 Modal 里的子元素
      */
     destroyOnClose?: boolean;
+    /**
+     * 是否在摁下 Esc 键的时候关闭 Modal
+     * 默认 true
+     */
+    closeOnEsc?: boolean;
     /**
      * 抽屉的方向
      * 默认 right
@@ -38,7 +42,7 @@ export interface DrawerProps {
      * 指定 Drawer 挂载的节点，并在容器内展现，false 为挂载在当前位置
      * 默认 body
      */
-    getContainer?: HTMLElement | (() => HTMLElement) | false;
+    getContainer?: HTMLElement | (() => HTMLElement | undefined) | false;
 }
 declare const Drawer: Component<DrawerProps>;
 export default Drawer;