antd-solid 0.0.11 → 0.0.13

package/es/Input/index.js

@@ -0,0 +1,213 @@
+import { delegateEvents, createComponent, insert, effect, className, use, spread, mergeProps, template } from 'solid-js/web';
+import { isNil, omit } from 'lodash-es';
+import { useContext, splitProps, onMount, createMemo, Show } from 'solid-js';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import { setRef } from '../utils/solid.js';
+import Element from '../Element/index.js';
+import TextArea from './TextArea.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+import './index.scss.js';
+import useFocus from '../hooks/useFocus.js';
+import CompactContext from '../Compact/context.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class=mr-4px>`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class=ml-4px>`),
+  _tmpl$5 = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
+  _tmpl$6 = /*#__PURE__*/template(`<div><input>`);
+const statusClassDict = {
+  default: (disabled, foucs) => {
+    if (disabled) {
+      return 'border-[--ant-color-border]';
+    }
+    if (foucs) {
+      return 'border-[--ant-color-primary] [box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]';
+    }
+    return 'border-[--ant-color-border] hover:border-[--ant-color-primary]';
+  },
+  error: (disabled, foucs) => {
+    if (disabled) {
+      return 'border-[--ant-color-error]';
+    }
+    if (foucs) {
+      return 'border-[--ant-color-error] [box-shadow:0_0_0_2px_rgba(255,38,5,.06)]';
+    }
+    return 'border-[--ant-color-error] hover:border-[--ant-color-error-border-hover]';
+  },
+  warning: (disabled, foucs) => {
+    if (disabled) {
+      return 'border-[--ant-color-warning]';
+    }
+    if (foucs) {
+      return 'border-[--ant-color-warning] [box-shadow:0_0_0_2px_rgba(255,215,5,.1)]';
+    }
+    return 'border-[--ant-color-warning] hover:border-[--ant-color-warning-border-hover]';
+  }
+};
+function CommonInput(props) {
+  const size = useComponentSize(() => props.size);
+  const {
+    compact
+  } = useContext(CompactContext);
+  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onPressEnter', 'onKeyDown', 'size', 'autoFocus', 'status', 'actions', 'addonBefore', 'addonAfter', 'prefix', 'suffix', 'allowClear']);
+  let inputRef;
+  const foucs = useFocus(() => inputRef);
+  onMount(() => {
+    if (props.autoFocus) {
+      inputRef?.focus();
+    }
+  });
+  const isControlled = () => Object.keys(props).includes('value');
+  const [value, setValue] = createControllableValue(props, {
+    trigger: null
+  });
+  const showClearBtn = createMemo(() => !props.disabled && props.allowClear && value());
+  const addonBefore = createMemo(() => props.addonBefore);
+  const addonAfter = createMemo(() => props.addonAfter);
+  const prefix = createMemo(() => props.prefix);
+  const suffix = createMemo(() => props.suffix);
+  const actions = createMemo(() => props.actions);
+  return createComponent(Element, {
+    block: true,
+    get ["class"]() {
+      return cs(props.rootClass, 'flex', 'ant-input-group', compact && 'ant-compact-item p[.ant-compact>]:not-first:ml--1px', {
+        small: 'h-24px',
+        middle: 'h-32px',
+        large: 'h-40px'
+      }[size()]);
+    },
+    get style() {
+      return {
+        '--ant-input-padding': {
+          small: '0 7px',
+          middle: '4px 11px',
+          large: '7px 11px'
+        }[size()],
+        '--ant-input-font-size': {
+          small: 'var(--ant-font-size)',
+          middle: 'var(--ant-font-size)',
+          large: 'var(--ant-font-size-lg)'
+        }[size()],
+        '--ant-input-border-radius': {
+          small: 'var(--ant-border-radius-sm)',
+          middle: 'var(--ant-border-radius)',
+          large: 'var(--ant-border-radius-lg)'
+        }[size()],
+        ...props.rootStyle
+      };
+    },
+    get children() {
+      return [createComponent(Show, {
+        get when() {
+          return !isNil(addonBefore());
+        },
+        get children() {
+          var _el$ = _tmpl$();
+          insert(_el$, addonBefore);
+          effect(() => className(_el$, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0')));
+          return _el$;
+        }
+      }), (() => {
+        var _el$2 = _tmpl$6(),
+          _el$4 = _el$2.firstChild;
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(prefix());
+          },
+          get children() {
+            var _el$3 = _tmpl$2();
+            insert(_el$3, prefix);
+            return _el$3;
+          }
+        }), _el$4);
+        use(el => {
+          setRef(props, el);
+          inputRef = el;
+        }, _el$4);
+        spread(_el$4, mergeProps(inputProps, {
+          get ["class"]() {
+            return cs('w-full h-full [font-size:var(--ant-input-font-size)] [outline:none] placeholder-text-[var(--ant-color-text-placeholder)] bg-transparent', props.disabled && 'color-[var(--ant-color-text-disabled)] cursor-not-allowed', props.class);
+          },
+          get value() {
+            return value() ?? '';
+          },
+          "onInput": e => {
+            setValue(e.target.value);
+            try {
+              props.onChange?.(e);
+            } finally {
+              if (isControlled() && e.target.value !== props.value) {
+                e.target.value = props.value ?? '';
+              }
+            }
+          },
+          "onKeyDown": e => {
+            if (e.key === 'Enter') {
+              props.onPressEnter?.(e);
+            }
+            props.onKeyDown?.(e);
+          }
+        }), false, false);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return showClearBtn();
+          },
+          get children() {
+            var _el$5 = _tmpl$3();
+            _el$5.$$click = e => {
+              e.stopPropagation();
+              inputRef.value = '';
+              const inputEvent = new InputEvent('input', {
+                bubbles: true
+              });
+              inputRef.dispatchEvent(inputEvent);
+              inputRef?.focus();
+            };
+            return _el$5;
+          }
+        }), null);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(suffix());
+          },
+          get children() {
+            var _el$6 = _tmpl$4();
+            insert(_el$6, suffix);
+            return _el$6;
+          }
+        }), null);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return !isNil(actions());
+          },
+          get children() {
+            var _el$7 = _tmpl$5();
+            insert(_el$7, actions);
+            return _el$7;
+          }
+        }), null);
+        effect(() => className(_el$2, cs('ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict[props.status ?? 'default'](!!props.disabled, foucs()))));
+        return _el$2;
+      })(), createComponent(Show, {
+        get when() {
+          return !isNil(addonAfter());
+        },
+        get children() {
+          var _el$8 = _tmpl$();
+          insert(_el$8, addonAfter);
+          effect(() => className(_el$8, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0')));
+          return _el$8;
+        }
+      })];
+    }
+  });
+}
+const Input = props => {
+  return createComponent(CommonInput, mergeProps(() => omit(props, ['actions'])));
+};
+Input.TextArea = TextArea;
+delegateEvents(["click"]);
+
+export { CommonInput, Input as default, statusClassDict };

