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

package/dist/components/menu/radio-group/RadioGroup.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 { setupMenuRadioGroup } from "./setup.component.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+//#region src/components/menu/radio-group/RadioGroup.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=so-menu-group__label>`);
+/** Переключатели меню под общей подписью: роль `group`, а не `radiogroup` (APG). */
+function MenuRadioGroup(props) {
+	const binding = setupMenuRadioGroup(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 { MenuRadioGroup };

package/dist/components/menu/radio-group/base.component.d.ts

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

package/dist/components/menu/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuRadioGroup } from './setup.component';
+export { MenuRadioGroup } from './RadioGroup';

package/dist/components/menu/radio-group/setup.component.d.ts

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

package/dist/components/menu/radio-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 { MenuRadioGroupDescriptor, TItemGroupExtension, TMenuRadioGroupExtension } from "@soxa-ui/setup";
+//#region src/components/menu/radio-group/setup.component.ts
+function setupMenuRadioGroup(props) {
+	const { elevator, layer } = useElevator();
+	const adapter = createSolidAdapterContext(MenuRadioGroupDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TItemGroupExtension, { elevator }).use(TMenuRadioGroupExtension, { elevator });
+	return {
+		...useAdapter(adapter, props),
+		layer
+	};
+}
+//#endregion
+export { setupMenuRadioGroup };

package/dist/components/menu/radio-item/RadioItem.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import type { MenuRadioItemProps } from './base.component';
+/** Переключатель меню: строка пункта с отметкой в начале; точку отмеченного рисует тема. */
+export declare function MenuRadioItem(props: MenuRadioItemProps): JSX.Element;

package/dist/components/menu/radio-item/RadioItem.js

@@ -0,0 +1,86 @@
+import { renderSlot, resolveSlot } from "../../../adapter/common/slots.js";
+import { Show } from "../../../adapter/runtime/flow.js";
+import { clickAction } from "../../../adapter/common/click-action.js";
+import { createRootProps, toControlAttrs, toRootForward } from "../../../adapter/common/root.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { ItemRow } from "../../item-row/ItemRow.js";
+import { setupMenuRadioItem } from "./setup.component.js";
+import { createComponent, insert, mergeProps, template } from "solid-js/web";
+//#region src/components/menu/radio-item/RadioItem.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=so-menu-item__indicator aria-hidden=true>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class=so-menu-item__icon>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class=so-menu-item__dot>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span class=so-menu-item__shortcut>`);
+/** Переключатель меню: строка пункта с отметкой в начале; точку отмеченного рисует тема. */
+function MenuRadioItem(props) {
+	const binding = setupMenuRadioItem(props);
+	const state = binding.state;
+	const context = binding.context;
+	const root = createRootProps(() => ({
+		state,
+		sets: [state.dataset, state.attrs],
+		forward: toRootForward(binding.forwardProps())
+	}));
+	const content = resolveSlot(() => props.children, () => ({
+		text: state.text ?? "",
+		selected: state.selected ?? false
+	}));
+	const indicatorIcon = resolveSlot(() => props["indicator-icon"], () => ({ selected: state.selected ?? false }));
+	/** The row's attributes: all of the consumer's but the class and the style. */
+	const row = () => toControlAttrs(binding.forwardProps());
+	const check = clickAction(() => context?.adapters.menu.check());
+	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(ItemRow, mergeProps({
+						embedded: "menu.row",
+						tag: "div",
+						get size() {
+							return state.size;
+						},
+						get disabled() {
+							return state.disabled;
+						}
+					}, () => state.aria, row, {
+						ref: check,
+						get leading() {
+							return [(() => {
+								var _el$ = _tmpl$();
+								insert(_el$, () => indicatorIcon() ?? (state.selected ? _tmpl$3() : null));
+								return _el$;
+							})(), (() => {
+								var _el$2 = _tmpl$2();
+								insert(_el$2, () => renderSlot(props.leading));
+								return _el$2;
+							})()];
+						},
+						get trailing() {
+							return (() => {
+								var _el$4 = _tmpl$4();
+								insert(_el$4, () => renderSlot(props.trailing));
+								return _el$4;
+							})();
+						},
+						get children() {
+							return content() ?? state.text;
+						}
+					}));
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { MenuRadioItem };

package/dist/components/menu/radio-item/base.component.d.ts

@@ -0,0 +1,9 @@
+import type { IMenuRadioItem } from '@soxa-ui/core';
+import type { MenuCollectionRadioItemDescriptor, MenuRadioItemDescriptor } from '@soxa-ui/setup';
+import type { EventProps, TDomAttributes, UseDomProps } from '../../../types';
+/** События переключателя — свои (ядро и плагины) и фасада: отметка — выбор коллекции меню. */
+export type MenuRadioItemEventProps = EventProps<typeof MenuRadioItemDescriptor> & EventProps<typeof MenuCollectionRadioItemDescriptor>;
+/** Атрибуты переключателя: класс и стиль — корню, остальное — строке с `role="menuitemradio"`. */
+export type MenuRadioItemAttributes = TDomAttributes<typeof MenuRadioItemDescriptor, MenuRadioItemEventProps>;
+/** Пропсы переключателя; группу пишет проводка — ближайшая `Menu.RadioGroup`. */
+export type MenuRadioItemProps = UseDomProps<typeof MenuRadioItemDescriptor, IMenuRadioItem, MenuRadioItemEventProps>;

package/dist/components/menu/radio-item/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuRadioItem } from './setup.component';
+export { MenuRadioItem } from './RadioItem';

package/dist/components/menu/radio-item/setup.component.d.ts

@@ -0,0 +1,37 @@
+import type { MenuRadioItemProps } from './base.component';
+export declare function setupMenuRadioItem(props: MenuRadioItemProps): {
+    context: import("@soxa-ui/core").TItemContext<import("@soxa-ui/core").IMenuItem<import("@soxa-ui/core").IMenuItemProps, any>, import("@soxa-ui/core").TMenuCollectionExtensions> | undefined;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").IMenuRadioItem;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+    state: import("../../../adapter").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IMenuRadioItem, {
+        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 & {} & {} & {} & {} & {} & {
+            readonly listItem_highlighted: boolean;
+        };
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TMenuItemCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<MenuRadioItemProps>;
+};

package/dist/components/menu/radio-item/setup.component.js

@@ -0,0 +1,24 @@
+import { createSolidAdapterContext } from "../../../adapter/common/createSolidAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../../adapter/elevator/useElevator.js";
+import { MenuCollectionRadioItemDescriptor, MenuRadioItemDescriptor, TCollectionItemExtension, TMenuRadioItemExtension } from "@soxa-ui/setup";
+//#region src/components/menu/radio-item/setup.component.ts
+function setupMenuRadioItem(props) {
+	const { elevator } = useElevator();
+	const adapter = createSolidAdapterContext(MenuRadioItemDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	}).use(TMenuRadioItemExtension, { elevator });
+	const item = createSolidAdapterContext(MenuCollectionRadioItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+		adapter,
+		elevator
+	});
+	const itemBinding = useCollectionAdapter(item, props);
+	const owner = useAdapter(adapter, props);
+	return {
+		...joinBindings(owner, itemBinding),
+		context: item.instance.context
+	};
+}
+//#endregion
+export { setupMenuRadioItem };

