antd-solid 0.0.7 → 0.0.9

package/es/Empty/PRESENTED_IMAGE_SIMPLE.js

@@ -0,0 +1,14 @@
+import { insert, createComponent, template } from 'solid-js/web';
+import EmptySvg from './assets/SimpleEmptySvg.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-my-[var(--ant-margin-xl)] ant-mx-[var(--ant-margin-xs)]"><div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center"></div><div class="ant-text-[var(--ant-color-text-disabled)] ant-text-center">暂无数据`);
+const PRESENTED_IMAGE_SIMPLE = () => {
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    insert(_el$2, createComponent(EmptySvg, {}));
+    return _el$;
+  })();
+};
+
+export { PRESENTED_IMAGE_SIMPLE as default };

package/es/Empty/assets/EmptySvg.d.ts

@@ -0,0 +1,2 @@
+declare const EmptySvg: () => import("solid-js").JSX.Element;
+export default EmptySvg;

package/es/Empty/assets/EmptySvg.js

@@ -0,0 +1,6 @@
+import { template } from 'solid-js/web';
+
+const _tmpl$ = /*#__PURE__*/template(`<svg width="184" height="100" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(24 31.67)"><ellipse fill-opacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse><path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z" fill="#AEB8C2"></path><path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z" fill="url(#linearGradient-1)" transform="translate(13.56)"></path><path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path><path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z" fill="#DCE0E6"></path></g><path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z" fill="#DCE0E6"></path><g transform="translate(149.65 15.383)" fill="#FFF"><ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse><path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z">`);
+const EmptySvg = () => _tmpl$();
+
+export { EmptySvg as default };

package/es/Empty/assets/SimpleEmptySvg.d.ts

@@ -0,0 +1,2 @@
+declare const EmptySvg: () => import("solid-js").JSX.Element;
+export default EmptySvg;

package/es/Empty/assets/SimpleEmptySvg.js

@@ -0,0 +1,6 @@
+import { template } from 'solid-js/web';
+
+const _tmpl$ = /*#__PURE__*/template(`<svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse><g fill-rule="nonzero" stroke="#d9d9d9"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#fafafa">`);
+const EmptySvg = () => _tmpl$();
+
+export { EmptySvg as default };

package/es/Empty/index.d.ts

@@ -0,0 +1,5 @@
+import { type Component } from 'solid-js';
+declare const Empty: Component & {
+    PRESENTED_IMAGE_SIMPLE: Component;
+};
+export default Empty;

package/es/Empty/index.js

@@ -0,0 +1,16 @@
+import { insert, createComponent, template } from 'solid-js/web';
+import PRESENTED_IMAGE_SIMPLE from './PRESENTED_IMAGE_SIMPLE.js';
+import EmptySvg from './assets/EmptySvg.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div><div class="ant-mb-[var(--ant-margin-xs)] ant-flex ant-justify-center"></div><div class="ant-text-[var(--ant-color-text)] ant-text-center">暂无数据`);
+const Empty = () => {
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    insert(_el$2, createComponent(EmptySvg, {}));
+    return _el$;
+  })();
+};
+Empty.PRESENTED_IMAGE_SIMPLE = PRESENTED_IMAGE_SIMPLE;
+
+export { Empty as default };

package/es/Image.d.ts

@@ -0,0 +1,9 @@
+import { type JSXElement } from 'solid-js';
+declare const _Image: import("solid-js").Component<Omit<import("antd").ImageProps, "className"> & {
+    class?: string | undefined;
+}>;
+type ImageProps = Omit<Parameters<typeof _Image>[0], 'placeholder'> & {
+    placeholder?: JSXElement;
+};
+declare function Image(_props: ImageProps): import("solid-js").JSX.Element;
+export default Image;

package/es/Image.js

@@ -0,0 +1,22 @@
+import { createComponent, mergeProps, template } from 'solid-js/web';
+import { Image as Image$1 } from 'antd';
+import { replaceClassName, reactToSolidComponent, configProvider } from './utils/component.js';
+import { solidToReact } from './utils/solid.js';
+import { createMemo } from 'solid-js';
+import { mapValues } from 'lodash-es';
+
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-inline-flex">`);
+const _Image = replaceClassName(reactToSolidComponent(configProvider(Image$1), () => _tmpl$()));
+function Image(_props) {
+  const props = createMemo(() => mapValues(_props, (value, key) => {
+    switch (key) {
+      case 'placeholder':
+        return solidToReact(value);
+      default:
+        return value;
+    }
+  }));
+  return createComponent(_Image, mergeProps(props));
+}
+
+export { Image as default };

