@soxa-ui/solid 0.0.0-stage → 0.3.0-beta.1

package/dist/components/scroller/Scroller.js

@@ -0,0 +1,106 @@
+import { renderSlot, resolveSlot } from "../../adapter/common/slots.js";
+import { Show } from "../../adapter/runtime/flow.js";
+import { createPartProps, createRootProps } from "../../adapter/common/root.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { Root } from "../../adapter/runtime/Root.js";
+import { Button } from "../button/Button.js";
+import { Icon } from "../icon/Icon.js";
+import { setupScroller } from "./setup.component.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+//#region src/components/scroller/Scroller.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=so-scroller__viewport>`);
+/** Одна стрелка на обе кнопки: роли «влево» нет, стрелку в начало строки зеркалит тема. */
+var ARROW = roleIcon("arrowRight");
+/**
+* Лента в одну строку: кнопка «назад», вьюпорт, кнопка «вперёд».
+* Кнопки — снаружи вьюпорта: роль ряда (`listbox` у тегов) ложится на вьюпорт, а
+* листбокс владеет только опциями. Обёртки внутри вьюпорта нет: элементы — его
+* прямые дети (роль ряда, снап темы, края плагина). `viewportAria` после `tabindex`:
+* ряд с roving tabindex сам решает, кому быть остановкой. Корень ленты тема не гасит,
+* поэтому выключенность кнопкам отдаёт разметка (`prevDisabled`, `nextDisabled`).
+*/
+function Scroller(props) {
+	const binding = setupScroller(props);
+	const state = binding.state;
+	const root = createRootProps(() => ({
+		state,
+		sets: [
+			state.attrs,
+			state.aria,
+			state.dataset
+		],
+		forward: binding.forwardProps()
+	}));
+	const viewportAria = createPartProps(() => state.viewportAria);
+	const prevIcon = resolveSlot(() => props["prev-icon"], () => ({}));
+	const nextIcon = resolveSlot(() => props["next-icon"], () => ({}));
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return [
+						createComponent(Button, mergeProps({
+							embedded: "scroller.prev",
+							type: "button",
+							"class": "so-scroller__prev",
+							get size() {
+								return state.size;
+							},
+							get disabled() {
+								return state.prevDisabled;
+							}
+						}, () => state.prevAria, { get children() {
+							return prevIcon() ?? createComponent(Icon, {
+								embedded: "scroller.prev-icon",
+								tag: ARROW,
+								get size() {
+									return state.size;
+								}
+							});
+						} })),
+						(() => {
+							var _el$ = _tmpl$();
+							spread(_el$, mergeProps({ get tabindex() {
+								return state.viewportTabIndex;
+							} }, viewportAria), false, true);
+							insert(_el$, () => renderSlot(props.children));
+							return _el$;
+						})(),
+						createComponent(Button, mergeProps({
+							embedded: "scroller.next",
+							type: "button",
+							"class": "so-scroller__next",
+							get size() {
+								return state.size;
+							},
+							get disabled() {
+								return state.nextDisabled;
+							}
+						}, () => state.nextAria, { get children() {
+							return nextIcon() ?? createComponent(Icon, {
+								embedded: "scroller.next-icon",
+								tag: ARROW,
+								get size() {
+									return state.size;
+								}
+							});
+						} }))
+					];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { Scroller };

package/dist/components/scroller/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { IScroller } from '@soxa-ui/core';
+import type { ScrollerDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../types';
+/** События слоя Scroller (core + плагины), выведены из дескриптора автоматически. */
+export type ScrollerEventProps = EventProps<typeof ScrollerDescriptor>;
+/** Атрибуты потребителя — корню; вьюпорт получает свой набор `viewportAria`. */
+export type ScrollerProps = UseDomProps<typeof ScrollerDescriptor, IScroller, ScrollerEventProps>;

package/dist/components/scroller/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupScroller } from './setup.component';
+export { Scroller } from './Scroller';

package/dist/components/scroller/setup.component.d.ts

@@ -0,0 +1,22 @@
+import type { ScrollerProps } from './base.component';
+export declare function setupScroller(props: ScrollerProps): import("../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IScroller, {
+    props: object & {} & {} & {} & {
+        aria_label?: string | undefined;
+        aria_labelledBy?: string | undefined;
+        aria_describedBy?: string | undefined;
+    } & {} & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {} & {
+        "action:click": (event: MouseEvent) => void;
+        "action:press": (event: MouseEvent) => void;
+        "action:focus": (event: FocusEvent) => void;
+        "action:blur": (event: FocusEvent) => void;
+    } & {
+        "aria:change:label": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:labelledBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+        "aria:change:describedBy": (payload: import("@soxa-ui/core").TValuePayload<string | undefined>) => void;
+    } & {} & {};
+    outputs: object & {} & {} & {} & {} & {} & {} & {};
+}>, ScrollerProps>;

package/dist/components/scroller/setup.component.js

@@ -0,0 +1,13 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { ScrollerDescriptor } from "@soxa-ui/setup";
+//#region src/components/scroller/setup.component.ts
+function setupScroller(props) {
+	const adapter = createSolidAdapterContext(ScrollerDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	});
+	return useAdapter(adapter, props);
+}
+//#endregion
+export { setupScroller };

