antd-solid 0.0.22 → 0.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,6 +15,10 @@ export interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButto
15
15
  * 'auto' 代表开启自动 loading,当按钮 click 事件返回 promise 对象时,会自动开启 loading 状态
16
16
  */
17
17
  loading?: boolean | 'auto';
18
+ /**
19
+ * 当 loading 为 true 时,是否隐藏子元素
20
+ */
21
+ hideChildrenWhenLoading?: boolean;
18
22
  /**
19
23
  * 设置危险按钮
20
24
  */
@@ -24,8 +28,7 @@ export interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButto
24
28
  * 将按钮宽度调整为其父宽度的选项
25
29
  */
26
30
  block?: boolean;
27
- contentClass?: string;
28
- contentStyle?: JSX.CSSProperties;
31
+ contentHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
29
32
  icon?: StringOrJSXElement;
30
33
  }
31
34
  declare const Button: Component<ButtonProps>;
@@ -1,4 +1,4 @@
1
- import { createComponent, mergeProps as mergeProps$1, insert, effect, className, style, template } from 'solid-js/web';
1
+ import { createComponent, mergeProps as mergeProps$1, insert, memo, spread, template } from 'solid-js/web';
2
2
  import { mergeProps, splitProps, createSignal, createMemo, children, Show } from 'solid-js';
3
3
  import cs from 'classnames';
4
4
  import './index.scss.js';
@@ -93,21 +93,16 @@ const Button = _props => {
93
93
  }
94
94
  }), createComponent(Show, {
95
95
  get when() {
96
- return resolvedChildren();
96
+ return memo(() => !!resolvedChildren())() && !(props.hideChildrenWhenLoading && loading());
97
97
  },
98
98
  get children() {
99
99
  var _el$2 = _tmpl$2();
100
+ spread(_el$2, mergeProps$1(() => props.contentHTMLAttributes, {
101
+ get ["class"]() {
102
+ return cs('inline-block leading-inherit', props.contentHTMLAttributes?.class);
103
+ }
104
+ }), false, true);
100
105
  insert(_el$2, resolvedChildren);
101
- effect(_p$ => {
102
- var _v$ = cs('inline-block leading-inherit', props.contentClass),
103
- _v$2 = props.contentStyle;
104
- _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
105
- _p$.t = style(_el$2, _v$2, _p$.t);
106
- return _p$;
107
- }, {
108
- e: undefined,
109
- t: undefined
110
- });
111
106
  return _el$2;
112
107
  }
113
108
  })];
