antd-solid 0.0.12 → 0.0.13

package/es/ColorPicker/ColorPickerSelect.js

@@ -0,0 +1,71 @@
+import { delegateEvents, effect, template, use } from 'solid-js/web';
+import { useContext, createMemo } from 'solid-js';
+import { clamp } from 'lodash-es';
+import ColorPickerContext from './context.js';
+import Color from './color.js';
+import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="h-160px rounded-[--ant-border-radius-sm] cursor-pointer relative overflow-hidden"><div class="absolute border-2px border-solid border-[--ant-color-bg-container] rounded-1/2 w-16px h-16px -translate-1/2">`);
+const ColorPickerSelect = () => {
+  let ref;
+  const context = useContext(ColorPickerContext);
+  const color = createMemo(() => context?.color() ?? new Color());
+  const setColor = (e, completed) => {
+    if (!ref) return;
+    const rect = ref.getBoundingClientRect();
+    const offsetX = e.clientX - rect.x;
+    const offsetY = e.clientY - rect.y;
+    const {
+      clientWidth,
+      clientHeight
+    } = ref;
+    const hsv = color().toHsv();
+    hsv.s = clamp(offsetX / clientWidth, 0, 1);
+    hsv.v = clamp(1 - offsetY / clientHeight, 0, 1);
+    context?.setColor(new Color(hsv), completed);
+  };
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _el$.$$click = e => {
+      setColor(e, true);
+    };
+    var _ref$ = ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : ref = _el$;
+    _el$.style.setProperty("background-image", "linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))");
+    _el$2.$$mousedown = () => {
+      let isDrag = false;
+      setupGlobalDrag(
+      // eslint-disable-next-line solid/reactivity
+      e => {
+        setColor(e);
+        isDrag = true;
+      },
+      // eslint-disable-next-line solid/reactivity
+      () => {
+        if (isDrag) context?.setColor(color(), true);
+      });
+    };
+    _el$2.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary), 0 0 0 1px var(--ant-color-fill-secondary)");
+    effect(_p$ => {
+      var _v$ = color().toHueRgbString(),
+        _v$2 = `${color().toHsv().s * 100}%`,
+        _v$3 = `${(1 - color().toHsv().v) * 100}%`,
+        _v$4 = color().toRgbString();
+      _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("background-color", _v$) : _el$.style.removeProperty("background-color"));
+      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("left", _v$2) : _el$2.style.removeProperty("left"));
+      _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("top", _v$3) : _el$2.style.removeProperty("top"));
+      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("background", _v$4) : _el$2.style.removeProperty("background"));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click", "mousedown"]);
+
+export { ColorPickerSelect as default };

package/es/ColorPicker/ColorPickerSlider.d.ts

@@ -0,0 +1,3 @@
+import { type Component } from 'solid-js';
+declare const ColorPickerSlider: Component;
+export default ColorPickerSlider;

package/es/ColorPicker/ColorPickerSlider.js

@@ -0,0 +1,115 @@
+import { delegateEvents, insert, createComponent, memo, effect, className, template } from 'solid-js/web';
+import { useContext, createMemo, Show } from 'solid-js';
+import cs from 'classnames';
+import ColorPickerContext from './context.js';
+import Slider from '../Slider/index.js';
+import Color from './color.js';
+import ColorPickUpSvg from '../assets/svg/ColorPickUp.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex gap-[--ant-margin-sm] items-center"><div class="flex flex-col gap-[--ant-margin-sm] w-full"></div><div class="shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]"><div class="w-full h-full rounded-inherit">`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="shrink-0 text-18px cursor-pointer">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div tabindex=0>`);
+const ColorPickerSlider = () => {
+  const context = useContext(ColorPickerContext);
+  const color = createMemo(() => context?.color() ?? new Color());
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.firstChild;
+    insert(_el$2, createComponent(Slider, {
+      get value() {
+        return color().toHsv().h / 3.55;
+      },
+      onChange: v => {
+        const hsv = color().toHsv();
+        hsv.h = Math.round(v * 3.55);
+        context?.setColor(new Color(hsv));
+      },
+      onChangeComplete: () => {
+        context?.setColor(color(), true);
+      },
+      tooltip: false,
+      handle: () => getSliderHandle(color().toHueRgbString()),
+      style: {
+        '--ant-slider-rail-size': '8px',
+        '--ant-slider-handle-size': '10px',
+        '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
+        '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+        '--ant-slider-track-bg': 'transparent',
+        '--ant-slider-track-hover-bg': 'transparent'
+      },
+      railBgStyle: {
+        'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+      }
+    }), null);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return !context?.disabledAlpha();
+      },
+      get children() {
+        return createComponent(Slider, {
+          get value() {
+            return color().a * 100;
+          },
+          onChange: v => {
+            context?.setColor(color().clone().setAlpha(v / 100));
+          },
+          onChangeComplete: () => {
+            context?.setColor(color(), true);
+          },
+          min: 0,
+          step: 1,
+          tooltip: false,
+          handle: () => getSliderHandle(color().toRgbString()),
+          get style() {
+            return {
+              '--ant-slider-rail-size': '8px',
+              '--ant-slider-handle-size': '10px',
+              '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
+              '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+              '--ant-slider-track-bg': 'transparent',
+              '--ant-slider-track-hover-bg': 'transparent',
+              'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
+              'background-size': '8px 8px'
+            };
+          },
+          railBgStyle: {
+            'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+          }
+        });
+      }
+    }), null);
+    _el$3.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
+    _el$3.style.setProperty("background-size", "50% 50%");
+    _el$3.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!window.EyeDropper);
+      return () => _c$() && (() => {
+        var _el$5 = _tmpl$2();
+        _el$5.$$click = () => {
+          if (!window.EyeDropper) return;
+          const eyeDropper = new window.EyeDropper();
+          eyeDropper.open().then(result => {
+            context?.setColor(new Color(result.sRGBHex), true);
+          }).catch(console.error);
+        };
+        insert(_el$5, createComponent(ColorPickUpSvg, {}));
+        return _el$5;
+      })();
+    })(), null);
+    effect(() => color().toRgbString() != null ? _el$4.style.setProperty("background-color", color().toRgbString()) : _el$4.style.removeProperty("background-color"));
+    return _el$;
+  })();
+};
+const getSliderHandle = bgColor => {
+  return (() => {
+    var _el$6 = _tmpl$3();
+    bgColor != null ? _el$6.style.setProperty("background", bgColor) : _el$6.style.removeProperty("background");
+    effect(() => className(_el$6, cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]')));
+    return _el$6;
+  })();
+};
+delegateEvents(["click"]);
+
+export { ColorPickerSlider as default };

package/es/ColorPicker/color.d.ts

@@ -0,0 +1,24 @@
+import { TinyColor, type TinyColorOptions, type RGB, type RGBA, type HSL, type HSLA, type HSV, type HSVA, type CMYK, type Numberify } from '@ctrl/tinycolor';
+export type ColorInput = string | number | null | undefined | RGB | RGBA | HSL | HSLA | HSV | HSVA | CMYK | Color;
+/**
+ * 扩展 TinyColor
+ * 用于在 HSV 格式下，当 s 或者 v 为 0 时，正常保存 h 值
+ */
+declare class Color extends TinyColor {
+    /** Hue */
+    private readonly h;
+    /** Saturation */
+    private readonly s;
+    /** Value */
+    private readonly v;
+    constructor(color?: ColorInput, opts?: Partial<TinyColorOptions>);
+    toHsv(): Numberify<HSVA>;
+    toHsvString(): string;
+    /**
+     * 获取色相对应的颜色 rgb 字符串
+     * @returns string
+     */
+    toHueRgbString(): string;
+    clone(): Color;
+}
+export default Color;

package/es/ColorPicker/color.js

@@ -0,0 +1,63 @@
+import { TinyColor, stringInputToObject, isValidCSSUnit } from '@ctrl/tinycolor';
+import { isNil } from 'lodash-es';
+
+/**
+ * 扩展 TinyColor
+ * 用于在 HSV 格式下，当 s 或者 v 为 0 时，正常保存 h 值
+ */
+class Color extends TinyColor {
+  /** Hue */
+  h = 0;
+  /** Saturation */
+  s = 0;
+  /** Value */
+  v = 0;
+  constructor(color, opts) {
+    color = isNil(color) ? undefined : color;
+    color = color instanceof Color ? color.toHsv() : color;
+    super(color, opts);
+    if (typeof color === 'string') {
+      color = stringInputToObject(color);
+    }
+    if (typeof color === 'object') {
+      if (isHsv(color)) {
+        this.h = Number(color.h);
+        this.s = Number(color.s);
+        this.v = Number(color.v);
+        this.a = isHsva(color) ? color.a : 1;
+      }
+    }
+  }
+  toHsv() {
+    const hsv = super.toHsv();
+    if (this.equals(new TinyColor('black'))) {
+      hsv.h = this.h;
+      hsv.s = this.s;
+      hsv.v = this.v;
+    }
+    return hsv;
+  }
+  toHsvString() {
+    const hsv = this.toHsv();
+    return `hsva(${hsv.h}, ${hsv.s}, ${hsv.v}, ${hsv.a})`;
+  }
+  /**
+   * 获取色相对应的颜色 rgb 字符串
+   * @returns string
+   */
+  toHueRgbString() {
+    const hsv = this.toHsv();
+    return new Color(`hsv(${hsv.h}, 1, 1)`).toRgbString();
+  }
+  clone() {
+    return new Color(this);
+  }
+}
+function isHsv(color) {
+  return !isNil(color) && typeof color === 'object' && isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v);
+}
+function isHsva(color) {
+  return isHsv(color) && isValidCSSUnit(color.a);
+}
+
+export { Color as default };

package/es/ColorPicker/context.d.ts

@@ -0,0 +1,9 @@
+import { type Accessor } from 'solid-js';
+import type Color from './color';
+interface ColorPickerContextProps {
+    color: Accessor<Color>;
+    setColor: (color: Color, completed?: boolean) => void;
+    disabledAlpha: Accessor<boolean>;
+}
+declare const ColorPickerContext: import("solid-js").Context<ColorPickerContextProps | undefined>;
+export default ColorPickerContext;

package/es/ColorPicker/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'solid-js';
+
+const ColorPickerContext = createContext();
+
+export { ColorPickerContext as default };

package/es/ColorPicker/index.d.ts

@@ -0,0 +1,31 @@
+import { type Component } from 'solid-js';
+import { type PopoverProps } from '../Popover';
+import { type ComponentSize } from '../types';
+export interface ColorPickerProps extends Pick<PopoverProps, 'placement'> {
+    defaultValue?: string | null;
+    value?: string | null;
+    /**
+     * @param value Hex 格式
+     * @returns
+     */
+    onChange?: (value: string | null) => void;
+    /**
+     * 颜色选择完成的回调，通过 onChangeComplete 对 value 受控时拖拽不会改变展示颜色
+     * @param value Hex 格式
+     * @returns
+     */
+    onChangeComplete?: (value: string | null) => void;
+    allowClear?: boolean;
+    disabled?: boolean;
+    /**
+     * 禁止透明度
+     */
+    disabledAlpha?: boolean;
+    /**
+     * 大小，提供 large middle 和 small 三种大小
+     * 默认 'middle'
+     */
+    size?: ComponentSize;
+}
+declare const ColorPicker: Component<ColorPickerProps>;
+export default ColorPicker;

package/es/ColorPicker/index.js

@@ -0,0 +1,139 @@
+import { delegateEvents, createComponent, insert, effect, className, template } from 'solid-js/web';
+import cs from 'classnames';
+import { createSignal, untrack, createRenderEffect, createMemo, Show } from 'solid-js';
+import Color from './color.js';
+import Element from '../Element/index.js';
+import Popover from '../Popover/index.js';
+import ColorPickerSelect from './ColorPickerSelect.js';
+import ColorPickerContext from './context.js';
+import ColorPickerSlider from './ColorPickerSlider.js';
+import ColorPickerInput from './ColorPickerInput.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex justify-end mb-[--ant-margin-xs]"><div class="w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]"><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="w-234px flex flex-col gap-[--ant-margin-sm]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div><div class="w-full h-full">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div>`),
+  _tmpl$5 = /*#__PURE__*/template(`<div><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`);
+// TODO 超出范围
+const ColorPicker = props => {
+  const isControlled = () => Object.keys(props).includes('value');
+  const [innerColor, _setInnerColor] = createSignal(untrack(() => new Color(props.defaultValue)));
+  createRenderEffect(() => {
+    if (isControlled()) {
+      _setInnerColor(new Color(props.value));
+    }
+  });
+  const disabledAlpha = createMemo(() => !!props.disabledAlpha);
+  const setColor = (value, completed) => {
+    _setInnerColor(value);
+    const valueStr = value.isValid ? disabledAlpha() || value.a === 1 ? value.toHexString() : value.toHex8String() : null;
+    props.onChange?.(valueStr);
+    if (completed) props.onChangeComplete?.(valueStr);
+  };
+  const [open, setOpen] = createSignal(false);
+  const size = useComponentSize(() => props.size);
+  const color = createMemo(() => isControlled() ? new Color(props.value) : innerColor());
+  const getPopoverContent = close => createComponent(ColorPickerContext.Provider, {
+    value: {
+      color: innerColor,
+      setColor,
+      disabledAlpha
+    },
+    get children() {
+      return [createComponent(Show, {
+        get when() {
+          return props.allowClear;
+        },
+        get children() {
+          var _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild;
+          _el$2.$$click = () => {
+            setColor(new Color());
+            close();
+          };
+          return _el$;
+        }
+      }), (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, createComponent(ColorPickerSelect, {}), null);
+        insert(_el$3, createComponent(ColorPickerSlider, {}), null);
+        insert(_el$3, createComponent(ColorPickerInput, {}), null);
+        return _el$3;
+      })()];
+    }
+  });
+  return createComponent(Popover, {
+    get open() {
+      return open();
+    },
+    onOpenChange: setOpen,
+    get trigger() {
+      return props.disabled ? false : 'click';
+    },
+    content: getPopoverContent,
+    get placement() {
+      return props.placement ?? 'bottomLeft';
+    },
+    get children() {
+      return createComponent(Element, {
+        get ["class"]() {
+          return cs('inline-block', props.disabled && 'cursor-not-allowed');
+        },
+        get children() {
+          var _el$4 = _tmpl$4();
+          _el$4.style.setProperty("--border-width", "1px");
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return color().isValid;
+            },
+            get fallback() {
+              return (() => {
+                var _el$7 = _tmpl$5();
+                effect(() => className(_el$7, cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]')));
+                return _el$7;
+              })();
+            },
+            get children() {
+              var _el$5 = _tmpl$3(),
+                _el$6 = _el$5.firstChild;
+              _el$5.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
+              _el$5.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
+              _el$5.style.setProperty("background-size", "50% 50%");
+              _el$6.style.setProperty("box-shadow", "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)");
+              effect(_p$ => {
+                var _v$ = cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'),
+                  _v$2 = color().toRgbString();
+                _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+                _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$6.style.setProperty("background-color", _v$2) : _el$6.style.removeProperty("background-color"));
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$5;
+            }
+          }));
+          effect(_p$ => {
+            var _v$3 = cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'),
+              _v$4 = {
+                small: '16px',
+                middle: '24px',
+                large: '32px'
+              }[size()];
+            _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
+            _v$4 !== _p$.t && ((_p$.t = _v$4) != null ? _el$4.style.setProperty("--inner-size", _v$4) : _el$4.style.removeProperty("--inner-size"));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$4;
+        }
+      });
+    }
+  });
+};
+delegateEvents(["click"]);
+
+export { ColorPicker as default };

