antd-solid 0.0.10 → 0.0.11

package/es/Modal.js

@@ -16,19 +16,33 @@ function Modal(_props) {
   }, _props);
   const [open, setOpen] = createSignal(props.defaultOpen ?? false);
   const [hide, setHide] = createSignal(false);
+  let cleanup;
   const instance = {
     open() {
       setOpen(true);
       setHide(false);
+      const originOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      const onKeyup = e => {
+        if (e.key === 'Escape') {
+          instance.close();
+        }
+      };
+      document.addEventListener('keyup', onKeyup);
+      cleanup = () => {
+        document.body.style.overflow = originOverflow;
+        document.removeEventListener('keyup', onKeyup);
+      };
     },
     close() {
-      untrack(() => {
-        if (props.destroyOnClose) {
-          setOpen(false);
-        } else {
-          setHide(true);
-        }
-      });
+      setHide(true);
+      cleanup();
+      props.afterClose?.();
+    },
+    destroy() {
+      setOpen(false);
+      cleanup();
+      props.afterClose?.();
     }
   };
   untrack(() => {
@@ -36,10 +50,6 @@ function Modal(_props) {
       props.ref?.(instance);
     }
   });
-  const close = () => {
-    instance.close();
-    props.afterClose?.();
-  };
   const [confirmLoading, setConfirmLoading] = createSignal(false);
   return createComponent(Show, {
     get when() {
@@ -51,7 +61,7 @@ function Modal(_props) {
           const _el$ = _tmpl$5();
           _el$.$$click = () => {
             if (props.maskClosable ?? true) {
-              close();
+              instance.close();
             }
           };
           insert(_el$, createComponent(Show, {
@@ -78,7 +88,9 @@ function Modal(_props) {
                     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,
+                    onClick: () => {
+                      instance.close();
+                    },
                     get children() {
                       return _tmpl$();
                     }
@@ -103,7 +115,9 @@ function Modal(_props) {
                     get children() {
                       const _el$7 = _tmpl$2();
                       insert(_el$7, createComponent(Button, {
-                        onClick: close,
+                        onClick: () => {
+                          instance.close();
+                        },
                         children: "\u53D6\u6D88"
                       }), null);
                       insert(_el$7, createComponent(Button, {

package/es/Progress/index.d.ts

@@ -0,0 +1,25 @@
+import { type Component } from 'solid-js';
+export interface ProgressProps {
+    /**
+     * 百分比
+     * 默认 0
+     */
+    percent?: number;
+    /**
+     * 状态
+     * 默认 'default'
+     */
+    status?: 'default' | 'success' | 'error';
+    /**
+     * 'line' 类型进度条的高度
+     * 默认 8
+     */
+    height?: number;
+    /**
+     * 是否显示进度数值或状态图标
+     * 默认 true
+     */
+    showInfo?: boolean;
+}
+declare const Progress: Component<ProgressProps>;
+export default Progress;

package/es/Progress/index.js

@@ -0,0 +1,71 @@
+import { insert, createComponent, effect, className, template } from 'solid-js/web';
+import { mergeProps, Show, Switch, Match } from 'solid-js';
+import cs from 'classnames';
+
+const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled ant-text-[var(--primary-color)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled ant-text-[var(--ant-color-error)]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="ant-shrink-0 ant-min-w-40px ant-ml-8px ant-text-center">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="ant-flex ant-items-center"><div>`);
+const Progress = _props => {
+  const props = mergeProps({
+    percent: 0,
+    status: 'default',
+    height: 8,
+    showInfo: true
+  }, _props);
+  return (() => {
+    const _el$ = _tmpl$4(),
+      _el$2 = _el$.firstChild;
+    _el$.style.setProperty("--ant-progress-remaining-color", "rgba(0, 0, 0, 0.06)");
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.showInfo;
+      },
+      get children() {
+        const _el$3 = _tmpl$3();
+        insert(_el$3, createComponent(Switch, {
+          get fallback() {
+            return `${props.percent}%`;
+          },
+          get children() {
+            return [createComponent(Match, {
+              get when() {
+                return props.status === 'success' || props.percent >= 100;
+              },
+              get children() {
+                return _tmpl$();
+              }
+            }), createComponent(Match, {
+              get when() {
+                return props.status === 'error';
+              },
+              get children() {
+                return _tmpl$2();
+              }
+            })];
+          }
+        }));
+        return _el$3;
+      }
+    }), null);
+    effect(_p$ => {
+      const _v$ = cs('ant-w-full ant-bg-[var(--ant-progress-remaining-color)]', 'before:ant-content-empty before:ant-block before:ant-bg-[var(--primary-color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit'),
+        _v$2 = `${props.height}px`,
+        _v$3 = `${props.height / 2}px`,
+        _v$4 = `${props.percent}%`;
+      _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("height", _v$2) : _el$2.style.removeProperty("height"));
+      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("border-radius", _v$3) : _el$2.style.removeProperty("border-radius"));
+      _v$4 !== _p$._v$4 && ((_p$._v$4 = _v$4) != null ? _el$2.style.setProperty("--percent", _v$4) : _el$2.style.removeProperty("--percent"));
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined,
+      _v$4: undefined
+    });
+    return _el$;
+  })();
+};
+
+export { Progress as default };

package/es/Radio.js

@@ -3,7 +3,7 @@ import { untrack, mergeProps, createSelector, For } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from './hooks/createControllableValue.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<label class="ant-inline-flex ant-gap-4px"><input type="radio">`),
+const _tmpl$ = /*#__PURE__*/template(`<label class="ant-inline-flex ant-gap-4px ant-cursor-pointer ant-inline-flex ant-items-center"><span><input class="ant-m-0 ant-hidden" type="radio">`),
   _tmpl$2 = /*#__PURE__*/template(`<label><input class="ant-w-0 ant-h-0" type="radio">`),
   _tmpl$3 = /*#__PURE__*/template(`<div>`);
 const Radio = props => {
@@ -11,18 +11,20 @@ const Radio = props => {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined
+    trigger: null
   });
   return (() => {
     const _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild;
-    _el$2.$$input = e => {
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild;
+    _el$3.$$input = e => {
       setChecked(e.target.checked);
       untrack(() => props.onChange?.(e));
     };
     insert(_el$, () => props.children, null);
-    effect(() => _el$2.checked = checked());
-    effect(() => _el$2.value = props.value ?? '');
+    effect(() => className(_el$2, cs('ant-w-16px ant-h-16px ant-rounded-50% ant-[border:1px_solid_var(--ant-color-border)]', checked() && 'ant-[border:5px_solid_var(--primary-color)]')));
+    effect(() => _el$3.checked = checked());
+    effect(() => _el$3.value = props.value ?? '');
     return _el$;
   })();
 };
@@ -31,20 +33,20 @@ Radio.Button = props => {
     defaultValue: false,
     defaultValuePropName: 'defaultChecked',
     valuePropName: 'checked',
-    trigger: undefined
+    trigger: null
   });
   return (() => {
-    const _el$3 = _tmpl$2(),
-      _el$4 = _el$3.firstChild;
-    _el$4.$$input = e => {
+    const _el$4 = _tmpl$2(),
+      _el$5 = _el$4.firstChild;
+    _el$5.$$input = e => {
       setChecked(e.target.checked);
       untrack(() => props.onChange?.(e));
     };
-    insert(_el$3, () => props.children, null);
-    effect(() => className(_el$3, cs('ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--primary-color)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center', checked() && 'ant-text-[var(--primary-color)] ant-[border:1px_solid_var(--primary-color)] !ant-border-r-[var(--primary-color)]')));
-    effect(() => _el$4.checked = checked());
-    effect(() => _el$4.value = props.value ?? '');
-    return _el$3;
+    insert(_el$4, () => props.children, null);
+    effect(() => className(_el$4, cs('ant-px-15px ant-[border:1px_solid_rgb(217,217,217)] first:ant-rounded-l-6px last:ant-rounded-r-6px ant-h-32px ant-inline-flex ant-items-center hover:ant-text-[var(--primary-color)] not[:last-child]:ant-border-r-transparent ant-cursor-pointer ant-flex-grow ant-justify-center', checked() && 'ant-text-[var(--primary-color)] ant-[border:1px_solid_var(--primary-color)] !ant-border-r-[var(--primary-color)]')));
+    effect(() => _el$5.checked = checked());
+    effect(() => _el$5.value = props.value ?? '');
+    return _el$4;
   })();
 };
 Radio.Group = _props => {
@@ -52,12 +54,12 @@ Radio.Group = _props => {
     optionType: 'default'
   }, _props);
   const [value, setValue] = createControllableValue(props, {
-    trigger: undefined
+    trigger: null
   });
   const isChecked = createSelector(value);
   return (() => {
-    const _el$5 = _tmpl$3();
-    insert(_el$5, createComponent(For, {
+    const _el$6 = _tmpl$3();
+    insert(_el$6, createComponent(For, {
       get each() {
         return props.options;
       },
@@ -73,15 +75,17 @@ Radio.Group = _props => {
         },
         onChange: e => {
           setValue(option.value);
-          untrack(() => props.onChange?.(e));
+          untrack(() => {
+            props.onChange?.(e);
+          });
         },
         get children() {
           return option.label;
         }
       })
     }));
-    effect(() => className(_el$5, cs(props.block ? 'ant-flex' : 'ant-inline-flex', props.optionType === 'default' ? 'ant-gap-8px' : '')));
-    return _el$5;
+    effect(() => className(_el$6, cs(props.block ? 'ant-flex' : 'ant-inline-flex', props.optionType === 'default' ? 'ant-gap-8px' : '')));
+    return _el$6;
   })();
 };
 delegateEvents(["input"]);

package/es/hooks/createControllableValue.d.ts

@@ -3,7 +3,7 @@ export interface Options<T> {
     defaultValue?: T;
     defaultValuePropName?: string;
     valuePropName?: string;
-    trigger?: string | undefined;
+    trigger?: string | null;
 }
 export type Props = Record<string, any>;
 export interface StandardProps<T> {

package/es/hooks/createTransition.d.ts

@@ -0,0 +1,8 @@
+import { type Accessor } from 'solid-js';
+/**
+ * dom 节点显示或隐藏时的动画
+ * @param target
+ * @param when
+ * @param className 动画类名
+ */
+export default function createTransition(target: Accessor<HTMLElement | undefined | null>, when: Accessor<boolean>, className: string): void;

package/es/hooks/createTransition.js

@@ -0,0 +1,39 @@
+import { createEffect, on } from 'solid-js';
+
+/**
+ * dom 节点显示或隐藏时的动画
+ * @param target
+ * @param when
+ * @param className 动画类名
+ */
+function createTransition(target, when, className) {
+  createEffect(on(when, input => {
+    const targetValue = target();
+    if (!targetValue) return;
+    if (input) {
+      targetValue.style.display = '';
+      targetValue.classList.add(`${className}-enter-active`, `${className}-enter`, `${className}-enter-to`);
+      requestAnimationFrame(() => {
+        targetValue.classList.remove(`${className}-enter`);
+      });
+      const onTransitionEnd = () => {
+        targetValue.classList.remove(`${className}-enter-active`, `${className}-enter-to`);
+        targetValue.removeEventListener('transitionend', onTransitionEnd);
+      };
+      targetValue.addEventListener('transitionend', onTransitionEnd);
+    } else {
+      targetValue.classList.add(`${className}-exit-active`, `${className}-exit`, `${className}-exit-to`);
+      requestAnimationFrame(() => {
+        targetValue.classList.remove(`${className}-exit`);
+      });
+      const onTransitionEnd = () => {
+        targetValue.style.display = 'none';
+        targetValue.classList.remove(`${className}-exit-active`, `${className}-exit-to`);
+        targetValue.removeEventListener('transitionend', onTransitionEnd);
+      };
+      targetValue.addEventListener('transitionend', onTransitionEnd);
+    }
+  }));
+}
+
+export { createTransition as default };

package/es/index.d.ts

@@ -6,6 +6,8 @@ export type { InputNumberProps } from './InputNumber';
 export { default as Timeline } from './Timeline';
 export { default as Modal } from './Modal';
 export type { ModalInstance } from './Modal';
+export { default as Drawer } from './Drawer';
+export type { DrawerProps, DrawerInstance } from './Drawer';
 export { default as DatePicker } from './DatePicker';
 export { default as Select } from './Select';
 export { default as Tree } from './Tree';
@@ -16,6 +18,7 @@ export { default as ColorPicker } from './ColorPicker';
 export type { ColorPickerProps } from './ColorPicker';
 export { default as Result } from './Result';
 export { default as Progress } from './Progress';
+export type { ProgressProps } from './Progress';
 export { default as Tabs } from './Tabs';
 export type { TabsProps, Tab } from './Tabs';
 export { default as Popconfirm } from './Popconfirm';
@@ -23,8 +26,8 @@ export { default as Upload } from './Upload';
 export type { UploadProps, UploadFile } from './Upload';
 export { default as Radio } from './Radio';
 export type { RadioProps, RadioGroupProps } from './Radio';
-export { default as Form } from './form';
-export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './form';
+export { default as Form } from './Form';
+export type { FormInstance, FormProps, FormItemProps, FormItemComponentProps } from './Form';
 export { default as Switch } from './Switch';
 export type { SwitchProps } from './Switch';
 export { default as Skeleton } from './Skeleton';

package/es/index.js

@@ -3,6 +3,7 @@ export { default as Input } from './Input.js';
 export { default as InputNumber } from './InputNumber.js';
 export { default as Timeline } from './Timeline.js';
 export { default as Modal } from './Modal.js';
+export { default as Drawer } from './Drawer/index.js';
 export { default as DatePicker } from './DatePicker.js';
 export { default as Select } from './Select.js';
 export { default as Tree } from './Tree.js';
@@ -10,12 +11,12 @@ export { default as Popover } from './Popover.js';
 export { default as Tooltip } from './Tooltip.js';
 export { default as ColorPicker } from './ColorPicker.js';
 export { default as Result } from './Result.js';
-export { default as Progress } from './Progress.js';
+export { default as Progress } from './Progress/index.js';
 export { default as Tabs } from './Tabs.js';
 export { default as Popconfirm } from './Popconfirm.js';
 export { default as Upload } from './Upload.js';
 export { default as Radio } from './Radio.js';
-export { default as Form } from './form/index.js';
+export { default as Form } from './Form/index.js';
 export { default as Switch } from './Switch.js';
 export { default as Skeleton } from './Skeleton.js';
 export { default as Spin } from './Spin.js';

package/es/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js

@@ -0,0 +1,26 @@
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };

package/es/utils/solid.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type JSXElement, type JSX } from 'solid-js';
+import { type JSXElement, type JSX, type Ref } from 'solid-js';
 import { type StringOrJSXElement } from '../types';
 /**
  * 判断 JSXElement 是否是基础类型
@@ -13,3 +13,6 @@ export declare function dispatchEventHandlerUnion<T, E extends Event>(handler: J
     target: Element;
 }): void;
 export declare function unwrapStringOrJSXElement(value: StringOrJSXElement): JSXElement;
+export declare function setRef<T>(props: {
+    ref?: Ref<T>;
+}, value: T | null): void;

package/es/utils/solid.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { untrack } from 'solid-js';
 import { isNil } from 'lodash-es';
 import SolidToReact from './SolidToReact.js';
 
@@ -28,5 +29,12 @@ function dispatchEventHandlerUnion(handler, e) {
 function unwrapStringOrJSXElement(value) {
   return typeof value === 'function' ? value() : value;
 }
+function setRef(props, value) {
+  untrack(() => {
+    if (typeof props.ref === 'function') {
+      props.ref?.(value);
+    }
+  });
+}
 
-export { dispatchEventHandlerUnion, isBaseType, solidToReact, unwrapStringOrJSXElement };
+export { dispatchEventHandlerUnion, isBaseType, setRef, solidToReact, unwrapStringOrJSXElement };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-solid",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "",
   "main": "src/index.ts",
   "types": "es/index.d.ts",
@@ -38,7 +38,9 @@
     "rollup": "^3.21.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-import-css": "^3.2.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
+    "sass": "^1.69.6",
     "typescript": "^5.1.6",
     "vite-plugin-solid": "^2.7.0",
     "vitepress": "1.0.0-rc.4",

package/src/Button.tsx

@@ -43,10 +43,10 @@ const typeClassMap = {
     ),
   primary: (danger: boolean) =>
     cs(
-      'ant-border-none ant-text-white',
+      'ant-text-white',
       danger
-        ? 'ant-bg-[var(--ant-color-error)] hover:ant-bg-[var(--light-error-color)] active:ant-bg-[var(--dark-error-color)]'
-        : 'ant-bg-[var(--primary-color)] hover:ant-bg-[var(--light-primary-color)] active:ant-bg-[var(--dark-primary-color)]',
+        ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-bg-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-bg-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-bg-[var(--dark-error-color)]'
+        : 'ant-[border:1px_solid_var(--primary-color)] ant-bg-[var(--primary-color)] hover:ant-[border-color:var(--light-primary-color)] hover:ant-bg-[var(--light-primary-color)] active:ant-[border-color:var(--dark-primary-color)] active:ant-bg-[var(--dark-primary-color)]',
     ),
   dashed: (danger: boolean) =>
     cs(
@@ -81,11 +81,12 @@ const Button: Component<ButtonProps> = props => {
       ref={mergedProps.ref}
       class={cs(
         'ant-relative ant-cursor-pointer',
+        'focus-visible:ant-[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:ant-[outline-offset:1px]',
         mergedProps.class,
         sizeClassMap[mergedProps.size!],
         typeClassMap[mergedProps.type!](props.danger ?? false),
         loading() && 'ant-opacity-65',
-        'ant-[--color:--light-primary-color]'
+        'ant-[--color:--light-primary-color]',
       )}
       style={mergedProps.style}
       onClick={e => {
@@ -102,7 +103,9 @@ const Button: Component<ButtonProps> = props => {
         ) {
           const div = document.createElement('div')
           div.className = cs(
-            props.danger ? 'ant-[--color:var(--light-error-color)]' : 'ant-[--color:var(--light-primary-color)]',
+            props.danger
+              ? 'ant-[--color:var(--light-error-color)]'
+              : 'ant-[--color:var(--light-primary-color)]',
             'ant-absolute ant-inset-0 ant-rounded-inherit ant-[background:radial-gradient(var(--color),rgba(0,0,0,0))] ant-z--1 ant-keyframes-button-border[inset:0px][inset:-6px] ant-[animation:button-border_ease-out_0.3s]',
           )
           const onAnimationEnd = () => {

package/src/Drawer/index.scss

@@ -0,0 +1,53 @@
+.ant-drawer-content-right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.ant-drawer-content-left {
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.ant-drawer-content-top {
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+.ant-drawer-content-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.ant-drawer-fade-enter-active,
+.ant-drawer-fade-exit-active {
+  transition: opacity .3s;
+
+  .ant-drawer-content {
+    transition: transform .3s;
+  }
+}
+
+.ant-drawer-fade-enter,
+.ant-drawer-fade-exit-to {
+  opacity: 0;
+
+  .ant-drawer-content-right {
+    transform: translateX(100%);
+  }
+
+  .ant-drawer-content-left {
+    transform: translateX(-100%);
+  }
+
+  .ant-drawer-content-top {
+    transform: translateY(-100%);
+  }
+
+  .ant-drawer-content-bottom {
+    transform: translateY(100%);
+  }
+}