package/es/Input.d.ts

@@ -0,0 +1,29 @@
+import type { JSX, JSXElement, Component } from 'solid-js';
+type CommonInputProps<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> = JSX.CustomAttributes<T> & {
+    textarea?: boolean;
+    defaultValue?: string | undefined;
+    value?: string | undefined;
+    addonBefore?: JSXElement;
+    addonAfter?: JSXElement;
+    prefix?: JSXElement;
+    suffix?: JSXElement;
+    placeholder?: string;
+    /**
+     * 仅供 InputNumber 使用
+     */
+    actions?: JSXElement;
+    /**
+     * 设置校验状态
+     */
+    status?: 'error' | 'warning';
+    onChange?: JSX.InputEventHandler<T, InputEvent>;
+    onPressEnter?: JSX.EventHandler<T, KeyboardEvent>;
+    onKeyDown?: JSX.EventHandler<T, KeyboardEvent>;
+};
+export declare function CommonInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(props: CommonInputProps<T> & Omit<JSX.InputHTMLAttributes<T>, 'onChange' | 'onInput' | 'onKeyDown'>): JSX.Element;
+export type InputProps = Omit<CommonInputProps, 'actions' | 'textarea'> & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput' | 'onKeyDown'>;
+export type TextAreaProps = Omit<CommonInputProps<HTMLTextAreaElement>, 'prefix' | 'suffix' | 'textarea'> & Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'actions' | 'onChange' | 'onInput' | 'onKeyDown'>;
+declare const Input: Component<InputProps> & {
+    TextArea: Component<TextAreaProps>;
+};
+export default Input;

package/es/Input.js

@@ -0,0 +1,144 @@
+import { createComponent, Dynamic, mergeProps, insert, effect, className, style, template } from 'solid-js/web';
+import { isNil, omit } from 'lodash-es';
+import { splitProps, createMemo, Show } from 'solid-js';
+import cs from 'classnames';
+import createControllableValue from './hooks/createControllableValue.js';
+import Compact from './Compact.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-mr-4px">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="ant-ml-4px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="ant-[display:var(--input-after-display)] ant-absolute ant-top-0 ant-bottom-0 ant-right-0 ant-h-[calc(100%-2px)] ant-translate-y-1px -ant-translate-x-1px">`);
+const statusClassDict = {
+  default: disabled => cs('ant-[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:ant-border-[var(--primary-color)] focus-within:ant-border-[var(--primary-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]'),
+  error: disabled => cs('ant-[border:1px_solid_var(--ant-color-error)]', !disabled && 'hover:ant-border-[var(--light-error-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
+  warning: disabled => cs('ant-[border:1px_solid_var(--warning-color)]', !disabled && 'hover:ant-border-[var(--color-warning-border-hover)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
+};
+function CommonInput(props) {
+  const [{
+    style: style$1,
+    onChange,
+    onPressEnter,
+    onKeyDown
+  }, inputProps] = splitProps(props, ['defaultValue', 'value', 'class', 'addonBefore', 'addonAfter', 'suffix', 'onChange', 'onPressEnter', 'onKeyDown', 'actions', 'style']);
+  const [_, controllableProps] = splitProps(props, ['onChange']);
+  const [value, setValue] = createControllableValue(controllableProps);
+  const inputWrapClass = createMemo(() => cs('ant-px-11px ant-py-4px ant-rounded-6px', !props.textarea && 'ant-h-32px', props.addonBefore ? 'ant-rounded-l-0' : Compact.compactItemRoundedLeftClass, props.addonAfter ? 'ant-rounded-r-0' : Compact.compactItemRoundedRightClass, statusClassDict[props.status ?? 'default'](!!inputProps.disabled), Compact.compactItemRounded0Class, Compact.compactItemZIndexClass));
+  const hasPrefixOrSuffix = createMemo(() => !isNil(props.prefix) || !isNil(props.suffix) || !isNil(props.actions));
+  const inputJSX = createComponent(Dynamic, mergeProps({
+    get component() {
+      return props.textarea ? 'textarea' : 'input';
+    }
+  }, inputProps, {
+    get ["class"]() {
+      return cs('ant-w-full ant-[outline:none] ant-text-14px', !hasPrefixOrSuffix() && inputWrapClass(), inputProps.disabled && 'ant-bg-[var(--ant-color-bg-container-disabled)] ant-cursor-not-allowed');
+    },
+    get value() {
+      return value() ?? '';
+    },
+    onInput: e => {
+      setValue(e.target.value);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      onChange?.(e);
+      if (Object.keys(props).includes('value')) {
+        e.target.value = value();
+      }
+    },
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        onPressEnter?.(e);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      onKeyDown?.(e);
+    }
+  }));
+  return (() => {
+    const _el$ = _tmpl$();
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.addonBefore;
+      },
+      get children() {
+        const _el$2 = _tmpl$();
+        insert(_el$2, () => props.addonBefore);
+        effect(() => className(_el$2, cs('ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-r-0 ant-rounded-l-6px ant-text-14px', Compact.compactItemRounded0Class, Compact.compactItemRoundedLeftClass)));
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return hasPrefixOrSuffix();
+      },
+      fallback: inputJSX,
+      get children() {
+        const _el$3 = _tmpl$();
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return props.prefix;
+          },
+          get children() {
+            const _el$4 = _tmpl$2();
+            insert(_el$4, () => props.prefix);
+            return _el$4;
+          }
+        }), null);
+        insert(_el$3, inputJSX, null);
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return props.suffix;
+          },
+          get children() {
+            const _el$5 = _tmpl$3();
+            insert(_el$5, () => props.suffix);
+            return _el$5;
+          }
+        }), null);
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return props.actions;
+          },
+          get children() {
+            const _el$6 = _tmpl$4();
+            insert(_el$6, () => props.actions);
+            return _el$6;
+          }
+        }), null);
+        effect(() => className(_el$3, cs('ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--primary-color)]', inputWrapClass())));
+        return _el$3;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.addonAfter;
+      },
+      get children() {
+        const _el$7 = _tmpl$();
+        insert(_el$7, () => props.addonAfter);
+        effect(() => className(_el$7, cs('ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-l-0 ant-rounded-r-6px ant-text-14px', Compact.compactItemRounded0Class, Compact.compactItemRoundedRightClass)));
+        return _el$7;
+      }
+    }), null);
+    effect(_p$ => {
+      const _v$ = cs('ant-flex ant-w-full', Compact.compactItemClass),
+        _v$2 = style$1;
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
+  })();
+}
+const Input = props => {
+  return createComponent(CommonInput, mergeProps(() => omit(props, ['actions'])));
+};
+Input.TextArea = props => {
+  return createComponent(CommonInput, mergeProps({
+    textarea: true
+  }, () => omit(props, ['prefix', 'suffix', 'actions'])));
+};
+
+export { CommonInput, Input as default };