package/es/Command/context.d.ts

@@ -0,0 +1,9 @@
+import { type Accessor } from 'solid-js';
+declare const CommandContext: import("solid-js").Context<{
+    open: Accessor<boolean>;
+    onOk: (value: any) => void;
+    onCancel: () => void;
+    dispose: () => void;
+    onAutoDispose: () => void;
+}>;
+export default CommandContext;

package/es/Command/context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'solid-js';
+
+const CommandContext = createContext({
+  open: () => false,
+  onOk: () => {},
+  onCancel: () => {},
+  dispose: () => {},
+  onAutoDispose: () => {}
+});
+
+export { CommandContext as default };

package/es/Command/createCommand.d.ts

@@ -0,0 +1,17 @@
+import { type JSXElement, type Component } from 'solid-js';
+export interface BaseCommandIntance<P extends {} | undefined = undefined, R = void, S = P extends undefined ? () => Promise<R> : (props: P) => Promise<R>> {
+    show: S;
+    hide: () => void;
+    dispose: () => void;
+    isOpen: () => boolean;
+}
+/**
+ * createCommand
+ * @param component
+ * @param contextHolder 如果为 true，则会返回 getContextHolder
+ */
+declare function createCommand<P extends {} = {}, R = void>(component: Component<P>): BaseCommandIntance<P, R>;
+declare function createCommand<P extends {} = {}, R = void>(component: Component<P>, contextHolder: true): BaseCommandIntance<P, R> & {
+    getContextHolder: () => JSXElement;
+};
+export default createCommand;