package/dist/components/menu/separator/Separator.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import type { MenuSeparatorProps } from './base.component';
+/** Разделитель меню: корень без содержимого. */
+export declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;

package/dist/components/menu/separator/Separator.js

@@ -0,0 +1,39 @@
+import { Show } from "../../../adapter/runtime/flow.js";
+import { createRootProps } from "../../../adapter/common/root.js";
+import { Root } from "../../../adapter/runtime/Root.js";
+import { setupMenuSeparator } from "./setup.component.js";
+import { createComponent } from "solid-js/web";
+//#region src/components/menu/separator/Separator.tsx
+/** Разделитель меню: корень без содержимого. */
+function MenuSeparator(props) {
+	const binding = setupMenuSeparator(props);
+	const state = binding.state;
+	const root = createRootProps(() => ({
+		state,
+		sets: [
+			state.attrs,
+			state.aria,
+			state.dataset
+		],
+		forward: binding.forwardProps()
+	}));
+	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$;
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { MenuSeparator };

package/dist/components/menu/separator/base.component.d.ts

@@ -0,0 +1,7 @@
+import type { TMenuSeparator } from '@soxa-ui/core';
+import type { MenuSeparatorDescriptor } from '@soxa-ui/setup';
+import type { EventProps, UseDomProps } from '../../../types';
+/** События разделителя — свои (ядро и плагины). */
+export type MenuSeparatorEventProps = EventProps<typeof MenuSeparatorDescriptor>;
+/** Пропсы разделителя меню: своих пропсов у него нет, роль `separator` пишет ядро. */
+export type MenuSeparatorProps = UseDomProps<typeof MenuSeparatorDescriptor, TMenuSeparator, MenuSeparatorEventProps>;

package/dist/components/menu/separator/index.d.ts

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupMenuSeparator } from './setup.component';
+export { MenuSeparator } from './Separator';

package/dist/components/menu/separator/setup.component.d.ts

