antd-solid 0.0.11 → 0.0.13

package/es/Collapse/index.d.ts

@@ -1,16 +1,31 @@
-import { type JSX, type JSXElement, type Component } from 'solid-js';
-import { type Key } from '../types';
-export interface CollapseItem {
+import { type Component, type JSX } from 'solid-js';
+import { type StringOrJSXElement, type Key, type StyleProps } from '../types';
+import CollapseItemComponent, { type CollapseItemProps } from './Item';
+export interface CollapseItem extends StyleProps {
     key: Key;
-    label: JSXElement;
-    children: JSXElement;
+    label: StringOrJSXElement;
+    children: StringOrJSXElement;
+    /**
+     * 自定义渲染每个面板右上角的内容
+     */
+    extra?: StringOrJSXElement;
+    /**
+     * 是否禁用 children
+     */
+    disabledChildren?: boolean;
 }
-export interface CollapseProps {
-    class?: string;
+export interface CollapseProps extends StyleProps, Pick<CollapseItemProps, 'bordered' | 'size' | 'type' | 'expandIcon' | 'expandIconPosition' | 'headerStyle' | 'bodyStyle'> {
     defaultActiveKey?: Key[];
     activeKey?: Key[];
-    items: CollapseItem[];
-    style?: JSX.CSSProperties;
+    /**
+     * 切换面板的回调
+     */
+    onChange?: (value: Key[]) => void;
+    items: CollapseItem[] | undefined | null;
+    fallback?: JSX.Element;
+    divider?: boolean;
 }
-declare const Collapse: Component<CollapseProps>;
+declare const Collapse: Component<CollapseProps> & {
+    Item: typeof CollapseItemComponent;
+};
 export default Collapse;

package/es/Collapse/index.js

@@ -1,87 +1,108 @@
-import { delegateEvents, insert, createComponent, effect, className, style, template } from 'solid-js/web';
-import { For, Show } from 'solid-js';
+import { createComponent, effect, className, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { mergeProps, Show, For } from 'solid-js';
 import cs from 'classnames';
-import { Transition } from 'solid-transition-group';
+import { isEmpty } from 'lodash-es';
 import createControllableValue from '../hooks/createControllableValue.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import Element from '../Element/index.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+import CollapseItem from './Item.js';
+import CollapseContext from './context.js';
+import { getElementClass, getElementCssVariables } from './utils.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-overflow-hidden"><div class="ant-p-[var(--ant-padding-sm)] ant-[border-top:1px_solid_var(--ant-color-border)]">`),
-  _tmpl$3 = /*#__PURE__*/template(`<div class="ant-[border-bottom:1px_solid_var(--ant-color-border)] first:ant-rounded-t-[var(--ant-border-radius-lg)] last:ant-rounded-b-[var(--ant-border-radius-lg)] ant-cursor-pointer"><div class="ant-bg-[var(--ant-collapse-header-bg)] ant-text-[var(--ant-color-text-heading)] ant-p-[var(--ant-collapse-header-padding)]"><span>`);
-const Collapse = props => {
+var _tmpl$ = /*#__PURE__*/template(`<div>`);
+const Collapse = _props => {
+  const props = mergeProps({
+    divider: true,
+    type: 'line'
+  }, _props);
+  const size = useComponentSize(() => props.size);
   const [activeKey, setActiveKey] = createControllableValue(props, {
     defaultValuePropName: 'defaultActiveKey',
     valuePropName: 'activeKey',
     defaultValue: []
   });
-  return (() => {
-    const _el$ = _tmpl$();
-    insert(_el$, createComponent(For, {
-      get each() {
-        return props.items;
-      },
-      children: item => (() => {
-        const _el$2 = _tmpl$3(),
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.firstChild;
-        _el$3.$$click = () => {
-          setActiveKey(keys => {
-            if (keys.includes(item.key)) {
-              return keys.filter(key => key !== item.key);
+  return createComponent(Show, {
+    get when() {
+      return !isEmpty(props.items);
+    },
+    get fallback() {
+      return props.fallback;
+    },
+    get children() {
+      return createComponent(Element, {
+        get ["class"]() {
+          return cs(getElementClass(props.type), props.class);
+        },
+        get style() {
+          return {
+            ...getElementCssVariables(props.type, size()),
+            ...props.style
+          };
+        },
+        get children() {
+          return createComponent(CollapseContext.Provider, {
+            value: {
+              list: true
+            },
+            get children() {
+              return createComponent(For, {
+                get each() {
+                  return props.items;
+                },
+                children: (item, index) => [createComponent(Show, {
+                  get when() {
+                    return index() !== 0 && props.divider;
+                  },
+                  get children() {
+                    var _el$ = _tmpl$();
+                    effect(() => className(_el$, cs('h-1px bg-[var(--ant-color-split)]', props.type === 'line' && 'm-[--ant-collapse-divider-margin]')));
+                    return _el$;
+                  }
+                }), createComponent(CollapseItem, mergeProps$1(item, {
+                  get open() {
+                    return activeKey().includes(item.key);
+                  },
+                  onOpenChange: open => {
+                    if (open) {
+                      setActiveKey([...activeKey(), item.key]);
+                    } else {
+                      setActiveKey(activeKey().filter(key => key !== item.key));
+                    }
+                  },
+                  get size() {
+                    return size();
+                  },
+                  get type() {
+                    return props.type;
+                  },
+                  get bordered() {
+                    return props.bordered;
+                  },
+                  get expandIcon() {
+                    return props.expandIcon;
+                  },
+                  get expandIconPosition() {
+                    return props.expandIconPosition;
+                  },
+                  get headerStyle() {
+                    return props.headerStyle;
+                  },
+                  get bodyStyle() {
+                    return props.bodyStyle;
+                  },
+                  get children() {
+                    return unwrapStringOrJSXElement(item.children);
+                  }
+                }))]
+              });
             }
-            return [...keys, item.key];
           });
-        };
-        insert(_el$3, () => item.label, null);
-        insert(_el$2, createComponent(Transition, {
-          onEnter: (el, done) => {
-            el.animate([{
-              height: '0px'
-            }, {
-              height: `${el.scrollHeight}px`
-            }], {
-              duration: 300
-            }).finished.finally(done);
-          },
-          onExit: (el, done) => {
-            el.animate([{
-              height: `${el.scrollHeight}px`
-            }, {
-              height: '0px'
-            }], {
-              duration: 300
-            }).finished.finally(done);
-          },
-          get children() {
-            return createComponent(Show, {
-              get when() {
-                return activeKey().includes(item.key);
-              },
-              get children() {
-                const _el$5 = _tmpl$2(),
-                  _el$6 = _el$5.firstChild;
-                insert(_el$6, () => item.children);
-                return _el$5;
-              }
-            });
-          }
-        }), null);
-        effect(() => className(_el$4, cs('i-ant-design:right-outlined', 'ant-mr-[var(--ant-margin-sm)] ant-duration-.3s', activeKey().includes(item.key) && 'ant-rotate-[90deg]')));
-        return _el$2;
-      })()
-    }));
-    effect(_p$ => {
-      const _v$ = cs('ant-rounded-[var(--ant-border-radius-lg)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-b-0', props.class),
-        _v$2 = props.style;
-      _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$;
-  })();
+        }
+      });
+    }
+  });
 };
-delegateEvents(["click"]);
+Collapse.Item = CollapseItem;
 
 export { Collapse as default };

package/es/Collapse/utils.d.ts

@@ -0,0 +1,8 @@
+import { type CollapseItemProps } from './Item';
+export declare function getElementClass(type: CollapseItemProps['type']): string;
+export declare function getElementCssVariables(type: CollapseItemProps['type'], size: Exclude<CollapseItemProps['size'], undefined>): {
+    '--ant-collapse-header-padding': string;
+    '--ant-collapse-content-padding': string;
+    '--ant-collapse-divider-margin': string;
+    '--ant-collapse-border-radius': string;
+};

package/es/Collapse/utils.js

@@ -0,0 +1,35 @@
+import cs from 'classnames';
+
+function getElementClass(type) {
+  return cs('[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)] rounded-[var(--ant-collapse-border-radius)] overflow-hidden', type === 'card' && '[border:1px_solid_var(--ant-color-border)]');
+}
+function getElementCssVariables(type, size) {
+  return {
+    '--ant-collapse-header-padding': {
+      small: 'var(--ant-padding-xs) var(--ant-padding-sm)',
+      middle: 'var(--ant-padding-sm) var(--ant-padding)',
+      large: 'var(--ant-padding) var(--ant-padding-lg)'
+    }[size],
+    '--ant-collapse-content-padding': type === 'line' ? {
+      small: 'var(--ant-padding-sm) 0 0 0',
+      middle: 'var(--ant-padding) 0 0 0',
+      large: 'var(--ant-padding-lg) 0 0 0'
+    }[size] : {
+      small: 'var(--ant-padding-sm)',
+      middle: 'var(--ant-padding)',
+      large: 'var(--ant-padding-lg)'
+    }[size],
+    '--ant-collapse-divider-margin': {
+      small: 'var(--ant-margin-sm) 0',
+      middle: 'var(--ant-margin) 0',
+      large: 'var(--ant-margin-lg) 0'
+    }[size],
+    '--ant-collapse-border-radius': {
+      small: 'var(--ant-border-radius-sm)',
+      middle: 'var(--ant-border-radius)',
+      large: 'var(--ant-border-radius-lg)'
+    }[size]
+  };
+}
+
+export { getElementClass, getElementCssVariables };

package/es/ColorPicker/ColorPickerInput.d.ts

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

package/es/ColorPicker/ColorPickerInput.js

@@ -0,0 +1,250 @@
+import { insert, createComponent, template } from 'solid-js/web';
+import { useContext, createMemo, createSignal, createRenderEffect, Switch, Match, Show } from 'solid-js';
+import ColorPickerContext from './context.js';
+import Select from '../Select/index.js';
+import Input from '../Input/index.js';
+import InputNumber from '../InputNumber/index.js';
+import Color from './color.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex grow-1 gap-[var(--ant-margin-xxs)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class=flex>`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class=text-[--ant-color-text-placeholder]>#`);
+const ColorPickerInput = () => {
+  const context = useContext(ColorPickerContext);
+  const color = createMemo(() => context?.color() ?? new Color());
+  const [type, setType] = createSignal('HEX');
+  const [hexInputValue, setHexInputValue] = createSignal('');
+  createRenderEffect(() => {
+    setHexInputValue(color().toHex());
+  });
+  return (() => {
+    var _el$ = _tmpl$2();
+    insert(_el$, createComponent(Select, {
+      get value() {
+        return type();
+      },
+      onChange: setType,
+      options: [{
+        label: 'HEX',
+        value: 'HEX'
+      }, {
+        label: 'HSV',
+        value: 'HSV'
+      }, {
+        label: 'RGB',
+        value: 'RGB'
+      }],
+      size: "small",
+      variant: "borderless",
+      style: {
+        'margin-right': 'var(--ant-margin-xs)',
+        '--ant-select-font-size': '12px',
+        '--ant-select-input-padding': '0',
+        '--ant-select-input-addon-after-padding': '0 0 0 var(--ant-padding-xxs)',
+        '--ant-select-popup-match-width': '60px'
+      }
+    }), null);
+    insert(_el$, createComponent(Switch, {
+      get children() {
+        return [createComponent(Match, {
+          get when() {
+            return type() === 'HEX';
+          },
+          get children() {
+            return createComponent(Input, {
+              size: "small",
+              get value() {
+                return hexInputValue();
+              },
+              onChange: e => {
+                const value = e.target.value.replace(/[^a-zA-Z0-9]/g, '');
+                if (value.length > 6) return;
+                setHexInputValue(value);
+                if (value.length !== 6) return;
+                const c = new Color(value);
+                if (!c.isValid) return;
+                context?.setColor(new Color(value).setAlpha(color().a));
+              },
+              onBlur: () => {
+                setHexInputValue(color().toHex());
+                context?.setColor(color(), true);
+              },
+              get prefix() {
+                return _tmpl$3();
+              },
+              style: {
+                '--ant-input-font-size': '12px'
+              }
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return type() === 'HSV';
+          },
+          get children() {
+            var _el$2 = _tmpl$();
+            insert(_el$2, createComponent(InputNumber, {
+              size: "small",
+              get value() {
+                return Math.round(color().toHsv().h);
+              },
+              onChange: value => {
+                const hsv = color().toHsv();
+                hsv.h = value ?? 0;
+                context?.setColor(new Color(hsv));
+              },
+              onBlur: () => {
+                context?.setColor(color(), true);
+              },
+              min: 0,
+              max: 359,
+              precision: 0,
+              style: InputNumberStyle
+            }), null);
+            insert(_el$2, createComponent(InputNumber, {
+              size: "small",
+              get value() {
+                return Math.round(color().toHsv().s * 100);
+              },
+              onChange: value => {
+                const hsv = color().toHsv();
+                hsv.s = (value ?? 0) / 100;
+                context?.setColor(new Color(hsv));
+              },
+              onBlur: () => {
+                context?.setColor(color(), true);
+              },
+              min: 0,
+              max: 100,
+              precision: 0,
+              formatter: value => `${value || 0}%`,
+              style: InputNumberStyle
+            }), null);
+            insert(_el$2, createComponent(InputNumber, {
+              size: "small",
+              get value() {
+                return Math.round(color().toHsv().v * 100);
+              },
+              onChange: value => {
+                const hsv = color().toHsv();
+                hsv.v = (value ?? 0) / 100;
+                context?.setColor(new Color(hsv));
+              },
+              onBlur: () => {
+                context?.setColor(color(), true);
+              },
+              min: 0,
+              max: 100,
+              precision: 0,
+              formatter: value => `${value || 0}%`,
+              style: InputNumberStyle
+            }), null);
+            return _el$2;
+          }
+        }), createComponent(Match, {
+          get when() {
+            return type() === 'RGB';
+          },
+          get children() {
+            var _el$3 = _tmpl$();
+            insert(_el$3, createComponent(InputNumber, {
+              size: "small",
+              get value() {
+                return Math.round(color().r);
+              },
+              onChange: value => {
+                const rgb = color().toRgb();
+                rgb.r = value ?? 0;
+                context?.setColor(new Color(rgb));
+              },
+              onBlur: () => {
+                context?.setColor(color(), true);
+              },
+              min: 0,
+              max: 255,
+              precision: 0,
+              style: InputNumberStyle
+            }), null);
+            insert(_el$3, createComponent(InputNumber, {
+              size: "small",
+              get value() {
+                return Math.round(color().g);
+              },
+              onChange: value => {
+                const rgb = color().toRgb();
+                rgb.g = value ?? 0;
+                context?.setColor(new Color(rgb));
+              },
+              onBlur: () => {
+                context?.setColor(color(), true);
+              },
+              min: 0,
+              max: 255,
+              precision: 0,
+              style: InputNumberStyle
+            }), null);
+            insert(_el$3, createComponent(InputNumber, {
+              size: "small",
+              get value() {
+                return Math.round(color().b);
+              },
+              onChange: value => {
+                const rgb = color().toRgb();
+                rgb.b = value ?? 0;
+                context?.setColor(new Color(rgb));
+              },
+              onBlur: () => {
+                context?.setColor(color(), true);
+              },
+              min: 0,
+              max: 255,
+              precision: 0,
+              style: InputNumberStyle
+            }), null);
+            return _el$3;
+          }
+        })];
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !context?.disabledAlpha();
+      },
+      get children() {
+        return createComponent(InputNumber, {
+          get value() {
+            return Math.round(color().a * 100);
+          },
+          onChange: value => {
+            context?.setColor(color().clone().setAlpha((value ?? 0) / 100));
+          },
+          onBlur: () => {
+            context?.setColor(color(), true);
+          },
+          size: "small",
+          min: 0,
+          max: 100,
+          precision: 0,
+          formatter: value => `${value || 0}%`,
+          get style() {
+            return {
+              ...InputNumberStyle,
+              'margin-left': 'var(--ant-margin-xxs)'
+            };
+          }
+        });
+      }
+    }), null);
+    return _el$;
+  })();
+};
+const InputNumberStyle = {
+  width: '43px',
+  'flex-shrink': 0,
+  'flex-grow': 1,
+  '--ant-input-number-handle-width': '16px',
+  '--ant-input-padding': '0 0 0 4px',
+  '--ant-input-font-size': '12px'
+};
+
+export { ColorPickerInput as default };

package/es/ColorPicker/ColorPickerSelect.d.ts

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

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;