package/es/Input/index.scss.js

@@ -0,0 +1,6 @@
+import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ant-input-group > :first-child {\n  border-top-left-radius: var(--ant-input-border-radius);\n  border-bottom-left-radius: var(--ant-input-border-radius);\n}\n.ant-input-group > :last-child {\n  border-top-right-radius: var(--ant-input-border-radius);\n  border-bottom-right-radius: var(--ant-input-border-radius);\n}\n\n.ant-compact > :not(:first-child).ant-input-group.ant-compact-item > :first-child, .ant-compact > :not(:first-child) .ant-input-group.ant-compact-item > :first-child {\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n.ant-compact > :not(:last-child).ant-input-group.ant-compact-item > :last-child, .ant-compact > :not(:last-child) .ant-input-group.ant-compact-item > :last-child {\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: 0px;\n}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/InputNumber/index.d.ts

@@ -0,0 +1,30 @@
+import { type Component } from 'solid-js';
+import { type InputProps } from '../Input';
+export interface InputNumberProps extends Omit<InputProps, 'defaultValue' | 'value' | 'onChange' | 'inputAfter' | 'onKeyDown' | 'min' | 'max' | 'suffix'> {
+    defaultValue?: number | null | undefined;
+    value?: number | null | undefined;
+    /**
+     * 占位值，为空时显示的值
+     */
+    placeholderValue?: number | null | undefined;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    precision?: number;
+    /**
+     * 每次改变步数，可以为小数
+     * 默认 1
+     */
+    step?: number;
+    /**
+     * 指定输入框展示值的格式
+     */
+    formatter?: (value: number | string) => string;
+    /**
+     * 是否显示增减按钮
+     * 默认 true
+     */
+    controls?: boolean;
+}
+declare const InputNumber: Component<InputNumberProps>;
+export default InputNumber;

package/es/InputNumber/index.js

@@ -0,0 +1,122 @@
+import { delegateEvents, createComponent, mergeProps as mergeProps$1, memo, template } from 'solid-js/web';
+import { mergeProps, splitProps, createSignal, untrack, createMemo, createRenderEffect, on } from 'solid-js';
+import { isNumber, isNil, clamp, floor } from 'lodash-es';
+import NP from 'number-precision';
+import { CommonInput } from '../Input/index.js';
+import { dispatchEventHandlerUnion } from '../utils/solid.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex flex-col h-full w-[--ant-input-number-handle-width] [border-left:1px_solid_var(--ant-color-border)] bg-[--ant-color-bg-container]"><div class="text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500"><div class=i-ant-design:up-outlined></div></div><div class="[border-top:1px_solid_var(--ant-color-border)] text-12px flex justify-center items-center h-1/2 cursor-pointer opacity-70 hover:h-100% hover:text-[var(--ant-color-primary)] transition-color transition-height transition-duration-500"><div class=i-ant-design:down-outlined>`);
+const isEmptyValue = value => isNil(value) || value === '';
+const InputNumber = _props => {
+  const props = mergeProps({
+    min: -Infinity,
+    max: Infinity,
+    step: 1,
+    controls: true
+  }, _props);
+  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onBlur', 'formatter']);
+  // 为什么不使用 Object.hasOwn？
+  // solid 的 proxy 对象对于任何 key，都会返回 true
+  const isControlled = () => Object.keys(props).includes('value');
+  const clampValue = v => untrack(() => clamp(v, props.min, props.max));
+  const floorValue = v => untrack(() => typeof props.precision === 'number' ? floor(v, props.precision) : v);
+  const [value, setValue] = createSignal(untrack(() => props.defaultValue));
+  const displayValue = createMemo(() => props.formatter ? props.formatter(value() ?? '') : value());
+  createRenderEffect(on(() => props.value, () => {
+    if (isControlled()) {
+      setValue(props.value);
+    }
+  }));
+  const [focusing, setFocusing] = createSignal(false);
+  createRenderEffect(() => {
+    if (!isNumber(value()) && isNumber(props.placeholderValue) && !focusing()) {
+      setValue(props.placeholderValue);
+    }
+  });
+  // 上一个格式正确的值
+  let validValue = null;
+  const updateValidValue = v => {
+    let valueNum = null;
+    if (!isEmptyValue(v)) {
+      valueNum = Number(v);
+      if (Number.isNaN(valueNum) || valueNum !== floorValue(valueNum)) {
+        return false;
+      }
+    }
+    valueNum = isNumber(valueNum) ? clampValue(valueNum) : valueNum;
+    if (validValue === valueNum) return false;
+    validValue = valueNum;
+    return true;
+  };
+  updateValidValue(untrack(value));
+  const add = addon => {
+    let newValue;
+    if (isEmptyValue(value())) {
+      newValue = addon;
+    } else {
+      const num = Number(value());
+      newValue = NP.plus(Number.isNaN(num) ? validValue ?? 0 : num, addon);
+    }
+    const success = updateValidValue(newValue);
+    setValue(validValue);
+    if (success) props.onChange?.(validValue);
+  };
+  const up = () => {
+    add(props.step);
+  };
+  const down = () => {
+    add(-props.step);
+  };
+  return createComponent(CommonInput, mergeProps$1(inputProps, {
+    get rootStyle() {
+      return {
+        '--ant-input-number-handle-width': '22px',
+        ...props.rootStyle
+      };
+    },
+    get actions() {
+      return memo(() => !!props.controls)() ? (() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$2.$$click = up;
+        _el$3.$$click = down;
+        return _el$;
+      })() : undefined;
+    },
+    get value() {
+      return `${(focusing() ? value() : displayValue()) ?? ''}`;
+    },
+    onKeyDown: e => {
+      switch (e.key) {
+        case 'ArrowUp':
+          up();
+          e.preventDefault();
+          return;
+        case 'ArrowDown':
+          down();
+          e.preventDefault();
+      }
+    },
+    onChange: e => {
+      const newValue = e.target.value;
+      setValue(newValue);
+      const success = updateValidValue(newValue);
+      if (success) props.onChange?.(validValue);
+    },
+    onFocus: e => {
+      dispatchEventHandlerUnion(props.onFocus, e);
+      setFocusing(true);
+    },
+    onBlur: e => {
+      const success = updateValidValue(value());
+      setValue(validValue);
+      if (success) props.onChange?.(validValue);
+      dispatchEventHandlerUnion(props.onBlur, e);
+      setFocusing(false);
+    }
+  }));
+};
+delegateEvents(["click"]);
+
+export { InputNumber as default };