package/es/InputNumber.d.ts

@@ -0,0 +1,11 @@
+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;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+}
+declare const InputNumber: Component<InputNumberProps>;
+export default InputNumber;

package/es/InputNumber.js

@@ -0,0 +1,92 @@
+import { delegateEvents, createComponent, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { mergeProps, splitProps, createSignal, untrack, createEffect, on } from 'solid-js';
+import { CommonInput } from './Input.js';
+import { isNil, clamp } from 'lodash-es';
+import { dispatchEventHandlerUnion } from './utils/solid.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]"><div class="ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:up-outlined"></div></div><div class="ant-[border-top:1px_solid_var(--ant-color-border)] ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-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
+  }, _props);
+  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onBlur']);
+  const clampValue = v => untrack(() => clamp(v, props.min, props.max));
+  let prev = null;
+  const updatePrev = v => {
+    if (prev === v) return;
+    prev = v;
+    props.onChange?.(prev);
+  };
+  const [value, setValue] = createSignal(untrack(() => props.value ?? props.defaultValue));
+  createEffect(on(() => props.value, () => {
+    setValue(props.value);
+  }, {
+    defer: true
+  }));
+  const add = addon => {
+    let newValue;
+    if (isEmptyValue(value())) {
+      newValue = clampValue(addon);
+    } else {
+      const num = Number(value());
+      newValue = Number.isNaN(num) ? null : clampValue(num + addon);
+    }
+    if (!Object.keys(props).includes('value')) {
+      setValue(newValue);
+    }
+    updatePrev(newValue);
+  };
+  const up = () => {
+    add(1);
+  };
+  const down = () => {
+    add(-1);
+  };
+  return createComponent(CommonInput, mergeProps$1(inputProps, {
+    get actions() {
+      return (() => {
+        const _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$2.$$click = up;
+        _el$3.$$click = down;
+        return _el$;
+      })();
+    },
+    get value() {
+      return `${value() ?? ''}`;
+    },
+    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);
+      let newValueNum = Number(newValue);
+      if (Number.isNaN(newValueNum)) return;
+      if (isEmptyValue(newValue)) {
+        newValueNum = null;
+      } else {
+        newValueNum = clampValue(newValueNum);
+      }
+      updatePrev(newValueNum);
+    },
+    onBlur: e => {
+      setValue(props.value ?? prev);
+      dispatchEventHandlerUnion(props.onBlur, e);
+    }
+  }));
+};
+delegateEvents(["click"]);
+
+export { InputNumber as default };