package/es/Command/createCommand.js

@@ -0,0 +1,112 @@
+import { createComponent, Dynamic, mergeProps, render } from 'solid-js/web';
+import { createSignal, untrack, Show, createRenderEffect } from 'solid-js';
+import CommandContext from './context.js';
+import DelayShow from '../DelayShow/index.js';
+
+function createCommand(component, contextHolder) {
+  const [open, _setOpen] = createSignal(false);
+  const [forceDestroy, setForceDestroy] = createSignal(false);
+  const setOpen = value => {
+    if (value) setForceDestroy(false);
+    _setOpen(value);
+  };
+  const [props, setProps] = createSignal();
+  let resolve;
+  let reject;
+  let disposeRef;
+  const dispose = () => {
+    _setOpen(false);
+    setForceDestroy(true);
+    disposeRef?.();
+    disposeRef = undefined;
+  };
+  const hide = () => {
+    setOpen(false);
+  };
+  const onOk = value => {
+    hide();
+    resolve(value);
+  };
+  const onCancel = () => {
+    hide();
+    reject();
+  };
+  const isOpen = () => untrack(open);
+  // 监听关闭事件，自动销毁
+  const onAutoDispose = () => {
+    createRenderEffect(() => {
+      if (!open()) dispose();
+    });
+  };
+  const getContextHolder = () => createComponent(DelayShow, {
+    get when() {
+      return open();
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return !forceDestroy();
+        },
+        get children() {
+          return createComponent(CommandContext.Provider, {
+            value: {
+              open,
+              onOk,
+              onCancel,
+              dispose,
+              onAutoDispose
+            },
+            get children() {
+              return createComponent(Dynamic, mergeProps({
+                component: component
+              }, props));
+            }
+          });
+        }
+      });
+    }
+  });
+  if (contextHolder) {
+    const show = async _props => {
+      setProps(_props);
+      setOpen(true);
+      return await new Promise((_resolve, _reject) => {
+        resolve = _resolve;
+        reject = _reject;
+      });
+    };
+    return {
+      show,
+      hide,
+      dispose,
+      isOpen,
+      getContextHolder
+    };
+  }
+  const show = async _props => {
+    setProps(_props);
+    const alreadyOpen = isOpen();
+    setOpen(true);
+    return await new Promise((_resolve, _reject) => {
+      if (!alreadyOpen) {
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+        const renderDispose = render(getContextHolder, div);
+        disposeRef = () => {
+          renderDispose();
+          document.body.removeChild(div);
+        };
+      }
+      resolve = _resolve;
+      reject = _reject;
+    });
+  };
+  return {
+    show,
+    hide,
+    dispose,
+    isOpen
+  };
+}
+
+export { createCommand as default };

package/es/Command/index.d.ts

@@ -0,0 +1,7 @@
+import createCommand from './createCommand';
+import useCommandProps from './useCommandProps';
+declare const _default: {
+    createCommand: typeof createCommand;
+    useCommandProps: typeof useCommandProps;
+};
+export default _default;

package/es/Command/index.js

@@ -0,0 +1,9 @@
+import createCommand from './createCommand.js';
+import useCommandProps from './useCommandProps.js';
+
+var Command = {
+  createCommand,
+  useCommandProps
+};
+
+export { Command as default };

package/es/Command/useCommandProps.d.ts

@@ -0,0 +1,13 @@
+declare function useCommandProps<T = void>(): {
+    open: import("solid-js").Accessor<boolean>;
+    onOk: (value: T) => void;
+    onCancel: () => void;
+    dispose: () => void;
+    onAutoDispose: () => void;
+    getProps: () => {
+        open: boolean;
+        onOk: () => void;
+        onCancel: () => void;
+    };
+};
+export default useCommandProps;