antd-solid 0.0.6 → 0.0.8

package/es/Progress.js

@@ -0,0 +1,6 @@
+import { Progress as Progress$1 } from 'antd';
+import { replaceChildren, replaceClassName, reactToSolidComponent } from './utils/component.js';
+
+var Progress = replaceChildren(replaceClassName(reactToSolidComponent(Progress$1)));
+
+export { Progress as default };

package/es/Radio.d.ts

@@ -0,0 +1,27 @@
+import { type Component, type JSXElement, type ParentProps, type JSX } from 'solid-js';
+export interface RadioProps extends ParentProps {
+    defaultChecked?: boolean;
+    checked?: boolean;
+    /**
+     * input 的 value
+     */
+    value?: string;
+    onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>;
+}
+export interface RadioGroupProps {
+    defaultValue?: string;
+    value?: string;
+    onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>;
+    optionType?: 'default' | 'button';
+    options: Array<{
+        label: JSXElement;
+        value: string;
+        disabled?: boolean;
+    }>;
+    block?: boolean;
+}
+declare const Radio: Component<RadioProps> & {
+    Group: Component<RadioGroupProps>;
+    Button: Component<RadioProps>;
+};
+export default Radio;

package/es/Radio.js

@@ -0,0 +1,89 @@
+import { delegateEvents, insert, effect, className, createComponent, Dynamic, template } from 'solid-js/web';
+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">`),
+  _tmpl$2 = /*#__PURE__*/template(`<label><input class="ant-w-0 ant-h-0" type="radio">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div>`);
+const Radio = props => {
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked',
+    trigger: undefined
+  });
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _el$2.$$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 ?? '');
+    return _el$;
+  })();
+};
+Radio.Button = props => {
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked',
+    trigger: undefined
+  });
+  return (() => {
+    const _el$3 = _tmpl$2(),
+      _el$4 = _el$3.firstChild;
+    _el$4.$$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;
+  })();
+};
+Radio.Group = _props => {
+  const props = mergeProps({
+    optionType: 'default'
+  }, _props);
+  const [value, setValue] = createControllableValue(props, {
+    trigger: undefined
+  });
+  const isChecked = createSelector(value);
+  return (() => {
+    const _el$5 = _tmpl$3();
+    insert(_el$5, createComponent(For, {
+      get each() {
+        return props.options;
+      },
+      children: option => createComponent(Dynamic, {
+        get component() {
+          return props.optionType === 'default' ? Radio : Radio.Button;
+        },
+        get checked() {
+          return isChecked(option.value);
+        },
+        get value() {
+          return option.value;
+        },
+        onChange: e => {
+          setValue(option.value);
+          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;
+  })();
+};
+delegateEvents(["input"]);
+
+export { Radio as default };

package/es/Result.d.ts

@@ -0,0 +1,10 @@
+import { type JSXElement, type Component, type ParentProps } from 'solid-js';
+type ResultStatusType = 'success' | 'error' | 'info' | 'warning';
+export interface ResultProps extends ParentProps {
+    status?: ResultStatusType;
+    title?: JSXElement;
+    subTitle?: JSXElement;
+    extra?: JSXElement;
+}
+declare const Result: Component<ResultProps>;
+export default Result;

package/es/Result.js

@@ -0,0 +1,29 @@
+import { insert, effect, className, template } from 'solid-js/web';
+import cs from 'classnames';
+
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-text-center ant-px-32px ant-py-48px"><div class="ant-mb-24px"><span></span></div><div class="ant-my-8px ant-text-[rgba(0,0,0,.88)] ant-text-24px"></div><div class="ant-text-[rgba(0,0,0,.45)] ant-text-14px"></div><div class="ant-mt-24px"></div><div class="ant-mt-24px">`);
+const statusIconMap = {
+  success: 'ant-text-#52c41a i-ant-design:check-circle-filled',
+  info: 'ant-text-[var(--primary-color)] i-ant-design:exclamation-circle-filled',
+  warning: 'ant-text-#faad14 i-ant-design:warning-filled',
+  error: 'ant-text-#ff4d4f i-ant-design:close-circle-filled'
+};
+const Result = props => {
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$2.nextSibling,
+      _el$5 = _el$4.nextSibling,
+      _el$6 = _el$5.nextSibling,
+      _el$7 = _el$6.nextSibling;
+    insert(_el$4, () => props.title);
+    insert(_el$5, () => props.subTitle);
+    insert(_el$6, () => props.extra);
+    insert(_el$7, () => props.children);
+    effect(() => className(_el$3, cs(statusIconMap[props.status], 'ant-text-72px')));
+    return _el$;
+  })();
+};
+
+export { Result as default };

package/es/Segmented/index.d.ts

@@ -0,0 +1,21 @@
+import { type Component, type JSX } from 'solid-js';
+import { type StringOrJSXElement, type Key } from '../types';
+export interface SegmentedProps {
+    block?: boolean;
+    disabled?: boolean;
+    options: Array<string | number | {
+        label: StringOrJSXElement;
+        value: string;
+        disabled?: boolean;
+        onClick?: (e: MouseEvent & {
+            currentTarget: HTMLDivElement;
+            target: Element;
+        }) => void;
+    }>;
+    value?: Key;
+    onChange?: (value: Key) => void;
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+declare const Segmented: Component<SegmentedProps>;
+export default Segmented;

package/es/Segmented/index.js

@@ -0,0 +1,72 @@
+import { delegateEvents, insert, createComponent, effect, className, style, template } from 'solid-js/web';
+import { createSelector, For, Show } from 'solid-js';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div>`);
+const unWarpValue = value => typeof value === 'object' ? value.value : value;
+const Segmented = props => {
+  const [value, setValue] = createControllableValue(props, {
+    defaultValue: unWarpValue(props.options[0])
+  });
+  const isSelected = createSelector(value);
+  const isDisabledValue = v => {
+    if (props.disabled) return true;
+    return typeof v === 'object' ? v.disabled : false;
+  };
+  return (() => {
+    const _el$ = _tmpl$();
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.options;
+      },
+      children: item => (() => {
+        const _el$2 = _tmpl$2(),
+          _el$3 = _el$2.firstChild;
+        _el$3.$$click = e => {
+          setValue(unWarpValue(item));
+          typeof item === 'object' && item.onClick?.(e);
+        };
+        insert(_el$3, createComponent(Show, {
+          when: typeof item !== 'object',
+          get fallback() {
+            return typeof item === 'object' && unwrapStringOrJSXElement(item.label);
+          },
+          children: item
+        }));
+        effect(_p$ => {
+          const _v$3 = cs(props.block && 'ant-basis-0 ant-grow-1', isDisabledValue(item) && 'ant-cursor-not-allowed'),
+            _v$4 = cs('ant-rounded-[var(--ant-border-radius-sm)] ant-px-[var(--ant-padding-sm)] where:ant-cursor-pointer ant-leading-28px where:hover:ant-bg-[var(--ant-segmented-item-hover-bg)] where:active:ant-bg-[var(--ant-segmented-item-active-bg)]', isSelected(unWarpValue(item)) && 'ant-bg-white ant-shadow-[var(--ant-box-shadow-tertiary)]', props.block && 'ant-flex ant-justify-center', isDisabledValue(item) && 'ant-[pointer-events:none] ant-text-[var(--ant-color-text-disabled)]');
+          _v$3 !== _p$._v$3 && className(_el$2, _p$._v$3 = _v$3);
+          _v$4 !== _p$._v$4 && className(_el$3, _p$._v$4 = _v$4);
+          return _p$;
+        }, {
+          _v$3: undefined,
+          _v$4: undefined
+        });
+        return _el$2;
+      })()
+    }));
+    effect(_p$ => {
+      const _v$ = cs('ant-bg-[var(--ant-color-bg-layout)] ant-rounded-[var(--ant-border-radius)] ant-p-2px', props.block ? 'ant-flex' : 'ant-inline-flex', props.class),
+        _v$2 = {
+          '--ant-segmented-item-color': 'rgba(0, 0, 0, 0.65)',
+          '--ant-segmented-item-hover-bg': 'rgba(0, 0, 0, 0.06)',
+          '--ant-segmented-item-active-bg': 'rgba(0, 0, 0, 0.15)',
+          ...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"]);
+
+export { Segmented as default };

package/es/Select.d.ts

@@ -0,0 +1,16 @@
+import { type JSXElement, type Component } from 'solid-js';
+import { type Key } from './types';
+interface SelectOption {
+    label: JSXElement;
+    value: Key;
+}
+interface SelectProps {
+    value?: Key;
+    onChange?: (value: Key) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    allowClear?: boolean;
+    class?: string;
+}
+declare const Select: Component<SelectProps>;
+export default Select;

package/es/Select.js

@@ -0,0 +1,113 @@
+import { delegateEvents, createComponent, insert, effect, className, use, setAttribute, template } from 'solid-js/web';
+import { createSelector, createMemo, createSignal, For, Show } from 'solid-js';
+import Tooltip from './Tooltip.js';
+import createControllableValue from './hooks/createControllableValue.js';
+import cs from 'classnames';
+import useClickAway from './hooks/useClickAway.js';
+import { isNil } from 'lodash-es';
+
+const _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled ant-cursor-pointer ant-text-[var(--ant-clear-color)] hover:ant-text-[var(--ant-clear-color-hover)]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div tabindex="0"><div class="ant-relative ant-h-full"><div class="ant-absolute ant-top-0 ant-bottom-0 ant-right-0">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="ant-bg-white ant-w-200px">`),
+  _tmpl$5 = /*#__PURE__*/template(`<input class="ant-h-full ant-w-full ant-float-left ant-[outline:none]" readonly>`),
+  _tmpl$6 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined ant-text-[var(--ant-allow-color)]">`);
+const Select = props => {
+  let select;
+  const [value, setValue] = createControllableValue(props);
+  const selectedValue = createSelector(value);
+  const selectedOption = createMemo(() => !isNil(value()) ? props.options.find(option => option.value === value()) : undefined);
+  const [open, setOpen] = createSignal(false);
+  useClickAway(() => setOpen(false), () => select);
+  const [width, setWidth] = createSignal(0);
+  const [hover, setHover] = createSignal(false);
+  const showClearBtn = createMemo(() => props.allowClear && hover() && !isNil(value()));
+  return createComponent(Tooltip, {
+    mode: "light",
+    get open() {
+      return open();
+    },
+    onOpenChange: setOpen,
+    trigger: [],
+    placement: "bottomLeft",
+    arrow: false,
+    contentStyle: {
+      padding: 0
+    },
+    content: close => (() => {
+      const _el$6 = _tmpl$4();
+      insert(_el$6, createComponent(For, {
+        get each() {
+          return props.options;
+        },
+        children: item => (() => {
+          const _el$7 = _tmpl$();
+          _el$7.$$click = () => {
+            setValue(item.value);
+            close();
+          };
+          insert(_el$7, () => item.label);
+          effect(() => className(_el$7, cs('ant-box-content ant-px-12px ant-py-5px ant-h-22px ant-leading-22px hover:ant-bg-[var(--hover-bg-color)]', selectedValue(item.value) ? '!ant-bg-[var(--active-bg-color)]' : '')));
+          return _el$7;
+        })()
+      }));
+      effect(() => `${width()}px` != null ? _el$6.style.setProperty("width", `${width()}px`) : _el$6.style.removeProperty("width"));
+      return _el$6;
+    })(),
+    get children() {
+      const _el$ = _tmpl$3(),
+        _el$2 = _el$.firstChild,
+        _el$4 = _el$2.firstChild;
+      _el$.addEventListener("mouseleave", () => setHover(false));
+      _el$.addEventListener("mouseenter", () => setHover(true));
+      _el$.$$click = e => {
+        setOpen(true);
+        setWidth(e.currentTarget.offsetWidth);
+        e.currentTarget.focus();
+      };
+      const _ref$ = select;
+      typeof _ref$ === "function" ? use(_ref$, _el$) : select = _el$;
+      _el$.style.setProperty("--ant-arrow-color", "rgba(146, 146, 146, 1)");
+      _el$.style.setProperty("--ant-clear-color", "rgba(146, 146, 146, 1)");
+      _el$.style.setProperty("--ant-clear-color-hover", "rgba(194, 194, 194, 1)");
+      insert(_el$2, createComponent(Show, {
+        get when() {
+          return !isNil(value());
+        },
+        get fallback() {
+          return (() => {
+            const _el$8 = _tmpl$5();
+            effect(() => setAttribute(_el$8, "placeholder", props.placeholder));
+            return _el$8;
+          })();
+        },
+        get children() {
+          const _el$3 = _tmpl$();
+          insert(_el$3, () => selectedOption().label ?? value());
+          return _el$3;
+        }
+      }), _el$4);
+      insert(_el$4, createComponent(Show, {
+        get when() {
+          return showClearBtn();
+        },
+        get fallback() {
+          return _tmpl$6();
+        },
+        get children() {
+          const _el$5 = _tmpl$2();
+          _el$5.$$click = e => {
+            e.stopPropagation();
+            setValue(undefined);
+          };
+          return _el$5;
+        }
+      }));
+      effect(() => className(_el$, cs('ant-h-32px ant-leading-32px ant-rounded-6px ant-[border:1px_solid_var(--ant-color-border)] ant-px-11px focus:ant-[border-color:var(--primary-color)]', props.class)));
+      return _el$;
+    }
+  });
+};
+delegateEvents(["click"]);
+
+export { Select as default };

package/es/Skeleton.d.ts

@@ -0,0 +1,9 @@
+declare const Image: import("solid-js").Component<Omit<import("antd/es/skeleton/Image").SkeletonImageProps, "className"> & {
+    class?: string | undefined;
+}>;
+declare const Skeleton: import("solid-js").Component<Omit<import("antd").SkeletonProps, "className"> & {
+    class?: string | undefined;
+}> & {
+    Image: typeof Image;
+};
+export default Skeleton;

package/es/Skeleton.js

@@ -0,0 +1,9 @@
+import { Skeleton as Skeleton$1 } from 'antd';
+import { replaceClassName, reactToSolidComponent } from './utils/component.js';
+
+const _Skeleton = replaceClassName(reactToSolidComponent(Skeleton$1));
+const Image = replaceClassName(reactToSolidComponent(Skeleton$1.Image));
+const Skeleton = _Skeleton;
+Skeleton.Image = Image;
+
+export { Skeleton as default };

package/es/Spin.d.ts

@@ -0,0 +1,9 @@
+import { type Component, type ParentProps } from 'solid-js';
+interface SpinProps extends ParentProps {
+    /**
+     * 是否为加载中状态
+     */
+    spinning?: boolean;
+}
+declare const Spin: Component<SpinProps>;
+export default Spin;

package/es/Spin.js

@@ -0,0 +1,22 @@
+import { insert, createComponent, template } from 'solid-js/web';
+import { Show } from 'solid-js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-absolute ant-inset-0 ant-flex ant-items-center ant-justify-center ant-bg-[rgba(255,255,255,.5)]"><span class="i-ant-design:loading keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-text-32px ant-text-[var(--primary-color)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-relative ant-min-h-32px">`);
+const Spin = props => {
+  return (() => {
+    const _el$ = _tmpl$2();
+    insert(_el$, () => props.children, null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.spinning;
+      },
+      get children() {
+        return _tmpl$();
+      }
+    }), null);
+    return _el$;
+  })();
+};
+
+export { Spin as default };

package/es/Switch.d.ts

@@ -0,0 +1,8 @@
+import { type Component } from 'solid-js';
+export interface SwitchProps {
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+declare const Switch: Component<SwitchProps>;
+export default Switch;

package/es/Switch.js

@@ -0,0 +1,30 @@
+import { delegateEvents, effect, className, template } from 'solid-js/web';
+import createControllableValue from './hooks/createControllableValue.js';
+import cs from 'classnames';
+
+const _tmpl$ = /*#__PURE__*/template(`<button><div>`);
+const Switch = props => {
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked'
+  });
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _el$.$$click = () => setChecked(c => !c);
+    effect(_p$ => {
+      const _v$ = cs('ant-w-44px ant-h-22px ant-rounded-100px ant-relative', checked() ? 'ant-bg-[var(--primary-color)]' : 'ant-bg-[rgba(0,0,0,0.45)]'),
+        _v$2 = cs('ant-w-18px ant-h-18px ant-rounded-50% ant-bg-white ant-absolute ant-top-1/2 -ant-translate-y-1/2 ant-transition-left', checked() ? 'ant-left-[calc(100%-20px)]' : 'ant-left-2px');
+      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && className(_el$2, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+
+export { Switch as default };

package/es/Table.d.ts

@@ -0,0 +1,11 @@
+import { type JSXElement } from 'solid-js';
+export interface TableColumn<R extends {}> {
+    title: JSXElement;
+    render: (row: R) => JSXElement;
+}
+export interface TableProps<R extends {}> {
+    columns: Array<TableColumn<R>>;
+    dataSource: R[];
+}
+declare const Table: <R extends {}>(props: TableProps<R>) => import("solid-js").JSX.Element;
+export default Table;

package/es/Table.js

@@ -0,0 +1,57 @@
+import { insert, createComponent, template } from 'solid-js/web';
+import Empty from './Empty/index.js';
+import { For, Show } from 'solid-js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div><table class="ant-w-full"><thead><tr></tr></thead><tbody>`),
+  _tmpl$2 = /*#__PURE__*/template(`<th class="ant-p-16px ant-bg-[var(--light-bg-color)] ant-font-bold ant-[border-bottom:1px_solid_var(--secondary-border-color)] ant-text-left">`),
+  _tmpl$3 = /*#__PURE__*/template(`<tr class="hover:ant-bg-[var(--light-bg-color)]">`),
+  _tmpl$4 = /*#__PURE__*/template(`<td class="ant-p-16px ant-[border-bottom:1px_solid_var(--secondary-border-color)]">`);
+const Table = props => {
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$3.nextSibling;
+    insert(_el$4, createComponent(For, {
+      get each() {
+        return props.columns;
+      },
+      children: item => (() => {
+        const _el$6 = _tmpl$2();
+        insert(_el$6, () => item.title);
+        return _el$6;
+      })()
+    }));
+    insert(_el$5, createComponent(For, {
+      get each() {
+        return props.dataSource;
+      },
+      children: row => (() => {
+        const _el$7 = _tmpl$3();
+        insert(_el$7, createComponent(For, {
+          get each() {
+            return props.columns;
+          },
+          children: item => (() => {
+            const _el$8 = _tmpl$4();
+            insert(_el$8, () => item.render(row));
+            return _el$8;
+          })()
+        }));
+        return _el$7;
+      })()
+    }));
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return !props.dataSource.length;
+      },
+      get children() {
+        return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
+      }
+    }), null);
+    return _el$;
+  })();
+};
+
+export { Table as default };

package/es/Tabs.d.ts

@@ -0,0 +1,17 @@
+import { type Component } from 'solid-js';
+import { type StringOrJSXElement } from './types';
+export interface Tab {
+    key: string;
+    label: StringOrJSXElement;
+    children?: StringOrJSXElement;
+}
+export interface TabsProps {
+    type?: 'line' | 'segment';
+    class?: string;
+    navClass?: string;
+    navItemClass?: string;
+    contentClass?: string;
+    items: Tab[];
+}
+declare const Tabs: Component<TabsProps>;
+export default Tabs;