diff --git a/Makefile b/Makefile
index bdfeceb4..c4421117 100644
--- a/Makefile
+++ b/Makefile
@@ -45,11 +45,12 @@ storybook.serve: .require-compose ## [Build][docker] Runs Storybook for v1-compo
storybook.shot: .require-compose ## [Research][docker] Captures a Storybook screenshot for v1-components docs/story page
$(TARGET_HEADER)
@$(COMPOSE) up -d v1-components
- @UID=$$(id -u) GID=$$(id -g) $(COMPOSE) run --rm playwright \
+ @$(COMPOSE) run --rm --user "$$(id -u):$$(id -g)" playwright \
yarn workspace @retailcrm/embed-ui-v1-components run storybook:shot \
--base-url http://v1-components:6006 \
--path "$(if $(story_path),$(story_path),/iframe.html?viewMode=docs&id=components-uitable--docs)" \
--output "$(if $(output),$(output),artifacts/storybook/UiTable.docs.png)" \
+ $(if $(selector),--selector "$(selector)",) \
--wait-for-selector "$(if $(wait_for),$(wait_for),#storybook-docs)" \
--settle-ms "$(if $(settle_ms),$(settle_ms),2500)" \
--timeout-ms "$(if $(timeout_ms),$(timeout_ms),60000)" \
@@ -83,6 +84,18 @@ else
endif
$(TARGET_OK)
+.PHONY: tests-e2e
+tests-e2e: .require-compose ## [Tests][docker] Runs v1-components browser e2e tests
+ $(TARGET_HEADER)
+ifdef cli
+ @$(COMPOSE) run --rm --user "$$(id -u):$$(id -g)" playwright \
+ yarn workspace @retailcrm/embed-ui-v1-components run test:e2e $(cli)
+else
+ @$(COMPOSE) run --rm --user "$$(id -u):$$(id -g)" playwright \
+ yarn workspace @retailcrm/embed-ui-v1-components run test:e2e
+endif
+ $(TARGET_OK)
+
.PHONY: tests-coverage
tests-coverage: .require-compose ## [Tests][docker][heavy] Runs autotests with coverage report
$(TARGET_HEADER)
diff --git a/packages/v1-components/assets/sprites/actions/add-square-outlined.svg b/packages/v1-components/assets/sprites/actions/add-square-outlined.svg
new file mode 100644
index 00000000..01a7bc12
--- /dev/null
+++ b/packages/v1-components/assets/sprites/actions/add-square-outlined.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/v1-components/assets/sprites/actions/drag.svg b/packages/v1-components/assets/sprites/actions/drag.svg
new file mode 100644
index 00000000..4b96ef5a
--- /dev/null
+++ b/packages/v1-components/assets/sprites/actions/drag.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/v1-components/src/common/components/logic-tree.ts b/packages/v1-components/src/common/components/logic-tree.ts
new file mode 100644
index 00000000..e6b093bf
--- /dev/null
+++ b/packages/v1-components/src/common/components/logic-tree.ts
@@ -0,0 +1,139 @@
+export enum LogicTreeNodeKind {
+ BRANCH = 'branch',
+ CONDITION = 'condition',
+ GROUP = 'group',
+}
+
+export enum LogicTreeChildrenView {
+ GROUPED = 'grouped',
+ PLAIN = 'plain',
+}
+
+export enum LogicTreeConjunction {
+ AND = 'and',
+ OR = 'or',
+}
+
+export enum LogicTreeNodeView {
+ ACTIONS = 'actions',
+ SUMMARY = 'summary',
+}
+
+export enum LogicTreeTone {
+ BLUE = 'blue',
+ GREEN = 'green',
+ GREY = 'grey',
+ RED = 'red',
+ YELLOW = 'yellow',
+}
+
+export type UiLogicTreeConnector = {
+ continues: boolean;
+ placeholder?: boolean;
+ tone: LogicTreeTone;
+ visible: boolean;
+}
+
+export type UiLogicTreeNodeData> = {
+ view: LogicTreeNodeView;
+ editable: boolean;
+ disabled?: boolean;
+ draggable?: boolean;
+ selected?: boolean;
+ highlighted?: boolean;
+} & TNodeData
+
+export type UiLogicTreeNode> = {
+ id: string;
+ kind: LogicTreeNodeKind;
+ tone?: LogicTreeTone;
+ conjunction?: LogicTreeConjunction | string;
+ collapsible?: boolean;
+ expanded?: boolean;
+ childrenView?: LogicTreeChildrenView;
+ children?: UiLogicTreeNode[];
+ data: UiLogicTreeNodeData;
+}
+
+export type UiLogicTreeProperties> = {
+ items?: UiLogicTreeNode[];
+}
+
+export type UiLogicTreeDropPayload = {
+ itemId: string;
+ sourceContainerId: string;
+ targetContainerId: string;
+ targetIndex: number | null;
+ targetItemId: string | null;
+ placement: 'after' | 'before';
+ payload?: unknown;
+}
+
+export type UiLogicTreeNodeAddPayload = {
+ actionId: string;
+ kind: Exclude;
+ parentNodeId: string | null;
+ parentPathKey: string | null;
+ triggerNodeId: string;
+}
+
+export type UiLogicTreeNodeEditPayload = {
+ controlId: string;
+ nodeId: string;
+ pathKey: string;
+ value: string | number | null;
+}
+
+export type UiLogicTreeNodeRemovePayload = {
+ index: number;
+ nodeId: string;
+ parentNodeId: string | null;
+ parentPathKey: string | null;
+ pathKey: string;
+}
+
+export type UiLogicTreeNodeSlotProps> = {
+ editing: boolean;
+ expanded: boolean;
+ grouped: boolean;
+ groupedHeader: boolean;
+ groupedPosition?: UiLogicTreeNodeProperties['groupedPosition'];
+ hasChildren: boolean;
+ highlighted: boolean;
+ disabled: boolean;
+ node: UiLogicTreeNode;
+ path: number[];
+ pathKey: string;
+ nodeView: LogicTreeNodeView;
+ selected: boolean;
+ onAction: (actionId: string, kind: Exclude['kind'], LogicTreeNodeKind.BRANCH>) => void;
+ onControlAction: (controlId: string) => void;
+ onControlUpdate: (controlId: string, value: string | number | null) => void;
+ onRemove: () => void;
+ onToggle: () => void;
+}
+
+export type UiLogicTreeRootProperties = Record
+
+export type UiLogicTreeCaretProperties = {
+ active?: boolean;
+}
+
+export type UiLogicTreeNodeProperties = {
+ pathKey?: string;
+ nodeView?: LogicTreeNodeView;
+ connectors?: UiLogicTreeConnector[];
+ conjunction?: string;
+ conjunctionEndPathKey?: string;
+ conjunctionLabel?: string;
+ conjunctionOffset?: number;
+ conjunctionStartPathKey?: string;
+ conjunctionTone?: LogicTreeTone;
+ groupedHeader?: boolean;
+ grouped?: boolean;
+ groupedPosition?: 'end' | 'middle' | 'single' | 'start';
+ editable?: boolean;
+ disabled?: boolean;
+ highlighted?: boolean;
+ selected?: boolean;
+}
diff --git a/packages/v1-components/src/common/components/popper.ts b/packages/v1-components/src/common/components/popper.ts
index b11e5dd2..058f5cf2 100644
--- a/packages/v1-components/src/common/components/popper.ts
+++ b/packages/v1-components/src/common/components/popper.ts
@@ -34,6 +34,7 @@ export type FloatingOptions = {
}
export type ShowingOptions = {
+ visible?: boolean;
shown?: boolean;
targetTriggers?: Trigger[] | TriggerSchema;
popperTriggers?: Trigger[] | TriggerSchema;
diff --git a/packages/v1-components/src/host/components/index.ts b/packages/v1-components/src/host/components/index.ts
index f777ec60..04d9182f 100644
--- a/packages/v1-components/src/host/components/index.ts
+++ b/packages/v1-components/src/host/components/index.ts
@@ -16,6 +16,11 @@ export { default as UiImage } from '@/host/components/image/UiImage.vue'
export { default as UiInfobox } from '@/host/components/infobox/UiInfobox.vue'
export { default as UiLink } from '@/host/components/link/UiLink.vue'
export { default as UiLoader } from '@/host/components/loader/UiLoader.vue'
+export { default as UiLogicTreeCaret } from '@/host/components/logic-tree/UiLogicTreeCaret.vue'
+export { default as UiLogicTreeNode } from '@/host/components/logic-tree/UiLogicTreeNode.vue'
+export { default as UiLogicTreeNodeIcon } from '@/host/components/logic-tree/UiLogicTreeNodeIcon.vue'
+export { default as UiLogicTreeNodeItem } from '@/host/components/logic-tree/UiLogicTreeNodeItem.vue'
+export { default as UiLogicTreeRoot } from '@/host/components/logic-tree/UiLogicTreeRoot.vue'
export { default as UiMenuItem } from '@/host/components/menu/UiMenuItem.vue'
export { default as UiMenuItemGroup } from '@/host/components/menu/UiMenuItemGroup.vue'
export { default as UiModalSidebar } from '@/host/components/modal-sidebar/UiModalSidebar.vue'
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue
new file mode 100644
index 00000000..6b91c7bc
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue.d.ts b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue.d.ts
new file mode 100644
index 00000000..27832358
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeCaret.vue.d.ts
@@ -0,0 +1,7 @@
+import type { DefineComponent } from '@/common/vue'
+
+import type { UiLogicTreeCaretProperties } from '@/common/components/logic-tree'
+
+declare const UiLogicTreeCaret: DefineComponent
+
+export default UiLogicTreeCaret
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue
new file mode 100644
index 00000000..62262cde
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNode.vue
@@ -0,0 +1,388 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ conjunctionLabel || conjunction }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue.d.ts b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue.d.ts
new file mode 100644
index 00000000..5183b3eb
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeNodeItem.vue.d.ts
@@ -0,0 +1,5 @@
+import type { DefineComponent } from '@/common/vue'
+
+declare const UiLogicTreeNodeItem: DefineComponent
+
+export default UiLogicTreeNodeItem
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue
new file mode 100644
index 00000000..e5711b72
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue.d.ts b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue.d.ts
new file mode 100644
index 00000000..212f41f9
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/UiLogicTreeRoot.vue.d.ts
@@ -0,0 +1,7 @@
+import type { DefineComponent } from '@/common/vue'
+
+import type { UiLogicTreeRootProperties } from '@/common/components/logic-tree'
+
+declare const UiLogicTreeRoot: DefineComponent
+
+export default UiLogicTreeRoot
diff --git a/packages/v1-components/src/host/components/logic-tree/i18n.ts b/packages/v1-components/src/host/components/logic-tree/i18n.ts
new file mode 100644
index 00000000..27118d98
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/i18n.ts
@@ -0,0 +1,13 @@
+import { define } from '@/host/i18n'
+
+import messages_en_GB from './i18n/en-GB.json'
+import messages_es_ES from './i18n/es-ES.json'
+import messages_ru_RU from './i18n/ru-RU.json'
+
+export default define({
+ messages: {
+ 'en-GB': messages_en_GB,
+ 'es-ES': messages_es_ES,
+ 'ru-RU': messages_ru_RU,
+ },
+})
\ No newline at end of file
diff --git a/packages/v1-components/src/host/components/logic-tree/i18n/en-GB.json b/packages/v1-components/src/host/components/logic-tree/i18n/en-GB.json
new file mode 100644
index 00000000..6429bdaf
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/i18n/en-GB.json
@@ -0,0 +1,5 @@
+{
+ "delete": "Delete",
+ "relationAnd": "AND",
+ "relationOr": "OR"
+}
diff --git a/packages/v1-components/src/host/components/logic-tree/i18n/es-ES.json b/packages/v1-components/src/host/components/logic-tree/i18n/es-ES.json
new file mode 100644
index 00000000..e356bcf9
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/i18n/es-ES.json
@@ -0,0 +1,5 @@
+{
+ "delete": "Eliminar",
+ "relationAnd": "Y",
+ "relationOr": "O"
+}
diff --git a/packages/v1-components/src/host/components/logic-tree/i18n/ru-RU.json b/packages/v1-components/src/host/components/logic-tree/i18n/ru-RU.json
new file mode 100644
index 00000000..c1f895c2
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/i18n/ru-RU.json
@@ -0,0 +1,5 @@
+{
+ "delete": "Удалить",
+ "relationAnd": "И",
+ "relationOr": "ИЛИ"
+}
diff --git a/packages/v1-components/src/host/components/logic-tree/index.ts b/packages/v1-components/src/host/components/logic-tree/index.ts
new file mode 100644
index 00000000..f7bcafad
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/index.ts
@@ -0,0 +1,5 @@
+export { default as UiLogicTreeCaret } from './UiLogicTreeCaret.vue'
+export { default as UiLogicTreeNodeIcon } from './UiLogicTreeNodeIcon.vue'
+export { default as UiLogicTreeNodeItem } from './UiLogicTreeNodeItem.vue'
+export { default as UiLogicTreeNode } from './UiLogicTreeNode.vue'
+export { default as UiLogicTreeRoot } from './UiLogicTreeRoot.vue'
diff --git a/packages/v1-components/src/host/components/logic-tree/logic-tree.less b/packages/v1-components/src/host/components/logic-tree/logic-tree.less
new file mode 100644
index 00000000..f81ed299
--- /dev/null
+++ b/packages/v1-components/src/host/components/logic-tree/logic-tree.less
@@ -0,0 +1,702 @@
+@import (reference) '../../../../assets/stylesheets/geometry.less';
+@import (reference) '../../../../assets/stylesheets/palette.less';
+@import (reference) '../../../../assets/stylesheets/typography.less';
+@import (reference) '../../../../assets/stylesheets/variables.less';
+
+.ui-v1-logic-tree {
+ .reset-box-sizing();
+
+ width: 100%;
+ color: @black-500;
+ background: #fff;
+
+ &__node {
+ width: 100%;
+ overflow: visible;
+ position: relative;
+
+ }
+
+ &__children-group {
+ width: 100%;
+
+ & + & {
+ margin-top: 16px;
+ }
+ }
+
+ &__node + &__node,
+ &__node + &__children-group,
+ &__children-group + &__node {
+ margin-top: 16px;
+ }
+
+ &__node:not(&__node_grouped) &__connector:not(&__connector_terminal) &__connector-stroke_top {
+ top: -16px;
+ height: calc(50% + 16px);
+ }
+
+ &__node:not(&__node_grouped) &__connector_terminal &__connector-stroke_top {
+ top: -16px;
+ height: calc(50% + 13px);
+ }
+
+ &__node-main {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ overflow: visible;
+ position: relative;
+ }
+
+ &__connectors {
+ display: grid;
+ grid-auto-columns: 32px;
+ grid-auto-flow: column;
+ flex: none;
+ width: max-content;
+ min-width: max-content;
+ overflow: visible;
+ position: relative;
+ z-index: 1;
+ }
+
+ &__relation-badge {
+ .text-tiny-accent();
+
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 20px;
+ padding: 0 6px;
+ color: #fff;
+ background: transparent;
+ border: 0;
+ border-radius: 999px;
+ cursor: pointer;
+ appearance: none;
+ transform: translate(-50%, -50%);
+ white-space: nowrap;
+ position: absolute;
+ top: 50%;
+ z-index: 100;
+
+ &:focus-visible {
+ outline: 2px solid @blue-500;
+ outline-offset: 2px;
+ }
+
+ &_and {
+ min-width: 26px;
+ }
+
+ &_or {
+ min-width: 42px;
+ }
+
+ &_blue { background: @blue-300; }
+ &_green { background: @green-400; }
+ &_grey { background: @grey-800; }
+ &_red { background: @red-500; }
+ &_yellow { background: @yellow-400; }
+ }
+
+ &__connector {
+ min-height: 36px;
+ opacity: 0;
+ overflow: visible;
+ position: relative;
+ isolation: isolate;
+ z-index: 0;
+
+ &_visible {
+ opacity: 1;
+ }
+
+ &_placeholder {
+ opacity: 1;
+ }
+
+ &_with-relation {
+ z-index: 1;
+ }
+
+ &_branch &-stroke_top {
+ display: block;
+ }
+
+ &_terminal &-stroke_top {
+ height: calc(50% - 3px);
+ }
+
+ &_terminal &-stroke_middle {
+ left: 11px;
+ width: 17px;
+ }
+
+ &_terminal::after {
+ content: '';
+ width: 4px;
+ height: 4px;
+ border-left: 2px solid currentColor;
+ border-bottom: 2px solid currentColor;
+ border-bottom-left-radius: 4px;
+ position: absolute;
+ top: calc(50% - 3px);
+ left: 8px;
+ z-index: 1;
+ }
+
+ &:not(&_branch) &-stroke_top {
+ height: calc(90% + 14px);
+ }
+
+ &:not(&_branch) &-stroke_middle {
+ display: none;
+ }
+
+ &_blue { color: @blue-300; }
+ &_green { color: @green-400; }
+ &_grey { color: @grey-700; }
+ &_red { color: @red-500; }
+ &_yellow { color: @yellow-400; }
+ }
+
+ &__connector-stroke {
+ width: 2px;
+ background: currentColor;
+ position: absolute;
+ left: 8px;
+ z-index: 1;
+
+ &_top {
+ top: 0;
+ height: calc(50% + 12px);
+ border-radius: 0;
+ }
+
+ &_bottom {
+ top: calc(50%);
+ height: calc(50% + 16px);
+ border-radius: 0;
+ }
+
+ &_middle {
+ top: 50%;
+ left: 8px;
+ width: 20px;
+ height: 2px;
+ border-radius: 0;
+ transform: translateY(-50%);
+ }
+ }
+
+ &__surface-node {
+ flex: 1;
+ min-width: 0;
+ right: @spacing-xxs;
+ position: relative;
+ z-index: 3;
+ }
+
+ &__node_grouped {
+ & + & {
+ margin-top: 0;
+ }
+ }
+
+ &__node_grouped-end,
+ &__node_grouped-single {
+ margin-bottom: @spacing-xs;
+ }
+
+ &__node_grouped-start,
+ &__node_grouped-single {
+ margin-top: @spacing-xs;
+ }
+
+ &__grouped-block {
+ background: @grey-200;
+ border-radius: @border-radius-md;
+ position: relative;
+ right: @spacing-l;
+ }
+
+ &__grouped-block_start,
+ &__grouped-block_single {
+ padding-top: 12px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+ &__grouped-block_single:has(&__actions-node):not(:has(&__surface-node-content)) {
+ padding-top: 0;
+ }
+
+ &__grouped-block:has(> &__grouped-sortable > [data-dnd-placeholder='true']:first-child) {
+ padding-top: 0;
+ }
+
+ &__grouped-block_middle {
+ padding-top: 8px;
+ border-radius: 0;
+ }
+
+ &__grouped-sortable:has([data-dnd-dragging='true'], [data-dnd-placeholder='true']) &__grouped-block,
+ &__grouped-sortable:has([data-dnd-dragging='true'], [data-dnd-placeholder='true']) &__surface-node-content,
+ &__grouped-sortable:has([data-dnd-dragging='true'], [data-dnd-placeholder='true']) &__actions-node,
+ &__grouped-sortable:has([data-dnd-dragging='true'], [data-dnd-placeholder='true']) &__surface-node-content::before {
+ transition: none;
+ }
+
+ &__grouped-block_end {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+ &__node_grouped &__surface-node-content,
+ &__node_grouped &__actions-node {
+ background: transparent;
+ border-color: transparent;
+ box-shadow: none;
+ padding: 16px 4px 16px 8px;
+ margin-left: 8px;
+ }
+
+ &__node_grouped &__surface-node {
+ background: transparent;
+ }
+
+ &__node_grouped &__surface-node-content:hover {
+ background: @blue-transparent;
+ border-color: transparent;
+ }
+
+ &__node_grouped &__surface-node-content_disabled:hover,
+ &__node_grouped &__surface-node-content_disabled:focus-within {
+ background: @grey-400;
+ }
+
+ &__node_grouped &__surface-node-content_editing,
+ &__node_grouped &__surface-node-content_editor,
+ &__node_grouped &__surface-node-content_editing:hover,
+ &__node_grouped &__surface-node-content_editor:hover {
+ background: transparent;
+ }
+
+ &__node_grouped-header &__surface-node-content_simple {
+ padding-left: 0;
+ }
+
+ &__actions-node {
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ min-height: 36px;
+ padding: 0;
+ background: transparent;
+ border: 0;
+ }
+
+ &__surface-node-content {
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 8px;
+ width: fit-content;
+ max-width: 100%;
+ vertical-align: top;
+ min-width: 0;
+ min-height: 36px;
+ padding: 6px 8px;
+ background: #fff;
+ border: 1px solid transparent;
+ border-radius: @border-radius-sm;
+ cursor: pointer;
+ transition: @transition;
+
+ &:hover {
+ background: @blue-transparent;
+ }
+
+ &:active {
+ border: 1px solid @blue-500;
+ }
+
+ &_disabled {
+ cursor: default;
+
+ &:hover,
+ &:focus-within {
+ background: @grey-100;
+ border-color: transparent;
+ }
+
+ &:active {
+ border-color: transparent;
+ }
+ }
+
+ &_editor {
+ min-height: 52px;
+ }
+
+ &_editing,
+ &_editor {
+ justify-content: flex-start;
+ gap: 8px;
+ }
+
+ &__main {
+ display: flex;
+ flex: 0 1 auto;
+ align-items: center;
+ gap: @spacing-xs;
+ min-width: 0;
+ }
+
+ &_active,
+ &_editing,
+ &_highlighted {
+ background: @blue-transparent;
+ border-color: @blue-500;
+ }
+
+ &_simple {
+ max-height: 36px;
+ background: transparent;
+ border-color: transparent;
+
+ &:hover {
+ background: @blue-transparent;
+ }
+ }
+
+ &_simple&_disabled:hover,
+ &_simple&_disabled:focus-within {
+ background: @grey-100;
+ }
+
+ &_simple&_editing,
+ &_simple&_editor {
+ background: transparent;
+ border-color: transparent;
+ min-height: 38px;
+ }
+
+ &_simple&_editor {
+ min-height: 36px;
+ }
+ }
+
+ &__surface-node-content:has(&__node-prefix:empty) {
+ padding-left: 0;
+ }
+
+ &__node-content,
+ &__actions-node-content {
+ display: flex;
+ flex: 0 1 auto;
+ align-items: center;
+ flex-wrap: nowrap;
+ gap: 8px;
+ min-width: 0;
+ overflow: hidden;
+ }
+
+ &__actions-node-content {
+ gap: 8px;
+ }
+
+ &__node-trailing {
+ display: flex;
+ flex: none;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+ }
+
+ &__surface-node-content_editing &__node-trailing,
+ &__surface-node-content_editor &__node-trailing {
+ margin-inline: 8px;
+ }
+
+ &__surface-node-content_editing,
+ &__surface-node-content_editor {
+ display: inline-flex;
+ width: fit-content;
+ max-width: 100%;
+ padding-left: 0;
+ }
+
+ &__surface-node-content_editing &__node-prefix:empty,
+ &__surface-node-content_editor &__node-prefix:empty {
+ display: none;
+ }
+
+ &__surface-node-content_editing &__node-content,
+ &__surface-node-content_editor &__node-content {
+ flex: 0 1 auto;
+ }
+
+ &__slot-placeholder {
+ width: 100%;
+ min-width: 0;
+ min-height: 36px;
+ background: fade(@blue-500, 4%);
+ border: 1px dashed fade(@blue-500, 55%);
+ border-radius: @border-radius-sm;
+
+ &_actions {
+ min-height: 36px;
+ }
+
+ &_editor {
+ min-height: 36px;
+ }
+
+ &_prefix,
+ &_trailing {
+ display: inline-flex;
+ width: 20px;
+ min-width: 20px;
+ min-height: 20px;
+ height: 20px;
+ border-radius: @border-radius-sm;
+ }
+ }
+
+ &__slot-content {
+ display: flex;
+ flex: 0 1 auto;
+ align-items: center;
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ &__grouped-sortable {
+ display: inline-grid;
+ grid-template-columns: minmax(560px, max-content);
+ width: auto;
+ max-width: 100%;
+ }
+
+ &__grouped-sortable-item,
+ &__grouped-sortable > &__node {
+ width: 100%;
+ min-width: 0;
+ max-width: 100%;
+ }
+
+ &__grouped-sortable-item {
+ transition: none;
+ }
+
+ &__icon {
+ display: flex;
+ align-items: center;
+ color: @black-500;
+
+ svg {
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ [data-dnd-dragging='true'] {
+ pointer-events: none;
+ }
+
+ [data-dnd-dragging='true'] &__surface-node-content,
+ [data-dnd-dragging='true'] &__actions-node {
+ background: transparent;
+ box-shadow: none;
+ outline: 0;
+ transition: none;
+ }
+
+ [data-dnd-dragging='true'] &__node_grouped-start &__grouped-block,
+ [data-dnd-dragging='true'] &__node_grouped-single &__grouped-block {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+ [data-dnd-dragging='true'] &__surface-node-content__main,
+ [data-dnd-dragging='true'] &__actions-node-content,
+ [data-dnd-dragging='true'] &__node-trailing {
+ visibility: hidden;
+ }
+
+ [data-dnd-placeholder='true'] {
+ pointer-events: none;
+ }
+
+ [data-dnd-placeholder='true'] &__surface-node-content,
+ [data-dnd-placeholder='true'] &__actions-node {
+ background: transparent;
+ box-shadow: none;
+ outline: 2px dashed @blue-500;
+ outline-offset: -2px;
+ transition: none;
+ }
+
+ [data-dnd-placeholder='true'] &__surface-node-content__main,
+ [data-dnd-placeholder='true'] &__actions-node-content,
+ [data-dnd-placeholder='true'] &__node-trailing {
+ visibility: hidden;
+ }
+
+ [data-dnd-placeholder='true'] &__node_grouped &__surface-node-content,
+ [data-dnd-placeholder='true'] &__node_grouped &__actions-node {
+ outline: none;
+ position: relative;
+ }
+
+ [data-dnd-placeholder='true'] &__node_grouped-start,
+ [data-dnd-placeholder='true'] &__node_grouped-single {
+ margin-top: 0;
+ }
+
+ [data-dnd-placeholder='true']:first-child &__grouped-block {
+ padding-top: 0;
+ border-top-right-radius: @border-radius-md;
+ border-top-left-radius: @border-radius-md;
+ }
+
+ [data-dnd-placeholder='true']:first-child + * &__node_grouped-start,
+ [data-dnd-placeholder='true']:first-child + * &__node_grouped-single {
+ margin-top: 0;
+ }
+
+ [data-dnd-placeholder='true'] &__node_grouped &__surface-node-content::before,
+ [data-dnd-placeholder='true'] &__node_grouped &__actions-node::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 16px;
+ bottom: 0;
+ left: 16px;
+ border: 2px dashed @blue-500;
+ border-radius: @border-radius-sm;
+ pointer-events: none;
+ }
+
+ [data-dnd-overlay='true'] &__surface-node-content,
+ [data-dnd-overlay='true'] &__actions-node {
+ background: #fff;
+ border-color: @grey-200;
+ border-radius: @border-radius-md;
+ box-shadow:
+ 0 16px 32px rgb(30 34 72 / 16%),
+ 0 4px 12px rgb(30 34 72 / 14%);
+ cursor: grabbing;
+ }
+
+ [data-dnd-overlay='true'] &__grouped-block {
+ background: transparent;
+ }
+
+}
+
+.ui-v1-logic-tree-caret {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 20px;
+ height: 20px;
+ transition: transform @transition;
+ transform: rotate(-90deg);
+ color: @black-500;
+
+ &_active {
+ transform: none;
+ }
+}
+
+.ui-v1-logic-tree-drag-handle {
+ display: flex;
+ align-items: center;
+ color: @grey-700;
+ cursor: grab;
+
+ &_disabled {
+ cursor: default;
+ }
+
+ svg {
+ width: 20px;
+ height: 20px;
+ }
+
+ [data-dnd-dragging='true'] & {
+ cursor: grabbing;
+ }
+}
+
+.ui-v1-logic-tree-node-item {
+ display: flex;
+ flex: 1;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: @spacing-xs;
+ min-width: 0;
+ overflow: hidden;
+
+ &__headline {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ min-width: 0;
+ }
+
+ &__title {
+ .text-regular-accent();
+
+ color: @black-500;
+ white-space: nowrap;
+ }
+
+}
+
+[data-dnd-overlay='true'] {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 20;
+ width: var(--dnd-overlay-width, auto);
+ pointer-events: none;
+}
+
+[data-dnd-overlay='true'] .ui-v1-logic-tree__surface-node-content,
+[data-dnd-overlay='true'] .ui-v1-logic-tree__actions-node {
+ box-sizing: border-box;
+ background: @grey-500;
+ border-color: @grey-500;
+ border-radius: @border-radius-md;
+ box-shadow:
+ 0 16px 32px rgb(30 34 72 / 16%),
+ 0 4px 12px rgb(30 34 72 / 14%);
+ cursor: grabbing;
+ transition: none;
+}
+
+[data-dnd-overlay='true'] .ui-v1-logic-tree__connectors {
+ visibility: hidden;
+ pointer-events: none;
+}
+
+[data-dnd-overlay='true'] .ui-v1-logic-tree__grouped-block {
+ background: transparent;
+}
+
+[data-dnd-target='true'][data-dnd-drop-forbidden='true'] .ui-v1-logic-tree__surface-node-content,
+[data-dnd-target='true'][data-dnd-drop-forbidden='true'] .ui-v1-logic-tree__actions-node {
+ outline: 0;
+}
+
+[data-dnd-dragging='true'],
+[data-dnd-placeholder='true'],
+[data-dnd-target='true'],
+[data-dnd-overlay='true'] {
+ animation: none;
+}
diff --git a/packages/v1-components/src/remote.ts b/packages/v1-components/src/remote.ts
index 45fb1a9a..a2c4dc2d 100644
--- a/packages/v1-components/src/remote.ts
+++ b/packages/v1-components/src/remote.ts
@@ -14,6 +14,7 @@ export * from '@/remote/components/field'
export * from '@/remote/components/infobox'
export * from '@/remote/components/link'
export * from '@/remote/components/loader'
+export * from '@/remote/components/logic-tree'
export * from '@/remote/components/modal-sidebar'
export * from '@/remote/components/modal-window'
export * from '@/remote/components/modal-window-surface'
diff --git a/packages/v1-components/src/remote/components/logic-tree/UiLogicTree.vue b/packages/v1-components/src/remote/components/logic-tree/UiLogicTree.vue
new file mode 100644
index 00000000..e2b07365
--- /dev/null
+++ b/packages/v1-components/src/remote/components/logic-tree/UiLogicTree.vue
@@ -0,0 +1,1053 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/v1-components/src/remote/components/logic-tree/UiLogicTreeDragHandle.vue b/packages/v1-components/src/remote/components/logic-tree/UiLogicTreeDragHandle.vue
new file mode 100644
index 00000000..08b3f3aa
--- /dev/null
+++ b/packages/v1-components/src/remote/components/logic-tree/UiLogicTreeDragHandle.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/v1-components/src/remote/components/logic-tree/index.ts b/packages/v1-components/src/remote/components/logic-tree/index.ts
new file mode 100644
index 00000000..6cb83510
--- /dev/null
+++ b/packages/v1-components/src/remote/components/logic-tree/index.ts
@@ -0,0 +1,9 @@
+export { default as UiLogicTree } from './UiLogicTree.vue'
+export { default as UiLogicTreeDragHandle } from './UiLogicTreeDragHandle.vue'
+
+export * from '@/common/components/logic-tree'
+export {
+ UiLogicTreeCaret,
+ UiLogicTreeNodeIcon,
+ UiLogicTreeNodeItem,
+} from './parts'
diff --git a/packages/v1-components/src/remote/components/logic-tree/parts.ts b/packages/v1-components/src/remote/components/logic-tree/parts.ts
new file mode 100644
index 00000000..a5c16fda
--- /dev/null
+++ b/packages/v1-components/src/remote/components/logic-tree/parts.ts
@@ -0,0 +1,63 @@
+import type { RemoteProperties } from '@/remote/scaffolding'
+import type { SchemaType } from '@omnicajs/vue-remote/remote'
+
+import type {
+ UiLogicTreeCaretProperties,
+ UiLogicTreeNodeProperties,
+ UiLogicTreeRootProperties,
+} from '@/common/components/logic-tree'
+
+import { defineRemoteComponent } from '@omnicajs/vue-remote/remote'
+
+export const UiLogicTreeRootType = 'UiLogicTreeRoot' as SchemaType<
+ 'UiLogicTreeRoot',
+ RemoteProperties
+>
+
+export const UiLogicTreeRoot = defineRemoteComponent(UiLogicTreeRootType, {
+ emits: [
+ 'outsideClick',
+ ] as unknown as {
+ 'outsideClick': () => boolean,
+ },
+ slots: ['default'],
+})
+
+export const UiLogicTreeNodeType = 'UiLogicTreeNode' as SchemaType<
+ 'UiLogicTreeNode',
+ RemoteProperties
+>
+
+export const UiLogicTreeNode = defineRemoteComponent(UiLogicTreeNodeType, {
+ emits: [
+ 'nodeClick',
+ 'nodeEdit',
+ ] as unknown as {
+ 'nodeClick': (pathKey: string) => boolean,
+ 'nodeEdit': (value: boolean) => boolean,
+ },
+ slots: ['conjunction-poppers', 'prefix', 'content', 'trailing'],
+})
+
+export const UiLogicTreeCaretType = 'UiLogicTreeCaret' as SchemaType<
+ 'UiLogicTreeCaret',
+ RemoteProperties
+>
+
+export const UiLogicTreeCaret = defineRemoteComponent(UiLogicTreeCaretType)
+
+export const UiLogicTreeNodeItemType = 'UiLogicTreeNodeItem' as SchemaType<
+ 'UiLogicTreeNodeItem'
+>
+
+export const UiLogicTreeNodeItem = defineRemoteComponent(UiLogicTreeNodeItemType, {
+ slots: ['default', 'headline', 'title', 'trailing'],
+})
+
+export const UiLogicTreeNodeIconType = 'UiLogicTreeNodeIcon' as SchemaType<
+ 'UiLogicTreeNodeIcon'
+>
+
+export const UiLogicTreeNodeIcon = defineRemoteComponent(UiLogicTreeNodeIconType, {
+ slots: ['default'],
+})
diff --git a/packages/v1-components/src/remote/components/popper.ts b/packages/v1-components/src/remote/components/popper.ts
index dcabdbcc..22aadd7c 100644
--- a/packages/v1-components/src/remote/components/popper.ts
+++ b/packages/v1-components/src/remote/components/popper.ts
@@ -10,7 +10,25 @@ export const UiPopperType = 'UiPopper' as SchemaType<
RemoteProperties
>
-export const UiPopper = defineRemoteComponent(UiPopperType)
+export const UiPopper = defineRemoteComponent(UiPopperType, {
+ emits: [
+ 'attached',
+ 'dispose',
+ 'hide',
+ 'hidden',
+ 'show',
+ 'shown',
+ 'update:visible',
+ ] as unknown as {
+ 'attached': () => boolean,
+ 'dispose': () => boolean,
+ 'hide': (reason?: 'generic' | 'by-miss-click') => boolean,
+ 'hidden': () => boolean,
+ 'show': () => boolean,
+ 'shown': () => boolean,
+ 'update:visible': (visible: boolean) => boolean,
+ },
+})
export const UiPopperConnectorType = 'UiPopperConnector' as SchemaType<'UiPopperConnector'>
diff --git a/packages/v1-components/src/remote/endpoint.ts b/packages/v1-components/src/remote/endpoint.ts
index e394b60f..6ecdd8a9 100644
--- a/packages/v1-components/src/remote/endpoint.ts
+++ b/packages/v1-components/src/remote/endpoint.ts
@@ -24,6 +24,11 @@ export const createEndpointRoot = async (
'UiInfobox',
'UiLink',
'UiLoader',
+ 'UiLogicTreeCaret',
+ 'UiLogicTreeNode',
+ 'UiLogicTreeNodeIcon',
+ 'UiLogicTreeNodeItem',
+ 'UiLogicTreeRoot',
'UiMenuItem',
'UiMenuItemGroup',
'UiModalSidebar',
diff --git a/packages/v1-components/storybook/createRemoteStoryRender.ts b/packages/v1-components/storybook/createRemoteStoryRender.ts
index 302cc8e4..231f51ad 100644
--- a/packages/v1-components/storybook/createRemoteStoryRender.ts
+++ b/packages/v1-components/storybook/createRemoteStoryRender.ts
@@ -7,15 +7,17 @@ import { createReceiver } from '@omnicajs/vue-remote/host'
import { defineComponent } from 'vue'
import { onUnmounted, watch } from 'vue'
+import { storybookHostProvider } from './provider'
+
type RemoteStoryRenderOptions = {
- provider: object;
+ provider?: object;
worker: {
new (options?: WorkerOptions): Worker;
};
}
export const createRemoteStoryRender = ({
- provider,
+ provider = storybookHostProvider,
worker: Worker,
}: RemoteStoryRenderOptions) => (args: TArgs) => defineComponent({
name: 'RemoteStoryRender',
diff --git a/packages/v1-components/storybook/endpoint.ts b/packages/v1-components/storybook/endpoint.ts
index 6f4d1150..3d26e3cb 100644
--- a/packages/v1-components/storybook/endpoint.ts
+++ b/packages/v1-components/storybook/endpoint.ts
@@ -11,6 +11,8 @@ import { createEndpoint, release, retain } from '@remote-ui/rpc'
import { createRemoteRenderer, createRemoteRoot } from '@omnicajs/vue-remote/remote'
+import { hostComponentNames } from './host-components'
+
export type Lifecycle = {
run (channel: Channel, props?: Partial): Promise;
release (): void;
@@ -33,37 +35,7 @@ export interface Runner {
const createRoot = async (channel: Channel) => {
const root = createRemoteRoot(channel, {
- components: [
- 'UiAvatar',
- 'UiButton',
- 'UiCheckbox',
- 'UiLink',
- 'UiMenuItem',
- 'UiMenuItemGroup',
- 'UiPageHeaderTitle',
- 'UiPopperConnector',
- 'UiPopperTarget',
- 'UiRadioSwitchOptionShell',
- 'UiRadioSwitchRoot',
- 'UiSelectPopper',
- 'UiSelectTrigger',
- 'UiTab',
- 'UiTabGroup',
- 'UiTableBodyCell',
- 'UiTableCol',
- 'UiTableFooterButton',
- 'UiTableFooterSection',
- 'UiTableHeadCell',
- 'UiTableRoot',
- 'UiTableRow',
- 'UiTableSection',
- 'UiTableSorter',
- 'UiTag',
- 'UiTextbox',
- 'UiTooltip',
- 'UiToggleButton',
- 'UiToggleGroupRoot',
- ],
+ components: [...hostComponentNames],
})
await root.mount()
diff --git a/packages/v1-components/storybook/host-components.ts b/packages/v1-components/storybook/host-components.ts
new file mode 100644
index 00000000..cd096e03
--- /dev/null
+++ b/packages/v1-components/storybook/host-components.ts
@@ -0,0 +1,39 @@
+export const hostComponentNames = [
+ 'UiAvatar',
+ 'UiButton',
+ 'UiCheckbox',
+ 'UiLink',
+ 'UiLogicTreeCaret',
+ 'UiLogicTreeNode',
+ 'UiLogicTreeNodeIcon',
+ 'UiLogicTreeNodeItem',
+ 'UiLogicTreeRoot',
+ 'UiMenuItem',
+ 'UiMenuItemGroup',
+ 'UiPageHeaderTitle',
+ 'UiPopper',
+ 'UiPopperConnector',
+ 'UiPopperTarget',
+ 'UiRadioSwitchOptionShell',
+ 'UiRadioSwitchRoot',
+ 'UiSelectPopper',
+ 'UiSelectTrigger',
+ 'UiTab',
+ 'UiTabGroup',
+ 'UiTableBodyCell',
+ 'UiTableCol',
+ 'UiTableFooterButton',
+ 'UiTableFooterSection',
+ 'UiTableHeadCell',
+ 'UiTableRoot',
+ 'UiTableRow',
+ 'UiTableSection',
+ 'UiTableSorter',
+ 'UiTag',
+ 'UiTextbox',
+ 'UiTooltip',
+ 'UiToggleButton',
+ 'UiToggleGroupRoot',
+] as const
+
+export type HostComponentName = typeof hostComponentNames[number]
diff --git a/packages/v1-components/storybook/main.ts b/packages/v1-components/storybook/main.ts
index b64c684e..5351986c 100644
--- a/packages/v1-components/storybook/main.ts
+++ b/packages/v1-components/storybook/main.ts
@@ -19,6 +19,7 @@ function getAbsolutePath(value: string): string {
}
const isDevelopment = process.env.NODE_ENV === 'development'
+const allowedHosts = ['v1.embed-ui.local', 'v1.embed-ui.test']
export default defineMain({
addons: [
@@ -37,7 +38,7 @@ export default defineMain({
},
],
core: {
- allowedHosts: ['v1.embed-ui.local'],
+ allowedHosts,
builder: {
name: '@storybook/builder-vite',
options: {
@@ -56,7 +57,7 @@ export default defineMain({
],
viteFinal: async (config) => {
if (config.server) {
- config.server.allowedHosts = true
+ config.server.allowedHosts = allowedHosts
config.server.hmr.clientPort = 80
}
return config
diff --git a/packages/v1-components/storybook/provider.ts b/packages/v1-components/storybook/provider.ts
new file mode 100644
index 00000000..a75ad04f
--- /dev/null
+++ b/packages/v1-components/storybook/provider.ts
@@ -0,0 +1,19 @@
+import type { Component } from 'vue'
+
+import type { HostComponentName } from './host-components'
+
+import { createProvider as createRemoteHostProvider } from '@omnicajs/vue-remote/host'
+
+import * as hostComponents from '@/host/components'
+
+import { hostComponentNames } from './host-components'
+
+type StorybookHostProviderComponents = Record
+
+const storybookHostProviderComponents = Object.fromEntries(
+ hostComponentNames.map((name) => [name, hostComponents[name]])
+) as StorybookHostProviderComponents
+
+export const createStorybookHostProvider = () => createRemoteHostProvider(storybookHostProviderComponents)
+
+export const storybookHostProvider = createStorybookHostProvider()
diff --git a/packages/v1-components/storybook/scripts/shot.ts b/packages/v1-components/storybook/scripts/shot.ts
index 51db72fb..504a3b2f 100644
--- a/packages/v1-components/storybook/scripts/shot.ts
+++ b/packages/v1-components/storybook/scripts/shot.ts
@@ -10,6 +10,7 @@ import { chromium } from 'playwright'
type CliOptions = {
baseUrl: string;
output: string;
+ selector?: string;
settleMs: number;
storyPath: string;
timeoutMs: number;
@@ -75,6 +76,11 @@ const parseArgs = (argv: string[]): CliOptions => {
continue
}
+ if (argument === '--selector') {
+ options.selector = readValue(argument)
+ continue
+ }
+
if (argument === '--timeout-ms') {
options.timeoutMs = parseInteger(readValue(argument), argument)
continue
@@ -253,10 +259,19 @@ const run = async () => {
await page.waitForTimeout(250)
await mkdir(dirname(outputPath), { recursive: true })
- await page.screenshot({
- fullPage: true,
- path: outputPath,
- })
+ if (options.selector) {
+ const locator = page.locator(options.selector).last()
+
+ await locator.scrollIntoViewIfNeeded()
+ await locator.screenshot({
+ path: outputPath,
+ })
+ } else {
+ await page.screenshot({
+ fullPage: true,
+ path: outputPath,
+ })
+ }
console.log(outputPath)
} finally {
diff --git a/packages/v1-components/storybook/stories/UiField.stories.ts b/packages/v1-components/storybook/stories/UiField.stories.ts
index b923275b..4176bc45 100644
--- a/packages/v1-components/storybook/stories/UiField.stories.ts
+++ b/packages/v1-components/storybook/stories/UiField.stories.ts
@@ -2,13 +2,6 @@ import '@/host/components/field/field.less'
import type { Meta, StoryObj } from '@storybook/vue3'
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiPopperConnector from '@/host/components/popper/UiPopperConnector.vue'
-import UiPopperTarget from '@/host/components/popper/UiPopperTarget.vue'
-import UiTextbox from '@/host/components/textbox/UiTextbox.vue'
-import UiTooltip from '@/host/components/tooltip/UiTooltip.vue'
-
import { UiField } from '../../src/remote/components/field'
import UiFieldWorker from './UiField.remote.ts?worker'
@@ -27,13 +20,6 @@ type UiFieldStoryExtras = {
}
type UiFieldStoryArgs = UiFieldProps & UiFieldStoryExtras
-const provider = createProvider({
- UiPopperConnector,
- UiPopperTarget,
- UiTextbox,
- UiTooltip,
-})
-
const meta = {
title: 'Components/UiField',
@@ -59,7 +45,6 @@ const meta = {
},
render: createRemoteStoryRender({
- provider,
worker: UiFieldWorker,
}),
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.mdx b/packages/v1-components/storybook/stories/UiLogicTree.mdx
new file mode 100644
index 00000000..33ece001
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.mdx
@@ -0,0 +1,188 @@
+import { ArgTypes, Story } from '@storybook/addon-docs/blocks'
+import * as UiLogicTreeStories from './UiLogicTree.stories'
+
+# UiLogicTree
+
+`UiLogicTree` - slot-driven древо условий для remote-части `embed-ui`.
+Компонент управляет структурой, линиями, grouped-layout, DnD и состоянием редактирования, а пользовательский контент узлов и бизнес-логика add/edit/remove приходят снаружи.
+
+Важно: `UiLogicTree` является controlled-компонентом для действий с узлами.
+По `node:add`, `node:edit`, `node:remove` и `control-action` дерево только отдаёт событие наружу; consumer сам обновляет `items` и передаёт новый массив обратно.
+`update:items` остаётся синхронизацией для внутренних сценариев вроде DnD/reorder и toggle.
+
+## Когда использовать
+
+* Нужна древовидная структура условий, групп и действий с готовой механикой линий и вложенности.
+* Нужно собирать внешний контент узла самостоятельно: текст, кнопки, инпуты, селекты, меню и trailing-действия.
+* Нужны grouped-ветки с DnD и единый editable-flow, но без жёстко зашитого UI внутри компонента.
+
+## Публичные slots
+
+`UiLogicTree` не задаёт прикладной контент узла внутри себя. Дерево отвечает за каркас узла, линии, вложенность и состояние, а consumer через slots описывает, как конкретный узел выглядит и какие контролы в нём есть.
+
+Слоты делятся на две группы:
+
+* `node-prefix` и `node-trailing` - боковые зоны узла. Они не выбирают режим узла и рендерятся вокруг центрального контента, когда consumer возвращает из них разметку.
+* `node` - центральный контент узла. Consumer сам выбирает, что показать для read-only, edit и actions-сценариев, опираясь на `nodeView`, `editing` и данные узла.
+* `conjunction-poppers` - popper-контент для кликабельного бейджа связи (`AND`/`OR`). Сам target создаёт дерево, а consumer передаёт меню, tooltip или другой floating UI.
+
+Смысл каждого слота:
+
+* `node-prefix` - левая служебная зона. Обычно сюда попадает `drag handle`, иконка папки, маркер типа узла или другой компактный визуальный признак.
+* `node` - центральная зона узла. Здесь consumer рендерит title, inline-текст, edit-контролы, actions-кнопки и любые другие варианты представления.
+* `node-trailing` - правая зона вторичных действий узла. Подходит для delete, overflow-menu, quick action и похожих действий над текущим узлом.
+* `conjunction-poppers` - содержимое `UiPopperConnector`, связанное с бейджем conjunction текущего узла. Слот получает те же props, что и node-слоты, поэтому consumer может менять `items` по `pathKey` или `node`.
+
+Важно: слоты не являются моделью данных. `UiLogicTree` не знает, какие именно controls/actions/icons существуют у consumer. Он только передаёт текущий `node`, состояние узла и callbacks. Если центральный слот `node` не передан, дерево показывает нейтральный placeholder только в центральной зоне узла.
+
+## Строительные компоненты
+
+Для стандартной визуальной сборки узла есть небольшие primitives. Они не добавляют бизнес-логику и не требуют от дерева знания о данных consumer: это только готовые structural-компоненты поверх классов `ui-v1-logic-tree`.
+
+Основные primitives:
+
+* `UiLogicTreeNodeItem` - интерактивный элемент узла с областями `headline`, `title`, `trailing` и основным содержимым.
+* `UiLogicTreeNodeIcon` - компактная иконка узла.
+* `UiLogicTreeCaret` - иконка раскрытия ветки; по умолчанию закрыта, `active` показывает раскрытое состояние.
+* `UiLogicTreeDragHandle` - готовая remote-ручка drag'n'drop с `RemoteDragHandle`, иконкой и `data-skip-node-click`.
+
+Consumer может использовать эти primitives в `node`, `node-prefix` и `node-trailing`, либо полностью заменить их своей разметкой.
+
+## Slot props
+
+Во все публичные slots дерево передаёт `UiLogicTreeNodeSlotProps`.
+
+Основные поля:
+
+* `node` - текущий узел дерева целиком.
+* `path` и `pathKey` - адрес узла в дереве.
+* `nodeView` - текущий режим узла (`summary` или `actions`).
+* `editing` - узел сейчас в режиме редактирования.
+* `grouped`, `groupedHeader`, `groupedPosition` - информация о grouped-секции.
+* `selected`, `highlighted`, `expanded`, `hasChildren` - состояние узла.
+
+Доступные callbacks:
+
+* `onAction(actionId, kind)` - запросить добавление узла заданного типа. Consumer должен обработать `node:add` и обновить `items`.
+* `onControlUpdate(controlId, value)` - запросить обновление значения контрола. Consumer должен обработать `node:edit` и обновить `items`.
+* `onControlAction(controlId)` - выполнить action у контрола.
+* `onRemove()` - запросить удаление узла. Consumer должен обработать `node:remove` и обновить `items`.
+* `onToggle()` - раскрыть или свернуть ветку.
+
+## Как собирать узел
+
+Базовая идея такая:
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ action.label }}
+
+
+
+
+
+
+
+
+
+ {{ node.data.title }}
+
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+ Удалить
+
+
+
+
+
+
+ AND
+
+
+
+ OR
+
+
+
+
+
+```
+
+В каноничном примере ниже обработчики находятся в consumer-слое: `UiLogicTree.remote.example.vue` ловит `node:add`, `node:edit`, `node:remove` и обновляет `items` снаружи.
+
+## Каноничный пример
+
+`CampaignArbitrage` - основной пример того, как дерево собирается целиком через slots снаружи.
+
+
+
+## API
+
+
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.remote.example.module.less b/packages/v1-components/storybook/stories/UiLogicTree.remote.example.module.less
new file mode 100644
index 00000000..a452b212
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.remote.example.module.less
@@ -0,0 +1,73 @@
+@import (reference) '../../assets/stylesheets/typography.less';
+@import (reference) '../../assets/stylesheets/variables.less';
+
+.controls {
+ display: flex;
+ flex: 0 1 auto;
+ flex-wrap: nowrap;
+ align-items: center;
+ gap: @spacing-xs;
+ min-width: 0;
+ overflow: hidden;
+}
+
+.remove {
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity @transition;
+}
+
+.inline {
+ .text-regular();
+
+ color: @black-500;
+ white-space: nowrap;
+}
+
+.inline_muted {
+ color: @grey-800;
+}
+
+.inline_separated {
+ padding-left: 12px;
+ position: relative;
+
+ &::before {
+ content: '';
+ width: 4px;
+ height: 4px;
+ background: currentColor;
+ border-radius: 50%;
+ transform: translateY(-50%);
+ position: absolute;
+ top: 50%;
+ left: 0;
+ }
+}
+
+.inline_semibold {
+ font-weight: 500;
+}
+
+.inline_blue { color: @blue-300; }
+.inline_green { color: @green-400; }
+.inline_grey { color: @grey-800; }
+.inline_red { color: @red-500; }
+.inline_yellow { color: @yellow-400; }
+
+:global(.ui-v1-logic-tree__surface-node-content:hover) .remove,
+:global(.ui-v1-logic-tree__surface-node-content_editor) .remove,
+:global(.ui-v1-logic-tree__surface-node-content_active) .remove,
+:global(.ui-v1-logic-tree__surface-node-content_editing) .remove,
+:global(.ui-v1-logic-tree__surface-node-content_highlighted) .remove,
+:global(.ui-v1-logic-tree__surface-node-content:focus-within) .remove,
+:global(.ui-v1-logic-tree__actions-node:hover) .remove,
+:global(.ui-v1-logic-tree__actions-node:focus-within) .remove {
+ opacity: 1;
+ pointer-events: auto;
+}
+
+:global([data-dnd-overlay='true']) .remove {
+ opacity: 0;
+ pointer-events: none;
+}
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.remote.example.vue b/packages/v1-components/storybook/stories/UiLogicTree.remote.example.vue
new file mode 100644
index 00000000..a3a1a6b7
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.remote.example.vue
@@ -0,0 +1,715 @@
+
+
+
+
+
+ {{ option.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ action.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ node.data.title }}
+
+
+
+
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ i18n.t('delete') }}
+
+
+
+
+
+
+
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.remote.ts b/packages/v1-components/storybook/stories/UiLogicTree.remote.ts
new file mode 100644
index 00000000..c5bd002d
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.remote.ts
@@ -0,0 +1,33 @@
+import type { UiLogicTreeNode } from '@/common/components/logic-tree'
+
+import UiLogicTreeRemoteExample from './UiLogicTree.remote.example.vue'
+
+import { createComponentEndpoint } from '../endpoint'
+
+type NodeData = {
+ title: string;
+ icon?: string;
+ controls?: unknown[];
+ actions?: Array<{
+ id: string;
+ kind: Exclude;
+ label: string;
+ }>;
+ inline?: unknown[];
+ removable?: boolean;
+}
+
+type Styles = Record
+
+createComponentEndpoint<{
+ items?: UiLogicTreeNode[];
+ styles?: Styles;
+}>({
+ async run (createApp, root, props) {
+ const app = createApp(UiLogicTreeRemoteExample, props)
+
+ app.mount(root)
+
+ return () => app.unmount()
+ },
+}, self as unknown as Worker)
diff --git a/packages/v1-components/storybook/stories/UiLogicTree.stories.ts b/packages/v1-components/storybook/stories/UiLogicTree.stories.ts
new file mode 100644
index 00000000..9a2bd448
--- /dev/null
+++ b/packages/v1-components/storybook/stories/UiLogicTree.stories.ts
@@ -0,0 +1,616 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { UiLogicTreeNode, UiLogicTreeNodeData } from '@/common/components/logic-tree'
+
+import {
+ LogicTreeChildrenView,
+ LogicTreeConjunction,
+ LogicTreeNodeKind,
+ LogicTreeNodeView,
+ LogicTreeTone,
+} from '@/common/components/logic-tree'
+
+import styles from './UiLogicTree.remote.example.module.less'
+import UiLogicTreeWorker from './UiLogicTree.remote.ts?worker'
+
+import { createRemoteStoryRender } from '../createRemoteStoryRender'
+import { UiLogicTree } from '../../src/remote/components/logic-tree'
+
+import page from './UiLogicTree.mdx'
+
+const demoControlKind = {
+ INPUT: 'input',
+ SELECT: 'select',
+} as const
+
+const demoIcon = {
+ FOLDER: 'folder',
+} as const
+
+type DemoControlKind = typeof demoControlKind[keyof typeof demoControlKind]
+type DemoIcon = typeof demoIcon[keyof typeof demoIcon]
+
+type DemoLogicTreeOption = {
+ id: string;
+ label: string;
+ value: string;
+}
+
+type DemoLogicTreeControl = {
+ id: string;
+ kind: DemoControlKind;
+ label: string;
+ options?: DemoLogicTreeOption[];
+ value: string;
+ width: number;
+}
+
+type DemoLogicTreeAction = {
+ id: string;
+ kind: Exclude;
+ label: string;
+}
+
+type DemoLogicTreeInlineText = {
+ id: string;
+ text: string;
+ tone?: LogicTreeTone | 'default' | 'muted';
+ separated?: boolean;
+}
+
+type DemoLogicTreeNodeData = {
+ title: string;
+ icon?: DemoIcon;
+ inline?: DemoLogicTreeInlineText[];
+ controls?: DemoLogicTreeControl[];
+ actions?: DemoLogicTreeAction[];
+ removable?: boolean;
+}
+
+type DemoLogicTreeData = UiLogicTreeNodeData
+type DemoLogicTreeNode = UiLogicTreeNode
+
+const inlineText = (
+ id: string,
+ text: string,
+ config: Omit = {}
+): DemoLogicTreeInlineText => ({
+ id,
+ text,
+ ...config,
+})
+
+const selectControl = (
+ id: string,
+ label: string,
+ value: string,
+ width: number,
+ options: string[]
+) => ({
+ id,
+ kind: demoControlKind.SELECT,
+ label,
+ options: options.map((option, index) => ({
+ id: `${id}-${index + 1}`,
+ label: option,
+ value: option,
+ })),
+ value,
+ width,
+})
+
+const inputControl = (
+ id: string,
+ label: string,
+ value: string,
+ width: number
+) => ({
+ id,
+ kind: demoControlKind.INPUT,
+ label,
+ value,
+ width,
+})
+
+const groupedItemControls = (id: string) => ([
+ selectControl(
+ `${id}-type`,
+ 'Тип доставки',
+ 'Тип доставки',
+ 260,
+ ['Тип доставки', 'Самовывоз', 'Курьер']
+ ),
+ selectControl(
+ `${id}-operator`,
+ 'Равно',
+ 'Равно',
+ 140,
+ ['Равно', 'Не равно']
+ ),
+ inputControl(
+ `${id}-value`,
+ 'Значение',
+ '',
+ 260
+ ),
+])
+
+const summaryData = (
+ title: string,
+ config: Omit = {}
+): DemoLogicTreeData => ({
+ editable: false,
+ title,
+ view: LogicTreeNodeView.SUMMARY,
+ ...config,
+})
+
+const actionsData = (
+ title: string,
+ actions: NonNullable,
+ config: Omit = {}
+): DemoLogicTreeData => ({
+ actions,
+ editable: false,
+ title,
+ view: LogicTreeNodeView.ACTIONS,
+ ...config,
+})
+
+const conditionNode = (
+ id: string,
+ data: DemoLogicTreeData,
+ config: Omit = {}
+): DemoLogicTreeNode => ({
+ id,
+ kind: LogicTreeNodeKind.CONDITION,
+ data,
+ ...config,
+})
+
+const groupNode = (
+ id: string,
+ data: DemoLogicTreeData,
+ config: Omit = {}
+): DemoLogicTreeNode => ({
+ id,
+ kind: LogicTreeNodeKind.GROUP,
+ data,
+ ...config,
+})
+
+const branchNode = (
+ id: string,
+ data: DemoLogicTreeData,
+ config: Omit = {}
+): DemoLogicTreeNode => ({
+ id,
+ kind: LogicTreeNodeKind.BRANCH,
+ data,
+ ...config,
+})
+
+const campaignTree: DemoLogicTreeNode[] = [
+ groupNode('campaign-root', summaryData('Корневая группа', {
+ controls: [
+ selectControl(
+ 'interaction-edit-type',
+ 'Тип доставки',
+ 'Тип доставки',
+ 260,
+ ['Тип доставки', 'Самовывоз', 'Курьер']
+ ),
+ selectControl(
+ 'interaction-edit-operator',
+ 'Равно',
+ 'Равно',
+ 140,
+ ['Равно', 'Не равно']
+ ),
+ selectControl(
+ 'interaction-edit-value',
+ 'SDEK',
+ 'SDEK',
+ 260,
+ ['SDEK', 'Boxberry']
+ ),
+ ],
+ removable: true,
+ disabled: true,
+ inline: [
+ inlineText('campaign-root-mode', 'Последовательное применение', { tone: LogicTreeTone.GREEN }),
+ inlineText('campaign-root-meta', 'До 5 000 ₽ скидки', { separated: true, tone: 'muted' }),
+ ],
+ }), {
+ tone: LogicTreeTone.GREEN,
+ children: [
+ groupNode('campaign-count', summaryData('8 акций', { disabled: true }), {
+ childrenView: LogicTreeChildrenView.GROUPED,
+ collapsible: true,
+ expanded: true,
+ children: [
+ conditionNode('campaign-count-item-1', summaryData('1. Название акции #1', {
+ controls: groupedItemControls('campaign-count-item-1'),
+ draggable: true,
+ inline: [
+ inlineText('campaign-count-item-1-meta', 'Бонусы', { tone: 'muted' }),
+ ],
+ removable: true,
+ })),
+ conditionNode('campaign-count-item-2', summaryData('2. Название акции #2', {
+ controls: groupedItemControls('campaign-count-item-2'),
+ draggable: true,
+ inline: [
+ inlineText('campaign-count-item-2-meta', 'Бонусы', { tone: 'muted' }),
+ ],
+ removable: true,
+ })),
+ conditionNode('campaign-count-item-3', summaryData('3. Название акции #3', {
+ controls: groupedItemControls('campaign-count-item-3'),
+ draggable: true,
+ inline: [
+ inlineText('campaign-count-item-3-meta', 'Бонусы', { tone: 'muted' }),
+ ],
+ removable: true,
+ }), {
+ conjunction: LogicTreeConjunction.AND,
+ tone: LogicTreeTone.BLUE,
+ }),
+ conditionNode('campaign-count-actions', actionsData('Добавить акцию', [
+ {
+ id: 'campaign-count-add-action',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Добавить акцию в группу',
+ },
+ ]), {
+ tone: LogicTreeTone.BLUE,
+ }),
+ ],
+ }),
+ groupNode('campaign-group-1', summaryData('Название группы #1', {
+ icon: demoIcon.FOLDER,
+ controls: [
+ selectControl('group-1-mode', 'Режим', 'Максимальная выгода', 220, ['Максимальная выгода', 'Последовательное применение']),
+ inputControl('group-1-meta', 'Описание', 'До 5 000 ₽ скидки', 260),
+ ],
+ inline: [
+ inlineText('campaign-group-1-mode', 'Максимальная выгода', { tone: LogicTreeTone.BLUE }),
+ ],
+ removable: true,
+ }), {
+ tone: LogicTreeTone.BLUE,
+ children: [
+ branchNode('campaign-group-1-count', summaryData('10 акций'), {
+ childrenView: LogicTreeChildrenView.GROUPED,
+ collapsible: true,
+ expanded: true,
+ children: [
+ conditionNode('campaign-group-1-actions', actionsData('Добавить акцию', [
+ {
+ id: 'campaign-group-1-add-action',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Добавить акцию в группу',
+ },
+ ])),
+ ],
+ }),
+
+ groupNode('campaign-group-2', summaryData('Название группы #2', {
+ icon: demoIcon.FOLDER,
+ inline: [
+ inlineText('campaign-group-2-mode', 'Последовательное применение', { tone: LogicTreeTone.GREEN }),
+ inlineText('campaign-group-2-meta', 'До 5 000 ₽ оплата бонусами', { separated: true, tone: 'muted' }),
+ ],
+ removable: true,
+ }), {
+ tone: LogicTreeTone.GREEN,
+ children: [
+ branchNode('campaign-group-2-count', summaryData('12 акций'), {
+ childrenView: LogicTreeChildrenView.GROUPED,
+ collapsible: true,
+ expanded: true,
+ children: [
+ conditionNode('campaign-group-2-actions', actionsData('Добавить акцию', [
+ {
+ id: 'campaign-group-2-add-action',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Добавить акцию в группу',
+ },
+ ])),
+ ],
+ }),
+
+ conditionNode('campaign-group-2-footer-action', actionsData('Добавить группу', [
+ {
+ id: 'campaign-group-2-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ]), {
+ tone: LogicTreeTone.GREEN,
+ }),
+ ],
+ }),
+
+ groupNode('campaign-group-3', summaryData('Название группы #3', {
+ icon: demoIcon.FOLDER,
+ inline: [
+ inlineText('campaign-group-3-mode', 'Несовместимость', { tone: LogicTreeTone.RED }),
+ ],
+ removable: true,
+ }), {
+ tone: LogicTreeTone.RED,
+ children: [
+ branchNode('campaign-group-3-count', summaryData('5 акций'), {
+ childrenView: LogicTreeChildrenView.GROUPED,
+ collapsible: true,
+ expanded: true,
+ children: [
+ conditionNode('campaign-group-3-item-1', summaryData('1. Название акции #1', {
+ controls: groupedItemControls('campaign-group-3-item-1'),
+ draggable: true,
+ disabled: true,
+ inline: [
+ inlineText('campaign-group-3-item-1-meta', 'Бонусы', { tone: 'muted' }),
+ ],
+ removable: true,
+ })),
+
+ conditionNode('campaign-group-3-item-2', summaryData('2. Название акции #2', {
+ controls: groupedItemControls('campaign-group-3-item-2'),
+ draggable: true,
+ inline: [
+ inlineText('campaign-group-3-item-2-meta', 'Бонусы', { tone: 'muted' }),
+ ],
+ removable: true,
+ })),
+
+ conditionNode('campaign-group-3-item-3', summaryData('3. Название акции #3', {
+ controls: groupedItemControls('campaign-group-3-item-3'),
+ draggable: true,
+ inline: [
+ inlineText('campaign-group-3-item-3-meta', 'Бонусы', { tone: 'muted' }),
+ ],
+ removable: true,
+ })),
+
+ conditionNode('campaign-group-3-actions', actionsData('Добавить акцию', [
+ {
+ id: 'campaign-group-3-add-action',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Добавить акцию в группу',
+ },
+ ])),
+ ],
+ }),
+
+ conditionNode('campaign-group-3-footer-action', actionsData('Добавить группу', [
+ {
+ id: 'campaign-group-3-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ]), {
+ tone: LogicTreeTone.GREEN,
+ }),
+ ],
+ }),
+
+ conditionNode('campaign-group-1-footer-action', actionsData('Добавить группу', [
+ {
+ id: 'campaign-group-1-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ]), {
+ tone: LogicTreeTone.GREEN,
+ }),
+ ],
+ }),
+ conditionNode('campaign-root-footer-action', actionsData('Добавить группу', [
+ {
+ id: 'campaign-root-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ {
+ id: 'campaign-root-add-condition',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Условие',
+ },
+ ]), {
+ tone: LogicTreeTone.GREEN,
+ }),
+ ],
+ }),
+]
+
+const segmentsEditingTree: DemoLogicTreeNode[] = [
+ groupNode('segments-root', summaryData('Клиенты', {
+ inline: [
+ inlineText('segments-root-operator', 'Есть такие'),
+ ],
+ }), {
+ tone: LogicTreeTone.GREY,
+ children: [
+ groupNode('segments-order', summaryData('Заказ клиента', {
+ inline: [
+ inlineText('segments-order-operator', 'Есть такие'),
+ ],
+ }), {
+ tone: LogicTreeTone.YELLOW,
+ children: [
+ groupNode('segments-messenger', summaryData('Способ оформления', {
+ inline: [
+ inlineText('segments-messenger-operator', 'Равно Мессенджер'),
+ ],
+ }), {
+ tone: LogicTreeTone.BLUE,
+ conjunction: LogicTreeConjunction.OR,
+ children: [
+ conditionNode('segments-messenger-phone', summaryData('Телефон', {
+ inline: [
+ inlineText('segments-messenger-phone-operator', 'Есть'),
+ ],
+ }), {
+ conjunction: LogicTreeConjunction.AND,
+ }),
+ conditionNode('segments-messenger-actions', actionsData('Добавить в сегмент', [
+ {
+ id: 'segments-messenger-add-condition',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Условие',
+ },
+ {
+ id: 'segments-messenger-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ])),
+ ],
+ }),
+ groupNode('segments-site', {
+ ...summaryData('Способ оформления', {
+ controls: [
+ selectControl(
+ 'segments-site-type',
+ 'Способ оформления',
+ 'Способ оформления',
+ 252,
+ ['Способ оформления', 'Телефон', 'Канал']
+ ),
+ selectControl(
+ 'segments-site-operator',
+ 'Равно',
+ 'Равно',
+ 160,
+ ['Равно', 'Не равно', 'Есть такие']
+ ),
+ selectControl(
+ 'segments-site-value',
+ 'Сайт',
+ 'Сайт',
+ 252,
+ ['Сайт', 'Мессенджер']
+ ),
+ ],
+ removable: true,
+ }),
+ editable: true,
+ }, {
+ tone: LogicTreeTone.BLUE,
+ children: [
+ conditionNode('segments-site-phone', summaryData('Телефон', {
+ inline: [
+ inlineText('segments-site-phone-operator', 'Есть'),
+ ],
+ }), {
+ conjunction: LogicTreeConjunction.AND,
+ }),
+ conditionNode('segments-site-actions', actionsData('Добавить в сегмент', [
+ {
+ id: 'segments-site-add-condition',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Условие',
+ },
+ {
+ id: 'segments-site-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ])),
+ ],
+ }),
+ conditionNode('segments-order-actions', actionsData('Добавить в заказ', [
+ {
+ id: 'segments-order-add-condition',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Условие',
+ },
+ {
+ id: 'segments-order-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ]), {
+ tone: LogicTreeTone.YELLOW,
+ }),
+ ],
+ }),
+ conditionNode('segments-root-actions', actionsData('Добавить в корень', [
+ {
+ id: 'segments-root-add-condition',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Условие',
+ },
+ {
+ id: 'segments-root-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ]), {
+ tone: LogicTreeTone.GREY,
+ }),
+ ],
+ }),
+]
+
+const meta = {
+ title: 'Components/UiLogicTree',
+ component: UiLogicTree,
+ args: {
+ items: campaignTree,
+ styles,
+ },
+ argTypes: {
+ items: {
+ control: false,
+ table: {
+ category: 'props',
+ type: {
+ summary: 'UiLogicTreeNode[]',
+ },
+ },
+ },
+ styles: {
+ control: false,
+ table: {
+ disable: true,
+ },
+ },
+ 'node:add': {
+ control: false,
+ table: { category: 'events' },
+ },
+ 'node:edit': {
+ control: false,
+ table: { category: 'events' },
+ },
+ 'node:remove': {
+ control: false,
+ table: { category: 'events' },
+ },
+ },
+ render: createRemoteStoryRender({
+ worker: UiLogicTreeWorker,
+ }),
+ parameters: {
+ docs: { page },
+ layout: 'padded',
+ },
+} satisfies Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const CampaignArbitrage: Story = {
+ args: {
+ items: campaignTree,
+ },
+}
+
+export const SegmentsEditing: Story = {
+ args: {
+ items: segmentsEditingTree,
+ },
+}
diff --git a/packages/v1-components/storybook/stories/UiPageHeader.stories.ts b/packages/v1-components/storybook/stories/UiPageHeader.stories.ts
index d8de374a..12f4969a 100644
--- a/packages/v1-components/storybook/stories/UiPageHeader.stories.ts
+++ b/packages/v1-components/storybook/stories/UiPageHeader.stories.ts
@@ -1,14 +1,5 @@
import type { Meta, StoryObj } from '@storybook/vue3'
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiButton from '@/host/components/button/UiButton.vue'
-import UiLink from '@/host/components/link/UiLink.vue'
-import UiPageHeaderTitle from '@/host/components/page-header/UiPageHeaderTitle.vue'
-import UiPopperConnector from '@/host/components/popper/UiPopperConnector.vue'
-import UiPopperTarget from '@/host/components/popper/UiPopperTarget.vue'
-import UiTooltip from '@/host/components/tooltip/UiTooltip.vue'
-
import { UiPageHeader } from '@/remote/components/page-header'
import UiPageHeaderWorker from './UiPageHeader.remote.ts?worker'
@@ -16,15 +7,6 @@ import UiPageHeaderWorker from './UiPageHeader.remote.ts?worker'
import { createRemoteStoryRender } from '../createRemoteStoryRender'
import page from './UiPageHeader.mdx'
-const provider = createProvider({
- UiButton,
- UiLink,
- UiPageHeaderTitle,
- UiPopperConnector,
- UiPopperTarget,
- UiTooltip,
-})
-
const meta = {
title: 'Components/UiPageHeader',
@@ -44,7 +26,6 @@ const meta = {
},
render: createRemoteStoryRender({
- provider,
worker: UiPageHeaderWorker,
}),
diff --git a/packages/v1-components/storybook/stories/UiRadioSwitch.stories.ts b/packages/v1-components/storybook/stories/UiRadioSwitch.stories.ts
index 03d65f17..0aa0fb55 100644
--- a/packages/v1-components/storybook/stories/UiRadioSwitch.stories.ts
+++ b/packages/v1-components/storybook/stories/UiRadioSwitch.stories.ts
@@ -1,10 +1,5 @@
import type { Meta, StoryObj } from '@storybook/vue3'
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiRadioSwitchOptionShell from '@/host/components/radio-switch/UiRadioSwitchOptionShell.vue'
-import UiRadioSwitchRoot from '@/host/components/radio-switch/UiRadioSwitchRoot.vue'
-
import { APPEARANCE, SIZE } from '@/common/components/radio-switch'
import { UiRadioSwitch } from '@/remote/components/radio-switch'
@@ -22,11 +17,6 @@ type UiRadioSwitchStoryExtras = {
}
type UiRadioSwitchStoryArgs = UiRadioSwitchProps & UiRadioSwitchStoryExtras
-const provider = createProvider({
- UiRadioSwitchOptionShell,
- UiRadioSwitchRoot,
-})
-
const meta = {
title: 'Components/UiRadioSwitch',
@@ -52,7 +42,6 @@ const meta = {
},
render: createRemoteStoryRender({
- provider,
worker: UiRadioSwitchWorker,
}),
diff --git a/packages/v1-components/storybook/stories/UiSelect.stories.ts b/packages/v1-components/storybook/stories/UiSelect.stories.ts
index 6f40e55b..d54e03fb 100644
--- a/packages/v1-components/storybook/stories/UiSelect.stories.ts
+++ b/packages/v1-components/storybook/stories/UiSelect.stories.ts
@@ -1,14 +1,6 @@
import type { Meta } from '@storybook/vue3'
import type { StoryObj } from '@storybook/vue3'
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiMenuItem from '@/host/components/menu/UiMenuItem.vue'
-import UiMenuItemGroup from '@/host/components/menu/UiMenuItemGroup.vue'
-import UiPopperConnector from '@/host/components/popper/UiPopperConnector.vue'
-import UiSelectPopper from '@/host/components/select/UiSelectPopper.vue'
-import UiSelectTrigger from '@/host/components/select/UiSelectTrigger.vue'
-
import { PLACEMENT } from '@/common/components/select'
import { SIZE } from '@/common/components/select'
@@ -19,14 +11,6 @@ import { createRemoteStoryRender } from '../createRemoteStoryRender'
import { docsOnlyStory } from '../docsOnlyStory'
import page from './UiSelect.mdx'
-const provider = createProvider({
- UiMenuItem,
- UiMenuItemGroup,
- UiPopperConnector,
- UiSelectPopper,
- UiSelectTrigger,
-})
-
const meta = {
title: 'Components/UiSelect',
@@ -63,7 +47,6 @@ const meta = {
},
render: createRemoteStoryRender({
- provider,
worker: UiSelectWorker,
}),
diff --git a/packages/v1-components/storybook/stories/UiTab.stories.ts b/packages/v1-components/storybook/stories/UiTab.stories.ts
index c5bfb574..962820dd 100644
--- a/packages/v1-components/storybook/stories/UiTab.stories.ts
+++ b/packages/v1-components/storybook/stories/UiTab.stories.ts
@@ -1,10 +1,5 @@
import type { Meta, StoryObj } from '@storybook/vue3'
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiTab from '@/host/components/tab/UiTab.vue'
-import UiTabGroup from '@/host/components/tab/UiTabGroup.vue'
-
import { APPEARANCE, SIZE } from '@/common/components/tab'
import { UiTabGroup as RemoteUiTabGroup } from '@/remote/components/tab'
@@ -24,11 +19,6 @@ type UiTabStoryExtras = {
}
type UiTabStoryArgs = UiTabGroupProps & UiTabStoryExtras
-const provider = createProvider({
- UiTab,
- UiTabGroup,
-})
-
const meta = {
title: 'Components/UiTab',
@@ -59,7 +49,6 @@ const meta = {
},
render: createRemoteStoryRender({
- provider,
worker: UiTabWorker,
}),
diff --git a/packages/v1-components/storybook/stories/UiTable.stories.ts b/packages/v1-components/storybook/stories/UiTable.stories.ts
index 745ca685..ae973e48 100644
--- a/packages/v1-components/storybook/stories/UiTable.stories.ts
+++ b/packages/v1-components/storybook/stories/UiTable.stories.ts
@@ -3,22 +3,6 @@ import './UiTable.stories.less'
import type { Meta, StoryObj } from '@storybook/vue3'
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiAvatar from '@/host/components/avatar/UiAvatar.vue'
-import UiCheckbox from '@/host/components/checkbox/UiCheckbox.vue'
-import UiLink from '@/host/components/link/UiLink.vue'
-import UiTableBodyCell from '@/host/components/table/UiTableBodyCell.vue'
-import UiTableCol from '@/host/components/table/UiTableCol.vue'
-import UiTableFooterButton from '@/host/components/table/UiTableFooterButton.vue'
-import UiTableFooterSection from '@/host/components/table/UiTableFooterSection.vue'
-import UiTableHeadCell from '@/host/components/table/UiTableHeadCell.vue'
-import UiTableRoot from '@/host/components/table/UiTableRoot.vue'
-import UiTableRow from '@/host/components/table/UiTableRow.vue'
-import UiTableSection from '@/host/components/table/UiTableSection.vue'
-import UiTableSorter from '@/host/components/table/UiTableSorter.vue'
-import UiTag from '@/host/components/tag/UiTag.vue'
-
import { UiTable } from '../../src/remote/components/table'
import UiTableReferenceWorker from './UiTable.reference.remote.ts?worker'
import UiTableWorker from './UiTable.remote.ts?worker'
@@ -39,22 +23,6 @@ type UiTableStoryExtras = {
}
type UiTableStoryArgs = UiTableProps & UiTableStoryExtras
-const provider = createProvider({
- UiAvatar,
- UiCheckbox,
- UiLink,
- UiTableBodyCell,
- UiTableCol,
- UiTableFooterButton,
- UiTableFooterSection,
- UiTableHeadCell,
- UiTableRoot,
- UiTableRow,
- UiTableSection,
- UiTableSorter,
- UiTag,
-})
-
const meta = {
title: 'Components/UiTable',
@@ -85,7 +53,6 @@ const meta = {
},
render: createRemoteStoryRender({
- provider,
worker: UiTableWorker,
}),
@@ -191,7 +158,6 @@ export const CampaignsOverview: Story = {
},
render: createRemoteStoryRender({
- provider,
worker: UiTableReferenceWorker,
}),
diff --git a/packages/v1-components/storybook/stories/UiToggleGroup.stories.ts b/packages/v1-components/storybook/stories/UiToggleGroup.stories.ts
index 869575a6..eab9a85d 100644
--- a/packages/v1-components/storybook/stories/UiToggleGroup.stories.ts
+++ b/packages/v1-components/storybook/stories/UiToggleGroup.stories.ts
@@ -1,10 +1,5 @@
import type { Meta, StoryObj } from '@storybook/vue3'
-import { createProvider } from '@omnicajs/vue-remote/host'
-
-import UiToggleButton from '@/host/components/toggle-button/UiToggleButton.vue'
-import UiToggleGroupRoot from '@/host/components/toggle-group/UiToggleGroupRoot.vue'
-
import { UiToggleButtonSize } from '@/common/components/toggle-button'
import { UiToggleGroup } from '@/remote/components/toggle-group'
@@ -22,11 +17,6 @@ type UiToggleGroupStoryExtras = {
}
type UiToggleGroupStoryArgs = UiToggleGroupProps & UiToggleGroupStoryExtras
-const provider = createProvider({
- UiToggleButton,
- UiToggleGroupRoot,
-})
-
const meta = {
title: 'Components/UiToggleGroup',
@@ -48,7 +38,6 @@ const meta = {
},
render: createRemoteStoryRender({
- provider,
worker: UiToggleGroupWorker,
}),
diff --git a/packages/v1-components/tests/__fixtures__/logic-tree.worker.ts b/packages/v1-components/tests/__fixtures__/logic-tree.worker.ts
new file mode 100644
index 00000000..6c4836d6
--- /dev/null
+++ b/packages/v1-components/tests/__fixtures__/logic-tree.worker.ts
@@ -0,0 +1,369 @@
+import type {
+ UiLogicTreeNode,
+ UiLogicTreeNodeAddPayload,
+ UiLogicTreeNodeEditPayload,
+ UiLogicTreeNodeRemovePayload,
+ UiLogicTreeNodeSlotProps,
+ UiLogicTreeProperties,
+} from '@/common/components/logic-tree'
+
+import {
+ computed,
+ h,
+ ref,
+ watch,
+} from 'vue'
+
+import {
+ LogicTreeNodeKind,
+ LogicTreeNodeView,
+ LogicTreeTone,
+} from '@/common/components/logic-tree'
+
+import { UiLogicTree } from '@/remote/components/logic-tree'
+
+import { createComponentEndpoint } from '../../storybook/endpoint'
+
+const fixtureControlKind = {
+ SELECT: 'select',
+} as const
+
+type FixtureControlKind = typeof fixtureControlKind[keyof typeof fixtureControlKind]
+
+type FixtureOption = {
+ id: string;
+ label: string;
+ value: string;
+}
+
+type FixtureControl = {
+ clearable?: boolean;
+ id: string;
+ kind: FixtureControlKind;
+ label: string;
+ options?: FixtureOption[];
+ value?: string | null;
+}
+
+type FixtureAction = {
+ id: string;
+ kind: Exclude;
+ label: string;
+}
+
+type FixtureNodeData = {
+ actions?: FixtureAction[];
+ controls?: FixtureControl[];
+ removable?: boolean;
+ title: string;
+}
+
+type FixtureNode = UiLogicTreeNode
+type FixtureSlotProps = Omit & {
+ node: FixtureNode;
+}
+
+type UiLogicTreeWorkerProps = UiLogicTreeProperties
+
+const toFixtureSlotProps = (slotProps: UiLogicTreeNodeSlotProps): FixtureSlotProps => (
+ slotProps as FixtureSlotProps
+)
+
+const cloneNodes = (nodes: FixtureNode[]): FixtureNode[] => nodes.map((node) => ({
+ ...node,
+ children: node.children ? cloneNodes(node.children) : undefined,
+ data: {
+ ...node.data,
+ actions: node.data.actions?.map((action) => ({ ...action })),
+ controls: node.data.controls?.map((control) => ({
+ ...control,
+ options: control.options?.map((option) => ({ ...option })),
+ })),
+ },
+}))
+
+const parsePathKey = (pathKey: string | null): number[] => (
+ pathKey
+ ? pathKey.split('.').filter(Boolean).map((segment) => Number(segment))
+ : []
+)
+
+const getBranchAtPath = (nodes: FixtureNode[], parentPath: number[]): FixtureNode[] | null => {
+ let branch = nodes
+
+ for (const index of parentPath) {
+ const node = branch[index]
+
+ if (!node?.children) {
+ return null
+ }
+
+ branch = node.children
+ }
+
+ return branch
+}
+
+const getNodeAtPath = (nodes: FixtureNode[], path: number[]): FixtureNode | null => {
+ const branch = getBranchAtPath(nodes, path.slice(0, -1))
+ const index = path.at(-1)
+
+ if (index === undefined) {
+ return null
+ }
+
+ return branch?.[index] ?? null
+}
+
+const findNodePath = (
+ nodes: FixtureNode[],
+ nodeId: string,
+ parentPath: number[] = []
+): number[] | null => {
+ for (let index = 0; index < nodes.length; index += 1) {
+ const node = nodes[index]
+ const path = [...parentPath, index]
+
+ if (node.id === nodeId) {
+ return path
+ }
+
+ if (node.children?.length) {
+ const nestedPath = findNodePath(node.children, nodeId, path)
+
+ if (nestedPath) {
+ return nestedPath
+ }
+ }
+ }
+
+ return null
+}
+
+let uid = 0
+
+const nextId = (prefix: string): string => {
+ uid += 1
+
+ return `${prefix}-${uid}`
+}
+
+const createActionNode = (): FixtureNode => ({
+ id: nextId('actions'),
+ kind: LogicTreeNodeKind.CONDITION,
+ data: {
+ actions: [
+ {
+ id: nextId('add-condition'),
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Условие',
+ },
+ {
+ id: nextId('add-group'),
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ],
+ editable: false,
+ title: 'Добавить',
+ view: LogicTreeNodeView.ACTIONS,
+ },
+ tone: LogicTreeTone.BLUE,
+})
+
+const createConditionNode = (title = 'Новое условие'): FixtureNode => ({
+ id: nextId('condition'),
+ kind: LogicTreeNodeKind.CONDITION,
+ data: {
+ controls: [
+ {
+ clearable: true,
+ id: nextId('value'),
+ kind: fixtureControlKind.SELECT,
+ label: 'Значение',
+ options: [
+ { id: nextId('option'), label: 'A', value: 'A' },
+ { id: nextId('option'), label: 'B', value: 'B' },
+ ],
+ value: 'A',
+ },
+ ],
+ editable: false,
+ removable: true,
+ title,
+ view: LogicTreeNodeView.SUMMARY,
+ },
+ tone: LogicTreeTone.BLUE,
+})
+
+const createGroupNode = (): FixtureNode => ({
+ children: [createActionNode()],
+ expanded: true,
+ id: nextId('group'),
+ kind: LogicTreeNodeKind.GROUP,
+ data: {
+ editable: false,
+ removable: true,
+ title: 'Новая группа',
+ view: LogicTreeNodeView.SUMMARY,
+ },
+ tone: LogicTreeTone.GREEN,
+})
+
+createComponentEndpoint({
+ async run (createApp, root, props) {
+ const app = createApp({
+ setup () {
+ const items = ref([])
+ const controlActionCount = ref(0)
+ const controlledInfo = computed(() => [
+ `nodes:${items.value.length}`,
+ `control-actions:${controlActionCount.value}`,
+ ].join(' '))
+
+ const mutateItems = (mutator: (nextItems: FixtureNode[]) => void) => {
+ const nextItems = cloneNodes(items.value)
+
+ mutator(nextItems)
+ items.value = nextItems
+ }
+
+ const handleNodeAdd = (payload: UiLogicTreeNodeAddPayload) => {
+ mutateItems((nextItems) => {
+ const triggerPath = findNodePath(nextItems, payload.triggerNodeId)
+ const branch = getBranchAtPath(nextItems, parsePathKey(payload.parentPathKey))
+ const actionIndex = triggerPath?.at(-1)
+
+ if (!triggerPath || !branch || actionIndex === undefined) {
+ return
+ }
+
+ const nextNode = payload.kind === LogicTreeNodeKind.GROUP
+ ? createGroupNode()
+ : createConditionNode()
+
+ branch.splice(actionIndex, 0, nextNode)
+ })
+ }
+
+ const handleNodeEdit = (payload: UiLogicTreeNodeEditPayload) => {
+ mutateItems((nextItems) => {
+ const node = getNodeAtPath(nextItems, parsePathKey(payload.pathKey))
+ const control = node?.data.controls?.find((item) => item.id === payload.controlId)
+
+ if (control) {
+ control.value = payload.value
+ }
+ })
+ }
+
+ const handleNodeRemove = (payload: UiLogicTreeNodeRemovePayload) => {
+ mutateItems((nextItems) => {
+ const branch = getBranchAtPath(nextItems, parsePathKey(payload.parentPathKey))
+
+ if (!branch || payload.index < 0 || payload.index >= branch.length) {
+ return
+ }
+
+ branch.splice(payload.index, 1)
+ })
+ }
+
+ const handleControlAction = () => {
+ controlActionCount.value += 1
+ }
+
+ const renderSummary = (slotProps: FixtureSlotProps) => h('div', {
+ 'data-test': `summary-${slotProps.node.id}`,
+ }, slotProps.node.data.title)
+
+ const renderEdit = (slotProps: FixtureSlotProps) => h('div', {
+ 'data-test': `edit-${slotProps.node.id}`,
+ }, [
+ ...(slotProps.node.data.controls ?? []).flatMap((control) => [
+ h('span', {
+ 'data-test': `value-${control.id}`,
+ key: `${control.id}-value`,
+ }, control.value === null ? 'null' : String(control.value ?? 'empty')),
+ h('button', {
+ 'data-skip-node-click': 'true',
+ 'data-test': `clear-${control.id}`,
+ key: `${control.id}-clear`,
+ onClick: () => {
+ slotProps.onControlUpdate(control.id, null)
+ },
+ }, 'clear'),
+ h('button', {
+ 'data-skip-node-click': 'true',
+ 'data-test': `action-${control.id}`,
+ key: `${control.id}-action`,
+ onClick: () => {
+ slotProps.onControlAction(control.id)
+ },
+ }, 'action'),
+ ]),
+ ])
+
+ const renderActions = (slotProps: FixtureSlotProps) => (
+ slotProps.node.data.actions ?? []
+ ).map((action) => h('button', {
+ 'data-skip-node-click': 'true',
+ 'data-test': `action-${action.id}`,
+ key: action.id,
+ onClick: () => {
+ slotProps.onAction(action.id, action.kind)
+ },
+ }, action.label))
+
+ const renderTrailing = (slotProps: FixtureSlotProps) => slotProps.node.data.removable
+ ? h('button', {
+ 'data-skip-node-click': 'true',
+ 'data-test': `remove-${slotProps.node.id}`,
+ onClick: slotProps.onRemove,
+ }, 'remove')
+ : null
+
+ const renderNode = (slotProps: FixtureSlotProps) => {
+ if (slotProps.nodeView === LogicTreeNodeView.ACTIONS) {
+ return renderActions(slotProps)
+ }
+
+ if (slotProps.editing) {
+ return renderEdit(slotProps)
+ }
+
+ return renderSummary(slotProps)
+ }
+
+ watch(() => props.items, (nextItems) => {
+ items.value = cloneNodes(nextItems ?? [])
+ }, { deep: true, immediate: true })
+
+ return () => h('div', {
+ 'data-test': 'logic-tree-fixture',
+ }, [
+ h('div', {
+ 'data-test': 'controlled-info',
+ }, controlledInfo.value),
+ h(UiLogicTree, {
+ onControlAction: handleControlAction,
+ 'onNode:add': handleNodeAdd,
+ 'onNode:edit': handleNodeEdit,
+ 'onNode:remove': handleNodeRemove,
+ 'onUpdate:items': (nextItems: FixtureNode[]) => {
+ items.value = cloneNodes(nextItems)
+ },
+ items: items.value,
+ }, {
+ 'node': (slotProps: UiLogicTreeNodeSlotProps) => renderNode(toFixtureSlotProps(slotProps)),
+ 'node-trailing': (slotProps: UiLogicTreeNodeSlotProps) => renderTrailing(toFixtureSlotProps(slotProps)),
+ }),
+ ])
+ },
+ })
+
+ app.mount(root)
+
+ return () => app.unmount()
+ },
+}, self as unknown as Worker)
diff --git a/packages/v1-components/tests/host/components/logic-tree-node.test.ts b/packages/v1-components/tests/host/components/logic-tree-node.test.ts
new file mode 100644
index 00000000..30329e0f
--- /dev/null
+++ b/packages/v1-components/tests/host/components/logic-tree-node.test.ts
@@ -0,0 +1,95 @@
+import type { VueWrapper } from '@vue/test-utils'
+
+import {
+ afterEach,
+ describe,
+ expect,
+ test,
+} from 'vitest'
+
+import { mount } from '@vue/test-utils'
+
+import UiLogicTreeNode from '@/host/components/logic-tree/UiLogicTreeNode.vue'
+
+import { LogicTreeConjunction, LogicTreeTone } from '@/common/components/logic-tree'
+
+describe('host/components/logic-tree-node', () => {
+ let wrapper: VueWrapper | null = null
+
+ const createComponent = (props = {}, slots = {}) => {
+ wrapper = mount(UiLogicTreeNode, {
+ props,
+ slots: {
+ ...slots,
+ content: 'Node content',
+ trailing: '',
+ },
+ })
+ }
+
+ afterEach(() => {
+ wrapper?.unmount()
+ wrapper = null
+ })
+
+ test('emits node activation events for enabled nodes', async () => {
+ createComponent({
+ pathKey: '0.1',
+ })
+
+ await wrapper?.find('.ui-v1-logic-tree__surface-node-content').trigger('click')
+
+ expect(wrapper?.emitted('node-click')).toEqual([['0.1']])
+ expect(wrapper?.emitted('node-edit')).toEqual([[true]])
+ })
+
+ test('renders disabled node as non-interactive', async () => {
+ createComponent({
+ disabled: true,
+ pathKey: '0.1',
+ })
+
+ const node = wrapper?.find('.ui-v1-logic-tree__surface-node-content')
+
+ expect(node?.classes()).toContain('ui-v1-logic-tree__surface-node-content_disabled')
+ expect(node?.attributes('aria-disabled')).toBe('true')
+ expect(node?.attributes('role')).toBe('button')
+ expect(node?.attributes('tabindex')).toBeUndefined()
+
+ await node?.trigger('click')
+ await node?.trigger('keydown', { key: 'Enter' })
+
+ expect(wrapper?.emitted('node-click')).toBeUndefined()
+ expect(wrapper?.emitted('node-edit')).toBeUndefined()
+ })
+
+ test('renders conjunction as a popper target with consumer poppers slot', async () => {
+ createComponent({
+ conjunction: LogicTreeConjunction.AND,
+ conjunctionLabel: 'AND',
+ conjunctionTone: LogicTreeTone.BLUE,
+ connectors: [
+ {
+ continues: false,
+ tone: LogicTreeTone.BLUE,
+ visible: true,
+ },
+ ],
+ pathKey: '0.1',
+ }, {
+ 'conjunction-poppers': 'Popper content',
+ })
+
+ const target = wrapper?.find('.ui-v1-logic-tree__relation-badge')
+
+ expect(target?.element.tagName).toBe('BUTTON')
+ expect(target?.attributes('type')).toBe('button')
+ expect(target?.text()).toBe('AND')
+ expect(wrapper?.find('[data-test-id="conjunction-popper"]').exists()).toBe(true)
+
+ await target?.trigger('click')
+
+ expect(wrapper?.emitted('node-click')).toBeUndefined()
+ expect(wrapper?.emitted('node-edit')).toBeUndefined()
+ })
+})
diff --git a/packages/v1-components/tests/logic-tree.worker.e2e.ts b/packages/v1-components/tests/logic-tree.worker.e2e.ts
new file mode 100644
index 00000000..ff7f10f2
--- /dev/null
+++ b/packages/v1-components/tests/logic-tree.worker.e2e.ts
@@ -0,0 +1,328 @@
+import type { Channel } from '@omnicajs/vue-remote/remote'
+import type { Receiver } from '@omnicajs/vue-remote/host'
+import type { UiLogicTreeNode } from '@/common/components/logic-tree'
+
+import {
+ afterEach,
+ beforeEach,
+ expect,
+ test,
+} from 'vitest'
+
+import { createApp } from 'vue'
+import { createReceiver } from '@omnicajs/vue-remote/host'
+import { createEndpoint as createRpcEndpoint } from '@remote-ui/rpc'
+import { flushPromises } from '@vue/test-utils'
+import { h } from 'vue'
+import { HostedTree } from '@omnicajs/vue-remote/host'
+
+import {
+ LogicTreeNodeKind,
+ LogicTreeNodeView,
+ LogicTreeTone,
+} from '@/common/components/logic-tree'
+
+import { storybookHostProvider } from '../storybook/provider'
+
+type FixtureNodeData = {
+ actions?: Array<{
+ id: string;
+ kind: Exclude;
+ label: string;
+ }>;
+ controls?: Array<{
+ clearable?: boolean;
+ id: string;
+ kind: 'select';
+ label: string;
+ options?: Array<{
+ id: string;
+ label: string;
+ value: string;
+ }>;
+ value?: string | null;
+ }>;
+ removable?: boolean;
+ title: string;
+}
+
+type FixtureNode = UiLogicTreeNode
+
+type WorkerApi = {
+ run (channel: Channel, props?: { items?: FixtureNode[] }): Promise;
+ release (): void;
+}
+
+function createHostApp (receiver: Receiver) {
+ return createApp({
+ setup () {
+ return () => h(HostedTree, {
+ provider: storybookHostProvider,
+ receiver,
+ })
+ },
+ })
+}
+
+async function flushRuntime (receiver: Receiver) {
+ await receiver.flush()
+ await flushPromises()
+}
+
+async function waitFor (
+ receiver: Receiver,
+ resolver: () => T | null | undefined,
+ message: string
+): Promise {
+ for (let i = 0; i < 60; i += 1) {
+ const value = resolver()
+
+ if (value) {
+ return value
+ }
+
+ await new Promise(resolve => setTimeout(resolve, 10))
+ await flushRuntime(receiver)
+ }
+
+ throw new Error(message)
+}
+
+let mountRoot: HTMLElement | null = null
+
+beforeEach(() => {
+ mountRoot = document.createElement('div')
+ document.body.appendChild(mountRoot)
+})
+
+afterEach(() => {
+ mountRoot?.remove()
+ mountRoot = null
+})
+
+test('worker keeps add/edit/remove controlled and supports keyboard activation', async () => {
+ const worker = new Worker(new URL('./__fixtures__/logic-tree.worker.ts', import.meta.url), { type: 'module' })
+ const host = createRpcEndpoint(worker)
+ const receiver = createReceiver()
+ const mount = document.createElement('div')
+
+ const items: FixtureNode[] = [
+ {
+ id: 'condition-root',
+ kind: LogicTreeNodeKind.CONDITION,
+ data: {
+ controls: [
+ {
+ clearable: true,
+ id: 'condition-root-control',
+ kind: 'select',
+ label: 'Значение',
+ options: [
+ { id: 'condition-root-control-option-a', label: 'A', value: 'A' },
+ { id: 'condition-root-control-option-b', label: 'B', value: 'B' },
+ ],
+ value: 'A',
+ },
+ ],
+ editable: false,
+ removable: false,
+ title: 'Узел 1',
+ view: LogicTreeNodeView.SUMMARY,
+ },
+ tone: LogicTreeTone.BLUE,
+ },
+ {
+ id: 'actions-root',
+ kind: LogicTreeNodeKind.CONDITION,
+ data: {
+ actions: [
+ {
+ id: 'action-add-condition',
+ kind: LogicTreeNodeKind.CONDITION,
+ label: 'Условие',
+ },
+ {
+ id: 'action-add-group',
+ kind: LogicTreeNodeKind.GROUP,
+ label: 'Группа',
+ },
+ ],
+ editable: false,
+ title: 'Добавить',
+ view: LogicTreeNodeView.ACTIONS,
+ },
+ tone: LogicTreeTone.BLUE,
+ },
+ {
+ children: [
+ {
+ id: 'group-root-child',
+ kind: LogicTreeNodeKind.CONDITION,
+ data: {
+ editable: false,
+ removable: false,
+ title: 'Акция внутри группы',
+ view: LogicTreeNodeView.SUMMARY,
+ },
+ tone: LogicTreeTone.GREEN,
+ },
+ ],
+ collapsible: true,
+ expanded: true,
+ id: 'group-root',
+ kind: LogicTreeNodeKind.GROUP,
+ data: {
+ editable: false,
+ removable: false,
+ title: '2 акции',
+ view: LogicTreeNodeView.SUMMARY,
+ },
+ tone: LogicTreeTone.GREEN,
+ },
+ ]
+
+ mountRoot?.appendChild(mount)
+ createHostApp(receiver).mount(mount)
+
+ try {
+ await host.call.run(receiver.receive, { items })
+ await flushRuntime(receiver)
+
+ const nodeSurface = await waitFor(
+ receiver,
+ () => mount.querySelector('[data-path-key="0"] .ui-v1-logic-tree__surface-node-content') as HTMLElement | null,
+ 'Timed out waiting for first logic-tree node'
+ )
+
+ const groupSurface = await waitFor(
+ receiver,
+ () => mount.querySelector('[data-path-key="2"] .ui-v1-logic-tree__surface-node-content') as HTMLElement | null,
+ 'Timed out waiting for collapsible logic-tree node'
+ )
+
+ expect(mount.querySelector('[data-test="summary-group-root"]')?.textContent).toContain('2 акции')
+ expect(mount.querySelector('[data-test="summary-group-root-child"]')?.textContent).toContain('Акция внутри группы')
+
+ groupSurface.click()
+ await flushRuntime(receiver)
+
+ expect(mount.querySelector('[data-test="summary-group-root"]')?.textContent).toContain('2 акции')
+ expect(mount.querySelector('[data-test="edit-group-root"]')).toBeNull()
+
+ await waitFor(
+ receiver,
+ () => mount.querySelector('[data-test="summary-group-root-child"]') === null
+ ? mount.querySelector('[data-test="logic-tree-fixture"]')
+ : null,
+ 'Timed out waiting for collapsible node to collapse'
+ )
+
+ nodeSurface.focus()
+ nodeSurface.dispatchEvent(new KeyboardEvent('keydown', {
+ bubbles: true,
+ cancelable: true,
+ key: 'Enter',
+ }))
+
+ await flushRuntime(receiver)
+
+ const editNode = await waitFor(
+ receiver,
+ () => mount.querySelector('[data-test="edit-condition-root"]') as HTMLElement | null,
+ 'Timed out waiting for edit node after Enter key'
+ )
+
+ expect(editNode.textContent).toContain('A')
+
+ const clearButton = mount.querySelector('[data-test="clear-condition-root-control"]')
+
+ if (!(clearButton instanceof HTMLButtonElement)) {
+ throw new Error('Expected clear button to exist')
+ }
+
+ clearButton.click()
+ await flushRuntime(receiver)
+
+ await waitFor(
+ receiver,
+ () => mount.querySelector('[data-test="value-condition-root-control"]')?.textContent === 'null'
+ ? mount.querySelector('[data-test="value-condition-root-control"]')
+ : null,
+ 'Timed out waiting for null control value'
+ )
+
+ document.body.click()
+ await flushRuntime(receiver)
+
+ nodeSurface.focus()
+ nodeSurface.dispatchEvent(new KeyboardEvent('keydown', {
+ bubbles: true,
+ cancelable: true,
+ key: ' ',
+ }))
+
+ await flushRuntime(receiver)
+
+ await waitFor(
+ receiver,
+ () => mount.querySelector('[data-test="edit-condition-root"]') as HTMLElement | null,
+ 'Timed out waiting for edit node after Space key'
+ )
+
+ const addConditionButton = mount.querySelector('[data-test="action-action-add-condition"]')
+
+ if (!(addConditionButton instanceof HTMLButtonElement)) {
+ throw new Error('Expected add condition button to exist')
+ }
+
+ addConditionButton.click()
+ await flushRuntime(receiver)
+
+ await waitFor(
+ receiver,
+ () => Array.from(mount.querySelectorAll('[data-test^="summary-"]'))
+ .find((node) => node.textContent?.includes('Новое условие')) as HTMLElement | null,
+ 'Timed out waiting for added condition node'
+ )
+
+ const addGroupButton = await waitFor(
+ receiver,
+ () => mount.querySelector('[data-test="action-action-add-group"]') as HTMLButtonElement | null,
+ 'Timed out waiting for add group button'
+ )
+
+ addGroupButton.click()
+ await flushRuntime(receiver)
+
+ await waitFor(
+ receiver,
+ () => Array.from(mount.querySelectorAll('[data-test^="summary-"]'))
+ .find((node) => node.textContent?.includes('Новая группа')) as HTMLElement | null,
+ 'Timed out waiting for added group node'
+ )
+
+ const addedConditionRemoveButton = await waitFor(
+ receiver,
+ () => mount.querySelector('[data-test="remove-condition-1"]') as HTMLButtonElement | null,
+ 'Timed out waiting for remove button on added condition'
+ )
+
+ addedConditionRemoveButton.click()
+ await flushRuntime(receiver)
+
+ await waitFor(
+ receiver,
+ () => mount.querySelector('[data-test="remove-condition-1"]') === null
+ ? mount.querySelector('[data-test="logic-tree-fixture"]')
+ : null,
+ 'Timed out waiting for added condition removal'
+ )
+
+ expect(
+ Array.from(mount.querySelectorAll('[data-test^="summary-"]')).some((node) => node.textContent?.includes('Новая группа'))
+ ).toBe(true)
+ } finally {
+ await host.call.release()
+ worker.terminate()
+ }
+})