package/es/InputNumber.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/es/InputNumber.test.js

@@ -0,0 +1,42 @@
+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 '@testing-library/jest-dom';
+
+describe('InputNumber component', () => {
+  it('onChange', () => {
+    const onChange = vi.fn();
+    const {
+      getByPlaceholderText
+    } = render(() => createComponent(InputNumber, {
+      placeholder: "input-number",
+      onChange: onChange
+    }));
+    const input = getByPlaceholderText('input-number');
+    input.value = '123';
+    fireEvent.input(input);
+    expect(onChange).toHaveBeenLastCalledWith(123);
+    input.value = '1234';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(2);
+    expect(onChange).toHaveBeenLastCalledWith(1234);
+    input.value = '1234';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(2);
+    input.value = '1234.';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(2);
+    input.value = '1234.0';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(2);
+    input.value = '1234.01';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(3);
+    input.value = '123x';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(3);
+    fireEvent.blur(input);
+    expect(onChange).toBeCalledTimes(3);
+  });
+});

package/es/Modal.d.ts

@@ -0,0 +1,47 @@
+import { type JSXElement, type Ref } from 'solid-js';
+export interface ModalInstance {
+    open: () => void;
+    close: () => void;
+}
+export interface ModalProps {
+    ref?: Ref<ModalInstance>;
+    title?: JSXElement;
+    defaultOpen?: boolean;
+    width?: string;
+    height?: string;
+    children?: JSXElement;
+    /**
+     * 垂直居中展示 Modal
+     */
+    centered?: boolean;
+    /**
+     * 点击蒙层是否允许关闭
+     * 默认 true
+     */
+    maskClosable?: boolean;
+    /**
+     * 设置为 false 时隐藏关闭按钮
+     */
+    closeIcon?: boolean;
+    footer?: boolean | ((modal: ModalInstance) => JSXElement);
+    /**
+     * 关闭时销毁 Modal 里的子元素
+     */
+    destroyOnClose?: boolean;
+    /**
+     * 返回 true，会自动关闭 modal
+     */
+    onOk?: () => boolean | Promise<boolean>;
+    afterClose?: () => void;
+    /**
+     * 自定义渲染对话框
+     */
+    modalRender?: () => JSXElement;
+}
+export interface MethodProps extends Pick<ModalProps, 'title' | 'children' | 'onOk' | 'afterClose'> {
+}
+declare function Modal(_props: ModalProps): import("solid-js").JSX.Element;
+declare namespace Modal {
+    var warning: (props: MethodProps) => void;
+}
+export default Modal;

package/es/Modal.js