@@ -0,0 +1,9 @@
+import type { MenuSeparatorProps } from './base.component';
+export declare function setupMenuSeparator(props: MenuSeparatorProps): import("../../../adapter").TBinding<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TMenuSeparator, {
+    props: object & {} & {};
+    events: object & {
+        "element:ready": (element: Element) => void;
+        "element:removed": () => void;
+    } & {};
+    outputs: object & {} & {};
+}>, MenuSeparatorProps>;

package/dist/components/menu/separator/setup.component.js

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

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

@@ -0,0 +1,29 @@
+import type { MenuProps } from './base.component';
+export declare function setupMenu(props: MenuProps): {
+    layer: import("../../adapter").TElevatorLayer;
+    ref: (el: Element) => void;
+    rootElement: import("solid-js").Accessor<Element | null>;
+    ctrl: object & import("@soxa-ui/core").IMenu;
+    bindRef: (el: Element) => void;
+    consumerRef: (el: Element) => void;
+    state: import("../../adapter").TJoinedState<import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").IMenu, {
+        props: object & {} & {} & {} & {} & {} & {} & {
+            dismiss_enabled?: boolean | undefined;
+        } & {} & {} & {} & {};
+        events: object & {
+            "element:ready": (element: Element) => void;
+            "element:removed": () => void;
+        } & {} & {
+            "dismiss:dismiss": (event: MouseEvent | FocusEvent) => void;
+            "dismiss:change:enabled": (payload: import("@soxa-ui/core").TValuePayload<boolean>) => void;
+        } & {} & {} & {} & {} & {} & {} & {} & {};
+        outputs: object & {} & {} & {} & {} & {} & {} & {
+            readonly dismiss_ownerAttribute: Record<string, string>;
+        } & {} & {} & {} & {};
+    }>>, import("@soxa-ui/setup").TAdapterState<import("@soxa-ui/setup").TContextContract<import("@soxa-ui/core").TMenuCollectionFacade, {
+        props: object;
+        events: object;
+        outputs: object;
+    }>>>;
+    forwardProps: () => Partial<MenuProps>;
+};

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

@@ -0,0 +1,27 @@
+import { createSolidAdapterContext } from "../../adapter/common/createSolidAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { useElevator } from "../../adapter/elevator/useElevator.js";
+import { MenuCollectionDescriptor, MenuDescriptor, TCollectionExtension } from "@soxa-ui/setup";
+//#region src/components/menu/setup.component.ts
+function setupMenu(props) {
+	const { elevator, layer } = useElevator();
+	const adapter = createSolidAdapterContext(MenuDescriptor(), {
+		ctrl: props.ctrl,
+		props
+	});
+	const collectionAdapter = createSolidAdapterContext(MenuCollectionDescriptor(), {
+		props,
+		options: {
+			owner: adapter.instance,
+			engine: props.engine
+		}
+	}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator });
+	const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+	const owner = useAdapter(adapter, props);
+	return {
+		...joinBindings(owner, collectionBinding),
+		layer
+	};
+}
+//#endregion
+export { setupMenu };

package/dist/components/menu/submenu/Submenu.d.ts

@@ -0,0 +1,23 @@
+import type { JSX } from 'solid-js';
+import type { IMenuItem, TGroupSection, TMenuSubmenuEntries } from '@soxa-ui/core';
+import type { MenuSubmenuProps } from './base.component';
+/** Что пунктам из данных нужно от состояния владельца — меню или подменю. */
+type TItemsState = {
+    /** Секции показанных пунктов: группа с подписью или пункты без группы. */
+    readonly sections?: ReadonlyArray<TGroupSection<IMenuItem>>;
+    /** Подменю из данных по пункту — пункт и движок его пунктов. */
+    readonly submenus?: TMenuSubmenuEntries;
+    /** Рисовать ли разделитель между соседними секциями. */
+    readonly groupSeparators?: boolean;
+};
+/** Слоты пунктов из данных — одни на все уровни: подменю из данных их получает как есть. */
+type TItemSlots = Pick<MenuSubmenuProps, 'item' | 'item-leading' | 'item-trailing' | 'item-header' | 'item-arrow-icon' | 'item-content'>;
+/**
+ * Пункты из данных (`items`) — одна разметка на меню и подменю. Подменю из данных —
+ * `Show` по записи `submenus` (`keyed`): запись у пункта устойчива, а `ctrl` и
+ * `engine` подменю читает при сборке.
+ */
+export declare function drawItems(state: TItemsState, slots: TItemSlots): JSX.Element;
+/** Пункт с подменю: строка пункта в меню над ним и своя панель с пунктами. */
+export declare function MenuSubmenu(props: MenuSubmenuProps): JSX.Element;
+export {};