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

package/dist/source/components/textarea/Textarea.jsx

@@ -0,0 +1,27 @@
+import { Root, createPartProps, createRootProps, textareaText, toControlAttrs, toRootForward, } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { setupTextarea } from './setup.component';
+/** Многострочное поле: `<textarea>` внутри корня, под ним — счётчик символов при `counter`. */
+export function Textarea(props) {
+    const binding = setupTextarea(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: toRootForward(binding.forwardProps()),
+    }));
+    const aria = createPartProps(() => state.aria);
+    const control = createPartProps(() => toControlAttrs(binding.forwardProps()));
+    const counterAria = createPartProps(() => state.counterAria);
+    const text = textareaText(() => state.value);
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<textarea id={state.id} name={state.name} rows={state.rows} maxlength={state.maxlength} disabled={state.disabled} readonly={state.readonly} required={state.required} placeholder={state.placeholder} {...aria()} {...control()} {...text}/>
+				<Show when={state.counter}>
+					<div class="so-textarea__counter" {...counterAria()}>
+						{state.names_counter}
+					</div>
+				</Show>
+			</Root>
+		</Show>);
+}

package/dist/source/components/textarea/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/textarea/index.js

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

package/dist/source/components/textarea/setup.component.js

@@ -0,0 +1,10 @@
+import { TextareaDescriptor, TFieldControlExtension } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+export function setupTextarea(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(TextareaDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TFieldControlExtension, { elevator });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/toasts/Toasts.jsx

@@ -0,0 +1,33 @@
+import { Elevate, Root, Teleport, createRootProps, relaySlot, renderSlot } from '../../adapter';
+import { For, Show } from '../../adapter/runtime/flow';
+import { ToastsItem } from './item';
+import { setupToasts } from './setup.component';
+/**
+ * Менеджер тостов: `children` — приложение, регион с тостами — телепортом в `target`.
+ * Оба — в слое лифта менеджера: API тостов и движок берут из него.
+ */
+export function Toasts(props) {
+    const binding = setupToasts(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    return (<Elevate layer={binding.layer}>
+			{renderSlot(props.children)}
+			<Show when={state.rendered}>
+				<Teleport to={state.target}>
+					<Root tag={state.tag} attributes={root} ref={binding.ref}>
+						<ol class="so-toasts__list">
+							<For each={state.shown}>
+								{(item) => (<ToastsItem ctrl={item} icon={relaySlot(props['item-icon'], { item })} content={renderSlot(props['item-content'], { item })} close-icon={renderSlot(props['item-close-icon'], { item })}>
+										{relaySlot(props.item, { item })}
+									</ToastsItem>)}
+							</For>
+						</ol>
+					</Root>
+				</Teleport>
+			</Show>
+		</Elevate>);
+}

package/dist/source/components/toasts/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/toasts/index.js

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

package/dist/source/components/toasts/item/Item.jsx

@@ -0,0 +1,64 @@
+import { Dynamic } from 'solid-js/web';
+import { Root, clickAction, createRootProps, isToastRender, resolveSlot, roleIcon, } from '../../../adapter';
+import { Show } from '../../../adapter/runtime/flow';
+import { Button } from '../../button';
+import { Icon } from '../../icon';
+import { ProgressSpinner } from '../../progress-spinner';
+import { setupToastsItem } from './setup.component';
+/** Значок вида — по роли; таблица закрыта по виду (`satisfies`): вид без значка не соберётся. */
+const TYPE_ICONS = {
+    info: roleIcon('info'),
+    success: roleIcon('success'),
+    warning: roleIcon('warning'),
+    error: roleIcon('error'),
+};
+/** Значок обычного сообщения — тоста без вида. */
+const NOTIFICATION = roleIcon('notification');
+/** Иконка крестика по умолчанию. */
+const CLOSE = roleIcon('close');
+/**
+ * Тост — внутренняя часть Toasts. Корень — место в списке, плашка — отдельный узел:
+ * место растёт и схлопывается переходом высоты, а плашка своего размера не меняет.
+ */
+export function ToastsItem(props) {
+    const binding = setupToastsItem(props);
+    const state = binding.state;
+    const ctrl = binding.ctrl;
+    const close = clickAction(() => ctrl.close());
+    // Состояние — поимённо, без `order` фасада; глубина — стиль-выходом
+    const root = createRootProps(() => ({
+        state: { classes: state.classes, visible: state.visible },
+        sets: [state.attrs, state.aria, state.dataset],
+        forward: binding.forwardProps(),
+        style: { '--so-toasts-depth': state.order ?? '' },
+    }));
+    const icon = resolveSlot(() => props.icon, () => ({ type: state.type }));
+    const text = resolveSlot(() => props.children, () => ({ text: state.text ?? '' }));
+    const content = resolveSlot(() => props.content, () => ({}));
+    const closeIcon = resolveSlot(() => props['close-icon'], () => ({}));
+    /** Своё содержимое — когда `render` тоста компонент Solid; иначе его нет. */
+    const render = () => isToastRender(state.render) ? state.render : undefined;
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				<div class="so-toasts-item__card">
+					<span class="so-toasts-item__icon" aria-hidden="true">
+						<Show when={!state.loading} fallback={<ProgressSpinner embedded="toasts.spinner" indeterminate/>}>
+							{icon() ?? (<Icon embedded="toasts.icon" tag={state.type ? TYPE_ICONS[state.type] : NOTIFICATION}/>)}
+						</Show>
+					</span>
+					<div class="so-toasts-item__body">
+						<div class="so-toasts-item__text">{text() ?? state.text}</div>
+						<div class="so-toasts-item__description">{state.description}</div>
+						<div class="so-toasts-item__content">
+							{content() ?? <Dynamic component={render()} toast={ctrl}/>}
+						</div>
+					</div>
+					<Show when={state.closable}>
+						<Button embedded="toasts.close" type="button" class="so-toasts-item__close" ref={close} {...state.closeAria}>
+							{closeIcon() ?? <Icon embedded="toasts.close-icon" tag={CLOSE}/>}
+						</Button>
+					</Show>
+				</div>
+			</Root>
+		</Show>);
+}

package/dist/source/components/toasts/item/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/toasts/item/index.js

@@ -0,0 +1,3 @@
+export * from './base.component';
+export { setupToastsItem } from './setup.component';
+export { ToastsItem } from './Item';

package/dist/source/components/toasts/item/setup.component.js

@@ -0,0 +1,13 @@
+import { TCollectionItemExtension, ToastsCollectionItemDescriptor, ToastsItemDescriptor, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../../adapter';
+export function setupToastsItem(props) {
+    const { elevator } = useElevator();
+    const adapter = createSolidAdapterContext(ToastsItemDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    });
+    const item = createSolidAdapterContext(ToastsCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, { adapter, elevator });
+    const itemBinding = useCollectionAdapter(item, props);
+    const owner = useAdapter(adapter, props);
+    return joinBindings(owner, itemBinding);
+}

package/dist/source/components/toasts/setup.component.js

@@ -0,0 +1,15 @@
+import { TCollectionExtension, TToastsApiExtension, ToastsCollectionDescriptor, ToastsDescriptor, } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, joinBindings, useCollectionAdapter, useElevator, } from '../../adapter';
+export function setupToasts(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(ToastsDescriptor(), { ctrl: props.ctrl, props });
+    const collectionAdapter = createSolidAdapterContext(ToastsCollectionDescriptor(), {
+        props,
+        options: { owner: adapter.instance, engine: props.engine },
+    }, { bundle: adapter.bundle })
+        .use(TCollectionExtension, { elevator })
+        .use(TToastsApiExtension, { elevator });
+    const collectionBinding = useCollectionAdapter(collectionAdapter, props);
+    const owner = useAdapter(adapter, props);
+    return { ...joinBindings(owner, collectionBinding), layer };
+}