package/es/{InputNumber.test.js → InputNumber/index.test.js}

@@ -1,12 +1,13 @@
 import { createComponent } from 'solid-js/web';
 import { describe, it, vi, expect } from 'vitest';
 import { render, fireEvent } from '@solidjs/testing-library';
-import InputNumber from './InputNumber.js';
+import InputNumber from './index.js';
 import '@testing-library/jest-dom';
 
 describe('InputNumber component', () => {
   it('onChange', () => {
     const onChange = vi.fn();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     const {
       getByPlaceholderText
     } = render(() => createComponent(InputNumber, {

package/es/Menu/InternalMenu.d.ts

@@ -0,0 +1,22 @@
+import { type MenuProps } from '.';
+import { type StyleProps } from '../types';
+interface InternalMenuProps<T = any> extends Pick<MenuProps<T>, 'mode' | 'items' | 'selectable' | 'onClick' | 'onSelect' | 'onDeselect'>, StyleProps {
+    /**
+     * 当前选中的菜单项 key 数组
+     */
+    selectedKeys: T[];
+    /**
+     * 当前展开的 SubMenu 菜单项 key 数组
+     */
+    expandedKeys: T[];
+    /**
+     * SubMenu 展开/关闭的回调
+     */
+    onExpandedKeysChange: (expandedKeys: T[]) => void;
+    /**
+     * 父级 keys
+     */
+    parentKeys?: T[];
+}
+declare function InternalMenu<T = any>(props: InternalMenuProps<T>): import("solid-js").JSX.Element;
+export default InternalMenu;

package/es/Menu/InternalMenu.js

@@ -0,0 +1,196 @@
+import { delegateEvents, createComponent, insert, mergeProps, effect, className, style, template } from 'solid-js/web';
+import { For, createMemo, Show, Switch, Match } from 'solid-js';
+import { isEmpty } from 'lodash-es';
+import cs from 'classnames';
+import Popover from '../Popover/index.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import DelayShow from '../DelayShow/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="h-1px bg-[var(--ant-color-split)] my-[var(--ant-margin-xxs)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div>`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="i-ant-design:right-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:up-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`),
+  _tmpl$6 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`);
+function isMenuDividerType(value) {
+  return value.type === 'divider';
+}
+function InternalMenu(props) {
+  return createComponent(For, {
+    get each() {
+      return props.items;
+    },
+    children: item => {
+      if (isMenuDividerType(item)) return _tmpl$();
+      const keyPath = createMemo(() => [...(props.parentKeys ?? []), item.key]);
+      const expanded = createMemo(() => props.expandedKeys?.includes(item.key));
+      const hasChildren = createMemo(() => !isEmpty(item.children));
+      const getLabel = options => (() => {
+        var _el$2 = _tmpl$2(),
+          _el$3 = _el$2.firstChild;
+        _el$3.$$click = () => {
+          options?.onClick?.();
+          if (!hasChildren()) {
+            const info = {
+              key: item.key,
+              keyPath: keyPath()
+            };
+            item.onClick?.(info);
+            props.onClick?.(info);
+            if (props.selectable) {
+              props.onSelect?.({
+                ...info,
+                selectedKeys: [item.key]
+              });
+            }
+          }
+        };
+        insert(_el$3, () => unwrapStringOrJSXElement(item.label), null);
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return hasChildren();
+          },
+          get children() {
+            return options?.expandIcon;
+          }
+        }), null);
+        effect(_p$ => {
+          var _v$ = cs(item.disabled && 'cursor-not-allowed'),
+            _v$2 = cs('relative rounded-[var(--ant-border-radius-lg)] cursor-pointer flex items-center m-[--ant-menu-item-margin] min-h-[--ant-menu-item-height]', item.disabled ? 'text-[--ant-color-text-disabled]' : props.selectedKeys.includes(item.key) ? 'bg-[--ant-control-item-bg-active] text-[--ant-color-primary]' : 'text-[--ant-color-text] hover:bg-[var(--ant-color-bg-text-hover)]', !hasChildren() ? ['px-[--ant-padding-sm]', props.selectable && 'active:bg-[var(--ant-control-item-bg-active)]'] : 'pl-[var(--ant-padding)] pr-[calc(var(--ant-padding)+0.7em+var(--ant-margin-xs))]', item.disabled && 'pointer-events-none'),
+            _v$3 = props.mode === 'inline' ? `calc(${keyPath().length} * var(--ant-padding))` : undefined;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$3.style.setProperty("padding-left", _v$3) : _el$3.style.removeProperty("padding-left"));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$2;
+      })();
+      return createComponent(Show, {
+        get when() {
+          return hasChildren();
+        },
+        get fallback() {
+          return getLabel();
+        },
+        get children() {
+          return createComponent(Switch, {
+            get children() {
+              return [createComponent(Match, {
+                get when() {
+                  return props.mode === 'vertical';
+                },
+                get children() {
+                  return createComponent(Popover, {
+                    trigger: "hover",
+                    get open() {
+                      return expanded();
+                    },
+                    onOpenChange: value => {
+                      if (item.disabled) return;
+                      if (value) {
+                        props.onExpandedKeysChange(keyPath());
+                        return;
+                      }
+                      props.onExpandedKeysChange([]);
+                    },
+                    placement: "rightTop",
+                    arrow: false,
+                    content: () => (() => {
+                      var _el$6 = _tmpl$3();
+                      insert(_el$6, createComponent(InternalMenu, mergeProps(props, {
+                        get items() {
+                          return item.children;
+                        },
+                        get parentKeys() {
+                          return keyPath();
+                        },
+                        onClick: info => {
+                          props.onExpandedKeysChange([]);
+                          props.onClick?.(info);
+                        }
+                      })));
+                      effect(_p$ => {
+                        var _v$4 = props.class,
+                          _v$5 = props.style;
+                        _v$4 !== _p$.e && className(_el$6, _p$.e = _v$4);
+                        _p$.t = style(_el$6, _v$5, _p$.t);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined
+                      });
+                      return _el$6;
+                    })(),
+                    contentStyle: {
+                      padding: 0
+                    },
+                    get children() {
+                      return getLabel({
+                        expandIcon: _tmpl$4()
+                      });
+                    }
+                  });
+                }
+              }), createComponent(Match, {
+                get when() {
+                  return props.mode === 'inline';
+                },
+                get children() {
+                  var _el$4 = _tmpl$3();
+                  insert(_el$4, () => getLabel({
+                    onClick() {
+                      if (hasChildren()) {
+                        if (expanded()) {
+                          props.onExpandedKeysChange(props.expandedKeys.filter(k => k !== item.key));
+                        } else {
+                          props.onExpandedKeysChange([...props.expandedKeys, item.key]);
+                        }
+                      }
+                    },
+                    expandIcon: createComponent(Show, {
+                      get when() {
+                        return expanded();
+                      },
+                      get fallback() {
+                        return _tmpl$6();
+                      },
+                      get children() {
+                        return _tmpl$5();
+                      }
+                    })
+                  }), null);
+                  insert(_el$4, createComponent(DelayShow, {
+                    get when() {
+                      return expanded();
+                    },
+                    get children() {
+                      var _el$5 = _tmpl$3();
+                      insert(_el$5, createComponent(InternalMenu, mergeProps(props, {
+                        get items() {
+                          return item.children;
+                        },
+                        get parentKeys() {
+                          return keyPath();
+                        }
+                      })));
+                      effect(() => (expanded() ? 'block' : 'none') != null ? _el$5.style.setProperty("display", expanded() ? 'block' : 'none') : _el$5.style.removeProperty("display"));
+                      return _el$5;
+                    }
+                  }), null);
+                  return _el$4;
+                }
+              })];
+            }
+          });
+        }
+      });
+    }
+  });
+}
+delegateEvents(["click"]);
+
+export { InternalMenu as default };

package/es/Menu/index.d.ts

@@ -0,0 +1,75 @@
+import { type StringOrJSXElement, type StyleProps } from '../types';
+export interface MenuItemType<T = any> {
+    key: T;
+    label: StringOrJSXElement;
+    disabled?: boolean;
+    children?: MenuItem[];
+    onClick?: (info: {
+        key: T;
+        keyPath: T[];
+    }) => void;
+}
+export interface MenuDividerType {
+    type: 'divider';
+}
+export type MenuItem<T = any> = MenuItemType<T> | MenuDividerType;
+export interface MenuProps<T = any> extends StyleProps {
+    /**
+     * 菜单类型
+     * 默认 'vertical' | 'inline'
+     */
+    mode?: 'vertical' | 'inline';
+    /**
+     * 菜单项
+     */
+    items?: Array<MenuItem<T>>;
+    /**
+     * 点击 MenuItem 调用此函数
+     */
+    onClick?: (info: {
+        key: T;
+        keyPath: T[];
+    }) => void;
+    /**
+     * 初始展开的 SubMenu 菜单项 key 数组
+     */
+    defaultExpandedKeys?: T[];
+    /**
+     * 当前展开的 SubMenu 菜单项 key 数组
+     */
+    expandedKeys?: T[];
+    /**
+     * SubMenu 展开/关闭的回调
+     */
+    onExpandedKeysChange?: (expandedKeys: T[]) => void;
+    /**
+     * 是否允许选中
+     */
+    selectable?: boolean;
+    /**
+     * 初始选中的菜单项 key 数组
+     */
+    defaultSelectedKeys?: T[];
+    /**
+     * 当前选中的菜单项 key 数组
+     */
+    selectedKeys?: T[];
+    /**
+     * 被选中时调用
+     */
+    onSelect?: (info: {
+        key: T;
+        keyPath: T[];
+        selectedKeys: T[];
+    }) => void;
+    /**
+     * 取消选中时调用，仅在 multiple 生效
+     */
+    onDeselect?: (info: {
+        key: T;
+        keyPath: T[];
+        selectedKeys: T[];
+    }) => void;
+}
+declare function Menu<T = any>(_props: MenuProps<T>): import("solid-js").JSX.Element;
+export default Menu;