antd-solid 0.0.11 → 0.0.13

package/es/Menu/index.js

@@ -0,0 +1,64 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, createMemo } from 'solid-js';
+import Element from '../Element/index.js';
+import InternalMenu from './InternalMenu.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+
+function Menu(_props) {
+  const props = mergeProps({
+    mode: 'vertical',
+    selectable: true
+  }, _props);
+  const [_selectedKeys, setSelectedKeys] = createControllableValue(props, {
+    defaultValuePropName: 'defaultSelectedKeys',
+    valuePropName: 'selectedKeys',
+    trigger: null
+  });
+  const selectedKeys = createMemo(() => _selectedKeys() ?? []);
+  const [_expandedKeys, setExpandedKeys] = createControllableValue(props, {
+    defaultValuePropName: 'defaultExpandedKeys',
+    valuePropName: 'expandedKeys',
+    trigger: 'onExpandedKeysChange'
+  });
+  const expandedKeys = createMemo(() => _expandedKeys() ?? []);
+  const style = createMemo(() => ({
+    '--ant-menu-item-margin': 'var(--ant-margin-xxs)',
+    '--ant-menu-item-height': '40px',
+    ...props.style
+  }));
+  return createComponent(Element, {
+    get ["class"]() {
+      return props.class;
+    },
+    get style() {
+      return style();
+    },
+    get children() {
+      return createComponent(InternalMenu, mergeProps$1(props, {
+        get ["class"]() {
+          return props.class;
+        },
+        get style() {
+          return style();
+        },
+        get selectedKeys() {
+          return selectedKeys();
+        },
+        onSelect: info => {
+          props.onSelect?.(info);
+          setSelectedKeys(info.selectedKeys);
+        },
+        onDeselect: info => {
+          props.onDeselect?.(info);
+          setSelectedKeys(info.selectedKeys);
+        },
+        get expandedKeys() {
+          return expandedKeys();
+        },
+        onExpandedKeysChange: setExpandedKeys
+      }));
+    }
+  });
+}
+
+export { Menu as default };

package/es/Message/Message.d.ts

@@ -0,0 +1,9 @@
+import { type Component, type JSXElement } from 'solid-js';
+export interface MessageProps {
+    type: 'info' | 'success' | 'error' | 'warning';
+    content: JSXElement;
+    duration?: number;
+    onClose?: () => void;
+}
+declare const Message: Component<MessageProps>;
+export default Message;

package/es/Message/Message.js

@@ -0,0 +1,34 @@
+import { createComponent, memo, insert, template } from 'solid-js/web';
+import { onMount } from 'solid-js';
+import Element from '../Element/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:info-circle-filled text-[--ant-color-primary] text-18px">`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled text-[--ant-color-success] text-18px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled text-[--ant-color-error] text-18px">`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:exclamation-circle-filled text-[--ant-color-warning] text-18px">`);
+const Message = props => {
+  onMount(() => {
+    const duration = props.duration ?? 3;
+    if (duration > 0) {
+      setTimeout(() => {
+        props.onClose?.();
+      }, duration * 1000);
+    }
+  });
+  return createComponent(Element, {
+    "class": "ant-message-fade [box-shadow:var(--ant-box-shadow)] p-[--ant-message-content-padding] rounded-[--ant-border-radius-lg] bg-[--ant-color-bg-elevated] flex gap-[--ant-margin-xs] items-center [font-size:var(--ant-font-size)] text-[--ant-color-text] leading-[--ant-line-height]",
+    style: {
+      '--ant-message-content-padding': '9px 12px'
+    },
+    get children() {
+      return [memo(() => memo(() => props.type === 'info')() && _tmpl$2()), memo(() => memo(() => props.type === 'success')() && _tmpl$3()), memo(() => memo(() => props.type === 'error')() && _tmpl$4()), memo(() => memo(() => props.type === 'warning')() && _tmpl$5()), (() => {
+        var _el$ = _tmpl$();
+        insert(_el$, () => props.content);
+        return _el$;
+      })()];
+    }
+  });
+};
+
+export { Message as default };

package/es/Message/index.d.ts

@@ -0,0 +1,12 @@
+import { type JSXElement } from 'solid-js';
+import useMessage from './useMessage';
+import './index.scss';
+declare const message: {
+    readonly info: (content: JSXElement, duration?: number) => void;
+    readonly success: (content: JSXElement, duration?: number) => void;
+    readonly error: (content: JSXElement, duration?: number) => void;
+    readonly warning: (content: JSXElement, duration?: number) => void;
+    readonly useMessage: typeof useMessage;
+};
+export type { MessageApi } from './useMessage';
+export default message;