@@ -48,7 +48,8 @@ const CodeInput = _props => {
48
48
  ref: el => {
49
49
  inputRefDict[item] = el;
50
50
  },
51
- "class": "!w-32px !text-center",
51
+ rootClass: "!w-32px",
52
+ "class": "!text-center",
52
53
  get value() {
53
54
  return value()[item];
54
55
  },
@@ -52,6 +52,7 @@ const ColorPickerInput = () => {
52
52
  },
53
53
  get children() {
54
54
  return createComponent(Input, {
55
+ "class": "ant-color-picker-hex-input",
55
56
  size: "small",
56
57
  get value() {
57
58
  return hexInputValue();
@@ -49,7 +49,7 @@ const ColorPicker = props => {
49
49
  var _el$ = _tmpl$(),
50
50
  _el$2 = _el$.firstChild;
51
51
  _el$2.$$click = () => {
52
- setColor(new Color());
52
+ setColor(new Color(), true);
53
53
  close();
54
54
  };
55
55
  return _el$;
@@ -72,13 +72,16 @@ const ColorPicker = props => {
72
72
  return props.disabled ? false : 'click';
73
73
  },
74
74
  content: getPopoverContent,
75
+ contentHTMLAttributes: {
76
+ class: 'ant-color-picker'
77
+ },
75
78
  get placement() {
76
79
  return props.placement ?? 'bottomLeft';
77
80
  },
78
81
  get children() {
79
82
  return createComponent(Element, {
80
83
  get ["class"]() {
81
- return cs('inline-block', props.disabled && 'cursor-not-allowed');
84
+ return cs('ant-color-picker-trigger inline-block', props.disabled && 'cursor-not-allowed');
82
85
  },
83
86
  get children() {
84
87
  var _el$4 = _tmpl$4();
@@ -1,6 +1,17 @@
1
- import { type Component, type ParentProps, type JSX } from 'solid-js';
1
+ import { type Component, type ParentProps, type JSX, type Ref } from 'solid-js';
2
+ export interface CursorIntance {
3
+ onMouseEnter: (e: MouseEvent, ele: HTMLElement | SVGElement) => void;
4
+ onMouseMove: (e: MouseEvent) => void;
5
+ onMouseLeave: (e: MouseEvent, ele: HTMLElement | SVGElement) => void;
6
+ }
2
7
  export interface CursorProps extends ParentProps {
8
+ ref?: Ref<CursorIntance>;
3
9
  cursor: JSX.Element;
4
10
  }
5
- declare const Cursor: Component<CursorProps>;
11
+ declare function createCursor(props: CursorProps): {
12
+ dispose: () => void;
13
+ };
14
+ declare const Cursor: Component<CursorProps> & {
15
+ createCursor: typeof createCursor;
16
+ };
6
17
  export default Cursor;
@@ -1,7 +1,20 @@
1
- import { createComponent, Portal, insert, effect, template } from 'solid-js/web';
1
+ import { createComponent, Portal, insert, effect, template, render } from 'solid-js/web';
2
2
  import { children, createSignal, createEffect, onCleanup, Show } from 'solid-js';
3
+ import { setRef } from '../utils/solid.js';
3
4
 
4
5
  var _tmpl$ = /*#__PURE__*/template(`<span class="absolute pointer-events-none z-2000">`);
6
+ function createCursor(props) {
7
+ const container = document.createElement('div');
8
+ document.body.appendChild(container);
9
+ const _dispose = render(() => createComponent(Cursor, props), container);
10
+ const dispose = () => {
11
+ _dispose();
12
+ document.body.removeChild(container);
13
+ };
14
+ return {
15
+ dispose
16
+ };
17
+ }
5
18
  const Cursor = props => {
6
19
  const resolvedChildren = children(() => props.children);
7
20
  const [hover, setHover] = createSignal(false);
@@ -10,30 +23,47 @@ const Cursor = props => {
10
23
  y: 0
11
24
  });
12
25
  let originalCursor;
26
+ const onMouseEnter = (_, _children) => {
27
+ setHover(true);
28
+ originalCursor = _children.style.cursor;
29
+ _children.style.cursor = 'none';
30
+ };
31
+ const onMouseMove = e => {
32
+ setCursorPosition({
33
+ x: e.clientX,
34
+ y: e.clientY
35
+ });
36
+ };
37
+ const onMouseLeave = (_, _children) => {
38
+ setHover(false);
39
+ if (originalCursor) {
40
+ _children.style.cursor = originalCursor;
41
+ } else {
42
+ _children.style.removeProperty('cursor');
43
+ }
44
+ originalCursor = undefined;
45
+ };
46
+ setRef(props, {
47
+ onMouseEnter,
48
+ onMouseMove,
49
+ onMouseLeave
50
+ });
13
51
  createEffect(() => {
14
52
  const _children = resolvedChildren();
15
53
  if (!(_children instanceof HTMLElement || _children instanceof SVGElement)) return;
16
54
  const abortController = new AbortController();
17
- _children.addEventListener('mouseenter', () => {
18
- setHover(true);
19
- originalCursor = _children.style.cursor;
20
- _children.style.cursor = 'none';
55
+ _children.addEventListener('mouseenter', e => {
56
+ onMouseEnter(e, _children);
21
57
  }, {
22
58
  capture: true,
23
59
  signal: abortController.signal
24
60
  });
25
- _children.addEventListener('mousemove', e => {
26
- setCursorPosition({
27
- x: e.clientX,
28
- y: e.clientY
29
- });
30
- }, {
61
+ _children.addEventListener('mousemove', onMouseMove, {
31
62
  capture: true,
32
63
  signal: abortController.signal
33
64
  });
34
- _children.addEventListener('mouseleave', () => {
35
- setHover(false);
36
- if (originalCursor) _children.style.cursor = originalCursor;
65
+ _children.addEventListener('mouseleave', e => {
66
+ onMouseLeave(e, _children);
37
67
  }, {
38
68
  capture: true,
39
69
  signal: abortController.signal
@@ -67,5 +97,6 @@ const Cursor = props => {
67
97
  }
68
98
  })];
69
99
  };
100
+ Cursor.createCursor = createCursor;
70
101
 
71
102
  export { Cursor as default };
@@ -91,7 +91,12 @@ const Drawer = _props => {
91
91
  typeof _ref$ === "function" ? _ref$(r$) : drawerRef = r$;
92
92
  },
93
93
  get ["class"]() {
94
- return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', 'inset-0 z-1000', isBody() ? 'fixed' : 'absolute');
94
+ return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', 'inset-0 z-1000', !props.mask && {
95
+ left: '!right-auto',
96
+ right: '!left-auto',
97
+ top: '!bottom-auto',
98
+ bottom: '!top-auto'
99
+ }[props.placement], isBody() ? 'fixed' : 'absolute');
95
100
  },
96
101
  get style() {
97
102
  return {
@@ -34,8 +34,10 @@ const Dropdown = _props => {
34
34
  props.menu?.onClick?.(info);
35
35
  }
36
36
  })),
37
- contentStyle: {
38
- padding: 0
37
+ contentHTMLAttributes: {
38
+ style: {
39
+ padding: 0
40
+ }
39
41
  }
40
42
  }, popoverProps, {
41
43
  get children() {
@@ -7,9 +7,13 @@ type CommonInputProps = RootStyleProps & Omit<JSX.InputHTMLAttributes<HTMLInputE
7
7
  defaultValue?: string | null | undefined;
8
8
  value?: string | null | undefined;
9
9
  addonBefore?: JSXElement;
10
+ addonBeforeHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
10
11
  addonAfter?: JSXElement;
12
+ addonAfterHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
11
13
  prefix?: JSXElement;
14
+ prefixHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
12
15
  suffix?: JSXElement;
16
+ suffixHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
13
17
  /**
14
18
  * 仅供 InputNumber 使用
15
19
  */
@@ -29,6 +33,7 @@ type CommonInputProps = RootStyleProps & Omit<JSX.InputHTMLAttributes<HTMLInputE
29
33
  onChange?: JSX.InputEventHandler<HTMLInputElement, InputEvent>;
30
34
  onPressEnter?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;
31
35
  onKeyDown?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;
36
+ affixWrapperHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
32
37
  };
33
38
  export declare const statusClassDict: {
34
39
  default: (disabled: boolean, foucs: boolean) => "border-[--ant-color-border]" | "border-[--ant-color-primary] [box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]" | "border-[--ant-color-border] hover:border-[--ant-color-primary]";
package/es/Input/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { delegateEvents, createComponent, insert, effect, className, use, spread, mergeProps, template } from 'solid-js/web';
1
+ import { delegateEvents, createComponent, spread, mergeProps, insert, use, template } from 'solid-js/web';
2
2
  import { isNil, omit } from 'lodash-es';
3
3
  import { useContext, splitProps, onMount, createMemo, Show } from 'solid-js';
4
4
  import cs from 'classnames';
@@ -12,11 +12,9 @@ import useFocus from '../hooks/useFocus.js';
12
12
  import CompactContext from '../Compact/context.js';
13
13
 
14
14
  var _tmpl$ = /*#__PURE__*/template(`<div>`),
15
- _tmpl$2 = /*#__PURE__*/template(`<div class=mr-4px>`),
16
- _tmpl$3 = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
17
- _tmpl$4 = /*#__PURE__*/template(`<div class=ml-4px>`),
18
- _tmpl$5 = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
19
- _tmpl$6 = /*#__PURE__*/template(`<div><input>`);
15
+ _tmpl$2 = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
16
+ _tmpl$3 = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
17
+ _tmpl$4 = /*#__PURE__*/template(`<div><input>`);
20
18
  const statusClassDict = {
21
19
  default: (disabled, foucs) => {
22
20
  if (disabled) {
@@ -105,19 +103,33 @@ function CommonInput(props) {
105
103
  },
106
104
  get children() {
107
105
  var _el$ = _tmpl$();
106
+ spread(_el$, mergeProps(() => props.addonBeforeHTMLAttributes, {
107
+ get ["class"]() {
108
+ return cs(props.addonBeforeHTMLAttributes?.class, 'ant-input-addon ant-input-addon-before', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0');
109
+ }
110
+ }), false, true);
108
111
  insert(_el$, addonBefore);
109
- effect(() => className(_el$, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-r-0')));
110
112
  return _el$;
111
113
  }
112
114
  }), (() => {
113
- var _el$2 = _tmpl$6(),
115
+ var _el$2 = _tmpl$4(),
114
116
  _el$4 = _el$2.firstChild;
117
+ spread(_el$2, mergeProps(() => props.affixWrapperHTMLAttributes, {
118
+ get ["class"]() {
119
+ return cs(props.affixWrapperHTMLAttributes?.class, 'ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict[props.status ?? 'default'](!!props.disabled, foucs()));
120
+ }
121
+ }), false, true);
115
122
  insert(_el$2, createComponent(Show, {
116
123
  get when() {
117
124
  return !isNil(prefix());
118
125
  },
119
126
  get children() {
120
- var _el$3 = _tmpl$2();
127
+ var _el$3 = _tmpl$();
128
+ spread(_el$3, mergeProps(() => props.prefixHTMLAttributes, {
129
+ get ["class"]() {
130
+ return cs(props.prefixHTMLAttributes?.class, 'mr-4px');
131
+ }
132
+ }), false, true);
121
133
  insert(_el$3, prefix);
122
134
  return _el$3;
123
135
  }
@@ -155,7 +167,7 @@ function CommonInput(props) {
155
167
  return showClearBtn();
156
168
  },
157
169
  get children() {
158
- var _el$5 = _tmpl$3();
170
+ var _el$5 = _tmpl$2();
159
171
  _el$5.$$click = e => {
160
172
  e.stopPropagation();
161
173
  inputRef.value = '';
@@ -173,7 +185,12 @@ function CommonInput(props) {
173
185
  return !isNil(suffix());
174
186
  },
175
187
  get children() {
176
- var _el$6 = _tmpl$4();
188
+ var _el$6 = _tmpl$();
189
+ spread(_el$6, mergeProps(() => props.suffixHTMLAttributes, {
190
+ get ["class"]() {
191
+ return cs(props.suffixHTMLAttributes?.class, 'ml-4px');
192
+ }
193
+ }), false, true);
177
194
  insert(_el$6, suffix);
178
195
  return _el$6;
179
196
  }
@@ -183,12 +200,11 @@ function CommonInput(props) {
183
200
  return !isNil(actions());
184
201
  },
185
202
  get children() {
186
- var _el$7 = _tmpl$5();
203
+ var _el$7 = _tmpl$3();
187
204
  insert(_el$7, actions);
188
205
  return _el$7;
189
206
  }
190
207
  }), null);
191
- effect(() => className(_el$2, cs('ant-input-affix-wrapper', 'flex items-center w-full relative p:hover-child[input]:border-[--ant-color-primary] bg-[--ant-color-bg-container] p-[--ant-input-padding] border-1px border-solid', ['[--actions-display:none]', !props.disabled && 'hover:[--actions-display:block]'], statusClassDict[props.status ?? 'default'](!!props.disabled, foucs()))));
192
208
  return _el$2;
193
209
  })(), createComponent(Show, {
194
210
  get when() {
@@ -196,8 +212,12 @@ function CommonInput(props) {
196
212
  },
197
213
  get children() {
198
214
  var _el$8 = _tmpl$();
215
+ spread(_el$8, mergeProps(() => props.addonAfterHTMLAttributes, {
216
+ get ["class"]() {
217
+ return cs(props.addonAfterHTMLAttributes?.class, 'ant-input-addon ant-input-addon-after', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0');
218
+ }
219
+ }), false, true);
199
220
  insert(_el$8, addonAfter);
200
- effect(() => className(_el$8, cs('ant-input-addon', 'shrink-0 flex justify-center items-center px-11px bg-[rgba(0,0,0,.02)] [border:1px_solid_var(--ant-color-border)] border-l-0')));
201
221
  return _el$8;
202
222
  }
203
223
  })];
@@ -125,8 +125,10 @@ function InternalMenu(props) {
125
125
  });
126
126
  return _el$6;
127
127
  })(),
128
- contentStyle: {
129
- padding: 0
128
+ contentHTMLAttributes: {
129
+ style: {
130
+ padding: 0
131
+ }
130
132
  },
131
133
  get children() {
132
134
  return getLabel({
@@ -102,8 +102,10 @@ function RangeInput(props) {
102
102
  trigger: false,
103
103
  placement: "bottomLeft",
104
104
  arrow: false,
105
- contentStyle: {
106
- padding: 0
105
+ contentHTMLAttributes: {
106
+ style: {
107
+ padding: 0
108
+ }
107
109
  },
108
110
  content: () => (() => {
109
111
  var _el$8 = _tmpl$3();
@@ -49,7 +49,7 @@ const Segmented = props => {
49
49
  children: item
50
50
  }));
51
51
  effect(_p$ => {
52
- var _v$ = cs(props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'),
52
+ var _v$ = cs('ant-segmented-item', props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'),
53
53
  _v$2 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-sm)] cursor-pointer [white-space:nowrap]', isSelected(unWarpValue(item)) && 'bg-[var(--ant-segmented-item-selected-bg)]', isDisabledValue(item) ? '[pointer-events:none] text-[var(--ant-color-text-disabled)]' : isSelected(unWarpValue(item)) ? 'shadow-[var(--ant-box-shadow-tertiary)] text-[var(--ant-segmented-item-selected-color)]' : 'text-[var(--ant-segmented-item-color)] hover:text-[var(--ant-segmented-item-hover-color)] hover:bg-[var(--ant-segmented-item-hover-bg)] active:bg-[var(--ant-segmented-item-active-bg)]', props.block && 'flex justify-center', {
54
54
  small: 'leading-20px',
55
55
  middle: 'leading-28px',
@@ -6,7 +6,7 @@ export interface SelectOption<T = Key> {
6
6
  value: T;
7
7
  class?: string;
8
8
  }
9
- export interface SelectProps<T = Key> extends Pick<SelectInputProps<T>, 'multiple' | 'allowClear' | 'class' | 'style' | 'disabled' | 'placeholder' | 'status' | 'size' | 'variant' | 'suffixIcon' | 'placement' | 'getPopupContainer' | 'defaultOpen' | 'open' | 'onOpenChange'> {
9
+ export interface SelectProps<T = Key> extends Pick<SelectInputProps<T>, 'ref' | 'multiple' | 'allowClear' | 'class' | 'style' | 'disabled' | 'placeholder' | 'status' | 'size' | 'variant' | 'suffixIcon' | 'placement' | 'getPopupContainer' | 'defaultOpen' | 'open' | 'onOpenChange'> {
10
10
  defaultValue?: T | T[] | null;
11
11
  value?: T | T[] | null;
12
12
  onChange?: (value: T | T[] | undefined) => void;
@@ -11,12 +11,15 @@ import { unwrapStringOrJSXElement } from '../utils/solid.js';
11
11
  var _tmpl$ = /*#__PURE__*/template(`<div class=p-2px>`),
12
12
  _tmpl$2 = /*#__PURE__*/template(`<div>`);
13
13
  function Select(props) {
14
- const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'style', 'disabled', 'placeholder', 'status', 'size', 'variant', 'suffixIcon', 'placement', 'getPopupContainer']);
14
+ const [selectInputProps] = splitProps(props, ['ref', 'multiple', 'allowClear', 'class', 'style', 'disabled', 'placeholder', 'status', 'size', 'variant', 'suffixIcon', 'placement', 'getPopupContainer', 'defaultOpen', 'open', 'onOpenChange']);
15
15
  const [value, setValue] = createControllableValue(props);
16
16
  const valueArr = createMemo(() => toArray(value(), false));
17
17
  const selectedValue = createSelector(() => new Map(valueArr().map(v => [v, true])), (a, b) => b.has(a));
18
18
  const optionDict = createMemo(() => new Map(props.options?.map(o => [o.value, o])));
19
19
  return createComponent(SelectInput, mergeProps(selectInputProps, {
20
+ get ["class"]() {
21
+ return cs('ant-select', selectInputProps.class);
22
+ },
20
23
  labelRender: v => props.labelRender ? props.labelRender(optionDict().get(v), v) : unwrapStringOrJSXElement(optionDict().get(v)?.label) ?? v,
21
24
  get value() {
22
25
  return valueArr();
@@ -53,7 +56,7 @@ function Select(props) {
53
56
  };
54
57
  insert(_el$2, () => unwrapStringOrJSXElement(item.label));
55
58
  effect(_p$ => {
56
- var _v$ = cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class),
59
+ var _v$ = cs('ant-select-item', 'ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class),
57
60
  _v$2 = typeof item.label === 'string' || typeof item.label === 'number' ? item.label.toString() : undefined;
58
61
  _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
59
62
  _v$2 !== _p$.t && setAttribute(_el$2, "title", _p$.t = _v$2);
@@ -1,6 +1,7 @@
1
- import { type JSXElement, type JSX } from 'solid-js';
1
+ import { type JSXElement, type JSX, type Ref } from 'solid-js';
2
2
  import { type TooltipProps } from '../Tooltip';
3
3
  export interface SelectInputProps<T> extends Pick<TooltipProps, 'getPopupContainer' | 'defaultOpen' | 'open' | 'onOpenChange'> {
4
+ ref?: Ref<HTMLDivElement>;
4
5
  multiple?: boolean;
5
6
  defaultValue?: T[] | null;
6
7
  value?: T[] | null;
@@ -8,6 +8,7 @@ import useClickAway from '../hooks/useClickAway.js';
8
8
  import Element from '../Element/index.js';
9
9
  import useComponentSize from '../hooks/useComponentSize.js';
10
10
  import CompactContext from '../Compact/context.js';
11
+ import { setRef } from '../utils/solid.js';
11
12
 
12
13
  var _tmpl$ = /*#__PURE__*/template(`<div class=w-full>`),
13
14
  _tmpl$2 = /*#__PURE__*/template(`<span class="right-[--ant-select-input-padding-right] i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
@@ -67,9 +68,9 @@ function SelectInput(_props) {
67
68
  ...props.style
68
69
  }));
69
70
  return createComponent(Element, {
70
- ref(r$) {
71
- var _ref$ = select;
72
- typeof _ref$ === "function" ? _ref$(r$) : select = r$;
71
+ ref: el => {
72
+ setRef(props, el);
73
+ select = el;
73
74
  },
74
75
  get ["class"]() {
75
76
  return cs('!p[.ant-input-addon]:my--1px !p[.ant-input-addon]:mx--12px', 'rounded-6px cursor-pointer inline-block text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', isCompact && 'ant-compact-item', props.class, props.disabled && 'cursor-not-allowed');
@@ -89,13 +90,16 @@ function SelectInput(_props) {
89
90
  return props.placement;
90
91
  },
91
92
  arrow: false,
92
- contentStyle: {
93
- padding: 0
93
+ contentHTMLAttributes: {
94
+ class: 'ant-select-dropdown',
95
+ style: {
96
+ padding: 0
97
+ }
94
98
  },
95
99
  content: () => (() => {
96
100
  var _el$5 = _tmpl$4();
97
- var _ref$2 = tooltipContent;
98
- typeof _ref$2 === "function" ? use(_ref$2, _el$5) : tooltipContent = _el$5;
101
+ var _ref$ = tooltipContent;
102
+ typeof _ref$ === "function" ? use(_ref$, _el$5) : tooltipContent = _el$5;
99
103
  insert(_el$5, () => props.content(() => setOpen(false)));
100
104
  effect(_$p => style(_el$5, {
101
105
  ...pick(style$1(), ['--ant-select-popup-font-size', '--ant-select-popup-match-width'])
@@ -182,7 +186,7 @@ function SelectInput(_props) {
182
186
  get fallback() {
183
187
  return createComponent(Show, {
184
188
  get when() {
185
- return isUndefined(props.suffixIcon);
189
+ return isUndefined(props.suffixIcon) || props.suffixIcon === true;
186
190
  },
187
191
  get fallback() {
188
192
  return props.suffixIcon;
@@ -1,6 +1,5 @@
1
1
  import { type Accessor, type Component, type JSXElement } from 'solid-js';
2
- import { type TimelineItemProps as TimelineItemAntdProps } from 'antd';
3
- interface TimelineItemProps extends Omit<TimelineItemAntdProps, 'children' | 'dot' | 'label'> {
2
+ interface TimelineItemProps {
4
3
  dot?: JSXElement;
5
4
  label?: JSXElement;
6
5
  children?: Accessor<JSXElement>;
@@ -10,8 +10,8 @@ export interface TooltipProps {
10
10
  * 默认: top
11
11
  */
12
12
  placement?: TooltipPlacement;
13
- contentStyle?: JSX.CSSProperties;
14
13
  content?: JSXElement | ((close: () => void) => JSXElement);
14
+ contentHTMLAttributes?: JSX.HTMLAttributes<HTMLDivElement>;
15
15
  children?: JSXElement;
16
16
  /**
17
17
  * 只有在 trigger 为 manual 时生效
@@ -1,4 +1,4 @@
1
- import { createComponent, memo, Dynamic, Portal, insert, effect, className, style, template } from 'solid-js/web';
1
+ import { createComponent, memo, Dynamic, Portal, spread, mergeProps as mergeProps$1, insert, effect, className, style, template } from 'solid-js/web';
2
2
  import { isEqual, compact } from 'lodash-es';
3
3
  import { mergeProps, createSignal, useContext, children, createMemo, createEffect, onCleanup, createRenderEffect, on, Show } from 'solid-js';
4
4
  import cs from 'classnames';
@@ -445,25 +445,17 @@ const Tooltip = _props => {
445
445
  get children() {
446
446
  return [(() => {
447
447
  var _el$ = _tmpl$();
448
+ spread(_el$, mergeProps$1(() => props.contentHTMLAttributes, {
449
+ get ["class"]() {
450
+ return cs(props.contentHTMLAttributes?.class, 'px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto translate-x-[--inner-translate-x] translate-y-[--inner-translate-y]', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]');
451
+ }
452
+ }), false, true);
448
453
  insert(_el$, createComponent(TooltipContext.Provider, {
449
454
  value: context,
450
455
  get children() {
451
456
  return unwrapContent(props.content, () => setOpen(false));
452
457
  }
453
458
  }));
454
- effect(_p$ => {
455
- var _v$ = cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]'),
456
- _v$2 = {
457
- transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
458
- ...props.contentStyle
459
- };
460
- _v$ !== _p$.e && className(_el$, _p$.e = _v$);
461
- _p$.t = style(_el$, _v$2, _p$.t);
462
- return _p$;
463
- }, {
464
- e: undefined,
465
- t: undefined
466
- });
467
459
  return _el$;
468
460
  })(), createComponent(Show, {
469
461
  get when() {
@@ -472,14 +464,14 @@ const Tooltip = _props => {
472
464
  get children() {
473
465
  var _el$2 = _tmpl$();
474
466
  effect(_p$ => {
475
- var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
476
- _v$4 = {
467
+ var _v$ = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
468
+ _v$2 = {
477
469
  'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
478
470
  'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
479
471
  ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
480
472
  };
481
- _v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
482
- _p$.t = style(_el$2, _v$4, _p$.t);
473
+ _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
474
+ _p$.t = style(_el$2, _v$2, _p$.t);
483
475
  return _p$;
484
476
  }, {
485
477
  e: undefined,
package/es/index.d.ts CHANGED
@@ -69,7 +69,7 @@ export type { DropdownProps } from './Dropdown';
69
69
  export { default as Element } from './Element';
70
70
  export type { ElementProps } from './Element';
71
71
  export { default as Cursor } from './Cursor';
72
- export type { CursorProps } from './Cursor';
72
+ export type { CursorProps, CursorIntance } from './Cursor';
73
73
  export { default as Space } from './Space';
74
74
  export { default as CodeInput } from './CodeInput';
75
75
  export type { CodeInputProps } from './CodeInput';
@@ -8,15 +8,23 @@
8
8
  * @param cursor - 拖拽过程中的 style.cursor
9
9
  */
10
10
  function setupGlobalDrag(onMove, onEnd, cursor) {
11
- const originalPointerEvents = document.body.style.pointerEvents;
11
+ // 防止拖拽时误选中文字等
12
+ const originalUserSelect = document.body.style.userSelect;
13
+ document.body.style.userSelect = 'none';
12
14
  const originalCursor = document.documentElement.style.cursor;
13
15
  if (cursor) {
14
16
  document.documentElement.style.cursor = cursor;
15
17
  }
18
+ // 防止 mouseup 被 disabled 元素吞掉
19
+ const style = document.createElement('style');
20
+ style.textContent = `
21
+ :disabled {
22
+ pointer-events: none;
23
+ }
24
+ `;
25
+ document.head.appendChild(style);
16
26
  const abortController = new AbortController();
17
27
  window.addEventListener('mousemove', e => {
18
- // 延迟设置 document.body.style.pointerEvents,直到 mousemove 触发,这样才算 drag。避免影响自身及子元素的 click 事件
19
- document.body.style.pointerEvents = 'none'; // 防止 mouseup 被 disabled 元素吞掉,以及拖拽时误选中文字等
20
28
  onMove(e);
21
29
  }, {
22
30
  signal: abortController.signal,
@@ -24,10 +32,11 @@ function setupGlobalDrag(onMove, onEnd, cursor) {
24
32
  });
25
33
  window.addEventListener('mouseup', e => {
26
34
  onEnd?.(e);
27
- document.body.style.pointerEvents = originalPointerEvents;
35
+ document.body.style.userSelect = originalUserSelect;
28
36
  if (cursor) {
29
37
  document.documentElement.style.cursor = originalCursor;
30
38
  }
39
+ document.head.removeChild(style);
31
40
  abortController.abort();
32
41
  }, {
33
42
  once: true,