@@ -0,0 +1,195 @@
+import { delegateEvents, createComponent, Portal, insert, memo, effect, className, render, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { mergeProps, createSignal, untrack, Show } from 'solid-js';
+import Button from './Button.js';
+import cs from 'classnames';
+
+const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-flex ant-gap-8px ant-justify-end">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="ant-mt-12px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div><div class="ant-text-[rgba(0,0,0,.88)] ant-text-16px ant-font-600 ant-mb-8px"></div><div class="ant-grow">`),
+  _tmpl$5 = /*#__PURE__*/template(`<div>`),
+  _tmpl$6 = /*#__PURE__*/template(`<span class="i-ant-design:exclamation-circle ant-text-22px ant-mr-12px ant-text-[var(--warning-color)]">`),
+  _tmpl$7 = /*#__PURE__*/template(`<div class="ant-ml-34px">`);
+function Modal(_props) {
+  const props = mergeProps({
+    footer: true
+  }, _props);
+  const [open, setOpen] = createSignal(props.defaultOpen ?? false);
+  const [hide, setHide] = createSignal(false);
+  const instance = {
+    open() {
+      setOpen(true);
+      setHide(false);
+    },
+    close() {
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false);
+        } else {
+          setHide(true);
+        }
+      });
+    }
+  };
+  untrack(() => {
+    if (typeof props.ref === 'function') {
+      props.ref?.(instance);
+    }
+  });
+  const close = () => {
+    instance.close();
+    props.afterClose?.();
+  };
+  const [confirmLoading, setConfirmLoading] = createSignal(false);
+  return createComponent(Show, {
+    get when() {
+      return open();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          const _el$ = _tmpl$5();
+          _el$.$$click = () => {
+            if (props.maskClosable ?? true) {
+              close();
+            }
+          };
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return typeof props.modalRender !== 'function';
+            },
+            get fallback() {
+              return props.modalRender();
+            },
+            get children() {
+              const _el$2 = _tmpl$4(),
+                _el$4 = _el$2.firstChild,
+                _el$5 = _el$4.nextSibling;
+              _el$2.$$click = e => {
+                e.stopPropagation();
+              };
+              insert(_el$2, createComponent(Show, {
+                get when() {
+                  return props.closeIcon !== false;
+                },
+                get children() {
+                  return createComponent(Button, {
+                    type: "text",
+                    get ["class"]() {
+                      return cs('ant-rm-size-btn !ant-w-22px !ant-h-22px !ant-flex !ant-justify-center !ant-items-center ant-text-center ant-text-18px !ant-absolute !ant-top-16px !ant-right-16px ant-z-1000 ant-text-[rgba(0,0,0,.45)] hover:!ant-text-[rgba(0,0,0,.88)]');
+                    },
+                    onClick: close,
+                    get children() {
+                      return _tmpl$();
+                    }
+                  });
+                }
+              }), _el$4);
+              insert(_el$4, () => props.title);
+              insert(_el$5, () => props.children);
+              insert(_el$2, createComponent(Show, {
+                get when() {
+                  return props.footer !== false;
+                },
+                get children() {
+                  const _el$6 = _tmpl$3();
+                  insert(_el$6, createComponent(Show, {
+                    get when() {
+                      return typeof props.footer !== 'function';
+                    },
+                    get fallback() {
+                      return memo(() => typeof props.footer === 'function')() && props.footer(instance);
+                    },
+                    get children() {
+                      const _el$7 = _tmpl$2();
+                      insert(_el$7, createComponent(Button, {
+                        onClick: close,
+                        children: "\u53D6\u6D88"
+                      }), null);
+                      insert(_el$7, createComponent(Button, {
+                        type: "primary",
+                        get loading() {
+                          return confirmLoading();
+                        },
+                        onClick: async () => {
+                          if (!props.onOk) return;
+                          let res = props.onOk?.();
+                          if (res instanceof Promise) {
+                            setConfirmLoading(true);
+                            res = await res.finally(() => setConfirmLoading(false));
+                          }
+                          if (res) {
+                            instance.close();
+                          }
+                        },
+                        children: "\u786E\u5B9A"
+                      }), null);
+                      return _el$7;
+                    }
+                  }));
+                  return _el$6;
+                }
+              }), null);
+              effect(_p$ => {
+                const _v$ = cs('ant-absolute ant-px-24px ant-py-20px ant-rounded-8px ant-overflow-hidden ant-bg-white ant-flex ant-flex-col',
+                  // '!ant-[animation-duration:.5s]',
+                  !props.centered && 'ant-top-100px'),
+                  _v$2 = props.width ?? '520px',
+                  _v$3 = props.height;
+                _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+                _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
+                _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
+                return _p$;
+              }, {
+                _v$: undefined,
+                _v$2: undefined,
+                _v$3: undefined
+              });
+              return _el$2;
+            }
+          }));
+          effect(_p$ => {
+            const _v$4 = cs('ant-fixed ant-justify-center ant-inset-0 ant-bg-[rgba(0,0,0,.45)] ant-flex ant-z-1000', props.centered && 'ant-items-center'),
+              _v$5 = hide() ? 'none' : undefined;
+            _v$4 !== _p$._v$4 && className(_el$, _p$._v$4 = _v$4);
+            _v$5 !== _p$._v$5 && ((_p$._v$5 = _v$5) != null ? _el$.style.setProperty("display", _v$5) : _el$.style.removeProperty("display"));
+            return _p$;
+          }, {
+            _v$4: undefined,
+            _v$5: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+}
+Modal.warning = props => {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const dispose = render(() => createComponent(Modal, mergeProps$1({
+    width: "416px",
+    maskClosable: false,
+    closeIcon: false
+  }, props, {
+    get title() {
+      return [_tmpl$6(), memo(() => props.title)];
+    },
+    get children() {
+      return (() => {
+        const _el$9 = _tmpl$7();
+        insert(_el$9, () => props.children);
+        return _el$9;
+      })();
+    },
+    defaultOpen: true,
+    afterClose: () => {
+      document.body.removeChild(div);
+      dispose();
+      props.afterClose?.();
+    }
+  })), div);
+};
+delegateEvents(["click"]);
+
+export { Modal as default };