package/es/Message/index.js

@@ -0,0 +1,80 @@
+import { render, createComponent, mergeProps } from 'solid-js/web';
+import { createSignal, For } from 'solid-js';
+import { TransitionGroup } from 'solid-transition-group';
+import { isEmpty } from 'lodash-es';
+import Message from './Message.js';
+import useMessage from './useMessage.js';
+import Element from '../Element/index.js';
+import './index.scss.js';
+
+let setMsgConfigList;
+/**
+ * message 静态方法工厂
+ * @param type 类型
+ * @param content 提示内容
+ * @param duration 自动关闭的延时，单位秒。设为 0 时不自动关闭
+ */
+const createStaticFactory = type => {
+  return (content, duration) => {
+    const config = {
+      type,
+      content,
+      duration
+    };
+    if (setMsgConfigList) {
+      setMsgConfigList(prev => [...prev, {
+        type,
+        content,
+        duration
+      }]);
+      return;
+    }
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const dispose = render(() => {
+      const [msgConfigList, _setMsgConfigList] = createSignal([config]);
+      setMsgConfigList = _setMsgConfigList;
+      return createComponent(Element, {
+        "class": "fixed top-16px left-0 right-0 z-2010 flex items-center flex-col gap-[--ant-margin-sm]",
+        get children() {
+          return createComponent(TransitionGroup, {
+            name: "ant-message-fade",
+            appear: true,
+            onAfterExit: () => {
+              if (isEmpty(msgConfigList())) {
+                setMsgConfigList = undefined;
+                dispose();
+                document.body.removeChild(div);
+              }
+            },
+            get children() {
+              return createComponent(For, {
+                get each() {
+                  return msgConfigList();
+                },
+                children: _config => createComponent(Message, mergeProps(_config, {
+                  onClose: () => {
+                    _setMsgConfigList(prev => prev.filter(item => item !== _config));
+                  }
+                }))
+              });
+            }
+          });
+        }
+      });
+    }, div);
+  };
+};
+const info = createStaticFactory('info');
+const success = createStaticFactory('success');
+const error = createStaticFactory('error');
+const warning = createStaticFactory('warning');
+const message = {
+  info,
+  success,
+  error,
+  warning,
+  useMessage
+};
+
+export { message as default };

package/es/Message/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-message-fade {\n  transition: all 0.5s;\n}\n\n.ant-message-fade-enter,\n.ant-message-fade-exit-to {\n  opacity: 0;\n  transform: translateY(-100%);\n}\n\n.ant-message-fade-enter-to,\n.ant-message-fade-exit {\n  opacity: 1;\n  transform: none;\n}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/Message/useMessage.d.ts

@@ -0,0 +1,6 @@
+import { type MessageProps } from './Message';
+export interface MessageApi {
+    open: (config: Omit<MessageProps, 'onClose'>) => () => void;
+}
+declare function useMessage(): readonly [MessageApi, () => import("solid-js").JSX.Element];
+export default useMessage;

package/es/Message/useMessage.js