package/dist/components/select/Select.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'solid-js';
+import type { SelectProps } from './base.component';
+/**
+ * Поле выбора: `Input` над полем Select (`field`) и панель-Frame со списком. Набор
+ * `aria` Select и атрибуты потребителя, кроме класса и стиля, — `<input>` поля:
+ * фокус всегда на нём.
+ */
+export declare function Select(props: SelectProps): JSX.Element;

package/dist/components/select/Select.js

@@ -0,0 +1,269 @@
+import { relaySlot, renderSlot } from "../../adapter/common/slots.js";
+import { Show } from "../../adapter/runtime/flow.js";
+import { ResolvedSlot } from "../../adapter/common/ResolvedSlot.js";
+import { createPartProps, createRootProps, toControlAttrs, toRootForward } from "../../adapter/common/root.js";
+import { roleIcon } from "../../adapter/common/icon.js";
+import { KeyedFor } from "../../adapter/runtime/KeyedFor.js";
+import { Elevate } from "../../adapter/elevator/Elevate.js";
+import { Icon } from "../icon/Icon.js";
+import { Frame } from "../frame/Frame.js";
+import { Input } from "../input/Input.js";
+import { Tags } from "../tags/index.js";
+import { SelectItem } from "./item/Item.js";
+import { SelectGroup } from "./group/Group.js";
+import { setupSelect } from "./setup.component.js";
+import { createComponent, effect, insert, memo, mergeProps, spread, style, template, use } from "solid-js/web";
+//#region src/components/select/Select.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=so-select__arrow>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class=so-select__filler aria-hidden=true>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div class=so-select__separator aria-hidden=true>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div class=so-select__handle aria-hidden=true>`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div class=so-select__list>`);
+var _tmpl$6 = /*#__PURE__*/ template(`<div>`);
+/** Стрелка без слота — компонент на роль: `tag` у Icon — корень, а не роль. */
+var ARROW = roleIcon("arrowDown");
+/** Опция записи; у распорки её нет. */
+function itemOf(entry) {
+	return entry.kind === "item" ? entry.item : void 0;
+}
+/** Стиль распорки — высота пропущенных опций; у записи опции его нет. */
+function fillerStyleOf(entry) {
+	return entry.kind === "filler" ? entry.style : void 0;
+}
+/**
+* Поле выбора: `Input` над полем Select (`field`) и панель-Frame со списком. Набор
+* `aria` Select и атрибуты потребителя, кроме класса и стиля, — `<input>` поля:
+* фокус всегда на нём.
+*/
+function Select(props) {
+	const binding = setupSelect(props);
+	const state = binding.state;
+	const field = binding.field;
+	const root = createRootProps(() => ({
+		state,
+		sets: [state.dataset, state.attrs],
+		forward: toRootForward(binding.forwardProps())
+	}));
+	const control = () => toControlAttrs(binding.forwardProps());
+	const listAria = createPartProps(() => state.listAria);
+	/** Ряд тегов — только в `multiple`: без него нет ни тегов, ни их движка. */
+	const drawTags = () => createComponent(Show, {
+		get when() {
+			return state.tags;
+		},
+		children: (tags) => createComponent(Show, {
+			get when() {
+				return state.tags_engine;
+			},
+			children: (engine) => createComponent(ResolvedSlot, {
+				get content() {
+					return props.tags;
+				},
+				scope: () => ({
+					tags: tags(),
+					engine: engine()
+				}),
+				get fallback() {
+					return createComponent(Tags, {
+						embedded: "select.tags",
+						"class": "so-select__tags",
+						get ctrl() {
+							return tags();
+						},
+						get engine() {
+							return engine();
+						}
+					});
+				}
+			})
+		})
+	});
+	/** Класс стрелки — на обёртке: по нему тема её поворачивает, а `editable` открывает панель. */
+	const drawArrow = () => (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(ResolvedSlot, {
+			get content() {
+				return props["arrow-icon"];
+			},
+			get fallback() {
+				return createComponent(Icon, {
+					embedded: "select.arrow",
+					tag: ARROW,
+					get size() {
+						return state.size;
+					}
+				});
+			}
+		}));
+		return _el$;
+	})();
+	const drawItem = (item) => createComponent(SelectItem, {
+		ctrl: item,
+		get leading() {
+			return renderSlot(props["item-leading"], { item });
+		},
+		get trailing() {
+			return renderSlot(props["item-trailing"], { item });
+		},
+		get ["indicator-icon"]() {
+			return relaySlot(props["item-indicator-icon"], { item });
+		},
+		get children() {
+			return relaySlot(props.item, { item });
+		}
+	});
+	/** Запись `drawn`: опция или распорка на месте пропущенных. */
+	const drawEntry = (entry) => createComponent(Show, {
+		get when() {
+			return itemOf(entry());
+		},
+		keyed: true,
+		get fallback() {
+			return (() => {
+				var _el$2 = _tmpl$2();
+				effect((_$p) => style(_el$2, fillerStyleOf(entry()), _$p));
+				return _el$2;
+			})();
+		},
+		children: drawItem
+	});
+	const drawEntries = (section) => createComponent(KeyedFor, {
+		get each() {
+			return section().entries;
+		},
+		by: (entry) => entry.key,
+		children: drawEntry
+	});
+	const isFirst = (section) => state.drawnSections?.[0]?.key === section().key;
+	const drawSection = (section) => [createComponent(Show, {
+		get when() {
+			return memo(() => !!state.groupSeparators)() && !isFirst(section);
+		},
+		get children() {
+			return _tmpl$3();
+		}
+	}), createComponent(Show, {
+		get when() {
+			return section().group;
+		},
+		get fallback() {
+			return drawEntries(section);
+		},
+		children: (group) => createComponent(SelectGroup, {
+			get label() {
+				return group().label;
+			},
+			get children() {
+				return drawEntries(section);
+			}
+		})
+	})];
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			var _el$4 = _tmpl$6();
+			var _ref$ = binding.ref;
+			typeof _ref$ === "function" ? use(_ref$, _el$4) : binding.ref = _el$4;
+			spread(_el$4, mergeProps(root), false, true);
+			insert(_el$4, createComponent(Elevate, {
+				get layer() {
+					return binding.layer;
+				},
+				get children() {
+					return [createComponent(ResolvedSlot, {
+						get content() {
+							return props.field;
+						},
+						scope: () => ({ field }),
+						get fallback() {
+							return createComponent(Input, mergeProps({
+								embedded: "select.field",
+								"class": "so-select__field",
+								ctrl: field,
+								get id() {
+									return state.id;
+								},
+								get clear() {
+									return props.clear;
+								},
+								get leading() {
+									return [memo(drawTags), memo(() => renderSlot(props.leading))];
+								},
+								get trailing() {
+									return [memo(drawArrow), memo(() => renderSlot(props.trailing))];
+								}
+							}, () => state.aria, control));
+						}
+					}), createComponent(Frame, mergeProps({
+						embedded: "select.frame",
+						"class": "so-select__panel",
+						get visible() {
+							return memo(() => !!state.visible)() && state.open;
+						},
+						strategy: "fixed",
+						get anchor_anchor() {
+							return binding.rootElement();
+						},
+						get anchor_placement() {
+							return state.panelPlacement;
+						},
+						get anchor_flip() {
+							return state.panelFlip;
+						},
+						get anchor_matchWidth() {
+							return state.autoFitWidth;
+						},
+						anchor_offset: 4
+					}, () => state.panelDataset, () => state.dismiss_ownerAttribute, { get children() {
+						return [createComponent(Show, {
+							get when() {
+								return state.handleRendered;
+							},
+							get children() {
+								return _tmpl$4();
+							}
+						}), (() => {
+							var _el$6 = _tmpl$5();
+							spread(_el$6, mergeProps(listAria), false, true);
+							insert(_el$6, createComponent(ResolvedSlot, {
+								get content() {
+									return props.children;
+								},
+								get fallback() {
+									return createComponent(Show, {
+										get when() {
+											return state.contentRendered;
+										},
+										get children() {
+											return createComponent(KeyedFor, {
+												get each() {
+													return state.drawnSections;
+												},
+												by: (section) => section.key,
+												children: drawSection
+											});
+										}
+									});
+								}
+							}), null);
+							insert(_el$6, createComponent(Show, {
+								get when() {
+									return state.shown?.length === 0;
+								},
+								get children() {
+									return renderSlot(props.empty);
+								}
+							}), null);
+							return _el$6;
+						})()];
+					} }))];
+				}
+			}));
+			return _el$4;
+		}
+	});
+}
+//#endregion
+export { Select };

