antd-solid 0.0.12 → 0.0.13

package/es/Collapse/Item.js

@@ -0,0 +1,130 @@
+import { delegateEvents, createComponent, Dynamic, insert, effect, className, style, template, memo } from 'solid-js/web';
+import { mergeProps, useContext, Show } from 'solid-js';
+import cs from 'classnames';
+import { Transition } from 'solid-transition-group';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Element from '../Element/index.js';
+import CollapseContext from './context.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+import { getElementClass, getElementCssVariables } from './utils.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><span class="inline-flex items-center gap-[--ant-margin-sm]"></span><span class="inline-flex items-center gap-[--ant-margin-sm]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class=overflow-hidden><div>`);
+const CollapseItem = _props => {
+  const props = mergeProps({
+    type: 'line',
+    bordered: true,
+    expandIconPosition: 'left'
+  }, _props);
+  const {
+    list
+  } = useContext(CollapseContext);
+  const size = useComponentSize(() => props.size);
+  const [open, setOpen] = createControllableValue(props, {
+    defaultValuePropName: 'defaultOpen',
+    valuePropName: 'open',
+    trigger: 'onOpenChange'
+  });
+  const getExpandIcon = position => {
+    return createComponent(Show, {
+      get when() {
+        return !props.disabledChildren && props.expandIcon !== false && props.expandIconPosition === position;
+      },
+      get children() {
+        return memo(() => typeof props.expandIcon === 'function')() ? props.expandIcon({
+          isActive: () => !!open()
+        }) : (() => {
+          var _el$ = _tmpl$();
+          effect(() => className(_el$, cs('i-ant-design:right-outlined', 'duration-.3s', open() && 'rotate-[90deg]')));
+          return _el$;
+        })();
+      }
+    });
+  };
+  return createComponent(Dynamic, {
+    component: list ? 'div' : Element,
+    get ["class"]() {
+      return list ? props.class : cs(getElementClass(props.type), props.class);
+    },
+    get style() {
+      return {
+        ...(list ? {} : getElementCssVariables(props.type, size())),
+        ...props.style
+      };
+    },
+    get children() {
+      return [(() => {
+        var _el$2 = _tmpl$2(),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling;
+        _el$2.$$click = () => {
+          if (props.disabledChildren) return;
+          setOpen(!open());
+        };
+        insert(_el$3, () => getExpandIcon('left'), null);
+        insert(_el$3, () => unwrapStringOrJSXElement(props.label), null);
+        insert(_el$3, () => getExpandIcon('right'), null);
+        insert(_el$4, () => unwrapStringOrJSXElement(props.extra), null);
+        insert(_el$4, () => getExpandIcon('end'), null);
+        effect(_p$ => {
+          var _v$ = cs('text-[--ant-color-text-heading] flex justify-between items-center cursor-pointer', props.type === 'card' && 'bg-[var(--ant-collapse-header-bg)] p-[--ant-collapse-header-padding]'),
+            _v$2 = props.headerStyle;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _p$.t = style(_el$2, _v$2, _p$.t);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _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 open();
+            },
+            get children() {
+              var _el$5 = _tmpl$3(),
+                _el$6 = _el$5.firstChild;
+              insert(_el$6, () => props.children);
+              effect(_p$ => {
+                var _v$3 = cs('p-[--ant-collapse-content-padding]', props.type === 'card' && '[border-top:1px_solid_var(--ant-color-border)]'),
+                  _v$4 = props.bodyStyle;
+                _v$3 !== _p$.e && className(_el$6, _p$.e = _v$3);
+                _p$.t = style(_el$6, _v$4, _p$.t);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$5;
+            }
+          });
+        }
+      })];
+    }
+  });
+};
+delegateEvents(["click"]);
+
+export { CollapseItem as default };

package/es/Collapse/context.d.ts

@@ -0,0 +1,5 @@
+declare const CollapseContext: import("solid-js").Context<{
+    /** 是否时手风琴列表 */
+    list: boolean;
+}>;
+export default CollapseContext;

package/es/Collapse/context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'solid-js';
+
+const CollapseContext = createContext({
+  /** 是否时手风琴列表 */
+  list: false
+});
+
+export { CollapseContext as default };

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;