package/dist/source/components/tooltip/Tooltip.jsx

@@ -0,0 +1,24 @@
+import { Root, createRootProps, liveScope, renderSlot } from '../../adapter';
+import { Show } from '../../adapter/runtime/flow';
+import { Frame } from '../frame';
+import { setupTooltip } from './setup.component';
+/** Подсказка у триггера: корень — обёртка триггера, якорь панели и цель наведения. */
+export function Tooltip(props) {
+    const binding = setupTooltip(props);
+    const state = binding.state;
+    const root = createRootProps(() => ({
+        state,
+        sets: [state.attrs, state.dataset],
+        forward: binding.forwardProps(),
+    }));
+    const trigger = liveScope(() => ({ triggerAria: state.triggerAria ?? {} }));
+    return (<Show when={state.rendered}>
+			<Root tag={state.tag} attributes={root} ref={binding.ref}>
+				{renderSlot(props.trigger, trigger)}
+				<Frame embedded="tooltip.frame" class="so-tooltip__panel" visible={state.visible && state.open} strategy="fixed" anchor_anchor={binding.rootElement()} anchor_placement={state.placement} anchor_offset={6} {...state.aria} {...state.dismiss_ownerAttribute}>
+					{/* Обёртка держит ширину панели: по тексту, до потолка темы. */}
+					<div class="so-tooltip__content">{renderSlot(props.children)}</div>
+				</Frame>
+			</Root>
+		</Show>);
+}