@@ -0,0 +1,54 @@
+import { createComponent, Portal, mergeProps } from 'solid-js/web';
+import { createSignal, For } from 'solid-js';
+import { TransitionGroup } from 'solid-transition-group';
+import Message from './Message.js';
+import Element from '../Element/index.js';
+import DelayShow from '../DelayShow/index.js';
+
+function useMessage() {
+  const [msgConfigList, setMsgConfigList] = createSignal([]);
+  const messageApi = {
+    open: config => {
+      setMsgConfigList(prev => [...prev, config]);
+      const destroy = () => {
+        setMsgConfigList(prev => prev.filter(item => item !== config));
+      };
+      return destroy;
+    }
+  };
+  const getContextHolder = () => createComponent(DelayShow, {
+    get when() {
+      return msgConfigList().length > 0;
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          return createComponent(Element, {
+            "class": "fixed top-16px left-1/2 translate-x--1/2 z-2010 flex items-center flex-col gap-[--ant-margin-sm]",
+            get children() {
+              return createComponent(TransitionGroup, {
+                name: "ant-message-fade",
+                appear: true,
+                get children() {
+                  return createComponent(For, {
+                    get each() {
+                      return msgConfigList();
+                    },
+                    children: config => createComponent(Message, mergeProps(config, {
+                      onClose: () => {
+                        setMsgConfigList(prev => prev.filter(item => item !== config));
+                      }
+                    }))
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+  return [messageApi, getContextHolder];
+}
+
+export { useMessage as default };

package/es/Modal/index.d.ts

@@ -0,0 +1,73 @@
+import { type JSXElement, type Component } from 'solid-js';
+import { type ButtonProps } from '../Button';
+import './index.scss';
+import useModal from './useModal';
+import warning from './warning';
+export interface ModalProps {
+    title?: JSXElement;
+    defaultOpen?: boolean;
+    open?: boolean;
+    width?: string;
+    height?: string;
+    children?: JSXElement;
+    /**
+     * 垂直居中展示 Modal
+     */
+    centered?: boolean;
+    /**
+     * 是否展示遮罩
+     * 默认 true
+     */
+    mask?: boolean;
+    /**
+     * 点击蒙层是否允许关闭
+     * 默认 true
+     */
+    maskClosable?: boolean;
+    /**
+     * 设置为 false 时隐藏关闭按钮
+     * 默认 true
+     */
+    closeIcon?: boolean;
+    footer?: boolean | (() => JSXElement);
+    /**
+     * 关闭时销毁 Modal 里的子元素
+     * 默认 false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * 是否在摁下 Esc 键的时候关闭 Modal
+     * 默认 true
+     */
+    closeOnEsc?: boolean;
+    /**
+     * ok 按钮 props
+     */
+    okButtonProps?: Partial<ButtonProps>;
+    /**
+     * cancel 按钮 props
+     */
+    cancelButtonProps?: Partial<ButtonProps>;
+    /**
+     * 返回 true，会自动关闭 modal
+     */
+    onOk?: () => Promise<unknown> | void;
+    onCancel?: () => void;
+    /**
+     * Modal 打开动画结束事件
+     */
+    onAfterEnter?: () => void;
+    /**
+     * Modal 关闭动画结束事件
+     */
+    onAfterExit?: () => void;
+}
+export interface ModalLocale {
+    okText: string;
+    cancelText: string;
+}
+declare const Modal: Component<ModalProps> & {
+    warning: typeof warning;
+    useModal: typeof useModal;
+};
+export default Modal;

package/es/Modal/index.js

@@ -0,0 +1,237 @@
+import { delegateEvents, createComponent, Portal, Dynamic, effect, className, insert, memo, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { mergeProps, createEffect, onCleanup, createSignal, createRenderEffect, on, Show } from 'solid-js';
+import cs from 'classnames';
+import { Transition } from 'solid-transition-group';
+import Button from '../Button/index.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+import DelayShow from '../DelayShow/index.js';
+import './index.scss.js';
+import createTransition from '../hooks/createTransition.js';
+import Element from '../Element/index.js';
+import useModal from './useModal.js';
+import warning from './warning.js';
+import useLocale from '../hooks/useLocale.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div aria-label=mask>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="inline-flex gap-8px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="mt-12px text-right">`),
+  _tmpl$5 = /*#__PURE__*/template(`<div class="ant-modal-wrap z-1000 fixed inset-0 overflow-auto pointer-events-none"><div><div class="text-[var(--ant-modal-title-color)] text-16px font-600 mb-8px"></div><div class=grow>`);
+// 单位 s
+const transitionDuration = 0.3;
+const Modal = _props => {
+  const props = mergeProps({
+    width: '520px',
+    footer: true,
+    mask: true,
+    maskClosable: true,
+    closeIcon: true,
+    destroyOnClose: false,
+    closeOnEsc: true
+  }, _props);
+  const [open] = createControllableValue(props, {
+    valuePropName: 'open',
+    defaultValuePropName: 'defaultOpen',
+    trigger: null
+  });
+  createEffect(() => {
+    if (!open()) return;
+    const originOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    if (!props.closeOnEsc) return;
+    const onKeyup = e => {
+      if (e.key === 'Escape') {
+        props.onCancel?.();
+      }
+    };
+    document.addEventListener('keyup', onKeyup);
+    onCleanup(() => {
+      document.body.style.overflow = originOverflow;
+      document.removeEventListener('keyup', onKeyup);
+    });
+  });
+  const [activeElementCenter, setActiveElementCenter] = createSignal({
+    x: 0,
+    y: 0
+  });
+  createRenderEffect(on(open, input => {
+    if (input) {
+      const rect = document.activeElement?.getBoundingClientRect();
+      setActiveElementCenter({
+        x: rect ? rect.x + rect.width / 2 : 0,
+        y: rect ? rect.y + rect.height / 2 : 0
+      });
+    }
+  }));
+  let modalRootRef;
+  createTransition(() => modalRootRef, open, {
+    name: 'ant-modal-fade',
+    onAfterEnter: () => {
+      props.onAfterEnter?.();
+    },
+    onAfterExit: () => {
+      props.onAfterExit?.();
+    }
+  });
+  const locale = useLocale();
+  return createComponent(DelayShow, {
+    get when() {
+      return open();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          return createComponent(Transition, {
+            name: "ant-modal-fade",
+            onEnter: (el, done) => {
+              el.animate([], {
+                duration: transitionDuration * 1000
+              }).finished.finally(done);
+            },
+            get onAfterExit() {
+              return props.onAfterExit;
+            },
+            onExit: (el, done) => {
+              el.animate([], {
+                duration: transitionDuration * 1000
+              }).finished.finally(done);
+            },
+            get children() {
+              return createComponent(Dynamic, {
+                get component() {
+                  return props.destroyOnClose ? Show : DelayShow;
+                },
+                get when() {
+                  return open();
+                },
+                get children() {
+                  return createComponent(Element, {
+                    ref(r$) {
+                      var _ref$ = modalRootRef;
+                      typeof _ref$ === "function" ? _ref$(r$) : modalRootRef = r$;
+                    },
+                    "class": "[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]",
+                    style: {
+                      '--transition-duration': `${transitionDuration}s`
+                    },
+                    get children() {
+                      return [createComponent(Show, {
+                        get when() {
+                          return props.mask;
+                        },
+                        get children() {
+                          var _el$ = _tmpl$();
+                          _el$.$$click = () => {
+                            if (props.maskClosable) {
+                              props.onCancel?.();
+                            }
+                          };
+                          effect(() => className(_el$, cs('ant-modal-mask', 'fixed inset-0 bg-[var(--ant-color-bg-mask)] z-1000')));
+                          return _el$;
+                        }
+                      }), (() => {
+                        var _el$2 = _tmpl$5(),
+                          _el$3 = _el$2.firstChild,
+                          _el$5 = _el$3.firstChild,
+                          _el$6 = _el$5.nextSibling;
+                        _el$3.$$click = e => {
+                          e.stopPropagation();
+                        };
+                        insert(_el$3, createComponent(Show, {
+                          get when() {
+                            return props.closeIcon;
+                          },
+                          get children() {
+                            return createComponent(Button, {
+                              type: "text",
+                              get ["class"]() {
+                                return cs('!w-22px !h-22px !flex !justify-center !items-center text-center text-18px !absolute !top-16px !right-16px z-1000 !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)]');
+                              },
+                              onClick: () => {
+                                props.onCancel?.();
+                              },
+                              get children() {
+                                return _tmpl$2();
+                              }
+                            });
+                          }
+                        }), _el$5);
+                        insert(_el$5, () => props.title);
+                        insert(_el$6, () => props.children);
+                        insert(_el$3, createComponent(Show, {
+                          get when() {
+                            return props.footer;
+                          },
+                          get children() {
+                            var _el$7 = _tmpl$4();
+                            insert(_el$7, createComponent(Show, {
+                              get when() {
+                                return typeof props.footer !== 'function';
+                              },
+                              get fallback() {
+                                return memo(() => typeof props.footer === 'function')() && props.footer();
+                              },
+                              get children() {
+                                var _el$8 = _tmpl$3();
+                                insert(_el$8, createComponent(Button, mergeProps$1({
+                                  onClick: () => {
+                                    props.onCancel?.();
+                                  },
+                                  get children() {
+                                    return locale().Modal?.cancelText;
+                                  }
+                                }, () => props.cancelButtonProps)), null);
+                                insert(_el$8, createComponent(Button, mergeProps$1({
+                                  type: "primary",
+                                  loading: "auto",
+                                  onClick: async () => await props.onOk?.(),
+                                  get children() {
+                                    return locale().Modal?.okText;
+                                  }
+                                }, () => props.okButtonProps)), null);
+                                return _el$8;
+                              }
+                            }));
+                            return _el$7;
+                          }
+                        }), null);
+                        effect(_p$ => {
+                          var _v$ = cs('ant-modal', 'px-24px py-20px rounded-8px overflow-hidden bg-[--ant-color-bg-container-secondary] flex flex-col max-w-[calc(100vw-calc(var(--ant-margin)*2))] transform-origin-center pointer-events-initial'),
+                            _v$2 = props.centered ? 'max(calc(50vh - 50%), 0px)' : '100px',
+                            _v$3 = `${activeElementCenter().x}px`,
+                            _v$4 = `${activeElementCenter().y}px`,
+                            _v$5 = props.width,
+                            _v$6 = props.height;
+                          _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+                          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$3.style.setProperty("--translate-y", _v$2) : _el$3.style.removeProperty("--translate-y"));
+                          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$3.style.setProperty("--active-element-center-x", _v$3) : _el$3.style.removeProperty("--active-element-center-x"));
+                          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$3.style.setProperty("--active-element-center-y", _v$4) : _el$3.style.removeProperty("--active-element-center-y"));
+                          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$3.style.setProperty("width", _v$5) : _el$3.style.removeProperty("width"));
+                          _v$6 !== _p$.n && ((_p$.n = _v$6) != null ? _el$3.style.setProperty("height", _v$6) : _el$3.style.removeProperty("height"));
+                          return _p$;
+                        }, {
+                          e: undefined,
+                          t: undefined,
+                          a: undefined,
+                          o: undefined,
+                          i: undefined,
+                          n: undefined
+                        });
+                        return _el$2;
+                      })()];
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+  });
+};
+Modal.warning = warning;
+Modal.useModal = useModal;
+delegateEvents(["click"]);
+
+export { Modal as default };

package/es/Modal/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-modal {\n  --scale: 1;\n  --translate-x: calc(50vw - 50%);\n  transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale));\n}\n\n.ant-modal-fade-enter-active .ant-modal-mask,\n.ant-modal-fade-exit-active .ant-modal-mask {\n  transition: opacity var(--transition-duration);\n}\n.ant-modal-fade-enter-active .ant-modal,\n.ant-modal-fade-exit-active .ant-modal {\n  transition: transform var(--transition-duration);\n}\n\n.ant-modal-fade-enter .ant-modal-mask,\n.ant-modal-fade-exit-to .ant-modal-mask {\n  opacity: 0;\n}\n.ant-modal-fade-enter .ant-modal,\n.ant-modal-fade-exit-to .ant-modal {\n  --scale: 0;\n  --translate-x: calc(var(--active-element-center-x) - 50%) !important;\n  --translate-y: calc(var(--active-element-center-y) - 50%) !important;\n}";
+styleInject(css_248z);
+
+export { css_248z as default };

package/es/Modal/useModal.d.ts

@@ -0,0 +1,5 @@
+import { type ModalProps } from '.';
+declare function useModal(): readonly [{
+    warning: (props: ModalProps) => void;
+}, () => import("solid-js").JSX.Element];
+export default useModal;

package/es/Modal/useModal.js

@@ -0,0 +1,51 @@
+import { createComponent, mergeProps, insert, template } from 'solid-js/web';
+import { createSignal } from 'solid-js';
+import Modal from './index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class=ml-34px>`);
+function useModal() {
+  const [open, setOpen] = createSignal(false);
+  const [modalProps, setModalProps] = createSignal({});
+  const modal = {
+    warning: props => {
+      setModalProps(props);
+      setOpen(true);
+    }
+  };
+  const getContextHolder = () => createComponent(Modal, mergeProps({
+    width: "416px",
+    maskClosable: false,
+    closeIcon: false
+  }, modalProps, {
+    get title() {
+      return (() => {
+        var _el$ = _tmpl$();
+          _el$.firstChild;
+        insert(_el$, () => modalProps().title, null);
+        return _el$;
+      })();
+    },
+    get children() {
+      return (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => modalProps().children);
+        return _el$3;
+      })();
+    },
+    get open() {
+      return open();
+    },
+    onOk: () => {
+      setOpen(false);
+      modalProps().onOk?.();
+    },
+    onCancel: () => {
+      setOpen(false);
+      modalProps().onCancel?.();
+    }
+  }));
+  return [modal, getContextHolder];
+}
+
+export { useModal as default };

package/es/Modal/warning.d.ts

@@ -0,0 +1,5 @@
+import { type ModalProps } from '.';
+export interface MethodProps extends Pick<ModalProps, 'title' | 'children' | 'onOk' | 'onCancel'> {
+}
+declare function warning(props: MethodProps): void;
+export default warning;