package/dist/components/select/base.component.d.ts

@@ -0,0 +1,9 @@
+import type { ISelect } from '@soxa-ui/core';
+import type { SelectCollectionDescriptor, SelectDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, TFieldAttributes, UseDomProps } from '../../types';
+/** События Select — свои и фасада коллекции. */
+export type SelectEventProps = EventProps<typeof SelectDescriptor> & EventProps<typeof SelectCollectionDescriptor>;
+/** Атрибуты Select: класс и стиль — корню, остальное — `<input>` поля. */
+export type SelectAttributes = TDomAttributes<typeof SelectDescriptor, SelectEventProps, TFieldAttributes>;
+/** Пропсы Select; коллекционные входы несёт интерфейс ядра (`ISelectProps`). */
+export type SelectProps = UseDomProps<typeof SelectDescriptor, ISelect, SelectEventProps, TFieldAttributes>;

package/dist/components/select/group/Group.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import type { SelectGroupProps } from './base.component';
+/** Опции списка панели под общей подписью `label`; без подписи нет и её узла. */
+export declare function SelectGroup(props: SelectGroupProps): JSX.Element;

package/dist/components/select/group/Group.js

@@ -0,0 +1,63 @@
+import { renderSlot } from "../../../adapter/common/slots.js";
+import { Show } from "../../../adapter/runtime/flow.js";
+import { createPartProps, createRootProps } from "../../../adapter/common/root.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { Elevate } from "../../../adapter/elevator/Elevate.js";
+import { setupSelectGroup } from "./setup.component.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+//#region src/components/select/group/Group.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=so-select-group__label>`);
+/** Опции списка панели под общей подписью `label`; без подписи нет и её узла. */
+function SelectGroup(props) {
+	const binding = setupSelectGroup(props);
+	const state = binding.state;
+	const root = createRootProps(() => ({
+		state,
+		sets: [
+			state.attrs,
+			state.aria,
+			state.dataset
+		],
+		forward: binding.forwardProps()
+	}));
+	const labelAria = createPartProps(() => state.labelAria);
+	return createComponent(Show, {
+		get when() {
+			return state.rendered;
+		},
+		get children() {
+			return createComponent(Root, {
+				get tag() {
+					return state.tag;
+				},
+				attributes: root,
+				ref(r$) {
+					var _ref$ = binding.ref;
+					typeof _ref$ === "function" ? _ref$(r$) : binding.ref = r$;
+				},
+				get children() {
+					return [createComponent(Show, {
+						get when() {
+							return state.label;
+						},
+						get children() {
+							var _el$ = _tmpl$();
+							spread(_el$, mergeProps(labelAria), false, true);
+							insert(_el$, () => state.label);
+							return _el$;
+						}
+					}), createComponent(Elevate, {
+						get layer() {
+							return binding.layer;
+						},
+						get children() {
+							return renderSlot(props.children);
+						}
+					})];
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { SelectGroup };

package/dist/components/select/group/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { IItemGroup } from '@soxa-ui/core';
+import type { SelectGroupDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../../types';
+/** События группы — свои (ядро и плагин имени): подпись и её набор. */
+export type SelectGroupEventProps = EventProps<typeof SelectGroupDescriptor>;
+/** Пропсы группы: подпись — проп `label`, опции — дети. */
+export type SelectGroupProps = UseDomProps<typeof SelectGroupDescriptor, IItemGroup, SelectGroupEventProps>;

package/dist/components/select/group/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupSelectGroup } from './setup.component';
+export { SelectGroup } from './Group';

package/dist/components/select/group/setup.component.d.ts

@@ -0,0 +1,18 @@
+import type { SelectGroupProps } from './base.component';
+export declare function setupSelectGroup(props: SelectGroupProps): {
+    layer: import("../../../adapter").TElevatorLayer;
+    ctrl: object & import("@soxa-ui/core").IItemGroup<import("@soxa-ui/core").IItemGroupProps, import("@soxa-ui/core").TItemGroupEvents>;
+    state: import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IItemGroup<import("@soxa-ui/core").IItemGroupProps, import("@soxa-ui/core").TItemGroupEvents>, {
+        props: object & {} & {} & {};
+        events: object & {
+            "element:ready": (element: Element) => void;
+            "element:removed": () => void;
+        } & {} & {};
+        outputs: object & {} & {} & {};
+    }>>;
+    forwardProps: () => Partial<SelectGroupProps>;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ref: (el: Element) => void;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+};

package/dist/components/select/group/setup.component.js

@@ -0,0 +1,18 @@
+import { createSolidAdapterContext } from "../../../adapter/common/createSolidAdapterContext.js";
+import { useAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../../adapter/elevator/useElevator.js";
+import { SelectGroupDescriptor, TItemGroupExtension } from "@soxa-ui/setup";
+//#region src/components/select/group/setup.component.ts
+function setupSelectGroup(props) {
+	const { elevator, layer } = useElevator();
+	const adapter = createSolidAdapterContext(SelectGroupDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TItemGroupExtension, { elevator });
+	return {
+		...useAdapter(adapter, props),
+		layer
+	};
+}
+//#endregion
+export { setupSelectGroup };

package/dist/components/select/index.d.ts

@@ -0,0 +1,11 @@
+import { Select as SelectComponent } from './Select';
+import { SelectItem } from './item';
+import { SelectGroup } from './group';
+export * from './base.component';
+export { setupSelect } from './setup.component';
+export * from './item';
+export * from './group';
+export declare const Select: typeof SelectComponent & {
+    Item: typeof SelectItem;
+    Group: typeof SelectGroup;
+};

package/dist/components/select/index.js

@@ -0,0 +1,14 @@
+import "./item/setup.component.js";
+import { SelectItem } from "./item/Item.js";
+import "./group/setup.component.js";
+import { SelectGroup } from "./group/Group.js";
+import "./setup.component.js";
+import { Select as Select$1 } from "./Select.js";
+import { withParts } from "@soxa-ui/setup";
+//#region src/components/select/index.ts
+var Select = withParts(Select$1, {
+	Item: SelectItem,
+	Group: SelectGroup
+});
+//#endregion
+export { Select };

package/dist/components/select/item/Item.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'solid-js';
+import type { SelectItemProps } from './base.component';
+/**
+ * Опция: строка — `ItemRow` на `span` с наборами `aria` и `dataset` опции
+ * (`tabindex="-1"` от `TSelectExtension` — фокус остаётся на поле), выбор — клик по строке, как у
+ * ListBox: сначала выбор, затем клик потребителя. Обёртка
+ * отметки — и у невыбранной: держит место, и строка не прыгает при выборе.
+ */
+export declare function SelectItem(props: SelectItemProps): JSX.Element;