package/dist/source/components/tooltip/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/tooltip/index.js

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

package/dist/source/components/tooltip/setup.component.js

@@ -0,0 +1,6 @@
+import { TooltipDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupTooltip(props) {
+    const adapter = createSolidAdapterContext(TooltipDescriptor(), { ctrl: props.ctrl, props });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/value-control/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/value-control/index.js

@@ -0,0 +1,2 @@
+export * from './base.component';
+export { setupValueControl } from './setup.component';

package/dist/source/components/value-control/setup.component.js

@@ -0,0 +1,6 @@
+import { ValueControlDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter } from '../../adapter';
+export function setupValueControl(props) {
+    const adapter = createSolidAdapterContext(ValueControlDescriptor(), { ctrl: props.ctrl, props });
+    return useAdapter(adapter, props);
+}

package/dist/source/components/virtual/Virtual.jsx

@@ -0,0 +1,7 @@
+import { Elevate, renderSlot } from '../../adapter';
+import { setupVirtual } from './setup.component';
+/** Окно для длинных списков: коллекции внутри рисуют только видимое; своего узла нет. */
+export function Virtual(props) {
+    const binding = setupVirtual(props);
+    return <Elevate layer={binding.layer}>{renderSlot(props.children)}</Elevate>;
+}

package/dist/source/components/virtual/base.component.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/virtual/index.js

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

package/dist/source/components/virtual/setup.component.js

@@ -0,0 +1,12 @@
+import { TVirtualExtension, VirtualDescriptor } from '@soxa-ui/setup';
+import { createSolidAdapterContext, useAdapter, useElevator } from '../../adapter';
+/** Узла у обёртки нет: разметке нужны состояние и слой, `ref` не отдаётся. */
+export function setupVirtual(props) {
+    const { elevator, layer } = useElevator();
+    const adapter = createSolidAdapterContext(VirtualDescriptor(), {
+        ctrl: props.ctrl,
+        props,
+    }).use(TVirtualExtension, { elevator });
+    const binding = useAdapter(adapter, props);
+    return { ctrl: binding.ctrl, state: binding.state, layer };
+}

package/dist/source/index.js

@@ -0,0 +1,5 @@
+/** Application API. Assembly helpers stay inside the adapter. */
+export { ComponentView, Button, Icon, Label, Field, Frame, Popover, Tooltip, Dialog, Drawer, Toasts, Menu, MenuItem, MenuCheckboxItem, MenuRadioItem, MenuSubmenu, MenuPopoverItem, MenuGroup, MenuRadioGroup, MenuSeparator, ProgressSpinner, ProgressLinear, Skeleton, Input, NumberInput, DateInput, Textarea, CheckBox, Switch, Slider, Rating, RadioGroup, RadioGroupItem, ListBox, ListBoxItem, ListBoxGroup, Tabs, TabsItem, TabsContent, Tags, TagsItem, Select, SelectItem, SelectGroup, Calendar, CalendarItem, DatePicker, Accordion, AccordionItem, Pagination, Scroller, Table, TableColumn, TableRow, Virtual, DragAndDrop, } from './components';
+export { roleIcon } from './adapter/common';
+export { LocaleProvider } from './adapter/locale';
+export { useToasts } from './adapter/toasts';

package/dist/source/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+import type { JSX } from 'solid-js';
+import type { IEntity } from '@soxa-ui/core';
+import type { IComponentDescriptor, DescriptorAllProps, DescriptorCallbackEvents, DescriptorComponentProps, DescriptorSlots, TContractOf, TSlotProps } from '@soxa-ui/setup';
+import type { TConsumerRef } from './adapter';
+/** Событийные пропы компонента из дескриптора (core + плагины). */
+export type EventProps<TDescriptorFn extends (...args: any[]) => IComponentDescriptor> = DescriptorCallbackEvents<TDescriptorFn>;
+/**
+ * Слоты компонента из дескриптора: `default` становится `children`,
+ * остальные сохраняют имена. Слот со scope принимает и функцию.
+ */
+export type SlotProps<TDescriptorFn extends (...args: any[]) => IComponentDescriptor> = TSlotProps<DescriptorSlots<TDescriptorFn>, JSX.Element>;
+/** Props headless-слоя: core props + события + слоты + служебные поля. */
+export type UseProps<TDescriptorFn extends (...args: any[]) => IComponentDescriptor, TInstance extends IEntity = IEntity, TEvents extends object = EventProps<TDescriptorFn>> = DescriptorComponentProps<TDescriptorFn, TInstance> & TEvents & SlotProps<TDescriptorFn>;
+/**
+ * HTML-атрибуты DOM-компонента без входов, слотов и событий дескриптора — то, что
+ * компонент не съел (`forwardProps`). `children` и защищённые имена вычитаются всегда
+ * (docs/agents/setup.md); `ref` — всегда корень компонента (`TConsumerRef`).
+ */
+export type TDomAttributes<TDescriptorFn extends (...args: any[]) => IComponentDescriptor, TEvents extends object = EventProps<TDescriptorFn>, TAttributes extends object = JSX.HTMLAttributes<HTMLElement>> = Omit<TAttributes, 'children' | 'ref' | keyof DescriptorAllProps<TDescriptorFn> | TContractOf<TDescriptorFn>['protectedName'] | keyof SlotProps<TDescriptorFn> | keyof TEvents> & {
+    /** Корень компонента — узел, на который ложатся класс и атрибуты потребителя. */
+    ref?: TConsumerRef;
+};
+/**
+ * Атрибуты `<input>` полей без того, что поле ведёт само: отметки (из ядра),
+ * `readOnly` (вход `readonly`) и `ref` (`fieldText`; `ref` потребителя — корню).
+ */
+export type TFieldAttributes = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'checked' | 'prop:indeterminate' | 'readonly' | 'readOnly' | 'ref'>;
+/**
+ * Атрибуты `<textarea>` без того, что поле ведёт само: имён DOM входов `readonly` и
+ * `maxlength`, содержимого (текст — вход `value`) и `ref` (`textareaText`).
+ */
+export type TTextareaAttributes = Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'readonly' | 'readOnly' | 'maxlength' | 'maxLength' | 'textContent' | 'innerHTML' | 'ref'>;
+/** Props DOM-компонента: `UseProps` + атрибуты (`TDomAttributes`). */
+export type UseDomProps<TDescriptorFn extends (...args: any[]) => IComponentDescriptor, TInstance extends IEntity = IEntity, TEvents extends object = EventProps<TDescriptorFn>, TAttributes extends object = JSX.HTMLAttributes<HTMLElement>> = UseProps<TDescriptorFn, TInstance, TEvents> & TDomAttributes<TDescriptorFn, TEvents, TAttributes>;
+/** `prop:indeterminate` флажка: свойства узла нет в типах атрибутов `<input>` JSX Solid. */
+declare module 'solid-js' {
+    namespace JSX {
+        interface ExplicitProperties {
+            indeterminate: boolean;
+        }
+    }
+}

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@soxa-ui/solid",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0-beta.1",
+  "description": "Адаптер Solid: компоненты на headless-моделях ядра",
+  "keywords": [
+    "soxa",
+    "headless",
+    "ui",
+    "components",
+    "solid"
+  ],
+  "license": "MIT",
+  "author": "Yuri Soldatov",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/youra-h/soxa-ui.git",
+    "directory": "packages/ui/solid"
+  },
+  "homepage": "https://github.com/youra-h/soxa-ui",
+  "bugs": {
+    "url": "https://github.com/youra-h/soxa-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "solid": "./dist/source/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build -c vite.lib.config.ts && tsc -p tsconfig.build.json && tsc -p tsconfig.source.json",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@soxa-ui/core": "0.3.0-beta.1",
+    "@soxa-ui/plugins": "0.3.0-beta.1",
+    "@soxa-ui/setup": "0.3.0-beta.1"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.13"
+  },
+  "devDependencies": {
+    "@soxa-ui/icons-material": "0.3.0-beta.1",
+    "@soxa-ui/theme-oren": "0.3.0-beta.1",
+    "solid-js": "^1.9.17",
+    "vite-plugin-solid": "^2.11.14"
+  }
+}